| <template> | 
|     <view class="main_app"> | 
|         <view class="title_wrap"> | 
|             <view class="name">某某某,欢迎登录~</view> | 
|             <view class="btn" @click="loginOut">退出登录</view> | 
|         </view> | 
|         <view class="banner_wrap"> | 
|             <view class="h1">安泰物流</view> | 
|             <view class="h2">安全重于泰山 服务追求卓越</view> | 
|             <image class="banner" src="../../static/banner.jpg" mode="widthFix"></image> | 
|         </view> | 
|         <view class="title_wrap"><view class="name">业务办理</view></view> | 
|         <view class="container1"> | 
|             <view class="left"> | 
|                 <view class="img_wrap img1" @click="jump('/pages/staff/visitorReport')"> | 
|                     <image src="@/static/staff/ic_fangkebaobei.png" class="img"></image> | 
|                     <view class="h1">访客报备</view> | 
|                     <view class="h2">VISITOR REPORTING</view> | 
|                 </view> | 
|                 <view class="img_wrap img2" @click="jump('/pages/staff/meetingSub')"> | 
|                     <image src="@/static/staff/ic_yuyuehuiyishi.png" class="img"></image> | 
|                     <view class="h1">预约会议室</view> | 
|                     <view class="h2">BOOK A MEETING ROOM</view> | 
|                 </view> | 
|             </view> | 
|             <view class="right"> | 
|                 <view class="img_wrap img2" @click="jump('/pages/staff/snapshot')"> | 
|                     <image src="@/static/staff/ic_yinhuansuipai.png" class="img"></image> | 
|                     <view class="h1">隐患随手拍</view> | 
|                     <view class="h2">HIDDEN DANGER</view> | 
|                 </view> | 
|                 <view class="img_wrap img2" @click="jump('/pages/staff/snapshot')"> | 
|                     <image src="@/static/staff/ic_yongcheshenqing.png" class="img"></image> | 
|                     <view class="h1">用车申请</view> | 
|                     <view class="h2">VEHICLE APPLICATION</view> | 
|                 </view> | 
|                 <view class="img_wrap img2" @click="jump('/pages/staff/snapshot')"> | 
|                     <image src="@/static/staff/ic_xiugaimima.png" class="img"></image> | 
|                     <view class="h1">修改密码</view> | 
|                     <view class="h2">CHANGE PASSWORD</view> | 
|                 </view> | 
|             </view> | 
|         </view> | 
|         <!--  --> | 
|         <view class="title_wrap"><view class="name">业务查询</view></view> | 
|         <view class="container2"> | 
|             <view class="img_wrap"> | 
|                 <image class="img" src="@/static/staff/ic_renwuzhongxin.png"></image> | 
|                 <view class="h1">任务中心</view> | 
|                 <view class="h2">TASK CENTER</view> | 
|                 <view class="task_num">99+</view> | 
|             </view> | 
|             <view class="img_wrap"> | 
|                 <image class="img" src="@/static/staff/ic_wodehuiyi.png"></image> | 
|                 <view class="h1">我的会议日历</view> | 
|                 <view class="h2">MY MEETING CALENDAR</view> | 
|             </view> | 
|             <view class="img_wrap"> | 
|                 <image class="img" src="@/static/staff/ic_paichejilu.png"></image> | 
|                 <view class="h1">派车记录</view> | 
|                 <view class="h2">VEHICLE DISPATCH</view> | 
|             </view> | 
|             <view class="img_wrap"> | 
|                 <image class="img" src="@/static/staff/ic_huiyishiguanli.png"></image> | 
|                 <view class="h1">会议室管理</view> | 
|                 <view class="h2">MANAGE MEETING ROOMS</view> | 
|             </view> | 
|         </view> | 
|         <view class="copyright"> | 
|             <image src="@/static/logo_s@2x.png" mode="widthFix" /> | 
|             <text>安徽安泰物流有限责任公司版权所有</text> | 
|         </view> | 
|     </view> | 
| </template> | 
|   | 
| <script> | 
| export default { | 
|     data() { | 
|         return {}; | 
|     }, | 
|     methods: { | 
|         jump(path){ | 
|             uni.navigateTo({ | 
|                 url: path | 
|             }); | 
|         }, | 
|         loginOut() { | 
|             uni.clearStorageSync() | 
|             uni.redirectTo({ | 
|                 url: '/pages/login/login' | 
|             }) | 
|         }, | 
|     } | 
| }; | 
| </script> | 
|   | 
| <style lang="scss" scoped> | 
| .title_wrap { | 
|     display: flex; | 
|     justify-content: space-between; | 
|     align-items: center; | 
|     margin-bottom: 24rpx; | 
|     .name { | 
|         font-weight: 500; | 
|         font-size: 34rpx; | 
|         color: #222222; | 
|     } | 
|     .btn { | 
|         width: 144rpx; | 
|         height: 56rpx; | 
|         border-radius: 36rpx; | 
|         border: 1rpx solid #279baa; | 
|         font-size: 26rpx; | 
|         color: #279baa; | 
|         display: flex; | 
|         justify-content: center; | 
|         align-items: center; | 
|     } | 
| } | 
| .main_app { | 
|     padding-top: 12rpx; | 
| } | 
| .banner_wrap { | 
|     padding: 54rpx 44rpx; | 
|     color: #fff; | 
|     position: relative; | 
|     width: 688rpx; | 
|     height: 270rpx; | 
|     margin-bottom: 40rpx; | 
|     .h1 { | 
|         font-weight: bold; | 
|         line-height: 66rpx; | 
|         font-size: 44rpx; | 
|         margin-bottom: 14rpx; | 
|     } | 
|     .banner { | 
|         position: absolute; | 
|         top: 0; | 
|         left: 0; | 
|         width: 100%; | 
|         z-index: -1; | 
|     } | 
| } | 
| .container1 { | 
|     display: flex; | 
|     flex-wrap: wrap; | 
|     view { | 
|         width: 336rpx; | 
|     } | 
|     .left { | 
|         margin-right: 18rpx; | 
|     } | 
|     .img_wrap { | 
|         position: relative; | 
|         padding: 24rpx 0rpx 0 28rpx; | 
|         border-radius: 8rpx; | 
|         overflow: hidden; | 
|         .h1 { | 
|             font-weight: 500; | 
|             font-size: 32rpx; | 
|             color: #222222; | 
|             line-height: 48rpx; | 
|             margin-bottom: 4rpx; | 
|         } | 
|         .h2 { | 
|             font-size: 22rpx; | 
|             color: #7b9da1; | 
|             line-height: 34rpx; | 
|         } | 
|         .img { | 
|             width: 100%; | 
|             height: 100%; | 
|             position: absolute; | 
|             top: 0; | 
|             left: 0; | 
|             z-index: -1; | 
|         } | 
|     } | 
|     .img1 { | 
|         width: 336rpx; | 
|         height: 296rpx; | 
|         margin-bottom: 16rpx; | 
|     } | 
|     .img2 { | 
|         width: 336rpx; | 
|         height: 140rpx; | 
|         margin-bottom: 16rpx; | 
|     } | 
| } | 
| .container2 { | 
|     display: flex; | 
|     flex-wrap: wrap; | 
|     .img_wrap { | 
|         width: 336rpx; | 
|         height: 140rpx; | 
|         margin-bottom: 16rpx; | 
|         position: relative; | 
|         border-radius: 8rpx; | 
|         overflow: hidden; | 
|         padding: 24rpx 0rpx 0 28rpx; | 
|         &:nth-of-type(2n) { | 
|             margin-left: 18rpx; | 
|         } | 
|         .task_num{ | 
|             position: absolute; | 
|             left: 164rpx; | 
|             top: 20rpx; | 
|             width: 60rpx; | 
|             height: 48rpx; | 
|             border-radius: 50%; | 
|             background-color: #fff; | 
|             color: #db534c; | 
|             display: flex; | 
|             align-items: center; | 
|             justify-content: center; | 
|             font-size: 24rpx | 
|         } | 
|         .h1 { | 
|             font-weight: 500; | 
|             font-size: 32rpx; | 
|             color: #222222; | 
|             line-height: 48rpx; | 
|             margin-bottom: 4rpx; | 
|         } | 
|         .h2 { | 
|             font-size: 22rpx; | 
|             color: #7b9da1; | 
|             line-height: 34rpx; | 
|         } | 
|         .img { | 
|             width: 100%; | 
|             height: 100%; | 
|             position: absolute; | 
|             top: 0; | 
|             left: 0; | 
|             z-index: -1; | 
|         } | 
|     } | 
| } | 
| .copyright { | 
|     display: flex; | 
|     align-items: center; | 
|     justify-content: center; | 
|     margin-top: 44rpx; | 
|     font-size: 24rpx; | 
|     color: #666666; | 
|     image { | 
|         width: 40rpx; | 
|         height: 40rpx; | 
|     } | 
| } | 
| </style> |