123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202 |
- <template>
- <div class="login">
- <img src="./chooseIdentityImg/back.png" alt="" class="logobig" />
- <div class="title">请选择您的身份</div>
- <div class="title1">方便我们为您提供更准确的服务</div>
- <div class="choose">
- <div
- @click="chooseIdentity(1)"
- :class="isSelect === 1 ? 'select isselect' : 'select'"
- >
- <div>
- <img class="headerImg" src="./chooseIdentityImg/header1.png" alt="" />
- </div>
- <div class="name">企业上报</div>
- <div class="huan"><van-icon name="success" /></div>
- </div>
- <div
- @click="chooseIdentity(2)"
- :class="isSelect === 2 ? 'select isselect' : 'select'"
- class="select"
- style="margin-top: 20px"
- >
- <div>
- <img class="headerImg" src="./chooseIdentityImg/header2.png" alt="" />
- </div>
- <div class="name">属地核查</div>
- <div class="huan"><van-icon name="success" /></div>
- </div>
- <div
- @click="chooseIdentity(3)"
- :class="isSelect === 3 ? 'select isselect' : 'select'"
- class="select"
- style="margin-top: 20px"
- >
- <div>
- <img class="headerImg" src="./chooseIdentityImg/header3.png" alt="" />
- </div>
- <div class="name">部门检查</div>
- <div class="huan"><van-icon name="success" /></div>
- </div>
- </div>
- <div class="btnbox">
- <van-button class="btn" @click="goLogin">去登陆</van-button>
- </div>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- loginForm: {},
- isSelect: 1,
- };
- },
- mounted() {},
- methods: {
- chooseIdentity(e) {
- this.isSelect = e;
- },
- goLogin() {
- if (this.isSelect == 1) {
- uni.navigateTo({
- url: "/pages/login/login",
- });
- }
- if (this.isSelect == 2) {
- uni.navigateTo({
- url: "/pages/subPackages/phoneRegister/index",
- });
- }
- },
- },
- };
- </script>
- <style lang="scss">
- .login {
- background: white;
- height: 100%;
- overflow: hidden;
- .logTit {
- width: 80vw;
- left: 10vw;
- top: 45vw;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- position: absolute;
- z-index: 1;
- color: rgba(51, 51, 51, 1);
- font-size: 4vw;
- p {
- color: rgba(102, 102, 102, 1);
- font-size: 4vw;
- margin-top: 0.5vw;
- }
- .titletxt {
- font-size: 48rpx;
- font-family: Taipei Sans TC Beta-Bold, Taipei Sans TC Beta;
- font-weight: bold;
- color: #333333;
- }
- .titletxt2 {
- font-size: 32rpx;
- font-family: PingFang SC-Regular, PingFang SC;
- font-weight: 400;
- color: #666666;
- }
- }
- .logobig {
- width: 100vw;
- height: 100vh;
- position: absolute;
- left: 0;
- z-index: 0;
- }
- .title {
- font-weight: bold;
- font-size: 52rpx;
- color: #222222;
- position: absolute;
- top: 342rpx;
- width: 100%;
- font-family: cursive;
- text-align: center;
- }
- .title1 {
- position: absolute;
- top: 432rpx;
- // left: 52px;
- font-weight: 400;
- font-size: 28rpx;
- color: #354448;
- width: 100%;
- text-align: center;
- }
- .huan {
- width: 40rpx;
- height: 40rpx;
- border: 4rpx solid #c0c2c3;
- background: #ffffff;
- color: #c0c2c3;
- border-radius: 50%;
- text-align: center;
- line-height: 40rpx;
- }
- .choose {
- position: absolute;
- top: 800rpx;
- width: 100%;
- .headerImg {
- height: 88rpx;
- width: 88rpx;
- }
- .select {
- margin: auto;
- display: flex;
- align-items: center;
- justify-content: space-between;
- width: 654rpx;
- height: 128rpx;
- background: #ffffff;
- border-radius: 16rpx 16rpx 16rpx 16rpx;
- padding: 20rpx 32rpx;
- box-sizing: border-box;
- }
- .name {
- margin-right: 160px;
- }
- }
- .isselect {
- border: 2rpx solid #4c7af3;
- .huan {
- background: #4c7af3;
- color: white;
- }
- }
- .btnbox {
- position: absolute;
- bottom: 170rpx;
- width: 100%;
- display: flex;
- justify-content: center;
- .btn {
- button {
- width: 594rpx;
- height: 96rpx;
- background: #4c7af3;
- border-radius: 48rpx 48rpx 48rpx 48rpx;
- text-align: center;
- line-height: 96rpx;
- color: white;
- }
- text-align: center;
- }
- }
- }
- </style>
|