feat:添加头部样式和四周阴影

src/components/charts/barChart.vue

@@ -27,8 +27,31 @@ const myChart = ref(null);
 const options = ref(null);
 
 const initData = () => {
-  barOption[props.styleName].xAxis.data = props.xData;
-  barOption[props.styleName].series[0].data = props.yData;
+  if (props.styleName === "styleName2") {
+    const arr = [];
+    props.yData.forEach((item, index) => {
+      arr.push({
+        value:item.startNum,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: item.startColor,
+            },
+            {
+              offset: 1,
+              color: item.endColor,
+            },
+          ]),
+        },
+      });
+
+    });
+    barOption[props.styleName].series[0].data = arr
+  } else {
+    barOption[props.styleName].xAxis.data = props.xData;
+    barOption[props.styleName].series[0].data = props.yData;
+  }
   options.value = barOption[props.styleName];
   myChart.value.setOption(options.value);
 };

src/components/charts/options/barOption.js

@@ -32,7 +32,7 @@ const commonStyle = {
     bottom: "0%",
     containLabel: true,
   },
-}
+};
 
 const styleName1 = {
   ...commonStyle,
@@ -59,7 +59,7 @@ const styleName1 = {
         ]),
         borderRadius: [2, 2, 0, 0],
       },
-    }
+    },
   ],
 };
 
@@ -70,7 +70,7 @@ const styleName2 = {
       data: [32, 40, 42],
       type: "bar",
       barWidth: 26,
-      stack: 'total',
+      stack: "total",
       label: {
         show: true,
         color: "#fff",
@@ -91,24 +91,24 @@ const styleName2 = {
       },
     },
     {
-      data: [0,22, 28],
+      data: [0, 22, 28],
       type: "bar",
       barWidth: 26,
-      stack: 'total',
+      stack: "total",
       itemStyle: {
-         color: 'rgba(56,56,56,0.94)',
-         borderRadius: [2, 2, 0, 0],
+        color: "rgba(56,56,56,0.94)",
+        borderRadius: [2, 2, 0, 0],
       },
       label: {
-         show: true,
-         position: 'insideTop',
-         color: '#fff',
-         formatter:({value})=>{
-          return value?value:''
-         }
-      }
-   },
+        show: true,
+        position: "insideTop",
+        color: "#fff",
+        formatter: ({ value }) => {
+          return value ? value : "";
+        },
+      },
+    },
   ],
 };
 
-export const barOption = {styleName1,styleName2};
+export const barOption = { styleName1, styleName2 };

src/components/fnHeader.vue

@@ -5,17 +5,30 @@
       <span>飞鸟智慧巡园平台</span>
       <img src="@/assets/images/common/logo-icon.png" alt="" />
     </div>
-    <div class="date">
-      <div>111</div>
+    <div class="date" v-show="showDate">
+      <el-icon size="25"><MoreFilled /></el-icon>
       <div class="time">
         <div>21:05:46</div>
         <span>2024.11.04 星期一</span>
       </div>
     </div>
   </div>
+  <!-- 四个方向的阴影 -->
+  <div class="page-shadow">
+    <div class="page-bg bg-top"></div>
+    <div class="page-bg bg-right"></div>
+    <div class="page-bg bg-bottom"></div>
+    <div class="page-bg bg-left"></div>
+  </div>
 </template>
 
 <script setup>
+const props = defineProps({
+  showDate:{
+    type:Boolean,
+    defalut:false
+  }
+})
 </script>
 
 <style lang="scss" scoped>
@@ -24,9 +37,9 @@
   height: 74px;
   display: flex;
   justify-content: space-between;
-  background: #101010;
   box-sizing: border-box;
   pointer-events: all;
+  position: relative;
 
   .title {
     width: 100%;
@@ -46,7 +59,51 @@
   .date {
     display: flex;
     align-items: center;
-    width: 180px;
+    position: absolute;
+    right: 30px;
+    top: 24px;
+    .time{
+      margin-left: 14px;
+      line-height: 18px;
+      div{
+        font-family: "PangMenZhengDao";
+        letter-spacing: 1px;
+        font-size: 16px;
+      }
+      span{
+        font-size: 11px;
+        font-family: 'SOURCEHANTIFINE';
+      }
+    }
   }
 }
+// 阴影样式
+.page-bg{
+  position: fixed;
+  z-index: -1;
+}
+.bg-top{
+  top: 0;
+  width: 100%;
+  height: 200px;
+  background: linear-gradient( 0deg, rgba(0, 21, 31,0), #00151f);
+}
+.bg-right{
+  right: 0;
+  width: 600px;
+  height: 100%;
+  background: linear-gradient( 90deg, rgba(0, 21, 31,0), rgb(0, 21, 31,0.7));
+}
+.bg-bottom{
+  bottom: 0;
+  width: 100%;
+  height: 200px;
+  background: linear-gradient( 180deg, rgba(0, 21, 31,0), rgb(0, 21, 31,0.7));
+}
+.bg-left{
+  left: 0;
+  width: 600px;
+  height: 100%;
+  background: linear-gradient( 270deg, rgba(0, 21, 31,0), rgb(0, 21, 31,0.7));
+}
 </style>

src/views/home/components/homePage.vue

@@ -60,13 +60,21 @@ import pieChart from "@/components/charts/pieChart.vue";
 
 // 物候调节
 const phenologyXData = ["萌动小叶", "红黄相间", "新梢老熟"]
-const phenologyYData = [44, 33, 30]
-const aaa = [{
-  "a":[44, 33, 30],
-  aa:'22',
+const phenologyYData = [{
+  startNum:44,
+  endNum:0,
+  startColor:"#E6AD00",
+  endColor:"#232323"
 },{
-  "b":[0,22, 28],
-  bb:'33'
+  startNum:33,
+  endNum:22,
+  startColor:"#FF7C8F",
+  endColor:"#232323"
+},{
+  startNum:30,
+  endNum:28,
+  startColor:"#0BFE13",
+  endColor:"#232323"
 }]
 
 // 病虫测报

src/views/home/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="base-container no-events">
-    <fnHeader></fnHeader>
+    <fnHeader showDate></fnHeader>
     <div class="content">
       <!-- <div class="top"></div> -->
       <div class="left yes-events">