update

web/public/panorama/tour.xml

@@ -2,8 +2,8 @@
 
 	<include url="skin/vtourskin.xml" />
 	<include url="code/tools.xml" />
-<!-- 
-	<include url="./pano_pos.xml" />
+
+	<!-- <include url="./pano_pos.xml" />
 	
 	<events keep="true" name="showpos"
 		onviewchange="show_pos()" 
@@ -116,7 +116,7 @@
 	
 	<scene name="scene_ck_css" title="ck_css" onstart="" thumburl="panos/ck_css.tiles/thumb.jpg" lat="" lng="" heading="">
 
-		<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
+		<view hlookat="93.47" vlookat="11.78" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
 
 		<preview url="panos/ck_css.tiles/preview.jpg" />
 
@@ -136,7 +136,7 @@
 
 	<scene name="scene_ck_dm" title="ck_dm" onstart="" thumburl="panos/ck_dm.tiles/thumb.jpg" lat="" lng="" heading="">
 
-		<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
+		<view hlookat="92.76" vlookat="7.26" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
 
 		<preview url="panos/ck_dm.tiles/preview.jpg" />
 
@@ -156,7 +156,7 @@
 
 	<scene name="scene_ck_rk" title="ck_rk" onstart="" thumburl="panos/ck_rk.tiles/thumb.jpg" lat="" lng="" heading="">
 
-		<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
+		<view hlookat="-88.59" vlookat="-2.6" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
 
 		<preview url="panos/ck_rk.tiles/preview.jpg" />
 
@@ -176,7 +176,7 @@
 
 	<scene name="scene_ck_yz" title="ck_yz" onstart="" thumburl="panos/ck_yz.tiles/thumb.jpg" lat="" lng="" heading="">
 
-		<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
+		<view hlookat="-97.88" vlookat="0.62" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
 
 		<preview url="panos/ck_yz.tiles/preview.jpg" />
 

web/src/router/index.js

@@ -5,6 +5,11 @@ import bigscene from '../views/bigscene'
 import map from '../views/map'
 import picture from '../views/picture'
 
+const originalPush = VueRouter.prototype.push
+VueRouter.prototype.push = function push (location) {
+  return originalPush.call(this, location).catch(err => err)
+}
+
 
 Vue.use(VueRouter)
 

web/src/views/bigscene/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="bigscene">
-    <iframe allowfullscreen :src="cItem.link" frameborder="0"></iframe>
+    {{cItem.type}}
+    <iframe allowfullscreen v-if="cItem.type=='bigscene'" :src="cItem.link" frameborder="0"></iframe>
+    <pano :panoid="$route.params.id" v-else />
     <transition name="fade1">
       <list :show="isList" />
     </transition>
@@ -20,9 +22,10 @@
 <script>
 import list from "@/views/list";
 import { data } from "@/data/hotspot";
