askbot-dragon 1.1.28 → 1.2.0

package/src/components/message/ShopMessage.vue

@@ -1,165 +1,165 @@
-<template>
-    <div class="Shop-Container">
-        <swiper ref="swiper">
-            <template>
-                <swiper-item
-                        v-for="(item, index) in shopInfo"
-                        :key="index"
-                        @slideEven="slideLoadOn"
-                >
-                    <template>
-                        <div style="position: relative">
-                            <div>
-                                <div class="img" >
-                                    <img
-                                            :src="item.image"
-                                            alt=""
-                                            @load="SwiperImgLoad"
-                                            ref='imgShow'
-                                    />
-                                </div>
-
-                                <div class="Describe">
-                                    <span>{{item.describe}}</span>
-                                </div>
-                                <div class="shopAttr">
-                                    <span>{{item.attr}}</span>
-                                </div>
-                                <div class="ClickClass" >
-                                    <div class="clickItem" v-for="(itemClick,index) in item.click" :key="index">
-                                        <a :href="item.link"><span style="color: #409eff">{{itemClick.name}}</span></a>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="clickBtn">
-                                <div class="preBtn" @click="preClickTest($event)">
-                                    <i class="el-icon-arrow-left" style="font-size: 16px;font-weight:800;position: absolute;top: 25%;left: 25%"></i></div>
-                                <div class="nextBtn" @click="nextClickTest($event)">
-                                    <i class="el-icon-arrow-right" style="font-size: 16px;font-weight:800;position: absolute;top: 25%;left: 25%"></i></div>
-                            </div>
-                        </div>
-
-
-
-                    </template>
-                </swiper-item>
-            </template>
-        </swiper>
-      <!--  <div v-for="(item,index) in shopInfo" :key="index">
-            <div class="img">
-                <img src="../../assets/image/1.jpg" style="width: 90%">
-            </div>
-            <div class="Describe">
-                <span>{{item.describe}}</span>
-            </div>
-            <div class="shopAttr">
-                <span>{{item.attr}}</span>
-            </div>
-            <div class="ClickClass">
-                <div class="clickItem">
-                    <a href=""><span style="color: #409eff">查看商品详情</span></a>
-                </div>
-                <div class="clickItem">
-                    <a href=""><span style="color: #409eff">立即购买</span></a>
-                </div>
-            </div>
-        </div>-->
-
-
-    </div>
-</template>
-
-<script>
-    import Swiper from "./swiper/ticketSwiper";
-    import SwiperItem from "./swiper/ticketSwiperItem";
-    export default {
-        name: "ShopMessage",
-        components:{Swiper,SwiperItem},
-        data(){
-            return{
-                shopInfo:[{image:require('../../assets/image/1.jpg'),describe:'商品描述商品描述商品描述商品描述',attr:'商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍',link:'1',link2:'21',click:[{name:'点击购买'},{name:'查看商品详情'}]},
-                    {image:require('../../assets/image/2.jpg'),describe:'商品描述商品描述商品描述商品描述商品描述',attr:'商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍',link:'2',link2:22,click:[{name:'点击收藏'},{name:'查看商品详情'}]},
-                    {image:require('../../assets/image/3.jpg'),describe:'商品描述商品描述商品描述商品描述',attr:'商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍',link:'2',link2:22,click:[{name:'点击收藏'},{name:'查看商品详情'}]},
-                ],
-                loadCheck: false,
-                isHeight:false,
-                scale:0,
-                test:{multiple:true},
-                slideWidth:'',
-                swiperStyle:{},
-                slideCount:0
-            }
-        },
-        mounted() {
-            },
-        methods:{
-            init(){
-                let swiperEl = document.querySelector(".swiper");
-                let slides = swiperEl.querySelectorAll(".slide");
-                this.swiperStyle = swiperEl.style;
-                this.slideWidth = swiperEl.offsetWidth;
-                this.slideCount=slides.length
-                if (this.shopInfo > 1) {
-                    let firstSlide = slides[0].cloneNode(true);
-                    let lastSlide = slides[this.slideCount - 1].cloneNode(true);
-                    swiperEl.appendChild(firstSlide);
-                    swiperEl.insertBefore(lastSlide, slides[0]);
-                    //设置开头位置
-                    this.setTransform(-this.slideWidth);
-                }
-            },
-            SwiperImgLoad() {
-                if (!this.loadCheck) {
-                    this.$emit("SwiperImgLoadEvent");
-                    this.loadCheck = true;
-                }
-            },
-            slideLoadOn() {
-                this.$refs.swiper.slideOn();
-            },
-            preClickTest(){
-                let swiperEl = document.querySelector(".swiper");
-                console.debug('swiperEl',swiperEl.offsetWidth)
-            },
-            nextClickTest(){
-                let swiperEl = document.querySelector(".swiper");
-                console.debug('swiperEl',swiperEl.offsetWidth)
-            }
-        }
-    }
-</script>
-
-<style scoped lang="less">
-    .Describe{
-        text-align: left;
-        line-height: 1.5;
-        padding: 10px 0;
-    }
-    .shopAttr{
-        color: #AAAAAA;
-        text-align: left;
-        line-height: 1.5;
-        padding: 10px 0;
-    }
-    .clickItem{
-        text-align: center;
-        padding: 12px 0;
-        border-top: 1px solid #AAAAAA;
-
-    }
-    a{
-        text-decoration: none;
-    }
-/*.ClickClass div:last-of-type{
-    border-bottom:none;
-}*/
-.img img{
-    object-fit: contain;
-}
-   /* .Describe{
-        padding: 10px 30px;
-    }
-    .shopAttr{
-        padding: 0 30px 10px 30px;
-    }*/
+<template>
+    <div class="Shop-Container">
+        <swiper ref="swiper">
+            <template>
+                <swiper-item
+                        v-for="(item, index) in shopInfo"
+                        :key="index"
+                        @slideEven="slideLoadOn"
+                >
+                    <template>
+                        <div style="position: relative">
+                            <div>
+                                <div class="img" >
+                                    <img
+                                            :src="item.image"
+                                            alt=""
+                                            @load="SwiperImgLoad"
+                                            ref='imgShow'
+                                    />
+                                </div>
+
+                                <div class="Describe">
+                                    <span>{{item.describe}}</span>
+                                </div>
+                                <div class="shopAttr">
+                                    <span>{{item.attr}}</span>
+                                </div>
+                                <div class="ClickClass" >
+                                    <div class="clickItem" v-for="(itemClick,index) in item.click" :key="index">
+                                        <a :href="item.link"><span style="color: #409eff">{{itemClick.name}}</span></a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="clickBtn">
+                                <div class="preBtn" @click="preClickTest($event)">
+                                    <i class="el-icon-arrow-left" style="font-size: 16px;font-weight:800;position: absolute;top: 25%;left: 25%"></i></div>
+                                <div class="nextBtn" @click="nextClickTest($event)">
+                                    <i class="el-icon-arrow-right" style="font-size: 16px;font-weight:800;position: absolute;top: 25%;left: 25%"></i></div>
+                            </div>
+                        </div>
+
+
+
+                    </template>
+                </swiper-item>
+            </template>
+        </swiper>
+      <!--  <div v-for="(item,index) in shopInfo" :key="index">
+            <div class="img">
+                <img src="../../assets/image/1.jpg" style="width: 90%">
+            </div>
+            <div class="Describe">
+                <span>{{item.describe}}</span>
+            </div>
+            <div class="shopAttr">
+                <span>{{item.attr}}</span>
+            </div>
+            <div class="ClickClass">
+                <div class="clickItem">
+                    <a href=""><span style="color: #409eff">查看商品详情</span></a>
+                </div>
+                <div class="clickItem">
+                    <a href=""><span style="color: #409eff">立即购买</span></a>
+                </div>
+            </div>
+        </div>-->
+
+
+    </div>
+</template>
+
+<script>
+    import Swiper from "./swiper/ticketSwiper";
+    import SwiperItem from "./swiper/ticketSwiperItem";
+    export default {
+        name: "ShopMessage",
+        components:{Swiper,SwiperItem},
+        data(){
+            return{
+                shopInfo:[{image:require('../../assets/image/1.jpg'),describe:'商品描述商品描述商品描述商品描述',attr:'商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍',link:'1',link2:'21',click:[{name:'点击购买'},{name:'查看商品详情'}]},
+                    {image:require('../../assets/image/2.jpg'),describe:'商品描述商品描述商品描述商品描述商品描述',attr:'商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍',link:'2',link2:22,click:[{name:'点击收藏'},{name:'查看商品详情'}]},
+                    {image:require('../../assets/image/3.jpg'),describe:'商品描述商品描述商品描述商品描述',attr:'商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍',link:'2',link2:22,click:[{name:'点击收藏'},{name:'查看商品详情'}]},
+                ],
+                loadCheck: false,
+                isHeight:false,
+                scale:0,
+                test:{multiple:true},
+                slideWidth:'',
+                swiperStyle:{},
+                slideCount:0
+            }
+        },
+        mounted() {
+            },
+        methods:{
+            init(){
+                let swiperEl = document.querySelector(".swiper");
+                let slides = swiperEl.querySelectorAll(".slide");
+                this.swiperStyle = swiperEl.style;
+                this.slideWidth = swiperEl.offsetWidth;
+                this.slideCount=slides.length
+                if (this.shopInfo > 1) {
+                    let firstSlide = slides[0].cloneNode(true);
+                    let lastSlide = slides[this.slideCount - 1].cloneNode(true);
+                    swiperEl.appendChild(firstSlide);
+                    swiperEl.insertBefore(lastSlide, slides[0]);
+                    //设置开头位置
+                    this.setTransform(-this.slideWidth);
+                }
+            },
+            SwiperImgLoad() {
+                if (!this.loadCheck) {
+                    this.$emit("SwiperImgLoadEvent");
+                    this.loadCheck = true;
+                }
+            },
+            slideLoadOn() {
+                this.$refs.swiper.slideOn();
+            },
+            preClickTest(){
+                let swiperEl = document.querySelector(".swiper");
+                console.debug('swiperEl',swiperEl.offsetWidth)
+            },
+            nextClickTest(){
+                let swiperEl = document.querySelector(".swiper");
+                console.debug('swiperEl',swiperEl.offsetWidth)
+            }
+        }
+    }
+</script>
+
+<style scoped lang="less">
+    .Describe{
+        text-align: left;
+        line-height: 1.5;
+        padding: 10px 0;
+    }
+    .shopAttr{
+        color: #AAAAAA;
+        text-align: left;
+        line-height: 1.5;
+        padding: 10px 0;
+    }
+    .clickItem{
+        text-align: center;
+        padding: 12px 0;
+        border-top: 1px solid #AAAAAA;
+
+    }
+    a{
+        text-decoration: none;
+    }
+/*.ClickClass div:last-of-type{
+    border-bottom:none;
+}*/
+.img img{
+    object-fit: contain;
+}
+   /* .Describe{
+        padding: 10px 30px;
+    }
+    .shopAttr{
+        padding: 0 30px 10px 30px;
+    }*/
 </style>