解决logo不显示

This commit is contained in:
icssoa 2022-05-16 02:14:36 +08:00
parent d3f6a06289
commit 13c74533bd

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="page-login"> <div class="page-login">
<div class="box"> <div class="box">
<img class="logo" src="/@/assets/logo-text.png" alt="Logo" /> <img class="logo" :src="Logo" alt="Logo" />
<p class="desc">一款快速开发后台权限管理系统</p> <p class="desc">一款快速开发后台权限管理系统</p>
<el-form label-position="top" class="form" :disabled="saving" size="large"> <el-form label-position="top" class="form" :disabled="saving" size="large">
@ -25,7 +25,7 @@
</el-form-item> </el-form-item>
<el-form-item label="验证码"> <el-form-item label="验证码">
<div class="captcha"> <div class="row">
<input <input
v-model="form.verifyCode" v-model="form.verifyCode"
placeholder="图片验证码" placeholder="图片验证码"
@ -60,6 +60,7 @@ import { ElMessage } from "element-plus";
import { useCool } from "/@/cool"; import { useCool } from "/@/cool";
import { useBaseStore } from "/$/base"; import { useBaseStore } from "/$/base";
import Captcha from "./components/captcha.vue"; import Captcha from "./components/captcha.vue";
import Logo from "/@/assets/logo-text.png";
export default defineComponent({ export default defineComponent({
cool: { cool: {
@ -76,7 +77,7 @@ export default defineComponent({
const { refs, setRefs, router, service } = useCool(); const { refs, setRefs, router, service } = useCool();
const { user, menu } = useBaseStore(); const { user, menu } = useBaseStore();
// // 1
const saving = ref<boolean>(false); const saving = ref<boolean>(false);
// //
@ -154,7 +155,8 @@ export default defineComponent({
setRefs, setRefs,
form, form,
saving, saving,
toLogin toLogin,
Logo
}; };
} }
}); });
@ -185,7 +187,7 @@ export default defineComponent({
.desc { .desc {
color: #eee; color: #eee;
font-size: 16px; font-size: 14px;
letter-spacing: 1px; letter-spacing: 1px;
margin-bottom: 50px; margin-bottom: 50px;
} }
@ -195,7 +197,6 @@ export default defineComponent({
:deep(.el-form-item) { :deep(.el-form-item) {
margin-bottom: 20px; margin-bottom: 20px;
border-bottom: 1px solid #eee;
.el-form-item__label { .el-form-item__label {
color: #ccc; color: #ccc;
@ -212,7 +213,8 @@ export default defineComponent({
padding: 0 2px; padding: 0 2px;
box-sizing: border-box; box-sizing: border-box;
-webkit-text-fill-color: #fff; -webkit-text-fill-color: #fff;
font-size: 16px; font-size: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
&:-webkit-autofill { &:-webkit-autofill {
box-shadow: 0 0 0px 1000px transparent inset !important; box-shadow: 0 0 0px 1000px transparent inset !important;
@ -222,12 +224,23 @@ export default defineComponent({
&::-webkit-input-placeholder { &::-webkit-input-placeholder {
font-size: 12px; font-size: 12px;
} }
&:focus {
border-color: #fff;
}
} }
.captcha { .row {
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
position: relative;
.captcha {
position: absolute;
right: 0;
bottom: 1px;
}
} }
} }
@ -235,6 +248,7 @@ export default defineComponent({
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 50px; margin-top: 50px;
:deep(.el-button) { :deep(.el-button) {
width: 140px; width: 140px;
} }