diff --git a/src/assets/images/legend-item-1.png b/src/assets/images/legend-item-1.png
new file mode 100644
index 0000000..0b3886f
Binary files /dev/null and b/src/assets/images/legend-item-1.png differ
diff --git a/src/assets/images/legend-item-2.png b/src/assets/images/legend-item-2.png
new file mode 100644
index 0000000..bde6a94
Binary files /dev/null and b/src/assets/images/legend-item-2.png differ
diff --git a/src/assets/images/more-col.png b/src/assets/images/more-col.png
new file mode 100644
index 0000000..b42a93a
Binary files /dev/null and b/src/assets/images/more-col.png differ
diff --git a/src/components/CoreVideo/index.vue b/src/components/CoreVideo/index.vue
index 701e0de..99de71b 100644
--- a/src/components/CoreVideo/index.vue
+++ b/src/components/CoreVideo/index.vue
@@ -64,7 +64,7 @@
     background-color: transparent !important;
   }
   .core-video {
-    margin: vh(10);
+    margin: vw(8);
     width: vw(300);
     border-radius: vw(2);
     background-image: url('@/assets/images/bg-1.png');
@@ -135,7 +135,7 @@
       }
       &-img {
         width: 100%;
-        height: vh(164);
+        height: vw(164);
         display: block;
         object-fit: cover;
       }
