Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
431122b5 1 parent 7489c47a

style(IndexCheckInPage): 优化页面样式布局和代码结构 

- 为目标进度区域添加白色背景提升视觉层次
- 将上传附件区域的样式提取为单独的CSS类
- 使用VueUse的useTitle设置页面标题
- 保持原有功能不变的情况下改进代码可维护性
Inline Side-by-side
Showing 1 changed file with 48 additions and 30 deletions
1 <!-- 1 <!--
2 * @Date: 2025-05-29 15:34:17 2 * @Date: 2025-05-29 15:34:17
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-06-03 13:43:53 4 + * @LastEditTime: 2025-06-03 14:36:54
5 * @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue 5 * @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -15,43 +15,45 @@ ...@@ -15,43 +15,45 @@
15 15
16 <div class="text-wrapper"> 16 <div class="text-wrapper">
17 <div class="text-header">目标进度</div> 17 <div class="text-header">目标进度</div>
18 - <div class="grade-percentage-main"> 18 + <div style="background-color: #FFF; margin-top: 1rem;">
19 - <van-row justify="space-between" style="margin: 0.5rem 0; font-size: 0.9rem;"> 19 + <div class="grade-percentage-main">
20 - <van-col span="12"> 20 + <van-row justify="space-between" style="margin: 0.5rem 0; font-size: 0.9rem;">
21 - <span>年级目标</span> 21 + <van-col span="12">
22 - </van-col> 22 + <span>年级目标</span>
23 - <van-col span="12" style="text-align: right;"> 23 + </van-col>
24 - <span style="font-weight: bold;">{{ progress1 }}%</span> 24 + <van-col span="12" style="text-align: right;">
25 - </van-col> 25 + <span style="font-weight: bold;">{{ progress1 }}%</span>
26 - </van-row> 26 + </van-col>
27 - <van-progress :percentage="progress1" color="#4caf50" :show-pivot="false" /> 27 + </van-row>
28 - </div> 28 + <van-progress :percentage="progress1" color="#4caf50" :show-pivot="false" />
29 - <div class="class-percentage-main"> 29 + </div>
30 - <van-row justify="space-between" style="margin: 0.5rem 0; font-size: 0.9rem;"> 30 + <div class="class-percentage-main">
31 - <van-col span="12"> 31 + <van-row justify="space-between" style="margin: 0.5rem 0; font-size: 0.9rem;">
32 - <span>班级目标</span> 32 + <van-col span="12">
33 - </van-col> 33 + <span>班级目标</span>
34 - <van-col span="12" style="text-align: right;"> 34 + </van-col>
35 - <span style="font-weight: bold;">{{ progress2 }}%</span> 35 + <van-col span="12" style="text-align: right;">
36 - </van-col> 36 + <span style="font-weight: bold;">{{ progress2 }}%</span>
37 - </van-row> 37 + </van-col>
38 - <van-progress :percentage="progress2" color="#4caf50" :show-pivot="false" /> 38 + </van-row>
39 - </div> 39 + <van-progress :percentage="progress2" color="#4caf50" :show-pivot="false" />
40 - <div style="padding: 0.75rem 1rem;"> 40 + </div>
41 - <van-image round width="2.8rem" height="2.8rem" src="https://cdn.ipadbiz.cn/space/816560/大国少年_FhnF8lsFMPnTDNTBlM6hYa-UFBlW.jpg" 41 + <div style="padding: 0.75rem 1rem;">
42 - v-for="(item, index) in teamAvatars" :key="index" 42 + <van-image round width="2.8rem" height="2.8rem" src="https://cdn.ipadbiz.cn/space/816560/大国少年_FhnF8lsFMPnTDNTBlM6hYa-UFBlW.jpg"
43 - :style="{ marginLeft: index > 0 ? '-0.5rem' : '', border: '2px solid #FFF' }" /> 43 + v-for="(item, index) in teamAvatars" :key="index"
44 + :style="{ marginLeft: index > 0 ? '-0.5rem' : '', border: '2px solid #FFF' }" />
45 + </div>
44 </div> 46 </div>
45 </div> 47 </div>
46 48
47 <div class="text-wrapper"> 49 <div class="text-wrapper">
48 <div class="text-header">上传附件</div> 50 <div class="text-header">上传附件</div>
49 - <div style="display: flex; margin: 1rem 0; gap: 1rem;"> 51 + <div class="upload-wrapper">
50 - <div @click="goToCheckinImagePage" style="text-align: center; border: 1px solid #a2d8a3; border-radius: 5px; padding: 1rem 0; flex: 1;"> 52 + <div @click="goToCheckinImagePage" class="upload-boxer">
51 <div><van-icon name="photo" size="2.5rem" /></div> 53 <div><van-icon name="photo" size="2.5rem" /></div>
52 <div style="font-size: 0.85rem;">图文上传</div> 54 <div style="font-size: 0.85rem;">图文上传</div>
53 </div> 55 </div>
54 - <div @click="goToCheckinFilePage" style="text-align: center; border: 1px solid #a2d8a3; border-radius: 5px; padding: 1rem 0; flex: 1;"> 56 + <div @click="goToCheckinFilePage" class="upload-boxer">
55 <div><van-icon name="video" size="2.5rem" /></div> 57 <div><van-icon name="video" size="2.5rem" /></div>
56 <div style="font-size: 0.85rem;">视频/语音</div> 58 <div style="font-size: 0.85rem;">视频/语音</div>
57 </div> 59 </div>
...@@ -144,9 +146,11 @@ import AppLayout from "@/components/layout/AppLayout.vue"; ...@@ -144,9 +146,11 @@ import AppLayout from "@/components/layout/AppLayout.vue";
144 import FrostedGlass from "@/components/ui/FrostedGlass.vue"; 146 import FrostedGlass from "@/components/ui/FrostedGlass.vue";
145 import VideoPlayer from "@/components/ui/VideoPlayer.vue"; 147 import VideoPlayer from "@/components/ui/VideoPlayer.vue";
146 import AudioPlayer from "@/components/ui/AudioPlayer.vue"; 148 import AudioPlayer from "@/components/ui/AudioPlayer.vue";
149 +import { useTitle } from '@vueuse/core';
147 150
148 const route = useRoute() 151 const route = useRoute()
149 const router = useRouter() 152 const router = useRouter()
153 +useTitle(route.meta.title);
150 154
151 // 存储所有视频播放器的引用 155 // 存储所有视频播放器的引用
152 const videoPlayers = ref([]); 156 const videoPlayers = ref([]);
...@@ -520,6 +524,20 @@ const handLike = (post) => { ...@@ -520,6 +524,20 @@ const handLike = (post) => {
520 .class-percentage-main { 524 .class-percentage-main {
521 padding: 0.75rem 1rem; 525 padding: 0.75rem 1rem;
522 } 526 }
527 +
528 + .upload-wrapper {
529 + display: flex;
530 + margin: 1rem 0;
531 + gap: 1rem;
532 + .upload-boxer {
533 + text-align: center;
534 + border: 1px solid #a2d8a3;
535 + border-radius: 5px;
536 + padding: 1rem 0;
537 + flex: 1;
538 + background-color: #fff;
539 + }
540 + }
523 } 541 }
524 542
525 .post-card { 543 .post-card {
......