155 lines
2.6 KiB
Vue
155 lines
2.6 KiB
Vue
<template>
|
||
<div class="summary13" :class="'summary13-' + theme">
|
||
<div class="summary13-item" v-for="(item, index) in data" :key="index" v-if="index < 4">
|
||
<h2>{{ item[keys] }}：</h2>
|
||
<p>{{ item[value] }}</p>
|
||
<i class="lt"></i>
|
||
<i class="lb"></i>
|
||
<i class="rt"></i>
|
||
<i class="rb"></i>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'summary13',
|
||
|
||
props: {
|
||
data: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
|
||
keys: {
|
||
type: String,
|
||
default: 'key'
|
||
},
|
||
|
||
value: {
|
||
type: String,
|
||
default: 'value'
|
||
},
|
||
|
||
theme: {
|
||
type: String,
|
||
default: '0'
|
||
}
|
||
},
|
||
|
||
data () {
|
||
return {
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.summary13 {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
div {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.summary13-item {
|
||
display: flex;
|
||
position: relative;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 150px;
|
||
height: 40px;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
border-top: 1px solid #717171;
|
||
border-bottom: 1px solid #717171;
|
||
|
||
h2 {
|
||
color: #C4D8DB;
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
}
|
||
|
||
p {
|
||
color: #C4D8DB;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.lt {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 11;
|
||
width: 1px;
|
||
height: 14px;
|
||
background: #717171;
|
||
content: ' ';
|
||
}
|
||
|
||
.lb {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
z-index: 11;
|
||
width: 1px;
|
||
height: 14px;
|
||
background: #717171;
|
||
content: ' ';
|
||
}
|
||
.rt {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
z-index: 11;
|
||
width: 1px;
|
||
height: 14px;
|
||
background: #717171;
|
||
content: ' ';
|
||
}
|
||
|
||
.rb {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 11;
|
||
width: 1px;
|
||
height: 14px;
|
||
background: #717171;
|
||
content: ' ';
|
||
}
|
||
}
|
||
|
||
&.summary13-1 {
|
||
.summary13-item {
|
||
border-top: 1px solid #9f6456;
|
||
border-bottom: 1px solid #9f6456;
|
||
|
||
.lt {
|
||
background: #9f6456;
|
||
}
|
||
|
||
.lb {
|
||
background: #9f6456;
|
||
}
|
||
|
||
.rt {
|
||
background: #9f6456;
|
||
}
|
||
|
||
.rb {
|
||
background: #9f6456;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|