diff --git a/src/components/Comment.vue b/src/components/Comment.vue index 80f7523..99d4740 100644 --- a/src/components/Comment.vue +++ b/src/components/Comment.vue @@ -28,18 +28,20 @@
{{ item.name }}
{{ item.text }}
-
{{ $time(item.time) }}
-
回复
+
+
{{ $time(item.time) }} · 上海
+
回复
+
+
+ + + {{ formatNumber(item.loveNum) }} +
-
- - - {{ formatNumber(item.loveNum) }} -
@@ -54,17 +56,20 @@
{{ child.text }}
-
{{ $time(child.time) }}
-
回复
+
+
{{ $time(item.time) }} · 上海
+
回复
+
+
+ + + {{ formatNumber(item.loveNum) }} +
-
- - - {{ formatNumber(child.loveNum) }} -
@@ -176,6 +181,9 @@ export default { isCall: false, } }, + mounted() { + this.getData() + }, methods: { send() { this.comments.push({ @@ -211,7 +219,7 @@ export default { text: '要么之前吴京说了一句话对一个小女孩说，以后别来娱乐圈', loveNum: 9174, isLoved: false, - time: '2021-08-24 20:25', + time: '2022-08-24 20:25', }, { id: '11', @@ -221,7 +229,7 @@ export default { text: '@nana max', loveNum: 695, isLoved: false, - time: '2021-08-24 20:29', + time: '2023-01-24 20:29', }, { id: '12', @@ -231,7 +239,7 @@ export default { text: '对对 我也刷到过这个视频', loveNum: 1253, isLoved: false, - time: '2021-08-24 20:59', + time: '2023-02-23 20:59', }, ] }, @@ -311,19 +319,6 @@ export default { // this.isCommenting = !this.isCommenting; // console.log(666) // } - $time(time) { - let date = new Date(time) - let now = new Date() - let day = now.getDate() - date.getDate() - let str = '' - if (day === 0) { - let hour = now.getHours() - date.getHours() - str = ` ${hour}小时前` - } else if (day === 1) str = `昨天${date.getHours()}:${date.getMinutes()}` - else if (day === 2) str = `前天${date.getHours()}:${date.getMinutes()}` - else str = time - return str - }, call() { console.log(this.commit) } @@ -359,21 +354,27 @@ export default { } .comment { - width: 100%; + width: 100vw; height: v-bind(height); background: #fff; z-index: 5; border-radius: 10rem 10rem 0 0; .wrapper { + width: 100%; position: relative; padding-top: 40rem; padding-bottom: 60rem; } .items { + width: 100%; + .item { + width: 100%; + .main { + width: 100%; padding: 5rem 0; display: flex; @@ -435,12 +436,14 @@ export default { } .content { + width: 100%; display: flex; - flex: 1; font-size: 14rem; .comment-container { - width: 85%; + flex: 1; + margin-right: 20rem; + .name { color: @second-text-color; @@ -465,35 +468,40 @@ export default { .time-wrapper { display: flex; align-items: center; + justify-content: space-between; + font-size: 12rem; + + .left { + display: flex; + + .time { + color: #c4c3c3; + margin-right: 10rem; + } - .time { - color: #c4c3c3; - margin-right: 15rem; + .reply-text { + color: @second-text-color; + } } - .reply-text { + .love { color: @second-text-color; + display: flex; + align-items: center; + + .love-image { + width: 18rem; + border-radius: 50%; + } + + span { + font-size: 10rem; + word-break: keep-all; + } } } } } - - .love { - color: @second-text-color; - text-align: center; - width: 30rem; - padding-right: 10rem; - - .love-image { - width: 25rem; - border-radius: 50%; - } - - span { - font-size: 10rem; - transform: translateY(-5rem); - } - } } } diff --git a/src/components/dialog/FromBottomDialog.vue b/src/components/dialog/FromBottomDialog.vue index 6d9094c..2663b51 100644 --- a/src/components/dialog/FromBottomDialog.vue +++ b/src/components/dialog/FromBottomDialog.vue @@ -193,7 +193,7 @@ export default { z-index: 9; position: fixed; width: 100%; - overflow: auto; + overflow-y: auto; padding-top: 24rem; bottom: 0; left: 0; diff --git a/src/components/slide/ItemToolbar.vue b/src/components/slide/ItemToolbar.vue index fbcaa03..3823856 100644 --- a/src/components/slide/ItemToolbar.vue +++ b/src/components/slide/ItemToolbar.vue @@ -75,12 +75,12 @@ function showComments() { {{ Utils.formatNumber(props.item.comment_count) }}
-
- +
+ {{ Utils.formatNumber(props.item.comment_count) }}
-
+ diff --git a/src/pages/home/components/IndicatorHome.vue b/src/pages/home/components/IndicatorHome.vue index e629410..b1e4944 100644 --- a/src/pages/home/components/IndicatorHome.vue +++ b/src/pages/home/components/IndicatorHome.vue @@ -205,14 +205,6 @@ export default { transition: all .3s; font-weight: bold; - &.isLight { - .tab{ - &.active { - color: black!important; - } - } - } - .notice { opacity: 0; top: 0; diff --git a/src/utils/index.jsx b/src/utils/index.jsx index 8c7f4ff..0f91080 100644 --- a/src/utils/index.jsx +++ b/src/utils/index.jsx @@ -324,6 +324,30 @@ export default { return dayjs(val).format('YYYY-MM-DD HH:mm:ss') } }, + $time(time) { + let date = new dayjs(time) + let now = new dayjs() + let d = now.valueOf() - date.valueOf() + let str = '' + if (d < 1000 * 60) { + str = '刚刚' + } else if (d < 1000 * 60 * 60) { + str = `${(d / (1000 * 60)).toFixed()}分钟前` + } else if (d < 1000 * 60 * 60 * 24) { + str = `${(d / (1000 * 60 * 60)).toFixed()}小时前` + } else if (d < 1000 * 60 * 60 * 24 * 2) { + str = '1天前' + } else if (d < 1000 * 60 * 60 * 24 * 3) { + str = '2天前' + } else if (d < 1000 * 60 * 60 * 24 * 4) { + str = '3天前' + } else if (date.isSame(now, 'year')) { + str = dayjs(time).format('MM-DD') + } else { + str = dayjs(time).format('YYYY-MM-DD') + } + return str + }, $duration(v) { if (!v) return '00:00' let m = Math.floor(v / 60)