每个小节的宽度计算规则 优化

src/views/LongImage.vue

@@ -28,7 +28,9 @@
         :is="timeItem.component"
         :info="{ ...timeItem.info, id: timeItem.id }"
         :style="{
-          left: `calc(${itemW}% * ${index} - ${translateLength}px)`,
+          left: `calc(${itemW}${$isMobile ? 'vw' : 'vh'} * ${index} - ${translateLength}px)`,
+          width: `${itemW}${$isMobile ? 'vw' : 'vh'}`,
+          maxWidth: `${itemW}${isMobile ? 'vw' : 'vh'}`,
         }"
         @onClickTimeItem="onClickTimeItem"
       />
@@ -190,7 +192,7 @@ const currentTimeIdx = ref(0);
 const instance = getCurrentInstance()
 const globalProperties = instance.appContext.app.config.globalProperties
 
-const itemW = computed(() => globalProperties.$isMobile || window.innerWidth < 1400 ? 158 : 138)
+const itemW = computed(() => 280)
 
 const isShowDir = ref(false)
 const isShowGuide = ref(false)
@@ -371,8 +373,6 @@ onMounted(() => {
     position: absolute;
     top: 0;
     height: 100%;
-    width: calc(v-bind(itemW) * 1%);
-    max-width: calc(v-bind(itemW) * 1%);
     text-align: center;
     justify-content: flex-start;
     display: flex;