|
|
@@ -1,6 +1,14 @@
|
|
|
<template>
|
|
|
<div class="app-content">
|
|
|
- 免费续期
|
|
|
+ <div class="recharge_box">
|
|
|
+ <view class="renew">
|
|
|
+ 续费3980/年<text class="toBuy">去购买</text>
|
|
|
+ </view>
|
|
|
+ <view class="voucher">
|
|
|
+ 充值<text style="color: #FF3C00;"> 5980 元</text>，免费使用一年
|
|
|
+ </view>
|
|
|
+ <view class="immediately"></view>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -26,7 +34,50 @@ export default {
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.app-content {
|
|
|
+ padding-top: 1px;
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
+ background: url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2687368603,3794114719&fm=26&gp=0.jpg);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: relative;
|
|
|
+ .recharge_box {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 8%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ box-shadow: 0px 3px 13px 0px rgba(221, 0, 0, 0.36);
|
|
|
+ margin: 60% auto 0;
|
|
|
+ height: 617upx;
|
|
|
+ width: 640upx;
|
|
|
+ border-radius: 20px;
|
|
|
+ background: #fff;
|
|
|
+ & > .renew {
|
|
|
+ margin-top: 70upx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #333;
|
|
|
+ & > .toBuy {
|
|
|
+ color: #3385ff;
|
|
|
+ position: relative;
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ right: -15upx;
|
|
|
+ top: 50%;
|
|
|
+ content: "";
|
|
|
+ transform: translateY(-50%) rotate(225deg);
|
|
|
+ width: 10upx;
|
|
|
+ height: 10upx;
|
|
|
+ border-left: 1px solid #3385ff;
|
|
|
+ border-bottom: 1px solid #3385ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ & > .voucher {
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-top: 70upx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
wangn