add goods list

pages/goods/list/index.vue

@@ -7,17 +7,76 @@
 -->
 
 <template>
-	<div>我是商品列表</div>
+  <div class="page">
+    <main class="main">
+      <nav class="main__nav">
+        <p class="main__nav-crumbs">
+          全部商品<i class="el-icon-arrow-right"></i>开发书籍
+        </p>
+        <div class="main__nav-sort">
+          <span class="main__nav-sort-txt">排序 :</span>
+          <span class="main__nav-sort-btn">综合</span>
+          <Sort sortText="价格"></Sort>
+          <span class="main__nav-sort-btn">上新</span>
+        </div>
+      </nav>
+      <div class="main__content">
+        <GoodsItem v-for="(item, index) in 11" :key="index"></GoodsItem>
+      </div>
+    </main>
+  </div>
 </template>
 <script>
+import Sort from "./module/Sort.vue";
+import GoodsItem from "./module/Item.vue";
 export default {
-	data(){
+  components: { Sort, GoodsItem },
-		return {
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="scss" scoped>
+.page {
+  background: #f8f8f8;
+  width: 100%;
+  min-height: 600px;
+}
 
+.main {
+  width: 75rem;
+  margin: 0 auto;
+
+  &__nav {
+    &-crumbs {
+      .el-icon-arrow-right {
+        margin: 0 10px;
+      }
+    }
+    &-sort {
+      width: 100%;
+      height: 48px;
+      background: #fff;
+      margin-top: 0.88rem;
+      margin-bottom: 1.13rem;
+      display: flex;
+      align-items: center;
+      padding: 0 1.88rem;
+      &-txt {
+        color: #999999;
+        margin-right: 1.88rem;
       }
+      &-btn {
+        margin-right: 3.13rem;
+      }
+    }
+  }
+  &__content {
+    display: grid;
+    width: 100%;
+    grid-template-columns: repeat(auto-fill, 14.5rem);
+    justify-content: space-between;
+    grid-row-gap: 0.63rem;
   }
 }
-</script>
-<style lang="scss" scoped>
-
 </style>

pages/goods/list/module/Item.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="goods-item"></div>
+</template>
+<script>
+export default {
+  name: "GoodsItem",
+  props: {},
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.goods-item {
+  width: 14.5rem;
+  height: 21.25rem;
+  // background: #ffffff;
+  background: url(~/assets/images/goods/item.png);
+  background-size: contain;
+}
+</style>

pages/goods/list/module/Sort.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="sort-item" @click="onSort">
+    <span class="sort-item-txt">{{ sortText }}</span>
+    <div class="sort-img-box">
+      <img
+        v-if="sortType === 1"
+        src="~/assets/images/goods/sort-t1.png"
+        alt="sort"
+      />
+      <img
+        v-if="sortType === 0"
+        src="~/assets/images/goods/sort-t2.png"
+        alt="sort"
+      />
+      <img
+        v-if="sortType === 0"
+        src="~/assets/images/goods/sort-b1.png"
+        alt="sort"
+      />
+      <img
+        v-if="sortType === 1"
+        src="~/assets/images/goods/sort-b2.png"
+        alt="sort"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { Debounce } from "~/plugins/utils";
+export default {
+  name: "Sort",
+  props: {
+    sortText: {
+      type: String,
+      default: "",
+    },
+    sortType: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    // onSort:Debounce((e) => {
+    //   console.log(1)
+    // }, 1000)
+    onSort: function () {
+      console.log(Debounce)
+      Debounce(()=>{
+        console.log(1)
+      }, 1000)();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.sort-item {
+  margin-right: 3.13rem;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .sort-item-txt {
+    margin-right: 0.38rem;
+    display: flex;
+    align-items: center;
+  }
+  .sort-img-box{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+  img{
+    width: 0.38rem;
+    height: 0.19rem;
+    margin: 0.08rem 0;
+  }
+}
+</style>