Browse Source

页面修改

master
langz 2 years ago
parent
commit
8cd18dae35
  1. 39
      src/views/hotVIPPages/hotVIPpayback.vue
  2. 2
      src/views/hotVIPPages/mtvip.vue
  3. 67
      src/views/hotVIPPages/recieveVIP.vue

39
src/views/hotVIPPages/hotVIPpayback.vue

@ -6,7 +6,7 @@
<div class="right-box"> <div class="right-box">
<div class="title">会员领取方式</div> <div class="title">权益领取方式</div>
<div class="tips">微信搜索 次元意境 公众号<br/>点击会员福利 - 会员月月领进行兑换</div> <div class="tips">微信搜索 次元意境 公众号<br/>点击会员福利 - 会员月月领进行兑换</div>
<img class="icon" src="https://img.bnyer.cn/vip/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230804183929.jpg" alt=""> <img class="icon" src="https://img.bnyer.cn/vip/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230804183929.jpg" alt="">
@ -44,14 +44,14 @@ export default {
.hotVip-payback-wrap { .hotVip-payback-wrap {
width: 100%; width: 100%;
min-height: 100%; // min-height: 100%;
height: auto; height: 100%;
position: absolute; position: absolute;
background-color: #e53c51; background-color: #fc7e2a;
// padding: 2rem; // padding: 2rem;
// box-sizing: border-box; // box-sizing: border-box;
padding-bottom: 1rem; // padding-bottom: 1rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -59,26 +59,31 @@ export default {
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
.top-img { background-image: url('https://img.bnyer.cn/vip/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230901115658.png');
background-image: url('https://img.bnyer.cn/vip/pay-top-img.png'); background-size: 100% 13.35rem;
background-size: 100% 100%; background-repeat: no-repeat;
width: 100%;
// height: 360px; // .top-img {
height: 6.8rem; // background-image: url('https://img.bnyer.cn/vip/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230901115658.png');
margin-bottom: -0.7em; // background-size: 100% 100%;
} // width: 100%;
// // height: 360px;
// height: 6.8rem;
// margin-bottom: -0.7em;
// }
.right-box { .right-box {
margin-top: 3.8rem;
width: 87%; width: 87%;
left: 0rem; left: 0rem;
right: 0rem; right: 0rem;
position: relative; position: relative;
margin-top: 0.5rem; // margin-top: 0.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background-color: #fff; // background-color: #fff;
box-sizing: border-box; box-sizing: border-box;
padding:20px 0px; padding:20px 0px;
@ -86,13 +91,13 @@ export default {
text-align: center; text-align: center;
.icon { .icon {
margin-top: 15px; margin-top: 8px;
width: 4rem; width: 4rem;
height: 4rem; height: 4rem;
// background-color: #c63243; // background-color: #c63243;
} }
.title { .title {
color: #c63243; color: #d25902;
font-size: 0.3rem; font-size: 0.3rem;
font-weight: 600; font-weight: 600;
} }

2
src/views/hotVIPPages/mtvip.vue

@ -107,7 +107,7 @@ export default {
}, },
created(){ created(){
document.documentElement.scrollTop = 0; document.documentElement.scrollTop = 0;
document.title = "会员权益随心选"; document.title = "联合会员";
}, },
watch:{ watch:{
'mobile' : { 'mobile' : {

67
src/views/hotVIPPages/recieveVIP.vue

@ -1,5 +1,6 @@
<template> <template>
<div class="recieveVip-wrap"> <div class="recieveVip-wrap">
<!-- <div class="top-img"></div> -->
<!-- 权益列表 --> <!-- 权益列表 -->
<div class="vip-box"> <div class="vip-box">
@ -29,18 +30,18 @@
<input class="cls_input_phone" v-model="mobile" type="text" maxlength="11" placeholder="请输入您的手机号"> <input class="cls_input_phone" v-model="mobile" type="text" maxlength="11" placeholder="请输入您的手机号">
<img class="phone-icon" src="https://img.bnyer.cn/vip/hotAIphone.png" alt=""> <img class="phone-icon" src="https://img.bnyer.cn/vip/hotAIphone.png" alt="">
</div> </div>
<img class="cls_img_btn" @click="clickMainButton()" src="https://img.bnyer.cn/vip/main-button.png"> <img class="cls_img_btn" @click="clickMainButton()" src="https://image.ireadwo.cn/resources/yq-mtwm-20djj/btn-get.png">
</div> </div>
<!-- 资费 --> <!-- 资费 -->
<!-- <div class="price">业务资费19.9 / </div> --> <!-- <div class="price">业务资费19.9 / </div> -->
<!-- 规则 --> <!-- 规则 -->
<div class="rule-box"> <div class="rule-box">
<div class="rule-icon"></div> <div class="rule-icon">活动规则</div>
<div class="rule-content"> <div class="rule-content">
[产品名称] : 惠点联合会员 <br/> [产品名称] : 惠点联合会员 <br/>
[计费方式] : 支付宝连续包月<br/> [计费方式] : 支付宝连续包月<br/>
[权益说明] :<br/> [权益说明] :<br/>
活动期间在本页面成功开通业务即可获得爆款会员月卡(10选1) +美团外卖20元代金券(每月领取5元代金卷连续领取4个月)数量有限送完即止<br/> 活动期间开通业务即可获得爆款会员月卡(10选1) +美团外卖20元代金券(每月领取5元代金卷连续领取4个月)数量有限送完即止<br/>
[爆款会员月卡] :<br/> [爆款会员月卡] :<br/>
腾讯视频月卡爱奇艺月卡优酷月卡芒果TV月卡哗哩哗哩大会员月卡网易云音乐月卡喜马拉雅会员月卡知乎盐选会员月卡饿了么会员月卡百度网盘会员月卡<br/> 腾讯视频月卡爱奇艺月卡优酷月卡芒果TV月卡哗哩哗哩大会员月卡网易云音乐月卡喜马拉雅会员月卡知乎盐选会员月卡饿了么会员月卡百度网盘会员月卡<br/>
[领取方式]:<br/> [领取方式]:<br/>
@ -144,7 +145,7 @@ export default {
}, },
created(){ created(){
document.documentElement.scrollTop = 0; document.documentElement.scrollTop = 0;
document.title = "会员月月领"; document.title = "联合会员";
}, },
mounted() { mounted() {
@ -269,16 +270,28 @@ export default {
width: 100%; width: 100%;
height: auto; height: auto;
position: absolute; position: absolute;
background-color: #fb986e; background-color: #fc7e2a;
padding-bottom: 3rem; padding-bottom: 1rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
background-image: url('https://img.bnyer.cn/vip/get-top-img.png'); background-image: url('https://img.bnyer.cn/vip/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230901115742.png');
background-size: 100% 15rem; background-size: 100% 13.35rem;
background-repeat: no-repeat; background-repeat: no-repeat;
// .top-img {
// width: 100%;
// height: 13.35rem;
// position: absolute;
// top: 0rem;
// left: 0rem;
// background-image: url('https://img.bnyer.cn/vip/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230901115742.png');
// background-size: 100% 100%;
// background-repeat: no-repeat;
// border-bottom: 5px solid rgb(255, 102, 0);
// }
.fixed { .fixed {
position: fixed !important; position: fixed !important;
@ -349,8 +362,8 @@ export default {
margin-top: 3.1rem; margin-top: 3.1rem;
width: 90%; width: 90%;
height: auto; height: auto;
background-color: antiquewhite; background-color: rgb(252, 242, 228);
border-radius: 20px; border-radius: 10px;
padding: 15px; padding: 15px;
box-sizing: border-box; box-sizing: border-box;
.get-title { .get-title {
@ -372,7 +385,7 @@ export default {
justify-content: space-between; justify-content: space-between;
// align-items: center; // align-items: center;
.active { .active {
border: 5px solid #dc2c00; border: 5px solid #dc5100;
} }
.vip-item { .vip-item {
width: 18%; width: 18%;
@ -404,7 +417,7 @@ export default {
// align-items: center; // align-items: center;
.active { .active {
border: 5px solid #dc2c00; border: 5px solid #dc5100;
} }
.mt-item { .mt-item {
width: 18%; width: 18%;
@ -468,9 +481,9 @@ export default {
.cls_img_btn { .cls_img_btn {
margin-top: 0.4rem; margin-top: 0.4rem;
position: relative; position: relative;
width: 6rem; width: 5.2rem;
height: 1.6rem; // height: 1.6rem;
animation: btnScaleAnim 1s infinite; // animation: btnScaleAnim 1s infinite;
@keyframes btnScaleAnim { @keyframes btnScaleAnim {
0%{ 0%{
transform: scale(0.9); transform: scale(0.9);
@ -491,19 +504,25 @@ export default {
font-size: 11px; font-size: 11px;
} }
.rule-box { .rule-box {
margin-top: 0.4rem; margin-top: 0.3rem;
position: relative; position: relative;
width: 86%; width: 100%;
// height: 12rem; // height: 12rem;
background-color: #f37151; // background-color: #f37151;
border-radius: 10px; border-radius: 5px;
padding: 12px 18px; padding: 12px 30px;
box-sizing: border-box; box-sizing: border-box;
// border-top: 5px solid rgb(255, 102, 0);
.rule-icon { .rule-icon {
background-image: url('https://img.bnyer.cn/vip/rule-icon.png'); margin-top: 0.6rem;
background-size: 100% 100%;
width: 1.7rem; text-align: center;
height: 0.6rem; font-size: 0.32rem;
color: #FFF;
// background-image: url('https://img.bnyer.cn/vip/rule-icon.png');
// background-size: 100% 100%;
// width: 1.7rem;
// height: 0.6rem;
} }
.rule-content { .rule-content {

Loading…
Cancel
Save