Merge branch 'master' of http://face3d.4dage.com:7005/shaogen1995/ShouBo

web/src/views/layout/index.vue

@@ -186,8 +186,24 @@
           aria-label
           aria-description="You've reached the pop-up window section, which has one URL and one image. Please use the tab key to go through the information."
         >
+          <li class="searchLi" v-if="!menaInd.includes('Search')">
+            <div class="searchHover">
+              <div class="ll" @click="search2">
+                <img src="@/assets/images/LayoutSearch2.jpg" alt="" />
+              </div>
+              <div class="rr" @keyup.enter="search2">
+                <input type="text" placeholder="search" v-model="searchTxt2" />
+              </div>
+            </div>
+            <img src="@/assets/images/LayoutSearch.png" alt="" />
+          </li>
           <li title="game">
-            <a href="" tabindex="0" aria-description="shadow art game">
+            <a
+              href="/game/index.html"
+              target="_blank"
+              tabindex="0"
+              aria-description="shadow art game"
+            >
               <img
                 v-if="themeIdx === 0"
                 src="@/assets/images/game-default-color.svg"
@@ -259,6 +275,7 @@ export default {
       topData,
       loveFlag: false,
       searchTxt: "",
+      searchTxt2: "",
       footerData: [
         { name: "Site Index", path: "/Layout/Index" },
         { name: "Terms of Use", path: "/Layout/Use" },
@@ -306,6 +323,15 @@ export default {
         params: { txt: this.searchTxt },
       });
     },
+    // 点击搜索
+    search2() {
+      // if (this.searchTxt.trim() === "" || this.searchTxt.trim().length < 4) return
+      this.$router.push({
+        name: "Search",
+        params: { txt: this.searchTxt2 },
+      });
+      this.searchTxt2 = "";
+    },
     // 第一级的跳转
     skipOne(url) {
       this.$router.push("/Layout/" + url).catch(() => {});
@@ -526,6 +552,46 @@ export default {
         }
       }
     }
+    .searchLi {
+      padding-top: 18px;
+      position: relative;
+      .searchHover {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 300px;
+        height: 60px;
+        display: flex !important;
+        opacity: 0;
+        pointer-events: none;
+        .ll {
+          width: 60px;
+          height: 60px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          background-color: #fff;
+          border: 1px solid #a3a3a3;
+        }
+        .rr {
+          width: 240px;
+          background-color: #c20e11;
+          padding: 8px;
+          input {
+            padding: 0 5px;
+            width: 200px;
+            height: 38px;
+            line-height: 44px;
+          }
+        }
+      }
+      &:hover {
+        .searchHover {
+          opacity: 1;
+          pointer-events: auto;
+        }
+      }
+    }
   }
 }
 .footer {
@@ -593,7 +659,7 @@ export default {
           }
         }
       }
-      .search{
+      .search {
         right: 20px;
       }
     }