+import pano from "@/views/panorama/pano";
 
 export default {
-  components:{list},
+  components:{list,pano},
   data(){
     return {
       isList: false
@@ -34,8 +37,10 @@ export default {
       let tmp = data.find(item=>item.id==id)
 
       return tmp
-    }
+    },
+    
   },
+
   mounted(){
     this.$bus.$on('toggleList', data=>{
       this.isList = data

web/src/views/list/index.vue

@@ -52,16 +52,12 @@ export default {
   },
   methods: {
     goto(item) {
-      if (item.type=='pano') {
-        this.$router.push({
-          path:'/'
-        })
-        setTimeout(() => {
-          this.$bus.$emit("clickhotspot",{id:item.id})
-        }, 0);
-        return
-      }
-      this.$bus.$emit("clickhotspot",{id:item.id})
+      this.$router.push({
+        name: "bigscene",
+        params: {
+          id: item.id,
+        },
+      });
     },
   },
   components: {

web/src/views/panorama/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="pano_con">
-    <pano />
+    <pano :position="'home'" />
     <vaside/>
   </div>
 </template>

web/src/views/panorama/pano.vue

@@ -11,45 +11,75 @@ import { data, raw } from "@/data/hotspot";
 let __krfn = krfn.default;
 
 export default {
+  props: ["position",'panoid'],
   methods: {
-    loadPano(){
-
-    }
+    loadPano() {},
   },
-  data(){
+  data() {
     return {
-      hotspots:data
+      hotspots: data,
+      scene: "lqctx",
+      from:''
+    };
+  },
+    watch:{
+      panoid:{
+        handler:function (newVal) {
+          let tmp = raw.find((item) => item.id == newVal);
+          var krpano = document.getElementById("krpanoSWFObject");
+          this.hotspots = tmp.linkPano || [];
+          krpano.call(`loadscene(scene_${tmp.link});`);
+      }
     }
   },
   mounted() {
     this.$bus.$on("clickhotspot", (res) => {
       if (res.id) {
-        let tmp = raw.find(item=>item.id==res.id)
-        if (tmp.type=='pano') {
-            var krpano = document.getElementById("krpanoSWFObject");
-            this.hotspots = tmp.linkPano || []
-            krpano.call(`loadscene(scene_${tmp.link});`)
-        } else {
+        if (this.position) {
           this.$router.push({
-            name:'bigscene',
-            params:{
-              id:res.id
-            }
-          })
+            name: "bigscene",
+            params: {
+              id: res.id,
+            },
+          });
+        } else {
+          let tmp = raw.find((item) => item.id == res.id);
+          if (tmp.type == "pano") {
+            var krpano = document.getElementById("krpanoSWFObject");
+            this.hotspots = tmp.linkPano || [];
+            this.from = 'hotspot'
+            krpano.call(`loadscene(scene_${tmp.link});`);
+          } else {
+            this.$router.push({
+              name: "bigscene",
+              params: {
+                id: res.id,
+              },
+            });
+          }
         }
       }
     });
 
+
+    let tmp = raw.find((item) => item.id == this.panoid);
+
     window.__krfn = __krfn;
     window.vrInitFn = () => {
       var krpano = document.getElementById("krpanoSWFObject");
+      if(!this.position&&this.from!='hotspot'){
+         this.hotspots = tmp.linkPano || [];
+      }
       __krfn.utils.initHotspot(krpano, this.hotspots, false);
     };
 
+
     var settings = {
       "events[skin_events].onxmlcomplete": "js(window.vrViewFn());",
       "events[skin_events].onloadcomplete": "js(window.vrInitFn());",
+      "startscene": this.position? "" : `scene_${tmp.link}`
     };
+    $('#pano')&&window.removepano('#pano')
     this.$nextTick(() => {
       window.embedpano({
         swf: "panorama/tour.swf",
@@ -70,11 +100,11 @@ export default {
   width: 100%;
   height: 100%;
   position: relative;
-  >div{
+  > div {
     width: 100%;
     height: 100%;
   }
-  .title{
+  .title {
     position: absolute;
     top: 50px;
     left: 0;
@@ -85,7 +115,7 @@ export default {
 
 @media screen and (max-width: 500px) {
   .panorama {
-    .title{
+    .title {
       top: 30px;
       width: 85%;
     }

web/src/views/picture/index.vue

@@ -1,81 +1,226 @@
 <template>
-  <div class="bigscene" :style="{backgroundImage:`url(${require('@/assets/images/pic_bg.jpg')})`}">
-    <ul class="aside">
-      <li @click="$router.push({path:'/'})">
-        <img :src="require(`@/assets/images/aside/home.png`)" alt />
-      </li>
-    </ul>
+  <div
+    :class="!isMobile ? 'bigscene' : 'mbscene'"
+    :style="{
+      backgroundImage: `url(${require('@/assets/images/pic_bg.jpg')})`,
+    }"
+  >
+    <template v-if="!isMobile">
+      <ul class="aside">
+        <li @click="$router.push({ path: '/' })">
+          <img :src="require(`@/assets/images/aside/home.png`)" alt />
+        </li>
+      </ul>
 
-    <div class="piccon">
-      <div class="pictop">
-        <div class="tl">
-          <img class="l" @click="handlePage('prev')" :src="require(`@/assets/images/icon/left.png`)" alt />
-          <img class="ac_img" v-viewer :src="require(`@/assets/images/picture/${activeItem.pic[active].img}`)" alt />
-          <div class="imgmask"></div>
-          <img class="r" @click="handlePage('next')" :src="require(`@/assets/images/icon/right.png`)" alt />
+      <div class="piccon">
+        <div class="pictop">
+          <div class="tl">
+            <img
+              class="l"
+              @click="handlePage('prev')"
+              :src="require(`@/assets/images/icon/left.png`)"
+              alt
+            />
+            <img
+              class="ac_img"
+              v-viewer
+              :src="
+                require(`@/assets/images/picture/${activeItem.pic[active].img}`)
+              "
+              alt
+            />
+            <div class="imgmask"></div>
+            <img
+              class="r"
+              @click="handlePage('next')"
+              :src="require(`@/assets/images/icon/right.png`)"
+              alt
+            />
+          </div>
+          <div class="tr">
+            <p
+              :style="{
+                backgroundImage: `url(${require('@/assets/images/name_bg.png')})`,
+              }"
+            >
+              {{ activeItem.name }}
+            </p>
+            <span
+              v-for="(item, i) in activeItem.desc"
+              :key="i"
+              v-html="item"
+            ></span>
+          </div>
         </div>
-        <div class="tr">
-          <p :style="{backgroundImage:`url(${require('@/assets/images/name_bg.png')})`}">{{activeItem.name}}</p>
-          <span v-for="(item,i) in activeItem.desc" :key="i" v-html="item"></span>
+
+        <div class="picbtm">
+          <swiper
+            ref="listSwiper"
+            class="swiper-wrapper swiper-wrapper-n"
+            :options="swiperOption"
+          >
+            <swiper-slide
+              class="swiper-slide"
+              :class="{ active: item.id == activeItem.id }"
+              v-for="(item, index) in items"
+              :key="index"
+            >
+              <div class="sw-card" @click="goto(item)">
+                <img
+                  :src="require(`@/assets/images/picture/${item.thumb}`)"
+                  alt=""
+                />
+                <p>{{ item.name }}</p>
+              </div>
+            </swiper-slide>
+          </swiper>
         </div>
       </div>
+    </template>
 
-      <div class="picbtm">
-        <swiper
-          ref="listSwiper"
-          class="swiper-wrapper swiper-wrapper-n"
-          :options="swiperOption"
-        >
-          <swiper-slide
-            class="swiper-slide"
-            :class="{active:item.id==activeItem.id}"
-            v-for="(item, index) in items"
-            :key="index"
-          >
-            <div class="sw-card" @click="goto(item)" >
-              <img :src="require(`@/assets/images/picture/${item.thumb}`)" alt="">
-              <p>{{item.name}}</p>
+    <template v-else>
+      <ul class="aside">
+        <li @click="$router.push({ path: '/' })">
+          <img :src="require(`@/assets/images/aside/home.png`)" alt />
+        </li>
+      </ul>
+      <div class="mbtop">
+        <div class="title" v-html="activeItem.title"></div>
+        <div class="swcon" v-swiper:mySwiper="swiperOption">
+          <ul class="swiper-wrapper swiper-wrapper-n">
+            <div
+              class="swiper-slide"
+              v-for="(item, index) in activeItem.pic"
+              :key="index"
+            >
+              <div class="sl-item">
+                <img :src="require(`@/assets/images/picture/${item.img}`)" />
+              </div>
             </div>
-          </swiper-slide>
-        </swiper>
+          </ul>
+          <div class="swiper-pagination pagination" slot="pagination"></div>
+        </div>
+
+        <div class="desc">
+          <p
+              :style="{
+                backgroundImage: `url(${require('@/assets/images/name_bg.png')})`,
+              }"
+            >
+              {{ activeItem.name }}
+            </p>
+            <span
+              v-for="(item, i) in activeItem.desc"
+              :key="i"
+              v-html="item"
+            ></span>
+        </div>
       </div>
-    </div>
+      <div class="mbbtm">
+        <div class="list">
+          <swiper :options="swiperOption1" class="swiper-wrapper swiper1">
+            <swiper-slide
+              class="swiper-slide"
+              v-for="(item, i) in items"
+              :class="{ active: item.id == activeItem.id }"
+              :key="i"
+            >
+              <img
+                @click="goto(item)"
+                :src="require(`@/assets/images/picture/${item.thumb}`)"
+              />
+              <span>{{ item.name }}</span>
+            </swiper-slide>
+          </swiper>
+        </div>
+      </div>
+    </template>
   </div>
 </template>
 
 <script>
-
-import { Swiper, SwiperSlide } from "vue-awesome-swiper";
+import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
 import "swiper/css/swiper.css";
 import { picture } from "@/data/hotspot";
+import browser from "@/utils/browser";
 
 export default {
   components: {
     Swiper,
     SwiperSlide,
   },
+  directives: {
+    swiper: directive,
+  },
   computed: {
     swiper() {
       return this.$refs.picSwiper.$swiper;
     },
     swiperOption() {
+
+      return !this.isMobile
+        ? {
+            slidesPerView: "auto",
+          }
+        : {
+            slidesPerView: "auto",
+            centeredSlides: true,
+            watchSlidesProgress: true,
+            paginationClickable: true,
+            on: {
+              progress: function() {
+                var a = this;
+                var b, c, d;
+                for (b = 0; b < a.slides.length; b++) {
+                  c = a.slides[b];
+                  d = c.progress;
+                  var scale = 1 - Math.min(Math.abs(0.2 * d), 1);
+                  var es = c.style;
+                  es.opacity = 1 - Math.min(Math.abs(d / 2), 1);
+                  es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform =
+                    "translate3d(0px,0," +
+                    -Math.abs(400 * d) +
+                    "px) scale(" +
+                    scale +
+                    ")";
+                }
+              },
+              setTransition: function(b) {
+                var a = this;
+                for (var c = 0; c < a.slides.length; c++) {
+                  var es = a.slides[c].style;
+                  es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration =
+                    b + "ms";
+                }
+              },
+            },
+          };
+    },
+
+    swiperOption1() {
       return {
+        id: "tttt",
         slidesPerView: "auto",
+        autoplay: false,
+        direction: "horizontal",
       };
     },
+
     items() {
       return picture;
     },
   },
-  data(){
+  data() {
     return {
-      activeItem:picture[0],
-      active:0
-    }
+      activeItem: picture[0],
+      isMobile: browser.mobile,
+      active: 0,
+      mbactive: "0",
+    };
   },
-  methods:{
-    goto(item){
-      this.activeItem = item
+  methods: {
+    goto(item) {
+      this.activeItem = item;
       this.active = 0;
     },
     handlePage(type) {
@@ -94,65 +239,64 @@ export default {
       }
     },
   },
-  mounted(){
-    
-  }
-}
+  mounted() {},
+};
 </script>
 
 <style lang="less" scoped>
-.bigscene{
+.bigscene {
   width: 100%;
   height: 100%;
   font-size: 0;
   background-size: 100% 100%;
   background-repeat: no-repeat;
   position: relative;
- .piccon{
-   width: 90%;
-   position: absolute;
-   bottom: 20px;
-   left: 50%;
-   transform: translateX(-50%);
-   .pictop{
-     display: flex;
-     justify-content: center;
-     margin-bottom: 40px;
-     .tl{
-       display: flex;
-       justify-content: space-around;
-      position: relative;
-       align-items: center;
-       margin-right: 100px;
-       .ac_img{
-         width: 800px;
-         margin: 0 50px 0 30px;
-         display: block;
+  .piccon {
+    width: 90%;
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    .pictop {
+      display: flex;
+      justify-content: center;
+      margin-bottom: 40px;
+      .tl {
+        display: flex;
+        justify-content: space-around;
+        position: relative;
+        align-items: center;
+        margin-right: 100px;
+        .ac_img {
+          width: 800px;
+          margin: 0 50px 0 30px;
+          display: block;
           cursor: pointer;
-       }
+        }
 
-       .l, .r{
-         cursor: pointer;
-       }
-       .r{
-       }
-         .imgmask{
-           position: absolute;
-           display: inline-block;
-           width: 800px;
-           height: 100%;
-           top: calc(50% + 20px);
-           transform: translate(-50%,-50%);
-           left: calc(50% + 10px);
-           z-index: -1;
-           content: '';
-           background-color: #9E4923;
-         }
-     }
-     .tr{
-        color: #FCC677;
+        .l,
+        .r {
+          cursor: pointer;
+        }
+        .r {
+        }
+        .imgmask {
+          position: absolute;
+          display: inline-block;
+          width: 800px;
+          height: 100%;
+          top: calc(50% + 20px);
+          transform: translate(-50%, -50%);
+          left: calc(50% + 10px);
+          z-index: -1;
+          content: "";
+          background-color: #9e4923;
+        }
+      }
+      .tr {
+        color: #fcc677;
         max-width: 400px;
-       >p{
+        > p {
           background-size: 100% 100%;
           background-repeat: no-repeat;
           width: 230px;
@@ -162,62 +306,63 @@ export default {
           font-size: 24px;
           font-weight: bold;
           margin-bottom: 26px;
-       }
-       >span{
-        font-size: 16px;
-        text-indent: 32px;
-        line-height:1.5;
-        color: #9E4923;
-        display: inline-block;
-       }
-     }
-   }
+        }
+        > span {
+          font-size: 16px;
+          text-indent: 32px;
+          line-height: 1.5;
+          color: #9e4923;
+          display: inline-block;
+        }
+      }
+    }
 
-   .picbtm {
-    width: 1320px;
-    margin: 60px auto 0;
-    height: 200px;
-    .swiper-container {
-      width: 100%;
-      height: 100%;
-      transform:translate3d(0,0,0);
-      padding: 18px 28px;
-      overflow: hidden;
-      box-sizing: border-box;
-      .swiper-wrapper {
+    .picbtm {
+      width: 1320px;
+      margin: 60px auto 0;
+      height: 200px;
+      .swiper-container {
         width: 100%;
-        height: 200px;
-        transform:translate3d(0,0,0);
-        .swiper-slide {
-          width: 190px;
-          height: 100%;
-          margin: 0 10px;
-          cursor: pointer;
-          transform:translate3d(0,0,0);
-          .sw-card {
-            text-align: center;
+        height: 100%;
+        transform: translate3d(0, 0, 0);
+        padding: 18px 28px;
+        overflow: hidden;
+        box-sizing: border-box;
+        .swiper-wrapper {
+          width: 100%;
+          height: 200px;
+          transform: translate3d(0, 0, 0);
+          .swiper-slide {
+            width: 190px;
             height: 100%;
-            width: 100%;
-            background-size: 100% 100%;
-            background-repeat: no-repeat;
-            background-position: 0 0;
-            >img{
-              width: 100%;
-            }
-            >p{
-              font-size: 18px;
-              margin-top: 6px;
-              color: #666666;
-            }
-          }
-          &.active {
+            margin: 0 10px;
+            cursor: pointer;
+            transform: translate3d(0, 0, 0);
             .sw-card {
-               >img{
-                border: 3px solid #9E4923;
+              text-align: center;
+              height: 100%;
+              width: 100%;
+              background-size: 100% 100%;
+              background-repeat: no-repeat;
+              background-position: 0 0;
+              > img {
+                width: 100%;
+              }
+              > p {
+                font-size: 18px;
+                margin-top: 6px;
+                color: #666666;
               }
-              >p{
-                color: #9E4923;
-                font-weight: bold;
+            }
+            &.active {
+              .sw-card {
+                > img {
+                  border: 3px solid #9e4923;
+                }
+                > p {
+                  color: #9e4923;
+                  font-weight: bold;
+                }
               }
             }
           }
@@ -225,13 +370,12 @@ export default {
       }
     }
   }
- }
   .aside {
     position: fixed;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
-    background: rgba(#9E4923, 0.9);
+    background: rgba(#9e4923, 0.9);
     border-radius: 20px 0px 0px 20px;
     li {
       cursor: pointer;
@@ -243,4 +387,156 @@ export default {
     }
   }
 }
-</style>
+
+.mbscene {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  padding: 2vh 0;
+  .aside {
+    position: fixed;
+    top: 26%;
+    right: 0;
+    z-index: 999999;
+    transform: translateY(-50%);
+    background: rgba(#9e4923, 0.9);
+    border-radius: 20px 0px 0px 20px;
+    li {
+      cursor: pointer;
+      margin: 26px 10px;
+      img {
+        cursor: pointer;
+        width: 40px;
+      }
+    }
+  }
+   
+  .mbtop {
+    .swcon {
+      position: relative;
+      padding-bottom: 30px;
+      .swiper-wrapper {
+        height: 200px;
+        padding: 0;
+        .swiper-slide {
+          width: 80%;
+          transform-style: preserve-3d;
+          transform-style: preserve-3d;
+          position: relative;
+          height: 100%;
+          margin: 0 -60px;
+          transform: translate3d(0, 0, 0);
+          .sl-item {
+            position: absolute;
+            top: 0;
+            left: 50%;
+            height: 100%;
+            transform: translateX(-50%);
+            width: 100%;
+            overflow: hidden;
+            > img {
+              height: 100%;
+              transform: translateX(-50%);
+              position: absolute;
+              left: 50%;
+            }
+          }
+        }
+        .swiper-slide-active {
+          z-index: 999;
+        }
+      }
+
+      .pagination {
+        position: absolute;
+        bottom: 5px;
+        & /deep/ .swiper-pagination-bullet,
+        & /deep/ .swiper-pagination-bullet-active {
+          width: 40px !important;
+          height: 4px !important;
+          background: #bc1515 !important;
+          display: inline-block !important;
+          margin: 0 4px !important;
+          border-radius: 0;
+          opacity: 1;
+        }
+        & /deep/ .swiper-pagination-bullet-active {
+          background: #dba761 !important;
+        }
+      }
+    }
+    .desc{
+      width: 90%;
+      margin: 0 auto;
+      color: #fcc677;
+      max-height: 30vh;
+      overflow-y: auto;
+      overflow-x: hidden;
+      > p {
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          width: 161px;
+          height: 42px;
+          line-height: 42px;
+          text-align: center;
+          font-size: 18px;
+          font-weight: bold;
+          margin-bottom: 20px;
+        }
+        > span {
+          font-size: 16px;
+          text-indent: 32px;
+          line-height: 1.5;
+          color: #9e4923;
+          text-align: justify;
+          display: inline-block;
+        }
+    }
+  }
+
+  .mbbtm {
+    .list {
+      width: 100%;
+      margin-top: 20px;
+      .swiper-wrapper {
+        width: 100%;
+        margin: 0 6px;
+        .swiper-slide {
+          width: 166px;
+          margin: 4px;
+          height: 93px;
+          position: relative;
+          border-radius: 6px;
+          overflow: hidden;
+          &:first-of-type {
+            margin-left: 0;
+          }
+          > img {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            height: 100%;
+            width: 100%;
+          }
+          > span {
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.96);
+            width: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            text-align: center;
+            transform: translateX(-50%);
+            display: inline-block;
+            font-size: 16px;
+            padding: 6px 0;
+            color: rgba(255, 255, 255, 0.9);
+            z-index: 100;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

web/src/views/welcome/index.vue

@@ -28,8 +28,14 @@ export default {
   },
   methods: {
      startplay() {
+       if(this.$browser.mobile){
+            this.$emit('close')
+       }
+       else{
         this.$refs.welcome.play();
         this.isShow = false
+       }
+
     }
   },
   mounted() {
@@ -124,7 +130,6 @@ export default {
 
 @media screen and (max-width: 500px) {
   .welcome_con{
-  background-size: auto 100%;
   background-position: center center;
 
   .btn{
@@ -154,7 +159,6 @@ export default {
     background:#000;
     >video{
       width:100%;
-      height:100%;
       position: absolute;
       top:50%;
       left:50%;