From a8ed21b1193d8740a926086054ac9d73e2c4c574 Mon Sep 17 00:00:00 2001
From: wangqi <magical1908@outlook.com>
Date: 星期二, 09 三月 2021 09:29:13 +0800
Subject: [PATCH] 修改右边弹框为css样式
---
src/components/panel/RightSearchPanel.vue | 145 +++++++++++++++++++++++++++++++----------------
src/assets/css/map/map-elem-ui.less | 6 +-
2 files changed, 98 insertions(+), 53 deletions(-)
diff --git a/src/assets/css/map/map-elem-ui.less b/src/assets/css/map/map-elem-ui.less
index 5b99031..1f6fd20 100644
--- a/src/assets/css/map/map-elem-ui.less
+++ b/src/assets/css/map/map-elem-ui.less
@@ -51,9 +51,9 @@
}
- location-btn{
-
- }
+ //location-btn{
+ //
+ //}
.location-btn:hover,.el-input__icon:hover{
color: @color;
diff --git a/src/components/panel/RightSearchPanel.vue b/src/components/panel/RightSearchPanel.vue
index 9462fe7..f8c5efd 100644
--- a/src/components/panel/RightSearchPanel.vue
+++ b/src/components/panel/RightSearchPanel.vue
@@ -1,25 +1,35 @@
<template>
- <div id="right-panel">
+ <div id="right-panel" >
<div class="panel-tab">
<div v-for="item in topicMenu" :key="item.id" :title="item.name" class="tab-item" @click="handleGd" :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}">
<img :src="item.icon" style="width: 24px;height: 24px;"></div>
-
<!-- <div class="tab-item" @click="handleHb" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>-->
<!-- <div class="tab-item" @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="panel-fold-btn" >-->
+<!-- <div class="btn-stretch" @click="toggleMonitorPanel"></div>-->
+<!-- </div>-->
- <div class="right-control">
-
+<!-- <div class="panel-fold-btn" @click="toggleMonitorPanel" >-->
+<!-- <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>-->
+<!--<!– <div class="btn-stretch" v-if="isCollapse" </div>–>-->
+<!--<!– <div class="btn-shrink" v-else-if="!isCollapse" ></div>–>-->
+<!--<!– :style = "{width:isCollapse ? '290px' : '0px'}"–>-->
+<!-- </div>-->
+<!-- <div class="right-control" v-if="!isCollapse" >-->
+ <div class="right-control" :class="[{ 'unfold': !isCollapse },{ 'shrink': isCollapse }] " >
+ <div class="panel-fold-btn" @click="toggleMonitorPanel">
+<!-- <div class="btn-stretch" v-if="isCollapse"></div>-->
+<!-- <div class="btn-shrink" v-else-if="!isCollapse"></div>-->
+ <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>
+ </div>
<component :title="title" :is="gcComp"></component>
</div>
</div>
</template>
<script>
-import $ from 'jquery'
+// import $ from 'jquery'
import EnvProtectSearch from './topicSearch/EnvProtectSearch'
import DischargeSearch from './topicSearch/DischargeSearch'
import { TopicList } from '../../conf/Topic'
@@ -41,8 +51,9 @@
pkVisible: false,
toggleMonitorStyle: 'right:0px',
- title: '姹￠洦姘寸缃�'
+ title: '姹￠洦姘寸缃�',
+ isCollapse: false
}
},
computed: {},
@@ -73,38 +84,45 @@
this.title = '绠￠亾淇℃伅鏌ヨ'
},
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: '-322px'
- })
- el.css({
- transform: 'rotateY(180deg)',
- 'transform-origin': '50% 50%',
- transition: 'transform 1s linear'
- })
- el2.animate({
- right: '320px',
- speed: 1000
- })
- } else {
- rightControl.animate({
- right: '10px'
- })
- el.css({
- transform: 'rotateY(0deg)',
- 'transform-origin': '50% 50%',
- transition: 'transform 1s linear'
- })
- el2.animate({
- right: '290px',
- speed: 1000
- })
- }
+ this.isCollapse = !this.isCollapse
+ console.log(11)
+ // const el = $('.btn-stretch')
+ // const el2 = $('.panel-fold-btn')
+ // const el = document.getElementsByClassName('.btn-stretch')
+ // const el2 = document.getElementsByClassName('.panel-fold-btn')
+ // let = 'btn-stretch-active'
+ // var rightControl = $('#right-panel')
+ // var rightControl = document.getElementById('#right-panel')
+ // const right = rightControl.css('right')
+ // const rightit = rightControl.ownerDocument.defaultView
+ // const right = rightit.getComputedStyle(rightit, null).right
+ // if (right === '10px') {
+ // rightControl.animate({
+ // right: '-322px'
+ // })
+ // el.css({
+ // transform: 'rotateY(180deg)',
+ // 'transform-origin': '50% 50%',
+ // transition: 'transform 1s linear'
+ // })
+ // el2.animate({
+ // right: '320px',
+ // speed: 1000
+ // })
+ // } else {
+ // rightControl.animate({
+ // right: '10px'
+ // })
+ // el.css({
+ // transform: 'rotateY(0deg)',
+ // 'transform-origin': '50% 50%',
+ // transition: 'transform 1s linear'
+ // })
+ // el2.animate({
+ // right: '290px',
+ // speed: 1000
+ // })
+ // }
}
},
mounted () {
@@ -142,6 +160,7 @@
.el-form-item__label {
color: rgb(52, 224, 255);
+ /*<!--color: @color;-->*/
}
.el-input__inner::placeholder {
@@ -233,14 +252,29 @@
white-space: nowrap;
}
.panel-fold-btn{
+ overflow: hidden;
position: absolute;
top:45%;
+ left: -18px;
+ /*left: 0px;*/
//right: 320px;
- right: 290px;
+ /*right: 290px;*/
z-index: 1000;
+ /*right: 0px;*/
background-color: rgba(5,24,66,.8);
border-radius: 10px 0 0 10px;
.btn-stretch {
+ width: 20px;
+ height: 40px;
+ background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 5px;
+ cursor: pointer;
+ /*margin-left: -20px;*/
+ transform: rotateY(0deg);
+ transform-origin: 50% 50%;
+ transition: transform 1s linear;
+ /*transition: 3s linear;*/
+ }
+ .btn-shrink {
width: 20px;
height: 40px;
background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 5px;
@@ -273,17 +307,20 @@
}
.right-control {
- width: 290px;
+ /*width: 290px;*/
//height: 573px;
height: 100%;
- position: absolute;
+ position: relative;
top: 0;
right: 0;
z-index: 999;
background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat;
background-size: 100% 98%;
}
-
+ .a{
+ transform: translateX(328px);
+ transition: transform 3s linear;
+ }
.panel_searchTotal {
font-size: 12px;
float: right;
@@ -291,13 +328,13 @@
.panel_header {
// background-color: #030D2E;
- padding: 7px 15px 3px 20px;
+ padding: 8px 15px 3px 20px;
}
.panel_title {
font-size: 12px;
- margin: 0px;
- padding: 0px;
+ /*margin: 0px;*/
+ /*padding: 0px;*/
color: #78c4ff;
font-weight: bold;
}
@@ -307,7 +344,7 @@
}
.search-form .el-form-item {
- margin: 0px;
+ /*margin: 0px;*/
margin-bottom: 8px;
}
@@ -453,7 +490,7 @@
::-webkit-scrollbar-track {
/*婊氬姩鏉￠噷闈㈣建閬�*/
- // box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
+ box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 0px;
background: #0E3565;
}
@@ -482,5 +519,13 @@
background-color: #061e51 !important;
}
}
+ .unfold {
+ transform: translateX(332px);
+ transition: transform 0.5s linear;
+ }
+ .shrink {
+ transform: translateX(0px);
+ transition: transform 0.5s linear;
+ }
}
</style>
--
Gitblit v1.8.0