fix: 认养列表

src/components/chartBox.vue

@@ -46,8 +46,7 @@ const handleShrink = () =>{
 <style lang="scss" scoped>
 .chart-box {
   width: 100%;
-  min-height: 100%;
-  height: max-content;
+  height: 100%;
   box-sizing: border-box;
   border-radius: 4px;
   background: #232323;
@@ -79,6 +78,7 @@ const handleShrink = () =>{
     position: relative;
     width: 100%;
     height: calc(100% - 38px);
+    overflow: auto;
     padding: 4px 8px;
     box-sizing: border-box;
     .arrow{

src/main.js

@@ -25,7 +25,6 @@ import '@/common/rem'
 import Print from 'vue3-print-nb'
 import vue3PhotoPreview from 'vue3-photo-preview'
 import 'vue3-photo-preview/dist/index.css'
-import { Popup } from 'vant';
 import 'vant/lib/index.css';
 
 const app = createApp(App);
@@ -38,7 +37,6 @@ app.use(mock)
     .use(permission, { router, store })
     .use(directives, { router, store })
     .use(Print)
-    .use(Popup)
     .use(vue3PhotoPreview, {
         // 配置图片预览的参数
         fullscreen: true, // 是否启用全屏

src/views/home/components/adoptList.vue

@@ -1,227 +1,368 @@
 <template>
-    <div class="adopt-list">
-      <div class="select-wrap">
-        <el-select class="select-item" v-model="areaVal" placeholder="全区" style="width: 116px">
-          <el-option
-            v-for="item in areaOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-        <el-select class="select-item" v-model="typeVal" placeholder="全部品类" style="width: 116px">
-          <el-option
-            v-for="item in typeOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-        <el-select class="select-item" v-model="ageVal" placeholder="树龄" style="width: 116px">
-          <el-option
-            v-for="item in ageOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </div>
-      <div class="select-wrap select-b">
-        <el-select class="select-item" v-model="allVal" placeholder="综合评分" style="width: 116px">
-          <el-option
-            v-for="item in allOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-        <el-select class="select-item" v-model="ecologyVal" placeholder="生态评分" style="width: 116px">
-          <el-option
-            v-for="item in ecologyOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-        <el-select class="select-item" v-model="statusVal" placeholder="全部状态" style="width: 116px">
-          <el-option
-            v-for="item in statusOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </div>
+    <div class="adopt-list" :class="{ 'has-btn': isManySetting }">
+        <div class="select-wrap">
+            <el-select class="select-item" v-model="areaVal" placeholder="全区" style="width: 116px">
+                <el-option v-for="item in areaOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+            <el-select class="select-item" v-model="typeVal" placeholder="全部品类" style="width: 116px">
+                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+            <el-select class="select-item" v-model="ageVal" placeholder="树龄" style="width: 116px">
+                <el-option v-for="item in ageOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+        </div>
+        <div class="select-wrap select-b">
+            <el-select class="select-item" v-model="allVal" placeholder="综合评分" style="width: 116px">
+                <el-option v-for="item in allOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+            <el-select class="select-item" v-model="ecologyVal" placeholder="生态评分" style="width: 116px">
+                <el-option v-for="item in ecologyOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+            <el-select class="select-item" v-model="statusVal" placeholder="全部状态" style="width: 116px">
+                <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+        </div>
 
-      <div class="list-wrap">
-        <div class="list-item" v-for="(item, index) in 10" :key="index">
-          <div class="tree-icon">
-            <div class="tree-tag">未定价</div>
-            <img class="tree-img" src="@/assets/images/foster-home/tree-item.png" alt="">
-            <div class="tree-type-name-tag">白糖罂</div>
-          </div>
-          <div class="item-center">
-            <div class="center-t">
-              BTY-A25
-              <span class="type-tag">综合:94分</span>
-              <span class="type-tag">生态:92分</span>
-              <span class="type-tag">树龄:5年</span>
-            </div>
-            <div class="center-item">
-              单价：<span>--元/斤</span>
-            </div>
-            <div class="center-item">
-              总认养斤数：<span>215斤</span>
+        <div class="many-setting">
+            批量定价
+            <el-input-number
+                style="width: 230px"
+                placeholder="请输入价格"
+                class="number-input"
+                :controls="false"
+                v-model="unifyPrice"
+                :min="0"
+                @change="setManyPrice"
+            />
+            <span class="unit">元/斤</span>
+        </div>
+
+        <div class="list-wrap">
+            <div class="list-item" v-for="(item, index) in displayedAdoptList" :key="index">
+                <div class="tree-icon">
+                    <div class="tree-tag" v-show="item.status === 0">未定价</div>
+                    <div class="tree-tag wait" v-show="item.status === 1">待认养</div>
+                    <div class="tree-tag done" v-show="item.status === 2">已认养</div>
+                    <img class="tree-img" src="@/assets/images/foster-home/tree-item.png" alt="" />
+                    <div class="tree-type-name-tag">白糖罂</div>
+                </div>
+                <div class="item-center">
+                    <div class="center-t">
+                        BTY-A25
+                        <span class="type-tag">综合:94分</span>
+                        <span class="type-tag">生态:92分</span>
+                        <span class="type-tag">树龄:5年</span>
+                    </div>
+                    <div class="center-item" v-show="!isManySetting">单价：<span>--元/斤</span></div>
+                    <div class="center-item has-input" v-show="isManySetting || item.settingPrice">
+                        单价： <el-input-number @change="settingSinglePrice" class="number-input" :controls="false" v-model="item.price" :min="0" />
+                        <span class="unit">元/斤</span>
+                    </div>
+                    <div class="center-item">总认养斤数：<span>215斤</span></div>
+                </div>
+                <div v-show="!isManySetting && !item.settingPrice" @click="toSettingSinglePrice(index)">
+                    <img src="@/assets/images/common/edit-icon.png" alt="" />
+                </div>
+                <div class="small-btn-group" v-show="item.settingPrice">
+                  <div class="btn cancel-btn">取消</div>
+                  <div class="btn edit-btn">保存</div>
+              </div>
             </div>
-          </div>
-          <div>
-            <img src="@/assets/images/common/edit-icon.png" alt="">
-          </div>
         </div>
-      </div>
+
+        <!-- 渐变主色按钮 -->
+        <div class="center-btn" v-show="!isManySetting" @click="manySetPrice">批量定价</div>
+        <!-- 渐变主色按钮 -->
+        <div class="btn-group" v-show="isManySetting">
+            <div class="btn cancel-btn" @click="saveManySetting(0)">取消</div>
+            <div class="btn edit-btn" @click="saveManySetting(1)">保存</div>
+        </div>
     </div>
 </template>
 
 <script setup>
-import {onMounted, ref} from 'vue'
+import { onMounted, ref } from "vue";
 
-const areaVal = ref(0)
+const areaVal = ref(0);
 const areaOptions = ref([
-  {label: "全区", value: 0},
-  {label: "1区", value: 1},
-  {label: "2区", value: 2},
-])
-const typeVal = ref(0)
+    { label: "全区", value: 0 },
+    { label: "1区", value: 1 },
+    { label: "2区", value: 2 },
+]);
+const typeVal = ref(0);
 const typeOptions = ref([
-  {label: "全部品类", value: 0},
-  {label: "白糖罂", value: 1},
-  {label: "井岗红糯", value: 2},
-])
-const ageVal = ref(0)
+    { label: "全部品类", value: 0 },
+    { label: "白糖罂", value: 1 },
+    { label: "井岗红糯", value: 2 },
+]);
+const ageVal = ref(0);
 const ageOptions = ref([
-  {label: "全部树龄", value: 0},
-  {label: "0-10年", value: 1},
-  {label: "10-20年", value: 2},
-])
-const allVal = ref(0)
+    { label: "全部树龄", value: 0 },
+    { label: "0-10年", value: 1 },
+    { label: "10-20年", value: 2 },
+]);
+const allVal = ref(0);
 const allOptions = ref([
-  {label: "全部评分", value: 0},
-  {label: "0-10年", value: 1},
-  {label: "10-20年", value: 2},
-])
-const ecologyVal = ref(0)
+    { label: "全部评分", value: 0 },
+    { label: "0-10年", value: 1 },
+    { label: "10-20年", value: 2 },
+]);
+const ecologyVal = ref(0);
 const ecologyOptions = ref([
-  {label: "生态评分", value: 0},
-  {label: "0-10年", value: 1},
-  {label: "10-20年", value: 2},
-])
-const statusVal = ref(0)
+    { label: "生态评分", value: 0 },
+    { label: "0-10年", value: 1 },
+    { label: "10-20年", value: 2 },
+]);
+const statusVal = ref(0);
 const statusOptions = ref([
-  {label: "全部状态", value: 0},
-  {label: "0-10年", value: 1},
-  {label: "10-20年", value: 2},
-])
-onMounted(()=>{
-})
+    { label: "全部状态", value: 0 },
+    { label: "0-10年", value: 1 },
+    { label: "10-20年", value: 2 },
+]);
+
+const adoptList = ref([
+    { status: 0, price: 16 },
+    { status: 0, price: 16 },
+    { status: 0, price: 16 },
+    { status: 0, price: 16 },
+    { status: 0, price: 16 },
+    { status: 0, price: 16 },
+    { status: 0, price: 16 },
+    { status: 0, price: 16 },
+    { status: 1, price: 16 },
+    { status: 1, price: 16 },
+    { status: 2, price: 16 },
+    { status: 2, price: 16 },
+]);
+const displayedAdoptList = ref([...adoptList.value]); // 初始时显示完整列表
+onMounted(() => {});
+
+// 批量定价
+const unifyPrice = ref(null);
+const isManySetting = ref(false);
+function manySetPrice() {
+    isManySetting.value = true;
+    displayedAdoptList.value = adoptList.value.filter((item) => item.status === 0);
+}
+function saveManySetting(isToSave) {
+    isManySetting.value = false;
+    displayedAdoptList.value = [...adoptList.value]; // 显示完整列表
+    if (isToSave) {
+        // 保存
+    }
+}
+
+function setManyPrice(v) {
+  displayedAdoptList.value.map(item => item.price = v)
+}
 
