🎨 style: 修改样式
This commit is contained in:
wangsongsole
parent
ad06e50a71
commit
72a7278185
120
combining.css
120
combining.css
|
|
@ -49,55 +49,31 @@ body {
|
|||
|
||||
.content {
|
||||
min-height: 100%;
|
||||
background-color: #f2f4fe;
|
||||
background: linear-gradient(#ff2c02 0 10%, #f6f6f4 25% 70%);
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0 0 0.08rem 0.08rem;
|
||||
}
|
||||
|
||||
.content .logo {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
padding-top: 0.2rem;
|
||||
}
|
||||
|
||||
.content .logo img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.content .flex-but {
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 0.16rem;
|
||||
box-sizing: border-box;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.content .flex-but .but {
|
||||
margin-bottom: 0.1rem;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: #FF0000;
|
||||
height: 0.42rem;
|
||||
border-radius: 0.2rem;
|
||||
.content .nav {
|
||||
text-align: center;
|
||||
font-size: 0.18rem;
|
||||
color: #fff;
|
||||
font-size: 0.16rem;
|
||||
}
|
||||
|
||||
.content .notis {
|
||||
margin-top: 0.5rem;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #fff;
|
||||
padding: 0.12rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content .box {
|
||||
padding: 0.16rem;
|
||||
}
|
||||
|
||||
.content .box .box-top,
|
||||
.content .box .box-cotent,
|
||||
.content .box .box-footer {
|
||||
border-radius: 0.12rem;
|
||||
|
|
@ -107,6 +83,10 @@ body {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content .box .box-cotent {
|
||||
padding: 0.2rem 0 0.3rem;
|
||||
}
|
||||
|
||||
.content .box .b-t-t {
|
||||
font-size: 0.18rem;
|
||||
font-weight: bold;
|
||||
|
|
@ -114,10 +94,37 @@ body {
|
|||
color: #333333;
|
||||
}
|
||||
|
||||
.content .box .logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.content .box .logo img {
|
||||
width: 0.3rem;
|
||||
margin-right: 0.06rem;
|
||||
}
|
||||
|
||||
.content .box .t-1 {
|
||||
color: #666;
|
||||
margin-bottom: 0.04rem;
|
||||
font-size: 0.12rem;
|
||||
}
|
||||
|
||||
.content .box .time {
|
||||
font-size: 0.12rem;
|
||||
margin-top: 0.08rem;
|
||||
color: #666666;
|
||||
max-width: 82%;
|
||||
margin: 0 auto;
|
||||
word-spacing: 0.05rem;
|
||||
line-height: 0.18rem;
|
||||
}
|
||||
|
||||
.content .box .dashedLine {
|
||||
width: 100%;
|
||||
margin: 0.2rem 0;
|
||||
}
|
||||
|
||||
.content .box .box-footer .b-f-t {
|
||||
|
|
@ -163,53 +170,26 @@ body {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content .box .box-cotent .b-c-t {
|
||||
font-size: 0.16rem;
|
||||
margin-bottom: 0.2rem;
|
||||
font-weight: bold;
|
||||
line-height: 0.2rem;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.content .box .box-cotent .b-c-t img {
|
||||
width: 0.12rem;
|
||||
}
|
||||
|
||||
.content .box .box-cotent .b-c-t img:first-child {
|
||||
margin-right: 0.06rem;
|
||||
}
|
||||
|
||||
.content .box .box-cotent .b-c-t img:last-child {
|
||||
margin-left: 0.06rem;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.content .box .box-cotent input {
|
||||
width: 100%;
|
||||
width: 90%;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: #f8f9fd;
|
||||
height: 0.42rem;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0 0.2rem;
|
||||
margin-bottom: 0.14rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content .box .box-cotent .tips {
|
||||
color: #FF0000;
|
||||
font-size: 0.12rem;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 0.14rem;
|
||||
}
|
||||
|
||||
.content .box .box-cotent .but {
|
||||
margin-top: 0.2rem;
|
||||
width: 100%;
|
||||
width: 90%;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: #FF0000;
|
||||
background: #e52600;
|
||||
height: 0.42rem;
|
||||
border-radius: 0.2rem;
|
||||
color: #fff;
|
||||
|
|
@ -294,7 +274,7 @@ body {
|
|||
.mask .model .m-but {
|
||||
font-size: 0.16rem;
|
||||
color: #fff;
|
||||
background-color: #FF0000;
|
||||
background-color: #e52600;
|
||||
border-radius: 0.2rem;
|
||||
height: 0.42rem;
|
||||
border: 0;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/axios.js?v=1367936144322">
|
||||
</script>
|
||||
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api2_0.js"></script>
|
||||
<script src="./api2_0.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -32,44 +32,44 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="logo">
|
||||
<img :src="goods.group_info.group_cover" alt="">
|
||||
</div>
|
||||
<div class="content" :style="{background: `linear-gradient(${dynamicStyle.bg} 0 10%, #f6f6f4 25% 70%)`}">
|
||||
<p class="nav">领取页面</p>
|
||||
<p class="notis">恭喜您领取立减金</p>
|
||||
<div class="box">
|
||||
<div class="box-top">
|
||||
<div class="box-cotent">
|
||||
<p class="b-t-t">{{goods.title}}</p>
|
||||
<p class="time">生效时间：{{goods.group_info.time_limit.effect_time.start_time}} ~
|
||||
{{goods.group_info.time_limit.effect_time.end_time}}</p>
|
||||
<div class="logo">
|
||||
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/unionPay.svg"
|
||||
alt="">
|
||||
<span>中国银联</span>
|
||||
</div>
|
||||
<p class="t-1">内含 {{goods.send_num}} 张</p>
|
||||
<p class="t-1">适用于：{{goods.group_info.channel==1?'支付宝':goods.group_info.channel==2?'微信':'云闪付'}}
|
||||
</p>
|
||||
<img class="dashedLine"
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/combining_dashedLine.png"
|
||||
alt="">
|
||||
<template
|
||||
v-if="goods.group_info.channel==3||goods.group_info.channel==1&&goods.group_info.receive_mode==2">
|
||||
<input type="text" maxlength="50" :placeholder="goods.group_info.channel==3?'请输入手机号':'请输入账号'"
|
||||
v-model="form.confirm">
|
||||
<input type="text" maxlength="50"
|
||||
:placeholder="goods.group_info.channel==3?'请再次输入手机号':'请再次输入账号'"
|
||||
v-model="form.receive_account">
|
||||
</template>
|
||||
|
||||
<p class="time" style="margin-top: 0;">生效时间：{{goods.group_info.time_limit.effect_time.start_time}} ~
|
||||
{{goods.group_info.time_limit.effect_time.end_time}}，逾期不可领取</p>
|
||||
<p class="time" v-if="goods.group_info.time_limit.receive_time.start_time">
|
||||
领取时间：{{goods.group_info.time_limit.receive_time.start_time}} ~
|
||||
{{goods.group_info.time_limit.receive_time.end_time}}</p>
|
||||
</div>
|
||||
<div class="box-cotent"
|
||||
v-if="goods.group_info.channel==3||goods.group_info.channel==1&&goods.group_info.receive_mode==2">
|
||||
<p class="b-c-t">
|
||||
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/common_title_sm.png"
|
||||
alt="">
|
||||
{{goods.group_info.channel==3?'云闪付账号':'支付宝账号'}}
|
||||
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/common_title_sm.png"
|
||||
alt="">
|
||||
</p>
|
||||
<input type="text" maxlength="50" :placeholder="goods.group_info.channel==3?'请输入手机号':'请输入账号'"
|
||||
v-model="form.confirm">
|
||||
<input type="text" maxlength="50" :placeholder="goods.group_info.channel==3?'请再次输入手机号':'请再次输入账号'"
|
||||
v-model="form.receive_account">
|
||||
<p class="tips" v-if="goods.group_info.channel==1">
|
||||
*您可在支付宝的个人信息中查看【支付宝账号】
|
||||
</p>
|
||||
<button class="but" @click="submit" v-if="goods.status==1">立即领取</button>
|
||||
<button class="but" v-else style="background: #ff8a8a;">已领取</button>
|
||||
</div>
|
||||
<div class="flex-but" v-else>
|
||||
<button class="but" @click="directSubmit">立即领取</button>
|
||||
|
||||
<button class="but" :style="{background: dynamicStyle.bg}" @click="submit"
|
||||
v-if="goods.receive_status==1">立即领取</button>
|
||||
<button class="but" v-else :style="{background: dynamicStyle.bt}">已领取</button>
|
||||
</div>
|
||||
|
||||
<div class="box-footer"
|
||||
:style="{marginBottom:goods.group_info.channel==3||goods.group_info.channel==1&&goods.group_info.receive_mode==2?'0rem':'0.9rem'}">
|
||||
<div class="box-footer">
|
||||
<template v-if="!goods.group_info.group_image">
|
||||
<p class="b-f-t">
|
||||
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/common_title_sm.png"
|
||||
|
|
@ -120,6 +120,21 @@
|
|||
this.getProductDetail();
|
||||
},
|
||||
|
||||
computed: {
|
||||
dynamicStyle () {
|
||||
switch (Number(this.goods.group_info.channel)) {
|
||||
case 1:
|
||||
return { bg: '#0076f6', bt: '#c2dbf5' };
|
||||
case 2:
|
||||
return { bg: '#07c160', bt: '#cfeddc' };
|
||||
case 3:
|
||||
return { bg: '#ff2c02', bt: '#f9bbae' };
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
//获取商品详情
|
||||
getProductDetail () {
|
||||
|
|
@ -133,6 +148,7 @@
|
|||
}).catch();
|
||||
},
|
||||
|
||||
|
||||
/* ******************************************** 官方领取 ******************************************** */
|
||||
/* 直接领取 */
|
||||
directSubmit () {
|
||||
|
|
@ -185,6 +201,7 @@
|
|||
/* ******************************************** 账号领取 ******************************************** */
|
||||
/* 立即领取 */
|
||||
submit () {
|
||||
if (this.goods.group_info.channel == 3 || this.goods.group_info.channel == 1 && this.goods.group_info.receive_mode == 2) {
|
||||
const { confirm, receive_account } = this.form;
|
||||
if (this.loading) return;
|
||||
if (confirm !== receive_account) return this.tips('两次输入账号不一致');
|
||||
|
|
@ -194,6 +211,10 @@
|
|||
} else {
|
||||
this.tips('请输入正确的账号');
|
||||
}
|
||||
} else {
|
||||
this.directSubmit();
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/* 验证后 最终提交 */
|
||||
|
|
|
|||
118
combining.scss
118
combining.scss
|
|
@ -52,53 +52,29 @@ body {
|
|||
|
||||
.content {
|
||||
min-height: 100%;
|
||||
background-color: #f2f4fe;
|
||||
background: linear-gradient(#ff2c02 0 10%, #f6f6f4 25% 70%);
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0 0 0.08rem 0.08rem;
|
||||
|
||||
.logo {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
padding-top: 0.2rem;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-but {
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 0.16rem;
|
||||
box-sizing: border-box;
|
||||
z-index: 2;
|
||||
|
||||
.but {
|
||||
margin-bottom: 0.1rem;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: #FF0000;
|
||||
height: 0.42rem;
|
||||
border-radius: 0.2rem;
|
||||
.nav {
|
||||
text-align: center;
|
||||
font-size: 0.18rem;
|
||||
color: #fff;
|
||||
font-size: 0.16rem;
|
||||
}
|
||||
|
||||
.notis {
|
||||
margin-top: 0.5rem;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #fff;
|
||||
padding: 0.12rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.box {
|
||||
padding: 0.16rem;
|
||||
|
||||
.box-top,
|
||||
.box-cotent,
|
||||
.box-footer {
|
||||
border-radius: 0.12rem;
|
||||
|
|
@ -108,6 +84,10 @@ body {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.box-cotent {
|
||||
padding: 0.2rem 0 0.3rem;
|
||||
}
|
||||
|
||||
.b-t-t {
|
||||
font-size: 0.18rem;
|
||||
font-weight: bold;
|
||||
|
|
@ -115,10 +95,37 @@ body {
|
|||
color: #333333;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 0.3rem;
|
||||
|
||||
img {
|
||||
width: 0.3rem;
|
||||
margin-right: 0.06rem;
|
||||
}
|
||||
}
|
||||
|
||||
.t-1 {
|
||||
color: #666;
|
||||
margin-bottom: 0.04rem;
|
||||
font-size: 0.12rem;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 0.12rem;
|
||||
margin-top: 0.08rem;
|
||||
color: #666666;
|
||||
max-width: 82%;
|
||||
margin: 0 auto;
|
||||
word-spacing: 0.05rem;
|
||||
line-height: 0.18rem;
|
||||
}
|
||||
|
||||
.dashedLine {
|
||||
width: 100%;
|
||||
margin: 0.2rem 0;
|
||||
}
|
||||
|
||||
.box-footer {
|
||||
|
|
@ -168,53 +175,26 @@ body {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.b-c-t {
|
||||
font-size: 0.16rem;
|
||||
margin-bottom: 0.2rem;
|
||||
font-weight: bold;
|
||||
line-height: 0.2rem;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 0.12rem;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 0.06rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-left: 0.06rem;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
width: 90%;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: #f8f9fd;
|
||||
height: 0.42rem;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0 0.2rem;
|
||||
margin-bottom: 0.14rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tips {
|
||||
color: #FF0000;
|
||||
font-size: 0.12rem;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 0.14rem;
|
||||
}
|
||||
|
||||
.but {
|
||||
margin-top: 0.2rem;
|
||||
width: 100%;
|
||||
width: 90%;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: #FF0000;
|
||||
background: #e52600;
|
||||
height: 0.42rem;
|
||||
border-radius: 0.2rem;
|
||||
color: #fff;
|
||||
|
|
@ -300,7 +280,7 @@ body {
|
|||
.m-but {
|
||||
font-size: 0.16rem;
|
||||
color: #fff;
|
||||
background-color: #FF0000;
|
||||
background-color: #e52600;
|
||||
border-radius: 0.2rem;
|
||||
height: 0.42rem;
|
||||
border: 0;
|
||||
|
|
|
|||
Loading…
Reference in New Issue