From 089bf5d2378b3c4a61d795b2a92bede2c193b771 Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Tue, 06 Jan 2026 11:22:58 +0800
Subject: [PATCH] 1
---
src/components/chat/messaege/FriendApplyMessage.vue | 150 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 150 insertions(+), 0 deletions(-)
diff --git a/src/components/chat/messaege/FriendApplyMessage.vue b/src/components/chat/messaege/FriendApplyMessage.vue
new file mode 100644
index 0000000..5df0dc4
--- /dev/null
+++ b/src/components/chat/messaege/FriendApplyMessage.vue
@@ -0,0 +1,150 @@
+<template>
+ <!-- 好友申请消息 -->
+ <div class="apply-card">
+ <div class="card-header">
+ <img class="avatar" :src="avatar" />
+ <div class="nickname">No. {{ nickname }}</div>
+ <div class="datetime">{{ datetime }}</div>
+ <div class="remarks">
+ <span>备注信息：{{ remarks }}</span>
+ </div>
+ </div>
+
+ <div class="card-footer">
+ <div class="mini-button" @click="handle(1)">同意</div>
+ <el-divider direction="vertical"></el-divider>
+ <div class="mini-button" @click="handle(2)">拒绝</div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'FriendApplyMessage',
+ props: {
+ data: {
+ type: Object,
+ default() {
+ return {}
+ },
+ },
+ },
+ data() {
+ return {
+ avatar:
+ 'http://im-img.gzydong.club/media/images/avatar/20210602/60b6f03598ed0104301.png',
+ nickname: '独特态度',
+ datetime: '05/09 12:13 分',
+ remarks: '编辑个签，展示我的独特态度 展示我的独特态度。',
+ apply_id: 0,
+ }
+ },
+ created() {},
+ methods: {
+ handle(type) {
+ alert(type)
+ },
+ },
+}
+</script>
+<style lang="less" scoped>
+.apply-card {
+ position: relative;
+ width: 170px;
+ min-height: 180px;
+ border-radius: 15px;
+ overflow: hidden;
+ transition: all 0.5s;
+ box-sizing: border-box;
+ background-image: linear-gradient(-84deg, #1ab6ff 0, #1ab6ff 0, #82c1f3 100%);
+ // #028fff
+
+ &:hover {
+ transform: scale(1.02);
+ }
+
+ .card-header {
+ position: relative;
+ width: 100%;
+ height: 135px;
+
+ .avatar {
+ position: absolute;
+ top: 18px;
+ left: 8px;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background: white;
+ }
+
+ .nickname {
+ position: absolute;
+ top: 15px;
+ right: 8px;
+ width: 90px;
+ height: 25px;
+ font-size: 10px;
+ text-align: center;
+ line-height: 25px;
+ color: white;
+ border-bottom: 1px dashed white;
+ }
+
+ .datetime {
+ position: absolute;
+ top: 42px;
+ right: 11.5px;
+ color: white;
+ font-size: 10px;
+ transform: scale(0.9);
+ }
+
+ .remarks {
+ position: absolute;
+ bottom: 5px;
+ color: white;
+ font-size: 10px;
+ padding: 3px 5px;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 3;
+ overflow: hidden;
+ transform: scale(0.95);
+ }
+ }
+
+ .card-footer {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 40px;
+ border-top: 1px solid white;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
+
+ /deep/.el-divider {
+ background: white;
+ }
+
+ .mini-button {
+ display: flex;
+ width: 50px;
+ height: 25px;
+ margin: 0 10px;
+ text-align: center;
+ align-items: center;
+ justify-content: center;
+ font-size: 13px;
+ color: white;
+ cursor: pointer;
+
+ &:hover {
+ font-size: 14px;
+ }
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3