边框由标题和主体两部分组成。
标题包括 索引 标题 和 英文标题。
主体是一个背景图加一个插槽。
效果图
效果演示
组件代码
<template>
<div class="itemBody">
<div class="pageTitle">
<div class="pageTitlel">
<span>{{ index }}</span>
<p>{{ title }}</p>
</div>
<div class="pageTitler">
{{ desc }}
</div>
</div>
<div class="itemBodyInner">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
data() {
return {}
},
components: {},
computed: {},
props: {
index: {
type: Number,
default() {
return 1;
}
},
title: {
type: String,
default() {
return '疫情状况';
}
},
desc: {
type: String,
default() {
return 'Epidemic situation';
}
},
},
mounted() {
var that = this;
},
methods: {},
filters: {},
watch: {}
}
</script>
<style lang="scss" scoped>
.itemBody {
position: relative;
width: 100%;
height: 100%;
.pageTitle {
width: 100%;
height: 28px;
background: rgba(17, 93, 90, 0.8);
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
.pageTitlel {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
span {
width: 28px;
height: 28px;
background: #3CB1A5;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
font-size: 15px;
font-family: AiDeep;
font-weight: bold;
font-style: italic;
color: #D4FEFF;
}
p {
font-size: 16px;
font-family: PingFang;
font-weight: bold;
color: #C6ECEB;
padding-left: 10px;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.pageTitler {
font-size: 12px;
font-family: AlibabaPuHuiTiR;
font-weight: 400;
font-style: italic;
color: #C6ECEB;
margin-right: 15px;
text-align: right;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.itemBodyInner {
position: relative;
width: 100%;
height: calc(100% - 43px);
background: url("./assets/itembg.png") no-repeat;
background-size: 100% 100%;
}
}
</style>