Browse Source

日历显示

master
Enzo 4 years ago
parent
commit
e797a04660
  1. 99
      pages/goodsDetail/index.vue

99
pages/goodsDetail/index.vue

@ -150,7 +150,23 @@
<view class="lf-line-2 lf-font-28 lf-color-333">{{goods_detail.product.extends.field_1_address}}</view>
<view class="lf-iconfont lf-icon-dizhi lf-color-blue"></view>
</view>
</view>
</view>
<view v-for="(item,index) of goods_detail.spec" :key="index">
<self-line></self-line>
<view class="calendar-box lf-bg-white lf-p-b-20">
<view class="month lf-p-l-10 lf-p-r-10">
<view>{{item.name}}</view>
</view>
<view class="day">
<view style="border: 1px solid #0081FF;margin-bottom: 20rpx;border-radius: 10rpx;" :class="days.date==nowTime?'sign':''" v-for="(days,index2) in item.list" :key="index2">
<text class="lf-font-24">09-26</text>
<text class="lf-m-t-10 lf-font-24 lf-color-price">{{days.price}}</text>
<text class="lf-m-t-10 lf-font-24">{{days.stock}}</text>
</view>
</view>
</view>
</view>
<!-- <zwyCalendar class="lf-m-t-20" type="sign" :startTime="'2021-10-01'" :endTime="'2021-11-01'"/> -->
<view class="goods-detail" style="padding-bottom: 0;">
<view class="lf-font-32 lf-font-bold lf-m-b-20">酒店设施</view>
<view>
@ -420,6 +436,7 @@
return {
year: new Date().getFullYear(), //
month: new Date().getMonth() + 1, //
now_time: '',
current: 0, //
goods_id: 0,
goods_detail: {},
@ -912,6 +929,86 @@
}
</style>
<style lang="scss" scoped="scoped">
.calendar-box {
width: 100%;
flex-direction: column;
justify-content: center;
}
.calendar-box,
.month,
.week,
.day {
display: flex;
align-items: center;
justify-content: space-between;
}
.month,
.week,
.day {
width: 700rpx;
}
.month {
margin: 30rpx 0;
position: relative;
}
.picker {
width: 160rpx;
height: 40rpx;
position: absolute;
top: 20rpx;
left: 50%;
transform: translate(-50%, -50%);
}
.day {
flex-wrap: wrap;
}
.week>view,
.day>view {
width: 120rpx;
height: 120rpx;
text-align: center;
position: relative;
display: flex;
flex-direction: column;
font-size: 18rpx;
align-items: center;
justify-content: center;
}
.checkday {
color: #999;
margin-top: 10rpx;
}
.choose {
color: #777;
border-radius: 50%;
background-color: #c3e4ff;
}
.circle {
width: 10rpx;
height: 10rpx;
border-radius: 50%;
position: absolute;
bottom: 10%;
left: 50%;
transform: translate(-50%, -50%);
}
.sign {
background-color: #0089fe;
}
.repair {
background-color: #1998FE;
}
.choose_btn {
width: 686rpx;
height: 100rpx;

Loading…
Cancel
Save