From e82502a61ed346bc6d7af294e0a0d9227443f5a3 Mon Sep 17 00:00:00 2001 From: zyronon Date: Sun, 27 Jun 2021 02:38:14 +0800 Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E5=86=99=E5=85=B3=E6=B3=A8=E9=A1=B5?= =?UTF-8?q?=EF=BC=8C=E7=8E=B0=E5=9C=A8=E5=BA=94=E8=AF=A5=E6=98=AF=E5=90=8C?= =?UTF-8?q?=E5=9F=8E=E9=A1=B5=E4=BA=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/img/icon/c8_.png | Bin 253 -> 0 bytes src/assets/scss/utils.scss | 128 ++++----- src/components/Video.vue | 197 +++++++++++-- src/pages/home/Attention.vue | 519 +++++++++++++++++++++-------------- src/pages/home/我的动态.vue | 266 ++++++++++++++++++ src/test.html | 54 +--- 6 files changed, 831 insertions(+), 333 deletions(-) delete mode 100644 src/assets/img/icon/c8_.png create mode 100644 src/pages/home/我的动态.vue diff --git a/src/assets/img/icon/c8_.png b/src/assets/img/icon/c8_.png deleted file mode 100644 index 1b70ab62a3489df7d0877ba59717464fa0771726..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 253 zcmeAS@N?(olHy`uVBq!ia0vp^At21c3?$#V@_qtRasfUeu0Z-fZlF>#dn!-`XGxG> zFoW;6Glh}1JS{t9vIKyFt)4E9As)w*C0K7Tte&X3(aSddT#168>h5P}X1+S2nL69D z_?gM0DMn0F{bWL|R+WUjTyZIJ!4@9@Ru6`$=Nv?Zv>R5WT%6-6u)<-A+c^~`mWHWO zLW{33tO=Pcv6M??hF4Q`CqJXmq0$XY8UvRu_Hv)vr?qrzkW2LJHDWeT|1!DcCkrq! Ym?)atZV)K(2Rews)78&qol`;+0N;>ivH$=8 diff --git a/src/assets/scss/utils.scss b/src/assets/scss/utils.scss index cebd373..6113a1f 100644 --- a/src/assets/scss/utils.scss +++ b/src/assets/scss/utils.scss @@ -1,50 +1,50 @@ @use "sass:math"; -/* - -width - -*/ -$width: 500; -@while $width >= 0 { - .w#{$width}p { - width: #{$width}px !important; - } - $width: $width - 10; -} - - -$width: 100; -@while $width >= 0 { - .w#{$width} { - //width: math.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: math.percentage($height / 100) !important; - } - $height: $height - 1; -} - +///* +// +//width +// +//*/ +//$width: 500; +//@while $width >= 0 { +// .w#{$width}p { +// width: #{$width}px !important; +// } +// $width: $width - 10; +//} +// +// +//$width: 100; +//@while $width >= 0 { +// .w#{$width} { +// //width: math.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: math.percentage($height / 100) !important; +// } +// $height: $height - 1; +//} +// /* @@ -53,43 +53,43 @@ margin */ $margin: 50; -@while $margin >= 0 { +@while $margin >= 5 { .ml#{$margin}p { margin-left: #{$margin}px !important; } - $margin: $margin - 1; + $margin: $margin - 5; } $margin: 50; -@while $margin >= 0 { +@while $margin >= 5 { .mr#{$margin}p { margin-right: #{$margin}px !important; } - $margin: $margin - 1; + $margin: $margin - 5; } $margin: 50; -@while $margin >=0 { +@while $margin >=5 { .mt#{$margin}p { margin-top: #{$margin}px !important; } - $margin: $margin - 1; + $margin: $margin - 5; } $margin: 50; -@while $margin >= 0 { +@while $margin >= 5 { .mb#{$margin}p { margin-bottom: #{$margin}px !important; } - $margin: $margin - 1; + $margin: $margin - 5; } $margin: 50; -@while $margin >= 0 { +@while $margin >= 5 { .m#{$margin}p { margin: #{$margin}px !important; } - $margin: $margin - 1; + $margin: $margin - 5; } @@ -101,43 +101,43 @@ padding $padding: 50; -@while $padding >= 0 { +@while $padding >= 5 { .pl#{$padding}p { padding-left: #{$padding}px !important; } - $padding: $padding - 1; + $padding: $padding - 5; } $padding: 50; -@while $padding >= 0 { +@while $padding >= 5 { .pr#{$padding}p { padding-right: #{$padding}px !important; } - $padding: $padding - 1; + $padding: $padding - 5; } $padding: 50; -@while $padding >= 0 { +@while $padding >= 5 { .pt#{$padding}p { padding-top: #{$padding}px !important; } - $padding: $padding - 1; + $padding: $padding - 5; } $padding: 50; -@while $padding >= 0 { +@while $padding >= 5 { .pb#{$padding}p { padding-bottom: #{$padding}px !important; } - $padding: $padding - 1; + $padding: $padding - 5; } $padding: 50; -@while $padding >= 0 { +@while $padding >= 5 { .p#{$padding}p { padding: #{$padding}px !important; } - $padding: $padding - 1; + $padding: $padding - 5; } diff --git a/src/components/Video.vue b/src/components/Video.vue index 8043f78..eceeb18 100644 --- a/src/components/Video.vue +++ b/src/components/Video.vue @@ -11,8 +11,17 @@
- +
+ + +
+ + +
+ + +
@@ -22,17 +31,23 @@
- {{ video.loves }} + {{ video.loves }}
- {{ video.comments }} + {{ video.comments }}
+
+ + +
+ +
-
@TTentau
@@ -134,6 +149,7 @@ export default { width: 0, isPlaying: !this.disabled, isCommenting: false, + isAttention: false, isSharing: false, line: null, point: null, @@ -154,10 +170,14 @@ export default { v.isMove ? this.move(v.e) : this.end(v.e) }) }, - unmounted() { - console.log('unmounted') - }, methods: { + attention() { + let option = this.$refs['attention-option'] + option.classList.add('attention') + setTimeout(() => { + this.isAttention = true + }, 1000) + }, //划动到下一个视频 swipingVideo() { let videos = this.$refs.video @@ -224,9 +244,9 @@ export default { this.$stopPropagation(e) }, end(e) { - setTimeout(()=>{ + setTimeout(() => { this.isMove = false - },1000) + }, 1000) let video = this.$refs.video video.currentTime = this.currentTime video.play() @@ -238,6 +258,15 @@ export default { diff --git a/src/pages/home/我的动态.vue b/src/pages/home/我的动态.vue new file mode 100644 index 0000000..dd61a43 --- /dev/null +++ b/src/pages/home/我的动态.vue @@ -0,0 +1,266 @@ + + + + + diff --git a/src/test.html b/src/test.html index 5379a10..e453784 100644 --- a/src/test.html +++ b/src/test.html @@ -5,53 +5,25 @@ Title -
-
-
-
+
+ +
+ 123