大屏轮播以及滚动效果

index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <meta name="renderer" content="webkit" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />
     <link rel="icon" href="/favicon.ico" />
     <title>新能源项目管理平台</title>
     <!--[if lt IE 11

src/assets/fonts/fonts.scss

@@ -0,0 +1,164 @@
+@font-face {
+    font-family: 'Rang_men_zheng'; //庞门正道字体
+    src: url('./PangmenTi/PangMenZhengDaoBiaoTiTi-1.ttf');
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Rang_men_zheng_title'; //庞门正道标题体
+    src: url('./PangMenZhengDaoBiaoTiTi/PangMenZhengDaoBiaoTiTi-1.ttf');
+    font-weight: normal;
+    font-weight: normal;
+    font-style: normal;
+}
+// 思源字体
+// @font-face {
+//     font-family: 'SourceHanSansCN-Bold';
+//     src: url('./ReflectTi/SourceHanSansCN-Bold_0.otf'); //暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+// @font-face {
+//     font-family: 'SourceHanSansCN-ExtraLight';
+//     src: url('./ReflectTi/SourceHanSansCN-ExtraLight.otf');//暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+// @font-face {
+//     font-family: 'SourceHanSansCN-Heavy';
+//     src: url('./ReflectTi/SourceHanSansCN-Heavy.otf');//暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+// @font-face {
+//     font-family: 'SourceHanSansCN-Light';
+//     src: url('./ReflectTi/SourceHanSansCN-Light.otf');
+//     font-weight: normal;
+//     font-style: normal;
+// }
+// @font-face {
+//     font-family: 'SourceHanSansCN-Medium';
+//     src: url('./ReflectTi/SourceHanSansCN-Medium_0.otf');
+//     font-weight: normal;
+//     font-style: normal;
+// }
+
+// @font-face {
+//     font-family: 'SourceHanSansCN-Normal';
+//     src: url('./ReflectTi/SourceHanSansCN-Normal.otf');//暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+
+@font-face {
+    font-family: 'SourceHanSansCN-Regular';
+    src: url('./ReflectTi/SourceHanSansCN-Regular.otf');
+    font-weight: normal;
+    font-style: normal;
+}
+// @font-face {
+//     font-family: 'SourceHanSansCN-Bold';
+//     src: url('./ReflectTi/SourceHanSerifCN-Bold.otf');//暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+
+// @font-face {
+//     font-family: 'SourceHanSansCN-ExtraLight';
+//     src: url('./ReflectTi/SourceHanSerifCN-ExtraLight.otf');//暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+
+// @font-face {
+//     font-family: 'SourceHanSerifCN-Heavy';
+//     src: url('./ReflectTi/SourceHanSerifCN-Heavy.otf');//暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+
+// @font-face {
+//     font-family: 'SourceHanSerifCN-Light';
+//     src: url('./ReflectTi/SourceHanSerifCN-Light.otf');//暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+
+// @font-face {
+//     font-family: 'SourceHanSerifCN-Medium';
+//     src: url('./ReflectTi/SourceHanSerifCN-Medium.otf');//暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+// @font-face {
+//     font-family: 'SourceHanSerifCN-Regular';
+//     src: url('./ReflectTi/SourceHanSerifCN-Regular.otf');//暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+// @font-face {
+//     font-family: 'SourceHanSerifCN-SemiBold';
+//     src: url('./ReflectTi/SourceHanSerifCN-SemiBold.otf');//暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+
+// 阿里巴巴普惠体
+@font-face {
+    font-family: 'Alibaba-PuHuiTi-Bold';
+    src: url('./Alibaba/Alibaba-PuHuiTi-Bold.otf');
+    font-weight: normal;
+    font-style: normal;
+}
+//阿里黑体
+@font-face {
+    font-family: 'AlimamaShuHeiTi-Bold';
+    src: url('./Alibaba/AlimamaShuHeiTi-Bold.otf');
+    font-weight: normal;
+    font-style: normal;
+}
+// @font-face {
+//     font-family: 'Alibaba-PuHuiTi-Heavy';
+//     src: url('./Alibaba/Alibaba-PuHuiTi-Heavy.otf');//暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+// @font-face {
+//     font-family: 'Alibaba-PuHuiTi-Light';
+//     src: url('./Alibaba/Alibaba-PuHuiTi-Light.otf');//暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+@font-face {
+    font-family: 'Alibaba-PuHuiTi-Medium';
+    src: url('./Alibaba/Alibaba-PuHuiTi-Medium.otf');
+    font-weight: normal;
+    font-style: normal;
+}
+// @font-face {
+//     font-family: 'Alibaba-PuHuiTi-Regular';
+//     src: url('./Alibaba/Alibaba-PuHuiTi-Regular.otf');//暂时没用
+//     font-weight: normal;
+//     font-style: normal;
+// }
+@font-face {
+    font-family: 'DOUYUFont'; //斗鱼追光体
+    src: url('./DouYu//斗鱼追光体2.0.ttf');
+    font-weight: normal;
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'D-Din'; 
+    src: url('./D-Din//D-DIN.ttf');
+    font-weight: normal;
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'Roboto-Regular'; //Roboto
+    src: url('./Roboto//Roboto-Regular.ttf');
+    font-weight: normal;
+    font-weight: normal;
+    font-style: normal;
+}