+// 设置单棵树单价
+
+function toSettingSinglePrice(i) {
+  console.log('tototot');
+  displayedAdoptList.value[i].settingPrice = true
+}
+function settingSinglePrice() {
+  console.log('sss');
+}
 </script>
 
 <style lang="scss" scoped>
 .adopt-list {
-  .type-tag {
-        color: #FFD489;
+    height: 100%;
+    overflow: auto;
+    &.has-btn {
+        height: calc(100% - 60px);
+    }
+    .type-tag {
+        color: #ffd489;
         background: rgba(255, 212, 137, 0.06);
         padding: 2px 4px;
         font-size: 10px;
         margin-left: 4px;
         border-radius: 4px;
     }
-  .select-wrap {
-    display: flex;
-    align-items: center;
-    ::v-deep {
-      .el-select__wrapper {
-        background: rgba(255, 212, 137, 0.06);
-        box-shadow: 0 0 0 1px rgba(255, 212, 137, 0.3) inset;
-        font-size: 13px;
-        .el-select__input {
-          color: #FFD489;
+    .select-wrap {
+        display: flex;
+        align-items: center;
+        ::v-deep {
+            .el-select__wrapper {
+                background: rgba(255, 212, 137, 0.06);
+                box-shadow: 0 0 0 1px rgba(255, 212, 137, 0.3) inset;
+                font-size: 13px;
+                .el-select__input {
+                    color: #ffd489;
+                }
+                .el-select__placeholder {
+                    color: #ffd489;
+                    text-align: center;
+                }
+                .el-select__suffix {
+                    color: #ffd489;
+                }
+            }
+        }
+        .select-item + .select-item {
+            margin-left: 5px;
         }
-        .el-select__placeholder {
-          color: #FFD489;
-          text-align: center;
+    }
+    .select-b {
+        margin-top: 8px;
+    }
+    .list-wrap {
+        padding: 12px 0;
+        .list-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: rgba(255, 255, 255, 0.08);
+            padding: 8px 10px;
+            border-radius: 5px;
+            .tree-icon {
+                position: relative;
+                .tree-tag {
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    background: #0accbf;
+                    border-radius: 5px 0 5px 0;
+                    color: #fff;
+                    padding: 1px 6px;
+                    font-size: 10px;
+                    &.wait {
+                        background: #f0ac37;
+                    }
+                    &.done {
+                        background: #757575;
+                    }
+                }
+                .tree-type-name-tag {
+                    position: absolute;
+                    left: 0;
+                    bottom: 0;
+                    background: rgba(0, 0, 0, 0.6);
+                    border-radius: 0 5px 5px 0;
+                    font-size: 10px;
+                    width: 100%;
+                    text-align: center;
+                    padding: 1px;
+                    backdrop-filter: blur(2px);
+                }
+                .tree-img {
+                    width: 63px;
+                    height: 63px;
+                    border-radius: 5px;
+                    object-fit: cover;
+                }
+            }
+            .item-center {
+                flex: 1;
+                padding: 0 12px;
+                color: #fff;
+                .center-t {
+                    font-size: 14px;
+                }
+                .center-item {
+                    color: #6c6c6c;
+                    font-size: 12px;
+                    span {
+                        color: #fff;
+                    }
+                }
+                .has-input {
+                    padding: 4px 0;
+                    .unit {
+                        padding-left: 5px;
+                    }
+                }
+                .small-btn-group {
+                  display: flex;
+                  font-size: 12px;
+                }
+            }
         }
-        .el-select__suffix {
-          color: #FFD489;
+        .list-item + .list-item {
+            margin-top: 8px;
         }
-      }
     }
-    .select-item + .select-item {
-      margin-left: 5px;
+    .unit {
+        padding-left: 5px;
+        color: #fff;
+    }
+    .many-setting {
+        background: rgba(255, 212, 137, 0.08);
+        border: 1px solid rgba(255, 212, 137, 0.3);
+        border-radius: 6px;
+        color: #ffd489;
+        padding: 12px 8px;
+        margin-top: 12px;
     }
-  }
-  .select-b {
-    margin-top: 8px;
-  }
-  .list-wrap {
-    padding: 12px 0;
-    .list-item {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      background: rgba(255, 255, 255, 0.08);
-      padding: 8px 10px;
-      border-radius: 5px;
-      .tree-icon {
-        position: relative;
-        .tree-tag {
-          position: absolute;
-          left: 0;
-          top: 0;
-          background: #0ACCBF;
-          border-radius: 5px 0 5px 0;
-          color: #fff;
-          padding: 1px 6px;
-          font-size: 10px;
+    .number-input {
+        ::v-deep {
+            &.el-input-number {
+                width: 80px;
+                background: rgba(255, 212, 137, 0.08);
+                border: 1px solid #ffd489;
+                border-radius: 5px;
+            }
+            .el-input__wrapper {
+                background: transparent;
+                box-shadow: none;
+            }
+            .el-input-number.is-without-controls .el-input__wrapper {
+                padding: 0 8px;
+            }
+            .el-input__inner {
+                color: #ffd489;
+            }
         }
-        .tree-type-name-tag {
-          position: absolute;
-          left: 0;
-          bottom: 0;
-          background: rgba(0, 0, 0, 0.6);
-          border-radius: 0 5px 5px 0;
-          font-size: 10px;
-          width: 100%;
-          text-align: center;
-          padding: 1px;
-          backdrop-filter: blur(2px);
+    }
+    .center-btn {
+        position: absolute;
+        bottom: 64px;
+        left: 50%;
+        transform: translateX(-50%);
+        color: #000000;
+        border-radius: 20px;
+        font-size: 14px;
+        padding: 7px 10px;
+        cursor: pointer;
+        border: 1px solid #fff;
+        background: linear-gradient(180deg, #ffd887, #ed9e1e);
+        width: 194px;
+        box-sizing: border-box;
+        text-align: center;
+    }
+
+    .btn-group {
+        display: flex;
+        align-items: center;
+        justify-content: end;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        background: #232323;
+        width: 100%;
+        padding: 10px 12px;
+        box-sizing: border-box;
+        border-radius: 0 0 8px 8px;
+        .btn {
+            cursor: pointer;
+            padding: 12px 36px;
+            font-size: 14px;
+            border-radius: 4px;
+            border: 1px solid #ffd489;
         }
-        .tree-img {
-          width: 63px;
-          height: 63px;
-          border-radius: 5px;
-          object-fit: cover;
+        .cancel-btn {
+            color: #ffd489;
         }
-      }
-      .item-center {
-        flex: 1;
-        padding: 0 12px;
-        color: #fff;
-        .center-t {
-          font-size: 14px;
+        .edit-btn {
+            background: #ffd489;
+            color: #000000;
         }
-        .center-item {
-          color: #6C6C6C;
-          font-size: 12px;
-          span {
-            color: #fff;
-          }
+        .btn + .btn {
+            margin-left: 12px;
         }
-      }
-    }
-    .list-item + .list-item {
-      margin-top: 8px;
     }
-  }
 }
 </style>

src/views/home/components/gardenIntroduce.vue

@@ -2,26 +2,20 @@
     <div class="garden-introduce">
         <div class="introduce-overview">
             <div class="overview-top">
-                <img class="garden-img" src="@/assets/images/foster-home/garden-img.png" alt="">
+                <img class="garden-img" src="@/assets/images/foster-home/garden-img.png" alt="" />
                 <div class="overview-info">
                     <div class="garden-name">
                         柏桥村
                         <span class="type-tag">白糖罂</span>
                     </div>
-                    <div class="info-item center-info">
-                        果园面积：<span class="info-val">6800亩</span>
-                    </div>
-                    <div class="info-item">
-                        果园地址：<span class="info-val">广东省茂名市高州市根子镇下辖村</span>
-                    </div>
+                    <div class="info-item center-info">果园面积：<span class="info-val">6800亩</span></div>
+                    <div class="info-item">果园地址：<span class="info-val">广东省茂名市高州市根子镇下辖村</span></div>
                 </div>
             </div>
 
             <div class="overview-data-box">
                 <div class="box-item">
-                    <div class="item-val">
-                        383<span>/1001</span>
-                    </div>
+                    <div class="item-val">383<span>/1001</span></div>
                     <div class="item-name">已认养(棵)</div>
                 </div>
                 <div class="box-item">
@@ -30,7 +24,8 @@
                 </div>
                 <div class="box-item">
                     <div class="item-val">98</div>
-                    <div class="item-name">生态评分(分)</div></div>
+                    <div class="item-name">生态评分(分)</div>
+                </div>
             </div>
         </div>
 
@@ -38,22 +33,18 @@
             <sub-title name="果园简介">
                 <template v-slot:title-right>
                     <div class="title-right" @click="editDesc" v-show="!isEdit">
-                        <img class="sub-edit" src="@/assets/images/common/edit-icon.png" alt="">
+                        <img class="sub-edit" src="@/assets/images/common/edit-icon.png" alt="" />
                         编辑
                     </div>
                     <div class="title-right-btn" v-show="isEdit">
-                        <div class="btn cancel-btn" @click="isEdit=false">取消</div>
+                        <div class="btn cancel-btn" @click="isEdit = false">取消</div>
                         <div class="btn edit-btn" @click="saveDesc">保存</div>
                     </div>
                 </template>
             </sub-title>
             <div class="sub-content">
                 <div class="content-text" v-show="isEdit">
-                    <el-input
-                        v-model="gardenDes"
-                        :autosize="{ minRows: 2, maxRows: 8 }"
-                        type="textarea"
-                    />
+                    <el-input v-model="gardenDes" :autosize="{ minRows: 2, maxRows: 8 }" type="textarea" />
                 </div>
                 <div class="content-text" v-show="!isEdit">
                     {{ gardenDes }}
@@ -63,21 +54,25 @@
 
         <div class="sub-box">
             <div class="honour-name">
-                <img class="honour-l" src="@/assets/images/foster-home/honour-bg.png" alt="">
+                <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="">
+                <img class="honour-r" src="@/assets/images/foster-home/honour-bg.png" alt="" />
+                <div class="honour-more title-right">
+                    更多
+                    <el-icon class="sub-icon"><ArrowRight /></el-icon>
+                </div>
             </div>
             <div class="honour-imgs">
                 <div class="honour-item">
-                    <img src="@/assets/images/foster-home/water-icon.png" alt="">
+                    <img src="@/assets/images/foster-home/water-icon.png" alt="" />
                     <div class="icon-name">水源洁净</div>
                 </div>
                 <div class="honour-item">
-                    <img src="@/assets/images/foster-home/wind-icon.png" alt="">
+                    <img src="@/assets/images/foster-home/wind-icon.png" alt="" />
                     <div class="icon-name">风畅气顺</div>
                 </div>
                 <div class="honour-item">
-                    <img src="@/assets/images/foster-home/tree-icon.png" alt="">
+                    <img src="@/assets/images/foster-home/tree-icon.png" alt="" />
                     <div class="icon-name">古树名木</div>
                 </div>
             </div>
@@ -93,7 +88,7 @@
                 </template>
             </sub-title>
             <div class="video-wrap" @click="showVideo">
-                <img class="introduce-img" src="@/assets/images/foster-home/video.png" alt="">
+                <img class="introduce-img" src="@/assets/images/foster-home/video.png" alt="" />
             </div>
         </div>
 
@@ -107,48 +102,44 @@
                 </template>
             </sub-title>
             <div class="video-wrap">
-                <img class="introduce-img" src="@/assets/images/foster-home/recode.png" alt="">
+                <img class="introduce-img" src="@/assets/images/foster-home/recode.png" alt="" />
             </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 class="video-wrap" controls width="1280" height="800">
+                <source src="@/assets/images/foster-home/work.mp4" />
             </video>
         </Popup>
     </div>
 </template>
 
 <script setup>
-import {onMounted, ref} from 'vue'
-import subTitle from "@/components/subTitle.vue"
-import { Popup } from 'vant';
+import { onMounted, ref } from "vue";
+import subTitle from "@/components/subTitle.vue";
+import { Popup } from "vant";
 import eventBus from "@/api/eventBus";
 
 // 简介
-const isEdit = ref(false)
-const gardenDes = ref("柏桥村位于广东茂名高州根子镇，是千年荔枝之乡的核心产区，盛产果肉晶莹、鲜甜多汁的白糖罂荔枝。村内6800亩荔枝林与古荔园中48棵百年以上古树交相辉映，诉说着种植传奇。依托冷链物流和电商直播，新鲜荔枝一键直达全国。")
+const isEdit = ref(false);
+const gardenDes = ref(
+    "柏桥村位于广东茂名高州根子镇，是千年荔枝之乡的核心产区，盛产果肉晶莹、鲜甜多汁的白糖罂荔枝。村内6800亩荔枝林与古荔园中48棵百年以上古树交相辉映，诉说着种植传奇。依托冷链物流和电商直播，新鲜荔枝一键直达全国。"
+);
 function editDesc() {
-    isEdit.value = true
+    isEdit.value = true;
 }
 
 function saveDesc() {
     // 保存
-    isEdit.value = false
+    isEdit.value = false;
 }
 
-const showPopup = ref(false)
+const showPopup = ref(false);
 
-onMounted(()=>{
-})
+onMounted(() => {});
 
 function showVideo() {
-    showPopup.value = true
+    showPopup.value = true;
 }
 </script>
 
@@ -157,7 +148,7 @@ function showVideo() {
     padding: 12px 8px;
     .introduce-overview {
         .type-tag {
-            color: #FFD489;
+            color: #ffd489;
             background: rgba(243, 193, 29, 0.16);
             padding: 2px 6px;
             font-size: 12px;
@@ -234,8 +225,8 @@ function showVideo() {
         ::v-deep {
             .el-textarea__inner {
                 background: rgba(255, 212, 137, 0.08);
-                box-shadow: 0 0 0 1px #FFD489 inset;
-                color: #FFD489;
+                box-shadow: 0 0 0 1px #ffd489 inset;
+                color: #ffd489;
                 font-size: 12px;
             }
         }
@@ -244,7 +235,7 @@ function showVideo() {
         background: rgba(255, 212, 137, 0.1);
         border-radius: 20px;
         font-size: 12px;
-        color: #FFD489;
+        color: #ffd489;
         padding: 2px 8px;
         display: flex;
         align-items: center;
@@ -264,13 +255,13 @@ function showVideo() {
             padding: 2px 8px;
             font-size: 12px;
             border-radius: 4px;
-            border: 1px solid #FFD489;
+            border: 1px solid #ffd489;
         }
         .cancel-btn {
-            color: #FFD489;
+            color: #ffd489;
         }
         .edit-btn {
-            background: #FFD489;
+            background: #ffd489;
             color: #000000;
         }
         .btn + .btn {
@@ -281,10 +272,11 @@ function showVideo() {
         display: flex;
         align-items: center;
         justify-content: center;
-        color: #FFD489;
+        color: #ffd489;
         font-size: 16px;
-        font-family: 'PangMenZhengDao';
+        font-family: "PangMenZhengDao";
         padding-bottom: 12px;
+        position: relative;
         .honour-l {
             padding-right: 6px;
         }
@@ -292,6 +284,11 @@ function showVideo() {
             padding-right: 6px;
             transform: rotate(180deg);
         }
+        .honour-more {
+            position: absolute;
+            right: 0;
+            top: 0;
+        }
     }
     .honour-imgs {
         display: flex;

src/views/home/index.vue

@@ -107,16 +107,7 @@ let store = useStore();
 const components = {
     homePage,
 };
-//当前农场
-const currentFarm = {
-    id: store.getters.userinfo.curFarmId,
-    name: store.getters.userinfo.curFarmName,
-};
-//当前区域
-const currentRegion = {
-    id: null,
-    name: null,
-};
+
 let homeMap = new HomeMap();
 let samplePointLayer = null;
 let blueRegionLayer = null;
@@ -265,6 +256,13 @@ const currentComponent = ref("homePage");
             margin-right: 25px;
             .adopt-list-wrap {
                 ::v-deep {
+                    .el-tabs {
+                        height: 100%;
+                    }
+                    .el-tabs__content {
+                        height: calc(100% - 40px - 15px);
+                        position: static;
+                    }
                     .el-tabs__item {
                         color: #727272;
                     }
@@ -283,6 +281,9 @@ const currentComponent = ref("homePage");
                         left: 50%;
                         transform: translateX(-50%) !important;
                     }
+                    .el-tab-pane {
+                        height: 100%;
+                    }
                 }
             }
             .list {

src/views/home/map/samplePointLayer.js

@@ -110,10 +110,6 @@ class SamplePointLayer {
         features: features,
       });
       that.clusterSource.setSource(source)
-      // console.log('this.treeClusterLayer.layer.getSource()', that.treeClusterLayer.layer.getSource());
-      // if (!that.treeClusterLayer || !that.treeClusterLayer.layer.getSource()) {
-      //   that.mapRef.addLayer(that.treeClusterLayer.layer)
-      // }
 
       const layers = that.mapRef.map.getLayers().getArray();
       const exists = layers.includes(that.treeClusterLayer.layer);