feat:修改首页UI样式

src/views/old_mini/home/index.vue

@@ -1,13 +1,20 @@
 <template>
     <div class="home-index">
-        <!-- 顶部：左侧搜索 + 右侧筛选 -->
         <div class="top-row">
-            <div class="search-bar">
-                <input class="search-input" placeholder="搜索农场" />
-            </div>
+            <el-input class="search-bar" placeholder="搜索农场">
+                <template #prefix>
+                    <el-icon>
+                        <Search />
+                    </el-icon>
+                </template>
+            </el-input>
             <div class="filter-row">
-                <button class="filter-btn">选择地区</button>
-                <button class="filter-btn">选择品类</button>
+                <el-select class="filter-item" v-model="value" placeholder="选择地区">
+                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+                <el-select class="filter-item" v-model="value" placeholder="选择品类">
+                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
             </div>
         </div>
 
@@ -18,7 +25,6 @@
                     <div class="farm-title">
                         <span>{{ farmInfo.name }}</span>
                         <div class="title-tags">
-                            <div class="title-tag">桂味</div>
                             <div class="title-tag tag-danger">
                                 <span>干旱预警</span>
                                 <el-icon>
@@ -32,37 +38,106 @@
                 <div class="farm-more" @click="handleMoreClick">详情</div>
             </div>
 
-            <div class="content-grid">
-                <div class="label-column">
-                    <div class="label-cell" v-for="row in rows" :key="row.label">
-                        {{ row.label }}
+            <div class="farm-content" v-if="isShowPl">
+                <div class="farm-pl">
+                    <span class="pl-label">品类:</span>
+                    <div class="title-tags">
+                        <div class="title-tag">荔枝</div>
+                        <div class="title-tag">水稻</div>
                     </div>
                 </div>
-                <div class="main-grid">
-                    <div class="row" v-for="row in rows" :key="row.label">
-                        <div v-for="card in row.cards" :key="card.id" class="status-card" :class="card.type"
-                            @click="handleBlockClick(card)">
-                            <div class="status-title">
-                                {{ card.title }}
-                                <span v-if="card.badge" class="badge-dot" />
-                            </div>
-                            <div class="status-sub" v-if="card.sub">
-                                {{ card.sub }}
+                <div class="farm-invite">邀请互动</div>
+            </div>
+            <div v-else class="farm-content-grid">
+                <div class="title-tags">
+                    <div class="title-tag">荔枝-桂味 糯米糍</div>
+                </div>
+                <div class="content-grid">
+                    <div class="label-column">
+                        <div class="label-cell" v-for="row in rows" :key="row.label">
+                            {{ row.label }}
+                        </div>
+                    </div>
+                    <div class="main-grid">
+                        <div class="row" v-for="row in rows" :key="row.label">
+                            <div v-for="card in row.cards" :key="card.id" class="status-card" :class="card.type"
+                                @click="handleBlockClick(card)">
+                                <badge class="status-badge" dot v-if="card.title === '冲楸异常'" :offset="[80, -10]"></badge>
+                                <div class="status-title">
+                                    {{ card.title }}
+                                </div>
+                                <div class="status-sub" v-if="card.sub">
+                                    {{ card.sub }}
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
+        <div class="custom-bottom-fixed-btns center-btn">
+            <div class="bottom-btn primary-btn" @click="handleAddClient">新增客户</div>
+        </div>
     </div>
+    <!-- 新增客户弹窗 -->
+    <action-sheet v-model:show="showAddClient">
+        <div class="add-client-actions">
+            <div class="add-client-btn add-client-btn--self" @click="handleAddClientSelf">
+                自行创建
+            </div>
+            <div class="add-client-btn add-client-btn--invite" @click="handleAddClientInvite">
+                邀请用户创建
+            </div>
+        </div>
+    </action-sheet>
 </template>
 
 <script setup>
 import { ref } from "vue";
+import { Badge,ActionSheet } from 'vant';
 import { useRouter } from "vue-router";
-
 const router = useRouter();
 
