feat:添加巡园页面图片

src/components/fnHeader.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="header">
     <div class="title">
-      <img src="@/assets/images/common/logo.png" alt="" />
-      <span>飞鸟智慧确权平台</span>
-      <img src="@/assets/images/common/logo-icon.png" alt="" />
+      <img class="logo" src="@/assets/images/common/logo.png" alt="" />
+      <span>飞鸟智慧巡园平台</span>
+      <img class="logo-icon" src="@/assets/images/common/logo-icon.png" alt="" />
     </div>
     <div class="date" v-show="showDate">
       <el-icon size="25"><MoreFilled /></el-icon>
@@ -46,11 +46,20 @@ const props = defineProps({
     height: 100%;
     font-size: 24px;
     letter-spacing: 2px;
-    line-height: 72px;
     padding-left: 20px;
+    display: flex;
+    align-items: center;
     box-sizing: border-box;
     background: url("@/assets/images/common/header-bg.png") no-repeat center
       center / 100% 100%;
+      .logo{
+        width: 23px;
+        height: 26px;
+      }
+      .logo-icon{
+        width: 33px;
+        height: 12px;
+      }
     span {
       margin: 0 5px;
       font-family: "PangMenZhengDao";

src/components/navigation.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="navigation yes-events">
-    <div class="btn" @click="toPage">农场确权</div>
+    <img class="tabs" src="@/assets/images/home/tabs.png" alt="">
+    <img class="tool" src="@/assets/images/home/tool.png" alt="">
+    <!-- <div class="btn" @click="toPage">农场确权</div> -->
   </div>
 </template>
 
@@ -17,7 +19,19 @@ const toPage = () =>{
 .navigation{
   position: fixed;
   top: 34px;
-  right: 25vw;
+  left: calc(50% - 476px);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  .tabs{
+    width: 952px;
+    height: 43px;
+    margin-bottom: 10px;
+  }
+  .tool{
+    width: 878px;
+    height: 161px;
+  }
   .btn{
     width: 80px;
     height: 30px;

src/components/toolList.vue

@@ -53,7 +53,7 @@ const handleActive = (value,index) =>{
     white-space: nowrap; /* 防止文本换行 */
     line-height: 54px;
     letter-spacing: 6px;
-    color: #B9B9B9;
+    color: #fff;
     font-family: "PangMenZhengDao";
     cursor: pointer;
     height: 100%;
@@ -75,7 +75,7 @@ const handleActive = (value,index) =>{
     }
     &.active{
         background: #101010;
-        color: #2B85E4;
+        color: #FFD489;
     }
   }
 }

src/views/home/components/homePage.vue

@@ -2,6 +2,9 @@
   <div class="chart-list">
     <div class="chart-item">
       <chart-box name="气象预警" arrow="left">
+        <div class="base-wrap">
+          <div class="base-item">111</div>
+        </div>
         <one-line-chart></one-line-chart>
       </chart-box>
     </div>
@@ -13,7 +16,8 @@
         <bar-chart class="bar-chart" styleName="styleName2" :xData="phenologyXData" :yData="phenologyYData"></bar-chart>
         <div class="time-line">
           <div class="line">
-            <time-line></time-line>
+            <!-- <time-line></time-line> -->
+            <img class="time-img" src="@/assets/images/home/time-line.png" alt="">
           </div>
           <div class="tips box-bg">
             物候进程：预计 <span>2天</span> 后第三次秋梢完全老熟，进入控梢期
@@ -21,21 +25,30 @@
         </div>
       </chart-box>
     </div>
-    <div class="chart-item diseases">
+    <div class="chart-item phenology">
       <chart-box name="病虫测报" arrow="left">
-        <template #title-right>
+        <!-- <template #title-right>
           <div class="btn-group">
             <div :class="['btn-item',{active:active===index}]" @click="handleActive(index)" v-for="(item,index) in diseasesBtnGroup" :key="index">{{item}}</div>
           </div>
-        </template>
-        <pie-chart class="pie-chart" styleName="styleName1"></pie-chart>
-        <div class="desc box-bg">
-          异常区域中，<span>xx</span> %区域需要 <span>打药</span>，<span>xx</span> %需要 <span>剪枝通风</span>
+        </template> -->
+        <bar-chart class="bar-chart" styleName="styleName2" :xData="phenologyXData" :yData="phenologyYData"></bar-chart>
+        <div class="time-line">
+          <div class="line">
+            <img class="time-img" src="@/assets/images/home/time-line.png" alt="">
+          </div>
+          <div class="tips box-bg">
+            异常区域中，<span>xx</span> %区域需要 <span>打药</span>，<span>xx</span> %需要 <span>剪枝通风</span>
+          </div>
         </div>
+        <!-- <pie-chart class="pie-chart" styleName="styleName1"></pie-chart> -->
       </chart-box>
     </div>
     <div class="chart-item evaluate">
       <chart-box name="营养评估" arrow="left">
+        <template #title-left>
+          <span class="title-left"> - 肥效比</span>
+        </template>
         <div class="content">
           <bar-chart styleName="styleName1" :xData="evaluateXData" :yData="evaluateYData"></bar-chart>
           <div class="box-bg text">
@@ -43,11 +56,22 @@
           </div>
         </div>
         <div class="text-list box-bg">
-          <div class="text-item" v-for="item in 3" :key="item">
+          <div class="text-item">
+            <div class="circle"></div>
+            <div class="txt">
+              肥效比 低<span>**棵树</span>
+            </div>
+          </div>
+          <div class="text-item">
+            <div class="circle"></div>
+            <div class="txt">
+              肥效比 中<span>**棵树</span>
+            </div>
+          </div>
+          <div class="text-item">
             <div class="circle"></div>
             <div class="txt">
-              物候跨度正常<span>**棵树</span>，
-              跨度<span>2个物候期</span>
+              肥效比 高<span>**棵树</span>
             </div>
           </div>
         </div>
@@ -91,8 +115,8 @@ const handleActive = (i) =>{
 }
 
 // 营养评估
-const evaluateXData = ["正常", "较大", "异常"]
-const evaluateYData = [33, 41, 43]
+const evaluateXData = ["低", "中", "高"]
+const evaluateYData = [33, 40, 52]
 </script>
 
 <style lang="scss" scoped>
@@ -115,6 +139,7 @@ const evaluateYData = [33, 41, 43]
       font-size: 12px;
       padding: 3px 6px;
       box-sizing: border-box;
+      font-family: Arial, Helvetica, sans-serif;
       background: linear-gradient(180deg, rgb(85, 85, 85,0.4) 0%, rgb(35, 35, 35,1) 100%);
       span{
         color: #FFD489;
@@ -122,6 +147,7 @@ const evaluateYData = [33, 41, 43]
     }
     .title-left{
       color: rgba(255,255,255,0.7);
+      font-family: 'SOURCEHANTIFINE';
     }
     &.phenology{
       .bar-chart{
@@ -130,11 +156,15 @@ const evaluateYData = [33, 41, 43]
       }
       .time-line{
         width: 100%;
-        height: 87px;
+        height: calc(45px + 34px + 10px);
         .line{
           width: 100%;
-          height: calc(100% - 34px);
-          margin-bottom: 8px;
+          height: calc(100% - 34px - 10px);
+          margin: 4px 0 6px 0;
+          .time-img{
+            width: 100%;
+            height: 100%;
+          }
         }
         .tips{
           width: 100%;
@@ -163,18 +193,11 @@ const evaluateYData = [33, 41, 43]
         height: calc(100% - 57px - 10px);
         margin-bottom: 10px;
       }
-      .desc{
-        width: 100%;
-        height: 57px;
-        text-indent: 2em;
-        letter-spacing: 1px;
-        color: rgba(255,255,255,0.7);
-      }
     }
     &.evaluate {
       .content {
         width: 100%;
-        height: calc(100% - 68px - 10px);
+        height: calc(100% - 33px - 10px);
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -191,11 +214,14 @@ const evaluateYData = [33, 41, 43]
       }
       .text-list {
         width: 100%;
-        height: 68px;
+        height: 33px;
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
         .text-item{
           display: flex;
           align-items: center;
-          margin-bottom: 5px;
+          
           .circle{
             width: 4px;
             height: 4px;

src/views/home/index.vue

@@ -36,7 +36,11 @@
       </div>
       <div class="right yes-events">
         <div class="list">
-          <chart-box name="农事列表" arrow="arrow-left"></chart-box>
+          <chart-box name="农事列表" arrow="arrow-left">
+            <div class="img-box">
+              <img src="@/assets/images/home/ns.png" alt="">
+            </div>
+          </chart-box>
         </div>
         <tool-list direction="right" :list="rightToolList"></tool-list>
       </div>
@@ -119,10 +123,10 @@ const rightToolList = [
     title: "农事列表",
   },
   {
-    title: "新增农事",
+    title: "复核对比",
   },
   {
-    title: "复核对比",
+    title: "处方分析",
   },
 ];
 
@@ -159,6 +163,16 @@ const toFilePage = () => {
       .list {
         width: 100%;
         height: 100%;
+        .img-box{
+          width: 100%;
+          height: 100%;
+          overflow: hidden;
+        }
+        img{
+          width: 100%;
+          height: auto;
+          object-fit: cover;
+        }
       }
     }
     .home-bottom {
@@ -197,8 +211,9 @@ const toFilePage = () => {
         }
         .edit-btn {
           padding: 2px 24px;
-          background: #2199f8;
+          background: #FFD489;
           border-radius: 4px;
+          color: #000;
         }
       }
     }