songguoqiang 1 year ago
parent
commit
b5401a97bc
  1. BIN
      src/assets/imgs/bg_login.png
  2. BIN
      src/assets/imgs/logo_huatao.png
  3. 55
      src/views/Login/Login.vue
  4. 21
      src/views/Login/components/LoginForm.vue

BIN
src/assets/imgs/bg_login.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 610 KiB

BIN
src/assets/imgs/logo_huatao.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

55
src/views/Login/Login.vue

@ -3,30 +3,11 @@
:class="prefixCls" :class="prefixCls"
class="relative h-[100%] lt-xl:bg-[var(--login-bg-color)] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px" class="relative h-[100%] lt-xl:bg-[var(--login-bg-color)] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px"
> >
<div class="relative mx-auto h-full flex">
<div <div class="box">
:class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`" <img src="../../assets/imgs/logo_huatao.png" alt="" class="logo"/>
>
<!-- 左上角的 logo + 系统标题 --> <div class="absolute w-[33%] mx-auto h-full flex right-[7%]">
<div class="relative flex items-center text-white">
<img alt="" class="mr-10px h-24px w-48px" src="@/assets/imgs/logo.png" />
<span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
</div>
<!-- 左边的背景图 + 欢迎语 -->
<div class="h-[calc(100%-60px)] flex items-center justify-center">
<TransitionGroup
appear
enter-active-class="animate__animated animate__bounceInLeft"
tag="div"
>
<img key="1" alt="" class="w-350px" src="@/assets/svgs/login-box-bg.svg" />
<div key="2" class="text-3xl text-white">{{ t('login.welcome') }}</div>
<div key="3" class="mt-5 text-14px font-normal text-white">
{{ t('login.message') }}
</div>
</TransitionGroup>
</div>
</div>
<div class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px"> <div class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px">
<!-- 右上角的主题语言选择 --> <!-- 右上角的主题语言选择 -->
<div <div
@ -60,6 +41,11 @@
</Transition> </Transition>
</div> </div>
</div> </div>
<div class="footer">
<div>Copyright ©2012-2023闻荫科技吉ICP备100114504646号-6 ICP证书:吉B2-2018005497977吉林工商吉公网安备3101150204979086755号</div>
<div>出版物经营许可证()批字第Y8813号广播电视节目制作经营许可正()字第03283号网络文化经营许可证吉网文{2012)1460-055</div>
</div>
</div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -101,4 +87,25 @@ $prefix-cls: #{$namespace}-login;
} }
} }
} }
.box{
background: url(../../assets/imgs/bg_login.png) no-repeat top left;
background-size: 100% 100%;
width: 100%;
height:100%;
}
.logo{
position: absolute;
left: 4vw;
top: 5vh;
width: 30%;
}
.footer{
position: absolute;
bottom:4vh;
text-align: center;
padding: 0px 30px;
width: calc(100% - 60px);
color: #989898;
font-size: 14px;
}
</style> </style>

21
src/views/Login/components/LoginForm.vue

@ -4,29 +4,30 @@
<el-row style="margin-right: -10px; margin-left: -10px"> <el-row style="margin-right: -10px; margin-left: -10px">
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item> <el-form-item>
<LoginFormTitle style="width: 100%" /> <!-- <LoginFormTitle style="width: 100%" /> -->
<div class="font-size-18px">您好欢迎使用<span class="color-[rgb(74,154,236)]">长春华涛SPC系统</span></div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName"> <el-form-item v-if="loginData.tenantEnable === 'true'" label="租户名称">
<el-input v-model="loginData.loginForm.tenantName" :placeholder="t('login.tenantNamePlaceholder')" <el-input v-model="loginData.loginForm.tenantName" :placeholder="t('login.tenantNamePlaceholder')"
:prefix-icon="iconHouse" link type="primary" /> link type="primary" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item prop="username"> <el-form-item label="用户名">
<el-input v-model="loginData.loginForm.username" :placeholder="t('login.usernamePlaceholder')" <el-input v-model="loginData.loginForm.username" :placeholder="t('login.usernamePlaceholder')"
:prefix-icon="iconAvatar" style="height: 42px;" /> :prefix-icon="iconAvatar" style="height: 42px;" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item prop="password"> <el-form-item label="密码">
<el-input v-model="loginData.loginForm.password" :placeholder="t('login.passwordPlaceholder')" <el-input v-model="loginData.loginForm.password" :placeholder="t('login.passwordPlaceholder')"
:prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()" style="height: 42px;" /> :prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()" style="height: 42px;" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item prop="code"> <el-form-item prop="code" label="验证码">
<div class="flex w-[100%]"> <div class="flex w-[100%]">
<el-input v-model="loginData.loginForm.code" :placeholder="t('login.codePlaceholder')" <el-input v-model="loginData.loginForm.code" :placeholder="t('login.codePlaceholder')"
style="width: 76%;margin-right: 10px;height: 42px;" @keyup.enter="handleLogin()"> style="width: 76%;margin-right: 10px;height: 42px;" @keyup.enter="handleLogin()">
@ -275,4 +276,12 @@ onMounted(() => {
cursor: pointer; cursor: pointer;
} }
} }
.login-form{
background: white;
width: 100%;
box-shadow: 0px 0px 20px rgba(0,0,0,0.1)
}
::v-deep.el-form-item--large{
// margin-bottom: 15px;
}
</style> </style>

Loading…
Cancel
Save