uniDataCenter/components/expenseConfi...

<template>
  <uni-drawer ref="showinfoMask" mode="left">
    <view class="drawer_info">
      <view class="text-center">您的基础信息暂未配置<br>请配置完成后再添加报销！</view>
      <view class="footer">
        <view class="cancel" @click="closeDrawer">取消</view>
        <view class="confirm" @click="goInfoPage">去添加</view>
      </view>
    </view>
  </uni-drawer>
</template>

<script>
	export default {
    methods:{
      openDrawer(){
        this.$refs.showinfoMask.open()
      },
      closeDrawer () {
        this.$refs.showinfoMask.close()
      },
      goInfoPage () {
        uni.navigateTo({
          url: '../selfInfo/selfInfo'
        })
      },
    }

	}
</script>

<style lang="scss" scoped>
.drawer_info {
  background-color: #2a2c3b;
  height: 100%;
  width: 750rpx;
  color: #fff;
  padding: 60rpx 50rpx;
  .footer {
    margin-top: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .cancel {
      font-size: 28rpx;
      color: #747474;
      border-radius: 4px;
      border: 1px solid #747474;
      padding: 20rpx 50rpx;
    }
    .confirm {
      font-size: 28rpx;
      color: #fff;
      border-radius: 4px;
      border: 1px solid #5b80f4;
      padding: 20rpx 50rpx;
      background: #5b80f4;
      margin-left: 20rpx;
    }
  }
}
</style>