.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "java.compile.nullAnalysis.mode": "automatic"
+}

screen-demo/src/views/templateInstance.vue

@@ -67,10 +67,14 @@
           placeholder="选择省市"
           :options="trees"
           filterable
+          popper-class="mzfs-cascader"
       ></el-cascader>
       <div class="input-container">
-        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select" @focus="open=true">
+        <!-- @focus="open=true" -->
+        <el-input placeholder="请输入关键词" v-model="input3" class="input-with-select">
           <el-button slot="append" icon="el-icon-search" @click="setValue" ></el-button>
+          <span slot="append" class="nav"></span>
+                <template #prepend></template>
         </el-input>
       </div>
       <div  class="router-wraps" v-if="open" style="top: calc(100% + 2px); margin-top: 4px; left: 117px;">
@@ -2291,14 +2295,79 @@ html {
   height: 600px;
 }
 .another-container {
+  display: flex;
+  // background: url('@/assets/images/cityPicker.png') 0 0 no-repeat;
+  background-size: 100% 100%;
   position: fixed;
-  left: 40vh; /* 调整这里的距离来控制第二个 div 与第一个 div 的间距 */
-  top: 10vh;
+  left: 320px; /* 调整这里的距离来控制第二个 div 与第一个 div 的间距 */
+  top: 50.9842px;
   transform: translateY(-50%);
   color: #000; /* 设置第二个 div 的文字颜色 */
-  background-color: rgb(97, 187, 238); /* 设置第二个 div 的背景颜色 */
-  width: 280px; /* 设置第二个 div 的宽度 */
-  height: 50px; /* 设置第二个 div 的高度 */
+  // background-color: rgb(97, 187, 238); /* 设置第二个 div 的背景颜色 */
+  width: 368px; /* 设置第二个 div 的宽度 */
+  height: 34px; /* 设置第二个 div 的高度 */
+  z-index: 1003;
+  .cascader{
+    background: #123493 !important;
+    .el-cascader-node.in-active-path,
+    .el-cascader-node.is-active,
+    .el-cascader-node.is-selectable.in-checked-path {
+      color: #4e5ef1;
+    }
+  }
+  .el-cascader{
+    // background: url('@/assets/images/input_left.png') 0 0 no-repeat;
+    width:35%;
+    ::v-deep .el-input .el-input__inner{
+      border-radius: 9px;
+      border: 1px solid #B1DEFD;
+      background-image: linear-gradient(to bottom, #132132,#3361A5) !important;
+    }
+    ::v-deep .el-input .el-input__inner::-webkit-input-placeholder{
+      color: #fff;
+    }
+  }
+  .input-container{
+    left: -3%;
+    top: 2%;
+    z-index: -1;
+    ::v-deep .el-input .el-input__inner{
+      color: #fff;
+      border-radius: 9px;
+      background-image: linear-gradient(to bottom, #132132,#3361A5) !important;
+      border: 1px solid #B1DEFD;
+    }
+    ::v-deep .el-input-group__append{
+      border: none !important;
+      background-color:none !important;
+      background: none !important;
+    }
+    ::v-deep .el-button{
+      position: relative;
+      right:1102%;
+      .el-icon-search{
+        color: #fff;
+      }
+      .el-icon-search::after{
+        content:'';
+        position: relative;
+        left:75%;
+        border: 1px solid #627D95;
+        width: 1px;
+        height: 2px;
+      }
+    }
+    .nav{
+      position: absolute;
+      background: url('@/assets/images/nav.png') 0px 0px no-repeat;
+      background-size: 100% 100%;
+      width: 15px;
+      height: 15px;
+      right: 135%;
+      color: #fff;
+      z-index: 30;
+    }
+  }
 }
 .el-select .el-input {
   width: 130px;