-
+
+
+
+
+
+
+
+
+
+
+ 互动消息
+
+
+ xxx 赞了你的评论
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 抖音小助手
官方
-
- 已送达 ，sb，凌晨 01:15
+ #今天谁请客呢
+
+ 星期四
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ userinfo.nickname }}
+
+
@@ -54,6 +175,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -213,7 +359,7 @@ export default {
}
},
computed: {
- ...mapState(['friends']),
+ ...mapState(['friends', 'userinfo']),
selectFriends() {
return this.friends.all.filter(v => v.select).length
}
@@ -516,30 +662,33 @@ export default {
.friend {
&:nth-last-child(1) {
img {
- margin: 0 10px;
- padding: 17px;
- background: darkgray;
- width: 30px;
- height: 30px;
+ margin: 0 1rem;
+ padding: 1.7rem;
+ background: @second-btn-color-tran;
+ width: 3rem;
+ height: 3rem;
border-radius: 50%;
+ margin-bottom: .6rem;
+
}
}
.avatar {
position: relative;
- margin-bottom: 6px;
+ margin-bottom: .6rem;
img {
- width: 64px;
- height: 64px;
+ @width: 6.4rem;
+ width: @width;
+ height: @width;
border-radius: 50%;
}
&.on-line::before {
content: ' ';
- border: 4px solid black;
- width: 18px;
- height: 18px;
+ border: .4rem solid black;
+ width: 1.8rem;
+ height: 1.8rem;
background: rgb(115, 254, 73);
border-radius: 50%;
position: absolute;
@@ -551,39 +700,19 @@ export default {
span {
- color: @second-text-color;
+ width: 6.4rem;
+ font-size: 1.2rem;
+ color: lightgray;
display: block;
text-align: center;
word-break: break-all;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
}
}
- .line {
- border-top: 1px solid @line-color;
- }
-
- .requests {
- font-size: 1.4rem;
- box-sizing: border-box;
- margin: 0 20px;
- padding: 20px 0;
- display: flex;
- justify-content: space-between;
- border-bottom: 1px solid @line-color;
-
- .right {
- display: flex;
- align-items: center;
-
- .arrow {
- width: 15px;
- height: 15px;
- }
-
- }
- }
-
.messages {
margin-top: 5px;
@@ -603,23 +732,24 @@ export default {
position: relative;
.head-image {
- margin-left: 20px;
- margin-right: 15px;
- width: 48px;
- height: 48px;
+ margin-left: 2rem;
+ margin-right: 1.5rem;
+ @width: 4.5rem;
+ width: @width;
+ height: @width;
border-radius: 50%;
}
&.on-line::before {
content: ' ';
- border: 3px solid black;
- width: 12px;
- height: 12px;
+ border: .3rem solid black;
+ width: 1.2rem;
+ height: 1.2rem;
background: rgb(115, 254, 73);
border-radius: 50%;
position: absolute;
bottom: 0;
- right: 15px;
+ right: 1.5rem;
}
}
@@ -628,55 +758,69 @@ export default {
flex: 1;
display: flex;
justify-content: space-between;
- padding: 15px 0 15px 0;
- border-bottom: 1px solid @line-color;
+ @padding: 1.4rem;
+ padding: @padding 0 @padding 0;
+ border-bottom: 1px solid @line-color2;
.left {
.name {
- font-size: 1.8rem;
+ font-size: 1.4rem;
color: white;
display: flex;
align-items: flex-start;
.tag {
- margin-left: 5px;
+ margin-left: .5rem;
font-size: 1rem;
- background: @line-color;
- padding: 2px 5px;
- border-radius: 2px;
+ background: @second-btn-color-tran;
+ color: @second-text-color;
+ padding: .2rem .5rem;
+ border-radius: .2rem;
}
}
.detail {
color: @second-text-color;
font-size: 1.2rem;
- margin-top: 4px;
+ margin-top: .4rem;
+ display: flex;
+ align-items: center;
+
+ .point {
+ display: inline-block;
+ margin-left: .8rem;
+ margin-right: .8rem;
+ border-radius: 50%;
+ width: 1.5px;
+ height: 1.5px;
+ background: @second-text-color;
+ }
.sent {
- width: 10px;
- height: 10px;
+ width: 1rem;
+ height: 1rem;
}
}
}
.right {
- margin-right: 30px;
+ margin-right: 3rem;
display: flex;
align-items: center;
.arrow {
- width: 15px;
- height: 15px;
+ width: 1.5rem;
+ height: 1.5rem;
}
.camera {
- width: 20px;
- height: 20px;
+ width: 2rem;
+ height: 2rem;
}
.not-read {
- width: 10px;
- height: 10px;
+ width: .7rem;
+ height: .7rem;
border-radius: 50%;
background: yellow;
}
@@ -685,8 +829,8 @@ export default {
font-size: 1.2rem;
display: block;
color: black;
- padding: 1px 6px;
- border-radius: 10px;
+ padding: 1px .6rem;
+ border-radius: 1rem;
background: yellow;
}
}
@@ -697,13 +841,13 @@ export default {
.not-more {
color: @second-text-color;
text-align: center;
- padding: 20px;
+ padding: 2rem;
}
}
.recommend {
.title {
- padding: 20px 20px 10px 20px;
+ padding: 2rem 2rem 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
@@ -712,17 +856,17 @@ export default {
color: @second-text-color;
img {
- width: 10px;
- height: 10px;
+ width: 1rem;
+ height: 1rem;
}
}
.right {
border-radius: 50%;
background: @second-text-color;
- padding: 5px;
- width: 10px;
- height: 10px;
+ padding: .5rem;
+ width: 1rem;
+ height: 1rem;
}
}
@@ -739,10 +883,10 @@ export default {
}
.head-image {
- margin-left: 20px;
- margin-right: 15px;
- width: 48px;
- height: 48px;
+ margin-left: 2rem;
+ margin-right: 1.5rem;
+ width: 4.8rem;
+ height: 4.8rem;
border-radius: 50%;
}
@@ -750,7 +894,7 @@ export default {
flex: 1;
display: flex;
justify-content: space-between;
- padding: 15px 0;
+ padding: 1.5rem 0;
.left {
.name {
@@ -766,15 +910,15 @@ export default {
}
.right {
- margin-right: 20px;
+ margin-right: 2rem;
display: flex;
align-items: center;
.button {
background: @primary-btn-color;
- margin-left: 8px;
- padding: 8px 20px;
- border-radius: 3px;
+ margin-left: .8rem;
+ padding: .8rem 2rem;
+ border-radius: .3rem;
&:nth-last-child(1) {
background: rgb(58, 58, 67);
diff --git a/src/pages/people/components/People.vue b/src/pages/people/components/People.vue
index b154b8c..ce4dcd2 100644
--- a/src/pages/people/components/People.vue
+++ b/src/pages/people/components/People.vue
@@ -3,36 +3,41 @@
![]()
-
-
{{ people.name }}
-
- 该用户关注了你
-
-
-
-
-
-
-
回关
-
-
-
-
-
-
-
发私信
-
-
-
-
+
+
+
{{ people.name }}
+
+
+ 发来一个关注请求
+
+
+ 该用户关注了你
+
+
+
+
+
+ 回关
+
+
+
+ 已关注
+
+
+
+ 相互关注
+
+
+
+ 忽略
+ 通过
+
+
+
+
@@ -56,11 +61,21 @@ export default {
people: {
type: Object,
default: {}
+ },
+ mode: {
+ type: String,
+ default: 'fans'
}
},
data() {
return {
- showPopover: false
+ showPopover: false,
+ RELATE_ENUM: {
+ FOLLOW_ME: 1,//只关注我
+ FOLLOW_EACH_OTHER: 2,//互相关注
+ FOLLOW_HE: 3,//我关注他
+ REQUEST_FOLLOW: 4//关注请求
+ }
}
},
computed: {},
@@ -140,6 +155,10 @@ export default {
border-radius: .2rem;
background: rgb(58, 58, 67);
+ &:only-child {
+ background: yellow;
+ }
+
&.address-list {
padding: .7rem 3rem;
}
diff --git a/src/router/index.js b/src/router/index.js
index b0ac2ab..d89e325 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -58,6 +58,7 @@ import VideoCollect from "../pages/me/collect/VideoCollect";
import MyMusic from "../pages/me/MyMusic";
import FollowAndFans from "../pages/people/FollowAndFans";
import MyRequestUpdate from "../pages/me/MyRequestUpdate";
+import Fans from "../pages/message/Fans";
const routes = [
// {path: '', component: Music},
@@ -79,11 +80,16 @@ const routes = [
{path: '/attention', component: Attention},
{path: '/publish', component: Publish},
+
+
{path: '/message', component: Message},
{path: '/message/share-to-friend', component: Share2Friend},
{path: '/message/joined-group-chat', component: JoinedGroupChat},
{path: '/message/chat', component: Chat},
{path: '/message/chat-detail', component: ChatDetail},
+ {path: '/message/fans', component: Fans},
+
+
{path: '/edit-userinfo', component: EditUserInfo},
{path: '/edit-userinfo-item', component: EditUserInfoItem},
{path: '/country-choose', component: countryChoose},
diff --git a/src/store/index.js b/src/store/index.js
index d34dcbd..7b4548e 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -3,6 +3,12 @@ import enums from '../utils/enums'
import api from '../api/index'
import CONST_VAR from "../utils/const_var";
+let RELATE_ENUM = {
+ FOLLOW_ME: 1,//只关注我
+ FOLLOW_EACH_OTHER: 2,//互相关注
+ FOLLOW_HE: 3,//我关注他
+ REQUEST_FOLLOW: 4//关注请求
+}
const store = Vuex.createStore({
state: {
bodyHeight: document.body.clientHeight,
@@ -58,7 +64,8 @@ const store = Vuex.createStore({
"isDelete": 0,
"account": "234",
"pinyin": "M",
- "select": false
+ "select": false,
+ type: RELATE_ENUM.REQUEST_FOLLOW
},
{
"id": "2b446aa8-5d31-429a-8e39-d4705eb4e900",
@@ -76,7 +83,8 @@ const store = Vuex.createStore({
"isDelete": 0,
"account": "33453",
"pinyin": "Q",
- "select": false
+ "select": false,
+ type: RELATE_ENUM.FOLLOW_ME
},
{
"id": "2d8622b4-7112-4bc7-a0cf-00a268a85504",
@@ -94,7 +102,8 @@ const store = Vuex.createStore({
"isDelete": 0,
"account": "234234",
"pinyin": "#",
- "select": false
+ "select": false,
+ type: RELATE_ENUM.FOLLOW_HE
},
{
"id": "2e38900b-65f7-426a-8e8b-edb403df35fb",
@@ -112,7 +121,8 @@ const store = Vuex.createStore({
"isDelete": 0,
"account": "1111",
"pinyin": "#",
- "select": false
+ "select": false,
+ type: RELATE_ENUM.FOLLOW_EACH_OTHER
},
{
"id": "3cd53cb5-04f8-4439-ad2b-e57b3f9b8c73",
- 状态设置
+ 
+ 状态设置
