Add 注释（8）

注释（8）

@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <!-- 群名称区域，背景色为最大白色 -->
+    <div style="height: 60px;background-color: var(--maxWhite)">
+      <!-- 群名称，位于左侧，字体大小18px -->
+      <span style="line-height: 60px;margin-left: 20px;font-size: 18px">
+        {{groups[currentGroupId].groupName}}
+      </span>
+    </div>
+
+    <!-- 群信息区域，背景色为中等白色，高度为剩余空间 -->
+    <div style="background: var(--midWhite);height: calc(100% - 60px)">
+      <!-- 群头像区域，上下内边距为50px -->
+      <div class="myCenter" style="padding: 50px 0">
+        <!-- 群头像，大小为60px，懒加载 -->
+        <n-avatar object-fit="cover"
+                  :size="60"
+                  lazy
+                  :src="groups[currentGroupId].avatar"/>
+      </div>
+
+      <!-- 群信息内容区域 -->
+      <div class="myCenter">
+        <!-- 群信息内容，宽度占65%，字体大小16px -->
+        <div style="width: 65%;font-size: 16px">
+          <!-- 群名称标签和值 -->
+          <div style="margin-bottom: 10px">
+            <!-- 群名称标签 -->
+            <span class="friend-label">
+              群名称
+            </span>
+            <!-- 群名称值 -->
+            <span style="margin: 0 5px 0 0">
+              {{groups[currentGroupId].groupName}}
+            </span>
+            <!-- 如果当前用户是群主，则显示编辑图标 -->
+            <span @click="changeDataType(2)"
+                  v-if="groups[currentGroupId].masterFlag"
+                  style="display: inline-block;vertical-align: sub;cursor: pointer">
+              <!-- 编辑图标，使用SVG -->
+              <svg viewBox="0 0 1024 1024" width="20" height="20">
+                <!-- 编辑图标的路径，填充颜色为橙色，透明度为0.502 -->
+                <path
+                  d="M929.909189 827.019236H93.990821c-16.598379 0-29.997071 13.398692-29.99707 29.997071s13.398692 29.997071 29.99707 29.997071h835.918368c16.598379 0 29.997071-13.398692 29.99707-29.997071 0-16.498389-13.398692-29.997071-29.99707-29.997071z"
+                  fill="#FF6600" opacity=".502"></path>
+                <!-- 编辑图标的另一路径 -->
+                <path
+                  d="M705.931061 198.080656c3.099697 0 8.999121 0.799922 14.098624 5.899424l28.297236 28.297237c5.099502 5.099502 5.899424 10.998926 5.899424 14.098623 0 3.099697-0.799922 8.999121-5.899424 14.098623L392.161703 616.739772l-86.991505 28.997168 27.597305-82.791915 358.964945-358.964945c5.099502-5.199492 11.098916-5.899424 14.198613-5.899424m0-59.994141c-20.497998 0-40.896006 7.799238-56.594473 23.397715L281.672493 529.148325l-0.699932-0.699931-70.693096 212.079289 212.079289-70.693097 0.69">
+                </path>
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<template>
+  <!-- 按钮容器 -->
+  <div class="myButton">
+    <!-- 第一个按钮，背景颜色由before属性控制 -->
+    <div :style="{'background': before}">{{info}}</div>
+    <!-- 第二个按钮，背景颜色由after属性控制 -->
+    <div :style="{'background': after}">{{info}}</div>
+    <!-- 第三个按钮，背景颜色由after属性控制 -->
+    <div :style="{'background': after}">{{info}}</div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      // 按钮显示的信息
+      info: {
+        type: String,
+        default: "确定"  // 默认显示“确定”
+      },
+      // 第一个按钮的背景颜色
+      before: {
+        type: String,
+        default: "black"  // 默认为黑色
+      },
+      // 第二个和第三个按钮的背景颜色（渐变色）
+      after: {
+        type: String,
+        default: "linear-gradient(45deg, #f43f3b, #ec008c)"  // 默认为从#f43f3b到#ec008c的45度渐变色
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  /* 按钮样式 */
+  .myButton {
+    cursor: pointer;  /* 鼠标悬停时显示指针 */
+    user-select: none;  /* 防止用户选择文本 */
+    position: relative;  /* 相对定位 */
+    width: 66px;  /* 宽度 */
+    height: 33px;  /* 高度 */
+    border-radius: 4px;  /* 圆角 */
+    color: var(--white);  /* 文字颜色 */
+    font-size: 14px;  /* 字体大小 */
+    overflow: hidden;  /* 隐藏溢出的内容 */
+  }
+
+  /* 按钮内部div的样式 */
+  .myButton div {
+    width: 66px;  /* 宽度 */
+    height: 33px;  /* 高度 */
+    line-height: 33px;  /* 行高 */
+    border-radius: 4px;  /* 圆角 */
+    text-align: center;  /* 文字居中 */
+    position: absolute;  /* 绝对定位 */
+  }
+
+  /* 第二个按钮的特殊样式 */
+  .myButton div:nth-child(2) {
+    width: 100px;  /* 宽度 */
+    transition: all 0.3s ease;  /* 过渡效果 */
+    transform: translateX(-120px) skewX(-30deg);  /* 初始位移和倾斜 */
+  }
+
+  /* 第三个按钮的特殊样式 */
+  .myButton div:nth-child(3) {
+    transition: all 0.3s ease;  /* 过渡效果 */
+    transform: translateX(-120px);  /* 初始位移 */
+  }
+
+  /* 鼠标悬停时第二个按钮的变化 */
+  .myButton:hover div:nth-child(2) {
+    transform: translateX(20px) skewX(-30deg);  /* 位移和倾斜 */
+  }
+
+  /* 鼠标悬停时第三个按钮的变化 */
+  .myButton:hover div:nth-child(3) {
+    transform: translateX(0px);  /* 位移 */
+  }
+</style>