xingyy/uni-ticket-system
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master'

Browse Source
This commit is contained in:
xingyy 2023-12-08 19:03:48 +08:00
commit 7a08be77a7
1 changed files with 132 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/pages/home/index.vue
View File

@ -2,12 +2,20 @@
<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;" />
@ -57,6 +65,30 @@
<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>
@ -65,18 +97,12 @@
<tm-icon name="tmicon-times-circle" color="#fff" :fontSize="24" @click="handleTips"></tm-icon>
</div>
</div>
</div>
</template>
<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
}
@ -92,11 +118,7 @@ const handleTips = () => {
flex-direction: column;
box-sizing: border-box;
.box {
width: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
.header {
margin-top: 20rpx;
@ -113,10 +135,9 @@ const handleTips = () => {
.container {
overflow-y: auto;
height: 100%;
height: 1120rpx;
box-sizing: border-box;
margin-top: 20rpx;
flex: 1;
display: flex;
flex-direction: column;
padding-bottom: 2rpx;
@ -155,5 +176,4 @@ const handleTips = () => {
font-size: 28rpx;
}
}
}
</style>