New file |
| | |
| | | <!DOCTYPE html> |
| | | <html> |
| | | |
| | | <head> |
| | | <meta charset="utf-8" /> |
| | | <link href="img/favicon.ico" rel="shortcut icon" type="image/x-icon" /> |
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
| | | <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> |
| | | <script src="js/base.js"></script> |
| | | <title>新手攻略</title> |
| | | <style type="text/css"> |
| | | /*图片效果*/ |
| | | body { |
| | | height: 100%; |
| | | padding: 0; |
| | | margin: 0; |
| | | } |
| | | |
| | | .imgstyle { |
| | | width: 100%; |
| | | height: auto; |
| | | display: block; |
| | | } |
| | | |
| | | .animt_img { |
| | | animation: imgopc 1s; |
| | | animation-fill-mode: both; |
| | | animation-timing-function: ease; |
| | | } |
| | | |
| | | @ keyframes imgopc { |
| | | 0% { |
| | | opacity: 0; |
| | | } |
| | | |
| | | 100% { |
| | | opacity: |
| | | |
| | | 1; |
| | | } |
| | | } |
| | | |
| | | /*APP下载*/ |
| | | .homeappwai { |
| | | width: 94%; |
| | | height: 3.5rem; |
| | | padding: 0 3%; |
| | | position: fixed; |
| | | left: 0; |
| | | bottom: 0.5rem; |
| | | background-color: rgba(0, 0, 0, 0.75); |
| | | z-index: 50; |
| | | color: white; |
| | | } |
| | | |
| | | .homeappimg { |
| | | width: 1rem; |
| | | height: 1rem; |
| | | margin-right: 0.1rem; |
| | | } |
| | | |
| | | .homeappgo { |
| | | width: auto; |
| | | height: 0.5rem; |
| | | border-radius: 1rem; |
| | | background-color: #E5005C; |
| | | text-decoration: none; |
| | | color: white; |
| | | font-size: 0.2rem; |
| | | } |
| | | </style> |
| | | <!--js--> |
| | | <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> |
| | | <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> |
| | | </head> |
| | | |
| | | <body class="displayNone"> |
| | | <div id="allwai" class="allwai font3" style="background-color: #FDD757;"> |
| | | |
| | | <!--图片列表--> |
| | | <div style="width: 100%; overflow: scroll;"> |
| | | <div style="width: 100%; height: auto;"> |
| | | |
| | | <!--循环添加--> |
| | | <div v-for="(item,i) in imglist" style="height: auto;" v-bind:style="{'margin-left':(i>0?'0.3rem':'0rem'),'margin-right':(i>0?'0.3rem':'0rem')}"> |
| | | <img v-bind:src="item" class="imgstyle animt_img" onclick="return false" v-bind:style="{'margin-bottom':(i>0?'1.2rem':'0.15rem')}" /> |
| | | </div> |
| | | |
| | | </div> |
| | | </div> |
| | | |
| | | <!--APP下载卡片--> |
| | | <!-- |
| | | <div v-if="inapp=='false'||inapp==false" style="display: flex;align-items: center;justify-content:space-between;padding: 0.3rem;position:fixed;bottom: 0;"> |
| | | <div style="display: flex;align-items: center;"> |
| | | <img class="homeappimg" src="img/list_load.png" /> |
| | | <div style="font-size: 0.2rem;">不只领优惠券,APP客户端还返利</div> |
| | | </div> |
| | | |
| | | <a class="homeappgo" href="http://a.app.qq.com/o/simple.jsp?pkgname=com.yeshi.ec.rebate">下载</a> |
| | | </div> |
| | | --> |
| | | |
| | | </div> |
| | | |
| | | <script src="http://img.flqapp.com/resource/js/app20200227.js"></script> |
| | | </body> |
| | | |
| | | <script type="text/javascript"> |
| | | function copyLink() { |
| | | var href = window.location.href; |
| | | yesApp.copyText(href); |
| | | yesApp.toast("链接已复制到剪贴板"); |
| | | } |
| | | $(function() { |
| | | //图片内容信息 |
| | | var imgdata = { |
| | | inapp: true, //是否在app内部打开 |
| | | id: null, //攻略id |
| | | imglist: [], //图片列表 |
| | | }; |
| | | |
| | | try { |
| | | var array = new Array(); |
| | | array.push({ |
| | | icon: 'http://img.flqapp.com/resource/icon_share.png', |
| | | name: '复制链接', |
| | | js: 'copyLink()' |
| | | }); |
| | | yesApp.addMenu(JSON.stringify(array)); |
| | | imgdata.inapp = true; |
| | | } catch (e) { |
| | | imgdata.inapp = false; |
| | | } |
| | | |
| | | $("body").addClass("displayNone"); |
| | | |
| | | //======================== 页面数据 ================================ |
| | | //数据请求接口 |
| | | var https = "http://flq.yeshitv.com"; |
| | | |
| | | |
| | | //图片数据vue实例化 |
| | | var alldata = new Vue({ |
| | | el: "#allwai", |
| | | data: imgdata, |
| | | //创建完毕 |
| | | created: function() { |
| | | $("body").removeClass("displayNone"); |
| | | }, |
| | | //数据节点渲染完毕 |
| | | updated: function() { |
| | | var num_all = $('img').length; |
| | | console.log("图片总张数:" + num_all); |
| | | }, |
| | | }); |
| | | |
| | | //获取地址栏传递参数 |
| | | var id = getQueryString("id"); |
| | | //获取攻略id |
| | | if (id) { |
| | | imgdata.id = id; |
| | | } |
| | | //======================== 数据请求 ================================ |
| | | imglistGet(); |
| | | |
| | | function imglistGet() { |
| | | // doui.showLoading("获取攻略"); |
| | | //发送数据准备 |
| | | var myurl = "http://api.flqapp.com/fanli/api/h5/v1/strategy/strategyPicture"; |
| | | //发起请求 |
| | | $.ajax({ |
| | | url: myurl, |
| | | data: { |
| | | id: imgdata.id |
| | | }, |
| | | async: false, |
| | | success: function(res) { |
| | | res = JSON.parse(res); |
| | | if (res.code != 0) { |
| | | doui.showToast(res.msg); |
| | | } |
| | | //向图片组中添加数据 |
| | | else { |
| | | imgdata.imglist = res.data; |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | </script> |
| | | </html> |