fix: 首页

src/views/old_mini/home/components/knowledgeCard.vue

@@ -2,18 +2,49 @@
     <div class="knowledge-card">
         <div class="knowledge-header">
             <div class="knowledge-title">
+                <div class="title-item" :class="{ active: activeKnowledgeId === 5 }" @click="handleKnowledgeClick(5)">
+                    焦点话题
+                </div>
                 <div class="title-item" :class="{ active: activeKnowledgeId === 6 }" @click="handleKnowledgeClick(6)">
-                    种植知识库
+                    种植精华
                 </div>
                 <div class="title-item" :class="{ active: activeKnowledgeId === 7 }" @click="handleKnowledgeClick(7)">
-                    实战知识库
+                    实战操作
                 </div>
             </div>
             <div class="more-text" @click="handleMoreClick">
                 更多<el-icon class="more-icon"><ArrowRight /></el-icon>
             </div>
         </div>
-        <div class="knowledge-content" v-if="activeKnowledgeId === 7">
+        <div class="knowledge-content focus-content" v-if="activeKnowledgeId === 5">
+            <div
+                class="focus-item"
+                @click="handleBannerClick(item.id)"
+                v-for="(item, index) in knowledgeList"
+                :key="index"
+            >
+                <img class="thumb" :src="item.media?.[0]" alt="" />
+                <div class="focus-content">
+                    <div class="title van-ellipsis">{{ item.title }}</div>
+                    <div class="focus-expert">
+                        <div class="expert-name">
+                            <el-avatar :size="22" :src="item.expertIcon" />
+                            {{ item.expertName || '专家' }}
+                        </div>
+                        <div class="date">{{ formatDate(item.createTime) }}</div>
+                    </div>
+                    <div class="focus-answer">
+                        <div class="answer-icon">
+                            答
+                        </div>
+                        <!-- {{ item.answer }} -->
+                        保证金通常是指在金融交易中，为了确保交易双方履行合约义务而支付的一定金额。保证金的组成可能因不同的交易类型和市场而有所不同
+                    </div>
+                </div>
+            </div>
+            <div class="no-data" v-if="knowledgeList.length === 0">暂无数据</div>
+        </div>
+        <div class="knowledge-content" v-else-if="activeKnowledgeId === 7">
             <div
                 class="knowledge-item"
                 @click="handleBannerClick(item.id)"
@@ -53,7 +84,7 @@ import { useStore } from "vuex";
 
 const router = useRouter();
 const store = useStore();
-const activeKnowledgeId = ref(6);
+const activeKnowledgeId = ref(5);
 
 // 按 topicId 缓存知识列表，避免每次切换都请求接口
 const knowledgeCache = ref({});
