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>{{ statistics.DataTotal }}</p>
                <span>数据样品数</span>
              </div>
              <div class="left2_1">
                <p>{{ statistics.DatasetTotal }}</p>
                <span>数据集个数</span>
              </div>
            </div>
          </div>
          <div class="bot_right">
            <div class="right1">
              <p>依托两器、两船等各类海洋科考平台、设备开展航次科考</p>
            </div>
            <div class="right2">
              <div class="right2_1">
                <p>{{ statistics.VoyageTotal }}</p>
                <span>航次个数</span>
              </div>
              <div class="right2_1">
                <p>{{ statistics.DayTotal }}</p>
                <span>航次天数</span>
              </div>
              <div class="right2_1">
                <p>{{ statistics.ShenHaiTotal }}</p>
                <span>“深海勇士”号潜次数</span>
              </div>
              <div class="right2_1">
                <p>{{ statistics.FenDouTotal }}</p>
                <span>“奋斗者”号潜次数</span>
              </div>
              <div class="right2_1">
                <p>{{ statistics.MileageTotal }}</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">
        <div id="homeMap" ref="homeMap" onmouseleave="document.getElementById('mouseWheelTip').style.display = 'none'"
          onmouseenter="document.getElementById('mouseWheelTip').style.display = ''" style="height: 100%;width:100%;">
          <div class="son" style="display: none;">弹框插槽</div>
          <div id="mouseWheelTip" style="display: none;">地图缩放：按下 Ctrl + 鼠标滚轮</div>
          <el-popover placement="left-start" title="航次列表" width="300" trigger="hover">
            <div class="contour-line">
              <span>等深线：</span>
              <el-button size="mini" v-for="depth in depthOptions" :key="depth"
                :type="selectedDepths.includes(depth) ? 'primary' : ''" @click="toggleDepth(depth)">
                {{ depth }}米
              </el-button>
            </div>
            <el-table ref="multipleTable" :data="voyageList" @selection-change="handleSelectionChange"
              @row-click="handleRowClick" highlight-current-row :current-row-key="currentVoyage">
              <el-table-column type="selection" width="50" />
              <el-table-column property="voyage_name" label="航次" />
            </el-table>
            <div class="right-top" slot="reference">
              <img class="boat" src="../../static/images/boat_icon.png" alt="">
            </div>
          </el-popover>
        </div>
      </div>
    </div>

    <div class="bg-box"></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 dataUpdateList" :key="index" @click="turnDetailPage(item)">
            <div class="date">
              <p>{{ item.voyage_end_date.slice(8, 10) }}</p>
              <span class="text-ellipsis--3-lines">{{ item.voyage_end_date.slice(0, 7) }}</span>
            </div>
            <div class="des">
              <p>{{ item.voyage_name }}</p>
              <span class="text-ellipsis--3-lines">{{ item.voyage_remark }}</span>
            </div>
          </li>
        </ul>
        <ul>
          <li v-for="(item, index) in sampleDataUpdateList" :key="index">
            <div class="date">
              <p>{{ item.create_time.slice(8, 10) }}</p>
              <span class="text-ellipsis--3-lines">{{ item.create_time.slice(0, 7) }}</span>
            </div>
            <div class="des">
              <p>{{ item.dataset_name }}</p>
              <span class="text-ellipsis--3-lines">{{ item.job_type }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="shuju" style="padding-bottom: 1px;">
      <!--      <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="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>-->

    <Footer />
  </div>
</template>

<script>
import Vue from 'vue'
import Footer from '../components/public/Footer'
import { getVoyage, statisticsNums } from '../api/home'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
import { sampleDatasetList, voyageRegList } from '@/api/dataTransfer'
import { loadVectorLayer } from '@/utils/vector-layer-utils'
import { ColorGenerator } from '@/utils/color-generator';
import { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";

export default {
  name: 'Index',
  components: {
    swiper,
    swiperSlide,
    Footer
  },
  data() {
    return {
      statistics: {},
      movementTimer: null,
      iconImgW: require('../../static/images/14-w.png'),
      map: null,
      visualizationList: [
        {
          pic: require('../../static/images/shuju2_bg2.png'),
          title: '专业数据分析',
          des: '载人深潜温盐深数据',
          routerName: ''
        },
        {
          pic: require('../../static/images/shuju2_bg.png'),
          title: '服务资助航次',
          des: '深海技术创新中心共享航次',
          routerName: ''
        },
        {
          pic: require('../../static/images/shuju2_bg3.png'),
          title: '构建应急搜寻处置快速响应能力',
          des: '应急搜捞应用',
          routerName: 'SalvageHome'
        }
      ],
      swiperOptions: {
        loop: true,
        loopAdditionalSlides: 3,
        initialSlide: 1,
        spaceBetween: 35,
        navigation: {
          nextEl: '.swiper-visualization .swiper-next',
          prevEl: '.swiper-visualization .swiper-prev'
        },
        breakpoints: {
          768: {
            spaceBetween: 10
          }
        }
      },
      voyageList: [], // 航次列表数据
      currentVoyage: null, // 当前选中的航次名称
      highlightLayer: null, // 存储当前高亮图层实例
      dataUpdateList: [],
      sampleDataUpdateList: [],
      multipleSelection: [], // 当前选中的航次数组
      trackLayerMap: {}, // 存储每个航次对应的轨迹图层实例 { voyage_name: layerInstance }
      depthOptions: [4500, 6000], // 可扩展更多深度值
      selectedDepths: [], // 存储当前选中的深度值
      contourLayerMap: {}, // 改为对象形式，以深度值作为key存储对应的图层实例
    }
  },

  computed: {
    swiper() {
      return this.$refs.visualizationSwiper.swiper
    }
  },
  created() {
    this.getVoyageList()
    this.getStatisticsNums()
    this.dataUpdate()
    this.sampleDataUpdate()
  },
  mounted() {
    initMapbox("homeMap", {
      tileKey: "World_Imagery",
      zoom: 1.5,
      center: [122, 15],
      minZoom: 1,
      maxZoom: 29,
      coastlineOn: false,
      contourOn: false
    });

    Vue.config.maps["homeMap"].on('load', () => {
      handleWheel("homeMap");
      Vue.config.maps["homeMap"].scrollZoom.disable();

      // 加载海岸线
      // loadVectorLayer("GSHHS_f_L1", ["line"], ["#FEFEFE"], "homeMap", 'ougp');
      // 加载等深线（默认不显示）
      loadVectorLayer("contour-4500m", ["line"], ["#FEFEFE"], "none", "homeMap", 'ougp');
      loadVectorLayer("contour-6000m", ["line"], ["#FEFEFE"], "none", "homeMap", 'ougp');
    });
  },
  methods: {
    // 查询航次列表
    getVoyageList() {
      getVoyage({
        start: 0,
        limit: 10
      }).then(res => {
        this.voyageList = res.page.records;

        let i = 0;
        const colors = ColorGenerator.generateDivergingColors(this.voyageList.length);
        this.voyageList.forEach(element => {
          // 加载轨迹图层
          loadVectorLayer(element.voyage_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "homeMap", "dsds");
          i++;
        });

        this.$nextTick(() => {
          // 默认全选当前页
          this.$refs.multipleTable.toggleAllSelection()
        })
      })
    },

    // 行点击事件处理
    handleRowClick(row, column, event) {
      // 原高亮逻辑改为图层显示/隐藏控制
      let visibility = Vue.config.maps["homeMap"].getLayoutProperty(`vector-${row.voyage_name}-symbol`, "visibility");
      visibility = visibility == "visible" ? "none" : "visible";
      Vue.config.maps["homeMap"].setLayoutProperty(`vector-${row.voyage_name}-symbol`, "visibility", visibility);
      Vue.config.maps["homeMap"].setLayoutProperty(`vector-${row.voyage_name}-line`, "visibility", visibility);
      this.$refs.multipleTable.toggleRowSelection(row);
    },

    // 处理表格选择项变化
    handleSelectionChange(val) {
      // 获取新旧选中的航次名称数组
      const newVoyages = val.map(item => item.voyage_name);
      const oldVoyages = this.multipleSelection.map(item => item.voyage_name);

      // 找出需要新增的航次（在新数组不在旧数组）
      const voyagesToAdd = newVoyages.filter(voyage => !oldVoyages.includes(voyage));
      // 找出需要移除的航次（在旧数组不在新数组）
      const voyagesToRemove = oldVoyages.filter(voyage => !newVoyages.includes(voyage));

      // 移除不再需要的轨迹图层
      voyagesToRemove.forEach(voyage => {
        Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-symbol`, "visibility", "none");
        Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-line`, "visibility", "none");
      });

      // 添加新选择的轨迹图层
      voyagesToAdd.forEach(voyage => {
        // 从val中找出对应航次的完整数据项
        const correspondingItem = val.find(item => item.voyage_name === voyage);
        if (correspondingItem) {
          Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-symbol`, "visibility", "visible");
          Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-line`, "visibility", "visible");
        }
      });

      // 更新当前选中项
      this.multipleSelection = val;
    },

    toggleDepth(depth) {
      // **方案1: 如果要求同时只能有一个按钮被选中**
      // this.selectedDepths = [depth]; // 数组只保留当前点击的深度

      // **方案2: 允许同时多个按钮被选中，点击切换自身状态**
      const index = this.selectedDepths.indexOf(depth);
      if (index > -1) {
        this.selectedDepths.splice(index, 1); // 如果已选中，则移除
        Vue.config.maps["homeMap"].setLayoutProperty(`vector-contour-${depth}m-line`, "visibility", "none");
      } else {
        this.selectedDepths.push(depth); // 如果未选中，则添加
        Vue.config.maps["homeMap"].setLayoutProperty(`vector-contour-${depth}m-line`, "visibility", "visible");
      }
    },

    // 统计数据
    getStatisticsNums() {
      statisticsNums().then(res => {
        this.statistics = res.map
      })
    },
    // 数据更新动态
    dataUpdate() {
      voyageRegList({
        start: 0,
        limit: 3,
        group: 10,
        order: 'voyage_end_date',
        type: 'DESC'
      }).then(res => {
        this.dataUpdateList = res.page.records
      })
    },
    // 跳转到航次详情页
    turnDetailPage(item) {
      this.$router.push({
        name: 'dataDetail',
        query: {
          voyage_name: item.voyage_name
        }
      })
    },
    // 样品数据引用动态
    sampleDataUpdate() {
      sampleDatasetList({
        start: 0,
        limit: 3,
        group: 10,
      }).then(res => {
        console.log(res)
        this.sampleDataUpdateList = res.page.records
      })
    },
  }
}
</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: 50px 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    .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;
      display: flex;
      /* 导航列表居中显示 */
      justify-content: center;
      align-items: center;

      .daohang {
        position: absolute;
        top: 20px;
        max-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;
              cursor: pointer;
            }
          }
        }
      }

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

    .cover {
      width: 100%;
      height: 800px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 3000;
      background-color: pink;
    }
  }

  .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;
                }
              }
            }
          }
        }
      }
    }
  }

  .bg-box {
    margin-top: -450px;
    background: url(../../static/images/secBg.jpg) center no-repeat;
    background-size: 100% 100%;
    height: 700px;
  }

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

    .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;
      display: flex;
      justify-content: space-between;

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

        li {
          margin-bottom: 35px;
          width: 100%;
          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;
}

#mouseWheelTip {
  position: absolute;
  left: 5px;
  bottom: 5px;
  z-index: 100;
  color: #fff;
}

#map {
  position: relative;
}

.right-top {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  cursor: pointer;
  padding: 8px;
}

.boat {
  border-radius: 50%;
}

.text-ellipsis--3-lines {
  /* 限制显示的行数 */
  -webkit-line-clamp: 3;
  /* 将对象作为弹性伸缩盒子模型显示（必要） */
  display: -webkit-box;
  /* 设置或检索伸缩盒对象的子元素的排列方式为垂直（必要） */
  -webkit-box-orient: vertical;
  /* 隐藏超出容器的内容 */
  overflow: hidden;
  /* 文本溢出时显示省略号 */
  text-overflow: ellipsis;
}

/* 增强当前行高亮效果 */
.el-table__body tr.current-row>td {
  background-color: #ecf5ff !important;
  color: #409eff;
}

/* 鼠标悬停效果 */
.el-table__body tr:hover>td {
  background-color: #f5f7fa !important;
  cursor: pointer;
}
</style>