sh_museum/package-lock.json

@@ -4,6 +4,37 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@babel/cli": {
+      "version": "7.10.5",
+      "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.10.5.tgz",
+      "integrity": "sha512-j9H9qSf3kLdM0Ao3aGPbGZ73mEA9XazuupcS6cDGWuiyAcANoguhP0r2Lx32H5JGw4sSSoHG3x/mxVnHgvOoyA==",
+      "dev": true,
+      "requires": {
+        "chokidar": "^2.1.8",
+        "commander": "^4.0.1",
+        "convert-source-map": "^1.1.0",
+        "fs-readdir-recursive": "^1.1.0",
+        "glob": "^7.0.0",
+        "lodash": "^4.17.19",
+        "make-dir": "^2.1.0",
+        "slash": "^2.0.0",
+        "source-map": "^0.5.0"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+          "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+          "dev": true
+        },
+        "lodash": {
+          "version": "4.17.19",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
+          "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==",
+          "dev": true
+        }
+      }
+    },
     "@babel/code-frame": {
       "version": "7.8.3",
       "resolved": "https://registry.npm.taobao.org/@babel/code-frame/download/@babel/code-frame-7.8.3.tgz?cache=0&sync_timestamp=1578953126105&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fcode-frame%2Fdownload%2F%40babel%2Fcode-frame-7.8.3.tgz",
@@ -2170,6 +2201,37 @@
       "integrity": "sha1-fjPY99RJs/ZzzXLeuavcVS2+Uo4=",
       "dev": true
     },
+    "axios": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+      "requires": {
+        "follow-redirects": "1.5.10"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz?cache=0&sync_timestamp=1582679727935&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-eslint%2Fdownload%2Fbabel-eslint-10.1.0.tgz",
@@ -2206,6 +2268,49 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-polyfill": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
+      "integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "core-js": "^2.5.0",
+        "regenerator-runtime": "^0.10.5"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.11",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
+          "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
+        },
+        "regenerator-runtime": {
+          "version": "0.10.5",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
+          "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg="
+        }
+      }
+    },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.11",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
+          "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "http://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz",
@@ -2913,6 +3018,11 @@
         }
       }
     },
+    "classlist-polyfill": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
+      "integrity": "sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npm.taobao.org/clean-css/download/clean-css-4.2.3.tgz",
@@ -4115,6 +4225,14 @@
         }
       }
     },
+    "dom7": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
+      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
+      "requires": {
+        "ssr-window": "^2.0.0"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz?cache=0&sync_timestamp=1588595917712&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdomain-browser%2Fdownload%2Fdomain-browser-1.2.0.tgz",
@@ -5164,6 +5282,12 @@
         "minipass": "^3.0.0"
       }
     },
+    "fs-readdir-recursive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz",
+      "integrity": "sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA==",
+      "dev": true
+    },
     "fs-write-stream-atomic": {
       "version": "1.0.10",
       "resolved": "http://registry.npm.taobao.org/fs-write-stream-atomic/download/fs-write-stream-atomic-1.0.10.tgz",
@@ -6235,6 +6359,12 @@
         "isobject": "^3.0.1"
       }
     },
+    "is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
+      "dev": true
+    },
     "is-regex": {
       "version": "1.0.5",
       "resolved": "https://registry.npm.taobao.org/is-regex/download/is-regex-1.0.5.tgz",
@@ -9120,6 +9250,29 @@
       "integrity": "sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo=",
       "dev": true
     },
+    "sass-resources-loader": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/sass-resources-loader/-/sass-resources-loader-2.0.3.tgz",
+      "integrity": "sha512-kYujKXFPZvh5QUT+0DO35P93G6GeIRMP4c941Ilbvey5lo+iICFs2H4hP2CFHl68Llg7h2iXqe0RQpDoUzjUSw==",
+      "dev": true,
+      "requires": {
+        "@babel/cli": "^7.4.4",
+        "@babel/preset-env": "^7.4.5",
+        "async": "^3.0.1",
+        "babel-eslint": "^10.0.2",
+        "chalk": "^2.4.2",
+        "glob": "^7.1.1",
+        "loader-utils": "^1.0.4"
+      },
+      "dependencies": {
+        "async": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/async/-/async-3.2.0.tgz",
+          "integrity": "sha512-TR2mEZFVOj2pLStYxLht7TyfuRzaydfpxr3k9RpHIzMgw7A64dzsdqCxH1WJyQdoe8T10nDXd9wnEigmiuHIZw==",
+          "dev": true
+        }
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "http://registry.npm.taobao.org/sax/download/sax-1.2.4.tgz",
@@ -9732,6 +9885,11 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssr-window": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
+      "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
+    },
     "ssri": {
       "version": "6.0.1",
       "resolved": "https://registry.npm.taobao.org/ssri/download/ssri-6.0.1.tgz",
@@ -9934,6 +10092,18 @@
       "integrity": "sha1-djjTFCISns9EV0QACfugP5+awYA=",
       "dev": true
     },
+    "style-resources-loader": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/style-resources-loader/-/style-resources-loader-1.3.3.tgz",
+      "integrity": "sha512-vDD2HyG6On8H9gWUN9O9q1eXR/JnXpCkNvpusvgFsRQ9JZGF9drzvwKEigR9vqlmUbXO2t/vIIabpYMmis0eAQ==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.6",
+        "is-promise": "^2.1.0",
+        "loader-utils": "^1.2.3",
+        "schema-utils": "^2.6.1"
+      }
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npm.taobao.org/stylehacks/download/stylehacks-4.0.3.tgz",
@@ -9994,6 +10164,15 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "swiper": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-5.4.5.tgz",
+      "integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
+      "requires": {
+        "dom7": "^2.1.5",
+        "ssr-window": "^2.0.0"
+      }
+    },
     "table": {
       "version": "5.4.6",
       "resolved": "https://registry.npm.taobao.org/table/download/table-5.4.6.tgz",
@@ -10655,6 +10834,11 @@
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.11.tgz",
       "integrity": "sha1-dllNh31LEiNEBuhONSdcbVFBJcU="
     },
