diff --git a/src/App.vue b/src/App.vue
index 4cbad52..b258d06 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,17 @@
 <script setup>
-import { RouterView } from 'vue-router'
+  import { RouterView } from 'vue-router'
 </script>
 
 <template>
-  <RouterView />
+  <main class="wrapper"> <RouterView /> </main>
 </template>
 
-<style scoped></style>
+<style scoped>
+  .wrapper {
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    background-color: #0a254b;
+  }
+</style>
diff --git a/src/assets/images/Group 1342@2x.png b/src/assets/images/Group 1342@2x.png
new file mode 100644
index 0000000..a44ed4e
Binary files /dev/null and b/src/assets/images/Group 1342@2x.png differ
diff --git a/src/assets/images/Mask group@2x.png b/src/assets/images/Mask group@2x.png
new file mode 100644
index 0000000..2e16195
Binary files /dev/null and b/src/assets/images/Mask group@2x.png differ
diff --git a/src/assets/images/count-bg.svg b/src/assets/images/count-bg.svg
new file mode 100644
index 0000000..61275f5
--- /dev/null
+++ b/src/assets/images/count-bg.svg
@@ -0,0 +1,41 @@
+<svg width="100" height="30" viewBox="0 0 100 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Mask group">
+<mask id="mask0_365_11091" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="30">
+<rect id="Rectangle 711" width="100" height="30" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_365_11091)">
+<g id="Group 1349">
+<g id="Rectangle 704" filter="url(#filter0_f_365_11091)">
+<path d="M6.25005 3H100V27H2.77783L6.25005 3Z" fill="url(#paint0_linear_365_11091)"/>
+<path d="M3.35538 26.5L6.68292 3.5H99.5001V26.5H3.35538Z" stroke="url(#paint1_linear_365_11091)"/>
+</g>
+<path id="Rectangle 710" d="M3.35538 23.5L6.68292 0.5H99.5001V23.5H3.35538Z" fill="url(#paint2_linear_365_11091)" stroke="url(#paint3_linear_365_11091)"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_365_11091" x="-1.22217" y="-1" width="105.222" height="32" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_365_11091"/>
+</filter>
+<linearGradient id="paint0_linear_365_11091" x1="2.77783" y1="15" x2="100" y2="15" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0096FF" stop-opacity="0.7"/>
+<stop offset="1" stop-color="#08305F" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_365_11091" x1="2.77783" y1="28.44" x2="20.0456" y2="8.62646" gradientUnits="userSpaceOnUse">
+<stop offset="0.005" stop-color="white"/>
+<stop offset="0.261149" stop-color="#02F9FA"/>
+<stop offset="1" stop-color="#0096FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_365_11091" x1="2.77783" y1="12" x2="100" y2="12" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0096FF" stop-opacity="0.7"/>
+<stop offset="1" stop-color="#08305F" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_365_11091" x1="2.77783" y1="25.44" x2="20.0456" y2="5.62646" gradientUnits="userSpaceOnUse">
+<stop offset="0.005" stop-color="white"/>
+<stop offset="0.261149" stop-color="#02F9FA"/>
+<stop offset="1" stop-color="#0096FF" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/images/dian.svg b/src/assets/images/dian.svg
new file mode 100644
index 0000000..b5b250c
--- /dev/null
+++ b/src/assets/images/dian.svg
@@ -0,0 +1,6 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1342">
+<circle id="Ellipse 141" cx="4" cy="4" r="4" fill="#0096FF" fill-opacity="0.4"/>
+<circle id="Ellipse 142" cx="2" cy="4" r="2" fill="#02F9FA"/>
+</g>
+</svg>
diff --git a/src/assets/images/title-2-select.png b/src/assets/images/title-2-select.png
new file mode 100644
index 0000000..f9812cd
Binary files /dev/null and b/src/assets/images/title-2-select.png differ
diff --git a/src/assets/images/title.png b/src/assets/images/title.png
index 1d3b41f..c626ad8 100644
Binary files a/src/assets/images/title.png and b/src/assets/images/title.png differ
diff --git a/src/views/home/components/box-1.vue b/src/components/CoreVideo/index.vue
similarity index 98%
rename from src/views/home/components/box-1.vue
rename to src/components/CoreVideo/index.vue
index 5b3f445..8c3265d 100644
--- a/src/views/home/components/box-1.vue
+++ b/src/components/CoreVideo/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="box-1">
+  <div class="core-video">
     <div class="title">核心景区视频</div>
     <ul class="list">
       <li
