Commit 29299ece authored by 纪泽龙's avatar 纪泽龙

Merge branch 'develop_jzl'

parents 6d9f4043 4e61f073
#app {
.main-container {
min-height: 100%;
transition: margin-left .28s;
transition: margin-left 0.28s;
margin-left: $sideBarWidth;
position: relative;
}
.sidebar-container {
-webkit-transition: width .28s;
-webkit-transition: width 0.28s;
transition: width 0.28s;
width: $sideBarWidth !important;
background-color: #053B6A;
background-color: #053b6a;
height: 100%;
position: fixed;
font-size: 0px;
......@@ -20,28 +19,44 @@
left: 0;
z-index: 1001;
overflow: hidden;
-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
box-shadow: 2px 0 6px rgba(0,21,41,.35);
.el-menu-item{
-webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
.el-menu-item {
padding: 0px !important;
margin-top: 5px;
height: 84px;
line-height: 30px !important;
text-align: center;
.svg-icon{
.svg-icon {
margin-top: 10px;
font-size: 30px;
// width: 30px !important;
}
}
reset element-ui css
.horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
reset element-ui css .horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out,
0s padding-right ease-in-out;
}
.scrollbar-wrapper {
overflow-x: hidden !important;
.el-menu-item:focus,
.is-active {
outline: none;
// background-image: url(/static/img/item-background.0ec28f27.png);
background-repeat: no-repeat;
background-size: 100% 100%;
/* background: rgba(0, 0, 0, 0); */
color: #31eaea !important;
}
.el-menu-item:hover {
outline: none;
// background-image: url(/static/img/item-background.0ec28f27.png);
background-repeat: no-repeat;
background-size: 100% 100%;
/* background: rgba(0, 0, 0, 0); */
color: #31eaea !important;
}
}
.el-scrollbar__bar.is-vertical {
......@@ -73,13 +88,14 @@
}
.el-menu {
background-color: #053B6A;
background-color: #053b6a;
border: none;
height: 100%;
width: 100% !important;
}
.el-menu-item, .el-submenu__title {
.el-menu-item,
.el-submenu__title {
overflow: hidden !important;
text-overflow: ellipsis !important;
// white-space: nowrap !important;
......@@ -97,7 +113,7 @@
color: #fff !important;
}
& .nest-menu .el-submenu>.el-submenu__title,
& .nest-menu .el-submenu > .el-submenu__title,
& .el-submenu .el-menu-item {
min-width: $sideBarWidth !important;
......@@ -106,9 +122,9 @@
}
}
& .theme-dark .nest-menu .el-submenu>.el-submenu__title,
& .theme-dark .nest-menu .el-submenu > .el-submenu__title,
& .theme-dark .el-submenu .el-menu-item {
background-color: #053B6A !important;
background-color: #053b6a !important;
&:hover {
background-color: rgba(0, 0, 0, 0.06) !important;
......@@ -141,20 +157,19 @@
.el-submenu {
overflow: hidden;
&>.el-submenu__title {
& > .el-submenu__title {
padding: 0 0 !important;
.svg-icon {
margin-left: 20px;
}
}
}
.el-menu--collapse {
.el-submenu {
&>.el-submenu__title {
&>span {
& > .el-submenu__title {
& > span {
height: 0;
width: 0;
overflow: hidden;
......@@ -177,7 +192,7 @@
}
.sidebar-container {
transition: transform .28s;
transition: transform 0.28s;
width: $sideBarWidth !important;
}
......@@ -191,7 +206,6 @@
}
.withoutAnimation {
.main-container,
.sidebar-container {
transition: none;
......@@ -201,13 +215,13 @@
// when menu collapsed
.el-menu--vertical {
&>.el-menu {
& > .el-menu {
.svg-icon {
margin-right: 16px;
}
}
.nest-menu .el-submenu>.el-submenu__title,
.nest-menu .el-submenu > .el-submenu__title,
.el-menu-item {
&:hover {
// you can use $subMenuHover
......@@ -216,7 +230,7 @@
}
// the scroll bar appears when the subMenu is too long
>.el-menu--popup {
> .el-menu--popup {
max-height: 100vh;
overflow-y: auto;
......
......@@ -209,7 +209,7 @@ export default {
<style lang="scss" scoped>
.wrapper {
width: 406px;
max-height: 430px;
max-height: 500px;
background: #fff;
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
......
......@@ -181,7 +181,7 @@ export default {
<style lang="scss" scoped>
.wrapper {
width: 406px;
max-height: 430px;
max-height: 500px;
background: #fff;
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
......
......@@ -184,7 +184,7 @@ export default {
<style lang="scss" scoped>
.wrapper {
width: 406px;
max-height: 430px;
max-height: 500px;
background: #fff;
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
......
......@@ -4,9 +4,13 @@
<svg-icon class-name="size-icon" icon-class="size" />
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
{{
item.label }}
<el-dropdown-item
v-for="item of sizeOptions"
:key="item.value"
:disabled="size === item.value"
:command="item.value"
>
{{ item.label }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
......@@ -17,41 +21,40 @@ export default {
data() {
return {
sizeOptions: [
{ label: 'Default', value: 'default' },
{ label: 'Medium', value: 'medium' },
{ label: 'Small', value: 'small' },
{ label: 'Mini', value: 'mini' }
]
}
{ label: "Default", value: "default" },
{ label: "Medium", value: "medium" },
{ label: "Small", value: "small" },
{ label: "Mini", value: "mini" },
],
};
},
computed: {
size() {
return this.$store.getters.size
}
return this.$store.getters.size;
},
},
methods: {
handleSetSize(size) {
this.$ELEMENT.size = size
this.$store.dispatch('app/setSize', size)
this.refreshView()
this.$ELEMENT.size = size;
this.$store.dispatch("app/setSize", size);
this.refreshView();
this.$message({
message: 'Switch Size Success',
type: 'success'
})
message: "Switch Size Success",
type: "success",
});
},
refreshView() {
// In order to make the cached page re-rendered
this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
this.$store.dispatch("tagsView/delAllCachedViews", this.$route);
const { fullPath } = this.$route
const { fullPath } = this.$route;
this.$nextTick(() => {
this.$router.replace({
path: '/redirect' + fullPath
})
})
}
}
}
path: "/redirect" + fullPath,
});
});
},
},
};
</script>
......@@ -20,10 +20,16 @@
</template>
<!-- 顶部菜单超出数量折叠 -->
<el-submenu index="more" v-if="topMenus.length > visibleNumber">
<!-- <div> -->
<el-submenu
class="onlyNavTio"
index="more"
v-if="topMenus.length > visibleNumber"
>
<template slot="title">更多菜单</template>
<template v-for="(item, index) in topMenus">
<el-menu-item
class="navTopBar"
:index="item.path"
:key="index"
v-if="index >= visibleNumber"
......@@ -32,6 +38,7 @@
>
</template>
</el-submenu>
<!-- </div> -->
</el-menu>
</template>
......@@ -225,6 +232,45 @@ export default {
}
}
// 》〉》〉》导航的样式调整
.navTopBar {
// background-color: red !important;
width: 110px !important;
background-color: #053b6a !important;
text-align: center !important;
color: #fff !important;
&:hover {
color: #fff !important;
outline: none;
background-image: url("../../assets/logo/item-background.png");
background-repeat: no-repeat;
background-size: 100% 100%;
/* background: rgba(0, 0, 0, 0); */
color: #31eaea !important;
}
}
.navTopBar:focus,
.navTopBar.is-active {
outline: none;
background-image: url("../../assets/logo/item-background.png");
background-repeat: no-repeat;
background-size: 100% 100%;
/* background: rgba(0, 0, 0, 0); */
color: #31eaea !important;
}
.el-menu--popup {
z-index: 100;
min-width: 120px;
border: none;
padding: 5px;
border-radius: 2px;
-webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
background-color: #053b6a;
}
// 》〉》〉》导航的样式
.el-menu--horizontal > .el-menu-item.is-active {
border-bottom: 3px solid #{"var(--theme)"};
/* box-shadow: inset 2px 2px 20px #5CD9D4; */
......@@ -235,8 +281,8 @@ export default {
.el-menu--horizontal > .el-submenu .el-submenu__title {
height: 50px !important;
line-height: 50px !important;
border:none !important;
margin-left:15px;
border: none !important;
margin-left: 15px;
}
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus {
......@@ -258,7 +304,7 @@ export default {
rgba(0, 0, 0, 0) 100%
);
}
.submenu-title-noDropdown{
.submenu-title-noDropdown {
color: rgb(5 59 106) !important;
font-weight: 900 !important;
}
......
<template>
<div v-if="!item.hidden">
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
<template
v-if="
hasOneShowingChild(item.children, item) &&
(!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
!item.alwaysShow
"
>
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)"/><br>
<el-menu-item
:index="resolvePath(onlyOneChild.path)"
:class="{ 'submenu-title-noDropdown': !isNest }"
>
<item
:icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
/><br />
<!-- <item :title="onlyOneChild.meta.title" /> -->
{{onlyOneChild.meta.title}}
{{ onlyOneChild.meta.title }}
</el-menu-item>
</app-link>
</template>
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
<el-submenu
v-else
ref="subMenu"
:index="resolvePath(item.path)"
popper-append-to-body
>
<template slot="title">
<item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
<item
v-if="item.meta"
:icon="item.meta && item.meta.icon"
:title="item.meta.title"
/>
</template>
<sidebar-item
v-for="child in item.children"
......@@ -27,135 +47,142 @@
</template>
<script>
import path from 'path'
import { isExternal } from '@/utils/validate'
import Item from './Item'
import AppLink from './Link'
import FixiOSBug from './FixiOSBug'
import path from "path";
import { isExternal } from "@/utils/validate";
import Item from "./Item";
import AppLink from "./Link";
import FixiOSBug from "./FixiOSBug";
export default {
name: 'SidebarItem',
name: "SidebarItem",
components: { Item, AppLink },
mixins: [FixiOSBug],
props: {
// route object
item: {
type: Object,
required: true
required: true,
},
isNest: {
type: Boolean,
default: false
default: false,
},
basePath: {
type: String,
default: ''
}
default: "",
},
},
data() {
this.onlyOneChild = null
return {}
this.onlyOneChild = null;
return {};
},
methods: {
hasOneShowingChild(children = [], parent) {
if (!children) {
children = [];
}
const showingChildren = children.filter(item => {
const showingChildren = children.filter((item) => {
if (item.hidden) {
return false
return false;
} else {
// Temp set(will be used if only has one showing child)
this.onlyOneChild = item
return true
this.onlyOneChild = item;
return true;
}
})
});
// When there is only one child router, the child router is displayed by default
if (showingChildren.length === 1) {
return true
return true;
}
// Show parent if there are no child router to display
if (showingChildren.length === 0) {
this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
return true
this.onlyOneChild = { ...parent, path: "", noShowingChildren: true };
return true;
}
return false
return false;
},
resolvePath(routePath) {
if (isExternal(routePath)) {
return routePath
return routePath;
}
if (isExternal(this.basePath)) {
return this.basePath
return this.basePath;
}
return path.resolve(this.basePath, routePath)
}
}
}
return path.resolve(this.basePath, routePath);
},
},
};
</script>
<style lang="scss">
#app .sidebar-container .submenu-title-noDropdown:hover, #app .sidebar-container .el-submenu__title:hover {
/* box-shadow: inset 2px 2px 20px #5CD9D4; */
background: rgba(0, 0, 0, 0);
#app .sidebar-container .submenu-title-noDropdown:hover,
#app .sidebar-container .el-submenu__title:hover {
/* box-shadow: inset 2px 2px 20px #5CD9D4; */
background: rgba(0, 0, 0, 0);
}
#app .sidebar-container .el-menu-item, #app .sidebar-container .el-submenu__title {
overflow: hidden !important;
text-overflow: ellipsis !important;
background: rgba(0, 0, 0, 0);
#app .sidebar-container .el-menu-item,
#app .sidebar-container .el-submenu__title {
overflow: hidden !important;
text-overflow: ellipsis !important;
background: rgba(0, 0, 0, 0);
}
.el-menu-item:hover {
// 顶部导航的样式
.navbar {
.el-menu-item:hover {
outline: none;
background-image: url("../../../assets/logo/item-background.png");
background-repeat: no-repeat;
background-size: 100% 100%;
/* background: rgba(0, 0, 0, 0); */
color: #31EAEA !important;
}
.el-menu-item:focus,.is-active {
color: #31eaea !important;
}
.el-menu-item:focus,
.is-active {
outline: none;
background-image: url("../../../assets/logo/item-background.png");
background-repeat: no-repeat;
background-size: 100% 100%;
/* background: rgba(0, 0, 0, 0); */
color: #31EAEA !important;
}
.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
color: #31eaea !important;
}
.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
background-color: rgba(0, 0, 0, 0);
color: #fff;
background-image: url("../../../assets/logo/item-background.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.el-menu--horizontal > .el-submenu .el-submenu__title {
}
.el-menu--horizontal > .el-submenu .el-submenu__title {
height: 50px !important;
line-height: 50px !important;
margin-top: 15px;
font-size: 22px;
font-weight: 600;
color: #fff;
}
.el-menu--horizontal > .el-submenu:focus .el-submenu__title, .el-menu--horizontal > .el-submenu:hover .el-submenu__title {
}
.el-menu--horizontal > .el-submenu:focus .el-submenu__title,
.el-menu--horizontal > .el-submenu:hover .el-submenu__title {
color: #fff;
}
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
}
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
border-bottom: 0px solid;
color: #fff;
}
.el-submenu__title i {
}
.el-submenu__title i {
color: #fff;
}
.el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title {
background-color: #053B6A;
}
.el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-submenu__title {
background-color: #053b6a;
float: none;
height: 36px;
line-height: 36px;
padding: 0;
color: #fff;
}
.el-menu--popup {
}
.el-menu--popup {
z-index: 100;
min-width: 120px;
border: none;
......@@ -163,6 +190,9 @@ export default {
border-radius: 2px;
-webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
background-color: #053B6A;
background-color: #053b6a;
}
}
// 》〉》〉》〉顶部导航的样式
</style>
\ No newline at end of file
......@@ -117,6 +117,7 @@ class gaodeMap {
if (this.handleInfoWindowOpenFunc) {
this.handleInfoWindowOpenFunc();
this.handleInfoWindowOpenFunc = null;
this.leftListClick=false;
}
// 刚进入页面的时候只调用一次,让左侧的抽屉在地图移动完之后显示
......
......@@ -777,7 +777,6 @@ export default {
iten.infoPath = [a.toFixed(6), b.toFixed(6)];
} else {
path = [iten.path[0], iten.path[1] - 0.06];
}
this.gaoMap.panTo(path);
}
......@@ -838,7 +837,7 @@ export default {
lnglat: iten.path,
};
// 如果是原地不动,就直接执行
if (iten.path[0] == lng && iten.path[1] >= (lat + 0.06)-0.000001) {
if (iten.path[0] == lng && iten.path[1] >= lat + 0.06 - 0.000001) {
console.log("9999999999");
this.gaoMap.infoOpen(e);
return;
......@@ -1231,10 +1230,10 @@ input[type="radio"] {
// border-right: none;
flex: 1;
text-align: center;
margin-left:10px;
margin-left: 10px;
}
.code {
width: 112px;
width: 100px;
text-align: center;
}
}
......
......@@ -270,7 +270,7 @@ export default {
flex-wrap: wrap;
// justify-content: space-between;
align-content: flex-start;
margin-top: 7px;
// margin-top: 7px;
& > .right-content {
background-color: #fff;
width: 238px;
......
......@@ -1680,7 +1680,7 @@ input[type="radio"] {
margin-left:10px;
}
.code {
width: 112px;
width: 100px;
text-align: center;
}
}
......
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