|
@@ -0,0 +1,266 @@
|
|
|
+<template>
|
|
|
+ <div class="navbar">
|
|
|
+ <div class="titleDiv">
|
|
|
+ <img class="logclass" src="../../assets/images/logo.jpg" @click="goto('index')">
|
|
|
+ <div class="name">
|
|
|
+ <span>生产力平台</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="meunsDiv">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6"><div class="meuns"><span class="menu-text"
|
|
|
+ @mouseenter="showMenuCard(0)" @mouseleave="hiddenMenuCard(0)" @click="goto('major')">房地产报告</span></div></el-col>
|
|
|
+ <el-col :span="6"><div class="meuns"><span class="menu-text"
|
|
|
+ @mouseenter="showMenuCard(1)" @mouseleave="hiddenMenuCard(1)" @click="goto('assets')">资产报告</span></div></el-col>
|
|
|
+ <el-col :span="6"><div class="meuns"><span class="menu-text"
|
|
|
+ @mouseenter="showMenuCard(2)" @mouseleave="hiddenMenuCard(2)" @click="goto('planning')">土地报告</span></div></el-col>
|
|
|
+ <!-- <el-col :span="6"><div class="meuns"><span class="menu-text"
|
|
|
+ @mouseenter="showMenuCard(3)" @mouseleave="hiddenMenuCard(3)" @click="goto('personal')">个贷业务</span></div></el-col> -->
|
|
|
+ </el-row>
|
|
|
+ <el-card class='major-card' v-show="majorCardShow" @mouseenter="inCard(0)" @mouseleave="outCard(0)">
|
|
|
+ <template #header>
|
|
|
+ <div class="card-header">
|
|
|
+ <span>大中型</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
|
|
|
+ </el-card>
|
|
|
+ <el-card class='assets-card' v-show="assetsCardShow" @mouseenter="inCard(1)" @mouseleave="outCard(1)">
|
|
|
+ <template #header>
|
|
|
+ <div class="card-header">
|
|
|
+ <span>资产</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
|
|
|
+ </el-card>
|
|
|
+ <el-card class='planning-card' v-show="planningCardShow" @mouseenter="inCard(2)" @mouseleave="outCard(2)">
|
|
|
+ <template #header>
|
|
|
+ <div class="card-header">
|
|
|
+ <span>土地规划</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
|
|
|
+ </el-card>
|
|
|
+ <el-card class='personal-card' v-show="personalCardShow" @mouseenter="inCard(3)" @mouseleave="outCard(3)">
|
|
|
+ <template #header>
|
|
|
+ <div class="card-header">
|
|
|
+ <span>个贷</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <div class="btnDiv">
|
|
|
+ <el-button class="btn" size="large" color="#ff6154"> 登 录 </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <script>
|
|
|
+
|
|
|
+ export default {
|
|
|
+
|
|
|
+ props: {
|
|
|
+
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ majorCardShow:false,
|
|
|
+ assetsCardShow:false,
|
|
|
+ planningCardShow:false,
|
|
|
+ personalCardShow:false,
|
|
|
+ inMajor:false,
|
|
|
+ inAssets:false,
|
|
|
+ inPlanning:false,
|
|
|
+ inPersonal:false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ async logout() {
|
|
|
+ await this.$store.dispatch('user/logout');
|
|
|
+ // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
|
|
|
+ this.$router.push(`/login`);
|
|
|
+ },
|
|
|
+ showMenuCard(index){
|
|
|
+ if (index===0){
|
|
|
+ this.majorCardShow = true;
|
|
|
+ }
|
|
|
+ if (index===1){
|
|
|
+ this.assetsCardShow = true;
|
|
|
+ }
|
|
|
+ if (index===2){
|
|
|
+ this.planningCardShow = true;
|
|
|
+ }
|
|
|
+ if (index===3){
|
|
|
+ this.personalCardShow = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ hiddenMenuCard(index){
|
|
|
+ setTimeout(() => {
|
|
|
+ if (index===0 && !this.inMajor){
|
|
|
+ this.majorCardShow = false;
|
|
|
+ }
|
|
|
+ if (index===1 && !this.inAssets){
|
|
|
+ this.assetsCardShow = false;
|
|
|
+ }
|
|
|
+ if (index===2 && !this.inPlanning){
|
|
|
+ this.planningCardShow = false;
|
|
|
+ }
|
|
|
+ if (index===3 && !this.inPersonal){
|
|
|
+ this.personalCardShow = false;
|
|
|
+ }
|
|
|
+ }, 50);
|
|
|
+
|
|
|
+ },
|
|
|
+ inCard(index){
|
|
|
+ if (index===0){
|
|
|
+ this.inMajor=true;
|
|
|
+ this.majorCardShow = true;
|
|
|
+ }
|
|
|
+ if (index===1){
|
|
|
+ this.inAssets=true;
|
|
|
+ this.assetsCardShow = true;
|
|
|
+ }
|
|
|
+ if (index===2){
|
|
|
+ this.inPlanning=true;
|
|
|
+ this.planningCardShow = true;
|
|
|
+ }
|
|
|
+ if (index===3){
|
|
|
+ this.inPersonal=true;
|
|
|
+ this.personalCardShow = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ outCard(index){
|
|
|
+ if (index===0){
|
|
|
+ this.inMajor = false;
|
|
|
+ this.majorCardShow = false;
|
|
|
+ }
|
|
|
+ if (index===1){
|
|
|
+ this.inAssets = false;
|
|
|
+ this.assetsCardShow = false;
|
|
|
+ }
|
|
|
+ if (index===2){
|
|
|
+ this.inPlanning = false;
|
|
|
+ this.planningCardShow = false;
|
|
|
+ }
|
|
|
+ if (index===3){
|
|
|
+ this.inPersonal = false;
|
|
|
+ this.personalCardShow = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ goto(path){
|
|
|
+ this.$router.push(`/home/${path}`)
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style scoped>
|
|
|
+ .navbar {
|
|
|
+ height: 80px;
|
|
|
+ position: relative;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-bottom: 1px #d7d7d7 solid;
|
|
|
+ /* box-shadow: 0px 2px 5px 0px rgba(153, 153, 153, 0.15); */
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+.logclass {
|
|
|
+ float: left;
|
|
|
+ height: 50px;
|
|
|
+ margin-top: 15px;
|
|
|
+ margin-left: 30px;
|
|
|
+ /* -webkit-clip-path: inset(0px 0px 0px 50px); */
|
|
|
+}
|
|
|
+.logclass:hover{
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.titleDiv {
|
|
|
+ width: 37.5%;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+.meunsDiv{
|
|
|
+ width: 25%;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+.meuns{
|
|
|
+ font-size: 20px;
|
|
|
+ text-align: center;
|
|
|
+ height: 80px;
|
|
|
+ line-height: 80px;
|
|
|
+}
|
|
|
+.menu-text{
|
|
|
+ color: #4e5879;
|
|
|
+}
|
|
|
+.menu-text:hover{
|
|
|
+ color: #ff6154;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.btnDiv{
|
|
|
+ width: 37.5%;
|
|
|
+ height: 80px;
|
|
|
+ float: left;
|
|
|
+ line-height: 80px;
|
|
|
+ text-align: right;
|
|
|
+ color: #ffffff;
|
|
|
+ padding-right: 30px;
|
|
|
+}
|
|
|
+.btn{
|
|
|
+ color: #ffffff;
|
|
|
+ width: 100px;
|
|
|
+ height: 50px;
|
|
|
+ font-size: 15px;
|
|
|
+}
|
|
|
+.btn:hover{
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.name{
|
|
|
+ float: left;
|
|
|
+ color:black;
|
|
|
+ font-size:25px;
|
|
|
+ font-weight: bolder;
|
|
|
+ height: 80px;
|
|
|
+ line-height: 66px;
|
|
|
+ animation:focus-in-expand 1s cubic-bezier(.25,.46,.45,.94) both
|
|
|
+}
|
|
|
+@keyframes focus-in-expand{0%{letter-spacing:-.5em;filter:blur(12px);opacity:0}100%{filter:blur(0);opacity:1}}
|
|
|
+
|
|
|
+.major-card{
|
|
|
+ position:absolute;
|
|
|
+ top: 80px;
|
|
|
+ width: 480px;
|
|
|
+ border-radius: 10px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+.assets-card{
|
|
|
+ position:absolute;
|
|
|
+ top: 80px;
|
|
|
+ left: 840px;
|
|
|
+ width: 480px;
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+.planning-card{
|
|
|
+ position:absolute;
|
|
|
+ top: 80px;
|
|
|
+ left: 965px;
|
|
|
+ width: 480px;
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+.personal-card{
|
|
|
+ position:absolute;
|
|
|
+ top: 80px;
|
|
|
+ left: 1090px;
|
|
|
+ width: 480px;
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+ </style>
|
|
|
+
|