update

public/static/js/audio.min.1.0.4.js

@@ -4,7 +4,7 @@
  * 不支持audio的浏览器直接return
  */
 
-(function ($, window, document, undefined) {
+(function ($, window, document) {
   // 播放器样式 - 替换到css更改样式即可
 
   var onMobile = 'ontouchstart' in window,
@@ -90,6 +90,10 @@
         audioEle.addEventListener('ended', function () {
           $player.removeClass('player-playing').addClass('player-paused');
         });
+
+        audioEle.addEventListener('pause', function () {
+          $player.removeClass('player-playing').addClass('player-paused');
+        });
       }
 
       function bindPageEvents() {
@@ -105,6 +109,16 @@
 
         // 监听播放暂停按钮click
         $player.find('.play-pause-btn').on('click', function () {
+          Array.from($("video")).forEach((item) => {
+            if (!item.paused) {
+              item.pause();
+            }
+          });
+          Array.from($("audio")).forEach((item) => {
+            if (!item.paused) {
+              item.pause();
+            }
+          });
           if ($player.hasClass('player-playing')) {
             $player.removeClass('player-playing').addClass('player-paused');
             audioEle.pause();

src/components/Carousel.vue

@@ -5,8 +5,8 @@
       <swiper-slide v-for="(item, i) in data" :key="i">
         <div>
           <img class="real" :src="item.img" alt="" v-if="item.type == 'img'" />
-          <div v-else class="video">
-            <video controls :src="item.img"></video>
+          <div :key="i" v-else class="video">
+            <video ref="xvideo" @play="stopAllAudio" :poster="require('@/assets/images/post.jpg')" controls :src="item.img"></video>
           </div>
         </div>
       </swiper-slide>
@@ -35,7 +35,7 @@ export default {
       }, 5000);
     },
     slide(name) {
-      this.reInterval();
+      this.$refs.xvideo[0].pause()
       this.swiper[name]();
     },
     goto(item) {

src/components/jieshuo.vue

@@ -4,8 +4,11 @@
       <span :class="{ active: idx == 'female' }" @click="idx = 'female'">解说：女声</span>
       <span :class="{ active: idx == 'male' }" @click="idx = 'male'">解说：男声</span>
     </div>
-    <div>
-      <audio preload="auto" :src="`${$cdn}/audio/${idx}/${bgm}.mp3`"></audio>
+    <div v-show="idx == 'female'">
+      <audio :key="'female'+bgm" preload="auto" :src="`${$cdn}/audio/female/${bgm}.mp3`"></audio>
+    </div>
+    <div v-show="idx == 'male'">
+      <audio :key="'male'+bgm" preload="auto" :src="`${$cdn}/audio/male/${bgm}.mp3`"></audio>
     </div>
   </div>
 </template>
@@ -14,9 +17,23 @@
 export default {
   data() {
     return {
-      idx: 'female',
+      idx: 'male',
     };
   },
+  watch:{
+    idx(){
+      this.stopAllAudio()
+    }
+  },
+  methods:{
+    stopAllAudio(){
+      Array.from($("audio")).forEach((item) => {
+        if (!item.paused) {
+          item.pause();
+        }
+      });
+    },
+  },
   props: ["showJiesuo", "isTheme",'bgm'],
   mounted() {},
 };

src/components/msection.vue

@@ -12,7 +12,7 @@
           <p :style="{color:isTheme?'#444':'#fff'}" v-for="(item, i) in txtArr" :key="i" v-html="item"></p>
         </div>
       </div>
-      <jieshuo v-if="!hideJiesuo" :isTheme='isTheme'/>
+      <jieshuo v-if="!hideJiesuo" :bgm="bgm" :isTheme='isTheme'/>
       <mbslide :hideSlide="hideSlide" v-if="data.length>0" :list="data" :isTheme='isTheme'/>
       <!-- <bm-slide :isTheme='isTheme' v-if="data.length>0"  :idx='activeIdx' @activeItem="handleItem" :list='data'  class="sld-con"/> -->
 
@@ -76,6 +76,10 @@ export default {
       type:String,
       default:''
     },
+    bgm: {
+      type: String,
+      default: "",
+    },
     isTheme:{
       type:Boolean,
       default:false

src/components/popupLayout/Prompt.vue

@@ -0,0 +1,173 @@
+<template>
+    <popup ref="Message" :show="show">
+        <div class="ui-message ui-message-confirm"  :style="{backgroundImage:`url(${require(`@/assets/images/${isMobile?'mobile_':''}pwd_bg.png`)})`}">
+            <div class="ui-message-main">
+                <div class="uc-title">请输入密码</div>
+                <input v-model="password" @keydown.enter="onOk" type="text">
+            </div>
+            <div class="ui-message-footer">
+                <button class="ui-button submit"  :style="{backgroundImage:`url(${require('@/assets/images/btn_primary.png')})`}" @click="onOk">确定</button>
+                <button class="ui-button cancel"  :style="{backgroundImage:`url(${require('@/assets/images/btn_default.png')})`}" @click="onNo">取消</button>
+            </div>
+        </div>
+    </popup>
+</template>
+<script>
+import Popup from "./popup";
+import browser from '@/config/browser.js'
+
+export default {
+    name: "ui-confirm",
+    components: {
+        Popup
+    },
+    data() {
+        return {
+            isMobile:browser.mobile,
+            show: false,
+            duration: 0,
+            title: "提示",
+            tips: "",
+            content: "",
+            okText: "确定",
+            noText: "放弃",
+            ok: null,
+            no: null,
+            password:''
+        };
+    },
+    methods: {
+        onOk() {
+            if (!this.ok) {
+                return;
+            }
+
+            this.ok(this.password)
+            this.onClose();
+        },
+        onNo() {
+            this.no && this.no();
+            this.onClose();
+        },
+        onClose() {
+            setTimeout(() => {
+                this.show = false;
+                document.body.removeChild(this.$el);
+                this.$destroy();
+            }, this.duration);
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.ui-message{
+    width: 718px;
+    height: 370px;
+    background-size: 100% auto;
+    background-position: 0 0;
+    position: relative;
+    background-repeat: no-repeat;
+    .ui-message-main{
+        position: absolute;
+        top: 40%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+        width: 80%;
+        margin: 0 auto;
+        .uc-title{
+            color: rgba(158, 158, 158, 1);
+            margin-bottom: 20px;
+        }
+        >input{
+            background-color: #fff;
+            border: 1px solid rgba(158, 158, 158, 1);
+            line-height: 50px;
+            height: 50px;
+            width: 100%;
+            font-size: 24px;
+            padding: 0 10px;
+        }
+    }
+    .ui-message-footer{
+        position: absolute;
+        bottom: 16%;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 100%;
+        text-align: center;
+        >button{
+            width: 128px;
+            line-height: 48px;
+            border: none;
+            margin: 0 30px;
+            font-size: 18px;
+            letter-spacing: 2px;
+            background-color: rgba(158, 158, 158, 0);
+            outline: none;
+        }
+        .submit{
+            color: rgba(245, 181, 95, 1);
+        }
+        .cancel{
+            color: rgba(158, 158, 158, 1);
+        }
+    }
+}
+
+@media screen and (max-width: 800px) {
+    .ui-message{
+    width: 90%;
+    min-height: 300px;
+    height: auto;
+    background-size: 100% 100%;
+    background-position: 0 0;
+    position: relative;
+    background-repeat: no-repeat;
+    .ui-message-main{
+        position: absolute;
+        top: 40%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+        width: 80%;
+        margin: 0 auto;
+        .uc-title{
+            color: rgba(158, 158, 158, 1);
+            margin-bottom: 20px;
+        }
+        >input{
+            background-color: #fff;
+            border: 1px solid rgba(158, 158, 158, 1);
+            line-height: 50px;
+            height: 50px;
+            width: 100%;
+            font-size: 20px;
+            padding: 0 10px;
+        }
+    }
+    .ui-message-footer{
+        bottom: 10%;
+        >button{
+            width: 30%;
+            line-height: 40px;
+            height: 40px;
+            border: none;
+            margin: 0 10px;
+            font-size: 16px;
+            letter-spacing: 2px;
+            background-color: rgba(158, 158, 158, 0);
+            outline: none;
+            text-align: center;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+        }
+        .submit{
+            color: rgba(245, 181, 95, 1);
+        }
+        .cancel{
+            color: rgba(158, 158, 158, 1);
+        }
+    }
+}
+}
+</style>

src/components/popupLayout/index.js

@@ -5,6 +5,7 @@ import UIConfirm from './Confirm.vue'
 import UILoading from './Loading.vue'
 import UIBroadcast from './Broadcast.vue'
 import UIMessage from './Message.vue'
+import UIPrompt from './Prompt.vue'
 
 
 
@@ -15,6 +16,7 @@ const Confirm = Vue.extend(UIConfirm)
 const Loading = Vue.extend(UILoading)
 const Broadcast = Vue.extend(UIBroadcast)
 const Message = Vue.extend(UIMessage)
+const Prompt = Vue.extend(UIPrompt)
 
 
 
@@ -114,3 +116,20 @@ export function $hideBroadcast() {
         broadcastInstance = ''
     }
 }
+
+
+
+
+export function $showPrompt(data={}) {
+    let promptInstance = ''
+    promptInstance = new Prompt({
+        data
+    }).$mount()
+
+    document.body.appendChild(promptInstance.$el)
+
+    Vue.nextTick(() => {
+        promptInstance.show = true
+    })
+}
+

src/components/swCard/index.vue

@@ -3,7 +3,6 @@
     <swiper
       ref="listSwiper"
       class="swiper-wrapper swiper-wrapper-n"
-      :options="swiperOption"
     >
       <swiper-slide
         class="swiper-slide"
@@ -12,23 +11,18 @@
       >
         <div>
           <img class="real" :src="item.img" alt="" v-if="item.type == 'img'" />
-          <div v-else class="video">
-            <video  controls autoplay :src="item.img"></video>
+          <div :key="index" v-else class="video">
+            <video @play="stopAllAudio" ref="xvideo" :poster="require('@/assets/images/post.jpg')" controls :src="item.img"></video>
           </div>
         </div>
       </swiper-slide>
       <div class="swiper-pagination" slot="pagination"></div>
     </swiper>
 
-    <ul class="page">
-      <li v-for="(item, index) in cards"  :key="index">
-        <span :class="{active:index === activeIdx }"></span>
-      </li>
-    </ul>
   </div>
 </template>
 <script>
-import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
+import { Swiper, SwiperSlide } from "vue-awesome-swiper";
 import "swiper/css/swiper.css";
 
 export default {

src/config/videodata.js

@@ -20,17 +20,6 @@ const data = [
     video: $cdn + "/video/erzi.mp4",
     keyword: '',
     date: '1932年12月-1935年4月'
-  },
-  
-  {
-    id: 3,
-    name: '动态地图', 
-    describe: '视频介绍视频介绍视频介绍视频介绍',
-    content: '内容',
-    type:'类型',
-    video: $cdn + "/video/ditu.mp4",
-    keyword: '',
-    date: '1932年12月-1935年4月'
   }
 ]
 

src/pages/index.js

@@ -2,7 +2,6 @@ import Vue from 'vue'
 import App from './index.vue'
 import vuex from 'vuex'
 
-import router from '@/router'
 import '@/assets/theme/theme.less'
 import {axios, serverName,orginLink} from '@/config/http'
 
@@ -12,12 +11,21 @@ import Viewer from 'v-viewer'
 import {
   $showBroadcast,
   $hideBroadcast,
+  $showPrompt
 } from '@/components/popupLayout'
 
 Vue.mixin({
   methods: {
     $showBroadcast,
-    $hideBroadcast
+    $hideBroadcast,
+    $showPrompt,
+    stopAllAudio(){
+      Array.from($("audio")).forEach((item) => {
+        if (!item.paused) {
+          item.pause();
+        }
+      });
+    }
   }
 })
 Vue.use(vuex)
@@ -42,7 +50,7 @@ Vue.prototype.$linear ={
 };
 
 new Vue({
-  router,
+  router:require('@/router').default,
   store: require('@/store').default,
   render: h => h(App)
 }).$mount('#app')

src/pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app" :class="`theme${theme}`">
+  <div id="app" :class="`themejuhong`">
     <!-- <Welcome @close="welcome = false" v-if="welcome"/> -->
 
     <layout/>

src/pages/mobile.js

@@ -2,8 +2,6 @@ import Vue from 'vue'
 import App from './mobile.vue'
 import vuex from 'vuex'
 
-import router from '@/router/mobile.js'
-
 import '@/assets/theme/theme.less'
 import {axios, serverName,orginLink} from '@/config/http'
 
@@ -13,12 +11,21 @@ import Viewer from 'v-viewer'
 import {
   $showBroadcast,
   $hideBroadcast,
+  $showPrompt
 } from '@/components/popupLayout'
 
 Vue.mixin({
   methods: {
     $showBroadcast,
-    $hideBroadcast
+    $hideBroadcast,
+    $showPrompt,
+    stopAllAudio(){
+      Array.from($("audio")).forEach((item) => {
+        if (!item.paused) {
+          item.pause();
+        }
+      });
+    }
   }
 })
 Vue.use(vuex)
@@ -43,7 +50,7 @@ Vue.prototype.$linear ={
 };
 
 new Vue({
-  router:router,
+  router:require('@/router/mobile.js').default,
   store: require('@/store').default,
   render: h => h(App)
 }).$mount('#app')

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import { Menu } from '../config/route.js'
 Vue.use(VueRouter)
+let vue = new Vue()
 const originalPush = VueRouter.prototype.push
 
 VueRouter.prototype.push = function push(location){
@@ -27,8 +28,34 @@ const router = new VueRouter({
 })
 
 router.beforeEach((to, from, next) => {
-  window.scrollTo(0, 0)
-  next()
+  if(to.name == 'spirit'){
+    let loopfn = ()=>{
+      let pwd = ''
+       vue.$showPrompt({
+        ok:data=>{
+          pwd = data
+          if (pwd == null) {
+            next(false)
+          }
+          else{
+            if (pwd == 'C81609') {
+              window.scrollTo(0, 0)
+              next()
+            }else{
+              alert('密码错误，请重新输入')
+              loopfn()
+            }
+          }
+        }
+      })
+        
+      }
+    loopfn()
+  } 
+  else {
+    window.scrollTo(0, 0)
+    next()
+  }
 })
 
 export default router

src/router/mobile.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import { Mobile } from '../config/route.js'
+let vue = new Vue()
 Vue.use(VueRouter)
 const originalPush = VueRouter.prototype.push
 
@@ -27,8 +28,34 @@ const router = new VueRouter({
 })
 
 router.beforeEach((to, from, next) => {
-  window.scrollTo(0, 0)
-  next()
+  if(to.name == 'spirit'){
+    let loopfn = ()=>{
+      let pwd = ''
+       vue.$showPrompt({
+        ok:data=>{
+          pwd = data
+          if (pwd == null) {
+            next(false)
+          }
+          else{
+            if (pwd == 'C81609') {
+              window.scrollTo(0, 0)
+              next()
+            }else{
+              alert('密码错误，请重新输入')
+              loopfn()
+            }
+          }
+        }
+      })
+        
+      }
+    loopfn()
+  } 
+  else {
+    window.scrollTo(0, 0)
+    next()
+  }
 })
 
 export default router

src/views/layout/header.vue

@@ -136,7 +136,7 @@ export default {
 
     navigateTo(item) {
       this.$router.push(item.link);
-      this.activeIdx = item.id;
+      // this.activeIdx = item.id;
     },
   },
   mounted() {

src/views/spirit/index.vue

@@ -64,15 +64,10 @@
 </template>
 
 <script>
-import mSidebar from "@/components/Sidebar";
-import Article from "@/components/Article";
 import data from "@/config/pdfdata.js";
 
 export default {
-  components: {
-    mSidebar,
-    Article,
-  },
+  
   data() {
     return {
       activeId: this.$route.query.id,
@@ -87,7 +82,7 @@ export default {
     };
   },
   mounted() {
-    this.getNews();
+      this.getNews();
   },
   watch: {
     activeId(newVal) {

src/views/spirit/mobile.vue

@@ -37,7 +37,7 @@ export default {
     }
   },
   mounted(){
-    this.getNews()
+    this.getNews();
   },
   watch:{
     activeId(newVal){