提交 008bf4f4 authored 作者: GOD_ZYX's avatar GOD_ZYX

登录页面 部分完成

上级 ed375bb8
const path = require('path')
const webpack = require('webpack')
const projectName = process.env.PROJECT_NAME
const $GLOBAL = {
isDev: process.env.NODE_ENV === 'development',
serverPort: process.env.SERVER_PORT || 8000,
RootPath: path.resolve(__dirname, '../'),
templatePath: path.resolve(__dirname, ('../client/project/' + projectName + '/index.html')),
icoPath: 'client/project/' + projectName + '/assets/favicon.ico',
EntryPath: path.resolve(__dirname, ('../client/project/' + projectName + '/main.js')),
OutputPath: path.resolve(__dirname, '../client-dist'),
JsName: 'resources/[name].[chunkhash:8].js',
cssName: 'resources/[name].[contenthash:12].css',
ResPath: 'resources/[name].[hash:8].[ext]',
BaseConfig: {},
webConf: {
'devDomain': 'http://api.ezijing.com',
'apiBaseURL': '/api'
}
}
$GLOBAL.BaseConfig = {
target: 'web',
entry: $GLOBAL.EntryPath,
output: {
filename: $GLOBAL.JsName,
path: $GLOBAL.OutputPath,
publicPath: '/'
},
resolve: {
alias: {
'@services': path.resolve(__dirname, '../client/components/services')
}
},
module: {
rules: [
{
test: /\.(vue|js|jsx)$/,
loader: 'eslint-loader',
exclude: /node_modules/,
enforce: 'pre'
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /(\.jsx|\.js)$/,
exclude: /(node_modules)|(dist)/,
loader: 'babel-loader',
options: {
presets: ['env', 'stage-2'],
plugins: [
'transform-vue-jsx',
'syntax-dynamic-import'
]
}
},
{
test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/,
use: {
loader: 'url-loader',
options: {
limit: 4096,
name: $GLOBAL.ResPath
}
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: $GLOBAL.ResPath
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: $GLOBAL.ResPath
}
}
]
},
plugins: [
new webpack.DefinePlugin({
'webConf': JSON.stringify($GLOBAL.webConf)
})
],
externals: {
'CKEDITOR': 'window.CKEDITOR'
}
}
module.exports = $GLOBAL
const webpack = require('webpack')
const WebpackMerge = require('webpack-merge')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const AutoPrefixer = require('autoprefixer')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const cssnano = require('cssnano')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const $GLOBAL = require('./webpack.base.conf')
let config = null
if ($GLOBAL.isDev) {
config = WebpackMerge($GLOBAL.BaseConfig, {
mode: 'development',
devtool: '#cheap-module-eval-source-map',
output: {
filename: '[name].js'
},
devServer: {
port: $GLOBAL.serverPort,
overlay: {
errors: true
},
historyApiFallback: {
index: '/index.html'
},
proxy: {
'/api': {
target: $GLOBAL.webConf.devDomain,
secure: false,
changeOrigin: true,
followRedirects: true,
headers: {
'Referer': $GLOBAL.webConf.devDomain
},
pathRewrite: {
}
}
},
open: true,
hot: true
},
module: {
rules: [{
test: /\.(sa|sc|c)ss$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
AutoPrefixer({
'browsers': [
'cover 99.5%',
'ie 6-8',
'since 2015',
'last 10 iOS versions'
]
})
]
}
},
'sass-loader'
]
}]
},
plugins: [
new VueLoaderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: $GLOBAL.templatePath,
inject: true,
favicon: $GLOBAL.icoPath
})
]
})
} else {
config = WebpackMerge($GLOBAL.BaseConfig, {
mode: 'production',
entry: {
app: $GLOBAL.EntryPath,
vendor: ['vue']
},
module: {
rules: [{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
}
},
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
AutoPrefixer({
'browsers': [
'cover 99.5%',
'ie 6-8',
'since 2015',
'last 10 iOS versions'
]
})
]
}
},
'sass-loader'
]
}]
},
plugins: [
new CleanWebpackPlugin(['client-dist'], { root: $GLOBAL.RootPath }),
new MiniCssExtractPlugin({
chunkFilename: $GLOBAL.cssName
}),
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: $GLOBAL.templatePath,
inject: true,
favicon: $GLOBAL.icoPath,
minify: {
removeComments: true,
collapseWhitespace: true
}
})
],
optimization: {
runtimeChunk: {
name: 'manifest'
},
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true
}),
new OptimizeCSSAssetsPlugin({
cssProcessor: cssnano,
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: true
})
],
splitChunks: {
chunks: 'async',
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
name: false,
cacheGroups: {
vendor: {
name: 'vendor',
chunks: 'initial',
priority: -10,
reuseExistingChunk: false,
test: /node_modules\/(.*)\.js/
}
}
}
}
})
}
module.exports = config
...@@ -36,6 +36,18 @@ ...@@ -36,6 +36,18 @@
<div class="fontclass">.el-icon-self-album</div> <div class="fontclass">.el-icon-self-album</div>
</li> </li>
<li>
<i class="icon selfAllIcon el-icon-self-mima"></i>
<div class="name">密码</div>
<div class="fontclass">.el-icon-self-mima</div>
</li>
<li>
<i class="icon selfAllIcon el-icon-self-character"></i>
<div class="name">人物</div>
<div class="fontclass">.el-icon-self-character</div>
</li>
<li> <li>
<i class="icon selfAllIcon el-icon-self-statistic"></i> <i class="icon selfAllIcon el-icon-self-statistic"></i>
<div class="name">statistic</div> <div class="name">statistic</div>
......
...@@ -59,6 +59,22 @@ ...@@ -59,6 +59,22 @@
<div class="fontclass">#el-icon-self-album</div> <div class="fontclass">#el-icon-self-album</div>
</li> </li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#el-icon-self-mima"></use>
</svg>
<div class="name">密码</div>
<div class="fontclass">#el-icon-self-mima</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#el-icon-self-character"></use>
</svg>
<div class="name">人物</div>
<div class="fontclass">#el-icon-self-character</div>
</li>
<li> <li>
<svg class="icon" aria-hidden="true"> <svg class="icon" aria-hidden="true">
<use xlink:href="#el-icon-self-statistic"></use> <use xlink:href="#el-icon-self-statistic"></use>
......
...@@ -56,6 +56,18 @@ ...@@ -56,6 +56,18 @@
<div class="code">&amp;#xe734;</div> <div class="code">&amp;#xe734;</div>
</li> </li>
<li>
<i class="icon selfAllIcon">&#xe607;</i>
<div class="name">密码</div>
<div class="code">&amp;#xe607;</div>
</li>
<li>
<i class="icon selfAllIcon">&#xe62e;</i>
<div class="name">人物</div>
<div class="code">&amp;#xe62e;</div>
</li>
<li> <li>
<i class="icon selfAllIcon">&#xe601;</i> <i class="icon selfAllIcon">&#xe601;</i>
<div class="name">statistic</div> <div class="name">statistic</div>
......
@font-face {font-family: "selfAllIcon"; @font-face {font-family: "selfAllIcon";
src: url('iconfont.eot?t=1543911477384'); /* IE9*/ src: url('iconfont.eot?t=1544429223466'); /* IE9*/
src: url('iconfont.eot?t=1543911477384#iefix') format('embedded-opentype'), /* IE6-IE8 */ src: url('iconfont.eot?t=1544429223466#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
url('iconfont.ttf?t=1543911477384') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('iconfont.ttf?t=1544429223466') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1543911477384#selfAllIcon') format('svg'); /* iOS 4.1- */ url('iconfont.svg?t=1544429223466#selfAllIcon') format('svg'); /* iOS 4.1- */
} }
.selfAllIcon { .selfAllIcon {
...@@ -23,5 +23,9 @@ ...@@ -23,5 +23,9 @@
.el-icon-self-album:before { content: "\e734"; } .el-icon-self-album:before { content: "\e734"; }
.el-icon-self-mima:before { content: "\e607"; }
.el-icon-self-character:before { content: "\e62e"; }
.el-icon-self-statistic:before { content: "\e601"; } .el-icon-self-statistic:before { content: "\e601"; }
...@@ -32,6 +32,12 @@ Created by iconfont ...@@ -32,6 +32,12 @@ Created by iconfont
<glyph glyph-name="album" unicode="&#59188;" d="M256 448m-64 0a2 2 0 1 0 128 0 2 2 0 1 0-128 0ZM714.688 640 181.312 640C116.64 640 64 587.36 64 522.688l0-405.376C64 52.64 116.64 0 181.312 0l533.376 0C779.36 0 832 52.64 832 117.312L832 522.688C832 587.36 779.36 640 714.688 640zM768 117.312C768 87.904 744.096 64 714.688 64L181.312 64C151.936 64 128 87.904 128 117.312L128 522.688C128 552.064 151.936 576 181.312 576l533.376 0C744.096 576 768 552.064 768 522.688L768 117.312zM842.688 768 256 768C238.336 768 224 753.664 224 736s14.336-32 32-32l586.688 0C872.096 704 896 680.064 896 650.688L896 256c0-17.696 14.304-32 32-32s32 14.304 32 32L960 650.688C960 715.36 907.36 768 842.688 768zM672.64 447.264c-129.056 0-143.936-72.672-152.832-116.096-7.2-35.168-10.4-39.968-28.64-42.88-34.976-5.568-44-0.192-58.912 8.8-15.456 9.312-36.672 22.08-77.952 23.168C227.616 322.88 194.112 172.16 192.704 165.76c-3.712-17.28 7.264-34.304 24.544-38.016 2.272-0.512 4.544-0.704 6.752-0.704 14.752 0 28 10.24 31.264 25.248 0.224 1.056 23.232 104.032 95.488 104.032 0.64 0 1.28 0 1.92-0.032 24.352-0.608 33.632-6.208 46.496-13.984 24.032-14.464 48.352-25.76 102.08-17.184 64.192 10.272 74.432 60.192 81.184 93.216 8.32 40.512 13.312 64.928 90.144 64.928 17.696 0 32 14.336 32 32S690.304 447.264 672.64 447.264z" horiz-adv-x="1024" /> <glyph glyph-name="album" unicode="&#59188;" d="M256 448m-64 0a2 2 0 1 0 128 0 2 2 0 1 0-128 0ZM714.688 640 181.312 640C116.64 640 64 587.36 64 522.688l0-405.376C64 52.64 116.64 0 181.312 0l533.376 0C779.36 0 832 52.64 832 117.312L832 522.688C832 587.36 779.36 640 714.688 640zM768 117.312C768 87.904 744.096 64 714.688 64L181.312 64C151.936 64 128 87.904 128 117.312L128 522.688C128 552.064 151.936 576 181.312 576l533.376 0C744.096 576 768 552.064 768 522.688L768 117.312zM842.688 768 256 768C238.336 768 224 753.664 224 736s14.336-32 32-32l586.688 0C872.096 704 896 680.064 896 650.688L896 256c0-17.696 14.304-32 32-32s32 14.304 32 32L960 650.688C960 715.36 907.36 768 842.688 768zM672.64 447.264c-129.056 0-143.936-72.672-152.832-116.096-7.2-35.168-10.4-39.968-28.64-42.88-34.976-5.568-44-0.192-58.912 8.8-15.456 9.312-36.672 22.08-77.952 23.168C227.616 322.88 194.112 172.16 192.704 165.76c-3.712-17.28 7.264-34.304 24.544-38.016 2.272-0.512 4.544-0.704 6.752-0.704 14.752 0 28 10.24 31.264 25.248 0.224 1.056 23.232 104.032 95.488 104.032 0.64 0 1.28 0 1.92-0.032 24.352-0.608 33.632-6.208 46.496-13.984 24.032-14.464 48.352-25.76 102.08-17.184 64.192 10.272 74.432 60.192 81.184 93.216 8.32 40.512 13.312 64.928 90.144 64.928 17.696 0 32 14.336 32 32S690.304 447.264 672.64 447.264z" horiz-adv-x="1024" />
<glyph glyph-name="mima" unicode="&#58887;" d="M791.366 436.93l-459.174 0.791c-0.186 61.936-16.847 157.926 36.027 216.192 32.142 35.52 86.326 72.068 144.127 72.068 85.395 0 149.246-64.412 180.166-144.126 9.009-22.992 16.936-35.38 36.037-36.037 47.899-1.45 44.986 49.075 36.029 72.067C719.914 732.97 636.118 798.047 512.346 798.047c-84.12 0-130.475-17.265-180.154-72.065-76.009-83.746-72.259-219.151-72.067-288.26l-26.795-0.791c-25.045 0-45.273-20.034-45.273-44.667v-378.249c0-24.774 20.269-44.755 45.273-44.755h557.99c25.009 0 45.273 19.989 45.273 44.755V392.263c0.046 24.678-20.218 44.667-45.227 44.667zM765.68 77.65c0-9.966-3.476-18.514-10.58-25.52-7.045-7.051-15.56-10.58-25.517-10.58H296.362c-9.966 0-18.472 3.478-25.475 10.58-7.051 7.049-10.624 15.553-10.624 25.52V330.365c0 19.878 16.166 36.054 36.098 36.054h433.212c19.932 0 36.107-16.176 36.107-36.054V77.65z" horiz-adv-x="1024" />
<glyph glyph-name="character" unicode="&#58926;" d="M921.087359-94.72000000000003v35.2A410.24 410.24 0 0 1 661.887359 320a307.2 307.2 0 1 1-300.8 0 410.24 410.24 0 0 1-256-380.8v-35.2H101.887359a32 32 0 0 1 32-32 32 32 0 0 1 32 32v34.56a345.6 345.6 0 0 0 691.2 0v-35.2a31.36 31.36 0 0 1 31.36-30.08 32 32 0 0 1 32.64 32zM270.207359 588.8A241.28 241.28 0 1 0 511.487359 347.52 241.28 241.28 0 0 0 270.207359 588.8z" horiz-adv-x="1024" />
<glyph glyph-name="statistic" unicode="&#58881;" d="M838.33 236.26800000000003c0-33.422-21.592-54.388-54.39-54.388H240.059c-32.796 0-54.388 20.966-54.388 54.388 0 0-0.409 482.507-0.409 516.961h653.477c0-54.85-0.409-516.96-0.409-516.96zM76.892 807.345v-54.389h54.389v-516.689c0-64.45 44.707-108.776 108.776-108.776h163.166L294.447-62.870000000000005l81.909 0.353 108.45 190.006h54.388l108.45-190.006 81.909-0.353-108.777 190.36h163.166c64.069 0 108.776 44.326 108.776 108.776v516.69h54.389v54.39H76.893v-0.001z m271.942-543.883c15.038 0 27.194 12.156 27.194 27.194V399.432c0 15.011-12.156 27.195-27.194 27.195s-27.195-12.183-27.195-27.195v-108.776c0-15.038 12.156-27.194 27.195-27.194z m326.33 0c15.039 0 27.195 12.156 27.195 27.194V535.403c0 15.011-12.156 27.195-27.195 27.195s-27.194-12.183-27.194-27.195v-244.747c0-15.038 12.156-27.194 27.194-27.194z m-163.165 0c15.039 0 27.194 12.156 27.194 27.194v326.33c0 15.011-12.155 27.195-27.194 27.195s-27.194-12.183-27.194-27.195v-326.33c0-15.038 12.155-27.194 27.194-27.194z" horiz-adv-x="1024" /> <glyph glyph-name="statistic" unicode="&#58881;" d="M838.33 236.26800000000003c0-33.422-21.592-54.388-54.39-54.388H240.059c-32.796 0-54.388 20.966-54.388 54.388 0 0-0.409 482.507-0.409 516.961h653.477c0-54.85-0.409-516.96-0.409-516.96zM76.892 807.345v-54.389h54.389v-516.689c0-64.45 44.707-108.776 108.776-108.776h163.166L294.447-62.870000000000005l81.909 0.353 108.45 190.006h54.388l108.45-190.006 81.909-0.353-108.777 190.36h163.166c64.069 0 108.776 44.326 108.776 108.776v516.69h54.389v54.39H76.893v-0.001z m271.942-543.883c15.038 0 27.194 12.156 27.194 27.194V399.432c0 15.011-12.156 27.195-27.194 27.195s-27.195-12.183-27.195-27.195v-108.776c0-15.038 12.156-27.194 27.195-27.194z m326.33 0c15.039 0 27.195 12.156 27.195 27.194V535.403c0 15.011-12.156 27.195-27.195 27.195s-27.194-12.183-27.194-27.195v-244.747c0-15.038 12.156-27.194 27.194-27.194z m-163.165 0c15.039 0 27.194 12.156 27.194 27.194v326.33c0 15.011-12.155 27.195-27.194 27.195s-27.194-12.183-27.194-27.195v-326.33c0-15.038 12.155-27.194 27.194-27.194z" horiz-adv-x="1024" />
......
<template> <template>
<div class="bg-container"> <el-row type="flex" justify="center">
<el-card class="box-card"> <el-col :xs="24" :sm="24" :md="15" :lg="15" :xl="15">
<el-form ref="setAccountform" :model="setAccount" :rules="accountRules"> <el-form ref="setAccountform" :model="setAccount" :rules="accountRules">
<div class="title">清华大学企业工作台</div> <el-form-item prop="user">
<el-form-item label="账号" prop="user"> <el-input class="self-input" v-model="setAccount.user" type="text" placeholder="手机号" @keyup.enter.native="onSubmitSetAccount">
<el-input class="self-input" v-model="setAccount.user" type="text" placeholder="请输入账号" @keyup.enter.native="onSubmitSetAccount"></el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="密码" prop="pwd"> <el-form-item prop="pwd">
<el-input v-model="setAccount.pwd" type="password" placeholder="请输入密码" @keyup.enter.native="onSubmitSetAccount"></el-input> <el-input v-model="setAccount.pwd" type="password" placeholder="短信验证码" @keyup.enter.native="onSubmitSetAccount">
</el-form-item> </el-input>
<el-button type="primary" @click="onSubmitSetAccount">保存</el-button> </el-form-item>
<div class="forgin-pwd"><span>忘记密码</span></div> <el-button type="primary" class="login-btn" @click="onSubmitSetAccount">登录</el-button>
</el-form> <div class="text">
</el-card> <span class="code-login">
<div class="test-text"><span>测试账号:admin 测试密码:123456</span></div> <router-link class="router-link-class" active-class="router-link-active-class" :to="{ name: 'normalLogin' }">密码登录</router-link>
</div> </span>
<span class="forget-pwd">
<router-link class="router-link-class" active-class="router-link-active-class" :to="{ name: 'forgetPwd' }">忘记密码</router-link>
</span>
</div>
</el-form>
</el-col>
</el-row>
</template> </template>
<script> <script>
...@@ -55,8 +62,3 @@ ...@@ -55,8 +62,3 @@
} }
} }
</script> </script>
<style lang="scss" scoped>
/* 由于压缩后 样式覆盖不上,直接采用 css方式 */
@import './dialogLogin.css';
</style>
.bg-container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; }
.bg-container .box-card { position: absolute; top: 50%; left: 50%; width: 460px; border-radius: 10px; transform: translate(-50%, -50%); }
.bg-container .box-card.is-always-shadow { box-shadow: 0px 2px 50px rgba(204, 204, 204, 0.34); }
.bg-container .box-card .el-form { padding: 30px 30px 0 30px; }
.bg-container .box-card .el-form .title { font-size: 22px; line-height: 40px; color: #FF6525; text-align: center; }
.bg-container .box-card .el-form .el-form-item__label { padding-top: 10px; line-height: 18px; }
.bg-container .box-card .el-form .el-input .el-input__inner { border-radius: 0; border-left: none; border-right: none; border-top: none; }
.bg-container .box-card .el-form .el-button { margin-top: 20px; width: 100%; }
.bg-container .box-card .el-form .forgin-pwd { font-size: 14px; line-height: 50px; text-align: center; color: #c0c4cc; }
.bg-container .box-card .el-form .forgin-pwd span { display: inline-block; cursor: pointer; }
.bg-container .box-card .el-form .forgin-pwd span:hover { color: #FF6525; }
.bg-container .test-text { position: absolute; top: 77%; width: 100%; transform: translateY(-50%); font-size: 12px; line-height: 50px; text-align: center; color: #c0c4cc; }
<template>
<el-steps :active="2" align-center>
<el-step title="步骤1"></el-step>
<el-step title="步骤2"></el-step>
<el-step title="步骤3"></el-step>
</el-steps>
</template>
.p-con { position: relative; width: 100%; height: 100%; background: #981838; color: #535353; text-align: center; }
/* 头部 */
.p-con .hd { position: absolute; top: 0; left: 0; right: 0; background: #ffffff; }
.p-con .hd img { display: block; margin: 0 auto; padding: 30px 0 10px 0; }
.p-con .hd .txt { margin: 0 auto; padding: 0 0 20px 0; letter-spacing: 5px; font-size: 32px; font-weight: 700; }
/* 底部 */
.p-con .ft { position: fixed; bottom: 0; left: 0; right: 0; padding: 40px 0 10px 0; background: #e5e5e5; }
.p-con .ft .num { font-size: 14px; line-height: 1.5; }
.p-con .ft .time { font-size: 14px; line-height: 1.5; }
.p-con .ft .txt { padding: 10px; color: #898989; font-size: 12px; line-height: 1.5; }
/* 中间部分 */
.p-con .bd { position: relative; width: 800px; padding: 145px 0 130px 0; margin: 0 auto; height: 100%; min-height: 600px; box-sizing: border-box; }
.p-con .bd .router-link-class { color: #ffffff; text-decoration: none; }
/* normal 登录 */
.p-con .bd .top50 { position: absolute; top: 50%; width: 100%; transform: translateY(-50%); }
.p-con .bd .top50 img { display: inline-block; text-align: center; }
.p-con .bd .top50 .login-btn { margin-top: 20px; background: #ffffff; border-color: #ffffff; color: #000; width: 100%; }
.p-con .bd .top50 .text { color: #e5e5e5; font-size: 16px; line-height: 1.5; overflow: hidden; }
.p-con .bd .top50 .text .code-login { float: left; cursor: pointer; }
.p-con .bd .top50 .text .forget-pwd { float: right; cursor: pointer; }
<template>
<div class="p-con">
<div class="hd">
<img src="./img/logo.png" alt="logo">
<div class="txt">在线学习系统</div>
</div>
<div class="bd">
<div class="top50">
<router-view></router-view>
</div>
</div>
<div class="ft">
<div class="num">学习平台服务电话:010-62793299</div>
<div class="time">服务时间:9:00-18:00</div>
<div class="txt">Copyright © 2017 Zijing Education. All rights reserved. 清控紫荆(北京)教育科技股份有限公司 京ICP证150431号 京公网安备 11010802023681号</div>
</div>
</div>
</template>
<style lang="scss" scoped>
/* 由于压缩后 样式覆盖不上,直接采用 css方式 */
@import './login.css';
</style>
<template>
<el-row>
<el-col class="hidden-sm-and-down" :md="13" :lg="13" :xl="13">
<img src="../img/login-left-bg.png" alt="左侧-sofia logo">
</el-col>
<el-col :xs="24" :sm="24" :md="11" :lg="11" :xl="11">
<el-form ref="setAccountform" :model="setAccount" :rules="accountRules">
<el-form-item prop="user">
<el-input class="self-input" v-model="setAccount.user" type="text" placeholder="手机/邮箱" @keyup.enter.native="onSubmitSetAccount">
<i slot="prefix" class="el-input__icon el-icon-self-character"></i>
</el-input>
</el-form-item>
<el-form-item prop="pwd">
<el-input v-model="setAccount.pwd" type="password" placeholder="密码" @keyup.enter.native="onSubmitSetAccount">
<i slot="prefix" class="el-input__icon el-icon-self-mima"></i>
</el-input>
</el-form-item>
<el-button type="primary" class="login-btn" @click="onSubmitSetAccount">登录</el-button>
<div class="text">
<span class="code-login">
<router-link class="router-link-class" active-class="router-link-active-class" :to="{ name: 'codeLogin' }">验证码登录</router-link>
</span>
<span class="forget-pwd">
<router-link class="router-link-class" active-class="router-link-active-class" :to="{ name: 'forgetPwd' }">忘记密码</router-link>
</span>
</div>
</el-form>
</el-col>
</el-row>
</template>
<script>
export default {
data () {
return {
setAccount: {},
accountRules: {
'user': [
{ required: true, message: '请输入账号', trigger: 'blur' }
],
'pwd': [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
}
},
beforeMount () {
},
methods: {
onSubmitSetAccount () {
this.$refs['setAccountform'].validate((valid) => {
if (valid) {
if (this.setAccount.user === 'admin' && this.setAccount.pwd === '123456') {
/* 跳转 */
this.$router.push({ path: '/app/news/news-list' })
} else {
this.$message.error('用户名或密码错误')
}
/* 重置密码 */
this.$refs['setAccountform'].resetFields()
} else {
this.$message.error('请检查输入项,确认无误后,重新提交')
return false
}
})
}
}
}
</script>
/* 改变主题色变量 */ /* 改变主题色变量 */
$--color-primary: #F2730B; $--color-primary: #b49441;
/* 改变 icon 字体路径变量,必需 */ /* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts'; $--font-path: '~element-ui/lib/theme-chalk/fonts';
/* 引入element-ui对应scss文件,重新编译 */ /* 引入element-ui对应scss文件,重新编译 */
...@@ -20,7 +20,12 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts'; ...@@ -20,7 +20,12 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
* { * {
font-family: Microsoft YaHei, PingFang SC, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', Neue Frutiger,Frutiger Next,Frutiger,Myriad Pro,Myriad,San Francisco, Segoe UI, Helvetica Neue, Helvetica, Arial, Verdana, Source Han Sans CN, Lantinghei SC, Hiragino Sans GB, Wenquanyi Micro Hei, sans-serif; font-family: Microsoft YaHei, PingFang SC, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', Neue Frutiger,Frutiger Next,Frutiger,Myriad Pro,Myriad,San Francisco, Segoe UI, Helvetica Neue, Helvetica, Arial, Verdana, Source Han Sans CN, Lantinghei SC, Hiragino Sans GB, Wenquanyi Micro Hei, sans-serif;
} }
html {
height: 100%;
}
body { body {
height: 100%;
width: 100%;
background: #eee; background: #eee;
/* tab菜单与内容间距20px */ /* tab菜单与内容间距20px */
.el-tab-pane { .el-tab-pane {
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="origin" name="referrer"> <meta content="origin" name="referrer">
<title>平安医保科技后台</title> <title>紫荆教育MBA学习系统</title>
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no"> <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
</head> </head>
<body> <body>
......
...@@ -4,7 +4,30 @@ import error404 from '../components/errorPage/404.vue' ...@@ -4,7 +4,30 @@ import error404 from '../components/errorPage/404.vue'
export default [ export default [
{ path: '/', redirect: '/login' }, { path: '/', redirect: '/login' },
{ path: '/login', component: () => import('../../../components/login/dialogLogin.vue') }, {
path: '/login',
redirect: '/login/index',
component: () => import('../../../components/login/login.vue'),
children: [
{
path: 'index',
name: 'normalLogin',
component: () => import('../../../components/login/normal/normal.vue')
},
{
path: 'code',
name: 'codeLogin',
component: () => import('../../../components/login/code/code.vue')
},
{
path: 'forget',
name: 'forgetPwd',
component: () => import('../../../components/login/forget/forget.vue')
}
]
},
/* App 内登录页面未找到时 - 指向 */
{ path: '/login/*', redirect: '/login/index' },
{ {
path: '/app', path: '/app',
component: App, component: App,
......
This source diff could not be displayed because it is too large. You can view the blob instead.
差异被折叠。
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论