509 lines
14 KiB
Vue
509 lines
14 KiB
Vue
|
<template>
|
|||
|
|
<view class="content">
|
|||
|
|
<view class="container">
|
|||
|
|
<view class="my-header">
|
|||
|
|
<view class="my-icons" @click="goback"> <uni-icons type="left" size="16"></uni-icons> </view>
|
|||
|
|
<view class="my-text">{{title||"详情页"}}</view>
|
|||
|
|
<view class="my-icons"></view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 顶部区域 -->
|
|||
|
|
<view style="height: 200px;!important">
|
|||
|
|
<view style="text-align: center;">
|
|||
|
|
<image src="../../static/imgs/xfyl.png" v-if="title == '消费有礼活动'"></image>
|
|||
|
|
<image src="../../static/imgs/zkyx.png" v-if="title == '折扣营销活动'"></image>
|
|||
|
|
<image src="../../static/imgs/mjyh.png" v-if="title == '满减营销活动'"></image>
|
|||
|
|
<image src="../../static/imgs/xryl.png" v-if="title == '新人有礼活动'"></image>
|
|||
|
|
<image src="../../static/imgs/yqyl.png" v-if="title == '推荐有礼活动'"></image>
|
|||
|
|
<image src="../../static/imgs/chongzhi.png" v-if="title == '储值卡充值活动'"></image>
|
|||
|
|
<image src="../../static/imgs/oilCard.png" v-if="title == '囤油卡充值活动'"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="center-box" v-for="(item,index) in datas" :key="index" v-if="title == '消费有礼活动'">
|
|||
|
|
<view class=" title-box">活动介绍</view>
|
|||
|
|
<view class="h_size">{{item.discountActiveDescribe || ""}}</view>
|
|||
|
|
<view class="box-bottom">
|
|||
|
|
<view class="">活动时间</view>
|
|||
|
|
<view>{{item.time}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="title-box">参与油品</view>
|
|||
|
|
<view class="w_box">
|
|||
|
|
<view class="w_oil" v-for="(item,index) in item.oilName" :key="index">{{item}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="h_bottom">
|
|||
|
|
<view class="dis-box">
|
|||
|
|
<view class="dian"></view>
|
|||
|
|
<view class="h_size">参与会员：{{item.adaptUserType}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="dis-box">
|
|||
|
|
<view class="dian" style="background: #FA5E03;"></view>
|
|||
|
|
<view class="h_size">获得奖励：赠送{{item.points}}积分</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="center-box" v-for="(item,index) in datas" :key="index" v-if="title == '折扣营销活动'">
|
|||
|
|
<view class=" title-box">活动介绍</view>
|
|||
|
|
<view class="h_size">{{item.discountActiveDescribe || ""}}</view>
|
|||
|
|
<view class="box-bottom">
|
|||
|
|
<view class="">活动时间</view>
|
|||
|
|
<view>{{item.time}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="title-box">参与油品</view>
|
|||
|
|
<view class="w_box">
|
|||
|
|
<view class="w_oil" v-for="(item,index) in item.oilName" :key="index">{{item}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="h_bottom">
|
|||
|
|
<view class="dis-box">
|
|||
|
|
<view class="dian"></view>
|
|||
|
|
<view class="h_size">参与会员：{{item.adaptUserType}}</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="dis-box">
|
|||
|
|
<view class="dian" style="background: #FA5E03;"></view>
|
|||
|
|
<view class="h_size">获得折扣：赠送{{item.points}}积分</view>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="center-box" v-for="(item,index) in datas" :key="index" v-if="title == '满减营销活动'">
|
|||
|
|
<view class=" title-box">活动介绍</view>
|
|||
|
|
<view class="h_size">{{item.discountActiveDescribe || ""}}</view>
|
|||
|
|
<view class="box-bottom">
|
|||
|
|
<view class="">活动时间</view>
|
|||
|
|
<view>{{item.time}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="title-box">参与油品</view>
|
|||
|
|
<view class="w_box">
|
|||
|
|
<view class="w_oil" v-for="(item,index) in item.oilName" :key="index">{{item}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="h_bottom">
|
|||
|
|
<view class="dis-box">
|
|||
|
|
<view class="dian"></view>
|
|||
|
|
<view class="h_size">参与会员：{{item.adaptUserType}}</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="dis-box">
|
|||
|
|
<view class="dian" style="background: #FA5E03;"></view>
|
|||
|
|
<view class="h_size">获得折扣：赠送10积分</view>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="center-box" v-for="(item,index) in datas" :key="index" v-if="title == '储值卡充值活动'">
|
|||
|
|
<view class=" title-box">活动介绍</view>
|
|||
|
|
<view class="h_size">{{item.discountActiveDescribe || ""}}</view>
|
|||
|
|
<view class="box-bottom">
|
|||
|
|
<view class="">活动时间：{{item.time}}</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="title-box">参与油品</view>
|
|||
|
|
<view class="w_box">
|
|||
|
|
<view class="w_oil" v-for="(item,index) in 3" :key="index">#95</view>
|
|||
|
|
</view> -->
|
|||
|
|
<view class="h_bottom">
|
|||
|
|
<view class="dis-box">
|
|||
|
|
<view class="dian"></view>
|
|||
|
|
<view class="h_size">参与会员：{{item.adaptUserType}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="dis-box">
|
|||
|
|
<view class="dian" style="background: #FA5E03;"></view>
|
|||
|
|
<view class="h_size">获得折扣：赠送{{item.points}}积分</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="dis-box">
|
|||
|
|
<view class="dian" style="background: #FA5E03;"></view>
|
|||
|
|
<view class="h_size">获得折扣：赠送{{item.growaValue}}成长值</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="center-box" v-for="(item,index) in datas" :key="index" v-if="title == '囤油卡充值活动'">
|
|||
|
|
<view class=" title-box">活动介绍</view>
|
|||
|
|
<view class="h_size">{{item.discountActiveDescribe || ""}}</view>
|
|||
|
|
<view class="box-bottom">
|
|||
|
|
<view class="">活动时间：{{item.time}}</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="title-box">参与油品</view>
|
|||
|
|
<view class="w_box">
|
|||
|
|
<view class="w_oil" v-for="(item,index) in 3" :key="index">#95</view>
|
|||
|
|
</view> -->
|
|||
|
|
<view class="h_bottom">
|
|||
|
|
<view class="dis-box" v-if="item.adaptUserType">
|
|||
|
|
<view class="dian"></view>
|
|||
|
|
<view class="h_size">参与会员：{{item.adaptUserType}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="dis-box">
|
|||
|
|
<view class="dian" style="background: #FA5E03;"></view>
|
|||
|
|
<view class="h_size">获得折扣：赠送{{item.points || 0}}积分</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="dis-box">
|
|||
|
|
<view class="dian" style="background: #FA5E03;"></view>
|
|||
|
|
<view class="h_size">获得折扣：赠送{{item.growaValue || 0}}成长值</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="center-box" v-for="(item,index) in datas" :key="index" v-if="title == '新人有礼活动'">
|
|||
|
|
<view class=" title-box">活动介绍</view>
|
|||
|
|
<view class="h_size">{{item.discountActiveDescribe || ""}}</view>
|
|||
|
|
<view class="box-bottom">
|
|||
|
|
<view class="">活动时间</view>
|
|||
|
|
<view>{{item.time || ''}}</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="title-box">参与油品</view> -->
|
|||
|
|
<!-- <view class="w_box">
|
|||
|
|
<view class="w_oil" v-for="(item,index) in 3" :key="index">#95</view>
|
|||
|
|
</view> -->
|
|||
|
|
<view class="h_bottom">
|
|||
|
|
<!-- <view class="dis-box">
|
|||
|
|
<view class="dian"></view>
|
|||
|
|
<view class="h_size">参与会员：普通会员、银牌会员、V2</view>
|
|||
|
|
</view> -->
|
|||
|
|
<view class="dis-box">
|
|||
|
|
<view class="dian" style="background: #FA5E03;"></view>
|
|||
|
|
<view class="h_size">赠送{{item.points || ''}}积分</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="dis-box">
|
|||
|
|
<view class="dian" style="background: #FA5E03;"></view>
|
|||
|
|
<view class="h_size">赠送{{item.growaValue || ''}}成长值</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="center-box" v-for="(item,index) in datas" :key="index" v-if="title == '推荐有礼活动'">
|
|||
|
|
<view class=" title-box">活动介绍</view>
|
|||
|
|
<view class="h_size">{{item.discountActiveDescribe || ""}}</view>
|
|||
|
|
<view class="box-bottom">
|
|||
|
|
<view class="">活动时间：{{item.time}}</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="title-box">参与油品</view>
|
|||
|
|
<view class="w_box">
|
|||
|
|
<view class="w_oil" v-for="(item,index) in 3" :key="index">#95</view>
|
|||
|
|
</view> -->
|
|||
|
|
<view class="h_bottom">
|
|||
|
|
<!-- <view class="dis-box">
|
|||
|
|
<view class="dian"></view>
|
|||
|
|
<view class="h_size">参与会员：普通会员、银牌会员、V2</view>
|
|||
|
|
</view> -->
|
|||
|
|
<view class="dis-box">
|
|||
|
|
<view class="dian" style="background: #FA5E03;"></view>
|
|||
|
|
<view class="h_size">赠送{{item.points || ''}}积分</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="dis-box">
|
|||
|
|
<view class="dian" style="background: #FA5E03;"></view>
|
|||
|
|
<view class="h_size">赠送{{item.growaValue || ''}}成长值</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="anniu" @click="goTopup()">
|
|||
|
|
去参与
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="g-box" v-for="(item,index) in datas" :key="index" v-if="title == '消费有礼活动'">
|
|||
|
|
<text>{{item.activeDescribe || ""}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="g-box" v-for="(item,index) in datas" :key="index" v-if="title == '折扣营销活动'">
|
|||
|
|
<text>{{item.discountActiveDescribe || ""}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="g-box" v-for="(item,index) in datas" :key="index" v-if="title == '满减营销活动'">
|
|||
|
|
<text>{{item.fullminusActiveDescribe || ""}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="g-box" v-for="(item,index) in datas" :key="index" v-if="title == '储值卡充值活动'">
|
|||
|
|
<text>{{item.discountActiveDescribe || ""}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="g-box" v-if="title == '新人有礼活动'">
|
|||
|
|
<text>{{datas.newlywedsActiveDescribe || ""}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="g-box" v-if="title == '推荐有礼活动'">
|
|||
|
|
<text>{{datas.recommendActiveDescribeIn || ""}}</text>
|
|||
|
|
<text>{{datas.recommendActiveDescribeOut || ""}}</text>
|
|||
|
|
</view> -->
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import request from '../../utils/request'
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
query: {
|
|||
|
|
storeId: ''
|
|||
|
|
},
|
|||
|
|
oilName: [],
|
|||
|
|
title: '',
|
|||
|
|
datas: [],
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
this.query.storeId = uni.getStorageSync("storeId");
|
|||
|
|
this.title = option.name
|
|||
|
|
console.log(option.name);
|
|||
|
|
this.getInfo(option.type)
|
|||
|
|
// this.getData(option.name);
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
goTopup() {
|
|||
|
|
// pagesMy/invite/invite
|
|||
|
|
if (this.title == '推荐有礼活动') {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pagesMy/invite/invite'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
if (this.title == '消费有礼活动') {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/refuel/refuel'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
if (this.title == '折扣营销活动') {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/refuel/refuel'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
if (this.title == '满减营销活动') {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/refuel/refuel'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
if (this.title == '储值卡充值活动') {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pagesHome/oilRecharge/oilRecharge?id=0'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
if (this.title == '新人有礼活动') {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pagesMy/invite/invite'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
/* uni.navigateTo({
|
|||
|
|
url: '/pagesHome/oilRecharge/oilRecharge'
|
|||
|
|
}) */
|
|||
|
|
},
|
|||
|
|
getInfo(type){
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '加载中'
|
|||
|
|
});
|
|||
|
|
this.query.type = type
|
|||
|
|
request({
|
|||
|
|
url: 'business/marketingActivity/activeApplet/appletActiveByType',
|
|||
|
|
method: 'get',
|
|||
|
|
params: this.query
|
|||
|
|
}).then(res => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.datas = res.data,
|
|||
|
|
uni.hideLoading();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getData(name) {
|
|||
|
|
uni.showLoading({
|
|||
|
|
//title: '加载中'
|
|||
|
|
});
|
|||
|
|
if (name == '消费有礼活动') {
|
|||
|
|
request({
|
|||
|
|
url: '/business/marketingActivity/activeConsumption/appletList',
|
|||
|
|
method: 'get',
|
|||
|
|
params: this.query
|
|||
|
|
}).then(res => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.datas = res.data,
|
|||
|
|
uni.hideLoading();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
if (name == '折扣营销活动') {
|
|||
|
|
request({
|
|||
|
|
url: '/business/marketingActivity/activeDiscount/appletList',
|
|||
|
|
method: 'get',
|
|||
|
|
params: this.query
|
|||
|
|
}).then(res => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.datas = res.data
|
|||
|
|
uni.hideLoading();
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
if (name == '推荐有礼活动') {
|
|||
|
|
request({
|
|||
|
|
url: '/business/marketingActivity/activeRecommend/applet',
|
|||
|
|
method: 'get',
|
|||
|
|
params: this.query
|
|||
|
|
}).then(res => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.datas = res.data
|
|||
|
|
uni.hideLoading();
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
if (name == '新人有礼活动') {
|
|||
|
|
request({
|
|||
|
|
url: '/business/marketingActivity/activeNewlyweds/applet',
|
|||
|
|
method: 'get',
|
|||
|
|
params: this.query
|
|||
|
|
}).then(res => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.datas = res.data
|
|||
|
|
uni.hideLoading();
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
if (name == '满减营销活动') {
|
|||
|
|
request({
|
|||
|
|
url: '/business/marketingActivity/activeFullminus/appletList',
|
|||
|
|
method: 'get',
|
|||
|
|
params: this.query
|
|||
|
|
}).then(res => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.datas = res.data
|
|||
|
|
uni.hideLoading();
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
if (name == '储值卡充值活动') {
|
|||
|
|
request({
|
|||
|
|
url: '/business/marketingActivity/cardValue/appletList',
|
|||
|
|
method: 'get',
|
|||
|
|
params: this.query
|
|||
|
|
}).then(res => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.datas = res.data
|
|||
|
|
uni.hideLoading();
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
goback() {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.content {
|
|||
|
|
background: #f4f5f6;
|
|||
|
|
height: 100vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
|
|||
|
|
width: 95%;
|
|||
|
|
height: 160px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
background: #f4f5f6;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding-top: 88px;
|
|||
|
|
padding-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.my-header {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 88px;
|
|||
|
|
background: #ffffff;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
color: #000;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 0px 15px;
|
|||
|
|
padding-top: 40px;
|
|||
|
|
|
|||
|
|
.my-icons {
|
|||
|
|
width: 20px;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.center-box {
|
|||
|
|
border-radius: 8px;
|
|||
|
|
background: #ffffff;
|
|||
|
|
margin: 10px auto;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px;
|
|||
|
|
width: 95%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title-box {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin: 10px auto;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.g-box {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 4px 0px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.w_box {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.h_size {
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #777777;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.w_oil {
|
|||
|
|
border-radius: 4px 4px 4px 4px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 5px 10px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-right: 10px;
|
|||
|
|
border: 1px solid #2F72F7;
|
|||
|
|
color: #2F72F7;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.h_bottom {
|
|||
|
|
width: 100%;
|
|||
|
|
background: #F4F4F4;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px 5px;
|
|||
|
|
margin: 10px auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dian {
|
|||
|
|
width: 6px;
|
|||
|
|
height: 6px;
|
|||
|
|
background: #2F72F7;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-right: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dis-box {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.anniu {
|
|||
|
|
width: 90%;
|
|||
|
|
height: 42px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
color: white;
|
|||
|
|
background: #2F72F7;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 20px;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
}
|
|||
|
|
</style>
|