|
@@ -1,178 +1,103 @@
|
|
|
<template>
|
|
|
<div class="login">
|
|
|
<img
|
|
|
- src="https://www.idea-co-sf.com/gardenProduct/image/logobig.png"
|
|
|
+ src="https://www.idea-co-sf.com/gardenProduct/image/bj01.png"
|
|
|
alt=""
|
|
|
- class="logobig"
|
|
|
+ class="logobig2"
|
|
|
/>
|
|
|
- <div class="logTit">
|
|
|
- <span class="titletxt">园区管理平台产品化</span>
|
|
|
- <p class="titletxt2">(管理端)</p>
|
|
|
- </div>
|
|
|
- <div class="logintype" v-if="loginStatus">
|
|
|
- <div
|
|
|
- @click="changeLoginType('个人')"
|
|
|
- :class="loginType == '个人' ? 'checkbox ischecked' : 'checkbox'"
|
|
|
- >
|
|
|
- 个人
|
|
|
- </div>
|
|
|
- <div
|
|
|
- @click="changeLoginType('管理')"
|
|
|
- :class="loginType == '管理' ? 'checkbox ischecked' : 'checkbox'"
|
|
|
- >
|
|
|
- 管理
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="loginBox" v-if="loginType == '个人'">
|
|
|
- <div class="inputBox">
|
|
|
- <img
|
|
|
- src="https://www.idea-co-sf.com/gardenProduct/image/comicon.png"
|
|
|
- alt=""
|
|
|
- style="height: 60rpx"
|
|
|
- />
|
|
|
- <input
|
|
|
- type="text"
|
|
|
- placeholder="请输入账号"
|
|
|
- v-model="loginForm.userName"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="inputBox">
|
|
|
- <img
|
|
|
- src="https://www.idea-co-sf.com/gardenProduct/image/pswicon.svg"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <input
|
|
|
- type="password"
|
|
|
- placeholder="请输入密码"
|
|
|
- v-model="loginForm.password"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="inputBox">
|
|
|
- <img
|
|
|
- src="https://www.idea-co-sf.com/gardenProduct/image/yzmicon.svg"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <input
|
|
|
- type="text"
|
|
|
- placeholder="验证码"
|
|
|
- class="yanzhengma"
|
|
|
- v-model="loginForm.code"
|
|
|
- />
|
|
|
- <img
|
|
|
- :src="loginForm.captchaImage"
|
|
|
- @click="captchaImageRefresh(loginForm)"
|
|
|
- class="yanzhengImg"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="pswBox" @click="forgetPsw()">
|
|
|
- <p>忘记密码?</p>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <van-button
|
|
|
- type="default"
|
|
|
- class="loginbtn"
|
|
|
- size="large"
|
|
|
- color="#1f1fbe"
|
|
|
- @click="UserLogin"
|
|
|
- >登 录</van-button
|
|
|
- >
|
|
|
- </div>
|
|
|
- <!-- <div style="display: flex; justify-content: space-between">
|
|
|
- <van-button
|
|
|
- style="margin-top: 15rpx; width: 49%"
|
|
|
- type="default"
|
|
|
- size="large"
|
|
|
- color="#1f1fbe"
|
|
|
- @click="gozhfw"
|
|
|
- >前往智慧法务</van-button
|
|
|
- >
|
|
|
- <van-button
|
|
|
- style="margin-top: 15rpx; width: 49%"
|
|
|
- type="default"
|
|
|
- size="large"
|
|
|
- color="#1f1fbe"
|
|
|
- @click="goqy"
|
|
|
- >前往企业端</van-button
|
|
|
- >
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
- <div class="loginBox" v-if="loginType == '管理'">
|
|
|
- <div class="inputBox">
|
|
|
- <img
|
|
|
- src="https://www.idea-co-sf.com/gardenProduct/image/comicon.png"
|
|
|
- alt=""
|
|
|
- style="height: 60rpx"
|
|
|
- />
|
|
|
- <input
|
|
|
- type="text"
|
|
|
- placeholder="请输入账号"
|
|
|
- v-model="loginForm.userName"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="inputBox">
|
|
|
- <img
|
|
|
- src="https://www.idea-co-sf.com/gardenProduct/image/pswicon.svg"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <input
|
|
|
- type="password"
|
|
|
- placeholder="请输入密码"
|
|
|
- v-model="loginForm.password"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="inputBox">
|
|
|
- <img
|
|
|
- src="https://www.idea-co-sf.com/gardenProduct/image/yzmicon.svg"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <input
|
|
|
- type="text"
|
|
|
- placeholder="验证码"
|
|
|
- class="yanzhengma"
|
|
|
- v-model="loginForm.code"
|
|
|
- />
|
|
|
- <img
|
|
|
- :src="loginForm.captchaImage"
|
|
|
- @click="captchaImageRefresh(loginForm)"
|
|
|
- class="yanzhengImg"
|
|
|
- />
|
|
|
+
|
|
|
+<!-- <div class="logintype" v-if="loginStatus">-->
|
|
|
+<!-- <div-->
|
|
|
+<!-- @click="changeLoginType('企业用户')"-->
|
|
|
+<!-- :class="loginType == '企业用户' ? 'checkbox ischecked' : 'checkbox'"-->
|
|
|
+<!-- >-->
|
|
|
+<!-- 企业用户-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div-->
|
|
|
+<!-- @click="changeLoginType('管理用户')"-->
|
|
|
+<!-- :class="loginType == '管理用户' ? 'checkbox ischecked' : 'checkbox'"-->
|
|
|
+<!-- >-->
|
|
|
+<!-- 管理用户-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+ <div class="loginBody">
|
|
|
+ <div class="loginTypeBox">
|
|
|
+ <div class="loginTypeItem" @click="changeLoginType('企业用户')">
|
|
|
+ <span class="loginTypeName" :class="loginType === '企业用户' ? 'ischecked' : ''">企业用户</span>
|
|
|
+ <div class="bottomLine" v-show="loginType==='企业用户'"></div>
|
|
|
+ </div>
|
|
|
+ <div class="loginTypeItem" @click="changeLoginType('管理用户')">
|
|
|
+ <span class="loginTypeName" :class="loginType === '管理用户' ? 'ischecked' : ''">管理用户</span>
|
|
|
+ <div class="bottomLine" v-show="loginType==='管理用户'"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="pswBox" @click="forgetPsw()">
|
|
|
- <p>忘记密码?</p>
|
|
|
+ <div class="loginBox">
|
|
|
+ <div class="inputBox">
|
|
|
+ <img
|
|
|
+ src="https://www.idea-co-sf.com/gardenProduct/image/comicon.png"
|
|
|
+ alt=""
|
|
|
+ style="height: 60rpx;left: 32rpx"
|
|
|
+ />
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ placeholder="请输入用户名"
|
|
|
+ v-model="loginForm.userName"
|
|
|
+ class="inputCont"
|
|
|
+ placeholder-class="b-palceholder"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="inputBox">
|
|
|
+ <img
|
|
|
+ src="https://www.idea-co-sf.com/gardenProduct/image/pswicon.svg"
|
|
|
+ alt=""
|
|
|
+ style="height: 60rpx;left: 32rpx"
|
|
|
+ />
|
|
|
+ <input
|
|
|
+ type="password"
|
|
|
+ placeholder="请输入密码"
|
|
|
+ v-model="loginForm.password"
|
|
|
+ class="inputCont"
|
|
|
+ placeholder-class="b-palceholder"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="inputBox">
|
|
|
+ <img
|
|
|
+ src="https://www.idea-co-sf.com/gardenProduct/image/yzmicon.svg"
|
|
|
+ alt=""
|
|
|
+ style="height: 60rpx;left: 32rpx"
|
|
|
+ />
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ placeholder="请输入验证码"
|
|
|
+ class="yanzhengma"
|
|
|
+ v-model="loginForm.code"
|
|
|
+ placeholder-class="b-palceholder"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ :src="loginForm.captchaImage"
|
|
|
+ @click="captchaImageRefresh(loginForm)"
|
|
|
+ class="yanzhengImg"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+<!-- <div class="pswBox" @click="forgetPsw()">-->
|
|
|
+<!-- <p>忘记密码?</p>-->
|
|
|
+<!-- </div>-->
|
|
|
+ <div>
|
|
|
+ <button
|
|
|
+ class="loginbtn"
|
|
|
+ @click="loginClick"
|
|
|
+ >提交
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div>
|
|
|
- <van-button
|
|
|
- type="default"
|
|
|
- class="loginbtn"
|
|
|
- size="large"
|
|
|
- color="#1f1fbe"
|
|
|
- @click="login"
|
|
|
- >登 录</van-button
|
|
|
- >
|
|
|
+ <div class="bottomTips">
|
|
|
+ <label class="radio">
|
|
|
+ <radio value="r1" checked="true" color="rgba(3, 101, 249, 1)"/>
|
|
|
+ 已阅读并同意<span style="color: rgba(3, 101, 249, 1)">《服务协议条款及隐私政策》</span>
|
|
|
+ </label>
|
|
|
</div>
|
|
|
- <!-- <div style="display: flex; justify-content: space-between">
|
|
|
- <van-button
|
|
|
- style="margin-top: 15rpx; width: 49%"
|
|
|
- type="default"
|
|
|
- size="large"
|
|
|
- color="#1f1fbe"
|
|
|
- @click="gozhfw"
|
|
|
- >前往智慧法务</van-button
|
|
|
- >
|
|
|
- <van-button
|
|
|
- style="margin-top: 15rpx; width: 49%"
|
|
|
- type="default"
|
|
|
- size="large"
|
|
|
- color="#1f1fbe"
|
|
|
- @click="goqy"
|
|
|
- >前往企业端</van-button
|
|
|
- >
|
|
|
- </div> -->
|
|
|
+<!-- <van-dialog id="van-toast" />-->
|
|
|
</div>
|
|
|
- <div class="bottomTips">
|
|
|
- 2022@copyrigtht IOT - Park-tech. supported by 中国移动
|
|
|
- </div>
|
|
|
- <van-dialog id="van-toast" />
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
@@ -183,7 +108,7 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
loginStatus: true,
|
|
|
- loginType: "个人",
|
|
|
+ loginType: "企业用户",
|
|
|
loginForm: {
|
|
|
userName: "",
|
|
|
password: "",
|
|
@@ -264,6 +189,13 @@ export default {
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
+ loginClick(){
|
|
|
+ if(this.loginType==='企业用户'){
|
|
|
+ this.UserLogin()
|
|
|
+ }else{
|
|
|
+ this.login()
|
|
|
+ }
|
|
|
+ },
|
|
|
UserLogin() {
|
|
|
const _this = this;
|
|
|
if (!this.loginForm.userName || !this.loginForm.password) {
|
|
@@ -346,25 +278,6 @@ export default {
|
|
|
background: white;
|
|
|
height: 100%;
|
|
|
overflow: hidden;
|
|
|
- .logintype {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- position: absolute;
|
|
|
- top: 76vw;
|
|
|
- justify-content: center;
|
|
|
- .checkbox {
|
|
|
- padding: 15rpx 20rpx;
|
|
|
- border: 1px solid #1f1fbe;
|
|
|
- border-radius: 0.2rem;
|
|
|
- color: #1f1fbe;
|
|
|
- width: 28.5%;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .ischecked {
|
|
|
- background: #1f1fbe;
|
|
|
- color: white;
|
|
|
- }
|
|
|
- }
|
|
|
.logTit {
|
|
|
width: 80vw;
|
|
|
left: 10vw;
|
|
@@ -396,31 +309,32 @@ export default {
|
|
|
color: #666666;
|
|
|
}
|
|
|
}
|
|
|
- .logobig {
|
|
|
+ .logobig2 {
|
|
|
width: 100vw;
|
|
|
- height: 100vh;
|
|
|
+ height: 400rpx;
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
z-index: 0;
|
|
|
}
|
|
|
|
|
|
.loginBox {
|
|
|
- width: 70vw;
|
|
|
- left: 15vw;
|
|
|
- top: 85vw;
|
|
|
+ width: 86vw;
|
|
|
+ left: 7vw;
|
|
|
+ top: 156rpx;
|
|
|
position: absolute;
|
|
|
}
|
|
|
.inputBox {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
img {
|
|
|
position: absolute;
|
|
|
width: 7vw;
|
|
|
// padding-top: 40px;
|
|
|
}
|
|
|
.yanzhengImg {
|
|
|
- right: 0;
|
|
|
+ right: 0 !important;
|
|
|
width: 20vw;
|
|
|
height: 10vw;
|
|
|
}
|
|
@@ -433,17 +347,18 @@ export default {
|
|
|
background: black;
|
|
|
width: 100%;
|
|
|
height: 76rpx;
|
|
|
- padding: 5rpx 0 5rpx 70rpx;
|
|
|
- background-color: rgba(255, 255, 255, 1);
|
|
|
+ padding: 5rpx 0 5rpx 92rpx;
|
|
|
border: 1rpx solid rgba(29, 24, 188, 0.05);
|
|
|
margin: 5rpx 0;
|
|
|
- font-size: 4vw;
|
|
|
+ font-size: 32rpx;
|
|
|
+ background: rgba(243, 245, 249, 1) !important;
|
|
|
+ border-radius: 16rpx;
|
|
|
}
|
|
|
- input::-webkit-input-placeholder {
|
|
|
- color: rgba(153, 153, 153, 1);
|
|
|
+ .b-palceholder {
|
|
|
+ color: rgba(179, 179, 179, 1);
|
|
|
}
|
|
|
.yanzhengma {
|
|
|
- width: 60%;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
}
|
|
|
.pswBox {
|
|
@@ -459,19 +374,59 @@ export default {
|
|
|
}
|
|
|
.loginbtn {
|
|
|
margin-top: 50rpx;
|
|
|
+ border-radius: 16rpx !important;
|
|
|
+ padding: 24rpx;
|
|
|
+ background: rgba(3, 101, 249, 1);
|
|
|
+ color: white;
|
|
|
+ font-size: 36rpx;
|
|
|
}
|
|
|
.bottomTips {
|
|
|
width: 100vw;
|
|
|
position: fixed;
|
|
|
- bottom: 15px;
|
|
|
+ bottom: 100rpx;
|
|
|
text-align: center;
|
|
|
color: #999999;
|
|
|
- font-size: 2vw;
|
|
|
+ font-size: 28rpx;
|
|
|
}
|
|
|
@media screen and (max-height: 454px) {
|
|
|
.bottomTips {
|
|
|
display: none;
|
|
|
}
|
|
|
}
|
|
|
+ .loginBody{
|
|
|
+ background: white;
|
|
|
+ border-radius: 16px 16px 0 0;
|
|
|
+ position: relative;
|
|
|
+ top: 336rpx;
|
|
|
+ height: 1112rpx;
|
|
|
+ .loginTypeBox{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ font-size: 40rpx;
|
|
|
+ padding-top: 48rpx;
|
|
|
+ color: rgba(86, 93, 106, 1);
|
|
|
+ }
|
|
|
+ .loginTypeItem{
|
|
|
+ position: relative;
|
|
|
+ .bottomLine{
|
|
|
+ width: 40px;
|
|
|
+ height: 6px;
|
|
|
+ background: linear-gradient( 90deg, #0365F9 0%, #85B5FF 100%);
|
|
|
+ border-radius: 3px 3px 3px 3px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 0;
|
|
|
+ left: 40rpx;
|
|
|
+ }
|
|
|
+ .loginTypeName{
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ .ischecked {
|
|
|
+ color: rgba(6, 35, 59, 1);
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|