5 changed files with 212 additions and 4 deletions
|
After Width: | Height: | Size: 357 KiB |
|
After Width: | Height: | Size: 9.3 MiB |
@ -0,0 +1,193 @@ |
|||
<template> |
|||
<div class="index_loginPage__K_bGK login-wrap"> |
|||
<div class="index_banner__1d8CU"> |
|||
<div class="index_rootContainer"> |
|||
<b class="title">扫码登录</b> |
|||
<p class="sub_title mt32">打开 <b>微信</b> 扫码登录</p> |
|||
<div class="img mb32"> |
|||
|
|||
</div> |
|||
<div class="attention gap10"> |
|||
<el-checkbox v-model="checked"></el-checkbox> |
|||
<b>登录即代表同意 <a @click="jumpDoc">《用户协议》</a>和 <a @click="jumpDoc">《隐私条款》</a></b> |
|||
</div> |
|||
<p class="tip">若无账号,请先联系客服注册</p> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="style_footerWrapper"> |
|||
<div class="left flex"> |
|||
<img src="@/assets/doctor_h5.svg" alt=""> |
|||
<div> |
|||
<b>手机端</b> |
|||
<p>微信扫码体验</p> |
|||
</div> |
|||
</div> |
|||
<div class="center"> |
|||
<p><b>入驻指南</b>个人入驻 组织(医院等)入驻</p> |
|||
<p><b>人工咨询</b>扫左侧码,进入手机端-我的-页面底部“联系我们”</p> |
|||
</div> |
|||
<div class="right"> |
|||
<p><b>网站备案</b>© 2012-2025 something , <a href="" >Inc. All rights 测试</a></p> |
|||
<p></p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
checked:false |
|||
} |
|||
}, |
|||
methods: { |
|||
jumpDoc(){ |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.index_banner__1d8CU { |
|||
align-items: center; |
|||
background-image: url(../assets/login_backImg.svg); |
|||
background-size: cover; |
|||
display: flex; |
|||
flex: 1 1; |
|||
justify-content: flex-end; |
|||
-webkit-transition: padding-right .5s; |
|||
transition: padding-right .5s; |
|||
width: 100%; |
|||
} |
|||
|
|||
.index_rootContainer { |
|||
background: #fff; |
|||
border-radius: 16px; |
|||
box-shadow: 0 6px 40px 0 rgba(53, 76, 166, .08); |
|||
display: inline-block; |
|||
flex-shrink: 0; |
|||
height: 480px; |
|||
overflow: hidden; |
|||
width: 432px; |
|||
margin-right: 192px; |
|||
padding: 40px; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.title{ |
|||
font-family: Microsoft YaHei; |
|||
font-size: 22px; |
|||
font-weight: bold; |
|||
line-height: normal; |
|||
text-align: center; |
|||
letter-spacing: 0.08em; |
|||
color: #1E2226; |
|||
} |
|||
.sub_title{ |
|||
font-family: Microsoft YaHei; |
|||
font-size: 12px; |
|||
font-weight: normal; |
|||
line-height: normal; |
|||
letter-spacing: 0.08em; |
|||
color: #626573; |
|||
margin-top: 32px; |
|||
margin-bottom: 12px; |
|||
} |
|||
.img{ |
|||
width: 192px; |
|||
height: 192px; |
|||
background: #006AFF; |
|||
margin: 0 auto; |
|||
margin-bottom: 32px; |
|||
} |
|||
} |
|||
|
|||
.attention ,.tip{ |
|||
font-size: 12px; |
|||
font-weight: normal; |
|||
line-height: 13px; |
|||
letter-spacing: 0.08em; |
|||
color: #626573; |
|||
text-align: center; |
|||
display: flex; |
|||
justify-content: center; |
|||
b { |
|||
font-size: 12px; |
|||
font-weight: normal; |
|||
|
|||
a { |
|||
text-decoration: none; |
|||
color: #006AFF; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
.attention{ |
|||
margin-bottom: 12px; |
|||
} |
|||
@media(max-width: 1420px) { |
|||
.index_rootContainer { |
|||
margin-right: 102px |
|||
} |
|||
} |
|||
|
|||
.style_footerWrapper { |
|||
background: #f3f4f6; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 46px 49px; |
|||
width: 100%; |
|||
height: 192px; |
|||
box-sizing: border-box; |
|||
gap: 72px; |
|||
b{ |
|||
font-size: 12px; |
|||
font-weight: bold; |
|||
line-height: 13px; |
|||
letter-spacing: 0.08em; |
|||
color: #1E2226; |
|||
} |
|||
|
|||
.left{ |
|||
gap: 12px; |
|||
div{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 8px; |
|||
text-align: left; |
|||
} |
|||
img{ |
|||
width: 97px; |
|||
height: 100px; |
|||
} |
|||
} |
|||
.center,.right{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 24px; |
|||
text-align: left; |
|||
p{ |
|||
display: flex; |
|||
gap: 8px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.style_iconWrapper__3qi7l { |
|||
flex-basis: 80px; |
|||
} |
|||
|
|||
.index_loginPage__K_bGK { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 100vh; |
|||
min-width: 1200px; |
|||
} |
|||
|
|||
#ecomLoginForm { |
|||
height: 280px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue