规划选址样式修改和页面微调

src/views/siteselection/components/xzjg.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="xzjg">
-    <div>项目名称XXXXXX</div>
+    <div>项目名称:选址结果</div>
     <div class="box-sizing" style="height: 47%; width: 100%">
-      <div class="title site-title">
+      <div class="title block-title">
         <!-- <span class="block-title"
           >意向地块{{ bgList ? bgList.length : 0 }}）</span
         > -->
         意向地块（{{ bgList ? bgList.length : 0 }}）
-        <span @click="download">导出报告</span>
+        <span @click="download" class="export">导出报告</span>
       </div>
       <el-scrollbar
         class="height-100-50 max-width"
@@ -41,8 +41,10 @@
                 <span>{{ item1.properties.kzxxgydmc }}</span>
                 <span>{{ item1.properties.ydmj.toFixed(2) }}平方米</span>
               </p>
-              <p>
-                基准地标价:<span style="color: #02a7f0"
+              <p style="color: #cddeeb">
+                <img src="/static/images/ghzc/iconSun.png" />
+                <span style="margin-left: 20px">基准地标价:</span
+                ><span style="color: #02a7f0"
                   >{{ item1.properties.landPrice }}万元</span
                 >
               </p>
@@ -75,7 +77,10 @@
                 item.properties.ydmj.toFixed(0)
               }})
               <span class="tools">
-                <i class="header-icon el-icon-place" @click.stop="mapview(item)"></i>
+                <i
+                  class="header-icon el-icon-place"
+                  @click.stop="mapview(item)"
+                ></i>
                 <i
                   class="header-icon el-icon-plus"
                   @click="addprogramme($event, item)"
@@ -87,8 +92,11 @@
                 <span>{{ item.properties.kzxxgydmc }}</span>
                 <span>{{ item.properties.ydmj.toFixed(2) }}平方米</span>
               </p>
-              <p>
-                基准地标价:<span style="color: #02a7f0"
+              <p style="color: #cddeeb">
+                <!-- <i class="iconSun"></i> -->
+                <img src="/static/images/ghzc/iconSun.png" />
+                <span style="margin-left: 20px">基准地标价:</span
+                ><span style="color: #02a7f0"
                   >{{ item.properties.landPrice }}万元</span
                 >
               </p>
@@ -119,6 +127,7 @@
 </template>
 
 <script>
+import { color } from "highcharts";
 import drawData from "./draw.json";
 import ghjgData from "./规划结果.json";
 export default {
@@ -163,8 +172,8 @@ export default {
   },
   mounted() {
     this.copyData = JSON.parse(JSON.stringify(ghjgData));
-    this.addPolygon("规划结果", "ghjg");
-    this.addPolygon("draw", "draw");
+    this.addPolygon("规划结果", "ghjg",'#0000FF');
+    this.addPolygon("draw", "draw",'#FF0000');
   },
   methods: {
     download() {
@@ -177,13 +186,15 @@ export default {
       );
     },
     // 加载GeoJSON数据
-    addPolygon(label, id) {
+    addPolygon(label, id,color) {
       let _this = this;
+      let yanse = color
       let polygon = Cesium.GeoJsonDataSource.load(
         `static/data/${label}.geojson`,
         {
           clampToGround: true,
-          stroke: Cesium.Color.BLUE,
+          // stroke: Cesium.Color.color,
+          stroke: Cesium.Color.fromCssColorString(yanse),
           fill: Cesium.Color.WHITE.withAlpha(0.3), //注意：颜色必须大写，即不能为blue
           strokeWidth: 5,
         }
@@ -232,7 +243,7 @@ export default {
       this.bgList = [];
     },
     mapview(item) {
-      this.edlARR()
+      this.edlARR();
       // e.stopPropagation()
       let tempArr = item.geometry.coordinates[0];
       for (let i = 0; i < tempArr.length; i++) {
@@ -309,7 +320,7 @@ export default {
 
   beforeDestroy() {
     viewer.dataSources.removeAll();
-    this.edlARR()
+    this.edlARR();
   },
 };
 </script>
@@ -333,6 +344,15 @@ export default {
       margin-right: 5px;
       min-height: unset;
     }
+    .export {
+      display: inline-block;
+      background-color: #0f7ac8;
+      text-align: center;
+      width: 95px;
+      height: 28px;
+      line-height: 28px;
+      float: right;
+    }
   }
   .el-form-item {
     margin-bottom: 0;
@@ -374,12 +394,59 @@ export default {
     // background-color: pink;
     color: #fff;
   }
+  p:nth-child(2) {
+    position: relative;
+    // padding-right: 20px;
+    img {
+      position: absolute;
+      top: 6px;
+    }
+  }
   .oneItem {
+    .iconSun {
+      width: 16px;
+      height: 16px;
+      display: inline-block;
+      background: url("../../../../static//images//ghzc//iconSun.png") no-repeat;
+      background-size: 100% 100%;
+    }
     span {
-      border: 1px solid #02a7f0;
+      // border: 1px solid #02a7f0;
       padding: 3px 5px;
-      border-radius: 5px;
+      border-radius: 2px 2px 2px 2px;
+    }
+    span:first-child {
+      background: rgba(253, 219, 59, 0.2);
+      font-size: 14px;
+      color: #ffc700;
+    }
+    span:nth-child(2) {
+      background: rgba(155, 255, 139, 0.2);
+      font-size: 14px;
+      color: #9bff8b;
+    }
+    p {
+      font-size: 14px;
+      color: #cddeeb;
     }
   }
 }
+/deep/ .el-collapse {
+  // width: 95%;
+  border: none;
+}
+/deep/ .el-scrollbar {
+  border: 1px solid #0f7ac8 !important;
+  // padding: 0 10px;
+}
+/deep/ .el-collapse-item__header {
+  border-bottom: 1px solid rgba(102, 126, 143, 0.747);
+  position: relative;
+}
+/deep/ .el-collapse-item__wrap {
+  border-bottom: 1px solid rgba(102, 126, 143, 0.5) !important;
+}
+/deep/ .el-scrollbar__wrap {
+  padding: 0 10px;
+}
 </style>