<template>
|
<el-container>
|
<el-header>
|
<div class="nav">
|
<div class="time_box">
|
<div class="date">{{ date }}</div>
|
<div class="bor"></div>
|
<div class="time">{{ time }}</div>
|
</div>
|
<!-- <div class="tips">
|
<vue-seamless-scroll
|
:data="listData"
|
class="seamless-warp"
|
:class-option="defaultOption"
|
>
|
<ul class="item">
|
<li v-for="(item, i) in listData" :key="i">
|
<p>{{ item.title }}</p>
|
</li>
|
</ul>
|
</vue-seamless-scroll>
|
</div> -->
|
<div class="btn_box">
|
<div class="btn"
|
:class="{ active1: isSelect === '/index' }"
|
@click="selectNav('index')">
|
<span> 首页</span>
|
</div>
|
<div class="btn"
|
:class="{ active1: isSelect === '/dataManagement' }"
|
@click="selectNav('dataManagement')">
|
<span>数据管理</span>
|
</div>
|
<div class="btn"
|
:class="{ active2: isSelect === '/dataApplication' }"
|
@click="selectNav('dataApplication')">
|
<span>数据应用</span>
|
</div>
|
|
<div class="btn"
|
:class="{ active3: isSelect === '/sceneLinkage' }"
|
@click="selectNav('sceneLinkage')">
|
<span>场景联动</span>
|
</div>
|
<div class="btn"
|
:class="{ active4: isSelect === '/videoSupervision' }"
|
@click="selectNav('videoSupervision')">
|
<span>视频监控</span>
|
</div>
|
<div class="btn"
|
:class="{
|
active4:
|
isSelect === '/digitalGovernment' ||
|
isSelect === '/digitalIndustry' ||
|
isSelect === '/digitalSupervision' ||
|
isSelect === '/digitalFolkVoice',
|
}"
|
@click.stop="selectNav(navArr[0].path)">
|
<span>{{ navArr[0].name }}</span>
|
<ul class="drop_down">
|
<li @click.stop="selectNav(navArr[1].path)">
|
{{ navArr[1].name }}
|
<div class="bg"></div>
|
</li>
|
<li @click.stop="selectNav(navArr[2].path)">
|
{{ navArr[2].name }}
|
<div class="bg"></div>
|
</li>
|
<li @click.stop="selectNav(navArr[3].path)">
|
{{ navArr[3].name }}
|
</li>
|
</ul>
|
</div>
|
<div class="click_box"
|
@click="eject"></div>
|
</div>
|
<div class="stars_box"
|
@click="eject">
|
<div class="strars"></div>
|
<div class="strars"></div>
|
<div class="strars"></div>
|
<div class="strars"></div>
|
<p>山东省首批县域四星级新型智慧城市</p>
|
</div>
|
<div class="dropdown"
|
id="dropdown"
|
v-show="showdropdown">
|
<!-- <i></i> -->
|
<span class="dropText">系统清单</span>
|
<ul class="dropdown-menu">
|
<li class="dropdown-item"
|
v-for="(v, i) in dropdownList"
|
:key="i">
|
<a :href="v.url"
|
target="view_window">{{ v.name }}</a>
|
</li>
|
</ul>
|
</div>
|
<div class="weather_box">
|
<div class="weather">
|
<img src="../assets/img/zonlan(4).png"
|
alt="" />
|
<p>多云<br />转晴</p>
|
</div>
|
<div class="bor"></div>
|
<div class="temperature">23-30℃</div>
|
</div>
|
</div>
|
</el-header>
|
<el-main>
|
<router-view />
|
</el-main>
|
<div id="modal-container"
|
@click="shouEject">
|
<!-- <div id="rays">
|
<div class="starays"></div>
|
</div> -->
|
<div class="modal-background">
|
<div class="modal">
|
<div id="showtitle">
|
<span>数字寿光</span>
|
</div>
|
<div id="showxing"
|
class="SHOWXING">
|
<div class="xone">
|
<div class="startXY"></div>
|
</div>
|
<div class="xtwo">
|
<div class="startXY"></div>
|
</div>
|
<div class="xthree">
|
<div class="startXY"></div>
|
</div>
|
<div class="xfour">
|
<div class="startXY"></div>
|
</div>
|
</div>
|
<div id="showTitles"
|
class="bUtonadaLij showTitles">
|
<div class="showtext"
|
style="transform: rotate(24deg); margin-top: -6%">
|
山东
|
</div>
|
<div class="showtext"
|
style="transform: rotate(18deg); margin-top: -1%">
|
省首
|
</div>
|
<div class="showtext"
|
style="transform: rotate(12deg); margin-top: 3%">
|
批县
|
</div>
|
<div class="showtext"
|
style="transform: rotate(6deg); margin-top: 5%">
|
域四
|
</div>
|
<div class="showtext"
|
style="transform: rotate(-6deg); margin-top: 5%">
|
星级
|
</div>
|
|
<div class="showtext"
|
style="transform: rotate(-12deg); margin-top: 3%">
|
新型
|
</div>
|
|
<div class="showtext"
|
style="transform: rotate(-18deg); margin-top: -1%">
|
智慧
|
</div>
|
<div class="showtext"
|
style="transform: rotate(-24deg); margin-top: -6%">
|
城市
|
</div>
|
<!-- <div style="
|
position: absolute;
|
z-index: 90;
|
top: 70.5%;
|
color: white;
|
left: 70.5%;
|
transform: rotate(-15deg);
|
"><span>城市</span></div> -->
|
</div>
|
<div class="top">
|
<!-- <div class="title"></div> -->
|
</div>
|
<!-- <div class="bottom">
|
<div class="propaganda">
|
<h3>寿光宣传片</h3>
|
</div>
|
<div class="vr">
|
<h3>寿光VR</h3>
|
</div> -->
|
<!-- </div> -->
|
</div>
|
</div>
|
</div>
|
</el-container>
|
</template>
|
|
<script>
|
import { getScwghToken, getToken, sendGet } from "../utils/api.js";
|
import $ from "jquery";
|
import MP3 from "../assets/mp3/RCD.mp3";
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
data () {
|
//这里存放数据
|
return {
|
navArr: [
|
{
|
name: "数字政务",
|
path: "digitalGovernment",
|
},
|
{
|
name: "数字行业",
|
path: "digitalIndustry",
|
},
|
{
|
name: "数字监管",
|
path: "digitalSupervision",
|
},
|
{
|
name: "数字民生",
|
path: "digitalFolkVoice",
|
},
|
],
|
showDropdownMenu: false,
|
showdropdown: false,
|
indexActive1: "",
|
indexActive: false,
|
isshow: false,
|
isSelect: "",
|
date: "2020-08-28",
|
time: "14:57:07",
|
AUDIO: null,
|
listData: [
|
{
|
title: "2小时内某某地区暴雨城市预警，某某地区积水严重。",
|
},
|
{
|
title: "2小时内某某地区暴雨城市预警，某某地区积水严重。",
|
},
|
{
|
title: "2小时内某某地区暴雨城市预警，某某地区积水严重。",
|
},
|
{
|
title: "2小时内某某地区暴雨城市预警，某某地区积水严重。",
|
},
|
],
|
|
dropdownList: [],
|
digitalGovernment: [
|
{
|
name: "全域化视频监控平台",
|
url: "https://172.19.0.28/cas/remoteLogin?username=oa&password=7f5303a2dcfebce8c04a193b3452749eb6a0475add637352455ea1eedd624e1d",
|
},
|
{
|
name: "智慧水利公共服务平台",
|
url: "http://sgsl.shouguang.gov.cn/cx/jumptycx.html?un=gly&pw=Slj@2020",
|
},
|
{
|
name: "环境自动监测监控系统",
|
url: "http://221.1.82.251:8148/sgzx/ssologin.aspx?uid=sgdsj&url=/index.aspx",
|
},
|
{
|
name: "智慧交通平台",
|
url: "http://221.1.82.251:8171/zhjt/?KEYDATA=B03DE68DDED0CFA9B0A6EA6609B600E5",
|
},
|
{
|
name: "智慧寿光时空大数据平台",
|
url: "http://172.16.1.6/portalsys/",
|
},
|
{
|
name: "智慧社区公共服务平台",
|
url: "http://sgdsjzxjk.shouguang.gov.cn/zhsq/main/html/communitys.html",
|
},
|
],
|
digitalIndustry: [
|
{
|
name: "寿光蔬菜智慧秤系统",
|
url: "",
|
},
|
{
|
name: "工业企业综合绩效评价平台",
|
url: "http://221.1.82.252:8086/gyqypj/applogin_daping?USERNAME=dsjzx&PASSWORD=0b455af659fbcf566b19212dff1bb39124910f8d",
|
},
|
{
|
name: "智慧应急平台",
|
url: "http://172.16.31.3:8314/UcsWeb#/loginPass",
|
},
|
{
|
name: "公共信用信息平台",
|
url: "http://172.16.1.233/toLogin.action?txt1=FgjAdmin7894&txt2=079A4A0FFA92DFF6700A76794150DE67&flag=nosrand",
|
},
|
{
|
name: "种子种苗交易服务平台",
|
url: "http://sgsczy.shouguang.gov.cn/admin.html?username=dsjj&password=dsjj@123",
|
},
|
{
|
name: "全国蔬菜质量标准中心信息平台",
|
url: "",
|
},
|
{
|
name: "互联网医院",
|
url: "https://admin-hospital.shouguang.gov.cn/h8-admin/index/index/index?userName=shitujicheng001&userPassword=1q23l,xc45j.",
|
},
|
],
|
digitalSupervision: [
|
{
|
name: "安全生产监督系统",
|
url: "http://221.1.82.252:8142/jd/SelectSystem/SelectSystem.html",
|
},
|
{
|
name: "阳光三农监管系统",
|
url: "http://172.16.1.27/dsjzx/",
|
},
|
{
|
name: "安监云平台",
|
url: "http://221.1.82.252:8027/Pages/nlogin.html?u=sg_ajypt&p=ajypt@73!",
|
},
|
{
|
name: "农产品质量安全网格化监管系统",
|
url: "",
|
},
|
{
|
name: "特种设备安全智慧监管平台",
|
url: "http://192.168.200.156:8090/tzsb/?KEYDATA=918a13ca7c2b4a21852708534830f492",
|
},
|
{
|
name: "危化品道路运输全过程监管平台",
|
url: "http://192.168.200.107:8068/cattle/login.html",
|
},
|
{
|
name: "数字化城市管理系统",
|
url: "http://192.168.200.98/SGSZHWEB/Screen/UBSC/userlogin.aspx?parameter=SGCGSSO",
|
},
|
],
|
digitalFolkVoice: [
|
{
|
name: "社会治理服务信息平台",
|
url: "http://172.16.1.40/index2.jsp",
|
},
|
{
|
name: "智慧停车服务系统",
|
url: "http://www.sgcttc.com/api_second/user_login.action?userNo=02&psw=02",
|
},
|
{
|
name: "农村改厕智能化监管平台",
|
url: "http://115.28.129.66/#/hscjuo1dbdc5/hrw9um1ryy14",
|
},
|
{
|
name: "全民健康信息平台",
|
url: "http://172.17.3.4/standereva/Phi/PhiLogin/LoginTh?token=RuKwN8HA4ccFvSIzBCdKLA",
|
},
|
{
|
name: "新冠疫苗接种登记平台",
|
url: "http://xgymjzdj.shouguang.gov.cn/cattle/login.html",
|
},
|
{
|
name: "新时代文明实践寿光云平台",
|
url: "http://xsdwmsj.shouguang.gov.cn/",
|
},
|
{
|
name: "智慧养老服务信息平台",
|
url: "http://221.1.82.252:8108/toSubSystem/",
|
},
|
],
|
};
|
},
|
computed: {
|
defaultOption () {
|
return {
|
step: 0.5, // 数值越大速度滚动越快
|
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
|
hoverStop: true, // 是否开启鼠标悬停stop
|
direction: 1, // 0向下 1向上 2向左 3向右
|
openWatch: true, // 开启数据实时监控刷新dom
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
|
};
|
},
|
},
|
watch: {
|
$route (nweval, _oldval) {
|
this.isSelect = nweval.path;
|
if (nweval.path === "/digitalGovernment") {
|
this.showdropdown = true;
|
this.dropdownList = this.digitalGovernment;
|
} else if (nweval.path === "/digitalIndustry") {
|
this.showdropdown = true;
|
this.dropdownList = this.digitalIndustry;
|
} else if (nweval.path === "/digitalSupervision") {
|
this.showdropdown = true;
|
this.dropdownList = this.digitalSupervision;
|
} else if (nweval.path === "/digitalFolkVoice") {
|
this.showdropdown = true;
|
this.dropdownList = this.digitalFolkVoice;
|
} else {
|
this.showdropdown = false;
|
}
|
},
|
},
|
//方法集合
|
methods: {
|
//显示隐藏链接
|
DropdownMenu () {
|
this.showDropdownMenu = !this.showDropdownMenu;
|
},
|
//遮罩隐藏
|
shouEject () {
|
document.getElementById("modal-container").classList.add("out");
|
document.body.removeAttribute("class");
|
},
|
//遮罩显示
|
eject () {
|
this.AUDIO = new Audio();
|
this.AUDIO.src = MP3;
|
this.AUDIO.play();
|
$("#showxing").hide();
|
|
$("#showtitle").show();
|
$("#showTitles").hide();
|
var container = document.getElementById("modal-container");
|
container.classList.remove("out");
|
container.classList.remove("one");
|
document.getElementsByTagName("body")[0].className = "modal-active";
|
container.classList.add("class", "one");
|
|
var flag_value = -33;
|
var value = setInterval(() => {
|
flag_value++;
|
if (flag_value > 33) {
|
clearInterval(value);
|
this.showxing();
|
// this.ShowXFO();
|
} else {
|
document.getElementById("showtitle").style.left =
|
JSON.stringify(flag_value) + "%";
|
}
|
}, 20);
|
},
|
showxing () {
|
$("#showxing").show();
|
setTimeout(() => {
|
this.showTitles();
|
}, 1000);
|
// var flag_value = 433;
|
// var value = setInterval(() => {
|
// flag_value -= 5;
|
// if (flag_value < 23) {
|
// clearInterval(value);
|
//
|
// } else {
|
// document.getElementById("showONE").style.left =
|
// JSON.stringify(flag_value) + "%";
|
// }
|
// }, 1);
|
},
|
ShowXTW () {
|
$("#showTWO").show();
|
setTimeout(() => {
|
this.ShowXTH();
|
}, 1000);
|
// var flag_value = 447;
|
// var value = setInterval(() => {
|
// flag_value -= 5;
|
// if (flag_value < 37) {
|
// clearInterval(value);
|
// } else {
|
// document.getElementById("showTWO").style.left =
|
// JSON.stringify(flag_value) + "%";
|
// }
|
// }, 20);
|
},
|
ShowXTH () {
|
$("#showTHREE").show();
|
setTimeout(() => {
|
this.ShowXFO();
|
}, 1000);
|
// var flag_value = -359;
|
// var value = setInterval(() => {
|
// flag_value += 5;
|
// if (flag_value > 54) {
|
// clearInterval(value);
|
// this.showTitles();
|
// } else {
|
// document.getElementById("showTHREE").style.left =
|
// JSON.stringify(flag_value) + "%";
|
// }
|
// }, 20);
|
},
|
ShowXFO () {
|
$("#showFOUR").show();
|
setTimeout(() => {
|
this.showTitles();
|
}, 1000);
|
// var flag_value = -342;
|
// var value = setInterval(() => {
|
// flag_value += 5;
|
// if (flag_value > 68) {
|
// clearInterval(value);
|
// this.ShowXTH();
|
// } else {
|
// document.getElementById("showFOUR").style.left =
|
// JSON.stringify(flag_value) + "%";
|
// }
|
// }, 20);
|
},
|
showTitles () {
|
$("#showTitles").show();
|
setTimeout(() => {
|
this.AUDIO.pause();
|
}, 1000);
|
},
|
selectNav (name) {
|
if (
|
name === "digitalGovernment" ||
|
name === "digitalIndustry" ||
|
name === "digitalSupervision" ||
|
name === "digitalFolkVoice"
|
) {
|
this.isshow = true;
|
} else {
|
this.isshow = false;
|
}
|
this.navArr.forEach((e, i) => {
|
if (e.path == name) {
|
//解构赋值换位置
|
[this.navArr[0], this.navArr[i]] = [this.navArr[i], this.navArr[0]];
|
}
|
});
|
this.$router.push({ path: `/${name}` });
|
},
|
|
currentTime () {
|
setInterval(this.getTime, 1000);
|
},
|
//时间格式
|
getTime () {
|
const year = new Date().getFullYear();
|
const month =
|
new Date().getMonth() + 1 < 10
|
? "0" + (new Date().getMonth() + 1)
|
: new Date().getMonth() + 1;
|
const date =
|
new Date().getDate() < 10
|
? "0" + new Date().getDate()
|
: new Date().getDate();
|
const hh =
|
new Date().getHours() < 10
|
? "0" + new Date().getHours()
|
: new Date().getHours();
|
const mm =
|
new Date().getMinutes() < 10
|
? "0" + new Date().getMinutes()
|
: new Date().getMinutes();
|
const ss =
|
new Date().getSeconds() < 10
|
? "0" + new Date().getSeconds()
|
: new Date().getSeconds();
|
// const week = new Date().getDay()
|
// if (week === 1) {
|
// this.nowWeek = '星期一'
|
// } else if (week === 2) {
|
// this.nowWeek = '星期二'
|
// } else if (week === 3) {
|
// this.nowWeek = '星期三'
|
// } else if (week === 4) {
|
// this.nowWeek = '星期四'
|
// } else if (week === 5) {
|
// this.nowWeek = '星期五'
|
// } else if (week === 6) {
|
// this.nowWeek = '星期六'
|
// } else if (week === 27) {
|
// this.nowWeek = '星期日'
|
// }
|
// console.log(myMinute);
|
this.date = `${year}-${month}-${date}`;
|
this.time = `${hh}:${mm}:${ss}`;
|
},
|
showtitle () { },
|
},
|
mounted () {
|
this.showtitle();
|
},
|
created () {
|
//获取跳转链接
|
this.digitalIndustry.forEach(async (e) => {
|
if (e.name == "寿光蔬菜智慧秤系统") {
|
let sign = window.btoa(window.encodeURIComponent(13869665112));
|
e.url = `https://sgsc.shouguang.gov.cn/trade/login2.html?sign=${sign}`;
|
}
|
if (e.name == "全国蔬菜质量标准中心信息平台") {
|
let data = {
|
KEY: "01309231ebcc4fd4a0063534e4da7c2c",
|
};
|
|
let { data: dt } = await getToken(data);
|
e.url = `http://221.1.82.252:8162/ssoln.zb?token=${dt.token}&secret=${dt.secret}`;
|
}
|
});
|
this.digitalSupervision.forEach(async (e) => {
|
if (e.name == "农产品质量安全网格化监管系统") {
|
let data = {
|
KEY: "01309231ebcc4fd4a0063534e4da7c2c",
|
};
|
|
let { data: dt } = await getScwghToken(data);
|
e.url = `http://ascs.ronganfarm.com/tokenLogin?token=${dt.token}`;
|
}
|
});
|
// this.digitalFolkVoice.forEach(async (e) => {
|
// if (e.name == "新冠疫苗接种登记平台") {
|
|
// }
|
// });
|
|
// 显示隐藏
|
this.isSelect = this.$route.path;
|
if (
|
this.$route.path === "/digitalGovernment" ||
|
this.$route.path === "/digitalIndustry" ||
|
this.$route.path === "/digitalSupervision" ||
|
this.$route.path === "/digitalFolkVoice"
|
) {
|
this.isshow = true;
|
this.showdropdown = true;
|
if (this.$route.path === "/digitalGovernment") {
|
this.dropdownList = this.digitalGovernment;
|
} else if (this.$route.path === "/digitalIndustry") {
|
this.dropdownList = this.digitalIndustry;
|
} else if (this.$route.path === "/digitalSupervision") {
|
this.dropdownList = this.digitalSupervision;
|
} else if (this.$route.path === "/digitalFolkVoice") {
|
this.dropdownList = this.digitalFolkVoice;
|
}
|
} else {
|
this.isshow = false;
|
this.showdropdown = false;
|
}
|
this.currentTime();
|
},
|
// 销毁定时器
|
beforeDestroy () {
|
if (this.getDate) {
|
clearInterval(this.getDate); // 在Vue实例销毁前，清除时间定时器
|
}
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
@import url("../assets/css/springFrame.css"); //引入公共css类
|
.modal {
|
background-color: transparent !important;
|
}
|
.el-container {
|
width: 100%;
|
height: 100%;
|
}
|
#rays {
|
/* z-index: 30; */
|
position: absolute;
|
width: 33%;
|
height: 142%;
|
top: -23%;
|
left: 34%;
|
@-webkit-keyframes rotation {
|
from {
|
-webkit-transform: rotate(0deg);
|
}
|
|
to {
|
-webkit-transform: rotate(360deg);
|
}
|
}
|
.starays {
|
width: 100%;
|
height: 100%;
|
background: url("../assets/img/rays.png") no-repeat center;
|
background-size: 100% 100%;
|
-webkit-transform: rotate(360deg);
|
|
animation: rotation 3s linear infinite;
|
|
-moz-animation: rotation 3s linear infinite;
|
|
-webkit-animation: rotation 3s linear infinite;
|
|
-o-animation: rotation 3s linear infinite;
|
}
|
@-webkit-keyframes masked-animation {
|
0% {
|
background-position: 0 0;
|
}
|
to {
|
background-position: -100% 0;
|
}
|
}
|
}
|
// #rays {
|
// /* 表现动画效果 */
|
// background: url(../assets/img/rays.png) 0 0 no-repeat;
|
// width: 70px;
|
// height: 70px;
|
// background-size: 100% 100%;
|
// -webkit-transform: rotate(360deg);
|
|
// animation: rotation 3s linear infinite;
|
|
// -moz-animation: rotation 3s linear infinite;
|
|
// -webkit-animation: rotation 3s linear infinite;
|
|
// -o-animation: rotation 3s linear infinite;
|
// }
|
// @-webkit-keyframes masked-animation {
|
// 0% {
|
// background-position: 0 0;
|
// }
|
// to {
|
// background-position: -100% 0;
|
// }
|
// }
|
|
#showtitle {
|
z-index: 30;
|
position: absolute;
|
top: 44%;
|
// left: 32%;
|
left: 33%;
|
display: none;
|
font-size: 150px;
|
span {
|
padding-left: 10px;
|
white-space: nowrap;
|
color: #f3cd1d;
|
font-weight: 600;
|
background-image: -webkit-linear-gradient(
|
left,
|
#cddc39,
|
#ff9800 25%,
|
#cddc39 50%,
|
#ff9800 75%,
|
#cddc39
|
);
|
-webkit-text-fill-color: transparent;
|
-webkit-background-clip: text;
|
-webkit-background-size: 200% 100%;
|
-webkit-animation: masked-animation 1s infinite linear;
|
}
|
}
|
|
#showxing {
|
z-index: 30;
|
top: 51%;
|
position: absolute;
|
left: 22%;
|
.xone {
|
margin-top: 24%;
|
margin-left: 20%;
|
}
|
.xtwo {
|
margin-top: -24%;
|
margin-left: 177%;
|
}
|
.xthree {
|
margin-top: -114%;
|
margin-left: 395%;
|
}
|
.xfour {
|
margin-top: -164%;
|
margin-left: 557%;
|
}
|
// #showTWO {
|
// position: absolute;
|
// z-index: 30;
|
// top: 57%;
|
// left: 37%;
|
// }
|
// #showTHREE {
|
// position: absolute;
|
// z-index: 30;
|
// top: 57%;
|
// left: 54%;
|
// }
|
// #showFOUR {
|
// position: absolute;
|
// z-index: 30;
|
// top: 53%;
|
// left: 68%;
|
// }
|
|
.startXY {
|
width: 150px;
|
height: 150px;
|
margin: 5%;
|
background: url("../assets/img/星星1.png") no-repeat center;
|
background-size: 100% 100%;
|
-webkit-transform: rotate(360deg);
|
|
animation: rotation 3s linear infinite;
|
|
-moz-animation: rotation 3s linear infinite;
|
|
-webkit-animation: rotation 3s linear infinite;
|
|
-o-animation: rotation 3s linear infinite;
|
}
|
}
|
|
.SHOWXING {
|
-webkit-animation-name: scaleXING;
|
-webkit-animation-timing-function: ease-in-out;
|
-webkit-animation-duration: 1s;
|
}
|
@keyframes scaleXING {
|
0% {
|
transform: scale(11);
|
}
|
10% {
|
transform: scale(10);
|
}
|
20% {
|
transform: scale(9);
|
}
|
30% {
|
transform: scale(8);
|
}
|
|
40% {
|
transform: scale(7);
|
}
|
50% {
|
transform: scale(6);
|
}
|
60% {
|
transform: scale(5);
|
}
|
70% {
|
transform: scale(4);
|
}
|
80% {
|
transform: scale(3);
|
}
|
90% {
|
transform: scale(2);
|
}
|
100% {
|
transform: scale(1);
|
}
|
}
|
.showtext {
|
color: #f3cd1d;
|
background-image: -webkit-linear-gradient(
|
left,
|
#cddc39,
|
#ff9800 25%,
|
#cddc39 50%,
|
#ff9800 75%,
|
#cddc39
|
);
|
-webkit-text-fill-color: transparent;
|
-webkit-background-clip: text;
|
-webkit-background-size: 200% 100%;
|
-webkit-animation: masked-animation 2s infinite linear;
|
}
|
.showTitles {
|
font-size: 80px;
|
position: relative;
|
left: 15%;
|
margin-top: 74%;
|
display: flex;
|
color: white;
|
float: left;
|
width: auto;
|
z-index: 30;
|
font-weight: bold;
|
}
|
.bUtonadaLij {
|
-webkit-animation-name: scaleDraw;
|
-webkit-animation-timing-function: ease-in-out;
|
/* -webkit-animation-iteration-count: infinite; */
|
-webkit-animation-duration: 1s;
|
}
|
@keyframes scaleDraw {
|
0% {
|
transform: scale(2);
|
}
|
|
10% {
|
transform: scale(1.9);
|
}
|
|
20% {
|
transform: scale(1.8);
|
}
|
|
30% {
|
transform: scale(1.7);
|
}
|
50% {
|
transform: scale(1.6);
|
}
|
60% {
|
transform: scale(1.5);
|
}
|
70% {
|
transform: scale(1.4);
|
}
|
80% {
|
transform: scale(1.3);
|
}
|
90% {
|
transform: scale(1.2);
|
}
|
100% {
|
transform: scale(1);
|
}
|
}
|
.el-header {
|
width: 100%;
|
position: absolute;
|
left: 0;
|
top: 0;
|
height: 316px !important;
|
z-index: 100;
|
padding: 0;
|
|
.nav {
|
height: 100%;
|
background: url("../assets/img/流光标题背景-x.png") no-repeat center;
|
background-size: 100% 100%;
|
display: flex;
|
position: relative;
|
box-sizing: border-box;
|
.time_box {
|
color: #83c0f9;
|
padding-left: 186px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
.date {
|
font-size: 60px;
|
padding-top: 30px;
|
padding-right: 60px;
|
}
|
.bor {
|
width: 2px;
|
height: 96px;
|
background: #d7fffe;
|
}
|
.time {
|
font-size: 102px;
|
padding-left: 80px;
|
}
|
}
|
.tips {
|
margin-top: 98px;
|
width: 14%;
|
height: 160px;
|
background: url("../assets/img/zonlan(29).png") no-repeat center;
|
background-size: 100% 100%;
|
margin-left: 700px;
|
.seamless-warp {
|
height: 100%;
|
overflow: hidden;
|
}
|
p {
|
padding-left: 200px;
|
font-size: 62px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #ff4302;
|
line-height: 160px;
|
}
|
}
|
.stars_box {
|
display: flex;
|
position: absolute;
|
left: 50%;
|
transform: translateX(-50%);
|
bottom: 20px;
|
@-webkit-keyframes rotation {
|
from {
|
-webkit-transform: rotate(0deg);
|
}
|
|
to {
|
-webkit-transform: rotate(360deg);
|
}
|
}
|
|
.strars {
|
width: 70px;
|
height: 70px;
|
background: url("../assets/img/星星1.png") no-repeat center;
|
background-size: 100% 100%;
|
-webkit-transform: rotate(360deg);
|
|
animation: rotation 3s linear infinite;
|
|
-moz-animation: rotation 3s linear infinite;
|
|
-webkit-animation: rotation 3s linear infinite;
|
|
-o-animation: rotation 3s linear infinite;
|
}
|
@-webkit-keyframes masked-animation {
|
0% {
|
background-position: 0 0;
|
}
|
to {
|
background-position: -100% 0;
|
}
|
}
|
p {
|
padding-left: 10px;
|
white-space: nowrap;
|
font-size: 50px;
|
color: #f3cd1d;
|
font-weight: 600;
|
|
background-image: -webkit-linear-gradient(
|
left,
|
#cddc39,
|
#ff9800 25%,
|
#cddc39 50%,
|
#ff9800 75%,
|
#cddc39
|
);
|
-webkit-text-fill-color: transparent;
|
-webkit-background-clip: text;
|
-webkit-background-size: 200% 100%;
|
-webkit-animation: masked-animation 2s infinite linear;
|
}
|
}
|
.btn_box {
|
// width: 4205px;
|
margin-top: 98px;
|
position: relative;
|
margin-left: 3020px;
|
|
.btn {
|
z-index: 100;
|
position: absolute;
|
width: 610px;
|
height: 118px;
|
background: url("../assets/img/zonlan(7).png") no-repeat center;
|
background-size: 100% 100%;
|
color: #fff;
|
font-size: 66px;
|
font-family: Reeji-CloudYuanZhun-GBK;
|
font-weight: 800;
|
color: #ffffff;
|
line-height: 118px;
|
text-align: center;
|
left: 0;
|
top: 0;
|
cursor: pointer;
|
}
|
.click_box {
|
width: 1600px;
|
height: 120%;
|
position: absolute;
|
// background: red;
|
left: 1990px;
|
top: -75px;
|
}
|
|
.btn:nth-child(2) {
|
left: 586px;
|
}
|
.btn:nth-child(3) {
|
left: 1172px;
|
background: url("../assets/img/zonlan(8).png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.btn:nth-child(4) {
|
left: 3740px;
|
background: url("../assets/img/zonlan(5).png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.btn:nth-child(5) {
|
left: 4316px;
|
background: url("../assets/img/zonlan(6).png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.btn:nth-child(6) {
|
left: 4902px;
|
background: url("../assets/img/zonlan(6).png") no-repeat center;
|
background-size: 100% 100%;
|
position: relative;
|
.drop_down {
|
display: none;
|
width: 498px;
|
height: 418px;
|
background: url("../assets/img/矩形 32 拷贝 10.png") no-repeat center;
|
background-size: 100% 100%;
|
position: absolute;
|
top: 118px;
|
left: 50%;
|
transform: translateX(-50%);
|
z-index: 100;
|
li {
|
height: 126px;
|
text-align: center;
|
line-height: 150px;
|
padding: 0 15px;
|
box-sizing: border-box;
|
position: relative;
|
font-size: 65px;
|
|
.bg {
|
width: 100%;
|
height: 4px;
|
background: url("../assets/img/矩形 880 拷贝.png") no-repeat
|
center;
|
background-size: 100% 100%;
|
position: absolute;
|
left: 50%;
|
bottom: 0;
|
transform: translateX(-50%);
|
}
|
}
|
li:hover {
|
color: #ffff00;
|
}
|
.drop_down_active {
|
color: #ffff00;
|
}
|
}
|
}
|
.btn:nth-child(7) {
|
left: 5488px;
|
background: url("../assets/img/zonlan(6).png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.btn:nth-child(8) {
|
left: 6074px;
|
background: url("../assets/img/zonlan(6).png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.btn:nth-child(9) {
|
left: 6660px;
|
background: url("../assets/img/zonlan(6).png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.btn:hover {
|
background: url("../assets/img/zonlan (12).png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.btn:nth-child(3):hover {
|
background: url("../assets/img/zonlan (13).png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.btn:nth-child(4):hover {
|
background: url("../assets/img/zonlan (10).png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.btn:nth-child(5):hover {
|
background: url("../assets/img/zonlan (11).png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.btn:nth-child(6):hover {
|
background: url("../assets/img/zonlan (11).png") no-repeat center;
|
background-size: 100% 100%;
|
.drop_down {
|
display: block;
|
}
|
}
|
.btn:nth-child(7):hover {
|
background: url("../assets/img/zonlan (11).png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.btn:nth-child(8):hover {
|
background: url("../assets/img/zonlan (11).png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.btn:nth-child(9):hover {
|
background: url("../assets/img/zonlan (11).png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.active1 {
|
background: url("../assets/img/zonlan (12).png") no-repeat center !important;
|
background-size: 100% 100% !important;
|
}
|
.active2 {
|
background: url("../assets/img/zonlan (13).png") no-repeat center !important;
|
background-size: 100% 100% !important;
|
}
|
.active3 {
|
background: url("../assets/img/zonlan (10).png") no-repeat center !important;
|
background-size: 100% 100% !important;
|
}
|
.active4 {
|
background: url("../assets/img/zonlan (11).png") no-repeat center !important;
|
background-size: 100% 100% !important;
|
}
|
}
|
.dropdown {
|
cursor: pointer;
|
color: #fff;
|
// font-size: 66px;
|
position: absolute;
|
right: 13.5%;
|
top: 38%;
|
display: inline-block;
|
width: 2.2%;
|
height: 48%;
|
background: url("../assets/img/矩形 32 拷贝 4.png") no-repeat center;
|
background-size: 100% 100%;
|
padding: 24px;
|
box-sizing: border-box;
|
i {
|
display: inline-block;
|
width: 100%;
|
height: 100%;
|
background: url("../assets/img/菜单.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.dropText {
|
font-size: 62px;
|
}
|
.dropdown-menu {
|
display: none;
|
position: absolute;
|
top: 120px;
|
left: 0;
|
width: 649px !important;
|
height: auto !important;
|
background: url("../assets/img/矩形 32 拷贝 11.png") no-repeat center !important;
|
background-size: 100% 100% !important;
|
box-sizing: border-box;
|
padding: 50px;
|
.dropdown-item {
|
color: #fff !important;
|
font-size: 38px;
|
padding-top: 20px;
|
padding-bottom: 20px;
|
}
|
.dropdown-item a:hover {
|
background-color: transparent !important;
|
color: #ffff00 !important;
|
}
|
}
|
}
|
.dropdown:hover .dropdown-menu {
|
display: block;
|
}
|
.weather_box {
|
margin-left: auto;
|
margin-right: 358px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
display: none;
|
|
.weather {
|
display: flex;
|
img {
|
width: 146px;
|
}
|
p {
|
margin-left: 80px;
|
color: #83c0f9;
|
font-size: 56px;
|
padding-bottom: 20px;
|
}
|
}
|
.bor {
|
margin-left: 80px;
|
width: 2px;
|
height: 96px;
|
background: #d7fffe;
|
}
|
.temperature {
|
margin-left: 80px;
|
font-size: 102px;
|
color: #83c0f9;
|
}
|
}
|
}
|
}
|
.el-main {
|
padding: 0;
|
// height: 100%;
|
}
|
|
@media screen and (max-width: 2560px) {
|
.modal {
|
top: 25%;
|
}
|
.showTitles {
|
position: relative;
|
left: 12%;
|
margin-top: 74%;
|
display: flex;
|
color: white;
|
float: left;
|
width: auto;
|
z-index: 30;
|
font-weight: bold;
|
}
|
.el-header {
|
height: 400px !important;
|
.nav {
|
// padding-top: 150px;
|
background-size: 153% 100%;
|
.tips {
|
margin-left: 600px;
|
}
|
.btn_box {
|
margin-left: 18%;
|
.btn:nth-child(4) {
|
left: 4600px;
|
}
|
|
.btn:nth-child(5) {
|
left: 5200px;
|
}
|
.btn:nth-child(6) {
|
left: 5750px;
|
}
|
}
|
.dropdown {
|
width: 10%;
|
text-align: center;
|
top: 24%;
|
right: 11%;
|
.dropText {
|
font-size: 62px;
|
}
|
.dropdown-menu {
|
width: 100% !important;
|
top: 100%;
|
}
|
}
|
|
.stars_box {
|
.strars {
|
margin-top: 1%;
|
}
|
p {
|
font-size: 1px !important;
|
}
|
}
|
}
|
}
|
.el-main {
|
height: 100% !important;
|
}
|
}
|
</style>
|
