index.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. <template>
  2. <div class="login">
  3. <img src="./chooseIdentityImg/back.png" alt="" class="logobig" />
  4. <div class="title">请选择您的身份</div>
  5. <div class="title1">方便我们为您提供更准确的服务</div>
  6. <div class="choose">
  7. <div
  8. @click="chooseIdentity(1)"
  9. :class="isSelect === 1 ? 'select isselect' : 'select'"
  10. >
  11. <div>
  12. <img class="headerImg" src="./chooseIdentityImg/header1.png" alt="" />
  13. </div>
  14. <div class="name">企业上报</div>
  15. <div class="huan"><van-icon name="success" /></div>
  16. </div>
  17. <div
  18. @click="chooseIdentity(2)"
  19. :class="isSelect === 2 ? 'select isselect' : 'select'"
  20. class="select"
  21. style="margin-top: 20px"
  22. >
  23. <div>
  24. <img class="headerImg" src="./chooseIdentityImg/header2.png" alt="" />
  25. </div>
  26. <div class="name">属地核查</div>
  27. <div class="huan"><van-icon name="success" /></div>
  28. </div>
  29. <div
  30. @click="chooseIdentity(3)"
  31. :class="isSelect === 3 ? 'select isselect' : 'select'"
  32. class="select"
  33. style="margin-top: 20px"
  34. >
  35. <div>
  36. <img class="headerImg" src="./chooseIdentityImg/header3.png" alt="" />
  37. </div>
  38. <div class="name">部门检查</div>
  39. <div class="huan"><van-icon name="success" /></div>
  40. </div>
  41. </div>
  42. <div class="btnbox">
  43. <van-button class="btn" @click="goLogin">去登陆</van-button>
  44. </div>
  45. </div>
  46. </template>
  47. <script>
  48. export default {
  49. data() {
  50. return {
  51. loginForm: {},
  52. isSelect: 1,
  53. };
  54. },
  55. mounted() {},
  56. methods: {
  57. chooseIdentity(e) {
  58. this.isSelect = e;
  59. },
  60. goLogin() {
  61. if (this.isSelect == 1) {
  62. uni.navigateTo({
  63. url: "/pages/login/login",
  64. });
  65. }
  66. if (this.isSelect == 2) {
  67. uni.navigateTo({
  68. url: "/pages/subPackages/phoneRegister/index",
  69. });
  70. }
  71. },
  72. },
  73. };
  74. </script>
  75. <style lang="scss">
  76. .login {
  77. background: white;
  78. height: 100%;
  79. overflow: hidden;
  80. .logTit {
  81. width: 80vw;
  82. left: 10vw;
  83. top: 45vw;
  84. display: flex;
  85. flex-direction: column;
  86. justify-content: center;
  87. align-items: center;
  88. position: absolute;
  89. z-index: 1;
  90. color: rgba(51, 51, 51, 1);
  91. font-size: 4vw;
  92. p {
  93. color: rgba(102, 102, 102, 1);
  94. font-size: 4vw;
  95. margin-top: 0.5vw;
  96. }
  97. .titletxt {
  98. font-size: 48rpx;
  99. font-family: Taipei Sans TC Beta-Bold, Taipei Sans TC Beta;
  100. font-weight: bold;
  101. color: #333333;
  102. }
  103. .titletxt2 {
  104. font-size: 32rpx;
  105. font-family: PingFang SC-Regular, PingFang SC;
  106. font-weight: 400;
  107. color: #666666;
  108. }
  109. }
  110. .logobig {
  111. width: 100vw;
  112. height: 100vh;
  113. position: absolute;
  114. left: 0;
  115. z-index: 0;
  116. }
  117. .title {
  118. font-weight: bold;
  119. font-size: 52rpx;
  120. color: #222222;
  121. position: absolute;
  122. top: 342rpx;
  123. width: 100%;
  124. font-family: cursive;
  125. text-align: center;
  126. }
  127. .title1 {
  128. position: absolute;
  129. top: 432rpx;
  130. // left: 52px;
  131. font-weight: 400;
  132. font-size: 28rpx;
  133. color: #354448;
  134. width: 100%;
  135. text-align: center;
  136. }
  137. .huan {
  138. width: 40rpx;
  139. height: 40rpx;
  140. border: 4rpx solid #c0c2c3;
  141. background: #ffffff;
  142. color: #c0c2c3;
  143. border-radius: 50%;
  144. text-align: center;
  145. line-height: 40rpx;
  146. }
  147. .choose {
  148. position: absolute;
  149. top: 800rpx;
  150. width: 100%;
  151. .headerImg {
  152. height: 88rpx;
  153. width: 88rpx;
  154. }
  155. .select {
  156. margin: auto;
  157. display: flex;
  158. align-items: center;
  159. justify-content: space-between;
  160. width: 654rpx;
  161. height: 128rpx;
  162. background: #ffffff;
  163. border-radius: 16rpx 16rpx 16rpx 16rpx;
  164. padding: 20rpx 32rpx;
  165. box-sizing: border-box;
  166. }
  167. .name {
  168. margin-right: 160px;
  169. }
  170. }
  171. .isselect {
  172. border: 2rpx solid #4c7af3;
  173. .huan {
  174. background: #4c7af3;
  175. color: white;
  176. }
  177. }
  178. .btnbox {
  179. position: absolute;
  180. bottom: 170rpx;
  181. width: 100%;
  182. display: flex;
  183. justify-content: center;
  184. .btn {
  185. button {
  186. width: 594rpx;
  187. height: 96rpx;
  188. background: #4c7af3;
  189. border-radius: 48rpx 48rpx 48rpx 48rpx;
  190. text-align: center;
  191. line-height: 96rpx;
  192. color: white;
  193. }
  194. text-align: center;
  195. }
  196. }
  197. }
  198. </style>