|  |  | 
 |  |  |                 <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" /> | 
 |  |  |                 <div>实时园区车辆</div> | 
 |  |  |               </div> | 
 |  |  |               <img src="@/assets/images/title@2x.png" class="bg" alt="" /> | 
 |  |  |               <img src="@/assets/images/task/title@2x.png" class="bg" alt="" /> | 
 |  |  |             </div> | 
 |  |  |             <div class="second_title"> | 
 |  |  |               <div class="title"> | 
 |  |  | 
 |  |  |                 <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" /> | 
 |  |  |                 <div>在园人员分析</div> | 
 |  |  |               </div> | 
 |  |  |               <img src="@/assets/images/title@2x.png" class="bg" alt="" /> | 
 |  |  |               <img src="@/assets/images/task/title@2x.png" class="bg" alt="" /> | 
 |  |  |             </div> | 
 |  |  |             <div class="second_title"> | 
 |  |  |               <div class="title"> | 
 |  |  | 
 |  |  |               <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" /> | 
 |  |  |               <div>当前车辆滞留预警</div> | 
 |  |  |             </div> | 
 |  |  |             <img src="@/assets/images/title@2x.png" class="bg" alt="" /> | 
 |  |  |             <img src="@/assets/images/task/title@2x.png" class="bg" alt="" /> | 
 |  |  |           </div> | 
 |  |  |           <div class="table"> | 
 |  |  |             <div class="line header"> | 
 |  |  | 
 |  |  |               <div class="separate"></div> | 
 |  |  |               <div class="tab" :class="{ active: warningTab == '2' }" @click="tasClick('2')">行为告警</div> | 
 |  |  |             </div> | 
 |  |  |             <img src="@/assets/images/title@2x.png" class="bg" alt="" /> | 
 |  |  |             <img src="@/assets/images/task/title@2x.png" class="bg" alt="" /> | 
 |  |  |           </div> | 
 |  |  |           <div class="one_swiper_wrap"> | 
 |  |  |             <div class="list one-swiper"> | 
 |  |  | 
 |  |  |               <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" /> | 
 |  |  |               <div>园区安防设备</div> | 
 |  |  |             </div> | 
 |  |  |             <img src="@/assets/images/title@2x.png" class="bg" alt="" /> | 
 |  |  |             <img src="@/assets/images/task/title@2x.png" class="bg" alt="" /> | 
 |  |  |           </div> | 
 |  |  |           <div class="monitoring" @click="showJk = !showJk"> | 
 |  |  |             <img src="@/assets/images/SecurityControl/ic_jiankong@2x.png" class="icon" alt=""> | 
 |  |  | 
 |  |  |               <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" /> | 
 |  |  |               <div>今日访客滞留情况</div> | 
 |  |  |             </div> | 
 |  |  |             <img src="@/assets/images/title@2x.png" class="bg" alt="" /> | 
 |  |  |             <img src="@/assets/images/task/title@2x.png" class="bg" alt="" /> | 
 |  |  |           </div> | 
 |  |  |           <div class="table"> | 
 |  |  |             <div class="line header"> | 
 |  |  | 
 |  |  |           show: true, | 
 |  |  |           position: 'outside', | 
 |  |  |           formatter: (params) => { | 
 |  |  |             const index = params.dataIndex; | 
 |  |  |             const index = params.dataIndex | 
 |  |  |             return `{color${index}|${params.data.name} ${params.data.rate}%}` | 
 |  |  |             // return `<div>${params.data.name}</div>` | 
 |  |  |           }, | 
 |  |  | 
 |  |  |       margin-bottom: 20px; | 
 |  |  |       font-size: 14px; | 
 |  |  |       color: #D2E0FF; | 
 |  |  |       background: rgba(0, 86, 255, 0.05); | 
 |  |  |       backdrop-filter: blur(5px); | 
 |  |  |  | 
 |  |  |       .second_title { | 
 |  |  |         margin-top: 24px; | 
 |  |  | 
 |  |  |  | 
 |  |  |     .right_box_one { | 
 |  |  |       margin-bottom: 20px; | 
 |  |  |       background: rgba(0, 86, 255, 0.05); | 
 |  |  |       backdrop-filter: blur(5px); | 
 |  |  |  | 
 |  |  |       .second_title { | 
 |  |  |         margin-top: 20px; | 
 |  |  | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     .right_box_two {} | 
 |  |  |     .right_box_two { | 
 |  |  |       background: rgba(0, 86, 255, 0.05); | 
 |  |  |       backdrop-filter: blur(5px); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     .right_box_three {} | 
 |  |  |     .right_box_three { | 
 |  |  |       background: rgba(0, 86, 255, 0.05); | 
 |  |  |       backdrop-filter: blur(5px); | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  | } | 
 |  |  |  | 
 |  |  | 
 |  |  |     .one_swiper_wrap { | 
 |  |  |       height: 140px; | 
 |  |  |       overflow: hidden; | 
 |  |  |       background: rgba(0, 86, 255, 0.05); | 
 |  |  |       backdrop-filter: blur(5px); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     .list { | 
 |  |  | 
 |  |  |     flex: 1; | 
 |  |  |     margin-right: 20px; | 
 |  |  |     position: relative; | 
 |  |  |     background: rgba(0, 86, 255, 0.05); | 
 |  |  |     backdrop-filter: blur(5px); | 
 |  |  |  | 
 |  |  |     .content { | 
 |  |  |       display: flex; | 
 |  |  | 
 |  |  |  | 
 |  |  |   .visitor_warning { | 
 |  |  |     width: 360px; | 
 |  |  |     background: rgba(0, 86, 255, 0.05); | 
 |  |  |     backdrop-filter: blur(5px); | 
 |  |  |  | 
 |  |  |     .table { | 
 |  |  |       .list { | 
 |  |  | 
 |  |  |     align-items: center; | 
 |  |  |     font-weight: bold; | 
 |  |  |     font-size: 16px; | 
 |  |  |     background-image: -webkit-linear-gradient(top, | 
 |  |  |         #ffffff 0%, | 
 |  |  |         #c8ddff 66%, | 
 |  |  |         #85b4ff 72%, | 
 |  |  |         #74a9ff 100%); | 
 |  |  |     -webkit-background-clip: text; | 
 |  |  |     -webkit-text-fill-color: transparent; | 
 |  |  |  | 
 |  |  |     .icon { | 
 |  |  |       width: 16px; |