bf
This commit is contained in:
zyronon
parent
4690b177f5
commit
7324da5077
6708
package-lock.json
generated
6708
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -9,8 +9,10 @@
|
||||
"push": "git add ./ && git commit -m 'dubug' && git push origin master"
|
||||
},
|
||||
"dependencies": {
|
||||
"lodash": "^4.17.14",
|
||||
"pinyin": "^2.9.0",
|
||||
"vue": "^2.6.10",
|
||||
"vue-router": "^3.0.2"
|
||||
"vue-router": "^3.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.0.3",
|
||||
|
||||
@ -10,16 +10,6 @@
|
||||
<meta name="x5-fullscreen" content="true">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>抖音</title>
|
||||
<style>
|
||||
body,html{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #2e3244;
|
||||
/*height: 0!important;*/
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
||||
140
src/App.vue
140
src/App.vue
@ -6,7 +6,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import Home from './components/home/Home.vue'
|
||||
|
||||
export default {
|
||||
name: 'app'
|
||||
@ -17,144 +16,5 @@
|
||||
#app {
|
||||
background: #2e3244;
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: "Microsoft Sans Serif";
|
||||
}
|
||||
p{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
$width: 1000;
|
||||
@while $width > 0 {
|
||||
.w#{$width}p {
|
||||
width: #{$width}px !important;
|
||||
}
|
||||
$width: $width - 50;
|
||||
}
|
||||
|
||||
$margin: 50;
|
||||
|
||||
@while $margin > 0 {
|
||||
.ml#{$margin}p {
|
||||
margin-left: #{$margin}px !important;
|
||||
}
|
||||
$margin: $margin - 1;
|
||||
}
|
||||
|
||||
$margin: 50;
|
||||
@while $margin > 0 {
|
||||
.mr#{$margin}p {
|
||||
margin-right: #{$margin}px !important;
|
||||
}
|
||||
$margin: $margin - 1;
|
||||
}
|
||||
|
||||
$margin: 50;
|
||||
@while $margin > 0 {
|
||||
.mt#{$margin}p {
|
||||
margin-top: #{$margin}px !important;
|
||||
}
|
||||
$margin: $margin - 1;
|
||||
}
|
||||
|
||||
$margin: 50;
|
||||
@while $margin > 0 {
|
||||
.mb#{$margin}p {
|
||||
margin-bottom: #{$margin}px !important;
|
||||
}
|
||||
$margin: $margin - 1;
|
||||
}
|
||||
|
||||
$margin: 50;
|
||||
@while $margin > 0 {
|
||||
.m#{$margin}p {
|
||||
margin: #{$margin}px !important;
|
||||
}
|
||||
$margin: $margin - 1;
|
||||
}
|
||||
|
||||
$padding: 50;
|
||||
@while $padding > 0 {
|
||||
.pl#{$padding}p {
|
||||
padding-left: #{$padding}px !important;
|
||||
}
|
||||
$padding: $padding - 1;
|
||||
}
|
||||
|
||||
$padding: 50;
|
||||
@while $padding > 0 {
|
||||
.pr#{$padding}p {
|
||||
padding-right: #{$padding}px !important;
|
||||
}
|
||||
$padding: $padding - 1;
|
||||
}
|
||||
|
||||
$padding: 50;
|
||||
@while $padding > 0 {
|
||||
.pt#{$padding}p {
|
||||
padding-top: #{$padding}px !important;
|
||||
}
|
||||
$padding: $padding - 1;
|
||||
}
|
||||
|
||||
$padding: 50;
|
||||
@while $padding > 0 {
|
||||
.pb#{$padding}p {
|
||||
padding-bottom: #{$padding}px !important;
|
||||
}
|
||||
$padding: $padding - 1;
|
||||
}
|
||||
|
||||
$padding: 50;
|
||||
@while $padding > 0 {
|
||||
.p#{$padding}p {
|
||||
padding: #{$padding}px !important;
|
||||
}
|
||||
$padding: $padding - 1;
|
||||
}
|
||||
|
||||
$font: 30;
|
||||
@while $font > 0 {
|
||||
.f#{$font} {
|
||||
font-size: #{$font}px;
|
||||
}
|
||||
$font: $font - 1;
|
||||
}
|
||||
|
||||
$width: 300;
|
||||
@while $width > 0 {
|
||||
.w#{$width} {
|
||||
width: percentage($width / 100);
|
||||
}
|
||||
$width: $width - 10;
|
||||
}
|
||||
|
||||
.pull-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.oh {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tac {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.red {background: red;}
|
||||
.gold {background: gold;}
|
||||
.green {background: green;}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
BIN
src/assets/img/icon/close-white.png
Normal file
BIN
src/assets/img/icon/close-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 353 B |
BIN
src/assets/img/icon/refresh.png
Normal file
BIN
src/assets/img/icon/refresh.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 526 B |
Binary file not shown.
|
Before Width: | Height: | Size: 606 KiB After Width: | Height: | Size: 59 KiB |
56
src/assets/scss/color.scss
Normal file
56
src/assets/scss/color.scss
Normal file
@ -0,0 +1,56 @@
|
||||
.c-red {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.c-gray {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.c-text-notice {
|
||||
color: #008000 !important;
|
||||
}
|
||||
|
||||
.c-black {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.c-text-gray {
|
||||
color: #80808094;
|
||||
}
|
||||
|
||||
.bg-red {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.bg-gold {
|
||||
background: gold;
|
||||
}
|
||||
|
||||
.bg-green {
|
||||
background: green;
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.bg-gray {
|
||||
background: gray;
|
||||
}
|
||||
|
||||
.bg-second-gray {
|
||||
background: #c1c1c1;
|
||||
|
||||
}
|
||||
|
||||
.red {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.gold {
|
||||
background: gold;
|
||||
}
|
||||
|
||||
.green {
|
||||
background: green;
|
||||
}
|
||||
0
src/assets/scss/custom.scss
Normal file
0
src/assets/scss/custom.scss
Normal file
0
src/assets/scss/dialog.scss
Normal file
0
src/assets/scss/dialog.scss
Normal file
26
src/assets/scss/index.scss
Normal file
26
src/assets/scss/index.scss
Normal file
@ -0,0 +1,26 @@
|
||||
@import "variables";//一些变量
|
||||
@import "utils";//for循环生成的 margin、padding、width、height类
|
||||
@import "custom";//自定义的一些快捷css类
|
||||
@import "color";//颜色
|
||||
@import "dialog";//弹窗
|
||||
@import "layout";//布局
|
||||
|
||||
//想自己写全局变量请到custom.scss里面写
|
||||
//想自己写全局变量请到custom.scss里面写
|
||||
//想自己写全局变量请到custom.scss里面写
|
||||
//想自己写全局变量请到custom.scss里面写
|
||||
//想自己写全局变量请到custom.scss里面写
|
||||
//想自己写全局变量请到custom.scss里面写
|
||||
//想自己写全局变量请到custom.scss里面写
|
||||
|
||||
|
||||
|
||||
html,body{
|
||||
font-size: 62.5%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
p{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
61
src/assets/scss/layout.scss
Normal file
61
src/assets/scss/layout.scss
Normal file
@ -0,0 +1,61 @@
|
||||
//布局常用类
|
||||
|
||||
.d-none{
|
||||
display: none!important;
|
||||
}
|
||||
//flex 布局常用类
|
||||
.d-flex {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.justify-content-center {
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.justify-content-between {
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
.justify-content-around {
|
||||
justify-content: space-around !important;
|
||||
}
|
||||
|
||||
.align-items-center {
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.align-items-start {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.align-items-end {
|
||||
align-items: flex-end !important;
|
||||
}
|
||||
|
||||
.flex-wrap-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.flex-direction-column{
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
.pull-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.oh {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tac {
|
||||
text-align: center;
|
||||
}
|
||||
160
src/assets/scss/utils.scss
Normal file
160
src/assets/scss/utils.scss
Normal file
@ -0,0 +1,160 @@
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|
||||
width
|
||||
|
||||
*/
|
||||
$width: 500;
|
||||
@while $width >= 0 {
|
||||
.w#{$width}p {
|
||||
width: #{$width}px !important;
|
||||
}
|
||||
$width: $width - 10;
|
||||
}
|
||||
|
||||
|
||||
$width: 100;
|
||||
@while $width >= 0 {
|
||||
.w#{$width} {
|
||||
width: percentage($width / 100) !important;
|
||||
}
|
||||
$width: $width - 1;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
$height
|
||||
|
||||
*/
|
||||
$height: 500;
|
||||
@while $height >= 0 {
|
||||
.h#{$height}p {
|
||||
height: #{$height}px !important;
|
||||
}
|
||||
$height: $height - 10;
|
||||
}
|
||||
|
||||
|
||||
$height: 100;
|
||||
@while $height >= 0 {
|
||||
.h#{$height} {
|
||||
height: percentage($height / 100) !important;
|
||||
}
|
||||
$height: $height - 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|
||||
margin
|
||||
|
||||
*/
|
||||
$margin: 100;
|
||||
|
||||
@while $margin >= 0 {
|
||||
.ml#{$margin}p {
|
||||
margin-left: #{$margin}px !important;
|
||||
}
|
||||
$margin: $margin - 1;
|
||||
}
|
||||
|
||||
$margin: 100;
|
||||
@while $margin >= 0 {
|
||||
.mr#{$margin}p {
|
||||
margin-right: #{$margin}px !important;
|
||||
}
|
||||
$margin: $margin - 1;
|
||||
}
|
||||
|
||||
$margin: 100;
|
||||
@while $margin >=0 {
|
||||
.mt#{$margin}p {
|
||||
margin-top: #{$margin}px !important;
|
||||
}
|
||||
$margin: $margin - 1;
|
||||
}
|
||||
|
||||
$margin: 100;
|
||||
@while $margin >= 0 {
|
||||
.mb#{$margin}p {
|
||||
margin-bottom: #{$margin}px !important;
|
||||
}
|
||||
$margin: $margin - 1;
|
||||
}
|
||||
|
||||
$margin: 100;
|
||||
@while $margin >= 0 {
|
||||
.m#{$margin}p {
|
||||
margin: #{$margin}px !important;
|
||||
}
|
||||
$margin: $margin - 1;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|
||||
padding
|
||||
|
||||
*/
|
||||
|
||||
|
||||
$padding: 100;
|
||||
@while $padding >= 0 {
|
||||
.pl#{$padding}p {
|
||||
padding-left: #{$padding}px !important;
|
||||
}
|
||||
$padding: $padding - 1;
|
||||
}
|
||||
|
||||
$padding: 100;
|
||||
@while $padding >= 0 {
|
||||
.pr#{$padding}p {
|
||||
padding-right: #{$padding}px !important;
|
||||
}
|
||||
$padding: $padding - 1;
|
||||
}
|
||||
|
||||
$padding: 100;
|
||||
@while $padding >= 0 {
|
||||
.pt#{$padding}p {
|
||||
padding-top: #{$padding}px !important;
|
||||
}
|
||||
$padding: $padding - 1;
|
||||
}
|
||||
|
||||
$padding: 100;
|
||||
@while $padding >= 0 {
|
||||
.pb#{$padding}p {
|
||||
padding-bottom: #{$padding}px !important;
|
||||
}
|
||||
$padding: $padding - 1;
|
||||
}
|
||||
|
||||
$padding: 100;
|
||||
@while $padding >= 0 {
|
||||
.p#{$padding}p {
|
||||
padding: #{$padding}px !important;
|
||||
}
|
||||
$padding: $padding - 1;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|
||||
font
|
||||
|
||||
*/
|
||||
|
||||
$font: 40;
|
||||
@while $font >=0 {
|
||||
.f#{$font} {
|
||||
font-size: #{$font}px!important;
|
||||
}
|
||||
$font: $font - 1;
|
||||
}
|
||||
|
||||
0
src/assets/scss/variables.scss
Normal file
0
src/assets/scss/variables.scss
Normal file
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div id="attention" >
|
||||
<div class="items p10p">
|
||||
<div class="item mb20p pb20p" v-for="item of items">
|
||||
<div class="item mb20p pb20p" v-for="(item,index) of items" :key="index" >
|
||||
<div class="header mb10p">
|
||||
<img src="../../assets/img/icon/head-image.jpeg" alt="">
|
||||
<span class="ml5p">TTentau</span>
|
||||
@ -87,14 +87,10 @@
|
||||
}
|
||||
},
|
||||
created() {
|
||||
self = this;
|
||||
this.height = document.body.clientHeight;
|
||||
this.width = document.body.clientWidth;
|
||||
},
|
||||
mounted() {
|
||||
// let footer = this.$refs.footer.$el;
|
||||
// this.footerHeight = footer.offsetHeight;
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -112,7 +108,7 @@
|
||||
border-bottom: 1px solid #494950;
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 40px;
|
||||
@ -160,7 +156,7 @@
|
||||
}
|
||||
.location {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
height: 20px;
|
||||
img {
|
||||
@ -175,7 +171,7 @@
|
||||
height: 100%;
|
||||
display: flex;
|
||||
width: 25%;
|
||||
justify-content: start;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
float: left;
|
||||
img{
|
||||
|
||||
@ -1,11 +1,21 @@
|
||||
<template>
|
||||
<div class="footer f16 ">
|
||||
<div class="button" @click="tab(1)"><span v-bind:class="{active:currentTab==1}">首页</span></div>
|
||||
<div class="button" @click="tab(2)"><span v-bind:class="{active:currentTab==2}">关注</span></div>
|
||||
<div class="button" @click="tab(3)"><img src="../../assets/img/icon/add.svg" alt=""></div>
|
||||
<div class="button" @click="tab(4)"><span v-bind:class="{active:currentTab==4}">消息</span></div>
|
||||
<div class="button" @click="tab(5)"><span v-bind:class="{active:currentTab==5}">我</span></div>
|
||||
<div class="button" @click="refresh()">
|
||||
<span v-if="!isRefresh" :class="{active:currentTab===1}">首页</span>
|
||||
<img v-else src="../../assets/img/icon/refresh.png" alt="" class="refresh">
|
||||
</div>
|
||||
<div class="button" @click="tab(2)"><span :class="{active:currentTab===2}">关注</span></div>
|
||||
<div class="button" @click="tab(3)">
|
||||
<div class="add-ctn">
|
||||
<div class="add-one"></div>
|
||||
<div class="add-two"></div>
|
||||
<img src="../../assets/img/icon/add.svg" alt="" class="add">
|
||||
</div>
|
||||
</div>
|
||||
<div class="button" @click="tab(4)"><span :class="{active:currentTab===4}">消息</span></div>
|
||||
<div class="button" @click="tab(5)"><span :class="{active:currentTab===5}">我</span></div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -14,28 +24,39 @@
|
||||
props: ['initTab'],
|
||||
data() {
|
||||
return {
|
||||
isRefresh:false,
|
||||
currentTab: this.initTab
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tab(index) {
|
||||
this.currentTab = index;
|
||||
console.log(index);
|
||||
this.currentTab = index
|
||||
switch (index) {
|
||||
case 1:
|
||||
this.$router.push('/');
|
||||
break;
|
||||
this.$router.push('/')
|
||||
break
|
||||
case 2:
|
||||
this.$router.push('/attention');
|
||||
break;
|
||||
this.$router.push('/attention')
|
||||
break
|
||||
case 3:
|
||||
break;
|
||||
break
|
||||
case 4:
|
||||
this.$router.push('/message');
|
||||
break;
|
||||
this.$router.push('/message')
|
||||
break
|
||||
case 5:
|
||||
this.$router.push('/user');
|
||||
break;
|
||||
this.$router.push('/user')
|
||||
break
|
||||
}
|
||||
},
|
||||
refresh() {
|
||||
if (location.hash === '#/') {
|
||||
this.isRefresh = !this.isRefresh
|
||||
setTimeout(() => {
|
||||
this.isRefresh = false
|
||||
}, 2000)
|
||||
} else {
|
||||
this.currentTab = 1
|
||||
this.$router.push('/')
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -45,34 +66,92 @@
|
||||
<style scoped lang="scss">
|
||||
|
||||
.footer {
|
||||
font-size: 1.8rem;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
height: 60px;
|
||||
border-top: 1px solid #7b7878;
|
||||
z-index: 2;
|
||||
/*top: 600px;*/
|
||||
background: #020202b3;
|
||||
color: white;
|
||||
display: flex;
|
||||
//justify-content: space-between;
|
||||
|
||||
.button {
|
||||
width: 20%;
|
||||
/*height: 35px;*/
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.refresh {
|
||||
width: 25%;
|
||||
animation: rotate .8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
|
||||
45% {
|
||||
-webkit-transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
55% {
|
||||
-webkit-transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.add-ctn {
|
||||
width: 70%;
|
||||
height: 55%;
|
||||
//background: white;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.add-one {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, #59dcdf, #ff5f75);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.add-two {
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
}
|
||||
|
||||
img {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
border-bottom: 0px solid white;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.active {
|
||||
border-bottom: 2px solid white;
|
||||
}
|
||||
img {
|
||||
height: 15px;
|
||||
background: white;
|
||||
padding: 5px 15px;
|
||||
border-radius: 5px;
|
||||
opacity: .7;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
193
src/components/common/Music.vue
Normal file
193
src/components/common/Music.vue
Normal file
@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div class='Music'>
|
||||
<header class="pl15p pr15p pt20p">
|
||||
<div class="top pb20p d-flex justify-content-between">
|
||||
<img src="../../assets/img/icon/next.svg" alt="" @click="back()">
|
||||
<img src="../../assets/img/icon/share.svg" alt="">
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<img class="logo" src="../../assets/img/poster/src1-bg.png" alt="">
|
||||
<div class="info">
|
||||
<div class="name">MT创作的原声</div>
|
||||
<div class="user">NT ></div>
|
||||
<div class="peoples">1人使用</div>
|
||||
<div class="collection">
|
||||
<img src="../../assets/img/icon/collect-white.svg" alt="">
|
||||
<span>收藏</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="content">
|
||||
<div class="tabs">
|
||||
<div class="tab active" @click="toggleTab($event,0)">热门</div>
|
||||
<div class="tab" @click="toggleTab($event,1)">最新</div>
|
||||
</div>
|
||||
<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>
|
||||
<div class="no" v-if="index===1||index===2">
|
||||
NO. <span>{{index+1}}</span>
|
||||
</div>
|
||||
<span v-if="index===0" class="first">首发</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "Music",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
videos: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
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()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
.Music {
|
||||
header {
|
||||
background: #454b66;
|
||||
padding-bottom: 30px;
|
||||
|
||||
.top {
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
&:nth-child(1) {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
height: 120px;
|
||||
|
||||
.logo {
|
||||
width: 120px;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-left: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.name {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.user, .peoples {
|
||||
margin-bottom: 5px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.collection {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 25px;
|
||||
width: 80px;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
background: #999;
|
||||
border-radius: 2px;
|
||||
|
||||
img {
|
||||
margin-right: 10px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.tabs {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
|
||||
.tab {
|
||||
height: 90%;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 10px;
|
||||
|
||||
&.active {
|
||||
border-bottom: 3px solid yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.video-container {
|
||||
width: 33%;
|
||||
float: left;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: .5px solid black;
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.first {
|
||||
padding: 0 5px;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
.no {
|
||||
position: absolute;
|
||||
color: #bdbdbd;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
font-style: italic;
|
||||
|
||||
span {
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="comment f14" v-if="isCommenting">
|
||||
<div class="title mt10p">
|
||||
<p>2.7w条评论</p>
|
||||
<img src="../../assets/img/icon/close.svg" @click.stop="$emit('showComment')">
|
||||
<img src="../../assets/img/icon/close.svg" @click.stop="$emit('update:is-commenting',false)">
|
||||
</div>
|
||||
<div class="items">
|
||||
<div class="item pl5p pr15p mb5p oh">
|
||||
|
||||
@ -1,419 +0,0 @@
|
||||
<template>
|
||||
<div id="home">
|
||||
<swiper :options="swiperOptionh" :style="{'height':otherUserHeight+'px'}">
|
||||
<swiper-slide>
|
||||
<swiper :options="swiperOptionv">
|
||||
<swiper-slide v-for="(item,index) in data">
|
||||
<div class="bg-video" v-bind:style="{'height':height+'px'}">
|
||||
<video :src="item.videoUrl" :poster="item.poster" ref="video" :autoplay="index == 0" loop>
|
||||
<p> 您的浏览器不支持 video 标签。</p>
|
||||
</video>
|
||||
<div class="float" @click="togglePlayVideo($event)">
|
||||
<transition name="pause">
|
||||
<img src="../../assets/img/icon/play.svg" class="pause" v-show="!isPlaying"
|
||||
@click.stop="togglePlayVideo($event)">
|
||||
</transition>
|
||||
<div class="toolbar mb10p">
|
||||
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="head-image mb15p">
|
||||
<div class="love mb15p" @click.stop="loved($event,index)">
|
||||
<div>
|
||||
<transition name="love">
|
||||
<img src="../../assets/img/icon/love.svg" class="love-image"
|
||||
v-if="!item.isLoved">
|
||||
<img src="../../assets/img/icon/loved.svg" class="love-image"
|
||||
v-if="item.isLoved">
|
||||
|
||||
</transition>
|
||||
<transition name="loved">
|
||||
</transition>
|
||||
</div>
|
||||
<span class="f14">{{item.loves}}</span>
|
||||
</div>
|
||||
<div class="message mb15p" @click.stop="showComment">
|
||||
<img src="../../assets/img/icon/message.svg" alt="" class="message-image">
|
||||
<span class="f14">{{item.comments}}</span>
|
||||
</div>
|
||||
<div class="share mb35p" @click.stop="showShare">
|
||||
<img src="../../assets/img/icon/share.svg" alt="" class="share-image">
|
||||
<span class="f14">{{item.shared}}</span>
|
||||
</div>
|
||||
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="music">
|
||||
</div>
|
||||
<div class="content ml10p">
|
||||
<div class="name mb10p">@TTentau</div>
|
||||
<div class="description mb10p">
|
||||
吴三二的光年之外, 您的浏览器不支持 video 标签。 您的浏览器不支持 video 标签。
|
||||
</div>
|
||||
<div class="music mb10p">
|
||||
<img src="../../assets/img/icon/music.svg" alt="" class="music-image">
|
||||
<marquee behavior=scroll direction=left align=middle scrollamount=4> 吴三二 -
|
||||
光年之外
|
||||
</marquee>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<Comment v-bind:is-commenting="isCommenting"
|
||||
v-on:showComment='isCommenting = !isCommenting'
|
||||
ref="comment"
|
||||
:style="{'top':height-commentHeight+'px'}"/>
|
||||
<Share v-bind:is-sharing="isSharing" ref="share" :style="{'top':height-shareHeight+'px'}"/>
|
||||
<Footer v-bind:init-tab="1" ref="footer" :style="{'top':height-footerHeight+'px'}"/>
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<Other ref="other"/>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Comment from './Comment';
|
||||
import Other from '../user/Other';
|
||||
import Message from '../message/Message';
|
||||
import Share from './Share';
|
||||
import Footer from '../common/Footer';
|
||||
import {swiper, swiperSlide} from 'vue-awesome-swiper';
|
||||
|
||||
require('swiper/dist/css/swiper.css'); //注意这里
|
||||
|
||||
|
||||
let self = null;
|
||||
export default {
|
||||
name: "Home",
|
||||
components: {
|
||||
Comment,
|
||||
Share,
|
||||
Footer,
|
||||
Message,
|
||||
Other,
|
||||
swiper,
|
||||
swiperSlide
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentPlayIndex: 0,
|
||||
isPlaying: true,
|
||||
isCommenting: false,
|
||||
isSharing: false,
|
||||
height: 0,
|
||||
width: 0,
|
||||
otherUserHeight: 0,
|
||||
footerHeight: 0,
|
||||
commentHeight: 0,
|
||||
shareHeight: 0,
|
||||
data: [
|
||||
{
|
||||
videoUrl: require('../../assets/video/吴三二的光年之外.mp4'),
|
||||
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
|
||||
videoPoster: require('../../assets/img/poster/src1-bg.png'),
|
||||
isLoved: false,
|
||||
loves: 1234,
|
||||
comments: 666,
|
||||
shared: 999
|
||||
},
|
||||
{
|
||||
videoUrl: require('../../assets/video/src1.mp4'),
|
||||
videoPoster: require('../../assets/img/poster/src1-bg.png'),
|
||||
isLoved: false,
|
||||
loves: 1234,
|
||||
comments: 666,
|
||||
shared: 999
|
||||
}
|
||||
],
|
||||
swiperOptionh: {
|
||||
direction: 'horizontal',
|
||||
height: document.body.clientHeight,
|
||||
width: document.body.clientWidth,
|
||||
// autoHeight: true, //高度随内容变化
|
||||
on: {
|
||||
slideChange: function () {
|
||||
window.scrollTo(0, 0);
|
||||
self.isCommenting = false;
|
||||
self.isSharing = false;
|
||||
if (self.isPlaying) {
|
||||
let currentVideo = self.$refs.video[self.currentPlayIndex];
|
||||
currentVideo.pause();
|
||||
self.isPlaying = false;
|
||||
}
|
||||
if (this.activeIndex == 0 ) {
|
||||
if (!self.isPlaying){
|
||||
let currentVideo = self.$refs.video[self.currentPlayIndex];
|
||||
currentVideo.play();
|
||||
self.isPlaying = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
swiperOptionv: {
|
||||
direction: 'vertical',
|
||||
height: document.body.clientHeight,
|
||||
width: document.body.clientWidth,
|
||||
// autoHeight: true, //高度随内容变化
|
||||
on: {
|
||||
slideChange() {
|
||||
self.isCommenting = false;
|
||||
self.isSharing = false;
|
||||
|
||||
|
||||
let dateLength = self.data.length;
|
||||
let index = self.currentPlayIndex = this.activeIndex;
|
||||
console.log(index);
|
||||
console.log(dateLength)
|
||||
|
||||
let currentVideo = self.$refs.video[index];
|
||||
self.isPlaying = true;
|
||||
currentVideo.currentTime = 0;
|
||||
// console.log(currentVideo);
|
||||
currentVideo.play();
|
||||
if (index == 0) {
|
||||
let nextVideo = self.$refs.video[index + 1];
|
||||
nextVideo.pause();
|
||||
} else if (index == dateLength - 1) {
|
||||
let preVideo = self.$refs.video[index - 1];
|
||||
preVideo.pause();
|
||||
} else {
|
||||
let nextVideo = self.$refs.video[index + 1];
|
||||
nextVideo.pause();
|
||||
let preVideo = self.$refs.video[index - 1];
|
||||
preVideo.pause();
|
||||
}
|
||||
|
||||
if (index + 2 > dateLength) {
|
||||
self.data.push(
|
||||
{
|
||||
videoUrl: require('../../assets/video/src1.mp4'),
|
||||
videoPoster: require('../../assets/img/poster/src1-bg.png'),
|
||||
isLoved: false,
|
||||
loves: 1234,
|
||||
comments: 666,
|
||||
shared: 999
|
||||
}
|
||||
)
|
||||
}
|
||||
console.log(self.data);
|
||||
},
|
||||
touchStart(event) {
|
||||
// console.log();
|
||||
// event.stopPropagation();
|
||||
// self.isCommenting = false;
|
||||
// self.isSharing = false;
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
togglePlayVideo(e) {
|
||||
console.log('1');
|
||||
console.log(this.isCommenting)
|
||||
console.log(this.isSharing);
|
||||
// return;
|
||||
if (this.isSharing) {
|
||||
this.isSharing = false;
|
||||
return;
|
||||
}
|
||||
if (this.isCommenting) {
|
||||
this.isCommenting = false;
|
||||
return;
|
||||
}
|
||||
// console.log(e);
|
||||
let el = e.target;
|
||||
// console.log(el)
|
||||
// console.log(el.nodeName);
|
||||
let video = '';
|
||||
if (el.nodeName == 'IMG') {
|
||||
video = el.parentNode.previousSibling;
|
||||
} else {
|
||||
video = el.previousSibling;
|
||||
}
|
||||
if (video.paused) {
|
||||
video.play();
|
||||
} else {
|
||||
video.pause();
|
||||
}
|
||||
this.isPlaying = !video.paused;
|
||||
|
||||
// this.isPlaying = !this.isPlaying;
|
||||
},
|
||||
showComment() {
|
||||
this.isCommenting = !this.isCommenting;
|
||||
setTimeout(() => {
|
||||
let comment = this.$refs.comment.$el;
|
||||
this.commentHeight = comment.offsetHeight;
|
||||
console.log(this.commentHeight);
|
||||
console.log(this.height);
|
||||
}, 50);
|
||||
},
|
||||
showShare() {
|
||||
this.isSharing = !this.isSharing;
|
||||
setTimeout(() => {
|
||||
let share = this.$refs.share.$el;
|
||||
this.shareHeight = share.offsetHeight;
|
||||
console.log(this.shareHeight);
|
||||
console.log(this.height);
|
||||
}, 50);
|
||||
},
|
||||
loved(e, index) {
|
||||
let img = e.target.parentNode.childNodes[0];
|
||||
console.log(img);
|
||||
console.log(index);
|
||||
this.data[index].isLoved = !this.data[index].isLoved;
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
self = this;
|
||||
window.scrollTo(0, 0);
|
||||
this.height = document.body.clientHeight;
|
||||
this.width = document.body.clientWidth;
|
||||
},
|
||||
mounted() {
|
||||
window.scrollTo(0, 0);
|
||||
let other = this.$refs.other.$el;
|
||||
let footer = this.$refs.footer.$el;
|
||||
// let share = this.$refs.share.$el;
|
||||
this.otherUserHeight = other.offsetHeight;
|
||||
if (this.otherUserHeight < this.height) {
|
||||
this.otherUserHeight = this.height;
|
||||
}
|
||||
this.footerHeight = footer.offsetHeight;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
#home {
|
||||
.bg-video {
|
||||
position: relative;
|
||||
background: black;
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/*position: absolute;*/
|
||||
}
|
||||
.float {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.pause {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
.toolbar {
|
||||
width: 40px;
|
||||
position: absolute;
|
||||
bottom: 35px;
|
||||
right: 20px;
|
||||
color: #fff;
|
||||
div {
|
||||
text-align: center;
|
||||
}
|
||||
img {
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
}
|
||||
.head-image, .music {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.love {
|
||||
img {
|
||||
|
||||
}
|
||||
}
|
||||
.loved {
|
||||
background: red;
|
||||
}
|
||||
.music {
|
||||
animation: animations 4s linear forwards infinite;
|
||||
}
|
||||
@keyframes animations {
|
||||
0% {
|
||||
transform: rotate(0deg);;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 35px;
|
||||
width: 75%;
|
||||
.music {
|
||||
position: relative;
|
||||
width: 60%;
|
||||
.music-image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: 3px;
|
||||
position: absolute;
|
||||
}
|
||||
marquee {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pause-enter-active {
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
.pause-leave-active {
|
||||
/*transition: all 1s ease ;*/
|
||||
}
|
||||
|
||||
.pause-enter, .pause-leave-to {
|
||||
transform: scale(2);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.love-enter-active {
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
.love-leave-active {
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
.love-leave-to {
|
||||
transform: scale(2);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.loved-enter-active {
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
.loved-leave-active {
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
.loved-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -20,7 +20,7 @@
|
||||
@click.stop="togglePlayVideo($event)">
|
||||
</transition>
|
||||
<div class="toolbar mb10p">
|
||||
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="head-image mb15p">
|
||||
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="head-image mb15p" @click.stop="goUserInfo(item)">
|
||||
<div class="love mb15p" @click.stop="loved($event,index)">
|
||||
<div>
|
||||
<transition name="love">
|
||||
@ -43,14 +43,14 @@
|
||||
<img src="../../assets/img/icon/share.svg" alt="" class="share-image">
|
||||
<span class="f14">{{item.shared}}</span>
|
||||
</div>
|
||||
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="music">
|
||||
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="music" @click.stop="goMusic()">
|
||||
</div>
|
||||
<div class="content ml10p">
|
||||
<div class="name mb10p">@TTentau</div>
|
||||
<div class="content ml10p" @click.stop="goUserInfo()">
|
||||
<div class="name mb10p" >@TTentau</div>
|
||||
<div class="description mb10p">
|
||||
吴三二的光年之外, 您的浏览器不支持 video 标签。 您的浏览器不支持 video 标签。
|
||||
</div>
|
||||
<div class="music mb10p">
|
||||
<div class="music mb10p" @click.stop="goMusic()">
|
||||
<img src="../../assets/img/icon/music.svg" alt="" class="music-image">
|
||||
<marquee behavior=scroll direction=left align=middle scrollamount=4> 吴三二 -
|
||||
光年之外
|
||||
@ -61,12 +61,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Comment v-bind:is-commenting="isCommenting" v-on:showComment='isCommenting = !isCommenting' ref="comment"/>
|
||||
<Share v-bind:is-sharing="isSharing" ref="share"/>
|
||||
<Comment v-bind:is-commenting.sync="isCommenting"/>
|
||||
<Share v-bind:is-sharing.sync="isSharing" ref="share"/>
|
||||
<Footer v-bind:init-tab="1"/>
|
||||
</div>
|
||||
<div class="right-container swiper-item">
|
||||
<Other ref="other"/>
|
||||
<Other ref="other" @back="backVideoList"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -121,7 +121,7 @@
|
||||
moveXDistance: 0,
|
||||
moveYDistance: 0,
|
||||
|
||||
judgeValue: 30,
|
||||
judgeValue: 10,
|
||||
|
||||
startTime: 0,
|
||||
currentIndex: 0,
|
||||
@ -149,6 +149,9 @@
|
||||
this.width = document.body.clientWidth
|
||||
},
|
||||
methods: {
|
||||
goMusic(){
|
||||
this.$router.push('/music')
|
||||
},
|
||||
checkDirection() {
|
||||
if (!this.isNeedCheck) {
|
||||
return
|
||||
@ -335,6 +338,7 @@
|
||||
videos[this.currentIndex - 1].pause()
|
||||
}
|
||||
videos[this.currentIndex].play()
|
||||
videos[this.currentIndex].muted = false
|
||||
videos[this.currentIndex + 1].pause()
|
||||
|
||||
|
||||
@ -369,24 +373,20 @@
|
||||
//展示评论
|
||||
showComment() {
|
||||
this.isCommenting = !this.isCommenting
|
||||
// setTimeout(() => {
|
||||
// let comment = this.$refs.comment.$el;
|
||||
// this.commentHeight = comment.offsetHeight;
|
||||
// console.log(this.commentHeight);
|
||||
// console.log(this.height);
|
||||
// }, 50);
|
||||
},
|
||||
showShare() {
|
||||
this.isSharing = !this.isSharing
|
||||
// setTimeout(() => {
|
||||
// let share = this.$refs.share.$el;
|
||||
// this.shareHeight = share.offsetHeight;
|
||||
// console.log(this.shareHeight);
|
||||
// console.log(this.height);
|
||||
// }, 50);
|
||||
},
|
||||
loved(e, index) {
|
||||
this.data[index].isLoved = !this.data[index].isLoved
|
||||
},
|
||||
//前往用户中心
|
||||
goUserInfo(item){
|
||||
this.wrapperLeft = '-100%'
|
||||
},
|
||||
//返回视频列表
|
||||
backVideoList(){
|
||||
this.wrapperLeft = '0'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
@ -108,7 +108,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dismiss">
|
||||
<div class="dismiss" @click="closeShare()">
|
||||
取消
|
||||
</div>
|
||||
</div>
|
||||
@ -118,12 +118,23 @@
|
||||
<script>
|
||||
export default {
|
||||
name: "Share",
|
||||
props:['isSharing']
|
||||
props: ['isSharing'],
|
||||
methods: {
|
||||
closeShare() {
|
||||
this.$emit("update:is-sharing", false)
|
||||
// this.isSharing = false
|
||||
console.log('关闭')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.w200 {
|
||||
width: 200%;
|
||||
}
|
||||
|
||||
.share {
|
||||
position: fixed;
|
||||
/*top: 200px;*/
|
||||
@ -132,27 +143,34 @@
|
||||
z-index: 5;
|
||||
background: #eaeaea;
|
||||
border-radius: 10px 10px 0 0;
|
||||
|
||||
.friends {
|
||||
overflow-x: scroll;
|
||||
|
||||
.friend {
|
||||
float: left;
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shares {
|
||||
background: white;
|
||||
overflow-x: scroll;
|
||||
|
||||
.share-to {
|
||||
float: left;
|
||||
width: 50px;
|
||||
|
||||
img {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
@ -160,18 +178,22 @@
|
||||
border-radius: 50%;
|
||||
background: #1ace04;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
border-top: 1px solid #eaeaea;
|
||||
background: white;
|
||||
overflow-x: scroll;
|
||||
|
||||
.tool {
|
||||
float: left;
|
||||
|
||||
img {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
@ -179,12 +201,14 @@
|
||||
border-radius: 50%;
|
||||
background: #eaeaea;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dismiss {
|
||||
background: white;
|
||||
border-top: 1px solid #eaeaea;
|
||||
|
||||
26
src/components/home/index.vue
Normal file
26
src/components/home/index.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class='index'>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "index",
|
||||
components: {},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
.index {
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -4,7 +4,7 @@
|
||||
<!--<div class="header" v-bind:style="{height:height/2+'px'}">-->
|
||||
<div class="header">
|
||||
<div class="top pt20p pl10p pr10p">
|
||||
<img src="../../assets/img/icon/next.svg" alt="">
|
||||
<img src="../../assets/img/icon/next.svg" alt="" class="d-none">
|
||||
<img src="../../assets/img/icon/more.svg" alt="">
|
||||
</div>
|
||||
<div class="bottom">
|
||||
@ -78,7 +78,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="content oh">
|
||||
<div class="video-container" v-for="item of videos" v-bind:style="{'height':width/3*1.2+'px'}">
|
||||
<div class="video-container" v-for="(item,index) of videos" :key="index" v-bind:style="{'height':width/3*1.2+'px'}">
|
||||
<video src="../../assets/video/吴三二的光年之外.mp4" poster="../../assets/img/poster/src1-bg.png"></video>
|
||||
<div class="love">
|
||||
<img src="../../assets/img/icon/love.svg" alt="">
|
||||
@ -108,7 +108,6 @@
|
||||
}
|
||||
},
|
||||
created() {
|
||||
self = this;
|
||||
this.height = document.body.clientHeight;
|
||||
this.width = document.body.clientWidth;
|
||||
},
|
||||
@ -126,7 +125,7 @@
|
||||
/*height: 30%;*/
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-end;
|
||||
background: url("../../assets/img/icon/top-bg.jpg");
|
||||
img {
|
||||
border-radius: 50%;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<!--<div class="header" v-bind:style="{height:height/2+'px'}">-->
|
||||
<div class="header">
|
||||
<div class="top pt20p pl10p pr10p">
|
||||
<img src="../../assets/img/icon/next.svg" alt="">
|
||||
<img src="../../assets/img/icon/next.svg" alt="" @click="$emit('back')">
|
||||
<img src="../../assets/img/icon/more.svg" alt="">
|
||||
</div>
|
||||
<div class="bottom">
|
||||
@ -64,13 +64,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabset">
|
||||
<div class="tab active">
|
||||
<div class="tab active" @click="toggleTab($event,0)">
|
||||
<span>作品1</span>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<div class="tab" @click="toggleTab($event,1)">
|
||||
<span>动态6</span>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<div class="tab" @click="toggleTab($event,2)">
|
||||
<span>喜欢6</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -91,7 +91,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Footer from '../common/Footer';
|
||||
import Footer from '../common/Footer'
|
||||
|
||||
export default {
|
||||
name: "Other",
|
||||
@ -102,12 +102,21 @@
|
||||
return {
|
||||
height: 0,
|
||||
width: 0,
|
||||
videos: [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
|
||||
videos: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.height = window.screen.height;
|
||||
this.width = window.screen.width;
|
||||
this.height = window.screen.height
|
||||
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>
|
||||
@ -115,25 +124,30 @@
|
||||
<style scoped lang="scss">
|
||||
.me {
|
||||
color: white;
|
||||
|
||||
.header {
|
||||
background: gray;
|
||||
|
||||
.top {
|
||||
/*height: 30%;*/
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: url("../../assets/img/icon/top-bg.jpg");
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
padding: 5px;
|
||||
background: #524a4a;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
&:nth-child(1) {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
background-image: url("../../assets/img/icon/head-image.jpeg");
|
||||
background-position: center;
|
||||
@ -144,6 +158,7 @@
|
||||
height: 100%;
|
||||
background-color: #2e3244ed;
|
||||
position: relative;
|
||||
|
||||
.head {
|
||||
width: 100%;
|
||||
right: 10px;
|
||||
@ -152,6 +167,7 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.head-image {
|
||||
background: black;
|
||||
padding: 5px;
|
||||
@ -159,6 +175,7 @@
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.my-buttons {
|
||||
div {
|
||||
display: flex;
|
||||
@ -167,10 +184,12 @@
|
||||
border-radius: 2px;
|
||||
background: #676767;
|
||||
margin-right: 5px;
|
||||
|
||||
img {
|
||||
padding: 6px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #cdcdcd;
|
||||
}
|
||||
@ -178,26 +197,33 @@
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 60px;
|
||||
color: white;
|
||||
|
||||
.number {
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid gray;
|
||||
|
||||
.jrtt {
|
||||
float: right;
|
||||
|
||||
img {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -206,38 +232,46 @@
|
||||
background: #676767;
|
||||
margin-right: 5px;
|
||||
padding: 2px 4px;
|
||||
|
||||
img {
|
||||
height: 10px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #cdcdcd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.heat {
|
||||
span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabset {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.tab {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
text-align: center;
|
||||
width: 30%;
|
||||
|
||||
&.active {
|
||||
border-bottom: 2px solid gold;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
border-bottom: 2px solid gold;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.video-container {
|
||||
width: 33%;
|
||||
@ -245,15 +279,18 @@
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: .5px solid black;
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.love {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
37
src/main.js
37
src/main.js
@ -1,29 +1,32 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import './assets/scss/index.scss'
|
||||
import Home2 from './components/home/Home2.vue'
|
||||
import Home from './components/home/Home.vue'
|
||||
import Attention from './components/attention/Attention.vue'
|
||||
import Message from './components/message/Message.vue'
|
||||
import Me from './components/user/Me.vue'
|
||||
import Music from './components/common/Music.vue'
|
||||
import countryChoose from "./pages/login/countryChoose"
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
Vue.config.productionTip = false
|
||||
|
||||
// Vue.use(VueAwesomeSwiper, /* { default global options } */)
|
||||
Vue.use(VueRouter);
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
routes: [
|
||||
{path: '', component: Home2},
|
||||
{path: '/', component: Home2},
|
||||
{path: '/home', component: Home},
|
||||
{path: '/attention', component: Attention},
|
||||
{path: '/message', component: Message},
|
||||
{path: '/user', component: Me},
|
||||
]
|
||||
});
|
||||
mode: 'hash',
|
||||
routes: [
|
||||
// {path: '', component: Music},
|
||||
{ path: '/', component: Home2 },
|
||||
{ path: '/home', component: Home2 },
|
||||
{ path: '/attention', component: Attention },
|
||||
{ path: '/message', component: Message },
|
||||
{ path: '/user', component: Me },
|
||||
{ path: '/music', component: Music },
|
||||
{ path: '/countryChoose', component: countryChoose },
|
||||
]
|
||||
})
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
router
|
||||
}).$mount('#app');
|
||||
render: h => h(App),
|
||||
router
|
||||
}).$mount('#app')
|
||||
|
||||
2538
src/pages/login/countryChoose.vue
Normal file
2538
src/pages/login/countryChoose.vue
Normal file
File diff suppressed because it is too large
Load Diff
@ -2,6 +2,15 @@
|
||||
module.exports = {
|
||||
// 选项...
|
||||
publicPath: process.env.NODE_ENV === 'production' ? '' : '',
|
||||
assetsDir: './',//资源路径
|
||||
assetsDir: '',//资源路径
|
||||
outputDir: process.env.outputDir,//打包输出路径
|
||||
// configureWebpack: config => {
|
||||
// config.externals = {
|
||||
// "vue": "Vue",
|
||||
// "vue-router": "VueRouter",
|
||||
// }
|
||||
// },
|
||||
// 是否为生产环境构建生成 source map
|
||||
productionSourceMap: false,
|
||||
css: {},
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user