提交

src/components/menu.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="menuDiv">
+    <ul class="menuUl">
+      <li
+        v-for="(item, index) in 8"
+        :key="index"
+        :class="{ active: activeIndex === index }"
+        @mouseover="menuMouseOver(index)"
+        @mouseleave="menuMouseLeave(index)"
+      >
+        <router-link to="home">
+          <span class="menuLine"></span>文件柜
+          <i class="el-icon-arrow-right"></i>
+        </router-link>
+      </li>
+    </ul>
+    <div
+      class="menuCon"
+      v-if="menuCon"
+      @mouseover="menuConMouseOver"
+      @mouseleave="menuConMouseLeave"
+    >
+      <ul class="menuConUl">
+        <li v-for="(item, index) in 10" :key="index">选项</li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+import { Component, Vue } from "vue-property-decorator";
+export default {
+  name: "app",
+  components: {},
+  data() {
+    return {
+      activeIndex: "a",
+      menuCon: false
+    };
+  },
+  methods: {
+    menuMouseOver(index) {
+      console.log(index);
+      this.activeIndex = index;
+      this.menuCon = true;
+    },
+    menuMouseLeave(index) {
+      console.log(index);
+      this.activeIndex = "a";
+      this.menuCon = false;
+    },
+    menuConMouseOver() {
+      console.log(index);
+      this.menuCon = true;
+    },
+    menuConMouseLeave() {
+      console.log(index);
+      this.menuCon = false;
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.menuDiv {
+  width: 100%;
+  position: relative;
+  .menuUl {
+    list-style: none;
+    width: 100%;
+    background: #fff;
+    li {
+      height: 4.8rem;
+      line-height: 4.8rem;
+      font-size: 1.4rem;
+      color: #333;
+      border-bottom: 0.1rem solid #e5e5e5;
+      padding: 0 1.6rem;
+      box-sizing: border-box;
+      position: relative;
+      &.active {
+        background: #ffddd3;
+        a {
+          color: #fd5522;
+        }
+        i {
+          color: #fd5522;
+        }
+        .menuLine {
+          background: #fd5522;
+        }
+      }
+      .menuLine {
+        display: inline-block;
+        height: 1.4rem;
+        width: 0.2rem;
+        background: #fff;
+        position: absolute;
+        left: 0;
+        top: 1.6rem;
+      }
+      i {
+        float: right;
+        margin-top: 1.8rem;
+      }
+    }
+  }
+  .menuCon {
+    width: 60rem;
+    height: 100%;
+    background: #fff;
+    padding: 1.6rem;
+    box-sizing: border-box;
+    position: absolute;
+    top: 0;
+    right: -60rem;
+    z-index: 99;
+    .menuConUl {
+      list-style: none;
+      overflow: hidden;
+      li {
+        float: left;
+        font-size: 1.2rem;
+        color: #333;
+        margin-right: 1rem;
+      }
+    }
+  }
+}
+</style>

src/views/home/index.vue

@@ -3,27 +3,7 @@
     <div class="container">
       <el-row class="mt2rem" :gutter="20">
         <el-col :span="4">
-          <div class="menuDiv">
-            <ul class="menuUl">
-              <li
-                v-for="(item, index) in 8"
-                :key="index"
-                :class="{ active: activeIndex === index }"
-                @mouseover="menuMouseOver(index)"
-                @mouseleave="menuMouseLeave(index)"
-              >
-                <router-link to="home">
-                  <span class="menuLine"></span>文件柜
-                  <i class="el-icon-arrow-right"></i>
-                </router-link>
-              </li>
-            </ul>
-            <div class="menuCon" v-if="activeIndex != 'a'">
-              <u class="menuConUl">
-                <li v-for="(item, index) in 10" :key="index">选项</li>
-              </u>
-            </div>
-          </div>
+          <mymenu></mymenu>
         </el-col>
         <el-col :span="14">
           <el-carousel class="bannerD marquee" :autoplay="false">
@@ -240,9 +220,12 @@
 </template>
 <script>
 import { Component, Vue } from "vue-property-decorator";
+import mymenu from "@/components/menu.vue";
 export default {
   name: "app",
-  components: {},
+  components: {
+    mymenu
+  },
   data() {
     return {
       shangpin: [],
@@ -271,71 +254,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.menuDiv {
-  width: 100%;
-  position: relative;
-  .menuUl {
-    list-style: none;
-    width: 100%;
-    background: #fff;
-    li {
-      height: 4.8rem;
-      line-height: 4.8rem;
-      font-size: 1.4rem;
-      color: #333;
-      border-bottom: 0.1rem solid #e5e5e5;
-      padding: 0 1.6rem;
-      box-sizing: border-box;
-      position: relative;
-      &.active {
-        background: #ffddd3;
-        a {
-          color: #fd5522;
-        }
-        i {
-          color: #fd5522;
-        }
-        .menuLine {
-          background: #fd5522;
-        }
-      }
-      .menuLine {
-        display: inline-block;
-        height: 1.4rem;
-        width: 0.2rem;
-        background: #fff;
-        position: absolute;
-        left: 0;
-        top: 1.6rem;
-      }
-      i {
-        float: right;
-        margin-top: 1.8rem;
-      }
-    }
-  }
-  .menuCon {
-    width: 60rem;
-    height: 100%;
-    background: #fff;
-    padding: 1.6rem;
-    box-sizing: border-box;
-    position: absolute;
-    top: 0;
-    right: -60rem;
-    z-index: 99;
-    .menuConUl {
-      list-style: none;
-      overflow: hidden;
-      li {
-        float: left;
-        font-size: 1.2rem;
-        color: #333;
-        margin-right: 1rem;
-      }
-    }
-  }
-}
 .bannerD {
   height: 39rem;
   .banner {

src/views/info/index.vue

@@ -1,10 +1,159 @@
 <template>
-  <div>
-    需求供应
+  <div class="bg-F5">
+    <div class="container">
+      <el-row class="mt2rem" :gutter="20">
+        <el-col :span="4">
+          <mymenu></mymenu>
+        </el-col>
+        <el-col :span="20">
+          <div class="infoTabDiv">
+            <el-tabs v-model="activeName" @tab-click="handleClick">
+              <el-tab-pane label="求购信息" name="first">
+                <ul class="listUl">
+                  <li v-for="item in 10" :key="item">
+                    <router-link to="/">
+                      <span class="name">信息信息信信息信息信息息11111</span
+                      ><span class="date">2010-01-01发布</span></router-link
+                    >
+                  </li>
+                </ul>
+              </el-tab-pane>
+              <el-tab-pane label="供应信息" name="second">
+                <ul class="listUl">
+                  <li v-for="item in 10" :key="item">
+                    <router-link to="/"
+                      >信息信息信信息信息信息息333333<span class="date"
+                        >2010-01-01发布</span
+                      ></router-link
+                    >
+                  </li>
+                </ul>
+              </el-tab-pane>
+            </el-tabs>
+            <div class="btnDiv">
+              <el-button class="buyBtn" size="mini">我要买</el-button>
+              <el-button class="buyBtn" size="mini">我要卖</el-button>
+            </div>
+          </div>
+          <el-pagination
+            class="pageDiv"
+            background
+            @current-change="handleCurrentChange"
+            :page-size="pageSize"
+            :current-page="currentPage"
+            layout="prev, pager, next,total, jumper"
+            :total="total"
+          ></el-pagination>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
-<script lang="ts">
+<script>
 import { Component, Vue, Watch } from "vue-property-decorator";
-@Component
-export default class extends Vue {}
+import mymenu from "@/components/menu.vue";
+export default {
+  name: "app",
+  components: {
+    mymenu
+  },
+  data() {
+    return {
+      activeName: "first",
+      currentPage: 1,
+      pageSize: 10,
+      total: 20
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.requestData();
+    }
+  }
+};
 </script>
+<style lang="scss" scoped>
+.infoTabDiv {
+  position: relative;
+  background: #fff;
+  .btnDiv {
+    height: 5rem;
+    line-height: 5rem;
+    position: absolute;
+    right: 1.6rem;
+    top: 0;
+    .buyBtn {
+      background: #fd5522;
+      color: #fff;
+      margin-left: 2rem;
+      border: 0;
+      border-radius: 0.4rem;
+    }
+  }
+  .listUl {
+    list-style: none;
+    width: 100%;
+    padding: 0 1.6rem 1.6rem;
+    box-sizing: border-box;
+    li {
+      height: 3.6rem;
+      line-height: 3.6rem;
+      overflow: hidden;
+      font-size: 1.4rem;
+      .name {
+        display: block;
+        width: 80%;
+        float: left;
+        overflow: hidden;
+        color: #333;
+      }
+      .date {
+        display: block;
+        width: 20%;
+        float: left;
+        text-align: right;
+        color: #666;
+      }
+    }
+  }
+}
+.pageDiv {
+  text-align: right;
+  margin-top: 0.5rem;
+  padding: 2rem 0;
+}
+.mt2rem {
+  margin-top: 2rem;
+}
+</style>
+<style lang="scss">
+.infoTabDiv {
+  .el-tabs__nav-scroll {
+    padding: 0 1.6rem;
+    box-sizing: border-box;
+  }
+  .el-tabs__item {
+    height: 5rem;
+    line-height: 5rem;
+  }
+  .el-tabs__item:hover {
+    color: #fd5522;
+  }
+  .el-tabs__item.is-active {
+    color: #fd5522;
+  }
+  .el-tabs__active-bar {
+    background-color: #fd5522;
+  }
+}
+.pageDiv.el-pagination.is-background .el-pager li:not(.disabled).active {
+  background: #fd5522;
+}
+.pageDiv.el-pagination.is-background .el-pager li:not(.disabled):hover {
+  color: #fd5522;
+}
+</style>

src/views/shops/enter/index.vue

@@ -184,10 +184,10 @@ export default {
 .qyrzg tr.el-table__row--striped td {
   background: #fff6f4;
 }
-.el-pagination.is-background .el-pager li:not(.disabled).active {
+.pageDiv.el-pagination.is-background .el-pager li:not(.disabled).active {
   background: #fd5522;
 }
-.el-pagination.is-background .el-pager li:not(.disabled):hover {
+.pageDiv.el-pagination.is-background .el-pager li:not(.disabled):hover {
   color: #fd5522;
 }
 </style>