781 lines
18 KiB
Vue
781 lines
18 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="container">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<headers :titles="titles">
|
||
<uni-icons @click="goback()" type="arrow-left" color="#000000" size="22px"></uni-icons>
|
||
</headers>
|
||
<!-- #endif -->
|
||
<!-- #endif -->
|
||
<u-loadmore :status="status" v-if="show == true" />
|
||
</view>
|
||
<view class="bm-page">
|
||
<view class="bm-page-top">
|
||
<image class="top-left-img" :src="baseUrl + rightInfoList.photo" mode=""></image>
|
||
<view class="bm-page-right">
|
||
<view class="bm-page-right-1" v-if="rightInfoList.name == 1">成人班</view>
|
||
<view class="bm-page-right-1" v-if="rightInfoList.name == 2">学生班</view>
|
||
<view class="bm-page-right-2">
|
||
<view class="bm-page-right-zd">{{rightInfoList.automatic}}</view>
|
||
<view class="bm-page-right-c2">{{rightInfoList.license}}</view>
|
||
</view>
|
||
<view class="bm-page-right-3"> <text class="bm-page-right-price">￥{{rightInfoList.price}}</text>
|
||
<text class="bm-page-right-jprice">￥{{rightInfoList.price}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bm-page-info" v-if="hideTeacher==0">
|
||
<view style="width: 100%; display: flex;align-items: center;justify-content: space-between; ">
|
||
<view class="bm-page-info-title">
|
||
选择教练
|
||
</view>
|
||
<view class="d-s" @click="showjl = true">
|
||
<view class="" v-if="!jlName">请选择</view>
|
||
<view class="" v-else>{{jlName}}</view>
|
||
<u-icon name="arrow-right" size="16"></u-icon>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="bm-page-info">
|
||
<view style="width: 100%; display: flex;align-items: center;justify-content: space-between; ">
|
||
<view class="bm-page-info-title">
|
||
填写身份信息
|
||
</view>
|
||
<view class="anniu" @click="popupShow = true">
|
||
点击上传身份证
|
||
</view>
|
||
</view>
|
||
|
||
<view class="info-name">
|
||
<view class="info-name-left">姓名</view>
|
||
<view class="info-name-right">
|
||
<input class="info-name-input" v-model="name" type="text" placeholder="请填写真实姓名">
|
||
</view>
|
||
</view>
|
||
<view class="info-name">
|
||
<view class="info-name-left">性别</view>
|
||
<view class="d-s" style="width: 70%;">
|
||
<view class="size-lv" :class="{'clv' : sex == index }" v-for=" (item,index) in sexlist"
|
||
:key="index" @click="getsexindex(index)">{{item}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="info-name">
|
||
<view class="info-name-left">年龄</view>
|
||
<view class="info-name-right">
|
||
<input class="info-name-input" v-model="age" type="number" placeholder="请填写真实年龄">
|
||
</view>
|
||
</view>
|
||
<view class="info-name">
|
||
<view class="info-name-left">手机号</view>
|
||
<view class="info-name-right">
|
||
<input class="info-name-input" v-model="phone" type="text" placeholder="请输入正确手机号">
|
||
</view>
|
||
</view>
|
||
<view class="info-name">
|
||
<view class="info-name-left">身份证号</view>
|
||
<view class="info-name-right">
|
||
<input class="info-name-input" v-model="identity" type="text" placeholder="请输入身份证号">
|
||
</view>
|
||
</view>
|
||
<!-- <view style="padding: 0;" class="info-name">
|
||
<view class="info-name-left">选择教练</view>
|
||
<view class="info-name-right">
|
||
<view class="bm-page-button">
|
||
<button @click="goBookingJl()" class="bm-page-button-main">预约教师</button>
|
||
</view>
|
||
</view>
|
||
|
||
</view> -->
|
||
</view>
|
||
<view class="bm-page-dj">
|
||
<view class="bm-page-dj-title" @click="show = true">
|
||
<view class="d-s">
|
||
<view class="">{{dname}}</view>
|
||
： <text class="bm-page-dj-title-price">￥{{rightInfoList.reserveMoney}}</text>
|
||
</view>
|
||
<u-icon name="arrow-right" color="#999" size="18"></u-icon>
|
||
</view>
|
||
|
||
<view @click="changeStartPay(2)" class="dj-list">
|
||
<view class="dj-list-left">
|
||
<image class="dj-list-left-img" src="../../static/imgs/yfk.png" mode=""></image>
|
||
<view class="dj-list-left-name">线下支付</view>
|
||
</view>
|
||
<view class="dj-list-right">
|
||
<view v-if="startPay === 1" class="onel"></view>
|
||
<view v-else class="twol">
|
||
<u-icon name="checkmark" color="#FFF" size="16"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view @click="changeStartPay(1)" class="dj-list">
|
||
<view class="dj-list-left">
|
||
<image class="dj-list-left-img" src="../../static/imgs/qbdd.png" mode=""></image>
|
||
<view class="dj-list-left-name">微信</view>
|
||
</view>
|
||
<view class="dj-list-right">
|
||
<view v-if="startPay === 2" class="onel"></view>
|
||
<view v-else class="twol">
|
||
<u-icon name="checkmark" color="#FFF" size="16"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="bm-page-button">
|
||
<button @click="applicationClick" class="bm-page-button-main">点击报名</button>
|
||
</view>
|
||
<u-picker :show="show" :columns="columns" keyName="label" @confirm="confirm" @cancel="cancel"></u-picker>
|
||
<u-picker :show="showjl" :columns="columnjl" keyName="instructorName" @confirm="jlconfirm"
|
||
@cancel="jlcancel"></u-picker>
|
||
<u-popup :show="popupShow" :round="10" mode="center" @close="close" @open="open">
|
||
<view class="popup-box">
|
||
<view class="title_s">请上传身份证人像面</view>
|
||
<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
|
||
:maxCount="1" width="280" height="150">
|
||
<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix"
|
||
style="width: 280px;height: 150px;"></image>
|
||
</u-upload>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import headers from '../../components/header/headers.vue'
|
||
import request from '@/utils/request.js'
|
||
import tabbar from '../../components/tabbar/tabbar.vue'
|
||
import upload from '@/utils/upload.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
titles: "报名",
|
||
id: null,
|
||
List: [],
|
||
show: false,
|
||
showjl: false,
|
||
popupShow: false,
|
||
sfzimg: null,
|
||
fileList1: [],
|
||
baseUrl: this.$baseUrl,
|
||
status: 'loading',
|
||
sexlist: [
|
||
"男",
|
||
"女"
|
||
],
|
||
name: null,
|
||
phone: null,
|
||
sex: 0,
|
||
|
||
identity: null,
|
||
age: null,
|
||
startPay: 2,
|
||
courseId: null,
|
||
rightInfoList: [],
|
||
columnjl: [],
|
||
jxId: null,
|
||
orderId: null,
|
||
dname: "定金",
|
||
settings: { //签名设置
|
||
width: '750', //签名区域的宽
|
||
height: '500', //签名区域的高
|
||
lineWidth: 4, //签名时线宽
|
||
textColor: '#000' //签名文字颜色
|
||
},
|
||
jlName: null,
|
||
jlId: null,
|
||
hideTeacher: 0,
|
||
Address: '',
|
||
columns: [
|
||
[{
|
||
label: '全款',
|
||
// 其他属性值
|
||
id: 2
|
||
// ...
|
||
}, {
|
||
label: '定金',
|
||
id: 1
|
||
}]
|
||
],
|
||
}
|
||
},
|
||
onLoad: function(option) {
|
||
uni.showToast({
|
||
title: '请完善个人信息',
|
||
icon: 'none'
|
||
})
|
||
if (uni.getStorageSync('jlId')) {
|
||
this.hideTeacher = 1
|
||
}
|
||
this.jlId = uni.getStorageSync('jlId');
|
||
this.courseId = option.courseId,
|
||
this.jxId = option.jxId
|
||
console.log("驾校id", this.jxId, "课程id", this.courseId)
|
||
},
|
||
onShow() {
|
||
this.getListAll()
|
||
// this.actList = ["1", "1", "1", "1", "1", ]
|
||
// this.status = "nomore" 底部刷新结束
|
||
this.getRightInfoList()
|
||
},
|
||
onPullDownRefresh() {
|
||
console.log("刷新");
|
||
uni.stopPullDownRefresh()
|
||
},
|
||
onReachBottom() {
|
||
// this.show = true
|
||
setTimeout(() => {
|
||
console.log("加载执行");
|
||
}, 2000)
|
||
},
|
||
// 发送好友
|
||
onShareAppMessage(res) {
|
||
return {
|
||
title: this.titles,
|
||
path: '/pages/index/index',
|
||
}
|
||
},
|
||
// 分享朋友圈
|
||
onShareTimeline(res) {
|
||
return {
|
||
title: this.titles,
|
||
path: '/pages/index/index',
|
||
}
|
||
},
|
||
components: {
|
||
headers,
|
||
tabbar
|
||
},
|
||
methods: {
|
||
async getListAll() {
|
||
this.columnjl = []
|
||
let res = await request({
|
||
url: '/drivingSchool/applet/schoolCoach/listAll?deptId=' + this.jxId,
|
||
method: 'get',
|
||
|
||
})
|
||
console.log(res);
|
||
this.columnjl.push(res.data)
|
||
},
|
||
getsexindex(index) {
|
||
this.sex = index
|
||
},
|
||
open() {
|
||
// console.log('open');
|
||
},
|
||
close() {
|
||
this.popupShow = false
|
||
// console.log('close');
|
||
},
|
||
jlconfirm(e) {
|
||
console.log(e);
|
||
this.jlName = e.value[0].instructorName
|
||
this.jlId = e.value[0].id
|
||
this.showjl = false
|
||
},
|
||
jlcancel() {
|
||
this.showjl = false
|
||
},
|
||
confirm(e) {
|
||
console.log(e);
|
||
this.dname = e.value[0].label
|
||
this.id = e.value[0].id
|
||
this.xxgetRightInfoList()
|
||
|
||
this.show = false
|
||
},
|
||
cancel() {
|
||
this.show = false
|
||
},
|
||
goback() {
|
||
uni.navigateBack()
|
||
},
|
||
changeStartPay(id) {
|
||
this.startPay = id
|
||
},
|
||
|
||
goBookingJl() {
|
||
uni.navigateTo({
|
||
url: '/pages/index/bookingJl',
|
||
})
|
||
},
|
||
|
||
// 校验手机号
|
||
isValidPhoneNumber(phoneNumber) {
|
||
const regex = /^1[3-9]\d{9}$/;
|
||
if (regex.test(phoneNumber)) {
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
},
|
||
|
||
|
||
// 校验身份证
|
||
isValidIDNumber(idNumber) {
|
||
const regex = /^\d{15}|\d{17}(?:\d|X)$/;
|
||
if (regex.test(idNumber)) {
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
},
|
||
|
||
|
||
applicationClick() {
|
||
// 判断如果为空
|
||
if (this.phone === null || this.name === null) {
|
||
uni.showToast({
|
||
title: '请把信息输入完整',
|
||
icon: 'error',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
|
||
// 判断手机号是否满足
|
||
let isPhone = this.isValidPhoneNumber(this.phone)
|
||
if (isPhone === false) {
|
||
uni.showToast({
|
||
title: '输入的手机号不规范',
|
||
icon: 'error',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
|
||
// 判断身份证是否满足
|
||
let isIdentity = this.isValidIDNumber(this.identity)
|
||
if (isIdentity === false) {
|
||
uni.showToast({
|
||
title: '输入的身份证不规范',
|
||
icon: 'error',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
|
||
if (this.startPay === 1) {
|
||
// 微信支付
|
||
this.wxPayClick(this.name, this.phone, this.identity, this.startPay, this.courseId, this.jxId)
|
||
} else {
|
||
// 线下支付
|
||
this.xxiaPayClick(this.name, this.phone, this.identity, this.startPay, this.courseId, this.jxId)
|
||
}
|
||
},
|
||
async wxPayClick(name, phone, identity, startPay, courseId, jxId) {
|
||
console.log("微信支付", )
|
||
let res = await request({
|
||
url: '/jxInfo/insertPay',
|
||
data: {
|
||
name: name,
|
||
phone: phone,
|
||
age: this.age,
|
||
sex: this.sex,
|
||
identity: this.identity,
|
||
startPay: startPay,
|
||
courseId: courseId,
|
||
jxId: jxId,
|
||
jlName: this.jlName,
|
||
jlId: this.jlId,
|
||
money: this.rightInfoList.reserveMoney
|
||
},
|
||
method: 'post',
|
||
})
|
||
|
||
this.orderId = res,
|
||
console.log("收到为单位1 =====>", this.orderId)
|
||
|
||
let item = await request({
|
||
url: '/jxInfo/prepayment?type=jsapi' + '&orderNo=' + this.orderId + "&payType=" + this.id,
|
||
method: 'get'
|
||
})
|
||
|
||
console.log("获取到的数据为 =========>", item)
|
||
|
||
|
||
wx.requestPayment({
|
||
timeStamp: item.timeStamp, // 时间戳，从1970年1月1日00:00:00至今的秒数，即当前的时间
|
||
nonceStr: item.nonceStr, // 随机字符串，长度为32个字符以下。
|
||
package: item.package, // 统一下单接口返回的 prepay_id 参数值，格式如“prepay_id=*”
|
||
signType: item.signType, // 签名算法类型，默认为 MD5，支持RSA等其他加密算法
|
||
paySign: item.paySign, // 签名，详见签名生成算法
|
||
success: function(res) {
|
||
console.log('成功', res);
|
||
if (res.errMsg = 'requestPayment:ok') {
|
||
uni.showToast({
|
||
title: '支付成功'
|
||
})
|
||
uni.navigateTo({
|
||
url: '/pages/index/contract?Address=' +
|
||
this.Address + '&name=' + this.name
|
||
})
|
||
}
|
||
// 支付成功后的回调函数， res.errMsg = 'requestPayment:ok'
|
||
},
|
||
fail: function(res) {
|
||
console.log('执行失败1', res);
|
||
that.cancelpay()
|
||
}
|
||
})
|
||
|
||
uni.showToast({
|
||
title: '成功提示',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
},
|
||
async xxiaPayClick(name, phone, identity, startPay, courseId, jxId) {
|
||
console.log("线下支付")
|
||
let res = await request({
|
||
url: '/driving/pay',
|
||
data: {
|
||
name: name,
|
||
phone: phone,
|
||
age: this.age,
|
||
sex: this.sex,
|
||
identity: this.identity,
|
||
startPay: startPay,
|
||
courseId: courseId,
|
||
jxId: jxId,
|
||
jlName: this.jlName,
|
||
jlId: this.jlId
|
||
},
|
||
method: 'post',
|
||
})
|
||
if (res.code == 200) {
|
||
uni.navigateTo({
|
||
url: '/pages/index/contract?Address=' +
|
||
this.Address + '&name=' + this.name
|
||
})
|
||
}
|
||
|
||
|
||
},
|
||
async getRightInfoList() {
|
||
let res = await request({
|
||
url: '/drivingSchool/system/driveSchoolCourse/list?id=' + this.courseId,
|
||
method: 'get',
|
||
})
|
||
this.rightInfoList = res.data.records[0],
|
||
console.log("报名班类型", this.rightInfoList)
|
||
},
|
||
async xxgetRightInfoList() {
|
||
let res = await request({
|
||
url: '/drivingSchool/system/driveSchoolCourse/list?id=' + this.courseId + '&payType=' +
|
||
this.id,
|
||
method: 'get',
|
||
})
|
||
this.rightInfoList = res.data.records[0],
|
||
console.log("报名班类型", this.rightInfoList)
|
||
},
|
||
// 上传
|
||
deletePic(event) {
|
||
this[`fileList${event.name}`].splice(event.index, 1)
|
||
if (event.name == '1') {
|
||
this.photoUrl.splice(event.index, 1)
|
||
}
|
||
if (event.name == '2') {
|
||
this.videoUr = null
|
||
}
|
||
|
||
},
|
||
// 新增图片
|
||
async afterRead(event) {
|
||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||
let lists = [].concat(event.file)
|
||
let fileListLen = this[`fileList${event.name}`].length
|
||
lists.map((item) => {
|
||
this[`fileList${event.name}`].push({
|
||
...item,
|
||
|
||
})
|
||
})
|
||
for (let i = 0; i < lists.length; i++) {
|
||
const result = await this.uploadFilePromise(lists[i].url)
|
||
let item = this[`fileList${event.name}`][fileListLen]
|
||
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
||
status: 'success',
|
||
message: '',
|
||
url: result
|
||
}))
|
||
fileListLen++
|
||
}
|
||
},
|
||
uploadFilePromise(e) {
|
||
console.log(e);
|
||
upload({
|
||
url: '/common/upload',
|
||
filePath: e,
|
||
}).then((res) => {
|
||
|
||
this.sfzimg = this.baseUrl + res.fileName
|
||
console.log(this.sfzimg);
|
||
|
||
if (this.sfzimg) {
|
||
this.idOcr(this.sfzimg)
|
||
}
|
||
|
||
})
|
||
},
|
||
async idOcr(url) {
|
||
|
||
let that = this
|
||
let res = await request({
|
||
url: '/drivingSchool/applet/driveSchoolCourse/idOcr',
|
||
method: 'post',
|
||
params: {
|
||
imagePath: url
|
||
}
|
||
})
|
||
|
||
that.name = res.data.name
|
||
that.phone = res.data.phone
|
||
that.sex = res.data.sex
|
||
that.identity = res.data.idCard
|
||
that.age = res.data.age
|
||
that.Address = res.data.Address
|
||
console.log(res);
|
||
that.popupShow = false
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.bm-page {
|
||
padding: 30rpx;
|
||
|
||
.bm-page-button {
|
||
margin-top: 30rpx;
|
||
|
||
.bm-page-button-main {
|
||
border-radius: 50rpx;
|
||
background-color: #4aa76f;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.bm-page-dj {
|
||
margin-top: 30rpx;
|
||
padding: 30rpx;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
|
||
.dj-list {
|
||
padding: 20rpx 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.dj-list-left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.dj-list-left-name {
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.dj-list-left-img {
|
||
height: 50rpx;
|
||
width: 50rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bm-page-dj-title {
|
||
border-bottom: 1rpx solid #eee;
|
||
padding-bottom: 20rpx;
|
||
margin-bottom: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.bm-page-dj-title-price {
|
||
color: red;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bm-page-info {
|
||
margin-top: 30rpx;
|
||
padding: 30rpx;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
|
||
.info-name {
|
||
width: 100%;
|
||
padding: 40rpx 0;
|
||
border-bottom: 1px solid #eee;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
align-items: center;
|
||
|
||
.info-name-right {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 30rpx;
|
||
flex: 3;
|
||
}
|
||
|
||
.info-name-left {
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.bm-page-info-title {
|
||
|
||
font-size: 34rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.bm-page-top {
|
||
display: flex;
|
||
padding: 30rpx;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
|
||
.bm-page-right {
|
||
margin-left: 30rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-direction: column;
|
||
|
||
.bm-page-right-3 {
|
||
.bm-page-right-price {
|
||
color: red;
|
||
}
|
||
|
||
.bm-page-right-jprice {
|
||
margin-left: 20rpx;
|
||
text-decoration: underline;
|
||
font-size: 20rpx;
|
||
}
|
||
}
|
||
|
||
.bm-page-right-1 {
|
||
font-weight: 800;
|
||
}
|
||
|
||
.bm-page-right-2 {
|
||
display: flex;
|
||
font-size: 22rpx;
|
||
|
||
.bm-page-right-zd {
|
||
background-color: rgba(94, 255, 153, 0.2);
|
||
}
|
||
|
||
.bm-page-right-c2 {
|
||
background-color: rgba(255, 208, 112, 0.2);
|
||
}
|
||
|
||
view {
|
||
text-align: center;
|
||
border-radius: 12rpx;
|
||
padding: 10rpx;
|
||
background-color: red;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
&:last-child {
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.top-left-img {
|
||
height: 150rpx;
|
||
width: 230rpx;
|
||
border-radius: 12rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content {
|
||
background: #f4f5f6;
|
||
// background: linear-gradient(180deg, #9ffcc5 0%, #84fcbc 14%, rgba(255, 255, 255, 0.84) 24%, rgba(255, 255, 255, 0.84) 100%);
|
||
height: 100vh;
|
||
}
|
||
|
||
.container {
|
||
width: 100%;
|
||
background: #f4f5f6;
|
||
box-sizing: border-box;
|
||
padding-top: 88px;
|
||
}
|
||
|
||
.onel {
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
border: 1px solid #8c8c8d;
|
||
}
|
||
|
||
.twol {
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
border: 1px solid #4aa76f;
|
||
background: #4aa76f;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
}
|
||
|
||
.d-s {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.anniu {
|
||
width: 120px;
|
||
height: 35px;
|
||
border-radius: 4px;
|
||
background: #4aa76f;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.popup-box {
|
||
width: 300px;
|
||
border-radius: 10px;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
}
|
||
|
||
.title_s {
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.clv {
|
||
color: #fff;
|
||
background: #4aa76f;
|
||
width: 26px;
|
||
height: 26px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
font-size: 14px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.size-lv {
|
||
margin-right: 35px;
|
||
}
|
||
</style> |