UI更新

src/pages/point-book-detail.vue

@@ -1,9 +1,203 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from "vue";
+import Container from "@/components/Container.vue";
+import BowTarget from "@/components/BowTarget.vue";
+import ScreenHint2 from "@/components/ScreenHint2.vue";
+
+const selectedIndex = ref(0);
+const showTip = ref(false);
+const showTip2 = ref(false);
+
+const openTip = (index) => {
+  if (index === 1) showTip.value = true;
+  else if (index === 2) showTip2.value = true;
+};
+
+const closeTip = () => {
+  showTip.value = false;
+  showTip2.value = false;
+};
 </script>
 
 <template>
-  <Container> </Container>
+  <Container :bgType="2" bgColor="#F5F5F5" :whiteBackArrow="false" title="分析">
+    <view class="container">
+      <view class="tab-bar">
+        <view
+          v-for="(_, index) in [1, 2, 3, 4, 5]"
+          :key="index"
+          @click="selectedIndex = index"
+        >
+          <text
+            :style="{
+              color: selectedIndex === index ? '#FF8709' : '#333',
+              fontSize: selectedIndex === index ? '15px' : '13px',
+              letterSpacing: index !== 0 ? '2px' : '0',
+            }"
+            >{{ index === 0 ? "全部" : `第${index}组` }}</text
+          >
+          <image
+            src="../static/s-triangle.png"
+            mode="widthFix"
+            :style="{ bottom: selectedIndex !== index ? '0' : '-6px' }"
+          />
+        </view>
+      </view>
+      <view class="detail-data">
+        <view>
+          <view
+            :style="{ display: 'flex', alignItems: 'center' }"
+            @click="() => openTip(1)"
+          >
+            <text>落点稳定性</text>
+            <image
+              src="../static/s-question-mark.png"
+              mode="widthFix"
+              class="question-mark"
+            />
+          </view>
+          <text>98.99</text>
+        </view>
+        <view>
+          <view>黄心率</view>
+          <text>86.3%</text>
+        </view>
+        <view>
+          <view>10环数</view>
+          <text>65</text>
+        </view>
+        <view>
+          <view>平均环数</view>
+          <text>8.99</text>
+        </view>
+        <view>
+          <view>总环数</view>
+          <text>700/999</text>
+        </view>
+      </view>
+      <view class="title-bar">
+        <view />
+        <text>落点分布</text>
+        <button hover-class="none" @click="() => openTip(2)">
+          <image
+            src="../static/s-question-mark.png"
+            mode="widthFix"
+            class="question-mark"
+          />
+        </button>
+      </view>
+      <BowTarget />
+      <ScreenHint2 :show="showTip || showTip2" :onClose="closeTip">
+        <view class="tip-content">
+          <block v-if="showTip">
+            <text>落点稳定性说明</text>
+            <text
+              >通过计算每支箭与其他箭的平均距离衡一量射击的稳定性，数字越小则说明射击越稳定。该数据只能在用户标记落点的情况下生成。</text
+            >
+          </block>
+          <block v-if="showTip2">
+            <text>落点分布说明</text>
+            <text>展示用户某次练习中射击的点位</text>
+          </block>
+        </view>
+      </ScreenHint2>
+    </view>
+  </Container>
 </template>
 
-<style scoped></style>
+<style scoped>
+.container {
+  width: 100%;
+}
+.tab-bar {
+  display: flex;
+  width: clac(100% - 20px);
+  overflow-x: auto;
+  padding: 0 10px;
+}
+.tab-bar::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+}
+.tab-bar > view {
+  border-radius: 10px;
+  background-color: #fff;
+  width: 24vw;
+  height: 13vw;
+  line-height: 13vw;
+  text-align: center;
+  margin: 5px;
+  margin-top: 0;
+  font-size: 14px;
+  flex: 0 0 auto;
+  position: relative;
+}
+.tab-bar > view > text {
+  transition: all 0.2s ease;
+}
+.tab-bar > view > image {
+  position: absolute;
+  width: 14px;
+  height: 4px;
+  left: calc(50% - 7px);
+  transition: all 0.3s ease;
+}
+.detail-data {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  column-gap: 3vw;
+  margin: 10px 15px;
+}
+.detail-data > view {
+  border-radius: 10px;
+  background-color: #fff;
+  margin-bottom: 10px;
+  padding: 12px;
+}
+.detail-data > view > view {
+  font-size: 13px;
+  color: #999;
+  margin-bottom: 8px;
+}
+.question-mark {
+  width: 15px;
+  height: 15px;
+  margin-left: 3px;
+}
+.title-bar {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  color: #999;
+}
+.title-bar > view:first-child {
+  width: 5px;
+  height: 15px;
+  border-radius: 10px;
+  background-color: #fed847;
+  margin-right: 7px;
+  margin-left: 15px;
+}
+.title-bar > text {
+  margin-bottom: 2px;
+}
+.tip-content {
+  width: 100%;
+  padding: 25px;
+  display: flex;
+  flex-direction: column;
+}
+.tip-content > text {
+  width: 100%;
+}
+.tip-content > text:first-child {
+  text-align: center;
+}
+.tip-content > text:last-child {
+  font-size: 13px;
+  margin-top: 20px;
+  opacity: 0.8;
+}
+</style>