shop-pc/pages/goods/list/index.vue

<!--
 * @Author: ch
 * @Date: 2022-05-04 17:28:28
 * @LastEditors: ch
 * @LastEditTime: 2022-05-04 17:28:48
 * @Description: file content
-->

<template>
  <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 {
  components: { Sort, GoodsItem },
  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;
  }
}
</style>