代码更新

surprise

2024-05-09 e897fc3d35f8e5dfa56d5f0c80a655ccf99202cf

 src/views/Thematic/index.vue

@@ -1,918 +1,156 @@
<template>
  <div class="themaic">
    <div
      class="left_menu"
      :class="{ left_main_show: !leftMenuOpen }"
    >
      <div class="tree-container">
        <el-tree
          :data="treeData"
          show-checkbox
          node-key="id"
          default-expand-all
          :props="defaultProps"
          ref="tree"
          class="el-tree"
          @check-change="handleCheckChange"
        >
          <span
            class="custom-tree-node"
            slot-scope="{ node, data }"
          >
            <svg-icon
              v-if="!data.children"
              icon-class="file"
              class="svgIcon"
            />
            <svg-icon
              v-else-if="node.expanded"
              icon-class="floder_open"
              class="svgIcon"
            />
            <svg-icon
              v-else
              icon-class="floder_close"
              class="svgIcon"
            />
            <span
              class='fontSize14'
              :title='node.label || "-"'
            >{{node.label}}</span>
          </span>
        </el-tree>
      </div>
      <div class="changeBaseLayer">
        <div
          @click="changeMenulayer"
          class="CenDiv"
        >
          <div
            id="cenBg"
            v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
          ></div>
        </div>
      </div>
    <mapsdk></mapsdk>
    <top class="title"
         ref="title"></top>
    <left class="mapleft"
          :style="{ width: leftWidth, left: leftWidth == '22%' ? '-19px' : '0' }"
          ref="mapleft"></left>

    </div>
    <project-tree class="project-tree"
                  v-show="ProjectreeDisplay"></project-tree>

    <div class="center_content">

      <div
        id="MapView"
        class="MapView"
      >
        <div class="TopHeader">
          <div
            @click="setTopReturn"
            class="TopReturn"
          ></div>
        </div>
        <div class="leftEchart">
          <div class="showEcharts">
            <div
              v-if="typeIndex == '1'"
              class="echart1"
            >
              <echart11></echart11>
            </div>
            <div
              v-if="typeIndex == '1'"
              class="echart1"
            >
              <echart12></echart12>
            </div>
            <div
              v-if="typeIndex == '1'"
              class="echart1"
            >
              <echart13></echart13>
            </div>
            <div
              v-if="typeIndex == '2'"
              class="echart1"
            >
              <echart21></echart21>
            </div>
            <div
              v-if="typeIndex == '2'"
              class="echart1"
            >
              <echart22></echart22>
            </div>
            <div
              v-if="typeIndex == '2'"
              class="echart1"
            >
              <echart23></echart23>
            </div>
            <div
              v-if="typeIndex == '3'"
              class="echart1"
            >
              <echart31></echart31>
            </div>
            <div
              v-if="typeIndex == '3'"
              class="echart1"
            >
              <echart32></echart32>
            </div>
            <div
              v-if="typeIndex == '3'"
              class="echart1"
            >
              <echart33></echart33>
            </div>
            <div
              v-if="typeIndex == '4'"
              class="echart1"
            >
              <echart44></echart44>
            </div>
            <div
              v-if="typeIndex == '4'"
              class="echart1"
            >
              <echart45></echart45>
            </div>
            <div
              v-if="typeIndex == '4'"
              class="echart1"
            >
              <echart46></echart46>
            </div>
          </div>
        </div>
        <div class="rightEchart">
          <div class="showEcharts">
            <div
              v-if="typeIndex == '1'"
              class="echart1"
            >
              <echart14></echart14>
            </div>
            <div
              v-if="typeIndex == '1'"
              class="echart1"
            >
              <echart15></echart15>
            </div>
            <div
              v-if="typeIndex == '1'"
              class="echart1"
            >
              <echart16></echart16>
            </div>

            <div
              v-if="typeIndex == '2'"
              class="echart1"
            >
              <echart24></echart24>
            </div>
            <div
              v-if="typeIndex == '2'"
              class="echart1"
            >
              <echart25></echart25>
            </div>
            <div
              v-if="typeIndex == '2'"
              class="echart1"
            >
              <echart26></echart26>
            </div>
            <div
              v-if="typeIndex == '3'"
              class="echart1"
            >
              <echart34></echart34>
            </div>
            <div
              v-if="typeIndex == '3'"
              class="echart1"
            >
              <echart35></echart35>
            </div>
            <div
              v-if="typeIndex == '3'"
              class="echart1"
            >
              <echart36></echart36>
            </div>
            <div
              v-if="typeIndex == '4'"
              class="echart1"
            >
              <echart41></echart41>
            </div>
            <div
              v-if="typeIndex == '4'"
              class="echart1"
            >
              <echart42></echart42>
            </div>
            <div
              v-if="typeIndex == '4'"
              class="echart1"
            >
              <echart43></echart43>
            </div>
          </div>
        </div>
        <div class="left_content">
          <div
            @click="showLeftMenu"
            v-show=" !leftMenuOpen"
          >
            <div class="LeftMenu"></div>
          </div>
          <div
            @click="showLeftMenu"
            v-show=" leftMenuOpen"
          >
            <div class="LeftMenu1"></div>
          </div>
        </div>

        <div class="right_content">
          <div
            @click="showRightMenu"
            v-show="!rightMenuOpen "
          >
            <div class="RightMenu"></div>
          </div>
          <div
            @click="showRightMenu"
            v-show="rightMenuOpen "
          >
            <div class="RightMenu1"></div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="right_menu"
      :class="{ right_main_show: !rightMenuOpen }"
    >
      <div class="content_right">
        <div class="contentLi">
          <ul>
            <li
              @click="changeRightList(item)"
              v-for="item in rightList"
              :class="item.id == changeSelectli ? 'changeliStyle' : ''"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
        <div class="contentBottom">
          <div
            v-for="item in rightMenu"
            class="right_item"
            :class="{ changeStyle: changeSelectStyle == item.id }"
            @click="changeRightMenu(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <right class="mapright"
           :style="{ width: rightWidth }"
           ref="mapright"></right>
    <bottom class="mapbottom"
            ref="mapbottom"></bottom>
  </div>
