20210826 15-26

css/components.less

@@ -4,6 +4,7 @@
 
 
 // 通用样式
+// 省
 .my-province {
   position: relative;
 
@@ -64,6 +65,46 @@
     }
   }
 }
+// 搜索
+.my-search{
+  margin: 32px 30px 0 0;
+  div{
+    display: flex;
+    align-items: center;
+    border: 1px solid #aaa;
+    border-radius: 5px;
+    padding: 0 0 0 5px;
+    overflow: hidden;
+    max-width: 300px;
+    select{
+      border: 0;
+      outline: none;
+      border-right: 1px solid #e6e6e6 !important;
+      height: 34px;
+      box-sizing: border-box;
+      border-right: 0;
+    }
+    input{
+      border: 0;
+      outline: none;
+      padding: 5px;
+      height: 34px;
+      box-sizing: border-box;
+      border-left: 0;
+      width: 100%;
+    }
+    label{
+      display: block;
+      margin: 0;
+      height: 34px;
+      box-sizing: border-box;
+      color: #0099CC !important;
+      line-height: 34px;
+      padding: 0 10px;
+      color: #fff;
+    }
+  }
+}
 
 // 标签默认样式
 textarea {
@@ -256,7 +297,11 @@ body {
         border-radius: 5px;
       }
     }
-
+    .my-search{
+      @media screen  and (max-width:768px){
+        display: none;
+      }
+    }
     .app {
       height: 100%;
       text-align: center;
@@ -285,13 +330,15 @@ body {
   }
 
   .hb-item {
-
     // 大屏下拉菜单
+    box-sizing: border-box;
     .nav {
+      // transform: translateY(-30px);
+      box-sizing: border-box;
+      width: 100%;
       display: flex;
       justify-content: flex-start;
       align-content: center;
-
       @media screen and (max-width:768px) {
         & {
           display: none;
@@ -369,16 +416,22 @@ body {
   box-sizing: border-box;
   background-color: #fff;
   margin-top: 80px;
-  padding: 0 20px;
+  padding: 0 0 0 22px;
 
   // 通用样式
   .my-province {
     padding: 20px 0;
-
     div {
       top: 50px;
     }
   }
+  .search{
+    padding: 20px 0;
+    border-bottom: 1px solid #e6e6e6;
+    .my-search{
+        margin: 0;
+    }
+  }
 
   @media screen and (max-width:768px) {
     & {
@@ -484,6 +537,9 @@ body {
       margin-bottom: 10px;
     }
   }
+  .my-search{
+    margin: 10px 0;
+  }
 
   // 相关文章
   .my-articles {

js/index.js

@@ -9,7 +9,7 @@ $(function () {
       let valdoms = $(this).siblings(),
         selectval = $(valdoms[0]).val(),
         inputval = $(valdoms[1]).val();
-      window.open(`/search.html?selectval=${selectval}&inputval=${inputval}`);
+      window.open(`/search.html?selectval=${selectval}&inputval=${encodeURI(inputval)}`);
     })
 })
 

js/search.js

@@ -1,6 +1,7 @@
 $(function () {
   let params = lxd.parseUrl(window.location.href).query,
     my_search = $(".my-search>div"), start = 0, end = 0, currentPage = 1, pageSize = 20, totalPage = 1;
+  params.inputval = decodeURI(params.inputval);
   my_search.find("select").val(params.selectval);
   my_search.find("input").val(params.inputval);
   // 数据渲染
@@ -52,8 +53,7 @@ $(function () {
   // 页面搜索逻辑
   function axios () {
     let div = $(".my-search>div"), data = { selectval: div.find("select").val(), inputval: div.find("input").val() };
-    params = { ...data };
-    request(params).then(res => problem(res));
+    window.location.href = `/search.html?selectval=${data.selectval}&inputval=${data.inputval}`;
   }
   $(".button").click(axios);
   // 分页问题 小于5