|
|
@@ -1,72 +1,60 @@
|
|
|
<template>
|
|
|
- <el-container style="border: 1px solid #eee">
|
|
|
- <el-header style="text-align: right; font-size: 12px">
|
|
|
- <el-col :md="2">
|
|
|
- <ul class="el-menu--horizontal el-menu">
|
|
|
- <li class="el-menu-item">
|
|
|
- <a href="/map" style="text-decoration-line: none">
|
|
|
- <img src="@/assets/img/logo.png" class="el-avatar--circle el-avatar--medium" alt="img">
|
|
|
- map
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </el-col>
|
|
|
- <el-col :md="20">
|
|
|
- <el-menu
|
|
|
- :default-active="this.$route.path"
|
|
|
- router
|
|
|
- mode="horizontal"
|
|
|
- >
|
|
|
- <el-menu-item index="/map/photo">
|
|
|
- <i class="el-icon-map-location" />
|
|
|
- <span slot="title">照片地图</span>
|
|
|
- </el-menu-item>
|
|
|
- <el-menu-item index="/map/chart">
|
|
|
- <i class="el-icon-map-location" />
|
|
|
- <span slot="title">数据地图</span>
|
|
|
- </el-menu-item>
|
|
|
- <el-menu-item index="/map/ol">
|
|
|
- <i class="el-icon-map-location" />
|
|
|
- <span slot="title">OL地图</span>
|
|
|
- </el-menu-item>
|
|
|
- </el-menu>
|
|
|
- </el-col>
|
|
|
- <el-col :md="2">
|
|
|
- <ul class="el-menu--horizontal el-menu">
|
|
|
- <li class="el-menu-item">
|
|
|
- <el-dropdown v-if="user">
|
|
|
- <img
|
|
|
- :src="user.avatarUrl"
|
|
|
- class="el-avatar--circle el-avatar--medium"
|
|
|
- style="margin-right: 10px; margin-top: 15px"
|
|
|
- alt=""
|
|
|
- >
|
|
|
- <el-dropdown-menu slot="dropdown">
|
|
|
- <el-dropdown-item
|
|
|
- icon="el-icon-s-platform"
|
|
|
- class="size"
|
|
|
- @click.native="goToHome"
|
|
|
- >主站</el-dropdown-item>
|
|
|
- <el-dropdown-item
|
|
|
- icon="el-icon-error"
|
|
|
- class="size"
|
|
|
- @click.native="goToLogout"
|
|
|
- >退出</el-dropdown-item>
|
|
|
- </el-dropdown-menu>
|
|
|
- </el-dropdown>
|
|
|
- <span
|
|
|
- v-else
|
|
|
- style="color: #007bff"
|
|
|
- >登入</span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </el-col>
|
|
|
+ <el-container class="map-layout-container">
|
|
|
+ <el-header class="map-header" height="64px">
|
|
|
+ <div class="header-content">
|
|
|
+ <div class="logo-area">
|
|
|
+ <router-link to="/map" class="logo-link">
|
|
|
+ <img src="@/assets/img/logo.png" alt="logo" class="logo-img">
|
|
|
+ <span class="logo-text">地图</span>
|
|
|
+ </router-link>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="menu-area">
|
|
|
+ <el-menu
|
|
|
+ :default-active="$route.path"
|
|
|
+ router
|
|
|
+ mode="horizontal"
|
|
|
+ class="custom-map-menu"
|
|
|
+ >
|
|
|
+ <el-menu-item index="/map/photo">
|
|
|
+ <i class="el-icon-picture-outline" />
|
|
|
+ <span>照片地图</span>
|
|
|
+ </el-menu-item>
|
|
|
+ <el-menu-item index="/map/chart">
|
|
|
+ <i class="el-icon-data-analysis" />
|
|
|
+ <span>数据地图</span>
|
|
|
+ </el-menu-item>
|
|
|
+ <el-menu-item index="/map/ol">
|
|
|
+ <i class="el-icon-map-location" />
|
|
|
+ <span>OL地图</span>
|
|
|
+ </el-menu-item>
|
|
|
+ </el-menu>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="user-area">
|
|
|
+ <el-dropdown v-if="user" trigger="hover">
|
|
|
+ <div class="avatar-wrapper">
|
|
|
+ <img :src="user.avatarUrl" class="user-avatar" alt="avatar">
|
|
|
+ <i class="el-icon-caret-bottom" />
|
|
|
+ </div>
|
|
|
+ <el-dropdown-menu slot="dropdown" class="user-dropdown">
|
|
|
+ <el-dropdown-item icon="el-icon-s-platform" @click.native="goToHome">主站首页</el-dropdown-item>
|
|
|
+ <el-dropdown-item icon="el-icon-switch-button" divided @click.native="goToLogout">退出登录</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+
|
|
|
+ <el-button v-else type="primary" size="small" round @click="$router.push('/login')">
|
|
|
+ 登 录
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-header>
|
|
|
- <el-container>
|
|
|
- <el-main>
|
|
|
- <router-view />
|
|
|
- </el-main>
|
|
|
- </el-container>
|
|
|
+
|
|
|
+ <el-main class="map-main">
|
|
|
+ <transition name="fade-transform" mode="out-in">
|
|
|
+ <router-view :key="$route.fullPath" />
|
|
|
+ </transition>
|
|
|
+ </el-main>
|
|
|
</el-container>
|
|
|
</template>
|
|
|
|
|
|
@@ -82,20 +70,120 @@ export default {
|
|
|
user: null
|
|
|
}
|
|
|
},
|
|
|
- watch: {
|
|
|
- // 地址栏 url 发生变化时重新加载本页面
|
|
|
- $route() {
|
|
|
- this.$router.go()
|
|
|
- }
|
|
|
- },
|
|
|
+ // 删除了 $route 的 watch，避免死循环刷新
|
|
|
created() {
|
|
|
- const userInfo = getAuthedUser()
|
|
|
- if (userInfo !== null) {
|
|
|
- this.user = userInfo
|
|
|
+ this.initUser()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initUser() {
|
|
|
+ const userInfo = getAuthedUser()
|
|
|
+ if (userInfo) {
|
|
|
+ this.user = userInfo
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.map-layout-container {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #f5f7fa;
|
|
|
+}
|
|
|
+
|
|
|
+.map-header {
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ z-index: 1000;
|
|
|
+ padding: 0 40px;
|
|
|
+}
|
|
|
+
|
|
|
+.header-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+/* Logo 样式 */
|
|
|
+.logo-area {
|
|
|
+ .logo-link {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ text-decoration: none;
|
|
|
+ transition: transform 0.3s;
|
|
|
+ &:hover { transform: scale(1.02); }
|
|
|
+ }
|
|
|
+ .logo-img {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .logo-text {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #303133;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 菜单样式重置 */
|
|
|
+.menu-area {
|
|
|
+ flex: 1;
|
|
|
+ margin: 0 40px;
|
|
|
+ .custom-map-menu.el-menu--horizontal {
|
|
|
+ border-bottom: none;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .el-menu-item {
|
|
|
+ height: 64px;
|
|
|
+ line-height: 64px;
|
|
|
+ font-size: 15px;
|
|
|
+ &:hover { background-color: transparent !important; color: #409EFF !important; }
|
|
|
+ &.is-active { border-bottom-width: 3px; font-weight: bold; }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 用户区域 */
|
|
|
+.user-area {
|
|
|
+ .avatar-wrapper {
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .user-avatar {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 2px solid #ebeef5;
|
|
|
+ transition: border-color 0.3s;
|
|
|
+ &:hover { border-color: #409EFF; }
|
|
|
+ }
|
|
|
+ i { margin-left: 5px; color: #909399; }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.map-main {
|
|
|
+ padding: 20px;
|
|
|
+ /* 确保地图容器高度能撑满 */
|
|
|
+ height: calc(100vh - 64px);
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+/* 简单过渡动画 */
|
|
|
+.fade-transform-enter-active, .fade-transform-leave-active {
|
|
|
+ transition: all .3s;
|
|
|
+}
|
|
|
+.fade-transform-enter {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateX(-10px);
|
|
|
+}
|
|
|
+.fade-transform-leave-to {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateX(10px);
|
|
|
+}
|
|
|
</style>
|
