<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> <title></title> <script src="../../assets/js/fontsize.js"></script> <link rel="stylesheet" href="../../assets/css/api.css"/> <link rel="stylesheet" href="../../assets/css/index.css"> <link rel="stylesheet" href="../../assets/css/common_header.css"> <link rel="stylesheet" href="../../assets/css/swiper-3.4.2.min.css"> <link rel="stylesheet" href="../../assets/icon/iconfont.css"> <style> body { background-color: #efefef; } .examination_swiper { background-color: #fff; } .swiper-slide{ /*display: none;*/ } .swiper-slide.swiper-slide-active{ display: block; } .examination_swiper .swiper-slide { width: auto; /*min-width: 23%;*/ font-size: 15px; color: #424242; text-align: center; margin: 0 0.25rem; } .examination_swiper .swiper-slide span { padding: 0.16rem 0; color: #424242; } .warp{ overflow-y: scroll; } .examination_active { color: #D8B25F; border-bottom: 0.04rem solid #D8B25F; } .examination_box { flex:1; margin: 0.1rem 0; background-color: #fff; box-shadow: 0.01rem 0.02rem 0.05rem #C8C6C6; display: flex; display: -webkit-flex; display: -webkit-box; flex-flow: column; -webkit-flex-flow: column; -webkit-box-orient: vertical; -webkit-margin-start: auto; width: 100%; box-sizing: border-box; } .old_price { color: #979797; font-size: 11px; text-decoration: line-through; margin: 0 0 0 0.28rem; } .swiper_item { /*padding: 0.28rem 0.25rem;*/ } .warp{ display: flex; display: -webkit-flex; display: -webkit-box; flex-flow: column; -webkit-flex-flow: column; overflow-x: hidden; } .swiper-container{ height: 100%; } .swiper-wrapper{ height: 100%; } </style> </head> <body> <!-- 背景充满 --> <div id="loadStart"></div> <div id="app"> <!--<header id="header">--> <!--<div class="index_header white_bg">--> <!--<div class="close_left" onclick="closeWindow()">--> <!--<span class="iconfont icon-fanhui"></span>--> <!--</div>--> <!--<div class="win_mid">{{winTitle}}</div>--> <!--<div></div>--> <!--</div>--> <!--</header>--> <div class="nurse_banner" :style="{backgroundImage:'url(' + banner + ')'}"> <div class="nurse_text">{{name}}</div> </div> <div class="examination_swiper"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(item,index) in navs"> <span v-text="item" :class="{'examination_active':index==ind}" @click="changeSwiper(index)"></span> </div> </div> </div> </div> <div class="warp"> <!-- {{JSON.stringify(banner)}} --> <div class="examination_box"> <div class="examination_content_swiper "> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(item,index) in goods"> <div class="swiper_list"> <div class="swiper_item nodata" v-if="item.goods.length==0">暂无信息</div> <div class="swiper_item" v-else @click="openDoc(i.good_id)" v-for="(i,iindex) in item.goods"> <div class="swiper_item_img"> <img :src="i.img" alt=""> </div> <div class="swiper_item_right"> <div class="swiper_item_title">{{i.post_title}}</div> <div class="swiper_item_content">{{i.other_title}}</div> <div class="swiper_item_type"> <div class="swiper_item_type1" v-for="(j,item2_index) in i.tag"> <div class="icon_img"> <img :src="j.url" alt=""> </div> <span>{{j.text}}</span> </div> </div> <div class="swiper_item_money"> <span>¥{{i.real_price?i.real_price:0}}</span> <span class="old_price">¥{{i.price?i.price:0}}</span> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html> <script type="text/javascript" src="../../assets/js/api.js"></script> <script type="text/javascript" src="../../assets/js/public.js"></script> <script type="text/javascript" src="../../assets/js/fastclick.js"></script> <script> new FastClick(document.body); </script> <script type="text/javascript" src="../../assets/js/vue.min.js"></script> <script type="text/javascript" src="../../assets/js/swiper-3.4.2.min.js"></script> <script type="text/javascript" src="../../assets/js/axios.min.js"></script> <script type="text/javascript" src="../../assets/icon/iconfont.js"></script> <script> var app = new Vue({ el: '#app', data: { banner: '', name: '', navs: [ // {nav_item: '特惠产品'}, // {nav_item: '肿瘤检测'}, // {nav_item: '基因检测'}, // {nav_item: '健康体检'}, // {nav_item: '好孕妇儿'} ], ind: 0, Swiper1: {}, mySwiper: {}, cid: '', goods: [] }, created: function () { var app = this; this.cid = localStorage.getItem('cid'); this.winTitle = localStorage.getItem('winTitle'); document.getElementsByTagName("title")[0].innerText = this.winTitle; this.getCatInfo3(); }, methods: { changeSwiper: function (index) { var app = this; app.Swiper1.slideTo(index, 500); app.ind = index }, openDoc: function (id) { var app = this; // api.openWin({ // name: 'care_w', // url: './care_w.html', // pageParam: { // id: id, // cid: app.cid // } // }) }, getCatInfo3: function () { var app = this; var post = { cid: this.cid }; var header = { "XX-Device-Type": getDevice(), 'XX-Token': getToken() }; getRequest('post', 'portal/Goods/getCatInfo3', post, header).then(function (res) { if (res.data.code == 1) { app.banner = res.data.data.img; app.name = res.data.data.name; app.goods = res.data.data.goods; var nav = []; for(var i=0;i<app.goods.length;i++){ nav.push(app.goods[i].name) } app.navs = nav; loadEnd() } else { toastMsg(res.data.msg) } }) } }, mounted(){ var app = this; app.mySwiper = new Swiper('.examination_swiper .swiper-container', { slidesPerView: 'auto', slideToClickedSlide: true, observer: true, observeParents: true, freeMode: true, onTransitionEnd: function (swiper) { } }); this.$nextTick(function(){ app.Swiper1 = new Swiper('.examination_content_swiper .swiper-container', { observer: true, observeParents: true, autoHeight: true, onTouchStart: function(swiper){ console.log(swiper) }, onTransitionEnd: function (swiper) { console.log(this.activeIndex); app.ind = swiper.activeIndex; app.mySwiper.slideTo(swiper.activeIndex, 500) // alert(swiper.activeIndex); } }); }) //内容轮播 } }) </script>