feat: 改为滚动条

罗广辉

2025-03-27 c6a8116fdfcba0d799eca8c2ac51c6ba5c6b07b9

feat: 改为滚动条

 src/layout/Header.vue

@@ -1,9 +1,9 @@
<template>
  <div class="header">
    <div class="h-left">
      <div class="left-item active">首页</div>
      <div class="left-item active" @click="router.push('/')">首页</div>
      <div class="left-item">集群调度</div>
      <div class="left-item">任务管理</div>
      <div class="left-item" @click="router.push('/taskManage')">任务管理</div>
      <div class="left-item">航线规划</div>
    </div>
    <div class="h-right">
@@ -13,17 +13,10 @@
      <div class="right-item">系统运维</div>
    </div>
  </div>
  <!-- <div :style="{ background: '#2bc03f', height: hToV(50), width: wToR(50) }">test</div> -->
</template>

<script>
import { hToV, wToR } from '@/utils/pxConver';

export default {
  methods: { wToR, hToV },
  mounted() {
  },
};
<script setup>
const router = useRouter()
</script>

<style scoped lang="scss">

 src/layout/index.vue

@@ -1,8 +1,8 @@
<template>
  <div class="home">
  <div :class="{layout:true, 'narrowScreen':narrowScreen}">
    <div id="cesium"></div>
    <div class="page-index">
      <Header/>
      <Header />
      <router-view></router-view>
    </div>
  </div>
@@ -14,27 +14,54 @@
import Header from './Header.vue';

const { _init } = cesiumOperation();
const narrowScreen  = ref(false)

const narrowScreenFun = () => {
  // 监听窗口变化，计算是不是 窄屏幕
  narrowScreen.value = window.innerWidth / window.innerHeight < 16 / 9;
};

onMounted(() => {
  _init('cesium');
  narrowScreenFun()
  window.addEventListener('resize', narrowScreenFun);
});
</script>

