移动端
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

783 строки
25 KiB

  1. <template>
  2. <div class="home_wrapper">
  3. <div class="map_main" id="mapWrap"></div>
  4. <div class="top_address" @click="showAddress=true">
  5. <i class="address_icon"></i>
  6. <p>羊亭</p>
  7. <p>/北上夼</p>
  8. </div>
  9. <van-popup v-model="show" position="bottom" :overlay="false" round>
  10. <div class="pop_main">
  11. <div class="pop_title">
  12. <i class="address_icon"></i>
  13. <p>羊亭镇-北上夼村</p>
  14. </div>
  15. <div class="pop_content">
  16. <div class="pop_content_left">
  17. <img src="../../../static/images/plotPremises/plotPremises_icon_01.png" alt="">
  18. <div class="pop_content_left_box">
  19. <div>
  20. <p>农房 <span>(栋)</span></p>
  21. <p class="num">352</p>
  22. </div>
  23. <span class="border"></span>
  24. <div>
  25. <p>可租 <span>(栋)</span></p>
  26. <p class="num" @click="showList = true,activeName='nf'">71</p>
  27. </div>
  28. </div>
  29. </div>
  30. <div class="pop_content_left">
  31. <img src="../../../static/images/plotPremises/plotPremises_icon_02.png" alt="">
  32. <div class="pop_content_left_box">
  33. <div>
  34. <p>农地 <span>(亩)</span></p>
  35. <p class="num">352</p>
  36. </div>
  37. <span class="border"></span>
  38. <div>
  39. <p>可租 <span>(亩)</span></p>
  40. <p class="num" @click="showList = true,activeName='nd'">71</p>
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. </van-popup>
  47. <van-popup v-model="showZD" closeable position="bottom" :closed="show=true" :overlay="false" round>
  48. <div class="pop_main">
  49. <div class="pop_title">
  50. <i class="address_icon"></i>
  51. <p>羊亭镇-北上夼村-107</p>
  52. </div>
  53. <div class="pop_content_zd">
  54. <img src="../../../static/images/plotPremises/plotPremises_img.png" alt="">
  55. <div class="pop_content_zd_right">
  56. <van-row type="flex" justify="space-between">
  57. <van-col>租地位置:</van-col>
  58. <van-col>北上夼村</van-col>
  59. </van-row>
  60. <van-row type="flex" justify="space-between">
  61. <van-col>租地编号:</van-col>
  62. <van-col class="num">310</van-col>
  63. </van-row>
  64. <van-row type="flex" justify="space-between">
  65. <van-col>租地面积:</van-col>
  66. <van-col class="num">12亩</van-col>
  67. </van-row>
  68. <van-row type="flex" justify="space-between">
  69. <van-col>咨询代表:</van-col>
  70. <van-col>张村委</van-col>
  71. </van-row>
  72. <van-row type="flex" justify="space-between">
  73. <van-col>咨询电话:</van-col>
  74. <van-col class="num">13306310631</van-col>
  75. </van-row>
  76. </div>
  77. </div>
  78. </div>
  79. </van-popup>
  80. <van-popup v-model="showZF" closeable position="bottom" :closed="show=true" :overlay="false" round>
  81. <div class="pop_main">
  82. <div class="pop_title">
  83. <i class="address_icon"></i>
  84. <p>羊亭镇-北上夼村-107</p>
  85. </div>
  86. <div class="pop_content_zd">
  87. <img src="../../../static/images/plotPremises/plotPremises_img.png" alt="">
  88. <div class="pop_content_zd_right">
  89. <van-row type="flex" justify="space-between">
  90. <van-col>租房位置:</van-col>
  91. <van-col>北上夼村</van-col>
  92. </van-row>
  93. <van-row type="flex" justify="space-between">
  94. <van-col>租房编号:</van-col>
  95. <van-col class="num">310</van-col>
  96. </van-row>
  97. <van-row type="flex" justify="space-between">
  98. <van-col>租房面积:</van-col>
  99. <van-col class="num">12亩</van-col>
  100. </van-row>
  101. <van-row type="flex" justify="space-between">
  102. <van-col>咨询代表:</van-col>
  103. <van-col>张村委</van-col>
  104. </van-row>
  105. <van-row type="flex" justify="space-between">
  106. <van-col>咨询电话:</van-col>
  107. <van-col class="num">13306310631</van-col>
  108. </van-row>
  109. </div>
  110. </div>
  111. </div>
  112. </van-popup>
  113. <van-popup v-model="showList" close-icon="../../../static/images/plotPremises/plotPremises_icon_03.png" closeable position="right" :closed="show=true" :overlay="false" round :style="{ width: '45%' , height: '60%' , background:'#ffffff' }">
  114. <div class="pop_main_right">
  115. <p class="pop_title" :style="{color:activeName=='nf'?'#1B65F8':'#FF7321'}">{{activeName=='nf'?'待租农房':'待租农地'}}</p>
  116. <div class="pop_content_right">
  117. <van-row>
  118. <van-col span="8" offset="4">编号</van-col>
  119. <van-col span="9" offset="3">面积</van-col>
  120. </van-row>
  121. <van-row v-for="(item,index) in 20"
  122. :key="index"
  123. @click="listChange(index)"
  124. :class="{ active: selectChooseOrder == index }"
  125. >
  126. <van-col span="8" offset="4" class="num">101</van-col>
  127. <van-col span="9" offset="3" class="num">3亩</van-col>
  128. </van-row>
  129. </div>
  130. <div class="pop_btn_right">
  131. <p :style="{background:activeName=='nf'?'#1B65F8':'',color:activeName=='nf'?'#ffffff':''}" @click="tabChange('nf')">农房</p>
  132. <p :style="{background:activeName=='nd'?'#FF7321':'',color:activeName=='nd'?'#ffffff':''}" @click="tabChange('nd')">农地</p>
  133. </div>
  134. </div>
  135. </van-popup>
  136. <van-popup v-model="showAddress" position="bottom" round>
  137. <van-picker show-toolbar title="村镇选择" :columns="columns" />
  138. </van-popup>
  139. </div>
  140. </template>
  141. <script>
  142. import $ from "jquery";
  143. import { getConfigKey } from "@/utils/data";
  144. import { treeselect } from "@/api/agriculturalTrusteeship";
  145. export default {
  146. data() {
  147. return {
  148. show:true,
  149. showZD:false,
  150. showZF:false,
  151. showList:false,
  152. showAddress:false,
  153. activeName:'nf',
  154. selectChooseOrder:-1,
  155. columns: [
  156. {
  157. text: '浙江',
  158. children: [
  159. {
  160. text: '杭州',
  161. children: [{ text: '西湖区' }, { text: '余杭区' }],
  162. },
  163. {
  164. text: '温州',
  165. children: [{ text: '鹿城区' }, { text: '瓯海区' }],
  166. },
  167. ],
  168. },
  169. {
  170. text: '福建',
  171. children: [
  172. {
  173. text: '福州',
  174. children: [{ text: '鼓楼区' }, { text: '台江区' }],
  175. },
  176. {
  177. text: '厦门',
  178. children: [{ text: '思明区' }, { text: '海沧区' }],
  179. },
  180. ],
  181. },
  182. ],
  183. addrOptions: [],
  184. map: "", // 地图
  185. // countyBorder: "", // 区县边界
  186. // townBorder: "", // 乡镇边界
  187. // villageBorder: "", // 村边界
  188. borderLayer: "", // 区域边界图层
  189. deptLayer: "", // 坐标点图层
  190. userRole: "", // 记录用户身份
  191. cityId: null, // 记录市的deptId
  192. countyId: null, // 记录区县的deptId
  193. townId: null, // 记录乡镇的deptId
  194. currentDeptLevel: null, // 当前所处的部门级别
  195. mapGeoServerUrl: "", // 加载geoserver地址
  196. countyBorderLayerName: "", // 区县边界图层名称
  197. townBorderLayerName: "", // 乡镇边界图层名称
  198. villageBorderLayerName: "", // 村边界图层名称
  199. };
  200. },
  201. created() {
  202. },
  203. mounted() {
  204. // 获取geoserver的地址
  205. this.getGeoServerUrl();
  206. // 获取区县边界图层名称
  207. this.getCountyBorderLayerName();
  208. // 获取乡镇边界的图层名称
  209. this.getTownBorderLayerName();
  210. // 获取村边界的图层名称
  211. this.getVillageBorderLayerName();
  212. // 获取部门下拉树列表
  213. treeselect().then(response => {
  214. this.addrOptions = response.data;
  215. // 初始化地图
  216. this.initMap();
  217. });
  218. },
  219. methods: {
  220. tabChange(name){
  221. this.activeName = name;
  222. },
  223. listChange(id){
  224. this.selectChooseOrder = id;
  225. this.show = false;
  226. this.showZF = false;
  227. this.showZD = true;
  228. },
  229. //获取geoserver的地址
  230. getGeoServerUrl() {
  231. getConfigKey("system.geoServer.url").then(response => {
  232. this.mapGeoServerUrl = response.msg;
  233. });
  234. },
  235. //获取区县边界的图层名称
  236. getCountyBorderLayerName() {
  237. getConfigKey("geoserver.layer.countyBorder").then(response => {
  238. this.countyBorderLayerName = response.msg;
  239. });
  240. },
  241. //获取乡镇边界的图层名称
  242. getTownBorderLayerName() {
  243. getConfigKey("geoserver.layer.townBorder").then(response => {
  244. this.townBorderLayerName = response.msg;
  245. });
  246. },
  247. //获取村边界的图层名称
  248. getVillageBorderLayerName() {
  249. getConfigKey("geoserver.layer.villageBorder").then(response => {
  250. this.villageBorderLayerName = response.msg;
  251. });
  252. },
  253. // 初始化地图
  254. initMap() {
  255. const dept = this.addrOptions[0];
  256. // 定义地图中心坐标
  257. let mapCenterLocation;
  258. if (dept.lng && dept.lat) {
  259. mapCenterLocation = [dept.lng, dept.lat];
  260. } else {
  261. mapCenterLocation = [116.391458, 39.902377];
  262. }
  263. document.getElementById("mapWrap").innerHTML = "";
  264. // 定义地图投影
  265. let projection = new ol.proj.Projection({
  266. code: "EPSG:3857",
  267. units: "degrees",
  268. });
  269. // 定义地图图层
  270. let aerial = new ol.layer.Tile({
  271. source: new ol.source.XYZ({
  272. url: "http://t{0-7}.tianditu.com/img_w/wmts?" +
  273. "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
  274. "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
  275. }),
  276. isGroup: true,
  277. name: "卫星影像图",
  278. });
  279. let yingxzi = new ol.layer.Tile({
  280. source: new ol.source.XYZ({
  281. url: "http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
  282. }),
  283. isGroup: true,
  284. name: "天地图文字标注--卫星影像图",
  285. });
  286. //加载地图
  287. this.map = new ol.Map({
  288. controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]),
  289. layers: [aerial, yingxzi],
  290. projection: projection,
  291. target: "mapWrap",
  292. view: new ol.View({
  293. center: ol.proj.fromLonLat(mapCenterLocation), // 地图中心坐标
  294. zoom: 9.5,
  295. minZoom: 1, //地图缩小限制
  296. maxZoom: 18, //地图放大限制
  297. // extent: [13481224.75161,5667110.83528,13811063.06278,5880284.11416]
  298. }),
  299. interactions: ol.interaction.defaults({
  300. doubleClickZoom: false, // 双击放大地图
  301. // mouseWheelZoom: false, // 鼠标滚轮放大地图
  302. // shiftDragZoom: false, // shift + 鼠标左键拖拽 放大地图
  303. })
  304. });
  305. if (dept.deptLevel === '5') {
  306. // 登录身份为市级领导
  307. this.userRole = 'cityLeader';
  308. this.cityId = dept.id;
  309. this.currentDeptLevel = '5';
  310. // 添加区县边界
  311. this.addCountyBorder();
  312. } else if (dept.deptLevel === '4') {
  313. // 登录身份为县级领导
  314. this.userRole = 'countyLeader';
  315. this.countyId = dept.id;
  316. this.currentDeptLevel = '4';
  317. // 添加乡镇边界
  318. this.addTownBorder(dept.id);
  319. this.map.getView().setZoom(10.5);
  320. }
  321. // else if (dept.deptLevel === '3') {
  322. // // 登录身份为镇级领导
  323. // this.userRole = 'townLeader';
  324. // this.townId = dept.id;
  325. // this.currentDeptLevel = '3';
  326. // // 添加村边界
  327. // this.addVillageBorder(dept.id);
  328. // this.map.getView().setZoom(12.5);
  329. // }
  330. if (dept.children) {
  331. this.addDeptLayer(dept.children);
  332. }
  333. this.map.on("click", (evt) => {
  334. let feature = this.map.forEachFeatureAtPixel(
  335. evt.pixel,
  336. (feature) => feature
  337. );
  338. if (feature) {
  339. // 镇级:加载村级坐标点
  340. if (feature.get('level') === 'deptPoint') {
  341. const deptId = feature.get('deptId');
  342. const deptLevel = feature.get('deptLevel');
  343. const lng = feature.get('lng');
  344. const lat = feature.get('lat');
  345. if (deptLevel === '4' || deptLevel === '3') {
  346. if (deptLevel === '4') {
  347. this.countyId = deptId;
  348. this.currentDeptLevel = '4';
  349. this.map.removeLayer(this.borderLayer);
  350. this.borderLayer = '';
  351. // 添加乡镇边界
  352. this.addTownBorder(deptId);
  353. this.map.getView().animate({
  354. center: ol.proj.fromLonLat([lng, lat]), // 中心点
  355. zoom: 10.5, // 缩放级别
  356. rotation: undefined, // 缩放完成view视图旋转弧度
  357. duration: 1000, // 缩放持续时间,默认不需要设置
  358. });
  359. } else if (deptLevel === '3') {
  360. this.townId = deptId;
  361. this.currentDeptLevel = '3';
  362. this.map.removeLayer(this.borderLayer);
  363. this.borderLayer = '';
  364. // 添加村边界
  365. const cqlFilter = "parent_id = '" + deptId + "'";
  366. this.addVillageBorder(cqlFilter);
  367. this.map.getView().animate({
  368. center: ol.proj.fromLonLat([lng, lat]), // 中心点
  369. zoom: 12.5, // 缩放级别
  370. rotation: undefined, // 缩放完成view视图旋转弧度
  371. duration: 1000, // 缩放持续时间,默认不需要设置
  372. });
  373. }
  374. const deptNode = this.findNode(this.addrOptions, deptId);
  375. if (deptNode && deptNode.children) {
  376. this.map.removeLayer(this.deptLayer);
  377. this.deptLayer = '';
  378. this.addDeptLayer(deptNode.children);
  379. }
  380. } else if (deptLevel === '2') {
  381. this.currentDeptLevel = '2';
  382. this.map.removeLayer(this.borderLayer);
  383. this.borderLayer = '';
  384. // 添加村边界
  385. const cqlFilter = "dept_id = '" + deptId + "'";
  386. this.addVillageBorder(cqlFilter);
  387. let villagePoint = {
  388. id: deptId,
  389. label: feature.get('deptName'),
  390. lng: lng,
  391. lat: lat,
  392. deptLevel: deptLevel,
  393. };
  394. let depts = [];
  395. depts.push(villagePoint);
  396. this.map.removeLayer(this.deptLayer);
  397. this.deptLayer = '';
  398. this.addDeptLayer(depts);
  399. this.map.getView().animate({
  400. center: ol.proj.fromLonLat([lng, lat]), // 中心点
  401. zoom: 17, // 缩放级别
  402. rotation: undefined, // 缩放完成view视图旋转弧度
  403. duration: 1000, // 缩放持续时间,默认不需要设置
  404. });
  405. }
  406. }
  407. }
  408. });
  409. // 缩小地图,重新加载页面
  410. this.map.on("moveend", (evt) => {
  411. const zoom = this.map.getView().getZoom();
  412. if (this.userRole === 'cityLeader') {
  413. if (this.currentDeptLevel === '2' && zoom < 13) {
  414. this.currentDeptLevel = '3';
  415. this.map.removeLayer(this.borderLayer);
  416. this.borderLayer = "";
  417. const cqlFilter = "parent_id = '" + this.townId + "'";
  418. this.addVillageBorder(cqlFilter);
  419. this.map.removeLayer(this.deptLayer);
  420. this.deptLayer = "";
  421. const deptNode = this.findNode(this.addrOptions, this.townId);
  422. if (deptNode && deptNode.children) {
  423. this.addDeptLayer(deptNode.children);
  424. }
  425. } else if (this.currentDeptLevel === '3' && zoom < 11) {
  426. this.currentDeptLevel = '4';
  427. this.map.removeLayer(this.borderLayer);
  428. this.borderLayer = "";
  429. this.addTownBorder(this.countyId);
  430. this.map.removeLayer(this.deptLayer);
  431. this.deptLayer = "";
  432. const deptNode = this.findNode(this.addrOptions, this.countyId);
  433. if (deptNode && deptNode.children) {
  434. this.addDeptLayer(deptNode.children);
  435. }
  436. } else if (this.currentDeptLevel === '4' && zoom < 9.5) {
  437. this.currentDeptLevel = '5';
  438. this.map.removeLayer(this.borderLayer);
  439. this.borderLayer = "";
  440. this.addCountyBorder();
  441. this.map.removeLayer(this.deptLayer);
  442. this.deptLayer = "";
  443. const deptNode = this.findNode(this.addrOptions, this.cityId);
  444. if (deptNode && deptNode.children) {
  445. this.addDeptLayer(deptNode.children);
  446. }
  447. }
  448. } else if (this.userRole === 'countyLeader') {
  449. if (this.currentDeptLevel === '2' && zoom < 13) {
  450. this.currentDeptLevel = '3';
  451. this.map.removeLayer(this.borderLayer);
  452. this.borderLayer = "";
  453. const cqlFilter = "parent_id = '" + this.townId + "'";
  454. this.addVillageBorder(cqlFilter);
  455. this.map.removeLayer(this.deptLayer);
  456. this.deptLayer = "";
  457. const deptNode = this.findNode(this.addrOptions, this.townId);
  458. if (deptNode && deptNode.children) {
  459. this.addDeptLayer(deptNode.children);
  460. }
  461. } else if (this.currentDeptLevel === '3' && zoom < 11) {
  462. this.currentDeptLevel = '4';
  463. this.map.removeLayer(this.borderLayer);
  464. this.borderLayer = "";
  465. this.addTownBorder(this.countyId);
  466. this.map.removeLayer(this.deptLayer);
  467. this.deptLayer = "";
  468. const deptNode = this.findNode(this.addrOptions, this.countyId);
  469. if (deptNode && deptNode.children) {
  470. this.addDeptLayer(deptNode.children);
  471. }
  472. }
  473. }
  474. });
  475. },
  476. findNode(tree, deptId) {
  477. for (const node of tree) {
  478. if (node.id === deptId) return node;
  479. if (node.children) {
  480. const res = this.findNode(node.children, deptId);
  481. if (res) return res;
  482. }
  483. }
  484. return null;
  485. },
  486. // 添加区县边界
  487. addCountyBorder() {
  488. this.borderLayer = new ol.layer.Image({
  489. source: new ol.source.ImageWMS({
  490. url: this.mapGeoServerUrl + '/wms',
  491. params: {
  492. LAYERS: this.countyBorderLayerName,
  493. SRID: 3857,
  494. }
  495. }),
  496. name: 'countyBorderLayer'
  497. });
  498. this.map.getLayers().insertAt(2, this.borderLayer);
  499. },
  500. // 添加乡镇边界
  501. addTownBorder(deptId) {
  502. this.borderLayer = new ol.layer.Image({
  503. source: new ol.source.ImageWMS({
  504. url: this.mapGeoServerUrl + "/wms",
  505. params: {
  506. LAYERS: this.townBorderLayerName,
  507. // TILED: true,
  508. cql_filter: "parent_id = '" + deptId + "'",
  509. SRID: 3857,
  510. },
  511. }),
  512. name: 'townBorderLayer'
  513. });
  514. this.map.getLayers().insertAt(2, this.borderLayer);
  515. },
  516. // 添加村边界
  517. addVillageBorder(cqlFilter) {
  518. this.borderLayer = new ol.layer.Image({
  519. source: new ol.source.ImageWMS({
  520. url: this.mapGeoServerUrl + '/wms',
  521. params: {
  522. LAYERS: this.villageBorderLayerName,
  523. cql_filter: cqlFilter,
  524. SRID: 3857,
  525. },
  526. }),
  527. name: 'villageBorderLayer'
  528. });
  529. this.map.getLayers().insertAt(2, this.borderLayer);
  530. },
  531. // 创建矢量数据源
  532. addDeptLayer(depts) {
  533. const createFeatureStyle = function(feature) {
  534. return new ol.style.Style({
  535. image: new ol.style.Icon({
  536. //设置图标偏移
  537. anchor: [0.5, 1],
  538. //标注样式的起点位置
  539. anchorOrigin: "top-right",
  540. //X方向单位:分数
  541. anchorXUnits: "fraction",
  542. //Y方向单位:像素
  543. anchorYUnits: "pixels",
  544. //偏移起点位置的方向
  545. offsetOrigin: "top-right",
  546. //透明度
  547. opacity: 0.9,
  548. // rotation: (Math.PI / 180) * 20,
  549. //图片路径
  550. src: require("../../assets/images/plotPremises/mark.png"),
  551. }),
  552. text: new ol.style.Text({
  553. textAlign: "center", //位置
  554. textBaseline: "bottom", //基准线
  555. font: "normal 14px 微软雅黑", //文字样式
  556. text: feature.get("deptName"), //文本内容
  557. fill: new ol.style.Fill({
  558. //文本填充样式(即文字颜色)
  559. color: "#ffffff",
  560. }),
  561. }),
  562. });
  563. };
  564. let features = [];
  565. for (let i = 0; i < depts.length; i++) {
  566. let feature = new ol.Feature({
  567. geometry: new ol.geom.Point(
  568. ol.proj.fromLonLat([depts[i].lng, depts[i].lat])
  569. ),
  570. deptId: depts[i].id,
  571. deptName: depts[i].label,
  572. // orgCode: depts[i].orgCode,
  573. lat: depts[i].lat,
  574. lng: depts[i].lng,
  575. deptLevel: depts[i].deptLevel,
  576. level: 'deptPoint',
  577. });
  578. // 创建下级部门坐标点
  579. feature.setStyle(createFeatureStyle(feature));
  580. features.push(feature);
  581. }
  582. const vectorSource = new ol.source.Vector({
  583. features: features,
  584. });
  585. // 创建矢量图层
  586. this.deptLayer = new ol.layer.Vector({
  587. source: vectorSource,
  588. name: 'deptLayer'
  589. });
  590. // this.map.addLayer(this.deptLayer);
  591. this.map.getLayers().insertAt(3, this.deptLayer);
  592. },
  593. },
  594. };
  595. </script>
  596. <style scoped lang="scss">
  597. .home_wrapper {
  598. background: #e9e9e9;
  599. min-height: 100vh;
  600. width: 100vw;
  601. }
  602. .num{
  603. font-family: Arial;
  604. }
  605. .map_main{
  606. width: 100%;
  607. height: 100vh;
  608. /*background: url("../../../static/images/plotPremises/map_bg.png") no-repeat center;*/
  609. /*background-size: 100%;*/
  610. }
  611. /deep/ .van-popup{
  612. background: #F1F0F5;
  613. }
  614. /deep/ .van-popup--right{
  615. top: 35%;
  616. .van-icon__image{
  617. width: .7em;
  618. height: .7em;
  619. display: block;
  620. }
  621. }
  622. .top_address{
  623. display: flex;
  624. align-items: center;
  625. position: absolute;
  626. top: 5vh;
  627. left: 3vw;
  628. padding: 1vh 2vh;
  629. background: #ffffff;
  630. border-radius: 5vh;
  631. p{font-size: 1.5vh}
  632. }
  633. .address_icon {
  634. width: 13PX;
  635. height: 17PX;
  636. background: url("../../../static/images/plotPremises/positioning.png") no-repeat;
  637. background-size: 100% 100%;
  638. margin-right: 1vw;
  639. }
  640. .pop_main{
  641. padding: 2vh 3vw;
  642. .pop_title{
  643. display: flex;
  644. align-items: center;
  645. font-size: 2.2vh;
  646. line-height: 1;
  647. }
  648. .pop_content{
  649. display: flex;
  650. justify-content: space-between;
  651. margin-top: 2vh;
  652. .pop_content_left{
  653. background: #ffffff;
  654. width: 48%;
  655. padding: 1.5vh 3vw;
  656. border-radius: 15PX;
  657. .pop_content_left_box{
  658. display: flex;
  659. justify-content: space-between;
  660. margin-top: .5vh;
  661. .border{
  662. border-left: 2PX dashed #DFDFDF;
  663. }
  664. div{
  665. p{
  666. &:first-child{
  667. font-size: 2vh;
  668. color: #797979;
  669. span{
  670. font-size: 1.5vh;
  671. }
  672. }
  673. &:last-child{
  674. font-size: 3vh;
  675. color: #333333;
  676. }
  677. }
  678. &:last-child{
  679. p:last-child{
  680. color: #1B65F8;
  681. }
  682. }
  683. }
  684. }
  685. }
  686. }
  687. .pop_content_zd{
  688. background: #ffffff;
  689. border-radius: 15PX;
  690. display: flex;
  691. justify-content: space-between;
  692. margin-top: 2vh;
  693. overflow: hidden;
  694. img{width: 40%;}
  695. .pop_content_zd_right{
  696. width: 60%;
  697. padding:1.5vh 2.5vh;
  698. font-size: 1.8vh;
  699. display: flex;
  700. flex-direction: column;
  701. justify-content: space-between;
  702. }
  703. }
  704. }
  705. .pop_main_right{
  706. .pop_title{
  707. font-size: 2.2vh;
  708. color: #1B65F8;
  709. padding: 1.5vh;
  710. }
  711. .pop_content_right{
  712. font-size: 1.8vh;
  713. height: 48vh;
  714. overflow-y: scroll;
  715. .active{
  716. box-shadow:0px 0px 5px #999999;
  717. }
  718. .van-row{
  719. padding: 1vh 0;
  720. }
  721. }
  722. .pop_btn_right{
  723. display: flex;
  724. width: 100%;
  725. position: absolute;
  726. bottom: 0;
  727. p{
  728. padding: 1.5vh 0;
  729. text-align: center;
  730. font-size: 2vh;
  731. flex: 1;
  732. background: #E1E0E4;
  733. color: #9F9F9F;
  734. }
  735. }
  736. }
  737. </style>