fix
This commit is contained in:
parent
f62148c7f5
commit
a45790073b
@ -2,68 +2,99 @@
|
||||
<div class="main">
|
||||
<title class="title-block" title="首都博物馆东馆" :isBack="false">
|
||||
</title>
|
||||
<div :style="{ height }" class="box">
|
||||
<div class="header">
|
||||
<div>门票名称</div>
|
||||
<div>剩余数量</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
|
||||
<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 class="header">
|
||||
<div>门票名称</div>
|
||||
<div>剩余数量</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<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="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>
|
||||
<tm-icon name="tmicon-times-circle" color="#fff" :fontSize="24" @click="handleTips"></tm-icon>
|
||||
</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>
|
||||
</template>
|
||||
@ -71,12 +102,7 @@
|
||||
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
|
||||
}
|
||||
@ -92,68 +118,62 @@ const handleTips = () => {
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
|
||||
.box {
|
||||
|
||||
|
||||
.header {
|
||||
margin-top: 20rpx;
|
||||
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;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 2rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.header {
|
||||
margin-top: 20rpx;
|
||||
width: 100%;
|
||||
background: #AB2F23;
|
||||
height: 70rpx;
|
||||
border-radius: 20rpx;
|
||||
.item {
|
||||
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;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.item {
|
||||
.detail {
|
||||
flex: 1;
|
||||
margin-left: 18rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.detail {
|
||||
flex: 1;
|
||||
margin-left: 18rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
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: 150rpx;
|
||||
padding: 16rpx 40rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 24rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.attention {
|
||||
width: 664rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
background: #761C1F;
|
||||
height: 68rpx;
|
||||
color: #FFFFFF;
|
||||
bottom: 150rpx;
|
||||
padding: 16rpx 40rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 24rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user