1279 lines
34 KiB
Vue
1279 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">
|
||
<!-- <img src="../../static/images/guiji_1.jpg" alt="" /> -->
|
||
<div class="daohang">
|
||
<ul>
|
||
<li>
|
||
<a @click="onAll">All</a>
|
||
</li>
|
||
<li>
|
||
<a @click="clearAll">clear</a>
|
||
</li>
|
||
<li
|
||
v-for="(item, index) in voyageList"
|
||
:key="index"
|
||
:class="chooseIndex === index ? 'active' : ''"
|
||
@click="toChoose(item, index)"
|
||
>
|
||
<a>{{ item.voyage_name }}</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div id="cesiumContainer" ref="cesiumContainer"
|
||
onmouseleave="document.getElementById('mouseWheelTip').style.display = 'none'"
|
||
style="height: 100%;width:100%;">
|
||
<div class="son" style="display: none;">弹框插槽</div>
|
||
<div id="mouseWheelTip" style="display: none;">地图缩放：按下 Ctrl + 鼠标滚轮</div>
|
||
</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>{{ item.voyage_end_date.slice(0, 7) }}</span>
|
||
</div>
|
||
<div class="des">
|
||
<p>{{ item.voyage_name }}</p>
|
||
<span>{{ 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>{{ item.create_time.slice(0, 7) }}</span>
|
||
</div>
|
||
<div class="des">
|
||
<p>{{ item.dataset_name }}</p>
|
||
<span>{{ 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 Footer from '../components/public/Footer'
|
||
import { getVoyage, getVoyageLine, getParamsList, statisticsNums } from '../api/home'
|
||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||
import 'swiper/swiper-bundle.css'
|
||
import { sampleDatasetList, voyageRegList } from '@/api/dataTransfer'
|
||
import {
|
||
modifyCesiumMouseWheel, setImageryViewModels
|
||
} from '@/utils/common'
|
||
|
||
const Cesium = window.Cesium
|
||
|
||
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
|
||
}
|
||
}
|
||
},
|
||
chooseIndex: -1,
|
||
voyageList: [],
|
||
dataUpdateList: [],
|
||
sampleDataUpdateList: [],
|
||
viewer: null,
|
||
// 地图图层基础地址
|
||
CesiumHostAddr: '',
|
||
// 保存自定义底图
|
||
imageryViewModels: [],
|
||
// 保存轨迹图层
|
||
trackLineLayers: [],
|
||
// 记录已渲染的轨迹
|
||
rendered: []
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
swiper() {
|
||
return this.$refs.visualizationSwiper.swiper
|
||
}
|
||
},
|
||
created() {
|
||
this.getVoyageList()
|
||
this.getParams()
|
||
this.getStatisticsNums()
|
||
this.dataUpdate()
|
||
this.sampleDataUpdate()
|
||
},
|
||
mounted() {
|
||
|
||
},
|
||
methods: {
|
||
// 获取从参数列表
|
||
getParams() {
|
||
getParamsList().then(res => {
|
||
const arr = res.array
|
||
if (arr.length) {
|
||
arr.forEach(item => {
|
||
if (item.param_name === 'CesiumHostAddr') {
|
||
// this.CesiumHostAddr = item.param_value
|
||
this.CesiumHostAddr = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/tiles`
|
||
this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
|
||
this.initCesium()
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 查询航次列表
|
||
getVoyageList() {
|
||
getVoyage().then(res => {
|
||
this.voyageList = res.page.records
|
||
})
|
||
},
|
||
|
||
// 初始化cesium
|
||
initCesium() {
|
||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
|
||
this.viewer = new Cesium.Viewer('cesiumContainer', {
|
||
sceneMode: Cesium.SceneMode.SCENE2D,
|
||
shadows: false,
|
||
timeline: false,
|
||
baseLayerPicker: true,
|
||
// 设置自定义底图
|
||
imageryProviderViewModels: this.imageryViewModels,
|
||
// 关闭默认的地形底图
|
||
terrainProviderViewModels: [],
|
||
fullscreenButton: false,
|
||
selectionIndicator: false,
|
||
homeButton: true,
|
||
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
|
||
this.viewer.scene.postProcessStages.fxaa.enabled = true
|
||
|
||
// 单击 homeButton 返回初始位置
|
||
this.viewer.homeButton.viewModel.command.beforeExecute.addEventListener((e) => {
|
||
e.cancel = true;
|
||
this.viewer.camera.flyTo({
|
||
// 指定相机初始位置
|
||
destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000),
|
||
duration: 0.5
|
||
});
|
||
});
|
||
|
||
this.viewer.camera.setView({
|
||
// 指定相机初始位置
|
||
destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000)
|
||
});
|
||
|
||
// 改写 Cesium 原生鼠标滚轮事件，地图缩放改为按下 Ctrl + 鼠标滚轮
|
||
modifyCesiumMouseWheel(this.viewer);
|
||
|
||
// 增加海岸线
|
||
const coastline = new Cesium.WebMapTileServiceImageryProvider(
|
||
{
|
||
url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:GSHHS_f_L1/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
|
||
layer: 'ougp:GSHHS_f_L1',
|
||
style: 'default',
|
||
format: 'image/png',
|
||
tileMatrixSetID: 'EPSG:4326',
|
||
tilingScheme: new Cesium.GeographicTilingScheme()
|
||
}
|
||
)
|
||
this.viewer.imageryLayers.addImageryProvider(coastline)
|
||
// 沉船摄影拼接图
|
||
const shipline = new Cesium.WebMapTileServiceImageryProvider(
|
||
{
|
||
url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:正射影像图_GM输出_20240516/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
|
||
layer: 'ougp:正射影像图_GM输出_20240516',
|
||
style: 'default',
|
||
format: 'image/png',
|
||
tileMatrixSetID: 'EPSG:4326',
|
||
tilingScheme: new Cesium.GeographicTilingScheme()
|
||
}
|
||
)
|
||
this.viewer.imageryLayers.addImageryProvider(shipline)
|
||
},
|
||
// 清除所有轨迹图层
|
||
clearAll() {
|
||
this.chooseIndex = -1
|
||
if (this.trackLineLayers.length) {
|
||
this.trackLineLayers.forEach(line => {
|
||
this.viewer.imageryLayers.remove(line)
|
||
})
|
||
}
|
||
this.rendered = []
|
||
},
|
||
// 全部轨迹
|
||
onAll() {
|
||
if (this.voyageList.length) {
|
||
this.voyageList.forEach(ele => {
|
||
this.toChoose(ele, -1)
|
||
})
|
||
}
|
||
},
|
||
// 选择轨迹
|
||
toChoose(item, index) {
|
||
this.chooseIndex = index
|
||
// 查询轨迹是否渲染过，避免重复渲染
|
||
if (this.rendered.length) {
|
||
const isRendered = this.rendered.find(ele => ele === item.voyage_name)
|
||
if (isRendered) return
|
||
}
|
||
// 轨迹影像参数
|
||
const trackLine = new Cesium.WebMapTileServiceImageryProvider(
|
||
{
|
||
url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${item.voyage_name}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
|
||
layer: `dsds:${item.voyage_name}`,
|
||
style: 'default',
|
||
format: 'image/png',
|
||
tileMatrixSetID: 'EPSG:4326',
|
||
tilingScheme: new Cesium.GeographicTilingScheme()
|
||
}
|
||
)
|
||
const trackLineLayer = this.viewer.imageryLayers.addImageryProvider(trackLine)
|
||
this.trackLineLayers.push(trackLineLayer)
|
||
// 记录已渲染的轨迹，防止重复渲染
|
||
this.rendered.push(item.voyage_name)
|
||
},
|
||
// 统计数据
|
||
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;
|
||
}
|
||
|
||
.cesium-viewer-bottom {
|
||
display: none !important;
|
||
}
|
||
|
||
#map {
|
||
position: relative;
|
||
}
|
||
</style>
|