</template>

<script>
window.sgworld = null;
var Viewer = null;

import mapsdk from '../../components/mapsdk.vue';
import { right_menu, right_list, image_layer } from './index.js';
import echart11 from '../../components/echart11.vue';
import echart12 from '../../components/echart12.vue';
import echart13 from '../../components/echart13.vue';
import echart14 from '../../components/echart14.vue';
import echart15 from '../../components/echart15.vue';
import echart16 from '../../components/echart16.vue';
import echart21 from '../../components/echart21.vue';
import echart22 from '../../components/echart22.vue';
import echart23 from '../../components/echart23.vue';
import echart24 from '../../components/echart24.vue';
import echart25 from '../../components/echart25.vue';
import echart26 from '../../components/echart26.vue';
import echart31 from '../../components/echart31.vue';
import echart32 from '../../components/echart32.vue';
import echart33 from '../../components/echart33.vue';
import echart34 from '../../components/echart34.vue';
import echart35 from '../../components/echart35.vue';
import echart36 from '../../components/echart36.vue';
import echart41 from '../../components/echart41.vue';
import echart42 from '../../components/echart42.vue';
import echart43 from '../../components/echart43.vue';
import echart44 from '../../components/echart44.vue';
import echart45 from '../../components/echart45.vue';
import echart46 from '../../components/echart46.vue';
import axios from 'axios';
import mapsdk from "@/components/Screen/mapsdk.vue"
import top from "../../components/Screen/top.vue"
import left from "@/components/Screen/left.vue"
import right from "../../components/Screen/right.vue"
import bottom from "../../components/Screen/bottom.vue"
import ProjectTree from "../../components/Screen/ProjectTree.vue"
import axios from "axios"
export default {
  components: {
    mapsdk,
    echart11,
    echart12,
    echart13,
    echart14,
    echart15,
    echart16,
    echart21,
    echart22,
    echart23,
    echart24,
    echart25,
    echart26,
    echart31,
    echart32,
    echart33,
    echart34,
    echart35,
    echart36,
    echart41,
    echart43,
    echart42,
    echart44,
    echart45,
    echart46,
  },
  data() {
  components: { mapsdk,top,left,right,bottom,ProjectTree },
  data () {
    return {
      typeIndex: null,
      leftMenuOpen: false,
      rightMenuOpen: false,
      changeSelectStyle: null,
      changeSelectli: null,
      rightMenu: [],
      rightList: [],
      treeData: [],
      centerFlag: false,
      isActive: false,
      isMenuLayer: true,
      openEcharts: false,
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    };
  },
  mounted() {
    this.treeData = image_layer;
    this.rightList = right_list[0];
    this.rightMenu = right_menu;
    this.changeSelectli = this.rightList[0].id;
    this.changeSelectStyle = this.rightMenu[0].id;
    this.initMapView();
    this.addImageLayer();
  },
  created() { },
  methods: {
    setTopReturn() {
      this.$router.push('/Synthesis');
    },
    changeRightList(res) {
      this.changeSelectli = res.id;
      if (res.layer != null) {
        var layer = res.layer;
        this.$refs.tree.setCheckedKeys(layer);
      }
      if (res.index != null) {
        this.openEcharts = true;
        this.typeIndex = res.index;
      } else {
        this.openEcharts = false;
        this.typeIndex = null;
      }
      var vid = res.id;

      if (vid.indexOf('b') != -1) {
        var url = geoserverWFS + '%27' + res.name + '%27';
        axios.get(url).then((res) => {
          if (res.status == 200) {
            var point = res.data.features[0].geometry.coordinates;
            //定位
            Viewer.camera.flyTo({
              //跳转视角
              destination: new Cesium.Cartesian3.fromDegrees(
                point[0],
                point[1],
                8000
              ),
            });
          }
        });
      } else if (vid.indexOf('a') != -1) {
        //定位
        Viewer.camera.flyTo({
          //跳转视角
          destination: new Cesium.Cartesian3.fromDegrees(105.02, 34.9, 8000000),
        });
      } else if (vid.indexOf('c') != -1) {
        var url = geoserverWFSLine + '%27' + res.name + '%27';
        axios.get(url).then((res) => {

          if (res.status == 200) {
            if (res.data.features.length == 0) return;
            var std = [];
            for (var i in res.data.features) {
              var featurLayer = res.data.features[i];
              var path = featurLayer.geometry.coordinates[0];
              for (var j in path) {
                // std.push(path[j][0], path[j][1], 50);
                std.push(path[j])
              }
            }

            var str = this.removeRepeat1(std);
            var val = [];
            for (var i in str) {
              val.push(str[i][0], str[i][1], 50);
            }
            this.showPathLine(val)
          }
        });
      }
    },
    removeRepeat1(arr) {
      const obj = {};
      return arr.filter(item => {
        if (!obj[item.toString()]) {
          obj[item.toString()] = item.toString();
          return item;
        }
      });
    },

    showPathLine(res) {

      window.sgworld.Creator.getFlyData(res, (data) => {
        data.showPoint = false;
        data.showLine = true;
        data.mode = 1;
        data.height = 1000;

        // 弹窗数据
        window.PathAnimationData = {
          flyData: data,
        };
        window.PathAnimationData.winIndex = layer.open({
          type: 2,
          title: '路径动画',
          shade: false,
          area: ['352px', '690px'],
          offset: 'r',
          skin: 'other-class',
          content: SmartEarthRootUrl + 'Workers/path/Path.html',
          end: function () {
            PathAnimationData.fly && PathAnimationData.fly.exit();
          },
        });
      });
    },
    showLeftMenu() {
      this.leftMenuOpen = !this.leftMenuOpen;
      var a = 0;
      var layer = setInterval(() => {
        a++;
        this.$bus.$emit('resizeEchart', true);
        if (a == 20) {
          clearInterval(layer);
          this.$bus.$emit('resizeEchart', true);
        }
      }, 100);
    },
    showRightMenu() {
      this.rightMenuOpen = !this.rightMenuOpen;
      var a = 0;
      var layer = setInterval(() => {
        a++;
        this.$bus.$emit('resizeEchart', true);
        if (a == 30) {
          clearInterval(layer);
          this.$bus.$emit('resizeEchart', true);
        }
      }, 100);
    },
    changeRightMenu(res) {
      this.rightList = right_list[parseInt(res.id) - 1];
      this.changeSelectStyle = res.id;
    },
    initMapView() {
      sgworld = new SmartEarth.SGWorld('MapView', {
        licenseServer: window.sceneConfig.licenseServer,
      });

      Viewer = sgworld._Viewer;
      Viewer.imageryLayers._layers[0].show = false;
      //定位
      sgworld.Navigate.jumpTo({
        //跳转视角
        destination: new Cesium.Cartesian3.fromDegrees(
          116.3911,
          39.9115,
          100000
        ),
      });
      for (var i in gaoDeBaseUrl) {
        sgworld.Creator.createUrlTemplateImageryProvider(
          gaoDeBaseUrl[i].label,
          gaoDeBaseUrl[i].url,
          '0',
          undefined,
          true,
          ''
        );
      }

      //显示fps
      Viewer.scene.debugShowFramesPerSecond = false;
      //导航控件
      sgworld.navControl('nav', false);
      //比例尺
      sgworld.navControl('scale', false);

      Viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
        url: demLayer
      });


    },
    changeMenulayer() {
      this.isActive = !this.isActive;
      this.isMenuLayer = !this.isMenuLayer;
      this.setLayerVisible();
    },
    setLayerVisible() {
      if (this.isActive == true) {
        Viewer.imageryLayers._layers[1].show = true;
        Viewer.imageryLayers._layers[2].show = false;
        Viewer.imageryLayers._layers[3].show = false;
      } else {
        Viewer.imageryLayers._layers[1].show = false;
        Viewer.imageryLayers._layers[2].show = true;
        Viewer.imageryLayers._layers[3].show = true;
      }
    },
    addImageLayer() {
      var val_layer = this.treeData[0].children;
      var std = [];
      for (var i = 0; i < val_layer.length; i++) {
        if (val_layer[i].id != 13 && val_layer[i].id != 14) {
          let layerWMS = new Cesium.WebMapServiceImageryProvider({
            url: geoServerURl,
            layers: val_layer[i].resource,
            parameters: {
              transparent: true,
              format: 'image/png',
            },
          });
          layerWMS.name = val_layer[i].label;
          Viewer.imageryLayers.addImageryProvider(layerWMS);
          std.push(val_layer[i].id);
        }
      }
      this.$refs.tree.setCheckedKeys(std);
    },
    handleCheckChange(data, checked, indeterminate) {
      if (data.children != null) return;
      var std = [];
      for (var i = 0; i < Viewer.imageryLayers._layers.length; i++) {
        var val_id =
          Viewer.imageryLayers._layers[i].imageryProvider.name;
        if (val_id == data.label) {
          std.push(data.label)
          const img_layer = Viewer.imageryLayers._layers[i];
          img_layer.show = checked;
        }
      }
      if (std.length == 0 && checked == true) {
        this.setAddImageLayer(data);
      }
    },
    setAddImageLayer(res) {
      let layerWMS = new Cesium.WebMapServiceImageryProvider({
        url: geoServerURl,
        layers: res.resource,
        parameters: {
          transparent: true,
          format: 'image/png',
        },
      });
      layerWMS.name = res.label;
      Viewer.imageryLayers.addImageryProvider(layerWMS);
      leftWidth: "22%",
      rightWidth: "22%",
      leftTree: false,
      currTree: false,
      ProjectreeDisplay: false,
    }
  },
};
  mounted () {

  },
  created () {
    this.$bus.$on("changeTree",key => {
      this.ProjectreeDisplay=key
    })
  },
  methods: {
    //修改左侧宽度
    ChangeWidth (parm) {
      if(parm=="left") {
        if(this.leftWidth=="22%") {
          this.leftWidth="8px"
        } else {
          this.leftWidth="22%"
        }
      }

      if(parm=="leftView"||parm=="leftTree") {
        this.leftWidth="22%"
        this.rightWidth="22%"
      }
      // if (parm == "leftView") {
      //   this.leftTree = false
      // }
      // if (parm == "leftTree") {
      //   this.leftTree = true
      // }

      if(parm=="right") {
        if(this.rightWidth=="22%") {
          this.rightWidth="45px"
        } else {
          this.rightWidth="22%"
        }
      }
    },
  },
}
</script>

