作者 卢胜

登录,注册,忘记密码

@@ -147,7 +147,34 @@ @@ -147,7 +147,34 @@
147 } 147 }
148 } 148 }
149 149
150 - ], 150 + ,{
  151 + "path" : "pages/login/login",
  152 + "style" :
  153 + {
  154 + "navigationBarTitleText": "",
  155 + "enablePullDownRefresh": false
  156 + }
  157 +
  158 + }
  159 + ,{
  160 + "path" : "pages/login/register",
  161 + "style" :
  162 + {
  163 + "navigationBarTitleText": "",
  164 + "enablePullDownRefresh": false
  165 + }
  166 +
  167 + }
  168 + ,{
  169 + "path" : "pages/login/password",
  170 + "style" :
  171 + {
  172 + "navigationBarTitleText": "",
  173 + "enablePullDownRefresh": false
  174 + }
  175 +
  176 + }
  177 + ],
151 "globalStyle": { 178 "globalStyle": {
152 "navigationBarTextStyle": "black", 179 "navigationBarTextStyle": "black",
153 "navigationBarTitleText": "元届印象", 180 "navigationBarTitleText": "元届印象",
  1 +<template>
  2 + <view class="login">
  3 + <view class="icon">
  4 + <image class="bgimg" src="../../static/ic_logo.png" mode=""></image>
  5 +
  6 + <view class="bar flexwrap">
  7 + <view class="name">
  8 + 用户名:
  9 + </view>
  10 + <view class="last name">
  11 + <input type="text" value="" placeholder="请输入用户名" />
  12 + </view>
  13 + </view>
  14 + <view class="bar flexwrap">
  15 + <view class="name">
  16 + 密码:
  17 + </view>
  18 + <view class="last name">
  19 + <input type="text" value="" placeholder="密码:" />
  20 + </view>
  21 + </view>
  22 + <view class="loginbtn">
  23 + 登录
  24 + </view>
  25 + <view class="passway">
  26 + <text>忘记密码</text>
  27 + <text>没有账号,去注册</text>
  28 + </view>
  29 + </view>
  30 + </view>
  31 +</template>
  32 +
  33 +<script>
  34 + export default {
  35 + data() {
  36 + return {
  37 +
  38 + };
  39 + }
  40 + }
  41 +</script>
  42 +
  43 +<style lang="scss">
  44 + .login {
  45 + padding: 0 48rpx;
  46 + box-sizing: border-box;
  47 +
  48 + .icon {
  49 + .bgimg {
  50 + margin-top: 100rpx;
  51 + margin-left: 50%;
  52 + transform: translate(-50%);
  53 + margin-bottom: 24rpx;
  54 + width: 184rpx;
  55 + height: 184rpx;
  56 + }
  57 +
  58 + .bar {
  59 + border-bottom: 1px solid #f0f0f0;
  60 + padding: 40rpx 0;
  61 + color: rgba(0, 0, 0, 1);
  62 + font-size: 32rpx;
  63 + font-weight: 500;
  64 + font-family: "PingFang SC";
  65 +
  66 + .name {
  67 + width: 180rpx;
  68 + }
  69 +
  70 + .lastname {
  71 + width: 300rpx;
  72 + }
  73 + }
  74 +
  75 + .loginbtn {
  76 + margin-top: 100rpx;
  77 + width: 654rpx;
  78 + height: 88rpx;
  79 + border-radius: 28rpx;
  80 + opacity: 1;
  81 + color: rgba(0, 0, 0, 0.9);
  82 + font-size: 32rpx;
  83 + font-weight: 600;
  84 + font-family: "PingFang SC";
  85 + text-align: center;
  86 + line-height: 88rpx;
  87 + background: rgba(254, 208, 0, 1);
  88 + }
  89 +
  90 + .passway {
  91 + display: flex;
  92 + align-items: center;
  93 + justify-content: space-between;
  94 + margin-top: 16rpx;
  95 +
  96 + text {
  97 + &:first-child {
  98 + color: rgba(0, 0, 0, 0.26);
  99 + font-size: 24rpx;
  100 + font-weight: 400;
  101 + font-family: "PingFang SC";
  102 + }
  103 +
  104 + &:last-child {
  105 + color: rgba(254, 208, 0, 1);
  106 + font-size: 26rpx;
  107 + font-weight: 400;
  108 + font-family: "PingFang SC";
  109 + }
  110 + }
  111 + }
  112 + }
  113 + }
  114 +</style>
  1 +<template>
  2 + <view class="login">
  3 + <view class="icon">
  4 + <view class="icontitle">
  5 + 忘记密码
  6 + </view>
  7 + <view class="bar flexwrap">
  8 + <view class="name">
  9 + 用户名:
  10 + </view>
  11 + <view class="lastname">
  12 + <input type="text" value="" placeholder="请输入用户名" />
  13 + </view>
  14 + </view>
  15 + <view class="bar flexwrap">
  16 + <view class="name">
  17 + 验证码:
  18 + </view>
  19 + <view class="lastname">
  20 + <input type="text" value="" placeholder="请输入验证码" />
  21 + <view class="code">
  22 + 获取验证码
  23 + </view>
  24 + </view>
  25 + </view>
  26 + <view class="bar flexwrap">
  27 + <view class="name">
  28 + 密码:
  29 + </view>
  30 + <view class="lastname">
  31 + <input type="text" value="" placeholder="请输入密码" />
  32 + </view>
  33 + </view>
  34 + <view class="bar flexwrap">
  35 + <view class="name">
  36 + 确认密码:
  37 + </view>
  38 + <view class="lastname">
  39 + <input type="text" value="" placeholder="请确认密码" />
  40 + </view>
  41 + </view>
  42 + <view class="loginbtn">
  43 + 确认
  44 + </view>
  45 + </view>
  46 + </view>
  47 +</template>
  48 +
  49 +<script>
  50 + export default {
  51 + data() {
  52 + return {
  53 +
  54 + };
  55 + }
  56 + }
  57 +</script>
  58 +
  59 +<style lang="scss">
  60 + .login {
  61 + padding: 0 48rpx;
  62 + box-sizing: border-box;
  63 +
  64 + .icon {
  65 + .icontitle {
  66 + margin-top: 152rpx;
  67 + margin-left: 16rpx;
  68 + margin-bottom: 80rpx;
  69 + color: rgba(50, 50, 51, 1);
  70 + font-size: 52rpx;
  71 + font-weight: 700;
  72 + font-family: "PingFang SC";
  73 + }
  74 +
  75 + .bar {
  76 + border-bottom: 1px solid #f0f0f0;
  77 + padding: 40rpx 0;
  78 + color: rgba(0, 0, 0, 1);
  79 + font-size: 32rpx;
  80 + font-weight: 500;
  81 + font-family: "PingFang SC";
  82 +
  83 + .name {
  84 + width: 180rpx;
  85 + }
  86 +
  87 + .lastname {
  88 + flex: 1;
  89 + position: relative;
  90 +
  91 + input {
  92 + width: 260rpx;
  93 + }
  94 +
  95 + .code {
  96 + position: absolute;
  97 + right: 0;
  98 + top: 50%;
  99 + transform: translate(-10%, -50%);
  100 + color: rgba(0, 0, 0, 0.26);
  101 + font-size: 32rpx;
  102 + font-weight: 400;
  103 + font-family: "PingFang SC";
  104 + }
  105 + }
  106 + }
  107 +
  108 + .loginbtn {
  109 + margin-top: 100rpx;
  110 + width: 654rpx;
  111 + height: 88rpx;
  112 + border-radius: 28rpx;
  113 + opacity: 1;
  114 + color: rgba(0, 0, 0, 0.9);
  115 + font-size: 32rpx;
  116 + font-weight: 600;
  117 + font-family: "PingFang SC";
  118 + text-align: center;
  119 + line-height: 88rpx;
  120 + background: rgba(254, 208, 0, 1);
  121 + }
  122 +
  123 + .passway {
  124 + display: flex;
  125 + align-items: center;
  126 + justify-content: space-between;
  127 + margin-top: 16rpx;
  128 +
  129 + text {
  130 + &:first-child {
  131 + color: rgba(0, 0, 0, 0.26);
  132 + font-size: 24rpx;
  133 + font-weight: 400;
  134 + font-family: "PingFang SC";
  135 + }
  136 +
  137 + &:last-child {
  138 + color: rgba(254, 208, 0, 1);
  139 + font-size: 26rpx;
  140 + font-weight: 400;
  141 + font-family: "PingFang SC";
  142 + }
  143 + }
  144 + }
  145 + }
  146 + }
  147 +</style>
  1 +<template>
  2 + <view class="login">
  3 + <view class="icon">
  4 + <image class="bgimg" src="../../static/ic_logo.png" mode=""></image>
  5 +
  6 + <view class="bar flexwrap">
  7 + <view class="name">
  8 + 用户名:
  9 + </view>
  10 + <view class="lastname">
  11 + <input type="text" value="" placeholder="请输入用户名" />
  12 + </view>
  13 + </view>
  14 + <view class="bar flexwrap">
  15 + <view class="name">
  16 + 密码:
  17 + </view>
  18 + <view class="lastname">
  19 + <input type="text" value="" placeholder="请输入密码" />
  20 + </view>
  21 + </view>
  22 + <view class="bar flexwrap">
  23 + <view class="name">
  24 + 手机号:
  25 + </view>
  26 + <view class="lastname">
  27 + <input type="text" value="" placeholder="请输入手机号" />
  28 + </view>
  29 + </view>
  30 + <view class="bar flexwrap">
  31 + <view class="name">
  32 + 验证码:
  33 + </view>
  34 + <view class="lastname">
  35 + <input type="text" value="" placeholder="请输入验证码" />
  36 + <view class="code">
  37 + 获取验证码
  38 + </view>
  39 + </view>
  40 + </view>
  41 + <view class="loginbtn">
  42 + 注册
  43 + </view>
  44 + <view class="passway">
  45 + <text>已有账号,直接登录</text>
  46 + </view>
  47 + <view class="user">
  48 + <image src="../../static/icon24.png" mode=""></image>
  49 + <image src="../../static/icon25.png" mode=""></image>
  50 + 我已阅读并同意
  51 + <text>用户协议、</text><text>隐私政策</text>
  52 + </view>
  53 + </view>
  54 + </view>
  55 +</template>
  56 +
  57 +<script>
  58 + export default {
  59 + data() {
  60 + return {
  61 +
  62 + };
  63 + }
  64 + }
  65 +</script>
  66 +
  67 +<style lang="scss">
  68 + .login {
  69 + padding: 0 48rpx;
  70 + box-sizing: border-box;
  71 +
  72 + .icon {
  73 + .bgimg {
  74 + margin-top: 100rpx;
  75 + margin-left: 50%;
  76 + transform: translate(-50%);
  77 + margin-bottom: 24rpx;
  78 + width: 184rpx;
  79 + height: 184rpx;
  80 + }
  81 +
  82 + .bar {
  83 + border-bottom: 1px solid #f0f0f0;
  84 + padding: 40rpx 0;
  85 + color: rgba(0, 0, 0, 1);
  86 + font-size: 32rpx;
  87 + font-weight: 500;
  88 + font-family: "PingFang SC";
  89 +
  90 + .name {
  91 + width: 180rpx;
  92 + }
  93 +
  94 + .lastname {
  95 + flex: 1;
  96 + position: relative;
  97 +
  98 + input {
  99 + width: 260rpx;
  100 + }
  101 +
  102 + .code {
  103 + position: absolute;
  104 + right: 0;
  105 + top: 50%;
  106 + transform: translate(-10%, -50%);
  107 + color: rgba(0, 0, 0, 0.26);
  108 + font-size: 32rpx;
  109 + font-weight: 400;
  110 + font-family: "PingFang SC";
  111 + }
  112 + }
  113 + }
  114 +
  115 + .loginbtn {
  116 + margin-top: 100rpx;
  117 + height: 88rpx;
  118 + border-radius: 28rpx;
  119 + opacity: 1;
  120 + color: rgba(0, 0, 0, 0.9);
  121 + font-size: 32rpx;
  122 + font-weight: 600;
  123 + font-family: "PingFang SC";
  124 + text-align: center;
  125 + line-height: 88rpx;
  126 + background: rgba(254, 208, 0, 1);
  127 + }
  128 +
  129 + .passway {
  130 + text-align: right;
  131 + margin-top: 16rpx;
  132 +
  133 + text {
  134 + color: rgba(254, 208, 0, 1);
  135 + font-size: 26rpx;
  136 + font-weight: 400;
  137 + font-family: "PingFang SC";
  138 + }
  139 + }
  140 +
  141 + .user {
  142 + position: fixed;
  143 + bottom: 28rpx;
  144 + left: 50%;
  145 + width: 100%;
  146 + text-align: center;
  147 + transform: translate(-50%);
  148 + display: flex;
  149 + align-items: center;
  150 + justify-content: center;
  151 + color: rgba(100, 101, 102, 1);
  152 + font-size: 24rpx;
  153 + font-weight: 400;
  154 + font-family: "PingFang SC";
  155 +
  156 + image {
  157 + margin-right: 22rpx;
  158 + width: 36rpx;
  159 + height: 36rpx;
  160 + }
  161 +
  162 + text {
  163 + margin-right: 24rpx;
  164 + color: rgba(87, 107, 149, 1);
  165 + font-size: 24rpx;
  166 + font-weight: 400;
  167 + font-family: "PingFang SC";
  168 + }
  169 + }
  170 + }
  171 + }
  172 +</style>