MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加点击事件

Browse Source
This commit is contained in:
zyronon 2019-05-20 01:00:12 +08:00
parent 83b85cc77e
commit a6c5fcefa8
3 changed files with 78 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/common/Music.vue
View File

@ -20,8 +20,8 @@
</header> </header>
<div class="content"> <div class="content">
<div class="tabs"> <div class="tabs">
<div class="tab active">热门</div> <div class="tab active" @click="toggleTab($event,0)">热门</div>
<div class="tab">最新</div> <div class="tab" @click="toggleTab($event,1)">最新</div>
</div> </div>
<div class="video-container" v-for="(item,index) of videos" v-bind:style="{'height':width/3*1.2+'px'}"> <div class="video-container" v-for="(item,index) of videos" v-bind:style="{'height':width/3*1.2+'px'}">
<video src="../../assets/video/吴三二的光年之外.mp4" poster="../../assets/img/poster/src1-bg.png"></video> <video src="../../assets/video/吴三二的光年之外.mp4" poster="../../assets/img/poster/src1-bg.png"></video>
@ -47,7 +47,21 @@
}, },
computed: {}, computed: {},
methods: { methods: {
back(){ toggleTab(e, index) {
if (!e.target.classList.contains('active')) {
e.target.classList.toggle('active')
}
if (index === 1) {
let pre = e.target.previousElementSibling
pre.classList.remove('active')
} else {
let pre = e.target.nextElementSibling
pre.classList.remove('active')
}
},
back() {
window.history.back() window.history.back()
} }
} }
@ -78,6 +92,7 @@
.logo { .logo {
width: 120px; width: 120px;
height: 100%; height: 100%;
border-radius: 4px;
} }
.info { .info {
@ -119,23 +134,26 @@
} }
.content { .content {
.tabs{ .tabs {
height: 40px; height: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
color: #fff; color: #fff;
.tab{
.tab {
height: 90%; height: 90%;
width: 50%; width: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 10px; margin: 10px;
&.active{
&.active {
border-bottom: 3px solid yellow; border-bottom: 3px solid yellow;
} }
} }
} }
.video-container { .video-container {
width: 33%; width: 33%;
float: left; float: left;
@ -146,8 +164,9 @@
video { video {
width: 100%; width: 100%;
} }
.first{
padding:0 5px; .first {
padding: 0 5px;
border-radius: 4px; border-radius: 4px;
position: absolute; position: absolute;
top: 10px; top: 10px;

7
src/components/home/Home2.vue
View File

@ -45,12 +45,12 @@
</div> </div>
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="music" @click.stop="goMusic()"> <img src="../../assets/img/icon/head-image.jpeg" alt="" class="music" @click.stop="goMusic()">
</div> </div>
<div class="content ml10p"> <div class="content ml10p" @click.stop="goUserInfo()">
<div class="name mb10p">@TTentau</div> <div class="name mb10p" >@TTentau</div>
<div class="description mb10p"> <div class="description mb10p">
吴三二的光年之外, 您的浏览器不支持 video 标签。 您的浏览器不支持 video 标签。 吴三二的光年之外, 您的浏览器不支持 video 标签。 您的浏览器不支持 video 标签。
</div> </div>
<div class="music mb10p"> <div class="music mb10p" @click.stop="goMusic()">
<img src="../../assets/img/icon/music.svg" alt="" class="music-image"> <img src="../../assets/img/icon/music.svg" alt="" class="music-image">
<marquee behavior=scroll direction=left align=middle scrollamount=4> 吴三二 - <marquee behavior=scroll direction=left align=middle scrollamount=4> 吴三二 -
光年之外 光年之外
@ -149,6 +149,7 @@
this.width = document.body.clientWidth this.width = document.body.clientWidth
}, },
methods: { methods: {
goMusic(){ goMusic(){
this.$router.push('/music') this.$router.push('/music')
}, },

57
src/components/user/Other.vue
View File

@ -64,13 +64,13 @@
</div> </div>
</div> </div>
<div class="tabset"> <div class="tabset">
<div class="tab active"> <div class="tab active" @click="toggleTab($event,0)">
<span>作品1</span> <span>作品1</span>
</div> </div>
<div class="tab"> <div class="tab" @click="toggleTab($event,1)">
<span>动态6</span> <span>动态6</span>
</div> </div>
<div class="tab"> <div class="tab" @click="toggleTab($event,2)">
<span>喜欢6</span> <span>喜欢6</span>
</div> </div>
</div> </div>
@ -91,7 +91,7 @@
</template> </template>
<script> <script>
import Footer from '../common/Footer'; import Footer from '../common/Footer'
export default { export default {
name: "Other", name: "Other",
@ -102,12 +102,21 @@
return { return {
height: 0, height: 0,
width: 0, width: 0,
videos: [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}], videos: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
} }
}, },
created() { created() {
this.height = window.screen.height; this.height = window.screen.height
this.width = window.screen.width; this.width = window.screen.width
},
methods: {
toggleTab(e, index) {
let childNodes = e.target.parentElement.childNodes
childNodes.forEach(function (item) {
item.classList.remove('active')
})
e.target.classList.add('active')
},
} }
} }
</script> </script>
@ -115,25 +124,30 @@
<style scoped lang="scss"> <style scoped lang="scss">
.me { .me {
color: white; color: white;
.header { .header {
background: gray; background: gray;
.top { .top {
/*height: 30%;*/ /*height: 30%;*/
height: 100px; height: 100px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background: url("../../assets/img/icon/top-bg.jpg"); background: url("../../assets/img/icon/top-bg.jpg");
img { img {
border-radius: 50%; border-radius: 50%;
padding: 5px; padding: 5px;
background: #524a4a; background: #524a4a;
height: 20px; height: 20px;
width: 20px; width: 20px;
&:nth-child(1) { &:nth-child(1) {
transform: rotate(180deg); transform: rotate(180deg);
} }
} }
} }
.bottom { .bottom {
background-image: url("../../assets/img/icon/head-image.jpeg"); background-image: url("../../assets/img/icon/head-image.jpeg");
background-position: center; background-position: center;
@ -144,6 +158,7 @@
height: 100%; height: 100%;
background-color: #2e3244ed; background-color: #2e3244ed;
position: relative; position: relative;
.head { .head {
width: 100%; width: 100%;
right: 10px; right: 10px;
@ -152,6 +167,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.head-image { .head-image {
background: black; background: black;
padding: 5px; padding: 5px;
@ -159,6 +175,7 @@
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
.my-buttons { .my-buttons {
div { div {
display: flex; display: flex;
@ -167,10 +184,12 @@
border-radius: 2px; border-radius: 2px;
background: #676767; background: #676767;
margin-right: 5px; margin-right: 5px;
img { img {
padding: 6px; padding: 6px;
height: 20px; height: 20px;
} }
span { span {
color: #cdcdcd; color: #cdcdcd;
} }
@ -178,26 +197,33 @@
} }
} }
.description { .description {
margin-top: 60px; margin-top: 60px;
color: white; color: white;
.number { .number {
padding-bottom: 10px; padding-bottom: 10px;
border-bottom: 1px solid gray; border-bottom: 1px solid gray;
.jrtt { .jrtt {
float: right; float: right;
img { img {
height: 10px; height: 10px;
width: 10px; width: 10px;
} }
span { span {
margin: 0 5px; margin: 0 5px;
} }
} }
} }
.info { .info {
display: flex; display: flex;
align-items: center; align-items: center;
div { div {
display: flex; display: flex;
align-items: center; align-items: center;
@ -206,38 +232,46 @@
background: #676767; background: #676767;
margin-right: 5px; margin-right: 5px;
padding: 2px 4px; padding: 2px 4px;
img { img {
height: 10px; height: 10px;
margin-right: 3px; margin-right: 3px;
} }
span { span {
color: #cdcdcd; color: #cdcdcd;
} }
} }
} }
.heat { .heat {
span { span {
margin-right: 10px; margin-right: 10px;
} }
} }
} }
.tabset { .tabset {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
.tab { .tab {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
text-align: center; text-align: center;
width: 30%; width: 30%;
}
.active { &.active {
border-bottom: 2px solid gold; border-bottom: 2px solid gold;
} }
} }
}
} }
} }
}
}
.content { .content {
.video-container { .video-container {
width: 33%; width: 33%;
@ -245,15 +279,18 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border: .5px solid black; border: .5px solid black;
video { video {
width: 100%; width: 100%;
} }
.love { .love {
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;
left: 10px; left: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
img { img {
height: 20px; height: 20px;
} }