From c50c7860530f24eb199b1f1385fee3bc1bd671c0 Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期一, 01 三月 2021 10:41:54 +0800
Subject: [PATCH] 修改专题菜单样式
---
src/components/panel/RightSearchPanel.vue | 49 +++++++++++++++++-------
src/components/panel/MenuTopic.vue | 24 ++++++++++-
src/views/MapTemplate.vue | 2
3 files changed, 57 insertions(+), 18 deletions(-)
diff --git a/src/components/panel/MenuSpecial.vue b/src/components/panel/MenuTopic.vue
similarity index 93%
rename from src/components/panel/MenuSpecial.vue
rename to src/components/panel/MenuTopic.vue
index 773fd69..845ef16 100644
--- a/src/components/panel/MenuSpecial.vue
+++ b/src/components/panel/MenuTopic.vue
@@ -30,7 +30,7 @@
<script>
export default {
- name: 'MenuSpecial',
+ name: 'MenuTopic',
data () {
return {
isShow: false,
@@ -144,12 +144,18 @@
font-weight: 400;
font-style: normal;
.menu-special-toggle{
- width: 2rem;height: 2rem;background-size: 100% 100%;padding-right: 1rem;display: inline;
+ width: 2rem;height: 2rem;background-size: 100% 100%;padding-right: 1rem;display: inline; transition: all .6s;
+
}
+ .menu-special-toggle:hover{
+ cursor: pointer;
+ transform: scale(1.2)
+ }
+
.menu-special-context {
display: inline-flex;
- transition: height 1s;
+ transition: all 1s;
li {
//display: inline-flex;
@@ -168,10 +174,12 @@
padding: 0 1rem 0 1rem;
line-height: 2rem;
height: 2rem;
+ transition: all .5s;
}
.menu-special-item :hover {
text-decoration: underline;
cursor: pointer;
+
}
.menu-special-item:active{
color: @color-highlight;
@@ -185,7 +193,14 @@
line-height: 1rem;
box-shadow: none;
border:none;
+
}
+ .menu-special-item:hover{
+ transform: scale(1.1)
+ }
+ .el-checkbox-button__inner:hover{
+
+ }
.el-checkbox-button.is-checked .el-checkbox-button__inner {
color: @color-highlight;
background-color: transparent;
@@ -202,5 +217,8 @@
.el-checkbox-button__inner:hover{
color: @color-highlight;
}
+ .menu-special .menu-special-context .menu-special-item:hover{
+
+ }
}
</style>
diff --git a/src/components/panel/RightSearchPanel.vue b/src/components/panel/RightSearchPanel.vue
index f0c186f..dc1402f 100644
--- a/src/components/panel/RightSearchPanel.vue
+++ b/src/components/panel/RightSearchPanel.vue
@@ -1,11 +1,14 @@
<template>
<div id="right-panel">
<div class="panel-tab">
- <div class="btn-stretch" @click="toggleMonitorPanel"></div>
<div class="tab-gd" @click="handleGd" :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}"></div>
<div class="tab-hb" @click="handleHb" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>
<div class="tab-pk" @click="handlePk" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>
</div>
+ <div class="panel-fold-btn">
+ <div class="btn-stretch" @click="toggleMonitorPanel"></div>
+ </div>
+
<div class="right-control">
<div class="el-message-box__header panel_header">
<div class="el-message-box__title panel_title"><!----><span>{{ title }}</span>
@@ -247,17 +250,22 @@
},
toggleMonitorPanel () {
const el = $('.btn-stretch')
+ const el2 = $('.panel-fold-btn')
// let cs = 'btn-stretch-active'
var rightControl = $('#right-panel')
const right = rightControl.css('right')
if (right === '10px') {
rightControl.animate({
- right: '-290px'
+ right: '-322px'
})
el.css({
transform: 'rotateY(180deg)',
'transform-origin': '50% 50%',
transition: 'transform 1s linear'
+ })
+ el2.animate({
+ right: '320px',
+ speed: 1000
})
} else {
rightControl.animate({
@@ -267,6 +275,10 @@
transform: 'rotateY(0deg)',
'transform-origin': '50% 50%',
transition: 'transform 1s linear'
+ })
+ el2.animate({
+ right: '290px',
+ speed: 1000
})
}
}
@@ -279,7 +291,8 @@
<style lang="less">
#right-panel {
width: 322px;
- height: 573px;
+ //height: 573px;
+ height: 100%;
position: absolute;
right: 10px;
top: 10px;
@@ -394,19 +407,25 @@
text-overflow: ellipsis;
white-space: nowrap;
}
-
+ .panel-fold-btn{
+ position: absolute;
+ top:45%;
+ //right: 320px;
+ right: 290px;
+ z-index: 1000;
+ background-color: rgba(5,24,66,.8);
+ border-radius: 10px 0 0 10px;
.btn-stretch {
- width: 15px;
- height: 28px;
- background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 0;
- margin-left: 10px;
- margin-top: 3px;
- cursor: pointer;
+ width: 20px;
+ height: 40px;
+ background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 5px;
+ cursor: pointer;
- transform: rotateY(180deg);
- transform-origin: 50% 50%;
- transition: transform 1s linear;
+ transform: rotateY(180deg);
+ transform-origin: 50% 50%;
+ transition: transform 1s linear;
}
+ }
.tab-gd {
width: 32px;
@@ -438,12 +457,14 @@
.right-control {
width: 290px;
- height: 573px;
+ //height: 573px;
+ height: 100%;
position: absolute;
top: 0;
right: 0;
z-index: 999;
background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat;
+ background-size: 100% 98%;
}
.panel_searchTotal {
diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue
index a54d7fc..34f010c 100644
--- a/src/views/MapTemplate.vue
+++ b/src/views/MapTemplate.vue
@@ -26,7 +26,7 @@
// import TopEnterprisePanel from '@components/panel/TopEnterprisePanel'
import ToolBoxPanel from '@components/panel/ToolBoxPanel'
import Popup from '@views/popup/Popup'
-import MenuSpecial from '@components/panel/MenuSpecial'
+import MenuSpecial from '@components/panel/MenuTopic'
export default {
name: 'MapTemplate',
--
Gitblit v1.8.0