2024-10-26 21:13:01 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<transition name="fade">
|
|
|
|
|
|
<div class="LablesMember" v-if="isShow">
|
|
|
|
|
|
<div class="mask"></div>
|
|
|
|
|
|
<div class="LablesMember-wrapper">
|
|
|
|
|
|
<i class="el-icon-close" @click="hide"></i>
|
|
|
|
|
|
<div class="top">
|
|
|
|
|
|
<img src="../assets/images/avatar.png" />
|
|
|
|
|
|
<div class="top-right">
|
|
|
|
|
|
<div class="top-user">
|
|
|
|
|
|
<h2>用户：嫣然</h2>
|
|
|
|
|
|
<span>正式版</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p>开通SVIP，享黑胶VIP、数字专辑、有声书等特权</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="middle">
|
|
|
|
|
|
<div class="left">
|
|
|
|
|
|
<div class="tab">
|
|
|
|
|
|
<div @click="tabIndex = 0" :class="[tabIndex === 0 ? 'active' : '']">
|
|
|
|
|
|
<span>VIP</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div @click="tabIndex = 1" :class="[tabIndex === 1 ? 'active' : '']">
|
|
|
|
|
|
<span>SVIP</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div @click="tabIndex = 2" :class="[tabIndex === 2 ? 'active' : '']">
|
|
|
|
|
|
<span>超级VIP</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="tab-content"
|
|
|
|
|
|
:class="[tabIndex === index ? 'active' : '']"
|
|
|
|
|
|
v-for="(item, index) in 3"
|
|
|
|
|
|
:key="index">
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="tab-content__item"
|
|
|
|
|
|
:class="[currIndex === i ? 'active' : '']"
|
|
|
|
|
|
v-for="(price, i) in 4"
|
|
|
|
|
|
:key="i"
|
|
|
|
|
|
@click="currIndex = i">
|
|
|
|
|
|
<h3>12个月</h3>
|
|
|
|
|
|
<div class="price">
|
|
|
|
|
|
<i>¥</i>
|
|
|
|
|
|
<span>88</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="original-price">
|
|
|
|
|
|
<i>¥</i>
|
|
|
|
|
|
<span>88</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="right">
|
|
|
|
|
|
<div class="right-price">
|
|
|
|
|
|
<i>¥</i>
|
|
|
|
|
|
<span class="price">88</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="code">
|
|
|
|
|
|
<img src="../assets/code.png" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="paytype">
|
|
|
|
|
|
<svg width="13" height="13" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
|
<path d="M12.11 0H.89A.89.89 0 0 0 0 .89v11.22c0 .491.399.89.89.89h11.22a.89.89 0 0 0 .89-.89V.89a.89.89 0 0 0-.89-.89zM6.5 10.65a5.592 5.592 0 0 1-1.848-.311c-.364.241-.975.639-1.215.75-.352.162-.25-.188-.25-.188L3.395 9.7C2.24 8.895 1.499 7.654 1.499 6.26c0-2.426 2.239-4.392 5-4.392 1.693 0 3.188.74 4.093 1.869l-4.905 2.27s-.4.152-.75-.062c-.35-.213-.813-.564-.813-.564s-.538-.458-.25.376l.751 1.756s.089.524.687.189c.468-.262 4.103-2.454 5.666-3.397a3.94 3.94 0 0 1 .523 1.954c0 2.425-2.239 4.391-5.001 4.391z" fill="#09BB07" fill-rule="nonzero"></path>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
<span>微信支付</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="pay-btn">
|
|
|
|
|
|
<el-button round size="mini" style="margin-right: 10px;" @click="isShow = false">取消支付</el-button>
|
|
|
|
|
|
<el-button round size="mini" type="warning">我已支付</el-button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</transition>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
export default {
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
isShow: false,
|
|
|
|
|
|
tabIndex: 0,
|
|
|
|
|
|
currIndex: 0
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
show () {
|
|
|
|
|
|
this.isShow = true
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
hide () {
|
|
|
|
|
|
this.isShow = false
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
.LablesMember {
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
z-index: 1111;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
|
|
|
|
.mask {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
z-index: 1;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
background: rgba($color: #000000, $alpha: 0.8);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.LablesMember-wrapper {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 50%;
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
z-index: 11;
|
|
|
|
|
|
width: 900px;
|
|
|
|
|
|
padding: 40px 40px;
|
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
background: linear-gradient(41deg, #ffebd3, #fff8e3 61%, #fae2c4 99%);
|
|
|
|
|
|
|
|
|
|
|
|
.top {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
|
width: 40px;
|
|
|
|
|
|
height: 40px;
|
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
|
color: #632e2e;
|
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.top-user {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
|
|
margin-right: 6px;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
color: #666;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.el-icon-close {
|
|
|
|
|
|
position: absolute;
|
2024-10-26 23:15:03 +08:00
|
|
|
|
top: 12px;
|
|
|
|
|
|
right: 12px;
|
2024-10-26 21:13:01 +08:00
|
|
|
|
z-index: 11;
|
2024-10-26 23:15:03 +08:00
|
|
|
|
font-size: 32px;
|
2024-10-26 21:13:01 +08:00
|
|
|
|
color: #333;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
transform-origin: center center;
|
|
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
|
opacity: 0.6;
|
|
|
|
|
|
// transform: translate(50%, -50%) rotate(180deg);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.middle {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
|
|
.left {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
padding: 0 0;
|
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
box-shadow: 0 0 20px 0 hsla(0, 39%, 56%, .1), 0 0 16px 0 rgba(0, 0, 0, .08);
|
|
|
|
|
|
|
|
|
|
|
|
.tab {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
height: 50px;
|
|
|
|
|
|
margin-bottom: 40px;
|
|
|
|
|
|
background: #fff3ee;
|
|
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
height: 50px;
|
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
color: #b69593;
|
|
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
z-index: 2;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
|
|
color: #6f3333;
|
|
|
|
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
z-index: 1;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
background: url(../assets/tab_middle.png) no-repeat center;
|
|
|
|
|
|
background-size: contain;
|
|
|
|
|
|
content: '';
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.tab-content {
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&__item {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
width: 140px;
|
|
|
|
|
|
height: 190px;
|
|
|
|
|
|
margin-right: 14px;
|
|
|
|
|
|
padding-top: 40px;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
border: 1px solid rgba(0, 0, 0, .08);
|
|
|
|
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
|
|
border: 1px solid #ff7548;
|
|
|
|
|
|
background: linear-gradient(33deg, #ffd1c5 -10%, #ffd1c5 21%, #ffe8e5 85%);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
h3 {
|
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.original-price {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
color: #888;
|
|
|
|
|
|
text-decoration: line-through;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.price {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: baseline;
|
|
|
|
|
|
margin-bottom: 6px;
|
|
|
|
|
|
color: #f13d3d;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
font-size: 36px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.right {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-left: 40px;
|
|
|
|
|
|
padding: 20px 0 20px 0;
|
|
|
|
|
|
|
|
|
|
|
|
.paytype {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
color: #666;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.pay-btn {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-top: 40px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.right-price {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: baseline;
|
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
|
color: #f13d3d;
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
|
margin-left: 4px;
|
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
|
font-weight: 900;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.code img {
|
|
|
|
|
|
width: 150px;
|
|
|
|
|
|
height: 150px;
|
|
|
|
|
|
margin: 14px 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
