From ae03714bb9b7e509791451290e26eceabc5838e5 Mon Sep 17 00:00:00 2001 From: chenyabin <Chenab123!> Date: 星期四, 15 四月 2021 17:49:29 +0800 Subject: [PATCH] 解决table 横向不滚动! --- src/conf/Topic.js | 4 +- src/components/table/summarySheets.vue | 4 +- src/assets/css/map/map-panel-style.less | 76 ++++++++++++++++++++----------------- src/components/panel/ToolBoxPanel.vue | 20 ++++------ src/components/table/components/IndexStatistics.vue | 4 +- src/components/table/components/WasteWater.vue | 2 6 files changed, 56 insertions(+), 54 deletions(-) diff --git a/src/assets/css/map/map-panel-style.less b/src/assets/css/map/map-panel-style.less index 83a6ced..7bcc3d5 100644 --- a/src/assets/css/map/map-panel-style.less +++ b/src/assets/css/map/map-panel-style.less @@ -48,7 +48,6 @@ } .el-dialog { - height: 500px; border: 0.00521rem solid @color; box-shadow: 0 0 0.03rem @color; background: rgba(0, 16, 30, 0.8); @@ -222,33 +221,6 @@ margin-left: 10px; } -.el-scrollbar__wrap { - -} - -.el-scrollbar__wrap::-webkit-scrollbar { - /*婊氬姩鏉℃暣浣撴牱寮�*/ - width: 5px; /*楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉$殑灏哄*/ - height: 1px; -} - -.el-scrollbar__wrap::-webkit-scrollbar-thumb { - /*婊氬姩鏉¢噷闈㈠皬鏂瑰潡*/ - border-radius: 10px; - background: none; -} - -.el-scrollbar__wrap::-webkit-scrollbar-track { - /*婊氬姩鏉¢噷闈㈣建閬�*/ - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); - background: none; - border-radius: 10px; -} - -#el-scrollbar__wrap::-webkit-scrollbar-button { /*婊氬姩鏉′袱绔殑鎸夐挳锛屽彲浠ョ敤display:none璁╁叾涓嶆樉绀猴紝涔熷彲浠ユ坊鍔犺儗鏅浘鐗囷紝棰滆壊鏀瑰彉鏄剧ず鏁堟灉锛堜綅缃�2锛�*/ - background: #74D334; -} - /*******************鎿嶄綔鎸夐挳鐐瑰嚮閫変腑鏁翠綋鏍峰紡******************************/ .el-button { @@ -366,13 +338,6 @@ /*************** PublicTable 琛ㄦ牸鏍峰紡銆�*********************************/ .el-table { - border: 1px solid #396d83 !important; - - .el-table__body-wrapper::-webkit-scrollbar { - width: 0; - height: 0; - background: none; - } .cell { padding: 0 3px !important; i { @@ -382,6 +347,13 @@ line-height: 12px; } } +} +.el-table--border{ + border-bottom: 1px solid #ddd; +} + +.el-dialog--center .el-dialog__body{ + padding: 0.04rem; } .el-table--border th { @@ -431,6 +403,40 @@ padding: 0 !important; font-size: 0.01rem !important; } +.el-scrollbar__wrap { + +} +/*****婊氬姩鏉�***/ +.scroll::-webkit-scrollbar, +.el-table__body-wrapper::-webkit-scrollbar, +.el-scrollbar__wrap::-webkit-scrollbar { + /*婊氬姩鏉℃暣浣撴牱寮�*/ + width: 10px; /*楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉$殑灏哄*/ + height: 10px; +} + +.scroll::-webkit-scrollbar-thumb, +.el-table__body-wrapper::-webkit-scrollbar-thumb, +.el-scrollbar__wrap::-webkit-scrollbar-thumb { + /*婊氬姩鏉¢噷闈㈠皬鏂瑰潡*/ + border-radius: 10px; + background: #000; +} +.scroll::-webkit-scrollbar-track, +.el-table__body-wrapper::-webkit-scrollbar-track, +.el-scrollbar__wrap::-webkit-scrollbar-track { + /*婊氬姩鏉¢噷闈㈣建閬�*/ + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); + background: @background-color; + border-radius: 10px; +} + + + + +/*********瑙e喅妯悜婊氬姩**/ + + /***********************************************鍔ㄧ敾鏁堟灉************/ .transition { diff --git a/src/components/panel/ToolBoxPanel.vue b/src/components/panel/ToolBoxPanel.vue index b9b89f9..aa9d37c 100644 --- a/src/components/panel/ToolBoxPanel.vue +++ b/src/components/panel/ToolBoxPanel.vue @@ -2,13 +2,12 @@ <div class="left-top-toolbox-panel"> <div class="specific-tools"> <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="宸ュ叿" placement="left"> - <el-button :class="selectGroup === true ?'active-button':''" class="el-button-choice" @click.enter.native="changeSelectMouse"> + <div :class='["iconBtn",selectGroup === true ? "active-button" : ""]' @click="changeSelectMouse" > <i class="icon iconfont icongongju"></i> - <!--<span class="span-default">宸ュ叿</span>--> - </el-button> + </div> </el-tooltip> <transition name="animationChange"> - <el-row v-show="selectGroup" class="specific-tools-group"> + <div v-show="selectGroup" class="specific-tools-group"> <el-popover trigger="manual" placement="bottom" @@ -18,13 +17,9 @@ v-model="isShow[index]" > <el-button slot="reference" class="el-button" :class="active === index? 'tools-panel-choose':''" @click.native="changeChoose(index)"> - <!-- <img :src="item.iconSelecd" alt="" v-if="active === index"/> - <img :src="item.icon" alt="" v-else/> --> <i :class="'icon iconfont '+item.icon"></i> </el-button> <el-button v-for="(itemT,indexT) in item.items" :key="indexT" @click="choiceItem(itemT,indexT)" v-show="item.index!=='2'"> - <!-- <img :src="itemT.iconChoose" :title="itemT.title" v-if="Selecd === indexT && checkedItem" alt=""/> - <img :src="itemT.icon" :title="itemT.title" alt="" v-else/> --> <i :class="'icon iconfont '+itemT.icon"></i> </el-button> <lc-base-map v-show="item.index==='2'"></lc-base-map> @@ -32,7 +27,7 @@ <!-- <el-button @click="changeSelect" class="special-button"> <i class="el-icon-d-arrow-left"></i> </el-button> --> - </el-row> + </div> </transition> </div> </div> @@ -437,6 +432,7 @@ margin: 0 0.015rem; width: 0.2725rem; height: 0.2725rem; + color:#fff; background: @background-color; vertical-align: middle !important; font-size: 20px; @@ -487,9 +483,9 @@ z-index: 1; .tools-panel-choose { - border: none; - box-shadow: 0 0 0.03rem @color-shadow; - + border: 0.00521rem solid #fff700; + box-shadow: 0 0 0.03rem #fff700; + color:#fff700; img { width: 22px; height: 22px; diff --git a/src/components/table/components/IndexStatistics.vue b/src/components/table/components/IndexStatistics.vue index 04b1a37..c8074db 100644 --- a/src/components/table/components/IndexStatistics.vue +++ b/src/components/table/components/IndexStatistics.vue @@ -1,8 +1,8 @@ <template> <el-tabs v-model="activeName"> <el-tab-pane label="鎸囨爣缁熻" name="first"> - <el-table :data="tableData" > - <el-table-column type="index" label="搴忓彿"></el-table-column> + <el-table :data="tableData" :lock-scroll="true" class="scroll" > + <el-table-column type="index" label="搴忓彿"></el-table-column> <el-table-column prop="date" label="鍗曚綅鍚嶇О"></el-table-column> <el-table-column prop="province" label="宸ヤ笟鍙栨按閲�(m3)"></el-table-column> <el-table-column prop="province" label="澶栨帓搴熸按閲�(m3)"></el-table-column> diff --git a/src/components/table/components/WasteWater.vue b/src/components/table/components/WasteWater.vue index 5b59a82..c16d4dd 100644 --- a/src/components/table/components/WasteWater.vue +++ b/src/components/table/components/WasteWater.vue @@ -1,6 +1,6 @@ <template> <div class="waste-water"> - <el-table class="tableBox" :data="tableData" @cell-click="handle"> + <el-table class="tableBox" :data="tableData" style="width: 100%" @cell-click="handle"> <el-table-column width="30px" label=""> <template slot-scope="{row,$index}"> <!-- <i class="el-icon-caret-right" v-if="$index ===1"></i>--> diff --git a/src/components/table/summarySheets.vue b/src/components/table/summarySheets.vue index e02c120..ad700e3 100644 --- a/src/components/table/summarySheets.vue +++ b/src/components/table/summarySheets.vue @@ -142,8 +142,8 @@ color:#fff; } .iconBtn.active-button{ - border-color:#00fff6 !important; - color:#00fff6 !important; + //border-color:#00fff6 !important; + //color:#00fff6 !important; } } diff --git a/src/conf/Topic.js b/src/conf/Topic.js index f9a0dce..bf99dfd 100644 --- a/src/conf/Topic.js +++ b/src/conf/Topic.js @@ -60,7 +60,7 @@ isShow: true, icon: 'iconguanxianxuncha', comp: '' -}, { +}/*, { name: '绠¢亾鍙樻洿', id: 8, checked: false, @@ -74,4 +74,4 @@ isShow: true, icon: 'iconguanxianbiaozhu', comp: '' -}] +} */] -- Gitblit v1.8.0