feat 游客数弹窗

src/views/home/components/box-2.vue

@@ -3,7 +3,9 @@
     <div class="header" :class="homeStore.amplify?'':'coll-box-2'">
       <div class="flex">
         <div class="left">
-          <div class="item">
+          <div class="item" 
+		  @click="dialogTableVisible = true" 
+		  style="cursor: pointer;">
             <div class="label">今年总游客数</div>
             <scroll-number :count="homeStore.visitorInfoData.total_count_this_year" prefix="1" />
 			<!-- -->
@@ -256,7 +258,28 @@
 			</div>
 		</div>
     </div>
+	<el-dialog title="今年总游客数" center v-model="dialogTableVisible">
+	  <div class="bom-box">
+	    <div class="table">
+	
+	      <div class="header">
+	        <div>景区</div>
+	        <div>今年游客数</div>
+	       
+	      </div>
+	      <div class="list">
+	        <div class="item" v-for="(item, index) in 10" :key="index">
+	          <div>白帝城</div>
+	          <div>1000</div>
+	        
+	       
+	        </div>
+	      </div>
+	    </div>
+	  </div>
+	</el-dialog>
   </div>
+ 
 </template>
 
 <script setup>
@@ -273,7 +296,7 @@
 
   import { useMap } from '@/hooks/map'
   import { useHomeStore } from '@/stores/home'
-
+  const dialogTableVisible = ref(false)
   const homeStore = useHomeStore()
 
   let emit = defineEmits(['switch-spot'])
@@ -495,7 +518,104 @@
 
   })
 </script>
-
+<style lang="scss" scoped>
+	:deep(.el-dialog__headerbtn .el-dialog__close){
+			color:#fff;
+			font-size:30px;
+			position:relative;
+			top:15px;
+			right:15px;
+		}
+	:deep(.el-dialog) {
+	  background: url('/src/assets/images/map-bg-2.png') no-repeat top center;
+	  background-size: 100% 100%;
+	}
+	:deep(.el-dialog__title) {
+	  color: #fff;
+	  font-weight: bold;
+	}
+	.bom-box {
+	  .table2{
+		  width:100%;
+		  height:vh(740);
+	  }
+	  .table {
+	    width: 100%;
+	    margin-top: vh(20);
+	    .header {
+	      height: vh(28);
+	      font-weight: 400;
+	      font-size: font-vw(20);
+	      color: #fff;
+	      display: flex;
+		  padding:0;
+	      background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
+	      & > div {
+	        flex: 1;
+	        display: flex;
+	        align-items: center;
+	        justify-content: center;
+	      }
+	    }
+	    .list {
+	      overflow-y: auto;
+	      height: vh(490);
+	      /* 滚动条整体样式 */
+	      &::-webkit-scrollbar {
+	        width: vw(4); /* 滚动条的宽度 */
+	      }
+	      /* 滚动条轨道 */
+	      &::-webkit-scrollbar-track {
+	        background: 'transparent'; /* 轨道的背景色 */
+	      }
+	      /* 滚动条滑块 */
+	      &::-webkit-scrollbar-thumb {
+	        background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
+	        border-radius: 5px; /* 滑块的圆角 */
+	      }
+	      .item {
+	        height: vh(50);
+	        font-weight: 400;
+	        font-size: font-vw(14);
+	        color: #f1f7ff;
+	        display: flex;
+	        &:nth-child(2n + 1) {
+	          background: linear-gradient(
+	            90deg,
+	            rgba(0, 150, 255, 0) 0%,
+	            rgba(0, 150, 255, 0.22) 100%
+	          );
+	        }
+	        & > div {
+	          flex: 1;
+	          display: flex;
+	          align-items: center;
+	          justify-content: center;
+	          white-space: nowrap; /* 保证文本在一行内显示 */
+	          overflow: hidden; /* 隐藏溢出的内容 */
+	          text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
+	        }
+	      }
+	    }
+	  }
+	  .title {
+	    span {
+	      margin-left: vw(30);
+	      font-weight: 800;
+	      font-size: font-vw(15);
+	      line-height: vh(26);
+	      text-align: center;
+	      font-style: normal;
+	      text-transform: none;
+	      background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
+	      -webkit-background-clip: text;
+	      background-clip: text;
+	      -webkit-text-fill-color: transparent;
+	      color: transparent;
+	    }
+	  }
+	}
+</style>
 <style lang="scss" scoped>
 	.new-gd{
 		background-image: url('@/assets/images/bg-3.png');