bnyer
/
rights-front
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

页面修改

master
langz 2 years ago
parent
659ff3e4e2
commit
8cd18dae35
3 changed files with 66 additions and 42 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

@ -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
View File

@ -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
View File

@ -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 {

Write Preview
Loading…
Cancel
Save