Compare commits
2 Commits
23a2438a88
...
2822b072e9
| Author | SHA1 | Date | |
|---|---|---|---|
| 2822b072e9 | |||
| 8ad6af6611 |
1666
package-lock.json
generated
1666
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -49,8 +49,8 @@
|
|||||||
"@dcloudio/uni-mp-xhs": "3.0.0-3090820231124001",
|
"@dcloudio/uni-mp-xhs": "3.0.0-3090820231124001",
|
||||||
"@dcloudio/uni-quickapp-webview": "3.0.0-3090820231124001",
|
"@dcloudio/uni-quickapp-webview": "3.0.0-3090820231124001",
|
||||||
"@xingyy/uni-fetch": "^1.0.2",
|
"@xingyy/uni-fetch": "^1.0.2",
|
||||||
|
"dayjs": "^1.11.10",
|
||||||
"echarts": "5.4.2",
|
"echarts": "5.4.2",
|
||||||
"node-sass": "^9.0.0",
|
|
||||||
"pinia": " 2.0.33",
|
"pinia": " 2.0.33",
|
||||||
"sass": "^1.69.5",
|
"sass": "^1.69.5",
|
||||||
"sass-loader": "^13.3.2",
|
"sass-loader": "^13.3.2",
|
||||||
|
|||||||
142
src/pages.json
142
src/pages.json
@ -1,74 +1,88 @@
|
|||||||
{
|
{
|
||||||
"easycom": {
|
"easycom": {
|
||||||
"autoscan": true,
|
"autoscan": true,
|
||||||
"custom": {
|
"custom": {
|
||||||
"^tm-(.*)": "@/tmui/components/tm-$1/tm-$1.vue"
|
"^tm-(.*)": "@/tmui/components/tm-$1/tm-$1.vue"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"pages": [{
|
"pages": [
|
||||||
"path": "pages/index/index",
|
{
|
||||||
|
"path": "pages/home/index",
|
||||||
"style": {
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
"navigationBarTitleText": "",
|
"navigationBarTitleText": "",
|
||||||
"enablePullDownRefresh": false,
|
"enablePullDownRefresh": false,
|
||||||
"app-plus": {
|
"app-plus": {
|
||||||
"titleNView": false // 禁用原生导航
|
"titleNView": false // 禁用原生导航
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/ticket/index",
|
|
||||||
"style": {
|
|
||||||
"navigationStyle": "custom",
|
|
||||||
"navigationBarTitleText": "",
|
|
||||||
"enablePullDownRefresh": false,
|
|
||||||
"app-plus": {
|
|
||||||
"titleNView": false // 禁用原生导航
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/login/index",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "",
|
|
||||||
"enablePullDownRefresh": false,
|
|
||||||
"app-plus": {
|
|
||||||
"titleNView": false // 禁用原生导航
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/setup/index",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "",
|
|
||||||
"enablePullDownRefresh": false,
|
|
||||||
"app-plus": {
|
|
||||||
"titleNView": false // 禁用原生导航
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/view-venues/index",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "",
|
|
||||||
"enablePullDownRefresh": false,
|
|
||||||
"app-plus": {
|
|
||||||
"titleNView": false // 禁用原生导航
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"globalStyle": {
|
|
||||||
"navigationBarTextStyle": "black",
|
|
||||||
"navigationBarTitleText": "uni-app",
|
|
||||||
"navigationBarBackgroundColor": "#FFFFFF",
|
|
||||||
"backgroundColor": "#FFFFFF"
|
|
||||||
},
|
},
|
||||||
"condition": {
|
{
|
||||||
"current": 0,
|
"path": "pages/index/index",
|
||||||
"list": [{
|
"style": {
|
||||||
"name": "",
|
"navigationBarTitleText": "",
|
||||||
"path": "",
|
"enablePullDownRefresh": false,
|
||||||
"query": ""
|
"app-plus": {
|
||||||
}]
|
"titleNView": false // 禁用原生导航
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/ticket/index",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"app-plus": {
|
||||||
|
"titleNView": false // 禁用原生导航
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/login/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"app-plus": {
|
||||||
|
"titleNView": false // 禁用原生导航
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/setup/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"app-plus": {
|
||||||
|
"titleNView": false // 禁用原生导航
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/view-venues/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"app-plus": {
|
||||||
|
"titleNView": false // 禁用原生导航
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"globalStyle": {
|
||||||
|
"navigationBarTextStyle": "black",
|
||||||
|
"navigationBarTitleText": "uni-app",
|
||||||
|
"navigationBarBackgroundColor": "#FFFFFF",
|
||||||
|
"backgroundColor": "#FFFFFF"
|
||||||
|
},
|
||||||
|
"condition": {
|
||||||
|
"current": 0,
|
||||||
|
"list": [
|
||||||
|
{
|
||||||
|
"name": "",
|
||||||
|
"path": "",
|
||||||
|
"query": ""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,23 +1,85 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<div class="header">
|
<title class="title-block" title="首都博物馆东馆" :isBack="false">
|
||||||
<div>门票名称</div>
|
</title>
|
||||||
<div>剩余数量</div>
|
<div :style="{ height }" class="box">
|
||||||
</div>
|
<div class="header">
|
||||||
<div class="container">
|
<div>门票名称</div>
|
||||||
<div class="item">
|
<div>剩余数量</div>
|
||||||
<image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
|
</div>
|
||||||
<div class="detail">
|
<div class="container">
|
||||||
<div style="width: 140rpx;">首都博物馆门票</div>
|
|
||||||
<div>1023/20000</div>
|
<div class="item">
|
||||||
<tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
|
<image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
|
||||||
|
<div class="detail">
|
||||||
|
<div style="width: 140rpx;">首都博物馆门票</div>
|
||||||
|
<div>1023/20000</div>
|
||||||
|
<tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
|
||||||
|
<div class="detail">
|
||||||
|
<div style="width: 140rpx;">首都博物馆门票</div>
|
||||||
|
<div>1023/20000</div>
|
||||||
|
<tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
|
||||||
|
<div class="detail">
|
||||||
|
<div style="width: 140rpx;">首都博物馆门票</div>
|
||||||
|
<div>1023/20000</div>
|
||||||
|
<tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
|
||||||
|
<div class="detail">
|
||||||
|
<div style="width: 140rpx;">首都博物馆门票</div>
|
||||||
|
<div>1023/20000</div>
|
||||||
|
<tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
|
||||||
|
<div class="detail">
|
||||||
|
<div style="width: 140rpx;">首都博物馆门票</div>
|
||||||
|
<div>1023/20000</div>
|
||||||
|
<tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
|
||||||
|
<div class="detail">
|
||||||
|
<div style="width: 140rpx;">首都博物馆门票</div>
|
||||||
|
<div>1023/20000</div>
|
||||||
|
<tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="attention" v-if="isShow">
|
||||||
|
<div>
|
||||||
|
注：港澳台游客请至现场办理门票业务！
|
||||||
|
</div>
|
||||||
|
<tm-icon name="tmicon-times-circle" color="#fff" :fontSize="24" @click="handleTips"></tm-icon>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { onMounted, ref } from "vue";
|
||||||
|
let height = ref('')
|
||||||
|
let isShow = ref(true)
|
||||||
|
onMounted(() => {
|
||||||
|
uni.createSelectorQuery().select('.title-block').boundingClientRect(data => {
|
||||||
|
let res = uni.getSystemInfoSync();
|
||||||
|
height.value = res.windowHeight - data.bottom + 'px';
|
||||||
|
}).exec()
|
||||||
|
})
|
||||||
|
const handleTips = () => {
|
||||||
|
isShow.value = false
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.main {
|
.main {
|
||||||
@ -25,47 +87,73 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
|
background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
padding: 38rpx 32rpx;
|
padding: 0 32rpx 38rpx 32rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
.header {
|
.box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: #AB2F23;
|
|
||||||
height: 70rpx;
|
|
||||||
border-radius: 20rpx;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
|
||||||
color: #FFFFFF;
|
|
||||||
font-size: 28rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
box-sizing: border-box;
|
|
||||||
flex: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
margin-top: 20rpx;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding-bottom: 2rpx;
|
box-sizing: border-box;
|
||||||
|
|
||||||
.item {
|
.header {
|
||||||
display: flex;
|
margin-top: 20rpx;
|
||||||
align-items: center;
|
width: 100%;
|
||||||
background: #FFFFFF;
|
background: #AB2F23;
|
||||||
|
height: 70rpx;
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
overflow-y: auto;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-bottom: 2rpx;
|
||||||
margin-bottom: 20rpx;
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
.detail {
|
.item {
|
||||||
flex: 1;
|
|
||||||
margin-left: 18rpx;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-around;
|
background: #FFFFFF;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
|
.detail {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 18rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.attention {
|
||||||
|
width: 664rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
position: fixed;
|
||||||
|
background: #761C1F;
|
||||||
|
height: 68rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
bottom: 20rpx;
|
||||||
|
padding: 16rpx 40rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -80,7 +80,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<tm-button @click="reservation" color="#000000" :width="436" :height="60" :round="25">预约</tm-button>
|
<tm-button @click="reservation" color="#000000" :width="436" :height="60" :round="25"
|
||||||
|
style="margin-top: 20rpx !important;">预约</tm-button>
|
||||||
<select-day v-model:show="show"></select-day>
|
<select-day v-model:show="show"></select-day>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -161,7 +162,6 @@ const reservation = () => {
|
|||||||
}
|
}
|
||||||
const showHandle = () => {
|
const showHandle = () => {
|
||||||
show.value = true
|
show.value = true
|
||||||
console.log(show.value,'show.value')
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -1,11 +1,81 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<tm-drawer placement="bottom" okText='确认' :show="show" @close="close">
|
<tm-drawer placement="bottom" okText='确认' :show="show" :height="1054" :hideHeader=true>
|
||||||
|
<div class="container">
|
||||||
|
<tm-icon name="tmicon-times-circle" color="#ccc" class="icon-close" @click="close"></tm-icon>
|
||||||
|
<div class="title">请选择参观日期</div>
|
||||||
|
<tm-divider color="#868686"></tm-divider>
|
||||||
|
<div>当前年月日：{{ currentDate }}</div>
|
||||||
|
<tm-divider color="#868686"></tm-divider>
|
||||||
|
<div class="date-box">
|
||||||
|
<div class="date-box-item" v-for="(item, index) in dateList" :key="index">
|
||||||
|
<div :class="[index === currentIndex ? 'active' : '', 'date-box-item-day']"
|
||||||
|
@click="chooseDatehandle($event, item.date, index)">
|
||||||
|
<div :style="{ fontSize: '30rpx', fontWeight: '600' }">{{ item.date }}日·周{{
|
||||||
|
dayChineseMap[item.week] }}
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 22rpx;">*可预约</div>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 30rpx;color:#F7963B ;">{{ dayjs().format('MM-DD') + '日' == item.date
|
||||||
|
? '今日' : '明天' }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="more-date" @click="changeMoreDate">
|
||||||
|
<div style="font-size: 30rpx;width: 100rpx;">选择更多日期</div>
|
||||||
|
<div>
|
||||||
|
<tm-icon name="tmicon-angle-right" :fontSize="26" color="#fff"></tm-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<tm-divider color="#868686"></tm-divider>
|
||||||
|
<div class="title">请选择参观日期</div>
|
||||||
|
<div class="time-box">
|
||||||
|
<div class="time-box-item">
|
||||||
|
<div :style="{ fontWeight: '600' }">08:00入场</div>
|
||||||
|
<div :style="{ fontSize: '22rpx', }">*不可选</div>
|
||||||
|
</div>
|
||||||
|
<div class="time-box-item">
|
||||||
|
<div :style="{ fontWeight: '600' }">08:00入场</div>
|
||||||
|
<div :style="{ fontSize: '22rpx', }">*不可选</div>
|
||||||
|
</div>
|
||||||
|
<div class="time-box-item">
|
||||||
|
<div :style="{ fontWeight: '600' }">08:00入场</div>
|
||||||
|
<div :style="{ fontSize: '22rpx', }">*不可选</div>
|
||||||
|
</div>
|
||||||
|
<div class="time-box-item">
|
||||||
|
<div :style="{ fontWeight: '600' }">08:00入场</div>
|
||||||
|
<div :style="{ fontSize: '22rpx', }">*不可选</div>
|
||||||
|
</div>
|
||||||
|
<div class="time-box-item">
|
||||||
|
<div :style="{ fontWeight: '600' }">08:00入场</div>
|
||||||
|
<div :style="{ fontSize: '22rpx', }">*不可选</div>
|
||||||
|
</div>
|
||||||
|
<div class="time-box-item">
|
||||||
|
<div :style="{ fontWeight: '600' }">08:00入场</div>
|
||||||
|
<div :style="{ fontSize: '22rpx', }">*不可选</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<tm-divider color="#868686"></tm-divider>
|
||||||
|
<div class="tips">
|
||||||
|
<div>*参观当日需要携带游客本人身份证件</div>
|
||||||
|
<div> *入馆时间：</div>
|
||||||
|
<div>
|
||||||
|
工作日08:30-18:00、节假日/双休09:00-20:00（具体时间以景区为准）
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<tm-divider color="#868686"></tm-divider>
|
||||||
|
<div style="margin: auto;">
|
||||||
|
<tm-button color="#000000" :width="436" :height="60" :round="25">确定</tm-button>
|
||||||
|
</div>
|
||||||
|
<tm-calendar format="YYYY-MM-DD" @confirm="comfirmCal" color="#F7963B" v-model:show="isMoreDate" update:show
|
||||||
|
:start="[dayjs()]" :end="[endDate]"></tm-calendar>
|
||||||
|
</div>
|
||||||
</tm-drawer>
|
</tm-drawer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { defineProps, defineEmits } from 'vue'
|
import { defineProps, ref, defineEmits, watch, onMounted, computed } from 'vue'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
show: {
|
show: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
@ -13,9 +83,143 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
const emits = defineEmits(["update:show"]);
|
const emits = defineEmits(["update:show"]);
|
||||||
|
let currentIndex = ref(-1)
|
||||||
|
let currentDate = ref('')
|
||||||
|
let isMoreDate = ref(false)
|
||||||
|
const dayChineseMap = ['日', '一', '二', '三', '四', '五', '六'];
|
||||||
|
let dateList = ref([
|
||||||
|
{
|
||||||
|
date: dayjs().format('MM-DD'),
|
||||||
|
week: dayjs().day(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: dayjs().add(1, 'day').format('MM-DD'),
|
||||||
|
week: dayjs().add(1, 'day').day(),
|
||||||
|
}
|
||||||
|
])
|
||||||
|
const chooseDatehandle = (e, date, index) => {
|
||||||
|
currentDate.value = dayjs().year() + '-' + date
|
||||||
|
currentIndex.value = index
|
||||||
|
}
|
||||||
const close = () => {
|
const close = () => {
|
||||||
emits("update:show", false);
|
emits("update:show", false);
|
||||||
}
|
}
|
||||||
|
const changeMoreDate = () => {
|
||||||
|
isMoreDate.value = true
|
||||||
|
}
|
||||||
|
const endDate = computed(() => {
|
||||||
|
const lastDayOfMonth = dayjs().endOf('month');
|
||||||
|
const year = lastDayOfMonth.year();
|
||||||
|
const month = lastDayOfMonth.month() + 1;
|
||||||
|
const date = lastDayOfMonth.date();
|
||||||
|
return dayjs(year + '-' + month + '-' + date).add(2, 'month');
|
||||||
|
});
|
||||||
|
const comfirmCal = (date) => {
|
||||||
|
currentDate.value = date[0].split('/').join('-')
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 30rpx 32rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.icon-close {
|
||||||
|
position: absolute;
|
||||||
|
right: 20rpx;
|
||||||
|
top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-box {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
margin: 20rpx 0;
|
||||||
|
|
||||||
|
.date-box-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
|
||||||
|
.date-box-item-day {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
border-radius: 32rpx;
|
||||||
|
border: 1px solid #F7963B;
|
||||||
|
padding: 20rpx 18rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 240rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: #F7963B;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-date {
|
||||||
|
display: flex;
|
||||||
|
padding: 20rpx 18rpx;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: start;
|
||||||
|
height: 100rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 32rpx;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #F7963B;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-box::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
/* 对于Webkit浏览器 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-box {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
overflow-x: auto;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
/* 对于IE和Edge */
|
||||||
|
scrollbar-width: none;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
|
/* 对于Firefox */
|
||||||
|
.time-box-item {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
font-size: 30rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
border-radius: 32rpx;
|
||||||
|
border: 1rpx solid #F7963B;
|
||||||
|
width: 188rpx;
|
||||||
|
height: 114rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tips {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
color: #B29E92;
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user