wangqing
4 years ago
4 changed files with 404 additions and 31 deletions
@ -0,0 +1,196 @@ |
|||
<template> |
|||
<div class="data-pay"> |
|||
<el-row :span="24"> |
|||
<el-col v-for="(item,index) in data" |
|||
:key="index" |
|||
:md="span" |
|||
: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.money }}</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> |
|||
@ -0,0 +1,188 @@ |
|||
<template> |
|||
<data-pay :option="option" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import DataPay from '@/views/official/DataPay' |
|||
|
|||
export default { |
|||
name: 'PayService', |
|||
components: {DataPay}, |
|||
data() { |
|||
return { |
|||
option: { |
|||
span: 8, |
|||
data: [ |
|||
{ |
|||
title: '后台模版', |
|||
src: '/images/official/vip1.png', |
|||
money: '999999', |
|||
dismoney: '999999', |
|||
tip: '/永久', |
|||
color: '#808695', |
|||
subtext: '购买', |
|||
click: function(item) { |
|||
alert(JSON.stringify(item)) |
|||
}, |
|||
list: [ |
|||
{ |
|||
title: '面向全屏幕尺寸的响应式适配能力', |
|||
check: true, |
|||
tip: `<h2 > 后台管理模版 - <small>点击红色字体即可预览</small></h2> <br /> |
|||
1.用户名登录/验证码登录/第三方登陆(QQ, 微信)/人脸识别/多种登录方式。 <br /> <br /> |
|||
2.全新的前端错误日志监控机制 <br /> <br /> |
|||
3.灵活的10 + 多款主题自由配置<br /><br /> |
|||
4.路由权限、菜单权限、登录权限 <br /> <br /> |
|||
5.前端路由动态服务端加载和无限极动态路由加载。 <br /> <br /> |
|||
6.模块的可拆卸化, 达到开箱即用 <br /> <br />` |
|||
}, |
|||
{ |
|||
title: '支持IE9+等系列浏览器', |
|||
check: true |
|||
}, |
|||
{ |
|||
title: '全新的前端错误日志监控机制', |
|||
check: true |
|||
}, |
|||
{ |
|||
title: '基于最新的avue底层开发', |
|||
check: true |
|||
}, |
|||
{ |
|||
title: '前端路由动态服务端加载', |
|||
check: true |
|||
}, |
|||
{ |
|||
title: '灵活的多款主题自由配置', |
|||
check: true |
|||
}, |
|||
{ |
|||
title: '模块的可拆卸化,达到开箱即用', |
|||
check: true |
|||
}, |
|||
{ |
|||
title: '免费的私人git私服', |
|||
check: true |
|||
}, |
|||
{ |
|||
title: '专属会员群', |
|||
check: true |
|||
}, { |
|||
title: '前端最新干货分享', |
|||
check: true |
|||
}, { |
|||
title: '赠送 Avue.js 脚手架文档（价值¥59.99）', |
|||
href: 'https://www.kancloud.cn/smallwei/avue', |
|||
check: true |
|||
}, { |
|||
title: '赠送 Avue 修仙系列视频教程', |
|||
href: 'https://www.bilibili.com/video/av24644922', |
|||
check: true |
|||
} |
|||
] |
|||
}, { |
|||
title: 'Avuex源码', |
|||
src: '/images/official/vip2.png', |
|||
color: '#ffa820', |
|||
money: '999999999', |
|||
dismoney: '999999', |
|||
tip: '/永久', |
|||
subtext: '购买', |
|||
click: function(item) { |
|||
alert(JSON.stringify(item)) |
|||
}, |
|||
list: [ |
|||
{ |
|||
title: '一键集成表格的导出excel,打印,等功能', |
|||
check: true |
|||
}, |
|||
{ |
|||
title: '底层代码可重用轻松对接多个UI框架', |
|||
check: true |
|||
}, |
|||
{ |
|||
title: '底层更加完善的开发错误调试机制', |
|||
check: true |
|||
}, |
|||
{ |
|||
title: '一套代码多个终端自适应', |
|||
check: true |
|||
}, |
|||
{ |
|||
title: '一键集成表格的导出excel，打印，等常用功能', |
|||
check: true |
|||
}, |
|||
{ |
|||
title: '表格的批量操作,表单的级联操作更加便捷', |
|||
check: true |
|||
}, |
|||
{ |
|||
title: '新增大量常用组件（搜索，选项卡）', |
|||
check: true |
|||
}, |
|||
{ |
|||
title: '新增大量全新可配置的骚属性', |
|||
check: true |
|||
}, |
|||
{ |
|||
title: '丰富的数据展示模版组件包', |
|||
check: true |
|||
}, |
|||
{ |
|||
title: '专属的开发者文档，助你快速掌握', |
|||
check: true |
|||
}, { |
|||
title: '赠送 Avue.js 脚手架文档（价值¥59.99）', |
|||
href: 'https://www.kancloud.cn/smallwei/avue', |
|||
check: true |
|||
}, { |
|||
title: '赠送 Avue 修仙系列视频教程', |
|||
href: 'https://www.bilibili.com/video/av24644922', |
|||
check: true |
|||
} |
|||
] |
|||
}, { |
|||
title: '全家桶', |
|||
src: '/images/official/vip3.png', |
|||
color: '#ef4868', |
|||
money: '999999', |
|||
dismoney: '999999', |
|||
tip: '/永久', |
|||
subtext: '购买', |
|||
click: function(item) { |
|||
alert(JSON.stringify(item)) |
|||
}, |
|||
list: [ |
|||
{ |
|||
title: '授权商业化开发,永久更新授权使用', |
|||
check: true |
|||
}, |
|||
{ |
|||
title: '后期更新和新产品将全部免费', |
|||
check: true |
|||
}, |
|||
{ |
|||
title: '拥有avue系列的全部特权和全部源码（包括avuex）', |
|||
check: true |
|||
}, |
|||
{ |
|||
title: '提供远程技术支持和问题解答', |
|||
check: true |
|||
}, { |
|||
title: '赠送 Avue.js 脚手架文档（价值¥59.99）', |
|||
href: 'https://www.kancloud.cn/smallwei/avue', |
|||
check: true |
|||
}, { |
|||
title: '赠送 Avue 修仙系列视频教程', |
|||
href: 'https://www.bilibili.com/video/av24644922', |
|||
check: true |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
Loading…
Reference in new issue