count-pass-app/pages/login/chooserole.vue

<template>
	<view class="register">
    <!-- <view class="login-title">
			<uni-icons @click="backLogin" type="back" size="25"></uni-icons>
		</view> -->
    <view class="login-title">
			<span>{{$t("login.pleaseSelectUserType")}}</span>
      <p class="text">{{$t("login.morePreciseService")}}</p>
		</view>
    <view class="role-card jxs" @click="toRegister('3')">
      <view class="role-info">
        <p class="title">{{$t("login.myIsDealer")}}</p>
        <p class="text">{{$t("login.aKeyOrder")}}</p>
      </view>
      <uni-icons type="forward" color="rgb(114, 65, 0)" size="22"></uni-icons>
    </view>
    <view class="role-card sj"  @click="toRegister('4')">
      <view class="role-info">
        <p class="title">{{$t("login.myIsDriver")}}</p>
        <p class="text">{{$t("login.odersTheNearest")}}</p>
      </view>
      <uni-icons color="rgb(42, 90, 122)" type="forward" size="22"></uni-icons>
    </view>
    <view class="role-card yss"  @click="toRegister('7')">
      <view class="role-info">
        <p class="title">{{$t("login.myIsTrans")}}</p>
        <p class="text">{{$t("login.onTimeArrive")}}</p>
      </view>
      <uni-icons color="rgb(42, 90, 122)" type="forward" size="22"></uni-icons>
    </view>
	<!-- <view class="role-card qy"  @click="toRegister('5')">
	  <view class="role-info">
	    <p class="title">{{$t("login.myIsEnterprise")}}</p>
	    <p class="text">{{$t("login.auditTheOperate")}}</p>
	  </view>
	  <uni-icons color="rgb(42, 90, 122)" type="forward" size="22"></uni-icons>
	</view> -->
	</view>
</template>
<script>
export default {
  data(){
    return {
     
    }
  },
  methods:{
    backLogin(){
      uni.navigateBack({ delta: 1 })
    },
    toRegister(type){
      uni.navigateTo({
        url: `/pages/login/register?type=${type}`
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .register {
    // height: 100%;
    width: 630rpx;
    padding:80rpx 60rpx 0;
    overflow: hidden !important;
    .login-title{
      line-height: 100rpx;
      font-size: 40rpx;
      .text{
        font-size: 32rpx;
        line-height: 32rpx;
        color: #999;
      }
    }
    .role-card{
      display: flex;
      padding: 40rpx;
      border-radius: 10rpx;
      align-items: center;
      .role-info{
        flex: 1;
        
      }
    }
    .jxs{
      background: linear-gradient(to left , rgb(224, 202, 170),rgb(240, 228, 211));
      margin-top: 60rpx;
      .title{
          font-size: 32rpx;
          line-height: 60rpx;
          color: rgb(114, 65, 0);
        }
        .text{
          font-size: 28rpx;
          line-height: 60rpx;
          color: rgb(155, 124, 84);
        }
    }
    .sj{
      background: linear-gradient(to left , rgb(113, 205, 233),rgb(161, 225, 245));
      margin-top: 32rpx;
      .title{
          font-size: 32rpx;
          line-height: 60rpx;
          color: rgb(42, 90, 122);
        }
        .text{
          font-size: 28rpx;
          line-height: 60rpx;
          color: rgb(105, 145, 160);
        }
    }
    .yss{
      background: linear-gradient(to left ,  #11c198, #a1f5e3);
      margin-top: 32rpx;
      .title{
          font-size: 32rpx;
          line-height: 60rpx;
          color: rgb(42, 90, 122);
        }
        .text{
          font-size: 28rpx;
          line-height: 60rpx;
          color: rgb(105, 145, 160);
        }
    }
    .qy{
      background: linear-gradient(to left ,  #11c198, #a1f5e3);
      margin-top: 32rpx;
      .title{
          font-size: 32rpx;
          line-height: 60rpx;
          color: rgb(42, 90, 122);
        }
        .text{
          font-size: 28rpx;
          line-height: 60rpx;
          color: rgb(105, 145, 160);
        }
    }
  }
</style>