feat: 移动端适配
This commit is contained in:
parent
f584a9fec2
commit
cbc3d53e08
@ -597,10 +597,13 @@ export default {
|
||||
.mobile-menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10000;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
visibility: hidden;
|
||||
transition: visibility 0.3s ease;
|
||||
}
|
||||
@ -622,10 +625,11 @@ export default {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
width: 280px;
|
||||
max-width: 85%;
|
||||
height: 100%;
|
||||
max-width: 80%;
|
||||
background: #fff;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.3s ease;
|
||||
@ -728,9 +732,11 @@ export default {
|
||||
/* 移动端适配 */
|
||||
@media (max-width: 768px) {
|
||||
.nav-box {
|
||||
height: 64px;
|
||||
height: 56px;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
padding: 0 16px;
|
||||
border-radius: 0;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.menu-box {
|
||||
@ -742,7 +748,52 @@ export default {
|
||||
}
|
||||
|
||||
.hamburger-btn {
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hamburger-icon {
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.hamburger-icon span {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #003B1A;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.hamburger-icon span:nth-child(1) {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.hamburger-icon span:nth-child(2) {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.hamburger-icon span:nth-child(3) {
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
.hamburger-icon.active span:nth-child(1) {
|
||||
top: 8px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.hamburger-icon.active span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hamburger-icon.active span:nth-child(3) {
|
||||
top: 8px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.logo-box {
|
||||
@ -750,7 +801,7 @@ export default {
|
||||
}
|
||||
|
||||
.logo-box img {
|
||||
height: 28px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -759,8 +810,12 @@ export default {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.hamburger-btn {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.logo-box img {
|
||||
height: 24px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1867,7 +1867,7 @@ export default {
|
||||
@media (max-width: 767px) {
|
||||
/* 容器调整 */
|
||||
.container {
|
||||
margin-top: 0;
|
||||
margin-top: 64px;
|
||||
}
|
||||
|
||||
/* 顶部区域 */
|
||||
@ -1877,7 +1877,7 @@ export default {
|
||||
}
|
||||
|
||||
.top-title {
|
||||
margin-top: 60px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.top-title img {
|
||||
@ -1887,8 +1887,8 @@ export default {
|
||||
|
||||
.top-title-desc {
|
||||
padding: 0 20px;
|
||||
margin-top: 20px;
|
||||
font-size: 16px;
|
||||
margin-top: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.top-search-box {
|
||||
@ -1953,17 +1953,52 @@ export default {
|
||||
}
|
||||
|
||||
/* 核心驱动区域 */
|
||||
.section-container {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.section-title.core-title {
|
||||
background-size: 28px 28px;
|
||||
padding-left: 36px;
|
||||
}
|
||||
|
||||
.section-title.core-title::after {
|
||||
left: 36px;
|
||||
width: 100px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.section-title .title-bar {
|
||||
width: 5px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.section-title .title-text {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.core-section {
|
||||
padding: 60px 0;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.core-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.core-item {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.core-item .core-icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.core-item .core-name1 {
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.core-item .core-name2 {
|
||||
@ -1971,18 +2006,22 @@ export default {
|
||||
}
|
||||
|
||||
.core-item .core-desc {
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 共性能力区域 */
|
||||
.capability-section {
|
||||
padding: 60px 0;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.capability-header {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.capability-title-group {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.capability-title-icon {
|
||||
@ -1994,14 +2033,22 @@ export default {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.capability-title-bar {
|
||||
width: 100px;
|
||||
height: 6px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.capability-desc {
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.capability-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
gap: 12px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.capability-card {
|
||||
@ -2123,6 +2170,211 @@ export default {
|
||||
.top-box ::v-deep .t-swiper__navigation {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hero Cards 移动端适配 */
|
||||
.hero-cards {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
margin-top: 32px;
|
||||
padding: 0 16px;
|
||||
width: calc(100% - 32px);
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
height: auto;
|
||||
min-height: 140px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hero-card .card-header {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.hero-card .card-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.hero-card .card-body {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.hero-card .card-btn {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
font-size: 13px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* 企业出海移动端适配 */
|
||||
.overseas2-section {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.overseas2-header {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.overseas2-title-group {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.overseas2-title-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.overseas2-title-text {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.overseas2-title-bar {
|
||||
width: 100px;
|
||||
height: 6px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.overseas2-desc {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.overseas2-grid {
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.overseas2-card {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: 80px;
|
||||
padding: 12px 16px;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.overseas2-card-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.overseas2-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.overseas2-text {
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.overseas2-name {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.overseas2-item-desc {
|
||||
font-size: 13px;
|
||||
white-space: normal;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.overseas2-btn {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
font-size: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 行业动态移动端适配 */
|
||||
.news-section {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.news-title-group {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.news-title-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.news-title-text {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.news-title-bar {
|
||||
width: 100px;
|
||||
height: 6px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.news-tabs {
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-top: -20px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.news-tab {
|
||||
padding: 6px 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.news-list {
|
||||
height: auto;
|
||||
max-height: none;
|
||||
gap: 12px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.news-item {
|
||||
flex-direction: column;
|
||||
padding: 12px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.news-pic {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.news-content-top .news-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.news-content-middle {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.news-content-bottom {
|
||||
font-size: 13px;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
|
||||
.news-more {
|
||||
padding: 16px 16px 0 0;
|
||||
}
|
||||
|
||||
/* 合作伙伴移动端隐藏（动画在移动端影响性能） */
|
||||
.partner-section {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板适配 */
|
||||
@ -2141,6 +2393,10 @@ export default {
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
.core-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.capability-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
@ -2159,5 +2415,22 @@ export default {
|
||||
.capability-name {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* 企业出海平板适配 */
|
||||
.overseas2-card {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
/* Hero Cards 平板适配 */
|
||||
.hero-cards {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,27 +1,47 @@
|
||||
<template>
|
||||
<main class="login-mind">
|
||||
<div class="dlbox" style="font-size: 12px">
|
||||
<div class="bg-white rounded-2xl auth-card-shadow login-box" style="display: flex;height: 550px; margin-top: -100px;">
|
||||
<!-- PC端布局：左右横向平铺 -->
|
||||
<div class="bg-white rounded-2xl auth-card-shadow login-box pc-layout">
|
||||
<div class="left-login">
|
||||
<div class="left-login-text">DID扫码登录</div>
|
||||
<div class="qrcode-container" @click="Getnewqrcode()">
|
||||
<div ref="qrcodeElement" class="qrcode-wrapper"></div>
|
||||
|
||||
</div>
|
||||
<div class="left-login-bottom">请打开<span class="left-login-bottom-text">航贸身份通</span>APP/小程序
|
||||
扫一扫登录</div>
|
||||
<div class="qrcode-container" @click="Getnewqrcode()">
|
||||
<div ref="qrcodePC" class="qrcode-wrapper"></div>
|
||||
</div>
|
||||
<div class="left-login-bottom">请打开<span class="left-login-bottom-text">航贸身份通</span>APP/小程序扫一扫登录</div>
|
||||
</div>
|
||||
<div class="right-login">
|
||||
<t-space style="width: 100%">
|
||||
<t-tabs class="loginTabs" v-model="type" size="large">
|
||||
<t-tab-panel class="mmdl" value="login" label="登录" :destroyOnHide="false"> </t-tab-panel>
|
||||
<t-tab-panel v-if="MH_REGISTRATION_ENABLED" value="created" label="注册" :destroyOnHide="false">
|
||||
<t-space style="width: 100%">
|
||||
<t-tabs class="loginTabs" v-model="type" size="large">
|
||||
<t-tab-panel class="mmdl" value="login" label="登录" :destroyOnHide="false"> </t-tab-panel>
|
||||
<t-tab-panel v-if="MH_REGISTRATION_ENABLED" value="created" label="注册" :destroyOnHide="false">
|
||||
</t-tab-panel>
|
||||
</t-tabs>
|
||||
</t-space>
|
||||
<login v-if="type === 'login'" />
|
||||
<zhuce v-if="type === 'created'" @zhucecg="typechange" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 移动端布局：Tab切换 -->
|
||||
<div class="bg-white rounded-2xl auth-card-shadow login-box mobile-layout">
|
||||
<div class="login-content">
|
||||
<t-tabs class="loginTabs" v-model="loginTab" size="large">
|
||||
<t-tab-panel value="account" label="账号登录" :destroyOnHide="false">
|
||||
<login v-if="type === 'login'" />
|
||||
<zhuce v-if="type === 'created'" @zhucecg="typechange" />
|
||||
</t-tab-panel>
|
||||
<t-tab-panel v-if="MH_REGISTRATION_ENABLED" value="register" label="注册" :destroyOnHide="false">
|
||||
</t-tab-panel>
|
||||
<t-tab-panel value="qrcode" label="扫码登录" :destroyOnHide="false">
|
||||
<div class="qrcode-login">
|
||||
<div class="qrcode-container" @click="Getnewqrcode()">
|
||||
<div ref="qrcodeMobile" class="qrcode-wrapper"></div>
|
||||
</div>
|
||||
<div class="qrcode-tip">请打开<span class="highlight">航贸身份通</span>APP/小程序扫一扫登录</div>
|
||||
</div>
|
||||
</t-tab-panel>
|
||||
</t-tabs>
|
||||
</t-space>
|
||||
<login v-if="type === 'login'" />
|
||||
<zhuce v-if="type === 'created'" @zhucecg="typechange" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<t-dialog
|
||||
@ -68,7 +88,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
type: 'login',
|
||||
qrcodeText: '',
|
||||
loginTab: 'account',
|
||||
qrcodeTextPreview: '',
|
||||
|
||||
// 配置参数
|
||||
@ -110,11 +130,14 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
clearQRCode() {
|
||||
// 清除容器内容
|
||||
if (this.$refs.qrcodeElement) {
|
||||
this.$refs.qrcodeElement.innerHTML = '';
|
||||
// 清除PC端容器
|
||||
if (this.$refs.qrcodePC) {
|
||||
this.$refs.qrcodePC.innerHTML = '';
|
||||
}
|
||||
// 清除移动端容器
|
||||
if (this.$refs.qrcodeMobile) {
|
||||
this.$refs.qrcodeMobile.innerHTML = '';
|
||||
}
|
||||
|
||||
// 清除 QRCode 实例
|
||||
if (this.qrCode) {
|
||||
this.qrCode = null;
|
||||
@ -260,32 +283,52 @@ export default {
|
||||
? this.qrcodeText.substring(0, 50) + '...'
|
||||
: this.qrcodeText;
|
||||
|
||||
this.qrCode = new QRCode(this.$refs.qrcodeElement, {
|
||||
text: this.qrcodeText,
|
||||
width: this.width,
|
||||
height: this.height,
|
||||
colorDark: this.colorDark,
|
||||
colorLight: this.colorLight,
|
||||
correctLevel: QRCode.CorrectLevel[this.correctLevel]
|
||||
});
|
||||
// PC端二维码
|
||||
if (this.$refs.qrcodePC) {
|
||||
this.qrCode = new QRCode(this.$refs.qrcodePC, {
|
||||
text: this.qrcodeText,
|
||||
width: this.width,
|
||||
height: this.height,
|
||||
colorDark: this.colorDark,
|
||||
colorLight: this.colorLight,
|
||||
correctLevel: QRCode.CorrectLevel[this.correctLevel]
|
||||
});
|
||||
}
|
||||
// 移动端二维码
|
||||
if (this.$refs.qrcodeMobile) {
|
||||
new QRCode(this.$refs.qrcodeMobile, {
|
||||
text: this.qrcodeText,
|
||||
width: this.width,
|
||||
height: this.height,
|
||||
colorDark: this.colorDark,
|
||||
colorLight: this.colorLight,
|
||||
correctLevel: QRCode.CorrectLevel[this.correctLevel]
|
||||
});
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.removeQRTitles();
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
this.removeQRTitles();
|
||||
});
|
||||
} catch (error) {
|
||||
}
|
||||
},
|
||||
removeQRTitles() {
|
||||
if (!this.$refs.qrcodeElement) return;
|
||||
|
||||
// 移除容器本身的 title
|
||||
this.$refs.qrcodeElement.removeAttribute('title');
|
||||
|
||||
// 移除内部元素的 title
|
||||
const elements = this.$refs.qrcodeElement.querySelectorAll('*');
|
||||
elements.forEach(el => {
|
||||
el.removeAttribute('title');
|
||||
});
|
||||
// 移除PC端容器的 title
|
||||
if (this.$refs.qrcodePC) {
|
||||
this.$refs.qrcodePC.removeAttribute('title');
|
||||
const elements = this.$refs.qrcodePC.querySelectorAll('*');
|
||||
elements.forEach(el => {
|
||||
el.removeAttribute('title');
|
||||
});
|
||||
}
|
||||
// 移除移动端容器的 title
|
||||
if (this.$refs.qrcodeMobile) {
|
||||
this.$refs.qrcodeMobile.removeAttribute('title');
|
||||
const elements = this.$refs.qrcodeMobile.querySelectorAll('*');
|
||||
elements.forEach(el => {
|
||||
el.removeAttribute('title');
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
@ -295,6 +338,7 @@ export default {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
background: url(../../assets/loginbg.png) center center/100% 100% no-repeat;
|
||||
}
|
||||
.dlbox {
|
||||
@ -305,48 +349,83 @@ export default {
|
||||
// width: 540px;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
.login-box{
|
||||
.login-box {
|
||||
padding: 48px 0 60px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 550px;
|
||||
margin-top: -100px;
|
||||
}
|
||||
.left-login{
|
||||
/* PC端布局 - 默认显示 */
|
||||
.pc-layout {
|
||||
display: flex;
|
||||
}
|
||||
/* 移动端布局 - 默认隐藏 */
|
||||
.mobile-layout {
|
||||
display: none;
|
||||
}
|
||||
.login-content {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
.qrcode-login {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 32px 0;
|
||||
}
|
||||
.qrcode-container {
|
||||
width: 216px;
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(212,212,213,1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.qrcode-tip {
|
||||
margin-top: 24px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
.qrcode-tip .highlight {
|
||||
font-weight: 600;
|
||||
color: #2E7D32;
|
||||
}
|
||||
/* PC端左右布局样式 */
|
||||
.left-login {
|
||||
padding: 0 64px;
|
||||
padding-top: 44px;
|
||||
border-right: 2px solid #F5F5F5;
|
||||
.left-login-text{
|
||||
padding-bottom: 28px;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0;
|
||||
color: #1A1B24;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.qrcode-container{
|
||||
width: 216px;
|
||||
padding: 8px;
|
||||
margin: auto;
|
||||
border: 1px solid rgba(212,212,213,1);
|
||||
border-radius: 8px;
|
||||
.left-login-text {
|
||||
padding-bottom: 28px;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0;
|
||||
color: #1A1B24;
|
||||
text-align: center;
|
||||
}
|
||||
.left-login-bottom{
|
||||
.left-login-bottom {
|
||||
width: 254px;
|
||||
margin-top: 24px;
|
||||
margin-top: 24px;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
letter-spacing: 0;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
.left-login-bottom-text{
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
letter-spacing: 0;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
.left-login-bottom-text {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 26px;
|
||||
letter-spacing: 0;
|
||||
color: #2E7D32;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
line-height: 26px;
|
||||
letter-spacing: 0;
|
||||
color: #2E7D32;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.right-login{
|
||||
.right-login {
|
||||
padding: 0 64px;
|
||||
}
|
||||
.verification-code {
|
||||
@ -374,4 +453,71 @@ text-align: center;
|
||||
.btn-container {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.login-mind {
|
||||
background: url(../../assets/loginbg.png) center top/cover no-repeat;
|
||||
}
|
||||
|
||||
.dlbox {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
transform: none;
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
margin: 40px auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* PC布局隐藏，移动端布局显示 */
|
||||
.pc-layout {
|
||||
display: none;
|
||||
}
|
||||
.mobile-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 32px 24px;
|
||||
height: auto;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.login-content {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.qrcode-login {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.qrcode-container {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.qrcode-tip {
|
||||
font-size: 15px;
|
||||
margin-top: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.dlbox {
|
||||
margin: 30px auto;
|
||||
padding: 0 16px;
|
||||
padding-top:40px;
|
||||
}
|
||||
|
||||
.mobile-layout {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.qrcode-container {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.qrcode-tip {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user