add

src/router/index.js

@@ -17,6 +17,11 @@ const routes = [
                 name: 'tradeScreen',
                 component: () => import('@/view/tradeScreen/index.vue'),
             },
+            {
+                path: '/storeLogin',
+                name: 'storeLogin',
+                component: () => import('@/view/tradeScreen/storeLogin.vue'),
+            },
             {
                 path: '/plantScreen',
                 name: 'plantScreen',

src/view/breedScreen/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="text-align: center;" class="head-title">养殖溯源可视化大屏</div>
+    <!-- <div style="text-align: center;" class="head-title">养殖溯源可视化大屏</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>
@@ -16,27 +16,26 @@
       <button @click="sendFn('more_order')">更多订单</button>
   </div> -->
 
-  <div style="height: 100vh;">
+    <img src="/static/img/tradeScreen/FH.png" @click="router.go(-1)" class="back-btn" alt="">
-            <div class="menu" v-if="flag">
+    <div class="cont" v-if="flag">
-                <div class="menu-li sy"></div>
+        <div class="card" v-for="item in 9">
-                <div class="menu-li sc"></div>
+            <div class="card-tit">
-                <div class="menu-li sc"></div>
+                究极公司
-                <div class="menu-li sc"></div>
-                <div class="menu-li sc"></div>
             </div>
-            <div v-if="!flag">
+            <div class="card-cotnet">
-                <areaChose channel="user-breed-datav"></areaChose>
+                <div>商户姓名: 为对方</div>
+                <div class="login">查看详情</div>
             </div>
         </div>
-  <div class="area" @click="flag=!flag">
+    </div>
+    <areaChose v-else></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>
 <script setup scoped>
 import { ref, reactive } from "vue"
@@ -46,7 +45,7 @@ import { vehicleListApi } from "@/api.js"
 import areaChose from "@/view/components/areaChose.vue"
 
 const nowPages = ref('index');
-const flag=ref(true)
+const flag = ref(true)
 
 // 镇列表
 const options = [
@@ -120,13 +119,13 @@ const getTownList = () => {
         })
 }
 
