From 4b2a661487c643323cf0092262e9874e5f125d20 Mon Sep 17 00:00:00 2001
From: weipengfei <2187978347@qq.com>
Date: Mon, 18 Dec 2023 17:56:09 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                         |   9 +
 package.json                              |   1 +
 src/components/areaList.vue               |  29 +-
 src/components/headView.vue               |   2 +-
 src/main.js                               |   2 +-
 src/view/delivery/components/bottom.vue   |   2 +
 src/view/delivery/components/left.vue     |   5 +-
 src/view/delivery/components/right.vue    |   5 +-
 src/view/index/components/centerItem1.vue |   4 +-
 src/view/index/components/centerMap.vue   | 382 +++++++++++++++++-----
 src/view/login/index.vue                  |   2 +-
 11 files changed, 348 insertions(+), 95 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f8405f6..bf09db6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "echarts-gl": "^2.0.9",
         "mitt": "^3.0.1",
         "pinia": "^2.1.7",
+        "v-click-outside": "^3.2.0",
         "vue": "^3.3.8",
         "vue-router": "^4.2.5"
       },
@@ -1229,6 +1230,14 @@
       "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
       "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     },
+    "node_modules/v-click-outside": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/v-click-outside/-/v-click-outside-3.2.0.tgz",
+      "integrity": "sha512-QD0bDy38SHJXQBjgnllmkI/rbdiwmq9RC+/+pvrFjYJKTn8dtp7Penf9q1lLBta280fYG2q53mgLhQ+3l3z74w==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/vite": {
       "version": "5.0.2",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-5.0.2.tgz",
diff --git a/package.json b/package.json
index 52466e4..89418aa 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "echarts-gl": "^2.0.9",
     "mitt": "^3.0.1",
     "pinia": "^2.1.7",
+    "v-click-outside": "^3.2.0",
     "vue": "^3.3.8",
     "vue-router": "^4.2.5"
   },
diff --git a/src/components/areaList.vue b/src/components/areaList.vue
index ea85665..23f0265 100644
--- a/src/components/areaList.vue
+++ b/src/components/areaList.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { defineProps, defineEmits, ref, nextTick, onMounted, } from "vue"
+import { defineProps, defineEmits, ref, nextTick, onMounted, onUnmounted, } from "vue"
 import { useRouter } from 'vue-router'
 import { useAppStore } from "@/store/app.js";
 
@@ -80,19 +80,28 @@ defineExpose({
   open, close, show
 })
 
+const addressRef = ref(null);
+
+const onClickOutside = (event) => {
+  const componentElement = addressRef.value;
+  if (!componentElement?.contains(event.target)) {
+    choseArea.value = false;
+  }
+}
+
 onMounted(() => {
-  // list.value.forEach(item => {
-  //   if (item.pinyin == appStore.map_info) {
-  //     choseTownFn(item)
-  //   }
-  // })
+  document.addEventListener('click', onClickOutside);
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', onClickOutside);
 })
 
 </script>
 
 <template>
-  <transition name="fade">
-    <div class="address" v-show="choseArea == true">
+  <transition name="fade" mode="out-in">
+    <div ref="addressRef" class="address" v-if="choseArea == true">
       <div
         class="address-li"
         @click="choseTownFn(item)"
@@ -110,8 +119,8 @@ onMounted(() => {
   left: 1vw;
   top: 18px;
   position: absolute;
-  width: 10vw;
-  height: 18vh;
+  width: 8rem;
+  height: 15rem;
   background-color: #001e32;
   color: #c7dbe3;
   z-index: 9999;
diff --git a/src/components/headView.vue b/src/components/headView.vue
index adfbf04..d0ccdeb 100644
--- a/src/components/headView.vue
+++ b/src/components/headView.vue
@@ -142,7 +142,7 @@ onMounted(() => {
     </div>
     <div class="head-title">吟龙物流信息监控溯源可视化大屏</div>
     <div class="right">
-      <div class="item" @click="open" style="position: relative">
+      <div class="item" @click.stop="open" style="position: relative">
         <img src="/src/assets/head_img/location.png" alt="" />
         {{ info.address }}  
         <areaList
diff --git a/src/main.js b/src/main.js
index 61ecf54..ab7beff 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,7 +4,7 @@ import App from './App.vue'
 import dataV from '@jiaminghi/data-view'
 import './assets/font/fonts.css';
 import router from "./router";
-import { createPinia } from 'pinia'
+import { createPinia } from 'pinia';
 
 const pinia = createPinia();
 
diff --git a/src/view/delivery/components/bottom.vue b/src/view/delivery/components/bottom.vue
index f95f945..0a6efd7 100644
--- a/src/view/delivery/components/bottom.vue
+++ b/src/view/delivery/components/bottom.vue
@@ -366,6 +366,7 @@ const initInfo = () => {
   dateCangeCrderCount({
     areaCode: appStore.delivery_address.areaCode,
     streetCode: appStore.delivery_address.streetCode,
+    courier_id: appStore.delivery_address.courier_id
   }).then(({ data }) => {
     let y1 = [], y2 = [], y3 = [], y4 = [];
     data.forEach((item) => {
@@ -383,6 +384,7 @@ const initInfo = () => {
 const pages = ref({
   areaCode: appStore.delivery_address.areaCode,
   streetCode: appStore.delivery_address.streetCode,
+  courier_id: appStore.delivery_address.courier_id,
   page: 1,
   limit: 30
 })
diff --git a/src/view/delivery/components/left.vue b/src/view/delivery/components/left.vue
index 5f56df4..7a5fb13 100644
--- a/src/view/delivery/components/left.vue
+++ b/src/view/delivery/components/left.vue
@@ -145,12 +145,14 @@ const loadInfo = () => {
   latestLogistics({
     areaCode: appStore.delivery_address.areaCode,
     streetCode: appStore.delivery_address.streetCode,
+    courier_id: appStore.delivery_address.courier_id
   }).then(res => {
     info.value = res.data;
   })
   logisticsCount({
     areaCode: appStore.delivery_address.areaCode,
-    streetCode: appStore.delivery_address.streetCode
+    streetCode: appStore.delivery_address.streetCode,
+    courier_id: appStore.delivery_address.courier_id
   }).then(res => {
     delivery.value = res.data;
     datas.dataArr[0].value = res.data.pending_order_count;
@@ -434,6 +436,7 @@ onMounted(() => {
       height: 100%;
       box-shadow: inset 1px 1px 40px rgba(91, 219, 246, 0.5);
       pointer-events: none;
+      overflow: hidden;
     }
   }
   .delivery {
diff --git a/src/view/delivery/components/right.vue b/src/view/delivery/components/right.vue
index a83fa5a..708ad18 100644
--- a/src/view/delivery/components/right.vue
+++ b/src/view/delivery/components/right.vue
@@ -28,8 +28,9 @@ const max = ref(0)
 
 const loadList = () => {
   deliveredProductRanking({
-    areaCode: appStore.address.areaCode,
-    streetCode: appStore.address.streetCode,
+    areaCode: appStore.delivery_address.areaCode,
+    streetCode: appStore.delivery_address.streetCode,
+    courier_id: appStore.delivery_address.courier_id
   }).then((res) => {
     items.value = res.data;
     res.data.forEach(e => {
diff --git a/src/view/index/components/centerItem1.vue b/src/view/index/components/centerItem1.vue
index d66015e..26b2557 100644
--- a/src/view/index/components/centerItem1.vue
+++ b/src/view/index/components/centerItem1.vue
@@ -33,9 +33,9 @@ onMounted(() => {
 
 <template>
   <div class="box">
-    <div class="ball">
+    <!-- <div class="ball">
       <ball class="ball1"></ball>
-    </div>
+    </div> -->
     <centerMap v-if="list.length > 0" class="c-map" :list="list"></centerMap>
   </div>
 </template>
diff --git a/src/view/index/components/centerMap.vue b/src/view/index/components/centerMap.vue
index e7b091b..3416332 100644
--- a/src/view/index/components/centerMap.vue
+++ b/src/view/index/components/centerMap.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { onMounted, reactive, ref, inject, nextTick } from "vue";
-import * as echarts from 'echarts';
+import * as echarts from "echarts";
 import mitt from "@/utils/mitt";
 import luxian from "@/assets/json/luxian.json";
 import hejiang from "@/assets/json/hejiang.json";
@@ -21,65 +21,66 @@ const userStore = useUserStore();
 const props = defineProps({
   list: {
     type: Object,
-    default: () => []
-  }
-})
+    default: () => [],
+  },
+});
 
 const mapType = reactive({
-  name: '',
-  json: ''
-})
+  name: "",
+  json: "",
+});
 
-const changeType = (name = 'luxian') => {
+const changeType = (name = "luxian") => {
   mapType.name = name;
-  if (name == 'luxian') mapType.json = luxian;
-  if (name == 'hejiang') mapType.json = hejiang;
-  if (name == 'xuyong') mapType.json = xuyong;
-  if (name == 'gulin') mapType.json = gulin;
-  if (name == 'jiangyang') mapType.json = jiangyang;
-  if (name == 'longma') mapType.json = longma;
-  if (name == 'naxi') mapType.json = naxi;
-}
+  if (name == "luxian") mapType.json = luxian;
+  if (name == "hejiang") mapType.json = hejiang;
+  if (name == "xuyong") mapType.json = xuyong;
+  if (name == "gulin") mapType.json = gulin;
+  if (name == "jiangyang") mapType.json = jiangyang;
+  if (name == "longma") mapType.json = longma;
+  if (name == "naxi") mapType.json = naxi;
+};
 
-let dataValue = []
+let dataValue = [];
 
 const customFormatter = (params) => {
   // console.log(params.data);
   // return `{img|${params.data.street_name}}\n{t|店铺${params.data.mer_count}个, 团队${params.data.service_group_count}个}`
-  return ''
-}
+  return "";
+};
 
 const initDataValue = () => {
-  dataValue.forEach(item => {
+  dataValue.forEach((item) => {
     item.label = {
       show: true, // 显示标签
       formatter: customFormatter, // 标签内容，这里使用{name}表示数据项的name属性
       fontSize: 12, // 字体大小
-      fontWeight: 'bold', // 字体粗细
-      color: '#fff', // 字体颜色
+      fontWeight: "bold", // 字体粗细
+      color: "#fff", // 字体颜色
       offset: [-50, -40], // 标签偏移量，可根据需要调整
       rich: {
         img: {
           backgroundColor: {
-            image: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/205f0202311291015185408.png'
+            image:
+              "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/205f0202311291015185408.png",
           },
           height: 40,
           width: 140,
-          color: '#fff',
+          color: "#fff",
           fontSize: 14,
           lineHeight: 14,
-          fontFamily: 'ifonts',
-          align: 'center',
-          padding: [0, 0, 20, 0]
+          fontFamily: "ifonts",
+          align: "center",
+          padding: [0, 0, 20, 0],
         },
         t: {
           fontSize: 10,
-          align: 'center'
-        }
-      }
+          align: "center",
+        },
+      },
     };
-  })
-}
+  });
+};
 
 const echartsRef = ref(null);
 let chart = null;
@@ -96,11 +97,11 @@ const initMap = () => {
     title: {
       text: mapType.name,
       textStyle: {
-        color: '#fff',
-        fontSize: 20
+        color: "#fff",
+        fontSize: 20,
       },
-      top: '10%',
-      left: '10%'
+      top: "10%",
+      left: "10%",
     },
     //geo方式地理坐标系组件。
     geo: [
@@ -111,17 +112,17 @@ const initMap = () => {
           show: false,
         },
         emphasis: {
-          disabled: true
+          disabled: true,
         },
         select: {
-          disabled: true
+          disabled: true,
         },
         // aspectScale:0.75, //长宽比
         //   roam: true, //是否允许缩放
         itemStyle: {
           normal: {
-            // color: '#546686', //地图背景色    
-            borderColor: '#fff', //省市边界线00fcff 516a89
+            // color: '#546686', //地图背景色
+            borderColor: "#fff", //省市边界线00fcff 516a89
             borderWidth: 1,
             areaColor: "#3f5171",
             shadowColor: "#5bdbf6",
@@ -140,16 +141,16 @@ const initMap = () => {
         roam: false, //是否开启平游或缩放
         show: true,
         tooltip: {
-          show: false  // 取消鼠标移上去时的文字提示
+          show: false, // 取消鼠标移上去时的文字提示
         },
         label: {
-          show: false
+          show: false,
         },
         emphasis: {
-          disabled: true
+          disabled: true,
         },
         select: {
-          disabled: true
+          disabled: true,
         },
         itemStyle: {
           normal: {
@@ -169,11 +170,11 @@ const initMap = () => {
       },
     ],
     tooltip: {
-      trigger: 'item',
+      trigger: "item",
       formatter: function (params) {
-        let obj = dataValue.find(item => item.street_name == params.name);
+        let obj = dataValue.find((item) => item.street_name == params.name);
         if (!obj) {
-          obj = params.data
+          obj = params.data;
         }
         if (obj) {
           return `<div 
@@ -184,22 +185,28 @@ const initMap = () => {
                     align-items: center;
                     width: 180px;
                     height: 80px;">
-                      <div style="font-size: 15px;font-family: 'ifonts';">${obj?.street_name || ''}</div>
+                      <div style="font-size: 15px;font-family: 'ifonts';">${
+                        obj?.street_name || ""
+                      }</div>
                       <div style="font-size: 12px;">
-                        <p style="padding: 0;margin: 0">店铺:${obj?.mer_count || '0'}个</p>  
-                        <p style="padding: 0;margin: 0">团队:${obj?.service_group_count || '0'}个</p>  
+                        <p style="padding: 0;margin: 0">店铺:${
+                          obj?.mer_count || "0"
+                        }个</p>  
+                        <p style="padding: 0;margin: 0">团队:${
+                          obj?.service_group_count || "0"
+                        }个</p>  
                       </div>
                     </div>`;
-        } else return '';
+        } else return "";
       },
-      position: 'top',
+      position: "top",
       // extraCssText: 'background-color: transparent; border: none;pdding: 0;', // 设置额外的 CSS 样式
-      backgroundColor: 'rgba(0, 156, 255, 0)', //设置背景颜色
+      backgroundColor: "rgba(0, 156, 255, 0)", //设置背景颜色
       borderColor: "rgba(0, 156, 255, 0)",
       padding: 0,
       textStyle: {
-        color: '#fff'
-      }
+        color: "#fff",
+      },
     },
     series: [
       {
@@ -207,15 +214,15 @@ const initMap = () => {
         map: mapType.name,
         label: {
           emphasis: {
-            show: false
+            show: false,
           },
-          color: 'rgba(0,0,0,0)'
+          color: "rgba(0,0,0,0)",
         },
         emphasis: {
           disabled: false,
         },
         select: {
-          disabled: true
+          disabled: true,
         },
         itemStyle: {
           normal: {
@@ -224,8 +231,8 @@ const initMap = () => {
             borderWidth: 1,
           },
           emphasis: {
-            areaColor: '#0680ca',  // 鼠标经过时的背景色
-          }
+            areaColor: "#0680ca", // 鼠标经过时的背景色
+          },
         },
       },
       {
@@ -233,58 +240,279 @@ const initMap = () => {
         type: "scatter",
         coordinateSystem: "geo",
         data: dataValue,
-        symbol: "image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6eb37202311281655342626.png",
+        symbol:
+          "image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6eb37202311281655342626.png",
         symbolSize: [40, 30],
         hoverSymbolSize: [60, 45],
         label: {
           formatter: "",
           position: "center",
-          show: false
+          show: false,
         },
         emphasis: {
           label: {
-            show: false
-          }
-        }
+            show: false,
+          },
+        },
       },
     ],
-  }
+  };
+  option = {
+    geo: [
+      {
+        type: "map",
+        map: mapType.name,
+        aspectScale: 1,
+        zoom: 1,
+        layoutCenter: ["50%", "51%"],
+        layoutSize: "110%",
+        roam: false,
+        label: {
+          emphasis: {
+            show: false,
+          },
+        },
+        show: true,
+        map: mapType.name,
+        zoom: 1,
+        aspectScale: 1,
+        roam: false,
+        itemStyle: {
+          normal: {
+            areaColor: "transparent",
+          },
+          emphasis: {
+            areaColor: {
+              type: "radial", // linear 线性渐变  radial径向渐变
+              x: 0.5, // 0.5为正中心，如果小于渐变中心靠左
+              y: 0.5, // 0.5为正中心，如果小于渐变中心靠上
+              r: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: "#A46759", // 0% 处的颜色
+                },
+                {
+                  offset: 0.1,
+                  color: "#A46759", // 0% 处的颜色
+                },
+
+                {
+                  offset: 1,
+                  color: "#FFB821", // 100% 处的颜色
+                },
+              ],
+            },
+
+            // borderWidth: 0
+          },
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: function (params) {
+            let obj = dataValue.find((item) => item.street_name == params.name);
+            if (!obj) {
+              obj = params.data;
+            }
+            if (obj) {
+              return `<div 
+                        style="background-image: url(\'/src/assets/img/item-box.png\');
+                        background-size: 100% 100%;
+                        display: flex;
+                        justify-content: space-evenly;
+                        align-items: center;
+                        width: 180px;
+                        height: 80px;">
+                          <div style="font-size: 15px;font-family: 'ifonts';">${
+                            obj?.street_name || ""
+                          }</div>
+                          <div style="font-size: 12px;">
+                            <p style="padding: 0;margin: 0">店铺:${
+                              obj?.mer_count || "0"
+                            }个</p>  
+                            <p style="padding: 0;margin: 0">团队:${
+                              obj?.service_group_count || "0"
+                            }个</p>  
+                          </div>
+                        </div>`;
+            } else return "";
+          },
+          position: "top",
+          // extraCssText: 'background-color: transparent; border: none;pdding: 0;', // 设置额外的 CSS 样式
+          backgroundColor: "rgba(0, 156, 255, 0)", //设置背景颜色
+          borderColor: "rgba(0, 156, 255, 0)",
+          padding: 0,
+          textStyle: {
+            color: "#fff",
+          },
+        },
+      },
+
+      {
+        type: "map",
+        map: mapType.name,
+        zlevel: -1,
+        aspectScale: 1,
+        zoom: 1,
+        layoutCenter: ["50%", "51%"],
+        layoutSize: "110%",
+        roam: false,
+        silent: true,
+
+        itemStyle: {
+          normal: {
+            borderWidth: 1,
+            borderColor: "rgba(17, 149, 216,0.6)",
+            borderColor: "#5AD0E0",
+            shadowColor: "rgba(172, 122, 255,0.5)",
+            shadowOffsetY: 5,
+            shadowBlur: 15,
+            areaColor: "rgba(5,21,35,0.1)",
+          },
+        },
+      },
+
+      {
+        type: "map",
+        map: mapType.name,
+        zlevel: -1,
+        aspectScale: 1,
+        zoom: 1,
+        layoutCenter: ["50%", "52%"],
+        layoutSize: "110%",
+        roam: false,
+        silent: true,
+
+        itemStyle: {
+          normal: {
+            borderWidth: 1,
+            borderColor: "rgba(17, 149, 216,0.6)",
+            borderColor: "#5AD0E0",
+            shadowColor: "rgba(172, 122, 255,0.5)",
+            shadowOffsetY: 5,
+            shadowBlur: 15,
+            areaColor: "rgba(5,21,35,0.1)",
+          },
+        },
+      },
+
+      {
+        type: "map",
+        map: mapType.name,
+        zlevel: -2,
+        aspectScale: 1,
+        zoom: 1,
+        layoutCenter: ["50%", "53%"],
+        layoutSize: "110%",
+        roam: false,
+        silent: true,
+
+        itemStyle: {
+          normal: {
+            borderWidth: 1,
+            borderColor: "rgba(17, 149, 216,0.4)",
+            borderColor: "#5AD0E0",
+            shadowColor: "rgba(172, 122, 255,0.5)",
+            shadowOffsetY: 5,
+            shadowBlur: 15,
+            areaColor: "rgba(5,21,35,0.1)",
+          },
+        },
+      },
+
+      {
+        type: "map",
+        map: mapType.name,
+        zlevel: -4,
+        aspectScale: 1,
+        zoom: 1,
+        layoutCenter: ["50%", "54%"],
+        layoutSize: "110%",
+        roam: false,
+        silent: true,
+
+        itemStyle: {
+          normal: {
+            borderWidth: 5,
+            // borderColor: "rgba(11, 43, 97,0.8)",
+            borderColor: "rgba(5,9,57,0.8)",
+            shadowColor: "rgba(29, 111, 165,0.8)",
+            shadowOffsetY: 15,
+            shadowBlur: 10,
+            areaColor: "rgba(5,21,35,0.1)",
+          },
+        },
+      },
+    ],
+    tooltip: {
+      show: true
+    },
+    color: '#1f7df5',
+    series: [
+      {
+        name: "地点名称",
+        type: "effectScatter",
+        coordinateSystem: "geo",
+        colorBy: 'series',
+        rippleEffect: {
+          period: 4, //动画时间，值越小速度越快
+          brushType: "fill", //波纹绘制方式 stroke, fill
+          scale: 12, //波纹圆环最大限制，值越大波纹越大
+          number: 2,
+        },
+        // 发散点的大小
+        symbolSize: function (val) {
+          return 4;
+          // return val[2] / 10;
+        },
+        data: dataValue,
+      },
+    ],
+  };
   // 使用配置项显示图表
   chart.setOption(option);
-}
+};
 
 const mapInfo = () => {
-  let area = appStore.area.find(item => item.code == appStore.address.areaCode);
+  let area = appStore.area.find(
+    (item) => item.code == appStore.address.areaCode
+  );
   let map;
   if (area.name == "泸县") map = luxian_geo;
   if (area.name == "江阳区") map = jiangyang_geo;
   if (area.name == "叙永县") map = xuyong_geo;
   map = JSON.parse(JSON.stringify(map));
   if (appStore.address.streetCode) {
-    let street = appStore.street.find(item => item.code == appStore.address.streetCode);
+    let street = appStore.street.find(
+      (item) => item.code == appStore.address.streetCode
+    );
     initStreetMap(street, map);
+    dataValue = dataValue.filter(
+      (item) => item.street_code == appStore.address.streetCode
+    );
   } else {
     mapType.name = area.name;
     mapType.json = map;
   }
-}
+};
 
 const initStreetMap = (street, map) => {
-  map.features = map.features.filter(item => item.properties.name == street.name);
+  map.features = map.features.filter(
+    (item) => item.properties.name == street.name
+  );
   mapType.name = street.name;
   mapType.json = map;
-}
+};
 
 onMounted(() => {
   dataValue = props.list;
-  changeType('xuyong');
+  changeType("xuyong");
   mapInfo();
-  initDataValue();
+  // initDataValue();
   setTimeout(() => {
     initMap();
-  })
-})
-
+  });
+});
 </script>
 
 <template>
diff --git a/src/view/login/index.vue b/src/view/login/index.vue
index fae39af..047ac3f 100644
--- a/src/view/login/index.vue
+++ b/src/view/login/index.vue
@@ -123,7 +123,7 @@ const submit = () => {
 .login-box {
   width: 100%;
   height: 100%;
-  background-image: url(../../assets/login_img/bg.png);
+  background-image: url(https://lihai001.oss-cn-chengdu.aliyuncs.com/def/a0732202312131402421186.png);
   background-size: 100% 100%;
   overflow: hidden;
   position: relative;