From 775066924bafd8475e000dc8d17aa4e698c9c94e Mon Sep 17 00:00:00 2001 From: zyronon Date: Thu, 28 Mar 2024 18:22:42 +0800 Subject: [PATCH] save --- src/components/Comment.vue | 26 ++- src/components/Share.vue | 355 ++++++++++++++----------------------- src/pages/home/index.vue | 7 +- 3 files changed, 149 insertions(+), 239 deletions(-) diff --git a/src/components/Comment.vue b/src/components/Comment.vue index 48f36f2..4c8d8ba 100644 --- a/src/components/Comment.vue +++ b/src/components/Comment.vue @@ -12,8 +12,11 @@
@@ -40,7 +43,6 @@
- {{ formatNumber(item.loveNum) }}
@@ -347,14 +349,24 @@ export default { justify-content: space-between; border-radius: 10rem 10rem 0 0; - span { + .num { + width: 100%; + position: absolute; font-size: 12rem; + font-weight: bold; text-align: center; } - img { - width: 13rem; - height: 13rem; + .right { + display: flex; + gap: 12rem; + + svg { + background: rgb(242, 242, 242); + padding: 4rem; + font-size: 16rem; + border-radius: 50%; + } } } diff --git a/src/components/Share.vue b/src/components/Share.vue index 64a001a..6937b8c 100644 --- a/src/components/Share.vue +++ b/src/components/Share.vue @@ -14,122 +14,95 @@ 分享给朋友 -
-
+
+
{{ item.name }}
-
- - 更多 +
+ + 更多朋友
-
-
+
- - -
-
- - + +
@@ -139,18 +112,15 @@
-
-
- - 创建群聊 -
-
- 一起看视频 - {{ - selectFriends.length > 1 ? '分别发送' : '私信发送' - }} - -
+
+ 建群并发送 + + {{ + selectFriends.length > 1 ? '分别发送' : '发送' + }} +
@@ -163,6 +133,7 @@ import Check from "./Check"; import FromBottomDialog from "./dialog/FromBottomDialog"; import DouyinCode from "./DouyinCode"; import {useBaseStore} from "@/store/pinia"; +import {$no} from "@/utils"; export default { name: "Share", @@ -200,10 +171,10 @@ export default { }, data() { return { - isCreateChat: false, } }, methods: { + $no, async copyLink() { this.closeShare() this.$showLoading() @@ -237,13 +208,13 @@ export default { color: white; box-sizing: border-box; - @space-width: 18rem; - @avatar-width: 48rem; - @icon-width: 28rem; + @space-width: 26rem; + @avatar-width: 58rem; + @icon-width: 30rem; .title { font-size: 14rem; - padding: 20rem; + padding: 10rem 20rem 30rem 20rem; position: relative; display: flex; align-items: center; @@ -259,127 +230,70 @@ export default { } } - .friends { + .list { overflow-x: scroll; display: flex; - padding-right: @space-width * 2; - - .friend { - width: @avatar-width; - position: relative; - margin-left: @space-width; - margin-bottom: @space-width; - font-size: 10rem; - display: flex; - flex-direction: column; - align-items: center; + padding: 0 20rem; + gap: 22rem; + padding-bottom: 50rem; + } - .avatar { - width: @avatar-width; - height: @avatar-width; - border-radius: 50%; - } + @c: rgb(51, 51, 51); - span { - margin-top: 5rem; - text-align: center; - width: @avatar-width; - //white-space: nowrap; - //overflow: hidden; - //text-overflow: ellipsis; - } + .option { + width: @avatar-width; + position: relative; + font-size: 10rem; + display: flex; + flex-direction: column; + align-items: center; - .checked { - position: absolute; - top: @avatar-width - 1.5; - right: -2px; - width: 20rem; - height: 20rem; - border-radius: 50%; - } + .avatar { + width: @avatar-width; + height: @avatar-width; + border-radius: 50%; } - .more { - margin-left: @space-width; - margin-bottom: @space-width; - - img { - width: 20rem; - padding: 13rem; - border-radius: 50%; - margin-bottom: 3rem; - background: var(--second-btn-color-tran); - //background: rgb(56, 58, 57); - } + .checked { + position: absolute; + top: @avatar-width - 1.5; + right: -2px; + width: 20rem; + height: 20rem; + border-radius: 50%; } span { - font-size: 12rem; - display: block; + margin-top: 8rem; text-align: center; - word-break: break-all; + width: @avatar-width; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } - } - - .line { - height: 1px; - background: #1c1c1c; - margin-left: 20rem; - width: calc(100% - 40rem); - margin-bottom: 10rem; - } - - .shares { - overflow-x: scroll; - display: flex; - padding-right: @space-width * 2; - - .share-to { - margin-left: @space-width; - margin-bottom: @space-width; - - - img { - width: @avatar-width; - height: @avatar-width; - border-radius: 50%; - } - span { - color: var(--second-text-color); - font-size: 10rem; - display: block; - text-align: center; - } + .more { + width: 20rem; + padding: 19rem; + border-radius: 50%; + background: @c; + //background: rgb(56, 58, 57); } - } - .toolbar { - overflow-x: scroll; - display: flex; - padding-right: @space-width * 2; - - - .tool { - float: left; - margin-left: @space-width; - margin-bottom: @space-width; - - img { - width: @icon-width; - height: @icon-width; - padding: 10rem; - border-radius: 50%; - //background: var(--second-btn-color); - background: rgb(56, 58, 57); - } + svg { + .more; + width: unset; + padding: 16rem; + font-size: 26rem; + color: rgb(205, 205, 205); + } - span { - color: var(--second-text-color); - font-size: 10rem; - display: block; - text-align: center; - } + .small { + width: @icon-width; + height: @icon-width; + padding: 14rem; + border-radius: 50%; + background: @c; } } @@ -414,27 +328,16 @@ export default { } } - .create-chat { - font-size: 11rem; - margin: 10rem 0; + .btns { display: flex; + gap: 10rem; align-items: center; - color: var(--second-text-color); + justify-content: space-between; - .check { - margin-right: 10rem; - width: 16rem; - height: 16rem; - //transform: scale(1.2); + .button { + flex: 1; } } - - .btns { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 10rem; - } - } } diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue index b27b60d..7fc3565 100644 --- a/src/pages/home/index.vue +++ b/src/pages/home/index.vue @@ -147,11 +147,6 @@ @play-feedback="state.showPlayFeedback = true" @shareToFriend="delayShowDialog(e => state.shareToFriend = true)" @showDouyinCode="state.showDouyinCode = true" - @showShare2WeChatZone="state.shareType = 2" - @share2WeChat="state.shareType = 3" - @share2QQZone="state.shareType = 4" - @share2QQ="state.shareType = 5" - @share2Webo="state.shareType = 8" @download="state.shareType = 9" /> @@ -223,7 +218,7 @@ const baseStore = useBaseStore() const state = reactive({ baseIndex: 1, - navIndex: 3, + navIndex: 4, test: '', recommendList: [], isSharing: false,