jinna
3 years ago
parent
101a864339
commit
841ae6f79c
14 changed files with 999 additions and 5 deletions
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 604 B |
|
After Width: | Height: | Size: 924 B |
|
After Width: | Height: | Size: 943 B |
|
After Width: | Height: | Size: 405 B |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 379 B |
@ -0,0 +1,298 @@ |
||||
<template> |
||||
<div class="pro_con"> |
||||
<div class="pro_box" v-for="item in proArr" :key="item.time"> |
||||
<div class="pro_top"> |
||||
<div class="img_box"> |
||||
<img src="~@/assets/image/time.png" alt="" /> |
||||
</div> |
||||
<div class="time_box"> |
||||
<div class="time_text">{{item.day}}</div> |
||||
<div class="date_txt">{{item.monmet}}</div> |
||||
</div> |
||||
</div> |
||||
<div class="pro_bottom"> |
||||
<div class="pro_left"> |
||||
<div class="img_box"> |
||||
<img src="~@/assets/image/pro.png" alt="" /> |
||||
</div> |
||||
<div class="pro_name">{{item.name}}</div> |
||||
<div class="pro_pos">{{item.posi}}</div> |
||||
</div> |
||||
<div class="pro_right"> |
||||
<div class="cancel" @click="cancelButton(item)">取消预约</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="act_box"> |
||||
<div class="act_btn" @click="confirm">确认</div> |
||||
</div> |
||||
<van-overlay :show="isShow"> |
||||
<div class="wrapper" @click.stop v-show="isSuccess"> |
||||
<div class="img_box"> |
||||
<img src="~@/assets/image/succ.png" alt=""> |
||||
</div> |
||||
<div class="tips">预约成功</div> |
||||
<div class="tip_txt"> |
||||
<div>预约成功后若不能按时体检请提前取消</div> |
||||
<div>未提前取消且未按期体检将被拉入黑名单</div> |
||||
<div>被拉黑用户10日内不可再预约</div> |
||||
</div> |
||||
<div class="btn">知道了</div> |
||||
</div> |
||||
<div class="wrapper" @click.stop v-show="!isSuccess"> |
||||
<div class="img_box"> |
||||
<img src="~@/assets/image/fail.png" alt=""> |
||||
</div> |
||||
<div class="tips">预约失败</div> |
||||
<div class="tip_txt"> |
||||
<div>您选择的时间段已无号，请重新预约</div> |
||||
</div> |
||||
<div class="btn">知道了</div> |
||||
</div> |
||||
<div class="close_box"><img src="~@/assets/image/close.png" alt=""></div> |
||||
</van-overlay> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
proData:{}, |
||||
proArr:[], |
||||
isShow:false, |
||||
isSuccess:false |
||||
}; |
||||
}, |
||||
mounted() { |
||||
console.log(this.$route.params); |
||||
this.proData = this.$route.params; |
||||
this.proData.selectArr.map(item =>{ |
||||
this.proArr.push({ |
||||
day:this.proData.time, |
||||
name:item.name, |
||||
monmet:item.time, |
||||
posi:item.posi |
||||
}) |
||||
}) |
||||
}, |
||||
methods: { |
||||
cancelButton(val){ |
||||
this.proArr = this.proArr.filter(item => item.name != val.name) |
||||
if(this.proArr.length == 0){ |
||||
this.$router.push({ |
||||
name:'examination' |
||||
}) |
||||
} |
||||
// lightAppJssdk.notification.alert ({ |
||||
// message: "这是一个弹窗", |
||||
// title: "提示",//可传空 |
||||
// buttonName: "收到", |
||||
// success:function(data){ |
||||
// //onSuccess将在点击button之后回调 |
||||
// /*回调*/ |
||||
|
||||
// }, |
||||
// fail:function(data){ //错误返回 |
||||
// } |
||||
// }); |
||||
}, |
||||
|
||||
confirm(){ |
||||
console.log(this.proArr) |
||||
if(this.proArr.length != 0){ |
||||
this.isShow = true |
||||
} |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.pro_con { |
||||
width: 100%; |
||||
height: 100%; |
||||
|
||||
.pro_box { |
||||
width: 98%; |
||||
margin-top: 0.2rem; |
||||
background: #fff; |
||||
margin: 0.4rem auto; |
||||
margin-bottom: 0.7rem; |
||||
|
||||
|
||||
.pro_top{ |
||||
display: flex; |
||||
padding-bottom: 0.26rem; |
||||
border-bottom: 1px solid #EEEEEE; |
||||
.img_box{ |
||||
display: flex; |
||||
align-items: center; |
||||
margin-right: 0.24rem; |
||||
img{ |
||||
width: 0.5rem; |
||||
height: 0.5rem; |
||||
} |
||||
} |
||||
.time_box{ |
||||
.time_text{ |
||||
width: 1.46rem; |
||||
height: 0.32rem; |
||||
text-align: center; |
||||
background: #F6F6F6; |
||||
border-radius: 0.08rem; |
||||
line-height: 0.32rem; |
||||
font-size: 0.24rem; |
||||
color: #999999; |
||||
} |
||||
.date_txt{ |
||||
font-size: 0.3rem; |
||||
font-weight: bold; |
||||
color: #333; |
||||
line-height: 0.46rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.pro_bottom{ |
||||
display: flex; |
||||
justify-content: space-between; |
||||
height: 0.6rem; |
||||
margin-top: 0.24rem; |
||||
|
||||
.pro_left{ |
||||
display: flex; |
||||
|
||||
|
||||
.img_box{ |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
img{ |
||||
width: 0.5rem; |
||||
height: 0.5rem; |
||||
|
||||
} |
||||
} |
||||
.pro_name{ |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 0.3rem; |
||||
color: #333; |
||||
font-weight: bold; |
||||
margin-left: 0.24rem; |
||||
} |
||||
.pro_pos{ |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 0.24rem; |
||||
color: #999; |
||||
margin-left: 0.24rem; |
||||
} |
||||
} |
||||
.pro_right{ |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.cancel{ |
||||
width: 1.5rem; |
||||
height: 0.5rem; |
||||
background: rgba(22, 119, 255,.1); |
||||
border-radius: 0.26rem; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-size: 0.24rem; |
||||
color: #1677FF; |
||||
margin-right: 0.24rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.act_box { |
||||
position:absolute; |
||||
left:0; |
||||
right:0; |
||||
bottom:0; |
||||
padding: 0.24rem; |
||||
background: #fff; |
||||
.act_btn{ |
||||
color: #FFFFFF; |
||||
font-size: 0.3rem; |
||||
font-family: PingFang SC-Bold, PingFang SC; |
||||
font-weight: bold; |
||||
line-height:0.96rem; |
||||
text-align: center; |
||||
background: #1677FF; |
||||
border-radius: 0.08rem; |
||||
} |
||||
} |
||||
|
||||
.wrapper{ |
||||
width: 5.98rem; |
||||
height: 6.66rem; |
||||
background: #FFFFFF; |
||||
border-radius: 0.16rem; |
||||
margin: 0 auto; |
||||
margin-top: 2.76rem; |
||||
|
||||
.img_box{ |
||||
display: flex; |
||||
justify-content: center; |
||||
img{ |
||||
width: 1rem; |
||||
height: 1rem; |
||||
margin-top: 1.2rem; |
||||
} |
||||
} |
||||
.tips{ |
||||
display: flex; |
||||
justify-content: center; |
||||
font-size: 0.34rem; |
||||
color:#000; |
||||
font-weight: bold; |
||||
margin: 0.56rem 0 0.2rem 0; |
||||
font-family: PingFang SC-Regular, PingFang SC; |
||||
|
||||
} |
||||
|
||||
.tip_txt{ |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 0.24rem; |
||||
color: #666; |
||||
font-family: PingFang SC-Regular, PingFang SC; |
||||
} |
||||
.btn{ |
||||
width: 3rem; |
||||
height: 0.8rem; |
||||
background: #1677FF; |
||||
border-radius: 0.08rem; |
||||
margin: 0 auto; |
||||
margin-top: 0.6rem; |
||||
font-size: 0.3rem; |
||||
color: #fff; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-family: PingFang SC-Regular, PingFang SC; |
||||
} |
||||
} |
||||
|
||||
.close_box{ |
||||
display: flex; |
||||
justify-content: center; |
||||
margin-top: 0.6rem; |
||||
img{ |
||||
width: 0.5rem; |
||||
height: 0.5rem; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,513 @@ |
||||
<template> |
||||
<div class="exam_contaniner"> |
||||
<div class="top_box"> |
||||
<div class="week-box" v-if="!isCal"> |
||||
<div class="week_box" style="display:flex"> |
||||
<div class="week_num" v-for="item in weekData" :key="item">{{item}}</div> |
||||
</div> |
||||
<div class="week_text"> |
||||
<div class="week_txt" v-for="item in weekArr" :key="item" @click="changeDate(item)" :class="[(item < today ? 'week_none' : ''),item == isToday ? 'today_week' : '',numData.find(item1 => item1.date.slice(-2) == (item < 0 ? '0' + item : item)) ? numData.find(item1 => item1.date.slice(-2) == (item < 0 ? '0' + item : item)).isNum == 0 ? 'isnum' : 'none' : '']"> |
||||
<div class="top_info"></div> |
||||
{{item}} |
||||
<div class="bottom_info" v-text="numData.find(item1 => item1.date.slice(-2) == (item < 0 ? '0' + item : item)) ? numData.find(item1 => item1.date.slice(-2) == (item < 0 ? '0' + item : item)).isNum == 0 ? '有号' :'无号' : ''"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div v-if="isCal"> |
||||
<van-swipe class="my-swipe" :stop-propagation="false"> |
||||
<van-swipe-item> |
||||
<van-calendar |
||||
class="can_box" |
||||
ref="calendar" |
||||
first-day-of-week="1" |
||||
v-model="show" |
||||
@confirm="onConfirm" |
||||
:poppable="false" |
||||
:show-mark="false" |
||||
:show-title="false" |
||||
:show-subtitle="false" |
||||
:show-confirm="false" |
||||
:min-date="minDate" |
||||
:max-date="maxDate" |
||||
:formatter="formatter" |
||||
/> |
||||
</van-swipe-item> |
||||
<van-swipe-item> |
||||
<van-calendar |
||||
class="can_box" |
||||
ref="calendar1" |
||||
first-day-of-week="1" |
||||
v-model="show" |
||||
@confirm="onConfirm1" |
||||
:poppable="false" |
||||
:show-mark="false" |
||||
:show-title="false" |
||||
:show-subtitle="false" |
||||
:show-confirm="false" |
||||
:min-date="minDate1" |
||||
:max-date="maxDate1" |
||||
/> |
||||
</van-swipe-item> |
||||
</van-swipe> |
||||
</div> |
||||
<div class="pull_box" @click="isShow"> |
||||
<img v-show="!isCal" src="~@/assets/image/pull.png" alt=""> |
||||
<img v-show="isCal" src="~@/assets/image/up.png" alt=""> |
||||
</div> |
||||
</div> |
||||
<div class="center_box"> |
||||
<div class="exam_box" v-for="item in examData" :key="item.name"> |
||||
<div class="exam_top"> |
||||
<div class="top_left"> |
||||
<div class="name_txt">{{item.name}}</div> |
||||
<div class="posi_txt"> |
||||
<img style="width:0.24rem;height:0.24rem" src="~@/assets/image/posi.png" alt=""> |
||||
<div style="color: #999;font-size: 0.24rem;">{{item.position}}</div> |
||||
</div> |
||||
</div> |
||||
<div class="top_right"><div style="font-size:0.3rem;color:#333">{{item.residue}}</div><div style="font-size:0.22rem;color:rgba(51, 51, 51,0.5)">/{{item.total}}</div> |
||||
</div> |
||||
</div> |
||||
<div class="exam_bottom"> |
||||
<div class="exam_txt" v-for="item1 in item.examArr" :key="item1.time" @click="clickExam(item,item1)" :class="[(item1.num == 0 ? 'isAct' : ''),(item1.isSelect ? 'active' : '')]"> |
||||
<div class="txt" style="font-size:0.22rem;color:#666;"><span style="font-size:0.24rem;color:#666">{{item1.moment}}</span> {{item1.time}}</div> |
||||
<div style="font-size:0.24rem;color:#333333;">剩余:{{item1.num}}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="btn_box"> |
||||
<van-button v-show="selectArr.length == 0" type="info" block disabled >预约</van-button> |
||||
<van-button v-show="selectArr.length !== 0" type="info" block @click="handleExam">预约</van-button> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
show:true, |
||||
text:"下拉", |
||||
isCal:false, |
||||
radio:1, |
||||
weekArr:[], |
||||
weekData:['一','二','三','四','五','六','日'], |
||||
minDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1), |
||||
maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date(new Date().getFullYear(),new Date().getMonth() + 1,0).getDate()), |
||||
minDate1: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1), |
||||
maxDate1: new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date(new Date().getFullYear(),new Date().getMonth() + 2,0).getDate()), |
||||
numData:[{date:'2023-02-09',isNum:1},{date:'2023-02-11',isNum:0}, |
||||
{date:'2023-02-15',isNum:1},{date:'2023-02-20',isNum:0}], |
||||
examData:[ |
||||
{name:'单眼视力',position:'门诊楼3楼眼科门诊',total:20,residue:15,examArr:[ |
||||
{moment:'上午',time:'8:00-8:30',num:2}, |
||||
{moment:'上午',time:'8:30-9:00',num:0}, |
||||
{moment:'上午',time:'9:00-9:30',num:1}, |
||||
{moment:'上午',time:'9:30-10:00',num:1}, |
||||
]}, |
||||
{name:'肢体',position:'门诊楼3楼',total:20,residue:15,examArr:[ |
||||
{moment:'上午',time:'8:00-8:30',num:2}, |
||||
{moment:'上午',time:'8:30-9:00',num:0}, |
||||
{moment:'上午',time:'9:00-9:30',num:1}, |
||||
{moment:'上午',time:'9:30-10:00',num:1}, |
||||
]}, |
||||
{name:'听力',position:'门诊楼3楼听力门诊',total:20,residue:15,examArr:[ |
||||
{moment:'上午',time:'8:00-8:30',num:2}, |
||||
{moment:'上午',time:'8:30-9:00',num:0}, |
||||
{moment:'上午',time:'9:00-9:30',num:1}, |
||||
{moment:'上午',time:'9:30-10:00',num:1}, |
||||
]} |
||||
], |
||||
selectArr:[], |
||||
selectDate:'', |
||||
today:'', |
||||
isToday:'' |
||||
} |
||||
}, |
||||
created() { |
||||
this.getList() |
||||
}, |
||||
mounted() { |
||||
var WeekFirstDay=new Date(new Date()-(new Date().getDay()-1)*86400000); |
||||
this.today = new Date().getDate(); |
||||
this.isToday = this.today; |
||||
let year = new Date().getFullYear(); |
||||
let month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1 |
||||
this.selectDate = year + '-' + month + '-' + (this.today < 10 ? '0' + this.today : this.today); |
||||
for(var i = WeekFirstDay.getDate();i<= parseInt(WeekFirstDay.getDate()) + 6;i++){ |
||||
this.weekArr.push(i) |
||||
} |
||||
var todayWeek = new Date().getDay(); |
||||
this.weekData.map((item,index) =>{ |
||||
if(index + 1 == todayWeek){ |
||||
// item = '今日' |
||||
this.weekData[index] = '今日' |
||||
} |
||||
}) |
||||
}, |
||||
methods: { |
||||
getList(){ |
||||
this.examData.map(item =>{ |
||||
item.examArr.map(item1 =>{ |
||||
item1.isSelect = false |
||||
}) |
||||
}) |
||||
console.log(this.examData) |
||||
}, |
||||
formatter(day){ |
||||
/* |
||||
这里的参数包含以下属性 |
||||
bottomInfo: undefined |
||||
date: Sat May 22 2021 00:00:00 GMT+0800 (中国标准时间) {} |
||||
text: 22 |
||||
type: " |
||||
|
||||
我们只需要修改type值为 disabled 即可 |
||||
*/ |
||||
if(day.date.getDate() < new Date().getDate()){ |
||||
day.type = 'disabled' |
||||
}else{ |
||||
this.numData.forEach(item =>{ |
||||
if(day.date.getDate() == item.date.slice(-2)){ |
||||
item.isNum == 0 ? day.bottomInfo = '有号' : day.bottomInfo = '无号' |
||||
item.isNum == 0 ? day.className = 'num1' : day.className = 'num2' |
||||
|
||||
} |
||||
}) |
||||
} |
||||
// if(day.date.getDate() == new Date().getDate()){ |
||||
day.topInfo = ` ` |
||||
// day.className = 'today' |
||||
|
||||
// } |
||||
return day |
||||
}, |
||||
changeDate(item){ |
||||
console.log(item) |
||||
this.isToday = item |
||||
}, |
||||
isShow(){ |
||||
console.log(111) |
||||
this.isCal = !this.isCal |
||||
}, |
||||
clickExam(val,val1){ |
||||
this.selectArr = [] |
||||
let arr = JSON.parse(JSON.stringify(this.examData)) |
||||
arr.find(item =>{ |
||||
if(item.name == val.name){ |
||||
console.log(item) |
||||
item.examArr.find(item1 =>{ |
||||
if(item1.time == val1.time){ |
||||
item1.isSelect = true |
||||
}else{ |
||||
item1.isSelect = false |
||||
} |
||||
}) |
||||
} |
||||
}) |
||||
this.examData = arr |
||||
this.examData.map(item =>{ |
||||
item.examArr.map(item1 =>{ |
||||
if(item1.isSelect){ |
||||
this.selectArr.push({ |
||||
name:item.name, |
||||
posi:item.position, |
||||
time:item1.moment + ' ' + item1.time, |
||||
}) |
||||
} |
||||
}) |
||||
}) |
||||
}, |
||||
onConfirm(date){ |
||||
let year = date.getFullYear(); |
||||
let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1 |
||||
let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() |
||||
let text = year + '-' + month + '-' + day |
||||
let val = this.numData.find(item => item.date == text) |
||||
console.log(val) |
||||
if(val){ |
||||
this.selectDate = val.date |
||||
}else{ |
||||
// this.$toast('异常') |
||||
} |
||||
}, |
||||
onConfirm1(){}, |
||||
handleExam(){ |
||||
console.log(this.selectArr,this.selectDate) |
||||
this.$router.replace({ |
||||
name:'ExamProject', |
||||
params:{ |
||||
time:this.selectDate, |
||||
selectArr:this.selectArr |
||||
} |
||||
}) |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.exam_contaniner{ |
||||
width: 100%; |
||||
overflow-y: scroll; |
||||
height: 100%; |
||||
overflow-x: hidden; |
||||
background: #F9F9F9; |
||||
|
||||
.top_box{ |
||||
background: #fff; |
||||
.week-box{ |
||||
.week_box{ |
||||
width: 100%; |
||||
height: 0.6rem; |
||||
padding-top: 0.7rem; |
||||
|
||||
.week_num{ |
||||
flex: 1; |
||||
font-size: 0.32rem; |
||||
line-height: 0.6rem; |
||||
text-align: center; |
||||
} |
||||
} |
||||
.week_text{ |
||||
display: flex; |
||||
width: 100%; |
||||
height: 1.28rem; |
||||
.week_txt{ |
||||
position: relative; |
||||
width: 13.5%; |
||||
height: 84%; |
||||
font-size: 0.32rem; |
||||
cursor: pointer; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
text-align: center; |
||||
margin: 0.24rem 0.35% 0 0.35%; |
||||
// margin-top: 0.12rem; |
||||
|
||||
.bottom_info{ |
||||
position: absolute; |
||||
right: 0; |
||||
left: 0; |
||||
font-size: 10px; |
||||
line-height: 14px; |
||||
bottom: 6px; |
||||
} |
||||
|
||||
.top_info{ |
||||
position: absolute; |
||||
right: 0; |
||||
left: 0; |
||||
top: 6px; |
||||
font-size: 10px; |
||||
line-height: 14px; |
||||
} |
||||
} |
||||
.week_none{ |
||||
color:#ccc; |
||||
pointer-events:none; |
||||
} |
||||
|
||||
.none{ |
||||
background: rgba(22, 119, 255,0.5); |
||||
border-radius: 50%; |
||||
color:#fff; |
||||
} |
||||
.isnum{ |
||||
background: rgb(22, 119, 255,); |
||||
border-radius: 50%; |
||||
color:#fff; |
||||
} |
||||
.today_week{ |
||||
background: #1677FF; |
||||
border-radius: 50%; |
||||
color:#fff; |
||||
|
||||
.top_info{ |
||||
width: 0.1rem; |
||||
height: 0.1rem; |
||||
background: #fff; |
||||
border-radius: 50%; |
||||
margin: 0 auto; |
||||
margin-top: 0.1rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.pull_box{ |
||||
display: flex; |
||||
justify-content: center; |
||||
margin-top: 0.24rem; |
||||
|
||||
img{ |
||||
width: 0.4rem; |
||||
height: 0.4rem; |
||||
} |
||||
} |
||||
.my-swipe .van-swipe-item { |
||||
width: 100%; |
||||
font-size: 0.4rem; |
||||
text-align: center; |
||||
} |
||||
|
||||
.can_box{ |
||||
padding-top:0.7rem |
||||
} |
||||
} |
||||
.center_box{ |
||||
width: 100%; |
||||
margin-top: 0.2rem; |
||||
.exam_box{ |
||||
width: 100%; |
||||
background: #fff; |
||||
padding-bottom: 0.4rem; |
||||
margin-bottom: 0.2rem; |
||||
|
||||
.exam_top{ |
||||
width: 100%; |
||||
height: 1.6rem; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
|
||||
.top_left{ |
||||
width: 80%; |
||||
height: 80%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-around; |
||||
margin-left: 5%; |
||||
|
||||
.name_txt{ |
||||
font-size: 0.3rem; |
||||
color: #333; |
||||
font-weight: bold; |
||||
} |
||||
.posi_txt{ |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
} |
||||
.top_right{ |
||||
width: 1.48rem; |
||||
height: 0.6rem; |
||||
border-top-left-radius: 0.4rem; |
||||
border-bottom-left-radius: 0.4rem; |
||||
border-right: none; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
background: rgba(72, 118, 255,0.2); |
||||
} |
||||
} |
||||
.exam_bottom{ |
||||
width: 93%; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin: 0 auto; |
||||
flex-wrap: wrap; |
||||
|
||||
.exam_txt{ |
||||
width: 2.2rem; |
||||
height: 1rem; |
||||
background: #F6F6F6; |
||||
border: 1px solid #1677FF; |
||||
border-radius: 0.08rem; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-around; |
||||
align-items: center; |
||||
font-size: 0.22rem; |
||||
margin-bottom: 0.2rem; |
||||
} |
||||
|
||||
.isAct{ |
||||
background: #F6F6F6; |
||||
border: 1px solid #F6F6F6; |
||||
pointer-events:none; |
||||
.txt{ |
||||
color:rgba(102, 102, 102,0.3) !important; |
||||
} |
||||
div{ |
||||
span{ |
||||
color:rgba(102, 102, 102,0.3) !important; |
||||
|
||||
} |
||||
color: rgba(51, 51, 51,0.3) !important; |
||||
} |
||||
} |
||||
|
||||
.active{ |
||||
background: #1677FF ; |
||||
div{ |
||||
span{ |
||||
color: #fff !important; |
||||
} |
||||
color: #fff !important; |
||||
} |
||||
|
||||
|
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.btn_box{ |
||||
width:90%; |
||||
height: 1.6rem; |
||||
margin:0 auto; |
||||
margin-top: 0.4rem; |
||||
cursor: not-allowed |
||||
} |
||||
} |
||||
::v-deep{ |
||||
.van-calendar__header { |
||||
box-shadow: none !important; |
||||
} |
||||
.van-calendar__month-title{ |
||||
display: none; |
||||
} |
||||
.num1{ |
||||
background: rgb(22, 119, 255); |
||||
border-radius: 50%; |
||||
color: #fff; |
||||
} |
||||
.num2{ |
||||
background: rgba(22, 119, 255,0.5); |
||||
border-radius: 50%; |
||||
color: #fff; |
||||
} |
||||
.van-calendar__weekday{ |
||||
font-size: 0.32rem; |
||||
} |
||||
.van-calendar__selected-day{ |
||||
.van-calendar__top-info{ |
||||
width: 0.1rem; |
||||
height: 0.1rem; |
||||
background: #fff; |
||||
border-radius: 50%; |
||||
margin: 0 auto; |
||||
margin-top: 0.1rem; |
||||
} |
||||
} |
||||
.van-calendar__days{ |
||||
height: 6.4rem; |
||||
|
||||
.van-calendar__day{ |
||||
height: 17%; |
||||
width: 13.5%; |
||||
margin: 0 0.35%; |
||||
|
||||
.van-calendar__selected-day{ |
||||
width: 100%; |
||||
height: 100%; |
||||
background: #1677FF; |
||||
border-radius: 50%; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,154 @@ |
||||
<template> |
||||
<div class="my_exam"> |
||||
<div class="exam_box"> |
||||
<div class="time_box">2023-01-08</div> |
||||
<div class="pro_box"> |
||||
<div class="pro_top"> |
||||
<div class="img_box"> |
||||
<img src="~@/assets/image/time.png" alt="" /> |
||||
</div> |
||||
<div class="time_box"> |
||||
<div class="time_text">2023-01-08</div> |
||||
<div class="date_txt">上午 9:00-9:30</div> |
||||
</div> |
||||
</div> |
||||
<div class="pro_bottom"> |
||||
<div class="pro_left"> |
||||
<div class="img_box"> |
||||
<img src="~@/assets/image/pro.png" alt="" /> |
||||
</div> |
||||
<div class="pro_name">单眼视力</div> |
||||
<div class="pro_pos">门诊楼3楼眼科门诊</div> |
||||
</div> |
||||
<div class="pro_right"> |
||||
<div class="cancel">取消预约</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default {}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.my_exam { |
||||
width: 100%; |
||||
height: 100%; |
||||
background: #f9f9f9; |
||||
.exam_box { |
||||
background: #fff; |
||||
padding: 0.5rem 0.24rem 0 0.24rem; |
||||
|
||||
.time_box { |
||||
font-size: 0.3rem; |
||||
font-family: PingFang SC-Bold, PingFang SC; |
||||
font-weight: bold; |
||||
color: #333333; |
||||
line-height: 0.46rem; |
||||
} |
||||
|
||||
.pro_box { |
||||
width: 98%; |
||||
margin-top: 0.2rem; |
||||
background: #fff; |
||||
margin: 0.4rem auto; |
||||
margin-bottom: 0.7rem; |
||||
|
||||
|
||||
.pro_top{ |
||||
display: flex; |
||||
padding-bottom: 0.26rem; |
||||
border-bottom: 1px solid #EEEEEE; |
||||
.img_box{ |
||||
display: flex; |
||||
align-items: center; |
||||
margin-right: 0.24rem; |
||||
img{ |
||||
width: 0.5rem; |
||||
height: 0.5rem; |
||||
} |
||||
} |
||||
.time_box{ |
||||
.time_text{ |
||||
width: 1.46rem; |
||||
height: 0.32rem; |
||||
text-align: center; |
||||
background: #F6F6F6; |
||||
border-radius: 0.08rem; |
||||
line-height: 0.32rem; |
||||
font-size: 0.24rem; |
||||
color: #999999; |
||||
} |
||||
.date_txt{ |
||||
font-size: 0.3rem; |
||||
font-weight: bold; |
||||
color: #333; |
||||
line-height: 0.46rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.pro_bottom{ |
||||
display: flex; |
||||
justify-content: space-between; |
||||
height: 0.6rem; |
||||
margin-top: 0.24rem; |
||||
|
||||
.pro_left{ |
||||
display: flex; |
||||
|
||||
|
||||
.img_box{ |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
img{ |
||||
width: 0.5rem; |
||||
height: 0.5rem; |
||||
|
||||
} |
||||
} |
||||
.pro_name{ |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 0.3rem; |
||||
color: #333; |
||||
font-weight: bold; |
||||
margin-left: 0.24rem; |
||||
} |
||||
.pro_pos{ |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 0.24rem; |
||||
color: #999; |
||||
margin-left: 0.24rem; |
||||
} |
||||
} |
||||
.pro_right{ |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.cancel{ |
||||
width: 1.5rem; |
||||
height: 0.5rem; |
||||
background: rgba(22, 119, 255,.1); |
||||
border-radius: 0.26rem; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-size: 0.24rem; |
||||
color: #1677FF; |
||||
margin-right: 0.24rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue