| @ -1,146 +1,142 @@ | |||
| <template> | |||
| <view class="login"> | |||
| <view class="logo"> | |||
| <!-- <image src="/static/image/login/logo.png" mode=""></image> --> | |||
| </view> | |||
| <view class="title"> | |||
| 欢迎使用xx报修 | |||
| </view> | |||
| <view class="btn mt"> | |||
| <view class="icon"> | |||
| <!-- <image src="/static/image/login/wx.png" mode=""></image> --> | |||
| </view> | |||
| <view class="" | |||
| @click="wxLogin"> | |||
| 微信授权登录 | |||
| </view> | |||
| </view> | |||
| <!-- <view class="btn b2"> | |||
| 使用短信验证登录 | |||
| </view> --> | |||
| <view class="config"> | |||
| <uv-checkbox-group | |||
| v-model="checkboxValue" | |||
| shape="circle"> | |||
| <view class="content"> | |||
| <view | |||
| style="display: flex;"> | |||
| <uv-checkbox | |||
| size="30rpx" | |||
| :name="1" | |||
| ></uv-checkbox> | |||
| 阅读并同意我们的<text @click="openConfigDetail('privacyAgreement')">“服务协议与隐私条款”</text> | |||
| </view> | |||
| <view class=""> | |||
| 以及<text @click="openConfigDetail('userAgreement')">个人信息保护指引</text> | |||
| </view> | |||
| </view> | |||
| </uv-checkbox-group> | |||
| </view> | |||
| <configPopup ref="popup"></configPopup> | |||
| </view> | |||
| <view class="content"> | |||
| <view class="topBox"> | |||
| <h3 class="title">{{ index ? "注册" : "登录"}}</h3> | |||
| <h3>欢迎使用xx报修</h3> | |||
| </view> | |||
| <view class="inputBox"> | |||
| <view class="ipt"> | |||
| <h4>学号</h4> | |||
| <input type="text" value="" placeholder="请输入学生学号" /> | |||
| </view> | |||
| <view class="ipt"> | |||
| <h4>密码</h4> | |||
| <input type="text" value="" placeholder="请输入密码" /> | |||
| </view> | |||
| <button class="loginBtn">{{ index ? '注册' : '登录' }}</button> | |||
| <button @click="changeState(1)" class="registerBtn">{{ index ? '已有账号立即登录' : "暂无账号立即注册" }}</button> | |||
| <!-- <view class="tipbox"> | |||
| <view class="txt"> | |||
| —— 其他账号登录 —— | |||
| </view> | |||
| <view class="otherUser"> | |||
| <uni-icons type="qq" size="40" color="rgb(66,157,250)"></uni-icons> | |||
| <uni-icons type="weixin" size="40" color="rgb(2,187,17)"></uni-icons> | |||
| </view> | |||
| </view> --> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import configPopup from '../../components/config/configPopup.vue'; | |||
| export default { | |||
| name : 'Login', | |||
| data() { | |||
| return { | |||
| checkboxValue : [] | |||
| } | |||
| }, | |||
| methods: { | |||
| wxLogin(){ | |||
| this.$store.commit('login') | |||
| }, | |||
| //打开应用配置 | |||
| openConfigDetail(key){ | |||
| this.$refs.popup.open(key) | |||
| } | |||
| export default { | |||
| data() { | |||
| return { | |||
| index : 0 | |||
| } | |||
| }, | |||
| methods: { | |||
| //切换状态 | |||
| changeState(index){ | |||
| this.index = this.index ? 0 : 1 | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .login{ | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| height: 80vh; | |||
| flex-direction: column; | |||
| position: relative; | |||
| .logo{ | |||
| height: 80rpx; | |||
| width: 80rpx; | |||
| padding: 40rpx 30rpx; | |||
| background-color: #ddd; | |||
| border-radius: 70rpx; | |||
| image{ | |||
| width: 80rpx; | |||
| height: 80rpx; | |||
| } | |||
| margin-bottom: 20rpx; | |||
| } | |||
| .title{ | |||
| position: relative; | |||
| font-weight: 900; | |||
| font-size: 45rpx; | |||
| &::after{ | |||
| content: ''; | |||
| position: absolute; | |||
| left: 0; | |||
| top: 100%; | |||
| display: block; | |||
| height: 8rpx; | |||
| width: 210rpx; | |||
| background: linear-gradient(to right,#00aaff, #fff); | |||
| } | |||
| } | |||
| .btn{ | |||
| width: 80%; | |||
| height: 100rpx; | |||
| background-color: #00aaff; | |||
| color: #fff; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| margin: 20rpx 0; | |||
| border-radius: 20rpx; | |||
| .icon{ | |||
| margin-right: 10rpx; | |||
| image{ | |||
| width: 40rpx; | |||
| height: 35rpx; | |||
| } | |||
| } | |||
| } | |||
| .b2{ | |||
| background-color: #3c69f122; | |||
| color: #3c69f1; | |||
| } | |||
| .mt{ | |||
| margin-top: 200rpx; | |||
| } | |||
| .config{ | |||
| position: absolute; | |||
| bottom: 0; | |||
| font-size: 22rpx; | |||
| text-align: center; | |||
| line-height: 40rpx; | |||
| text{ | |||
| color: #00aaff; | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
| <style scoped> | |||
| .content { | |||
| height: 100vh; | |||
| background-color: aquamarine; | |||
| background: url("@/static/login/bj.jpg") no-repeat center; | |||
| background-size: cover; | |||
| } | |||
| .topBox { | |||
| font-size: 34rpx; | |||
| color: #fff; | |||
| padding: 80rpx 50rpx; | |||
| } | |||
| .topBox .title{ | |||
| font-size: 45rpx; | |||
| } | |||
| h3 { | |||
| margin-bottom: 10rpx; | |||
| } | |||
| .inputBox { | |||
| position: fixed; | |||
| bottom: 0; | |||
| left: 0; | |||
| width: 750rpx; | |||
| height: 85vh; | |||
| background-color: #fff; | |||
| border-top-left-radius: 40rpx; | |||
| border-top-right-radius: 40rpx; | |||
| padding: 60rpx; | |||
| box-sizing: border-box; | |||
| } | |||
| .ipt { | |||
| margin-bottom: 50rpx; | |||
| } | |||
| .ipt h4 { | |||
| margin-bottom: 20rpx; | |||
| font-size: 36rpx; | |||
| color: #333; | |||
| } | |||
| .ipt input { | |||
| border-bottom: 1px solid #dedede; | |||
| padding-bottom: 20rpx; | |||
| font-size: 28rpx; | |||
| } | |||
| .loginBtn { | |||
| margin-top: 20rpx; | |||
| line-height: 85rpx; | |||
| text-align: center; | |||
| background: #3c9cff; | |||
| border-radius: 40rpx; | |||
| color: #fff; | |||
| margin-top: 50rpx; | |||
| } | |||
| .registerBtn { | |||
| margin-top: 20rpx; | |||
| line-height: 85rpx; | |||
| text-align: center; | |||
| border-radius: 40rpx; | |||
| color: #ccc; | |||
| margin-top: 50rpx; | |||
| border: none; | |||
| } | |||
| .tipbox { | |||
| position: fixed; | |||
| bottom: 120rpx; | |||
| left: 50%; | |||
| transform: translate(-50%, -120px); | |||
| } | |||
| .otherUser { | |||
| margin-top: 30rpx; | |||
| display: flex; | |||
| justify-content: center; | |||
| } | |||
| .txt { | |||
| font-size: 28rpx; | |||
| color: #969696; | |||
| } | |||
| .otherUser .uni-icons { | |||
| margin-left: 20rpx; | |||
| } | |||
| </style> | |||
| @ -0,0 +1,146 @@ | |||
| <template> | |||
| <view class="login"> | |||
| <view class="logo"> | |||
| <!-- <image src="/static/image/login/logo.png" mode=""></image> --> | |||
| </view> | |||
| <view class="title"> | |||
| 欢迎使用xx报修 | |||
| </view> | |||
| <view class="btn mt"> | |||
| <view class="icon"> | |||
| <!-- <image src="/static/image/login/wx.png" mode=""></image> --> | |||
| </view> | |||
| <view class="" | |||
| @click="wxLogin"> | |||
| 微信授权登录 | |||
| </view> | |||
| </view> | |||
| <!-- <view class="btn b2"> | |||
| 使用短信验证登录 | |||
| </view> --> | |||
| <view class="config"> | |||
| <uv-checkbox-group | |||
| v-model="checkboxValue" | |||
| shape="circle"> | |||
| <view class="content"> | |||
| <view | |||
| style="display: flex;"> | |||
| <uv-checkbox | |||
| size="30rpx" | |||
| :name="1" | |||
| ></uv-checkbox> | |||
| 阅读并同意我们的<text @click="openConfigDetail('privacyAgreement')">“服务协议与隐私条款”</text> | |||
| </view> | |||
| <view class=""> | |||
| 以及<text @click="openConfigDetail('userAgreement')">个人信息保护指引</text> | |||
| </view> | |||
| </view> | |||
| </uv-checkbox-group> | |||
| </view> | |||
| <configPopup ref="popup"></configPopup> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import configPopup from '../../components/config/configPopup.vue'; | |||
| export default { | |||
| name : 'Login', | |||
| data() { | |||
| return { | |||
| checkboxValue : [] | |||
| } | |||
| }, | |||
| methods: { | |||
| wxLogin(){ | |||
| this.$store.commit('login') | |||
| }, | |||
| //打开应用配置 | |||
| openConfigDetail(key){ | |||
| this.$refs.popup.open(key) | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .login{ | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| height: 80vh; | |||
| flex-direction: column; | |||
| position: relative; | |||
| .logo{ | |||
| height: 80rpx; | |||
| width: 80rpx; | |||
| padding: 40rpx 30rpx; | |||
| background-color: #ddd; | |||
| border-radius: 70rpx; | |||
| image{ | |||
| width: 80rpx; | |||
| height: 80rpx; | |||
| } | |||
| margin-bottom: 20rpx; | |||
| } | |||
| .title{ | |||
| position: relative; | |||
| font-weight: 900; | |||
| font-size: 45rpx; | |||
| &::after{ | |||
| content: ''; | |||
| position: absolute; | |||
| left: 0; | |||
| top: 100%; | |||
| display: block; | |||
| height: 8rpx; | |||
| width: 210rpx; | |||
| background: linear-gradient(to right,#00aaff, #fff); | |||
| } | |||
| } | |||
| .btn{ | |||
| width: 80%; | |||
| height: 100rpx; | |||
| background-color: #00aaff; | |||
| color: #fff; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| margin: 20rpx 0; | |||
| border-radius: 20rpx; | |||
| .icon{ | |||
| margin-right: 10rpx; | |||
| image{ | |||
| width: 40rpx; | |||
| height: 35rpx; | |||
| } | |||
| } | |||
| } | |||
| .b2{ | |||
| background-color: #3c69f122; | |||
| color: #3c69f1; | |||
| } | |||
| .mt{ | |||
| margin-top: 200rpx; | |||
| } | |||
| .config{ | |||
| position: absolute; | |||
| bottom: 0; | |||
| font-size: 22rpx; | |||
| text-align: center; | |||
| line-height: 40rpx; | |||
| text{ | |||
| color: #00aaff; | |||
| } | |||
| } | |||
| } | |||
| </style> | |||