From a45790073b99aff75bff6dc856e4ad3250486ed1 Mon Sep 17 00:00:00 2001
From: xuminyui <576362016@qq.com>
Date: Fri, 8 Dec 2023 18:22:05 +0800
Subject: [PATCH] fix
---
src/pages/home/index.vue | 244 +++++++++++++++++++++------------------
1 file changed, 132 insertions(+), 112 deletions(-)
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index 57f568f7..4b8c3256 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -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>