-const vehicleList=ref([])
+const vehicleList = ref([])
 const getLandList = async () => {
     let res = await vehicleListApi({
         areaCode: areaCode.value,
         streetCode: townCode.value
     })
-  vehicleList.value=res.data.list
+    vehicleList.value = res.data.list
 
 
 
@@ -142,16 +141,86 @@ const sendFn = (event, data = '') => {
     sendMsg({ channel: 'user-breed-datav', event, data })
 }
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
-button {
+.cont {
+    height: 500px;
+    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;
-  margin: 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;
 }
-.head-title{
+
-    color: #fff;
+.cont::-webkit-scrollbar {
-    font-size: 20px;
+    width: 10px;
-    padding-top: 5vh;
+    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;

src/view/components/areaChose.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="content">
+    <div class="areacontent">
         <div class="area-list">
             <div v-for="(item, index) in options" :key="index" :class="{ act: actIndex == index }" @click="handChose(index)"> {{
                 item.label }} </div>
@@ -95,7 +95,7 @@ const sendFn = (event, data = '') => {
 
 
 <style lang="scss" scoped>
-.content {
+.areacontent {
     width: 998.3px;
     height: 445.74px;
     background-image: url('/static/img/area/bg.png');

src/view/home.vue

@@ -1,7 +1,6 @@
 <template>
     <div class="main-box">
         <router-view :key="route.path"></router-view>
-        
     </div>
 </template>
 <script setup>
@@ -13,22 +12,22 @@ import { globalEventBus } from '@/common/eventBus'
 for (let i = 1; i < 6; i++) {
     globalEventBus.on('header' + i, data => {
         globalEventBus.emit('compheader' + i, data)
-        console.log(i)
-
     })
 }
-
-
-
 </script>
 <style>
-
+.main-box {
-.main-box{
+    width: 1280px;
-    width: 100vw;
+    height: 720px;
-    height: 100vh;
     overflow: hidden;
     background-image: url('/static/img/index/index_bg.png');
     background-size: 100% 100%;
 }
+div{
+    box-sizing: border-box;
+    font-size: 16px;
+    background-size: 100% 100%;
+
+}
 </style>
 

src/view/index.vue

@@ -6,7 +6,7 @@
         </div>
         <div class="menu-li ylsq" @click="navgo('plantScreen')">
         </div>
-        <div class="menu-li ylyz"  @click="navgo('plantScreen')">
+        <div class="menu-li ylyz"  @click="navgo('breedScreen')">
         </div>
     </div>
 </template> 

src/view/plantScreen/index.vue

@@ -11,15 +11,14 @@
     <button @click="sendFn('choseLand', { landName: item.title,id:item.id })" v-for="item in landList"> {{ item.title }}</button>
     <button @click="sendFn('backHome', { name: '泸县' }), townCode = ''">返回首页</button>
     <button @click="sendFn('detail', { name: item.title,id:item.id })" v-for="item in landList"> {{ item.title }}</button>
-
     <p>地块</p> -->
-    <div class="content">
+    <div class="content" v-if="flag">
-        <div class="hexagon"></div>
+        <div class="plant-li" v-for="item in 10">
-
+            究极地块
-
+        </div>
     </div>
 
-
+    <areaChose v-else></areaChose>
     <div class="area" @click="flag = !flag">
         <div class="area-top">
             <div class="town">江陽區</div>
@@ -33,7 +32,9 @@ import { ref, reactive } from "vue"
 import { sendMsg } from "@/api.js"
 import axios from "axios"
 import { landListApi } from "@/api.js"
+import areaChose from "../components/areaChose.vue"
 
+const flag = ref(true)
 
 // 镇列表
 const options = [
@@ -127,41 +128,28 @@ const sendFn = (event, data = '') => {
 }
 </script>
 <style lang="scss" scoped>
-.content{
+.content {
-    width: 100vw;
+    height: 500px;
-    height: 100vh;
+    width: 90vw;
-    // background-color: white;
-}
-
-.hexagon {
-  width: 100px;
-  height: 55px;
-  background-color: #f00;
-  position: relative;
-  margin: 50px;
-  transform: rotate(60deg);
-}
-
-.hexagon:before,
-.hexagon:after {
-  content: "";
     position: absolute;
-  top: 0;
+    top: 50%;
-  left: 0;
+    left: 50%;
-  width: inherit;
+    transform: translate(-50%, -50%);
-  height: inherit;
+    box-sizing: border-box;
-  background-color: inherit;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    overflow-y: auto;
+    .plant-li {
+        width: 165.9px;
+        height: 190.48px;
+        background-image: url('/static/img/plantScreen/A.png');
+        text-align: center;
+        line-height: 190.48px;
+        color: white;
+    }
 }
 
-.hexagon:before {
-  transform: rotate(-60deg);
-}
-
-.hexagon:after {
-  transform: rotate(120deg);
-}
-
-
 .area {
     position: absolute;
     font-size: 20px;
@@ -193,4 +181,5 @@ const sendFn = (event, data = '') => {
     background-size: 100% 100%;
     transform: translateY(-20px);
 }
+
 </style>

src/view/tradeScreen/index.vue

@@ -1,13 +1,15 @@
 <template>
+    <img src="/static/img/tradeScreen/FH.png" @click="router.go(-1)" class="back-btn" alt="">
+
     <div style="height: 100vh;">
-            <div class="menu" v-if="flag">
+            <div class="tradmenu" v-if="flag">
-                <div class="menu-li sy"></div>
+                <div class="tradmenu-li sy"></div>
-                <div class="menu-li sc"></div>
+                <div class="tradmenu-li sc"></div>
-                <div class="menu-li sc"></div>
+                <div class="tradmenu-li sh" @click="router.push('/storeLogin')"></div>
-                <div class="menu-li sc"></div>
+                <div class="tradmenu-li dd"></div>
-                <div class="menu-li sc"></div>
+                <div class="tradmenu-li cw"></div>
             </div>
-            <div v-if="!flag">
+            <div v-else>
                 <areaChose></areaChose>
             </div>
         </div>
@@ -46,7 +48,10 @@ import { ref, reactive } from "vue"
 import { sendMsg } from "@/api.js"
 import axios from "axios"
 import areaChose from "@/view/components/areaChose.vue"
+import {useRouter} from "vue-router"
+const router =useRouter()
 
+const flag=ref(true)
 const options = [
     {
         value: '510502',
@@ -77,16 +82,10 @@ const options = [
     },
 ]
 
-const toArea=()=>{
-
-}
-
-
 const townOptions = []
 
 const areaCode = ref('510521')
 const townCode = ref("")
-const flag=ref(true)
 
 
 const changeArea = (e) => {
@@ -135,7 +134,7 @@ const sendFn = (event, data = '') => {
 
 </script>
 <style lang="scss" scoped>
-.menu {
+.tradmenu {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -143,7 +142,7 @@ const sendFn = (event, data = '') => {
 
 }
 
-.menu-li {
+.tradmenu-li {
     width: 185.56px;
     height: 213.05px;
     background-size: 100% 100%;
@@ -151,12 +150,24 @@ const sendFn = (event, data = '') => {
 }
 
 .sy {
-    background-image: url('/static/img/tradeScreen/SC.png');
+    background-image: url('/static/img/tradeScreen/SY.png');
 }
 
 .sc {
     background-image: url('/static/img/tradeScreen/SC.png');
 
+}
+.sh {
+    background-image: url('/static/img/tradeScreen/SH.png');
+
+}
+.dd {
+    background-image: url('/static/img/tradeScreen/DD.png');
+
+}
+.cw {
+    background-image: url('/static/img/tradeScreen/CW.png');
+
 }
 
 .area {
@@ -193,5 +204,13 @@ const sendFn = (event, data = '') => {
     transform: translateY(-20px);
 }
 
+.back-btn {
+    width: 86.21px;
+    height: 31px;
+    position: absolute;
+    top: 70px;
+    left: 60.96px;
+    z-index: 9;
 
+}
 </style>

src/view/tradeScreen/storeLogin.vue

@@ -0,0 +1,142 @@
+<template>
+    <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 in 9">
+            <div class="card-tit">
+                究极公司
+                <span style="font-size: 16px;color: white;">2024-01-21</span>
+            </div>
+            <div class="card-cotnet">
+                <div>商户姓名: 为对方</div>
+                <div style="margin: 20px 0;">商户属地: 为对方</div>
+                <div>商户分类: 为对方</div>
+                <div class="login">登录</div>
+            </div>
+        </div>
+    </div>
+    <areaChose v-else></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>
+<style lang="scss">
+.cont {
+    height: 500px;
+    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/tradeScreen/SHBG.png');
+        background-size: 100% 100%;
+        font-size: 16px;
+        padding: 10px;
+        color: white;
+
+        .card-tit {
+            color: #00D6DD;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 10px;
+        }
+        .card-cotnet{
+            margin-top: 25px;
+            .login{
+                margin: 0 auto;
+                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;
+            }
+        }
+
+    }
+
+    // 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>
+<script setup >
+import {useRouter} from "vue-router"
+import {ref,reactive} from "vue"
+import areaChose from "../components/areaChose.vue";
+
+const router=useRouter()
+const flag=ref(true)
+
+</script>