+    "vue-awesome-swiper": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
+      "integrity": "sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ=="
+    },
     "vue-eslint-parser": {
       "version": "7.0.0",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.0.0.tgz?cache=0&sync_timestamp=1573306368916&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.0.0.tgz",

sh_museum/src/App.vue

@@ -1,12 +1,13 @@
 <template>
   <div id="app">
-    <i-header></i-header>
+    <i-header v-if="!isMobile"></i-header>
     <i-aside></i-aside>
     <home/>
   </div>
 </template>
 
 <script>
+import browser from '@/utils/browser.js'
 import home from "./pages/layout/home";
 import aside from "./pages/layout/aside";
 import header from "./pages/layout/header";
@@ -17,10 +18,15 @@ import '@/assets/css/color.less'
 
 
 export default {
-  components:{
+  components: {
     home,
     'i-header':header,
     'i-aside':aside
+  },
+  data() {
+    return {
+      isMobile: browser.mobile
+    }
   }
 }
 </script>

sh_museum/src/components/card/index.vue

@@ -1,26 +1,31 @@
 <template>
-  <div
-    class="item"
-    @click="handleClick(item)"
-  >
-    <div class="card-img">
-      <img class="full" :src="item.thumb" alt="" />
-      <img class="real" :src="item.thumb" alt="" />
-    </div>
-    <div class="card-txt">
-      <div class="title">
-        <span :title="item.name">{{ item.name }}</span>
+  
+    <div class="item" @click="handleClick(item)">
+      <div class="card-img">
+        <img class="full" :src="item.thumb" alt="" />
+        <img class="real" :src="item.thumb" alt="" />
       </div>
-      <div class="tag">
-        <span :title="item.material">{{ item.material }}</span>
+      <div class="card-txt">
+        <div class="title">
+          <span :title="item.name">{{ item.name }}</span>
+        </div>
+        <div class="tag">
+          <span :title="item.material">{{ item.material }}</span>
+        </div>
       </div>
     </div>
-  </div>
 </template>
 
+
 <script>
+import browser from "@/utils/browser.js";
 export default {
   props: ["item"],
+  data() {
+    return {
+      isMobile: browser.mobile
+    };
+  },
   methods:{
     handleClick(item){
       this.$emit('handleItem',item)
@@ -28,6 +33,8 @@ export default {
   }
 };
 </script>
+
+
 <style lang="less" scoped>
 @margin: 36px;
 
@@ -82,7 +89,9 @@ export default {
 }
 
 
-@media screen and (max-width: 1400px) {
+
+
+@media screen and (min-width: 500px) and (max-width: 1400px) {
   .item {
     width: calc((100% - @margin * 3) / 3);
     &:nth-of-type(3n) {
@@ -93,4 +102,18 @@ export default {
     }
   }
 }
+
+@media screen and (max-width: 500px) {
+  .item {
+    width: 42.4vw;
+    margin-right: 5vw;
+    margin-bottom: 5vw;
+    &:nth-of-type(2n) {
+      margin-right: 0;
+    }
+    // &:nth-of-type(4n){
+    //   margin-right: @margin;
+    // }
+  }
+}
 </style>

sh_museum/src/components/popupLayout/Broadcast.vue

@@ -1,5 +1,20 @@
 <template>
-    <div class="ui-broadcast" @click="$hideBroadcast()">
+  <div class="wrapper">
+    <div class="ui-broadcast-mobile" @click="$hideBroadcast()" v-if="isMobile">
+      <img class="bg" :src="`${$cdn}images/mobile/default_bg.png`" alt="">
+      <img class="back-icon"  @click="$hideBroadcast()" :src="`${$cdn}images/back-icon.png`" alt="">
+      <div class="ui-con" @click.stop v-if="link.item.displayModel === 2">
+        <div class="img-con">
+            <video :src="link.item.video" autoplay loop></video>
+        </div>
+      </div>
+     <div class="full"  @click.stop v-else>
+        <iframe :src="link.item.webSite" frameborder="0"></iframe>
+        <img class="full-btn"  @click="$hideBroadcast()" :src="`${$cdn}images/close-full.png`" alt="">
+      </div>
+    </div>
+
+    <div class="ui-broadcast" @click="$hideBroadcast()" v-if="!isMobile">
       <div class="ui-con" @click.stop v-if="link.item.displayModel === 2">
         <div class="img-con img-k">
             <video :src="link.item.video" autoplay loop></video>
@@ -10,11 +25,16 @@
         <img class="full-btn"  @click="$hideBroadcast()" :src="`${$cdn}images/close-full.png`" alt="">
       </div>
     </div>
+  </div>
 </template>
 <script>
+import browser from "@/utils/browser.js";
 export default {
   data(){
-
+    return {
+      isMobile: browser.mobile
+    };
+    
   }
 };
 </script>
@@ -30,6 +50,7 @@ export default {
   top: 0;
   left: 0;
   background: rgba(123,63,33,0.5);
+  
   .ui-con{
     top: 48%;
     left: 50%;
@@ -70,4 +91,62 @@ export default {
     }
   }
 }
+
+.ui-broadcast-mobile{
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  z-index: 9999;
+  top: 0;
+  left: 0;
+  
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+  .back-icon {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+  }
+  .ui-con{
+    top: 48%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    text-align: center;
+    width: 100%;
+    position: fixed;
+    font-size: 0;
+    
+    box-sizing: border-box;
+    iframe,video{
+      width: 100%;
+      min-height: 550px;
+    }
+    img{
+      width: 100%;
+      height: auto;
+    }
+  }
+  .full{
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    iframe{
+      width: 100%;
+      height: 100%;
+    }
+    .full-btn{
+      width: 50px;
+      position: absolute;
+      right: 12px;
+      top: 30px;
+      cursor: pointer;
+    }
+  }
+}
 </style>

sh_museum/src/components/popupLayout/Message.vue

@@ -177,4 +177,12 @@ textarea::placeholder {
     }
   }
 }
+
+@media screen and (max-width: 500px) {
+  .ui-message {
+    width: 90%;
+    border-radius: 8px;
+    padding: 20px;
+  }
+}
 </style>

sh_museum/src/components/slide/index.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="swiper-container">
-    <div class="pagenav" @click="slide('slidePrev')" >
+    <div id="sPrev" class="pagenav" @click="slide('slidePrev')" >
       <img :src="`${$cdn}images/prev.png`"/>
       <img class="active" :src="`${$cdn}images/prev_active.png`" />
     </div>
+
     <swiper
       ref="listSwiper"
       class="swiper-wrapper swiper-wrapper-n"
       :options="swiperOption"
+      v-if="!isMobile"
     >
       <swiper-slide
         class="swiper-slide"
@@ -18,13 +20,15 @@
         <img @click="slideto(index)" class="logo" :src="item.thumb"/>
       </swiper-slide>
     </swiper>
-    <div class="pagenav" @click="slide('slideNext')">
+
+    <div id="sNext" class="pagenav" @click="slide('slideNext')">
       <img :src="`${$cdn}images/next.png`" />
       <img class="active" :src="`${$cdn}images/next_active.png`" />
     </div>
   </div>
 </template>
 <script>
+import browser from "@/utils/browser.js";
 import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
 import "swiper/css/swiper.css";
 
@@ -58,7 +62,8 @@ export default {
       showPre: 0,
       activeIdx: this.idx,
       nextActive: false,
-      prevActive: false
+      prevActive: false,
+      isMobile: browser.mobile
     };
   },
   watch:{
@@ -180,4 +185,22 @@ export default {
   opacity: 0.65;
 }
 
+@media screen and (max-width: 500px) {
+  .swiper-container {
+    .pagenav {
+      position: fixed;
+      top: 45%;
+      img {
+        width: 50%;
+      }
+    }
+    #sPrev {
+      left: -7vw;
+    }
+    #sNext {
+      right: -10vw;
+    }
+  }
+}
+
 </style>

sh_museum/src/pages/floorlist/index.vue

@@ -1,56 +1,144 @@
 <template>
-  <div class="layout">
-    <div class="list-con">
-      <div class="l-h">
-        <img :src="`${$cdn}images/icon-story.png`" alt="" />
-        <p>{{params.name}}</p>
-      </div>
-      <div class="l-type">
-        <div class="area">
-          <span class="txt-bold">区域：</span>
-          <ul>
-            <li
-              :class="{ active: item.id === a_active }"
-              v-for="(item, i) in area"
-              @click="a_active = item.id"
-              :key="i"
-            >
-              {{ item.name }}
-            </li>
-          </ul>
+  <div class="wrapper">
+    <div class="layout" v-if="!isMobile">
+      <div class="list-con">
+
+        <div class="l-h">
+          <img :src="`${$cdn}images/icon-story.png`" alt="" />
+          <p>{{params.name}}</p>
         </div>
-      </div>
-      <div class="l-con">
-        <template  v-if="list.length>0">
-          <Card  @handleItem="handleItem" v-for="(item, i) in list" :item="item" :key="i" />
-        </template>
-        <template v-else>
-          <div class="no-result">
-            <img :src="`${$cdn}images/search-icon.png`" alt />
-            <span>暂时没有内容呢~</span>
+
+        <div class="l-type">
+          
+          <div class="area">
+            <span class="txt-bold">区域</span>
+            <ul>
+              <li
+                :class="{ active: item.id === a_active }"
+                v-for="(item, i) in area"
+                @click="a_active = item.id"
+                :key="i"
+              >
+                {{ item.name }}
+              </li>
+            </ul>
           </div>
-        </template>
+        </div>
+
+        <div class="l-con">
+
+          <template  v-if="list.length>0">
+            <Card  @handleItem="handleItem" v-for="(item, i) in list" :item="item" :key="i" />
+          </template>
+
+          <template v-else>
+            <div class="no-result">
+              <img :src="`${$cdn}images/search-icon.png`" alt />
+              <span>暂时没有内容呢~</span>
+            </div>
+          </template>
+        </div>
+
+        <div v-if="total" class="paging" :class="{ pagingshow: total }">
+          <Paging
+            @clickHandle="pageChange"
+            :current="currentPage"
+            :total="total"
+            :equable="pageSize"
+          />
+        </div>
       </div>
-      <div v-if="total" class="paging" :class="{ pagingshow: total }">
-        <Paging
-          @clickHandle="pageChange"
-          :current="currentPage"
-          :total="total"
-          :equable="pageSize"
-        />
+      <!-- <div class="qihuan" @click="$router.push({path:'/story'})">
+        <img :src="`${$cdn}images/qh-icon.png`" alt />
+        <p>切换模式</p>
+      </div> -->
+    </div>
+
+    <div class="mobileLayout" v-if="isMobile">
+      <img class="back-icon" @click="$router.push({path:'/'})" :src="`${$cdn}images/back-icon.png`" alt="">
+      <div class="list-con">
+
+        <div class="l-h">
+          <img :src="`${$cdn}images/icon-story.png`" alt="" />
+          <p>{{params.name}}</p>
+        </div>
+
+        <div class="l-type">
+          <div class="select-block">
+            <span class="txt-bold" id="label-block" @click="blockVisible = !blockVisible">楼体 <svg viewBox='0 0 140 140' width='12' height='12' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg></span>
+            <div class="select-box" id="select-block" v-if="blockVisible">
+              <ul>
+                <li
+                  :class="{ active: item.id === b_active }"
+                  v-for="(item, i) in blocks"
+                  @click="b_active = item.id; blockVisible = false"
+                  :key="i"
+                >
+                  {{ item.name }}
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="area">
+            <span class="txt-bold" id="label-area" @click="areaVisible = !areaVisible">区域 <svg viewBox='0 0 140 140' width='12' height='12' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg></span>
+            <div class="select-box" id="select-area" v-if="areaVisible">
+              <ul>
+                <li
+                  :class="{ active: item.id === a_active }"
+                  v-for="(item, i) in area"
+                  @click="a_active = item.id; areaVisible = false"
+                  :key="i"
+                >
+                  {{ item.name }}
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <div class="l-con">
+
+          <template  v-if="list.length>0">
+            <Card  @handleItem="handleItem" v-for="(item, i) in list" :item="item" :key="i" />
+          </template>
+
+          <template v-else>
+            <div class="no-result">
+              <img :src="`${$cdn}images/search-icon.png`" alt />
+              <span>暂时没有内容呢~</span>
+            </div>
+          </template>
+        </div>
+
+        <!-- <div v-if="total" class="paging" :class="{ pagingshow: total }">
+          <Paging
+            @clickHandle="pageChange"
+            :current="currentPage"
+            :total="total"
+            :equable="pageSize"
+          />
+        </div> -->
       </div>
     </div>
-    <!-- <div class="qihuan" @click="$router.push({path:'/story'})">
-      <img :src="`${$cdn}images/qh-icon.png`" alt />
-      <p>切换模式</p>
-    </div> -->
   </div>
 </template>
 
 <script>
+import browser from "@/utils/browser.js";
 import Paging from "@/components/paging";
 import Card from "@/components/card";
 
+let blocks = [
+  {
+    name: "东楼",
+    id: 1
+  },
+  {
+    name: "西楼",
+    id: 2
+  }
+];
+
 let area = [
   {
     name: "全部",
@@ -80,15 +168,21 @@ export default {
   },
   data() {
     return {
+      isMobile: browser.mobile,
       area,
+      blocks,
       list:[],
       a_active: '',
+      b_active: 1,
       l_active: '',
       t_active: '',
       total: 100,
       pageSize: 8,
       currentPage: 1,
-      type:'roam'
+      type:'roam',
+      block: null,
+      blockVisible: false,
+      areaVisible: false
     };
   },
   methods: {
@@ -107,7 +201,7 @@ export default {
       let res = await this.$http({
         method:'post',
         data:{
-          block: this.params.id,
+          block: this.isMobile ? this.b_active : this.params.id,
           pageNum: this.currentPage,
           pageSize: this.pageSize,
           searchKey: "",
@@ -127,6 +221,9 @@ export default {
     a_active(){
       this.refresh()
     },
+    b_active(){
+      this.refresh()
+    },
     l_active(){
       this.refresh()
     },
@@ -139,12 +236,22 @@ export default {
   },
   mounted(){
     this.getList()
+    if(this.isMobile) {
+      this.pageSize = this.total;
+    }
   }
 };
 </script>
 <style lang="less" scoped>
 @import '../../assets/css/globalVars.less';
 
+.wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
 .layout {
   width: calc(100% - 200px);
   position: relative;
@@ -272,4 +379,169 @@ export default {
     right: 250px;
   }
 }
+.mobileLayout {
+  width: 100%;
+  position: relative;
+  .back-icon {
+    position: fixed;
+    top: 40px;
+    left: 20px;
+  }
+  .list-con {
+    width: 100%;
+    padding-top: 5vh;
+    text-align: center;
+    .l-h {
+      color: @theme;
+      font-family: "SY-bold";
+      font-weight: bolder;
+      font-size: 0;
+      img {
+        width: 110px;
+      }
+      p {
+        font-size: 32px;
+      }
+    }
+    .l-type { // tags to select floors
+      text-align: center;
+      width: 90%;
+      margin: 20px auto 0;
+      display: flex;
+      justify-content: space-between;
+      .area,
+      .louti,
+      .select-block,
+      .types {
+        margin-bottom: 20px;
+        display: flex;
+        align-items: baseline;
+        .select-box {
+          position: fixed;
+          background-color: #f5ede2;
+          border-radius: 8px;
+          z-index: 10;
+          ul {
+            display: block;
+            font-size: 0;
+            li {
+              display: block;
+              padding: 2px 6px;
+              // margin: 0 6px;
+              cursor: pointer;
+              text-align: left;
+              color: #382e2c;
+              font-size: 16px;
+            }
+            .active {
+              background: @theme;
+              color: #c9a27b;
+            }
+          }
+          
+        }
+        #label-block {
+          position: fixed;
+            top: 18vh;
+            left: 5vw;
+          }
+          #select-block {
+            top: 21vh;
+            left: 5vw;
+          }
+          #label-area {
+            position: fixed;
+            top: 18vh;
+            left: 25vw;
+          }
+          #select-area {
+            top: 21vh;
+            left: 25vw;
+          }
+      }
+    }
+    .l-con {
+      position: fixed;
+      top: 25vh;
+      left: 5vw;
+      width: 93vw;
+      height: 65vh;
+      padding: 0;
+      box-sizing: border-box;
+      text-align: left;
+      font-size: 0;
+      overflow-y: scroll;
+      .no-result {
+        margin-top: 150px;
+      }
+    }
+    .paging {
+      // border-left: #e5e5e5 1px solid;
+      height: 100%;
+      margin-bottom: 40px;
+      transition: all 0.4s ease;
+      & /deep/ .p-layout {
+        text-align: center;
+        margin-top: 10px;
+      }
+      & /deep/ .p-layout a:not(:last-child) {
+        margin: 10px 14px;
+        display: inline-block;
+        font-weight: 500;
+        cursor: pointer;
+        user-select: none;
+        position: relative;
+        transition: color 0.3s;
+        color: @theme;
+        font-size: 16px;
+      }
+      & /deep/ .p-layout a:last-child {
+        position: relative;
+        top: -5px;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+        -ms-flex-align: center;
+        align-items: center;
+        height: 22px;
+        padding: 0 9px;
+      }
+      & /deep/ .p-layout a:last-child::before,
+      & /deep/ .p-layout a:last-child::after {
+        content: "";
+        display: inline-block;
+        will-change: transform;
+        transition: transform 0.3s;
+      }
+
+      & /deep/ .p-layout a:not(:last-child).active::after,
+      & /deep/ .p-layout a:not(:last-child).active,
+      & /deep/ .p-layout a:not(:last-child):hover,
+      & /deep/ .p-layout a:not(:last-child):hover::after {
+        color: @sub-theme;
+        transform: scaleX(1);
+        text-align: center;
+      }
+
+      & /deep/ .p-layout a:not(:last-child).active{
+        position: relative;
+        width: 29px;
+        font-size: 14px;
+          &::after{
+          position: absolute;
+          bottom: -2px;
+          right: 0;
+          content: '';
+          width: 100%;
+          height: 40px;
+          background: url('@{cdn}page-active.png') no-repeat center center;
+          z-index: -1;
+        }
+      }
+    }
+  }
+  .qihuan{
+    position: fixed;
+    right: 250px;
+  }
+}
 </style>

sh_museum/src/pages/index/index.vue

@@ -1,19 +1,30 @@
 <template>
-  <div class="layout" @mousewheel.stop>
-    <bg :canvasWidth='width' :canvasHeight='height' class="xlz-bg"/>
+  <div class="wrapper">
+    <div class="layout" @mousewheel.stop  v-if="!isMobile">
+      <bg :canvasWidth='width' :canvasHeight='height' class="xlz-bg"/>
+    </div>
+    <div class="mobileLayout">
+      <img class="bg" :src="`${$cdn}images/mobile/home_bg.png`" alt="">
+      <img class="logo" :src="`${$cdn}images/k.png`" alt="">
+      <img class="search-bar" :src="`${$cdn}images/mobile/home_search_bar.png`" alt="" @click="$router.push({path:'/search'})">
+    </div>
   </div>
 </template>
 <script>
 import bg from '@/components/background'
+import browser from '@/utils/browser.js'
+
 let height = window.innerHeight + 10
 window.onresize = ()=>{
   height = window.innerHeight + 10
 }
 export default {
-  components:{bg},
+  components:{
+    bg
+  },
   data(){
     return {
-     
+      isMobile: browser.mobile
     }
   },
   computed:{
@@ -31,6 +42,35 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.wrapper {
+  width: 100%;
+  height: 100%;
+}
+.mobileLayout {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  bottom: 10vh;
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+  .logo {
+    position: fixed;
+    top: 5vw;
+    left: 5vw;
+    width: 40%;
+    z-index: 100;
+  }
+  .search-bar {
+    position: fixed;
+    top: 5vw;
+    right: 5vw;
+    width: 30%;
+    z-index: 100;
+  }
+}
 .layout{
   position: relative;
   z-index: 9;

sh_museum/src/pages/layout/aside.vue

@@ -1,25 +1,56 @@
 <template>
-  <div class="layout">
-    <img class="bg" :src="`${$cdn}images/aside_bg.jpg`" alt="">
-    <div class="search-con" @click="$router.push({path:'/search'})">
-      <!-- <input placeholder="" type="text"> -->
+  <div>
+    <!-- desktop -->
+    <div class="layout" v-if="!isMobile">
+      <img class="bg" :src="`${$cdn}images/aside_bg.jpg`" alt="">
+      <div class="search-con" @click="$router.push({path:'/search'})">
+        <!-- <input placeholder="" type="text"> -->
+        <div>部件故事</div>
+        <img :src="`${$cdn}images/a-search.png`" alt="">
+      </div>
+      <ul class="aside">
+        <li :class="{active:item.id===activeIdx}" v-for="(item,i) in asdie" :key="i" @click="handleItem(item)" >
+          <sequence :img="`${$cdn}images/frame/${item.img}.png`" :name = "item.name" />
+        </li>
+      </ul>
+      <div class="lyb" @click="$message()">
+        <img :src="`${$cdn}images/icon_index_nav_guestbook@2x.png`" alt="">
+        <span>留言板</span>
+      </div>
+    </div>
+
+    <!-- mobile -->
+
+    <!-- <div class="search-con" @click="$router.push({path:'/search'})" v-if="isMobile">
+      
       <div>部件故事</div>
       <img :src="`${$cdn}images/a-search.png`" alt="">
-    </div>
-    <ul class="aside">
-      <li :class="{active:item.id===activeIdx}" v-for="(item,i) in asdie" :key="i" @click="handleItem(item)" >
-        <sequence :img="`${$cdn}images/frame/${item.img}.png`" :name = "item.name" />
-      </li>
-    </ul>
-    <div class="lyb" @click="$message()">
-      <img :src="`${$cdn}images/icon_index_nav_guestbook@2x.png`" alt="">
-      <span>留言板</span>
+    </div> -->
+
+    <div class="mobileLayout" v-if="isMobile">
+
+      <img class="bg" :src="`${$cdn}images/mobile/home_menu.png`" alt="">
+
+      
+
+      <ul class="aside">
+        <li><img :src="`${$cdn}images/mobile/home_btn_video.png`" @click="$router.push({path:'/video'})"></li>
+        <li><img :src="`${$cdn}images/mobile/home_btn_horse.png`" @click="$router.push({path:'floorlist/%5Bobject%20Object%5D'})"></li>
+        <li><img :src="`${$cdn}images/mobile/home_btn_history.png`" @click="$router.push({path:'/tunnel'})"></li>
+        <li><img :src="`${$cdn}images/mobile/home_btn_catalog.png`" @click="$router.push({path:'/list'})"></li>
+        <li><img :src="`${$cdn}images/mobile/home_btn_contact.png`" @click="$message()"></li>
+      </ul>
     </div>
   </div>
 </template>
 
+
+
+
+
 <script>
 import sequence from '@/components/sequence'
+import browser from '@/utils/browser.js'
 
   let asdie = [
     {
@@ -53,7 +84,8 @@ export default {
   },
   data(){
     return {
-      asdie
+      asdie,
+      isMobile: browser.mobile
     }
   },
   computed:{
@@ -70,6 +102,9 @@ export default {
       this.$hideBroadcast()
       this.$router.push({path:item.path})
       this.activeIdx = item.id
+    },
+    mobileHandleClick(path) {
+      this.$router.push({path:path})
     }
   }
 }
@@ -80,6 +115,72 @@ input::placeholder {
     color: #F5EDE2 !important;
 }
 
+.mobileLayout {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  height: 10vh;
+  width: 100vw;
+  background: #fff;
+  box-shadow: -5px 0 10px rgba(0, 0, 0, 0.5);
+  color: #fff;
+  z-index: 99;
+  .bg {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    z-index: -1;
+  }
+
+.search-con{
+    border: 2px solid @sub-theme;
+    border-radius: 28px;
+    width: 80%;
+    margin: 20px auto;
+    position: relative;
+    padding-left: 10px;
+    cursor: pointer;
+    >div{
+      border: none;
+      background: none;
+      line-height: @inputH;
+      height: @inputH;
+      width: 90%;
+      color: #F5EDE2 ;
+      vertical-align: middle;
+      color: #fff;
+    }
+    img{
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 6px;
+    }
+  }
+
+  .aside {
+    list-style: none;
+    display: flex;
+    width: 100vw;
+    height: 10vh;
+    align-items: center;
+    justify-content: space-between;
+
+    li {
+      display: flex;
+      
+
+      img {
+        width: 16vw;
+        height: auto;
+        padding: 10px 5px 5px 5px;
+      }
+    }
+  }
+}
+
 .layout{
   position: fixed;
   right: 0;
@@ -159,6 +260,28 @@ input::placeholder {
   }
 }
 
+
+
+// @media screen and (max-width: 500px) {
+// .layout{
+//   position: fixed;
+//   left: 0;
+//   bottom: 100px;
+//   height: 100px;
+//   width: 100%;
+//   background: #fff;
+//   /*box-shadow: -5px 0 10px rgba(0, 0, 0, 0.5);*/
+//   color: #fff;
+//   z-index: 999;
+
+//     .aside{
+//       li{
+//         margin: 30px auto;
+//       }
+//     }
+//   }
+// }
+
 @media screen and (max-width: 1400px) {
 .layout{
     .aside{

sh_museum/src/pages/layout/home.vue

@@ -1,14 +1,24 @@
 <template>
-  <div class="layout"  @mousemove="handleMouseMove">
-    <img class="bg" :src="`${$cdn}images/bg.jpg`" alt="">
-    <video class="bg" :src="`${$cdn}video/bg_video.mp4`" muted autoplay loop></video>
-    <bg :moveX='moveX'/>
-    <router-view/>
+  <div class="wrapper">
+    <div class="layout"  @mousemove="handleMouseMove" v-if="!isMobile">
+      <img class="bg" :src="`${$cdn}images/bg.jpg`" alt="">
+      <video class="bg" :src="`${$cdn}video/bg_video.mp4`" muted autoplay loop></video>
+      <bg :moveX='moveX'/>
+      <router-view/>
+    </div>
+
+    <div class="mobileLayout" v-if="isMobile">
+      <img class="bg" :src="`${$cdn}images/mobile/default_bg.png`" alt="">
+      
+      <router-view/>
+    </div>
   </div>
 </template>
 
 <script>
 import bg from '@/components/bg'
+import browser from '@/utils/browser.js'
+
 // import bg from '@/components/background'
 
 function fixIE(event) {
@@ -33,7 +43,8 @@ export default {
   },
   data(){
     return{
-      moveX:0
+      moveX:0,
+      isMobile: browser.mobile
     }
   },
   methods:{
@@ -47,6 +58,23 @@ export default {
 
 
 <style lang="less" scoped>
+.wrapper {
+  width: 100%;
+  height: 100%;
+}
+.mobileLayout {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  z-index:1;
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+  
+}
 .layout{
   width: 100%;
   height: 100%;

sh_museum/src/pages/list/index.vue

@@ -1,79 +1,170 @@
 <template>
-  <div class="layout">
-    <div class="list-con">
-      <div class="l-h">
-        <img :src="`${$cdn}images/icon-story.png`" alt="" />
-        <p>部件赏析</p>
-      </div>
-      <div class="l-type">
-        <div class="louti">
-          <span class="txt-bold">楼体：</span>
-          <ul>
-            <li
-              :class="{ active: item.id === l_active }"
-              v-for="(item, i) in louti"
-              @click="l_active = item.id"
-              :key="i"
-            >
-              {{ item.name }}
-            </li>
-          </ul>
+  <div class="wrapper">
+    <div class="mobileLayout" v-if="isMobile">
+      <img class="back-icon" @click="$router.push({path:'/'})" :src="`${$cdn}images/back-icon.png`" alt="">
+      <div class="list-con">
+        <div class="l-h">
+          <img :src="`${$cdn}images/icon-story.png`" alt="" />
+          <p>部件赏析</p>
         </div>
-        <div class="area">
-          <span class="txt-bold">区域：</span>
-          <ul>
-            <li
-              :class="{ active: item.id === a_active }"
-              v-for="(item, i) in area"
-              @click="a_active = item.id"
-              :key="i"
-            >
-              {{ item.name }}
-            </li>
-          </ul>
+        <div class="l-type">
+
+
+
+          <div class="louti">
+            <span class="txt-bold" id="label-louti" @click="loutiVisible = !loutiVisible">楼体 <svg viewBox='0 0 140 140' width='12' height='12' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg></span>
+            <div class="select-box" id="select-louti" v-if="loutiVisible">
+              <ul>
+                <li
+                  :class="{ active: item.id === l_active }"
+                  v-for="(item, i) in louti"
+                  @click="l_active = item.id; loutiVisible = false"
+                  :key="i"
+                >
+                  {{ item.name }}
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <div class="area">
+            <span class="txt-bold" id="label-area" @click="areaVisible = !areaVisible">区域 <svg viewBox='0 0 140 140' width='12' height='12' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg></span>
+            <div class="select-box" id="select-area" v-if="areaVisible">
+              <ul>
+                <li
+                  :class="{ active: item.id === a_active }"
+                  v-for="(item, i) in area"
+                  @click="a_active = item.id; areaVisible = false"
+                  :key="i"
+                >
+                  {{ item.name }}
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <div class="types">
+            <span class="txt-bold" id="label-types" @click="typesVisible = !typesVisible">类型 <svg viewBox='0 0 140 140' width='12' height='12' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg></span>
+            <div class="select-box" id="select-types" v-if="typesVisible">
+              <ul>
+                <li
+                  :class="{ active: item.id == t_active }"
+                  @click="t_active = item.id; typesVisible = false"
+                  v-for="(item, i) in types"
+                  :key="i"
+                >
+                  {{ item.name }}
+                </li>
+              </ul>
+            </div>
+          </div>
+
+
+
         </div>
-        <div class="types">
-          <span class="txt-bold">类型：</span>
-          <ul>
-            <li
-              :class="{ active: item.id == t_active }"
-              @click="t_active = item.id"
-              v-for="(item, i) in types"
-              :key="i"
-            >
-              {{ item.name }}
-            </li>
-          </ul>
+        <div class="l-con">
+          <template  v-if="list.length>0">
+            <Card @handleItem="handleItem(item)" v-for="(item, i) in list" :item="item" :key="i" />
+          </template>
+          <template v-else>
+            <div class="no-result">
+              <img :src="`${$cdn}images/search-icon.png`" alt />
+              <span>暂时没有内容呢~</span>
+            </div>
+          </template>
         </div>
+        <!-- <div class="paging" v-if="total" :class="{ pagingshow: total }">
+          <Paging
+            @clickHandle="pageChange"
+            :current="currentPage"
+            :total="total"
+            :equable="pageSize"
+          />
+        </div> -->
       </div>
-      <div class="l-con">
-        <template  v-if="list.length>0">
-          <Card @handleItem="handleItem(item)" v-for="(item, i) in list" :item="item" :key="i" />
-        </template>
-        <template v-else>
-          <div class="no-result">
-            <img :src="`${$cdn}images/search-icon.png`" alt />
-            <span>暂时没有内容呢~</span>
+      <div class="qihuan" @click="$router.push({path:'/story'})">
+        <img :src="`${$cdn}images/qh-icon.png`" alt />
+        <p>海报模式</p>
+      </div>
+    </div>
+
+    <div class="layout"  v-if="!isMobile">
+      <div class="list-con">
+        <div class="l-h">
+          <img :src="`${$cdn}images/icon-story.png`" alt="" />
+          <p>部件赏析</p>
+        </div>
+        <div class="l-type">
+          <div class="louti">
+            <span class="txt-bold">楼体：</span>
+            <ul>
+              <li
+                :class="{ active: item.id === l_active }"
+                v-for="(item, i) in louti"
+                @click="l_active = item.id"
+                :key="i"
+              >
+                {{ item.name }}
+              </li>
+            </ul>
+          </div>
+          <div class="area">
+            <span class="txt-bold">区域：</span>
+            <ul>
+              <li
+                :class="{ active: item.id === a_active }"
+                v-for="(item, i) in area"
+                @click="a_active = item.id"
+                :key="i"
+              >
+                {{ item.name }}
+              </li>
+            </ul>
+          </div>
+          <div class="types">
+            <span class="txt-bold">类型：</span>
+            <ul>
+              <li
+                :class="{ active: item.id == t_active }"
+                @click="t_active = item.id"
+                v-for="(item, i) in types"
+                :key="i"
+              >
+                {{ item.name }}
+              </li>
+            </ul>
           </div>
-        </template>
+        </div>
+        <div class="l-con">
+          <template  v-if="list.length>0">
+            <Card @handleItem="handleItem(item)" v-for="(item, i) in list" :item="item" :key="i" />
+          </template>
+          <template v-else>
+            <div class="no-result">
+              <img :src="`${$cdn}images/search-icon.png`" alt />
+              <span>暂时没有内容呢~</span>
+            </div>
+          </template>
+        </div>
+        <div class="paging" v-if="total" :class="{ pagingshow: total }">
+          <Paging
+            @clickHandle="pageChange"
+            :current="currentPage"
+            :total="total"
+            :equable="pageSize"
+          />
+        </div>
       </div>
-      <div class="paging" v-if="total" :class="{ pagingshow: total }">
-        <Paging
-          @clickHandle="pageChange"
-          :current="currentPage"
-          :total="total"
-          :equable="pageSize"
-        />
+      <div class="qihuan" @click="$router.push({path:'/story'})">
+        <img :src="`${$cdn}images/qh-icon.png`" alt />
+        <p>海报模式</p>
       </div>
     </div>
-    <div class="qihuan" @click="$router.push({path:'/story'})">
-      <img :src="`${$cdn}images/qh-icon.png`" alt />
-      <p>海报模式</p>
-    </div>
   </div>
 </template>
 
 <script>
+import browser from "@/utils/browser.js";
 import Paging from "@/components/paging";
 import Card from "@/components/card";
 
@@ -153,6 +244,7 @@ export default {
   },
   data() {
     return {
+      isMobile: browser.mobile,
       area,
       types:[],
       list,
@@ -163,7 +255,10 @@ export default {
       total: 100,
       pageSize: 8,
       currentPage: 1,
-      type:'part'
+      type:'part',
+      loutiVisible: false,
+      areaVisible: false,
+      typesVisible: false
     };
   },
   methods: {
@@ -234,6 +329,184 @@ export default {
 <style lang="less" scoped>
 @import '../../assets/css/globalVars.less';
 
+.wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.mobileLayout {
+  width: 100%;
+  position: relative;
+  .back-icon {
+    position: fixed;
+    top: 40px;
+    left: 20px;
+  }
+  .list-con {
+    width: 100%;
+    padding-top: 5vh;
+    text-align: center;
+    .l-h {
+      color: @theme;
+      font-family: "SY-bold";
+      font-weight: bolder;
+      font-size: 0;
+      img {
+        width: 110px;
+      }
+      p {
+        font-size: 32px;
+      }
+    }
+    .l-type {
+      text-align: left;
+      width: 50%;
+      margin: 20px 5vw 0;
+      display: flex;
+      justify-content: space-between;
+      .area,
+      .louti,
+      .types {
+        margin-bottom: 20px;
+        display: flex;
+        align-items: baseline;
+        .select-box {
+          position: fixed;
+          background-color: #f5ede2;
+          border-radius: 8px;
+          z-index: 10;
+          ul {
+            display: block;
+            font-size: 0;
+            li {
+              display: block;
+              padding: 2px 6px;
+              // margin: 0 6px;
+              cursor: pointer;
+              text-align: left;
+              color: #382e2c;
+              font-size: 16px;
+            }
+            .active {
+              background: @theme;
+              color: #c9a27b;
+            }
+          }
+        }
+        #label-louti {
+          position: fixed;
+          top: 18vh;
+          left: 5vw;
+        }
+        #label-area {
+          position: fixed;
+          top: 18vh;
+          left: 25vw;
+        }
+        #label-types {
+          position: fixed;
+          top: 18vh;
+          left: 45vw;
+        }
+        #select-louti {
+          top: 21vh;
+          left: 5vw;
+        }
+        #select-area {
+          top: 21vh;
+          left: 25vw;
+        }
+        #select-types {
+          top: 21vh;
+          left: 45vw;
+        }
+      }
+    }
+    .l-con {
+      position: fixed;
+      top: 25vh;
+      left: 5vw;
+      width: 93vw;
+      height: 65vh;
+      padding: 0;
+      box-sizing: border-box;
+      text-align: left;
+      font-size: 0;
+      overflow-y: scroll;
+    }
+    .paging {
+      // border-left: #e5e5e5 1px solid;
+      height: 100%;
+      margin-bottom: 40px;
+      transition: all 0.4s ease;
+      & /deep/ .p-layout {
+        text-align: center;
+        margin-top: 10px;
+      }
+      & /deep/ .p-layout a:not(:last-child) {
+        margin: 10px 14px;
+        display: inline-block;
+        font-weight: 500;
+        cursor: pointer;
+        user-select: none;
+        position: relative;
+        transition: color 0.3s;
+        color: @theme;
+        font-size: 16px;
+      }
+      & /deep/ .p-layout a:last-child {
+        position: relative;
+        top: -5px;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+        -ms-flex-align: center;
+        align-items: center;
+        height: 22px;
+        padding: 0 9px;
+      }
+      & /deep/ .p-layout a:last-child::before,
+      & /deep/ .p-layout a:last-child::after {
+        content: "";
+        display: inline-block;
+        will-change: transform;
+        transition: transform 0.3s;
+      }
+
+      & /deep/ .p-layout a:not(:last-child).active::after,
+      & /deep/ .p-layout a:not(:last-child).active,
+      & /deep/ .p-layout a:not(:last-child):hover,
+      & /deep/ .p-layout a:not(:last-child):hover::after {
+        color: @sub-theme;
+        transform: scaleX(1);
+        text-align: center;
+      }
+
+      & /deep/ .p-layout a:not(:last-child).active{
+        position: relative;
+        width: 29px;
+        font-size: 14px;
+          &::after{
+          position: absolute;
+          bottom: -2px;
+          right: 0;
+          content: '';
+          width: 100%;
+          height: 40px;
+          background: url('@{cdn}page-active.png') no-repeat center center;
+          z-index: -1;
+        }
+      }
+    }
+  }
+  .qihuan{
+    position: fixed;
+    right: 250px;
+  }
+}
+
 .layout {
   width: calc(100% - 200px);
   position: relative;
@@ -363,7 +636,7 @@ export default {
   }
 }
 
-@media screen and (max-width: 1400px) {
+@media screen and (min-width: 500px) and (max-width: 1400px) {
 .layout{
     .list-con{
        .l-type {
@@ -403,4 +676,18 @@ export default {
     }
   }
 }
+
+@media screen and (max-width: 500px) {
+  .item {
+    width: 42.4vw;
+    margin-right: 5vw;
+    margin-bottom: 5vw;
+    &:nth-of-type(2n) {
+      margin-right: 0;
+    }
+    // &:nth-of-type(4n){
+    //   margin-right: @margin;
+    // }
+  }
+}
 </style>

sh_museum/src/pages/parts/index.vue

@@ -1,41 +1,80 @@
 <template>
-  <div class="layout">
-    <div class="p-con">
-      <div class="p-detail">
-        <div class="p-title" ref="ptil">
-          <span>{{activeItem.name}}</span>
-        </div>
-        <div class="p-img">
-          <div class="img-con img-k">
-            <template v-if="activeItem&&activeItem.displayModel === 2">
-              <img :src="activeItem&&activeItem.ico" alt="">
-            </template>
-            <template v-else>
-              <iframe :src="activeItem&&activeItem.webSite" frameborder="0"></iframe>
-            </template>
-            <img class="full-btn" @click="full=true" :src="`${$cdn}images/full-btn.png`" alt="">
+  <div class="wrapper">
+    <div class="mobileLayout" v-if="isMobile">
+      <img class="back-icon" @click="$router.push({path:'/'})" :src="`${$cdn}images/back-icon.png`" alt="">
+      <div class="p-con">
+        <div class="p-detail">
+          <div class="p-title" ref="ptil">
+            <span>{{activeItem.name}}</span>
+          </div>
+          <div class="p-img">
+            <div class="img-con">
+              <template v-if="activeItem&&activeItem.displayModel === 2">
+                <img :src="activeItem&&activeItem.ico" alt="">
+              </template>
+              <template v-else>
+                <iframe :src="activeItem&&activeItem.webSite" frameborder="0"></iframe>
+              </template>
+              <!-- <img class="full-btn" @click="full=true" :src="`${$cdn}images/full-btn.png`" alt=""> -->
+            </div>
+            <slide v-if="list.length>0" @activeItem="handleItem" :list='list' :idx='list.length>3 ? 2 : 0' class="sld"/>
+          </div>
+          <div class="p-txt" :style="{height:380+'px'}">
+            <p>{{activeItem.name}}</p>
+            <p v-for="(item,i) in sliceStr(activeItem.content)" :key="i" v-html="item"></p>
           </div>
-          <slide v-if="list.length>0" @activeItem="handleItem" :list='list' :idx='list.length>3 ? 2 : 0' class="sld"/>
-        </div>
-        <div class="p-txt" :style="{height:380+'px'}">
-          <p>{{activeItem.name}}</p>
-          <p v-for="(item,i) in sliceStr(activeItem.content)" :key="i" v-html="item"></p>
         </div>
       </div>
+      <div class="full" v-if="full">
+        <template v-if="activeItem&&activeItem.displayModel === 2">
+          <img :src="activeItem&&activeItem.ico" alt="">
+        </template>
+        <template v-else>
+          <iframe :src="activeItem&&activeItem.webSite" frameborder="0"></iframe>
+        </template>
+        <img class="full-btn" @click="full=false" :src="`${$cdn}images/close-full.png`" alt="">
+      </div>
     </div>
-    <div class="full" v-if="full">
-      <template v-if="activeItem&&activeItem.displayModel === 2">
-        <img :src="activeItem&&activeItem.ico" alt="">
-      </template>
-      <template v-else>
-        <iframe :src="activeItem&&activeItem.webSite" frameborder="0"></iframe>
-      </template>
-      <img class="full-btn" @click="full=false" :src="`${$cdn}images/close-full.png`" alt="">
+
+    <div class="layout" v-if="!isMobile">
+      <div class="p-con">
+        <div class="p-detail">
+          <div class="p-title" ref="ptil">
+            <span>{{activeItem.name}}</span>
+          </div>
+          <div class="p-img">
+            <div class="img-con img-k">
+              <template v-if="activeItem&&activeItem.displayModel === 2">
+                <img :src="activeItem&&activeItem.ico" alt="">
+              </template>
+              <template v-else>
+                <iframe :src="activeItem&&activeItem.webSite" frameborder="0"></iframe>
+              </template>
+              <img class="full-btn" @click="full=true" :src="`${$cdn}images/full-btn.png`" alt="">
+            </div>
+            <slide v-if="list.length>0" @activeItem="handleItem" :list='list' :idx='list.length>3 ? 2 : 0' class="sld"/>
+          </div>
+          <div class="p-txt" :style="{height:380+'px'}">
+            <p>{{activeItem.name}}</p>
+            <p v-for="(item,i) in sliceStr(activeItem.content)" :key="i" v-html="item"></p>
+          </div>
+        </div>
+      </div>
+      <div class="full" v-if="full">
+        <template v-if="activeItem&&activeItem.displayModel === 2">
+          <img :src="activeItem&&activeItem.ico" alt="">
+        </template>
+        <template v-else>
+          <iframe :src="activeItem&&activeItem.webSite" frameborder="0"></iframe>
+        </template>
+        <img class="full-btn" @click="full=false" :src="`${$cdn}images/close-full.png`" alt="">
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import browser from "@/utils/browser.js";
 import slide from '@/components/slide'
 
 export default {
@@ -48,6 +87,7 @@ export default {
       full:false,
       list:[],
       activeItem:'',
+      isMobile: browser.mobile
     }
   },
   mounted(){
@@ -90,6 +130,145 @@ export default {
 <style lang="less" scoped>
 @import '../../assets/css/globalVars.less';
 @liTop:80px;
+
+.mobileLayout{
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  .back-icon {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+  }
+  .p-con{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    
+    .p-detail{
+      width: 100%;
+      height: 100%;
+      // display: flex;
+      // align-items: flex-start;
+      // justify-content: space-around;
+      .p-title{
+        position: fixed;
+        top: 10vh;
+        left: 50vw;
+        transform: translate(-50%,0%);
+        text-align: center;
+        background: url('../../assets/images/mobile/title_bg.png') no-repeat;
+        background-size:100% 100%;
+        font-size: 0;
+        // margin-top: @liTop;
+        span{
+          display: inline-block;
+          // writing-mode: vertical-rl;
+          letter-spacing: 4px;
+          font-size: 30px;
+          padding: 10px 20px;
+          color: #F5EDE2;
+          text-shadow: -2px 2px 0 #382E2C;
+        }
+      }
+      .p-img{
+        position: fixed;
+        top: 30vh;
+        left: 50vw;
+        transform: translate(-50%,0%);
+        width: 80%;
+        .img-con{
+          // position: relative;
+          text-align: center;
+          font-size: 0;
+          width: 100%;
+          border: 6px solid @theme;
+          box-sizing: border-box;
+          iframe,img{
+            width: 100%;
+            height: 250px;
+          }
+        
+          .full-btn{
+            width: 50px;
+            height: auto;
+            position: absolute;
+            right: 40px;
+            bottom: 30px;
+            cursor: pointer;
+            z-index: 99;
+          }
+        }
+        
+      }
+      .p-txt{
+        margin-top: @liTop;
+        // writing-mode: vertical-rl;
+        width: 80vw;
+        position: fixed;
+        top: 60vh;
+        left: 10vw;
+        p{
+          letter-spacing: 4.5px;
+          color: #382E2C;
+          border-bottom: 1px solid @theme;
+          padding: 0 2px;
+          font-size: 80%;
+          &:first-of-type{
+            color: @theme;
+            border-bottom: 2px solid @theme;
+            padding: 0 4px;
+            letter-spacing: 10px;
+            font-weight: bold;
+          }
+          &:nth-of-type(2){
+            border-bottom: 2px solid @theme;
+          }
+          &:last-of-type{
+            display: inline-block;
+          }
+        }
+      }
+    }
+    .slide{
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      .sld{
+        width: 60%;
+      }
+    }
+  }
+  .full{
+    width: 100%;
+    height: 100%;
+    z-index: 9999;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    img{
+      width: 100%;
+    }
+    iframe{
+      width: 100%;
+      height: 100%;
+    }
+    .full-btn{
+      width: 50px;
+      position: absolute;
+      right: 40px;
+      bottom: 30px;
+      cursor: pointer;
+    }
+  }
+}
+
 .layout{
   width: 100%;
   height: 100%;

sh_museum/src/pages/result/index.vue

@@ -8,14 +8,14 @@
         <input :placeholder="$route.query.keyword" disabled type="text" />
         <img :src="`${$cdn}images/s-search.png`" alt />
       </div>
-      <ul class="txt-con">
+      <ul class="txt-con" v-if="!isMobile">
         <li @click="gotoResult(item)" v-for="(item,i) in keyword" :key="i">{{item}}</li>
       </ul>
       <template v-if="list.length>0">
         <div class="l-con">
           <Card @handleItem="handleItem(item)" v-for="(item, i) in list" :item="item" :key="i" />
         </div>
-        <div class="paging" :class="{ pagingshow: total }">
+        <div class="paging" :class="{ pagingshow: total }" v-if="!isMobile">
           <Paging
             @clickHandle="pageChange"
             :current="currentPage"
@@ -34,6 +34,7 @@
   </div>
 </template>
 <script>
+import browser from "@/utils/browser.js";
 import Card from "@/components/card";
 import Paging from "@/components/paging";
 
@@ -47,6 +48,7 @@ let keyword = [
 export default {
   data() {
     return {
+      isMobile: browser.mobile,
       keyword,
       active: "体育室木护壁",
       list:[],
@@ -256,4 +258,37 @@ input::placeholder {
     
   }
 }
+
+@media screen and (max-width: 500px) {
+  .layout {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    .ui-con {
+      position: fixed;
+      top: 10vh;
+      left: 50vw;
+      transform: translateX(-50%);
+      padding: 0;
+      .logo, .search-con{
+        width: 50vw;
+      }
+      .l-con {
+        position: fixed;
+        top: 25vh;
+        left: 5vw;
+        width: 93vw;
+        height: 55vh;
+        margin: 0;
+        overflow-y: scroll;
+      }
+      .no-result {
+        margin-top: 150px;
+      }
+    }
+  }
+  
+}
 </style>

sh_museum/src/pages/search/index.vue

@@ -1,14 +1,14 @@
 <template>
     <div class="layout">
       <div class="ui-con">
-        <div>
+        
           <img class="logo" :src="`${$cdn}images/k.png`" alt="">
-        </div>
+        
         <div class="search-con">
           <input v-model="keywordVal" @keydown.enter="gotoResult('')" :placeholder="defaultKey" type="text">
           <img @click="gotoResult('')" :src="`${$cdn}images/s-search.png`" alt="">
         </div>
-        <ul class="txt-con">
+        <ul class="txt-con" v-if="!isMobile">
           <li @click="gotoResult(item)" v-for="(item,i) in keyword" :key="i">
             {{item}}
           </li>
@@ -17,6 +17,8 @@
     </div>
 </template>
 <script>
+import browser from "@/utils/browser.js";
+
 let keyword = [
     '西楼外立面',
     '东楼',
@@ -28,7 +30,8 @@ export default {
         return {
            keyword,
            keywordVal:'',
-           defaultKey:'体育室木护壁'
+           defaultKey:'体育室木护壁',
+           isMobile: browser.mobile
         };
     },
     methods:{
@@ -118,4 +121,19 @@ input::placeholder {
     }
   }
 }
+
+@media screen and (max-width: 500px) {
+  .layout {
+    .ui-con {
+      position: fixed;
+      top: 25vh;
+      left: 50vw;
+      transform: translateX(-50%);
+      .logo, .search-con{
+        width: 50vw;
+      }
+    }
+  }
+  
+}
 </style>

sh_museum/src/pages/tunnel/index.vue

@@ -1,39 +1,91 @@
 <template>
-  <div class="layout">
-    <div class="video-con">
-      <video ref="tunnel" :src="`${$cdn}video/Final_OLD_web.mp4`" autoplay loop></video>
+  <div class="wrapper">
+    <div class="layout" v-if="!isMobile">
+      <div class="video-con">
+        <video ref="tunnel" :src="`${$cdn}video/Final_OLD_web.mp4`" autoplay loop></video>
+      </div>
+      <img v-if="showBtn" class="bofang" :src="`${$cdn}images/bofang.png`" alt="">
+    </div>
+
+    <div class="mobileLayout" v-if="isMobile">
+      <div class="video-con">
+        <img class="bg" :src="`${$cdn}images/mobile/default_bg.png`" alt="">
+        <video ref="tunnelMobile" :src="`${$cdn}video/mobile/shl2_mobile.mp4`" autoplay loop controls></video>
+      </div>
+      <img @click="$router.push({path:'/'})" class="bofangMobile" :src="`${$cdn}images/mobile/btn_back.png`" alt="">
     </div>
-    <img v-if="showBtn" class="bofang" @click="play" :src="`${$cdn}images/bofang.png`" alt="">
   </div>
 </template>
 
 <script>
-
+import browser from '@/utils/browser.js'
 export default {
   data(){
     return {
-      showBtn:false
+      showBtn:false,
+      isMobile: browser.mobile
     }
   },
   methods:{
     play(){
-      this.$refs.tunnel.play()
+      if(this.isMobile) {
+        this.$refs.tunnelMobile.play()
+      } else {
+        this.$refs.tunnel.play()
+      }
       this.showBtn = false
     }
   },
   mounted(){
-    this.$refs.tunnel.play()
-     this.$nextTick(()=>{
-      setTimeout(() => {
-        if (this.$refs.tunnel.paused) {
-          this.showBtn = true
-        }
-      });
-    })
+    if(this.isMobile) {
+      this.$refs.tunnelMobile.play()
+      this.$nextTick(()=>{
+        setTimeout(() => {
+          if (this.$refs.tunnelMobile.paused) {
+            this.showBtn = true
+          }
+        });
+      })
+    } else {
+      this.$refs.tunnel.play()
+      this.$nextTick(()=>{
+        setTimeout(() => {
+          if (this.$refs.tunnel.paused) {
+            this.showBtn = true
+          }
+        });
+      })
+    }
   }
 }
 </script>
 <style lang="less" scoped>
+.mobileLayout{
+  height: 100%;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  left: 0;
+  background: #000;
+  .video-con{
+    .bg {
+      position: fixed;
+      left: 0;
+      bottom: 10vh;
+      width: 100vw;
+      height: 90vh;
+    }
+    video{
+      width: 100%;
+      top: 50%;
+      left: 0;
+      transform: translate(0%,-50%);
+      z-index: 0;
+      position: fixed;
+      user-select: none;
+    }
+  }
+}
 .layout{
   height: 100%;
   position: fixed;
@@ -54,4 +106,12 @@ export default {
   }
   
 }
+.bofangMobile {
+  position: absolute;
+  left: 50%;
+  bottom: 20%;
+  width: 25vw;
+  transform: translate(-50%,0%);
+  cursor: pointer;
+}
 </style>

sh_museum/src/pages/video/index.vue

@@ -1,40 +1,105 @@
 <template>
-  <div class="layout">
-    <div class="video-con">
-      <video ref="videoM" :src="`${$cdn}video/Final_new_web.mp4`" autoplay loop></video>
+  <div class="wrapper">
+    <div class="layout" v-if="!isMobile">
+      <div class="video-con">
+        <video ref="videoM" :src="`${$cdn}video/Final_new_web.mp4`" autoplay loop></video>
+      </div>
+      <img v-if="showBtn" @click="play" class="bofang" :src="`${$cdn}images/bofang.png`" alt="">
+    </div>
+
+    <div class="mobileLayout"  v-if="isMobile">
+      <i-header class="header"></i-header>
+      <div class="video-con">
+        <img class="bg" :src="`${$cdn}images/mobile/default_bg.png`" alt="">
+        <video ref="videoMobile" :src="`${$cdn}video/mobile/shl1_mobile.mp4`" autoplay loop controls></video>
+      </div>
+      <img @click="$router.push({path:'/'})" class="bofangMobile" :src="`${$cdn}images/mobile/btn_back.png`" alt="">
     </div>
-    <img v-if="showBtn" @click="play" class="bofang" :src="`${$cdn}images/bofang.png`" alt="">
   </div>
 </template>
 
 <script>
+import browser from '@/utils/browser.js'
+import header from "@/pages/layout/header";
 
 export default {
+  components: {
+    'i-header':header
+  },
   data(){
     return {
-      showBtn:false
+      showBtn:false,
+      isMobile: browser.mobile
     }
   },
   methods:{
     play(){
-      this.$refs.videoM.play()
+      if(this.isMobile) {
+        this.$refs.videoMobile.play()
+      } else {
+        this.$refs.videoM.play()
+      }
       this.showBtn = false
     }
   },
   mounted(){
-    this.$refs.videoM.play()
-    this.$nextTick(()=>{
-      setTimeout(() => {
-        if (this.$refs.videoM.paused) {
-          this.showBtn = true
-        }
-      });
-    })
+    if(this.isMobile) {
+      this.$refs.videoMobile.play()
+      this.$nextTick(()=>{
+        setTimeout(() => {
+          if (this.$refs.videoMobile.paused) {
+            this.showBtn = true
+          }
+        });
+      })
+    } else {
+      this.$refs.videoM.play()
+      this.$nextTick(()=>{
+        setTimeout(() => {
+          if (this.$refs.videoM.paused) {
+            this.showBtn = true
+          }
+        });
+      })
+    }
+    
    
   }
 }
 </script>
 <style lang="less" scoped>
+.wrapper {
+  width: 100%;
+  height: 100%;
+}
+
+.mobileLayout{
+  height: 100%;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  left: 0;
+  background: #000;
+  z-index: 9;
+  .video-con{
+    .bg {
+      position: fixed;
+      left: 0;
+      bottom: 0vh;
+      width: 100vw;
+      height: 100vh;
+    }
+    video{
+      width: 100%;
+      top: 50%;
+      left: 0;
+      transform: translate(0%,-50%);
+      z-index: 0;
+      position: fixed;
+      user-select: none;
+    }
+  }
+}
 .layout{
   height: 100%;
   position: fixed;
@@ -54,4 +119,12 @@ export default {
     }
   }
 }
+.bofangMobile {
+  position: absolute;
+  left: 50%;
+  bottom: 20%;
+  width: 25vw;
+  transform: translate(-50%,0%);
+  cursor: pointer;
+}
 </style>

sh_museum/src/utils/browser.js

@@ -0,0 +1,29 @@
+function versions () {
+    var u = window.navigator.userAgent
+    return {
+      // IE内核
+      trident: u.indexOf('Trident') > -1,
+      // opera内核
+      presto: u.indexOf('Presto') > -1,
+      // 苹果、谷歌内核
+      webKit: u.indexOf('AppleWebKit') > -1,
+      // 火狐内核
+      gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') === -1,
+      // 是否为移动终端
+      mobile: /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent),
+      // ios终端
+      ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
+      // android终端或者uc浏览器
+      android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
+      // 是否为iPhone或者安卓QQ浏览器
+      iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,
+      // 是否为iPad
+      iPad: u.indexOf('iPad') > -1,
+      // 是否为web应用程序，没有头部与底部
+      webApp: u.indexOf('Safari') === -1,
+      // 是否为微信浏览器
+      weixin: ~u.indexOf('MicroMessenger')
+    }
+  }
+  
+  export default versions()