打印组件
This commit is contained in:
yanran200730
343
src/components/LablesMember.vue
Normal file
343
src/components/LablesMember.vue
Normal file
@@ -0,0 +1,343 @@
|
||||
<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: 6px;
|
||||
right: 6px;
|
||||
z-index: 11;
|
||||
font-size: 40px;
|
||||
color: #333;
|
||||
transition: transform ease-in-out 0.2;
|
||||
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>
|
||||
Reference in New Issue
Block a user