hbao
vor 3 Jahren
1 geänderte Dateien mit 689 neuen und 3 gelöschten Zeilen
+ 689
- 3
src/views/homesteadSurvey/list.vue
Datei anzeigen
| @@ -388,6 +388,57 @@ | |||
| </van-search>--> | |||
| <div id="mapWrapAll" style="width: 100%;height: 100vh"></div> | |||
| <div id="info" style="display: none"></div> | |||
| <!--搜索栏目--> | |||
| <div class="searchBar_wrap"> | |||
| <div class="searchBar_area"> | |||
| <div class="bar_icon"></div> | |||
| <div class="bar_ipt"> | |||
| <input | |||
| type="text" | |||
| v-model="seachText" | |||
| placeholder="请输入宗地或权利人信息" | |||
| /> | |||
| </div> | |||
| <div id="query" class="bar_text">搜索</div> | |||
| </div> | |||
| </div> | |||
| <!--点击房地-显示的搜索---> | |||
| <div class="landHomestead_wrap"> | |||
| <div class="landHomestead_search"> | |||
| <div class="bar_icon"></div> | |||
| <div class="bar_ipt"> | |||
| <input | |||
| type="text" | |||
| v-model="seachText" | |||
| placeholder="请输入宗地或权利人信息" | |||
| /> | |||
| </div> | |||
| <div class="bar_text" @click="toggleSearch">搜索</div> | |||
| </div> | |||
| <div class="landHomestead_body"> | |||
| <!--0-农房--> | |||
| <div class="body_flex"> | |||
| <div class="attribute" @click="houseLandLookInfo('show', 'house')"> | |||
| <div class="names">1111</div> | |||
| <div class="address">1111</div> | |||
| <div class="nature">性质：1111</div> | |||
| </div> | |||
| <div class="distance" @click="houseLandLookInfo('show', 'house')"> | |||
| <div class="size">1111</div> | |||
| <div class="probably">大约111㎡</div> | |||
| </div> | |||
| <div class="others"> | |||
| <div class="information"> | |||
| <div class="status_text">111</div> | |||
| </div> | |||
| <div class="editor"> | |||
| <div class="editor_icon" @click="editnfdInfo"></div> | |||
| <div class="delete_icon" @click="deletefdInfo"></div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!--图层--> | |||
| <div class="rightZoom_wrap"> | |||
| <img src="../../assets/images/housesteadSurvey/tool1.png"> | |||
| @@ -1109,6 +1160,12 @@ | |||
| checkAllFlag: false,//全选判断标识 | |||
| CheckedAllArr: [],//全选数组 | |||
| dataList:[], | |||
| //搜索---start | |||
| seachText: "", | |||
| selectionIconShow: false, | |||
| //搜索栏目-操作栏显隐 | |||
| searchBarOperVisbile: false, | |||
| //搜索---end | |||
| //地图使用 --end | |||
| }; | |||
| }, | |||
| @@ -1704,13 +1761,15 @@ | |||
| // map.addLayer(zhenTc); | |||
| //镇边界查询开始 ------------------------------end | |||
| //村边界查询开始 ------------------------------start | |||
| console.log(that.$cookies.get("item").deptName); | |||
| var cql_filter = "ZLDWMC='" + that.$cookies.get("item").deptName + "'"; | |||
| var cunTc= new ol.layer.Tile({ | |||
| source: new ol.source.TileWMS({ | |||
| url: "http://116.255.223.226:8080/geoserver/zjd_dc/wms", | |||
| params: { | |||
| LAYERS: 'zjd_dc:t_house_survey_border_village', | |||
| TILED: true, | |||
| //cql_filter: cql_filter, | |||
| cql_filter: cql_filter, | |||
| SRID: 3857, | |||
| }, | |||
| }), | |||
| @@ -1723,7 +1782,7 @@ | |||
| request: "GetFeature", | |||
| typename: "zjd_dc:t_house_survey_border_village", | |||
| //featureNS: 'nsgk_hc',//命名空间 URI | |||
| //cql_filter: cql_filter, | |||
| cql_filter: cql_filter, | |||
| //featurePrefix: 'nationalwater',//工作区名称 | |||
| //featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开 | |||
| outputFormat: "application/json", | |||
| @@ -1739,6 +1798,7 @@ | |||
| method: "POST", // *GET, POST, PUT, DELETE, etc. | |||
| }) | |||
| .then((res) => { | |||
| console.log(res); | |||
| var geojsonmap = res.json(); | |||
| return geojsonmap; | |||
| }) | |||
| @@ -2277,6 +2337,227 @@ | |||
| // }); | |||
| // | |||
| //地图定义 | |||
| var delete_map = ["mapZjd", "mapZrz","mapFsss"]; | |||
| //按照查询条件人名 定位地图-----------------start | |||
| $("#query").on("click", function () { | |||
| /** | |||
| * @api wfs服务空间查询 | |||
| * @param {*} wfsurl | |||
| * @param {*} srsName | |||
| * @param {*} typeName | |||
| * @param {*} drawType | |||
| * @param {option 可选} geometryField | |||
| */ | |||
| var val = that.seachText; | |||
| if (val == "") { | |||
| alert("请填写查询条件在查询"); | |||
| } else { | |||
| //分类查询查询农地、农房 | |||
| var difang; | |||
| //查询条件 | |||
| var cql_filter; | |||
| console.log(this.$cookies); | |||
| //var cun = _this.villageDataObj.deptName; | |||
| difang = ["zjd_dc:t_house_survey_zjdzd", "zjd_dc:t_house_survey_zrz","zjd_dc:t_house_survey_fsss"]; | |||
| var tach = 0; | |||
| var once = 0; | |||
| for (var i = 0; i < difang.length; i++) { | |||
| map.removeLayer(delete_map[i]); | |||
| // 数字验证！ | |||
| var reg = /\d/; | |||
| //验证汉子 | |||
| //var han = /^[\u4e00-\u9fa5]+$/; | |||
| if (reg.test(val)) { | |||
| //循环判断查询条件 | |||
| cql_filter = "XH='" + val + "'" + "and dept_name='" + cun + "'"; | |||
| } else { | |||
| //循环判断查询条件 | |||
| if (difang[i] == "zjd_dc:t_house_survey_zjdzd") { | |||
| cql_filter = "zjddm='" + val + "'" + "and dept_name='" + cun + "'"; | |||
| } else if(difang[i] == "zjd_dc:t_house_survey_zrz") { | |||
| cql_filter = "zjddm='" + val + "'" + "and dept_name='" + cun + "'"; | |||
| } else if(difang[i] == "zjd_dc:t_house_survey_fsss") { | |||
| cql_filter = "zjddm='" + val + "'" + "and dept_name='" + cun + "'"; | |||
| } | |||
| } | |||
| //for(var i=0; i< difang.length; i++){ | |||
| //cql_filter = "CM='"+cun +"'"+ "and XZQK='待流转待盘活'"; | |||
| //图层加载 | |||
| //业务图层 wms服务 | |||
| delete_map[i] = new ol.layer.Tile({ | |||
| source: new ol.source.TileWMS({ | |||
| //url: 'http://192.168.31.150:8888/geoserver/mywork_mysql/wms', | |||
| url: "http://116.255.223.226:8080/geoserver/nsgk_hc/wms", | |||
| //url: 'http://localhost:8888/geoserver/mywork_mysql/wms', | |||
| //url: 'http://localhost:8888/geoserver/new_shp/wms', | |||
| params: { | |||
| LAYERS: difang[i], | |||
| //'LAYERS': 'new_shp:new_shp_all', | |||
| TILED: true, | |||
| cql_filter: cql_filter, | |||
| SRID: 3857, | |||
| }, | |||
| }), | |||
| }); | |||
| //} | |||
| //定位查询位置 | |||
| let param_dw = { | |||
| srsName: "EPSG:3857", | |||
| service: "WFS", | |||
| version: "1.0.0", | |||
| request: "GetFeature", | |||
| typename: difang[i], | |||
| //featureNS: 'nsgk_hc',//命名空间 URI | |||
| cql_filter: cql_filter, | |||
| //featurePrefix: 'nationalwater',//工作区名称 | |||
| //featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开 | |||
| outputFormat: "application/json", | |||
| //filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值 | |||
| }; | |||
| let url_dw = "http://116.255.223.226:8080/geoserver/nsgk_hc/wfs"; //wfsurl; | |||
| url_dw = url_dw + "?"; | |||
| for (let key in param_dw) { | |||
| url_dw = url_dw + key + "=" + param_dw[key] + "&"; | |||
| } | |||
| url_dw = url_dw.substr(0, url_dw.length - 1); | |||
| fetch(url_dw, { | |||
| method: "POST", // *GET, POST, PUT, DELETE, etc. | |||
| }) | |||
| .then((res) => { | |||
| var geojsonmap = res.json(); | |||
| return geojsonmap; | |||
| }) | |||
| .then((data) => { | |||
| tach = tach + 1; | |||
| if (data.features != null && data.features != "") { | |||
| //var datamap = data.bbox; | |||
| var datamap = data.features[0].bbox; | |||
| map.getView().animate({ | |||
| // 只设置需要的属性即可 | |||
| center: datamap, // 中心点 | |||
| zoom: 17, // 缩放级别 | |||
| rotation: undefined, // 缩放完成view视图旋转弧度 | |||
| duration: 1000, // 缩放持续时间，默认不需要设置 | |||
| }); | |||
| //特效动画实现 -----------------------------start | |||
| if (tach == 1 && once == 0) { | |||
| texiao_layer_fang = new ol.layer.Vector({ | |||
| source: new ol.source.Vector(), | |||
| }); | |||
| map.addLayer(texiao_layer_fang); | |||
| var center = ol.extent.getCenter(datamap); //获取边界区域的中心位置 | |||
| var circle = new ol.Feature({ | |||
| geometry: new ol.geom.Point(center), //ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857') //投影坐标转为地理坐标 | |||
| }); | |||
| //var out =new ol.coordinate.Coordinate(datamap); | |||
| //var extent = ol.extent.boundingExtent(feature.getGeometry().getCoordinates()[datamap]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy] | |||
| //var center = ol.extent.getCenter(extent); //获取边界区域的中心位置 | |||
| //map.getView().setCenter(center); //设置当前地图的显示中心位置 | |||
| circle.setStyle( | |||
| new ol.style.Style({ | |||
| image: new ol.style.Circle({ | |||
| radius: 0, | |||
| stroke: new ol.style.Stroke({ | |||
| color: "yellow", | |||
| size: 1, | |||
| }), | |||
| }), | |||
| }) | |||
| ); | |||
| texiao_layer_fang.getSource().addFeature(circle); | |||
| // 关键的地方在此：监听postcompose事件，在里面重新设置circle的样式 | |||
| var radius = 0; | |||
| map.on("postcompose", function () { | |||
| // 增大半径，最大20 | |||
| radius++; | |||
| radius = radius % 10; | |||
| // 设置样式 | |||
| circle.setStyle( | |||
| new ol.style.Style({ | |||
| image: new ol.style.Circle({ | |||
| radius: radius, | |||
| stroke: new ol.style.Stroke({ | |||
| color: "yellow", | |||
| size: 1, | |||
| }), | |||
| }), | |||
| }) | |||
| ); | |||
| }); | |||
| } else { | |||
| texiao_layer_di = new ol.layer.Vector({ | |||
| source: new ol.source.Vector(), | |||
| }); | |||
| map.addLayer(texiao_layer_di); | |||
| var center = ol.extent.getCenter(datamap); //获取边界区域的中心位置 | |||
| var circle = new ol.Feature({ | |||
| geometry: new ol.geom.Point(center), //ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857') //投影坐标转为地理坐标 | |||
| }); | |||
| //var out =new ol.coordinate.Coordinate(datamap); | |||
| //var extent = ol.extent.boundingExtent(feature.getGeometry().getCoordinates()[datamap]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy] | |||
| //var center = ol.extent.getCenter(extent); //获取边界区域的中心位置 | |||
| //map.getView().setCenter(center); //设置当前地图的显示中心位置 | |||
| circle.setStyle( | |||
| new ol.style.Style({ | |||
| image: new ol.style.Circle({ | |||
| radius: 0, | |||
| stroke: new ol.style.Stroke({ | |||
| color: "yellow", | |||
| size: 1, | |||
| }), | |||
| }), | |||
| }) | |||
| ); | |||
| texiao_layer_di.getSource().addFeature(circle); | |||
| // 关键的地方在此：监听postcompose事件，在里面重新设置circle的样式 | |||
| var radius = 0; | |||
| map.on("postcompose", function () { | |||
| // 增大半径，最大20 | |||
| radius++; | |||
| radius = radius % 10; | |||
| // 设置样式 | |||
| circle.setStyle( | |||
| new ol.style.Style({ | |||
| image: new ol.style.Circle({ | |||
| radius: radius, | |||
| stroke: new ol.style.Stroke({ | |||
| color: "yellow", | |||
| size: 1, | |||
| }), | |||
| }), | |||
| }) | |||
| ); | |||
| }); | |||
| } | |||
| //特效动画实现 -----------------------------end | |||
| } else if (tach == 1) { | |||
| once = once + 1; | |||
| } else { | |||
| if (tach == 2 && once == 1) { | |||
| alert("没有找到相关人员农房农地信息"); | |||
| } | |||
| } | |||
| }) | |||
| .catch((error) => { | |||
| console.log("【异常】", error); | |||
| }); | |||
| map.addLayer(delete_map[i]); | |||
| } | |||
| } | |||
| }); | |||
| //按照查询 定位地图-----------------end | |||
| // //获取类型开始 侧面-----------------------------------------------------------------start | |||
| $("#area").click(function () { | |||
| console.log("进入测面"); | |||
| @@ -2554,7 +2835,7 @@ | |||
| request: "GetFeature", | |||
| typename: "zjd_dc:t_house_survey_border_village", | |||
| //featureNS: 'nsgk_hc',//命名空间 URI | |||
| //cql_filter: cql_filter, | |||
| cql_filter: cql_filter, | |||
| //featurePrefix: 'nationalwater',//工作区名称 | |||
| //featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开 | |||
| outputFormat: "application/json", | |||
| @@ -2792,6 +3073,7 @@ | |||
| } | |||
| }); | |||
| let cloneObj = JSON.parse(JSON.stringify(obj)); | |||
| that.dataSj = | |||
| that.mapZjdData = cloneObj; | |||
| } else if($("#info .featureInfo .featureInfo").text() == "t_house_survey_zrz"){ | |||
| let obj = {}; | |||
| @@ -3449,7 +3731,82 @@ | |||
| } | |||
| } | |||
| }, | |||
| //地图查询 | |||
| toggleSearch() { | |||
| $("#query").trigger("click"); | |||
| }, | |||
| //显示和隐藏详情 | |||
| houseLandLookInfo(type, status) { | |||
| if (type == "show") { | |||
| this.houseLandLookAnmitFun("show"); | |||
| } else { | |||
| this.houseLandLookAnmitFun("hide"); | |||
| } | |||
| }, | |||
| //显示农地\农房详情 动画 | |||
| houseLandLookAnmitFun(type) { | |||
| if (type == "show") { | |||
| this.landHomesteadDetailsVisibile = true; | |||
| $(".landHomesteadDetails_wrap").css({ bottom: "-100vh" }); | |||
| $(".landHomesteadDetails_wrap").animate( | |||
| { | |||
| bottom: "0", | |||
| }, | |||
| 300 | |||
| ); | |||
| } else { | |||
| $(".landHomesteadDetails_wrap").css({ bottom: "0" }); | |||
| $(".landHomesteadDetails_wrap").animate( | |||
| { | |||
| bottom: "-100vh", | |||
| }, | |||
| 300 | |||
| ); | |||
| setTimeout(() => { | |||
| this.landHomesteadDetailsVisibile = false; | |||
| }, 300); | |||
| } | |||
| }, | |||
| //编辑农地信息 | |||
| editnfdInfo(type) { | |||
| this.currentType = 1; | |||
| this.farmlandEditSwitchVisbuleFun("hide"); | |||
| this.landHomesteadEditVisbileFun("show"); | |||
| }, | |||
| //删除农地信息 | |||
| deletefdInfo() { | |||
| this.$dialog | |||
| .confirm({ | |||
| title: "确认执行删除操作？", | |||
| message: "删除后内容不可恢复", | |||
| }) | |||
| .then(() => { | |||
| console.log(this.farmhouseStatus); | |||
| if (this.farmhouseStatus == 0) { | |||
| //农房 | |||
| // houseRemove(this.houseInfoList.id).then((res) => { | |||
| // if (res.code == 200) { | |||
| // this.hideEditNav(); | |||
| // // this.tGeoOrganization.orgCode = this.houseInfoList.orgCode; | |||
| // // coordinatesUpdateGeo(this.tGeoOrganization).then((res) => {}); | |||
| // } | |||
| // }); | |||
| } else { | |||
| //农地 | |||
| // landRemove(this.landInfoList.id).then((res) => { | |||
| // if (res.code == 200) { | |||
| // this.hideEditNav(); | |||
| // // this.tGeoOrganization.orgCode = this.landInfoList.orgCode; | |||
| // // coordinatesUpdateGeo(this.tGeoOrganization).then((res) => {}); | |||
| // } | |||
| // }); | |||
| } | |||
| }) | |||
| .catch(() => { | |||
| // on cancel | |||
| }); | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||
| @@ -3764,4 +4121,333 @@ | |||
| border: 1px solid darkgray; | |||
| } | |||
| .van-sticky{position: fixed;top: 0;right: 0; left: 0;z-index: 9999;} | |||
| .searchBar_wrap { | |||
| // display: none; | |||
| display: flex; | |||
| position: fixed; | |||
| bottom: 0%; | |||
| left: 0; | |||
| width: 100%; | |||
| padding: 28px 16px 28px 13px; | |||
| background: #fff; | |||
| border-top-left-radius: 15px; | |||
| border-top-right-radius: 15px; | |||
| .actionBar_wrap { | |||
| display: flex; | |||
| position: absolute; | |||
| top: 0; | |||
| left: 0; | |||
| width: 100%; | |||
| height: 100%; | |||
| background: #fff; | |||
| border-top-left-radius: 15px; | |||
| border-top-right-radius: 15px; | |||
| .m_list { | |||
| flex: 1; | |||
| display: flex; | |||
| justify-content: center; /* 相对父元素水平居中 */ | |||
| align-items: center; /* 子元素相对父元素垂直居中 */ | |||
| .tensile, | |||
| .positioning, | |||
| .spacing, | |||
| .scale { | |||
| width: 76px; | |||
| height: 72px; | |||
| background: #ffffff; | |||
| border-radius: 8px; | |||
| box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.16); | |||
| .icon { | |||
| width: 76px; | |||
| height: 72px; | |||
| } | |||
| &.active { | |||
| background: #333; | |||
| &.tensile { | |||
| .icon { | |||
| background: url("../../assets/images/homestead/operation/tensile_active.png") | |||
| center center no-repeat; | |||
| background-size: 38px 50px; | |||
| } | |||
| } | |||
| &.positioning { | |||
| .icon { | |||
| background: url("../../assets/images/homestead/operation/positioning_active.png") | |||
| center center no-repeat; | |||
| background-size: 38px 48px; | |||
| } | |||
| } | |||
| &.spacing { | |||
| .icon { | |||
| background: url("../../assets/images/homestead/operation/spacing_active.png") | |||
| center center no-repeat; | |||
| background-size: 46px 46px; | |||
| } | |||
| } | |||
| &.scale { | |||
| .icon { | |||
| background: url("../../assets/images/homestead/operation/scale_active.png") | |||
| center center no-repeat; | |||
| background-size: 48px 48px; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .tensile { | |||
| .icon { | |||
| background: url("../../assets/images/homestead/operation/tensile.png") | |||
| center center no-repeat; | |||
| background-size: 38px 50px; | |||
| } | |||
| } | |||
| .positioning { | |||
| .icon { | |||
| background: url("../../assets/images/homestead/operation/positioning.png") | |||
| center center no-repeat; | |||
| background-size: 38px 48px; | |||
| } | |||
| } | |||
| .spacing { | |||
| .icon { | |||
| background: url("../../assets/images/homestead/operation/spacing.png") | |||
| center center no-repeat; | |||
| background-size: 46px 46px; | |||
| } | |||
| } | |||
| .scale { | |||
| .icon { | |||
| background: url("../../assets/images/homestead/operation/scale.png") | |||
| center center no-repeat; | |||
| background-size: 48px 48px; | |||
| } | |||
| } | |||
| .closes { | |||
| background: url("../../assets/images/homestead/searchBar_close.png") | |||
| no-repeat; | |||
| background-size: 100% 100%; | |||
| width: 72px; | |||
| height: 72px; | |||
| &.gray { | |||
| background: url("../../assets/images/homestead/searchBar_close_gray.png") | |||
| no-repeat; | |||
| background-size: 100% 100%; | |||
| } | |||
| } | |||
| .correct { | |||
| background: url("../../assets/images/homestead/searchBar_save.png") | |||
| no-repeat; | |||
| background-size: 100% 100%; | |||
| width: 72px; | |||
| height: 72px; | |||
| } | |||
| } | |||
| } | |||
| .searchBar_area { | |||
| flex: 1; | |||
| height: 80px; | |||
| background: #f1f1f1; | |||
| border: 1px solid #dfdfdf; | |||
| border-radius: 10px; | |||
| padding: 0 28px; | |||
| display: flex; | |||
| .bar_icon { | |||
| width: 50px; | |||
| height: 50px; | |||
| background: url("../../assets/images/homestead/searchBar_bar.png") | |||
| center center no-repeat; | |||
| background-size: 100% 100%; | |||
| margin-top: 14px; | |||
| margin-right: 15px; | |||
| } | |||
| .bar_ipt { | |||
| flex: 1; | |||
| input { | |||
| width: 100%; | |||
| height: 100%; | |||
| background: none; | |||
| border: 0 none; | |||
| font-size: 32px; | |||
| } | |||
| } | |||
| .bar_text { | |||
| flex: 0 0 80px; | |||
| font-size: 32px; | |||
| color: #333333; | |||
| font-family: PingFang SC, PingFang SC-Regular; | |||
| font-weight: 400; | |||
| display: flex; | |||
| justify-content: center; /* 相对父元素水平居中 */ | |||
| align-items: center; /* 子元素相对父元素垂直居中 */ | |||
| } | |||
| } | |||
| .searchBar_more { | |||
| flex: 0 0 80px; | |||
| background: url("../../assets/images/homestead/searchBar_add.png") center | |||
| center no-repeat; | |||
| background-size: 80% 80%; | |||
| margin-left: 15px; | |||
| } | |||
| .landHomestead_wrap { | |||
| position: fixed; | |||
| bottom: -100%; | |||
| left: 0; | |||
| width: 100%; | |||
| padding: 0 16px; | |||
| .landHomestead_search { | |||
| height: 80px; | |||
| background: #f1f1f1; | |||
| border: 1px solid #dfdfdf; | |||
| border-radius: 10px; | |||
| padding: 0 28px; | |||
| display: flex; | |||
| margin-bottom: 10px; | |||
| .bar_icon { | |||
| width: 50px; | |||
| height: 50px; | |||
| background: url("../../assets/images/homestead/searchBar_bar.png") | |||
| center center no-repeat; | |||
| background-size: 95% 95%; | |||
| margin-top: 14px; | |||
| margin-right: 15px; | |||
| } | |||
| .bar_ipt { | |||
| flex: 1; | |||
| input { | |||
| width: 100%; | |||
| height: 100%; | |||
| background: none; | |||
| border: 0 none; | |||
| font-size: 32px; | |||
| } | |||
| } | |||
| .bar_text { | |||
| flex: 0 0 80px; | |||
| font-size: 32px; | |||
| color: #333333; | |||
| font-family: PingFang SC, PingFang SC-Regular; | |||
| font-weight: 400; | |||
| display: flex; | |||
| justify-content: center; /* 相对父元素水平居中 */ | |||
| align-items: center; /* 子元素相对父元素垂直居中 */ | |||
| } | |||
| } | |||
| .landHomestead_body { | |||
| background: #fff; | |||
| padding: 30px 20px; | |||
| border-top-left-radius: 12px; | |||
| border-top-right-radius: 12px; | |||
| position: relative; | |||
| .body_flex { | |||
| display: block; | |||
| overflow: hidden; | |||
| .attribute { | |||
| width: 42%; | |||
| float: left; | |||
| .names { | |||
| height: 54px; | |||
| padding-left: 46px; | |||
| background: url("../../assets/images/homestead/landHomestead_home.png") | |||
| left center no-repeat; | |||
| background-size: 38px 36px; | |||
| font-size: 32px; | |||
| line-height: 54px; | |||
| color: #333333; | |||
| margin-bottom: 12px; | |||
| overflow: hidden; | |||
| text-overflow: ellipsis; | |||
| white-space: nowrap; | |||
| } | |||
| .address { | |||
| height: 48px; | |||
| line-height: 48px; | |||
| font-size: 28px; | |||
| white-space: nowrap; | |||
| text-overflow: ellipsis; | |||
| overflow: hidden; | |||
| word-break: break-all; | |||
| margin-right: 8px; | |||
| } | |||
| .nature { | |||
| height: 48px; | |||
| font-size: 28px; | |||
| } | |||
| } | |||
| .distance { | |||
| width: 29%; | |||
| float: left; | |||
| .size { | |||
| height: 54px; | |||
| line-height: 54px; | |||
| font-size: 40px; | |||
| color: #333333; | |||
| margin-bottom: 12px; | |||
| } | |||
| .probably { | |||
| line-height: 48px; | |||
| font-size: 28px; | |||
| height: 48px; | |||
| } | |||
| } | |||
| .others { | |||
| width: 29%; | |||
| float: left; | |||
| .information { | |||
| height: 54px; | |||
| margin-bottom: 12px; | |||
| .status_text { | |||
| color: #fff; | |||
| font-size: 24px; | |||
| background: #3cbf5b; | |||
| border-radius: 20px; | |||
| padding: 8px 15px; | |||
| float: right; | |||
| max-width: calc(100% - 56px); | |||
| overflow: hidden; | |||
| text-overflow: ellipsis; | |||
| white-space: nowrap; | |||
| } | |||
| .location { | |||
| width: 36px; | |||
| height: 36px; | |||
| background: url("../../assets/images/homestead/others_location.png") | |||
| no-repeat; | |||
| float: right; | |||
| margin: 8px 0 0 20px; | |||
| } | |||
| } | |||
| .editor { | |||
| height: 96px; | |||
| .editor_icon { | |||
| width: 72px; | |||
| height: 72px; | |||
| float: right; | |||
| background: url("../../assets/images/homestead/edit_icon.png") | |||
| no-repeat; | |||
| background-size: 100% 100%; | |||
| margin-top: 14px; | |||
| box-shadow: 3px 3px 5px rgba(60, 191, 91, 0.3); | |||
| border-radius: 50%; | |||
| } | |||
| .delete_icon { | |||
| width: 72px; | |||
| height: 72px; | |||
| float: right; | |||
| background: url("../../assets/images/homestead/delete_icon.png") | |||
| no-repeat; | |||
| background-size: 100% 100%; | |||
| margin-top: 14px; | |||
| margin-right: 20px; | |||
| box-shadow: 3px 3px 5px rgba(212, 42, 42, 0.3); | |||
| border-radius: 50%; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </style> | |||