完成ios首页改造

src/pages/point-book-list.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { ref, onMounted } from "vue";
-import Container from "@/components/Container.vue";
 import SModal from "@/components/SModal.vue";
 import EditOption from "@/components/EditOption.vue";
 import PointRecord from "@/components/PointRecord.vue";
@@ -48,79 +47,72 @@ const onSelectOption = (itemIndex, value) => {
 </script>
 
 <template>
-  <Container
-    :bgType="2"
-    bgColor="#F5F5F5"
-    :whiteBackArrow="false"
-    title="计分记录"
-  >
-    <view class="container">
-      <view class="selectors">
-        <view @click="() => openSelector(0)">
-          <text :style="{ color: bowType.name ? '#000' : '#999' }">{{
-            bowType.name || "请选择"
-          }}</text>
-          <image src="../static/arrow-grey.png" mode="widthFix" />
-        </view>
-        <view @click="() => openSelector(1)">
-          <text :style="{ color: distance ? '#000' : '#999' }">{{
-            distance ? distance + " 米" : "请选择"
-          }}</text>
-          <image src="../static/arrow-grey.png" mode="widthFix" />
-        </view>
-        <view @click="() => openSelector(2)">
-          <text :style="{ color: bowtargetType.name ? '#000' : '#999' }">{{
-            bowtargetType.name || "请选择"
-          }}</text>
-          <image src="../static/arrow-grey.png" mode="widthFix" />
-        </view>
+  <view class="container">
+    <view class="selectors">
+      <view @click="() => openSelector(0)">
+        <text :style="{ color: bowType.name ? '#000' : '#999' }">{{
+          bowType.name || "Bow Type"
+        }}</text>
+        <image src="../static/arrow-grey.png" mode="widthFix" />
       </view>
-      <view class="point-records">
-        <ScrollList :onLoading="onListLoading">
-          <view v-for="(item, index) in list" :key="index">
-            <PointRecord :data="item" />
-          </view>
-          <view class="no-data" v-if="list.length === 0">暂无数据</view>
-        </ScrollList>
+      <view @click="() => openSelector(1)">
+        <text :style="{ color: distance ? '#000' : '#999' }">{{
+          distance ? distance + " m" : "Distance"
+        }}</text>
+        <image src="../static/arrow-grey.png" mode="widthFix" />
+      </view>
+      <view @click="() => openSelector(2)">
+        <text :style="{ color: bowtargetType.name ? '#000' : '#999' }">{{
+          bowtargetType.name || "Target Type"
+        }}</text>
+        <image src="../static/arrow-grey.png" mode="widthFix" />
       </view>
-      <SModal
-        :show="showModal"
-        :noBg="true"
-        height="auto"
-        :onClose="() => (showModal = false)"
-      >
-        <view class="selector">
-          <button hover-class="none" @click="() => (showModal = false)">
-            <image src="../static/close-grey.png" mode="widthFix" />
-          </button>
-          <EditOption
-            v-show="selectorIndex === 0"
-            :itemIndex="0"
-            :expand="true"
-            :noArrow="true"
-            :onSelect="onSelectOption"
-            :value="bowType.name"
-          />
-          <EditOption
-            v-show="selectorIndex === 1"
-            :itemIndex="1"
-            :expand="true"
-            :noArrow="true"
-            :onSelect="onSelectOption"
-            :value="distance + ''"
-          />
-          <EditOption
-            v-show="selectorIndex === 2"
-            :itemIndex="2"
-            :expand="true"
-            :noArrow="true"
-            :onSelect="onSelectOption"
-            :value="bowtargetType.name"
-          />
-        </view>
-      </SModal>
     </view>
-  </Container>
+    <view class="point-records">
+      <ScrollList :onLoading="onListLoading">
+        <view v-for="(item, index) in list" :key="index">
+          <view v-if="index > 0" :style="{ height: '25rpx' }" />
+          <PointRecord :data="item" />
+        </view>
+      </ScrollList>
+    </view>
+    <SModal
+      :show="showModal"
+      :noBg="true"
+      height="auto"
+      :onClose="() => (showModal = false)"
+    >
+      <view class="selector">
+        <button hover-class="none" @click="() => (showModal = false)">
+          <image src="../static/close-grey.png" mode="widthFix" />
+        </button>
+        <EditOption
+          v-show="selectorIndex === 0"
+          :itemIndex="0"
+          :expand="true"
+          :noArrow="true"
+          :onSelect="onSelectOption"
+          :value="bowType.name"
+        />
+        <EditOption
+          v-show="selectorIndex === 1"
+          :itemIndex="1"
+          :expand="true"
+          :noArrow="true"
+          :onSelect="onSelectOption"
+          :value="distance + ''"
+        />
+        <EditOption
+          v-show="selectorIndex === 2"
+          :itemIndex="2"
+          :expand="true"
+          :noArrow="true"
+          :onSelect="onSelectOption"
+          :value="bowtargetType.name"
+        />
+      </view>
+    </SModal>
+  </view>
 </template>
 
 <style scoped>
@@ -132,15 +124,13 @@ const onSelectOption = (itemIndex, value) => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 15px;
-  margin-top: 10px;
 }
 .selectors > view {
+  height: 110rpx;
   display: flex;
   align-items: center;
   justify-content: space-between;
   background-color: #fff;
-  height: 55px;
   border-radius: 12px;
   color: #333;
   font-size: 13px;
@@ -150,7 +140,7 @@ const onSelectOption = (itemIndex, value) => {
   width: 34vw;
 }
 .selectors > view > text {
-  width: calc(100% - 11vw);
+  width: 100%;
   text-align: center;
   margin-left: 3vw;
 }
@@ -173,17 +163,8 @@ const onSelectOption = (itemIndex, value) => {
   width: 40px;
 }
 .point-records {
-  margin: 0 15px;
   margin-top: 10px;
-  height: calc(100% - 80px);
-}
-.no-data {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: #999999;
-  font-size: 14px;
+  height: calc(100% - 130rpx);
+  overflow: auto;
 }
 </style>