feat：添加勋章页面

src/views/home/components/gardenIntroduce.vue

@@ -57,7 +57,7 @@
                 <img class="honour-l" src="@/assets/images/foster-home/honour-bg.png" alt="" />
                 勋章墙
                 <img class="honour-r" src="@/assets/images/foster-home/honour-bg.png" alt="" />
-                <div class="honour-more title-right">
+                <div class="honour-more title-right" @click="handleMore('medal')">
                     更多
                     <el-icon class="sub-icon"><ArrowRight /></el-icon>
                 </div>

src/views/more/medalPage.vue

@@ -8,16 +8,15 @@
                     返回
                 </div>
             </div>
-            <div class="video-list">
-                <div class="video-item" v-for="(item,index) in 20" :key="index" @click="handleVideo">
+            <div class="medal-list">
+                <div class="medal-item" v-for="(item,index) in 20" :key="index">
                     <div class="btn" :class="{active:index===0}">{{index===0?'已置顶':'设为置顶'}}</div>
+                    <img class="medal" src="@/assets/images/more/medal.png" alt="" />
+                    <div class="icon-name">水源洁净</div>
                 </div>
             </div>
         </div>
     </div>
-    <Popup v-model:show="showPopup" class="video-popup">
-        <img src="@/assets/images/more/image.png" alt="">
-    </Popup>
 </template>
 
 <script setup>
@@ -27,13 +26,6 @@ import { Popup } from 'vant';
 import { useRouter } from "vue-router";
 const router = useRouter();
 
-const month = ref('2025-04')
-const disabledDate = (time) => {
-  return time.getTime() > Date.now()
-}
-
-const radio = ref('New York')
-
 const list = ref([
     {
         isDefalut:1
@@ -41,9 +33,6 @@ const list = ref([
 ])
 
 const showPopup = ref(false)
-const handleVideo = () =>{
-    showPopup.value = true
-}
 
 const goBack = () =>{
     router.go('-1')
@@ -85,25 +74,43 @@ const goBack = () =>{
                 }
             }
         }
-        .video-list{
+        .medal-list{
             width: 100%;
             height: calc(100% - 65px - 24px);
             overflow-y: auto;
             display: flex;
+            align-content: flex-start;
             flex-wrap: wrap;
-            .video-item{
+            .medal-item{
                 width: 13.7%;
                 height: 220px;
                 border-radius: 8px;
                 position: relative;
                 margin: 0 12px 12px 0;
                 background: #282828;
-                cursor: pointer;
-                &.video-item:nth-child(7n) {
+                display: flex;
+                align-items: center;
+                flex-direction: column;
+                justify-content: center;
+                &.medal-item:nth-child(7n) {
                     margin-right: 0;
                 }
+                .icon-name{
+                    margin-top: 18px;
+                    position: relative;
+                    &::before{
+                        content: '';
+                        position: absolute;
+                        top: -16px;
+                        width: 60px;
+                        height: 5px;
+                        border-radius: 50%;
+                        background: rgba(204, 204, 204, 0.1);
+                    }
+                }
                 .btn{
                     position: absolute;
+                    cursor: pointer;
                     right: 8px;
                     top: 8px;
                     background: rgba(0, 0, 0, 0.6);
@@ -119,7 +126,7 @@ const goBack = () =>{
         }
     }
 }
-.video-popup {
+.medal-popup {
     background: transparent;
 }
 </style>

src/views/more/recordPage.vue

@@ -24,6 +24,10 @@
                 <div class="record-item" v-for="(item,index) in 20" :key="index" @click="handleVideo">
                     <div class="date">2025/04/14</div>
                     <div class="btn" :class="{active:index===0}">{{index===0?'已置顶':'设为置顶'}}</div>
+                    <div class="record-desc">
+                        <div class="name">梢期杀虫</div>
+                        <span>农事目的: 消灭害虫，保障产量，提升品质，确保果农收益</span>
+                    </div>
                 </div>
             </div>
         </div>
@@ -126,6 +130,7 @@ const goBack = () =>{
             overflow-y: auto;
             display: flex;
             flex-wrap: wrap;
+            align-content: flex-start;
             .record-item{
                 width: 24.4%;
                 height: 290px;
@@ -156,6 +161,21 @@ const goBack = () =>{
                         color: #000;
                     }
                 }
+                .record-desc{
+                    position: absolute;
+                    bottom: 0;
+                    width: 100%;
+                    box-sizing: border-box;
+                    padding: 8px;
+                    background: url('@/assets/images/more/desc-bg.png') no-repeat center center /100% 100%;
+                    .name{
+                        color: #FFD489;
+                    }
+                    span{
+                        color: #CCCCCC;
+                        font-size: 12px;
+                    }
+                }
             }
         }
     }

src/views/more/videoPage.vue

@@ -132,6 +132,7 @@ const goBack = () =>{
             overflow-y: auto;
             display: flex;
             flex-wrap: wrap;
+            align-content: flex-start;
             .video-item{
                 width: 24.4%;
                 height: 290px;