616 lines
14 KiB
Vue
616 lines
14 KiB
Vue
|
<template>
|
||
|
|
<view class="hzIndex">
|
||
|
|
<hzHeader title="理发预约修改"></hzHeader>
|
||
|
|
<view class="hzContent">
|
||
|
|
<view class="tab-box">
|
||
|
|
<view class="tab-item" style="width: 100%;">
|
||
|
|
理发预约修改
|
||
|
|
<view class="tabBottom"></view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
<!-- 理发预约表单 -->
|
||
|
|
<view class="form-box one">
|
||
|
|
<!-- 选择日期 -->
|
||
|
|
<view class="selectDate">
|
||
|
|
<view class="dateTit">
|
||
|
|
<view class="leftIcon">
|
||
|
|
|
||
|
|
</view>
|
||
|
|
<text style="font-size:36upx;color:#333;font-weight: 600;">选择日期</text>
|
||
|
|
</view>
|
||
|
|
<scroll-view class="selectDates" scroll-x="true">
|
||
|
|
<view class="dateItem" :class="chooseDateIndex == index ? 'time-active' : ''"
|
||
|
|
v-for="(item, index) in date" :key="index" @click="switchTab(index)">
|
||
|
|
<text class="time">{{ item.tiems.substr(5, 10) }}</text>
|
||
|
|
<text class="week">{{ item.week }}</text>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
<view class="loc">
|
||
|
|
<image src="@/static/haircut/loc.png" mode=""></image>
|
||
|
|
<view v-for="(item, index) in places" :key="index" @click="choosePlace(item.id, item.name)">
|
||
|
|
<text class="round" :class="choosePlaceId == item.id ? 'barberactive' : ''"></text>
|
||
|
|
<text class="input_left">{{ item.name }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- 选择地点 -->
|
||
|
|
<view class="timeInterval" style="margin-top: 20upx;"
|
||
|
|
v-if="this.date[this.chooseDateIndex].isholiday==2||(this.date[this.chooseDateIndex].isholiday!=1)">
|
||
|
|
<view class="dateTit">
|
||
|
|
<image src="@/static/haircut/date.png" mode=""></image>
|
||
|
|
<text style="font-size:30upx;color:#333;font-weight: 600;">选择时段</text>
|
||
|
|
</view>
|
||
|
|
<!-- 选择时间段 -->
|
||
|
|
<view class="selectInterval">
|
||
|
|
<view class="intervalItem"
|
||
|
|
:class="[chooseTime.id == item.haircut_time_id ? 'time-active' : '', item.status == '1' &&item.remain_count!= 0&&item.compareTime? '' : 'bg-gray']"
|
||
|
|
@click="item.status == '1' &&item.compareTime? checkItem(item.haircut_time_id, item.haircut_time, item.status, item.remain_count) : ''"
|
||
|
|
v-for="(item, index) in barber" :key="index">
|
||
|
|
<view class="time-text">{{ item.haircut_time }}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view v-if="this.date[this.chooseDateIndex].isholiday==2||(this.date[this.chooseDateIndex].isholiday!=1)">
|
||
|
|
<view class="sub-btn">
|
||
|
|
<view class="btn" @click="submit">提交</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
getAllDept,
|
||
|
|
initHaircut,
|
||
|
|
getHaircutBasicInfo,
|
||
|
|
saveHaircutInfo,
|
||
|
|
getHaircutInfoById
|
||
|
|
} from '@/common/api.js';
|
||
|
|
import {
|
||
|
|
callbackRequest,
|
||
|
|
getStorage,
|
||
|
|
getNumDate,
|
||
|
|
alertTip,
|
||
|
|
regPhone,
|
||
|
|
formatDate
|
||
|
|
} from '@/common/util.js';
|
||
|
|
import loadMore from '@/components/loadMore.vue';
|
||
|
|
import contentNone from '@/components/contentNone.vue';
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
loadMore,
|
||
|
|
contentNone
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
//分页
|
||
|
|
user: getStorage('userInfo'),
|
||
|
|
chooseTime: {
|
||
|
|
id: '',
|
||
|
|
time: ''
|
||
|
|
}, //选择的时间段 (几点到几点)
|
||
|
|
chooseDateIndex: 0, //当前选择的理发日期
|
||
|
|
userName: getStorage('userInfo').userName, //申请人姓名
|
||
|
|
userTel: getStorage('userInfo').telnumber, //申请人手机号
|
||
|
|
date: getNumDate(7), //获取今天起 最近7天时间
|
||
|
|
formatDate: formatDate,
|
||
|
|
|
||
|
|
choosePlaceId: '', // 当前选择的地点
|
||
|
|
choosePlaceName: '',
|
||
|
|
areas: ['', '会议中心', '科技楼'],
|
||
|
|
places: [{
|
||
|
|
id: '1',
|
||
|
|
name: '会议中心'
|
||
|
|
}, {
|
||
|
|
id: '2',
|
||
|
|
name: '科技楼'
|
||
|
|
}],
|
||
|
|
|
||
|
|
barber: [],
|
||
|
|
id: '', //理发详情id
|
||
|
|
apply_time_id: '',
|
||
|
|
userId: '',
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onLoad(option) {
|
||
|
|
this.getCalendar();
|
||
|
|
this.id = option.id;
|
||
|
|
//this.init();
|
||
|
|
this.getRecord();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
compareTime(time1) {
|
||
|
|
var endTime = time1.split("-")[0];
|
||
|
|
var endDate = this.date[this.chooseDateIndex].tiems + " " + endTime;
|
||
|
|
endDate = endDate.replace(/-/g, '/');
|
||
|
|
var endDateTime = new Date(endDate).getTime();
|
||
|
|
// var nowDateTime = new Date().getTime() + 3 * 60 * 60 * 1000;
|
||
|
|
var nowDateTime = new Date().getTime();
|
||
|
|
if (endDateTime > nowDateTime) {
|
||
|
|
return true;
|
||
|
|
} else {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
compareTimeForRecord(date, time) {
|
||
|
|
var endTime = time.split(" ")[1].split("-")[1];
|
||
|
|
var endDate = date + " " + endTime;
|
||
|
|
endDate = endDate.replace(/-/g, '/');
|
||
|
|
var endDateTime = new Date(endDate).getTime();
|
||
|
|
var nowDateTime = new Date().getTime();
|
||
|
|
if (endDateTime < nowDateTime) {
|
||
|
|
return true;
|
||
|
|
} else {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//选择日期
|
||
|
|
switchTab(index) {
|
||
|
|
if (this.chooseDateIndex != index) {
|
||
|
|
this.chooseDateIndex = index;
|
||
|
|
this.chooseTime.id = '';
|
||
|
|
this.chooseTime.time = '';
|
||
|
|
if (this.date[this.chooseDateIndex].weekDay == "1" || this.date[this.chooseDateIndex].weekDay == "3" ||
|
||
|
|
this.date[this.chooseDateIndex].weekDay == "5") {
|
||
|
|
this.places = [{
|
||
|
|
id: '2',
|
||
|
|
name: '科技楼'
|
||
|
|
}];
|
||
|
|
this.choosePlaceId = '2';
|
||
|
|
this.choosePlaceName = '科技楼';
|
||
|
|
} else {
|
||
|
|
this.places = [{
|
||
|
|
id: '1',
|
||
|
|
name: '会议中心'
|
||
|
|
}];
|
||
|
|
this.choosePlaceId = '1';
|
||
|
|
this.choosePlaceName = '会议中心';
|
||
|
|
}
|
||
|
|
this.init();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//选择地点
|
||
|
|
choosePlace(id, name) {
|
||
|
|
if (this.choosePlaceId != id) {
|
||
|
|
this.chooseTime.id = '';
|
||
|
|
this.chooseTime.time = '';
|
||
|
|
this.choosePlaceId = id;
|
||
|
|
this.choosePlaceName = name;
|
||
|
|
this.init();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 选择时间段
|
||
|
|
checkItem(id, time, status, count) {
|
||
|
|
if (status == 2) {
|
||
|
|
alertTip('该时间段已预约');
|
||
|
|
return false;
|
||
|
|
} else if (count <= 0) {
|
||
|
|
alertTip('该时间段已约满');
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
this.$set(this.chooseTime, 'id', id);
|
||
|
|
this.$set(this.chooseTime, 'time', time);
|
||
|
|
},
|
||
|
|
init() {
|
||
|
|
//理发预约时间段剩余名额查询接口
|
||
|
|
let params = {
|
||
|
|
method: getHaircutBasicInfo,
|
||
|
|
data: {
|
||
|
|
userId: this.user.id,
|
||
|
|
haircutDate: this.date[this.chooseDateIndex].tiems,
|
||
|
|
barbershop: this.choosePlaceId
|
||
|
|
}
|
||
|
|
};
|
||
|
|
callbackRequest(params).then(res => {
|
||
|
|
res = res.data;
|
||
|
|
if (res.returnCode === '1') {
|
||
|
|
if (this.date[this.chooseDateIndex].isholiday == 1) {
|
||
|
|
uni.showToast({
|
||
|
|
title: '今日节假日不可预约',
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
//this.kind = res.returnData[0].type;
|
||
|
|
this.barber = res.returnData[0].remain[0].haircut_remain;
|
||
|
|
for (var i = 0; i < this.barber.length; i++) {
|
||
|
|
|
||
|
|
var compareTime = this.compareTime(this.barber[i].haircut_time);
|
||
|
|
this.barber[i].compareTime = compareTime;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
//提交预约
|
||
|
|
submit() {
|
||
|
|
if (!this.choosePlaceId) {
|
||
|
|
alertTip('请选择理发地点');
|
||
|
|
return false;
|
||
|
|
} else if (!this.chooseTime.time && !this.chooseTime.id) {
|
||
|
|
alertTip('请选择时间段');
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
// else if (this.userName.length == 0) {
|
||
|
|
// alertTip('请输入联系人姓名');
|
||
|
|
// return false;
|
||
|
|
// } else if (!regPhone.test(this.userTel)) {
|
||
|
|
// alertTip('请输入正确的手机号');
|
||
|
|
// return false;
|
||
|
|
// }
|
||
|
|
let params = {
|
||
|
|
method: saveHaircutInfo,
|
||
|
|
data: {
|
||
|
|
applyDate: this.date[this.chooseDateIndex].tiems,
|
||
|
|
applyPersonName: this.userName,
|
||
|
|
applyPersonTel: this.userTel,
|
||
|
|
applyTime: this.chooseTime.time,
|
||
|
|
applyTimeId: this.chooseTime.id,
|
||
|
|
barbershopArea: this.choosePlaceId,
|
||
|
|
barberId: this.choosePlaceId,
|
||
|
|
//placeName: this.choosePlaceName,
|
||
|
|
//deptId:this.user.deptId,
|
||
|
|
userId: this.user.id,
|
||
|
|
id: this.id,
|
||
|
|
}
|
||
|
|
};
|
||
|
|
callbackRequest(params).then(res => {
|
||
|
|
let result = res.data;
|
||
|
|
if (result.returnCode == 1) {
|
||
|
|
alertTip('预约修改成功');
|
||
|
|
setTimeout(_ => {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: `/pages/haircut/haircut?currentTabIndex=1`
|
||
|
|
});
|
||
|
|
}, 2000);
|
||
|
|
} else {
|
||
|
|
alertTip(result.returnMsg);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
getRecord() {
|
||
|
|
let params = {
|
||
|
|
"method": getHaircutInfoById,
|
||
|
|
data: {
|
||
|
|
id: this.id,
|
||
|
|
},
|
||
|
|
}
|
||
|
|
callbackRequest(params)
|
||
|
|
.then(res => {
|
||
|
|
if (res.data.returnCode == 1) {
|
||
|
|
console.log(res.data.returnData);
|
||
|
|
var record = res.data.returnData;
|
||
|
|
this.choosePlaceId = record.barber_id;
|
||
|
|
this.chooseTime.id = record.apply_time_id
|
||
|
|
this.chooseTime.time = record.apply_time;
|
||
|
|
this.userName = record.apply_person_name;
|
||
|
|
this.userTel = record.apply_person_tel;
|
||
|
|
this.userId = record.user_id;
|
||
|
|
for (var i = 0; i < this.date.length; i++) {
|
||
|
|
if (this.date[i].tiems == record.apply_date) {
|
||
|
|
this.chooseDateIndex = i;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (this.date[this.chooseDateIndex].weekDay == "1" || this.date[this.chooseDateIndex]
|
||
|
|
.weekDay == "3" || this.date[this.chooseDateIndex].weekDay == "5") {
|
||
|
|
this.places = [{
|
||
|
|
id: '2',
|
||
|
|
name: '科技楼'
|
||
|
|
}];
|
||
|
|
this.choosePlaceId = '2';
|
||
|
|
this.choosePlaceName = '科技楼';
|
||
|
|
} else {
|
||
|
|
this.places = [{
|
||
|
|
id: '1',
|
||
|
|
name: '会议中心'
|
||
|
|
}];
|
||
|
|
this.choosePlaceId = '1';
|
||
|
|
this.choosePlaceName = '会议中心';
|
||
|
|
}
|
||
|
|
|
||
|
|
this.init();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getCalendar(params) {
|
||
|
|
let params2 = {
|
||
|
|
method: "greenCalendar/getCalendarList",
|
||
|
|
data: {
|
||
|
|
date_name: this.date[0].tiems,
|
||
|
|
}
|
||
|
|
};
|
||
|
|
callbackRequest(params2).then(res => {
|
||
|
|
if (res.data.returnCode == 1) {
|
||
|
|
var list = res.data.returnData;
|
||
|
|
|
||
|
|
for (var j = 0; j < this.date.length; j++) {
|
||
|
|
var fl = true;
|
||
|
|
for (var i = 0; i < list.length; i++) {
|
||
|
|
if (list[i].date_name == this.date[j].tiems) {
|
||
|
|
this.$set(this.date[j], 'isholiday', list[i].isholiday);
|
||
|
|
fl = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (fl) {
|
||
|
|
this.$set(this.date[j], 'isholiday', '0');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.selectDates {
|
||
|
|
margin-top: 20upx !important;
|
||
|
|
white-space: nowrap !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tabBottom {
|
||
|
|
width: 13%;
|
||
|
|
height: 4upx;
|
||
|
|
border-radius: 5px;
|
||
|
|
background-image: linear-gradient(to right, #64E182, #1CA7B2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.sub-btn {
|
||
|
|
width: 100%;
|
||
|
|
height: 120upx;
|
||
|
|
background-color: #fff;
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 32upx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
width: 94%;
|
||
|
|
height: 88upx;
|
||
|
|
border-radius: 44upx;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 88upx;
|
||
|
|
background-image: linear-gradient(to right, #5BCE9D, #00ADA6);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.hzContent {
|
||
|
|
padding: 22upx;
|
||
|
|
margin-top: 50upx;
|
||
|
|
padding-bottom: 200upx;
|
||
|
|
|
||
|
|
.bg-gray {
|
||
|
|
opacity: 0.6;
|
||
|
|
background-color: #F2F6FA !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-box {
|
||
|
|
width: 80%;
|
||
|
|
display: flex;
|
||
|
|
font-size: 36upx;
|
||
|
|
color: #555555;
|
||
|
|
|
||
|
|
.active_tab {
|
||
|
|
font-weight: 800;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-item {
|
||
|
|
width: 40%;
|
||
|
|
font-weight: 800;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tips {
|
||
|
|
width: 100%;
|
||
|
|
padding: 20upx;
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 20upx;
|
||
|
|
margin-top: 20upx;
|
||
|
|
color: #FB8107;
|
||
|
|
font-size: 28upx;
|
||
|
|
|
||
|
|
.tipsTit {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tipsCont {
|
||
|
|
margin-left: 38upx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 36upx;
|
||
|
|
height: 36upx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-box {
|
||
|
|
margin-top: 20upx;
|
||
|
|
|
||
|
|
.loc {
|
||
|
|
margin-top: 20upx;
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 30upx;
|
||
|
|
color: #333333;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 38upx;
|
||
|
|
height: 38upx;
|
||
|
|
margin-right: 10upx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.dateTit {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 35upx;
|
||
|
|
height: 35upx;
|
||
|
|
margin-right: 10upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftIcon {
|
||
|
|
width: 8upx;
|
||
|
|
height: 30upx;
|
||
|
|
background-image: linear-gradient(to bottom, #82E7B3, #94B8EF);
|
||
|
|
border-radius: 5px;
|
||
|
|
margin-right: 10upx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.dateItem {
|
||
|
|
margin: 0 10upx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 28upx;
|
||
|
|
color: #0DB0A7;
|
||
|
|
border-radius: 16upx;
|
||
|
|
padding: 18upx 20upx;
|
||
|
|
background-color: #EDFCF7;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.selectInterval {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.intervalItem {
|
||
|
|
width: 30%;
|
||
|
|
margin-top: 20upx;
|
||
|
|
padding: 15upx 20upx;
|
||
|
|
background: #F2F6FA;
|
||
|
|
border-radius: 8upx;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 28upx;
|
||
|
|
color: #999999;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.timeInterval,
|
||
|
|
.selectDate {
|
||
|
|
width: 100%;
|
||
|
|
padding: 20upx;
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 20upx;
|
||
|
|
|
||
|
|
.time-active {
|
||
|
|
border: 1px solid #0DB0A7;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/deep/::-webkit-scrollbar {
|
||
|
|
display: none;
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/deep/.uni-scroll-view-content {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-box {
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
.detail {
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 20upx;
|
||
|
|
margin-top: 20upx;
|
||
|
|
padding: 20upx;
|
||
|
|
|
||
|
|
.detail_header {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.font-tilte {
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 36upx;
|
||
|
|
color: #333333;
|
||
|
|
margin-left: 20upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.font-result {
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 28upx;
|
||
|
|
color: #0DB0A7;
|
||
|
|
padding: 10upx 30upx;
|
||
|
|
background: #C1EFEA;
|
||
|
|
border-radius: 30upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 42upx;
|
||
|
|
height: 42upx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail_msg {
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 28upx;
|
||
|
|
color: #999999;
|
||
|
|
margin-top: 20upx;
|
||
|
|
border-bottom: 1px solid #EBEFF7;
|
||
|
|
padding-bottom: 20upx;
|
||
|
|
|
||
|
|
.info-item {
|
||
|
|
margin-top: 20upx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.infoBtn {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
margin-top: 20upx;
|
||
|
|
font-size: 28upx;
|
||
|
|
color: #0DB0A7;
|
||
|
|
|
||
|
|
.comment-btn {
|
||
|
|
display: flex;
|
||
|
|
border-radius: 30upx;
|
||
|
|
margin-left: 20upx;
|
||
|
|
padding: 10upx 50upx;
|
||
|
|
border: 1px solid #0DB0A7;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-ccc {
|
||
|
|
color: #CACACA;
|
||
|
|
border: 1px solid #CACACA !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|