diff --git a/package.json b/package.json index de09658..454f2e7 100755 --- a/package.json +++ b/package.json @@ -9,8 +9,6 @@ "push": "git add ./ && git commit -m 'dubug' && git push origin master" }, "dependencies": { - "vue": "^2.6.10", - "vue-router": "^3.0.2" }, "devDependencies": { "@vue/cli-plugin-babel": "^3.0.3", diff --git a/public/index.html b/public/index.html index 972a10a..22f2ba0 100755 --- a/public/index.html +++ b/public/index.html @@ -10,8 +10,13 @@ 抖音 + + + diff --git a/src/assets/img/icon/add-friend-white.svg b/src/assets/img/icon/add-friend-white.svg old mode 100644 new mode 100755 diff --git a/src/assets/img/icon/collect-white.svg b/src/assets/img/icon/collect-white.svg old mode 100644 new mode 100755 diff --git a/src/assets/img/icon/location.svg b/src/assets/img/icon/location.svg old mode 100644 new mode 100755 diff --git a/src/assets/img/icon/next.svg b/src/assets/img/icon/next.svg old mode 100644 new mode 100755 diff --git a/src/assets/img/icon/pause.svg b/src/assets/img/icon/pause.svg old mode 100644 new mode 100755 diff --git a/src/assets/img/icon/person.svg b/src/assets/img/icon/person.svg old mode 100644 new mode 100755 diff --git a/src/assets/img/icon/qr-code-white.svg b/src/assets/img/icon/qr-code-white.svg old mode 100644 new mode 100755 diff --git a/src/assets/img/icon/top-bg.jpg b/src/assets/img/icon/top-bg.jpg old mode 100644 new mode 100755 diff --git a/src/assets/img/poster/src1-bg.png b/src/assets/img/poster/src1-bg.png old mode 100644 new mode 100755 index a72f2d7..b7f44e5 Binary files a/src/assets/img/poster/src1-bg.png and b/src/assets/img/poster/src1-bg.png differ diff --git a/src/assets/scss/color.scss b/src/assets/scss/color.scss new file mode 100755 index 0000000..5533a65 --- /dev/null +++ b/src/assets/scss/color.scss @@ -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; +} diff --git a/src/assets/scss/custom.scss b/src/assets/scss/custom.scss new file mode 100755 index 0000000..e69de29 diff --git a/src/assets/scss/dialog.scss b/src/assets/scss/dialog.scss new file mode 100755 index 0000000..e69de29 diff --git a/src/assets/scss/index.scss b/src/assets/scss/index.scss new file mode 100755 index 0000000..e933116 --- /dev/null +++ b/src/assets/scss/index.scss @@ -0,0 +1,22 @@ +@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里面写 + + + +//使用的这个框架自带的而已样式表，改了页面会出问题 +p{ + padding: 0; + margin: 0; +} diff --git a/src/assets/scss/layout.scss b/src/assets/scss/layout.scss new file mode 100755 index 0000000..933dda4 --- /dev/null +++ b/src/assets/scss/layout.scss @@ -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; +} diff --git a/src/assets/scss/utils.scss b/src/assets/scss/utils.scss new file mode 100755 index 0000000..b2cf7d3 --- /dev/null +++ b/src/assets/scss/utils.scss @@ -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; +} + diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss new file mode 100755 index 0000000..e69de29 diff --git a/src/components/common/Music.vue b/src/components/common/Music.vue new file mode 100755 index 0000000..f463d35 --- /dev/null +++ b/src/components/common/Music.vue @@ -0,0 +1,174 @@ + + + + diff --git a/src/components/home/Comment.vue b/src/components/home/Comment.vue index 8cd7543..8a66e68 100755 --- a/src/components/home/Comment.vue +++ b/src/components/home/Comment.vue @@ -3,7 +3,7 @@

2.7w条评论

- +
diff --git a/src/components/home/Home.vue b/src/components/home/Home.vue deleted file mode 100755 index 8e2d1b7..0000000 --- a/src/components/home/Home.vue +++ /dev/null @@ -1,419 +0,0 @@ - - - - - diff --git a/src/components/home/Home2.vue b/src/components/home/Home2.vue old mode 100644 new mode 100755 index 0fe4356..864731b --- a/src/components/home/Home2.vue +++ b/src/components/home/Home2.vue @@ -11,7 +11,7 @@ @touchmove="contentItemTouchmove($event)" @touchend="contentItemTouchend($event,index)">
-
- +
@@ -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() { diff --git a/src/components/home/Share.vue b/src/components/home/Share.vue index c69ed73..edddcba 100755 --- a/src/components/home/Share.vue +++ b/src/components/home/Share.vue @@ -108,7 +108,7 @@
-
+
取消
@@ -118,12 +118,23 @@