style:修改样式

src/views/DestinationDelivery/src/components/CreateNewBooking/src/CreateNewbooking.vue

@@ -80,16 +80,6 @@ const ModeType = ref([
   }
 ])
 
-const leftAsideWidth = ref(sessionStorage.getItem('leftAsideWidth') || '')
-const isWide = computed(() => {
-  return leftAsideWidth.value === '232px'
-})
-const handleStorageChange = (event: StorageEvent) => {
-  if (event.key === 'leftAsideWidth') {
-    leftAsideWidth.value = event.newValue || ''
-  }
-}
-
 // 设置无法点击
 const isNotClickAddress = computed(() => {
   if(a == undefined) {
@@ -700,32 +690,17 @@ const SubmitBooking = () => {
 
 onMounted(() => { 
   getInitBookingData()
-  window.addEventListener('storage', handleStorageChange)
-  
-  // 添加自定义事件监听器（用于同页面内的变化）
-  window.addEventListener('leftAsideWidthChange', ((event: CustomEvent) => {
-    leftAsideWidth.value = event.detail
-  }) as EventListener)
-})
-onUnmounted(() => {
-  // 移除事件监听器
-  window.removeEventListener('storage', handleStorageChange)
-  window.removeEventListener('leftAsideWidthChange', ((event: CustomEvent) => {
-    leftAsideWidth.value = event.detail
-  }) as EventListener)
 })
 </script>
 
 <template>
   <div>
-    <div class="Title" :style="{width: isWide? 'calc(100% - 232px)' : 'calc(100% - 64px)'}" >
-      <div class="title_flex">
-        <div v-if="a == undefined">Create New Booking</div>
-        <div v-else>Modify Booking</div>
-        <div class="flex">
-          <el-button @click="CancelRulesVisible = true" class="el-button--default create-button"><span class="font_family icon-icon_return_b"></span> Cancel</el-button>
-          <el-button :disabled="isNotSubmit" @click="SubmitBooking" class="el-button--main create-button"><span class="font_family icon-icon_submit_b"></span> Submit</el-button>
-        </div>
+    <div class="Title">
+      <div v-if="a == undefined">Create New Booking</div>
+      <div v-else>Modify Booking</div>
+      <div class="flex">
+        <el-button @click="CancelRulesVisible = true" class="el-button--default create-button"><span class="font_family icon-icon_return_b"></span> Cancel</el-button>
+        <el-button :disabled="isNotSubmit" @click="SubmitBooking" class="el-button--main create-button"><span class="font_family icon-icon_submit_b"></span> Submit</el-button>
       </div>
     </div>
     <div class="booking-info" v-if="a != undefined">
@@ -1209,7 +1184,7 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 .Title {
-  position: fixed;
+  position: sticky;
   border: 1px solid var(--color-border);
   border-top: none;
   border-width: 1px 0 1px 0;
@@ -1217,17 +1192,12 @@ onUnmounted(() => {
   font-weight: 700;
   padding: 0 37px 0 24px;
   height: 68px;
-  top: 48px;
   z-index: 1000;
-  background-color: var(--color-mode);
-  box-sizing: border-box;
-}
-.title_flex {
-  width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 68px;
+  background-color: var(--color-mode);
+  box-sizing: border-box;
 }
 .flex {
   display: flex;

src/views/Layout/src/LayoutView.vue

@@ -11,14 +11,10 @@ import { useUserStore } from '@/stores/modules/user'
 
 const userStore = useUserStore()
 const leftAsideWidth = ref('232px')
-sessionStorage.setItem('leftAsideWidth', leftAsideWidth.value)
-window.dispatchEvent(new CustomEvent('leftAsideWidthChange', { detail: leftAsideWidth.value }))
 const isCollapse = ref(false)
 const handleMenuCollapse = (val: boolean) => {
   isCollapse.value = val
   val ? (leftAsideWidth.value = '64px') : (leftAsideWidth.value = '232px')
-  sessionStorage.setItem('leftAsideWidth', leftAsideWidth.value)
-window.dispatchEvent(new CustomEvent('leftAsideWidthChange', { detail: leftAsideWidth.value }))
 }
 
 const isShowAIRobotChat = ref(false)