chenming
/
561_jiexin
关注 1
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

侧边栏更新

master
Wheba 5 年前
父节点
d0f81094fa
当前提交
c5b2b0d87a
共有 7 个文件被更改，包括 91 次插入 和 41 次删除
分列视图 显示文件统计
  1. +23
    -1
      public/index.html
  2. +28
    -24
      src/App.vue
  3. 二进制
      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 查看文件

@@ -3,7 +3,12 @@
<head>
<meta charset="utf-8">
<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">
<title>
<%= htmlWebpackPlugin.options.title %>
@@ -16,6 +21,23 @@
continue.</strong>
</noscript>
<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 -->
</body>
</html>

+ 28
- 24
src/App.vue 查看文件

@@ -2,10 +2,7 @@
<div id="app">
<router-view />
<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>
</template>
<script>
@@ -13,36 +10,34 @@
// import Sidebar from './components/sidebar.vue'
export default {
name: 'APP',
data(){
return{
btnAudio:null,
bgLoop:false,
data() {
return {
btnAudio: null,
bgLoop: false,
}
},
components: {
BtnMusic
},
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();
}else{//播放
} else { //播放
this.bgAudio.play();
}
}
@@ -63,6 +58,15 @@
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 {
display: block;
}

二进制
src/assets/sidebar/sidebar.png 查看文件

之前 之后
宽度: 49  |  高度: 41  |  大小: 137B

+ 22
- 14
src/components/sidebar.vue 查看文件

@@ -1,17 +1,20 @@
<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>
@@ -95,10 +98,15 @@
</script>

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

+ 5
- 0
src/views/Home.vue 查看文件

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

+ 6
- 2
src/views/List.vue 查看文件

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

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

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

+ 7
- 0
vue.config.js 查看文件

@@ -0,0 +1,7 @@
// vue.config.js
module.exports = {
// 选项...
publicPath: process.env.NODE_ENV === 'production'
? '/2020/561/'
: '/'
}

撰写 预览
正在加载...
取消
保存