chenming
/
561_jiexin
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

侧边栏更新

master
Wheba 5 years ago
parent
d0f81094fa
commit
c5b2b0d87a
7 changed files with 91 additions and 41 deletions
Unified View Show Diff Stats
  1. +23
    -1
      public/index.html
  2. +28
    -24
      src/App.vue
  3. BIN
      src/assets/sidebar/sidebar.png
  4. +22
    -14
      src/components/sidebar.vue
  5. +5
    -0
      src/views/Home.vue
  6. +6
    -2
      src/views/List.vue
  7. +7
    -0
      vue.config.js

+ 23
- 1
public/index.html View File

<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="full-screen" content="true"/>
<meta name="screen-orientation" content="portrait"/>
<meta name="x5-fullscreen" content="true"/>
<meta name="360-fullscreen" content="true"/>
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title> <title>
<%= htmlWebpackPlugin.options.title %> <%= htmlWebpackPlugin.options.title %>
continue.</strong> continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<audio id="bgAudio">
<source src="http://static.jiyou-tech.com/546/resource/assets/sound/music.mp3" type="audio/mpeg">
</audio>
<script>
var bgAudio=document.getElementById('bgAudio');
bgAudio.loop=true;
bgLoop=false;
document.addEventListener("DOMContentLoaded", function() {
document.addEventListener("WeixinJSBridgeReady", function() {
bgAudio.play();
}, false);
});
var openLoop=function(){
bgLoop=true;
}
bgAudio.addEventListener('play',openLoop)
</script>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
</html> </html>

+ 28
- 24
src/App.vue View File

