diff --git a/assets/images/goods/item.png b/assets/images/goods/item.png
deleted file mode 100644
index a8ec065..0000000
Binary files a/assets/images/goods/item.png and /dev/null differ
diff --git a/assets/images/goods/more.png b/assets/images/goods/more.png
new file mode 100644
index 0000000..cbc49c8
Binary files /dev/null and b/assets/images/goods/more.png differ
diff --git a/assets/scss/global.scss b/assets/scss/global.scss
index f23d7c0..16f282e 100644
--- a/assets/scss/global.scss
+++ b/assets/scss/global.scss
@@ -34,3 +34,7 @@ a { text-decoration:none;
color: #333;
&:hover { text-decoration:none;}
}
+.layout-box {
+ width: 1200px;
+ margin: 0 auto;
+}
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 514bb40..c2678e9 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -7,8 +7,8 @@
-->
@@ -21,10 +21,6 @@ export default {
};
\ No newline at end of file
+ &-msg {
+ width: 714px;
+ height: 127px;
+ background: #f8f8f8;
+ padding: 30px 20px 0;
+ .msg-txt {
+ font-size: 14px;
+ font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+ font-weight: 400;
+ color: #9e9e9e;
+ margin-right: 20px;
+ }
+
+ .msg-service {
+ font-size: 14px;
+ font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+ font-weight: 400;
+ color: #666666;
+ }
+ .msg-icon {
+ margin-left: 6px;
+ width: 12px;
+ height: 12px;
+ }
+ &--price {
+ padding-bottom: 30px;
+ }
+ .hr {
+ width: 673px;
+ height: 1px;
+ background: #dddddd;
+ }
+ &--service{
+ padding-top: 16px;
+ }
+ }
+ }
+}
+
diff --git a/pages/goods/list/index.vue b/pages/goods/list/index.vue
index 251ccb9..f2452ba 100644
--- a/pages/goods/list/index.vue
+++ b/pages/goods/list/index.vue
@@ -13,26 +13,117 @@
+
排序 :
- 综合
-
- 上新
+ 综合
+
+ 上新
-
+
+
+
@@ -44,10 +135,19 @@ export default {
}
.main {
- width: 75rem;
+ width: 1200px;
margin: 0 auto;
+ padding-top: 14px;
+ padding-bottom: 60px;
&__nav {
+ &::after {
+ display: block;
+ width: 1200px;
+ content: "";
+ height: 1px;
+ background: #eee;
+ }
&-crumbs {
.el-icon-arrow-right {
margin: 0 10px;
@@ -55,28 +155,62 @@ export default {
}
&-sort {
width: 100%;
- height: 48px;
- background: #fff;
- margin-top: 0.88rem;
- margin-bottom: 1.13rem;
- display: flex;
- align-items: center;
- padding: 0 1.88rem;
+ height: 50px;
+ margin-top: 24px;
+ padding: 0 30px;
&-txt {
color: #999999;
- margin-right: 1.88rem;
+ margin-right: 30px;
}
&-btn {
- margin-right: 3.13rem;
+ margin-right: 50px;
+ cursor: pointer;
+ }
+ &-active {
+ color: #ff512b;
}
}
}
&__content {
+ margin-top: 30px;
display: grid;
width: 100%;
- grid-template-columns: repeat(auto-fill, 14.5rem);
+ grid-template-columns: repeat(auto-fill, 232px);
justify-content: space-between;
- grid-row-gap: 0.63rem;
+ grid-row-gap: 10px;
+ }
+ &__pagination {
+ margin-top: 60px;
+ /deep/.el-pager {
+ margin-left: 8px;
+ }
+
+ /deep/button,
+ /deep/.number,
+ /deep/.btn-quicknext,
+ /deep/.btn-quickprev {
+ width: 32px;
+ height: 32px;
+ text-align: center;
+ line-height: 32px;
+ margin-left: 8px;
+ border-radius: 2px 2px 2px 2px;
+ border: 1px solid rgba(0, 0, 0, 0.15);
+ font-size: 14px;
+ font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+ font-weight: 400;
+ color: rgba(0, 0, 0, 0.65);
+ }
+
+ /deep/.active {
+ background: #ff512b;
+ color: #fff;
+ }
}
}
+
diff --git a/pages/goods/list/module/Item.vue b/pages/goods/list/module/Item.vue
index fc71331..84e9786 100644
--- a/pages/goods/list/module/Item.vue
+++ b/pages/goods/list/module/Item.vue
@@ -1,22 +1,92 @@