顶部搜索结构初步修改

src/layout/components/AppMain.vue

@@ -30,7 +30,7 @@ export default {
   .container{
     /*background-color: #ffffff;*/
     min-height: calc(92.4vh - 95px);
-    margin: 0 14px 14px 14px;
+    //margin: 0 14px 14px 14px;
     border-radius: 3px;
     background: #FFFFFF;
   }
@@ -39,7 +39,7 @@ export default {
   }
 }
 .fixed-header+.app-main {
-  padding-top: 50px;
+  //padding-top: 50px;
 }
 </style>
 

src/layout/components/Navbar.vue

 <template>
-  <div class="navbar">
-
-    <breadcrumb class="breadcrumb-container" />
-
-    <!--    <div class="right-menu">-->
-    <!--      <el-dropdown class="avatar-container" trigger="click">-->
-    <!--        <div class="avatar-wrapper">-->
-    <!--          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
-    <!--          <i class="el-icon-caret-bottom" />-->
-    <!--        </div>-->
-    <!--        <el-dropdown-menu slot="dropdown" class="user-dropdown">-->
-    <!--          <el-dropdown-item>-->
-    <!--            <router-link to="/">-->
-    <!--              首页-->
-    <!--            </router-link>-->
-    <!--          </el-dropdown-item>-->
-    <!--          <el-dropdown-item divided @click.native="logout">-->
-    <!--            <span style="display:block;">退出</span>-->
-    <!--          </el-dropdown-item>-->
-    <!--        </el-dropdown-menu>-->
-    <!--      </el-dropdown>-->
-    <!--    </div>-->
-  </div>
+<!--  <div class="navbar">-->
+
+<!--    <breadcrumb class="breadcrumb-container" />-->
+
+<!--  </div>-->
 </template>
 
 <script>

src/layout/components/header.vue

 <template>
   <div class="navbar">
     <div class="title-box">
-<!--      <hamburger-->
-<!--        :is-active="sidebar.opened"-->
-<!--        class="hamburger-container"-->
-<!--        @toggleClick="toggleSideBar"-->
-<!--      />-->
-<!--      <el-dropdown-->
-<!--        class="change-sys"-->
-<!--        @command="handleCommand"-->
-<!--      >-->
-<!--&lt;!&ndash;        <span class="el-dropdown-link">&ndash;&gt;-->
-<!--&lt;!&ndash;          业务中台<i class="el-icon-arrow-down el-icon&#45;&#45;right" />&ndash;&gt;-->
-<!--&lt;!&ndash;        </span>&ndash;&gt;-->
-<!--        <el-dropdown-menu-->
-<!--          slot="dropdown"-->
-<!--        >-->
-<!--          <el-dropdown-item-->
-<!--            v-for="(item) in appList"-->
-<!--            :key="item.businessId"-->
-<!--            :command="specialTag !== '1' ? item.pcUrl : ''"-->
-<!--          >-->
-<!--            {{ item.system }}-->
-<!--          </el-dropdown-item>-->
-<!--        </el-dropdown-menu>-->
-<!--      </el-dropdown>-->
     </div>
     <div class="right-menu">
-      <!--      <i class="el-icon-info" />-->
-      <!--      <i class="el-icon-user-solid" />-->
-      <!--      <i class="el-icon-question" />-->
-      <!--      <el-badge :value="200" :max="99" class="item">-->
-      <!--        <i class="el-icon-date" />-->
-      <!--      </el-badge>-->
-      <!--      <el-badge :value="200" :max="99" class="item">-->
-      <!--        <i class="el-icon-message-solid" />-->
-      <!--      </el-badge>-->
       <span class="username-text">
         [您好，{{ userName }}]
       </span>
       <el-dropdown class="avatar-container" trigger="click">
         <div class="avatar-wrapper">
-<!--          <img :src="avatar" class="user-avatar">-->
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown" class="user-dropdown">

src/layout/index.vue

@@ -4,13 +4,13 @@
     <sidebar class="sidebar-container" />
     <div class="main-container">
       <div class="nav-container fixed-header">
-        <Header />
-      </div>
-      <div class="nav-container-two">
-        <div class="placeholder"></div>
-        <tags-view />
-        <navbar />
+<!--        <Header />-->
       </div>
+<!--      <div class="nav-container-two">-->
+<!--        <div class="placeholder"></div>-->
+<!--        <tags-view />-->
+<!--        <navbar />-->
+<!--      </div>-->
       <app-main />
     </div>
   </div>

src/styles/sidebar.scss

 @import 'variables';
 #app {
   .main-container {
-    padding-top: 6.4vh;
+    //padding-top: 6.2vh;
     min-height: 100%;
     transition: margin-left 0.28s;
     //margin-left: $sideBarWidth;

src/views/homePage/components/searchHome/components/header.vue

+<template>
+  <img :src="logo" class="homeTopLoge">
+</template>
+<script>
+export default {
+  name: 'Header',
+  data() {
+    return {
+      // logo: require('@/assets/image/homepageLogo.png'),
+      keyword: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/homePage/components/searchHome/index.vue

+<template>
+  <div class="HomeSearch">
+    <Header />
+    <div class="rightSearch">
+      <el-row style="display: flex;align-items: center;">
+        <el-col :span="16">
+          <img :src="logo" class="homeTopLoge">
+        </el-col>
+        <el-col :span="8">
+          <el-input
+            v-model="keyword"
+            class="search-input"
+            size="medium"
+            placeholder="请输入搜索内容"
+            clearable
+            @keyup.prevent.native="changeVal"
+            @keyup.enter.native="searchEnterFun"
+          >
+            <el-button slot="append" class="search-button" icon="el-icon-search" type="primary" @click="searchEnterFun()" />
+          </el-input>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import Header from '@/views/homePage/components/searchHome/components/header'
+export default {
+  name: 'Index',
+  components: { Header },
+  data() {
+    return {
+      logo: require('@/assets/image/homepageLogo.png'),
+      keyword: ''
+    }
+  },
+  methods: {
+    changeVal() {
+    },
+    searchEnterFun() {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.HomeSearch {
+  width: 100%;
+  height: 180px;
+  background-image: url("~@/assets/image/background.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  .rightSearch {
+    //text-align: center;
+    margin-top: 38.5px;
+    .homeTopLoge{
+      padding-left: 60px;
+    }
+    .search-input {
+      width: 329px;
+      height: 40px;
+      //border-radius: 24px;
+
+      .el-input__inner {
+        opacity: 0.8;
+        height: 40px;
+        //border-radius: 24px 0px 0px 24px;
+        background: rgba(255, 255, 255, 0.9);
+        padding-left: 20px !important;
+        border: 0px;
+      }
+
+      .el-input-group__append {
+        background-color: #018fd6;
+        //border-radius: 0px 24px 24px 0px;
+        border: 0px;
+
+        .el-icon-search {
+          color: #FFFFFF;
+          width: 28px;
+          height: 28px;
+          font-size: 28px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/homePage/index.vue

 <template>
   <div>
-    首页
+    <HomeSearch />
   </div>
 </template>
 
 <script>
+import HomeSearch from './components/searchHome/index'
 export default {
-  name: 'Index'
+  name: 'Index',
+  components: {
+    HomeSearch
+  }
 }
 </script>
 

src/views/login/login.vue

@@ -141,7 +141,7 @@ export default {
               // window.location.href = `${this.reLocation}/#/`
               // this.$router.push({ path: `http://main.court.com${this.redirect || "/"}` });
               this.loading = false
-              this.$router.push('/welcome')
+              this.$router.push('/homePage/index')
             })
             .catch(() => {
               this.loading = false