diff --git a/src/assets/dicon/icon/bfy.png b/src/assets/img/icon/msg-icon1.png similarity index 100% rename from src/assets/dicon/icon/bfy.png rename to src/assets/img/icon/msg-icon1.png diff --git a/src/assets/dicon/icon/bg0.png b/src/assets/img/icon/msg-icon2.png similarity index 100% rename from src/assets/dicon/icon/bg0.png rename to src/assets/img/icon/msg-icon2.png diff --git a/src/assets/dicon/icon/bfz.png b/src/assets/img/icon/msg-icon3.png similarity index 100% rename from src/assets/dicon/icon/bfz.png rename to src/assets/img/icon/msg-icon3.png diff --git a/src/assets/dicon/icon/bg3.png b/src/assets/img/icon/msg-icon4.png similarity index 100% rename from src/assets/dicon/icon/bg3.png rename to src/assets/img/icon/msg-icon4.png diff --git a/src/pages/home/Message.vue b/src/pages/home/Message.vue index b0b21e9..fa77146 100644 --- a/src/pages/home/Message.vue +++ b/src/pages/home/Message.vue @@ -9,19 +9,19 @@
@@ -65,12 +65,12 @@无更多消息
- + @@ -102,9 +98,11 @@ background: #2e3244; color: #b8b9c1; height: 100%; + .header { .title { position: relative; + span { position: absolute; right: 10px; @@ -112,65 +110,55 @@ } } } + .toolbar { display: flex; justify-content: space-around; + div { text-align: center; - &:nth-child(1) { - img { - background: rgb(79, 136, 251); - } - } - &:nth-child(2) { - img { - background: rgb(248, 53, 95); - } - } - &:nth-child(3) { - img { - background: rgb(28, 194, 98); - } - } - &:nth-child(4) { - img { - background: rgb(195, 106, 250); - } - } + img { - padding: 10px; border-radius: 3px; - width: 25px; - height: 25px; + width: 45px; + height: 45px; } + span { display: block; } } } + .messages { border-top: 1px solid #494950; + .message { .content { float: left; width: 85%; + .head-image { width: 40px; border-radius: 50%; float: left; } + .comment-container { width: 85%; + .time { color: gray; } } } + .love { text-align: center; + .love-image { width: 30px; border-radius: 50%;