修改样式

guonan

2025-04-16 0face36fd79ce30127c80d131b1bc41106133f3b

修改样式

 src/assets/css/global.css

@@ -1,3 +1,31 @@
.left {
  position: absolute;
  width: 355px;
  top: 100px;
  left: 30px;
  bottom: 45px;
  z-index: 99;
}

.left-top {
  background: url("@/assets/img/left/topbg.png") no-repeat;
  width: 100%;
  height: 41px;
  color: white;
  line-height: 41px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-indent: 80px;
  letter-spacing: 2px;
}
.left-content {
  margin-top: 20px;
  background: url("@/assets/img/left/leftbg.png");
  background-size: 100% 100%;
  width: 100%;
  height: calc(100% - 70px);
}
.el-button {
  background-color: #009688 !important;
  border-color: #009688 !important;
@@ -17,10 +45,9 @@
.el-date-range-picker__header [class*="arrow-left"] {
  color: #ffffff;
}
 .el-select-dropdown__item.is-hovering {
.el-select-dropdown__item.is-hovering {
  background-color: #009688;
}


.el-select__placeholder {
  color: white;

 src/assets/css/left.css

ÎļþÒÑɾ³ý

 src/assets/css/navigation.css

@@ -1,89 +1,101 @@
.navigation {
    height: 65px;
    width: 989px;
    position: absolute;
    bottom: 40px;
    left: calc(50% - 494px);
  height: 65px;
  width: 989px;
  position: absolute;
  bottom: 40px;
  left: calc(50% - 494px);
}

.navigation-bg {
    background: url("@/assets/img/navigation/navigationbg.png");
    background-size: 100% 100%;
    width: 989px;
    height: 28px;
    position: absolute;
    bottom: 0px;
    left: 0px;
  background: url("@/assets/img/navigation/navigationbg.png");
  background-size: 100% 100%;
  width: 989px;
  height: 28px;
  position: absolute;
  bottom: 0px;
  left: 0px;
}

.navigation-content {
    /* ä½¿ç”¨ flex å¸ƒå±€ */
    display: flex;
    /* ä½¿å­å…ƒç´ æ°´å¹³ç­‰é—´éš”分布 */
    justify-content: space-between;
    position: absolute;
    top: 0px;
    left: calc(50% - 350px);
    float: left;
    width: 700px;
    margin: auto;
    z-index: 1;
  /* ä½¿ç”¨ flex å¸ƒå±€ */
  display: flex;
  /* ä½¿å­å…ƒç´ æ°´å¹³ç­‰é—´éš”分布 */
  justify-content: space-between;
  position: absolute;
  top: 0px;
  left: calc(50% - 350px);
  float: left;
  width: 700px;
  margin: auto;
  z-index: 1;
}
.navigation-contents {
  /* ä½¿ç”¨ flex å¸ƒå±€ */
  display: flex;
  /* ä½¿å­å…ƒç´ æ°´å¹³ç­‰é—´éš”分布 */
  justify-content: center;
  position: absolute;
  top: 0px;
  left: calc(50% - 350px);
  float: left;
  width: 700px;
  margin: auto;
  z-index: 1;
}

.navigation-item {
    float: left;
  float: left;

    color: #CDF3FD;
    cursor: pointer;
    width: 149px;
    height: 51px;
  color: #cdf3fd;
  cursor: pointer;
  width: 149px;
  height: 51px;

    line-height: 46px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    text-indent: 40px;
  line-height: 46px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  text-indent: 40px;
}

.bg1 {
    background: url("@/assets/img/navigation/buttonbg1.png");
  background: url("@/assets/img/navigation/buttonbg1.png");
}

.bg2 {
    background: url("@/assets/img/navigation/buttonbg2.png");
  background: url("@/assets/img/navigation/buttonbg2.png");
}

.bg3 {
    background: url("@/assets/img/navigation/buttonbg3.png");
  background: url("@/assets/img/navigation/buttonbg3.png");
}

.bg4 {
    background: url("@/assets/img/navigation/buttonbg4.png");
  background: url("@/assets/img/navigation/buttonbg4.png");
}


.bg1:hover {
    background: url("@/assets/img/navigation/buttonbgac1.png");
  background: url("@/assets/img/navigation/buttonbgac1.png");
}
.bg1-active {
    background: url("@/assets/img/navigation/buttonbgac1.png");
  background: url("@/assets/img/navigation/buttonbgac1.png");
}
.bg2:hover {
    background: url("@/assets/img/navigation/buttonbgac2.png");
  background: url("@/assets/img/navigation/buttonbgac2.png");
}
.bg2-active {
    background: url("@/assets/img/navigation/buttonbgac2.png");
  background: url("@/assets/img/navigation/buttonbgac2.png");
}
.bg3:hover {
    background: url("@/assets/img/navigation/buttonbgac3.png");
  background: url("@/assets/img/navigation/buttonbgac3.png");
}
.bg3-active{
    background: url("@/assets/img/navigation/buttonbgac3.png");
.bg3-active {
  background: url("@/assets/img/navigation/buttonbgac3.png");
}

.bg4:hover {
    background: url("@/assets/img/navigation/buttonbgac4.png");
  background: url("@/assets/img/navigation/buttonbgac4.png");
}
.bg4-active {
    background: url("@/assets/img/navigation/buttonbgac4.png");
  background: url("@/assets/img/navigation/buttonbgac4.png");
}

 src/components/menu/Device.vue

@@ -285,8 +285,6 @@
    }
  }
}

// å…¶ä»–原有方法保持不变...
</script>

<style lang="less" scoped>
@@ -301,6 +299,7 @@

.device-content {
  padding: 10px;
  box-sizing: border-box;
  overflow-y: auto;
  height: calc(100% - 70px);
}

 src/components/menu/Location.vue

@@ -747,6 +747,7 @@
}
.district-content {
  padding: 10px;
  box-sizing: border-box;
}
.district-item-icon {
  background: url("@/assets/img/menu/locationicon.png") no-repeat;

 src/store/simulation.js

@@ -87,8 +87,8 @@

    const startMNPG = () => {
        init()
        showResultAssess.value = true
        showDangerAssess.value = true
        // showResultAssess.value = true
        // showDangerAssess.value = true
    }

    // å¯¼èˆªç‚¹å‡»

 src/views/left/CitySim.vue

@@ -1,6 +1,10 @@
<template>
  <div style="width: 100%; height: 100%">
    <div class="left-top" v-if="disForm == '行政区划仿真'" style="margin-top: 0px;">
    <div
      class="left-top"
      v-if="disForm == '行政区划仿真'"
      style="margin-top: 0px"
    >
      è¡Œæ”¿åŒºåˆ’仿真（30m精度）
    </div>
    <div class="left-top" v-if="disForm == '重点区域仿真'">
@@ -126,6 +130,7 @@
import * as XLSX from "xlsx";
import Papa from "papaparse";
import { ElMessage } from "element-plus";
import { initeWaterPrimitiveView } from "@/utils/water";

// æ³¨å…¥çˆ¶ç»„件提供的方法
const { startSimulate, endSimulate } = inject("simulateActions");
@@ -207,7 +212,7 @@
    é™é›¨é‡: `${forms.rainfall} mm`,
    é™é›¨æ—¶é•¿: `${forms.duration} h`,
    é™é›¨å¼ºåº¦: `${forms.intensity} mm/h`,
    ä¸Šä¼ æ–‡ä»¶: forms.fileList.map(file => file.name),
    ä¸Šä¼ æ–‡ä»¶: forms.fileList.map((file) => file.name),
  });
  ElMessage.success("方案已保存");
  saveDialogVisible.value = false;
