村点击
This commit is contained in:
parent
75411b8fe9
commit
e5eb1ebb6a
@ -5,19 +5,13 @@
|
||||
<div class="leftTop">
|
||||
<div class="title">
|
||||
<span>种植面积时间统计</span>
|
||||
<p
|
||||
@click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx'
|
||||
)
|
||||
"
|
||||
>
|
||||
<p @click="Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx'
|
||||
)
|
||||
">
|
||||
下载
|
||||
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
style="width: 14px; height: 14px; cursor: pointer"
|
||||
/>
|
||||
<img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
|
||||
</p>
|
||||
</div>
|
||||
<div ref="areaDiv" class="areaDiv"></div>
|
||||
@ -26,18 +20,12 @@
|
||||
<div class="leftbottom">
|
||||
<div class="title">
|
||||
<span>种植面积统计</span>
|
||||
<p
|
||||
@click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianji%20.xlsx'
|
||||
)
|
||||
"
|
||||
>
|
||||
<p @click="Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianji%20.xlsx'
|
||||
)
|
||||
">
|
||||
下载
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
style="width: 14px; height: 14px; cursor: pointer"
|
||||
/>
|
||||
<img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
|
||||
</p>
|
||||
</div>
|
||||
<div ref="typesofDiv" class="typesofDiv"></div>
|
||||
@ -89,18 +77,12 @@
|
||||
<div class="rightTop">
|
||||
<div class="title">
|
||||
<span>作物类型统计-高标准农田</span>
|
||||
<p
|
||||
@click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/81f3b011-7a5d-4a21-88aa-8ea51142e564_%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA.xlsx'
|
||||
)
|
||||
"
|
||||
>
|
||||
<p @click="Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/81f3b011-7a5d-4a21-88aa-8ea51142e564_%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA.xlsx'
|
||||
)
|
||||
">
|
||||
下载
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
style="width: 14px; height: 14px; cursor: pointer"
|
||||
/>
|
||||
<img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
|
||||
</p>
|
||||
</div>
|
||||
<div ref="farmlandDiv" class="farmlandDiv"></div>
|
||||
@ -109,27 +91,17 @@
|
||||
<div class="rightbottom">
|
||||
<div class="title">
|
||||
<span>作物类型统计-行政区划</span>
|
||||
<p
|
||||
@click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/0c0ff4cf-151a-470e-856a-b0fce0fde997_%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA.xlsx'
|
||||
)
|
||||
"
|
||||
>
|
||||
<p @click="Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/0c0ff4cf-151a-470e-856a-b0fce0fde997_%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA.xlsx'
|
||||
)
|
||||
">
|
||||
下载
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
style="width: 14px; height: 14px; cursor: pointer"
|
||||
/>
|
||||
<img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
|
||||
</p>
|
||||
</div>
|
||||
<el-select @change="selectTab(item)" v-model="value" clearable placeholder="全部">
|
||||
<el-option
|
||||
v-for="item in Township.arr"
|
||||
:key="item.properties.XZDM"
|
||||
:label="item.properties.XZMC"
|
||||
:value="item.properties.XZDM"
|
||||
/>
|
||||
<el-option v-for="item in Township.arr" :key="item.properties.XZDM" :label="item.properties.XZMC"
|
||||
:value="item.properties.XZDM" />
|
||||
</el-select>
|
||||
<div ref="ASdivisionDiv" class="ASdivision"></div>
|
||||
</div>
|
||||
@ -151,6 +123,17 @@
|
||||
<div>{{ clickInfoMap.value }}亩</div>
|
||||
<div class="cancel" @click="hiddenOverlayChart">X</div>
|
||||
</div>
|
||||
<div id="pop">
|
||||
<div v-for="(item, index) in townZuowu.label" :key="index">
|
||||
<div>{{ item.crop }}：</div>
|
||||
<div>{{ (item.Shape_Area / 666.67).toFixed(2) }} 亩</div>
|
||||
</div>
|
||||
<div v-if="townZuowu.XZQMC">
|
||||
<div>村名：</div>
|
||||
<div>{{ townZuowu.XZQMC }} </div>
|
||||
</div>
|
||||
<div class="cancel" @click="hiddenOverlayChart">X</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -357,6 +340,8 @@ function initMap() {
|
||||
|
||||
// 图层点击事件
|
||||
layerClick();
|
||||
// 蒙版
|
||||
mbHandle()
|
||||
|
||||
//加载黄岛区村级地图服务
|
||||
// Cesium.GeoJsonDataSource.load(
|
||||
@ -535,6 +520,7 @@ function getLevel(height) {
|
||||
}
|
||||
}
|
||||
|
||||
let townZuowu = ref({ label: [] })//镇的作物
|
||||
let XZDM = '';
|
||||
// 图层点击事件
|
||||
function layerClick() {
|
||||
@ -549,7 +535,6 @@ function layerClick() {
|
||||
let alti = viewer.camera.positionCartographic.height;
|
||||
let level = getLevel(alti);
|
||||
const layers = viewer.imageryLayers._layers;
|
||||
console.log('layers:', layers);
|
||||
const index = layers.findIndex(
|
||||
item =>
|
||||
item._imageryProvider._layers &&
|
||||
@ -576,13 +561,11 @@ function layerClick() {
|
||||
if (promise) {
|
||||
promise.then(data => {
|
||||
if (data.length > 0) {
|
||||
console.log('data:', data);
|
||||
let newData = data['0'];
|
||||
if (newData.properties && newData.properties.XZDM) {
|
||||
if (XZDM !== newData.properties.XZDM) {
|
||||
//防止
|
||||
XZDM = newData.properties.XZDM;
|
||||
console.log('111', newData);
|
||||
value.value = XZDM; //
|
||||
selectTab(); //
|
||||
let item = newData.data;
|
||||
@ -611,9 +594,33 @@ function layerClick() {
|
||||
`XZDM=${newData.properties.XZDM}`,
|
||||
'village_CQL'
|
||||
);
|
||||
|
||||
// 显示该镇的种植结构
|
||||
let entitys = viewer.entities._entities._array;
|
||||
for (var na = entitys.length - 1; na >= 0; na--) {
|
||||
if (entitys[na]._name && entitys[na]._name === 'point' + newData.properties.XZDM) {
|
||||
let info = entitys[na]._info
|
||||
// entitys[na].label.show = true
|
||||
townZuowu.value = info//保存数据
|
||||
showOverlayChart(movement.position); // 添加地图移动监听：使地图移动弹窗跟着移动
|
||||
viewer.scene.postRender.addEventListener(infoWindowPostRender);
|
||||
} else {
|
||||
// if (entitys[na].label) {
|
||||
// entitys[na].label.show = false
|
||||
// }
|
||||
}
|
||||
}
|
||||
// 移除村高亮
|
||||
deleteEntityByName('villageLine');
|
||||
XZQDM = ''
|
||||
} else {
|
||||
// // 已经有镇了，监听村点击
|
||||
villageClick(layers, xy, level, cartographic)
|
||||
}
|
||||
} else {
|
||||
removeWms(['village_CQL']);
|
||||
// 移除框框
|
||||
hiddenOverlayChart(); // 清除监听事件
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -624,11 +631,91 @@ function layerClick() {
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
}
|
||||
let XZQDM = ''
|
||||
// 村点击高亮
|
||||
function villageClick(layers, xy, level, cartographic) {
|
||||
const index = layers.findIndex(
|
||||
item =>
|
||||
item._imageryProvider._layers &&
|
||||
item._imageryProvider._layers === 'shuzisannong:huangdaoqu_village'
|
||||
);
|
||||
if (index > -1) {
|
||||
const providerPoint = layers[index];
|
||||
// 拿取最后一个图层
|
||||
let provider = providerPoint._imageryProvider;
|
||||
if (
|
||||
provider &&
|
||||
provider.ready &&
|
||||
provider._layers &&
|
||||
providerPoint.show === true
|
||||
) {
|
||||
xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
|
||||
let promise = provider.pickFeatures(
|
||||
xy.x,
|
||||
xy.y,
|
||||
level,
|
||||
cartographic.longitude,
|
||||
cartographic.latitude
|
||||
);
|
||||
if (promise) {
|
||||
promise.then(data => {
|
||||
if (data.length > 0) {
|
||||
let newData = data['0'];
|
||||
if (newData.properties && newData.properties.XZQDM) {
|
||||
if (XZQDM !== newData.properties.XZQDM) {
|
||||
//防止
|
||||
XZQDM = newData.properties.XZQDM;
|
||||
let item = newData.data;
|
||||
// 移除高亮
|
||||
deleteEntityByName('villageLine');
|
||||
// 高亮边界
|
||||
addBoundaryHandle(
|
||||
item.geometry.coordinates,
|
||||
'villageLine',
|
||||
'yellow'
|
||||
);
|
||||
// townZuowu.value = info//保存数据
|
||||
|
||||
// 后插和村
|
||||
if (newData.properties.XZQDM === '370211104217') {
|
||||
// console.log('后河岔村委会')
|
||||
const rectangle = Cesium.Rectangle.fromDegrees(
|
||||
item.bbox[0],
|
||||
item.bbox[1],
|
||||
item.bbox[2],
|
||||
item.bbox[3]
|
||||
);
|
||||
const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
|
||||
let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
|
||||
let latitude = Cesium.Math.toDegrees(center.latitude);
|
||||
let info = {
|
||||
lon: longitude,
|
||||
lat: latitude,
|
||||
...item.properties,
|
||||
// XZQMC
|
||||
label: [
|
||||
{ crop: "茶叶", Shape_Area: 2820 },
|
||||
{ crop: "大豆", Shape_Area: 2767 },
|
||||
{ crop: "花生", Shape_Area: 62356 },
|
||||
{ crop: "蓝莓", Shape_Area: 5443 },
|
||||
{ crop: "地瓜", Shape_Area: 897 },
|
||||
{ crop: "小麦", Shape_Area: 20111 },
|
||||
]
|
||||
}
|
||||
townZuowu.value = info//保存数据
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 添加村
|
||||
// CQL_FILTER:筛选的语句
|
||||
// customName地图服务自定义属性名
|
||||
function addvillage(CQL_FILTER, customName) {
|
||||
console.log('222');
|
||||
let map2 = new Cesium.WebMapServiceImageryProvider({
|
||||
url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
|
||||
layers: 'shuzisannong:huangdaoqu_village', //图层名
|
||||
@ -1778,6 +1865,108 @@ function ASdivision() {
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------------------------------------*/
|
||||
function getAreaFenlei() {
|
||||
let fl = fenleiRef.value
|
||||
console.log('fl:', fl);
|
||||
axios({
|
||||
url: serverAPI.geoserverUrl + '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
|
||||
}).then(res => {
|
||||
console.log('res1111:', res);
|
||||
let data = res.data.features;
|
||||
data.forEach((item, index) => {
|
||||
const rectangle = Cesium.Rectangle.fromDegrees(
|
||||
item.bbox[0],
|
||||
item.bbox[1],
|
||||
item.bbox[2],
|
||||
item.bbox[3]
|
||||
);
|
||||
const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
|
||||
let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
|
||||
let latitude = Cesium.Math.toDegrees(center.latitude);
|
||||
|
||||
if (item.properties.XZDM === '370211011') {
|
||||
//灵山卫街道
|
||||
longitude = 120.0863;
|
||||
latitude = 35.941;
|
||||
} else if (item.properties.XZDM === '370211003') {
|
||||
//薛家岛街道
|
||||
longitude = 120.243682;
|
||||
latitude = 35.97123201;
|
||||
}
|
||||
const townData = fl[item.properties.XZMC]
|
||||
let label = []
|
||||
if (townData) {
|
||||
label = townData.map((it, inex) => {
|
||||
// let dd = `${it.properties.crop} ：${(it.properties.Shape_Area / 666.67).toFixed(2)} 亩`
|
||||
// return dd
|
||||
return it.properties
|
||||
})
|
||||
}
|
||||
// label = label.join(' ')
|
||||
// console.log('label:', index, label,fl[item.properties.XZMC],item.properties.XZMC)
|
||||
// 添加点
|
||||
viewer.entities.add({
|
||||
name: 'point' + item.properties.XZDM,
|
||||
position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
|
||||
point: new Cesium.PointGraphics({
|
||||
show: true,
|
||||
pixelSize: 10,
|
||||
// heightReference: Cesium.HeightReference.NONE,
|
||||
color: Cesium.Color.fromBytes(30, 144, 255),
|
||||
outlineColor: new Cesium.Color(0, 0, 0, 0),
|
||||
outlineWidth: 0,
|
||||
disableDepthTestDistance: Number.POSITIVE_INFINITY, //去掉地形遮挡
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,//贴地
|
||||
}),
|
||||
// label: {
|
||||
// show: false,
|
||||
// text: label.join(' '),
|
||||
// font: '12px sans-serif',
|
||||
// fillColor: Cesium.Color.WHITE,
|
||||
// showBackground: true,
|
||||
// backgroundColor: Cesium.Color.fromCssColorString('rgba(2, 31, 26, 0.6)'),//背景颜色
|
||||
// // style: Cesium.LabelStyle.FILL,
|
||||
// outlineWidth: 3,
|
||||
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
// horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//水平位置
|
||||
// pixelOffset: new Cesium.Cartesian2(-80, -10),
|
||||
// },
|
||||
info: {
|
||||
label: label,
|
||||
...item.properties,
|
||||
// 经纬度，以便监听
|
||||
lon: longitude,
|
||||
lat: latitude,
|
||||
},
|
||||
});
|
||||
|
||||
});
|
||||
}).catch(err => { })
|
||||
|
||||
}
|
||||
let fenleiRef = ref({})
|
||||
function mbHandle() {
|
||||
axios({
|
||||
url: serverAPI.geoserverUrl + '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afenlei&maxFeatures=137&outputFormat=application%2Fjson',
|
||||
}).then(res => {
|
||||
let features = res.data.features
|
||||
let town = {}
|
||||
// 按镇分类
|
||||
features.forEach(item => {
|
||||
let key = item.properties.town
|
||||
if (town[key]) {
|
||||
town[key].push(item)
|
||||
} else {
|
||||
town[key] = [item]
|
||||
}
|
||||
})
|
||||
fenleiRef.value = town
|
||||
getAreaFenlei()
|
||||
|
||||
}).catch(err => { })
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*------------------------------------------柱状图--------------------------------------------*/
|
||||
// function getJson() {
|
||||
@ -1930,28 +2119,27 @@ function ASdivision() {
|
||||
// .catch(err => {});
|
||||
// }
|
||||
// 地图移动时弹窗跟随
|
||||
// function infoWindowPostRender() {
|
||||
// // let viewer = viewers.value;
|
||||
// console.log('clickInfoMap.value:', clickInfoMap.value);
|
||||
// if (clickInfoMap.value && clickInfoMap.value.lon && clickInfoMap.value.lat) {
|
||||
// //经纬度转为世界坐标
|
||||
// const gisPosition = Cesium.Cartesian3.fromDegrees(
|
||||
// Number(clickInfoMap.value.lon),
|
||||
// Number(clickInfoMap.value.lat),
|
||||
// 0
|
||||
// ); //转化为屏幕坐标
|
||||
// var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
|
||||
// viewer.scene,
|
||||
// gisPosition
|
||||
// );
|
||||
function infoWindowPostRender() {
|
||||
// let viewer = viewers.value;
|
||||
if (townZuowu.value && townZuowu.value.lon && townZuowu.value.lat) {
|
||||
//经纬度转为世界坐标
|
||||
const gisPosition = Cesium.Cartesian3.fromDegrees(
|
||||
Number(townZuowu.value.lon),
|
||||
Number(townZuowu.value.lat),
|
||||
0
|
||||
); //转化为屏幕坐标
|
||||
var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
|
||||
viewer.scene,
|
||||
gisPosition
|
||||
);
|
||||
|
||||
// if (Cesium.defined(windowPosition)) {
|
||||
// const pop = document.getElementById('popup');
|
||||
// pop.style.top = windowPosition.y - 10 + 'px';
|
||||
// pop.style.left = windowPosition.x + 10 + 'px';
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
if (Cesium.defined(windowPosition)) {
|
||||
const pop = document.getElementById('pop');
|
||||
pop.style.top = windowPosition.y - 10 + 'px';
|
||||
pop.style.left = windowPosition.x + 10 + 'px';
|
||||
}
|
||||
}
|
||||
}
|
||||
// function mapClick() {
|
||||
// // let viewer = viewers.value;
|
||||
// viewer.screenSpaceEventHandler.setInputAction(function (movement) {
|
||||
@ -1993,22 +2181,21 @@ function ASdivision() {
|
||||
// }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
// }
|
||||
|
||||
// // 隐藏弹窗
|
||||
// function hiddenOverlayChart() {
|
||||
// // let viewer = viewers.value;
|
||||
// const pop = document.getElementById('popup');
|
||||
// pop.style.display = 'none'; // 清除监听事件
|
||||
// viewer.scene.postRender.removeEventListener(infoWindowPostRender);
|
||||
// }
|
||||
// //显示弹窗
|
||||
// function showOverlayChart(position) {
|
||||
// const pop = document.getElementById('popup');
|
||||
// pop.style.display = 'flex';
|
||||
// pop.style.position = 'absolute';
|
||||
// pop.style.top = position.y - 10 + 'px';
|
||||
// pop.style.left = position.x + 10 + 'px';
|
||||
// pop.style.zIndex = 99;
|
||||
// }
|
||||
// 隐藏弹窗
|
||||
function hiddenOverlayChart() {
|
||||
const pop = document.getElementById('pop');
|
||||
pop.style.display = 'none'; // 清除监听事件
|
||||
viewer.scene.postRender.removeEventListener(infoWindowPostRender);
|
||||
}
|
||||
//显示弹窗
|
||||
function showOverlayChart(position) {
|
||||
const pop = document.getElementById('pop');
|
||||
pop.style.display = 'block';
|
||||
pop.style.position = 'absolute';
|
||||
pop.style.top = position.y - 10 + 'px';
|
||||
pop.style.left = position.x + 10 + 'px';
|
||||
pop.style.zIndex = 99;
|
||||
}
|
||||
|
||||
// function random(min, max) {
|
||||
// return Math.floor(Math.random() * (max - min)) + min;
|
||||
@ -2050,11 +2237,9 @@ $height: calc(100vh - 100px);
|
||||
height: 25px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(16, 111, 111, 1) 0%,
|
||||
rgba(47, 214, 214, 1) 100%
|
||||
);
|
||||
background: linear-gradient(180deg,
|
||||
rgba(16, 111, 111, 1) 0%,
|
||||
rgba(47, 214, 214, 1) 100%);
|
||||
border: 1.5px solid rgba(23, 194, 180, 1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -2115,6 +2300,7 @@ $height: calc(100vh - 100px);
|
||||
flex-direction: column;
|
||||
padding: 5px 10px 5px 10px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
|
||||
.Crops {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
@ -2126,16 +2312,16 @@ $height: calc(100vh - 100px);
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
opacity: 1;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(21, 173, 148, 0.1) 0%,
|
||||
rgba(21, 173, 148, 0) 100%
|
||||
);
|
||||
background: linear-gradient(90deg,
|
||||
rgba(21, 173, 148, 0.1) 0%,
|
||||
rgba(21, 173, 148, 0) 100%);
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.el-checkbox-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -2308,7 +2494,7 @@ $height: calc(100vh - 100px);
|
||||
// align-items: flex-end;
|
||||
padding: 30px 8px 20px 8px;
|
||||
|
||||
& > div:nth-child(1) {
|
||||
&>div:nth-child(1) {
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
@ -2316,7 +2502,7 @@ $height: calc(100vh - 100px);
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
& > div:nth-child(2) {
|
||||
&>div:nth-child(2) {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
width: 129px;
|
||||
height: 24px;
|
||||
@ -2339,6 +2525,50 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-select__popper.el-popper) {
|
||||
#pop {
|
||||
border-radius: 5px;
|
||||
background: rgba(2, 31, 26, 0.6);
|
||||
display: none;
|
||||
// justify-content: flex-start;
|
||||
// align-items: flex-end;
|
||||
padding: 30px 8px 20px 8px;
|
||||
|
||||
.cancel {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 5px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&>div {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&>div:nth-child(1) {
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
// margin-top: 20px;
|
||||
line-height: 24px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&>div:nth-child(2) {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
width: 129px;
|
||||
height: 24px;
|
||||
opacity: 1;
|
||||
border-radius: 2px;
|
||||
background: rgba(217, 231, 255, 0.2);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2px 10px 2px 10px;
|
||||
// margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-select__popper.el-popper) {}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user