|
|
@@ -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>
|
wangsisi