添加聊天

src/assets/svg/add2.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 20" clip-path="url(#clip0_20_990)">
+<path id="Union" d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM12 3C7.02943 3 3 7.02943 3 12C3 16.9706 7.02943 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02943 16.9706 3 12 3ZM12.0283 7C12.5804 7.0002 13.0283 7.44784 13.0283 8V11H16.0283L16.1309 11.0049C16.6348 11.0564 17.0283 11.4824 17.0283 12C17.0283 12.5176 16.6348 12.9436 16.1309 12.9951L16.0283 13H13.0283V16C13.0283 16.5522 12.5804 16.9998 12.0283 17C11.476 17 11.0283 16.5523 11.0283 16V13H8.02832C7.47604 13 7.02832 12.5523 7.02832 12C7.02832 11.4477 7.47604 11 8.02832 11H11.0283V8C11.0283 7.44772 11.476 7 12.0283 7Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_20_990">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/add3.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 32">
+<path id="Union" d="M10 0C10.5523 2.41411e-08 11 0.447715 11 1V9H19C19.5523 9 20 9.44772 20 10C20 10.5523 19.5523 11 19 11H11V19C11 19.5523 10.5523 20 10 20C9.44772 20 9 19.5523 9 19V11H1C0.447715 11 0 10.5523 0 10C0 9.44771 0.447715 9 1 9H9V1C9 0.447715 9.44772 -2.41411e-08 10 0Z" fill="#8D8D8D"/>
+</g>
+</svg>

src/assets/svg/emoji.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 21" clip-path="url(#clip0_20_996)">
+<path id="Union" d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM12 3C7.02943 3 3 7.02943 3 12C3 16.9706 7.02943 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02943 16.9706 3 12 3ZM14.6104 15.0439C14.8601 14.5565 15.4563 14.36 15.9473 14.6055C16.4412 14.8525 16.6415 15.4533 16.3945 15.9473L15.5 15.5C16.3365 15.9183 16.3903 15.9461 16.3936 15.9482V15.9492L16.3926 15.9512C16.3919 15.9526 16.3905 15.9544 16.3896 15.9561C16.388 15.9592 16.3859 15.9627 16.3838 15.9668C16.3793 15.9754 16.3739 15.9867 16.3672 15.999C16.3538 16.0237 16.3359 16.0557 16.3135 16.0938C16.2685 16.17 16.2051 16.272 16.1211 16.3906C15.9536 16.6271 15.7005 16.9369 15.3516 17.2471C14.6453 17.8749 13.5428 18.5 12 18.5C10.4572 18.5 9.35473 17.8749 8.64844 17.2471C8.2995 16.9369 8.04639 16.6271 7.87891 16.3906C7.79488 16.272 7.73146 16.17 7.68652 16.0938C7.66411 16.0557 7.64617 16.0237 7.63281 15.999C7.62612 15.9867 7.6207 15.9754 7.61621 15.9668C7.6141 15.9627 7.61198 15.9592 7.61035 15.9561C7.60951 15.9544 7.60813 15.9526 7.60742 15.9512L7.60645 15.9492V15.9482C7.60974 15.9461 7.66348 15.9183 8.5 15.5L7.60547 15.9473C7.35848 15.4533 7.55876 14.8525 8.05273 14.6055C8.54371 14.36 9.13991 14.5565 9.38965 15.0439L9.3916 15.0459C9.39408 15.0505 9.39953 15.0617 9.40918 15.0781C9.42868 15.1112 9.46303 15.1656 9.51172 15.2344C9.60987 15.3729 9.76306 15.5631 9.97656 15.7529C10.3953 16.1251 11.0428 16.5 12 16.5C12.9572 16.5 13.6047 16.1251 14.0234 15.7529C14.2369 15.5631 14.3901 15.3729 14.4883 15.2344C14.537 15.1656 14.5713 15.1112 14.5908 15.0781C14.6005 15.0617 14.6059 15.0505 14.6084 15.0459C14.6094 15.0441 14.6105 15.0437 14.6104 15.0439ZM8.5 8C9.05229 8 9.5 8.44772 9.5 9V9.5C9.5 10.0523 9.05229 10.5 8.5 10.5C7.94772 10.5 7.5 10.0523 7.5 9.5V9C7.5 8.44772 7.94772 8 8.5 8ZM15.5 8C16.0523 8 16.5 8.44772 16.5 9V9.5C16.5 10.0523 16.0523 10.5 15.5 10.5C14.9477 10.5 14.5 10.0523 14.5 9.5V9C14.5 8.44772 14.9477 8 15.5 8Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_20_996">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/lf-arrow.svg

@@ -0,0 +1,13 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 19">
+<g clip-path="url(#clip0_20_957)">
+<rect width="24" height="24" rx="6" fill="white" fill-opacity="0.8"/>
+<path id="Rectangle 2" d="M13.6569 6.34315L8 12L13.6569 17.6569" stroke="#4765DD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_20_957">
+<rect width="24" height="24" rx="6" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/more.svg

@@ -0,0 +1,15 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame">
+<g clip-path="url(#clip0_20_952)">
+<path d="M0 9.6C0 6.23969 0 4.55953 0.653961 3.27606C1.2292 2.14708 2.14708 1.2292 3.27606 0.653961C4.55953 0 6.23969 0 9.6 0H14.4C17.7603 0 19.4405 0 20.7239 0.653961C21.8529 1.2292 22.7708 2.14708 23.346 3.27606C24 4.55953 24 6.23969 24 9.6V14.4C24 17.7603 24 19.4405 23.346 20.7239C22.7708 21.8529 21.8529 22.7708 20.7239 23.346C19.4405 24 17.7603 24 14.4 24H9.6C6.23969 24 4.55953 24 3.27606 23.346C2.14708 22.7708 1.2292 21.8529 0.653961 20.7239C0 19.4405 0 17.7603 0 14.4V9.6Z" fill="white" fill-opacity="0.8"/>
+<path id="Vector" d="M6 13.5C6.82843 13.5 7.5 12.8284 7.5 12C7.5 11.1716 6.82843 10.5 6 10.5C5.17157 10.5 4.5 11.1716 4.5 12C4.5 12.8284 5.17157 13.5 6 13.5Z" fill="#4765DD"/>
+<path id="Vector_2" d="M12 13.5C12.8284 13.5 13.5 12.8284 13.5 12C13.5 11.1716 12.8284 10.5 12 10.5C11.1716 10.5 10.5 11.1716 10.5 12C10.5 12.8284 11.1716 13.5 12 13.5Z" fill="#4765DD"/>
+<path id="Vector_3" d="M18 13.5C18.8284 13.5 19.5 12.8284 19.5 12C19.5 11.1716 18.8284 10.5 18 10.5C17.1716 10.5 16.5 11.1716 16.5 12C16.5 12.8284 17.1716 13.5 18 13.5Z" fill="#4765DD"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_20_952">
+<path d="M0 9.6C0 6.23969 0 4.55953 0.653961 3.27606C1.2292 2.14708 2.14708 1.2292 3.27606 0.653961C4.55953 0 6.23969 0 9.6 0H14.4C17.7603 0 19.4405 0 20.7239 0.653961C21.8529 1.2292 22.7708 2.14708 23.346 3.27606C24 4.55953 24 6.23969 24 9.6V14.4C24 17.7603 24 19.4405 23.346 20.7239C22.7708 21.8529 21.8529 22.7708 20.7239 23.346C19.4405 24 17.7603 24 14.4 24H9.6C6.23969 24 4.55953 24 3.27606 23.346C2.14708 22.7708 1.2292 21.8529 0.653961 20.7239C0 19.4405 0 17.7603 0 14.4V9.6Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/person.svg

@@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 24">
+<g id="&#233;&#128;&#154;&#232;&#174;&#175;">
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;" d="M4 17.4V19.2C4 20.1941 4.89543 21 6 21H18C19.1046 21 20 20.1941 20 19.2V4.8C20 3.80589 19.1046 3 18 3H6C4.89543 3 4 3.80589 4 4.8V6.6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;_2" d="M3 15H5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;_3" d="M3 12H5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;_4" d="M3 9H5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;" d="M12 10.5C13.1046 10.5 14 9.60457 14 8.5C14 7.39543 13.1046 6.5 12 6.5C10.8954 6.5 10 7.39543 10 8.5C10 9.60457 10.8954 10.5 12 10.5Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;_5" d="M16 17.5C16 15.2908 14.2092 13.5 12 13.5C9.79085 13.5 8 15.2908 8 17.5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+</svg>

src/assets/svg/qrcode.svg

@@ -0,0 +1,17 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame" clip-path="url(#clip0_20_1076)">
+<path id="Vector" d="M10 6C10 5.44772 9.55228 5 9 5H6C5.44772 5 5 5.44772 5 6V9C5 9.55228 5.44772 10 6 10H9C9.55228 10 10 9.55228 10 9V6Z" stroke="#8D8D8D" stroke-linejoin="round"/>
+<path id="Vector_2" d="M10 15C10 14.4477 9.55228 14 9 14H6C5.44772 14 5 14.4477 5 15V18C5 18.5523 5.44772 19 6 19H9C9.55228 19 10 18.5523 10 18V15Z" stroke="#8D8D8D" stroke-linejoin="round"/>
+<path id="Vector_3" d="M19 15C19 14.4477 18.5523 14 18 14H15C14.4477 14 14 14.4477 14 15V18C14 18.5523 14.4477 19 15 19H18C18.5523 19 19 18.5523 19 18V15Z" stroke="#8D8D8D" stroke-linejoin="round"/>
+<path id="Vector_4" d="M19 6C19 5.44772 18.5523 5 18 5H15C14.4477 5 14 5.44772 14 6V9C14 9.55228 14.4477 10 15 10H18C18.5523 10 19 9.55228 19 9V6Z" stroke="#8D8D8D" stroke-linejoin="round"/>
+<path id="Vector_5" d="M12 5V12" stroke="#8D8D8D" stroke-linecap="round"/>
+<path id="Vector_6" d="M12 15V19" stroke="#8D8D8D" stroke-linecap="round"/>
+<path id="Vector_7" d="M12 12L5 12" stroke="#8D8D8D" stroke-linecap="round"/>
+<path id="Vector_8" d="M19 12H15" stroke="#8D8D8D" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_20_1076">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/voice.svg

@@ -0,0 +1,13 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame" clip-path="url(#clip0_20_1003)">
+<path id="Vector" d="M12 22C17.5229 22 22 17.5229 22 12C22 6.47715 17.5229 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5229 6.47715 22 12 22Z" stroke="black" stroke-width="2" stroke-linejoin="round"/>
+<path id="Vector_2" d="M8.5 12.9497C9.0523 12.9497 9.5 12.502 9.5 11.9497C9.5 11.3974 9.0523 10.9497 8.5 10.9497C7.9477 10.9497 7.5 11.3974 7.5 11.9497C7.5 12.502 7.9477 12.9497 8.5 12.9497Z" fill="black"/>
+<path id="Vector_3" d="M10.9749 14.4246C11.6083 13.7913 12 12.9163 12 11.9498C12 10.9833 11.6083 10.1083 10.9749 9.47485" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M13.4497 16.8995C14.7165 15.6327 15.5 13.8827 15.5 11.9497C15.5 10.0167 14.7165 8.26675 13.4497 7" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_20_1003">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/i18n/zhHk/router.js

@@ -26,6 +26,7 @@ export default {
 
   LanguageSettings:"語言設置",
   AdministratorSettings:"管理員設置",
-  Download:"下載鏈接"
+  Download:"下載鏈接",
+  ChatMessage:"聊天信息"
   
 };

src/router/system.js

@@ -11,7 +11,7 @@ export const systemRoutes = [
         path: "im",
         name: "im",
         meta: { title: "router.Social", keepAlive: true, navbar: false, tabbar:true }, // 社交
-        component: () => import("@/views/message/index.vue"),
+        component: () => import("@/views/im/index.vue"),
       },
       {
         path: "transaction",
@@ -135,6 +135,18 @@ export const systemRoutes = [
         meta: { title: "router.Download", keepAlive: false, navbar: true, leftArrow: true }, //  下载链接
         component: () => import("@/views/me/download/index.vue"),
       },
+      {
+        path: "chat",
+        name: "chat",
+        meta: { title: "router.Social", keepAlive: false, navbar: false, leftArrow: true }, //  chat界面
+        component: () => import("@/views/im/chat/index.vue"),
+      },
+      {
+        path: "detail",
+        name: "detail",
+        meta: { title: "router.ChatMessage", keepAlive: false, navbar: true, leftArrow: true }, //  chat详情
+        component: () => import("@/views/im/detail/index.vue"),
+      },
     ],
   },
 ]

src/views/dapp/index.vue

@@ -233,7 +233,7 @@ const handleVisitDapp = (item) => {
       oaid:systemStore.DeviceId
     })
   );