src/main.ts

@@ -28,6 +28,8 @@ import ElementIcons from '@/plugins/svgicon';
 //通信
 import mitt from 'mitt';
 
+import '@/assets/fonts/fonts.scss';
+
 //打印
 import print from 'vue3-print-nb';
 

src/views/gisHome/component/carousel.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="carousel">
+    <div class="title">
+      <div class="flex items-center">
+        <img src="@/assets/images/ligner.png" alt="" />
+        <div class="flex justify-between w100% items-center">
+          <div class="subTitle flex items-center">
+            <img src="@/assets/images/robot-line.png" alt="" />
+            <span>AI安全巡检</span>
+          </div>
+          <div class="hint">AI SAFETY INSPECTION</div>
+        </div>
+        <div class="mark"></div>
+      </div>
+    </div>
+    <div class="carousellist flex items-center">
+      <div>
+        <img src="@/assets/images/toleft.png" alt="" />
+      </div>
+      <div class="carouselcontainer flex justify-between">
+        <div class="carouselItem flex flex-col justify-between" v-for="item in 5">
+          <img src="@/assets/images/carousel.png" alt="" />
+          <div class="time">03-18 15:00</div>
+          <div class="remark">未佩戴安全帽</div>
+        </div>
+      </div>
+      <div>
+        <img src="@/assets/images/toright.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+console.log(window.innerWidth);
+</script>
+
+<style lang="scss" scoped>
+@import '../css/gis.scss';
+
+.carousel {
+  width: vw(907);
+  height: vh(167);
+  background-color: rgba(8, 14, 15, 0.3);
+  backdrop-filter: blur(vw(4));
+  position: absolute;
+  bottom: vh(31);
+  left: vw(507);
+  padding-top: vh(10);
+}
+
+.carousellist {
+  margin-top: vh(16);
+  padding: 0 vw(23);
+  width: 100%;
+  height: vh(84);
+
+  > div > img {
+    width: vw(20);
+    cursor: pointer;
+  }
+
+  .carouselcontainer {
+    flex: 1;
+    height: 100%;
+    margin: 0 vw(13);
+
+    .carouselItem {
+      font-size: vw(12);
+      color: #fff;
+      width: vw(133);
+      position: relative;
+
+      .time {
+        text-align: right;
+        margin-right: vw(3);
+
+        font-family: 'D-Din';
+      }
+
+      .remark {
+        text-align: center;
+        height: vh(21);
+        line-height: vh(21);
+        font-family: '思源黑体';
+        background: rgba(0, 0, 0, 0.5);
+        margin-right: vw(3);
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        object-fit: cover;
+        top: 0;
+        left: 0;
+        z-index: -1;
+      }
+    }
+  }
+}
+
+.title {
+  > div {
+    > img {
+      width: vw(14);
+      height: vh(35);
+      margin-right: vw(8);
+    }
+  }
+
+  .subTitle {
+    img {
+      width: vw(18.8);
+      margin-right: vw(10);
+    }
+
+    span {
+      text-shadow: 0 0 vw(8) rgba(2, 3, 7, 0.35);
+      font-size: vw(20);
+      font-weight: 500;
+      letter-spacing: 0;
+      color: rgba(255, 255, 255, 1);
+    }
+  }
+
+  .hint {
+    font-size: vw(14);
+    font-weight: 400;
+    color: rgba(204, 204, 204, 0.5);
+    margin-right: vw(20);
+  }
+
+  .mark {
+    width: vw(2);
+    height: vh(14);
+    background: rgba(67, 226, 203);
+    margin-right: vw(10);
+  }
+
+  .ligner {
+    height: vh(1);
+    background: linear-gradient(to right, transparent 0%, #43e2cb 90%);
+    margin-left: vw(14);
+  }
+}
+</style>

src/views/gisHome/component/leftMain.vue

@@ -95,8 +95,8 @@ const initMachinerycharts = () => {
     },
     grid: {
       // 让图表占满容器
-      top: '45px',
-      bottom: '50px'
+      top: '45vh',
+      bottom: '50vh'
     },
     xAxis: {
       data: dataAxis,
@@ -204,7 +204,7 @@ const initMachinerycharts = () => {
             { offset: 1, color: 'rgba(67, 158, 255, 0)' }
           ])
         },
