<template>  
 | 
  <view class="main_app"> 
 | 
        <view class="main_header"> 
 | 
            <image src="../../static/back.svg" class="back"></image> 
 | 
            <view class="title">调度平台</view> 
 | 
            <view class="loginout" @click="loginout">退出登录</view> 
 | 
        </view>  
 | 
    <view class="main_content"> 
 | 
        <view class="banner"> 
 | 
          <image src="@/static/banner_diaodu@2x.png" mode=""></image> 
 | 
        </view> 
 | 
        <view class="module"> 
 | 
          <view class="item" @click="jump('/pages/index/center')"> 
 | 
            <image src="@/static/ic_yuetaidiaodu@2x.png" mode=""></image> 
 | 
            <view class="text">月台调度中心</view> 
 | 
          </view> 
 | 
          <view class="item" @click="jump('/pages/index/queueup')"> 
 | 
            <image src="@/static/ic_cheliangpaidui@2x.png" mode=""></image> 
 | 
            <view class="text">车队排队情况</view> 
 | 
          </view> 
 | 
          <view class="item" @click="jump('/pages/index/control')"> 
 | 
            <image src="@/static/ic_qiyong@2x.png" mode=""></image> 
 | 
            <view class="text">月台启用停用</view> 
 | 
          </view> 
 | 
          <view class="item" @click="jump('/pages/index/set')"> 
 | 
            <image src="@/static/ic_peizhiyuetai@2x.png" mode=""></image> 
 | 
            <view class="text">配置显示月台</view> 
 | 
          </view> 
 | 
        </view> 
 | 
        <!-- footer --> 
 | 
        <view class="main_footer"> 
 | 
          <image src="@/static/logo@2x.png" mode=""></image> 
 | 
          <text>安徽安泰物流有限责任公司版权所有</text> 
 | 
        </view> 
 | 
    </view>  
 | 
  </view>  
 | 
</template>  
 | 
  
 | 
<script>  
 | 
export default {  
 | 
  data() {  
 | 
    return {  
 | 
      title: 'Hello'  
 | 
    }  
 | 
  },  
 | 
  onLoad() {  
 | 
  
 | 
  },  
 | 
  methods: { 
 | 
        loginout() { 
 | 
            uni.showModal({ 
 | 
                title: '提示', 
 | 
                content: '确认要退出登录吗', 
 | 
                success: (res) => { 
 | 
                    if (res.confirm) { 
 | 
                        uni.clearStorageSync({}) 
 | 
                        uni.redirectTo({ 
 | 
                            url: '/pages/index/login' 
 | 
                        }) 
 | 
                    } else if (res.cancel) { 
 | 
                        console.log('用户点击取消'); 
 | 
                    } 
 | 
                } 
 | 
            }); 
 | 
             
 | 
        },  
 | 
    jump(path) {  
 | 
      uni.navigateTo({  
 | 
        url: path  
 | 
      })  
 | 
    },  
 | 
  }  
 | 
}  
 | 
</script>  
 | 
<style lang="scss"> 
 | 
    .main_header{ 
 | 
        width: 100%; 
 | 
        height: 176rpx; 
 | 
        padding: 88rpx 30rpx 0; 
 | 
        display: flex; 
 | 
        justify-content: space-between; 
 | 
        align-items: center; 
 | 
        background-color: $uni-color-primary; 
 | 
        color: #fff; 
 | 
        .back{ 
 | 
            width: 42rpx; 
 | 
            height: 42rpx; 
 | 
        } 
 | 
        .title{ 
 | 
            font-weight: 500; 
 | 
            font-size: 36rpx; 
 | 
        } 
 | 
    }  
 | 
.main_app {  
 | 
  min-height: 100vh;  
 | 
  background: #f7f7f7; 
 | 
    padding: 0; 
 | 
    .main_content{ 
 | 
        padding: 30rpx; 
 | 
    }  
 | 
  .banner {  
 | 
    width: 100%;  
 | 
    height: 270rpx;  
 | 
    border-radius: 24rpx;  
 | 
    margin-bottom: 40rpx;  
 | 
    image {  
 | 
      width: 100%;  
 | 
      height: 100%;  
 | 
    }  
 | 
  }  
 | 
  .module {  
 | 
    display: flex;  
 | 
    flex-wrap: wrap;  
 | 
    .item {  
 | 
      width: 336rpx;  
 | 
      height: 290rpx;  
 | 
      background: #ffffff;  
 | 
      border-radius: 24rpx;  
 | 
      margin-bottom: 20rpx;  
 | 
      display: flex;  
 | 
      flex-direction: column;  
 | 
      justify-content: center;  
 | 
      align-items: center;  
 | 
      image {  
 | 
        width: 112rpx;  
 | 
        height: 112rpx;  
 | 
        margin-bottom: 28rpx;  
 | 
      }  
 | 
      .text {  
 | 
        font-weight: 500;  
 | 
        font-size: 36rpx;  
 | 
        color: #222222;  
 | 
      }  
 | 
      &:nth-of-type(2n) {  
 | 
        margin-left: 18rpx;  
 | 
      }  
 | 
    }  
 | 
  }  
 | 
  .main_footer {  
 | 
    width: 100%;  
 | 
    position: fixed;  
 | 
    bottom: 84rpx;  
 | 
    display: flex;  
 | 
    justify-content: center;  
 | 
    font-size: 24rpx;  
 | 
    color: #666666;  
 | 
    image {  
 | 
      width: 40rpx;  
 | 
      height: 40rpx;  
 | 
    }  
 | 
  }  
 | 
}  
 | 
</style> 
 |