|
@@ -39,6 +39,21 @@
|
|
|
|
|
|
|
|
<p class="login-card__tip">账号由管理员创建,如需开通请联系管理员</p>
|
|
<p class="login-card__tip">账号由管理员创建,如需开通请联系管理员</p>
|
|
|
</main>
|
|
</main>
|
|
|
|
|
+
|
|
|
|
|
+ <footer class="login-foot">
|
|
|
|
|
+ <p class="login-foot__org">{{ footerOrg }}</p>
|
|
|
|
|
+ <p class="login-foot__contact">
|
|
|
|
|
+ <span class="login-foot__item">
|
|
|
|
|
+ <Icon icon="i-mdi:phone-outline" :size="13" />
|
|
|
|
|
+ <span>{{ footerPhone }}</span>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ <span class="login-foot__sep" aria-hidden="true"></span>
|
|
|
|
|
+ <span class="login-foot__item">
|
|
|
|
|
+ <Icon icon="i-mdi:email-outline" :size="13" />
|
|
|
|
|
+ <span>{{ footerEmail }}</span>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </p>
|
|
|
|
|
+ </footer>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
@@ -47,6 +62,16 @@
|
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
import { PageEnum } from '@/core/enums/pageEnum';
|
|
import { PageEnum } from '@/core/enums/pageEnum';
|
|
|
import { useAccountStore } from '@/core/store/modules/account';
|
|
import { useAccountStore } from '@/core/store/modules/account';
|
|
|
|
|
+ import { Icon } from '@/core/components/Icon';
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 页脚展示信息。
|
|
|
|
|
+ *
|
|
|
|
|
+ * ⚠️ 目前是占位文案,替换时只改这三行即可。
|
|
|
|
|
+ */
|
|
|
|
|
+ const footerOrg = '中数矩阵(成都)科技有限公司';
|
|
|
|
|
+ const footerPhone = '18908093240';
|
|
|
|
|
+ const footerEmail = 'service@example.com';
|
|
|
|
|
|
|
|
const route = useRoute();
|
|
const route = useRoute();
|
|
|
const router = useRouter();
|
|
const router = useRouter();
|
|
@@ -82,8 +107,11 @@
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
|
|
|
+ // 全局 `html, body { overflow: hidden !important }`,登录页无法滚动,
|
|
|
|
|
+ // 所以卡片 + 页脚整体作为一个居中块,靠短屏 media query 压缩间距来避免裁切。
|
|
|
.login-page {
|
|
.login-page {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -96,6 +124,7 @@
|
|
|
|
|
|
|
|
.login-card {
|
|
.login-card {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
|
|
+ flex: none;
|
|
|
width: 420px;
|
|
width: 420px;
|
|
|
max-width: 100%;
|
|
max-width: 100%;
|
|
|
padding: 44px 40px 36px;
|
|
padding: 44px 40px 36px;
|
|
@@ -107,10 +136,12 @@
|
|
|
0 18px 40px -18px rgb(16 24 40 / 16%);
|
|
0 18px 40px -18px rgb(16 24 40 / 16%);
|
|
|
animation: login-rise 0.42s cubic-bezier(25%, 100%, 50%, 100%) both;
|
|
animation: login-rise 0.42s cubic-bezier(25%, 100%, 50%, 100%) both;
|
|
|
|
|
|
|
|
|
|
+ // logo 与标题文字同一排,整组在卡片内水平居中(文字块内部仍左对齐)
|
|
|
&__head {
|
|
&__head {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
gap: 14px;
|
|
gap: 14px;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
margin-bottom: 38px;
|
|
margin-bottom: 38px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -150,6 +181,45 @@
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ // 页脚:公司名称 + 联系方式,位于卡片外、随整体居中
|
|
|
|
|
+ .login-foot {
|
|
|
|
|
+ flex: none;
|
|
|
|
|
+ margin-top: 26px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+
|
|
|
|
|
+ &__org {
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ letter-spacing: 0.02em;
|
|
|
|
|
+ color: @cb-text-secondary;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &__contact {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ gap: 10px;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ margin: 9px 0 0;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ color: #98a2b3;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &__item {
|
|
|
|
|
+ display: inline-flex;
|
|
|
|
|
+ gap: 5px;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &__sep {
|
|
|
|
|
+ flex: none;
|
|
|
|
|
+ width: 1px;
|
|
|
|
|
+ height: 11px;
|
|
|
|
|
+ background: #d8dde5;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
.field__label {
|
|
.field__label {
|
|
|
display: block;
|
|
display: block;
|
|
|
margin-bottom: 9px;
|
|
margin-bottom: 9px;
|
|
@@ -266,6 +336,39 @@
|
|
|
.login-card__title {
|
|
.login-card__title {
|
|
|
font-size: 17px;
|
|
font-size: 17px;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ // 窄屏放不下「电话 | 邮箱」一行,改成上下两行并去掉分隔线
|
|
|
|
|
+ .login-foot__contact {
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ gap: 5px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .login-foot__sep {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 矮屏(1366×768 缩放后、投影仪等)压缩纵向间距,避免卡片 + 页脚被裁切
|
|
|
|
|
+ @media (height <= 720px) {
|
|
|
|
|
+ .login-page {
|
|
|
|
|
+ padding: 16px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .login-card {
|
|
|
|
|
+ padding: 30px 36px 26px;
|
|
|
|
|
+
|
|
|
|
|
+ &__head {
|
|
|
|
|
+ margin-bottom: 26px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &__tip {
|
|
|
|
|
+ margin-top: 22px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .login-foot {
|
|
|
|
|
+ margin-top: 16px;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
@media (prefers-reduced-motion: reduce) {
|