zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'dev'

This commit is contained in:
sc 2021-06-28 13:39:52 +08:00
parent 921e041db2 11bdb3cb22
commit 903b874bd9
8 changed files with 79 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/img/loginbg.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

0
src/assets/logo.png → public/img/logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 8.9 KiB

26
public/index.html
View File

@ -13,7 +13,31 @@
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript
enabled. Please enable it to continue.</strong>
</noscript>
<div id="app" class="aminui"></div>
<div id="app" class="aminui">
<div class="app-loading">
<div class="app-loading__logo">
<img src="img/logo.png"/>
</div>
<div class="app-loading__loader"></div>
<div class="app-loading__title"><%= htmlWebpackPlugin.options.title %></div>
</div>
<style>
.app-loading {position: absolute;top:0px;left:0px;right:0px;bottom:0px;display: flex;justify-content: center;align-items: center;flex-direction: column;background: #fff;}
.app-loading__logo {margin-bottom: 30px;}
.app-loading__logo img {width: 100px;vertical-align: bottom;}
.app-loading__loader {width: 30px;height: 30px;border: 5px solid transparent;border-top-color: #000;border-radius: 50%;animation: .5s loader linear infinite;position: relative;}
.app-loading__loader:before {content: '';display: block;width: inherit;height: inherit;position: absolute;top: -5px;left: -5px;border: 5px solid #ccc;border-radius: 50%;opacity: .5;}
.app-loading__title {font-size: 30px;color: #333;margin-top: 30px;}
@keyframes loader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</div>
<!-- built files will be auto injected -->
</body>
</html>

BIN
src/assets/login-left.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

2
src/layout/index.vue
View File

@ -4,7 +4,7 @@
<header class="adminui-header">
<div class="adminui-header-left">
<div class="logo-bar">
<img class="logo" :alt="appName" src="@/assets/logo.png">
<img class="logo" :alt="appName" src="img/logo.png">
<span>{{ $CONFIG.APP_NAME }}</span>
</div>
<ul v-if="!ismobile" class="nav">

2
src/router/systemRouter.js
View File

@ -46,7 +46,7 @@ const routes = [{
},
{
path: "/login",
component: () => import(/* webpackChunkName: "login" */ '@/views/login'),
component: () => import(/* webpackChunkName: "login" */ '@/views/userCenter/login'),
meta: {
title: "登录"
}

11
src/views/home/stats/index.vue
View File

@ -2,7 +2,7 @@
<el-main>
<el-row :gutter="15">
<el-col :span="24">
<el-card shadow="never">
<el-card shadow="never" style="margin-bottom: 15px;">
<div class="welTop">
<div class="icon">
<el-avatar :size="60" src="img/avatar.jpg"></el-avatar>
@ -36,7 +36,7 @@
<div class="data-box">
<el-row :gutter="15">
<el-col :span="8">
<el-col :md="8" :xs="24">
<el-card shadow="never" class="item-background">
<div class="item">
<div class="main">
@ -50,7 +50,7 @@
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-col :md="8" :xs="24">
<el-card shadow="never">
<div class="item">
<div class="main">
@ -64,7 +64,7 @@
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-col :md="8" :xs="24">
<el-card shadow="never">
<div class="item">
<div class="main">
@ -106,7 +106,7 @@
</script>
<style scoped>
.el-row {margin-bottom:15px;}
.el-row {}
.el-tag+.el-tag {margin-left: 10px;}
@ -119,6 +119,7 @@
.avatar-list .avatar {margin-left: -10px;border: 3px solid #fff;cursor: pointer;}
.data-box {}
.data-box .el-card {margin-bottom: 15px;}
.data-box .item-background {background: #409EFF;color: #fff;}
.data-box .item-background .item h2 {color: #fff;}
.data-box .item-background .item p {color: rgba(255, 255, 255, 0.5);}

60
src/views/login.vue → src/views/userCenter/login.vue
View File

@ -2,17 +2,12 @@
<div class="login_container">
<div class="login_body">
<div class="login-sidebox">
<div class="login-logo">
<img class="logo" :alt="appName" src="@/assets/logo.png">{{appName}}
</div>
<div class="login-title">
<h2>面面俱到的中后台前端框架</h2>
<p>基于Vue 3.0 + Vue-Router 4.0 + Element-Plus + VueX + Axios 后台管理系统前端框架。</p>
</div>
</div>
<div class="login-form">
<h2>登录</h2>
<div class="login-logo">
<img class="logo" :alt="appName" src="img/logo.png">
<h2>用户登录</h2>
</div>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0" size="large">
<el-form-item prop="user">
<el-input v-model="ruleForm.user" prefix-icon="el-icon-user" clearable placeholder="用户名 / 手机 / 邮箱"></el-input>
@ -21,7 +16,14 @@
<el-input v-model="ruleForm.password" prefix-icon="el-icon-lock" clearable show-password placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item style="margin-bottom: 10px;">
<el-row>
<el-col :span="12">
<el-checkbox label="记住我" v-model="ruleForm.autologin"></el-checkbox>
</el-col>
<el-col :span="12" style="text-align: right;">
<el-button type="text">忘记密码？</el-button>
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-dropdown style="width: 100%;">
@ -56,7 +58,7 @@
</el-form-item>
</el-form>
<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
<el-divider>其他登录方式</el-divider>
<div class="login-oauth">
<el-button size="medium" type="primary" icon="el-icon-platform-eleme" circle></el-button>
@ -65,6 +67,14 @@
<el-button size="medium" type="warning" icon="el-icon-menu" circle></el-button>
</div>
</div>
<div class="login-sidebox">
<div class="login-sidebox__title">
<h2>SCUI</h2>
<h4>高性能 / 精致 / 优雅</h4>
<p>基于Vue3 + Element-Plus 的中后台前端解决方案。</p>
</div>
<img src="img/loginbg.svg"/>
</div>
</div>
<div class="login-footer">© {{appName}} {{appVar}}</div>
</div>
@ -72,19 +82,23 @@
</template>
<style scoped>
.login_container {position: absolute;top:50%;left:50%;width: 900px;margin: 0 auto;z-index: 1;transform: translate(-50%, -50%);}
.login_container {position: absolute;top:50%;left:50%;width: 1100px;margin: 0 auto;z-index: 1;transform: translate(-50%, -50%);}
.login_body {width: inherit;display: flex;box-shadow: 0px 20px 80px 0px rgba(0,0,0,0.3);}
.login-sidebox {width: 50%;background:url(~@/assets/login-left.png) 0 0 no-repeat #607089;padding: 60px;color: #fff;position: relative;}
.login-sidebox {width: 50%;padding: 60px;color: #fff;background:#3887e5;position: relative;overflow: hidden;}
.login-sidebox__title h2 {font-size: 30px;}
.login-sidebox__title h4 {font-size: 18px;margin-top: 10px;font-weight: normal;}
.login-sidebox__title p {font-size: 14px;margin-top:10px;line-height: 1.8;color: rgba(255,255,255,0.6);}
.login-sidebox img {position: absolute;left:-120px;bottom:-160px;width: 550px;}
.login-logo {font-size: 35px;display: flex;align-items: center;}
.login-logo .logo {margin-right: 10px;width: 50px;height: 50px;}
.login-logo {text-align: center;margin-bottom: 30px;}
.login-logo .logo {width: 70px;height: 70px;vertical-align: bottom;}
.login-logo h2 {font-size: 24px;margin-top: 20px;color: #40485b;}
.login-title {margin-top: 20px;}
.login-title h2 {font-size: 22px;font-weight: normal;}
.login-title p {font-size: 12px;margin-top:40px;line-height: 1.8;color: rgba(255,255,255,0.8);}
.login-form {width: 50%;padding: 60px;background: #fff;}
.login-form h2 {font-size: 24px;color: #40485b;margin-bottom: 25px;}
.login-form {width: 50%;padding: 60px 100px;background: #fff;}
.login-oauth {display: flex;justify-content:space-around;}
.login-form .el-divider {margin-top:40px;}
@ -97,6 +111,18 @@
@media (max-height: 650px){
.login_container {position: static;transform: none;margin:50px auto;}
.login-footer {margin-bottom: 50px;}
}
@media (max-width: 1200px){
.login_container {width: 900px;}
.login-form {padding:60px;}
}
@media (max-width: 1000px){
.login_container {width: 100%;background: #fff;margin: 0;transform:none;top:0px;bottom:0px;left:0px;right: 0px;}
.login_body {box-shadow: none;}
.login-form {width:100%;padding:60px 40px;}
.login-sidebox {display: none;}
.login-footer {margin-top: 0;}
}
</style>