feat:添加美景和农事更多页面

src/components/PdfDialog.vue

@@ -77,7 +77,7 @@ $body-height:calc(100% - $title-height);
       margin-right: 20px;
       width: 16px;
       height: 16px;
-      background-image: url("@/assets/img/close.png");
+      // background-image: url("@/assets/img/close.png");
       background-size: 100% 100%;
     }
   }

src/components/PicturePreview.vue

@@ -46,13 +46,11 @@
                 </div>
                 <div class="weather">
                   <div class="temperature">
-                    <img src="@/assets/img/sun_icon.png" alt="" />
                     <div class="num">
                       <div>26-32℃</div>
                     </div>
                   </div>
                   <div class="temperature">
-                    <img src="@/assets/img/rain_icon.png" alt="" />
                     <div class="num">
                       <div>60% 0.34ｍl</div>
                     </div>
@@ -90,13 +88,11 @@
             </div>
             <div class="weather">
               <div class="temperature">
-                <img src="@/assets/img/sun_icon.png" alt="" />
                 <div class="num">
                   <div>26-32℃</div>
                 </div>
               </div>
               <div class="temperature">
-                <img src="@/assets/img/rain_icon.png" alt="" />
                 <div class="num">
                   <div>60% 0.34ｍl</div>
                 </div>

src/router/mainRoutes.js

@@ -11,12 +11,25 @@ export default [
         path: "/warningHome",
         name: "warningHome",
         component: () => import("@/views/warningHome/index.vue"),
-        // component: () => import("@/views/authentic/index.vue"),
     },
     {
         path: "/home",
         name: "Home",
         component: () => import("@/views/home/index.vue"),
-        // component: () => import("@/views/authentic/index.vue"),
+    },
+    {
+        path: "/more_video",
+        name: "MoreVideo",
+        component: () => import("@/views/more/videoPage.vue"),
+    },
+    {
+        path: "/more_record",
+        name: "MoreRecord",
+        component: () => import("@/views/more/recordPage.vue"),
+    },
+    {
+        path: "/more_medal",
+        name: "MoreMedal",
+        component: () => import("@/views/more/medalPage.vue"),
     },
 ];

src/styles/common.scss

@@ -312,18 +312,6 @@ div{
     }
 }
 
