update

city8866 · Sep 22, 2016 · 426d783 · 426d783
1 parent b58d1d7
commit 426d783
Show file tree

Hide file tree

Showing 59 changed files with 1,177 additions and 828 deletions.
diff --git a/index.html b/index.html
@@ -4,9 +4,9 @@
 <head>
     <meta charset="utf-8">
     <title>vue-wechat</title>
-    <link href="https://res.wx.qq.com/open/zh_CN/htmledition/res/img/icon/common/favicon2168b9.ico" rel="icon" type="image/x-icon">
-    <link rel="apple-touch-icon" sizes="57x57" href="http://images2015.cnblogs.com/blog/528573/201609/528573-20160902122329902-1531110925.png">
-    <link rel="apple-touch-icon" sizes="114x114" href="http://images2015.cnblogs.com/blog/528573/201609/528573-20160902122334215-1428383567.png">
+    <link href="//res.wx.qq.com/open/zh_CN/htmledition/res/img/icon/common/favicon2168b9.ico" rel="icon" type="image/x-icon">
+    <link rel="apple-touch-icon" sizes="57x57" href="//images2015.cnblogs.com/blog/528573/201609/528573-20160902122329902-1531110925.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="//images2015.cnblogs.com/blog/528573/201609/528573-20160902122334215-1428383567.png">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
     <meta content="yes" name="apple-mobile-web-app-capable" >
     <meta content="black" name="apple-mobile-web-app-status-bar-style" >

diff --git a/src/app.vue b/src/app.vue
@@ -1,5 +1,14 @@
 <template>
     <section class="welcome" v-show="welcome" transition="welcome"></section>
+    <section class="mobile-tips" style="dislay:none;" v-show="isnotMobile">
+        <div class="mobile-tips-inner">
+            <div class="mobile-model"> <img src="./assets/images/mobile.png" alt=""></div>
+            <p><br>为保证最佳用户体验,<br></p>
+            <p class="_align-left">1.请用chrome移动设备调试模式(F12)下打开,</p>
+            <p class="_align-left">2.手机浏览器访问</p>
+            <img src="./assets/images/mobile-dev-guide.png" alt="" style="display:none;">
+        </div>
+    </section>
     <header class="app-header" style="display:none;" v-show="appload">
         <div class="_effect" :class="{'_effect--50':decline}">
             <index-header style="overflow:visible;"></index-header>
@@ -39,17 +48,32 @@ export default {
         return {
             appload: false,
             welcome: false,
-            decline: false
+            isnotMobile:false,
+            decline: false,
         }
     },
     created() {
+        var isMobile = function(){
+            var userAgentInfo = navigator.userAgent;
+            var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
+            var flag = false;
+            for (var v = 0; v < Agents.length; v++) {
+                if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = true; break; }
+            };
+            return flag;
+        }();
         if (this.$route.matched.length === 1) {
             this.welcome = true;
         }
         this.appload = true;
         setTimeout(() => {
             this.welcome = false;
         }, 500)
+        if(isMobile){
+
+        }else{
+            this.isnotMobile = true;
+        }
     },
     events: {
         'route-pipe' (_decline) {
@@ -78,4 +102,25 @@ export default {
 .welcome-leave {
     opacity: 0;
 }
+.mobile-tips{
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    background-color: rgba(0,0,0,.75);
+    text-align: center;
+    color: #cccccc;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.mobile-tips-inner{
+    width: 330px;
+    margin-top: -30%;
+}
+.mobile-model{
+    flex-grow: 1;
+}
 </style>