517 lines
14 KiB
Vue
517 lines
14 KiB
Vue
|
<template>
|
|||
|
|
<view class="content">
|
|||
|
|
<view class="container" v-if="isExist">
|
|||
|
|
<view class="my-header">
|
|||
|
|
<view class="my-icons" @click="goBack"> <uni-icons type="left" size="16"></uni-icons> </view>
|
|||
|
|
<view class="my-text">会员</view>
|
|||
|
|
<view class="my-icons"></view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 顶部区域 -->
|
|||
|
|
<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
|
|||
|
|
:dots-styles="dotsStyles" field="content">
|
|||
|
|
<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
|
|||
|
|
<swiper-item v-for="(item, index) in userGradeList" :key="index">
|
|||
|
|
<view>
|
|||
|
|
<view class="top-box">
|
|||
|
|
|
|||
|
|
<view class="b-top">
|
|||
|
|
<view style="width: 70%;">
|
|||
|
|
<view class="title-size">
|
|||
|
|
{{item.name}}
|
|||
|
|
<span v-if="member.gradeId==item.id">(当前等级)</span>
|
|||
|
|
</view>
|
|||
|
|
<view class="min-size" style="margin-bottom: 20px;">升级会员享更多特权</view>
|
|||
|
|
<!-- <view class="min-size" style="margin-bottom: 10px;" v-if="userBalance.gradeId == item.id && index < (userGradeList.length-1)">
|
|||
|
|
在获得{{item.growthValue - userBalance.growthValue}}可升级至{{userGradeList[index+1].name}}
|
|||
|
|
</view>
|
|||
|
|
<view class="min-size" style="margin-bottom: 10px;" v-else-if="userBalance.gradeId == item.id && index == (userGradeList.length-1)">
|
|||
|
|
已达到最高等级
|
|||
|
|
</view> -->
|
|||
|
|
<view class="min-size" style="margin-bottom: 10px;" >
|
|||
|
|
达到当前等级所需成长值为{{item.growthValue}}
|
|||
|
|
</view>
|
|||
|
|
<u-line-progress :percentage="percentage" activeColor="#2F72F7"></u-line-progress>
|
|||
|
|
</view>
|
|||
|
|
<view class="right-img">
|
|||
|
|
<image src="../../static/imgs/vipxz.png" mode="aspectFit"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- qy -->
|
|||
|
|
<view class="c-box">
|
|||
|
|
<!-- <view class="title-bai">会员权益</view> -->
|
|||
|
|
<view class="wrap-box">
|
|||
|
|
|
|||
|
|
|
|||
|
|
<view class="box-ba" v-for="(item,index) in oilNameList" :key="index">
|
|||
|
|
<view class="min-box">
|
|||
|
|
<image :src="item.imgurl" mode="aspectFit"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="mu_">{{item.name}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</swiper-item>
|
|||
|
|
</swiper>
|
|||
|
|
</uni-swiper-dot>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- <view style="height: 300px; width: 100%;"></view> -->
|
|||
|
|
<view class="bottom-box">
|
|||
|
|
<!-- <scroll-view scroll-y="true" class="scroll-Y"> -->
|
|||
|
|
<view class="bottom-bai-box">
|
|||
|
|
<view class="b-top-bt">
|
|||
|
|
<view class="title">汽油优惠信息</view>
|
|||
|
|
<!-- <view class="times">每天04:00更新</view> -->
|
|||
|
|
</view>
|
|||
|
|
<view class="b-center" v-if="userGrade.preferential!='自定义优惠'">无优惠</view>
|
|||
|
|
<view v-else>
|
|||
|
|
<view class="b-center" v-if="userGrade.gasolineDiscount=='满减优惠'">
|
|||
|
|
满减优惠:
|
|||
|
|
<view class="b-center-spn" v-for="(item,index) in gasolineRule" :key="index">
|
|||
|
|
消费满{{item.gasolineRule1}}元,立减{{item.gasolineRule2}}元
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="b-center" v-else-if="userGrade.gasolineDiscount=='每升优惠'">
|
|||
|
|
每升优惠:
|
|||
|
|
<view class="b-center-spn" v-for="(item,index) in gasolineRule" :key="index">
|
|||
|
|
消费满{{item.gasolineRule1}}元,每升优惠{{item.gasolineRule3}}元
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="b-center" v-else>{{userGrade.gasolineDiscount}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="title">成长规则：每消费<text style=" margin: 0px 5px; color:#ff5c28 ;">1</text> 元加<text
|
|||
|
|
style="margin: 0px 5px;color:#2c62cd ;">{{chainStoreConfig.gasGrowthValue}}</text>成长值</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="bottom-bai-box">
|
|||
|
|
<view class="b-top-bt">
|
|||
|
|
<view class="title">柴油优惠信息</view>
|
|||
|
|
<!-- <view class="times">每天04:00更新</view> -->
|
|||
|
|
</view>
|
|||
|
|
<view class="b-center" v-if="userGrade.preferential!='自定义优惠'">无优惠</view>
|
|||
|
|
<view v-else>
|
|||
|
|
<view class="b-center" v-if="userGrade.dieselDiscount=='满减优惠'">
|
|||
|
|
满减优惠:
|
|||
|
|
<view class="b-center-spn" v-for="(item,index) in dieselRule" :key="index">
|
|||
|
|
消费满{{item.dieselRule1}}元,立减{{item.dieselRule2}}元
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="b-center" v-else-if="userGrade.dieselDiscount=='每升优惠'">
|
|||
|
|
每升优惠:
|
|||
|
|
<view class="b-center-spn" v-for="(item,index) in dieselRule" :key="index">
|
|||
|
|
消费满{{item.dieselRule1}}元,每升优惠{{item.dieselRule3}}元
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="b-center" v-else>{{userGrade.dieselDiscount}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="title">成长规则：每消费<text style=" margin: 0px 5px; color:#ff5c28 ;">1</text> 元加<text
|
|||
|
|
style="margin: 0px 5px;color:#2c62cd ;">{{chainStoreConfig.dieselGrowthValue}}</text>成长值</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="bottom-bai-box">
|
|||
|
|
<view class="b-top-bt">
|
|||
|
|
<view class="title">天然气优惠信息</view>
|
|||
|
|
<!-- <view class="times">每天04:00更新</view> -->
|
|||
|
|
</view>
|
|||
|
|
<view class="b-center" v-if="userGrade.preferential!='自定义优惠'">无优惠</view>
|
|||
|
|
<view v-else>
|
|||
|
|
<view class="b-center" v-if="userGrade.naturalGasDiscount=='满减优惠'">
|
|||
|
|
满减优惠:
|
|||
|
|
<view class="b-center-spn" v-for="(item,index) in naturalGasRule" :key="index">
|
|||
|
|
消费满{{item.naturalGas1}}元,立减{{item.naturalGas2}}元
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="b-center" v-else-if="userGrade.naturalGasDiscount=='每升优惠'">
|
|||
|
|
每升优惠:
|
|||
|
|
<view class="b-center-spn" v-for="(item,index) in naturalGasRule" :key="index">
|
|||
|
|
消费满{{item.naturalGas1}}元,每升优惠{{item.naturalGas3}}元
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="b-center" v-else>{{userGrade.naturalGasDiscount}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="title">成长规则：每消费<text style=" margin: 0px 5px; color:#ff5c28 ;">1</text> 元加<text
|
|||
|
|
style="margin: 0px 5px;color:#2c62cd ;">{{chainStoreConfig.naturalGrowthValue}}</text>成长值</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="bottom-bai-box">
|
|||
|
|
<view class="title">每消费<text style=" margin: 0px 5px; color:#ff5c28 ;">200万</text> 元加<text
|
|||
|
|
style="margin: 0px 5px;color:#2c62cd ;">1%</text>成长值</view>
|
|||
|
|
|
|||
|
|
</view> -->
|
|||
|
|
<!-- </scroll-view> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="container" v-else>
|
|||
|
|
<view class="my-header">
|
|||
|
|
<view class="my-icons" @click="goBack"> <uni-icons type="left" size="16"></uni-icons> </view>
|
|||
|
|
<view class="my-text">会员</view>
|
|||
|
|
<view class="my-icons"></view>
|
|||
|
|
</view>
|
|||
|
|
<view style="width:100%;height: 90vh;background-color: white;text-align: center;">当前店铺不存在会员等级信息</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import request from '../../utils/request'
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
percentage:0,
|
|||
|
|
title: '',
|
|||
|
|
info: [{
|
|||
|
|
colorClass: 'uni-bg-red',
|
|||
|
|
url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
|
|||
|
|
content: '内容 A'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
colorClass: 'uni-bg-green',
|
|||
|
|
url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
|
|||
|
|
content: '内容 B'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
colorClass: 'uni-bg-blue',
|
|||
|
|
url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
|
|||
|
|
content: '内容 C'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
oilNameList: [
|
|||
|
|
{name:"汽油",imgurl:"../../static/imgs/gasoline.png"},
|
|||
|
|
{name:"柴油",imgurl:"../../static/imgs/diesel_oil.png"},
|
|||
|
|
{name:"天然气",imgurl:"../../static/imgs/natural_gas.png"},
|
|||
|
|
],
|
|||
|
|
modeIndex: -1,
|
|||
|
|
styleIndex: -1,
|
|||
|
|
current: 0,
|
|||
|
|
mode: 'default',
|
|||
|
|
dotsStyles: {},
|
|||
|
|
swiperDotIndex: 0,
|
|||
|
|
// 会员等级列表信息
|
|||
|
|
userGradeList:[],
|
|||
|
|
storeId:uni.getStorageSync("storeId"),
|
|||
|
|
userId:"",
|
|||
|
|
userBalance:{},
|
|||
|
|
userGrade:{},
|
|||
|
|
// 汽油优惠
|
|||
|
|
gasolineRule:[],
|
|||
|
|
// 柴油优惠
|
|||
|
|
dieselRule:[],
|
|||
|
|
// 天然气优惠
|
|||
|
|
naturalGasRule:[],
|
|||
|
|
// 连锁店配置信息
|
|||
|
|
chainStoreConfig: {},
|
|||
|
|
// 当前店铺是否存在会员等级信息
|
|||
|
|
isExist:false,
|
|||
|
|
// 当前用户的会员信息
|
|||
|
|
member:{},
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.storeId = uni.getStorageSync("storeId")
|
|||
|
|
this.getList(this.storeId)
|
|||
|
|
this.getChainConfig(this.storeId)
|
|||
|
|
this.getUserBalance()
|
|||
|
|
this.getMember()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getPercentage(id){
|
|||
|
|
let grade = {}
|
|||
|
|
request({
|
|||
|
|
url: "business/userManager/userGrade/" + this.member.gradeId,
|
|||
|
|
method: 'get',
|
|||
|
|
}).then((res) => {
|
|||
|
|
grade = res.data
|
|||
|
|
this.userGradeList.forEach(item => {
|
|||
|
|
if (item.id == id){
|
|||
|
|
if (grade.grade > item.grade){
|
|||
|
|
this.percentage = 100
|
|||
|
|
}
|
|||
|
|
if (grade.grade < item.grade){
|
|||
|
|
this.percentage = 0
|
|||
|
|
}
|
|||
|
|
if (grade.grade == item.grade){
|
|||
|
|
this.percentage = ((this.member.growthValue / item.growthValue) * 100).toFixed(0)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
// 获取当前登入用户的等级信息
|
|||
|
|
getMember(){
|
|||
|
|
request({
|
|||
|
|
url: "business/userManager/user/storeUserInfo/" + this.storeId,
|
|||
|
|
method: 'get',
|
|||
|
|
}).then((res) => {
|
|||
|
|
this.member = res.data
|
|||
|
|
this.getPercentage(this.userGrade.id)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getChainConfig(storeId){
|
|||
|
|
let _this = this;
|
|||
|
|
request({
|
|||
|
|
url: "business/userManager/chainStoreConfig/" + storeId,
|
|||
|
|
method: 'get',
|
|||
|
|
}).then((res) => {
|
|||
|
|
_this.chainStoreConfig = res.data
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 获取用户余额信息
|
|||
|
|
getUserBalance(){
|
|||
|
|
let _this = this;
|
|||
|
|
request({
|
|||
|
|
url: "business/userManager/user/userBalanceByUserId",
|
|||
|
|
method: 'get',
|
|||
|
|
}).then((res) => {
|
|||
|
|
_this.userBalance = res.data
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 获取会员等级列表信息
|
|||
|
|
getList(storeId){
|
|||
|
|
let _this = this;
|
|||
|
|
request({
|
|||
|
|
url: "business/userManager/userGrade/getGradeList/"+storeId,
|
|||
|
|
method: 'get',
|
|||
|
|
}).then((res) => {
|
|||
|
|
if (res.data){
|
|||
|
|
this.isExist = true
|
|||
|
|
this.userGradeList = res.data
|
|||
|
|
this.userGrade = res.data[0]
|
|||
|
|
if (res.data[0].preferential == '自定义优惠'){
|
|||
|
|
this.gasolineRule = JSON.parse(res.data[0].gasolineRule)
|
|||
|
|
this.dieselRule = JSON.parse(res.data[0].dieselRule)
|
|||
|
|
this.naturalGasRule = JSON.parse(res.data[0].naturalGasRule)
|
|||
|
|
}
|
|||
|
|
// this.getPercentage(res.data[0].id)
|
|||
|
|
}else{
|
|||
|
|
this.isExist = false
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
change(e) {
|
|||
|
|
this.current = e.detail.current
|
|||
|
|
this.userGrade = this.userGradeList[this.current]
|
|||
|
|
if (this.userGradeList[this.current].preferential == '自定义优惠'){
|
|||
|
|
this.gasolineRule = JSON.parse(this.userGradeList[this.current].gasolineRule)
|
|||
|
|
this.dieselRule = JSON.parse(this.userGradeList[this.current].dieselRule)
|
|||
|
|
this.naturalGasRule = JSON.parse(this.userGradeList[this.current].naturalGasRule)
|
|||
|
|
}
|
|||
|
|
this.getPercentage(this.userGrade.id)
|
|||
|
|
},
|
|||
|
|
goBack() {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.b-center{
|
|||
|
|
line-height: 25px;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
font-size: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.b-center-spn{
|
|||
|
|
margin-left: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.swiper-box {
|
|||
|
|
height: 50vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
background: #2F3648;
|
|||
|
|
height: 100vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding-top: 88px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top-box {
|
|||
|
|
width: 90%;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 20px;
|
|||
|
|
background: linear-gradient(90deg, #EEF4FF 0%, #AEC9FF 100%);
|
|||
|
|
margin: 10px auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.b-top {
|
|||
|
|
color: #2F72F7;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right-img {
|
|||
|
|
width: 80px;
|
|||
|
|
height: 80px;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title-size {
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 18px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.min-size {
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.c-box {
|
|||
|
|
width: 90%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 15px;
|
|||
|
|
margin: 20px auto;
|
|||
|
|
height: 188px;
|
|||
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title-bai {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wrap-box {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box-ba {
|
|||
|
|
width: 33%;
|
|||
|
|
text-align: center;
|
|||
|
|
margin: 10px auto;
|
|||
|
|
color: #ffffff;
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.min-box {
|
|||
|
|
width: 90%;
|
|||
|
|
height: 90px;
|
|||
|
|
margin: 5px auto;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom-box {
|
|||
|
|
background: #F3F5F9;
|
|||
|
|
width: 100%;
|
|||
|
|
border-radius: 16px 16px 0px 0px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 15px;
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0px;
|
|||
|
|
height: 390px;
|
|||
|
|
overflow-y: scroll;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom-bai-box {
|
|||
|
|
width: 100%;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
background: #ffffff;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px;
|
|||
|
|
margin: 15px auto;
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.b-top-bt {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.times {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btimg {
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 44px;
|
|||
|
|
height: 44px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.anniu {
|
|||
|
|
width: 70px;
|
|||
|
|
height: 30px;
|
|||
|
|
background: #EB3E67;
|
|||
|
|
border-radius: 15px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
color: white;
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.disa {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.an-title {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333333;
|
|||
|
|
margin-left: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mu_ {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin: 15px auto;
|
|||
|
|
}
|
|||
|
|
</style>
|