askbot-dragon 1.6.80-beta → 1.6.82-beta

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>