|
|
<template>
|
|
|
<view class="content">
|
|
|
<view class="box-top">
|
|
|
<image src="../../static/img/index_bg.jpg" class="index_bg"></image>
|
|
|
</view>
|
|
|
<view class="box-notice">
|
|
|
<u-notice-bar @click="openInfo" :text="list" direction="column" mode="link" color="#9E8F8B"></u-notice-bar>
|
|
|
</view>
|
|
|
<view class="box-body">
|
|
|
<view class="box-body-title">
|
|
|
<image src="../../static/img/index_name.png" class="box-body-title-img"></image>
|
|
|
<view class="box-body-sub-title">开馆时间：周二～周日 9:00-17:00 周一闭馆</view>
|
|
|
</view>
|
|
|
<view style="margin-top: 56rpx;">
|
|
|
<view class="box-row">
|
|
|
<view class="box-col" @click="openBook">
|
|
|
<image src="../../static/img/index_icon_1.png" class="box-body-icon"></image>
|
|
|
</view>
|
|
|
<view class="box-col" @click="openActivity">
|
|
|
<image src="../../static/img/index_icon_2.png" class="box-body-icon"></image>
|
|
|
</view>
|
|
|
<view class="box-col">
|
|
|
<image src="../../static/img/index_icon_3.png" class="box-body-icon"></image>
|
|
|
</view>
|
|
|
</u-row>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="box-footer"
|
|
|
style="position: fixed;bottom: -60rpx;left: 0;text-align: center;width: 100%;z-index: -1;">
|
|
|
<image src="../../static/img/footer_logo.png" class="footer-img"></image>
|
|
|
</view>
|
|
|
|
|
|
<u-popup :show="showBook" mode="bottom" @close="closeBook" @open="openBook" :round="10" closeable>
|
|
|
<view class="mpopup">
|
|
|
<view class="mpopup-title">
|
|
|
参观预约
|
|
|
</view>
|
|
|
<view class="mpopup-content">
|
|
|
<view class="book-box">
|
|
|
<view class="book-box-card">
|
|
|
<view class="book-box-title">
|
|
|
日期
|
|
|
</view>
|
|
|
<view class="book-box-row">
|
|
|
<view class="book-box-row-date">
|
|
|
<view class="book-box-row-dateitem book-box-row-dateitem-none">
|
|
|
<view class="book-box-row-dateitem-status">售罄</view>
|
|
|
<view>今天</view>
|
|
|
<view>5月6日</view>
|
|
|
</view>
|
|
|
<view class="book-box-row-dateitem book-box-row-dateitem-on">
|
|
|
<view class="book-box-row-dateitem-status">
|
|
|
<u-icon name="checkmark" color="#fff" size="20rpx"></u-icon>
|
|
|
</view>
|
|
|
<view>今天</view>
|
|
|
<view>5月6日</view>
|
|
|
</view>
|
|
|
<view class="book-box-row-dateitem">
|
|
|
<view class="book-box-row-dateitem-status">余票</view>
|
|
|
<view>今天</view>
|
|
|
<view>5月6日</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="book-box-row-select">
|
|
|
<view>
|
|
|
<view>指定</view>
|
|
|
<view>日期</view>
|
|
|
</view>
|
|
|
<view class="book-box-row-select-more">
|
|
|
<u-icon name="arrow-right" color="#EF9525" size="20rpx"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="book-box-card">
|
|
|
<view class="book-box-title">
|
|
|
参观时间
|
|
|
</view>
|
|
|
|
|
|
<view class="book-box-timerow">
|
|
|
<view class="book-box-row-timeitem">
|
|
|
<view class="book-box-row-timeitem-txt">09:00-10:00</view>
|
|
|
<view class="book-box-row-timeitem-txt">41张</view>
|
|
|
</view>
|
|
|
<view class="book-box-row-timeitem">
|
|
|
<view class="book-box-row-timeitem-txt">09:00-10:00</view>
|
|
|
<view class="book-box-row-timeitem-txt">41张</view>
|
|
|
</view>
|
|
|
<view class="book-box-row-timeitem">
|
|
|
<view class="book-box-row-timeitem-txt">09:00-10:00</view>
|
|
|
<view class="book-box-row-timeitem-txt">41张</view>
|
|
|
</view>
|
|
|
<view class="book-box-row-timeitem book-box-row-timeitem-on">
|
|
|
<view class="book-box-row-timeitem-status">
|
|
|
<u-icon name="checkmark" color="#fff" size="20rpx"></u-icon>
|
|
|
</view>
|
|
|
<view class="book-box-row-timeitem-txt">09:00-10:00</view>
|
|
|
<view class="book-box-row-timeitem-txt">41张</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="book-box-selectInfo">
|
|
|
<view class="book-box-selectInfo-left">已选：5月6日 09:00-10:00</view>
|
|
|
<view class="book-box-selectInfo-right">
|
|
|
<text class="book-box-selectInfo-righttxt">预约须知</text>
|
|
|
<u-icon name="arrow-right" color="#EF9525" size="20rpx"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="mpopup-footer">
|
|
|
<view style="margin-right: 14rpx;flex: 1;">
|
|
|
<u-button type="primary" @click="tobook('team')">团体预约</u-button>
|
|
|
</view>
|
|
|
<view style="margin-left: 14rpx;flex: 1;">
|
|
|
<u-button type="primary" @click="tobook('user')">个人预约</u-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
|
|
|
<u-popup :show="showInfo" mode="center" @close="closeInfo" @open="openInfo" :round="10" closeable>
|
|
|
<view class="mpopup">
|
|
|
<view class="mpopup-title">
|
|
|
通知
|
|
|
</view>
|
|
|
<view class="mpopup-content">
|
|
|
<text>人生若只如初见，何事秋风悲画扇</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
showInfo: false,
|
|
|
showBook: false,
|
|
|
list: [
|
|
|
'寒雨连江夜入吴',
|
|
|
'平明送客楚山孤',
|
|
|
'洛阳亲友如相问',
|
|
|
'一片冰心在玉壶'
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
console.log(this.util)
|
|
|
},
|
|
|
methods: {
|
|
|
openActivity() {
|
|
|
uni.navigateTo({
|
|
|
url: "../activity/index"
|
|
|
})
|
|
|
},
|
|
|
openInfo() {
|
|
|
this.showInfo = true;
|
|
|
},
|
|
|
closeInfo() {
|
|
|
this.showInfo = false;
|
|
|
},
|
|
|
openBook() {
|
|
|
this.showBook = true;
|
|
|
},
|
|
|
closeBook() {
|
|
|
this.showBook = false;
|
|
|
},
|
|
|
tobook(type) {
|
|
|
if (type == "user") {
|
|
|
uni.navigateTo({
|
|
|
url: "/pages/visit/book"
|
|
|
})
|
|
|
} else {
|
|
|
uni.navigateTo({
|
|
|
url: "/pages/visit/teambook"
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
@import url("@/static/css/bookbox.css");
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.content {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.box-row {
|
|
|
display: flex;
|
|
|
justify-content: space-around;
|
|
|
padding: 0rpx 37rpx;
|
|
|
}
|
|
|
|
|
|
.box-top {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.index_bg {
|
|
|
width: 100%;
|
|
|
height: 613rpx;
|
|
|
}
|
|
|
|
|
|
.box-notice {
|
|
|
width: 100%;
|
|
|
background-color: #F9F7F3;
|
|
|
height: 63rpx;
|
|
|
margin-top: -20rpx;
|
|
|
border-top-left-radius: 15rpx !important;
|
|
|
border-top-right-radius: 15rpx !important;
|
|
|
}
|
|
|
|
|
|
.u-notice-bar {
|
|
|
border-top-left-radius: 15rpx !important;
|
|
|
border-top-right-radius: 15rpx !important;
|
|
|
}
|
|
|
|
|
|
.box-body {
|
|
|
width: 100%;
|
|
|
padding: 82rpx 0;
|
|
|
}
|
|
|
|
|
|
.box-body-title {
|
|
|
padding: 0rpx 37rpx;
|
|
|
}
|
|
|
|
|
|
.box-body-title-img {
|
|
|
height: 36rpx;
|
|
|
width: 329rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.box-body-sub-title {
|
|
|
font-size: 24rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 400;
|
|
|
color: #8A8A8A;
|
|
|
margin-top: 20rpx;
|
|
|
}
|
|
|
|
|
|
.box-body-icon {
|
|
|
width: 217rpx;
|
|
|
height: 230rpx;
|
|
|
}
|
|
|
|
|
|
.footer-img {
|
|
|
width: 421rpx;
|
|
|
height: 364rpx;
|
|
|
}
|
|
|
</style>
|
