diff --git a/pages/user/components/equity.vue b/pages/user/components/equity.vue index 1a473ca..e29c194 100644 --- a/pages/user/components/equity.vue +++ b/pages/user/components/equity.vue @@ -1,81 +1,120 @@ @@ -300,4 +415,214 @@ font-size: 16px; line-height: 2em; } + + .welcome{ + color: #999999; + font-size: 16px; + text{ + color: #bf2b28; + font-size: 18px; + font-weight: bold; + } + } + .user-info{ + margin: 20px auto; + display: flex; + justify-content: space-between; + .left{ + .member-card{ + background: url("https://oss.wsdns.cn/20231205/e080605f50d3406b84bae69088418309.png"); + background-size: 100%; + background-color: #626262; + border-radius: 20px; + padding: 30px; + width: 420px; + height: 230px; + .card-name{ + .name{ + color: #DFBA8B; + font-size: 24px; + font-weight: bold; + } + .level{ + color: #DFBA8B; + font-size: 18px; + font-weight: bold; + margin:0 15px; + } + .grade{ + padding: 4px 7px; + color: #ffffff; + border: 1px solid #ffffff; + border-radius: 5px; + margin-left: 20px; + } + } + .exp-time{ + color: #DFBA8B; + opacity: 0.5; + } + .progress-box{ + display: flex; + justify-content: space-between; + align-items: center; + .total-pay{ + margin-top: 30px; + color: #BFBFBF; + } + .progress{ + display: flex; + justify-content: space-between; + align-items: flex-end; + color: #BFBFBF; + font-size: 20px; + .price{ + + } + .desc{ + font-size: 12px; + padding-bottom: 1px; + } + } + .progress-line{ + width: 250px; + } + .level{ + display: flex; + justify-content: space-between; + color: #BFBFBF; + line-height: 1.8em; + } + .xufei-btn{ + width: 100px; + margin-left: 20px; + margin-top: 12px; + } + } + } + } + .right{ + padding: 20px; + border-radius: 20px; + width: 420px; + .bzj-title{ + font-size: 16px; + text{ + color: #bf2b28; + font-size: 24px; + } + } + .desc{ + color: #999999; + padding: 18px 0; + } + } + } + .equity{ + text-align: center; + color: #999999; + font-size: 16px; + text{ + padding: 15px; + } + .el-icon-minus{ + } + } + + + .grade-list { + display: flex; + flex-direction: column; + font-size: 12px; + + .item { + position: relative; + border: 1px solid #eee; + + .item-box { + display: flex; + font-size: 14px; + + .title { + padding: 10px; + border-right: 1px solid #eee; + display: flex; + align-items: center; + flex: 1; + justify-content: center; + text-align: center; + } + + .info { + padding: 10px; + display: flex; + flex: 1; + flex-direction: column; + align-items: center; + justify-content: center; + width: 230px; + + .price { + } + + .desc { + color: #ccc; + } + } + } + + .select { + display: none; + } + } + + .active { + border: 2px solid #bf2b28 !important; + + .item-box { + .title { + color: #bf2b28; + } + + .info { + .price { + color: #bf2b28; + } + + .desc { + color: #ccc; + } + } + } + + .select { + position: absolute; + right: 0; + bottom: 0; + border-top: 20px solid transparent; + border-right: 20px solid #bf2b28; + border-left: 20px solid transparent; + border-bottom: 20px solid #bf2b28; + display: flex; + + .icon { + position: relative; + + .el-icon-check { + position: absolute; + left: 0; + top: 0; + color: #fff; + } + } + } + } + } + + .paginatio { + float: none; + margin: 20px auto; + display: flex; + justify-content: center; + } diff --git a/pages/user/components/grade.vue b/pages/user/components/grade.vue index f272e5d..7fbc44d 100644 --- a/pages/user/components/grade.vue +++ b/pages/user/components/grade.vue @@ -4,41 +4,10 @@ 会员等级
-
+
-
保证金
-
- ￥5000 - 文字信息后台编辑 -
-
-
-
- -
-
-
-
-
-
保证金
-
- ￥10000 - 文字信息后台编辑 -
-
-
-
- -
-
-
-
-
-
保证金
-
- ￥20000 - 文字信息后台编辑 -
+
{{ item.name }}
+
{{ item.price }}
@@ -91,7 +60,40 @@ payment: ["银联支付"], money: 5000, showQrcode: false, - billQRCode: '' + billQRCode: '', + gradeIndex: 1, + gradeList: [ + { + id: 1, + name: '黄金VIP', + price: '699元/年' + }, + { + id: 2, + name: '铂金VIP', + price: '1999元/年' + }, + { + id: 3, + name: '钻石VIP', + price: '2999元/年' + }, + { + id: 4, + name: '实力厂家', + price: '20000元/年+交易保证金' + }, + { + id: 5, + name: '实力加工厂', + price: '20000元/年+交易保证金' + }, + { + id: 6, + name: '实力采购商', + price: '20000元/年+交易保证金' + } + ] } }, created() {}, @@ -108,8 +110,8 @@ }); }, - onChange(money) { - this.money = money + onChange(index) { + this.gradeIndex = index }, onPay() { const date = new Date() @@ -182,6 +184,7 @@ .grade-list { display: flex; + flex-direction: column; justify-content: space-between; .item { @@ -193,10 +196,9 @@ .title { padding: 10px; - border-right: 1px solid #eee; display: flex; align-items: center; - width: 40px; + flex: 1; justify-content: center; text-align: center; } @@ -229,7 +231,6 @@ .item-box { .title { - border-right: 2px solid #bf2b28 !important; color: #bf2b28; } diff --git a/pages/user/components/payment.vue b/pages/user/components/payment.vue new file mode 100644 index 0000000..1a473ca --- /dev/null +++ b/pages/user/components/payment.vue @@ -0,0 +1,303 @@ + + + + + diff --git a/pages/user/user.vue b/pages/user/user.vue index b9aab05..fb83011 100644 --- a/pages/user/user.vue +++ b/pages/user/user.vue @@ -24,23 +24,24 @@ 平台权益 - - - 会员等级(临时) - - - - 购买增值服务(临时) - + + + + + + + + - - - + + + + @@ -55,9 +56,10 @@ import Seal from './components/seal' import Equity from './components/equity' import Grade from './components/grade' import Added from './components/added' +import Payment from './components/payment' export default { - components: {Personal, BusinessCard, Seal, Equity, Grade, Added}, + components: {Personal, BusinessCard, Seal, Equity, Grade, Added, Payment}, data() { return { currMenu: 'fadada', @@ -71,6 +73,9 @@ export default { methods: { menuSelect(e) { this.currMenu = e + }, + onDone(index){ + this.currMenu = index } } }