@@ -358,6 +363,7 @@

// å¼€å§‹æ¨¡æ‹Ÿ
function startPlay() {
  initeWaterPrimitiveView();
  startSimulate();
}
</script>

 src/views/left/Left.vue

@@ -453,7 +453,6 @@
});
</script>
<style lang="less" scoped>
@import url("../../assets/css/left.css");
.mock {
  padding-top: 10px;
  padding-right: 10px;

 src/views/nav/Navigation.vue

@@ -1,6 +1,23 @@
<template>
  <div class="navigation">
    <div class="navigation-content">
    <div class="navigation-contents" v-show="!simBtn">
      <div
        class="navigation-item bg1"
        :class="{ 'bg1-active': currentIndexs == 1 }"
        @click="handleClickHome(1)"
      >
        ç»¼åˆå±•ç¤º
      </div>
      <div
        class="navigation-item bg2"
        :class="{ 'bg2-active': currentIndexs == 2 }"
        @click="handleClickHome(2)"
        style="margin-left: 15%"
      >
        æ¨¡æ‹Ÿä»¿çœŸ
      </div>
    </div>
    <div class="navigation-content" v-show="simBtn">
      <div
        class="navigation-item bg1"
        :class="{ 'bg1-active': currentIndex == 1 }"
@@ -20,14 +37,14 @@
        :class="{ 'bg3-active': currentIndex == 3 }"
        @click="handleClick(3)"
      >
        æ¨¡æ‹Ÿä»¿çœŸ
        ä»¿çœŸæŽ¨æ¼”
      </div>
      <div
        class="navigation-item bg4"
        :class="{ 'bg4-active': currentIndex == 4 }"
        @click="handleClick(4)"
      >
        æ¨¡æ‹Ÿè¯„ä¼°
        æ¨¡æ‹Ÿè¯„ä»·
      </div>
    </div>
    <div class="navigation-bg"></div>
@@ -38,6 +55,9 @@
import { useRouter } from "vue-router";
import { useSimStore } from "@/store/simulation";
import { ref } from "vue";

const simBtn = ref(false);
const currentIndexs = ref(1);

const router = useRouter();
const simStore = useSimStore();
@@ -72,6 +92,13 @@
  const routes = ["", "/yhgl", "/zhjc", "/mnfz", "/mnpg"];
  router.push(routes[index]);
};
const handleClickHome = (index) => {
  if (index === 1) {
    router.push("/");
  } else {
    simBtn.value = true;
  }
};
</script>

<style lang="less" scoped>