-        barWidth: '13px',
+        barWidth: '13vh',
         data: data
       }
     ]
@@ -409,7 +409,7 @@ const initOrderChart = () => {
           focus: 'series'
         },
         data: [320, 302, 301, 334, 345, 356, 367],
-        barWidth: '3px'
+        barWidth: 3
       },
       {
         name: '领用量',
@@ -423,7 +423,7 @@ const initOrderChart = () => {
         },
         data: [120, 132, 101, 134, 152, 103, 150],
         showBackground: true,
-        barWidth: '3px',
+        barWidth: 3,
         backgroundStyle: {
           color: 'rgba(217, 231, 255, 0.1)'
         }
@@ -443,93 +443,92 @@ onMounted(() => {
 @import '../css/gis.scss';
 
 #machineryMain {
-  width: 421px;
+  width: vw(421);
   height: vh(222);
-  margin-left: 14px;
+  margin-left: vw(14);
   margin-bottom: vh(30);
 }
 
 #orderMain {
   width: 100%;
-  padding-right: 14px;
+  padding-right: vw(14);
   height: vh(300);
 }
 .title {
-  > img {
-    width: 14px;
-    height: 35px;
+  > div > img {
+    width: vw(14);
+    height: vh(35);
   }
 
   .subTitle {
     img {
-      width: 18.8px;
-      height: 20px;
-      margin-right: 10px;
+      width: vw(18.8);
+      height: vh(20);
+      margin-right: vw(10);
     }
 
     span {
-      text-shadow: 0px 0px 8px rgba(2, 3, 7, 0.35);
-      font-size: 20px;
+      text-shadow: 0 0 vw(8) rgba(2, 3, 7, 0.35);
+      font-size: vw(20);
       font-weight: 500;
-      letter-spacing: 0px;
+      letter-spacing: 0;
       color: rgba(255, 255, 255, 1);
     }
   }
 
   .hint {
-    font-size: 14px;
+    font-size: vw(14);
     font-weight: 400;
     color: rgba(204, 204, 204, 0.5);
-    margin-right: 20px;
+    margin-right: vw(20);
   }
 
   .mark {
-    width: 2px;
+    width: vw(2);
     height: vh(14);
     background: rgba(67, 226, 203);
-    margin-right: 10px;
+    margin-right: vw(10);
   }
 
   .ligner {
-    height: 1px;
+    height: vh(1);
     background: linear-gradient(to right, transparent 0%, #43e2cb 90%);
-    margin-left: 14px;
+    margin-left: vw(14);
   }
 }
 .situation {
-  width: 449px;
+  width: vw(449);
   height: vh(927);
   background: rgb(1, 26, 33, 0.4);
-  backdrop-filter: blur(8px);
+  backdrop-filter: blur(vw(8));
   position: absolute;
   top: vh(122);
-  left: 21px;
+  left: vw(21);
   .main {
     padding-top: vh(30);
 
     .cardList {
-      padding: 0 20px;
+      padding: 0 vw(20);
       margin-top: vh(20);
       margin-bottom: vh(30);
       display: flex;
       justify-content: space-between;
 
       .card {
-        border: 1px dashed rgba(67, 226, 203, 0.3);
-        width: 112px;
+        border: vw(1) dashed rgba(67, 226, 203, 0.3);
+        width: vw(112);
         height: vh(155);
         padding-top: vh(15);
         text-align: center;
         color: rgba(255, 255, 255, 1);
 
         img {
-          width: 44px;
-          height: vh(44);
+          width: vw(44);
           margin-bottom: vh(20);
         }
 
         > p {
-          font-size: 14px;
+          font-size: vw(14);
           margin-top: 0;
           margin-bottom: vh(10);
           font-family: '思源黑体';
@@ -537,13 +536,13 @@ onMounted(() => {
 
         .peopleNum {
           font-weight: 400;
-          font-size: 14px;
+          font-size: vw(14);
 
-          text-shadow: 0px 1.24px 6.21px rgba(0, 190, 247, 1);
+          text-shadow: 0 vw(1.24) vw(6.21) rgba(0, 190, 247, 1);
           color: rgba(230, 247, 255, 1);
 
           span {
-            font-size: 24px;
+            font-size: vw(24);
             font-weight: 700;
           }
         }
@@ -558,7 +557,7 @@ onMounted(() => {
     left: 0;
     bottom: 0;
     right: 0;
-    padding: 2px;
+    padding: vw(2);
     background: linear-gradient(to bottom right, #43e2cb 0%, transparent 50%);
     -webkit-mask:
       linear-gradient(#fff 0 0) content-box,
@@ -569,17 +568,17 @@ onMounted(() => {
   }
 
   .topleft {
-    width: 7px;
-    height: 7px;
+    width: vw(7);
+    height: vw(7);
     position: absolute;
-    top: 1px;
-    left: 1px;
+    top: vh(1);
+    left: vw(1);
     background-image: url('@/assets/images/topleft.png');
   }
 
   .bottomright {
-    width: 7px;
-    height: 7px;
+    width: vw(7);
+    height: vw(7);
     position: absolute;
     bottom: 0;
     right: 0;

src/views/gisHome/component/rightMain.vue

@@ -19,9 +19,10 @@
         <div class="content events-content event_s">
           <ul
             class="events-list"
-            @mouseenter.native="autoScrollTable(true, false)"
-            @mouseleave.native="autoScrollTable(false, true)"
+            @mouseenter.native="autoScrollTable(true, 'projectRef')"
+            @mouseleave.native="autoScrollTable(false, 'projectRef')"
             id="event_scroll"
+            ref="projectScroll"
           >
             <li v-for="(item, index) in events" :key="index">
               <span class="text detail" style="display: inline"> {{ item.headline }}...</span>
@@ -92,7 +93,12 @@
               <el-table-column prop="status" label="操作" />
             </el-table>
           </div>
-          <div class="tbody">
+          <div
+            class="tbody"
+            ref="tableScroll"
+            @mouseenter.native="autoScrollTable(true, 'tableRef')"
+            @mouseleave.native="autoScrollTable(false, 'tableRef')"
+          >
             <el-table
               :data="safetyData"
               stripe
@@ -142,15 +148,19 @@
             <p>20<span>%</span></p>
           </div>
         </div>
-        <div class="qualityList text-3.5">
-          <div class="qualityItem flex items-center mb-3.25" v-for="item in 6">
+        <div
+          class="qualityList"
+          @mouseenter.native="autoScrollTable(true, 'qualityRef')"
+          @mouseleave.native="autoScrollTable(false, 'qualityRef')"
+          ref="qualityScroll"
+        >
+          <div class="qualityItem flex items-center" v-for="item in 6">
             <div>
-              <img src="@/assets/images/timeIcon.png" class="w3 mr-2" alt="" />
+              <img src="@/assets/images/timeIcon.png" alt="" />
               <span class="text-white">2024-11-15</span>
             </div>
-            <div class="text-#43E2CB ml-10 mr-13.5">巡检记录</div>
-
-            <div class="text-#E6F7FF w-38.5 text-truncate">
+            <div class="text-#43E2CB record">巡检记录</div>
+            <div class="text-#E6F7FF text-truncate">
               <el-tooltip content="桩基钻孔深度、直径不足11111111" placement="top"> 桩基钻孔深度、直径不足</el-tooltip>
             </div>
           </div>
@@ -179,9 +189,34 @@
 
 <script lang="ts" setup>
 import * as echarts from 'echarts';
-
+//页面高度
 type EChartsOption = echarts.EChartsOption;
-const autoScrollTable = (isAuto, isStop) => {};
+const option = ref<EChartsOption>(null);
+const myMachineryChart = ref(null);
+const projectScroll = ref(null);
+const tableScroll = ref(null);
+const qualityScroll = ref(null);
+const scrollList = reactive({
+  projectRef: {
+    dom: projectScroll,
+    intervalId: null
+  },
+  tableRef: {
+    dom: tableScroll,
+    intervalId: null
+  },
+  qualityRef: {
+    dom: qualityScroll,
+    intervalId: null
+  }
+});
+const autoScrollTable = (isAuto, ref) => {
+  if (isAuto) {
+    clearInterval(scrollList[ref].intervalId);
+  } else {
+    startScroll(ref);
+  }
+};
 const events = ref([
   {
     'id': 23,
@@ -269,15 +304,15 @@ new Array(10).fill(0).forEach((item) => {
 });
 
 const onMore = (item, isShow) => {};
-
+//初始化形象进度图表
 const initUserChart = () => {
   let chartDom = document.getElementById('userMain');
-  let myMachineryChart = echarts.init(chartDom);
-  let option: EChartsOption;
+  myMachineryChart.value = echarts.init(chartDom);
+  console.log(123123);
 
   // prettier-ignore
   let dataAxis = ['桩点浇筑', '支架安装', '组件安装', '箱变安装'];
-  option = {
+  option.value = {
     tooltip: {
       trigger: 'axis',
       axisPointer: {
@@ -345,17 +380,69 @@ const initUserChart = () => {
         },
         data: [120, 132, 101, 134],
         showBackground: true,
-        barWidth: '8px',
+        barWidth: 8,
         backgroundStyle: {
           color: 'rgba(108, 128, 151, .1)'
         }
       }
     ]
   };
-  option && myMachineryChart.setOption(option);
+  option.value && myMachineryChart.value.setOption(option.value);
 };
+
+//开始滚动
+const startScroll = (ref) => {
+  const { dom } = scrollList[ref];
+  const scrollContainer = dom.parentNode;
+  scrollList[ref].intervalId = setInterval(() => {
+    dom.scrollTop += 1;
+
+    if (dom.scrollHeight == dom.clientHeight + dom.scrollTop) {
+      dom.scrollTop = 0;
+    }
+  }, 50);
+};
+//停止滚动
+const stopScroll = (intervalId) => {
+  clearInterval(intervalId);
+};
+
+// 防抖函数
+const debounce = <T,>(func: (this: T, ...args: any[]) => void, delay: number) => {
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  return function (this: T, ...args: any[]) {
+    const context = this;
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      func.apply(context, args);
+    }, delay);
+  };
+};
+
+// 窗口大小变化时触发的函数
+const handleResize = () => {
+  myMachineryChart.value && myMachineryChart.value.dispose();
+  initUserChart();
+};
+
+const debouncedHandleResize = debounce(handleResize, 300);
+
 onMounted(() => {
   initUserChart();
+  console.log(scrollList, 'scrollList');
+
+  window.addEventListener('resize', debouncedHandleResize);
+  for (const key in scrollList) {
+    startScroll(key);
+  }
+});
+
+onUnmounted(() => {
+  for (const key in scrollList) {
+    stopScroll(scrollList[key].intervalId);
+  }
+
+  window.removeEventListener('resize', debouncedHandleResize);
 });
 </script>
 
@@ -364,19 +451,19 @@ onMounted(() => {
 
 #userMain {
   width: 100%;
-  padding-right: 14px;
+  padding-right: vw(14);
   margin-top: vh(19);
   height: vh(150);
 }
 
 .management {
-  width: 449px;
+  width: vw(449);
   height: vh(927);
   background: rgb(1, 26, 33, 0.4);
-  backdrop-filter: blur(8px);
+  backdrop-filter: blur(vw(8));
   position: absolute;
   top: vh(122);
-  right: 21px;
+  right: vw(21);
 
   .main {
     padding-top: vh(17);
@@ -389,7 +476,7 @@ onMounted(() => {
     left: 0;
     bottom: 0;
     right: 0;
-    padding: 2px;
+    padding: vw(2);
     background: linear-gradient(to bottom left, #43e2cb 0%, transparent 50%);
     -webkit-mask:
       linear-gradient(#fff 0 0) content-box,
@@ -400,18 +487,18 @@ onMounted(() => {
   }
 
   .topleft {
-    width: 7px;
-    height: 7px;
+    width: vw(7);
+    height: vw(7);
     position: absolute;
-    top: 1px;
-    right: 1px;
+    top: vh(1);
+    right: vw(1);
     background-image: url('@/assets/images/topleft.png');
     transform: rotatez(90deg);
   }
 
   .bottomright {
-    width: 7px;
-    height: 7px;
+    width: vw(7);
+    height: vw(7);
     position: absolute;
     bottom: 0;
     left: 0;
@@ -421,45 +508,45 @@ onMounted(() => {
 }
 
 .title {
-  > img {
-    width: 14px;
-    height: 35px;
+  > div > img {
+    width: vw(14);
+    height: vh(35);
   }
 
   .subTitle {
     img {
-      width: 18.8px;
-      height: 20px;
-      margin-right: 10px;
+      width: vw(18.8);
+      height: vh(20);
+      margin-right: vw(10);
     }
 
     span {
-      text-shadow: 0px 0px 8px rgba(2, 3, 7, 0.35);
-      font-size: 20px;
+      text-shadow: 0 0 vw(8) rgba(2, 3, 7, 0.35);
+      font-size: vw(20);
       font-weight: 500;
-      letter-spacing: 0px;
+      letter-spacing: 0;
       color: rgba(255, 255, 255, 1);
     }
   }
 
   .hint {
-    font-size: 14px;
+    font-size: vw(14);
     font-weight: 400;
     color: rgba(204, 204, 204, 0.5);
-    margin-right: 20px;
+    margin-right: vw(20);
   }
 
   .mark {
-    width: 2px;
+    width: vw(2);
     height: vh(14);
     background: rgba(67, 226, 203);
-    margin-right: 10px;
+    margin-right: vw(10);
   }
 
   .ligner {
-    height: 1px;
+    height: vh(1);
     background: linear-gradient(to right, transparent 0%, #43e2cb 90%);
-    margin-left: 14px;
+    margin-left: vw(14);
   }
 }
 
@@ -467,20 +554,20 @@ onMounted(() => {
   margin: vh(13) 0 vh(15);
   font-family: '思源黑体';
   .qualitydata {
-    margin: 0 0 vh(12) 28px;
+    margin: 0 0 vh(12) vw(28);
 
     img {
-      width: 68px;
-      margin-right: 48px;
+      width: vw(68);
+      margin-right: vw(48);
     }
 
     .qualityNum {
-      width: 99px;
+      width: vw(99);
       height: vh(53);
       text-align: center;
       div {
         /** 文本1 */
-        font-size: 14px;
+        font-size: vw(14);
         font-weight: 400;
         color: rgba(255, 255, 255, 1);
         margin-bottom: vh(5);
@@ -492,12 +579,13 @@ onMounted(() => {
           width: 100%;
           height: vh(6);
           background-color: rgba(67, 226, 203, 0.1);
+          z-index: -1;
           &::after {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
-            width: 3px;
+            width: vw(3);
             height: vh(3);
             background-color: rgba(67, 226, 203, 1);
           }
@@ -506,7 +594,7 @@ onMounted(() => {
             position: absolute;
             top: 0;
             right: 0;
-            width: 3px;
+            width: vw(3);
             height: vh(3);
             background-color: rgba(67, 226, 203, 1);
           }
@@ -516,22 +604,36 @@ onMounted(() => {
         width: 100%;
         height: vh(27);
         background-color: rgba(67, 226, 203, 0.1);
-        font-size: 24px;
+        font-size: vw(24);
         color: #fff;
-        text-shadow: 0px 1.24px 6.21px rgba(0, 190, 247, 1);
+        text-shadow: 0 vw(1.24) vw(6.21) rgba(0, 190, 247, 1);
         line-height: vh(27);
         span {
-          font-size: 12px;
+          font-size: vw(12);
         }
       }
     }
   }
 
   .qualityList {
-    margin-left: 21px;
+    margin-left: vw(21);
     height: vh(90);
     overflow: auto;
-    margin-right: 10px;
+    margin-right: vw(10);
+    font-size: vw(14);
+    .qualityItem {
+      margin-bottom: vh(13);
+      img {
+        width: vw(12);
+        margin-right: vw(8);
+      }
+      .record {
+        margin: 0 vw(54) 0 vw(40);
+      }
+      .text-truncate {
+        width: vw(154);
+      }
+    }
   }
 }
 
@@ -540,7 +642,7 @@ onMounted(() => {
 
   .head {
     img {
-      width: 36px;
+      width: vw(36);
     }
 
     .safetyData-item {
@@ -548,19 +650,19 @@ onMounted(() => {
 
       > div {
         > span {
-          font-size: 14px;
+          font-size: vw(14);
           font-weight: 400;
           color: rgba(204, 204, 204, 1);
         }
 
         > p {
-          text-shadow: 0px 1.24px 6.21px rgba(0, 190, 247, 1);
-          font-size: 24px;
+          text-shadow: 0 vw(1.24) vw(6.21) rgba(0, 190, 247, 1);
+          font-size: vw(24);
           font-weight: 700;
           color: rgba(255, 255, 255, 1);
 
           > span {
-            font-size: 12px;
+            font-size: vw(12);
             font-weight: 400;
             color: rgba(255, 255, 255, 1);
           }
@@ -578,18 +680,16 @@ p {
   margin: vh(20) 0 vh(15);
   width: 100%;
   height: vh(82);
-
-  // border: 1px solid red;
   .events-list {
     height: 100%;
     overflow: auto;
-    padding-right: 10px;
+    padding-right: vw(10);
     margin: 0;
     padding: 0;
 
     > li {
       width: 100%;
-      padding-left: 20px;
+      padding-left: vw(20);
       background: url('@/assets/images/li.png') no-repeat 0 20%;
       list-style-type: none;
       list-style-position: inside;
@@ -602,14 +702,14 @@ p {
 
       .more {
         color: rgba(67, 226, 203, 1);
-        font-size: 14px;
+        font-size: vw(14);
         cursor: pointer;
       }
 
       .text {
-        font-size: 12px;
+        font-size: vw(12);
         font-weight: 400;
-        letter-spacing: 0px;
+        letter-spacing: 0;
         line-height: vh(24);
         color: rgba(230, 247, 255, 1);
         text-align: justify;
@@ -630,11 +730,11 @@ p {
 
     > li::after {
       content: '';
-      border-left: 1px dashed rgba(0, 190, 247, 0.3);
+      border-left: vw(1) dashed rgba(0, 190, 247, 0.3);
       position: absolute;
       top: vh(22);
-      left: 5px;
-      width: 10px;
+      left: vw(5);
+      width: vw(10);
       height: 85%;
       display: block;
     }
@@ -649,7 +749,7 @@ p {
 .content {
   width: 100%;
   height: vh(82);
-  padding: 0 10px 0 20px;
+  padding: 0 vw(10) 0 vw(20);
 }
 
 .event_s {
@@ -659,16 +759,16 @@ p {
 }
 
 .tables {
-  padding: 0 13px 0 14px;
+  padding: 0 vw(13) 0 vw(14);
 
   .tbody {
     height: vh(94);
     overflow: auto;
-    padding-right: 14px;
+    padding-right: vw(14);
   }
 
   .thead {
-    padding-right: 20px;
+    padding-right: vw(20);
     margin-top: vh(12);
   }
 }
@@ -680,7 +780,7 @@ p {
     background: rgba(67, 226, 203, 0.2) !important; //这是设置透明背景色
     border: none; //这是设置透明边框
     color: rgba(255, 255, 255, 1); //这是设置字体颜色
-    font-size: 12px;
+    font-size: vw(12);
     text-align: center;
     padding: vh(4) 0;
     height: vh(26) !important;
@@ -703,7 +803,7 @@ p {
       background: transparent !important; //这是设置透明背景色
       color: #43e2cb;
       font-weight: 400;
-      font-size: 14px;
+      font-size: vw(14);
     }
   }
 
@@ -714,7 +814,7 @@ p {
 
 /* 滚动条整体样式 */
 ::-webkit-scrollbar {
-  width: 6px;
+  width: vw(6);
   /* 纵向滚动条宽度 */
 }
 
@@ -722,14 +822,14 @@ p {
 ::-webkit-scrollbar-track {
   background: transparent;
   /* 轨道背景颜色 */
-  border-radius: 5px;
+  border-radius: vw(5);
   /* 轨道圆角 */
 }
 
 /* 滚动条滑块 */
 ::-webkit-scrollbar-thumb {
   background: linear-gradient(180deg, rgba(67, 226, 203, 0.5) 0%, rgba(21, 181, 230, 0.5) 100%);
-  border-radius: 5px;
+  border-radius: vw(5);
   /* 滑块圆角 */
 }
 

src/views/gisHome/index.vue

@@ -1,39 +1,54 @@
 <template>
   <div class="h100vh bg-black w100vw">
-    <div class="header h23.25 flex px-5 items-center justify-between mb-7.5">
-      <div class="productionday h12 flex items-center">
+    <div class="header flex items-center justify-between">
+      <div class="productionday flex items-center">
         <img src="@/assets/images/projectLogo.png" alt="" />
         <img src="@/assets/images/projectday.png" alt="" />
         <img src="@/assets/images/day.png" alt="" />
         <img src="@/assets/images/days.png" alt="" />
       </div>
-      <div class="calendar flex items-center pt-3.5">
-        <div class="Weather text-white flex items-center mr-7.5">
-          <img src="@/assets/images/Weather.png" alt="" class="w12.5" />
-          <span class="textBlack">多云</span><span class="robotocondensed">9°/18°</span>
+      <div class="title">XXX智慧工地管理平台</div>
+      <div class="calendar flex items-center">
+        <div class="Weather text-white flex items-center">
+          <img src="@/assets/images/Weather.png" alt="" />
+          <div><span class="textBlack">多云</span><span class="robotocondensed">9°/18°</span></div>
         </div>
         <div class="weeks">
           <span class="textBlack">周一(</span> <span class="robotocondensed">2024.3.11 08:35:46</span> <span class="textBlack">)</span>
         </div>
-        <div class="Segmentation mx-5">
-          <div class="w0.75 h2.5 bg-#43E2CB mb-1"></div>
-          <div class="w0.75 h2.5 bg-#43E2CB"></div>
+        <div class="Segmentation">
+          <div class="bg-#43E2CB"></div>
+          <div class="bg-#43E2CB"></div>
+        </div>
+        <div class="goHome flex items-center cursor-pointer" @click="goHome">
+          <img src="@/assets/images/setting.png" alt="" />
+          <div>管理系统</div>
         </div>
-        <div class="w28 h5.75"></div>
       </div>
     </div>
-    <div class="content px-5">
+    <div class="content">
       <Map></Map>
       <leftMain></leftMain>
       <RightMain></RightMain>
+      <Carousel></Carousel>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import router from '@/router';
+import Carousel from './component/carousel.vue';
 import LeftMain from './component/leftMain.vue';
 import Map from './component/map.vue';
 import RightMain from './component/rightMain.vue';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const goHome = () => {
+  let routeUrl = router.resolve({
+    path: '/index'
+  });
+  window.open(routeUrl.href, 'index');
+};
 </script>
 
 <style lang="scss" scoped>
@@ -41,21 +56,85 @@ import RightMain from './component/rightMain.vue';
 
 .header {
   background-image: url('@/assets/images/header.png');
-  //   background-size: 100% 100%;
+  height: vh(92.58);
+  padding: 0 vw(20);
+  width: vw(1920);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+.calendar {
+  padding-top: vh(14);
+  font-size: vw(16);
+  .Weather {
+    margin-right: vw(30);
+    img {
+      width: vw(50);
+    }
+  }
+  .Segmentation {
+    margin: 0 vw(20);
+    > div {
+      width: vw(3);
+      height: vh(10);
+      &:first-child {
+        margin-bottom: vw(4);
+      }
+    }
+  }
+}
+
+.title {
+  color: rgba(255, 255, 255, 1);
+  font-family: 'DOUYUFont';
+  font-size: vw(32);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  width: vw(579);
+  height: vh(92.58);
+  line-height: vh(92.58);
+  letter-spacing: 5px;
+  text-align: center;
+}
+
+.productionday {
+  height: vh(48);
+}
+
+.goHome {
+  height: vh(23);
+  width: vw(112);
+  color: rgba(217, 231, 255, 1);
+  font-family: 'DOUYUFont';
+  font-size: vw(16);
+  img {
+    width: vw(20);
+    margin-right: vw(8);
+  }
+  div {
+    line-height: vh(23);
+    padding-top: vh(7);
+  }
+}
+
+.content {
+  padding: 0 vw(20);
 }
 
 .robotocondensed {
   font-weight: 700;
-  letter-spacing: 0px;
-  line-height: 23.17px;
+  letter-spacing: 0;
   color: rgba(230, 247, 255, 1);
   text-align: right;
-  vertical-align: top;
   font-family: 'Roboto Condensed';
 }
 
 .textBlack {
-  letter-spacing: 0px;
+  letter-spacing: 0;
   line-height: vw(23.17);
   color: rgba(230, 247, 255, 1);
   font-family: '思源黑体';