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>
<div class="login" :style="'background-image:url(' + Background + ');'">
<div class="topTitle" >
<div class="floating-text">
中和地信有限公司欢迎您！
<div class="topTitle" :style="'background-image:url(' + Title + ');'">
中和地信应急平台
</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 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
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>
</ul>
</div>
</div>
<div class="bottomTitle">@中和地信有限公司</div>
</div>
</template>
<script>
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 menuApi from '@/api/system/menu.js'
import menuApi from "@/api/system/menu.js";
export default {
name: "Login",
data() {
......@@ -36,11 +52,13 @@ export default {
show: false,
userStyle: null,
Background: Background,
Welcome,
Title,
codeUrl: "",
cookiePass: "",
loading: false,
redirect: undefined,
dataList: []
dataList: [],
};
},
computed: {
......@@ -63,8 +81,6 @@ export default {
},
},
created() {
// // 按照不同域名加载不同页面样式（企业、应急局），加载完毕后再显示页面
// const host = window.location.host;
// if (host === "yingji.longxijiancai.com") {
......@@ -73,34 +89,32 @@ export default {
// if (host === "qiye.longxijiancai.com") {
// this.userStyle = "企业";
// }
menuApi.getMenusHome().then((res)=>{
this.dataList = res.body
})
menuApi.getMenusHome().then((res) => {
this.dataList = res.body;
});
},
methods: {
navTo(type) {
var host = location.protocol + '//' + window.location.host;
var host = location.protocol + "//" + window.location.host;
if (type === "admin") {
// this.$router.push({ path: "home4Center" });
this.$router.push({ path: "/user/center" });
}else if(type === "应急管理"){
} 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 = 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 = 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 === "电子档案馆"){
location.href = host + "/datav/watersource.html";
} else if (type === "电子档案馆") {
// this.$router.push({ path: "home4Center" });
this.$router.push({ path: "/user/center" });
}
},
},
......@@ -108,40 +122,75 @@ export default {
</script>
<style rel="stylesheet/scss" lang="scss">
@keyframes floatShadow {
0% {
transform:translateX(1300px);
display:block;
transform: translateX(1300px);
display: block;
}
100% {
transform:translateX(-1300px);
display:none;
transform: translateX(-1300px);
display: none;
}
}
.floating-text {
font-size:18px;line-height:1;
color: #FDD756;text-shadow: 0 0 5px #fff;
font-size: 18px;
line-height: 1;
color: #fdd756;
text-shadow: 0 0 5px #fff;
animation: floatShadow;
animation-name:floatShadow;
animation-name: floatShadow;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function:linear;
position:absolute;top:8px;
animation-timing-function: linear;
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 {
position: absolute;
top: 0;
background: #15181a73;
height: 32px;
width: 100%;
line-height: 32px;
color: #fff;
text-align: center;
background-size: cover;
height: 100px;
font-size: 38px;
line-height: 100px;
font-weight: bold;
letter-spacing: 5px;
}
.bottomTitle {
position: absolute;
......@@ -170,14 +219,16 @@ export default {
}
ul {
list-style: none;
width: 900px;
// width: 1200px;
overflow: hidden;
}
li {
display: flex;
justify-content: center;
float: left;
width: 400px;
background: #173e67;
height: 170px;
width: 304px;
// background: #173e67;
height: 620px;
line-height: 170px;
text-align: center;
color: #fff;
......@@ -186,13 +237,38 @@ export default {
margin: 10px;
cursor: pointer;
&:nth-child(1) {
background: #135965;
// background: #135965;
}
&: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 {
position: relative;
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