diff --git a/src/assets/styles/iconfont.css b/src/assets/styles/iconfont.css index 2728a11..f0f4098 100644 --- a/src/assets/styles/iconfont.css +++ b/src/assets/styles/iconfont.css @@ -1,10 +1,10 @@ @font-face {font-family: "iconfont"; - src: url('iconfont.eot?t=1535008467385'); /* IE9*/ - src: url('iconfont.eot?t=1535008467385#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), - url('iconfont.ttf?t=1535008467385') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ - url('iconfont.svg?t=1535008467385#iconfont') format('svg'); /* iOS 4.1- */ + src: url('iconfont.eot?t=1535957272010'); /* IE9*/ + src: url('iconfont.eot?t=1535957272010#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), + url('iconfont.ttf?t=1535957272010') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ + url('iconfont.svg?t=1535957272010#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont { @@ -23,7 +23,15 @@ .icon-zhengli:before { content: "\e766"; } +.icon-dingbu:before { content: "\e76c"; } + +.icon-xiangzuo1:before { content: "\e779"; } + +.icon-gouwuche:before { content: "\e63f"; } + .icon-shouye:before { content: "\e64f"; } +.icon-wancheng:before { content: "\e654"; } + .icon-xiangzuojiantou:before { content: "\e660"; } diff --git a/src/assets/styles/iconfont.eot b/src/assets/styles/iconfont.eot index c599688..90f2892 100644 Binary files a/src/assets/styles/iconfont.eot and b/src/assets/styles/iconfont.eot differ diff --git a/src/assets/styles/iconfont.svg b/src/assets/styles/iconfont.svg index d938a54..13f378f 100644 --- a/src/assets/styles/iconfont.svg +++ b/src/assets/styles/iconfont.svg @@ -32,9 +32,21 @@ Created by iconfont + + + + + + + + + + + + diff --git a/src/assets/styles/iconfont.ttf b/src/assets/styles/iconfont.ttf index 252e561..1bd782b 100644 Binary files a/src/assets/styles/iconfont.ttf and b/src/assets/styles/iconfont.ttf differ diff --git a/src/assets/styles/iconfont.woff b/src/assets/styles/iconfont.woff index 438f2a7..cd52062 100644 Binary files a/src/assets/styles/iconfont.woff and b/src/assets/styles/iconfont.woff differ diff --git a/src/assets/styles/variables.less b/src/assets/styles/variables.less index 9dbe4f3..efde669 100644 --- a/src/assets/styles/variables.less +++ b/src/assets/styles/variables.less @@ -3,10 +3,12 @@ // 背景色 @bgColor: #eee; +@bgColor2: #ccc; // 字号大小 @sizeXL: 26px; @sizeL: 18px; +@sizeL_2: 16px; @sizeM: 14px; @sizeS: 12px; diff --git a/src/view/goodsDetail.vue b/src/view/goodsDetail.vue index a8b3042..4325175 100644 --- a/src/view/goodsDetail.vue +++ b/src/view/goodsDetail.vue @@ -8,6 +8,9 @@
+
+ +
@@ -22,6 +25,59 @@ Candie's女装夏蕾丝气质秋连衣裙新款时尚韩版宽松长裙子仙蕾丝bf长袖气质连衣裙
+ +
+
尺码
+
+
{{item}}
+
+
+ +
+
+ + 正品保障 +
+
+ + 商品免邮 +
+
+ + 急速退款 +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
加入购物车
+
@@ -55,7 +111,8 @@ export default { delay: 2500, disableOnInteraction: false } - } + }, + activeIndex: 99 }; }, created() {}, @@ -71,6 +128,13 @@ export default { this.classifiData = res.data.classifiData; this.recommendData = res.data.recommendData; }); + }, + sizeItemClick(idx) { + this.activeIndex = idx; + }, + // 回退 + goBack() { + this.$router.go(-1); } } }; @@ -81,6 +145,7 @@ export default { .goodsDetail { // 顶部轮播图 .carousel { + position: relative; /deep/ .swiper-pagination-bullet-active { background: #fff; } @@ -88,8 +153,21 @@ export default { width: 100%; height: 375px; } + .topnav { + position: absolute; + top: 0.266rem; + left: 0.213rem; + z-index: 99; + width: 1.12rem; + height: 1.12rem; + text-align: center; + line-height: 1.12rem; + color: #fff; + border-radius: 50%; + background: rgba(0, 0, 0, 0.5); + } } - //价格信息 + // 价格信息 .product_meta { margin: 0.32rem 0.32rem 0 0.32rem; border-bottom: 1px dashed @bgColor; @@ -124,6 +202,97 @@ export default { -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; + line-height: 0.48rem; + } + } + // 尺码 + .produce_size { + padding: 0 0.23rem; + border-bottom: 1px solid @bgColor; + .size_title { + font-size: @sizeL_2; + color: @fontColor1; + margin: 0.32rem 0; + } + .size_content { + display: flex; + flex-flow: row wrap; + justify-content: space-between; + .size_item { + width: 2.746667rem; + height: 0.8rem; + margin-bottom: 0.32rem; + text-align: center; + line-height: 0.8rem; + color: @fontColor1; + border: 1px solid @bgColor2; + } + .size_item_on { + border-color: @themeColor; + color: @themeColor; + } + } + } + // 商务文案 + .service_text { + display: flex; + flex-direction: row; + padding: 0.23rem; + border-bottom: 1px solid @bgColor; + .service_text_item { + display: flex; + flex-direction: row; + align-items: center; + margin-right: 0.4rem; + .service_text_item_icon { + color: @themeColor; + margin-right: .053333rem; + } + } + } + // 详情图片 + .details { + .details_img { + img { + width: 100%; + height: auto; + } + } + } + // 底部栏购物栏 + .shopcart { + box-sizing: border-box; + position: fixed; + left: 0; + bottom: 0; + width: 100%; + height: 1.76rem; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 0 0.32rem; + background: #fff; + .shopcart_cart { + width: 2.266667rem; + height: 1.12rem; + border: 1px solid @bgColor2; + text-align: center; + line-height: 1.12rem; + border-radius: 2px; + .shopcart_cart_icon { + font-size: @sizeXL; + } + } + .shopcart_add { + width: 6.826667rem; + height: 1.12rem; + text-align: center; + line-height: 1.12rem; + background: @themeColor; + color: #fff; + font-size: @sizeL; + border-radius: 2px; } } } diff --git a/src/view/goodsList.vue b/src/view/goodsList.vue index c5b3b11..2af5dd3 100644 --- a/src/view/goodsList.vue +++ b/src/view/goodsList.vue @@ -28,7 +28,7 @@
-
+
@@ -81,6 +81,12 @@ export default { // 筛选栏点击 filterClick(idx) { this.currentIdx = idx; + }, + // 点击商品块 + gotoDetail() { + this.$router.push({ + path: "/goodsDetail" + }); } } };