login.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. <template>
  2. <view class="login">
  3. <view class="logo">
  4. <image src="../../static/images/login/logo.png" style="width: 160upx;height: 160upx;" mode="scaleToFill"></image>
  5. </view>
  6. <view class="login-from">
  7. <view class="input-item">
  8. <label for="">
  9. <image src="../../static/images/login/phone.png" style="width: 30upx;height: 40upx;" mode=""></image>
  10. </label>
  11. <input type="text" placeholder="请输入账号" v-model="account">
  12. </view>
  13. <view class="input-item" style="margin-bottom: 20upx;">
  14. <label for="">
  15. <image src="../../static/images/login/lock.png" style="width: 30upx;height: 40upx;" mode=""></image>
  16. </label>
  17. <input type="password" placeholder="请输入密码" v-model="password">
  18. </view>
  19. <view class="forget">
  20. <navigator url="/pages/user/find-pass" open-type="navigate" style="display: inline;">
  21. <text>忘记密码</text>
  22. </navigator>
  23. </view>
  24. <view class="button-item">
  25. <button class="login-btn" @tap="login()">登录</button>
  26. </view>
  27. <view class="button-item">
  28. <navigator url="/pages/register/step1" open-type="navigate">
  29. <button class="reg-btn">注册</button>
  30. </navigator>
  31. </view>
  32. <view class="use-phone">
  33. <navigator url="/pages/user/vcode-login" open-type="navigate" style="display: inline;">
  34. <text>使用手机验证码登入</text>
  35. </navigator>
  36. </view>
  37. </view>
  38. <view class="third-party">
  39. <view class="title"><text>第三方登录</text></view>
  40. <view class="content">
  41. <image src="../../static/images/login/wx.png" style="width: 90upx;height: 90upx;" mode="scaleToFill"></image>
  42. </view>
  43. </view>
  44. </view>
  45. </template>
  46. <script>
  47. export default {
  48. data() {
  49. return {
  50. account: '',
  51. password: ''
  52. }
  53. },
  54. methods: {
  55. login() {
  56. if (this.$verified.account(this.account) &&
  57. this.$verified.required(this.password, "请输入密码")) {
  58. this.$http.post({
  59. url: "/user/login",
  60. data: {
  61. account: this.account,
  62. password: this.password
  63. },
  64. success: (res) => {
  65. console.log(this.$store)
  66. this.$store.dispatch("user/save", res.data.data.userinfo)
  67. uni.navigateBack();
  68. }
  69. })
  70. }
  71. }
  72. }
  73. }
  74. </script>
  75. <style lang="scss" scoped>
  76. .login {
  77. background: $primary-color;
  78. height: 100vh;
  79. width: 750rpx;
  80. /* #ifdef APP-PLUS */
  81. padding-bottom: 60upx;
  82. /* #endif */
  83. }
  84. .logo {
  85. width: 160upx;
  86. height: 160upx;
  87. background: white;
  88. border-radius: 160upx;
  89. border: 10upx solid $primary-color;
  90. margin: auto;
  91. margin-top: -60upx;
  92. position: relative;
  93. top: 80upx;
  94. z-index: 999;
  95. }
  96. .login-from {
  97. margin: auto;
  98. width: 600upx;
  99. height: 740upx;
  100. background-color: white;
  101. border-radius: 20rpx;
  102. padding: 72upx;
  103. padding-top: 180upx;
  104. box-sizing: border-box;
  105. position: relative;
  106. z-index: 2;
  107. &::after {
  108. content: "";
  109. background: url(../../static/images/login/box-bottom.png) no-repeat;
  110. background-size: contain;
  111. width: 564upx;
  112. height: 30upx;
  113. display: block;
  114. position: absolute;
  115. bottom: -30upx;
  116. left: 18upx;
  117. z-index: -1;
  118. }
  119. }
  120. .input-item {
  121. display: flex;
  122. margin-bottom: 48upx;
  123. label {
  124. width: 50upx;
  125. }
  126. input {
  127. border-bottom: 2upx solid $primary-color;
  128. flex-grow: 1;
  129. padding: 5upx;
  130. font-size: 30upx;
  131. }
  132. }
  133. .forget {
  134. text-align: right;
  135. color: $primary-color;
  136. font-size: 28upx;
  137. }
  138. .login-btn,
  139. .reg-btn {
  140. height: 80upx;
  141. border: 2upx solid $primary-color;
  142. line-height: 80upx;
  143. margin: 30upx 0;
  144. font-size: 32upx;
  145. &::after {
  146. border: none;
  147. }
  148. }
  149. .login-btn {
  150. background: $primary-color;
  151. color: white;
  152. }
  153. .reg-btn {
  154. background-color: white;
  155. color: $primary-color;
  156. }
  157. .use-phone {
  158. font-size: 28upx;
  159. text-align: center;
  160. color: $primary-color;
  161. }
  162. .third-party {
  163. margin: auto;
  164. text-align: center;
  165. margin-top: 100upx;
  166. .title {
  167. font-size: 28upx;
  168. color: white;
  169. &::before,
  170. &::after {
  171. display: inline-block;
  172. width: 100upx;
  173. height: 0upx;
  174. border: 1upx solid #ff8ca8;
  175. transform: scaleY(0.5);
  176. content: "";
  177. margin: 8upx 20upx;
  178. }
  179. }
  180. .content {
  181. margin-top: 50upx;
  182. }
  183. }
  184. </style>