新品
- Java从入门到项目实战(全程视频版)
- 编程入门it计算机书籍算法java编程思想java从入门到精通java核心技术javascript
+ {{ detailData.name }}
售价
-
+
@@ -40,41 +74,219 @@
-
-
规格
+
+
{{ item.name }}
123{{ val.name }}
加入购物车
- 立即购买
+ 立即购买
+
+
@@ -94,6 +306,64 @@ export default {
&__preview {
width: 456px;
margin-right: 30px;
+ &-big {
+ width: 456px;
+ height: 456px;
+ margin-bottom: 24px;
+ }
+ &-control {
+ width: 100%;
+ height: 58px;
+ position: relative;
+ overflow: hidden;
+ padding-left: 43px;
+ &::before {
+ content: "";
+ width: 43px;
+ height: 58px;
+ background: #fff;
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1;
+ }
+ &::after {
+ content: "";
+ width: 43px;
+ height: 58px;
+ background: #fff;
+ position: absolute;
+ right: 0;
+ top: 0;
+ }
+ &--left,
+ &--right {
+ width: 20px;
+ height: 34px;
+ position: absolute;
+ top: 12px;
+ z-index: 1;
+ cursor: pointer;
+ }
+ &--left {
+ left: 0;
+ }
+ &--right {
+ right: 0;
+ }
+ &--imgs {
+ width: 1500px;
+ img {
+ width: 58px;
+ height: 58px;
+ margin-right: 20px;
+ cursor: pointer;
+ }
+ .img-active {
+ border: 1px solid #ff512b;
+ }
+ }
+ }
}
&__details {
width: 714px;
@@ -195,4 +465,37 @@ export default {
}
}
}
+.section {
+ width: 1200px;
+ margin: 64px auto 0;
+ &-recommend {
+ width: 210px;
+ margin-right: 30px;
+
+ /deep/.goods-item {
+ border: 1px solid #f2f2f2;
+ }
+ }
+ &-details {
+ width: 960px;
+ }
+ &-title {
+ width: 100%;
+ height: 40px;
+ line-height: 40px;
+ background: #f7f7f7;
+ border: 1px solid #f2f2f2;
+ padding-left: 16px;
+ font-size: 14px;
+ font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+ font-weight: 400;
+ color: #666666;
+ }
+}
+.attr-item__active {
+ background: red !important;
+}
+.attr-item__disabled {
+ background: cyan !important;
+}
diff --git a/pages/goods/list/index.vue b/pages/goods/list/index.vue
index 7087ff2..85c191f 100644
--- a/pages/goods/list/index.vue
+++ b/pages/goods/list/index.vue
@@ -36,17 +36,17 @@
-
+ >
@@ -57,9 +57,9 @@
-