Merge remote-tracking branch 'origin/master'
This commit is contained in:
commit
7a08be77a7
@ -2,68 +2,99 @@
|
|||||||
<div class="main">
|
<div class="main">
|
||||||
<title class="title-block" title="首都博物馆东馆" :isBack="false">
|
<title class="title-block" title="首都博物馆东馆" :isBack="false">
|
||||||
</title>
|
</title>
|
||||||
<div :style="{ height }" class="box">
|
|
||||||
<div class="header">
|
|
||||||
<div>门票名称</div>
|
|
||||||
<div>剩余数量</div>
|
|
||||||
</div>
|
|
||||||
<div class="container">
|
|
||||||
|
|
||||||
<div class="item">
|
<div class="header">
|
||||||
<image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
|
<div>门票名称</div>
|
||||||
<div class="detail">
|
<div>剩余数量</div>
|
||||||
<div style="width: 140rpx;">首都博物馆门票</div>
|
</div>
|
||||||
<div>1023/20000</div>
|
<div class="container">
|
||||||
<tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
|
<div class="item">
|
||||||
</div>
|
<image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
|
||||||
</div>
|
<div class="detail">
|
||||||
<div class="item">
|
<div style="width: 140rpx;">首都博物馆门票</div>
|
||||||
<image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
|
<div>1023/20000</div>
|
||||||
<div class="detail">
|
<tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
|
||||||
<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 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>
|
||||||
<tm-icon name="tmicon-times-circle" color="#fff" :fontSize="24" @click="handleTips"></tm-icon>
|
|
||||||
</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 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 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>
|
||||||
</template>
|
</template>
|
||||||
@ -71,12 +102,7 @@
|
|||||||
import { onMounted, ref } from "vue";
|
import { onMounted, ref } from "vue";
|
||||||
let height = ref('')
|
let height = ref('')
|
||||||
let isShow = ref(true)
|
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 = () => {
|
const handleTips = () => {
|
||||||
isShow.value = false
|
isShow.value = false
|
||||||
}
|
}
|
||||||
@ -92,68 +118,62 @@ const handleTips = () => {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
.box {
|
|
||||||
|
|
||||||
|
.header {
|
||||||
|
margin-top: 20rpx;
|
||||||
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 {
|
||||||
|
overflow-y: auto;
|
||||||
|
height: 1120rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-top: 20rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
box-sizing: border-box;
|
padding-bottom: 2rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
.header {
|
.item {
|
||||||
margin-top: 20rpx;
|
|
||||||
width: 100%;
|
|
||||||
background: #AB2F23;
|
|
||||||
height: 70rpx;
|
|
||||||
border-radius: 20rpx;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: #FFFFFF;
|
background: #FFFFFF;
|
||||||
font-size: 28rpx;
|
border-radius: 20rpx;
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
||||||
|
|
||||||
.item {
|
.detail {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 18rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: #FFFFFF;
|
justify-content: space-around;
|
||||||
border-radius: 20rpx;
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
|
|
||||||
.detail {
|
|
||||||
flex: 1;
|
|
||||||
margin-left: 18rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.attention {
|
.attention {
|
||||||
width: 664rpx;
|
width: 664rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
background: #761C1F;
|
background: #761C1F;
|
||||||
height: 68rpx;
|
height: 68rpx;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
bottom: 150rpx;
|
bottom: 150rpx;
|
||||||
padding: 16rpx 40rpx;
|
padding: 16rpx 40rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 24rpx;
|
border-radius: 24rpx;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user