1266 lines
34 KiB
Vue
1266 lines
34 KiB
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> 个 体量：<span>-</span> GB</p>-->
|
||
<!-- </li>-->
|
||
<!-- <li @click="turnPage('biologyIndex')">-->
|
||
<!-- <img src="../../static/images/yangpin.png" alt="">-->
|
||
<!-- <p>海洋生物样品信息（待开发）</p>-->
|
||
<!-- <p class="sourceData">数据集：<span>-</span> 个 体量：<span>-</span> GB</p>-->
|
||
<!-- </li>-->
|
||
<!-- <li>-->
|
||
<!-- <img src="../../static/images/dizhi.png" alt="">-->
|
||
<!-- <p>海洋地质与地球化学（待开发）</p>-->
|
||
<!-- <p class="sourceData">数据集：<span>-</span> 个 体量：<span>-</span> GB</p>-->
|
||
<!-- </li>-->
|
||
<!-- <li>-->
|
||
<!-- <img src="../../static/images/dongwu.png" alt="">-->
|
||
<!-- <p>哺乳动物与海洋声学（待开发）</p>-->
|
||
<!-- <p class="sourceData">数据集：<span>-</span> 个 体量：<span>-</span> GB</p>-->
|
||
<!-- </li>-->
|
||
<!-- <li @click="turnPage('phoneVideoIndex')">-->
|
||
<!-- <img src="../../static/images/shipin.png" alt="">-->
|
||
<!-- <p>深海视频音像图元（待开发）</p>-->
|
||
<!-- <p class="sourceData">数据集：<span>-</span> 个 体量：<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>
|