343 lines
9.1 KiB
Vue
343 lines
9.1 KiB
Vue
<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;
|
||
top: 12px;
|
||
right: 12px;
|
||
z-index: 11;
|
||
font-size: 32px;
|
||
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>
|