+const showAddClient = ref(false);
+const handleAddClientSelf = () => {
+    showAddClient.value = false;
+    router.push("/create_farm?type=add");
+};
+const handleAddClientInvite = () => {
+    showAddClient.value = false;
+    router.push("/create_farm?type=add");
+};
+
+const handleAddClient = () => {
+    showAddClient.value = true;
+};
+
+
+const isShowPl = ref(false);
+const value = ref('')
+const options = [
+    {
+        value: 'Option1',
+        label: 'Option1',
+    },
+    {
+        value: 'Option2',
+        label: 'Option2',
+    },
+    {
+        value: 'Option3',
+        label: 'Option3',
+    },
+    {
+        value: 'Option4',
+        label: 'Option4',
+    },
+    {
+        value: 'Option5',
+        label: 'Option5',
+    },
+]
+
 const farmInfo = ref({
     name: "从化荔博园合作社",
     address: "广东省广州市从化区某某街道",
@@ -136,202 +211,227 @@ const handleMoreClick = () => {
     box-sizing: border-box;
     padding: 12px 12px 24px;
     background: #f5f7fa;
-}
 
-.top-row {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 12px;
-}
+    .top-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 12px;
 
-.search-bar {
-    flex: 1;
+        .search-bar {
+            width: 104px;
 
-    .search-input {
-        width: 100%;
-        height: 32px;
-        border-radius: 16px;
-        border: none;
-        padding: 0 12px;
-        box-sizing: border-box;
-        font-size: 14px;
-        background: #ffffff;
-        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
-    }
-}
+            ::v-deep {
+                .el-input__wrapper {
+                    border-radius: 25px;
+                    border: 0.5px solid rgba(0, 0, 0, 0.2);
+                    box-shadow: none;
+                }
+            }
+        }
 
-.filter-row {
-    display: flex;
-    gap: 8px;
+        .filter-row {
+            display: flex;
+            gap: 8px;
 
-    .filter-btn {
-        width: 72px;
-        height: 30px;
-        border-radius: 15px;
-        border: none;
-        background: #ffffff;
-        font-size: 13px;
-        color: #4e5969;
-        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+            .filter-item {
+                width: 100px;
+            }
+        }
     }
-}
-
-.farm-card {
-    background: #ffffff;
-    border-radius: 8px;
-    padding: 10px 12px;
-    border: 0.5px solid rgba(0, 0, 0, 0.2);
 
-    .farm-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding-bottom: 10px;
-        border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
-        margin-bottom: 10px;
+    .farm-card {
+        background: #ffffff;
+        border-radius: 8px;
+        padding: 10px 12px;
+        border: 0.5px solid rgba(0, 0, 0, 0.2);
 
-        .farm-header-left {
-            .farm-title {
+        .title-tags {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+
+            .title-tag {
+                font-size: 13px;
+                padding: 2px 8px;
+                border-radius: 2px;
+                background: #E8F3FF;
+                color: #2199F8;
                 display: flex;
                 align-items: center;
-                gap: 10px;
-                font-size: 16px;
-                color: #1D2129;
-                margin-bottom: 4px;
+                gap: 2px;
+
+                &.tag-danger {
+                    background: rgba(255, 149, 61, 0.2);
+                    color: #FF953D;
+                }
+            }
+        }
 
-                .title-tags {
+        .farm-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding-bottom: 10px;
+            border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
+            margin-bottom: 10px;
+
+            .farm-header-left {
+                .farm-title {
                     display: flex;
                     align-items: center;
-                    gap: 4px;
-
-                    .title-tag {
-                        font-size: 13px;
-                        padding: 2px 8px;
-                        border-radius: 2px;
-                        background: #E8F3FF;
-                        color: #2199F8;
-                        display: flex;
-                        align-items: center;
-                        gap: 2px;
+                    gap: 10px;
+                    font-size: 16px;
+                    color: #1D2129;
+                    margin-bottom: 4px;
+                }
 
-                        &.tag-danger {
-                            background: rgba(255, 149, 61, 0.2);
-                            color: #FF953D;
-                        }
-                    }
+                .farm-subtitle {
+                    font-size: 12px;
+                    color: rgba(32, 32, 32, 0.4);
                 }
             }
 
-            .farm-subtitle {
+            .farm-more {
                 font-size: 12px;
-                color: rgba(32, 32, 32, 0.4);
+                color: rgba(37, 47, 56, 0.5);
             }
         }
 
-        .farm-more {
-            font-size: 12px;
-            color: rgba(37, 47, 56, 0.5);
-        }
-    }
-}
-
-.content-grid {
-    display: flex;
-    gap: 8px;
-    .label-column {
-        // display: flex;
-        // flex-direction: column;
-        // justify-content: space-between;
-        padding: 6px 0;
-        padding-right: 4px;
-    
-        .label-cell {
-            width: 28px;
-            height: 64px;
-            border-radius: 8px;
-            background: #f5f5f5;
-            color: #86909c;
-            font-size: 12px;
+        .farm-content {
             display: flex;
             align-items: center;
-            justify-content: center;
-            writing-mode: vertical-rl;
-        }
-    }
-}
-
+            justify-content: space-between;
 
-.main-grid {
-    flex: 1;
-}
+            .farm-pl {
+                display: flex;
+                align-items: center;
+                gap: 5px;
 
-.row {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 6px;
-    margin-bottom: 6px;
-}
+                .pl-label {
+                    color: rgba(32, 32, 32, 0.4);
+                }
+            }
 
-.status-card {
-    border-radius: 10px;
-    padding: 8px 8px;
-    box-sizing: border-box;
-    background: #ffffff;
-    border: 0.5px solid #e5e6eb;
+            .farm-invite {
+                font-size: 16px;
+                color: #fff;
+                padding: 5px 10px;
+                background: #2199F8;
+                border-radius: 2px;
+                font-family: "PangMenZhengDao";
+            }
+        }
 
-    .status-title {
-        font-size: 14px;
-        font-weight: 500;
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        margin-bottom: 2px;
-    }
+        .farm-content-grid {
+            .content-grid {
+                display: flex;
+                gap: 8px;
+                margin-top: 10px;
 
-    .status-sub {
-        font-size: 11px;
-        color: #86909c;
-    }
+                .label-column {
+                    .label-cell {
+                        padding: 13px 3px;
+                        letter-spacing: 3px;
+                        border-radius: 2px;
+                        background: rgba(134, 134, 134, 0.05);
+                        color: #666666;
+                        font-size: 12px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        writing-mode: vertical-rl;
+                    }
 
-    &.risk-strong {
-        background: #FF6A6A;
-        border-color: #FF6A6A;
+                    .label-cell+.label-cell {
+                        margin-top: 10px;
+                    }
+                }
 
-        .status-title,
-        .status-sub {
-            color: #ffffff;
+                .main-grid {
+                    flex: 1;
+
+                    .row {
+                        display: grid;
+                        grid-template-columns: repeat(3, 1fr);
+                        gap: 6px;
+                        margin-bottom: 10px;
+
+                        .status-card {
+                            border-radius: 2px;
+                            padding: 10px 0;
+                            background: #ffffff;
+                            border: 0.5px solid #e5e6eb;
+                            display: flex;
+                            flex-direction: column;
+                            align-items: center;
+                            justify-content: center;
+
+                            .status-badge {
+                                // position: absolute;
+                                // top: 0;
+                                // right: 0;
+                            }
+
+                            .status-title {
+                                font-size: 16px;
+                            }
+
+                            .status-sub {
+                                font-size: 10px;
+                                color: rgba(32, 32, 32, 0.4);
+                            }
+
+                            &.risk-strong {
+                                background: #FF6A6A;
+                                border-color: #FF6A6A;
+
+                                .status-title,
+                                .status-sub {
+                                    color: #ffffff;
+                                }
+                            }
+
+                            &.danger {
+                                background: #FFE9E9;
+                                border-color: #ff8e8e;
+
+                                .status-sub {
+                                    color: #FF6A6A;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
         }
     }
 
-    &.danger {
-        background: #ffecec;
-        border-color: #ff8e8e;
-
-        .status-title {
-            color: #ff4d4f;
-        }
-
-        .status-sub {
-            color: #ff7d4d;
+    .custom-bottom-fixed-btns {
+        &.center-btn {
+            justify-content: center;
         }
     }
+}
+.add-client-actions {
+    padding: 16px 20px 24px;
+    background: #ffffff;
+    .add-client-btn {
+        width: 100%;
+        text-align: center;
+        border-radius: 6px;
+        font-size: 16px;
+        color: #ffffff;
+        padding: 10px 0;
+    }
 
-    &.disabled {
-        background: #f5f5f5;
-        border-color: #e5e6eb;
-
-        .status-title,
-        .status-sub {
-            color: #c0c4cc;
-        }
+    .add-client-btn--self {
+        background: #2199f8;
+        margin-bottom: 12px;
     }
-}
 
-.badge-dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: #ff4d4f;
+    .add-client-btn--invite {
+        background: #ff953d;
+    }
 }
 </style>