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>