<style scoped lang="scss">
.home {
.layout {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  height: 100%;
  overflow-x: auto;
  background: #020f25;
  scrollbar-width: none; /* Firefox 隐藏滚动条 */
  &::-webkit-scrollbar {
    display: none; /* Chrome、Safari 隐藏滚动条 */
  }

  &.narrowScreen{
    >div{
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  >div{
    left: 0;
    top: 0;
    position: absolute;
    height: 1080px;
    width: 1920px;
  }

  #cesium {
    height: 100%;
    width: 100%;

    :deep() {
      .cesium-viewer {
        width: 100%;
        height: 100%;
        overflow: hidden;

        .cesium-viewer-cesiumWidgetContainer {
          width: 100%;
@@ -51,21 +78,19 @@
          }
        }
      }

      .cesium-viewer-bottom {
        display: none;
      }
    }
  }

  .page-index {
    left: 0;
    top: 0;
    position: absolute;
    z-index: 999;
    height: 100%;
    width: 100%;
    background-image: url('../assets/images/bg-new.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    

    > * {
      pointer-events: auto;
    }

 src/router/views/index.js

@@ -13,7 +13,16 @@
        meta: {
          i18n: 'dashboard',
        },
        component: () => import(/* webpackChunkName: "views" */ '@/views/Home/Home.vue'),
        component: () => import(/* webpackChunkName: "index" */ '@/views/Home/Home.vue'),
      },
      {
        path: 'taskManage',
        name: '任务管理',
        meta: {
          i18n: 'dashboard',
          menu: false,
        },
        component: () => import(/* webpackChunkName: "TaskManage" */ '@/views/TaskManage/TaskManage.vue'),
      },
      {
        path: 'dashboard',

 src/styles/variables.scss

@@ -3,5 +3,6 @@
$top_height: 50px;

@function hToV($px) {
  @return calc($px / 1080) * 100vh;
  //@return calc($px / 1080) * 100vh;
  @return $px * 1px;
}

 src/views/Home/components/HomeLeft/HomeLeft.vue

@@ -37,20 +37,20 @@
        margin-left: 45px;
        width: 260px;
        font-size: 14px;
        height: hToV(36);
        line-height: hToV(36);
        height: 36px;
        line-height: 36px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .line {
            border: 1px solid #FFFFFF;
            height: hToV(10);
            height: 10px;
            opacity: 0.5;
        }
        .weather {
            img {
                width: 20px;
                height: hToV(20);
                height: 20px;
            }
            .tq {
                margin: 0 5px;

 src/views/Home/components/HomeLeft/InspectionRaskDetails.vue

@@ -33,19 +33,19 @@
.inspection-rask-details {
    margin-left: 29px;
    width: 390px;
    height: hToV(414);
    height: 414px;
    background: linear-gradient( 90deg, rgba(31,62,122,0) 0%, rgba(31,62,122,0.35) 21%, #1F3E7A 100%);
    border-radius: 0px 0px 0px 0px;
    opacity: 0.85;
    .inspection-num {
        background: url('@/assets/images/inspection-num.png') no-repeat center / 100% 100%;
        width: 360px;
        height: hToV(118);
        height: 118px;
        position: relative;
        .total {
            position: absolute;
            left: 34px;
            top: hToV(34);
            top: 34px;
            font-weight: 500;
            font-size: 14px;
            color: #FFFFFF;
@@ -56,14 +56,14 @@
        }
        .status {
            position: absolute;
            top: hToV(8);
            top: 8px;
            right: 10px;
            width: 200px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: flex-start;
            line-height: hToV(22);
            line-height: 22px;
            padding: 0 10px 10px 0;
            .name {
                font-weight: 400;
@@ -78,4 +78,4 @@
        }
    }
}
</style>
</style>

 src/views/Home/components/HomeLeft/OverviewNext.vue

@@ -61,19 +61,19 @@
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
    margin-left: 29px;
    width: 390px;
    height: hToV(414);
    height: 414px;
    background: linear-gradient( 90deg, rgba(31,62,122,0) 0%, rgba(31,62,122,0.35) 21%, #1F3E7A 100%);
    border-radius: 0px 0px 0px 0px;
    opacity: 0.85;
    .next-num {
        width: 358px;
        height: hToV(92);
        height: 92px;
        background: url(@/assets/images/next-num.png) no-repeat center / 100% 100%;;
        position: relative;
        .total {
            position: absolute;
            left: 22px;
            top: hToV(18);
            top: 18px;
            font-weight: 500;
            font-size: 14px;
            color: #FFFFFF;
@@ -84,12 +84,12 @@
        }
        .status {
            position: absolute;
            top: hToV(16);
            top: 16px;
            right: 30px;
            width: 200px;
            display: flex;
            justify-content: space-between;
            line-height: hToV(30);
            line-height: 30px;
            .name {
                font-weight: 400;
                font-size: 14px;
@@ -99,12 +99,12 @@
                font-family: Source Han Sans CN, Source Han Sans CN;
                font-weight: 400;
                font-size: 26px;
                

            }
        }
    }
    .search-box {
        margin-top: hToV(19);
        margin-top: 19px;
        margin-right: 16px;
        :deep(.el-input__wrapper) {
            background-color: rgba(0, 112, 255, 0.1);
@@ -134,12 +134,12 @@
        .table-header, .table-item {
            display: flex;
            justify-content: space-between;
            height: hToV(36);
            line-height: hToV(36);
            height: 36px;
            line-height: 36px;
        }
        .table-item {
            

        }
    }
}
</style>
</style>

 src/views/Home/components/HomeRight/EventOverview.vue

@@ -41,7 +41,7 @@
<style scoped lang="scss">
.eventOverview {
  width: 390px;
  height: hToV(445);
  height: 445px;
  background: linear-gradient(
    270deg,
    #1f3e7a 0%,
@@ -50,15 +50,15 @@
  );
  border-radius: 0px 0px 0px 0px;
  opacity: 0.85;
  margin: hToV(3) 0 0 0;
  padding-top: hToV(15);
  margin: 3px 0 0 0;
  padding-top: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .overviewData {
    width: 360px;
    height: hToV(122);
    height: 122px;
    background: url('@/assets/images/home/homeRight/overviewBg.png') no-repeat center / 100% 100%;
    display: flex;
    justify-content: space-between;
@@ -71,7 +71,7 @@
        font-weight: 400;
        font-size: 26px;
        color: #ffffff;
        line-height: hToV(30);
        line-height: 30px;
        text-align: center;
      }

@@ -80,7 +80,7 @@
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        line-height: hToV(20);
        line-height: 20px;
        text-align: center;
      }
    }
@@ -89,12 +89,12 @@
      width: 246px;
      display: flex;
      flex-wrap: wrap;
      gap: hToV(13) 0;
      gap: 13px 0;
      font-family: Source Han Sans CN, Source Han Sans CN, serif;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      line-height: hToV(14);
      line-height: 14px;

      .overviewItem {
        width: calc(100% / 3);
@@ -102,11 +102,11 @@
        .itemName {
          display: flex;
          align-items: center;
          margin-bottom: hToV(6);
          margin-bottom: 6px;

          img {
            width: 16px;
            height: hToV(16);
            height: 16px;
          }
        }

@@ -114,7 +114,7 @@
          font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif;
          font-weight: 400;
          font-size: 24px;
          line-height: hToV(18);
          line-height: 18px;
        }
      }
    }

 src/views/Home/components/HomeRight/HomeRight.vue

@@ -16,13 +16,13 @@
<style scoped lang="scss">
.home-right {
  position: absolute;
  top: hToV(122);
  top: 122px;
  right: 31px;
  width: 404px;

  .titleBox {
    width: 404px;
    height: hToV(43);
    height: 43px;
  }
}
</style>

 src/views/Home/components/HomeRight/Synergy.vue

@@ -23,7 +23,7 @@
<style scoped lang="scss">
.synergy {
  width: 390px;
  height: hToV(108);
  height: 108px;
  background: linear-gradient(
    270deg,
    #1f3e7a 0%,
@@ -31,15 +31,15 @@
    rgba(31, 62, 122, 0) 100%
  );
  opacity: 0.85;
  margin: hToV(2) 0 hToV(13) 0;
  margin: 2px 0 13 0;
  display: flex;
  justify-content: space-between;
  padding: hToV(11) 27px 0;
  padding: 11px 27px 0;

  .synergy-item {
    width: 95px;
    height: hToV(77);
    padding-top: hToV(7);
    height: 77px;
    padding-top: 7px;
    background: url('@/assets/images/home/homeRight/synergyBg.png') no-repeat center center / 100% 100%;

    .title {
@@ -50,7 +50,7 @@
      text-align: center;
      font-style: normal;
      text-transform: none;
      margin-bottom: hToV(4);
      margin-bottom: 4px;
    }

    .value {
@@ -58,7 +58,7 @@
      font-weight: 400;
      font-size: 26px;
      color: #ffffff;
      line-height: hToV(26);
      line-height: 26px;
      font-style: normal;
      text-transform: none;
      text-align: center;

 src/views/Home/components/HomeRight/TaskAchievements.vue

@@ -56,7 +56,7 @@
<style scoped lang="scss">
.taskAchievements {
  width: 390px;
  height: hToV(204);
  height: 204px;
  background: linear-gradient(
    270deg,
    #1f3e7a 0%,
@@ -64,9 +64,9 @@
    rgba(31, 62, 122, 0) 100%
  );
  opacity: 0.85;
  margin: hToV(2) 0 hToV(21) 0;
  margin: 2px 0 21px 0;
  padding-left: 17px;
  padding-top: hToV(15);
  padding-top: 15px;

  .rawData {
    display: flex;
@@ -80,7 +80,7 @@
      display: flex;

      > img {
        height: hToV(63);
        height: 63px;
        width: 63px;
      }

@@ -90,22 +90,22 @@
        color: #ffffff;
        width: 0;
        flex-grow: 1;
        padding-top: hToV(12);
        padding-top: 12px;

        .title {
          font-family: Source Han Sans CN, Source Han Sans CN, serif;
          font-weight: 400;
          font-size: 14px;
          line-height: hToV(13);
          line-height: 13px;
          text-align: left;
          margin-bottom: hToV(6);
          margin-bottom: 6px;
        }

        .value {
          font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif;
          font-weight: 400;
          font-size: 26px;
          line-height: hToV(22);
          line-height: 22px;
          text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
          text-align: left;
        }
@@ -114,7 +114,7 @@
  }

  .processingData {
    margin-top: hToV(19);
    margin-top: 19px;
    display: flex;
    align-items: center;

@@ -123,16 +123,16 @@
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: hToV(8) 0;
      gap: 8px 0;

      > div {
        width: 135px;
        height: hToV(42);
        height: 42px;
        display: flex;

        > img {
          width: 32px;
          height: hToV(32);
          height: 32px;
          margin-right: 10px;
        }

@@ -145,7 +145,7 @@
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            line-height: hToV(17);
            line-height: 17px;
            text-align: left;
          }

@@ -153,7 +153,7 @@
            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 24px;
            line-height: hToV(23);
            line-height: 23px;
            text-align: left;
          }
        }
@@ -168,6 +168,6 @@
  font-weight: bold;
  font-size: 18px;
  color: #e1f5ff;
  line-height: hToV(22);
  line-height: 22px;
}
</style>

 src/views/TaskManage/TaskManage.vue

New file
@@ -0,0 +1,11 @@
<script setup>

</script>

<template>
  TaskManage
</template>

<style scoped lang="scss">

</style>