You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
213 lines
5.4 KiB
213 lines
5.4 KiB
<template>
|
|
<div class="data-pay">
|
|
<el-row :span="24">
|
|
<el-col v-for="(item,index) in data"
|
|
:key="index"
|
|
:md="span"
|
|
:offset="index==0?4:0"
|
|
:sm="12"
|
|
:xs="24"
|
|
>
|
|
<div class="item">
|
|
<div :style="{backgroundColor:item.color}"
|
|
class="top"
|
|
/>
|
|
<div class="header">
|
|
<p class="title">{{ item.title }}</p>
|
|
<img :src="item.src"
|
|
alt=""
|
|
class="img"
|
|
>
|
|
<template v-if="item.subtitle">
|
|
<p :style="{color:item.color}"
|
|
class="subtitle"
|
|
>
|
|
{{ item.subtitle }}
|
|
</p>
|
|
</template>
|
|
<template v-if="item.money || item.dismoney">
|
|
<p :style="{color:item.color}"
|
|
class="money"
|
|
>
|
|
<span>¥</span>
|
|
<count-to :end-val="item.money" />
|
|
<s>{{ item.dismoney }}</s>
|
|
<em>{{ item.tip }}</em>
|
|
</p>
|
|
</template>
|
|
<div class="line" />
|
|
<a :href="item.href?item.href:'javascript:void(0);'"
|
|
:style="{backgroundColor:item.color}"
|
|
class="btn"
|
|
@click="item.click?item.click(item):''"
|
|
>{{ item.subtext }}</a>
|
|
</div>
|
|
<div class="list">
|
|
<div v-for="(citem,cindex) in item.list"
|
|
:key="cindex"
|
|
class="list-item"
|
|
>
|
|
<i v-if="citem.check"
|
|
:style="{color:item.color}"
|
|
class="list-item-icon list-item--check"
|
|
>√</i>
|
|
<i v-else
|
|
class="list-item-icon list-item--no"
|
|
>x</i>
|
|
<a :href="citem.href?citem.href:'javascript:void(0);'">
|
|
<el-tooltip :disabled="!citem.tip"
|
|
effect="dark"
|
|
placement="top"
|
|
>
|
|
<div slot="content"
|
|
v-html="citem.tip"
|
|
/>
|
|
<span :class="{'list-item--link':citem.href}">{{ citem.title }}</span>
|
|
</el-tooltip>
|
|
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import CountTo from '@/components/CountTo'
|
|
|
|
export default {
|
|
name: 'DataPay',
|
|
components: {CountTo},
|
|
props: {
|
|
option: {
|
|
type: Object,
|
|
default: () => {
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
animation() {
|
|
return this.option.animation
|
|
},
|
|
decimals() {
|
|
return this.option.decimals || 0
|
|
},
|
|
span() {
|
|
return this.option.span || 6
|
|
},
|
|
data() {
|
|
return this.option.data || []
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.data-pay .item {
|
|
margin: 0 auto;
|
|
padding-bottom: 16px;
|
|
width: 80%;
|
|
position: relative;
|
|
border-radius: 4px;
|
|
background-color: #fff;
|
|
min-height: 670px;
|
|
-webkit-box-shadow: 1px 2px 10px #eee;
|
|
box-shadow: 1px 2px 10px #eee;
|
|
}
|
|
|
|
.data-pay .top {
|
|
width: 100%;
|
|
height: 6px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
border-radius: 4px 4px 0 0;
|
|
}
|
|
|
|
.data-pay .header {
|
|
margin-bottom: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.data-pay .title {
|
|
text-align: center;
|
|
padding: 20px 0 10px;
|
|
font-size: 20px;
|
|
font-weight: 200;
|
|
}
|
|
|
|
.data-pay .money span {
|
|
margin-right: 5px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.data-pay .money .b {
|
|
margin-right: 2px;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.data-pay .money s {
|
|
margin-right: 3px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.data-pay .money em {
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
}
|
|
|
|
.data-pay .img {
|
|
width: 50px;
|
|
}
|
|
|
|
.data-pay .line {
|
|
width: 60%;
|
|
height: 1px;
|
|
background: rgba(150, 150, 150, 0.1);
|
|
margin: 20px auto;
|
|
}
|
|
|
|
.data-pay .btn {
|
|
display: block;
|
|
width: 120px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
border-radius: 32px;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
-webkit-transition: opacity 0.2s ease-in-out;
|
|
transition: opacity 0.2s ease-in-out;
|
|
}
|
|
|
|
.data-pay .list-item {
|
|
list-style: none;
|
|
padding-left: 20px;
|
|
margin-bottom: 12px;
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.data-pay .list-item a {
|
|
color: #666;
|
|
}
|
|
|
|
.data-pay .list-item-icon {
|
|
color: #515a6e;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.data-pay .list-item--link {
|
|
font-size: 12px;
|
|
color: #2d8cf0;
|
|
}
|
|
|
|
.data-pay .list-item--no,
|
|
.data-pay .list-item--no + span {
|
|
color: #c5c8ce;
|
|
}
|
|
</style>
|
|
|