刷新页面菜单定位

src/components/HeadlineTag/index.vue

@@ -114,6 +114,7 @@ const props = defineProps({
 }
 
 .text_desk_head {
+    user-select: none;
     font-size: 18px;
     font-weight: bold;
     background-image: -webkit-linear-gradient(bottom, rgb(120, 173, 221), rgb(229, 232, 236));

src/layout/components/Sidebar/index.vue

@@ -18,7 +18,7 @@
       </div>
       <div class="tag-style" ref="tagBox">
         <div class="menu_bottom_box" ref="scrollWrapper">
-          <div class="item_box_sidebar" v-for="(item, index) in filteredArray" :key="item.path + index">
+          <div class="item_box_sidebar" v-for="(item, index) in filteredArray" :key="item.path + index" :id="item.path">
             <div @click="goBack(item.path)">
               <div class="img_box_item" :class="getPathUrl(item.path) ? 'activate_img_sidebar' : ''">
                 <svg class="energy_box_icon" aria-hidden="true">
@@ -249,6 +249,29 @@ function handleLongPressil() {
     scrollWrapper.value.scrollLeft = tabScroll.value
   }
 }
+// 生命周期
+onMounted(() => {
+  const { meta, path } = route;
+  let arrUrl = path.split("/system/")
+  let arril = ''
+  if (arrUrl.length > 1) {
+    arril = arrUrl[1];
+  } else {
+    arril = arrUrl[0];
+  }
+  const targetElement = document.getElementById(`${arril}`);
+  if (targetElement) {
+    targetElement.scrollIntoView({ behavior: 'auto' });
+  }
+  nextTick(() => {
+    let scrollTime = setInterval(() => {
+      let navSize = scrollWrapper.value.scrollLeft;
+      let boxWidth = tagBox.value.scrollLeft
+      tabScroll.value = navSize;
+      clearInterval(scrollTime)
+    })
+  })
+});
 </script>
 
 <style lang="scss" scoped>

src/views/system/passengerFlow/index.vue

@@ -1,7 +1,26 @@
 <template>
-  <div>
-    <div style="width: 400px;padding-top: 50px;">
-      <HeadlineTag value="客流系统passengerFlow"></HeadlineTag>
+  <div class="passenger_flow">
+    <div class="left_passenger_flow">
+      <div class="flex_spection">
+        <HeadlineTag value="客流系统passengerFlow"></HeadlineTag>
+      </div>
+      <div class="flex_spection">
+        <HeadlineTag value="客流系统passengerFlow"></HeadlineTag>
+      </div>
+      <div class="flex_spection">
+        <HeadlineTag value="客流系统passengerFlow"></HeadlineTag>
+      </div>
+    </div>
+    <div class="right_passenger_flow">
+      <div class="flex_spection">
+        <HeadlineTag value="客流系统passengerFlow"></HeadlineTag>
+      </div>
+      <div class="flex_spection">
+        <HeadlineTag value="客流系统passengerFlow"></HeadlineTag>
+      </div>
+      <div class="flex_spection">
+        <HeadlineTag value="客流系统passengerFlow"></HeadlineTag>
+      </div>
     </div>
   </div>
 </template>
@@ -12,5 +31,37 @@ const type = 'right'
 </script>
 
 <style scoped lang="scss">
+.passenger_flow {
+  position: relative;
+  width: 100%;
+  padding-top: 45px;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left_passenger_flow {
+  position: absolute;
+  left: 0;
+  width: 25%;
+  // height: calc(100% - 45px);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding-left: 10px;
+}
+
+.right_passenger_flow {
+  position: absolute;
+  right: 0;
+  width: 25%;
+  // height: calc(100% - 45px);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
 
+.flex_spection {
+  flex: 1;
+  color: #fff;
+}
 </style>

src/views/system/visitor/index.vue

@@ -16,7 +16,7 @@
       </div>
     </div>
     <div class="right_visitor">
-      <div class="flex_spection">
+      <div class="garden_box">
         <HeadlineTag type="right" value="园区基本信息"></HeadlineTag>
         <div class="card_visitor_star">
           <div class="item_visitor_top">
@@ -355,6 +355,10 @@ window.addEventListener('resize', () => {
   color: #fff;
 }
 
+.garden_box {
+  height: 300px;
+}
+
 .flex_spection {
   flex: 1;
   color: #fff;
@@ -389,7 +393,7 @@ window.addEventListener('resize', () => {
 
 .item_visitor_top {
   flex: 1;
-  margin: 10px 0px;
+  margin: 5px 0px;
   padding-left: 20px;
   display: flex;
   align-items: center;
@@ -398,8 +402,8 @@ window.addEventListener('resize', () => {
 }
 
 .circle_itor {
-  width: 60px;
-  height: 60px;
+  width: 50px;
+  height: 50px;
   border-radius: 50%;
   border: 2px solid rgb(103, 168, 202);
 }
@@ -412,11 +416,12 @@ window.addEventListener('resize', () => {
 }
 
 .title_itor_13 {
+  color: #ffffff;
   font-size: 13px;
 }
 
 .title_itor_18 {
-  padding-top: 10px;
+  padding-top: 5px;
   font-weight: bold;
   font-size: 18px;
   background-image: -webkit-linear-gradient(bottom, rgb(20, 127, 228), rgb(229, 232, 236));