You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
1.7 KiB
83 lines
1.7 KiB
<!--
|
|
* @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/SortItem.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>
|