-  openDapp(item.url, { dapp });
+  openDapp('https://locallifeweb.nanodreamtech.com', { dapp });
 };
 const loadHistoryList = () => {
   const history = systemStore.DAPP_CACHE_KEY;

src/views/im/chat/index.vue

@@ -0,0 +1,228 @@
+<template>
+    <div class="container">
+        <div class="chat-bg"></div>
+        <div class="header-chat">
+            <svg-icon class="page-icon" name="lf-arrow" @click="goBack"/>
+            <div class="header-title">群聊（8）</div>
+            <svg-icon class="page-icon" name="more"  @click="goDetail"/>
+        </div>
+        <div class="chat-list">
+            <div v-for="(item,index) in 2">
+                <div class="chat-time">23:{{ 20+index }}</div>
+                <div class="box" v-for="(text,i) in 10">
+                    <div class="list-item" :class="i % 2 === 0 ? '' : 'flex-reverse'">
+                        <van-image class="list-img" :class="i % 2 === 0 ? 'mr12' : 'ml12'" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
+                        <div class="list-cont">
+                            <div :class="i % 2 === 0 ? '' : 'text-right'">苏苏编号</div>
+                            <!-- 名片 -->
+                            <div class="business-card" v-if="i % 2 === 0">
+                                <div class="business-card-cont">
+                                    <van-image class="list-img mr12" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
+                                    <div>名字名字</div>
+                                </div>
+                                <div class="line"></div>
+                                <div class="business-card-text">个人名片</div>
+                            </div>
+                            <!-- 文本信息 -->
+                            <div class="content" v-if="i % 2 !== 0">文本信息文本信息文本信息文本信息文本信息文本信息文本信息文本信息</div>
+                        </div>
+                    </div>
+                     <!--消息撤回 -->
+                     <div class="withdrawal">
+                        <div class="withdrawal-text">哈哈哈撤回了一条消息</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- 输入框 -->
+        <div class="page-foot">
+            <div class="flex-box">
+                <svg-icon class="page-icon" name="voice" />
+                <van-field 
+                    rows="1" 
+                    type="textarea" 
+                    :border="false" 
+                    autosize class="input" v-model="text" placeholder="输入文本"
+                />
+                <svg-icon class="page-icon mr12" name="emoji" />
+                <svg-icon class="page-icon" name="add2" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+const router = useRouter();
+
+
+const text = ref('')
+const goBack = () => {
+    router.push('im')
+}
+const goDetail = () => {
+    router.push('detail')
+}
+</script>
+
+<style lang="less" scoped>
+.mr12{
+    margin-right: 12px;
+}
+.ml12{
+    margin-left: 12px;
+}
+.text-right{
+    text-align: right;
+}
+.page-icon{
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+}
+.container{
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    .chat-bg{
+        height: 126px;
+        background: linear-gradient( 90deg, @theme-color1 0%, #40A4FB 100%);
+        position: absolute;
+        left: 0;
+        right: 0;
+        z-index: -1;
+    }
+    .header-chat{
+        padding-top: 56px;
+        margin: 0 16px;
+        display: flex;
+        align-items: center;
+        color: @theme-color1;
+        .header-title{
+            flex: 1;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500;
+            font-size: 19px;
+            color: #FFFFFF;
+            text-align: center;
+        }
+    }
+    .chat-list{
+        background: #F7F8FA;
+        border-radius: 30px 30px 0 0;
+        flex: 1;
+        overflow: auto;
+        margin-top: 20px;
+        padding:0 16px 24px;
+        .chat-time{
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            font-size: 12px;
+            color: #8D8D8D;
+            text-align: center;
+            margin: 20px 0;
+        }
+        .box{
+            .list-item{
+                display: flex;
+                margin-bottom: 24px;
+                .list-img{
+                    width: 44px;
+                    height: 44px;
+                    flex-shrink: 0;
+                }
+                .list-cont{
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 12px;
+                    color: #8D8D8D;
+                    .business-card{
+                        width: 199px;
+                        height: 93px;
+                        background: #FFFFFF;
+                        border-radius: 10px;
+                        margin-top: 8px;
+                        padding: 10px;
+                        box-sizing: border-box;
+                        .business-card-cont{
+                            display: flex;
+                            align-items: center;
+                            font-family: PingFang SC, PingFang SC;
+                            font-weight: 400;
+                            font-size: 15px;
+                            color: #000000;
+                        }
+                        .line{
+                            height: 1px;
+                            background: #F2F2F2;
+                            margin: 10px 0 6px;
+                        }
+                        .business-card-text{
+                            font-family: PingFang SC, PingFang SC;
+                            font-weight: 400;
+                            font-size: 10px;
+                            color: #8D8D8D;
+                        }
+                    }
+                    .content{
+                        max-width: 230px;
+                        background: #4D71FF;
+                        border-radius: 10px;
+                        margin-top: 8px;
+                        padding: 8px 17px;
+                        font-family: PingFang SC, PingFang SC;
+                        font-weight: 400;
+                        font-size: 15px;
+                        color: #FFFFFF;
+                    }
+                } 
+            }
+            .withdrawal{
+                display: flex;
+                justify-content: center;
+                margin-bottom: 24px;
+                .withdrawal-text{
+                    width: 142px;
+                    height: 29px;
+                    line-height: 29px;
+                    box-sizing: border-box;
+                    background: #F2F2F2;
+                    border-radius: 4px;
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 12px;
+                    color: #8D8D8D;
+                    text-align: center;
+                }
+            }
+            .flex-reverse{
+                flex-direction: row-reverse;
+            }
+        }
+    }
+    .chat-list::-webkit-scrollbar{
+        width: 0;
+    }
+    .page-foot{
+        position: relative;
+		background-color: #fff;
+        .flex-box {
+            padding: 8px 16px;
+			display: flex;
+			align-items: center;
+            box-sizing: border-box;
+            .input{
+                flex: 1;
+                background: #F2F2F2;
+                border-radius: 17px;
+                border: 1px solid #D8D8D8;
+                padding: 6px 16px;
+                font-weight: 500;
+                font-size: 15px;
+                margin: 0 12px;
+                overflow-y: auto;
+            }
+        }
+    }
+}
+</style>

src/views/im/detail/index.vue

@@ -0,0 +1,191 @@
+<template>
+    <div class="container">
+        <div class="box-item">
+            <div class="item-title">
+                <div class="text-lf">群聊成员</div>
+                <div class="text-ri">查看8名群成员<svg-icon class="item-icon" name="right1"/></div>
+            </div>
+            <div class="member-box">
+                <div class="member-li" v-for="item in 8">
+                    <van-image class="member-img" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
+                    <div>希希子</div>
+                </div>
+                <div class="member-li">
+                    <div class="add">
+                        <svg-icon class="add-icon" name="add3" />
+                    </div>
+                    <div>邀请</div>
+                </div>
+            </div>
+        </div>
+        <van-cell-group class="user-bar-list">
+            <van-cell
+                title="群聊名称"
+                :value="information.name"
+                is-link
+            ></van-cell>
+            <van-cell title="群二维码" :value="information.qrCode" is-link>
+                <template #value>
+                    <svg-icon class="qrcode-icon" name="qrcode"/>
+                </template>
+            </van-cell>
+            <van-cell
+                title="群公告"
+                :value="information.notice"
+                is-link
+            ></van-cell>
+            <van-cell
+                title="我在群里的昵称" class="user-bar-list-last"
+                :value="information.nickname"
+                is-link
+            ></van-cell>
+        </van-cell-group>
+        <van-cell-group class="user-bar-list">
+            <van-cell center title="消息免打扰">
+                <template #right-icon>
+                    <van-switch v-model="disturb" active-color="#4765DD" inactive-color="#D9D9D9"/>
+                </template>
+            </van-cell>
+            <van-cell center title="置顶聊天" class="user-bar-list-last">
+                <template #right-icon>
+                    <van-switch v-model="topStory" active-color="#4765DD " inactive-color="#D9D9D9 "/>
+                </template>
+            </van-cell>
+        </van-cell-group>
+        <van-cell-group class="user-bar-list">
+            <van-cell class="user-bar-list-last" title="查看聊天记录" is-link></van-cell>
+        </van-cell-group>
+        <div class="exit">退出群聊</div>
+    </div>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+const information = reactive({
+    name:'群聊',
+    qrCode:'',
+    notice:'367657',
+    nickname:'vs大放送'
+})
+const disturb = ref(true);
+const topStory = ref(false);
+</script>
+
+<style lang="less" scoped>
+.container{
+    margin: 16px;
+    .box-item{
+        background-color: #fff;
+        border-radius: 12px;
+        padding: 12px 16px 0;
+        margin-bottom: 16px;
+        .item-title{
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            font-size: 12px;
+            color: #8D8D8D;
+            .text-lf{
+                font-weight: 500;
+                font-size: 15px;
+                color: #000000;
+            }
+            .text-ri{
+                display: flex;
+                align-items: center;
+                .item-icon{
+                    width: 20px;
+                    height: 20px;
+                    color: #969799;
+                }
+            }
+        }
+        .member-box{
+            margin-top: 12px;
+            flex-wrap: wrap;
+            display: flex;
+            .member-li{
+                width: calc(100% / 5);
+                display: flex;
+                flex-direction: column;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 10px;
+                color: #000000;
+                padding-bottom: 17px;
+                align-items: center;
+                .member-img{
+                    width: 44px;
+                    height: 44px;
+                    margin-bottom: 4px;
+                    flex-shrink: 0;
+                }
+                .add{
+                    width: 44px;
+                    height: 44px;
+                    margin-bottom: 4px;
+                    border-radius: 22px;
+                    background: #F2F2F2;
+                    position: relative;
+                    .add-icon{
+                        width: 20px;
+                        height: 20px;
+                        position: absolute;
+                        top:50%;
+                        left: 50%;
+                        transform: translate(-50%,-50%);
+                    }
+                }
+            }
+        }
+    }
+    .user-bar-list{
+        background-color: #fff;
+        border-radius: 12px;
+        overflow: hidden;
+        margin-bottom: 16px;
+        .van-cell {
+            height: 44px;
+            background: @bg-color1;
+            border-bottom: 1px solid @bg-color1;
+            font-size: 15px;
+            &::after {
+                border-bottom: 1px solid #f2f2f2;
+            }
+        }
+        :deep(.van-cell__title){
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500 ;
+            font-size: 15px;
+            color: #000000;
+        }
+        :deep(.van-cell__value){
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            font-size: 15px;
+            color: #8D8D8D;
+        }
+        .user-bar-list-last::after {
+            border-bottom: 0;
+        }
+        .qrcode-icon{
+            width: 24px;
+            height: 24px;
+        }
+    }
+    .exit{
+        height: 44px;
+        background-color: #fff;
+        border-radius: 12px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: 15px;
+        color: #FF0000;
+        text-align: center;
+        line-height: 44px;
+    }
+   
+}
+</style>

src/views/im/index.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="container">
+    <div class="head-bg"/>
+    <div class="message-header">
+      <div class="header-lf">
+        <div class="msg active-color" >消息
+          <span class="reminder"></span>
+        </div>
+        <div>发现</div>
+      </div>
+      <div class="header-ri">
+        <svg-icon style="width: 25px; height: 25px;margin-right: 8px;" name="person" />
+        <svg-icon style="width: 25px; height: 25px;" name="add" />
+      </div>
+    </div>
+    <div class="search">
+      <svg-icon class="search-icon" name="search" />
+      <span>请输入关键词</span>
+    </div>
+    <div class="message-list">
+      <div class="list-item" v-for="item in 20" @click="goToPage">
+        <van-image class="item-img" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
+        <div class="item-content">
+          <div class="item-top">
+            <div>素</div>
+            <div class="col">18:05</div>
+          </div>
+          <div class="item-bottom">
+            <div class="col m-ellipsis">我们已经相互关注，开始聊天吧我们已经相互关注，开始聊天吧我们已经相互关注，开始聊天吧我们已经相互关注，开始聊天吧</div>
+            <div class="notice">1</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+import { onMounted } from "vue"
+import { LocalNotifications } from '@capacitor/local-notifications';
+
+const router = useRouter();
+
+// 请求通知权限
+const   requestPermissions = async   () => {
+  // 获取权限
+  const result = await LocalNotifications.requestPermissions();
+  console.log('Permission result:', result);
+}
+
+const scheduleNotification = async   () => {
+ 
+  await requestPermissions()
+
+  await LocalNotifications.schedule({
+    notifications: [
+      {
+        title: "更新通知。",
+        body: "最新版本：1.0.0 「重大升级」",
+        id: 1, // 唯一ID
+        sound: "default", // iOS必须设置声音:cite[5]
+        schedule: { at: new Date(Date.now() + 5000) } // 5秒后触发
+      }
+    ]
+  });
+}
+
+const goToPage = () => {
+  router.push('chat')
+}
+onMounted(()=>{
+  // scheduleNotification()
+})
+</script>
+
+<style lang="less" scoped>
+.container{
+  height: calc(100vh - 60px);
+  display: flex;
+  flex-direction: column;
+  .head-bg {
+    .fn-head-bg()
+  }
+  .message-header{
+    margin: 52px 16px 18px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .header-lf{
+      display: flex;
+      align-items: center;
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 400;
+      font-size: 15px;
+      color: #4F4F4F;
+      .msg{
+        margin-right: 12px;
+        position: relative;
+        .reminder{
+          position: absolute;
+          width: 6px;
+          height: 6px;
+          background: #FF6C6C;
+          border-radius: 50%;
+          top: 4px;
+          right: -4px;
+          display: inline-block;
+        }
+      }
+      .active-color{
+        font-weight: 500;
+        font-size: 19px;
+        color: #000000;
+      }
+    }
+    .header-ri{
+      display: flex;
+      align-items: center;
+    }
+  }
+  .search{
+    margin-bottom: 16px;
+    height: 33px;
+    background: #FFFFFF;
+    border-radius: 23px;
+    opacity: 0.5;
+    padding: 6px;
+    box-sizing: border-box;
+    margin: 0 16px;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500;
+    font-size: 15px;
+    color: #95A9ED;
+    display: flex;
+    align-items: center;
+    .search-icon{
+      height: 25px;
+      width: 25px;
+      margin-right: 6px;
+    }
+  }
+  .message-list{
+    background: #F7F8FA;
+    border-radius: 30px 30px 0 0;
+    flex: 1;
+    overflow: auto;
+    margin-top: 16px;
+    padding: 26px 16px 0;
+    .list-item{
+      margin-bottom: 26px;
+      display: flex;
+      align-items: center;
+      .item-img{
+        width:42px;
+        height:42px;
+        flex-shrink: 0;
+        margin-right: 12px;
+      }
+      .item-content{
+        flex: 1;
+        overflow: hidden;
+        .item-top,.item-bottom{
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 400;
+          font-size: 15px;
+          color: #000000;
+          .col{
+            font-size: 12px;
+            color: #8D8D8D;
+          }
+        }
+        .item-top{
+          margin-bottom: 2px;
+        }
+        .item-bottom{
+          .notice{
+            min-width: 15px;
+            height: 15px;
+            line-height: 15px;
+            background-color: #FF6C6C;
+            font-size: 10px;
+            color: #FFFFFF;
+            text-align: center;
+            border-radius: 50px;
+            margin-left: 5px;
+          }
+          .m-ellipsis{
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+    }
+  }
+  .message-list::-webkit-scrollbar{
+    width: 0;
+  }
+}
+
+</style>

src/views/me/index.vue

@@ -173,14 +173,21 @@ const goToaPage = (url) => {
   }
 }
 .van-cell{
-  height: 42px;
+  height: 44px;
   background: @bg-color1;
   border-bottom: 1px solid @bg-color1;
-  font-size: 15px ;
+  font-size: 15px;
+  align-items: center;
   &::after{
     border-bottom: 1px solid #F2F2F2;
   }
 }
+:deep(.van-cell__title){
+  font-family: PingFang SC, PingFang SC;
+  font-weight: 500 ;
+  font-size: 15px;
+  color: #000000;
+}
 .user-bar-list-last::after{
   border-bottom: 0;
 }

src/views/me/personalInformation/index.vue

@@ -119,7 +119,7 @@ const formatAddress = (address) => {
     justify-content: center;
   }
   .van-cell {
-    height: 42px;
+    height: 44px;
     background: @bg-color1;
     border-bottom: 1px solid @bg-color1;
     font-size: 15px;
@@ -127,6 +127,18 @@ const formatAddress = (address) => {
       border-bottom: 1px solid #f2f2f2;
     }
   }
+  :deep(.van-cell__title){
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500 ;
+    font-size: 15px;
+    color: #000000;
+  }
+  :deep(.van-cell__value){
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 400;
+    font-size: 15px;
+    color: #8D8D8D;
+  }
   .user-bar-list-last::after {
     border-bottom: 0;
   }

src/views/message/index.vue

@@ -1,60 +0,0 @@
-<template>
-  <div class="container">
-    <div class="head-bg"/>
-    <div class="message-header">
-
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { onMounted } from "vue"
-import { LocalNotifications } from '@capacitor/local-notifications';
-
-
-
-// 请求通知权限
-const   requestPermissions = async   () => {
-  // 获取权限
-  const result = await LocalNotifications.requestPermissions();
-  console.log('Permission result:', result);
-  // alert(JSON.stringify(result))
-}
-
-
-const scheduleNotification = async   () => {
- 
-  await requestPermissions()
-
-  await LocalNotifications.schedule({
-    notifications: [
-      {
-        title: "更新通知。",
-        body: "最新版本：1.0.0 「重大升级」",
-        id: 1, // 唯一ID
-        sound: "default", // iOS必须设置声音:cite[5]
-        schedule: { at: new Date(Date.now() + 5000) } // 5秒后触发
-      }
-    ]
-  });
-}
-
-onMounted(()=>{
-  scheduleNotification()
-})
-</script>
-
-<style lang="less" scoped>
-.container{
-  height: calc(100vh - 60px);
-  display: flex;
-  flex-direction: column;
-  .head-bg {
-    .fn-head-bg()
-  }
-  .message-header{
-    
-  }
-}
-
-</style>

src/views/settings/aboutUs/index.vue

@@ -71,9 +71,28 @@ const evGoPath = (path)=>{
   margin: 25px 17px 0 17px;
   border-radius: 12px 12px 12px 12px;
   overflow: hidden; 
- 
+  .van-cell{
+    height: 44px;
+    background: @bg-color1;
+    border-bottom: 1px solid @bg-color1;
+    font-size: 15px;
+    align-items: center;
+    &::after{
+      border-bottom: 1px solid #F2F2F2;
+    }
+  }
+  :deep(.van-cell__title){
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500 ;
+    font-size: 15px;
+    color: #000000;
+  }
   :deep(.van-cell__value){
-    min-width: 200px;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 400;
+    font-size: 15px;
+    color: #8D8D8D;
+    min-width: 250px;
   }
 }
 </style>

src/views/settings/languageSettings/index.vue

@@ -1,7 +1,7 @@
 <template>
   <van-radio-group v-model="langStore.lang" @change="handleChange" class="radio-group">
     <van-cell-group inset>
-      <van-cell  v-for="(item, index) in langList" :key="index" :title="item.label" clickable  @click="langStore.lang = item.key" >
+      <van-cell v-for="(item, index) in langList" :key="index" :title="item.label" clickable  @click="langStore.lang = item.key" >
         <template #right-icon>
           <van-radio :name="item.key" />
         </template>
@@ -30,4 +30,20 @@ const handleChange =  async (value) =>{
 .radio-group{
   margin-top: 17px;
 }
+.van-cell{
+  height: 44px;
+  background: @bg-color1;
+  border-bottom: 1px solid @bg-color1;
+  font-size: 15px;
+  align-items: center;
+  &::after{
+    border-bottom: 1px solid #F2F2F2;
+  }
+}
+:deep(.van-cell__title){
+  font-family: PingFang SC, PingFang SC;
+  font-weight: 500 ;
+  font-size: 15px;
+  color: #000000;
+}
 </style>

src/views/settings/systemSettings/index.vue

@@ -34,9 +34,28 @@ const evGoPath = (url) => {
   margin: 25px 17px 0 17px;
   border-radius: 12px 12px 12px 12px;
   overflow: hidden; 
-
+  .van-cell{
+    height: 44px;
+    background: @bg-color1;
+    border-bottom: 1px solid @bg-color1;
+    font-size: 15px;
+    align-items: center;
+    &::after{
+      border-bottom: 1px solid #F2F2F2;
+    }
+  }
+  :deep(.van-cell__title){
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500 ;
+    font-size: 15px;
+    color: #000000;
+  }
   :deep(.van-cell__value){
-    min-width: 200px;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 400;
+    font-size: 15px;
+    color: #8D8D8D;
+    min-width: 250px;
   }
 }
 </style>

src/views/wallet/transferDetail/index.vue

@@ -353,7 +353,7 @@ const sendToken = async (privateKey, tokenAddress, toAddress, amount) => {
                     }
                     .all{
                         font-weight: 500;
-                        color: #4765DD;
+                        color: @theme-color1;
                     }
                 }
                 .price{
@@ -377,7 +377,7 @@ const sendToken = async (privateKey, tokenAddress, toAddress, amount) => {
     .footer-btn{
         height: 40px !important;
         line-height: 40px !important;
-        background: linear-gradient( 90deg, #4765DD 0%, #40A4FB 100%) !important;
+        background: linear-gradient( 90deg, @theme-color1 0%, #40A4FB 100%) !important;
         border-radius:28px;
         font-family: PingFang SC, PingFang SC;
         font-weight: 500;
@@ -524,6 +524,7 @@ const sendToken = async (privateKey, tokenAddress, toAddress, amount) => {
             background: @theme-color1;
             color: #FFF;
             font-weight: 500;
+            border: none !important;
         }
     }
 }

src/views/wallet/walletDetail/index.vue

@@ -21,14 +21,14 @@
                 is-link
                 @click="changePop(1,'sy')"
             ></van-cell>
-            <van-cell
+            <van-cell class="user-bar-list-last"
                 title="查看私鑰"
                 value=""
                 is-link
                 @click="changePop(2)"
             ></van-cell>
             <van-cell v-if="currentWallet.words"
-                title="查看助記詞"
+                title="查看助記詞" class="user-bar-list-last"
                 value=""
                 is-link
                 @click="changePop(2,'zjc')"
@@ -143,7 +143,7 @@ const formatAddress = address => {
 <style lang="less" scoped>
 .container {
     padding: 25px 17px 33px;
-height: 100%;
+    height: 100%;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
@@ -174,7 +174,7 @@ height: 100%;
         justify-content: center;
     }
     .van-cell {
-        height: 42px;
+        height: 44px;
         background: @bg-color1;
         border-bottom: 1px solid @bg-color1;
         font-size: 15px;
@@ -182,6 +182,18 @@ height: 100%;
             border-bottom: 1px solid #f2f2f2;
         }
     }
+    :deep(.van-cell__title){
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500 ;
+        font-size: 15px;
+        color: #000000;
+    }
+    :deep(.van-cell__value){
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        font-size: 15px;
+        color: #8D8D8D;
+    }
     .user-bar-list-last::after {
         border-bottom: 0;
     }
@@ -249,6 +261,7 @@ height: 100%;
                 background: @theme-color1;
                 color: #fff;
                 font-weight: 500;
+                border: none !important;
             }
         }
     }