营地2.0-活动中心

src/components/base/Header.vue

@@ -140,12 +140,13 @@
 
         ::v-deep .el-menu {
           margin-right: 100px;
+          border: 0;
 
           .el-menu-item {
             height: 44px;
             line-height: 44px;
             padding: 0 5px;
-            margin: 20px;
+            margin: 18px 20px;
             color: #666666;
             font-size: 15px;
             font-family: "PingFang SC";

src/router/index.js

@@ -184,8 +184,6 @@ router.beforeEach((to, from, next) => {
 
 // 页面跳转之后页面回滚到顶部
 router.afterEach((to, from, next) => {
-  // console.log(to,'to')
-
   window.scrollTo(0, 0)
 });
 export default router

src/store/mutations.js

@@ -18,7 +18,6 @@ export default {
     localStorage.removeItem("isLogin");
   },
   setActiveIndex(state, path) {
-    console.log(path)
     let key = path.split('/')[1] == 'active' ? '/' + path.split('/')[1] : path;
     state.activeIndex = key;
     window.localStorage.setItem('index-active-path', key);

src/views/base/Index.vue

 <template>
   <el-container>
-    <el-header height="auto">
+    <el-header height="80px">
       <Header></Header>
     </el-header>
     <el-container>
       <router-view :key="$route.name"></router-view>
       <Footer></Footer>
     </el-container>
+    <div class="to-top"
+         v-if="show"
+         @click="toTop"
+         :style="style">
+      <i class="el-icon-top"></i>
+    </div>
   </el-container>
 </template>
 <script>
@@ -21,12 +27,57 @@
       Footer,
     },
     data() {
-      return {};
+      return {
+        show: false,
+        style: {
+          position: 'fixed',
+          bottom: "10px"
+        },
+      };
     },
     created() {
       console.log('created');
     },
-    methods: {},
+    mounted() {
+      window.addEventListener('scroll', this.handleScrollY, true);
+    },
+    destroyed() {
+      window.removeEventListener('scroll', this.handleScrollY, true);
+    },
+    methods: {
+      toTop() {
+        document.body.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start'
+        });
+      },
+      handleScrollY() {
+        // 底部距离顶部的高度
+        let footerOffsetTop = document.querySelector('.footer').offsetTop;
+        // 底部的高度
+        let footerOffsetHeight = document.querySelector('.footer').offsetHeight;
+        // body的高度
+        let bodyOffsetHeight = document.body.offsetHeight;
+        // 页面滚动高度
+        let scrollTop = document.documentElement.scrollTop;
+        if (scrollTop > 0) {
+          this.show = true;
+        } else {
+          this.show = false;
+        }
+        if (scrollTop < (footerOffsetTop - bodyOffsetHeight + 60)) {
+          this.style = {
+            position: 'fixed',
+            bottom: "10px"
+          };
+        } else {
+          this.style = {
+            position: 'absolute',
+            bottom: (footerOffsetHeight + 10) + 'px'
+          }
+        }
+      },
+    },
   };
 </script>
 <style lang="scss">
@@ -39,22 +90,42 @@
   }
 
   .el-container {
+    position: relative;
     width: 100%;
-    height: 100%;
-    overflow: hidden;
-    min-width: 1024px;
-    box-sizing: border-box;
+    min-height: 100%;
+    min-width: 1150px;
+    /*box-sizing: border-box;*/
     background-color: #f5f5f5;
 
     .el-header {
+      position: fixed;
+      width: 100%;
+      z-index: 10000;
       padding: 0;
     }
 
     .el-container {
       width: 100%;
-      overflow: auto;
+      /*overflow: auto;*/
       display: flex;
       flex-flow: column;
+      margin-top: 80px;
+    }
+
+    .to-top {
+      right: 10px;
+      width: 50px;
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+      font-size: 30px;
+      border-radius: 8px;
+      color: #ffffff;
+      background-color: #919191;
+      cursor: pointer;
+      &:hover{
+        background-color: #999999;
+      }
     }
   }
 </style>

src/views/base/active/Active.vue

@@ -20,7 +20,6 @@
                     placeholder="最小天数"
                     class="ml"
                     oninput="value=value.replace(/^0/g, '')"
-                    @blur="onInputBlur"
           ></el-input>
           <div class="line">——</div>
           <el-input v-model="queryForm.num2"
@@ -28,9 +27,15 @@
                     :min="1"
                     placeholder="最大天数"
                     oninput="value=value.replace(/^0/g, '')"
-                    @blur="onInputBlur"
           ></el-input>
-          <el-button @click="clearInput">清除</el-button>
+          <el-button @click="resetHandle">重置</el-button>
+          <el-button @click="searchHandle">确定</el-button>
+        </div>
+        <div class="content-item">
+          <div class="content-item-tit">本站报名</div>
+          <div class="content-item-txt is-active">全部</div>
+          <div class="content-item-txt">支持</div>
+          <div class="content-item-txt">不支持</div>
         </div>
       </div>
     </div>
@@ -205,12 +210,12 @@
       this.getList();
     },
     methods: {
-      // 输入框失去焦点
-      onInputBlur() {
+      // 确定按钮
+      searchHandle() {
         this.getList();
       },
-      // 清除按钮
-      clearInput() {
+      // 重置按钮
+      resetHandle() {
         this.queryForm.num1 = null;
         this.queryForm.num2 = null;
         this.getList();