|
@@ -1,67 +1,81 @@
|
|
|
<template>
|
|
|
- <div id="tdzsxz">
|
|
|
- <iframe id="i_map" name="i_map" frameborder="0"></iframe>
|
|
|
- <div class="tool-box shadow-box">
|
|
|
- <img v-for="item in toolsArr" :src="item.picUrl" alt="" @click="handleToolClick(item)" />
|
|
|
- </div>
|
|
|
- <div v-show="panelShow.currentLayer" class="current-layer shadow-box pos-card-green">
|
|
|
- <header>
|
|
|
- <span>当前图层</span><i @click="panelShow.currentLayer = false"></i>
|
|
|
- </header>
|
|
|
- <main>
|
|
|
- <ul>
|
|
|
- <li v-for="item in mapLayers" :key="item.id">
|
|
|
- <span>{{ item.name }}</span>
|
|
|
- <div>
|
|
|
- <i class="btn" :class="item.visible ? 'btn-dqtc-show' : 'btn-dqtc-hide'"
|
|
|
- @click="toggleLayerVisible(item)"></i>
|
|
|
- <el-slider v-model="item.opacity" :min="1"
|
|
|
- @change="val => handleLayerOpacity(val, item)"></el-slider>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </main>
|
|
|
- </div>
|
|
|
- <el-card class="box">
|
|
|
- <div class="pos-card-title" style="margin-bottom: 10px">土地招商选址</div>
|
|
|
- <el-select v-model="form.ghyt" placeholder="请选择流转意向" clearable>
|
|
|
- <el-option value="" label="全部"></el-option>
|
|
|
- <el-option v-for="item in lzyxArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
- </el-select>
|
|
|
- <el-select v-model="form.xz" placeholder="请选择乡镇" style="margin-left: 10px" clearable>
|
|
|
- <el-option v-for="item in townList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
- </el-select>
|
|
|
- <div style="margin-top: 20px;">
|
|
|
- <el-input type="number" v-model="form.zxmj" style="width: 22%" placeholder="最小面积" clearable></el-input>
|
|
|
- <span> - </span>
|
|
|
- <el-input type="number" v-model="form.zdmj" style="width: 22%" placeholder="最大面积" clearable></el-input>
|
|
|
- <el-select v-model="form.tdxz" placeholder="请选择土地性质" class="ml-10" style="width: 29%" clearable>
|
|
|
- <el-option value="" label="全部"></el-option>
|
|
|
- <el-option v-for="item in landTypeArr" :key="item.value" :label="item.label"
|
|
|
- :value="item.value"></el-option>
|
|
|
- </el-select>
|
|
|
- <!-- <el-select placeholder="请选择乡镇" clearable>-->
|
|
|
- <!-- <el-option></el-option>-->
|
|
|
- <!-- </el-select>-->
|
|
|
-
|
|
|
- <el-button type="primary" class="btn-default" style="margin-left: 10px" @click="getList">分析</el-button>
|
|
|
- </div>
|
|
|
- <div class="pos-card-title" style="margin-top: 10px;margin-bottom: 10px">筛选结果</div>
|
|
|
- <el-table :data="tableData.value" class="table-default" height="300" stripe
|
|
|
- header-cell-class-name="title-ellipsis">
|
|
|
- <el-table-column fixed type="selection" min-width="30" />
|
|
|
- <el-table-column type="index" label="序号" min-width="70" />
|
|
|
- <el-table-column label="村" min-width="80" prop="ssc" show-overflow-tooltip />
|
|
|
- <el-table-column label="镇" min-width="80" prop="ssjz" show-overflow-tooltip />
|
|
|
- <el-table-column label="流转意向" min-width="100" prop="ghyt" show-overflow-tooltip />
|
|
|
- <el-table-column label="地块面积(亩)" min-width="130" prop="tbmj" show-overflow-tooltip />
|
|
|
- <el-table-column label="土地性质" prop="tdxz" show-overflow-tooltip />
|
|
|
- <!-- <el-table-column label="地块数量" min-width="80" prop="plotNum" show-overflow-tooltip />-->
|
|
|
- </el-table>
|
|
|
-
|
|
|
- </el-card>
|
|
|
- <BaseMapArea />
|
|
|
- </div>
|
|
|
+ <div id="tdzsxz">
|
|
|
+ <iframe id="i_map" name="i_map" frameborder="0"></iframe>
|
|
|
+ <div class="tool-box shadow-box">
|
|
|
+ <img v-for="item in toolsArr" :src="item.picUrl" alt="" @click="handleToolClick(item)" />
|
|
|
+ </div>
|
|
|
+ <div v-show="panelShow.currentLayer" class="current-layer shadow-box pos-card-green">
|
|
|
+ <header>
|
|
|
+ <span>当前图层</span><i @click="panelShow.currentLayer = false"></i>
|
|
|
+ </header>
|
|
|
+ <main>
|
|
|
+ <ul>
|
|
|
+ <li v-for="item in mapLayers" :key="item.id">
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ <div>
|
|
|
+ <i class="btn" :class="item.visible ? 'btn-dqtc-show' : 'btn-dqtc-hide'"
|
|
|
+ @click="toggleLayerVisible(item)"></i>
|
|
|
+ <el-slider v-model="item.opacity" :min="1" @change="val => handleLayerOpacity(val, item)"></el-slider>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </main>
|
|
|
+ </div>
|
|
|
+ <el-card class="box">
|
|
|
+ <div class="pos-card-title" style="margin-bottom: 10px">土地招商选址</div>
|
|
|
+ <el-select v-model="form.ghyt" placeholder="请选择流转意向" clearable>
|
|
|
+ <el-option value="" label="全部"></el-option>
|
|
|
+ <el-option v-for="item in lzyxArr" :key="item.value" :label="item.label"
|
|
|
+ :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="form.xz" placeholder="请选择乡镇" style="margin-left: 10px" clearable>
|
|
|
+ <el-option v-for="item in townList" :key="item.value" :label="item.label"
|
|
|
+ :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <div style="margin-top: 20px;">
|
|
|
+ <el-input type="number" v-model="form.zxmj" style="width: 22%" placeholder="最小面积" clearable></el-input>
|
|
|
+ <span> - </span>
|
|
|
+ <el-input type="number" v-model="form.zdmj" style="width: 22%" placeholder="最大面积" clearable></el-input>
|
|
|
+ <el-select v-model="form.tdxz" placeholder="请选择土地性质" class="ml-10" style="width: 29%" clearable>
|
|
|
+ <el-option value="" label="全部"></el-option>
|
|
|
+ <el-option v-for="item in landTypeArr" :key="item.value" :label="item.label"
|
|
|
+ :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <!-- <el-select placeholder="请选择乡镇" clearable>-->
|
|
|
+ <!-- <el-option></el-option>-->
|
|
|
+ <!-- </el-select>-->
|
|
|
+
|
|
|
+ <el-button type="primary" class="btn-default" style="margin-left: 10px" @click="getList">分析</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="pos-card-title" style="margin-top: 10px;margin-bottom: 10px">筛选结果</div>
|
|
|
+ <el-table @row-click="rowClick" :data="tableData.value" class="table-default" height="300" stripe header-cell-class-name="title-ellipsis">
|
|
|
+ <el-table-column fixed type="selection" min-width="30" />
|
|
|
+ <el-table-column type="index" label="序号" min-width="70" />
|
|
|
+ <el-table-column label="镇" min-width="80" prop="ssjz" show-overflow-tooltip />
|
|
|
+ <el-table-column label="村" min-width="80" prop="ssc" show-overflow-tooltip />
|
|
|
+ <el-table-column label="流转意向" min-width="100" prop="ghyt" show-overflow-tooltip />
|
|
|
+ <el-table-column label="流转面积(亩)" min-width="130" prop="tbmj" show-overflow-tooltip />
|
|
|
+ <el-table-column label="土地性质" prop="tdxz" show-overflow-tooltip />
|
|
|
+ <el-table-column label="土地利用分类" prop="tdlyfl" show-overflow-tooltip />
|
|
|
+ <!-- <el-table-column label="地块数量" min-width="80" prop="plotNum" show-overflow-tooltip />-->
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+ <el-card class="panel box6" v-if="mapLayers.filter(i => i.visible).length > 0">
|
|
|
+ <div class="pos-card-title">
|
|
|
+ <span class="t-text">图例</span>
|
|
|
+ </div>
|
|
|
+ <ul v-for="item in mapLayers.filter(i => i.visible)" :key="item.name">
|
|
|
+
|
|
|
+ <li v-for="item2 in item.legend" :key="item2.name">
|
|
|
+ <i :style="'background:' + item2.color + ';' + 'border-color:' + item2.border + ';'"></i>
|
|
|
+ <span>{{ item2.name }}</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </el-card>
|
|
|
+ <BaseMapArea />
|
|
|
+ <point-search/>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
@@ -69,35 +83,53 @@ import { reactive, onBeforeUnmount, nextTick, onMounted, ref } from 'vue'
|
|
|
import { getAssetsFile } from '@/utils/require'
|
|
|
import CityGis from "../../../utils/map/CityGis.Bridge";
|
|
|
import BaseMapArea from '@/components/BaseMapArea.vue'
|
|
|
-import { locateCM, addLayer } from '@/utils/map/AddLayer'
|
|
|
+import {locateCM, addLayer, addMyGraph, layerQueryGet,addPointSearch} from '@/utils/map/AddLayer'
|
|
|
import { myBridge } from "@/utils/map/map"
|
|
|
import { getLayerByName } from '@/utils/data/all-layer-info'
|
|
|
-import { GetTdzsxzList, GetTownVillageList } from "../../../api/landTransfer";
|
|
|
-import { landTypeArr, lzyxArr } from '../../../utils/data/select-data'
|
|
|
-import { getAllTownMy } from '@/api/projectAudit'
|
|
|
+import {GetTdzsxzList, GetTownVillageList} from "../../../api/landTransfer";
|
|
|
+import {landTypeArr, lzyxArr} from '../../../utils/data/select-data'
|
|
|
+import {Pointer} from "@element-plus/icons-vue";
|
|
|
+import PointSearch from "@/components/PointSearch.vue";
|
|
|
+import {useOtherStore} from "@/stores/other";
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
- createMap()
|
|
|
- mapLayers.value = [{ ...getLayerByName('意向招商地块'), visible: true, opacity: 100 }]
|
|
|
- getTownList()
|
|
|
- getList()
|
|
|
+ createMap()
|
|
|
+ mapLayers.value = [{ ...getLayerByName('意向招商地块'), visible: true, opacity: 100 }]
|
|
|
+ getTownList()
|
|
|
+ getList()
|
|
|
})
|
|
|
|
|
|
onBeforeUnmount(() => {
|
|
|
- if (bridge) {
|
|
|
- bridge.removeEventListener(listen)
|
|
|
- myBridge.bridgeContent = null
|
|
|
- }
|
|
|
+ if(bridge) {
|
|
|
+ bridge.removeEventListener(listen)
|
|
|
+ myBridge.bridgeContent = null
|
|
|
+ }
|
|
|
})
|
|
|
+function rowClick(row){
|
|
|
+ addMyGraph({
|
|
|
+ "type": "polygon",
|
|
|
+ "is_edit": false,
|
|
|
+ "is_temp": false,
|
|
|
+ "is_clear": true,
|
|
|
+ "is_goto": true,
|
|
|
+
|
|
|
+ "data": JSON.parse(row.geojson).coordinates,
|
|
|
+ })
|
|
|
+ useOtherStore().changePointSearchShow(true,{
|
|
|
+ title:"yxzsdk",
|
|
|
+ data:row
|
|
|
+ })
|
|
|
+}
|
|
|
const townList = ref([])
|
|
|
const mapLayers = ref([])
|
|
|
|
|
|
const tableData = reactive({
|
|
|
- value: [
|
|
|
- // { plannedUse: '水稻', turnArea: '1000', plotNum: '123' },
|
|
|
- // { plannedUse: '水稻', turnArea: '1000', plotNum: '123' },
|
|
|
- // { plannedUse: '水稻', turnArea: '1000', plotNum: '123' },
|
|
|
- // { plannedUse: '水稻', turnArea: '1000', plotNum: '123' },
|
|
|
- ]
|
|
|
+ value: [
|
|
|
+ // { plannedUse: '水稻', turnArea: '1000', plotNum: '123' },
|
|
|
+ // { plannedUse: '水稻', turnArea: '1000', plotNum: '123' },
|
|
|
+ // { plannedUse: '水稻', turnArea: '1000', plotNum: '123' },
|
|
|
+ // { plannedUse: '水稻', turnArea: '1000', plotNum: '123' },
|
|
|
+ ]
|
|
|
})
|
|
|
|
|
|
const form = reactive({
|
|
@@ -105,204 +137,222 @@ const form = reactive({
|
|
|
})
|
|
|
|
|
|
const panelShow = reactive({
|
|
|
- currentLayer: false,
|
|
|
+ currentLayer: false,
|
|
|
})
|
|
|
|
|
|
const toolsArr = ref([
|
|
|
- { id: 'layer', picUrl: getAssetsFile('0531/tool-layer.png') },
|
|
|
- // { id: 'search', picUrl: getAssetsFile('0531/tool-search.png') },
|
|
|
- // { id: 'position', picUrl: getAssetsFile('pages/tool-position.png') }
|
|
|
+ { id: 'layer', picUrl: getAssetsFile('0531/tool-layer.png') },
|
|
|
+ // { id: 'search', picUrl: getAssetsFile('0531/tool-search.png') },
|
|
|
+ // { id: 'position', picUrl: getAssetsFile('pages/tool-position.png') }
|
|
|
])
|
|
|
|
|
|
-function getList() {
|
|
|
- GetTdzsxzList({
|
|
|
- ghyt: form.ghyt,
|
|
|
- tdxz: form.tdxz,
|
|
|
- xz: form.xz,
|
|
|
- zdmj: form.zdmj,
|
|
|
- zxmj: form.zxmj,
|
|
|
- }).then(res => {
|
|
|
- tableData.value = res.data
|
|
|
- })
|
|
|
+function getList(){
|
|
|
+ GetTdzsxzList({
|
|
|
+ ghyt:form.ghyt,
|
|
|
+ tdxz:form.tdxz,
|
|
|
+ xz:form.xz,
|
|
|
+ zdmj:form.zdmj,
|
|
|
+ zxmj:form.zxmj,
|
|
|
+ }).then(res => {
|
|
|
+ tableData.value = res.data
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
-function getTownList() {
|
|
|
- // GetTownVillageList(1,"").then(res => {
|
|
|
- getAllTownMy().then(res => {
|
|
|
- // console.log(res);
|
|
|
- for (let item of res.data) {
|
|
|
- townList.value.push({
|
|
|
- label: item.name,
|
|
|
- value: item.name
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
+function getTownList(){
|
|
|
+ GetTownVillageList(1,"").then(res => {
|
|
|
+ // console.log(res);
|
|
|
+ for(let item of res.data){
|
|
|
+ townList.value.push({
|
|
|
+ label: item,
|
|
|
+ value: item
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
function handleToolClick(item) {
|
|
|
- switch (item.id) {
|
|
|
- case 'layer':
|
|
|
- panelShow.currentLayer = true
|
|
|
- break
|
|
|
- }
|
|
|
+ switch (item.id) {
|
|
|
+ case 'layer':
|
|
|
+ panelShow.currentLayer = true
|
|
|
+ break
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
function toggleLayerVisible(item) {
|
|
|
- item.visible = !item.visible
|
|
|
- addLayer(item, item.visible, (item.opacity / 100).toFixed(2), 'map')
|
|
|
+ item.visible = !item.visible
|
|
|
+ addLayer(item, item.visible, (item.opacity/100).toFixed(2),'map')
|
|
|
}
|
|
|
|
|
|
-function handleLayerOpacity(val, item) {
|
|
|
- addLayer(item, item.visible, (item.opacity / 100).toFixed(2), 'map')
|
|
|
+function handleLayerOpacity(val,item) {
|
|
|
+ addLayer(item, item.visible, (item.opacity/100).toFixed(2),'map')
|
|
|
}
|
|
|
|
|
|
let bridge
|
|
|
let listen
|
|
|
function createMap() {
|
|
|
- nextTick(() => {
|
|
|
- myBridge.bridgeContent = bridge = new CityGis.Bridge({
|
|
|
- id: "i_map",
|
|
|
- url: import.meta.env.VITE_APP_BASE_ADDR + "/map_widget/#/mapcmnw?theme=dark&view=2D&basemap=air",
|
|
|
- onReady: function () {
|
|
|
- },
|
|
|
- });
|
|
|
- listen = (arg) => {
|
|
|
- console.log(arg)
|
|
|
- switch (arg.action) {
|
|
|
- case "ViewComplete":
|
|
|
- locateCM()
|
|
|
- addLayer(getLayerByName('意向招商地块'))
|
|
|
- break
|
|
|
- }
|
|
|
- }
|
|
|
- bridge.addEventListener(listen)
|
|
|
- })
|
|
|
+ nextTick(() => {
|
|
|
+ myBridge.bridgeContent = bridge = new CityGis.Bridge({
|
|
|
+ id: "i_map",
|
|
|
+ url: import.meta.env.VITE_APP_BASE_ADDR+"/map_widget/#/mapcmnw?theme=dark&view=2D&basemap=air",
|
|
|
+ onReady: function () {
|
|
|
+ },
|
|
|
+ });
|
|
|
+ listen = (arg) => {
|
|
|
+ console.log(arg)
|
|
|
+ switch (arg.action) {
|
|
|
+ case "ViewComplete":
|
|
|
+
|
|
|
+ locateCM()
|
|
|
+ addLayer(getLayerByName('意向招商地块'),true,1,'map',null,`deleted not in ('y')`)
|
|
|
+ // layerQueryGet(getLayerByName('意向招商地块').url,'1=1',false,false,false)
|
|
|
+ addPointSearch()
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ bridge.addEventListener(listen)
|
|
|
+ })
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang='scss' scoped>
|
|
|
#tdzsxz {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
|
|
|
.box {
|
|
|
- width: 600px;
|
|
|
- height: 550px;
|
|
|
- position: absolute;
|
|
|
- top: 30px;
|
|
|
- left: 30px;
|
|
|
+ width: 600px;
|
|
|
+ height: 550px;
|
|
|
+ position: absolute;
|
|
|
+ top: 30px;
|
|
|
+ left: 30px;
|
|
|
}
|
|
|
|
|
|
-.pos-card-title {
|
|
|
- font-size: 22px;
|
|
|
- font-family: YSBTH;
|
|
|
- font-style: italic;
|
|
|
- color: var(--color-text-2);
|
|
|
- margin-bottom: 10px;
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
- height: 3px;
|
|
|
- background: url('../../../assets/imgs/0531/title-underline.png');
|
|
|
- background-size: cover;
|
|
|
- }
|
|
|
-}
|
|
|
+
|
|
|
|
|
|
#i_map {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- background-color: #286466;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ background-color: #286466;
|
|
|
}
|
|
|
|
|
|
.current-layer {
|
|
|
- position: absolute;
|
|
|
- width: 250px;
|
|
|
- top: 20px;
|
|
|
- right: 100px;
|
|
|
-
|
|
|
- main {
|
|
|
- padding-right: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- ul {
|
|
|
- width: 100%;
|
|
|
- min-height: 80px;
|
|
|
- max-height: 200px;
|
|
|
- overflow-y: auto;
|
|
|
-
|
|
|
- li {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- // margin-bottom: 5px;
|
|
|
-
|
|
|
- &>span {
|
|
|
- font-size: 14px;
|
|
|
- color: var(--color-text-2);
|
|
|
- }
|
|
|
-
|
|
|
- &>div {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .btn {
|
|
|
- display: inline-block;
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- cursor: pointer;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .btn-dqtc-show {
|
|
|
- background: url('../../../assets/imgs/0531/visible.png');
|
|
|
- background-size: cover;
|
|
|
- }
|
|
|
-
|
|
|
- .btn-dqtc-hide {
|
|
|
- background: url('../../../assets/imgs/0531/invisible.png');
|
|
|
- background-size: cover;
|
|
|
- }
|
|
|
-
|
|
|
- .el-slider {
|
|
|
- width: 60px;
|
|
|
- padding-right: 20px;
|
|
|
-
|
|
|
- :deep(.el-slider__button) {
|
|
|
- width: 15px;
|
|
|
- height: 15px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ position: absolute;
|
|
|
+ width: 250px;
|
|
|
+ top: 20px;
|
|
|
+ right: 100px;
|
|
|
+
|
|
|
+ main {
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ul {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 80px;
|
|
|
+ max-height: 200px;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ li {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ // margin-bottom: 5px;
|
|
|
+
|
|
|
+ &>span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: var(--color-text-2);
|
|
|
+ }
|
|
|
+
|
|
|
+ &>div {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ display: inline-block;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-dqtc-show {
|
|
|
+ background: url('../../../assets/imgs/0531/visible.png');
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-dqtc-hide {
|
|
|
+ background: url('../../../assets/imgs/0531/invisible.png');
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-slider {
|
|
|
+ width: 60px;
|
|
|
+ padding-right: 20px;
|
|
|
+
|
|
|
+ :deep(.el-slider__button) {
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.tool-box {
|
|
|
- position: absolute;
|
|
|
- right: 20px;
|
|
|
- padding: 20px 0;
|
|
|
- top: 20px;
|
|
|
- width: 60px;
|
|
|
- //height: 150px;
|
|
|
- border: 1px solid #00B259;
|
|
|
- background-color: var(--color-1);
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-evenly;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- img {
|
|
|
- cursor: pointer;
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- }
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ padding: 20px 0;
|
|
|
+ top: 20px;
|
|
|
+ width: 60px;
|
|
|
+ //height: 150px;
|
|
|
+ border: 1px solid #00B259;
|
|
|
+ background-color: var(--color-1);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.panel {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 2;
|
|
|
+}
|
|
|
+.box6 {
|
|
|
+ width: 200px;
|
|
|
+ bottom: 130px;
|
|
|
+ right: 20px;
|
|
|
+
|
|
|
+ ul {
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ i {
|
|
|
+ display: block;
|
|
|
+ margin-right: 20px;
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ border: 1px solid white;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ //color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|