-.custom_btn1{
-    width: 80px;
-    height: 36px;
-    line-height: 36px;
-    text-align: center;
-    background-image: url("@/assets/img/mini_btn_bg.png");
-    background-size: 100% 100%;
-    border-radius: 4px;
-    cursor:pointer;
-    color: #ffffff;
-}
-
 .custom_btn2{
     width: 80px;
     height: 36px;

src/views/Login.vue

@@ -202,7 +202,7 @@ const onSubmit = () => {
   .logo{
     width: calc(167px * 0.5);
     height: calc(245px * 0.5);
-    background: url(@/assets/img/logo-verticle.png) no-repeat;
+    background: url('@/assets/logo-verticle.png') no-repeat;
     background-size:100% 100%;
     float: left;
     z-index: 1000;

src/views/home/album_compoents/albumCarouselItem.vue

@@ -13,7 +13,6 @@
     <div class="blur-bg" v-if="lock && currentIndex !== 0">
       <div class="blur-content">
         <div class="blur-img">
-          <img src="@/assets/img/gallery/camera-icon.png" />
         </div>
       </div>
     </div>

src/views/home/components/gardenIntroduce.vue

@@ -86,7 +86,7 @@
         <div class="sub-box">
             <sub-title name="美景视频">
                 <template v-slot:title-right>
-                    <div class="title-right">
+                    <div class="title-right" @click="handleMore('video')">
                         更多
                         <el-icon class="sub-icon"><ArrowRight /></el-icon>
                     </div>
@@ -100,7 +100,7 @@
         <div class="sub-box">
             <sub-title name="农事记录">
                 <template v-slot:title-right>
-                    <div class="title-right">
+                    <div class="title-right" @click="handleMore('record')">
                         更多
                         <el-icon class="sub-icon"><ArrowRight /></el-icon>
                     </div>
@@ -129,6 +129,8 @@ import {onMounted, ref} from 'vue'
 import subTitle from "@/components/subTitle.vue"
 import { Popup } from 'vant';
 import eventBus from "@/api/eventBus";
+import { useRouter } from "vue-router";
+const router = useRouter();
 
 // 简介
 const isEdit = ref(false)
@@ -137,6 +139,11 @@ function editDesc() {
     isEdit.value = true
 }
 
+//更多
+const handleMore = (url) =>{
+    router.push(`/more_${url}`)
+}
+
 function saveDesc() {
     // 保存
     isEdit.value = false
@@ -248,6 +255,7 @@ function showVideo() {
         padding: 2px 8px;
         display: flex;
         align-items: center;
+        cursor: pointer;
         .sub-edit {
             width: 12px;
             padding-right: 4px;

src/views/more/medalPage.vue

@@ -0,0 +1,125 @@
+<template>
+    <div class="base-container">
+        <fnHeader showDate hideSwitch></fnHeader>
+        <div class="content">
+            <div class="tool">
+                <div class="button" @click="goBack">
+                    <img src="@/assets/images/common/back-icon.png" alt="" />
+                    返回
+                </div>
+            </div>
+            <div class="video-list">
+                <div class="video-item" v-for="(item,index) in 20" :key="index" @click="handleVideo">
+                    <div class="btn" :class="{active:index===0}">{{index===0?'已置顶':'设为置顶'}}</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>
+import fnHeader from "@/components/fnHeader.vue";
+import {ref} from 'vue'
+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
+    }
+])
+
+const showPopup = ref(false)
+const handleVideo = () =>{
+    showPopup.value = true
+}
+
+const goBack = () =>{
+    router.go('-1')
+}
+</script>
+
+<style lang="scss" scoped>
+.base-container {
+    width: 100%;
+    height: 100vh;
+    color: #fff;
+    box-sizing: border-box;
+    background: #000;
+    .content {
+        width: 100%;
+        height: 100%;
+        height: calc(100% - 74px);
+        padding: 16px 20px 0 20px;
+        box-sizing: border-box;
+        .tool{
+            padding-bottom: 24px;
+            border-bottom: 1px solid #444444;
+            margin-bottom: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .button {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border: 1px solid rgba(255, 255, 255, 0.78);
+                border-radius: 4px;
+                padding: 9px;
+                width: 104px;
+                cursor: pointer;
+                img {
+                    width: 14px;
+                    margin-right: 5px;
+                }
+            }
+        }
+        .video-list{
+            width: 100%;
+            height: calc(100% - 65px - 24px);
+            overflow-y: auto;
+            display: flex;
+            flex-wrap: wrap;
+            .video-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) {
+                    margin-right: 0;
+                }
+                .btn{
+                    position: absolute;
+                    right: 8px;
+                    top: 8px;
+                    background: rgba(0, 0, 0, 0.6);
+                    border-radius: 4px;
+                    padding: 4px 8px;
+                    color: #FFD489;
+                    &.active{
+                        background:#FFD489;
+                        color: #000;
+                    }
+                }
+            }
+        }
+    }
+}
+.video-popup {
+    background: transparent;
+}
+</style>

src/views/more/recordPage.vue

@@ -0,0 +1,166 @@
+<template>
+    <div class="base-container">
+        <fnHeader showDate hideSwitch></fnHeader>
+        <div class="content">
+            <div class="tool">
+                <div class="button" @click="goBack">
+                    <img src="@/assets/images/common/back-icon.png" alt="" />
+                    返回
+                </div>
+                <div class="tool-right">
+                    <el-date-picker
+                        class="month-picker"
+                        v-model="month"
+                        type="month"
+                        size="large"
+                        format="YYYY/MM"
+                        value-format="YYYY-MM"
+                        :disabled-date="disabledDate"
+                    />
+                    <div class="btn">上传照片</div>
+                </div>
+            </div>
+            <div class="record-list">
+                <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>
+            </div>
+        </div>
+    </div>
+    <Popup v-model:show="showPopup" class="record-popup">
+        <img src="@/assets/images/more/image.png" alt="">
+    </Popup>
+</template>
+
+<script setup>
+import fnHeader from "@/components/fnHeader.vue";
+import {ref} from 'vue'
+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
+    }
+])
+
+const showPopup = ref(false)
+const handleVideo = () =>{
+    showPopup.value = true
+}
+
+const goBack = () =>{
+    router.go('-1')
+}
+</script>
+
+<style lang="scss" scoped>
+.base-container {
+    width: 100%;
+    height: 100vh;
+    color: #fff;
+    box-sizing: border-box;
+    background: #000;
+    .content {
+        width: 100%;
+        height: 100%;
+        height: calc(100% - 74px);
+        padding: 16px 20px 0 20px;
+        box-sizing: border-box;
+        .tool{
+            padding-bottom: 24px;
+            border-bottom: 1px solid #444444;
+            margin-bottom: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .button {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border: 1px solid rgba(255, 255, 255, 0.78);
+                border-radius: 4px;
+                padding: 9px;
+                width: 104px;
+                cursor: pointer;
+                img {
+                    width: 14px;
+                    margin-right: 5px;
+                }
+            }
+            .tool-right{
+                display: flex;
+                align-items: center;
+                ::v-deep{
+                    .el-input__wrapper{
+                        background: transparent;
+                        box-shadow: none;
+                        border: 1px solid rgba(255, 255, 255, 0.78);
+                    }
+                    .el-input__prefix,.el-input__inner{
+                        color: #FFD489;
+                    }
+                }
+                .btn{
+                    margin-left: 16px;
+                    background: #FFD489;
+                    color: #000;
+                    border-radius: 4px;
+                    padding: 10px 40px;
+                    cursor: pointer;
+                }
+            }
+        }
+        .record-list{
+            width: 100%;
+            height: calc(100% - 65px - 24px);
+            overflow-y: auto;
+            display: flex;
+            flex-wrap: wrap;
+            .record-item{
+                width: 24.4%;
+                height: 290px;
+                border-radius: 8px;
+                background: url('@/assets/images/more/image.png') no-repeat center center /100% 100%;
+                position: relative;
+                margin: 0 12px 12px 0;
+                cursor: pointer;
+                &.record-item:nth-child(4n) {
+                    margin-right: 0;
+                }
+                .date{
+                    background: rgba(0, 0, 0, 0.6);
+                    border-radius: 8px 0 8px 0;
+                    padding: 4px 8px;
+                    position: absolute;
+                }
+                .btn{
+                    position: absolute;
+                    right: 8px;
+                    top: 8px;
+                    background: rgba(0, 0, 0, 0.6);
+                    border-radius: 4px;
+                    padding: 4px 8px;
+                    color: #FFD489;
+                    &.active{
+                        background:#FFD489;
+                        color: #000;
+                    }
+                }
+            }
+        }
+    }
+}
+.record-popup {
+    background: transparent;
+}
+</style>