diff --git a/src/components/Correspondence/index.vue b/src/components/Correspondence/index.vue
index d98e79c..bdd0353 100644
--- a/src/components/Correspondence/index.vue
+++ b/src/components/Correspondence/index.vue
@@ -49,7 +49,7 @@
 <style lang="scss" scoped>
   .box-4-content {
     position: relative;
-    margin: vh(10);
+    margin: vw(8);
     width: vw(300);
     height: vh(1060);
     background-image: url('@/assets/images/bg-1.png');
diff --git a/src/components/Header/index.vue b/src/components/Header/index.vue
index 434f5b4..af87fdc 100644
--- a/src/components/Header/index.vue
+++ b/src/components/Header/index.vue
@@ -98,12 +98,6 @@
       minute
     )}:${fillZero(second)}`
   }
-  const handleCommand = (e) => {
-    console.log(e, '=========')
-    title.value = e.name
-    otherScenic.value = e.name
-    current.value = ''
-  }
   // 返回上一页
   const handleBack = () => {
     router.go(-1)
@@ -128,8 +122,9 @@
   const setNav = async () => {
     switch (router.currentRoute.value.path) {
       case '/home':
-        isSkip.value = true
         title.value = '奉节县旅游指挥调度中心'
+        isSkip.value = true
+        isBack.value = false
         navLeft.value = [
           { name: '安全', path: '/monitor' },
           { name: '景区', path: '/scenic' },
@@ -286,6 +281,7 @@
         -webkit-background-clip: text;
         background-clip: text;
         -webkit-text-fill-color: transparent;
+        text-shadow: 0 4px 7px rgba(0, 150, 255, 0.75);
         background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
       }
     }
diff --git a/src/components/Map/index.vue b/src/components/Map/index.vue
index cece93b..ef4f9d8 100644
--- a/src/components/Map/index.vue
+++ b/src/components/Map/index.vue
@@ -3,19 +3,7 @@
 </template>
 
 <script setup>
-  import axios from 'axios'
-  const fetchData = async () => {
-    try {
-      const res = await axios.get(
-        'https://jiaotong.baidu.com/openapi/v2/event/alarmlist?nodeId=7162&roadType=1,2,3,4,5&eventSource=1,2,3&ak=hPEEq9eAtL3t1SXL8hqNYQkGmWT1oOWh&returnType=1'
-      )
-      console.log(res, '数据')
-    } catch (error) {
-      console.error(error)
-    }
-  }
   onMounted(() => {
-    // fetchData()
     var map = new BMapGL.Map('container')
     map.centerAndZoom(new BMapGL.Point(109.643452, 31.028006), 15)
     map.enableScrollWheelZoom(true)
@@ -32,11 +20,6 @@
       {
         strokeStyle: 'solid',
         strokeColor: 'red ',
-        // strokeTexture: {
-        //   url: 'https://mapopen-pub-jsapigl.bj.bcebos.com/svgmodel/Icon_road_blue_arrow.png',
-        //   width: 16,
-        //   height: 64
-        // },
         strokeWeight: 4,
         strokeOpacity: 0.8
       }
@@ -52,16 +35,9 @@
   :deep(.anchorBL) {
     display: none;
   }
-  // ::v-deep {
-  //   .BMap_cpyCtrl {
-  //     display: none;
-  //   }
-  //   .anchorBL {
-  //     display: none;
-  //   }
-  // }
   .map {
     width: 100%;
     height: vh(700);
+    background-color: transparent;
   }
 </style>
diff --git a/src/hooks/socket.js b/src/hooks/socket.js
index 655033b..2cb5fda 100644
--- a/src/hooks/socket.js
+++ b/src/hooks/socket.js
@@ -1,9 +1,9 @@
 import { ref } from 'vue'
 
 export function useWebSocket(url) {
-  let socket = ref(null)
-  let data = ref(null)
-  let isConnected = ref(false)
+  let socket = ref(null) // socket对象
+  let data = ref(null) // 存储接收到的数据
+  let isConnected = ref(false) // 是否连接成功
 
   const connectWebSocket = () => {
     socket.value = new WebSocket(url, 'echo-protocol', {
@@ -15,13 +15,6 @@ export function useWebSocket(url) {
     socket.value.onopen = () => {
       isConnected.value = true
       console.log('WebSocket connected')
-      sendMessage(
-        JSON.stringify({
-          action: 'start',
-          type: 'index',
-          scenitspot: 'index'
-        })
-      )
     }
     socket.value.onerror = (error) => {
       console.error('WebSocket error:', error)
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 8d1d75e..2c15c8f 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -38,10 +38,10 @@
   margin-top: vw(8) !important;
 }
 .pt-10 {
-  padding-top: vh(10) !important;
+  padding-top: vw(10) !important;
 }
 .pb-10 {
-  padding-bottom: vh(10) !important;
+  padding-bottom: vw(10) !important;
 }
 .mb-10 {
   margin-bottom: vh(10) !important;
diff --git a/src/views/home/components/age.vue b/src/views/home/components/age.vue
index 308a7ce..5a541e0 100644
--- a/src/views/home/components/age.vue
+++ b/src/views/home/components/age.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="age-ratio" :id="id" />
+  <div class="age" :id="id" />
 </template>
 
 <script setup>
@@ -10,22 +10,27 @@
 
   const homeData = inject('homeData')
 
+  let params = null
+
   watch(
     () => homeData.value?.userPortrait?.ageRate,
     () => {
-      setOption({
-        // tooltip: {
-        //   trigger: 'item'
-        // },
+      init()
+    }
+  )
+  const init = () => {
+    if (!params) {
+      params = {
         legend: {
           orient: 'vertical',
-          left: '60%',
+          left: '54%',
           y: 'center',
           itemHeight: fitChartSize(8),
           itemWidth: fitChartSize(8),
           itemGap: fitChartSize(10),
           formatter: function (name) {
-            return '{name|' + name + '}'
+            let obj = homeData.value?.userPortrait?.ageRate.find((item) => item.name == name)
+            return '{name|' + name + '} {value|' + obj.value + '}{value|%}'
           },
           textStyle: {
             rich: {
@@ -43,8 +48,9 @@
         series: [
           {
             type: 'pie',
+            silent: true,
             center: ['30%', '50%'],
-            radius: ['50%', '70%'],
+            radius: ['60%', '70%'],
             itemStyle: {
               borderColor: 'transparent',
               borderRadius: fitChartSize(2),
@@ -56,16 +62,61 @@
               fontSize: fitChartSize(12)
             },
             data: homeData.value?.userPortrait?.ageRate || []
+          },
+          {
+            type: 'pie',
+            silent: true,
+            center: ['30%', '50%'],
+            radius: ['54%', '58%'],
+            itemStyle: {
+              borderColor: 'transparent',
+              borderRadius: fitChartSize(2),
+              borderWidth: fitChartSize(2)
+            },
+            label: {
+              show: false,
+              color: '#D3F0FE',
+              fontSize: fitChartSize(12)
+            },
+            data: homeData.value?.userPortrait?.ageRate || []
+          },
+          {
+            type: 'pie',
+            silent: true,
+            center: ['30%', '50%'],
+            radius: ['0', '40%'],
+            itemStyle: {
+              color: '#065EAD'
+            },
+            label: {
+              show: false
+            },
+            data: [100]
+          },
+          {
+            type: 'pie',
+            silent: true,
+            center: ['30%', '50%'],
+            radius: ['0', '26%'],
+            itemStyle: {
+              color: '#0477D1'
+            },
+            label: {
+              show: false
+            },
+            data: [100]
           }
         ]
-      })
+      }
+    } else {
     }
-  )
+    setOption(params)
+  }
 </script>
 
 <style lang="scss" scoped>
-  .age-ratio {
-    width: vw(253);
+  .age {
+    width: vw(290);
     height: vh(120);
   }
 </style>
diff --git a/src/views/home/components/box-1.vue b/src/views/home/components/box-1.vue
index d6a8b6d..0c78173 100644
--- a/src/views/home/components/box-1.vue
+++ b/src/views/home/components/box-1.vue
@@ -6,9 +6,10 @@
       </template>
     </Title1>
     <div class="flex pt-20">
-      <!--   :class="{ core: index == 0, queue: index == 1, congestion: index == 2 }" -->
       <div class="item" v-for="(item, index) in homeData?.scenicSpot" :key="index">
-        <img class="item-icon" src="@/assets/images/core.png" alt="" />
+        <img v-if="index == 0" class="item-icon" src="@/assets/images/core.png" />
+        <img v-if="index == 1" class="item-icon" src="@/assets/images/queue.png" />
+        <img v-if="index == 2" class="item-icon" src="@/assets/images/congestion.png" />
         <span class="item-label">{{ item.name }}</span>
         <div class="item-value flex align-end rela">
           <countup :end-val="item.value" /><span class="unit">个</span>
@@ -89,19 +90,19 @@
         <Title2 title="景区承载量" />
         <div class="statistic">
           <div class="statistic-item">
-            <gauge id="gauge1" />
+            <gauge :value="80" />
             <span class="statistic-title">三峡之巅</span>
           </div>
           <div class="statistic-item">
-            <gauge id="gauge2" />
+            <gauge :value="50" />
             <span class="statistic-title">三峡之巅</span>
           </div>
           <div class="statistic-item">
-            <gauge id="gauge3" />
+            <gauge :value="50" />
             <span class="statistic-title">三峡之巅</span>
           </div>
           <div class="statistic-item">
-            <gauge id="gauge4" />
+            <gauge :value="50" />
             <span class="statistic-title">三峡之巅</span>
           </div>
         </div>
@@ -152,7 +153,7 @@
 
     <Title1 title="游客画像" />
     <div class="flex">
-      <div class="box-1">
+      <div class="age-box">
         <Title3 title="年龄/性别占比" />
         <age />
         <div class="count">总人数：<countup :end-val="ageRateTotal" /></div>
@@ -161,7 +162,8 @@
           v-for="(item, index) in homeData?.userPortrait.genderRate"
           :key="index"
         >
-          <img class="icon" src="@/assets/images/man.png" />
+          <img v-if="item.name == '男'" class="icon" src="@/assets/images/man.png" />
+          <img v-if="item.name == '女'" class="icon" src="@/assets/images/woman.png" />
           <div class="bg">
             <span class="text">{{ item.name }}性</span>
             <div class="progress">
@@ -183,7 +185,7 @@
       </div>
       <div class="box-1">
         <Title3 title="购票来源" />
-        <div class="count">总人数：<countup :end-val="channelTotal" /></div>
+        <div class="count">游客总数：<countup :end-val="channelTotal" /></div>
         <ticket />
       </div>
     </div>
@@ -253,7 +255,7 @@
       }
       &-label {
         position: absolute;
-        left: vw(80);
+        left: vw(70);
         top: vh(-10);
         font-weight: 400;
         font-size: vw(14);
@@ -261,7 +263,7 @@
       }
       &-value {
         position: absolute;
-        left: vw(80);
+        left: vw(70);
         .countup-wrap {
           color: #02f9fa;
           font-size: vw(28);
@@ -274,15 +276,6 @@
       font-size: vw(14);
       margin-bottom: vh(4);
     }
-    .core {
-      background-image: url('@/assets/images/core.png');
-    }
-    .queue {
-      background-image: url('@/assets/images/queue.png');
-    }
-    .congestion {
-      background-image: url('@/assets/images/congestion.png');
-    }
     .box {
       width: vw(384);
       height: vh(320);
@@ -327,16 +320,22 @@
         }
       }
     }
-    .box-1 {
-      width: vw(253);
+    .age-box {
+      width: vw(290);
       height: vh(290);
       background-image: url('@/assets/images/bg-3.png');
       background-size: 100% 100%;
       &:nth-child(1) {
-        margin-right: vw(10);
+        margin-right: vw(8);
       }
+    }
+    .box-1 {
+      width: vw(240);
+      height: vh(290);
+      background-image: url('@/assets/images/bg-3.png');
+      background-size: 100% 100%;
       &:nth-child(2) {
-        margin-right: vw(10);
+        margin-right: vw(8);
       }
     }
     .count {
@@ -375,8 +374,11 @@
         color: rgba(255, 255, 255, 0.9);
       }
       .progress {
-        width: vw(120);
+        width: vw(170);
         margin-left: vw(4);
+        :deep(.el-progress-bar__outer) {
+          background-color: #0858ae !important;
+        }
       }
       .man {
         font-weight: bold;
diff --git a/src/views/home/components/box-2.vue b/src/views/home/components/box-2.vue
index 4c0e2f8..99553e3 100644
--- a/src/views/home/components/box-2.vue
+++ b/src/views/home/components/box-2.vue
@@ -94,21 +94,21 @@
       </div>
       <div class="right">
         <div class="item">
-          <span class="tag tag--success">普通</span>
+          <span class="item-tag--warning">重要</span>
           <p class="content">
             工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
             工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
           </p>
         </div>
         <div class="item">
-          <span class="tag tag--error">普通</span>
+          <span class="item-tag--error">紧急</span>
           <p class="content">
             工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
             工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
           </p>
         </div>
         <div class="item">
-          <span class="tag tag--primary">普通</span>
+          <span class="item-tag--primary">普通</span>
           <p class="content">
             工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
             工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
@@ -272,6 +272,7 @@
             .progress {
               width: vw(100);
               :deep(.el-progress-bar__outer) {
+                height: vh(4) !important;
                 background-color: #0858ae !important;
               }
             }
@@ -304,29 +305,27 @@
           &:nth-last-child(1) {
             margin-bottom: 0;
           }
-          .tag {
+          &-tag {
             padding: 0 vw(16);
             font-weight: bold;
             font-size: vw(14);
+            color: #fff;
             display: flex;
             align-items: center;
             justify-content: center;
             border-radius: vw(2);
-            &--success {
-              color: #02f9fa;
-              border: 1px solid #02f9fa;
-              box-shadow: inset 0 0 vw(8) 0 #0be1ab;
-            }
-            &--error {
-              color: #ee2c2c;
-              border: 1px solid #ee2c2c;
-              box-shadow: inset 0 0 vw(8) 0 #ee2c2c;
-            }
-            &--primary {
-              color: #00aaff;
-              border: 1px solid #00aaff;
-              box-shadow: inset 0 0 vw(8) 0 #00aaff;
-            }
+          }
+          &-tag--warning {
+            @extend .item-tag;
+            background: #feae00;
+          }
+          &-tag--error {
+            @extend .item-tag;
+            background: #d9011b;
+          }
+          &-tag--primary {
+            @extend .item-tag;
+            background: #2380fb;
           }
           .content {
             margin-left: vw(4);
diff --git a/src/views/home/components/box-3.vue b/src/views/home/components/box-3.vue
index dd4dc86..f1a4223 100644
--- a/src/views/home/components/box-3.vue
+++ b/src/views/home/components/box-3.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="box-4">
     <Title1 title="交通信息" />
-    <div class="flex justify-evenly pt-10 pb-20">
+    <div class="traffic-info flex justify-evenly pt-10 pb-20">
       <div v-for="item in list" class="cell">
         <img class="icon" :src="item.icon" alt="" width="64" height="64" />
         <div>
@@ -318,12 +318,15 @@
 <style lang="scss" scoped>
   .box-4 {
     margin-top: vh(120);
-    width: vw(750);
+    width: vw(774);
     height: vh(950);
     padding-left: vw(8);
     box-sizing: border-box;
     background-image: url('@/assets/images/bg-5.png');
     background-size: 100% 100%;
+    .traffic-info {
+      height: vh(80);
+    }
     .cell {
       display: flex;
       align-items: center;
@@ -403,25 +406,33 @@
         background-size: 100% 100%;
         .car {
           @extend .icon;
-          padding-left: vw(90);
           width: vw(352);
           height: vw(70);
+          padding-left: vw(90);
+          margin-left: vw(10);
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
           background-image: url('@/assets/images/icon-6.png');
           background-size: 100% 100%;
         }
         .ship {
           @extend .icon;
-          padding-left: vw(90);
           width: vw(352);
           height: vw(70);
+          padding-left: vw(90);
+          margin-left: vw(10);
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
           background-image: url('@/assets/images/icon-7.png');
           background-size: 100% 100%;
         }
         .label {
+          margin-bottom: vh(6);
           font-weight: 400;
           font-size: vw(14);
           color: rgba(255, 255, 255, 0.9);
-          margin-bottom: vh(6);
         }
         .value {
           font-weight: bold;
@@ -437,7 +448,7 @@
         .table {
           position: absolute;
           left: vw(160);
-          width: vw(200);
+          width: vw(226);
           height: vh(96);
           z-index: 2;
           background: rgba(0, 150, 255, 0.17);
diff --git a/src/views/home/components/gauge.vue b/src/views/home/components/gauge.vue
index 354f761..363fe2b 100644
--- a/src/views/home/components/gauge.vue
+++ b/src/views/home/components/gauge.vue
@@ -3,102 +3,129 @@
 </template>
 
 <script setup>
-  import * as echarts from 'echarts'
   import { fitChartSize } from '@/utils/dataUtil'
+  import { useEchart } from '@/hooks/echart'
 
   const props = defineProps({
-    id: {
-      type: String,
-      default: () => ''
+    value: {
+      type: Number,
+      default: () => 0
+    },
+    colors: {
+      type: Array,
+      default: () => ['#02F9FA', '#0063FF']
     }
   })
 
-  let gaugeChart = null
+  const { id, setOption } = useEchart()
+
+  let params = null
+
+  watch(
+    () => props.value,
+    () => {
+      init()
+    }
+  )
+
+  const init = () => {
+    if (!params) {
+      params = {
+        series: [
+          {
+            type: 'gauge',
+            startAngle: 180,
+            endAngle: 0,
+            min: 0,
+            max: 100,
+            radius: '100%',
+            splitNumber: 10,
+            center: ['50%', '60%'],
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 1,
+                y: 1,
+                x2: 0,
+                y2: 0,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: props.value > 50 ? '#FFCBB9' : '#02F9FA'
+                  },
+                  {
+                    offset: 1,
+                    color: props.value > 50 ? '#FF4603' : '#0063FF'
+                  }
+                ],
+                global: false
+              },
+              shadowColor: 'rgba(0,138,255,0.45)',
+              shadowBlur: 10,
+              shadowOffsetX: 2,
+              shadowOffsetY: 2
+            },
+            progress: {
+              show: true,
+              roundCap: false,
+              width: fitChartSize(6)
+            },
+            axisLine: {
+              roundCap: false,
+              lineStyle: {
+                width: fitChartSize(6)
+              }
+            },
+            pointer: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            },
+            detail: {
+              width: '100%',
+              lineHeight: 20,
+              height: 20,
+              offsetCenter: [0, '20%'],
+              valueAnimation: true,
+              formatter: function (value) {
+                return '{value|' + value.toFixed(0) + '}{unit|%}'
+              },
+              rich: {
+                value: {
+                  fontSize: fitChartSize(12),
+                  fontWeight: 'bolder',
+                  color: '#02F9FA'
+                },
+                unit: {
+                  fontSize: fitChartSize(12),
+                  color: '#02F9FA'
+                }
+              }
+            },
+            data: [
+              {
+                value: props.value
+              }
+            ]
+          }
+        ]
+      }
+    } else {
+      params.series[0].data[0].value = props.value
+    }
+    setOption(params)
+  }
 
   onMounted(() => {
     init()
   })
-  const init = () => {
-    // 基于准备好的dom，初始化echarts实例
-    gaugeChart = echarts.init(document.getElementById(props.id))
-    gaugeChart.setOption({
-      series: [
-        {
-          type: 'gauge',
-          startAngle: 180,
-          endAngle: 0,
-          min: 0,
-          max: 100,
-          radius: '100%',
-          splitNumber: 10,
-          center: ['50%', '60%'],
-          itemStyle: {
-            color: '#58D9F9',
-            shadowColor: 'rgba(0,138,255,0.45)',
-            shadowBlur: 10,
-            shadowOffsetX: 2,
-            shadowOffsetY: 2
-          },
-          progress: {
-            show: true,
-            roundCap: true,
-            width: fitChartSize(6)
-          },
-          axisLine: {
-            roundCap: true,
-            lineStyle: {
-              width: fitChartSize(6)
-            }
-          },
-          pointer: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          splitLine: {
-            show: false
-          },
-          axisLabel: {
-            show: false
-          },
-          detail: {
-            width: '100%',
-            lineHeight: 20,
-            height: 20,
-            offsetCenter: [0, '20%'],
-            valueAnimation: true,
-            formatter: function (value) {
-              return '{value|' + value.toFixed(0) + '}{unit|%}'
-            },
-            rich: {
-              value: {
-                fontSize: fitChartSize(12),
-                fontWeight: 'bolder',
-                color: '#02F9FA'
-              },
-              unit: {
-                fontSize: fitChartSize(12),
-                color: '#02F9FA'
-              }
-            }
-          },
-          data: [
-            {
-              value: 80
-            }
-          ]
-        }
-      ]
-    })
-    window.addEventListener('resize', resize)
-  }
-  const resize = () => {
-    if (gaugeChart) {
-      gaugeChart.dispose()
-      init()
-    }
-  }
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index ef23ee1..3f2e225 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,32 +1,31 @@
 <template>
-  <!-- <Header title="奉节县旅游指挥调度中心" is-skip :nav-left="navLeft" :nav-right="navRight" />
-  <CoreVideo /> -->
-  <box1 :data="data" />
+  <box1 />
   <box2 />
   <box3 />
-  <!-- <Correspondence /> -->
 </template>
 
 <script setup>
   import box1 from './components/box-1.vue'
   import box2 from './components/box-2.vue'
   import box3 from './components/box-3.vue'
-
   import { useWebSocket } from '@/hooks/socket'
 
-  const { data, sendMessage } = useWebSocket('ws://36.138.38.16:81/ws/third-party')
+  const { data, isConnected, sendMessage } = useWebSocket('ws://36.138.38.16:81/ws/third-party')
 
   provide('homeData', data)
 
-  const navLeft = [
-    { name: '安全', path: '/monitor' },
-    { name: '景区', path: '/scenic' },
-    { name: '交通', path: '/traffic' }
-  ]
-  const navRight = [
-    { name: '停车' },
-    { name: '工单', path: '/workOrder' },
-    { name: '舆情', path: '/sentiment' },
-    { name: '酒店' }
-  ]
+  watch(
+    () => isConnected.value,
+    (val) => {
+      if (val) {
+        sendMessage(
+          JSON.stringify({
+            action: 'start',
+            type: 'index',
+            scenitspot: 'index'
+          })
+        )
+      }
+    }
+  )
 </script>
diff --git a/src/views/scenic/components/age-ratio.vue b/src/views/scenic/components/age-ratio.vue
index 639b928..9a19eca 100644
--- a/src/views/scenic/components/age-ratio.vue
+++ b/src/views/scenic/components/age-ratio.vue
@@ -1,4 +1,136 @@
 <template>
+  <div class="age" :id="id" />
+</template>
+
+<script setup>
+  import { fitChartSize } from '@/utils/dataUtil'
+  import { useEchart } from '@/hooks/echart'
+
+  const { id, setOption } = useEchart()
+
+  let params = null
+
+  onMounted(() => {
+    init()
+  })
+
+  const init = () => {
+    if (!params) {
+      const center = ['50%', '40%']
+      params = {
+        legend: {
+          x: 'left',
+          y: '76%',
+          itemHeight: fitChartSize(8),
+          itemWidth: fitChartSize(8),
+          itemGap: fitChartSize(14),
+          formatter: function (name) {
+            // let obj = homeData.value?.userPortrait?.ageRate.find((item) => item.name == name)
+            // return '{name|' + name + '} {value|' + obj.value + '}{value|%}'
+            return '{name|' + name + '}'
+          },
+          textStyle: {
+            rich: {
+              name: {
+                color: '#fff',
+                fontSize: fitChartSize(14)
+              },
+              value: {
+                color: '#00D5F6',
+                fontSize: fitChartSize(14)
+              }
+            }
+          }
+        },
+        series: [
+          {
+            type: 'pie',
+            silent: true,
+            center: center,
+            radius: ['60%', '70%'],
+            itemStyle: {
+              borderColor: 'transparent',
+              borderRadius: fitChartSize(2),
+              borderWidth: fitChartSize(2)
+            },
+            label: {
+              show: false,
+              color: '#D3F0FE',
+              fontSize: fitChartSize(12)
+            },
+            data: [
+              { value: 484, name: '19岁以下' },
+              { value: 300, name: '18-30岁' },
+              { value: 1048, name: '30-40岁' },
+              { value: 580, name: '40-60岁' },
+              { value: 735, name: '60岁以上' }
+            ]
+          },
+          {
+            type: 'pie',
+            silent: true,
+            center: center,
+            radius: ['54%', '58%'],
+            itemStyle: {
+              borderColor: 'transparent',
+              borderRadius: fitChartSize(2),
+              borderWidth: fitChartSize(2)
+            },
+            label: {
+              show: false,
+              color: '#D3F0FE',
+              fontSize: fitChartSize(12)
+            },
+            data: [
+              { value: 484, name: '19岁以下' },
+              { value: 300, name: '18-30岁' },
+              { value: 1048, name: '30-40岁' },
+              { value: 580, name: '40-60岁' },
+              { value: 735, name: '60岁以上' }
+            ]
+          },
+          {
+            type: 'pie',
+            silent: true,
+            center: center,
+            radius: ['0', '40%'],
+            itemStyle: {
+              color: '#065EAD'
+            },
+            label: {
+              show: false
+            },
+            data: [100]
+          },
+          {
+            type: 'pie',
+            silent: true,
+            center: center,
+            radius: ['0', '26%'],
+            itemStyle: {
+              color: '#0477D1'
+            },
+            label: {
+              show: false
+            },
+            data: [100]
+          }
+        ]
+      }
+    } else {
+    }
+    setOption(params)
+  }
+</script>
+
+<style lang="scss" scoped>
+  .age {
+    width: vw(240);
+    height: vh(240);
+  }
+</style>
+
+<!-- <template>
   <div class="age-ratio" :id="id" />
 </template>
 
@@ -90,4 +222,4 @@
     width: vw(280);
     height: vh(240);
   }
-</style>
+</style> -->
diff --git a/src/views/scenic/components/box-1.vue b/src/views/scenic/components/box-1.vue
index 00713b7..bccdc52 100644
--- a/src/views/scenic/components/box-1.vue
+++ b/src/views/scenic/components/box-1.vue
@@ -1,9 +1,20 @@
 <template>
   <div class="box-1">
     <div class="header">
-      <div>
-        <div class="label">今年总游客数</div>
-        <countup v-for="item in count" :endVal="item" />
+      <div class="header__left">
+        <img src="@/assets/images/ticket.png" />
+        <div class="header__left-item">
+          <div class="label">当日购票量：</div>
+          <countup :endVal="1234" />
+        </div>
+        <div class="header__left-item">
+          <div class="label">未来3天购票量：</div>
+          <countup :endVal="1234" />
+        </div>
+        <div class="header__left-item">
+          <div class="label">3天后购票量：</div>
+          <countup :endVal="1234" />
+        </div>
       </div>
       <div>
         <div>
@@ -82,7 +93,7 @@
             </p>
           </div>
         </div>
-        <div class="more">查看更多</div>
+        <img class="more" src="@/assets/images/more-col.png" alt="查看更多" />
       </div>
     </div>
   </div>
@@ -98,7 +109,7 @@
 <style scoped lang="scss">
   .box-1 {
     margin-top: vh(120);
-    width: vw(800);
+    width: vw(900);
     height: vh(950);
     padding: vw(10);
     box-sizing: border-box;
@@ -107,43 +118,57 @@
     .header {
       display: flex;
       margin-top: vh(10);
-      & > div:nth-child(1) {
-        width: vw(300) !important;
+      &__left {
+        display: flex;
+        align-items: center;
+        > img {
+          width: vw(74);
+          height: auto;
+        }
+      }
+      &__left-item {
+        position: relative;
+        width: vw(120);
+        height: vh(58);
+        padding-left: vw(10);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        background-image: url('@/assets/images/ticket-item-bg.png');
+        background-size: 100% 100%;
+        .label {
+          position: absolute;
+          top: vh(-4);
+          font-weight: 400;
+          font-size: vw(14);
+          color: #ffffff;
+        }
       }
       & > div:nth-child(2) {
         flex: 1;
         display: flex;
         justify-content: space-between;
+        .label {
+          font-weight: 400;
+          font-size: vw(16);
+          color: #ffffff;
+        }
+        .value {
+          font-weight: bold;
+          font-size: vw(28);
+          color: #02f9fa;
+          text-align: center;
+          line-height: vh(60);
+        }
+        .error {
+          color: #ff4400;
+        }
       }
-      .label {
-        font-weight: 400;
-        font-size: vw(16);
-        color: #ffffff;
-      }
-      .value {
-        font-weight: bold;
-        font-size: vw(28);
-        color: #02f9fa;
-        text-align: center;
-        line-height: vh(60);
-      }
-      .error {
-        color: #ff4400;
-      }
+
       .countup-wrap {
-        margin-top: vh(10);
-        display: inline-block;
-        width: vw(40);
-        height: vh(40);
-        margin-right: vw(4);
-        border-radius: vw(4);
-        color: #ffffff;
+        color: #02f9fa;
         font-size: vw(28);
         font-weight: bold;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        background: linear-gradient(180deg, #00b7ff 0%, #0033ff 100%);
       }
     }
     .main {
@@ -232,18 +257,9 @@
       }
       .more {
         cursor: pointer;
+        width: auto;
+        height: vh(100);
         margin-top: vh(12);
-        width: vw(26);
-        height: vh(98);
-        font-weight: 400;
-        font-size: vw(14);
-        line-height: vh(10);
-        color: #ffffff;
-        text-align: center;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: #034e99;
       }
     }
   }
diff --git a/src/views/scenic/components/box-2.vue b/src/views/scenic/components/box-2.vue
index 5ed6517..4180d70 100644
--- a/src/views/scenic/components/box-2.vue
+++ b/src/views/scenic/components/box-2.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <div class="flex">
-      <div class="box mr-10">
+      <div class="box mr-8">
         <Title1 title="排队信息" />
         <div class="count-box flex justify-between">
           <count-item label="今日出票" :count="35600" suffix="张" />
@@ -16,7 +16,7 @@
           <Line :width="520" :height="300" />
         </div>
       </div>
-      <div class="box mr-10">
+      <div class="box mr-8">
         <Title1 title="景区承载" />
         <div class="flex">
           <progress1 :width="200" :height="70" />
@@ -32,7 +32,7 @@
           <Line :width="520" :height="300" />
         </div>
       </div>
-      <div class="box-1 mr-10">
+      <div class="box-1 mr-8">
         <Title1 title="停车信息" />
         <div class="flex">
           <div class="flex">
@@ -42,21 +42,21 @@
           </div>
           <div class="ml-20 flex flex-1 justify-between">
             <count-item label="总停车场数" :count="561" suffix="个" />
-            <count-item label="总停车位数" :count="150000" suffix="个" />
+            <count-item label="总停车位数" :count="15" suffix="个" />
           </div>
         </div>
         <div class="flex">
-          <div class="border flex-1">
+          <div class="border mr-8 flex-1">
             <div class="pt-10">
               <Title3 title="今日景区承载量" />
             </div>
-            <Line :width="350" :height="300" />
+            <Line :width="360" :height="300" />
           </div>
           <div class="border flex-1">
             <div class="pt-10">
               <Title3 title="车辆归属地占比" />
             </div>
-            <PieRow :width="340" :height="300" />
+            <PieRow :width="360" :height="300" />
           </div>
         </div>
       </div>
@@ -75,8 +75,8 @@
         </div>
       </div>
     </div>
-    <div class="flex mt-10">
-      <div class="box-3 mr-10">
+    <div class="flex mt-8">
+      <div class="box-3 mr-8">
         <Title1 title="交通信息" />
         <div class="count-box flex">
           <count-item label="总通景路段" :count="35600" suffix="张" />
@@ -85,25 +85,41 @@
           <count-item label="拥堵持续时间" :count="35600" suffix="S" />
         </div>
         <div class="flex">
-          <div class="border">
+          <div class="border mr-8">
             <Title3 title="今日交通负载" />
             <traffic-flow />
           </div>
-          <div class="border">
+          <div class="border mr-8">
             <Title3 title="今日交通负载" />
-            <PieCol :width="230" :height="300" />
+            <jam :width="220" :height="160" />
+            <div class="legend">
+              <ul class="legend__wrapper">
+                <li class="legend-item" v-for="(item, index) in 6" :key="index">
+                  <p class="legend-item-label">路段1</p>
+                  <p class="legend-item-value">10%</p>
+                </li>
+              </ul>
+            </div>
           </div>
           <div class="border">
             <Title3 title="今日交通负载" />
-            <PieCol :width="230" :height="300" />
+            <jam :width="220" :height="160" />
+            <div class="legend">
+              <ul class="legend__wrapper">
+                <li class="legend-item" v-for="(item, index) in 6" :key="index">
+                  <p class="legend-item-label">路段1</p>
+                  <p class="legend-item-value">10%</p>
+                </li>
+              </ul>
+            </div>
           </div>
         </div>
       </div>
 
-      <div class="box-4 mr-10">
+      <div class="box-4 mr-8">
         <Title1 title="用户画像" />
         <div class="flex">
-          <div class="flex-1">
+          <div class="border mr-8 flex-1">
             <Title3 title="年龄/性别占比" />
             <age-ratio />
             <div class="count">总人数：<countup endVal="124563" /></div>
@@ -136,7 +152,7 @@
               </div>
             </div>
           </div>
-          <div class="border flex-1">
+          <div class="border mr-8 flex-1">
             <Title3 title="客源地分析TOP5" />
             <top />
           </div>
@@ -151,14 +167,15 @@
       <div class="box-5">
         <Title1 title="车船信息" />
         <div class="flex mb-6">
-          <div class="border pt-10 pb-10">
+          <div class="border mr-8 pt-10 pb-10">
             <Title2 title="车车车车车车" />
             <div class="car-box mt-10">
-              <div class="pr-20">
+              <img class="icon" src="@/assets/images/icon-6.png" />
+              <div class="car-item pr-20">
                 <div class="label">车总数</div>
                 <div class="value">130辆</div>
               </div>
-              <div>
+              <div class="car-item">
                 <div class="label">今日累计运营(班次)</div>
                 <div class="value">130次</div>
               </div>
@@ -178,11 +195,12 @@
           <div class="border pt-10 pb-10">
             <Title2 title="船船船船船船" />
             <div class="car-box mt-10">
-              <div class="pr-20">
+              <img class="icon" src="@/assets/images/icon-6.png" />
+              <div class="car-item pr-20">
                 <div class="label">车总数</div>
                 <div class="value">130辆</div>
               </div>
-              <div>
+              <div class="car-item">
                 <div class="label">今日累计运营(班次)</div>
                 <div class="value">130次</div>
               </div>
@@ -200,7 +218,7 @@
             </div>
           </div>
         </div>
-        <div class="border">
+        <div class="border pt-10 pb-10">
           <div id="car-ship" class="car-ship" />
           <img class="full" src="@/assets/images/full.png" @click="show = true" />
         </div>
@@ -218,6 +236,7 @@
   import BigCarShipMap from './big-car-ship-map.vue'
   import AgeRatio from './age-ratio.vue'
   import top from './top.vue'
+  import jam from './jam.vue'
   import ticket from './ticket.vue'
   import TrafficFlow from './traffic-flow.vue'
 
@@ -239,6 +258,70 @@
   :deep(.anchorBL) {
     display: none;
   }
+  .legend {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @mixin icon($column) {
+      width: vw(50);
+      height: vh(60);
+      display: flex;
+      flex-direction: $column;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &__wrapper {
+      display: flex;
+      flex-wrap: wrap;
+      gap: vw(8);
+      width: vw(170);
+    }
+    &-item {
+      color: #fff;
+    }
+    &-item:nth-child(1) {
+      @include icon(column);
+      background-image: url('@/assets/images/legend-item-1.png');
+      background-size: 100% 100%;
+    }
+    &-item:nth-child(2) {
+      @include icon(column);
+      background-image: url('@/assets/images/legend-item-1.png');
+      background-size: 100% 100%;
+    }
+    &-item:nth-child(3) {
+      @include icon(column);
+      background-image: url('@/assets/images/legend-item-1.png');
+      background-size: 100% 100%;
+    }
+    &-item:nth-child(4) {
+      @include icon(column-reverse);
+      background-image: url('@/assets/images/legend-item-2.png');
+      background-size: 100% 100%;
+    }
+    &-item:nth-child(5) {
+      @include icon(column-reverse);
+      background-image: url('@/assets/images/legend-item-2.png');
+      background-size: 100% 100%;
+    }
+    &-item:nth-child(6) {
+      @include icon(column-reverse);
+      background-image: url('@/assets/images/legend-item-2.png');
+      background-size: 100% 100%;
+    }
+    &-item-label {
+      font-weight: 400;
+      font-size: vw(12);
+      line-height: vh(14);
+    }
+    &-item-value {
+      font-weight: bold;
+      font-size: vw(16);
+      line-height: vh(18);
+    }
+  }
   .dialog {
     :deep(.el-dialog) {
       width: vw(2540);
@@ -279,51 +362,54 @@
     }
     .border {
       position: relative;
-      overflow: hidden;
       padding: 0 vw(10);
-      margin: 0 vw(8);
       box-sizing: border-box;
       background-image: url('@/assets/images/bg-3.png');
       background-size: 100% 100%;
     }
     .box {
       @extend .bg;
-      width: vw(570);
+      width: vw(510);
       height: vh(475);
     }
     .box-1 {
       @extend .bg;
-      width: vw(750);
       height: vh(475);
     }
     .box-2 {
       @extend .bg;
-      width: vw(440);
       height: vh(475);
     }
     .box-3 {
       @extend .bg;
-      width: vw(850);
       height: vh(465);
     }
     .box-4 {
       @extend .bg;
-      width: vw(840);
       height: vh(465);
     }
     .box-5 {
       @extend .bg;
-      width: vw(650);
       height: vh(465);
     }
     .car-box {
-      width: vw(350);
+      width: vw(316);
       height: vh(74);
-      padding-left: vw(75);
       display: flex;
       align-items: center;
-      background-image: url('@/assets/images/icon-6.png');
-      background-size: 100% 100%;
+      .icon {
+        position: absolute;
+        width: vw(350);
+        height: vw(74);
+      }
+      .car-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        &:nth-child(2) {
+          padding-left: vw(80);
+        }
+      }
       .label {
         font-weight: 400;
         font-size: vw(14);
@@ -333,12 +419,12 @@
         font-weight: bold;
         font-size: vw(24);
         color: #02f9fa;
-        margin-top: vh(10);
+        margin-top: vh(6);
       }
     }
     .car-ship {
-      width: vw(630);
-      height: vh(230);
+      width: vw(660);
+      height: vh(240);
     }
     .full {
       cursor: pointer;
diff --git a/src/views/scenic/components/jam.vue b/src/views/scenic/components/jam.vue
new file mode 100644
index 0000000..f0b41fc
--- /dev/null
+++ b/src/views/scenic/components/jam.vue
@@ -0,0 +1,144 @@
+<template>
+  <div
+    :id="id"
+    :style="{
+      width: styleUtil.px2vw(width),
+      height: styleUtil.px2vh(height)
+    }"
+  />
+</template>
+
+<script setup>
+  import styleUtil from '@/utils/styleUtil'
+  import { fitChartSize } from '@/utils/dataUtil'
+  import { useEchart } from '@/hooks/echart'
+
+  const props = defineProps({
+    width: {
+      type: Number,
+      default: () => 0
+    },
+    height: {
+      type: Number,
+      default: () => 0
+    },
+    config: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  })
+
+  const { id, setOption } = useEchart()
+
+  var colorList = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA', '']
+  var title = ['企业', '农业', '工业', '纺织']
+  var dataValue = ['15', '30', '35', '20']
+  var dataList = title.map((item, index) => {
+    return {
+      name: item,
+      value: dataValue[index]
+    }
+  })
+
+  var defaultCofig = {
+    color: colorList,
+    series: [
+      {
+        type: 'pie',
+        startAngle: 360,
+        center: ['50%', '40%'],
+        radius: ['65%', '80%'],
+        label: {
+          show: false
+        },
+        labelLine: {
+          show: false
+        },
+        data: [
+          {
+            value: 50,
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 1,
+                y: 1,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(0, 150, 255, 0)'
+                  },
+                  {
+                    offset: 0.5,
+                    color: 'rgba(0, 150, 255, 0.47)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0, 150, 255, 0)'
+                  }
+                ]
+              }
+            }
+          },
+
+          {
+            name: 'bottom',
+            value: 50,
+            itemStyle: {
+              color: 'transparent'
+            }
+          }
+        ]
+      },
+      {
+        type: 'pie',
+        center: ['50%', '40%'],
+        radius: ['55%', '70%'],
+        itemStyle: {
+          borderWidth: fitChartSize(4),
+          borderColor: '#093672'
+        },
+        label: {
+          show: true,
+          position: 'center',
+          fontWeight: 'bold',
+          formatter: function (o) {
+            return `{value|123456}` + '\n' + `{name|整改率}`
+          },
+          rich: {
+            value: {
+              color: '#fff',
+              fontSize: fitChartSize(24),
+              fontWeight: 'bold',
+              padding: [0, 0, 5, 0]
+            },
+            name: {
+              color: '#7894A8',
+              fontSize: fitChartSize(12)
+            }
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: dataList
+      }
+    ]
+  }
+
+  const init = () => {
+    setOption({
+      ...defaultCofig,
+      ...props.config
+    })
+  }
+
+  onMounted(() => {
+    init()
+  })
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/scenic/components/ticket.vue b/src/views/scenic/components/ticket.vue
index dc508ea..9de5971 100644
--- a/src/views/scenic/components/ticket.vue
+++ b/src/views/scenic/components/ticket.vue
@@ -189,7 +189,7 @@
 
 <style scoped lang="scss">
   .ticket {
-    width: 100%;
+    width: vw(250);
     height: vh(300);
   }
 </style>
diff --git a/src/views/scenic/components/top.vue b/src/views/scenic/components/top.vue
index 908d803..82a435b 100644
--- a/src/views/scenic/components/top.vue
+++ b/src/views/scenic/components/top.vue
@@ -181,7 +181,7 @@
 
 <style scoped lang="scss">
   .top {
-    width: 100%;
+    width: vw(240);
     height: vh(360);
   }
 </style>
diff --git a/src/views/scenic/components/traffic-flow.vue b/src/views/scenic/components/traffic-flow.vue
index eef029c..38093ef 100644
--- a/src/views/scenic/components/traffic-flow.vue
+++ b/src/views/scenic/components/traffic-flow.vue
@@ -96,7 +96,7 @@
 
 <style scoped lang="scss">
   .traffic-flow {
-    width: vw(278);
+    width: vw(260);
     height: vh(300);
   }
 </style>
diff --git a/src/views/sentiment/index.vue b/src/views/sentiment/index.vue
index 502ec72..9f72b5e 100644
--- a/src/views/sentiment/index.vue
+++ b/src/views/sentiment/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <div class="flex">
-      <div class="box-1 mr-10">
+      <div class="box-1 mr-8">
         <Title1 title="最新舆情" />
         <div class="list">
           <div class="item" v-for="(item, index) in hotNewList" :key="index">
@@ -20,7 +20,7 @@
           </div>
         </div>
       </div>
-      <div class="box-2 mr-10">
+      <div class="box-2 mr-8">
         <div class="flex justify-center">
           <div class="top flex justify-evenly">
             <count-item label="今日舆情总数" :count="total" suffix="条" color="#ffffff" />
@@ -35,13 +35,13 @@
           </div>
         </div>
       </div>
-      <div class="box-1">
+      <div class="box-3">
         <Title1 title="数据来源分析" />
         <data-source />
       </div>
     </div>
-    <div class="flex mt-10">
-      <div class="box-2 mr-10 rela">
+    <div class="flex mt-8">
+      <div class="box-2 mr-8 rela">
         <Title1 title="舆情指数" />
         <div class="select-box">
           <Select v-model="params.id" :options="options" @on-change="getLineChart" />
@@ -54,11 +54,11 @@
           :seriesConfig="{ smooth: false, symbol: 'circle' }"
         />
       </div>
-      <div class="box-1 mr-10 rela">
+      <div class="box-1 mr-8 rela">
         <Title1 title="地域分析" />
         <Area />
       </div>
-      <div class="box-1 mr-10">
+      <div class="box-3">
         <Title1 title="词频分析" />
         <word-cloud />
       </div>
@@ -128,7 +128,9 @@
     right: vw(10);
   }
   .container {
+    flex: 1;
     margin-top: vh(120);
+    box-sizing: border-box;
     .bg {
       background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
     }
@@ -137,7 +139,7 @@
       margin-top: vh(35);
     }
     .box-1 {
-      width: vw(780);
+      width: vw(790);
       height: vh(470);
       @extend .bg;
     }
@@ -146,6 +148,11 @@
       height: vh(470);
       @extend .bg;
     }
+    .box-3 {
+      width: vw(810);
+      height: vh(470);
+      @extend .bg;
+    }
     .border {
       background-image: url('@/assets/images/bg-3.png');
       background-size: 100% 100%;