@@ -21,7 +21,7 @@
 </script>
 
 <style lang="scss" scoped>
-  .box-1 {
+  .core-video {
     margin: vh(10);
     width: vw(326);
     border-radius: vw(2);
diff --git a/src/components/Correspondence/index.vue b/src/components/Correspondence/index.vue
new file mode 100644
index 0000000..03338e7
--- /dev/null
+++ b/src/components/Correspondence/index.vue
@@ -0,0 +1,166 @@
+<template>
+  <div class="box-4-content">
+    <div class="top-box">
+      <div class="title">融合通信</div>
+      <div class="icon-box flex">
+        <div class="item"><img src="/src/assets/images/r-icon-1.png" alt="" /> 白帝城 </div>
+        <div class="item"><img src="/src/assets/images/r-icon-2.png" alt="" />三峡之颠</div>
+        <div class="item"><img src="/src/assets/images/r-icon-3.png" alt="" />龙桥河</div>
+        <div class="item"><img src="/src/assets/images/r-icon-4.png" alt="" />消防队</div>
+        <div class="item"><img src="/src/assets/images/r-icon-5.png" alt="" />文旅城</div>
+        <div class="item"><img src="/src/assets/images/r-icon-6.png" alt="" />交通城</div>
+      </div>
+    </div>
+    <div class="bom-box">
+      <div class="title">
+        <span>最近联系</span>
+      </div>
+      <table class="table">
+        <tr class="tr-th">
+          <th>人员姓名</th>
+          <th>部门</th>
+          <th>职位</th>
+          <th>时间</th>
+        </tr>
+        <tr class="tr-td">
+          <td>January</td>
+          <td>$100</td>
+          <td>January</td>
+          <td>$100</td>
+        </tr>
+        <tr class="tr-td">
+          <td>February</td>
+          <td>$80</td>
+          <td>February</td>
+          <td>$80</td>
+        </tr>
+        <tr class="tr-td">
+          <td>February</td>
+          <td>$80</td>
+          <td>February</td>
+          <td>$80</td>
+        </tr>
+        <tr class="tr-td">
+          <td>February</td>
+          <td>$80</td>
+          <td>February</td>
+          <td>$80</td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+  .box-4-content {
+    width: vw(260);
+    height: vh(1060);
+    background-image: url('/src/assets/images/rt-bg.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    margin-top: vh(10);
+    margin-left: vw(10);
+    position: relative;
+    z-index: 999;
+    .bom-box {
+      .table {
+        width: 100%;
+        margin-top: vh(5);
+        .tr-th {
+          background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
+          border-radius: 0px 0px 0px 0px;
+          // border: 1px solid;
+          border-image: linear-gradient(180deg, rgba(0, 150, 255, 0), rgba(0, 150, 255, 1)) 1 1;
+          font-weight: 400;
+          font-size: vw(12);
+          color: #0096ff;
+          line-height: vh(14);
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+
+          th {
+            padding: vw(5);
+          }
+        }
+        .tr-td {
+          font-weight: 400;
+          font-size: vw(14);
+          color: #f1f7ff;
+          line-height: vh(16);
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+
+          td {
+            padding: vh(5) vw(10);
+          }
+        }
+        .tr-td:nth-child(odd) {
+          background: linear-gradient(90deg, rgba(0, 150, 255, 0) 0%, rgba(0, 150, 255, 0.22) 100%);
+        }
+      }
+      .title {
+        background-image: url('/src/assets/images/nav-l-t-bg.png');
+        background-size: 100% 100%;
+
+        span {
+          margin-left: vw(30);
+          font-weight: 800;
+          font-size: vw(15);
+          line-height: vh(26);
+          text-align: center;
+          font-style: normal;
+          text-transform: none;
+          background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
+          -webkit-background-clip: text;
+          background-clip: text;
+          -webkit-text-fill-color: transparent;
+          color: transparent;
+        }
+      }
+    }
+    .top-box {
+      width: 100%;
+      height: vh(500);
+      .icon-box {
+        font-weight: 400;
+        font-size: vw(14);
+        color: #ffffff;
+        line-height: vh(16);
+        flex-wrap: wrap;
+        margin-left: vw(20);
+        .item {
+          margin-top: vh(40);
+          margin-right: vh(20);
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          &:nth-child(3n) {
+            margin-right: 0;
+          }
+          & > img {
+            width: vw(54);
+            height: vh(60);
+          }
+        }
+      }
+      .title {
+        font-weight: 800;
+        font-size: vw(16);
+        line-height: vh(26);
+        text-align: center;
+        font-style: normal;
+        text-transform: none;
+        background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        color: transparent;
+      }
+    }
+  }
+</style>
diff --git a/src/components/Header/index.vue b/src/components/Header/index.vue
new file mode 100644
index 0000000..b6d37ee
--- /dev/null
+++ b/src/components/Header/index.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="header">
+    <div v-if="isBack" class="back">返回</div>
+    <ul class="nav-left">
+      <li
+        class="nav-left-item"
+        :style="{
+          backgroundImage: `url(${current == index && !isSkip ? title2Select : title2})`
+        }"
+        v-for="(item, index) in navLeft"
+        :key="index"
+        @click="handleNav(item, index)"
+      >
+        {{ item.name }}
+      </li>
+    </ul>
+    <div class="title">
+      <span>{{ name }}</span>
+    </div>
+    <ul class="nav-right">
+      <li class="nav-right-item" v-for="(item, index) in navRight" :key="index">
+        {{ item.name }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+  import { useRouter } from 'vue-router'
+  import title2 from '@/assets/images/title-2.png'
+  import title2Select from '@/assets/images/title-2-select.png'
+
+  let props = defineProps({
+    title: {
+      type: String,
+      default: ''
+    },
+    navLeft: {
+      type: Array,
+      default: () => []
+    },
+    navRight: {
+      type: Array,
+      default: () => []
+    },
+    current: {
+      type: Number,
+      default: 0
+    },
+    isSkip: {
+      type: Boolean,
+      default: false
+    },
+    isBack: {
+      type: Boolean,
+      default: false
+    }
+  })
+  const emit = defineEmits(['change'])
+  const router = useRouter()
+
+  const name = computed(() => {
+    if (!props.isSkip && props.navLeft.length > 0) {
+      return props.navLeft[props.current].name
+    }
+    return props.title
+  })
+
+  const handleNav = (item, index) => {
+    if (props.isSkip) {
+      router.push(item.path)
+    } else {
+      emit('on-change', index)
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .header {
+    position: absolute;
+    left: vw(326);
+    .back {
+      position: absolute;
+      left: vw(60);
+      top: vh(40);
+      width: vw(120);
+      height: vh(30);
+      font-weight: 600;
+      font-size: vw(20);
+      color: #ffffff;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: vw(60);
+      border: 1px solid rgba(0, 114, 220, 0.3);
+      background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
+    }
+    .title {
+      width: vw(3133);
+      height: vh(120);
+      line-height: vh(90);
+      text-align: center;
+      letter-spacing: vw(10);
+      box-sizing: border-box;
+      background-image: url('@/assets/images/title.png');
+      background-size: 100% 100%;
+      & > span {
+        font-size: vw(48);
+        font-weight: 800;
+        color: transparent;
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
+      }
+    }
+    .nav-left {
+      position: absolute;
+      right: vw(2100);
+      top: vh(34);
+      display: flex;
+      &-item {
+        cursor: pointer;
+        margin-left: vh(-16);
+        width: vw(210);
+        height: vh(56);
+        line-height: vh(46);
+        font-weight: 600;
+        font-size: vw(28);
+        text-align: center;
+        color: rgba(208, 236, 255, 0.9);
+        background-size: 100% 100%;
+      }
+    }
+    .nav-right {
+      position: absolute;
+      left: vw(2110);
+      top: vh(34);
+      display: flex;
+      &-item {
+        cursor: pointer;
+        margin-right: vh(-16);
+        width: vw(210);
+        height: vh(56);
+        line-height: vh(46);
+        font-weight: 600;
+        font-size: vw(28);
+        text-align: center;
+        color: rgba(208, 236, 255, 0.9);
+        background-image: url('@/assets/images/title-3.png');
+        background-size: 100% 100%;
+      }
+    }
+  }
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index b878a5e..1e2e898 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -6,13 +6,18 @@ const router = createRouter({
     {
       path: '/',
       name: 'home',
-      component: () => import('../views/home/index.vue')
+      component: () => import('@/views/home/index.vue')
     },
-	{
-	  path: '/monitor',
-	  name: 'monitor',
-	  component: () => import('../views/monitor/index.vue')
-	}
+    {
+      path: '/monitor',
+      name: 'monitor',
+      component: () => import('@/views/monitor/index.vue')
+    },
+    {
+      path: '/scenic',
+      name: 'scenic',
+      component: () => import('@/views/scenic/index.vue')
+    }
   ]
 })
 
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 3459feb..56dbb20 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -10,6 +10,9 @@
 .align-end {
   align-items: flex-end;
 }
+.justify-center {
+  justify-content: center;
+}
 .justify-between {
   justify-content: space-between;
 }
@@ -28,6 +31,9 @@
 .mb-10 {
   margin-bottom: vh(10);
 }
+.mr-10 {
+  margin-right: vh(10);
+}
 .pt-20 {
   padding-top: vh(20);
 }
diff --git a/src/views/home/components/pie.vue b/src/views/home/components/age-ratio.vue
similarity index 80%
rename from src/views/home/components/pie.vue
rename to src/views/home/components/age-ratio.vue
index d2f0f6a..2ac58a9 100644
--- a/src/views/home/components/pie.vue
+++ b/src/views/home/components/age-ratio.vue
@@ -1,33 +1,22 @@
 <template>
-  <div class="pie" :id="id" />
+  <div class="age-ratio" id="age-ratio" />
 </template>
 
 <script setup>
   import * as echarts from 'echarts'
   import { fitChartSize } from '@/utils/dataUtil'
 
-  const props = defineProps({
-    id: {
-      type: String,
-      default: () => ''
-    }
-  })
+  let ageChart = null
 
-  let gaugeChart = null
-
-  onMounted(() => {
-    init()
-  })
   const init = () => {
     // 基于准备好的dom，初始化echarts实例
-    gaugeChart = echarts.init(document.getElementById(props.id))
-    gaugeChart.setOption({
+    ageChart = echarts.init(document.getElementById('age-ratio'))
+    ageChart.setOption({
       tooltip: {
         trigger: 'item'
       },
       series: [
         {
-          name: 'Access From',
           type: 'pie',
           radius: ['30%', '40%'],
           itemStyle: {
@@ -59,15 +48,20 @@
     window.addEventListener('resize', resize)
   }
   const resize = () => {
-    if (gaugeChart) {
-      gaugeChart.dispose()
+    if (ageChart) {
+      ageChart.dispose()
+      ageChart = null
       init()
     }
   }
+
+  onMounted(() => {
+    init()
+  })
 </script>
 
 <style lang="scss" scoped>
-  .pie {
+  .age-ratio {
     width: vw(253);
     height: vh(100);
   }
diff --git a/src/views/home/components/box-2.vue b/src/views/home/components/box-2.vue
index a85412e..904f787 100644
--- a/src/views/home/components/box-2.vue
+++ b/src/views/home/components/box-2.vue
@@ -91,7 +91,7 @@
     <div class="flex">
       <div class="box-1">
         <Title3 title="年龄/性别占比" />
-        <pie id="pie" />
+        <age-ratio />
         <div class="count">总人数：<countup endVal="124563" /></div>
         <div class="cell pt-20">
           <img class="icon" src="@/assets/images/man.png" />
@@ -138,7 +138,7 @@
 
 <script setup>
   import countup from 'vue-countup-v3'
-  import pie from './pie.vue'
+  import AgeRatio from './age-ratio.vue'
   import top from './top.vue'
   import gauge from './gauge.vue'
   import ticket from './ticket.vue'
diff --git a/src/views/home/components/box-3.vue b/src/views/home/components/box-3.vue
index d6f97e3..4f733ba 100644
--- a/src/views/home/components/box-3.vue
+++ b/src/views/home/components/box-3.vue
@@ -44,7 +44,7 @@
     <div class="footer">
       <div class="left">
         <div>
-          <div class="flex">
+          <div class="flex justify-center pt-10">
             <div class="item">
               <p class="label">今日工单总条数</p>
               <countup :endVal="1234" />
@@ -54,10 +54,21 @@
               <countup :endVal="1234" />
             </div>
           </div>
-          <p>工单完成数</p>
+          <div class="progress-box">
+            <span class="text">工单完成数</span>
+            <div class="progress">
+              <el-progress
+                :percentage="50"
+                :show-text="false"
+                color="linear-gradient( to right,
+              #00C4F9 0%, #00C4F9 100%)"
+              />
+            </div>
+            <span class="value">50%</span>
+          </div>
         </div>
         <div>
-          <div class="flex">
+          <div class="flex justify-center pt-10">
             <div class="item">
               <p class="label">紧急工单数</p>
               <countup :endVal="1234" />
@@ -67,7 +78,18 @@
               <countup :endVal="1234" />
             </div>
           </div>
-          <p>工单完成数</p>
+          <div class="progress-box">
+            <span class="text">工单完成数</span>
+            <div class="progress">
+              <el-progress
+                :percentage="50"
+                :show-text="false"
+                color="linear-gradient( to right,
+              #DA3637 0%, #DA3637 100%)"
+              />
+            </div>
+            <span class="value">50%</span>
+          </div>
         </div>
       </div>
       <div class="right">
@@ -166,9 +188,11 @@
       .left {
         flex: 1;
         display: flex;
+        margin-top: vh(4);
         & > div {
           flex: 1;
           height: vh(110);
+          margin-right: vw(6);
           background-image: url('@/assets/images/bg-3.png');
           background-size: 100% 100%;
           .item {
@@ -189,6 +213,27 @@
             font-size: vw(28);
             font-weight: bold;
           }
+          .progress-box {
+            margin-top: vh(10);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .text {
+              margin-right: vw(10);
+              font-weight: 400;
+              font-size: vw(14);
+              color: #ffffff;
+            }
+            .progress {
+              width: vw(100);
+            }
+            .value {
+              margin-left: vw(10);
+              font-weight: 400;
+              font-size: vw(14);
+              color: #ffffff;
+            }
+          }
         }
       }
       .right {
diff --git a/src/views/home/components/gauge.vue b/src/views/home/components/gauge.vue
index 0aa0d48..354f761 100644
--- a/src/views/home/components/gauge.vue
+++ b/src/views/home/components/gauge.vue
@@ -44,15 +44,15 @@
             roundCap: true,
             width: fitChartSize(6)
           },
-          pointer: {
-            show: false
-          },
           axisLine: {
             roundCap: true,
             lineStyle: {
               width: fitChartSize(6)
             }
           },
+          pointer: {
+            show: false
+          },
           axisTick: {
             show: false
           },
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 9abe4da..33af4e9 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,97 +1,17 @@
 <template>
-  <main class="wrapper">
-    <box1 />
-    <div class="header">
-      <ul class="nav-left">
-        <li class="nav-left-item">安全</li>
-        <li class="nav-left-item">景区</li>
-        <li class="nav-left-item">交通</li>
-      </ul>
-      <div class="title">奉节县旅游指挥调度中心</div>
-      <ul class="nav-right">
-        <li class="nav-right-item">停车</li>
-        <li class="nav-right-item">工单</li>
-        <li class="nav-right-item">舆情</li>
-        <li class="nav-right-item">酒店</li>
-      </ul>
-    </div>
-    <box2 />
-    <box3 />
-    <box4 />
-  </main>
+  <Header title="奉节县旅游指挥调度中心" is-skip :nav-left="navLeft" :nav-right="navRight" />
+  <CoreVideo />
+  <box2 />
+  <box3 />
+  <box4 />
+  <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 box4 from './components/box-4.vue'
-
+  const navLeft = [{ name: '安全' }, { name: '景区', path: '/scenic' }, { name: '交通' }]
+  const navRight = [{ name: '停车' }, { name: '工单' }, { name: '舆情' }, { name: '酒店' }]
   onMounted(() => {})
 </script>
-
-<style lang="scss" scoped>
-  .wrapper {
-    display: flex;
-    width: 100vw;
-    height: 100vh;
-    overflow: hidden;
-    background-color: #0a254b;
-    .header {
-      position: absolute;
-      left: vw(326);
-      .title {
-        width: vw(3133);
-        height: vh(120);
-        font-size: vw(48);
-        font-weight: 800;
-        text-align: center;
-        padding-top: vh(20);
-        color: #fff;
-        letter-spacing: vw(10);
-        box-sizing: border-box;
-        text-shadow: 0px 4px 7px rgba(0, 150, 255, 0.75);
-        background-image: url('@/assets/images/title.png');
-        background-size: 100% 100%;
-      }
-      .nav-left {
-        position: absolute;
-        left: vw(630);
-        top: vh(34);
-        display: flex;
-        &-item {
-          cursor: pointer;
-          margin-left: vh(-10);
-          width: vw(210);
-          height: vh(56);
-          padding-top: vh(10);
-          font-weight: 600;
-          font-size: vw(28);
-          text-align: center;
-          color: rgba(208, 236, 255, 0.9);
-          background-image: url('@/assets/images/title-2.png');
-          background-size: 100% 100%;
-        }
-      }
-      .nav-right {
-        position: absolute;
-        right: vw(424);
-        top: vh(34);
-        display: flex;
-        &-item {
-          cursor: pointer;
-          margin-right: vh(-10);
-          width: vw(210);
-          height: vh(56);
-          padding-top: vh(10);
-          font-weight: 600;
-          font-size: vw(28);
-          text-align: center;
-          color: rgba(208, 236, 255, 0.9);
-          background-image: url('@/assets/images/title-3.png');
-          background-size: 100% 100%;
-        }
-      }
-    }
-  }
-</style>
diff --git a/src/views/scenic/components/box-1.vue b/src/views/scenic/components/box-1.vue
new file mode 100644
index 0000000..cf6a50b
--- /dev/null
+++ b/src/views/scenic/components/box-1.vue
@@ -0,0 +1,250 @@
+<template>
+  <div class="box-1">
+    <div class="header">
+      <div>
+        <div class="label">今年总游客数</div>
+        <countup v-for="item in count" :endVal="item" />
+      </div>
+      <div>
+        <div>
+          <div class="label">接待状态</div>
+          <p class="value">安全</p>
+        </div>
+        <div>
+          <div class="label">景区安全</div>
+          <p class="value">安全</p>
+        </div>
+        <div>
+          <div class="label">景区游玩舒适</div>
+          <p class="value error">排队</p>
+        </div>
+        <div>
+          <div class="label">通景交通</div>
+          <p class="value">安全</p>
+        </div>
+        <div>
+          <div class="label">停车场负荷度</div>
+          <p class="value error">超负荷</p>
+        </div>
+      </div>
+    </div>
+    <div class="main"> </div>
+    <div class="footer">
+      <div class="flex">
+        <div class="item">
+          <pie :width="140" :height="70" />
+          <div>
+            <div class="bg">
+              <span class="label">今日工单总条数：</span>
+              <span class="value"> <countup :endVal="1234" /></span>
+            </div>
+            <div class="bg">
+              <span class="label">工单完成数：</span>
+              <span class="value"> <countup :endVal="1234" /></span>
+            </div>
+          </div>
+        </div>
+        <div class="item">
+          <pie :width="140" :height="70" />
+          <div>
+            <div class="bg">
+              <span class="label">今日工单总条数：</span>
+              <span class="value"> <countup :endVal="1234" /></span>
+            </div>
+            <div class="bg">
+              <span class="label">工单完成数：</span>
+              <span class="value"> <countup :endVal="1234" /></span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex align-center justify-between">
+        <div>
+          <div class="cell">
+            <span class="tag tag--success">普通</span>
+            <p class="content">
+              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
+              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
+            </p>
+          </div>
+          <div class="cell">
+            <span class="tag tag--error">普通</span>
+            <p class="content">
+              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
+              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
+            </p>
+          </div>
+          <div class="cell">
+            <span class="tag tag--primary">普通</span>
+            <p class="content">
+              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
+              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
+            </p>
+          </div>
+        </div>
+        <div class="more">查看更多</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import countup from 'vue-countup-v3'
+  import pie from './pie.vue'
+
+  let count = ref('58459')
+</script>
+
+<style scoped lang="scss">
+  .box-1 {
+    margin-top: vh(120);
+    width: vw(810);
+    height: vh(950);
+    padding: vw(10);
+    box-sizing: border-box;
+    background-image: url('@/assets/images/bg-3.png');
+    background-size: 100% 100%;
+    .header {
+      display: flex;
+      margin-top: vh(10);
+      & > div:nth-child(1) {
+        width: vw(300) !important;
+      }
+      & > 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;
+      }
+      .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;
+        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 {
+      width: 100%;
+      height: vh(600);
+    }
+    .footer {
+      .item {
+        flex: 1;
+        height: vh(120);
+        display: flex;
+        align-items: center;
+        background-image: url('@/assets/images/bg-3.png');
+        background-size: 100% 100%;
+        &:nth-child(1) {
+          margin-right: vw(10);
+        }
+        .bg {
+          padding-left: vw(20);
+          width: vw(243);
+          height: vh(40);
+          display: flex;
+          align-items: center;
+          background: linear-gradient(90deg, rgba(0, 150, 255, 0.34) 0%, rgba(0, 150, 255, 0) 100%);
+          &:nth-child(1) {
+            margin-bottom: vh(4);
+          }
+          .label {
+            font-weight: 400;
+            font-size: vw(14);
+            color: #fff;
+          }
+          .value {
+            font-weight: bold;
+            font-size: vw(28);
+            color: #02f9fa;
+          }
+        }
+      }
+      .cell {
+        display: flex;
+        margin-left: vw(4);
+        margin-top: vh(12);
+        &:nth-last-child(1) {
+          margin-bottom: 0;
+        }
+        .tag {
+          padding: 0 vw(16);
+          font-weight: bold;
+          font-size: vw(14);
+          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;
+          }
+        }
+        .content {
+          margin-left: vw(4);
+          padding: 0 vw(10);
+          width: vw(660);
+          height: vh(24);
+          line-height: vh(24);
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-weight: 400;
+          font-size: vw(14);
+          color: #ffffff;
+          border-radius: vw(2);
+          background: rgba(0, 150, 255, 0.28);
+        }
+      }
+      .more {
+        cursor: pointer;
+        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;
+      }
+    }
+  }
+</style>
diff --git a/src/views/scenic/components/box-2.vue b/src/views/scenic/components/box-2.vue
new file mode 100644
index 0000000..0d9a729
--- /dev/null
+++ b/src/views/scenic/components/box-2.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="container">
+    <div class="flex">
+      <div class="box mr-10">
+        <Title1 title="排队信息" />
+        <div class="flex justify-between">
+          <count-item label="今日出票" :count="35600" suffix="张" />
+          <count-item label="今日接待人数" :count="35600" suffix="人" />
+          <count-item label="排队人数" :count="35600" suffix="人" />
+          <count-item label="排队持续时间" :count="35600" suffix="S" />
+        </div>
+        <div class="pt-10">
+          <Title3 title="景区排队人数" />
+        </div>
+        <Line :width="540" :height="340" />
+      </div>
+      <div class="box mr-10">
+        <Title1 title="景区承载" />
+        <div class="flex">
+          <pie :width="160" :height="50" />
+          <div class="flex flex-1 justify-between">
+            <count-item label="景区当前人数" :count="35600" suffix="张" />
+            <count-item label="景区最大承载" :count="35600" suffix="人" />
+          </div>
+        </div>
+        <div class="pt-10">
+          <Title3 title="景区排队人数" />
+        </div>
+        <Line :width="540" :height="300" />
+      </div>
+      <div class="box-1 mr-10">
+        <Title1 title="停车信息" />
+      </div>
+      <div class="box-2">
+        <Title1 title="安全信息 " />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import CountItem from './count-item.vue'
+  import pie from './pie.vue'
+</script>
+
+<style scoped lang="scss">
+  .container {
+    flex: 1;
+    margin: vh(120) vw(10) 0 vw(10);
+    .bg {
+      background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
+    }
+    .box {
+      @extend .bg;
+      width: vw(575);
+      height: vh(475);
+    }
+    .box-1 {
+      @extend .bg;
+      width: vw(770);
+      height: vh(475);
+    }
+    .box-2 {
+      @extend .bg;
+      width: vw(440);
+      height: vh(475);
+    }
+  }
+</style>
diff --git a/src/views/scenic/components/count-item.vue b/src/views/scenic/components/count-item.vue
new file mode 100644
index 0000000..7b8743a
--- /dev/null
+++ b/src/views/scenic/components/count-item.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="count-item">
+    <div class="flex align-center">
+      <img src="@/assets/images/dian.svg" />
+      <span class="label">{{ label }}</span>
+    </div>
+    <div class="count">
+      <img class="bg" src="@/assets/images/count-bg.svg" />
+      <div class="flex align-center">
+        <countup class="value" :end-val="count" />
+        <span class="suffix">{{ suffix }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import countup from 'vue-countup-v3'
+  let props = defineProps({
+    label: {
+      type: Number,
+      default: ''
+    },
+    count: {
+      type: Number,
+      default: 0
+    },
+    suffix: {
+      type: String,
+      default: ''
+    }
+  })
+</script>
+
+<style scoped lang="scss">
+  .count-item {
+    flex: 1;
+    .label {
+      font-weight: 400;
+      font-size: vw(14);
+      margin-left: vw(4);
+      color: rgba(255, 255, 255, 0.9);
+    }
+    .count {
+      position: relative;
+      margin-top: vh(10);
+      z-index: 1;
+      .value {
+        padding-left: vw(20);
+        font-weight: bold;
+        font-size: vw(28);
+        color: #02f9fa;
+      }
+      .suffix {
+        margin-top: vh(4);
+        font-weight: bold;
+        font-size: vw(12);
+        color: #02f9fa;
+      }
+      .bg {
+        width: 100%;
+        height: vh(40);
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: -1;
+      }
+    }
+  }
+</style>
diff --git a/src/views/scenic/components/pie.vue b/src/views/scenic/components/pie.vue
new file mode 100644
index 0000000..7cc9831
--- /dev/null
+++ b/src/views/scenic/components/pie.vue
@@ -0,0 +1,178 @@
+<template>
+  <div
+    class="gauge"
+    :id="id"
+    :style="{
+      width: styleUtil.px2vw(width),
+      height: styleUtil.px2vh(height)
+    }"
+  />
+</template>
+
+<script setup>
+  import * as echarts from 'echarts'
+  import { guid } from '@/utils/util'
+  import styleUtil from '@/utils/styleUtil'
+  import { fitChartSize } from '@/utils/dataUtil'
+
+  const props = defineProps({
+    width: {
+      type: Number,
+      default: () => 0
+    },
+    height: {
+      type: Number,
+      default: () => 0
+    }
+  })
+  let gaugeChart = null
+  let id = ref(guid())
+  let defaultCofig = {
+    title: [
+      {
+        text: '45.5%',
+        x: 'center',
+        top: '34%',
+        textStyle: {
+          color: '#00D0FF',
+          fontSize: fitChartSize(12)
+        }
+      },
+      {
+        text: '完成率',
+        x: 'center',
+        top: '56%',
+        textStyle: {
+          color: '#fff',
+          fontSize: fitChartSize(12)
+        }
+      }
+    ],
+    series: [
+      // 内侧环
+      {
+        type: 'gauge',
+        radius: '100%',
+        center: ['50%', '60%'],
+        min: 0,
+        max: 100,
+        startAngle: 180,
+        endAngle: 0,
+        itemStyle: {
+          color: '#00D0FF'
+        },
+        axisLine: {
+          show: true,
+          roundCap: false,
+          lineStyle: {
+            color: [
+              [0, '#075199'],
+              [1, '#075199']
+            ],
+            width: fitChartSize(6)
+          }
+        },
+        progress: {
+          show: true,
+          roundCap: false,
+          width: fitChartSize(6)
+        },
+        pointer: {
+          // 指针
+          show: false
+        },
+        axisTick: {
+          // 刻度
+          show: false
+        },
+        splitLine: {
+          // 分割线
+          show: false
+        },
+        axisLabel: {
+          // 刻度标签
+          show: false
+        },
+        detail: {
+          // 仪表盘详情
+          show: false
+        },
+        data: [
+          {
+            value: 50
+          }
+        ]
+      },
+      {
+        type: 'gauge',
+        radius: '90%',
+        center: ['50%', '60%'],
+        min: 0,
+        max: 100,
+        startAngle: 180,
+        endAngle: 0,
+        itemStyle: {
+          color: '#057EB9'
+        },
+        axisLine: {
+          roundCap: false,
+          lineStyle: {
+            color: [
+              [0, '#075199'],
+              [1, '#075199']
+            ],
+            width: fitChartSize(6)
+          }
+        },
+        progress: {
+          show: true,
+          roundCap: false,
+          width: fitChartSize(6)
+        },
+        pointer: {
+          // 指针
+          show: false
+        },
+        axisTick: {
+          // 刻度
+          show: false
+        },
+        splitLine: {
+          // 分割线
+          show: false
+        },
+        axisLabel: {
+          // 刻度标签
+          show: false
+        },
+        detail: {
+          // 仪表盘详情
+          show: false
+        },
+        data: [
+          {
+            value: 50
+          }
+        ]
+      }
+    ]
+  }
+
+  onMounted(() => {
+    init()
+  })
+  const init = () => {
+    // 基于准备好的dom，初始化echarts实例
+    gaugeChart = echarts.init(document.getElementById(id.value))
+    gaugeChart.setOption({ ...defaultCofig })
+    window.addEventListener('resize', resize)
+  }
+  const resize = () => {
+    if (gaugeChart) {
+      gaugeChart.dispose()
+      init()
+    }
+  }
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/scenic/index.vue b/src/views/scenic/index.vue
new file mode 100644
index 0000000..7fa5434
--- /dev/null
+++ b/src/views/scenic/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <Header :current="current" :nav-left="navLeft" @on-change="onChange" />
+  <CoreVideo />
+  <box1 />
+  <box2 />
+  <Correspondence />
+</template>
+
+<script setup>
+  import box1 from './components/box-1.vue'
+  import box2 from './components/box-2.vue'
+
+  const navLeft = [{ name: '奉节县' }, { name: '龙桥河' }, { name: '山峡之巅' }]
+  let current = ref(0)
+
+  const onChange = (e) => {
+    current.value = e
+  }
+</script>
+
+<style scoped lang="scss"></style>