+
+
![]()
{{ item.name }}
-
-
-
-
+
+
-
- 
+
+
+
转发
-
转发
- 
- 私信朋友
+
- 私信朋友
+
+
-
- 
+
+
+
-
-
- 保存本地
-
-
- 保存本地
-
-
- 生成图片
+
- 生成图片
+
+ 
+ 合拍
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ 合拍
-
- 私信朋友
+
- 私信朋友
+
+ 
+ 帮上热门
-
-
-
+ 帮上热门
-
- 转发到日常
+
- 转发到日常
+
+ 
+ 举报
-
+ 举报
-
+
-
+
+
-
-
-
-
-
- 举报音乐
+
- 举报音乐
+
+
-
-
-
+
- 
+
建群分享
-
+
建群分享
- 
- 一起视频
+
- 一起视频
+
+
+ 一起看视频
-
+ 一起看视频
-
- 举报
+
- 举报
+
+ 
+ 不感兴趣
-
+ 不感兴趣
-
- 合拍
+
- 合拍
+
+
+ 生成图片
-
+ 生成图片
- 
+
+
+
动态壁纸
-
动态壁纸
-
- 帮上热门
+
@@ -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,
- 帮上热门
+
+
+ 播放反馈
-
+ 播放反馈
-
- 不感兴趣
+
+
+ 
-
- 不感兴趣
+
+
+
+
+ 私信朋友
-
+ 私信朋友
-
- 播放反馈
+
@@ -139,18 +112,15 @@
- 播放反馈
+
+
+ 举报音乐
+
+
+
+
+ 举报音乐
+
+
+ 转发到日常
+
+
+ 转发到日常
+
+
+ 私信朋友
+ 私信朋友
-
-
-
- 一起看视频
- {{
- selectFriends.length > 1 ? '分别发送' : '私信发送'
- }}
-
-
+
+ 建群并发送
+
+ {{
+ selectFriends.length > 1 ? '分别发送' : '发送'
+ }}
+