|
|
@@ -12,6 +12,7 @@
|
|
|
placeholder="请输入搜索关键词..."
|
|
|
class="search-input"
|
|
|
/>
|
|
|
+ <i class="send-icon"></i>
|
|
|
<!-- 搜索结果区域 -->
|
|
|
<div v-if="searchResults.length > 0" class="search-results">
|
|
|
<div
|
|
|
@@ -25,66 +26,112 @@
|
|
|
</div>
|
|
|
<!-- 楼宇信息UI -->
|
|
|
<div class="building-information" v-if="BuildingInformationShow">
|
|
|
- <!-- title -->
|
|
|
+ <div style="position: absolute;right: 10px;padding: 5px;cursor: pointer;" @click="colseWin" title="关闭"><span>X</span></div>
|
|
|
+ <!-- title -->
|
|
|
<div class="building-information-title">
|
|
|
- {{ BuildingInformationProperties.c_resource_name }}
|
|
|
+ {{ BuildingInformationProperties.c_resource_name || BuildingInformationProperties.c_parcel_number+'地块' }}
|
|
|
</div>
|
|
|
- <!-- <div>
|
|
|
- 企业服务专员{{
|
|
|
- BuildingInformationProperties.c_building_manager_name +
|
|
|
- " " +
|
|
|
- BuildingInformationProperties.c_building_manager_phone
|
|
|
- }}
|
|
|
- </div> -->
|
|
|
- <div class="info-item">
|
|
|
- <span class="info-icon industry-icon"></span>
|
|
|
- 产业方向：{{ BuildingInformationProperties.c_industry_direction }}
|
|
|
- </div>
|
|
|
- <div class="info-item">
|
|
|
- <span class="info-icon address-icon"></span>
|
|
|
- 项目地址：{{ BuildingInformationProperties.c_address }}
|
|
|
- </div>
|
|
|
- <div class="area-stats-container">
|
|
|
- <div class="area-stat-item">
|
|
|
- <div class="circle-icon"></div>
|
|
|
- <div class="area-info">
|
|
|
- <div class="area-name">已出租面积</div>
|
|
|
- <div class="area-value">
|
|
|
- {{ BuildingInformationProperties.c_rented_area }} m²
|
|
|
- </div>
|
|
|
+ <div style="overflow-y: auto;overflow-x: hidden;max-height: 50vh;">
|
|
|
+ <!-- <div>
|
|
|
+ 企业服务专员{{
|
|
|
+ BuildingInformationProperties.c_building_manager_name +
|
|
|
+ " " +
|
|
|
+ BuildingInformationProperties.c_building_manager_phone
|
|
|
+ }}
|
|
|
+ </div> -->
|
|
|
+ <div class="info-item">
|
|
|
+ <!-- <span class="info-icon industry-icon"></span> -->
|
|
|
+
|
|
|
+ <div style="padding: 10px 0;" v-for="(item, index) in BuildingInformationProperties.cy_lable.split('、')" :key="index">
|
|
|
+ <span class="cy_lable">{{item}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="area-stat-item">
|
|
|
- <div class="circle-icon"></div>
|
|
|
- <div class="area-info">
|
|
|
- <div class="area-name">已出售面积</div>
|
|
|
- <div class="area-value">
|
|
|
- {{ BuildingInformationProperties.c_sold_area }} m²
|
|
|
+ <div class="info-item" v-if="isDataTypeFlag == 1">
|
|
|
+ <span class="info-icon phone-icon"></span>
|
|
|
+ {{ BuildingInformationProperties.c_building_manager_name }} {{ BuildingInformationProperties.c_building_manager_phone }}
|
|
|
+ </div>
|
|
|
+ <div class="info-item" v-if="isDataTypeFlag == 1">
|
|
|
+ <span class="info-icon address-icon"></span>
|
|
|
+ {{ BuildingInformationProperties.c_address }}
|
|
|
+ </div>
|
|
|
+ <div class="area-stats-container">
|
|
|
+ <div class="area-stat-item">
|
|
|
+ <!-- <div class="circle-icon"></div> -->
|
|
|
+ <div class="area-info">
|
|
|
+ <div class=""><img
|
|
|
+ :src="buildingImg"
|
|
|
+ mode="scaleToFill"
|
|
|
+ /></div>
|
|
|
+ <div class="area-name">{{isDataTypeFlag == 1 ? '已入住企业' : '土地面积(亩)'}}</div>
|
|
|
+ <div class="area-value">
|
|
|
+ {{ isDataTypeFlag == 1 ? BuildingInformationProperties.enterpriseCount: BuildingInformationProperties.c_land_area}}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="area-stat-item">
|
|
|
- <div class="circle-icon"></div>
|
|
|
- <div class="area-info">
|
|
|
- <div class="area-name">可出售面积</div>
|
|
|
- <div class="area-value">
|
|
|
- {{ BuildingInformationProperties.c_sellable_area }} m²
|
|
|
+ <div class="area-stat-item">
|
|
|
+ <!-- <div class="circle-icon"></div> -->
|
|
|
+ <div class="area-info">
|
|
|
+ <div class=""><img
|
|
|
+ :src="chartImg"
|
|
|
+ mode="scaleToFill"
|
|
|
+ /></div>
|
|
|
+ <div class="area-name">{{isDataTypeFlag == 1 ? '规上企业' : '容积率'}}</div>
|
|
|
+ <div class="area-value">
|
|
|
+ {{ isDataTypeFlag == 1 ? BuildingInformationProperties.enterpriseGsCount:BuildingInformationProperties.c_plot_ratio }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="area-stat-item">
|
|
|
+ <!-- <div class="circle-icon"></div> -->
|
|
|
+ <div class="area-info">
|
|
|
+ <div class=""><img
|
|
|
+ :src="homeImg"
|
|
|
+ mode="scaleToFill"
|
|
|
+ /></div>
|
|
|
+ <div class="area-name">{{isDataTypeFlag == 1 ? '待出租' : '限高(m)'}}</div>
|
|
|
+ <div class="area-value">
|
|
|
+ {{ isDataTypeFlag == 1 ? BuildingInformationProperties.forRentCount:BuildingInformationProperties.c_height_limit }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div>占地面积{{ BuildingInformationProperties.c_floor_area }}</div>
|
|
|
- <div>建筑面积{{ BuildingInformationProperties.c_building_area }}</div>
|
|
|
- <div>空置面积{{ BuildingInformationProperties.c_vacant_area }}</div>
|
|
|
- </div>
|
|
|
+ <div class="info-item" v-if="isDataTypeFlag == 1">
|
|
|
+ 占地面积
|
|
|
+ </div>
|
|
|
+ <div class="info-item" v-if="isDataTypeFlag == 1">
|
|
|
+ <span>{{BuildingInformationProperties.c_floor_area}}m²</span>
|
|
|
+ <span style="color: #787575cc;padding-left: 20px;"> 租金{{BuildingInformationProperties.c_rent}}</span>
|
|
|
+ </div>
|
|
|
|
|
|
- <div>
|
|
|
- <div>租金（元/平米/日）{{ BuildingInformationProperties.c_rent }}</div>
|
|
|
- <div>
|
|
|
- 物业费（元/平米/月）{{ BuildingInformationProperties.c_property_fee }}
|
|
|
+ <div class="info-item" v-if="isDataTypeFlag == 1">
|
|
|
+ 建筑面积
|
|
|
+ </div>
|
|
|
+ <div class="info-item" v-if="isDataTypeFlag == 1">
|
|
|
+ <span>{{BuildingInformationProperties.c_building_area}}m²</span>
|
|
|
+ <span style="color: #787575cc;padding-left: 20px;"> 物业费{{BuildingInformationProperties.c_property_fee}}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="info-item" v-if="isDataTypeFlag == 1">
|
|
|
+ 空置面积
|
|
|
+ </div>
|
|
|
+ <div class="info-item" v-if="isDataTypeFlag == 1">
|
|
|
+ <span>{{BuildingInformationProperties.c_vacant_area}}m²</span>
|
|
|
+ <span style="color: #787575cc;padding-left: 20px;"> 楼栋{{ BuildingInformationProperties.buildCount }}栋</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <div>
|
|
|
+ <div>占地面积{{ BuildingInformationProperties.c_floor_area }}</div>
|
|
|
+ <div>建筑面积{{ BuildingInformationProperties.c_building_area }}</div>
|
|
|
+ <div>空置面积{{ BuildingInformationProperties.c_vacant_area }}</div>
|
|
|
</div>
|
|
|
- <div>楼层{{ BuildingInformationProperties.c_floor_count }}</div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <div>租金（元/平米/日）{{ BuildingInformationProperties.c_rent }}</div>
|
|
|
+ <div>
|
|
|
+ 物业费（元/平米/月）{{ BuildingInformationProperties.c_property_fee }}
|
|
|
+ </div>
|
|
|
+ <div>楼层{{ BuildingInformationProperties.c_floor_count }}</div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -173,9 +220,16 @@ export default {
|
|
|
mapCompassVisible: false, // 指南针显示状态
|
|
|
localLng: null, // 存储地址栏定位参数
|
|
|
currentLocationMarker: null, // 当前位置标记
|
|
|
+
|
|
|
+ isMobile:false,
|
|
|
+ isDataTypeFlag:0, // 0 默认无 1 楼宇 2 地块
|
|
|
+ homeImg:require("../../public/static/image/home.png"),
|
|
|
+ chartImg:require("../../public/static/image/chart.png"),
|
|
|
+ buildingImg:require("../../public/static/image/building.png"),
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
+ this.isMobile = publicFun.terminalType()
|
|
|
this.getOauthToken();
|
|
|
// 从地址栏获取定位参数
|
|
|
this.getLocationFromUrl();
|
|
|
@@ -224,6 +278,9 @@ export default {
|
|
|
this.clearMeasureData();
|
|
|
},
|
|
|
methods: {
|
|
|
+ colseWin(){
|
|
|
+ this.BuildingInformationShow = false;
|
|
|
+ },
|
|
|
toggleLayer(layerType, show) {
|
|
|
const layerGroupName = layerType + "_polygon";
|
|
|
const layerGroup = map2DViewer.groups[layerGroupName];
|
|
|
@@ -303,13 +360,40 @@ export default {
|
|
|
|
|
|
// 创建新的图层组用于存放筛选结果
|
|
|
this.filteredLifeLayer = L.featureGroup().addTo(map2DViewer.map);
|
|
|
-
|
|
|
// 在圆圈中心添加标记点
|
|
|
L.marker(e.latlng).addTo(this.filteredLifeLayer);
|
|
|
// 筛选并渲染lifeDatas中在圆圈内的对象
|
|
|
this.renderLifeDatasInCircle(e.latlng);
|
|
|
});
|
|
|
|
|
|
+ map2DViewer.map.on("touchend", (e) => {
|
|
|
+ var now = new Date().getTime();
|
|
|
+ if (now - lastTouchTime < 500) { // 假设双击间隔小于500毫秒
|
|
|
+ // 清除上一次的圆圈和筛选结果
|
|
|
+ if (this.currentCircle) {
|
|
|
+ map2DViewer.map.removeLayer(this.currentCircle);
|
|
|
+ }
|
|
|
+ if (this.filteredLifeLayer) {
|
|
|
+ this.filteredLifeLayer.clearLayers();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 创建新的1500米半径圆圈
|
|
|
+ this.currentCircle = L.circle(e.latlng, {
|
|
|
+ color: "#ff7800",
|
|
|
+ fillColor: "#ff7800",
|
|
|
+ fillOpacity: 0.1,
|
|
|
+ radius: 1500,
|
|
|
+ }).addTo(map2DViewer.map);
|
|
|
+
|
|
|
+ // 创建新的图层组用于存放筛选结果
|
|
|
+ this.filteredLifeLayer = L.featureGroup().addTo(map2DViewer.map);
|
|
|
+ // 在圆圈中心添加标记点
|
|
|
+ L.marker(e.latlng).addTo(this.filteredLifeLayer);
|
|
|
+ // 筛选并渲染lifeDatas中在圆圈内的对象
|
|
|
+ this.renderLifeDatasInCircle(e.latlng);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
this.lifeDatas = {};
|
|
|
this.landDatas = {};
|
|
|
// 加载静态文件渲染geojson数据
|
|
|
@@ -365,9 +449,24 @@ export default {
|
|
|
}).addTo(map2DViewer.groups[groupsName + "_polygon"]);
|
|
|
|
|
|
marker.on("click", (e) => {
|
|
|
+ // console.log("wwwwww"+JSON.stringify(e));
|
|
|
this.BuildingInformationShow = true;
|
|
|
// 创建弹窗内容
|
|
|
const properties = feature.properties;
|
|
|
+
|
|
|
+ if(properties.column_name == '楼宇表'){
|
|
|
+ this.isDataTypeFlag = 1
|
|
|
+ }else{
|
|
|
+ this.isDataTypeFlag = 2
|
|
|
+ }
|
|
|
+
|
|
|
+ properties.cy_lable = '';
|
|
|
+ if(properties.c_industry_direction != undefined){
|
|
|
+ properties.cy_lable = properties.c_industry_direction
|
|
|
+ }
|
|
|
+ if(properties.content != undefined){
|
|
|
+ properties.cy_lable = properties.content
|
|
|
+ }
|
|
|
this.BuildingInformationProperties = properties;
|
|
|
// let popupContent = '<div class="custom-popup">';
|
|
|
// // 遍历属性并生成HTML
|
|
|
@@ -393,9 +492,23 @@ export default {
|
|
|
this.markers.push(marker);
|
|
|
// 点击点打开弹窗
|
|
|
polygon.on("click", (e) => {
|
|
|
+ // console.log("eeee"+JSON.stringify(e));
|
|
|
+
|
|
|
this.BuildingInformationShow = true;
|
|
|
// 创建弹窗内容
|
|
|
const properties = feature.properties;
|
|
|
+ if(properties.column_name == '楼宇表'){
|
|
|
+ this.isDataTypeFlag = 1
|
|
|
+ }else{
|
|
|
+ this.isDataTypeFlag = 2
|
|
|
+ }
|
|
|
+ properties.cy_lable = '';
|
|
|
+ if(properties.c_industry_direction != undefined){
|
|
|
+ properties.cy_lable = properties.c_industry_direction
|
|
|
+ }
|
|
|
+ if(properties.content != undefined){
|
|
|
+ properties.cy_lable = properties.content
|
|
|
+ }
|
|
|
this.BuildingInformationProperties = properties;
|
|
|
// // 创建弹窗内容
|
|
|
// const properties = feature.properties;
|
|
|
@@ -462,10 +575,18 @@ export default {
|
|
|
markers.on("click", (e) => {
|
|
|
// 创建弹窗内容
|
|
|
const properties = feature.properties;
|
|
|
- let popupContent = '<div class="custom-popup">';
|
|
|
+ let popupContent = '<div class="custom-popup" style="overflow: auto;margin: 30px 0px;height: 100%;">';
|
|
|
// 遍历属性并生成HTML
|
|
|
- for (const [key, value] of Object.entries(properties)) {
|
|
|
- popupContent += `<div class="popup-row"><span class="popup-label">${key}:</span><span class="popup-value">${value}</span></div>`;
|
|
|
+ // for (const [key, value] of Object.entries(properties)) {
|
|
|
+ // popupContent += `<div class="popup-row"><span class="popup-label">${key}:</span><span class="popup-value">${value}</span></div>`;
|
|
|
+ // }
|
|
|
+ let obj = {name:'名称',type:'类型',circle_type:'生活圈类型',set_type:'规划类型',build_area:'区域面积',county:'区县名称',town:'乡镇名称',feature_level:'行政级别',content:'内容',set_time:'规定时间',open_status:'开放状态',config_type:'配置类型',lxdh:'联系电话',address:'地址',owner:'所有者',operation_model:'操作部门'};
|
|
|
+ for (const [key, value] of Object.entries(obj)) {
|
|
|
+ let val = properties[key];
|
|
|
+ if(val == undefined || val == null || val == ''){
|
|
|
+ val = '-'
|
|
|
+ }
|
|
|
+ popupContent += `<div class="popup-row"><span class="popup-label">${value}:</span><span class="popup-value">${val}</span></div>`;
|
|
|
}
|
|
|
popupContent += "</div>";
|
|
|
|
|
|
@@ -1004,20 +1125,20 @@ export default {
|
|
|
position: absolute;
|
|
|
top: 3rem;
|
|
|
max-width: 500px;
|
|
|
- width: calc(100vw - 6rem);
|
|
|
- max-height: 50vh;
|
|
|
- z-index: 999;
|
|
|
+ width: calc(100vw - 3rem);
|
|
|
+ max-height: 60vh;
|
|
|
+ z-index: 9999;
|
|
|
border-radius: 0.5rem;
|
|
|
background: #fff;
|
|
|
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.15);
|
|
|
padding: 0.5rem;
|
|
|
overflow: hidden;
|
|
|
- overflow-y: auto;
|
|
|
+ // overflow-y: auto;
|
|
|
&-title {
|
|
|
- font-size: 1.2rem;
|
|
|
- font-weight: 500;
|
|
|
+ font-size: 1.5rem;
|
|
|
+ font-weight: bold;
|
|
|
padding: 0.5rem;
|
|
|
- border-bottom: 1px solid #eee;
|
|
|
+ // border-bottom: 1px solid #eee;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -1025,7 +1146,16 @@ export default {
|
|
|
.info-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- margin-bottom: 8px;
|
|
|
+ margin: 10px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ // justify-content: space-between;
|
|
|
+ .cy_lable{
|
|
|
+ padding: 2px 10px;
|
|
|
+ background: linear-gradient(90deg, #d2b476, #d2a469);
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.info-icon {
|
|
|
@@ -1039,12 +1169,18 @@ export default {
|
|
|
|
|
|
/* 产业方向图标 */
|
|
|
.industry-icon {
|
|
|
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"/></svg>');
|
|
|
+ background-image:url('../../public/static/image/building.svg')
|
|
|
+ //background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"/></svg>');
|
|
|
+}
|
|
|
+
|
|
|
+.phone-icon{
|
|
|
+ background-image:url('../../public/static/image/phone.svg')
|
|
|
}
|
|
|
|
|
|
/* 项目地址图标 */
|
|
|
.address-icon {
|
|
|
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>');
|
|
|
+ background-image: url('../../public/static/image/position.svg');
|
|
|
+ //background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>');
|
|
|
}
|
|
|
|
|
|
.attributeWindow {
|
|
|
@@ -1069,7 +1205,19 @@ export default {
|
|
|
transform: translateY(-50%);
|
|
|
width: 16px;
|
|
|
height: 16px;
|
|
|
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 0 0 9.5 3 6.5 6.5 0 0 0 3 9.5 6.5 6.5 0 0 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');
|
|
|
+ background-image: url('../../public/static/image/search.svg');
|
|
|
+ // background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 0 0 9.5 3 6.5 6.5 0 0 0 3 9.5 6.5 6.5 0 0 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+}
|
|
|
+.send-icon {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ background-image: url('../../public/static/image/send.svg');
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: contain;
|
|
|
}
|
|
|
@@ -1077,6 +1225,7 @@ export default {
|
|
|
width: 100%;
|
|
|
padding: 0.5rem 1rem;
|
|
|
padding-left: 36px; /* 为图标留出空间 */
|
|
|
+ padding-right: 36px; /* 为图标留出空间 */
|
|
|
border: 1px solid #ddd;
|
|
|
border-radius: 0.5rem;
|
|
|
font-size: 0.9rem;
|
|
|
@@ -1334,13 +1483,15 @@ export default {
|
|
|
|
|
|
.area-stat-item {
|
|
|
flex: 1;
|
|
|
- background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
|
|
+ // background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
|
|
+ background: #f1f5fe;
|
|
|
border-radius: 8px;
|
|
|
padding: 12px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ justify-content: center;
|
|
|
gap: 10px;
|
|
|
- min-width: 120px;
|
|
|
+ min-width: 80px;
|
|
|
}
|
|
|
|
|
|
.circle-icon {
|
|
|
@@ -1354,11 +1505,13 @@ export default {
|
|
|
}
|
|
|
|
|
|
.area-info {
|
|
|
- color: white;
|
|
|
+ // color: white;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
.area-name {
|
|
|
- font-size: 12px;
|
|
|
+ // font-size: 12px;
|
|
|
+ padding: 5px 0;
|
|
|
opacity: 0.9;
|
|
|
}
|
|
|
|
mork
