Skip to content

Z
ZiBoYingJI
Commit 6f67f489 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

中间页开发

parent 24bb4d62
Show whitespace changes
Inline Side-by-side
Showing with 334 additions and 54 deletions
src/assets/home4Index/bg.png 0 → 100644
View file @ 6f67f489
This diff is collapsed.
src/assets/home4Index/title.png 0 → 100644
View file @ 6f67f489
This diff is collapsed.
src/views/home4Index - 副本.vue 0 → 100644
View file @ 6f67f489
<template>
<div class="login" :style="'background-image:url(' + Background + ');'">
<div class="topTitle" >
<div class="floating-text">
中和地信有限公司欢迎您！
</div>
</div>
<div class="bottomTitle">@中和地信有限公司</div>
<div class="wrapper">
<div class="header">
<h2 @click="navTo('admin')"><i class="el-icon-setting"></i>管理后台</h2>
</div>
<div class="title">
<h1>中和地信应急平台</h1>
</div>
<div class="content">
<ul>
<li v-for="(item, index) in dataList" :key="index" @click="navTo(item.label)">
{{ item.label }}
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import qs from "qs";
import Background from "@/assets/images/background.webp";
import { mapGetters } from "vuex";
import menuApi from '@/api/system/menu.js'
export default {
name: "Login",
data() {
return {
show: false,
userStyle: null,
Background: Background,
codeUrl: "",
cookiePass: "",
loading: false,
redirect: undefined,
dataList: []
};
},
computed: {
...mapGetters(["user"]),
},
watch: {
$route: {
handler: function (route) {
const data = route.query;
if (data && data.redirect) {
this.redirect = data.redirect;
delete data.redirect;
if (JSON.stringify(data) !== "{}") {
this.redirect =
this.redirect + "&" + qs.stringify(data, { indices: false });
}
}
},
immediate: true,
},
},
created() {
// // 按照不同域名加载不同页面样式（企业、应急局），加载完毕后再显示页面
// const host = window.location.host;
// if (host === "yingji.longxijiancai.com") {
// this.userStyle = "应急局";
// }
// if (host === "qiye.longxijiancai.com") {
// this.userStyle = "企业";
// }
menuApi.getMenusHome().then((res)=>{
this.dataList = res.body
})
},
methods: {
navTo(type) {
var host = location.protocol + '//' + window.location.host;
if (type === "admin") {
// this.$router.push({ path: "home4Center" });
this.$router.push({ path: "/user/center" });
}else if(type === "应急管理"){
// this.$router.push({ path: "home4Center" });
// this.$router.push({ path: "/user/center" });
// location.href = 'http://192.168.3.226:8057/datav/index.html'
location.href = host + '/datav/index.html'
}else if(type === "自然资源"){
// location.href = process.env.NODE_ENV + ''
// location.href = 'http://192.168.3.226:8057/datav/natural.html'
location.href = host + '/datav/natural.html'
}else if(type === "水利系统"){
// location.href = 'http://192.168.3.226:8057/datav/watersource.html'
location.href = host + '/datav/watersource.html'
}else if(type === "电子档案馆"){
// this.$router.push({ path: "home4Center" });
this.$router.push({ path: "/user/center" });
}
},
},
};
</script>
<style rel="stylesheet/scss" lang="scss">
@keyframes floatShadow {
0% {
transform:translateX(1300px);
display:block;
}
100% {
transform:translateX(-1300px);
display:none;
}
}
.floating-text {
font-size:18px;line-height:1;
color: #FDD756;text-shadow: 0 0 5px #fff;
animation: floatShadow;
animation-name:floatShadow;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function:linear;
position:absolute;top:8px;
}
.topTitle {
position: absolute;
top: 0;
background: #15181a73;
height: 32px;
width: 100%;
line-height: 32px;
color: #fff;
text-align: center;
}
.bottomTitle {
position: absolute;
bottom: 0;
background: #021d39;
height: 32px;
width: 100%;
line-height: 32px;
color: #fff;
text-align: center;
}
.wrapper {
.header {
h2 {
color: #00346b;
text-align: right;
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
}
h1 {
text-align: center;
color: #00346b;
}
ul {
list-style: none;
width: 900px;
overflow: hidden;
}
li {
float: left;
width: 400px;
background: #173e67;
height: 170px;
line-height: 170px;
text-align: center;
color: #fff;
font-size: 28px;
font-weight: bold;
margin: 10px;
cursor: pointer;
&:nth-child(1) {
background: #135965;
}
&:nth-child(4) {
background: #135965;
}
}
}
.login {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-size: cover;
}
</style>
src/views/home4Index.vue
View file @ 6f67f489
<template> <template>
<div class="login" :style="'background-image:url(' + Background + ');'"> <div class="login" :style="'background-image:url(' + Background + ');'">
<div class="topTitle" > <div class="topTitle" :style="'background-image:url(' + Title + ');'">
<div class="floating-text"> 中和地信应急平台
中和地信有限公司欢迎您！
</div> </div>
<div class="subTopTitle">
<h2
@click="navTo('admin')"
:style="'background-image:url(' + Welcome + ');'"
>
<img src="@/assets/home4Index/icon5.png" />中和地信有限公司欢迎您！
</h2>
<h2 @click="navTo('admin')">
<img src="@/assets/home4Index/icon6.png" />管理后台
</h2>
</div> </div>
<div class="bottomTitle">@中和地信有限公司</div>
<div class="wrapper"> <div class="wrapper">
<div class="header">
<h2 @click="navTo('admin')"><i class="el-icon-setting"></i>管理后台</h2>
</div>
<div class="title">
<h1>中和地信应急平台</h1>
</div>
<div class="content"> <div class="content">
<ul> <ul>
<li v-for="(item, index) in dataList" :key="index" @click="navTo(item.label)"> <li
{{ item.label }} v-for="(item, index) in dataList"
:key="index"
@click="navTo(item.label)"
>
<div class="itemDiv">
<img :src="require(`@/assets/home4Index/icon${index+1}.png`)" alt="">
<p>
<span>{{ item.label }}</span>
<!-- <img src="" alt="" srcset="" /> -->
</p>
</div>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="bottomTitle">@中和地信有限公司</div>
</div> </div>
</template> </template>
<script> <script>
import qs from "qs"; import qs from "qs";
import Background from "@/assets/images/background.webp"; import Background from "@/assets/home4Index/bg.png";
import Title from "@/assets/home4Index/title.png";
import Welcome from "@/assets/home4Index/underline.png";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import menuApi from '@/api/system/menu.js' import menuApi from "@/api/system/menu.js";
export default { export default {
name: "Login", name: "Login",
data() { data() {
...@@ -36,11 +52,13 @@ export default { ...@@ -36,11 +52,13 @@ export default {
show: false, show: false,
userStyle: null, userStyle: null,
Background: Background, Background: Background,
Welcome,
Title,
codeUrl: "", codeUrl: "",
cookiePass: "", cookiePass: "",
loading: false, loading: false,
redirect: undefined, redirect: undefined,
dataList: [] dataList: [],
}; };
}, },
computed: { computed: {
...@@ -63,8 +81,6 @@ export default { ...@@ -63,8 +81,6 @@ export default {
}, },
}, },
created() { created() {
// // 按照不同域名加载不同页面样式（企业、应急局），加载完毕后再显示页面 // // 按照不同域名加载不同页面样式（企业、应急局），加载完毕后再显示页面
// const host = window.location.host; // const host = window.location.host;
// if (host === "yingji.longxijiancai.com") { // if (host === "yingji.longxijiancai.com") {
...@@ -73,34 +89,32 @@ export default { ...@@ -73,34 +89,32 @@ export default {
// if (host === "qiye.longxijiancai.com") { // if (host === "qiye.longxijiancai.com") {
// this.userStyle = "企业"; // this.userStyle = "企业";
// } // }
menuApi.getMenusHome().then((res)=>{ menuApi.getMenusHome().then((res) => {
this.dataList = res.body this.dataList = res.body;
}) });
}, },
methods: { methods: {
navTo(type) { navTo(type) {
var host = location.protocol + '//' + window.location.host; var host = location.protocol + "//" + window.location.host;
if (type === "admin") { if (type === "admin") {
// this.$router.push({ path: "home4Center" }); // this.$router.push({ path: "home4Center" });
this.$router.push({ path: "/user/center" }); this.$router.push({ path: "/user/center" });
} else if (type === "应急管理") {
}else if(type === "应急管理"){
// this.$router.push({ path: "home4Center" }); // this.$router.push({ path: "home4Center" });
// this.$router.push({ path: "/user/center" }); // this.$router.push({ path: "/user/center" });
// location.href = 'http://192.168.3.226:8057/datav/index.html' // location.href = 'http://192.168.3.226:8057/datav/index.html'
location.href = host + '/datav/index.html' location.href = host + "/datav/index.html";
}else if(type === "自然资源"){ } else if (type === "自然资源") {
// location.href = process.env.NODE_ENV + '' // location.href = process.env.NODE_ENV + ''
// location.href = 'http://192.168.3.226:8057/datav/natural.html' // location.href = 'http://192.168.3.226:8057/datav/natural.html'
location.href = host + '/datav/natural.html' location.href = host + "/datav/natural.html";
}else if(type === "水利系统"){ } else if (type === "水利系统") {
// location.href = 'http://192.168.3.226:8057/datav/watersource.html' // location.href = 'http://192.168.3.226:8057/datav/watersource.html'
location.href = host + '/datav/watersource.html' location.href = host + "/datav/watersource.html";
}else if(type === "电子档案馆"){ } else if (type === "电子档案馆") {
// this.$router.push({ path: "home4Center" }); // this.$router.push({ path: "home4Center" });
this.$router.push({ path: "/user/center" }); this.$router.push({ path: "/user/center" });
} }
}, },
}, },
...@@ -108,40 +122,75 @@ export default { ...@@ -108,40 +122,75 @@ export default {
</script> </script>
<style rel="stylesheet/scss" lang="scss"> <style rel="stylesheet/scss" lang="scss">
@keyframes floatShadow { @keyframes floatShadow {
0% { 0% {
transform:translateX(1300px); transform: translateX(1300px);
display:block; display: block;
} }
100% { 100% {
transform:translateX(-1300px); transform: translateX(-1300px);
display:none; display: none;
} }
} }
.floating-text { .floating-text {
font-size:18px;line-height:1; font-size: 18px;
color: #FDD756;text-shadow: 0 0 5px #fff; line-height: 1;
color: #fdd756;
text-shadow: 0 0 5px #fff;
animation: floatShadow; animation: floatShadow;
animation-name:floatShadow; animation-name: floatShadow;
animation-duration: 20s; animation-duration: 20s;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-timing-function:linear; animation-timing-function: linear;
position:absolute;top:8px; position: absolute;
top: 8px;
} }
.subTopTitle {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-between;
position: absolute;
top: 10px;
width: 100%;
/* z-index: 99999; */
height: 110px;
color: #fff;
font-size: 12px;
padding: 10px 43px;
align-items: center;
h2 {
display: inline-block;
vertical-align: middle;
letter-spacing: 2px;
font-weight: 600;
color: #fdfdfd;
&:first-child {
height: 50px;
background-repeat: no-repeat;
background-position-y: 30px;
}
}
img {
vertical-align: middle;
margin-right: 10px;
}
}
.topTitle { .topTitle {
position: absolute; position: absolute;
top: 0; top: 0;
background: #15181a73;
height: 32px;
width: 100%; width: 100%;
line-height: 32px;
color: #fff; color: #fff;
text-align: center; text-align: center;
background-size: cover;
height: 100px;
font-size: 38px;
line-height: 100px;
font-weight: bold;
letter-spacing: 5px;
} }
.bottomTitle { .bottomTitle {
position: absolute; position: absolute;
...@@ -170,14 +219,16 @@ export default { ...@@ -170,14 +219,16 @@ export default {
} }
ul { ul {
list-style: none; list-style: none;
width: 900px; // width: 1200px;
overflow: hidden; overflow: hidden;
} }
li { li {
display: flex;
justify-content: center;
float: left; float: left;
width: 400px; width: 304px;
background: #173e67; // background: #173e67;
height: 170px; height: 620px;
line-height: 170px; line-height: 170px;
text-align: center; text-align: center;
color: #fff; color: #fff;
...@@ -186,13 +237,38 @@ export default { ...@@ -186,13 +237,38 @@ export default {
margin: 10px; margin: 10px;
cursor: pointer; cursor: pointer;
&:nth-child(1) { &:nth-child(1) {
background: #135965; // background: #135965;
} }
&:nth-child(4) { &:nth-child(4) {
background: #135965; // background: #135965;
}
&:hover {
background-image: url("../assets/home4Index/bg2.png");
}
background-image: url("../assets/home4Index/bg1.png");
background-repeat: no-repeat;
background-size: cover;
}
}
.itemDiv{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
img{
width: 120px;
margin-left: 30px;
}
p{
width: 180px;
margin-top: -10px;
span{
font-weight: 500;
letter-spacing: 3px;
} }
} }
} }
.login { .login {
position: relative; position: relative;
display: flex; display: flex;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment