DSDSWeb/src/views/home.vue

<template>
  <div class="index">
    <div class="banner">
      <img src="../../static/images/banner_index.jpg" alt="">
      <div class="banner_con">
        <div class="banner_top">
          <p>
            面向数据样品贡献方需求，构建用户体验良好的数据样品目录信息平台。
          </p>
          <p>
            提供便捷安全的数据录入，统计分析和可视化检索工具，服务数据样品贡献者、资助机构和管理机构。
          </p>
        </div>
        <div class="banner_bot">
          <div class="bot_left">
            <div class="left1">
              <p>建立深海所海洋地球科学数据样品信息目录</p>
            </div>
            <div class="left2">
              <div class="left2_1">
                <p>56,204</p>
                <span>数据样品数</span>
              </div>
              <div class="left2_1">
                <p>260</p>
                <span>数据集个数</span>
              </div>
            </div>
          </div>
          <div class="bot_right">
            <div class="right1">
              <p>依托两器、两船等各类海洋科考平台、设备开展航次科考</p>
            </div>
            <div class="right2">
              <div class="right2_1">
                <p>204</p>
                <span>航次个数</span>
              </div>
              <div class="right2_1">
                <p>360</p>
                <span>航次天数</span>
              </div>
              <div class="right2_1">
                <p>204</p>
                <span>“深海勇士”号潜次数</span>
              </div>
              <div class="right2_1">
                <p>204</p>
                <span>“奋斗者”号潜次数</span>
              </div>
              <div class="right2_1">
                <p>5,623</p>
                <span>航行里程</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="guiji">
      <div class="guiji_1">
        <img src="../../static/images/guiji.png" alt="">
      </div>
      <div class="guiji_2">
        <!-- <img src="../../static/images/guiji_1.jpg" alt="" /> -->
        <div class="daohang">
          <ul>
            <li>
              <a href="###" @click="onAll">All</a>
            </li>
            <li>
              <a href="###" @click="clearAll">clear</a>
            </li>
            <li
              v-for="(item, index) in voyageList"
              :key="index"
              :class="chooseIndex == index ? 'active' : ''"
              @click="toChoose(index, item)"
            >
              <a href="###">{{ item.voyage_name }}</a>
            </li>
          </ul>
        </div>
        <div id="cesiumContainer" ref="cesiumContainer" style="height: 100%;width:100%;">
          <div class="son" style="display: none;">弹框插槽</div>
        </div>
      </div>
    </div>

    <div class="shuju">
      <div class="shuju1">
        <div class="shuju1_top">
          <img src="../../static/images/shuju.png" alt="">
        </div>
        <div class="shuju1_con">
          <ul>
            <li @click="turnPage('physicalIndex')">
              <img src="../../static/images/diqiu.png" alt="">
              <p>海洋地球物理与物理海洋</p>
              <p class="sourceData">数据集：<span>-</span> 个 &nbsp;&nbsp;&nbsp;体量：<span>-</span> GB</p>
            </li>
            <li @click="turnPage('biologyIndex')">
              <img src="../../static/images/yangpin.png" alt="">
              <p>海洋生物样品信息（待开发）</p>
              <p class="sourceData">数据集：<span>-</span> 个 &nbsp;&nbsp;&nbsp;体量：<span>-</span> GB</p>
            </li>
            <li>
              <img src="../../static/images/dizhi.png" alt="">
              <p>海洋地质与地球化学（待开发）</p>
              <p class="sourceData">数据集：<span>-</span> 个 &nbsp;&nbsp;&nbsp;体量：<span>-</span> GB</p>
            </li>
            <li>
              <img src="../../static/images/dongwu.png" alt="">
              <p>哺乳动物与海洋声学（待开发）</p>
              <p class="sourceData">数据集：<span>-</span> 个 &nbsp;&nbsp;&nbsp;体量：<span>-</span> GB</p>
            </li>
            <li @click="turnPage('phoneVideoIndex')">
              <img src="../../static/images/shipin.png" alt="">
              <p>深海视频音像图元（待开发）</p>
              <p class="sourceData">数据集：<span>-</span> 个 &nbsp;&nbsp;&nbsp;体量：<span>-</span> GB</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="shuju2">
        <div class="shuju2_top cursor" @click="turnPage('physicalDataSearchCTD')">
          <img src="../../static/images/shuju1.png" alt="">
        </div>
        <div class="shuju2_con">
          <div class="swiper-visualization wow fadeInUp">
            <div class="swiper-visualization-box">
              <swiper ref="visualizationSwiper" :options="swiperOptions">
                <swiper-slide
                  v-for="(item, index) in visualizationList"
                  :key="index"
                >
                  <div class="pic">
                    <img :src="item.pic" alt="">
                  </div>
                  <div class="txt">
                    <p>0{{ index + 1 }}</p>
                    <div class="txt1">
                      <p>{{ item.title }}</p>
                      <span>{{ item.des }}</span>
                    </div>
                  </div>
                  <div class="mask"/>
                </swiper-slide>
              </swiper>
              <div class="swiper-arrow swiper-prev"/>
              <div class="swiper-arrow swiper-next"/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dongtai">

      <el-row>
        <el-col :span="12">
          <div class="dongtai_top">
            <img src="../../static/images/shuju3.png" alt="">
          </div>
        </el-col>
        <el-col :span="12">
          <div class="dongtai_top">
            <img src="../../static/images/shuju4.png" alt="">
          </div>
        </el-col>
      </el-row>
      <div class="dongtai_bot">
        <ul>
          <li v-for="(item, index) in newsList" :key="index" @click="turnPage('news')">
            <div class="date">
              <p>{{ item.day }}</p>
              <span>{{ item.date }}</span>
            </div>
            <div class="des">
              <p>{{ item.title }}</p>
              <span>{{ item.des }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="gongju">
      <div class="gongju_top">
        <img src="../../static/images/shuju5.png" alt="">
      </div>
      <div class="gongju_con">
        <ul>
          <li @click="turnPage('http://10.0.82.239/analysisTools/index','url')">
            <img src="../../static/images/mofang.png" alt="">
            <p>blast基因分析工具</p>
          </li>
          <li @click="turnPage('http://10.0.82.239/analysisTools/index','url')">
            <img src="../../static/images/mofang.png" alt="">
            <p>温盐深分析工具</p>
          </li>
          <li @click="turnPage('http://10.0.82.239/analysisTools/index','url')">
            <img src="../../static/images/mofang.png" alt="">
            <p>影像数据物种智能识别</p>
          </li>
          <li @click="turnPage('http://10.0.82.239/analysisTools/index','url')">
            <img src="../../static/images/mofang.png" alt="">
            <p>海洋物理生态耦合模式分析</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getVoyage, getVoyageLine } from '../api/home'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
