构建版本修改
This commit is contained in:
aixianling
137
components/layout/AiDvSummary/components/DonutChart.vue
Normal file
137
components/layout/AiDvSummary/components/DonutChart.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div class="DonutChart" :id="id">
|
||||
<canvas :id="canvasId"></canvas>
|
||||
<div class="DonutChart-text">
|
||||
<span>{{ ratio }}</span>
|
||||
<i>%</i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['ratio'],
|
||||
|
||||
data () {
|
||||
return {
|
||||
id: `DonutChart-${Math.ceil(Math.random() * 10000)}`,
|
||||
canvasId: `DonutChartCanvas-${Math.ceil(Math.random() * 10000)}`,
|
||||
canvasWidth: 90,
|
||||
canvasHeight: 90
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
drawLine(ctx, options) {
|
||||
const { beginX, beginY, endX, endY, lineColor, lineWidth } = options
|
||||
ctx.lineWidth = lineWidth
|
||||
ctx.strokeStyle = lineColor
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(beginX, beginY)
|
||||
ctx.lineTo(endX, endY)
|
||||
ctx.closePath()
|
||||
ctx.stroke()
|
||||
},
|
||||
|
||||
angle (a, i, ox, oy, or) {
|
||||
var hudu = (2 * Math.PI / 360) * a * i
|
||||
var x = ox + Math.sin(hudu) * or
|
||||
var y = oy - Math.cos(hudu) * or
|
||||
return x + '_' + y
|
||||
},
|
||||
|
||||
mapColor (value) {
|
||||
if (value < 25) {
|
||||
return '#FFC139'
|
||||
}
|
||||
|
||||
if (value < 50) {
|
||||
return '#21E03E'
|
||||
}
|
||||
|
||||
return '#05C8FF'
|
||||
},
|
||||
|
||||
init () {
|
||||
const ctx = document.querySelector(`#${this.canvasId}`).getContext('2d')
|
||||
const canvasWidth = document.querySelector(`#${this.id}`).offsetWidth
|
||||
const canvasHeight = document.querySelector(`#${this.id}`).offsetHeight
|
||||
const angle = this.ratio / 100 * 2
|
||||
let radian = 0
|
||||
|
||||
ctx.width = canvasWidth
|
||||
ctx.height = canvasHeight
|
||||
const x = canvasWidth / 2
|
||||
const y = canvasHeight / 2
|
||||
ctx.lineWidth = 4
|
||||
ctx.strokeStyle = 'rgba(250, 140, 22, 0.5)'
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, x - 8, 0, 2 * Math.PI)
|
||||
ctx.stroke()
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.lineWidth = 8
|
||||
ctx.strokeStyle = 'rgba(255, 225, 94, 1)'
|
||||
|
||||
if (this.ratio < 25) {
|
||||
radian = 3 / 2 + angle
|
||||
ctx.arc(x, y, x - 8, Math.PI + Math.PI / 2, Math.PI * radian, false)
|
||||
} else if (this.ratio === 100) {
|
||||
ctx.arc(x, y, x - 8, 0, Math.PI * 2)
|
||||
} else {
|
||||
radian = (this.ratio - 25) / 100 * 2
|
||||
ctx.arc(x, y, x - 8, Math.PI + Math.PI / 2, Math.PI * radian, false)
|
||||
}
|
||||
ctx.stroke()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.DonutChart {
|
||||
position: relative;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
overflow: hidden;
|
||||
|
||||
.DonutChart-text {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
justify-content: center;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
span {
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
color: #CEE1FF;
|
||||
text-shadow: 0px 2px 4px rgba(117, 9, 9, 0.1);
|
||||
background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
i {
|
||||
position: relative;
|
||||
bottom: -8px;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
color: #CEE1FF;
|
||||
text-shadow: 0px 2px 4px rgba(117, 9, 9, 0.1);
|
||||
background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
104
components/layout/AiDvSummary/components/Summary0.vue
Normal file
104
components/layout/AiDvSummary/components/Summary0.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div class="summary0">
|
||||
<div class="summary0-item" v-for="(item, index) in data" :key="index">
|
||||
<h2>{{ item[value] }}</h2>
|
||||
<p>{{ item[keys] }}</p>
|
||||
<div class="corner left-top"></div>
|
||||
<div class="corner right-top"></div>
|
||||
<div class="corner left-bottom"></div>
|
||||
<div class="corner right-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'summary0',
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
|
||||
keys: {
|
||||
type: String,
|
||||
default: 'key'
|
||||
},
|
||||
|
||||
value: {
|
||||
type: String,
|
||||
default: 'value'
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.summary0 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.summary0-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 180px;
|
||||
height: 100px;
|
||||
box-shadow: 0 0 14px 10px #0e3a77 inset;
|
||||
background: transparent;
|
||||
|
||||
.corner {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-image: url(./../asset/corner.svg);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.corner.left-top {
|
||||
left: -6px;
|
||||
top: -6px;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
.corner.right-top {
|
||||
right: -6px;
|
||||
top: -6px;
|
||||
}
|
||||
.corner.left-bottom {
|
||||
left: -6px;
|
||||
bottom: -6px;
|
||||
transform: rotateX(180deg) rotateY(180deg);
|
||||
}
|
||||
.corner.right-bottom {
|
||||
right: -6px;
|
||||
bottom: -6px;
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 24px;
|
||||
font-size: 16px;
|
||||
color: #8BCCFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
88
components/layout/AiDvSummary/components/Summary1.vue
Normal file
88
components/layout/AiDvSummary/components/Summary1.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="summary1">
|
||||
<div class="summary1-item" v-for="(item, index) in data" :key="index">
|
||||
<h2>{{ item[keys] }}</h2>
|
||||
<p>{{ item[value] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'summary1',
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
|
||||
keys: {
|
||||
type: String,
|
||||
default: 'key'
|
||||
},
|
||||
|
||||
value: {
|
||||
type: String,
|
||||
default: 'value'
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.summary1 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.summary1-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 195px;
|
||||
height: 180px;
|
||||
padding-top: 58px;
|
||||
background-image: url(https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/number-bg.png);
|
||||
background-size: 100% 100%;
|
||||
|
||||
h2 {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
background-image: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 1) 0%,
|
||||
rgba(235, 249, 255, 1) 36%,
|
||||
rgba(53, 190, 255, 1) 100%
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 20px;
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: #8BCCFF;
|
||||
background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(235, 249, 255, 1) 36%, rgba(53, 190, 255, 1) 100% );
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
105
components/layout/AiDvSummary/components/Summary10.vue
Normal file
105
components/layout/AiDvSummary/components/Summary10.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="summary10">
|
||||
<div class="summary10-item" v-for="(item, index) in data" :key="index">
|
||||
<p>{{ item[keys] }}</p>
|
||||
<h2>{{ item[value] }}</h2>
|
||||
<div class="corner left-top"></div>
|
||||
<div class="corner right-top"></div>
|
||||
<div class="corner left-bottom"></div>
|
||||
<div class="corner right-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Summary10',
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
|
||||
keys: {
|
||||
type: String,
|
||||
default: 'key'
|
||||
},
|
||||
|
||||
value: {
|
||||
type: String,
|
||||
default: 'value'
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.summary10 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.summary10-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 210px;
|
||||
height: 50px;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 14px 10px rgba(32, 133, 255, 0.5) inset;
|
||||
background: transparent;
|
||||
|
||||
.corner {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-image: url(./../asset/corner.svg);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.corner.left-top {
|
||||
left: -6px;
|
||||
top: -6px;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
.corner.right-top {
|
||||
right: -6px;
|
||||
top: -6px;
|
||||
}
|
||||
.corner.left-bottom {
|
||||
left: -6px;
|
||||
bottom: -6px;
|
||||
transform: rotateX(180deg) rotateY(180deg);
|
||||
}
|
||||
.corner.right-bottom {
|
||||
right: -6px;
|
||||
bottom: -6px;
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
color: #8BCCFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
107
components/layout/AiDvSummary/components/Summary11.vue
Normal file
107
components/layout/AiDvSummary/components/Summary11.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="Summary11">
|
||||
<div class="summary5-item" v-for="(item, index) in data" :key="index">
|
||||
<img class="left" src="https://cdn.cunwuyun.cn/dvcp/dv/img/ms.png">
|
||||
<div class="middle">
|
||||
<h2>{{ item[keys] }}</h2>
|
||||
<p>{{ item[value] }}</p>
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/img/dh.svg">
|
||||
</div>
|
||||
<img class="right" src="https://cdn.cunwuyun.cn/dvcp/dv/img/ms.png">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Summary11',
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
|
||||
keys: {
|
||||
type: String,
|
||||
default: 'key'
|
||||
},
|
||||
|
||||
value: {
|
||||
type: String,
|
||||
default: 'value'
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
},
|
||||
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Summary11 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.summary5-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
|
||||
& > img {
|
||||
width: 50px;
|
||||
height: 102px;
|
||||
}
|
||||
|
||||
.right {
|
||||
position: relative;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.middle {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
height: 27px;
|
||||
font-size: 20px;
|
||||
color: #CEE1FF;
|
||||
line-height: 27px;
|
||||
text-shadow: 0px 4px 4px rgba(86, 0, 0, 0.1);
|
||||
background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 8px 0 4px;
|
||||
font-size: 32px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #CEE1FF;
|
||||
line-height: 35px;
|
||||
text-shadow: 0px 4px 4px rgba(117, 9, 9, 0.1);
|
||||
background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
156
components/layout/AiDvSummary/components/Summary2.vue
Normal file
156
components/layout/AiDvSummary/components/Summary2.vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div class="summary2">
|
||||
<div class="summary2-title">{{ summaryTitle }}</div>
|
||||
<div class="summary2-item" v-for="(item, index) in data" :key="index" v-show="index < 2">
|
||||
<h2>{{ item[value] }}</h2>
|
||||
<p>{{ item[keys] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'summary2',
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
|
||||
summaryTitle: {
|
||||
type: String,
|
||||
default: '居民上报统计'
|
||||
},
|
||||
|
||||
keys: {
|
||||
type: String,
|
||||
default: 'key'
|
||||
},
|
||||
|
||||
value: {
|
||||
type: String,
|
||||
default: 'value'
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.summary2 {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 800px;
|
||||
height: 180px;
|
||||
padding: 0 90px;
|
||||
box-sizing: border-box;
|
||||
background: url(./../asset/summary1-bg.svg) center;
|
||||
background-size: 800px 180px;
|
||||
|
||||
.summary2-title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
z-index: 1;
|
||||
font-size: 28px;
|
||||
background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(161, 228, 255, 1) 100% );
|
||||
text-shadow: 0px 4px 20px rgb(52, 95, 255);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -20px;
|
||||
z-index: 1;
|
||||
width: 35px;
|
||||
height: 22px;
|
||||
content: '';
|
||||
background: url(./../asset/jt.svg) center;
|
||||
background-size: 40px 112px;
|
||||
transform: translate(-100%, -50%);
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -20px;
|
||||
z-index: 1;
|
||||
width: 35px;
|
||||
height: 22px;
|
||||
content: '';
|
||||
background: url(./../asset/jt.svg) center;
|
||||
background-size: 40px 112px;
|
||||
transform: translate(100%, -50%) rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 40px;
|
||||
height: 112px;
|
||||
content: '';
|
||||
background: url(./../asset/top.svg) center;
|
||||
background-size: 40px 112px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
width: 40px;
|
||||
height: 112px;
|
||||
content: '';
|
||||
background: url(./../asset/top.svg) center;
|
||||
background-size: 40px 112px;
|
||||
transform: translateY(-50%) rotate(180deg);
|
||||
}
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.summary2-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 195px;
|
||||
height: 180px;
|
||||
line-height: 1;
|
||||
padding-top: 58px;
|
||||
|
||||
h2 {
|
||||
color: #fff;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 253, 243, 1) 36%, rgba(255, 203, 101, 1) 100% );
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #8BCCFF;
|
||||
background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 253, 243, 1) 36%, rgba(255, 203, 101, 1) 100% );
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
94
components/layout/AiDvSummary/components/Summary3.vue
Normal file
94
components/layout/AiDvSummary/components/Summary3.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div class="summary3">
|
||||
<div class="summary3-item" v-for="(item, index) in data" :key="index">
|
||||
<h2>{{ item[value] }}</h2>
|
||||
<p>{{ item[keys] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'summary3',
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
|
||||
keys: {
|
||||
type: String,
|
||||
default: 'key'
|
||||
},
|
||||
|
||||
value: {
|
||||
type: String,
|
||||
default: 'value'
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.summary3 {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
width: 800px;
|
||||
box-sizing: border-box;
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.summary3-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 214px;
|
||||
height: 164px;
|
||||
line-height: 1;
|
||||
padding-top: 58px;
|
||||
background: url(./../asset/summary3-small.svg);
|
||||
background-size: 100% 164px;
|
||||
transform: scale(0.8);
|
||||
|
||||
&:nth-of-type(2) {
|
||||
width: 280px;
|
||||
height: 180px;
|
||||
background: url(./../asset/summary3-big.svg);
|
||||
background-size: 100% 180px;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #fff;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(235, 249, 255, 1) 36%, rgba(53, 190, 255, 1) 100% );
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #8BCCFF;
|
||||
background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(235, 249, 255, 1) 36%, rgba(53, 190, 255, 1) 100% );
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
115
components/layout/AiDvSummary/components/Summary4.vue
Normal file
115
components/layout/AiDvSummary/components/Summary4.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div class="summary4">
|
||||
<div class="summary4-item" v-for="(item, index) in data" :key="index" v-show="index < 3">
|
||||
<p>{{ item[value] }}</p>
|
||||
<h2>{{ item[keys] }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Summary4',
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
|
||||
keys: {
|
||||
type: String,
|
||||
default: 'key'
|
||||
},
|
||||
|
||||
value: {
|
||||
type: String,
|
||||
default: 'value'
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.summary4 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.summary4-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 130px;
|
||||
height: 108px;
|
||||
padding: 18px 0 ;
|
||||
font-size: 0;
|
||||
background-image: url(./../asset/summary4-small.svg);
|
||||
background-size: 100% 100%;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
background: #FDDD60;
|
||||
content: '';
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
left: -48px;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
z-index: 1;
|
||||
left: -24px;
|
||||
width: 160px;
|
||||
height: 140px;
|
||||
padding-top: 28px;
|
||||
padding: 28px ;
|
||||
background-image: url(./../asset/summary4-big.svg);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
background-image: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 1) 0%,
|
||||
rgba(140, 209, 255, 1) 100%
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
color: #8BCCFF;
|
||||
background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(235, 249, 255, 1) 36%, rgba(53, 190, 255, 1) 100% );
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
138
components/layout/AiDvSummary/components/Summary5.vue
Normal file
138
components/layout/AiDvSummary/components/Summary5.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div class="summary5">
|
||||
<div class="summary5-item" v-for="(item, index) in data" :key="index" v-if="index < 4">
|
||||
<div class="left">
|
||||
<img :src="getImg(index)">
|
||||
<div class="corner left-top"></div>
|
||||
<div class="corner right-top"></div>
|
||||
<div class="corner left-bottom"></div>
|
||||
<div class="corner right-bottom"></div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<h2>{{ item[keys] }}</h2>
|
||||
<p>{{ item[value] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'summary5',
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
|
||||
keys: {
|
||||
type: String,
|
||||
default: 'key'
|
||||
},
|
||||
|
||||
value: {
|
||||
type: String,
|
||||
default: 'value'
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
img1: require('../asset/summary5-1.png'),
|
||||
img2: require('../asset/summary5-2.png'),
|
||||
img3: require('../asset/summary5-3.png'),
|
||||
img4: require('../asset/summary5-4.png')
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getImg (index) {
|
||||
return {
|
||||
'0': this.img1,
|
||||
'1': this.img2,
|
||||
'2': this.img3,
|
||||
'3': this.img4
|
||||
}[index]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.summary5 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.summary5-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
|
||||
.right {
|
||||
min-width: 90px;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
box-shadow: 0 0 8px 4px #0e3a77 inset;
|
||||
background: transparent;
|
||||
|
||||
.corner {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-image: url(./../asset/corner.svg);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.corner.left-top {
|
||||
left: -6px;
|
||||
top: -6px;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
.corner.right-top {
|
||||
right: -6px;
|
||||
top: -6px;
|
||||
}
|
||||
.corner.left-bottom {
|
||||
left: -6px;
|
||||
bottom: -6px;
|
||||
transform: rotateX(180deg) rotateY(180deg);
|
||||
}
|
||||
.corner.right-bottom {
|
||||
right: -6px;
|
||||
bottom: -6px;
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
line-height: 24px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 26px;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
92
components/layout/AiDvSummary/components/Summary6.vue
Normal file
92
components/layout/AiDvSummary/components/Summary6.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div class="summary6">
|
||||
<div class="summary6-item" v-for="(item, index) in data" :key="index" v-if="index < 4">
|
||||
<div class="left">
|
||||
</div>
|
||||
<div class="right">
|
||||
<h2>{{ item[keys] }}</h2>
|
||||
<p>{{ item[value] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'summary6',
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
|
||||
keys: {
|
||||
type: String,
|
||||
default: 'key'
|
||||
},
|
||||
|
||||
value: {
|
||||
type: String,
|
||||
default: 'value'
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getImg (index) {
|
||||
return {
|
||||
'0': this.img1,
|
||||
'1': this.img2,
|
||||
'2': this.img3,
|
||||
'3': this.img4
|
||||
}[index]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.summary6 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.summary6-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
line-height: 24px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 28px;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
266
components/layout/AiDvSummary/components/Summary7.vue
Normal file
266
components/layout/AiDvSummary/components/Summary7.vue
Normal file
@@ -0,0 +1,266 @@
|
||||
<template>
|
||||
<div class="summary7">
|
||||
<div class="left">
|
||||
<div class="el-progress-circle" :style="{height: width + 'px', width: width + 'px'}">
|
||||
<svg viewBox="0 0 100 100">
|
||||
<defs>
|
||||
<linearGradient id="blue" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#243D93;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#4EFFDC;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
class="el-progress-circle__track"
|
||||
:d="trackPath"
|
||||
stroke="#464C63"
|
||||
:stroke-width="relativeStrokeWidth"
|
||||
fill="none"
|
||||
:style="trailPathStyle"></path>
|
||||
<path
|
||||
class="el-progress-circle__path"
|
||||
:d="trackPath"
|
||||
:stroke="stroke"
|
||||
fill="none"
|
||||
stroke-linecap="butt"
|
||||
:stroke-width="percentage ? relativeStrokeWidth : 0"
|
||||
:style="circlePathStyle"></path>
|
||||
</svg>
|
||||
<div class="pointer">
|
||||
<div class="pointer-round"></div>
|
||||
<div class="pointer-circle"></div>
|
||||
<div class="pointer-line" :style="{transform: `rotate(${rotateDeg}deg)`}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<p><span>{{ data[0][value] }}</span></p>
|
||||
<h2>{{ data[0][keys] }}</h2>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="summary7-item" v-for="(item, index) in data" :key="index" v-if="index < 4 && index !== 0">
|
||||
<h2>{{ item[keys] }}</h2>
|
||||
<p>{{ item[value] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Summary7',
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
|
||||
keys: {
|
||||
type: String,
|
||||
default: 'key'
|
||||
},
|
||||
|
||||
value: {
|
||||
type: String,
|
||||
default: 'value'
|
||||
},
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
width: 70,
|
||||
strokeWidth: 8
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
rotateDeg () {
|
||||
return this.percentage / 100 * 270 + (360 * 0.25) / 2 + 90
|
||||
},
|
||||
|
||||
relativeStrokeWidth() {
|
||||
return (this.strokeWidth / this.width * 100).toFixed(1);
|
||||
},
|
||||
|
||||
percentage () {
|
||||
if (this.data.length) {
|
||||
return typeof this.data[0][this.value] === 'string' ? Number(this.data[0][this.value].replace('%', '')) : this.data[0][this.value]
|
||||
}
|
||||
|
||||
return 0
|
||||
},
|
||||
|
||||
radius() {
|
||||
return parseInt(50 - parseFloat(this.relativeStrokeWidth) / 2, 10);
|
||||
},
|
||||
perimeter() {
|
||||
return 2 * Math.PI * this.radius;
|
||||
},
|
||||
trackPath() {
|
||||
const radius = this.radius;
|
||||
const isDashboard = true
|
||||
return `
|
||||
M 50 50
|
||||
m 0 ${isDashboard ? '' : '-'}${radius}
|
||||
a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '-' : ''}${radius * 2}
|
||||
a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '' : '-'}${radius * 2}
|
||||
`;
|
||||
},
|
||||
strokeDashoffset() {
|
||||
const offset = -1 * this.perimeter * (1 - this.rate) / 2;
|
||||
return `${offset}px`;
|
||||
},
|
||||
trailPathStyle() {
|
||||
return {
|
||||
strokeDasharray: `${(this.perimeter * this.rate)}px, ${this.perimeter}px`,
|
||||
strokeDashoffset: this.strokeDashoffset
|
||||
};
|
||||
},
|
||||
circlePathStyle() {
|
||||
return {
|
||||
strokeDasharray: `${this.perimeter * this.rate * (this.percentage / 100) }px, ${this.perimeter}px`,
|
||||
strokeDashoffset: this.strokeDashoffset,
|
||||
transition: 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease'
|
||||
};
|
||||
},
|
||||
stroke() {
|
||||
return 'url(#blue)';
|
||||
},
|
||||
rate() {
|
||||
return 0.75
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
getCurrentColor(percentage) {
|
||||
if (typeof this.color === 'function') {
|
||||
return this.color(percentage);
|
||||
} else if (typeof this.color === 'string') {
|
||||
return this.color;
|
||||
} else {
|
||||
return this.getLevelColor(percentage);
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.summary7 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 380px;
|
||||
height: 124px;
|
||||
padding: 0 44px;
|
||||
background: url(./../asset/summary6-bg.svg);
|
||||
background-size: 100% 100%;
|
||||
|
||||
.el-progress-circle {
|
||||
position: relative;
|
||||
|
||||
.pointer-round {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
z-index: 1;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid #2E69FF;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.pointer-circle {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
z-index: 1;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #FDDD60;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.pointer-line {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
z-index: 1;
|
||||
width: 35px;
|
||||
height: 1px;
|
||||
background: #FDDD60;
|
||||
transform: rotate(90deg);
|
||||
transform-origin: 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.left {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.middle {
|
||||
margin: 0 16px;
|
||||
p {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
background-image: linear-gradient(180deg, #FFFFFF 0%, #FFDD8C 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
background-image: linear-gradient(180deg, #FFFFFF 0%, #C7C7C7 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
}
|
||||
|
||||
.summary7-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
flex: 1;
|
||||
line-height: 24px;
|
||||
margin-right: 8px;
|
||||
color: #A8D7F3;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
124
components/layout/AiDvSummary/components/Summary8.vue
Normal file
124
components/layout/AiDvSummary/components/Summary8.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="Summary8">
|
||||
<div class="summary5-item" v-for="(item, index) in arr" :key="index">
|
||||
<div class="left">
|
||||
<DonutChart :ratio="item.ratio"></DonutChart>
|
||||
</div>
|
||||
<div class="right">
|
||||
<h2>{{ item[keys] }}</h2>
|
||||
<p>{{ item[value] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DonutChart from './DonutChart'
|
||||
export default {
|
||||
name: 'Summary8',
|
||||
|
||||
components: {
|
||||
DonutChart
|
||||
},
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
|
||||
keys: {
|
||||
type: String,
|
||||
default: 'key'
|
||||
},
|
||||
|
||||
value: {
|
||||
type: String,
|
||||
default: 'value'
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
data: {
|
||||
handler (v) {
|
||||
if (!v.length) return []
|
||||
|
||||
let sum = 0
|
||||
v.forEach(x => {
|
||||
sum = x[this.value] + sum
|
||||
})
|
||||
|
||||
this.arr = v.map(v => {
|
||||
return {
|
||||
...v,
|
||||
ratio: Number((v[this.value] / sum).toFixed(2)) * 100
|
||||
}
|
||||
})
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
arr: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Summary8 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.summary5-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
|
||||
.right {
|
||||
min-width: 90px;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 12px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
color: #CEE1FF;
|
||||
text-shadow: 0px 2px 4px rgba(117, 9, 9, 0.1);
|
||||
background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
116
components/layout/AiDvSummary/components/Summary9.vue
Normal file
116
components/layout/AiDvSummary/components/Summary9.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div class="summary9">
|
||||
<div class="summary9-item" v-for="(item, index) in data" :key="index">
|
||||
<h2>{{ item[key] }}</h2>
|
||||
<p>{{ item[value] }}</p>
|
||||
<i></i>
|
||||
<div>
|
||||
<span>{{ item.text }}</span>
|
||||
<i :style="{color: item.percentage < 0 ? '#FCD25D' : '#1BB249'}">{{ item.percentage > 0 ? '+' + item.percentage : item.percentage }}</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'summary9',
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
|
||||
key: {
|
||||
type: String,
|
||||
default: 'keys'
|
||||
},
|
||||
|
||||
value: {
|
||||
type: String,
|
||||
default: 'value'
|
||||
},
|
||||
|
||||
text: {
|
||||
type: String,
|
||||
default: '同比上月'
|
||||
},
|
||||
|
||||
percentage: {
|
||||
type: String,
|
||||
default: 'percentage'
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.summary9 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.summary9-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 132px;
|
||||
height: 160px;
|
||||
padding-top: 32px;
|
||||
background-image: url(./../asset/summary9-bg.svg);
|
||||
background-size: 100% 100%;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 8px;
|
||||
line-height: 20px;
|
||||
|
||||
span {
|
||||
color: #B6DFFF;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #1BB249;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
& > i {
|
||||
width: 60px;
|
||||
height: 1px;
|
||||
margin: 0 auto;
|
||||
background: #0A91FB;
|
||||
}
|
||||
|
||||
h2 {
|
||||
line-height: 27px;
|
||||
color: #0A91FB;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 35px;
|
||||
margin: 0 0 4px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user