更新

src/view/logisticsScreen/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div style="text-align: center;">物流溯源可视化大屏</div>
+    <!-- <div style="text-align: center;">物流溯源可视化大屏</div>
     <el-select v-model="areaCode" class="m-2" @change="changeArea" placeholder="Select" size="large">
     <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
     </el-select>
@@ -14,10 +14,29 @@
     <div v-else>
         <button @click="sendFn('back', { name: '泸县' }), townCode = ''">返回首页</button>
         <button @click="sendFn('more_order')">更多订单</button>
-    </div>
+    </div> -->
     
 
-    
+    <img src="/static/img/tradeScreen/FH.png" @click="router.go(-1)" class="back-btn" alt="">
+    <div class="cont" v-if="flag">
+        <div class="card" v-for="(item, index) in farmList" :key="index">
+            <div class="card-tit">
+                {{ item.farm_name }}
+            </div>
+            <div class="card-cotnet">
+                <div>商户姓名: {{ item.master }}</div>
+                <div class="login" @click="lookFarmDetail(item)">查看详情</div>
+            </div>
+        </div>
+    </div>
+    <areaChose v-else channel="user-logistics-datav" @handTown="handTown"></areaChose>
+    <div class="area" @click="flag = !flag">
+        <div class="area-top">
+            <div class="town">江陽區</div>
+            <div class="town">江陽區</div>
+        </div>
+        <div class="area-bottom"></div>
+    </div>
 
     
 </template>
@@ -25,9 +44,13 @@
 import { ref, reactive } from "vue"
 import { sendMsg } from "@/api.js"
 import axios from "axios"
+import areaChose from "@/view/components/areaChose.vue"
 import { vehicleListApi } from "@/api.js"
+import {useRouter} from "vue-router"
+const router = useRouter()
 
 const nowPages = ref('index');
+const flag = ref(true);
 
 // 镇列表
 const options = [
@@ -87,6 +110,10 @@ const changeTown = (e) => {
 
 }
 
+const handTown = (a, s)=>{
+
+}
+
 const getTownList = () => {
     townOptions.splice(0, 99999999)
     axios.get(`https://crmeb-test.shop.lihaink.cn/api/city/get_street?area_code=${areaCode.value}`)
@@ -120,12 +147,120 @@ getLandList()
 const page = ref(1)
 const sendFn = (event, data = '') => {
     if (data.page) page.value = data.page;
-    sendMsg({ channel: 'user-5', event, data })
+    sendMsg({ channel: 'user-logistics-datav', event, data })
 }
 </script>
 <style lang="scss" scoped>
-button {
+.cont {
-    padding: 10px;
+    height: 500px;
-    margin: 10px;
+    width: 90vw;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    overflow-y: auto;
+
+    .card {
+        width: 378px;
+        height: 223px;
+        margin-bottom: 10px;
+        background-image: url('/static/img/breedScreen/bg.png');
+        background-size: 100% 100%;
+        font-size: 16px;
+        padding: 10px;
+        color: white;
+        position: relative;
+
+        .card-tit {
+            color: #00D6DD;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 10px;
+        }
+
+        .card-cotnet {
+            margin-top: 50px;
+
+            .login {
+                width: 170px;
+                height: 34px;
+                text-align: center;
+                line-height: 34px;
+                background-image: url('/static/img/tradeScreen/DL.png');
+                background-size: 100% 100%;
+                margin-top: 20px;
+                position: absolute;
+                bottom: 10px;
+                left: 50%;
+                transform: translateX(-50%);
+            }
+        }
+
+    }
+
+    // background-color: red;
+}
+
+.cont::-webkit-scrollbar {
+    width: 10px;
+    background-color: #153041;
+}
+
+.cont::-webkit-scrollbar-track {
+    background-color: #153041;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #084D89;
+    border-radius: 5px;
+}
+
+.back-btn {
+    width: 86.21px;
+    height: 31px;
+    position: absolute;
+    top: 70px;
+    left: 60.96px;
+    z-index: 9;
+
+}
+
+.area {
+    position: absolute;
+    font-size: 20px;
+    color: white;
+    bottom: 0px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 558px;
+
+    .area-top {
+        display: flex;
+        justify-content: space-around;
+
+        .town {
+            background-image: url('/static/img/tradeScreen/areaA.png');
+            background-size: 100% 100%;
+            width: 160.12px;
+            height: 30.94px;
+            text-align: center;
+            line-height: 10px;
+        }
+
+
+    }
+}
+
+.area-bottom {
+    background-image: url('/static/img/tradeScreen/areaB.png');
+    width: 558px;
+    height: 57px;
+    background-size: 100% 100%;
+    transform: translateY(-20px);
 }
 </style>