群公告置顶

.env.development

@@ -1,4 +1,4 @@
-VUE_APP_BASE_URL=https://test.raex.vip/
+VUE_APP_BASE_URL=https://www.raex.vip/
 NODE_ENV=development
 VUE_APP_PUBLIC_PATH=/
 ASSETS_PATH=raex

src/views/chat/Detail.vue

@@ -18,12 +18,15 @@
                     <van-icon name="wap-nav" size="18" />
                 </template>
             </van-nav-bar>
+            <div class="fixed-info" v-if="teamInfo.announcement">
+                <van-notice-bar left-icon="volume-o" :text="teamInfo.announcement" mode="link" @click="goSetting()" />
+            </div>
         </van-sticky>
 
         <div
             class="van-list"
             :style="{
-                height: `calc(var(--app-height) - var(--safe-top) - var(--safe-bottom) - ${showEmoji ? 398 : 106}px)`
+                height: `calc(var(--app-height) - var(--safe-top) - var(--safe-bottom) - ${fixedHeight}px)`
             }"
             @click="toggleEmoji(false)"
             ref="listRef"
@@ -124,6 +127,7 @@ import useList from '../../plugins/list';
 import http from '../../plugins/http';
 import dayjs from 'dayjs';
 import { ImagePreview } from 'vant';
+import { he } from 'date-fns/locale';
 const emojisPeople = Object.keys(emojis)
     .filter(key => {
         return emojis[key].category == 'people';
@@ -394,6 +398,20 @@ function onPreview(info) {
         startPosition: index
     });
 }
+
+const fixedHeight = computed(() => {
+    let height = 46;
+    if (showEmoji.value) {
+        height += 352;
+    } else {
+        height += 60;
+    }
+
+    if (teamInfo.value.announcement) {
+        height += 40;
+    }
+    return height;
+});
 </script>
 <style lang="less" scoped>
 .van-list {
@@ -533,7 +551,7 @@ function onPreview(info) {
 }
 
 .van-nav-bar {
-    --van-nav-bar-background-color: #1c1c1c;
+    --van-nav-bar-background-color: #222426;
     --van-nav-bar-icon-color: #fff;
     --van-nav-bar-title-text-color: #fff;
     --van-nav-bar-text-color: #fff;
@@ -548,4 +566,9 @@ function onPreview(info) {
     text-align: center;
     padding-bottom: 20px;
 }
+
+.fixed-info {
+    --van-notice-bar-background-color: #222426;
+    --van-notice-bar-text-color: @prim;
+}
 </style>