添加聊天页面

src/assets/svg/add-friend.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame" clip-path="url(#clip0_20_1793)">
+<path id="Union" d="M9.50008 3C11.9854 3 14.0001 5.01472 14.0001 7.5C14.0001 9.98528 11.9854 12 9.50008 12L9.29012 12.0049C7.12947 12.1102 5.19818 13.8333 4.3077 16.4238L4.22176 16.6855C4.13037 16.9806 4.05304 17.2859 3.99031 17.5986C3.93586 17.8692 3.67209 18.0445 3.40145 17.9902C3.13098 17.9357 2.9556 17.6719 3.00985 17.4014C3.07922 17.0555 3.16512 16.7175 3.26668 16.3896L3.36043 16.1035C4.09738 13.9604 5.53065 12.2298 7.34188 11.4492C5.94657 10.685 5.00008 9.2031 5.00008 7.5C5.00008 5.0148 7.01492 3.00014 9.50008 3ZM13.5001 12C13.7762 12 14.0001 12.2239 14.0001 12.5V14.5H16.0011C16.2771 14.5001 16.5011 14.7239 16.5011 15C16.5011 15.2761 16.2771 15.4999 16.0011 15.5H14.0001V17.5C14.0001 17.7761 13.7762 18 13.5001 18C13.2239 18 13.0001 17.7761 13.0001 17.5V15.5H11.0011C10.7249 15.5 10.5011 15.2761 10.5011 15C10.5011 14.7239 10.7249 14.5 11.0011 14.5H13.0001V12.5C13.0001 12.2239 13.2239 12 13.5001 12ZM9.50008 4C7.5672 4.00014 6.00008 5.56709 6.00008 7.5C6.00008 9.43291 7.5672 10.9999 9.50008 11C11.4331 11 13.0001 9.433 13.0001 7.5C13.0001 5.567 11.4331 4 9.50008 4Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_20_1793">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/group-chat.svg

@@ -0,0 +1,11 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame" clip-path="url(#clip0_20_1804)">
+<path id="Union" d="M9.50009 3C11.9854 3 14.0001 5.01472 14.0001 7.5C14.0001 9.20348 13.0531 10.6851 11.6573 11.4492C13.4689 12.2296 14.9027 13.9601 15.6397 16.1035L15.7335 16.3896C15.835 16.7175 15.921 17.0555 15.9903 17.4014C16.0446 17.6719 15.8692 17.9357 15.5987 17.9902C15.3281 18.0445 15.0643 17.8692 15.0099 17.5986C14.9471 17.2859 14.8698 16.9806 14.7784 16.6855L14.6925 16.4238C13.802 13.8333 11.8707 12.1102 9.71005 12.0049L9.50009 12L9.29013 12.0049C7.12937 12.11 5.19824 13.8332 4.30771 16.4238L4.22177 16.6855C4.13038 16.9806 4.05306 17.2859 3.99033 17.5986C3.9359 17.8692 3.67207 18.0444 3.40146 17.9902C3.13088 17.9358 2.95558 17.672 3.00986 17.4014C3.07924 17.0555 3.16513 16.7175 3.2667 16.3896L3.36045 16.1035C4.09743 13.9604 5.53055 12.2297 7.34189 11.4492C5.94648 10.685 5.00009 9.20318 5.00009 7.5C5.00009 5.01472 7.01481 3 9.50009 3ZM9.50009 4C7.5671 4 6.00009 5.567 6.00009 7.5C6.00009 9.433 7.5671 11 9.50009 11C11.4331 11 13.0001 9.433 13.0001 7.5C13.0001 5.567 11.4331 4 9.50009 4Z" fill="black"/>
+<path id="Vector 7" d="M17 16C17 13.9639 15.6211 12.2874 14 11.3439C14.6667 10.9559 15.5 9.69488 15.5 8.14285C15.5 6.83997 15.1476 5.87888 14.4429 5.29401" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_20_1804">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/more1.svg

@@ -0,0 +1,10 @@
+<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 18">
+<g id="&#231;&#188;&#150;&#231;&#187;&#132;">
+<path id="&#231;&#159;&#169;&#229;&#189;&#162;" fill-rule="evenodd" clip-rule="evenodd" d="M2.56389 0L9.43612 0C10.3276 0 10.6509 0.116032 10.9768 0.333916C11.3028 0.5518 11.5586 0.871535 11.7329 1.27894C11.9072 1.68635 12 2.09046 12 3.20486V6.79514C12 7.90954 11.9072 8.31365 11.7329 8.72106C11.5586 9.12846 11.3028 9.4482 10.9768 9.66608C10.6509 9.88397 10.3276 10 9.43612 10H2.56389C1.67237 10 1.34908 9.88397 1.02315 9.66608C0.697228 9.4482 0.44144 9.12846 0.267133 8.72106C0.0928256 8.31365 0 7.90954 0 6.79514V3.20486C0 2.09046 0.0928256 1.68635 0.267133 1.27894C0.44144 0.871535 0.697228 0.5518 1.02315 0.333916C1.34908 0.116032 1.67237 0 2.56389 0Z" fill="#F2F2F2"/>
+<path id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;" d="M3 6C3.55228 6 4 5.55228 4 5C4 4.44772 3.55228 4 3 4C2.44772 4 2 4.44772 2 5C2 5.55228 2.44772 6 3 6Z" fill="#8D8D8D"/>
+<path id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;&#229;&#164;&#135;&#228;&#187;&#189;-3" d="M6 6C6.55228 6 7 5.55228 7 5C7 4.44772 6.55228 4 6 4C5.44772 4 5 4.44772 5 5C5 5.55228 5.44772 6 6 6Z" fill="#8D8D8D"/>
+<path id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;&#229;&#164;&#135;&#228;&#187;&#189;-4" d="M9 6C9.55228 6 10 5.55228 10 5C10 4.44772 9.55228 4 9 4C8.44772 4 8 4.44772 8 5C8 5.55228 8.44772 6 9 6Z" fill="#8D8D8D"/>
+</g>
+</g>
+</svg>

src/assets/svg/ql.svg

@@ -0,0 +1,9 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 26">
+<circle id="Ellipse 3" cx="16" cy="16" r="16" fill="#00B42A"/>
+<g id="Frame">
+<path id="Vector" d="M25.6436 19.5866C25.3401 18.0692 24.4021 15.6413 21.5604 15.0068C22.5812 14.4826 23.2985 13.4066 23.2985 12.1375C23.2985 10.3718 21.8639 8.90955 20.0706 8.90955C19.9051 8.90955 19.7671 8.93714 19.6292 8.93714C20.0154 9.73722 20.2361 10.6477 20.2361 11.5857C20.2361 12.8272 19.8499 14.0135 19.1602 15.0068C21.8087 16.5793 22.9123 19.3107 23.3261 21.104H24.3193C24.7056 21.104 25.0918 20.9384 25.3401 20.6349C25.616 20.3591 25.7264 19.9728 25.6436 19.5866Z" fill="white"/>
+<path id="Vector_2" d="M21.919 21.9317C21.4776 19.8074 20.1809 16.4691 16.2356 15.5862C17.6703 14.8413 18.6635 13.3515 18.6635 11.6134C18.6635 9.18552 16.6495 7.17151 14.194 7.17151C11.7386 7.17151 9.72458 9.18552 9.72458 11.641C9.72458 13.3515 10.7178 14.8689 12.1524 15.6138C8.20717 16.4691 6.91048 19.8074 6.46906 21.9041C6.3587 22.4559 6.49664 23.0077 6.82771 23.4215C7.15878 23.8354 7.68298 24.0837 8.23476 24.0837H20.1257C20.6775 24.0837 21.1741 23.8354 21.5327 23.4215C21.8914 23.0077 22.0294 22.4559 21.919 21.9317Z" fill="white"/>
+</g>
+</g>
+</svg>

src/assets/svg/sm1.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame" clip-path="url(#clip0_20_1813)">
+<path id="Union" d="M3.5 11C3.77614 11 4 11.2239 4 11.5V14.5C4 14.7761 4.22386 15 4.5 15H7.5L7.60059 15.0098C7.82855 15.0563 8 15.2583 8 15.5C8 15.7417 7.82855 15.9437 7.60059 15.9902L7.5 16H4.5C3.67157 16 3 15.3284 3 14.5V11.5C3 11.2239 3.22386 11 3.5 11ZM16.5 11C16.7761 11 17 11.2239 17 11.5V14.5C17 15.3284 16.3284 16 15.5 16H12.5C12.2239 16 12 15.7761 12 15.5C12 15.2239 12.2239 15 12.5 15H15.5C15.7761 15 16 14.7761 16 14.5V11.5C16 11.2239 16.2239 11 16.5 11ZM16.6006 9.00977C16.8285 9.05628 16.9999 9.25833 17 9.5C17 9.74166 16.8285 9.94366 16.6006 9.99023L16.5 10L3.5 10.0029C3.22391 10.0029 3.00007 9.77903 3 9.50293C3.0001 9.22693 3.22396 9.003 3.5 9.00293L16.5 9L16.6006 9.00977ZM7.60059 3.00977C7.82855 3.05629 8 3.25829 8 3.5C8 3.74171 7.82855 3.94371 7.60059 3.99023L7.5 4H4.5C4.22386 4 4 4.22386 4 4.5V7.5C4 7.77614 3.77614 8 3.5 8C3.22386 8 3 7.77614 3 7.5V4.5C3 3.67157 3.67157 3 4.5 3H7.5L7.60059 3.00977ZM15.5 3C16.3284 3 17 3.67157 17 4.5V7.5C17 7.77614 16.7761 8 16.5 8C16.2239 8 16 7.77614 16 7.5V4.5C16 4.22386 15.7761 4 15.5 4H12.5C12.2239 4 12 3.77614 12 3.5C12 3.22386 12.2239 3 12.5 3H15.5Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_20_1813">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/tz.svg

@@ -0,0 +1,8 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 27">
+<circle id="Ellipse 3" cx="16" cy="16" r="16" fill="#527BFF"/>
+<g id="Frame">
+<path id="Vector" d="M14.75 25.5312C14.4375 25.375 14.125 25.0625 13.9687 24.9062C13.6562 24.5938 13.1875 23.5 13.3437 23.3438C13.3437 23.1875 18.6562 23.1875 18.6562 23.3438C18.8125 23.5 18.3437 24.5938 18.0312 25.0625C17.25 25.8438 15.5312 26.1562 14.75 25.5312ZM8.03122 22.0938C7.40622 21.7812 7.71872 21 8.65622 20.5312C9.28122 20.375 9.43747 19.4375 9.59372 16C9.74997 13.0312 9.74997 12.875 10.2187 11.9375C10.8437 10.5312 12.0937 9.125 13.3437 8.5C13.8125 8.34375 14.125 8.03125 14.125 7.875C14.125 7.40625 14.5937 6.625 14.9062 6.46875C15.0625 6.3125 15.6875 6.15625 16 6.15625C16.625 6.15625 16.9375 6.15625 17.25 6.625C17.5625 6.78125 17.7187 7.25 17.7187 7.5625C17.875 8.03125 18.0312 8.1875 18.6562 8.5C20.2187 9.28125 21.7812 11.1562 22.25 13.0312C22.25 13.5 22.4062 14.5938 22.4062 15.8438C22.4062 19.125 22.7187 20.6875 23.5 20.6875C23.8125 20.6875 24.2812 21.1562 24.2812 21.625C24.2812 21.7812 24.125 22.0938 23.9687 22.0938C23.6562 22.4062 22.5625 22.4062 16 22.4062C9.43747 22.4062 8.34372 22.4062 8.03122 22.0938Z" fill="white"/>
+</g>
+</g>
+</svg>

src/assets/svg/yq.svg

@@ -0,0 +1,9 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 25">
+<circle id="Ellipse 3" cx="16" cy="16" r="16" fill="#FF7501"/>
+<g id="Frame">
+<path id="Vector" d="M21.919 21.9317C21.4776 19.8074 20.1809 16.4691 16.2356 15.5862C17.6703 14.8413 18.6635 13.3515 18.6635 11.6134C18.6635 9.18552 16.6495 7.17151 14.194 7.17151C11.7386 7.17151 9.72458 9.18552 9.72458 11.641C9.72458 13.3515 10.7178 14.8689 12.1524 15.6138C8.20717 16.4691 6.91048 19.8074 6.46906 21.9041C6.3587 22.4559 6.49664 23.0077 6.82771 23.4215C7.15878 23.8354 7.68298 24.0837 8.23476 24.0837H20.1257C20.6775 24.0837 21.1741 23.8354 21.5327 23.4215C21.8914 23.0077 22.0294 22.4559 21.919 21.9317Z" fill="white"/>
+<path id="Vector_2" d="M21.998 11C20.3422 11 19 12.3422 19 13.998C19 15.6537 20.3422 16.9959 21.998 16.9959C23.6537 16.9959 24.9959 15.6537 24.9959 13.998C24.9959 12.3422 23.6537 11 21.998 11ZM23.5457 14.4377H22.4389L22.4377 14.4389V15.5457C22.4377 15.7743 22.2677 15.9731 22.0401 15.9946C21.7796 16.0193 21.5583 15.8127 21.5583 15.5569V14.4389L21.557 14.4377H20.4503C20.2217 14.4377 20.0228 14.2677 20.0013 14.0401C19.9767 13.7796 20.1833 13.5583 20.439 13.5583H21.557L21.5583 13.557V12.4503C21.5583 12.2217 21.7282 12.0228 21.9558 12.0013C22.2164 11.9767 22.4377 12.1833 22.4377 12.439V13.557L22.4389 13.5583H23.5569C23.8127 13.5583 24.0192 13.7796 23.9946 14.0401C23.9731 14.2677 23.7743 14.4377 23.5457 14.4377Z" fill="white"/>
+</g>
+</g>
+</svg>

src/i18n/zhHk/router.js

@@ -31,5 +31,8 @@ export default {
   GroupQRCode:"羣二維碼",
   AddMember:"添加成員",
   GroupMembers:"羣成員",
-  ContactList:"通訊錄"
+  ContactList:"通訊錄",
+  ReleaseRecord:"發佈記錄",
+  NewInvitation:"新邀請",
+  GroupChatList:"羣聊列表"
 };

src/router/system.js

@@ -162,7 +162,7 @@ export const systemRoutes = [
       {
         path: "addMember",
         name: "addMember",
-        meta: { title: "router.AddMember", keepAlive: false, navbar: false, leftArrow: true }, //  添加成员
+        meta: { title: "router.AddMember", keepAlive: false, navbar: true, leftArrow: true }, //  添加成员
         component: () => import("@/views/im/detail/addMember/index.vue"),
       },
       {
@@ -177,6 +177,24 @@ export const systemRoutes = [
         meta: { title: "router.ContactList", keepAlive: false, navbar: true, leftArrow: true }, //  通讯录
         component: () => import("@/views/im/contactList/index.vue"),
       },
+      {
+        path: "invitation",
+        name: "invitation",
+        meta: { title: "router.NewInvitation", keepAlive: false, navbar: true, leftArrow: true }, //  新邀请
+        component: () => import("@/views/im/contactList/invitation/index.vue"),
+      },
+      {
+        path: "group",
+        name: "group",
+        meta: { title: "router.GroupChatList", keepAlive: false, navbar: true, leftArrow: true }, //  群聊列表
+        component: () => import("@/views/im/contactList/groupList/index.vue"),
+      },
+      {
+        path: "record",
+        name: "record",
+        meta: { title: "router.ReleaseRecord", keepAlive: false, navbar: true, leftArrow: true }, //  发布记录
+        component: () => import("@/views/im/releaseRecord/index.vue"),
+      },
     ],
   },
 ]

src/components/Discover/Discover.vue → src/views/im/components/Discover/Discover.vue

@@ -1,43 +1,39 @@
 <template>
   <div class='top'>
-    <div class="releaseRecord">
+    <div class="releaseRecord" @click="gotoRecord">
         <svg-icon class="releaseRecord-icon" name="pulishIcon" />
         <div class="releaseRecord-text">发布记录</div>
     </div>
     <div class="search">
       <svg-icon class="search-icon" name="search" />
-      <span>请输入</span>
-    </div>
-    <div class="publish">
-      发布
+      <span>搜索</span>
     </div>
+    <div class="publish">发布</div>
   </div>
 
   <div class="content">
-    <div class="content-item">
+    <div class="content-item" v-for="item in 10">
       <div class="item-header">
-        <img class="avatar" src="@/assets/img/faxian.png" />
+        <van-image class="avatar" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
         <div class="user-info">
           <div class="nickname">丝竹绵绵</div>
           <div class="desc">阳光玫瑰葡萄爆汁 + 埃塞冷萃一口喝到夏天穿白衬衫的少年感🍃👉 今天前20杯送“发呆专用”杯套</div>
-          <img class="main-img" src="@/assets/img/faxian.png" />
+          <van-image class="main-img" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
           <div class="item-footer">
             <div class="time">8小时前23分钟前</div>
-            <div class="actions">
-            <span class="icon more"></span>
+            <svg-icon class="actions-icon" name="more1" />
+          </div>
+          <div class="like-row">
+            <van-image v-for="n in 4" :key="n" class="like-avatar" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
+          </div>
+          <div class="comment-list">
+              <div class="comment-item">
+                <van-image class="comment-avatar" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
+                  <span class="comment-nickname">甘比</span>
+                  <span class="comment-time">12:34</span>
+                  <div class="comment-content">可以送我一杯吗</div>
+              </div>
           </div>
-        </div>
-        <div class="like-row">
-            <img v-for="n in 4" :key="n" class="like-avatar" src="@/assets/img/faxian.png" />
-        </div>
-        <div class="comment-list">
-            <div class="comment-item">
-                <img class="comment-avatar" src="@/assets/img/faxian.png" />
-                <span class="comment-nickname">甘比</span>
-                <span class="comment-time">12:34</span>
-                <div class="comment-content">可以送我一杯吗</div>
-            </div>
-        </div>
         </div>
       </div>
     </div>
@@ -45,7 +41,10 @@
 </template>
 
 <script setup>
-
+const router = useRouter();
+const gotoRecord = () => {
+  router.push('record')
+}
 </script>
 
 <style lang="less" scoped>
@@ -58,39 +57,36 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 109px;
+    width: 112px;
     height: 32px;
-    line-height: 32px;
     background: #FFFFFF;
     border-radius: 23px;
     text-align: center;
+    box-sizing: border-box;
 
     .releaseRecord-icon {
-        width: 24px;
-        height: 24px;
-        line-height: 24px;
-        margin: 7px 1px 0 0;
+      width: 24px;
+      height: 24px;
+      margin-top: 8px;
+      margin-right: 2px;
     }
-
     .releaseRecord-text {
-        font-family: PingFang SC, PingFang SC;
-        font-weight: 400;
-        font-size: 14px;
-        color: #000000;
-        font-style: normal;
-        text-transform: none;
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 400;
+      font-size: 15px;
+      color: #000000;
     }
   }
 
   .search{
-    width: 150px;
+    flex: 1;
     height: 32px;
     background: #FFFFFF;
     border-radius: 23px;
     opacity: 0.5;
     padding: 6px;
     box-sizing: border-box;
-    margin: 0 16px;
+    margin: 0 12px;
     font-family: PingFang SC, PingFang SC;
     font-weight: 500;
     font-size: 15px;
@@ -98,46 +94,47 @@
     display: flex;
     align-items: center;
     .search-icon{
-      height: 25px;
-      width: 25px;
-      margin-right: 6px;
+      height: 24px;
+      width: 24px;
+      margin-right: 2px;
     }
   }
 
   .publish{
-    width: 70px;
-    height: 38px;
-    line-height: 38px;
+    width: 62px;
+    height: 32px;
+    line-height: 32px;
     background: #4765DD;
     border-radius: 23px;
     text-align: center;
     font-family: PingFang SC, PingFang SC;
     font-weight: 500;
-    font-size: 14px;
+    font-size: 15px;
     color: #FFFFFF;
     font-style: normal;
     text-transform: none;
+    box-sizing: border-box;
   }
 }
 
 .content {
-  width: 352px;
-  background: #FFFFFF;
-  border-radius: 16px;
-  margin: 17px auto 16px auto;
-  padding: 12px;
-  box-sizing: border-box;
-
+  flex: 1;
+  overflow: auto;
+  margin-top: 16px;
   .content-item {
+    background: #FFFFFF;
+    border-radius: 16px;
+    margin: 0 16px 16px;
+    padding: 12px;
+    box-sizing: border-box;
     .item-header {
       display: flex;
       align-items: flex-start;
 
       .avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 50%;
-        margin-right: 10px;
+        width: 42px;
+        height: 42px;
+        margin-right: 12px;
         flex-shrink: 0;
       }
 
@@ -150,12 +147,9 @@
         .nickname {
           font-family: PingFang SC, PingFang SC;
           font-weight: 500;
-          font-size: 14px;
+          font-size: 15px;
           color: #4765DD;
-          text-align: left;
-          font-style: normal;
-          text-transform: none;
-          margin-bottom: 2px;
+          margin-bottom: 4px;
         }
 
         .desc {
@@ -163,22 +157,16 @@
           font-weight: 400;
           font-size: 12px;
           color: #000000;
-          text-align: justify;
-          font-style: normal;
-          text-transform: none;
-          margin: 4px 0 6px 0;
+          margin-bottom: 3px;
           line-height: 1.5;
           word-break: break-all;
         }
 
         .main-img {
-          width: 130px;
-          height: 116px;
-          object-fit: cover;
+          width: 134px;
+          height: 120px;
           border-radius: 8px;
-          margin-top: 3px;
-          margin-bottom: 8px;
-          align-self: flex-start;
+          margin-bottom: 10px;
         }
 
         .item-footer {
@@ -186,24 +174,17 @@
           justify-content: space-between;
           align-items: center;
           width: 100%;
-          margin-bottom: 8px;
+          margin-bottom: 10px;
 
           .time {
             font-family: PingFang SC, PingFang SC;
             font-weight: 400;
-            font-size: 14px;
+            font-size: 10px;
             color: #8D8D8D;
-            text-align: left;
-            font-style: normal;
-            text-transform: none;
           }
-          .actions {
-            .icon.more {
-              display: inline-block;
-              width: 18px;
-              height: 18px;
-              background: url('@/assets/svg/more.svg') no-repeat center/contain;
-            }
+          .actions-icon{
+            width: 12px;
+            height: 10px;
           }
         }
 
@@ -214,29 +195,23 @@
           .like-avatar {
             width: 18px;
             height: 18px;
-            border-radius: 50%;
             margin-right: 4px;
           }
         }
 
         .comment-list {
             width: 267px;
-            min-height: 51px;
             background: #F2F2F2;
             border-radius: 8px;
             padding: 8px;
           .comment-item {
             display: flex;
             align-items: center;
-            font-size: 13px;
-            color: #333;
             flex-wrap: wrap;
-            padding: 4px 0;
 
             .comment-avatar {
               width: 18px;
               height: 18px;
-              border-radius: 50%;
               margin-right: 8px;
             }
             .comment-nickname {
@@ -248,15 +223,6 @@
                 font-style: normal;
                 text-transform: none;
             }
-            .comment-content {
-                font-family: PingFang SC, PingFang SC;
-                font-weight: 400;
-                font-size: 14px;
-                color: #000000;
-                text-align: left;
-                font-style: normal;
-                text-transform: none;
-            }
             .comment-time {
                 font-family: PingFang SC, PingFang SC;
                 font-weight: 400;
@@ -270,10 +236,10 @@
                 width: 100%;
                 font-family: PingFang SC, PingFang SC;
                 font-weight: 400;
-                font-size: 14px;
+                font-size: 12px;
                 color: #000000;
-                margin-left: 32px; // 头像+昵称的宽度，保证内容左对齐
-                margin-top: 2px;
+                margin-left: 32px;
+                margin-top: 4px;
                 word-break: break-all;
                 white-space: normal;
             }
@@ -283,4 +249,7 @@
     }
   }
 }
+.content::-webkit-scrollbar{
+  width: 0;
+}
 </style>

src/views/im/contactList/groupList/index.vue

@@ -0,0 +1,119 @@
+<template>
+    <div class="container">
+        <van-search class="search-item"
+            v-model="value"
+            show-action
+            placeholder="请输入搜索关键词"
+            @search="onSearch"
+        >
+            <template #left-icon>
+                <svg-icon class="search-icon" name="search" />
+            </template>
+            <template #action>
+                <van-button type="default" class="action-btn">搜索</van-button>
+            </template>
+        </van-search>
+        <div class="content">
+            <div class="list-ul">
+                <div class="list-li" v-for="(item,index) in 10">
+                    <van-image class="li-img" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
+                    <div class="li-cont" :class="{ 'no-border': index === 9 }">聊天群群名</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="less" scoped>
+.container{
+    height: 100%;
+    :deep(.van-search){
+        padding: 4px 16px !important;
+    }
+    .search-item{
+        :deep(.van-search__action){
+            padding: 0 0 0 12px !important;
+            box-sizing: border-box !important;
+            line-height: initial !important;
+        }
+        :deep(.van-search__content){
+            background: #F7F8FA !important;
+            border-radius: 22px !important;
+            padding-left: 10px !important;
+        }
+        :deep(.van-field__left-icon){
+            margin-right: 0 !important;
+            height: 24px;
+        }
+        :deep(.van-search__field){
+            padding:4px 0 !important;
+            line-height: initial !important;
+            box-sizing: border-box;
+        }
+        :deep(.van-field__value){
+            height: 24px !important;
+            line-height: 26px !important;
+        }
+        .search-icon{
+            height: 24px;
+            width: 24px;
+            margin-right: 10px;
+            color: #95A9ED;
+        }
+        .action-btn{
+            padding:0 22px;
+            height: 34px;
+            box-sizing: border-box;
+            background: #4765DD;
+            border-radius: 22px;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500;
+            font-size: 15px;
+            color: #FFFFFF;
+            border:none !important;
+        }
+    }
+    .search-item :deep(input::placeholder) {
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: 15px;
+        color: #95A9ED;
+    }
+    .content{
+        margin:16px;
+        .list-ul{
+            background: #fff;
+            border-radius: 12px;
+            padding: 0 16px;
+            .list-li{
+                display: flex;
+                align-items: center;
+                border-bottom: 1px solid #F2F2F2;
+                padding: 10px 0;
+                .li-img{
+                    width: 32px;
+                    height: 32px;
+                    flex-shrink: 0;
+                    margin-right: 12px;
+                }
+                .li-cont{
+                    flex: 1;
+                    display: flex;
+                    align-items: center;
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 15px;
+                    color: #8D8D8D;
+                }
+                .no-border {
+                    border-bottom: none;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/im/contactList/index.vue

@@ -1,13 +1,185 @@
 <template>
-    <div>
-        通讯录
+    <div class="container">
+        <div class="content">
+            <div class="list-ul">
+                <div class="list-li" @click="router.push('invitation')">
+                    <svg-icon class="li-img" name="yq" />
+                    <div class="li-cont">新邀请</div>
+                </div>
+                <div class="list-li" @click="router.push('group')">
+                    <svg-icon class="li-img" name="ql" />
+                    <div class="li-cont no-border">群聊</div>
+                </div>
+                <!-- <div class="list-li">
+                    <svg-icon class="li-img" name="tz" />
+                    <div class="li-cont no-border">系统通知</div>
+                </div> -->
+            </div>
+            <van-index-bar>
+                <template v-for="(group, groupIndex) in memberGroups" :key="group.index">
+                    <van-index-anchor :index="group.index" />
+                    <van-cell-group inset>
+                        <van-cell v-for="(item, index) in group.members">
+                            <template #title>
+                                <div class="cell-item">
+                                    <van-image
+                                        class="cell-img"
+                                        round
+                                        :src="item.avatar"
+                                    />
+                                    <div>{{ item.name }}</div>
+                                </div>
+                            </template>
+                        </van-cell>
+                    </van-cell-group>
+                </template>
+            </van-index-bar>
+            <div class="total">7个朋友</div>
+        </div>
     </div>
 </template>
 
 <script setup>
-
+const router = useRouter();
+const memberGroups = ref([
+  {
+    index: 'A',
+    members: [
+      { id: '1', name: '安琪拉', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+      { id: '2', name: '艾琳', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+    ],
+  },
+  {
+    index: 'B',
+    members: [
+      { id: '3', name: '白起', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+      { id: '4', name: '百里守约', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+    ],
+  },
+  {
+    index: 'C',
+    members: [
+      { id: '1', name: '安琪拉', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+      { id: '2', name: '艾琳', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+    ],
+  },
+  {
+    index: 'D',
+    members: [
+      { id: '3', name: '白起', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+      { id: '4', name: '百里守约', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+    ],
+  },
+  {
+    index: 'E',
+    members: [
+      { id: '1', name: '安琪拉', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+      { id: '2', name: '艾琳', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+    ],
+  },
+  {
+    index: 'F',
+    members: [
+      { id: '3', name: '白起', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+      { id: '4', name: '百里守约', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+    ],
+  },
+  {
+    index: 'G',
+    members: [
+      { id: '3', name: '白起', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+      { id: '4', name: '百里守约', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
+    ],
+  },
+]);
 </script>
 
 <style lang="less" scoped>
+.container{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    
+    .content{
+        padding: 16px;
+        overflow: auto;
+        .list-ul{
+            background: #fff;
+            border-radius: 12px;
+            padding: 12px 16px;
+            .list-li{
+                display: flex;
+                align-items: center;
+                .li-img{
+                    width: 32px;
+                    height: 32px;
+                    flex-shrink: 0;
+                    margin-right: 12px;
+                }
+                .li-cont{
+                    flex: 1;
+                    border-bottom: 1px solid #F2F2F2;
+                    padding-top:10px;
+                    padding-bottom: 10px;
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: 500;
+                    font-size: 15px;
+                    color: #000000;
+                }
+                .no-border {
+                    border-bottom: none;
+                }
+            }
+        }
+        :deep(.van-cell-group--inset){
+            border-radius:12px !important;
+            margin: 0 !important;
+        }
+        :deep(.van-cell){
+            padding: 12px 16px !important;
+        }
+        :deep(.van-cell:after){
+        left: 60px;
+        }
+        :deep(.van-index-anchor--sticky){
+            background: #F7F8FA !important;
+            color: #4765DD !important;
+        }
+        :deep(.van-index-bar__index){
+            font-weight: 400 !important;
+            font-size: 10px !important;
+            color: #1D2129 !important;
+            margin-bottom: 8px !important;
+        }
+        :deep(.van-index-bar__index--active){
+            color: #4765DD !important;
+        }
+        .cell-item{
+            display: flex;
+            align-items: center;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500;
+            font-size: 15px;
+            color: #000000;
+            .cell-img{
+                width: 32px;
+                height: 32px;
+                flex-shrink: 0;
+                margin-right: 12px;
+            }
+        }
+        .total{
+            text-align: center;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            font-size: 12px;
+            color: #8D8D8D;
+            margin-top: 22px;
+        }
+    }
+    .content::-webkit-scrollbar{
+        width: 0;
+    }
+}
 
 </style>

src/views/im/contactList/invitation/index.vue

@@ -0,0 +1,203 @@
+<template>
+    <div class="container">
+        <div class="content">
+            <div class="tab-box">
+                <div class="tab-text" :class="type == 0?'active-color':''" @click="type = 0">我收到的</div>
+                <div class="tab-text" :class="type == 1?'active-color':''" @click="type = 1">我发起的</div>
+            </div>
+            <div class="list-box">
+                <div class="box-item" :class="{ 'no-border': i === 9 }" v-for="(item,i) in 20">
+                    <van-image class="item-img" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
+                    <div class="item-ri-cont">
+                        <div>
+                            <div><span class="name">升华</span>申请添加您为好友</div>
+                            <div class="fs12">1213</div>
+                        </div>
+                        <div v-if="i == 0" class="item-btn" @click="showAgree = true">同意</div>
+                        <div v-else class="fs12" :class="i == 1?'fscolor':''">{{i == 1?'已拒绝':'已添加'}}</div>
+                    </div>
+                </div>
+            </div>
+           <div class="foot-page">
+                <van-button class="foot-btn" size="mini">上一页</van-button>
+                <div class="foot-total">1/1</div>
+                <van-button class="foot-btn" size="mini">下一页</van-button>
+           </div>
+        </div>
+        <!-- 同意好友弹框 -->
+        <van-popup v-model:show="showAgree" :style="{ borderRadius:'25px' }">
+            <div class="pop-content-password">
+                <div class="pop-title-password">你确定同意该好友的请求吗?</div>
+                <div class="pop-btn-password" style="margin-top: 50px;">
+                    <van-button type="default" class="btn-password cancel" @click="showAgree = false">拒绝</van-button>
+                    <van-button type="default" class="btn-password confirm" @click="showAgree = false">同意</van-button>
+                </div>
+            </div>
+        </van-popup>
+    </div>
+</template>
+
+<script setup>
+const type = ref(0);
+const showAgree = ref(false);
+</script>
+
+<style lang="less" scoped>
+.container{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .content{
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        .tab-box{
+            display: flex;
+            align-items: center;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            font-size: 15px;
+            color: #4F4F4F;
+            height: 42px;
+            line-height: 42px;
+            background-color: #fff;
+            .tab-text{
+                width: 50%;
+                text-align: center;
+            }
+            .active-color{
+                font-weight: 500;
+                color: #4765DD;
+            }
+        }
+        .list-box{
+            background: #fff;
+            margin: 8px 16px;
+            border-radius: 12px;
+            padding: 0 16px;
+            flex: 1;
+            overflow: auto;
+            .box-item{
+                padding: 12px 0 10px;
+                border-bottom: 1px solid #F2F2F2;
+                display: flex;
+                align-items: center;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 15px;
+                color: #8D8D8D;
+                .item-img{
+                    width: 32px;
+                    height: 32px;
+                    flex-shrink: 0;
+                    margin-right: 12px;
+                }
+                .item-ri-cont{
+                    flex: 1;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    .name{
+                        color: #4765DD;
+                    }
+                    .item-btn{
+                        background: #4765DD;
+                        border-radius: 6px;
+                        padding: 4px 8px;
+                        box-sizing: border-box;
+                        font-family: PingFang SC, PingFang SC;
+                        font-weight: 400;
+                        font-size: 12px;
+                        color: #FFFFFF;
+                    }
+                    .fs12{
+                        font-size: 12px;
+                    }
+                    .fscolor{
+                        color: #FF0000;
+                    }
+                }
+            }
+            .no-border{
+                border-bottom: none;
+            }
+        }
+        .list-box::-webkit-scrollbar{
+            width: 0;
+        }
+        .foot-page{
+            display: flex;
+            align-items: center;
+            height: 44px;
+            background: #FFFFFF;
+            padding: 10px 16px;
+            box-sizing: border-box;
+            .foot-btn{
+                box-sizing: border-box;
+                width: 50px;
+                border-radius: 4px;
+                padding: 4px 6px;
+                background: #F2F2F2;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 12px;
+                color: #4F4F4F;
+            }
+            .foot-total{
+                flex: 1;
+                text-align: center;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 12px;
+                color: #4F4F4F;
+            }
+        }
+    }
+    .pop-content-password{
+        padding: 27px 35px 25px 34px;
+        .pop-title-password{
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500;
+            font-size: 17px;
+            color: #000000;
+            text-align: center;
+        }
+        .pop-input{
+            background: #F2F2F2;
+            border-radius: 8px;
+            height: 40px;
+            margin: 21px 0 31px;
+        }
+        .pop-btn-password{
+            display: flex;
+            justify-content: center;
+            .btn-password{
+                width: 83px;
+                height: 29px;
+                line-height: 29px;
+                padding: 5px 0 !important;
+                border-radius: 6px;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 15px;
+                box-sizing:border-box;
+            }
+            .cancel{
+                margin-right: 17px !important;
+                border: 1px solid #D8D8D8;
+                color: #000 !important;
+            }
+            .confirm{
+                background: @theme-color1;
+                color: #FFF;
+                font-weight: 500;
+                border: none !important;
+            }
+        }
+    }
+    :deep(.van-popup--center) {
+        margin: 0 40px !important;
+        width: auto !important;
+    }
+}
+</style>

src/views/im/detail/addMember/index.vue

@@ -1,11 +1,5 @@
 <template>
     <div class="container">
-        <van-nav-bar :title="$t('router.AddMember')" left-arrow class="app-bar-header" @click-left="router.back()">
-            <template #right>
-                <div class="btn" :class="checked.length == 0?'':'active-btn'" @click="submit">完成({{ checked.length }})</div>
-            </template>
-        </van-nav-bar>
-  
         <van-index-bar class="list">
             <template v-for="(group, groupIndex) in memberGroups" :key="group.index">
                 <van-index-anchor :index="group.index" />
@@ -46,7 +40,7 @@
                     :src="item.avatar"
                 />
             </div>
-            <div class="selected-count">已选{{ checked.length }}人</div>
+            <div class="btn" :class="checked.length == 0?'':'active-btn'" @click="submit">完成({{ checked.length }})</div>
         </div>
     </div>
   </template>
@@ -138,31 +132,7 @@ const submit = () => {
 .container{
     display: flex;
     flex-direction: column;
-    height: 100vh;
-}
-.app-bar-header {
-  :deep(.van-nav-bar__title) {
-    font-weight: 500;
-  }
-  :deep(.van-icon) {
-    color: @font-color3;
-  }
-  .btn{
-    height: 25px;
-    line-height: 25px;
-    padding: 0 6px;
-    background: #F2F2F2;
-    border-radius: 4px;
-    box-sizing: border-box;
-    font-family: PingFang SC, PingFang SC;
-    font-weight: 400;
-    font-size: 12px;
-    color: #8D8D8D;
-  }
-  .active-btn{
-    background: #4765DD;
-    color: #FFFFFF;
-  }
+    height: 100%;
 }
 .list{
     flex: 1;
@@ -225,6 +195,7 @@ const submit = () => {
     .avatar-list {
         display: flex;
         overflow-x: auto;
+        flex: 1;
         .img-icon {
             width: 32px;
             height: 32px;
@@ -235,9 +206,26 @@ const submit = () => {
     .avatar-list::-webkit-scrollbar{
         height: 0;
     }
-    .selected-count {
-        margin-left: 16px;
-        white-space: nowrap;
+    // .selected-count {
+    //     margin-left: 16px;
+    //     white-space: nowrap;
+    // }
+    .btn{
+      margin-left: 16px;
+      height: 25px;
+      line-height: 25px;
+      padding: 0 6px;
+      background: #F2F2F2;
+      border-radius: 4px;
+      box-sizing: border-box;
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 400;
+      font-size: 12px;
+      color: #8D8D8D;
+    }
+    .active-btn{
+      background: #4765DD;
+      color: #FFFFFF;
     }
 }
 </style>

src/views/im/index.vue

@@ -9,7 +9,7 @@
           @click="activeTab = 0"
         >
           消息
-          <span v-if="showDot" class="red-dot"></span>
+          <span v-if="showDot&&activeTab == 0" class="red-dot"></span>
         </div>
         <div
           class="discover"
@@ -17,49 +17,73 @@
           @click="activeTab = 1"
         >
           发现
-          <span v-if="showDot" class="red-dot"></span>
+          <span v-if="showDot&&activeTab == 1" class="red-dot"></span>
         </div>
       </div>
       <div class="header-ri">
-        <svg-icon style="width: 25px; height: 25px;margin-right: 8px;" name="person" @click="goPerson"/>
-        <svg-icon style="width: 25px; height: 25px;" name="add" />
+        <svg-icon style="width: 25px; height: 25px;margin-right: 8px;" name="person" @click="goToPage('contact')"/>
+        <svg-icon style="width: 25px; height: 25px;" name="add" @click="showSheet = true;"/>
       </div>
     </div>
-    <div class="search" v-if="activeTab === 0">
-      <svg-icon class="search-icon" name="search" />
-      <span>请输入关键词</span>
-    </div>
-    <div v-if="activeTab === 0" class="message-list">
-      <div class="list-item" v-for="item in 20" :key="item" @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>
+    <template v-if="activeTab === 0">
+      <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" :key="item" @click="goToChat">
+          <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>
-    <div v-else>
+    </template>
+    <template v-else>
       <Discover />
-    </div>
+    </template>
+    <van-action-sheet
+      v-model:show="showSheet"
+      cancel-text="取消"
+      close-on-click-action
+      @cancel="showSheet = false"
+    > 
+      <div class="sheet-content">
+        <div class="sheet-li">
+          <svg-icon class="sheet-icon" name="add-friend" @click="goToPage"/>
+          <div class="sheet-text">添加朋友</div>
+        </div>
+        <div class="sheet-li">
+          <svg-icon class="sheet-icon" name="group-chat" @click="goToPage"/>
+          <div class="sheet-text">创建群聊</div>
+        </div>
+        <div class="sheet-li no-border">
+          <svg-icon class="sheet-icon" name="sm1" @click="goToPage"/>
+          <div class="sheet-text">扫一扫</div>
+        </div>
+      </div>
+    </van-action-sheet>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import Discover from '@/components/Discover/Discover.vue'
+import Discover from './components/Discover/Discover.vue'
 import { onMounted } from "vue"
 import { LocalNotifications } from '@capacitor/local-notifications';
 
 const router = useRouter();
 const activeTab = ref(0)
 const showDot = ref(true)
+const showSheet = ref(false);
 
 // 请求通知权限
 const   requestPermissions = async   () => {
@@ -85,11 +109,11 @@ const scheduleNotification = async   () => {
   });
 }
 
-const goToPage = () => {
+const goToChat = () => {
   router.push('chat')
 }
-const goPerson = () => {
-  router.push('contact')
+const goToPage = (url) => {
+  router.push(url)
 }
 onMounted(()=>{
   // scheduleNotification()
@@ -120,12 +144,11 @@ onMounted(()=>{
         margin-right: 12px;
         position: relative;
         cursor: pointer;
-        font-size: 19px;
-        font-weight: 400;
         color: #4F4F4F;
       }
       .active-color {
-        font-weight: 700;
+        font-size: 19px;
+        font-weight: 500;
         color: #000;
       }
       .red-dot {
@@ -235,6 +258,37 @@ onMounted(()=>{
     margin-top: 16px;
     padding: 26px 16px 0;
   }
+  .sheet-content{
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500;
+    font-size: 15px;
+    color: #000000;
+    padding: 12px 16px 0;
+    .sheet-li{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-bottom: 1px solid #F2F2F2;
+      padding: 10px 0;
+      .sheet-icon{
+        width:20px;
+        height:20px;
+      }
+      .sheet-text{
+        text-align: center;
+        width: 70px;
+      }
+    }
+    .no-border{
+      border-bottom:none;
+    }
+  }
+  :deep(.van-action-sheet__cancel){
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500 !important;
+    font-size: 15px !important;
+    color: #FF0000 !important;
+  }
 }
 
 </style>

src/views/im/releaseRecord/index.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="container">
+        <div class="content">
+            <div class="record-list" v-for="item in 5">
+                <div style="flex-shrink: 0;">本周</div>
+               <div class="list-ri">
+                    <van-image v-for="n in 10" class="avatar" radius="12" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
+               </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="less" scoped>
+.container{
+    height: 100%;
+    margin: 0 16px;
+    display: flex;
+    flex-direction: column;
+    .content{
+        overflow: auto;
+        .record-list{
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500;
+            font-size: 17px;
+            color: #000000;
+            display: flex;
+            margin: 24px 0;
+            .list-ri{
+                display: flex;
+                flex-wrap: wrap;
+                gap: 16px;
+                margin-left: 20px;
+                .avatar{
+                    width: 82px;
+                    height: 82px;
+                }
+            }
+        }
+    }
+    .content::-webkit-scrollbar{
+        width: 0;
+    }
+}
+</style>