|
|
@@ -7,59 +7,66 @@
|
|
|
safe-area-inset-top
|
|
|
style="background-color: #5c8fff"
|
|
|
/>
|
|
|
- <div class="page_login">
|
|
|
- <div class="login_bg">
|
|
|
- <div class="bg_title">
|
|
|
- <van-image
|
|
|
- :src="require('@/assets/logo.svg')"
|
|
|
- width="32"
|
|
|
- height="32"
|
|
|
- fit="contain"
|
|
|
- />
|
|
|
- <span>双碳感知资产运营管理平台</span>
|
|
|
- </div>
|
|
|
+ <div class="page_info">
|
|
|
+ <div class="info_bg">
|
|
|
+ <van-image
|
|
|
+ :src="require('@/assets/login-bg.png')"
|
|
|
+ width="272"
|
|
|
+ height="157"
|
|
|
+ fit="contain"
|
|
|
+ class="img"
|
|
|
+ />
|
|
|
+ <van-row align="center" justify="center">
|
|
|
+ <van-col class="title">
|
|
|
+ <van-image
|
|
|
+ :src="require('@/assets/logo.svg')"
|
|
|
+ width="32"
|
|
|
+ height="32"
|
|
|
+ fit="contain"
|
|
|
+ />
|
|
|
+ <van-col>双碳感知资产运营管理平台</van-col>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
</div>
|
|
|
- <div class="login_info">
|
|
|
- <div class="info_content">
|
|
|
- <div class="title">
|
|
|
- <span>登录</span>
|
|
|
+ <div class="info_list">
|
|
|
+ <van-row align="center" justify="center" class="title">
|
|
|
+ <van-col>登录</van-col>
|
|
|
+ </van-row>
|
|
|
+ <van-form @submit="onSubmit">
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="tel"
|
|
|
+ name="手机号"
|
|
|
+ :left-icon="require('@/assets/phone.svg')"
|
|
|
+ placeholder="请输入手机号码"
|
|
|
+ :clearable="true"
|
|
|
+ :rules="[{ required: true, message: '请输入手机号码' }]"
|
|
|
+ style="margin-bottom: 20px"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ v-model="password"
|
|
|
+ type="password"
|
|
|
+ name="密码"
|
|
|
+ :left-icon="require('@/assets/password.svg')"
|
|
|
+ placeholder="请输入密码"
|
|
|
+ :clearable="true"
|
|
|
+ :rules="[{ required: true, message: '请输入密码' }]"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+ <div style="margin-top: 50px">
|
|
|
+ <van-button
|
|
|
+ round
|
|
|
+ block
|
|
|
+ type="primary"
|
|
|
+ color="#5C8FFF"
|
|
|
+ :loading="loading"
|
|
|
+ loading-text="登陆中。。。"
|
|
|
+ native-type="submit"
|
|
|
+ >
|
|
|
+ 登录
|
|
|
+ </van-button>
|
|
|
</div>
|
|
|
- <van-form @submit="onSubmit">
|
|
|
- <van-cell-group>
|
|
|
- <van-field
|
|
|
- v-model="tel"
|
|
|
- name="手机号"
|
|
|
- :left-icon="require('@/assets/phone.svg')"
|
|
|
- placeholder="请输入手机号码"
|
|
|
- :clearable="true"
|
|
|
- :rules="[{ required: true, message: '请输入手机号码' }]"
|
|
|
- style="margin-bottom: 20px"
|
|
|
- />
|
|
|
- <van-field
|
|
|
- v-model="password"
|
|
|
- type="password"
|
|
|
- name="密码"
|
|
|
- :left-icon="require('@/assets/password.svg')"
|
|
|
- placeholder="请输入密码"
|
|
|
- :clearable="true"
|
|
|
- :rules="[{ required: true, message: '请输入密码' }]"
|
|
|
- />
|
|
|
- </van-cell-group>
|
|
|
- <div style="margin-top: 50px">
|
|
|
- <van-button
|
|
|
- round
|
|
|
- block
|
|
|
- type="primary"
|
|
|
- color="#2E69EB"
|
|
|
- :loading="loading"
|
|
|
- loading-text="登陆中。。。"
|
|
|
- native-type="submit"
|
|
|
- >
|
|
|
- 登录
|
|
|
- </van-button>
|
|
|
- </div>
|
|
|
- </van-form>
|
|
|
- </div>
|
|
|
+ </van-form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -117,53 +124,60 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.page_login {
|
|
|
+.page_info {
|
|
|
position: relative;
|
|
|
- .login_bg {
|
|
|
+ .info_bg {
|
|
|
width: 100%;
|
|
|
- height: 245px;
|
|
|
+ height: 200px;
|
|
|
background: #5c8fff;
|
|
|
border-radius: 0px 0px 16px 16px;
|
|
|
- padding-top: 16px;
|
|
|
- .bg_title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- span {
|
|
|
- height: 24px;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 600;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 24px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+ position: relative;
|
|
|
+ .img {
|
|
|
+ position: absolute;
|
|
|
+ left: -6px;
|
|
|
+ top: -12px;
|
|
|
}
|
|
|
- }
|
|
|
- .login_info {
|
|
|
- position: absolute;
|
|
|
- top: 142px;
|
|
|
- width: calc(100% - 32px);
|
|
|
- padding: 0 16px;
|
|
|
- .info_content {
|
|
|
- background: #ffffff;
|
|
|
- box-shadow: 0px 0px 8px 0px rgba(51, 51, 51, 0.08);
|
|
|
- border-radius: 16px;
|
|
|
- padding: 30px 20px 50px 20px;
|
|
|
+ .van-row {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
.title {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-bottom: 30px;
|
|
|
- span {
|
|
|
+ .van-col {
|
|
|
height: 24px;
|
|
|
- font-size: 20px;
|
|
|
+ font-size: 18px;
|
|
|
font-weight: 600;
|
|
|
- color: #0c1935;
|
|
|
+ color: #ffffff;
|
|
|
line-height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ text-indent: 4px;
|
|
|
+ letter-spacing: 2px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .info_list {
|
|
|
+ position: absolute;
|
|
|
+ top: 142px;
|
|
|
+ width: calc(100% - 32px);
|
|
|
+ padding: 0 16px;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 0px 8px 0px rgba(51, 51, 51, 0.08);
|
|
|
+ border-radius: 16px;
|
|
|
+ padding: 30px 20px 50px 20px;
|
|
|
+ margin: 0 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .title {
|
|
|
+ margin-bottom: 40px;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ .van-col {
|
|
|
+ height: 24px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
/deep/ {
|
|
|
--van-cell-vertical-padding: 8px;
|
|
|
.van-icon__image {
|