<style lang="less" scoped>
.themaic {
  width: 100%;
  height: 100%;
  background: #303030;
  width: 100%;
  position: absolute;
  display: flex;
  overflow: hidden;
  .left_menu {
    margin: 0;
    width: 300px;
    height: 100%;
    transition: width 2s;
    background: url("../../assets/img/themic/左框.png") no-repeat center;
    background-size: 100% 100%;
}

    .tree-container {
      margin: 10px;
      height: 90%;
      overflow-y: auto;
    }
    .changeBaseLayer {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      overflow: hidden;
    }
    .CenDiv {
      height: 40px;
      width: 60px;
.title {
  position: absolute;
  top: 0;
  left: 0;
  height: 86px;
  width: 100%;
  z-index: 999;
}

      margin-right: 7%;
      border-radius: 5px;
      bottom: 3%;
    }
.mapleft {
  position: absolute;
  top: 90px;
  left: 0px;
  // width: 20%;
  height: calc(100% - 180px);
  z-index: 999;
}

    // .CenDiv:hover {
.mapright {
  position: absolute;
  top: 90px;
  right: -20px;
  // width: 20%;
  height: calc(100% - 180px);
  z-index: 999;
}

    // }
    .active {
      height: 40px;
      width: 60px;
      background: url("../../assets/img/themic/默认的影像.png") no-repeat center;
      position: absolute;
      background-size: 100% 100%;
      border-radius: 5px;
    }
    .menuLayer {
      height: 40px;
      width: 60px;
      background: url("../../assets/img/themic/默认的底图.png") no-repeat center;
      position: absolute;
      background-size: 100% 100%;
      border-radius: 5px;
    }
  }
  .center_content {
    flex: 1;
    height: 100%;
    .MapView {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 0;
      float: left;
      position: relative;
      display: flex;
      justify-content: space-around;
      .TopHeader {
        width: 100%;
        height: 106px;
        margin-top: -21px;
        position: absolute;
        background: url("../../assets/img/themic/bj.png") no-repeat;
        background-size: 100% 100%;
        z-index: 40;
        .TopReturn {
          width: 142px;
          height: 40px;
          top: 37%;
          left: 2.2%;
          background: url("../../assets/img/themic/返回.png") no-repeat;
          background-size: 100% 100%;
          position: absolute;
          z-index: 60;
        }
      }
      .leftEchart {
        z-index: 60;
        position: absolute;
        bottom: 2px;
        height: calc(100% - 77px);
        width: 24%;
        left: 10px;
        position: absolute;
        right: 10px;
      }
      .showEcharts {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .rightEchart {
        z-index: 60;
        position: absolute;
        height: calc(100% - 77px);
        width: 24%;
        right: 10px;
        bottom: 2px;
        position: absolute;
        right: 10px;
      }
      .rightEchartShow {
        margin-right: 20px;
      }
      .right_content {
        width: 20px;
        height: 100%;
        z-index: 60;
        right: 10px;
        position: absolute;
        display: flex;
        align-items: center;
      }
.mapbottom {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 90px;
  width: 100%;
  z-index: 999;
}
.project-tree {
  position: absolute;
  top: 90px;
  right: 22%;
  width: 15%;
  height: calc(100% - 180px);
  z-index: 999;
}
</style>

      .left_content {
        width: 20px;
        height: 100%;
        z-index: 60;
        left: 10px;
        position: absolute;
        display: flex;
        align-items: center;
      }
      .LeftMenu {
        width: 20px;
        height: 100px;
        background: url("../../assets/img/themic/life.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        float: right;
      }
      .LeftMenu1 {
        width: 20px;
        height: 100px;
        background: url("../../assets/img/themic/left1.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        float: right;
      }
      .RightMenu {
        width: 20px;
        height: 100px;
        background: url("../../assets/img/themic/right.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        float: right;
      }
      .RightMenu1 {
        width: 20px;
        height: 100px;
        background: url("../../assets/img/themic/right1.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        float: right;
      }
    }
  }
  .item_menu {
    height: 100%;
    display: flex;
    align-items: center;
  }
  .left_main_show {
    width: 0;
  }
  .right_menu {
    margin: 0;
    width: 300px;
    height: 100%;
    transition: width 2s;
    background: url("../../assets/img/themic/右框.png") no-repeat center;
    background-size: 100% 100%;
    .content_right {
      width: calc(100% - 40px);
      height: calc(100% - 60px);
      margin-top: 30px;
      margin-left: 20px;
      .contentLi {
        width: 100%;
        height: 95%;
        overflow-y: auto;
      }
      .contentBottom {
        width: 100%;
        height: 5%;
        margin-top: 5%;
        display: flex;
        justify-content: space-between;
        .right_item {
          align-items: center;
          display: flex;
          height: calc(100% - 2px);
          flex-grow: 1;
          justify-content: center;
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: white;
          background: url("../../assets/img/themic/默认的按钮背景.png")
            no-repeat center;
          background-size: 100% 100%;
        }
        .changeStyle {
          background: url("../../assets/img/themic/选中的按钮背景.png")
            no-repeat center;
          background-size: 100% 100%;
        }
      }
      li {
        padding: 10px 10px;
        color: white;
        background: url("../../assets/img/themic/listBJ.png") no-repeat center;
        background-size: 100% 100%;
      }
      li:hover {
        color: #409eff;
      }
      .changeliStyle {
        color: #409eff;
      }
    }
  }

  .right_main_show {
    width: 0;
  }
  .echart1 {
<style lang="less">
.themaic {
  .aside-title {
    box-sizing: border-box;
    padding-left: 30px;
    // height: 27px;
    // line-height: 27px;
    // background: linear-gradient(0deg, #9cd2ff 0%, #ffffff 100%);
    font-size: 15px;
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
    // -webkit-background-clip: text;
    color: #fff;
    width: 100%;
    height: 33%;
    background: url("../../assets/img/themic/xxk.png") no-repeat;

    height: 30px;
    line-height: 30px;
    background: url(~@/assets/img/Screen/asideTitleBg.png);
    background-size: 100% 100%;
  }

  /* 去除旋转动画 */
  .el-tree /deep/ .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* 有子节点 且未展开 */
  .el-tree /deep/ .el-icon-caret-right:before {
    background: url("../../assets/img/themic/圆角矩形 3 拷贝 3.png") no-repeat 0
      3px;
    content: "";
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }

  /* //有子节点 且已展开 */
  /deep/
    .el-tree
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    background: url("../../assets/img/themic/圆角矩形 3 拷贝 4.png") no-repeat 0
      3px;
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }

  /* 没有子节点 */
  /deep/ .el-tree .el-tree-node__expand-icon.is-leaf::before {
    background: url("../../assets/img/themic/圆角矩形 3 拷贝 3.png") no-repeat 0
      3px;
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }

  /deep/ .el-tree {
    padding-top: 15px;
    padding-left: 10px;
    // 不可全选样式
    .el-tree-node {
      .is-leaf + .el-checkbox .el-checkbox__inner {
        display: inline-block;
      }
      .el-checkbox .el-checkbox__inner {
        display: none;
      }
    }
    background-repeat: no-repeat;
  }
}
</style>