迁移大屏UI库和应用
This commit is contained in:
aixianling
104
project/dvui/layout/AiDvSummary/components/Summary0.vue
Normal file
104
project/dvui/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
project/dvui/layout/AiDvSummary/components/Summary1.vue
Normal file
88
project/dvui/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
project/dvui/layout/AiDvSummary/components/Summary10.vue
Normal file
105
project/dvui/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>
|
||||
156
project/dvui/layout/AiDvSummary/components/Summary2.vue
Normal file
156
project/dvui/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
project/dvui/layout/AiDvSummary/components/Summary3.vue
Normal file
94
project/dvui/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
project/dvui/layout/AiDvSummary/components/Summary4.vue
Normal file
115
project/dvui/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
project/dvui/layout/AiDvSummary/components/Summary5.vue
Normal file
138
project/dvui/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
project/dvui/layout/AiDvSummary/components/Summary6.vue
Normal file
92
project/dvui/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
project/dvui/layout/AiDvSummary/components/Summary7.vue
Normal file
266
project/dvui/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>
|
||||
117
project/dvui/layout/AiDvSummary/components/Summary9.vue
Normal file
117
project/dvui/layout/AiDvSummary/components/Summary9.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<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-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user