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 +++++++++++++++++++++++++++++++++++--------------
1 files changed, 35 insertions(+), 14 deletions(-)
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 {
--
Gitblit v1.8.0