From 538d7313f98da3c304365f1c2b22c3e23d91db35 Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期一, 23 十月 2023 15:04:06 +0800
Subject: [PATCH] 版本更新，阴影分析，等高线添加
---
src/views/menus.vue | 166 ++++++++++++++++++++++++++-----------------------------
1 files changed, 78 insertions(+), 88 deletions(-)
diff --git a/src/views/menus.vue b/src/views/menus.vue
index 811fae6..af6a8eb 100644
--- a/src/views/menus.vue
+++ b/src/views/menus.vue
@@ -1,51 +1,29 @@
<template>
<div class="menus" v-show="fullScreen">
<div class="logo_box">
- <img src="../assets/img/logo.png" alt="" class="logo" />
+ <!-- <img src="../assets/img/logo.png" alt="" class="logo" />
<div class="logo_name">
<h3>鏈堢悆澶ф暟鎹湴鐞嗙┖闂村垎鏋愬睍绀哄钩鍙�</h3>
<img src="../assets/img/logob.png" alt="" class="logo_name_b" />
- </div>
+ </div> -->
</div>
<div class="menus_box">
<div class="menu_Image_box">
- <div
- class="imgBox"
- v-for="(item, i) in menuOptions"
- :key="i"
- @click="setMenuClick(item)"
- :title="item.name"
- >
- <img
- v-if="checkMenuFlag != item.id"
- class="imgIcon"
- :src="require('../assets/img/leftBtn/' + item.imgUrl)"
- />
- <img
- v-if="checkMenuFlag == item.id"
- class="imgIcon"
- :src="require('../assets/img/leftBtn/' + item.checkImgUrl)"
- />
+ <div class="imgBox" v-for="(item, i) in menuOptions" :key="i" @click="setMenuClick(item)" :title="item.name">
+ <img v-if="checkMenuFlag != item.id" class="imgIcon" :src="require('../assets/img/leftBtn/' + item.imgUrl)" />
+ <img v-if="checkMenuFlag == item.id" class="imgIcon"
+ :src="require('../assets/img/leftBtn/' + item.checkImgUrl)" />
</div>
</div>
</div>
</div>
<div class="content_box" v-show="fullScreen">
- <div
- v-show="checkMenuFlag == 'l1'"
- style="position: relative; display: flex"
- ></div>
- <div
- style="position: relative; display: flex"
- v-show="store.state.setLayerManager"
- >
+ <div v-show="checkMenuFlag == 'l1'" style="position: relative; display: flex"></div>
+ <div style="position: relative; display: flex" v-show="store.state.setLayerManager">
<layer-manage @setCloseLayer="setCloseLayer"></layer-manage>
</div>
- <div
- style="position: relative; display: flex"
- v-show="checkMenuFlag == 'l2'"
- >
+ <div style="position: relative; display: flex" v-show="checkMenuFlag == 'l2'">
<plotting @setCloseplotting="setCloseplotting"> </plotting>
</div>
<div v-show="checkMenuFlag == 'l5'">
@@ -56,38 +34,31 @@
</div>
<div class="fullScreen_btn" v-show="!fullScreen" @click="screen"></div>
- <div
- v-show="store.state.doubleMenu"
- class="setDobuleMap"
- @click="setDoubleScreenMap"
- >
+ <div v-show="store.state.doubleMenu" class="setDobuleMap" @click="setDoubleScreenMap">
<Operation />
</div>
- <div
- @setDobuleCloseLayer="setDobuleCloseLayer"
- v-show="store.state.doubleMap"
- >
+ <div @setDobuleCloseLayer="setDobuleCloseLayer" v-show="store.state.doubleMap">
<double-layer></double-layer>
</div>
- <div
- style="
+ <div style="
display: flex;
position: absolute;
z-index: 30;
- top: 23px;
- right: 23px;
- "
- >
+ top: 18px;
+ right: 15px;
+ ">
<thematic-map v-show="!thematicMapBtnState"></thematic-map>
<top-btn v-show="fullScreen" v-if="thematicMapBtnState"></top-btn>
- <div>
- <div class="setUserLogo" @click="setLogMeu = !setLogMeu">
- <div class="setUserImage"></div>
- <div class="setUserTitle">{{ store.state.uname }}</div>
- </div>
- <div v-show="setLogMeu" class="setLogContent" @click="setUserLogOut">
- 閫�鍑�
+ <div v-show="fullScreen" style="display: flex;align-items: center;">
+ <div style="margin-top: 15px;">
+ <div class="setUserLogo" @click="setLogMeu = !setLogMeu">
+ <div class="setUserImage"></div>
+ <div class="setUserTitle">{{ store.state.uname }}</div>
+ </div>
+ <div v-show="setLogMeu" class="setLogContent" @click="setUserLogOut">
+ 閫�鍑�
+ </div>
</div>
</div>
</div>
@@ -230,53 +201,63 @@
);
}
menuOptions.value = menuData.leftMenu;
-onMounted(() => {});
+onMounted(() => { });
</script>
<style lang="less" scoped>
.menus {
position: absolute;
- top: 27px;
+
left: 0px;
z-index: 40;
- .logo_box {
- display: flex;
- align-items: center;
- .logo {
- width: 68px;
- height: 68px;
- }
- .logo_name {
- margin-left: 14px;
- h3 {
- font-size: 36px;
- font-family: Source Han Sans CN;
- font-weight: 400;
- color: #ffffff;
- line-height: 35px;
- }
- .logo_name_b {
- text-align: center;
- width: 100%;
- height: 9px;
- }
- }
+ .logo_box {
+ width: 620px;
+ height: 77px;
+ margin-top: -5px;
+ background: url("../assets/img/logo2.png") no-repeat;
+ background-size: 100% 100%;
+
+ // display: flex;
+ // align-items: center;
+ // .logo {
+ // width: 68px;
+ // height: 68px;
+ // }
+ // .logo_name {
+ // margin-left: 14px;
+
+ // h3 {
+ // font-size: 36px;
+ // font-family: Source Han Sans CN;
+ // font-weight: 400;
+ // color: #ffffff;
+ // line-height: 35px;
+ // }
+ // .logo_name_b {
+ // text-align: center;
+ // width: 100%;
+ // height: 9px;
+ // }
+ // }
}
+
.menus_box {
background: rgba(1, 10, 28, 0.68);
- left: 7px;
+ left: 6px;
position: absolute;
- top: 83px;
- width: 71px;
- height: 680px;
+ top: 82px;
+ width: 58px;
+ height: calc(100vh - 91px);
z-index: 40;
box-sizing: border-box;
+
.imgBox {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 52px;
cursor: pointer;
+
img {
width: 30px;
height: 30px;
@@ -284,6 +265,7 @@
}
}
}
+
.setDobuleMap {
position: absolute;
top: 105px;
@@ -296,21 +278,24 @@
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
padding: 10px;
}
+
.menu_Image_box {
box-sizing: border-box;
height: 100%;
width: 100%;
padding-top: 36px;
- background: url("../assets/img/鐭╁舰 1.png") no-repeat;
+ background: url("../assets/img/鐭╁舰 6.png") no-repeat;
background-size: 100% 100%;
}
+
.content_box {
position: absolute;
// top: 135px;
- top: 110px;
- left: 80px;
+ top: 83px;
+ left: 73px;
display: flex;
}
+
.fullScreen_btn {
background: url("../assets/img/leftBtn/鍚堥泦_03.png") no-repeat center;
background-size: 100% 100%;
@@ -320,22 +305,26 @@
right: 20px;
top: 20px;
}
+
.fullScreen_btn:hover {
background: url("../assets/img/leftBtn/鍚堥泦_03-02.png") no-repeat center;
background-size: 100% 100%;
cursor: pointer;
}
+
.setUserLogo {
- height: 46px;
+ height: 34px;
display: flex;
+
.setUserImage {
- width: 46px;
- height: 46px;
+ width: 34px;
+ height: 34px;
background: url("../assets/img/鍥惧眰 18.png") no-repeat center;
background-size: 100% 100%;
cursor: pointer;
}
+
.setUserTitle {
height: 100%;
align-items: center;
@@ -343,10 +332,11 @@
font-size: 15px;
font-family: Microsoft YaHei;
font-weight: 400;
- color: #d6e4ff;
+ color: #D6E4FF;
margin-left: 10px;
}
}
+
.setLogContent {
width: calc(100% - 10px);
padding: 5px;
--
Gitblit v1.9.3