PC端 整体界面风格重新调整

public/static/config/config.js

@@ -1,6 +1,6 @@
 
 var webConfig = {
-    systemName: "开店一件事",
+    systemName: "青浦区开店一件事",
     AUTH_USER_TOKEN_KEY: "SKY_OAUTH_USER_TOKEN",
     LOGIN_FAIL_CODE: [206, 207, 208, 212], // loginFailCodes
     sysCode: "05d2134e-4c5e-48ae-8efc-9aceb6506f61", // client_id

src/components/Map.vue

@@ -62,6 +62,8 @@ export default {
     },
     mapTriggerEvent(eventName, param) {
       let that = this;
+      console.log(33333333);
+      
       if (!this.mapLoaded) {
         setTimeout(() => {
           that.mapTriggerEvent(eventName, param);
@@ -154,6 +156,7 @@ export default {
       viewer.scene.screenSpaceCameraController.tiltEventTypes = [];
       // 禁止地图拖动
       // viewer.scene.screenSpaceCameraController.enableRotate=false;
+      this.mapLoaded = true;
       this.addBaseMap();
       this.changeBaseMap({ type: "xht" });
       this.setDefaultMapView(viewer, "setView");

src/views/HomeView.vue

@@ -56,7 +56,7 @@
     <div :class="isMobile == true ? 'heatmapLegend-mb':'heatmapLegend'" v-show="heatmapPanelShow">
     </div>
 
-    <div :class="{ 'zxq-ckzb-btn': true, isActive: isActiveZXQ }" @click="isActiveZXQ">智小青</div>
+    <!-- <div :class="{ 'zxq-ckzb-btn': true, isActive: isActiveZXQ }" @click="isActiveZXQ">智小青</div> -->
 
     <div class="layerContorl">
       <div :class="{ 'ckzb-btn': true, isActive: layerPanelShow }" @click="handleOpenLayerPanelShow" v-if="!isMobile">查看周边</div>
@@ -82,7 +82,7 @@
         <el-scrollbar>
           <div class="item">店铺名称: {{ nowPoint.properties["店铺名称"] }}</div>
           <div class="item">店铺类型: {{ nowPoint.properties["店铺类型"] }}</div>
-          <div class="item">街镇: {{ nowPoint.properties["街镇"] }}</div>
+          <div class="item">街镇名称: {{ nowPoint.properties["街镇"] }}</div>
           <div class="item">道路名称: {{ nowPoint.properties["道路名称"] }}</div>
         </el-scrollbar>
       </div>
@@ -93,7 +93,7 @@
         <el-scrollbar>
           <div class="item">店铺名称: {{ nowPoint.properties["店铺名称"] }}</div>
           <div class="item">店铺类型: {{ nowPoint.properties["店铺类型"] }}</div>
-          <div class="item">街镇: {{ nowPoint.properties["街镇"] }}</div>
+          <div class="item">街镇名称: {{ nowPoint.properties["街镇"] }}</div>
           <div class="item">道路名称: {{ nowPoint.properties["道路名称"] }}</div>
         </el-scrollbar>
       </div>
@@ -514,10 +514,10 @@ export default {
       if (!this.mapHandle) {
         this.mapHandle = new SkyScenery.ScreenSpaceEventHandler(viewer.canvas, this);
         this.mapHandle.setInputAction(function (movement) {
-          // 获取鼠标位置
           const pickedObject = viewer.scene.pick(movement.position);
           if (SkyScenery.defined(pickedObject) && SkyScenery.defined(pickedObject.id)) {
             const entity = pickedObject.id;
+            
             if (entity.type == "yjdp") {
               /**
                 * 根据拾取到的点位的经纬度 转成 屏幕坐标
@@ -762,7 +762,8 @@ export default {
     position: absolute;
     bottom: 50px;
     right: 20px;
-    background: #01346f99;
+    // background: #01346f99;
+    background: #ffffff;
     padding: 0px 10px;
     color: #ffffff;
     padding: 10px 10px;
@@ -912,14 +913,16 @@ export default {
       border-radius: 10px;
       color: #ffffff;
       cursor: pointer;
-      background: #01346f99;
+      // background: #01346f99;
+      background: #418dff;
       line-height: 38px;
       padding: 0 15px;
       text-align: center;
       border: 1px solid #eeeeee;
 
       &.isActive {
-        background: #005cc6cc
+        // background: #005cc6cc
+        background: #1656b4;
       }
 
       &:hover {
@@ -950,7 +953,8 @@ export default {
       position: absolute;
       right: 110px;
       bottom: 0px;
-      background: #01346f99;
+      // background: #01346f99;
+      background: #1656b4;
       border-radius: 5px;
       // padding: 0 10px;
       padding-left: 10px;
@@ -1027,14 +1031,16 @@ export default {
       border-radius: 10px;
       color: #ffffff;
       cursor: pointer;
-      background: #01346f99;
+      // background: #01346f99;
+      background: #418dff;
       line-height: 38px;
       padding: 0 15px;
       text-align: center;
       border: 1px solid #eeeeee;
 
       &.isActive {
-        background: #005cc6cc
+        // background: #005cc6cc
+        background: #1656b4;
       }
 
       &:hover {
@@ -1066,7 +1072,8 @@ export default {
       position: absolute;
       right: 110px;
       bottom: 0;
-      background: #01346f99;
+      // background: #01346f99;
+      background: #1656b4;
       border-radius: 5px;
       padding-left: 10px;
       height: fit-content;
@@ -1171,14 +1178,16 @@ export default {
     border-radius: 10px;
     color: #ffffff;
     cursor: pointer;
-    background: #01346f99;
+    // background: #01346f99;
+    background: #418dff;
     line-height: 38px;
     padding: 0 15px;
     text-align: center;
     border: 1px solid #eeeeee;
 
     &.isActive {
-      background: #005cc6cc;
+      // background: #005cc6cc;
+      background: #1656b4;
     }
 
     &:hover {
@@ -1219,14 +1228,16 @@ export default {
     border-radius: 10px;
     color: #ffffff;
     cursor: pointer;
-    background: #01346f99;
+    // background: #01346f99;
+    background: #418dff;
     line-height: 38px;
     padding: 0 15px;
     text-align: center;
     border: 1px solid #eeeeee;
 
     &.isActive {
-      background: #005cc6cc;
+      // background: #005cc6cc;
+      background: #1656b4;
     }
 
     &:hover {
@@ -1267,7 +1278,8 @@ export default {
     border-radius: 10px;
     color: #ffffff;
     cursor: pointer;
-    background: #01346f99;
+    // background: #01346f99;
+    background: #418dff;
     line-height: 38px;
     padding: 0 15px;
     text-align: center;
@@ -1307,18 +1319,19 @@ export default {
     border-radius: 10px;
     color: #ffffff;
     cursor: pointer;
-    background: #01346f99 url(~@/assets/images/zxq.png) no-repeat center center /90% 90%;
+    // background: #01346f99 url(~@/assets/images/zxq.png) no-repeat center center /90% 90%;
+    background: url(~@/assets/images/zxq.png) no-repeat center center /90% 90%;
     padding: 10px 10px;
     text-align: center;
     line-height: 90px;
-    border: 1px solid #eeeeee;
+    border: 0px solid #eeeeee;
 
     &.isActive {
-      background: #005cc6cc url(~@/assets/images/zxq.png) no-repeat center center /90% 90%;
+      // background: #005cc6cc url(~@/assets/images/zxq.png) no-repeat center center /90% 90%;
     }
 
     &:hover {
-      background: #005cc6cc url(~@/assets/images/zxq.png) no-repeat center center /90% 90%;
+      // background: #005cc6cc url(~@/assets/images/zxq.png) no-repeat center center /90% 90%;
     }
   }
   .zxq-btn-mb {
@@ -1348,7 +1361,8 @@ export default {
     left: 0px;
     width: 300px;
     height: 200px;
-    background: #01346f99;
+    // background: #01346f99;
+    background: #ffffff;
     border-radius: 10px;
 
     .close {
@@ -1360,12 +1374,14 @@ export default {
       width: 24px;
       height: 24px;
       cursor: pointer;
-      color: #ffffff;
+      // color: #ffffff;
+      color: #000000;
     }
 
     .content {
       height: 160px;
-      color: #ffffff;
+      // color: #ffffff;
+      color: #000000;
       margin: 30px 0px 10px 20px;
 
       .item {
@@ -1381,7 +1397,8 @@ export default {
     left: 0px;
     width: 300px;
     height: 200px;
-    background: #01346f99;
+    // background: #01346f99;
+    background: #ffffff;
     border-radius: 10px;
 
     .close {
@@ -1393,12 +1410,14 @@ export default {
       width: 24px;
       height: 24px;
       cursor: pointer;
-      color: #ffffff;
+      // color: #ffffff;
+      color: #000000;
     }
 
     .content {
       height: 160px;
-      color: #ffffff;
+      // color: #ffffff;
+      color: #000000;
       margin: 30px 0px 10px 20px;
 
       .item {

src/views/KDYJS.vue

@@ -10,25 +10,31 @@
       <div class="left">
         <div :class="content_css">
           <el-input v-model="searchHZSKeyWord" placeholder="请输入您想开店的地址" class="input-with-select">
-            <template #prepend>
+            <!-- <template #prepend>
               <el-button>
                 <el-icon>
                   <Search />
                 </el-icon>
               </el-button>
-            </template>
+            </template> -->
             <template #append>
-              <el-button @click="searchAddress">搜索</el-button>
+              <!-- <el-button @click="searchAddress">搜索</el-button> -->
+                  <el-button  @click="searchAddress">
+                    <el-icon style="color: #fff;">
+                      <Search />
+                    </el-icon>
+                  </el-button>
             </template>
           </el-input>
           <div class="addressPanel" v-show="addressPanelShow">
             <el-scrollbar>
               <ul>
-                <li v-for="(item, index) in searchResultList" :key="index" @click="judgeHandle(item)">
+                <li v-for="(item, index) in searchResultList" :key="index" :class="searchSelect == index ? 'active' : ''" @click="judgeHandle(item,index)">
                   <!-- <div class="name">{{ item.name }}</div> -->
                   <div class="name" v-if="isMobile">{{ index + 1 }}.&nbsp; &nbsp;{{ item.address }}</div>
                   <el-tooltip :content="item.address" placement="right-start" :hide-after="5" v-if="!isMobile">
-                    <div class="name">{{ index + 1 }}.&nbsp; &nbsp;{{ item.address }}</div>
+                    
+                    <div class="name"><img style="width: 24px;vertical-align: bottom;" :src="item.image"/>&nbsp;{{ item.address }}</div>
                   </el-tooltip>
                 </li>
               </ul>
@@ -37,65 +43,77 @@
 
           <!-- v-show="resultPanelShow" -->
           <div class="resultPanel1" v-show="resultPanelShow">
-            <el-scrollbar>
-              <!-- <div class="JZItem" v-show="!analysisResult['餐饮服务项目']">
-                <div class="detail">{{ JZText.cy }}</div>
-                <div class="checkZC" @click="zcIndex = 0; dialogVisible = true">查看相关政策</div>
-              </div>
-              <div class="JZItem" v-show="!analysisResult['互联网上网服务营业场所']">
-                <div class="detail">{{ JZText.hlw }}</div>
-                <div class="checkZC" @click="zcIndex = 1; dialogVisible = true">查看相关政策</div>
+            <div class="title">
+              <div style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;padding-right: 20px;">
+                <img src="../../public/static/image/location-icon.png" style="width: 20px;vertical-align: middle;padding: 0 10px 0 20px;" />
+                <span>{{searchTitle}}</span>
               </div>
-              <div class="JZItem" v-show="!analysisResult['娱乐场所']">
-                <div class="detail">{{ JZText.ylcs }}</div>
-                <div class="checkZC" @click="zcIndex = 2; dialogVisible = true">查看相关政策</div>
-              </div>
-              <div class="JZItem" v-show="!analysisResult['烟草制品零售点']">
-                <div class="detail">{{ JZText.yc }}</div>
-                <div class="checkZC" @click="zcIndex = 3; dialogVisible = true">查看相关政策</div>
-              </div>
-              <div class="JZItem" v-show="!analysisResult['噪声污染']">
-                <div class="detail">{{ JZText.zy }}</div>
-                <div class="checkZC" @click="zcIndex = 4; dialogVisible = true">查看相关政策</div>
-              </div> -->
-              <!-- #FFB400 -->
-              <div class="JZItem">
-                <!-- style="color:#00FF00" -->
-                 <div class="detail" v-if="analysisResult['餐饮服务项目']" style="color:#00FF00 ">{{ allowText.cy }}</div>
-                <div class="detail" v-if="!analysisResult['餐饮服务项目']" style="color: #FFB400">{{ JZText.cy }}</div>
-                <div class="checkZC" @click="zcIndex = 0; dialogVisible = true">查看相关政策
+            </div>
+            <div class="resultPanel2content">
+              <el-scrollbar>
+                <!-- <div class="JZItem" v-show="!analysisResult['餐饮服务项目']">
+                  <div class="detail">{{ JZText.cy }}</div>
+                  <div class="checkZC" @click="zcIndex = 0; dialogVisible = true">查看相关政策</div>
                 </div>
-              </div>
-              <div class="JZItem">
-                <div class="detail" v-if="analysisResult['互联网上网服务营业场所']" style="color:#00FF00">{{ allowText.hlw }}</div>
-                <div class="detail" v-if="!analysisResult['互联网上网服务营业场所']" style="color:#FF0000">{{ JZText.hlw }}</div>
-                <div class="checkZC" @click="zcIndex = 1; dialogVisible = true">查看相关政策</div>
-              </div>
-              <div class="JZItem">
-                <div class="detail" v-if="analysisResult['娱乐场所']" style="color:#00FF00">{{ allowText.ylcs }}</div>
-                <div class="detail" v-if="!analysisResult['娱乐场所']" style="color:#FF0000">{{ JZText.ylcs }}</div>
-                <div class="checkZC" @click="zcIndex = 2; dialogVisible = true">查看相关政策</div>
-              </div>
-              <div class="JZItem">
-                <div class="detail" v-show="analysisResult['烟草制品零售点']" style="color:#00FF00">{{ allowText.yc }}</div>
-                <div class="detail" v-show="!analysisResult['烟草制品零售点']" style="color:#FF0000">{{ JZText.yc }}</div>
-                <div class="checkZC" @click="zcIndex = 3; dialogVisible = true">查看相关政策</div>
-              </div>
-              <div class="JZItem">
-                <div class="detail" v-if="analysisResult['噪声污染']" style="color:#00FF00">{{ allowText.zy }}</div>
-                <div class="detail" v-if="!analysisResult['噪声污染']" style="color:#FF0000">{{ JZText.zy }}</div>
-                <div class="checkZC" @click="zcIndex = 4; dialogVisible = true">查看相关政策</div>
-              </div>
-            </el-scrollbar>
+                <div class="JZItem" v-show="!analysisResult['互联网上网服务营业场所']">
+                  <div class="detail">{{ JZText.hlw }}</div>
+                  <div class="checkZC" @click="zcIndex = 1; dialogVisible = true">查看相关政策</div>
+                </div>
+                <div class="JZItem" v-show="!analysisResult['娱乐场所']">
+                  <div class="detail">{{ JZText.ylcs }}</div>
+                  <div class="checkZC" @click="zcIndex = 2; dialogVisible = true">查看相关政策</div>
+                </div>
+                <div class="JZItem" v-show="!analysisResult['烟草制品零售点']">
+                  <div class="detail">{{ JZText.yc }}</div>
+                  <div class="checkZC" @click="zcIndex = 3; dialogVisible = true">查看相关政策</div>
+                </div>
+                <div class="JZItem" v-show="!analysisResult['噪声污染']">
+                  <div class="detail">{{ JZText.zy }}</div>
+                  <div class="checkZC" @click="zcIndex = 4; dialogVisible = true">查看相关政策</div>
+                </div> -->
+                <!-- #FFB400 -->
+                <div :class="analysisResult['餐饮服务项目'] ? 'JZItem backGColor' : 'JZItem backYColor'" @click="zcIndex = 0; dialogVisible = true">
+                  <!-- style="color:#00FF00" -->
+                   <div class="checkZC"><img :src="analysisResult['餐饮服务项目'] ? bggImg : bgyImg" style="width: 15px;"></div>
+                  <div class="detail" v-if="analysisResult['餐饮服务项目']" style="color:#00FF00 ">{{ allowText.cy }}</div>
+                  <div class="detail" v-if="!analysisResult['餐饮服务项目']" style="color: #FFB400">{{ JZText.cy }}</div>
+                  <!-- <div class="checkZC" @click="zcIndex = 0; dialogVisible = true">查看相关政策</div> -->
+                </div>
+                <div :class="analysisResult['互联网上网服务营业场所'] ? 'JZItem backGColor' : 'JZItem backRColor'" @click="zcIndex = 1; dialogVisible = true">
+                  <div class="checkZC"><img :src="analysisResult['互联网上网服务营业场所'] ? bggImg : bgrImg" style="width: 15px;"></div>
+                  <div class="detail" v-if="analysisResult['互联网上网服务营业场所']" style="color:#00FF00">{{ allowText.hlw }}</div>
+                  <div class="detail" v-if="!analysisResult['互联网上网服务营业场所']" style="color:#FF0000">{{ JZText.hlw }}</div>
+                  <!-- <div class="checkZC" @click="zcIndex = 1; dialogVisible = true">查看相关政策</div> -->
+                </div>
+                <div :class="analysisResult['娱乐场所'] ? 'JZItem backGColor' : 'JZItem backRColor'" @click="zcIndex = 2; dialogVisible = true">
+                  <div class="checkZC"><img :src="analysisResult['娱乐场所'] ? bggImg : bgrImg" style="width: 15px;"></div>
+                  <div class="detail" v-if="analysisResult['娱乐场所']" style="color:#00FF00">{{ allowText.ylcs }}</div>
+                  <div class="detail" v-if="!analysisResult['娱乐场所']" style="color:#FF0000">{{ JZText.ylcs }}</div>
+                  <!-- <div class="checkZC" @click="zcIndex = 2; dialogVisible = true">查看相关政策</div> -->
+                </div>
+                <div :class="analysisResult['烟草制品零售点'] ? 'JZItem backGColor' : 'JZItem backRColor'" @click="zcIndex = 3; dialogVisible = true">
+                  <div class="checkZC"><img :src="analysisResult['烟草制品零售点'] ? bggImg : bgrImg" style="width: 15px;"></div>
+                  <div class="detail" v-show="analysisResult['烟草制品零售点']" style="color:#00FF00">{{ allowText.yc }}</div>
+                  <div class="detail" v-show="!analysisResult['烟草制品零售点']" style="color:#FF0000">{{ JZText.yc }}</div>
+                  <!-- <div class="checkZC" @click="zcIndex = 3; dialogVisible = true">查看相关政策</div> -->
+                </div>
+                <div :class="analysisResult['噪声污染'] ? 'JZItem backGColor' : 'JZItem backRColor'" @click="zcIndex = 4; dialogVisible = true">
+                  <div class="checkZC"><img :src="analysisResult['噪声污染'] ? bggImg : bgrImg" style="width: 15px;"></div>
+                  <div class="detail" v-if="analysisResult['噪声污染']" style="color:#00FF00">{{ allowText.zy }}</div>
+                  <div class="detail" v-if="!analysisResult['噪声污染']" style="color:#FF0000">{{ JZText.zy }}</div>
+                  <!-- <div class="checkZC" @click="zcIndex = 4; dialogVisible = true">查看相关政策</div> -->
+                </div>
+              </el-scrollbar>
+            </div>
           </div>
           <div class="resultPanel2" v-show="resultPanelShow">
-            <div class="title">该地址周边500m内</div>
+            <div class="title"><img src="../../public/static/image/popup-icon.png" style="width: 20px;vertical-align: middle;padding: 0 10px 0 20px;" />该地址周边500m内分布</div>
             <div class="resultPanel2content">
               <el-scrollbar>
                 <ul v-if="nearShopResult.length > 0">
                   <li v-for="(item, index) in nearShopResult" :key="index">
-                    <div class="name" v-if="item.name == '周边市民投诉次数'">{{ item.name }}：{{ item.num }}次</div>
-                    <div class="name" v-else>{{ item.name }}：{{ item.num }}家</div>
+                    <div class="name" v-if="item.name == '周边市民投诉次数'"><span style="color: #0ab3f5;">{{ item.name }}：</span>{{ item.num }}次</div>
+                    <div class="name" v-else><span style="color: #0ab3f5;">{{ item.name }}：</span>{{ item.num }}家</div>
                   </li>
                 </ul>
                 <div v-else>暂无周边信息</div>
@@ -164,8 +182,8 @@
                   <div class="resultPanel2content">
                       <ul v-if="nearShopResult.length > 0">
                         <li v-for="(item, index) in nearShopResult" :key="index">
-                          <div class="name" v-if="item.name == '周边市民投诉次数'">{{ item.name }}：{{ item.num }}次</div>
-                          <div class="name" v-else>{{ item.name }}：{{ item.num }}家</div>
+                          <div class="name" v-if="item.name == '周边市民投诉次数'"><span style="color: #0ab3f5;">{{ item.name }}：</span>{{ item.num }}次</div>
+                          <div class="name" v-else><span style="color: #0ab3f5;">{{ item.name }}：</span>{{ item.num }}家</div>
                         </li>
                       </ul>
                       <div v-else>暂无周边信息</div>
@@ -202,7 +220,8 @@ export default {
   watch: {
     // 监听 message 属性
     message(newVal) {
-      this.drawer_title = newVal.properties['店铺名称'];
+      this.drawer_title = newVal.properties['道路名称'];
+      this.searchTitle = newVal.properties['道路名称'];
     }
   },
   data() {
@@ -213,6 +232,8 @@ export default {
       switchValue: true,
       searchHZSKeyWord: "",
       searchResultList: [],
+      searchSelect:undefined,
+      searchTitle:'',
 
       isMobile:false,
       content_css:'content-mb',
@@ -225,6 +246,10 @@ export default {
       addressPanelShow: false,
       resultPanelShow: false,
 
+      bgrImg: require('../../public/static/image/zc-r.png'),
+      bggImg:require('../../public/static/image/zc-g.png'),
+      bgyImg:require('../../public/static/image/zc-y.png'),
+
       mapPoints: [],
 
       nearShopResult: [],
@@ -340,8 +365,6 @@ export default {
       }
     },
     handleDrawerClick(param){
-      debugger
-      console.log('[  ] >', param)
       this.drawerActiveName=param;
     },
     handleClose() {
@@ -350,6 +373,7 @@ export default {
 
     searchAddress() {
       let that = this;
+      that.searchSelect = undefined;
       if (this.searchHZSKeyWord != "") {
         $.ajax({
           type: "post",
@@ -373,6 +397,9 @@ export default {
                 }
               })
               that.searchResultList = Object.values(obj).slice(0, 10)
+              that.searchResultList.map(function (item, index) {
+                item.image = "./static/image/point" + (index + 1) + ".png"
+              })
               // 地图加点
               that.addPoints();
             } else {
@@ -413,7 +440,8 @@ export default {
         return viewer.entities.add({
           position: SkyScenery.Cartesian3.fromDegrees(item.lon, item.lat),
           billboard: {
-            image: "./static/image/point" + (index + 1) + ".png",
+            // image: "./static/image/point" + (index + 1) + ".png",
+            image: item.image,
             width: 48, // default: undefined
             height: 48, // default: undefined
             scale: 1.0, // default: 1.0
@@ -448,11 +476,13 @@ export default {
     clickPointJGTL(item) {
       this.searchHZSKeyWord = ""
       this.searchAddress();// 为清空地名地址而执行
-      this.judgeHandle(item)
+      this.judgeHandle(item,undefined)
     },
 
-    judgeHandle(item) {
+    judgeHandle(item,index) {
       let that = this;
+      that.searchTitle = item.address;
+      that.searchSelect = index;
       item = toRaw(item);
       viewer.camera.flyTo({
         destination: SkyScenery.Cartesian3.fromDegrees(
@@ -616,7 +646,6 @@ export default {
         // that.analysisResult["娱乐场所"]
         // that.analysisResult["烟草制品零售点"]
         // that.analysisResult["噪声污染"]
-        console.log('[ rrr ] >', interfaceResult)
         if (interfaceResult.content.foundPlace != undefined) {
           
           let arr = interfaceResult.content.foundPlace.banned.split(",").map(num => Number(num))
@@ -770,6 +799,10 @@ export default {
   text-align: center;
   font-weight: bold;
 }
+/deep/ .el-input-group__append{
+  background: #418dff;
+  box-shadow: none;
+}
 
  @media screen and (max-width: 800px) {
       input,textarea,.ivu-select{
@@ -847,7 +880,7 @@ export default {
 
         .el-input {
           pointer-events: auto;
-          border: 2px solid #01346f99;
+          // border: 2px solid #01346f99;
           border-radius: 5px;
         }
 
@@ -942,6 +975,7 @@ export default {
             line-height: 24px;
             font-size: 20px;
             margin-bottom: 20px;
+            background-size: cover;
           }
 
           .resultPanel2content {
@@ -956,7 +990,7 @@ export default {
               li {
                 list-style: none;
                 cursor: pointer;
-                border-bottom: 1px solid #eeeeee;
+                // border-bottom: 1px solid #eeeeee;
                 padding-bottom: 10px;
                 margin-bottom: 10px;
 
@@ -1059,7 +1093,7 @@ export default {
 
         .el-input {
           pointer-events: auto;
-          border: 2px solid #01346f99;
+          // border: 2px solid #01346f99;
           border-radius: 5px;
         }
 
@@ -1068,22 +1102,21 @@ export default {
           margin-top: 10px;
           width: 100%;
           height: 200px;
-          background: #01346f99;
+          // background: #01346f99;
+          background: #ffffff;
           padding: 10px 10px;
           box-sizing: border-box;
           overflow: hidden;
           overflow-y: auto;
-
+          color: #418dff;
           ul {
             margin: 0 0;
             padding: 0 0;
-
             li {
               list-style: none;
               cursor: pointer;
               border-bottom: 1px solid #eeeeee;
-              padding-bottom: 10px;
-              margin-bottom: 10px;
+              padding: 10px 0px;
 
               .name {
                 font-size: 18px;
@@ -1097,6 +1130,15 @@ export default {
                 font-size: 14px;
               }
             }
+            li:hover {
+              background: #e9e9e9;
+            }
+            li:active {
+              background: #bbe2f9;
+            }
+            li.active {
+              background: #bbe2f9;
+            }
           }
         }
 
@@ -1105,36 +1147,74 @@ export default {
           margin-top: 10px;
           width: 100%;
           height: 220px;
-          background: #01346f99;
-          padding: 10px 10px;
+          // background: #01346f99;
+          background: #ffffff;
+          // padding: 10px 10px;
           padding-right: 0px;
           box-sizing: border-box;
 
-          .JZItem {
-            width: 100%;
-            margin-bottom: 15px;
-            cursor: pointer;
-            position: relative;
-            padding-right: 10px;
-            box-sizing: border-box;
+          .title {
+            height: 40px;
+            line-height: 40px;
+            color: #000000;
+            // font-size: 20px;
+            // margin-bottom: 20px;
+            background-image: url('../../public/static/image/popup-title.png');
+            background-size: 100% 100%;
+          }
 
-            .detail {
-              width: calc(100% - 110px);
-              min-height: 36px;
-              // text-shadow: 0.5px 0.5px 2px #ffffff;
+          .resultPanel2content {
+            height: 150px;
+            overflow: hidden;
+            overflow-y: auto;
+            padding: 20px 20px;
+
+            .backRColor{
+              background-image: linear-gradient(92deg, #fbe6e6, transparent, transparent);
+              border-left: 1px solid red;
+            }
+            .backGColor{
+              background-image: linear-gradient(92deg, #d6fdcd, transparent, transparent);
+              border-left: 1px solid #48d900;
+            }
+            .backYColor{
+              background-image: linear-gradient(92deg, #f7ebcf, transparent, transparent);
+              border-left: 1px solid #FFB400;
             }
 
-            .checkZC {
-              position: absolute;
-              top: 0px;
-              right: 10px;
-              border: 1px solid #ffffff;
-              padding: 0px 5px;
-              border-radius: 5px;
-              font-size: 16px;
+            .JZItem {
+              width: 100%;
+              margin-bottom: 5px;
+              cursor: pointer;
+              position: relative;
+              // padding-right: 10px;
+              box-sizing: border-box;
+              display: flex;
+              align-items: center;
+
+              .detail {
+                // width: calc(100% - 110px);
+                // min-height: 36px;
+                font-size: 14px;
+                vertical-align: middle;
+                padding: 10px 0px 10px 30px;
+                // text-shadow: 0.5px 0.5px 2px #ffffff;
+              }
 
-              &:hover {
-                background: #01346f99;
+              .checkZC {
+                position: absolute;
+                left: 0px;
+                // width: 30px;
+                border-radius: 5px;
+                font-size: 16px;
+                vertical-align: middle;
+                padding: 10px;
+                display: flex;
+                justify-items: center;
+
+                &:hover {
+                  // background: #01346f99;
+                }
               }
             }
           }
@@ -1144,22 +1224,28 @@ export default {
           pointer-events: auto;
           margin-top: 10px;
           width: 100%;
-          height: 260px;
-          background: #01346f99;
-          padding: 10px 10px;
+          height: 200px;
+          // background: #01346f99;
+          background: #ffffff;
+          color: #000000;
+          // padding: 10px 10px;
           box-sizing: border-box;
 
           .title {
-            height: 24px;
-            line-height: 24px;
-            font-size: 20px;
-            margin-bottom: 20px;
+            height: 40px;
+            line-height: 40px;
+            // font-size: 20px;
+            // margin-bottom: 20px;
+            background-image: url('../../public/static/image/popup-title.png');
+            background-size: 100% 100%
           }
 
           .resultPanel2content {
-            height: 200px;
+            height: 130px;
             overflow: hidden;
             overflow-y: auto;
+            padding: 20px 20px;
+            font-size: 14px;
 
             ul {
               margin: 0 0;
@@ -1167,13 +1253,13 @@ export default {
 
               li {
                 list-style: none;
-                cursor: pointer;
-                border-bottom: 1px solid #eeeeee;
+                // cursor: pointer;
+                // border-bottom: 1px solid #eeeeee;
                 padding-bottom: 10px;
-                margin-bottom: 10px;
+                // margin-bottom: 10px;
 
                 .name {
-                  font-size: 16px;
+                  // font-size: 16px;
                 }
               }
             }
@@ -1197,15 +1283,19 @@ export default {
       top: calc(50% - 222px);
       left: calc(50% - 211px);
       width: 422px;
-      height: 444px;
-      background: url(~@/assets/images/u133.png) no-repeat center center/100% 100%;
+      max-height: 444px;
+      // height: 444px;
+      // background: url(~@/assets/images/u133.png) no-repeat center center/100% 100%;
       overflow: hidden;
+      background: #ffffff;
+      border-radius: 10px;
 
       .kdyjs-header {
         width: 100%;
-        height: 60px;
+        height: 40px;
         line-height: 40px;
-        color: #ffffff;
+        // color: #ffffff;
+        color: #000000;
         text-align: center;
         font-size: 20px;
         font-weight: bold;
@@ -1219,7 +1309,8 @@ export default {
           height: 40px;
           line-height: 40px;
           text-align: center;
-          color: #00dbff;
+          // color: #00dbff;
+          color: #656262;
           font-weight: bold;
           font-size: 20px;
 
@@ -1232,7 +1323,8 @@ export default {
         height: calc(100% - 60px);
         padding: 10px 26px 36px 26px;
         box-sizing: border-box;
-        color: #ffffff;
+        // color: #ffffff;
+        color: #000000;
         text-indent: 20px;
       }
     }
@@ -1246,7 +1338,7 @@ export default {
 
       .kdyjs-header {
         width: 100%;
-        height: 60px;
+        height: 40px;
         line-height: 40px;
         color: #ffffff;
         text-align: center;