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

fix

Browse Source
This commit is contained in:
Aiden 2023-12-08 18:22:05 +08:00
parent f62148c7f5
commit a45790073b
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"> <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 class="header">
<div>门票名称</div> <div>门票名称</div>
<div>剩余数量</div> <div>剩余数量</div>
</div> </div>
<div class="container"> <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"> <div class="item">
<image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" /> <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> <tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
</div> </div>
</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 class="attention" v-if="isShow"> <div class="attention" v-if="isShow">
<div> <div>
@ -65,18 +97,12 @@
<tm-icon name="tmicon-times-circle" color="#fff" :fontSize="24" @click="handleTips"></tm-icon> <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"; 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,11 +118,7 @@ const handleTips = () => {
flex-direction: column; flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
.box {
width: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
.header { .header {
margin-top: 20rpx; margin-top: 20rpx;
@ -113,10 +135,9 @@ const handleTips = () => {
.container { .container {
overflow-y: auto; overflow-y: auto;
height: 100%; height: 1120rpx;
box-sizing: border-box; box-sizing: border-box;
margin-top: 20rpx; margin-top: 20rpx;
flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-bottom: 2rpx; padding-bottom: 2rpx;
@ -155,5 +176,4 @@ const handleTips = () => {
font-size: 28rpx; font-size: 28rpx;
} }
} }
}
</style> </style>