dai
3 years ago
10 changed files with 694 additions and 299 deletions
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 9.5 KiB |
|
After Width: | Height: | Size: 8.3 KiB |
|
After Width: | Height: | Size: 128 KiB |
@ -0,0 +1,185 @@ |
|||
@import "~@/assets/scss/c/config.scss"; |
|||
@import "~@/assets/scss/c/function.scss"; |
|||
|
|||
.g-cnt { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background-image: url(~@/assets/img/yantai/index/bg.png); |
|||
background-size: cover; |
|||
background-position: center; |
|||
} |
|||
|
|||
.m-top { |
|||
position: absolute; |
|||
top: 0; |
|||
width: 1920px; |
|||
left: -1000px; |
|||
right: -1000px; |
|||
margin: 0 auto; |
|||
|
|||
.name { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
text-align: center; |
|||
width: 100%; |
|||
line-height: 90px; |
|||
font-size: 42px; |
|||
font-weight: bold; |
|||
color: #fff; |
|||
background-image: -webkit-linear-gradient(bottom, rgb(23, 222, 238), rgb(23, 222, 238), #fff, #fff); |
|||
background-clip: text; |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
} |
|||
} |
|||
|
|||
.m-list { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 0; |
|||
right: 0; |
|||
margin: auto; |
|||
transform: translateY(-50%); |
|||
|
|||
.list { |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
width: 100%; |
|||
margin: 0 auto; |
|||
|
|||
.menu { |
|||
position: relative; |
|||
|
|||
.menu-list { |
|||
position: absolute; |
|||
top: 50px; |
|||
width: 100%; |
|||
left: 0; |
|||
|
|||
.menu-item { |
|||
position: relative; |
|||
margin-bottom: 40px; |
|||
width: 150px; |
|||
height: 70px; |
|||
line-height: 70px; |
|||
color: rgba(#fff, 0.6); |
|||
font-size: 20px; |
|||
border-radius: 60px; |
|||
text-align: center; |
|||
transition: all 0.2s ease; |
|||
cursor: pointer; |
|||
|
|||
&.z-zuo { |
|||
left: 60px; |
|||
background: linear-gradient(to left, rgba(rgb(67, 67, 210), 0.3), rgba(#00a, 0)); |
|||
box-shadow: -4px 4px 6px 0 inset rgba(#fff, 0.2); |
|||
&:nth-child(2), |
|||
&:nth-child(6) { |
|||
margin-left: 20px; |
|||
} |
|||
&:nth-child(3), |
|||
&:nth-child(5) { |
|||
margin-left: 20px * 2; |
|||
} |
|||
&:nth-child(4) { |
|||
margin-left: 20px * 2 + 1px; |
|||
} |
|||
} |
|||
|
|||
&.z-you { |
|||
left: 70px; |
|||
background: linear-gradient(to right, rgba(rgb(67, 67, 210), 0.3), rgba(#00a, 0)); |
|||
box-shadow: 4px 4px 6px 0 inset rgba(#fff, 0.2); |
|||
|
|||
&:nth-child(2), |
|||
&:nth-child(6) { |
|||
margin-left: -20px; |
|||
} |
|||
&:nth-child(3), |
|||
&:nth-child(5) { |
|||
margin-left: -20px * 2; |
|||
} |
|||
&:nth-child(4) { |
|||
margin-left: -20px * 2 - 1px; |
|||
} |
|||
} |
|||
|
|||
&:hover, |
|||
&.z-on { |
|||
transform: scale(1.15); |
|||
color: rgba(#fff, 0.95); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.arrow { |
|||
width: 60px; |
|||
margin: 0 20px; |
|||
} |
|||
|
|||
.item { |
|||
position: relative; |
|||
margin: 0 50px; |
|||
width: 420px; |
|||
|
|||
.item-wrap { |
|||
text-align: center; |
|||
cursor: pointer; |
|||
transition: all 0.2s ease; |
|||
&:hover { |
|||
transform: scale(1.1); |
|||
} |
|||
} |
|||
|
|||
&.z-on { |
|||
.name { |
|||
color: #ffffff; |
|||
background-color: transparent; |
|||
border-color: #ffffff; |
|||
&::before { |
|||
background-color: #ffffff; |
|||
} |
|||
} |
|||
} |
|||
.logo { |
|||
width: 100%; |
|||
} |
|||
.name { |
|||
position: absolute; |
|||
top: 12%; |
|||
left: 0; |
|||
width: 100%; |
|||
font-size: 36px; |
|||
line-height: 40px; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.m-footer { |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
padding: 20px; |
|||
color: rgba(255, 255, 255, 0.6); |
|||
text-align: center; |
|||
p { |
|||
margin: 10px 0; |
|||
} |
|||
a { |
|||
padding: 0 5px; |
|||
color: rgba(255, 255, 255, 0.6); |
|||
&:focus, |
|||
&:hover { |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,209 @@ |
|||
<template> |
|||
<fixed1920> |
|||
<div class="g-cnt"> |
|||
<div class="m-top animate__animated menu animate__fadeInDown"> |
|||
<img class="logo" src="@/assets/img/yantai/index/db.png" /> |
|||
<div class="name">智慧社区平台</div> |
|||
</div> |
|||
|
|||
<div class="m-list"> |
|||
<div class="list"> |
|||
<div class="animate__animated menu animate__fadeInLeft"> |
|||
<img |
|||
class="menu-bg" |
|||
src="@/assets/img/yantai/index/yuanhu-you.png" |
|||
/> |
|||
<div class="menu-list"> |
|||
<div class="menu-item z-zuo" @click="toPage('/main/base-resi')"> |
|||
人房信息 |
|||
</div> |
|||
<div |
|||
class="menu-item z-zuo" |
|||
@click="toPage('/main/base-epidemic-antiInfo')" |
|||
> |
|||
疫情防控 |
|||
</div> |
|||
<div |
|||
class="menu-item z-zuo" |
|||
@click="toPage('/main/shequzhili-event-eventList')" |
|||
> |
|||
社区治理 |
|||
</div> |
|||
<div |
|||
class="menu-item z-zuo z-on" |
|||
@click="toPage('/main/communityParty-members-index')" |
|||
> |
|||
社区党建 |
|||
</div> |
|||
<div |
|||
class="menu-item z-zuo" |
|||
@click="toPage('/main/communityService-measure-index')" |
|||
> |
|||
社区服务 |
|||
</div> |
|||
<div class="menu-item z-zuo" @click="toPage('/main/workPc-guidance-guidanceList.vue')">便携工具</div> |
|||
<div class="menu-item z-zuo" @click="toPage('/main/workSys-mapConfig')">系统管理</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<img class="arrow" src="@/assets/img/yantai/index/zuo.png" /> |
|||
|
|||
<div |
|||
class="item animate__animated animate__pulse" |
|||
@click="handleClickItem(1)" |
|||
> |
|||
<div class="item-wrap"> |
|||
<img class="logo" src="@/assets/img/yantai/index/guanli.png" /> |
|||
<div class="name">管理平台</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div |
|||
class="item animate__animated animate__pulse" |
|||
@click="handleClickItem(2)" |
|||
> |
|||
<div class="item-wrap"> |
|||
<img class="logo" src="@/assets/img/yantai/index/shuju.png" /> |
|||
<div class="name">数据分析平台</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<img class="arrow" src="@/assets/img/yantai/index/you.png" /> |
|||
|
|||
<div class="menu animate__animated menu animate__fadeInRight"> |
|||
<img |
|||
class="menu-bg" |
|||
src="@/assets/img/yantai/index/yuanhu-zuo.png" |
|||
/> |
|||
<div class="menu-list"> |
|||
<div |
|||
class="menu-item z-you" |
|||
@click="toPage('/main-shuju/visual-basicinfo-basicInfoMain')" |
|||
> |
|||
基础信息 |
|||
</div> |
|||
<div |
|||
class="menu-item z-you" |
|||
@click="toPage('/main-shuju/visual-warning-index')" |
|||
> |
|||
人员预警 |
|||
</div> |
|||
<div |
|||
class="menu-item z-you" |
|||
@click="toPage('/main-shuju/visual-measure-service')" |
|||
> |
|||
需求清单 |
|||
</div> |
|||
<div |
|||
class="menu-item z-you z-on" |
|||
@click="toPage('/main-shuju/visual-communityParty-party')" |
|||
> |
|||
社区党建 |
|||
</div> |
|||
<div |
|||
class="menu-item z-you" |
|||
@click=" |
|||
toPage( |
|||
'/main-shuju/visual-communityGovern-shijianchuli-shijianchulifenxi' |
|||
) |
|||
" |
|||
> |
|||
社区治理 |
|||
</div> |
|||
<div |
|||
class="menu-item z-you" |
|||
@click="toPage('/main-shuju/visual-heart-index')" |
|||
> |
|||
初心互助 |
|||
</div> |
|||
<div class="menu-item z-you" @click="toPage('/main-shuju/i-1536625421829599234')"> |
|||
三维展示 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="m-footer"> |
|||
<div class="login-footer"> |
|||
<p> |
|||
<!-- <a href="http://www.elinkchina.com.cn/" target="_blank">{{ |
|||
$t("login.copyright") |
|||
}}</a> --> |
|||
</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</fixed1920> |
|||
</template> |
|||
<script> |
|||
import { messages } from "@/i18n"; |
|||
import fixed1920 from "@/views/components/fixed1920.vue"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
pubKey: null, // 获取到公钥 |
|||
isShowLogin: true, |
|||
i18nMessages: messages, |
|||
}; |
|||
}, |
|||
|
|||
components: { fixed1920 }, |
|||
computed: { |
|||
bdStyle() { |
|||
console.log("clientHeight", document.documentElement.clientHeight); |
|||
const scale = document.documentElement.clientWidth / 1920; |
|||
const height = document.documentElement.clientHeight / scale; |
|||
const top = (document.documentElement.clientHeight - height) / 2; |
|||
const left = (document.documentElement.clientWidth - 1920) / 2; |
|||
return { |
|||
transform: `scale(${scale})`, |
|||
height: `${height}px`, |
|||
left: `${left}px`, |
|||
top: `${top}px`, |
|||
}; |
|||
}, |
|||
}, |
|||
created() {}, |
|||
mounted() {}, |
|||
|
|||
methods: { |
|||
handleClickItem(k) { |
|||
if (k == 1) { |
|||
this.$router.replace({ name: "main" }); |
|||
} else if (k == 2) { |
|||
this.$router.replace({ name: "main-shuju" }); |
|||
} |
|||
}, |
|||
|
|||
toPage(path) { |
|||
this.$router.push({ path }); |
|||
}, |
|||
|
|||
// 平阴联动 自动登录接口 |
|||
getAutoLogin(platformToken) { |
|||
this.dataForm.thirdToken = platformToken; |
|||
this.dataForm.platform = "pyld"; |
|||
this.$http |
|||
.post(`/auth/sso/oper/third/login`, this.dataForm) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
if (res.code == 8302) { |
|||
return this.$message.error(res.msg); |
|||
} |
|||
return this.$message.error(res.msg); |
|||
} |
|||
localStorage.setItem("customerId", res.data.customerId); |
|||
localStorage.setItem("userType", "work"); |
|||
localStorage.setItem("showHeader", "0"); |
|||
localStorage.setItem("token", res.data.token); |
|||
this.$router.replace({ name: "home" }); |
|||
}) |
|||
.catch(() => {}); |
|||
// epmet-ext9.elinkservice.cn/platform-admin |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/pages/yantai-index.scss" scoped></style> |
|||
Loading…
Reference in new issue