src/views/more/videoPage.vue

@@ -0,0 +1,179 @@
+<template>
+    <div class="base-container">
+        <fnHeader showDate hideSwitch></fnHeader>
+        <div class="content">
+            <div class="tool">
+                <div class="button" @click="goBack">
+                    <img src="@/assets/images/common/back-icon.png" alt="" />
+                    返回
+                </div>
+                <div class="tool-right">
+                    <el-date-picker
+                        class="month-picker"
+                        v-model="month"
+                        type="month"
+                        size="large"
+                        format="YYYY/MM"
+                        value-format="YYYY-MM"
+                        :disabled-date="disabledDate"
+                    />
+                    <el-radio-group v-model="radio" size="large">
+                        <el-radio-button label="远景" value="New York" />
+                        <el-radio-button label="近景" value="Washington" />
+                    </el-radio-group>
+                </div>
+            </div>
+            <div class="video-list">
+                <div class="video-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>
+                    <img class="play" src="@/assets/images/more/play.png" alt="">
+                </div>
+            </div>
+        </div>
+    </div>
+    <Popup v-model:show="showPopup" class="video-popup">
+        <video
+            class="video-wrap"
+            controls
+            width="1280"
+            height="800"
+        >
+            <source src="@/assets/images/foster-home/work.mp4"/>
+        </video>
+    </Popup>
+</template>
+
+<script setup>
+import fnHeader from "@/components/fnHeader.vue";
+import {ref} from 'vue'
+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
+    }
+])
+
+const showPopup = ref(false)
+const handleVideo = () =>{
+    showPopup.value = true
+}
+
+const goBack = () =>{
+    router.go('-1')
+}
+</script>
+
+<style lang="scss" scoped>
+.base-container {
+    width: 100%;
+    height: 100vh;
+    color: #fff;
+    box-sizing: border-box;
+    background: #000;
+    .content {
+        width: 100%;
+        height: 100%;
+        height: calc(100% - 74px);
+        padding: 16px 20px 0 20px;
+        box-sizing: border-box;
+        .tool{
+            padding-bottom: 24px;
+            border-bottom: 1px solid #444444;
+            margin-bottom: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .button {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border: 1px solid rgba(255, 255, 255, 0.78);
+                border-radius: 4px;
+                padding: 9px;
+                width: 104px;
+                cursor: pointer;
+                img {
+                    width: 14px;
+                    margin-right: 5px;
+                }
+            }
+            .tool-right{
+                display: flex;
+                align-items: center;
+                ::v-deep{
+                    .month-picker{
+                        margin-right: 16px;
+                    }
+                    .el-input__wrapper{
+                        background: transparent;
+                        box-shadow: none;
+                        border: 1px solid rgba(255, 255, 255, 0.78);
+                    }
+                    .el-input__prefix,.el-input__inner{
+                        color: #FFD489;
+                    }
+                }
+            }
+        }
+        .video-list{
+            width: 100%;
+            height: calc(100% - 65px - 24px);
+            overflow-y: auto;
+            display: flex;
+            flex-wrap: wrap;
+            .video-item{
+                width: 24.4%;
+                height: 290px;
+                border-radius: 8px;
+                background: url('@/assets/images/more/video.png') no-repeat center center /100% 100%;
+                position: relative;
+                margin: 0 12px 12px 0;
+                cursor: pointer;
+                &.video-item:nth-child(4n) {
+                    margin-right: 0;
+                }
+                .date{
+                    background: rgba(0, 0, 0, 0.6);
+                    border-radius: 8px 0 8px 0;
+                    padding: 4px 8px;
+                    position: absolute;
+                }
+                .btn{
+                    position: absolute;
+                    right: 8px;
+                    top: 8px;
+                    background: rgba(0, 0, 0, 0.6);
+                    border-radius: 4px;
+                    padding: 4px 8px;
+                    color: #FFD489;
+                    &.active{
+                        background:#FFD489;
+                        color: #000;
+                    }
+                }
+                .play{
+                    width: 64px;
+                    height: 64px;
+                    position: absolute;
+                    top: calc(50% - 32px);
+                    left: calc(50% - 32px);
+                }
+            }
+        }
+    }
+}
+.video-popup {
+    background: transparent;
+}
+</style>