|
@@ -30,11 +30,16 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="productImg" v-if="detailsData && detailsData.productMsg">
|
|
|
- <a-carousel arrows>
|
|
|
- <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px;zIndex: 1"><a-icon type="left-circle" /></div>
|
|
|
- <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px"><a-icon type="right-circle" /></div>
|
|
|
- <div><img :src="detailsData.productMsg" /></div>
|
|
|
+ <div class="productImg" v-if="detailsData && detailsData.productPicList && detailsData.productPicList.length>0">
|
|
|
+ <a-carousel arrows dots-class="slick-dots slick-thumb">
|
|
|
+ <a slot="customPaging" slot-scope="props">
|
|
|
+ <img :src="detailsData.productPicList[props.i].imageUrl" />
|
|
|
+ </a>
|
|
|
+ <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px;zIndex: 1"><a-icon type="left-circle" style="color: #314659;" /></div>
|
|
|
+ <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px"><a-icon type="right-circle" style="color: #314659;" /></div>
|
|
|
+ <div v-for="(item, index) in detailsData.productPicList" :key="index">
|
|
|
+ <img-zoom :src="item.imageUrl" width="100%" height="100%" :bigsrc="item.imageUrl" :configs="configs"></img-zoom>
|
|
|
+ </div>
|
|
|
</a-carousel>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -43,9 +48,11 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import imgZoom from 'vue2.0-zoom'
|
|
|
import { productSnDetail } from '@/api/product.js'
|
|
|
export default {
|
|
|
name: 'ProductInfoDetail',
|
|
|
+ components: { imgZoom },
|
|
|
computed: {
|
|
|
productTypeName () {
|
|
|
const productTypeName1 = this.detailsData && this.detailsData.productTypeName1 ? this.detailsData.productTypeName1 : ''
|
|
@@ -58,7 +65,15 @@ export default {
|
|
|
return {
|
|
|
itemId: null,
|
|
|
detailsData: null, // 详情数据
|
|
|
- prevPageInfo: null
|
|
|
+ prevPageInfo: null,
|
|
|
+ configs: {
|
|
|
+ width: 600,
|
|
|
+ height: 350,
|
|
|
+ maskWidth: 80,
|
|
|
+ maskHeight: 80,
|
|
|
+ maskColor: 'red',
|
|
|
+ maskOpacity: 0.2
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -100,11 +115,13 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
+#_magnifier_layer{
|
|
|
+ left: 500px!important;
|
|
|
+}
|
|
|
/* For demo */
|
|
|
.ant-carousel .slick-slide {
|
|
|
text-align: center;
|
|
|
overflow: hidden;
|
|
|
- border: 1px solid #eee;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
@@ -126,12 +143,40 @@ export default {
|
|
|
width: 100%;
|
|
|
max-height: 100%;
|
|
|
}
|
|
|
+
|
|
|
+.ant-carousel{
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
+}
|
|
|
+.ant-carousel .slick-dots {
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+.ant-carousel .slick-slide img {
|
|
|
+ border: 5px solid #fff;
|
|
|
+ display: block;
|
|
|
+ margin: auto;
|
|
|
+ max-width: 90%;
|
|
|
+}
|
|
|
+.ant-carousel .slick-thumb {
|
|
|
+ bottom: -40px;
|
|
|
+}
|
|
|
+.ant-carousel .slick-thumb li {
|
|
|
+ width: 40px;
|
|
|
+ height: 35px;
|
|
|
+}
|
|
|
+.ant-carousel .slick-thumb li img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ filter: grayscale(100%);
|
|
|
+}
|
|
|
+.ant-carousel .slick-thumb li.slick-active img {
|
|
|
+ filter: grayscale(0%);
|
|
|
+}
|
|
|
.newProductDetail-back {
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
.newProductDetail-modal {
|
|
|
background-color: #fff;
|
|
|
- padding: 15px;
|
|
|
+ padding: 15px 15px 55px;
|
|
|
h4 {
|
|
|
font-size: 18px;
|
|
|
}
|