123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>APP启动</title>
- <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,viewport-fit=cover">
- <script src="html5plus://ready"></script>
- <link href="css/swiper.css" rel="stylesheet" type="text/css">
- </head>
- <body>
- <style>
- html, body {
- position: relative;
- height: 100vh;
- }
- body {
- background: #eee;
- font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
- font-size: 14px;
- color:#000;
- margin: 0;
- padding: 0;
- }
- .swiper-container {
- width: 100%;
- height: 100%;
- }
- .swiper-slide {
- text-align: center;
- font-size: 18px;
- background: #fff;
- /* Center slide text vertically */
- display: -webkit-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- -webkit-align-items: center;
- align-items: center;
- }
- </style>
- <div id="app" style="height: 100%;">
- <div class="swiper-container">
- <div class="swiper-wrapper">
- <div class="swiper-slide" @click="go_home(index)" v-for="(item, index) in pic" :style="'background-image: url('+item.url+'); background-position: center center; background-repeat:no-repeat; background-size: 100% auto; height:100%;'">
- </div>
- </div>
- <div class="swiper-pagination" style="bottom:5px;"></div>
- </div>
- </div>
- <script src="script/swiper.js"></script>
- <script src="script/vue.js"></script>
- <script src="script/axios.js"></script>
- <script src="script/fastclick.js"></script>
- <script>
- plus.navigator.setFullscreen(true);
- var vue_obj = new Vue({
- el: '#app',
- data: {
- pic: []
- },
- created(){
- this.get_pic();
- },
- methods: {
- go_home(key){
- if(this.pic.length == key + 1){
- this.pic_close()
- }
- },
- set_item(key, val){
- if(window.plus){
- return plus.storage.setItem(key, val)
- }else{
- return localStorage.setItem(key, val)
- }
- },
- get_item(key){
- if(window.plus){
- return plus.storage.getItem(key)
- }else{
- return localStorage.getItem(key)
- }
- },
- pic_close(){
- if(window.plus){
- plus.navigator.setFullscreen(false);
- plus.webview.getWebviewById(plus.runtime.appid).evalJS('document.documentElement.style.opacity = "1"');
- plus.navigator.setStatusBarBackground("#26a2ff");
- plus.navigator.setStatusBarStyle('light');
- plus.webview.currentWebview().close();
- }else{
- window.location.href = 'index.html';
- }
- },
- get_pic(){
- var _this = this;
- axios.get('https://www.g107.com/app_init_swiper.php', {params:{w: window.innerWidth, h: window.innerHeight}}).then(function (res) {
- _this.pic = res.data;
- if(res.data.length == 0){
- _this.pic_close()
- return
- }
- _this.$nextTick(function () {
- var swiper = new Swiper('.swiper-container',{
- pagination: {
- el: '.swiper-pagination',
- },
- });
- })
- }).catch(function (e) {
- _this.pic_close()
- })
- }
- }
- });
- </script>
- </body>
- </html>
- <script>
- FastClick.attach(document.body)
- </script>
|