UI优化

src/components/AppBackground.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 const props = defineProps({
   type: {
     type: Number,
@@ -10,6 +10,11 @@ const props = defineProps({
     default: "#050b19",
   },
 });
+const capsuleHeight = ref(0);
+onMounted(() => {
+  const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
+  capsuleHeight.value = menuBtnInfo.top + 50 - 9;
+});
 </script>
 
 <template>
@@ -30,7 +35,7 @@ const props = defineProps({
       class="bg-image"
       v-if="type === 2"
       src="../static/app-bg3.png"
-      mode="widthFix"
+      :style="{ height: capsuleHeight + 'px' }"
     />
     <view class="bg-overlay" v-if="type === 0"></view>
   </view>

src/components/EditOption.vue

@@ -268,8 +268,9 @@ onMounted(async () => {
 }
 .container > view:first-child > button > image {
   transition: all 0.5s ease;
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
+  padding-right: 5px;
 }
 .bow-items {
   display: grid;

src/pages/point-book-create.vue

@@ -81,7 +81,7 @@ onMounted(async () => {
     :bgType="2"
     bgColor="#F5F5F5"
     :whiteBackArrow="false"
-    title="计分本"
+    title="计分与技术分析"
   >
     <view class="container">
       <view class="header">
@@ -163,6 +163,7 @@ onMounted(async () => {
   align-items: center;
   color: #ffffffc7;
   font-size: 14px;
+  margin-top: 10px;
 }
 .header > image {
   position: absolute;
@@ -182,6 +183,6 @@ onMounted(async () => {
   font-size: 27px;
   font-weight: 500;
   margin-right: 5px;
-  color: #fff;
+  color: #FFF4C9;
 }
 </style>

src/pages/point-book-detail.vue

@@ -153,6 +153,7 @@ onLoad(async (options) => {
   width: clac(100% - 20px);
   overflow-x: auto;
   padding: 0 10px;
+  margin-top: 10px;
 }
 .tab-bar::-webkit-scrollbar {
   width: 0;

src/pages/point-book-list.vue

@@ -141,6 +141,7 @@ const toDetailPage = (id) => {
   align-items: center;
   justify-content: space-between;
   padding: 0 15px;
+  margin-top: 10px;
 }
 .selectors > view {
   display: flex;
@@ -180,9 +181,9 @@ const toDetailPage = (id) => {
   width: 40px;
 }
 .point-records {
-  margin: 15px;
-  margin-bottom: 0;
-  height: calc(100% - 70px);
+  margin: 0 15px;
+  margin-top: 10px;
+  height: calc(100% - 80px);
 }
 .no-data {
   width: 100%;