[本时生活h5端]
This commit is contained in:
749
pages/giftPack/index.vue
Normal file
749
pages/giftPack/index.vue
Normal file
@@ -0,0 +1,749 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="content-border">
|
||||
<view v-for="(item, idx) in adverts" :key="item.cover">
|
||||
<image class="campusBanner" :src="item.cover" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="recommend"></view>
|
||||
<!-- tab -->
|
||||
<view class="indexTab">
|
||||
<view class="indexTab-item" :class="{active : tabType == item.used}" @tap="orderTab" v-for="(item, index) in tabList" :key="index" :data-state="(item.used)">
|
||||
<view class="indexTab-title">
|
||||
{{ item.title }}
|
||||
</view>
|
||||
<view class="indexTab-number">
|
||||
<block v-if="isUser">({{item.used == 0 ? '剩余' + numbers + '次' : count + '张'}})</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 可兑换 -->
|
||||
<block v-if="tabType == 0">
|
||||
<view v-if="isUser">
|
||||
<block v-if="giftPackArr.length > 0">
|
||||
<view class="film" v-for="(item, index) in giftPackArr" :key="index">
|
||||
<view v-if="item.can.buy" class="filMargin">
|
||||
<view class="filmTitle">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="filmList">
|
||||
<view class="filmList-top">
|
||||
<view class="filmList-top-name">
|
||||
{{ item.two_title || '-' }}<text>{{ item.description || '-'}}</text>
|
||||
</view>
|
||||
<view class="filmList-top-price" :class="{active : !item.can.buy}" @click="judgeGeneral(item.activity_month_category_id)">
|
||||
<text>立即</text>
|
||||
<text>兑换</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filmList-text">
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
<view class="filmList-tips">兑换前请仔细阅读详细信息。</view>
|
||||
<view class="filmList-more" @click="moreClick(index)">详细信息<image src="/static/icon/giftPack-icon-yellow.png" class="filmList-more-icon" :class="{active: item.schemesShow }" mode="aspectFill"></image></view>
|
||||
|
||||
<view class="filmList-show" v-if="item.schemesShow">
|
||||
<rich-text :nodes="item.content"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 列表为空 -->
|
||||
<view class="campusTips" v-else>
|
||||
<view class="campusTips-cont">
|
||||
<image src="/static/img/giftPack-null.png" mode="aspectFill"></image>
|
||||
<view>暂无权益</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="campusTips" v-else>
|
||||
<view class="campusTips-cont">
|
||||
<image src="/static/img/giftPack-null.png"></image>
|
||||
<view>请您先登录，进行权益查看~</view>
|
||||
<navigator hover-class="none" url="/pages/giftPack/signin" class="campusTips-cont-go">立即登录</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 已兑换 -->
|
||||
<block v-if="tabType == 1">
|
||||
<view v-if="isUser">
|
||||
<block v-if="couponArr.length > 0">
|
||||
<view class="coupon" v-for="(item, index) in couponArr" :key="index">
|
||||
<view class="couponItem">
|
||||
<view class="couponItem-cont">
|
||||
<view class="couponItem-top">
|
||||
<view class="couponItem-cont-number">
|
||||
￥<text>{{item.price}}</text>
|
||||
</view>
|
||||
<view class="couponItem-cont-name">
|
||||
<view class="nowrap couponItem-cont-title">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="couponItem-cont-show" @click="moreCoupon(index)">
|
||||
详细信息<image src="/static/icon/giftPack-icon.png" class="couponItem-cont-icon" :class="{active: item.couponShow }" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<navigator class="couponItem-btn" hover-class="none" :url="'/pages/giftPack/details?id=' + item.id">
|
||||
立即使用
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="couponItem-cont-text" v-if="item.couponShow">
|
||||
<rich-text :nodes="item.remark"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 列表为空 -->
|
||||
<view class="campusTips" v-else>
|
||||
<view class="campusTips-cont">
|
||||
<image src="/static/img/giftPack-null.png"></image>
|
||||
<view>可使用的权益暂时没有啦~</view>
|
||||
<navigator hover-class="none" url="/pages/giftPack/myCoupon" class="campusTips-cont-go">我的优惠券</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="campusTips" v-else>
|
||||
<view class="campusTips-cont">
|
||||
<image src="/static/img/giftPack-null.png"></image>
|
||||
<view>请您先登录，进行优惠券查看~</view>
|
||||
<navigator hover-class="none" url="/pages/giftPack/signin" class="campusTips-cont-go">立即登录</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<view class="campusBtn">
|
||||
<navigator url="/pages/giftPack/index" hover-class="none" class="campusBtn-go active">
|
||||
<image class="campusBtn-iocn" src="/static/img/giftPack-user00_active.png" mode="widthFix"></image>
|
||||
<view class="campusBtn-name">
|
||||
活动首页
|
||||
</view>
|
||||
</navigator>
|
||||
<navigator url="/pages/giftPack/user" hover-class="none" class="campusBtn-go">
|
||||
<image class="campusBtn-iocn" src="/static/img/giftPack-user01.png" mode="widthFix"></image>
|
||||
<view class="campusBtn-name">
|
||||
个人中心
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 是否兑换弹出 -->
|
||||
<view class="tipsBack" v-if="generalShow"></view>
|
||||
<view class="tipsCont" v-if="generalShow">
|
||||
<view class="tipsWhite">
|
||||
<image class="tipsCont-img" src="/static/img/dhImg.png" mode="widthFix"></image>
|
||||
<view class="tipsWhite-top">
|
||||
<view class="tipsWhite-name">
|
||||
兑换权益提示
|
||||
</view>
|
||||
<view class="tipsWhite-text">
|
||||
<text>兑换权益前请仔细阅读，本权益项下的</text>
|
||||
<text>【详细信息】。确认兑换后，您本月将不能</text>
|
||||
<text>换取其他权益。如确定请点击【立即兑换】</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tipsWhite-btn">
|
||||
<view class="tipsWhite-btn-go" @click="generalShow = false">
|
||||
暂不兑换
|
||||
</view>
|
||||
<view class="tipsWhite-btn-go" @click="payment">
|
||||
立即兑换
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { index, coupon, monthsChoose } from '@/apis/interfaces/giftPack'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isUser : false, // 用户是否登录
|
||||
giftPackArr : [],
|
||||
adverts : [],
|
||||
couponArr : [],
|
||||
numbers : '',
|
||||
count : '',
|
||||
|
||||
//Tab列表
|
||||
tabList : [
|
||||
{ title : "可兑换", used: 0 },
|
||||
{ title : "已兑换", used: 1 }
|
||||
],
|
||||
tabType : 0, //卡券状态
|
||||
generalId : '', //卡券id
|
||||
generalShow : false //卡券兑换提示
|
||||
}
|
||||
},
|
||||
|
||||
// 生命周期函数--监听页面加载
|
||||
onLoad(options) {},
|
||||
|
||||
// 生命周期函数--监听页面显示
|
||||
onShow() {
|
||||
// 存储环境-月兑活动
|
||||
getApp().globalData.envType = 'giftPEnv'
|
||||
|
||||
if(uni.getStorageSync("token")) {
|
||||
this.isUser = true
|
||||
}
|
||||
|
||||
// 获取首页数据
|
||||
this.indexInfo()
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 首页数据
|
||||
indexInfo() {
|
||||
if(this.tabType == 0) {
|
||||
// 获取首页数据
|
||||
index().then(res=>{
|
||||
var listData = res.categories
|
||||
for(let val in listData){
|
||||
listData[val].schemesShow = false
|
||||
}
|
||||
this.giftPackArr = listData
|
||||
this.numbers = res.numbers
|
||||
this.count = res.coupons_count
|
||||
this.adverts = res.adverts
|
||||
}).catch(err=>{})
|
||||
} else {
|
||||
if(uni.getStorageSync("token")) {
|
||||
// 获取优惠券数据
|
||||
coupon().then(res=>{
|
||||
var listData = res.data
|
||||
for(let val in listData){
|
||||
listData[val].couponShow = false
|
||||
}
|
||||
this.couponArr = listData
|
||||
}).catch(err=>{})
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
// 处理未登录时的转跳
|
||||
userNav(url){
|
||||
let pageUrl = url
|
||||
if(uni.getStorageSync("token")) {
|
||||
uni.navigateTo({
|
||||
url: pageUrl
|
||||
})
|
||||
return
|
||||
}
|
||||
// 去登录
|
||||
uni.navigateTo({
|
||||
url: '/pages/giftPack/signin'
|
||||
})
|
||||
},
|
||||
|
||||
// tabs 选项卡
|
||||
orderTab(e){
|
||||
let state = e.currentTarget.dataset.state
|
||||
this.tabType = state
|
||||
|
||||
// 获取首页数据
|
||||
this.indexInfo();
|
||||
},
|
||||
|
||||
// 可兑换信息展开
|
||||
moreClick(index) {
|
||||
this.giftPackArr[index].schemesShow = !this.giftPackArr[index].schemesShow
|
||||
},
|
||||
|
||||
// 已兑换细信息展开
|
||||
moreCoupon(index) {
|
||||
this.couponArr[index].couponShow = !this.couponArr[index].couponShow
|
||||
},
|
||||
|
||||
// 兑换按钮
|
||||
judgeGeneral(id) {
|
||||
this.generalId = id
|
||||
if(this.numbers != 0) {
|
||||
this.generalShow = !this.generalShow
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pages/giftPack/list?id=' + id
|
||||
})
|
||||
},
|
||||
|
||||
// 兑换跳转
|
||||
payment(){
|
||||
monthsChoose(this.generalId).then(res=>{
|
||||
this.generalShow = false
|
||||
uni.navigateTo({
|
||||
url: '/pages/giftPack/list?id=' + this.generalId
|
||||
})
|
||||
}).catch(err=>{})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
background: linear-gradient(to bottom, #fdf5cc, #cbaf7f);
|
||||
padding-bottom: 40rpx;
|
||||
height: 100vh;
|
||||
overflow-y: scroll;
|
||||
box-sizing: border-box
|
||||
}
|
||||
.content-border {
|
||||
border-bottom: 130rpx transparent solid;
|
||||
}
|
||||
|
||||
// banner
|
||||
.campusBanner {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// 推荐
|
||||
.recommend {
|
||||
overflow: hidden;
|
||||
margin-top: -60rpx;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
.recommend-label {
|
||||
text-align: center;
|
||||
width: calc(50% - 20rpx);
|
||||
float: left;
|
||||
margin: 0 10rpx 30rpx;
|
||||
.recommend-label-img {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
margin: 0 auto 10rpx;
|
||||
background: linear-gradient(to bottom, #293350, #484e74);
|
||||
box-shadow: 0px 8px 6px rgba(249,228,129,.5);
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
image {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin: 35rpx;
|
||||
}
|
||||
}
|
||||
.recommend-label-text {
|
||||
text {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 列表
|
||||
.film {
|
||||
width: 100%;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.filMargin {
|
||||
padding: 0 0 30rpx;
|
||||
}
|
||||
.filmTitle {
|
||||
background: linear-gradient(to right, #feefce, #fbe9c0, #e8d19b);
|
||||
line-height: 80rpx;
|
||||
box-shadow: -4px 0 10px rgba(134,97,33,.2);
|
||||
text-align: center;
|
||||
border-radius: 10rpx 10rpx 0 0;
|
||||
color: #a47d53;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
.filmList {
|
||||
position: relative;
|
||||
background: linear-gradient(to right, #494e75, #27314d);
|
||||
box-shadow: 0px 6px 10px rgba(134,97,33,.5);
|
||||
border-radius: 10rpx;
|
||||
padding: 50rpx 30rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 20rpx;
|
||||
overflow: hidden;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.filmList-tag {
|
||||
transform: rotate(45deg);
|
||||
position: absolute;
|
||||
padding: 10px 0;
|
||||
right: -33px;
|
||||
top: -10px;
|
||||
width: 150px;
|
||||
background: red;
|
||||
.filmList-tag-text {
|
||||
position: absolute;
|
||||
color: #FFFFFF;
|
||||
right: 20px;
|
||||
text-align: center;
|
||||
top: 2px;
|
||||
font-size: 12px;;
|
||||
transform:rotate(-360deg);
|
||||
}
|
||||
}
|
||||
.filmList-more {
|
||||
font-size: 26rpx;
|
||||
text-align: left;
|
||||
color: #fce2ae;
|
||||
margin-top: 15rpx;
|
||||
line-height: 40rpx;
|
||||
.filmList-more-icon {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
vertical-align: -6rpx;
|
||||
margin-left: 5rpx;
|
||||
transition: .2s;
|
||||
&.active {
|
||||
transform:rotate(-180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.filmList-show {
|
||||
font-size: 24rpx;
|
||||
border-radius: 10rpx;
|
||||
background-color: rgba(255,255,255,.1);
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
margin-top: 20rpx;
|
||||
opacity: .9;
|
||||
color: #fce2ae;
|
||||
text-align: justify;
|
||||
line-height: 42rpx;
|
||||
text {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.filmList-top {
|
||||
display: flex;
|
||||
margin-bottom: 10rpx;
|
||||
.filmList-top-name {
|
||||
width: calc(100% - 140rpx);
|
||||
margin-right: 20rpx;
|
||||
color: #fce2ae;
|
||||
font-size: 32rpx;
|
||||
margin-top: 10rpx;
|
||||
text {
|
||||
display: block;
|
||||
font-size: 25rpx;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
}
|
||||
.filmList-top-price {
|
||||
position: relative;
|
||||
background: linear-gradient(to right, #d3ad68, #cda65f);
|
||||
box-shadow: 0px 2px 10px rgba(249,228,129,.5);
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
padding-top: 20rpx;
|
||||
font-size: 30rpx;
|
||||
box-sizing: border-box;
|
||||
&.active {
|
||||
background: linear-gradient(to right, #a1a1a1, #a1a1a1);
|
||||
}
|
||||
text {
|
||||
display: block;
|
||||
text-shadow: 0px 6px 10px rgba(134,97,33,.5);
|
||||
}
|
||||
.filmList-tag{
|
||||
position: absolute;
|
||||
background: #ff0000;
|
||||
color: white;
|
||||
font-size: 20rpx;
|
||||
top: -10%;
|
||||
left: 20%;
|
||||
width: 120rpx;
|
||||
padding: 0 10rpx;
|
||||
line-height: 40rpx;
|
||||
border-radius: 15rpx;
|
||||
transform: scale(0.58)
|
||||
}
|
||||
}
|
||||
}
|
||||
.filmList-text {
|
||||
font-size: 20rpx;
|
||||
color: #c1c1c1;
|
||||
// margin-left: -70rpx;
|
||||
text {
|
||||
display: block;
|
||||
// transform: scale(0.8)
|
||||
}
|
||||
}
|
||||
.filmList-tips {
|
||||
font-size: 24rpx;
|
||||
color: #c1c1c1;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 已兑换
|
||||
.coupon {
|
||||
padding: 0 30rpx 10rpx;
|
||||
box-sizing: border-box;
|
||||
.couponItem {
|
||||
margin-bottom: 30rpx;
|
||||
.couponItem-cont {
|
||||
background-color: #caa668;
|
||||
border-radius: 10rpx;
|
||||
position: relative;
|
||||
height: 140rpx;
|
||||
overflow: hidden;
|
||||
.couponItem-top {
|
||||
padding: 30rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to right, #fffbf5, #f2e2cc);
|
||||
width: calc(100% - 160rpx);
|
||||
display: flex;
|
||||
border-radius: 0 15rpx 15rpx 0;
|
||||
.couponItem-cont-number {
|
||||
width: 100rpx;
|
||||
line-height: 84rpx;
|
||||
color: #a85920;
|
||||
text {
|
||||
font-size: 54rpx;
|
||||
}
|
||||
}
|
||||
.couponItem-cont-name {
|
||||
color: #72411f;
|
||||
padding-left: 40rpx;
|
||||
box-sizing: border-box;
|
||||
width: calc(100% - 100rpx);
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 13rpx;
|
||||
top: 10%;
|
||||
background-color: #ecd5c1;
|
||||
width: 2rpx;
|
||||
height: 80%;
|
||||
}
|
||||
.couponItem-cont-title {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.couponItem-cont-show {
|
||||
display: flex;
|
||||
font-size: 26rpx;
|
||||
padding-top: 13rpx;
|
||||
.couponItem-cont-icon {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
vertical-align: -6rpx;
|
||||
margin-left: 5rpx;
|
||||
transition: .2s;
|
||||
&.active {
|
||||
transform:rotate(-180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.couponItem-btn {
|
||||
line-height: 140rpx;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 160rpx;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
.couponItem-cont-text {
|
||||
background-image: linear-gradient(-20deg, #fffbf5, #fbefdf);
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
color: #bc8863;
|
||||
line-height: 48rpx;
|
||||
font-size: 24rpx;
|
||||
margin-top: -4rpx;
|
||||
text-align: justify;
|
||||
border-radius: 0 0 15rpx 15rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮
|
||||
.campusBtn {
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 130rpx;
|
||||
z-index: 999;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
font-size: 28rpx;
|
||||
.campusBtn-go {
|
||||
flex: 2;
|
||||
padding-top: 20rpx;
|
||||
.campusBtn-iocn {
|
||||
width: 44rpx;
|
||||
}
|
||||
.campusBtn-name {
|
||||
color: #abaeb2;
|
||||
}
|
||||
&.active .campusBtn-name {
|
||||
color: #2b3452;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// tab
|
||||
.indexTab {
|
||||
display: flex;
|
||||
margin-bottom: 30rpx;
|
||||
.indexTab-item {
|
||||
text-align: center;
|
||||
font-size: 34rpx;
|
||||
flex: 2;
|
||||
padding-bottom: 20rpx;
|
||||
position: relative;
|
||||
color: #8c919f;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: calc(50% - 20rpx);
|
||||
bottom: 0;
|
||||
width: 40rpx;
|
||||
height: 8rpx;
|
||||
background-color: transparent;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
&.active::after {
|
||||
background-color: #27314d;
|
||||
}
|
||||
&.active {
|
||||
color: #27314d;
|
||||
font-weight: 600;
|
||||
}
|
||||
.indexTab-title,
|
||||
.indexTab-number {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.campusTips {
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
.campusTips-cont {
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
text-align: center;
|
||||
padding: 80rpx;
|
||||
box-sizing: border-box;
|
||||
color: #9c7557;
|
||||
image {
|
||||
width: 340rpx;
|
||||
height: 280rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.campusTips-cont-go {
|
||||
display: inline-block;
|
||||
border: #9c7557 2rpx solid;
|
||||
line-height: 66rpx;
|
||||
padding: 0 40rpx;
|
||||
margin-top: 30rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 90rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 是否兑换弹出
|
||||
.tipsBack {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
background-color: rgba(0, 0, 0, .8);
|
||||
}
|
||||
.tipsCont {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-pack: center;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
padding: 0 10%;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tipsWhite {
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tipsWhite-top {
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tipsCont-img {
|
||||
width: 40%;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.tipsWhite-name {
|
||||
text-align: center;
|
||||
color: #111111;
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.tipsWhite-text {
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
line-height: 48rpx;
|
||||
text {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.tipsWhite-btn {
|
||||
display: flex;
|
||||
padding: 20rpx 10rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
.tipsWhite-btn-go {
|
||||
flex: 2;
|
||||
color: #fff;
|
||||
margin: 0 15rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
border: 2rpx solid #F6F6F6;
|
||||
background-color: #27314d;
|
||||
border-radius: 10rpx;
|
||||
&:first-child {
|
||||
color: #333333;
|
||||
background-color: #ffffff;
|
||||
border: 2rpx solid #cccccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user