优化页面

TUIKit/components/TUIChat/chat-header/index.vue

@@ -1,44 +1,43 @@
 <template>
   <div class="Navigation">
-    <div class="Navigation-name">
-      {{ Title }}
+    <div class="Navigationcontent">
+      <image
+        @click="Returnfunc"
+        style="width: 46rpx;height: 46rpx;;"
+        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png"
+        mode="scaleToFill"
+        class="Navigation-return"
+      />
+      <div class="Navigation-name">
+        {{ Title }}
+      </div>
+      <div></div>
     </div>
-    <image
-      src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Navigationimg.png"
-      mode="scaleToFill"
-      class="Navigationimg"
-    />
-    <image
-      @click="Returnfunc"
-      src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png"
-      mode="scaleToFill"
-      class="Return"
-    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from '../../../adapter-vue';
+import { onMounted, onUnmounted, ref } from "../../../adapter-vue";
 import {
   TUIStore,
   StoreName,
   IConversationModel,
   TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
-import { TUIGlobal } from '@tencentcloud/universal-api';
-import { onLoad, onNavigationBarButtonTap } from '@dcloudio/uni-app';
+} from "@tencentcloud/chat-uikit-engine";
+import { TUIGlobal } from "@tencentcloud/universal-api";
+import { onLoad, onNavigationBarButtonTap } from "@dcloudio/uni-app";
 
-const emits = defineEmits(['openGroupManagement']);
-const props = defineProps(['isGroup']);
+const emits = defineEmits(["openGroupManagement"]);
+const props = defineProps(["isGroup"]);
 
 const currentConversation = ref<IConversationModel>();
 const typingStatus = ref(false);
-const Title = ref('Global'); // 初始化为默认标题
+const Title = ref("Global"); // 初始化为默认标题
 
 // #ifdef APP-PLUS
 onNavigationBarButtonTap(() => {
   if (props.isGroup) {
-    emits('openGroupManagement');
+    emits("openGroupManagement");
   }
 });
 
@@ -65,7 +64,7 @@ function Returnfunc() {
 }
 
 const setChatHeaderContent = (content: string | undefined) => {
-  Title.value = content || 'Global'; // 确保默认值存在
+  Title.value = content || "Global"; // 确保默认值存在
 };
 
 onMounted(() => {
@@ -100,44 +99,35 @@ function onCurrentConversationUpdated(conversation: IConversationModel) {
 function onTypingStatusUpdated(status: boolean) {
   typingStatus.value = status;
   if (typingStatus.value) {
-    setChatHeaderContent(TUITranslateService.t('TUIChat.对方正在输入...'));
+    setChatHeaderContent(TUITranslateService.t("TUIChat.对方正在输入..."));
   } else {
     setChatHeaderContent(currentConversation.value?.getShowName());
   }
 }
 </script>
 <style>
-.Return {
-  width: 46rpx;
-  height: 46rpx;
-  position: absolute;
-  top: 110rpx;
-  left: 40rpx;
-  z-index: 999;
-  font-weight: bold;
-}
-.Navigationimg {
-  width: 100%;
-  height: 240rpx;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: -1;
-}
-.Navigation-name{
-  position: absolute;
-  top: 110rpx;
-  left: 320rpx;
+.Navigation-name {
   font-size: 36rpx;
   color: #000000;
   font-weight: bold;
 }
-.Navigation{
+.Navigation {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 999;
   width: 100%;
   height: 240rpx;
+  background-image: url("https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Navigationimg.png");
+  background-position: 100% 100%;
+  background-repeat: no-repeat;
 }
-</style>
+.Navigationcontent{
+  width: 80%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 60rpx;
+}
+</style>