const Cesium = window.Cesium

export default {
  name: 'Index',
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      movementTimer: null,
      iconImgW: require('../../static/images/14-w.png'),
      map: null,
      visualizationList: [
        {
          pic: require('../../static/images/shuju2_bg2.png'),
          title: '专业数据分析',
          des: '载人深潜温盐深数据'
        },
        {
          pic: require('../../static/images/shuju2_bg.png'),
          title: '服务资助航次',
          des: '深海技术创新中心共享航次'
        },
        {
          pic: require('../../static/images/shuju2_bg3.png'),
          title: '支撑大科学计划',
          des: '应急搜捞应用'
        }
      ],
      swiperOptions: {
        loop: true,
        loopAdditionalSlides: 3,
        initialSlide: 1,
        spaceBetween: 35,
        navigation: {
          nextEl: '.swiper-visualization .swiper-next',
          prevEl: '.swiper-visualization .swiper-prev'
        },
        breakpoints: {
          768: {
            spaceBetween: 10
          }
        }
      },
      chooseIndex: -1,
      voyageList: [],
      newsList: [
        {
          title:
            '深海工程菌SS-DY31-Ⅱ-W1306-BC-1 样品数据发布，包含4个目、7个科、15个属的共1232个样品数据。',
          des: '海底热液循环可以改变海水和洋壳的化学组成，也会影响洋壳的增生和冷却过程，对于理解...',
          day: '25',
          date: '2023-03'
        },
        {
          title:
            '深海工程菌SS-DY31-Ⅱ-W1306-BC-1 样品数据发布，包含4个目、7个科、15个属的共1232个样品数据。',
          des: '海底热液循环可以改变海水和洋壳的化学组成，也会影响洋壳的增生和冷却过程，对于理解...',
          day: '25',
          date: '2023-03'
        },
        {
          title:
            '深海工程菌SS-DY31-Ⅱ-W1306-BC-1 样品数据发布，包含4个目、7个科、15个属的共1232个样品数据。',
          des: '海底热液循环可以改变海水和洋壳的化学组成，也会影响洋壳的增生和冷却过程，对于理解...',
          day: '25',
          date: '2023-03'
        },
        {
          title:
            '深海工程菌SS-DY31-Ⅱ-W1306-BC-1 样品数据发布，包含4个目、7个科、15个属的共1232个样品数据。',
          des: '海底热液循环可以改变海水和洋壳的化学组成，也会影响洋壳的增生和冷却过程，对于理解...',
          day: '25',
          date: '2023-03'
        },
        {
          title:
            '深海工程菌SS-DY31-Ⅱ-W1306-BC-1 样品数据发布，包含4个目、7个科、15个属的共1232个样品数据。',
          des: '海底热液循环可以改变海水和洋壳的化学组成，也会影响洋壳的增生和冷却过程，对于理解...',
          day: '25',
          date: '2023-03'
        },
        {
          title:
            '深海工程菌SS-DY31-Ⅱ-W1306-BC-1 样品数据发布，包含4个目、7个科、15个属的共1232个样品数据。',
          des: '海底热液循环可以改变海水和洋壳的化学组成，也会影响洋壳的增生和冷却过程，对于理解...',
          day: '25',
          date: '2023-03'
        }
      ],
      viewer: null,
      color: [Cesium.Color.RED, Cesium.Color.GREEN, Cesium.Color.BLUE, Cesium.Color.CHARTREUSE, Cesium.Color.DARKBLUE]
    }
  },

  computed: {
    swiper() {
      return this.$refs.visualizationSwiper.swiper
    }
  },
  created() {
    this.getVoyageList()
  },
  mounted() {
    this.initCesium()
  },
  methods: {
    // 查询航次列表
    getVoyageList() {
      getVoyage().then(res => {
        const voyageList = res.page.records
        voyageList.map(item => {
          // 获取航次坐标点
          getVoyageLine({
            voyage_id: item.tsy_id
          }).then(res2 => {
            // 格式化坐标点
            const points = []
            res2.array.forEach(point => {
              points.push(Number(point.nav_lon), Number(point.nav_lat))
            })
            // 将坐标点添加到航次列表中
            item.points = points
          })
        })
        this.voyageList = voyageList
      })
    },
    // 初始化cesium
    initCesium() {
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
      this.viewer = new Cesium.Viewer('cesiumContainer', {
        sceneMode: Cesium.SceneMode.SCENE2D,
        shadows: false,
        timeline: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        selectionIndicator: false,
        homeButton: false,
        animation: false,
        infoBox: false,
        geocoder: false,
        navigationHelpButton: false
      })
      this.viewer._cesiumWidget._creditContainer.style.display = 'none'
      this.viewer.scene.sun.show = false
      this.viewer.scene.moon.show = false
      this.viewer.scene.fog.enabled = false
      this.viewer.scene.skyAtmosphere.show = false
      this.viewer.scene.sun.show = false
      this.viewer.scene.skyBox.show = false
      this.viewer.scene.globe.enableLighting = false
      this.viewer.shadowMap.darkness = 0.8
      this.viewer.scene._sunBloom = false
      this.viewer.scene.globe.showGroundAtmosphere = false
      // 叠加叠加影像服务
      // const earthMap = new Cesium.WebMapTileServiceImageryProvider(
      //   {
      //     url: 'http://124.16.219.154:8080/geoserver/gwc/service/wmts/rest/ne:gmrt_20231018/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/jpeg',
      //     layer: 'ne:gmrt_20231018',
      //     style: 'default',
      //     tileMatrixSetID: 'EPSG:4326',
      //     format: 'image/jpeg',
      //     tilingScheme: new Cesium.GeographicTilingScheme()
      //   }
      // )
      // this.viewer.imageryLayers.addImageryProvider(earthMap)
      // 增加海岸线  /geoserver/gwc/service/wmts/rest/ne:GSHHS_f_L1/EPSG:4326/EPSG:4326:{z}/{y}/{x}?format=image/png
      // const coastline = new Cesium.WebMapTileServiceImageryProvider(
      //   {
      //     url: 'http://124.16.219.154:8080/geoserver/gwc/service/wmts/rest/ne:GSHHS_f_L1/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
      //     layer: 'ne:GSHHS_f_L1',
      //     style: 'default',
      //     tileMatrixSetID: 'EPSG:4326',
      //     format: 'image/png',
      //     tilingScheme: new Cesium.GeographicTilingScheme()
      //   }
      // )
      // this.viewer.imageryLayers.addImageryProvider(coastline)
      // 沉船摄影拼接图 /geoserver/gwc/service/wmts/rest/ne:No1ShipWreck_UP/EPSG:4326/EPSG:4326:{z}/{y}/{x}?format=image/png
      // const shipline = new Cesium.WebMapTileServiceImageryProvider(
      //   {
      //     url: 'http://124.16.219.154:8080/geoserver/gwc/service/wmts/rest/ne:No1ShipWreck_UP/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
      //     layer: 'ne:No1ShipWreck_UP',
      //     style: 'default',
      //     tileMatrixSetID: 'EPSG:4326',
      //     format: 'image/png',
      //     tilingScheme: new Cesium.GeographicTilingScheme()
      //   }
      // )
      // this.viewer.imageryLayers.addImageryProvider(shipline)
    },
    /* cesium 绘制线 */
    drawLine(index, id, degreeArr) {
      this.viewer.entities.add({
        id: id,
        polyline: { //polyline折线实体
          positions: Cesium.Cartesian3.fromDegreesArray(degreeArr),//位置
          width: 5,//折线宽度
          cusColor: this.color[index],
          material: new Cesium.PolylineArrowMaterialProperty(
            this.color[index]
            //Cesium.Color.BLUE
            // glowPower : 0.2,//发光的强度，值为线宽的百分比(0-1.0)
            // color:Cesium.Color.BLUE //发光的颜色
          ),//材质
          clampToGround: true, //地表层高度模式,
          zIndex: 1000
        }
      })
      this.viewer.camera.setView({
        // 指定相机位置
        destination: Cesium.Cartesian3.fromDegrees(degreeArr[0], degreeArr[1])
      })
      this.autoZoom()
    },
    // 创建点位
    setPoint(id, degree, color) {
      this.viewer.entities.add({
        id: id,
        position: Cesium.Cartesian3.fromDegrees(degree),
        point: {
          pixelSize: 20, // 点像素大小
          color: color
        }
      })
      // this.viewer.zoomTo(point)
    },
    // 清除所有实体
    clearAll() {
      this.viewer.entities.removeAll()
    },
    // 自动跳转到实体位置
    autoZoom(){
      this.viewer.zoomTo(this.viewer.entities)
    },
    // 全部轨迹
    onAll() {
      this.clearAll()
      this.chooseIndex = -1
      this.voyageList.forEach((item, index) => {
        this.drawLine(index, item.tsy_id, item.points)
      })
    },
    // 选择轨迹
    toChoose(i, item) {
      this.clearAll()
      this.chooseIndex = i
      this.drawLine(i, item.tsy_id, item.points)
    },
    // 页面跳转
    turnPage(val, a) {
      if (!a) {
        this.$router.push({ name: val })
      } else {
        window.open(val, '_blank')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.index {
  width: 100%;
  height: 100%;
  background: #ecf2f4;

  .banner {
    width: 100%;
    height: 700px;
    position: relative;

    img {
      width: 100%;
      height: 100%;
    }

    .banner_con {
      position: absolute;
      left: 0;
      top: 35%;
      z-index: 999;
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      align-items: center;

      .banner_top {
        margin-bottom: 6%;
        width: 80%;
        height: auto;
        display: flex;
        flex-direction: column;

        p {
          font-size: 21px;
          color: #fff;
          line-height: 36px;
        }
      }

      .banner_bot {
        width: 80%;
        height: 150px;
        border-radius: 10px;
        background: rgba($color: #fff, $alpha: 0.3);
        box-sizing: border-box;
        padding: 25px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .bot_left {
          width: 35%;
          height: 100%;
          display: flex;
          flex-direction: column;
          border-right: 1px solid rgba($color: #fff, $alpha: 0.3);

          .left1 {
            width: 100%;
            height: 100%;
            text-align: center;

            p {
              font-size: 16px;
              color: #fff;
            }
          }

          .left2 {
            width: 100%;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;

            .left2_1 {
              display: flex;
              flex-direction: column;
              align-items: center;
              width: 40%;
              height: auto;

              p {
                font-size: 34px;
                color: #fff;
                font-weight: bold;
                line-height: 40px;
                font-family: DIN-Bold;
              }

              span {
                margin-top: 8px;
                font-size: 14px;
                color: #fff;
              }
            }
          }
        }

        .bot_right {
          width: 62%;
          height: 100%;
          display: flex;
          align-items: center;
          flex-direction: column;

          .right1 {
            width: 100%;
            height: 100%;
            text-align: center;

            p {
              font-size: 16px;
              color: #fff;
            }
          }

          .right2 {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;

            .right2_1 {
              width: 20%;
              height: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;

              p {
                font-size: 34px;
                color: #fff;
                font-weight: bold;
                line-height: 40px;
                font-family: DIN-Bold;
              }

              span {
                margin-top: 8px;
                font-size: 14px;
                color: #fff;
              }
            }
          }
        }
      }
    }
  }

  .guiji {
    width: 100%;
    height: auto;
    margin: 70px 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;

    .guiji_1 {
      margin-bottom: 20px;
      width: 100%;
      height: auto;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: auto;
      }
    }

    .guiji_2 {
      position: relative;
      width: 100%;
      height: 800px;

      .daohang {
        position: absolute;
        top: 50px;
        left: 25%;
        width: 50%;
        height: 60px;
        background: rgba($color: #000, $alpha: 0.7);
        border-radius: 10px;
        z-index: 8888;
        overflow: hidden;

        ul {
          width: 100%;
          height: 60px;
          box-sizing: border-box;
          padding-left: 15px;
          display: flex;
          align-items: center;
          overflow: auto;

          &::-webkit-scrollbar {
            width: 8px;
            height: 8px;
          }

          /* 滚动槽 */
          &::-webkit-scrollbar-track {
            -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
            border-radius: 10px;
            background: #010e32;
          }

          /* 滚动条滑块 */
          &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            /* background:rgba(0,0,0,0.3); */
            background: #203e86;
            -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
          }

          li {
            // margin-right: 20px;
            width: 120px;
            height: 50px;
            white-space: nowrap;

            &.active {
              a {
                background: #0a84c1;
              }
            }

            a {
              display: block;
              line-height: 40px;
              margin-top: 5px;
              height: 40px;
              font-size: 15px;
              color: #fff;
              padding: 0 15px;
              border-radius: 5px;
            }
          }
        }
      }

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .shuju {
    padding-bottom: 170px;
    padding-top: 70px;
    width: 100%;
    height: auto;
    background: url(../../static/images/secBg.jpg) center no-repeat;
    background-size: 100% 100%;

    .shuju1 {
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-bottom: 70px;

      .shuju1_top {
        margin-bottom: 50px;
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: auto;
        }
      }

      .shuju1_con {
        width: 85%;
        height: 390px;

        ul {
          width: 100%;
          height: 390px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          li {
            position: relative;
            width: 18%;
            height: 340px;
            border-radius: 10px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.35s;

            &::after {
              display: none;
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: rgba($color: #0a84c1, $alpha: 0.5);
            }

            &:hover {
              height: 390px;

              &::after {
                display: block;
              }
            }

            &:first-child {
              background: url(../../static/images/diqiu_bg.png) center no-repeat;
              background-size: cover;
            }

            &:nth-child(2) {
              background: url(../../static/images/diqiu_bg1.png) center no-repeat;
              background-size: cover;
            }

            &:nth-child(3) {
              background: url(../../static/images/dizhi_bg.png) center no-repeat;
              background-size: cover;
            }

            &:nth-child(4) {
              background: url(../../static/images/dongwu_bg.png) center no-repeat;
              background-size: cover;
            }

            &:nth-child(5) {
              background: url(../../static/images/shipin_bg.png) center no-repeat;
              background-size: cover;
            }

            img {
              position: relative;
              z-index: 99;
              width: auto;
              height: auto;
              margin-bottom: 15px;
            }

            p {
              position: relative;
              z-index: 99;
              width: 70%;
              font-size: 20px;
              color: #fff;
              text-align: center;
            }

            .sourceData {
              padding-top: 55px;
              width: 96%;
              font-size: 14px;
              color: #fff;

            }
          }
        }
      }
    }

    .shuju2 {
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-bottom: 70px;

      .shuju2_top {
        margin-bottom: 50px;
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: auto;
        }
      }

      .shuju2_con {
        width: 100%;
        height: auto;
        position: relative;

        .swiper-visualization {
          overflow: hidden;
          padding: 40px 0;

          .swiper-visualization-box {
            position: relative;
            width: 883px;
            margin: 0 auto;

            .swiper-arrow {
              position: absolute;
              width: 62px;
              height: 62px;
              top: 224px;
              background-repeat: no-repeat;
              // border: 2px solid #ffffff;
              background-position: center;
              z-index: 2;
              cursor: pointer;
            }

            .swiper-prev {
              left: -50px;
              background-image: url(../../static/images/arrow-left.png);
            }

            .swiper-next {
              right: -50px;
              background-image: url(../../static/images/arrow-right.png);
            }

            .swiper-container {
              overflow: visible;

              .swiper-slide {
                position: relative;
                opacity: 0.6;
                transform: scale(0.9);

                .pic {
                  display: block;
                  position: relative;
                  padding-top: 55.28%;
                  border: 2px solid #ffffff;
                  box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.22);

                  img {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                  }
                }

                .txt {
                  position: absolute;
                  top: 5%;
                  left: 5%;
                  z-index: 10;
                  font-weight: bold;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: baseline;
                  font-size: 22px;
                  padding: 52px 0 40px;
                  opacity: 0.3;

                  p {
                    font-size: 60px;
                    color: #fff;
                  }

                  .txt1 {
                    margin-top: 50px;
                    display: flex;
                    flex-direction: column;

                    p {
                      font-size: 36px;
                      color: #fff;
                    }

                    span {
                      font-size: 28px;
                      color: #fff;
                    }
                  }
                }

                .mask {
                  position: absolute;
                  width: 1083px;
                  height: 186px;
                  bottom: -40px;
                  left: -109px;
                  right: 0;
                  // background: url(~@/assets/images/daoying.png) no-repeat center /
                  //   cover;
                  // opacity: 0;
                }
              }

              .swiper-slide-active {
                opacity: 1;
                transform: scale(1);

                .txt,
                .mask {
                  opacity: 1;
                }
              }
            }
          }
        }
      }
    }
  }

  .dongtai {
    margin-top: -180px;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;

    .el-row {
      width: 92%;
    }

    .dongtai_top {
      width: 100%;
      height: auto;
      margin-bottom: 50px;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: auto;
      }
    }

    .dongtai_bot {
      width: 85%;
      height: auto;

      ul {
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        li {
          margin-bottom: 35px;
          width: 48%;
          height: 170px;
          background: #fff;
          border-radius: 10px;
          box-sizing: border-box;
          padding: 25px;
          display: flex;
          align-items: center;
          box-shadow: 0 0 5px #ccc;
          cursor: pointer;
          transition: all 0.35s;

          &:hover {
            box-shadow: 0 10px 15px #ccc;

            .date {
              background: #13a1f0;

              p {
                color: #fff;
              }

              span {
                color: #fff;
              }
            }

            .des {
              p {
                color: #13a1f0;
              }
            }
          }

          .date {
            margin-right: 30px;
            width: 100px;
            height: 100px;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #ebeff5;

            p {
              font-size: 32px;
              color: #02203c;
              line-height: 35px;
              font-family: DIN-Bold;
            }

            span {
              color: #02203c;
              font-size: 16px;
              font-family: DIN-Bold;
            }
          }

          .des {
            width: 85%;
            height: 100px;
            display: flex;
            flex-direction: column;
            align-items: baseline;
            justify-content: space-between;

            p {
              font-size: 18px;
              color: #212121;
              font-weight: bold;
            }

            span {
              font-size: 14px;
              color: #999;
            }
          }
        }
      }
    }
  }

  .gongju {
    margin-top: 60px;
    margin-bottom: 70px;
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .gongju_top {
      margin-bottom: 30px;
      width: 100%;
      height: auto;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: auto;
      }
    }

    .gongju_con {
      width: 85%;
      height: 240px;

      ul {
        width: 100%;
        height: 240px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        li {
          cursor: pointer;
          width: 23%;
          height: 240px;
          border-radius: 5px;
          background: url(../../static/images/sanBg.png) center no-repeat;
          background-size: 100% 100%;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          img {
            width: auto;
            height: auto;
            display: block;
            margin-bottom: 20px;
          }

          p {
            font-size: 18px;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>

<style>
.BMap_cpyCtrl {
  display: none;
}

.son {
  position: absolute;
  left: 1450px;
  top: 418px;
  background-color: #062f59c7;
  color: rgb(253, 253, 253);
  border-radius: 10px;
  padding: 20px;
  border: 1px solid #7ba9cacf;
  font-size: 12px;
  z-index: 1000;
}

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

#map {
  position: relative;
}
</style>