|
|
@@ -25,21 +25,23 @@
|
|
|
margin: 5.2267rem auto;
|
|
|
width: 9.0133rem;
|
|
|
height: 3.4667rem;
|
|
|
- padding: 14px 10px;
|
|
|
+ padding: 0.3733rem 0.2667rem;
|
|
|
box-sizing: border-box;
|
|
|
border-radius: 20px;
|
|
|
}
|
|
|
.commodity {
|
|
|
position: relative;
|
|
|
- width: 97px;
|
|
|
- height: 97px;
|
|
|
+ width: 2.5867rem;
|
|
|
+ height: 2.5867rem;
|
|
|
border-radius: 6px;
|
|
|
+ padding: 0.0533rem;
|
|
|
+ background-clip: content-box !important;
|
|
|
border: 2px solid white;
|
|
|
}
|
|
|
.active {
|
|
|
position: absolute;
|
|
|
- width: 27px;
|
|
|
- height: 18px;
|
|
|
+ width: 0.72rem;
|
|
|
+ height: 0.48rem;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
}
|
|
|
@@ -47,15 +49,15 @@
|
|
|
border-color: #ff935e;
|
|
|
}
|
|
|
.c-1 {
|
|
|
- background: url('http://reader-wx.ai160.com/images/reader/v3/299.png');
|
|
|
+ background: url('http://reader-wx.ai160.com/images/reader/v3/299.png') no-repeat;
|
|
|
background-size: contain;
|
|
|
}
|
|
|
.c-2 {
|
|
|
- background: url('http://reader-wx.ai160.com/images/reader/v3/99.png');
|
|
|
+ background: url('http://reader-wx.ai160.com/images/reader/v3/99.png') no-repeat;
|
|
|
background-size: contain;
|
|
|
}
|
|
|
.c-3 {
|
|
|
- background: url('http://reader-wx.ai160.com/images/reader/v3/15.png');
|
|
|
+ background: url('http://reader-wx.ai160.com/images/reader/v3/15.png') no-repeat;
|
|
|
background-size: contain;
|
|
|
}
|
|
|
.payBox {
|
|
|
@@ -86,6 +88,43 @@
|
|
|
border-radius: 0.6133rem;
|
|
|
font-size: 0.48rem;
|
|
|
}
|
|
|
+ .mask {
|
|
|
+ position: fixed;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ background-color: rgba(0, 0, 0, 0.568);
|
|
|
+ }
|
|
|
+ .payTips {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 6.4533rem;
|
|
|
+ height: 6.96rem;
|
|
|
+ padding: 1.0133rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 11px;
|
|
|
+ background: white;
|
|
|
+ }
|
|
|
+ .simg {
|
|
|
+ width: 1.6rem;
|
|
|
+ height: 1.7867rem;
|
|
|
+ }
|
|
|
+ .t1 {
|
|
|
+ margin: .52rem 1.3333rem;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ .goXkx {
|
|
|
+ padding: .1rem 1.3333rem;
|
|
|
+ font-size: .4267rem;
|
|
|
+ color: white;
|
|
|
+ background: linear-gradient(180deg, #66d751 0%, #65d952 100%);
|
|
|
+ border-radius: .4rem;
|
|
|
+ }
|
|
|
</style>
|
|
|
<body>
|
|
|
<div id="container">
|
|
|
@@ -108,6 +147,13 @@
|
|
|
</div>
|
|
|
<div class="pay" @click="pay">立即支付</div>
|
|
|
</div>
|
|
|
+ <div class="mask">
|
|
|
+ <div class="payTips">
|
|
|
+ <img src="https://reader-wx.ai160.com/images/reader/v3/right.webp" class="simg" />
|
|
|
+ <div class="t1">支付成功</div>
|
|
|
+ <div class="goXkx">去使用</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</body>
|
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
|
|
|
@@ -149,7 +195,7 @@
|
|
|
this.product = res.data.data.productList[0]
|
|
|
})
|
|
|
} else {
|
|
|
- this.getWxCode()
|
|
|
+ // this.getWxCode()
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
bayi