JLNTV_IPD/vue-admin-beautiful
4
0
Fork 0
mirror of https://gitee.com/chu1204505056/vue-admin-beautiful.git synced 2025-10-10 02:59:57 +08:00
Code Issues Projects Releases Wiki Activity

✨优化登录页显示效果

Browse Source
This commit is contained in:
chuzhixin 2020-10-10 18:18:46 +08:00
parent 1848c94d61
commit 16e69e181e
2 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
package.json
View File

@ -15,6 +15,7 @@
"dependencies": { "dependencies": {
"ant-design-vue": "^2.0.0-beta.10", "ant-design-vue": "^2.0.0-beta.10",
"axios": "^0.20.0", "axios": "^0.20.0",
"clipboard": "^2.0.6",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"dayjs": "^1.9.1", "dayjs": "^1.9.1",
"js-cookie": "^3.0.0-rc.1", "js-cookie": "^3.0.0-rc.1",
@ -34,13 +35,13 @@
"body-parser": "^1.19.0", "body-parser": "^1.19.0",
"chalk": "^4.1.0", "chalk": "^4.1.0",
"chokidar": "^3.4.2", "chokidar": "^3.4.2",
"compression-webpack-plugin": "^6.0.2", "compression-webpack-plugin": "^6.0.3",
"eslint": "^7.10.0", "eslint": "^7.11.0",
"eslint-plugin-prettier": "^3.1.4", "eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-vue": "^7.0.1", "eslint-plugin-vue": "^7.0.1",
"filemanager-webpack-plugin": "^3.0.0-alpha.1", "filemanager-webpack-plugin": "^3.0.0-alpha.1",
"less": "^3.13.1-alpha.1", "less": "^3.13.1-alpha.1",
"less-loader": "^7.0.1", "less-loader": "^7.0.2",
"lint-staged": "^10.4.0", "lint-staged": "^10.4.0",
"prettier": "^2.1.2", "prettier": "^2.1.2",
"stylelint": "^13.7.2", "stylelint": "^13.7.2",

28
src/views/login/index.vue
View File

@ -4,9 +4,8 @@
<a-col :xs="24" :md="11" :sm="24" :lg="14" :xl="14"></a-col> <a-col :xs="24" :md="11" :sm="24" :lg="14" :xl="14"></a-col>
<a-col :xs="24" :sm="24" :md="12" :lg="9" :xl="6"> <a-col :xs="24" :sm="24" :md="12" :lg="9" :xl="6">
<div class="login-container-form"> <div class="login-container-form">
<div class="login-container-title"> <div class="login-container-hello">hello!</div>
{{ title }} <div class="login-container-title">欢迎来到 {{ title }}</div>
</div>
<a-form :model="form" @submit="handleSubmit" @submit.prevent> <a-form :model="form" @submit="handleSubmit" @submit.prevent>
<a-form-item> <a-form-item>
<a-input v-model:value="form.username" placeholder="Username"> <a-input v-model:value="form.username" placeholder="Username">
@ -34,17 +33,17 @@
> >
登录 登录
</a-button> </a-button>
<div class="login-container-tips">
基于vue{{ dependencies['vue'] }}
+ ant-design-vue
{{ dependencies['ant-design-vue'] }}开发
</div>
</a-form-item> </a-form-item>
</a-form> </a-form>
</div> </div>
</a-col> </a-col>
<a-col :xs="24" :md="11" :sm="24" :lg="14" :xl="14"></a-col> <a-col :xs="24" :md="11" :sm="24" :lg="14" :xl="14"></a-col>
</a-row> </a-row>
<div class="login-container-tips">
基于vue{{ dependencies['vue'] }}
+ ant-design-vue
{{ dependencies['ant-design-vue'] }}开发
</div>
</div> </div>
</template> </template>
<script> <script>
@ -123,15 +122,20 @@
border-radius: 10px; border-radius: 10px;
box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06); box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
} }
&-hello {
font-size: 32px;
color: #fff;
}
&-title { &-title {
margin-bottom: 30px; margin-bottom: 30px;
font-size: 28px; font-size: 20px;
font-weight: bold;
color: #fff; color: #fff;
text-align: center;
} }
&-tips { &-tips {
margin-top: 10px; position: fixed;
bottom: @vab-margin;
width: 100%;
height: 40px;
color: rgba(255, 255, 255, 0.856); color: rgba(255, 255, 255, 0.856);
text-align: center; text-align: center;
} }