<div id="app"> <div id="app">
<router-view /> <router-view />
<btn-music :bgLoop="bgLoop"></btn-music> <btn-music :bgLoop="bgLoop"></btn-music>
<audio ref="bgAudio">
<source src="http://static.jiyou-tech.com/546/resource/assets/sound/music.mp3" type="audio/mpeg">
</audio>
<!-- <sidebar></sidebar> -->
<!-- <sidebar style="position: absolute;top: 20vw;left: 10vw;"></sidebar> -->
</div> </div>
</template> </template>
<script> <script>
// import Sidebar from './components/sidebar.vue' // import Sidebar from './components/sidebar.vue'
export default { export default {
name: 'APP', name: 'APP',
data(){
return{
btnAudio:null,
bgLoop:false,
data() {
return {
btnAudio: null,
bgLoop: false,
} }
}, },
components: { components: {
BtnMusic BtnMusic
}, },
mounted() { mounted() {
var that=this;
this.bgAudio = this.$refs.bgAudio;
this.bgAudio.loop=true;
document.addEventListener("DOMContentLoaded", function() {
document.addEventListener("WeixinJSBridgeReady", function() {
this.bgAudio.play();
}, false);
});
this.bgAudio.addEventListener('play',function(){
that.bgLoop=true;
var that = this;
this.bgAudio=window['bgAudio'];
this.bgLoop=window['bgLoop']
if(!this.bgLoop){
this.bgAudio.removeEventListener('play',window['openLoop']);
}
this.bgAudio.addEventListener('play', function() {
that.bgLoop = true;
}) })
this.bgAudio.addEventListener('pause',function(){
that.bgLoop=false;
this.bgAudio.addEventListener('pause', function() {
that.bgLoop = false;
}) })
}, },
methods:{
playMusic(){
if(this.bgLoop){//暂停
methods: {
playMusic() {
if (this.bgLoop) { //暂停
this.bgAudio.pause(); this.bgAudio.pause();
}else{//播放
} else { //播放
this.bgAudio.play(); this.bgAudio.play();
} }
} }
height: 100%; height: 100%;
} }


body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

img { img {
display: block; display: block;
} }

BIN
src/assets/sidebar/sidebar.png View File

Before After
Width: 49  |  Height: 41  |  Size: 137B

+ 22
- 14
src/components/sidebar.vue View File

<template> <template>
<div ref="sidebar" id="sidebar">
<div class="sidebarMiddle">
<img class="btnClose" :src="getImg('btnClose.png')" @click="close" />
<div style="margin-bottom: calc(136/750*100vw);width: 100%;"></div>
<div class="treeNode" :key="item1.title" v-for="(item1,index1) in list">
<div class="title titleBox1" :class="{selected:item1.show}" v-text="item1.title" @click="show1(index1)"></div>
<div class="treeNodeContent" v-for="(item2,index2) in item1.children" v-show="item1.show">
<div class="title titleBox2" :class="{selected:item2.show}" v-text="item2.title" @click="show2(index1,index2)"></div>
<transition name="fade">
<div class="treeNodeItem" v-show="item2.show">
<div class="title titleBox3" v-for="(item3,index3) in item2.children" v-text="item3" @click="show3(index1,index2,item3)"></div>
</div>
</transition>
<div class="pageSidebar">
<img style="width: 100%;" :src="getImg('sidebar.png')" @click="open"/>
<div ref="sidebar" id="sidebar">
<div class="sidebarMiddle">
<img class="btnClose" :src="getImg('btnClose.png')" @click="close" />
<div style="margin-bottom: calc(136/750*100vw);width: 100%;"></div>
<div class="treeNode" :key="item1.title" v-for="(item1,index1) in list">
<div class="title titleBox1" :class="{selected:item1.show}" v-text="item1.title" @click="show1(index1)"></div>
<div class="treeNodeContent" v-for="(item2,index2) in item1.children" v-show="item1.show">
<div class="title titleBox2" :class="{selected:item2.show}" v-text="item2.title" @click="show2(index1,index2)"></div>
<transition name="fade">
<div class="treeNodeItem" v-show="item2.show">
<div class="title titleBox3" v-for="(item3,index3) in item2.children" v-text="item3" @click="show3(index1,index2,item3)"></div>
</div>
</transition>
</div>
</div> </div>
</div> </div>
</div> </div>
</script> </script>


<style lang="scss" scoped="scoped"> <style lang="scss" scoped="scoped">
.pageSidebar{
position: relative;
width: calc(49/750*100vw);
height: calc(41/750*100vw);
}
#sidebar { #sidebar {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0%;
left: -100%;
width: calc(593/750*100vw); width: calc(593/750*100vw);
height: 100%; height: 100%;
background-image: linear-gradient(rgba(48, 53, 56, 0.9), rgba(22, 20, 17, 0.9)); background-image: linear-gradient(rgba(48, 53, 56, 0.9), rgba(22, 20, 17, 0.9));

+ 5
- 0
src/views/Home.vue View File

</script> </script>
<style lang="scss" scoped="scoped"> <style lang="scss" scoped="scoped">
.home{ .home{
position: fixed;
width: 100%;
height: 100%; height: 100%;
left: 0;
top: 0;
background-color: #61686d; background-color: #61686d;
overflow: hidden;
.logo{ .logo{
width: calc(166/750*100vw); width: calc(166/750*100vw);
margin: 0 auto; margin: 0 auto;

+ 6
- 2
src/views/List.vue View File

this.mcEnd=true; this.mcEnd=true;
}, },
select(index) { select(index) {
this.mcEnd=false;
if (this.step < 3) { if (this.step < 3) {
this.mcEnd=false;
this.selectList[this.step - 1] = index; this.selectList[this.step - 1] = index;
this.step++; this.step++;
} else { } else {
@import url("../style/animation.css"); @import url("../style/animation.css");


.list { .list {
position: fixed;
width: 100%;
height: 100%; height: 100%;

left: 0;
top: 0;
overflow: hidden;
.btnBack { .btnBack {
position: absolute; position: absolute;
width: calc(24/750*100vw); width: calc(24/750*100vw);

+ 7
- 0
vue.config.js View File

// vue.config.js
module.exports = {
// 选项...
publicPath: process.env.NODE_ENV === 'production'
? '/2020/561/'
: '/'
}

Write Preview
Loading…
Cancel
Save