@@ -85,7 +116,7 @@ onMounted(() => {
     getKnowledgeList();
 });
 watch(store.state.home.gardenId, (newGardenId) => {
-    if(newGardenId) {
+    if (newGardenId) {
         getKnowledgeList();
     }
 });
@@ -99,11 +130,11 @@ const formatDate = (dateString) => {
 const getKnowledgeList = async () => {
     try {
         let data = [];
-        
+
         if (activeKnowledgeId.value === 6) {
             // 种植知识库：使用新接口
-            const { data: result } = await VE_API.user.listWithAnswer({ 
-                farmId: store.state.home.gardenId 
+            const { data: result } = await VE_API.user.listWithAnswer({
+                farmId: store.state.home.gardenId,
             });
             data = result || [];
         } else {
@@ -197,6 +228,64 @@ const getKnowledgeList = async () => {
             font-size: 14px;
             color: #666666;
         }
+
+        &.focus-content {
+            padding: 8px 10px;
+        }
+        .focus-item {
+            padding-bottom: 16px;
+            .thumb {
+                width: 100%;
+                height: 123px;
+                border-radius: 5px;
+                object-fit: cover;
+            }
+            .focus-content {
+                .title {
+                    font-weight: 500;
+                    font-size: 16px;
+                    line-height: 22px;
+                    color: #1d2129;
+                    padding: 8px 0;
+                }
+                .focus-expert {
+                    padding-bottom: 8px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    font-size: 12px;
+                    color: #666666;
+                    .expert-name {
+                        display: flex;
+                        align-items: center;
+                        gap: 6px;
+                    }
+                }
+                .focus-answer {
+                    padding: 5px;
+                    background: rgba(33, 153, 248, 0.05);
+                    border-radius: 5px;
+                    font-size: 13px;
+                    line-height: 22px;
+                    color: #86909C;
+                    text-align: justify;
+                    display: flex;
+                    gap: 8px;
+                    .answer-icon {
+                        margin-top: 2px;
+                        flex: none;
+                        width: 18px;
+                        height: 18px;
+                        background: #2199f8;
+                        border-radius: 2px;
+                        font-size: 12px;
+                        color: #fff;
+                        text-align: center;
+                        line-height: 18px;
+                    }
+                }
+            }
+        }
     }
     .no-data {
         font-size: 14px;

src/views/old_mini/home/index.vue

@@ -16,39 +16,21 @@
             :isGarden="false"
             @changeGarden="changeGarden"
         ></weather-info>
-        <div class="farm-monitor-container" :class="{ 'farmer-role': userType == 2 }">
-            <div class="farm-monitor-left" @click="handleCardClick(monitorCards.left)">
-                <div class="title">
-                    <span>{{ monitorCards.left.title }}</span>
-                    <el-icon class="icon" v-if="userType == 2"><ArrowRightBold /></el-icon>
-                </div>
-                <div class="content">{{ monitorCards.left.content }}</div>
-                <div class="arrow" v-if="userType != 2">
-                    <el-icon class="icon"><ArrowRightBold /></el-icon>
-                </div>
-            </div>
-            <div class="farm-monitor-right">
-                <div
-                    v-for="(item, index) in monitorCards.right"
-                    :key="index"
-                    class="right-item"
-                    :class="{ expert: index === 1 }"
-                    @click="handleCardClick(item)"
-                >
-                    <div class="title">
-                        <span>{{ item.title }}</span>
-                        <el-icon class="icon"><ArrowRightBold /></el-icon>
-                    </div>
-                    <div class="content">{{ item.content }}</div>
+        <div class="expert-home">
+            <div class="expert-banner">
+                <img class="expert-banner-img" src="@/assets/img/home/banner.png" alt="">
+                <div class="expert-desc">
+                    <img class="expert-desc-icon" src="@/assets/img/home/expert-text.png" alt="">
+                    <div class="desc-text"><span class="dotted"></span>您有一条长势报告，请查看</div>
                 </div>
             </div>
         </div>
-        <template v-if="userType == 2">
-            <knowledge-card />
-        </template>
-        <template v-else>
+        <knowledge-card />
+        <!-- <template v-if="userType == 2">
+        </template> -->
+        <!-- <template v-else>
             <AgriculturalDynamics />
-        </template>
+        </template> -->
     </div>
     <tip-popup
         v-model:show="showTipPopup"
@@ -270,78 +252,45 @@ const handleBannerClick = () => {
         left: 10px;
         z-index: 3;
     }
-    .farm-monitor-container {
-        padding-top: 78px;
-        display: flex;
-        align-items: center;
-        margin: 10px;
-        gap: 6px;
-        height: 134px;
-        &.farmer-role {
-            height: 104px;
-            .farm-monitor-left {
-                background: url("@/assets/img/home/farm-bg-4.png") no-repeat center center / 100% 100%;
+    .expert-home {
+        padding: 90px 10px 10px 10px;
+        .expert-banner {
+            position: relative;
+            .expert-banner-img {
+                width: 100%;
             }
-            .farm-monitor-right {
-                .right-item {
-                    background: url("@/assets/img/home/farm-bg-5.png") no-repeat center center / 100% 100%;
-                }
-            }
-        }
-        .farm-monitor-left,
-        .farm-monitor-right {
-            .title {
-                font-size: 16px;
-                color: #1d2129;
-                font-weight: 500;
-                .icon {
-                    font-size: 12px;
-                    margin-left: 2px;
-                }
-            }
-            .content {
-                margin-top: 6px;
-                font-size: 12px;
-                color: rgba(29, 33, 41, 0.5);
-                line-height: 1.5;
-            }
-            .arrow {
-                border-radius: 5px;
-                background: #fff;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 34px;
-                height: 25px;
-                margin-top: 10px;
-                font-size: 11px;
-            }
-        }
-        .farm-monitor-left {
-            flex: 1;
-            height: 100%;
-            margin-top: 2px;
-            padding: 25px 12px;
-            box-sizing: border-box;
-            max-width: 170px;
-            background: url("@/assets/img/home/farm-bg-1.png") no-repeat center center / 105% 106%;
-        }
-        .farm-monitor-right {
-            flex: 1;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            .right-item {
-                padding: 10px 12px;
+            .expert-desc {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                width: 100%;
+                border-radius: 0 0 8px 8px;
+                padding: 6px 8px;
                 box-sizing: border-box;
+                background: rgba(0, 0, 0, 0.5);
+                color: #fff;
+                backdrop-filter: blur(4px);
                 display: flex;
-                flex-direction: column;
-                justify-content: center;
-                flex: 1;
-                background: url("@/assets/img/home/farm-bg-2.png") no-repeat center center / 100% 100%;
-            }
-            .expert {
-                background: url("@/assets/img/home/farm-bg-3.png") no-repeat center center / 100% 100%;
+                align-items: center;
+                justify-content: space-between;
+                .expert-desc-icon {
+                    width: 91px;
+                }
+                .desc-text {
+                    font-family: "PangMenZhengDao";
+                    font-size: 14px;
+                    color: #fff;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    gap: 6px;
+                    .dotted {
+                        width: 5px;
+                        height: 5px;
+                        background: #fff;
+                        border-radius: 50%;
+                    }
+                }
             }
         }
     }

yarn.lock

@@ -1363,10 +1363,10 @@
     read-package-json-fast "^3.0.0"
     which "^3.0.0"
 
-"@parcel/watcher-darwin-arm64@2.5.1":
+"@parcel/watcher-win32-x64@2.5.1":
   version "2.5.1"
-  resolved "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz"
-  integrity sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==
+  resolved "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz"
+  integrity sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==
 
 "@parcel/watcher@^2.4.1":
   version "2.5.1"
@@ -6203,11 +6203,6 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8= sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@~2.3.2:
-  version "2.3.3"
-  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz"
-  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
-
 function-bind@^1.1.1, function-bind@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"