Commit b2ca0f90 authored by 潘自豪's avatar 潘自豪

Initial commit

parents
{
"presets": [
["env", { "modules": false }],
"stage-2"
],
"plugins": ["transform-runtime"],
"comments": false,
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": [ "istanbul" ]
}
}
}
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
.DS_Store
.idea/
node_modules/
dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
"plugins": {
// to edit target browsers: use "browserlist" field in package.json
"autoprefixer": {}
}
}
# shld-databoard-ui
> A Vue.js multipage project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
```
For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
require('./check-versions')()
process.env.NODE_ENV = 'production'
var ora = require('ora')
var rm = require('rimraf')
var path = require('path')
var chalk = require('chalk')
var webpack = require('webpack')
var config = require('../config')
var webpackConfig = require('./webpack.prod.conf')
var spinner = ora('building for production...')
spinner.start()
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
webpack(webpackConfig, function (err, stats) {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n\n')
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
})
})
var chalk = require('chalk')
var semver = require('semver')
var packageConfig = require('../package.json')
var shell = require('shelljs')
function exec (cmd) {
return require('child_process').execSync(cmd).toString().trim()
}
var versionRequirements = [
{
name: 'node',
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
},
]
if (shell.which('npm')) {
versionRequirements.push({
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
})
}
module.exports = function () {
var warnings = []
for (var i = 0; i < versionRequirements.length; i++) {
var mod = versionRequirements[i]
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' +
chalk.red(mod.currentVersion) + ' should be ' +
chalk.green(mod.versionRequirement)
)
}
}
if (warnings.length) {
console.log('')
console.log(chalk.yellow('To use this template, you must update following to modules:'))
console.log()
for (var i = 0; i < warnings.length; i++) {
var warning = warnings[i]
console.log(' ' + warning)
}
console.log()
process.exit(1)
}
}
/* eslint-disable */
require('eventsource-polyfill')
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
hotClient.subscribe(function (event) {
if (event.action === 'reload') {
window.location.reload()
}
})
require('./check-versions')()
var config = require('../config')
if (!process.env.NODE_ENV) {
process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}
var opn = require('opn')
var path = require('path')
var express = require('express')
var webpack = require('webpack')
var proxyMiddleware = require('http-proxy-middleware')
var webpackConfig = require('./webpack.dev.conf')
// default port where dev server listens for incoming traffic
var port = process.env.PORT || config.dev.port
// automatically open browser, if not set will be false
var autoOpenBrowser = !!config.dev.autoOpenBrowser
// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware
var proxyTable = config.dev.proxyTable
var app = express()
var compiler = webpack(webpackConfig)
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: true
})
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: () => {}
})
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
hotMiddleware.publish({ action: 'reload' })
cb()
})
})
// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
var options = proxyTable[context]
if (typeof options === 'string') {
options = { target: options }
}
app.use(proxyMiddleware(options.filter || context, options))
})
// handle fallback for HTML5 history API
app.use(require('connect-history-api-fallback')())
// serve webpack bundle output
app.use(devMiddleware)
// enable hot-reload and state-preserving
// compilation error display
app.use(hotMiddleware)
// serve pure static assets
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'))
var uri = 'http://localhost:' + port
var _resolve
var readyPromise = new Promise(resolve => {
_resolve = resolve
})
console.log('> Starting dev server...')
devMiddleware.waitUntilValid(() => {
console.log('> Listening at ' + uri + '\n')
// when env is testing, don't need open it
if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
opn(uri)
}
_resolve()
})
var server = app.listen(port)
module.exports = {
ready: readyPromise,
close: () => {
server.close()
}
}
var path = require('path')
var fs = require("fs")
var HtmlWebpackPlugin = require('html-webpack-plugin')
var moduleList //缓存多页面模块列表
var moduleRootPath = './src/module' //模块根目录(这个可以根据自己的需求命名)
/**
* 获取js入口数组
*/
exports.getEntries = function getEntries(){
//缓存js入口数组
var entries = {}
//初始化模块列表
this.getModuleList()
//变量模块列表
console.log("*********************************** moduleList ***********************************")
console.log(moduleList)
moduleList.forEach(function (module) {
if (module.moduleID != "" && module.moduleJS != ""){
entries[module.moduleID] = module.moduleJS
}
})
console.log("*********************************** entries ***********************************")
console.log(entries)
return entries
}
/**
* 获取多页面模块列表
* @returns {模块的信息集合}
*/
exports.getModuleList = function getModuleList() {
//判断是否为空,不为空则直接返回
if (moduleList){
return moduleList
}else {//为空则读取列表
moduleList = new Array();
readDirSync(moduleRootPath, "")
console.log("*********************************** moduleList ***********************************")
console.log(moduleList)
return moduleList
}
}
/**
* 获取dev的Html模板集合
* @returns {dev的Html模板集合}
*/
exports.getDevHtmlWebpackPluginList = function getDevHtmlWebpackPluginList(){
console.log("*********************************** devHtmlWebpackPluginList ***********************************")
//缓存dev的Html模板集合
var devHtmlWebpackPluginList = []
//获取多页面模块集合
var moduleList = this.getModuleList()
//遍历生成模块的HTML模板
moduleList.forEach(function (mod) {
//生成配置
var conf = {
filename: mod.moduleID+".html",
template: mod.moduleHTML,
chunks: [mod.moduleID],
inject: true
}
console.log(conf)
//添加HtmlWebpackPlugin对象
devHtmlWebpackPluginList.push(new HtmlWebpackPlugin(conf))
})
return devHtmlWebpackPluginList
}
/**
* 获取prod的Html模板集合
* @returns {prod的Html模板集合}
*/
exports.getProdHtmlWebpackPluginList = function getProdHtmlWebpackPluginList(){
console.log("*********************************** prodHtmlWebpackPluginList ***********************************")
//缓存dev的Html模板集合
var prodHtmlWebpackPluginList = []
//获取多页面模块集合
var moduleList = this.getModuleList()
//遍历生成模块的HTML模板
moduleList.forEach(function (mod) {
//生成配置
var conf = {
filename: mod.moduleID+".html",
template: mod.moduleHTML,
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency',
chunks: ['manifest','vendor',mod.moduleID]
}
console.log(conf)
//添加HtmlWebpackPlugin对象
prodHtmlWebpackPluginList.push(new HtmlWebpackPlugin(conf))
})
return prodHtmlWebpackPluginList
}
/**
* 深度遍历目录,并整理多页面模块
* @param path 需要变量的路径
* @param moduleName 模块名称
*/
function readDirSync(path,moduleName){
//缓存模块对象
var module = {moduleID:"",moduleHTML:"",moduleJS:""}
//获取当前模块ID
var moduleID = path.replace(moduleRootPath+"/","")
if (path == moduleRootPath){
moduleID = ""
}
module.moduleID = moduleID
//获取目录下所有文件及文件夹
var pa = fs.readdirSync(path)
pa.forEach(function(ele,index){
var info = fs.statSync(path+"/"+ele)
if(info.isDirectory()){
// console.log("dir: "+ele)
readDirSync(path+"/"+ele, ele)
}else{
//判断当前模块的html是否存在
if (moduleName+".html" == ele){
module.moduleHTML = path+"/"+ele
}
//判断当前模块的js是否存在
if (moduleName+".js" == ele){
module.moduleJS = path+"/"+ele
}
// console.log("file: "+ele)
}
})
//判断模块是否真实(可能只是个分级目录)
if ((module.moduleID != "" && module.moduleHTML != "") || (module.moduleID != "" && module.moduleJS != "")){
moduleList.push(module)
}
}
var path = require('path')
var config = require('../config')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
exports.assetsPath = function (_path) {
var assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
exports.cssLoaders = function (options) {
options = options || {}
var cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
var loaders = [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
var output = []
var loaders = exports.cssLoaders(options)
for (var extension in loaders) {
var loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
}
var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'
module.exports = {
loaders: utils.cssLoaders({
sourceMap: isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap,
extract: isProduction
})
}
var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
//引入多页面支持
var multipageHelper = require('./multipage-helper')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: multipageHelper.getEntries(), //设置入口集合
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.(js|mjs)$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'),resolve('/node_modules/js-base64')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
//引入多页面支持
var multipageHelper = require('./multipage-helper')
// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
module.exports = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
// cheap-module-eval-source-map is faster for development
devtool: '#cheap-module-eval-source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
// new HtmlWebpackPlugin({
// filename: 'index.html',
// template: 'index.html',
// inject: true
// }),
new FriendlyErrorsPlugin()
]
})
//添加Html模板集合
Array.prototype.push.apply(module.exports.plugins,multipageHelper.getDevHtmlWebpackPluginList())
var path = require('path')
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var CopyWebpackPlugin = require('copy-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
//引入多页面支持
var multipageHelper = require('./multipage-helper')
var env = config.build.env
var webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true
})
},
devtool: config.build.productionSourceMap ? '#source-map' : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: true
}),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true
}
}),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
// new HtmlWebpackPlugin({
// filename: config.build.index,
// template: 'index.html',
// inject: true,
// minify: {
// removeComments: true,
// collapseWhitespace: true,
// removeAttributeQuotes: true
// // more options:
// // https://github.com/kangax/html-minifier#options-quick-reference
// },
// // necessary to consistently work with multiple chunks via CommonsChunkPlugin
// chunksSortMode: 'dependency'
// }),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module, count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor']
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
if (config.build.productionGzip) {
var CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
if (config.build.bundleAnalyzerReport) {
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig
//添加Html模板集合
Array.prototype.push.apply(module.exports.plugins,multipageHelper.getProdHtmlWebpackPluginList())
var merge = require('webpack-merge')
var prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
})
// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/assets/dist/',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env: require('./dev.env'),
port: 8081,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://localhost:8080', // 测试
changeOrigin: true, // 改变源(是否跨域)
pathRewrite: {
'^/api': '/'
}
}
},
cssSourceMap: false,
}
}
module.exports = {
NODE_ENV: '"production"'
}
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"name": "shld-databoard-ui",
"version": "1.0.0",
"description": "",
"author": "",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js"
},
"dependencies": {
"axios": "^1.4.0",
"jquery": "^3.2.1",
"js-base64": "^3.7.5",
"js-md5": "^0.7.3",
"materialize-css": "^0.98.2",
"vue": "^2.3.3",
"vue-axios": "^3.5.2",
"vue-router": "^2.3.1"
},
"devDependencies": {
"autoprefixer": "^6.7.2",
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^1.1.3",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"opn": "^4.0.2",
"optimize-css-assets-webpack-plugin": "^1.3.0",
"ora": "^1.2.0",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"url-loader": "^0.5.8",
"vue-loader": "^12.1.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.3.3",
"webpack": "^2.6.1",
"webpack-bundle-analyzer": "^2.2.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1638954700372" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2514" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M672 400h80v352h-80z" fill="#5C546A" p-id="2515"></path><path d="M960 784H64c-17.674 0-32-14.326-32-32v-32h960v32c0 17.674-14.326 32-32 32z" fill="#5C546A" p-id="2516"></path><path d="M984.062 494.918l-155.766-217.16A16.016 16.016 0 0 0 816 272h-64c-8.844 0-16 7.164-16 16v432c0 8.836 7.156 16 16 16h224c26.468 0 48-21.532 48-48v-145.762c0-23.726-17.296-43.484-39.938-47.32z" fill="#FF4F19" p-id="2517"></path><path d="M893.404 288c20.66 0 39.004 13.22 45.536 32.822l45.122 174.096s-115.088-23.386-148.982-32.68C814.286 456.538 800 437.56 800 416v-128h93.404z" fill="#5C546A" p-id="2518"></path><path d="M800 304c-8.844 0-16-7.164-16-16v-76.118c0-8.54-3.328-16.578-9.376-22.632l-17.938-17.938c-6.25-6.25-6.25-16.376 0-22.626s16.376-6.25 22.626 0l17.938 17.938c12.094 12.102 18.75 28.172 18.75 45.258V288c0 8.836-7.156 16-16 16z" fill="#8A8895" p-id="2519"></path><path d="M656 208H48c-26.468 0-48 21.532-48 48v432c0 26.468 21.532 48 48 48h640c8.844 0 16-7.164 16-16V256c0-26.468-21.532-48-48-48z" fill="#527991" p-id="2520"></path><path d="M0 688c0 26.468 21.532 48 48 48h640c8.844 0 16-7.164 16-16v-112H0v80z" fill="#5D647F" p-id="2521"></path><path d="M496 816h-128c-17.674 0-32-14.326-32-32v-32c0-17.674 14.326-32 32-32h128c17.674 0 32 14.326 32 32v32c0 17.674-14.326 32-32 32z" fill="#8A8895" p-id="2522"></path><path d="M384 784c-4.156 0-8.328-1.766-11.36-4.64-2.89-3.04-4.64-7.204-4.64-11.36 0-4.164 1.75-8.32 4.64-11.36 6.078-5.922 16.796-5.922 22.718 0 2.876 3.04 4.64 7.196 4.64 11.36 0 4.156-1.766 8.32-4.796 11.36-2.89 2.874-7.046 4.64-11.202 4.64z" fill="#5C546A" p-id="2523"></path><path d="M968 608c-13.254 0-24 10.746-24 24s10.746 24 24 24h24v-48h-24z" fill="#FFD100" p-id="2524"></path><path d="M192 768m-112 0a112 112 0 1 0 224 0 112 112 0 1 0-224 0Z" fill="#5C546A" p-id="2525"></path><path d="M192 768m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#8A8895" p-id="2526"></path><path d="M832 768m-112 0a112 112 0 1 0 224 0 112 112 0 1 0-224 0Z" fill="#5C546A" p-id="2527"></path><path d="M832 768m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#8A8895" p-id="2528"></path><path d="M992 608h32v48h-32z" fill="#FFFFFF" p-id="2529"></path><path d="M944 272h-192a16 16 0 0 0-16 16v16h208c8.844 0 16-7.164 16-16s-7.156-16-16-16z" fill="#E7001E" p-id="2530"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1638953527303" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2335" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M921.6 486.4c-6.4 0-16-3.2-22.4-6.4L512 176 121.6 480c-16 12.8-38.4 9.6-51.2-6.4-12.8-16-9.6-38.4 6.4-51.2L489.6 99.2c12.8-9.6 32-9.6 44.8 0l412.8 323.2c16 12.8 19.2 35.2 6.4 51.2-9.6 9.6-19.2 12.8-32 12.8z" fill="#19AA8D" p-id="2336"></path><path d="M220.8 953.6c-19.2 0-35.2-16-35.2-35.2V364.8c0-19.2 16-35.2 35.2-35.2s35.2 12.8 35.2 35.2v553.6c0 19.2-16 35.2-35.2 35.2zM800 953.6c-19.2 0-35.2-16-35.2-35.2V364.8c0-19.2 16-35.2 35.2-35.2 19.2 0 35.2 16 35.2 35.2v553.6c0 19.2-16 35.2-35.2 35.2z" fill="#19AA8D" p-id="2337"></path><path d="M924.8 956.8H102.4c-9.6 0-19.2-9.6-19.2-19.2s9.6-19.2 19.2-19.2h819.2c9.6 0 19.2 9.6 19.2 19.2s-6.4 19.2-16 19.2zM652.8 540.8h-291.2c-9.6 0-19.2-9.6-19.2-19.2s9.6-19.2 19.2-19.2h291.2c9.6 0 19.2 9.6 19.2 19.2s-9.6 19.2-19.2 19.2z" fill="#19AA8D" p-id="2338"></path><path d="M467.2 873.6h-76.8c-9.6 0-16-6.4-16-16v-76.8c0-9.6 6.4-16 16-16h76.8c9.6 0 16 6.4 16 16v76.8c0 9.6-6.4 16-16 16zM636.8 873.6h-76.8c-9.6 0-16-6.4-16-16v-76.8c0-9.6 6.4-16 16-16h76.8c9.6 0 16 6.4 16 16v76.8c0 9.6-6.4 16-16 16zM467.2 704h-76.8c-9.6 0-16-6.4-16-16v-76.8c0-9.6 6.4-16 16-16h76.8c9.6 0 16 6.4 16 16v76.8c0 6.4-6.4 16-16 16z" fill="#F8AC59" p-id="2339"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1638953743932" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3962" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M855.87 590.58l80.95 214.18-255.38 148.4-446.17-257.59 255.37-148.41z" fill="#A06944" opacity=".3" p-id="3963"></path><path d="M88.52 145.63l47.19-27.42 288.92-54.39-47.2 27.43z" fill="#B27850" p-id="3964"></path><path d="M377.43 91.25l303.69 396.52-1.34 472.41-592.6-342.14 1.34-472.41z" fill="#FDCDAA" p-id="3965"></path><path d="M377.43 91.25l47.2-27.43 303.69 396.53-47.2 27.42z" fill="#EFA875" p-id="3966"></path><path d="M681.12 487.77l47.2-27.42-1.34 472.4-47.2 27.43z" fill="#BA825B" p-id="3967"></path><path d="M548.44 604.33l-0.77 272.88-367.85-212.38 0.77-272.88z" fill="#6A56CD" p-id="3968"></path><path d="M549.87 639.66l-0.17 60.04-370.55-213.94 0.17-60.03z" fill="#2C4B89" opacity=".2" p-id="3969"></path><path d="M549.87 545.92l-0.17 60.03-370.55-213.93 0.17-60.04zM549.87 606.18l-0.17 60.04-370.55-213.94 0.17-60.03z" fill="#9AADDD" p-id="3970"></path><path d="M337.74 645.15l-0.32 113.61-86.5-49.94 0.32-113.61zM478.36 725.5l-0.32 113.62-86.5-49.94 0.32-113.62z" fill="#A0633A" opacity=".3" p-id="3971"></path><path d="M317.65 631.76l-0.32 113.61-86.5-49.94 0.32-113.62zM458.27 712.11l-0.32 113.61-86.5-49.94 0.32-113.61z" fill="#FFA05E" p-id="3972"></path><path d="M465.07 313.57c18.38 10.61 33.21 36.3 33.15 57.42-0.06 21.08-14.99 29.58-33.37 18.97-18.34-10.59-33.21-36.3-33.15-57.38 0.06-21.12 15.02-29.6 33.37-19.01zM558.73 397.64c3.71 2.14 6.7 7.32 6.69 11.58-0.01 4.25-3.02 5.97-6.73 3.83-3.7-2.14-6.7-7.32-6.69-11.57 0.01-4.27 3.03-5.98 6.73-3.84z" fill="#FFFFFF" p-id="3973"></path><path d="M565.44 426.86c5.76 3.32 10.4 11.37 10.39 17.99-0.02 6.6-4.69 9.27-10.45 5.94-5.75-3.32-10.4-11.37-10.39-17.97 0.01-6.62 4.7-9.28 10.45-5.96z" fill="#FFFFFF" p-id="3974"></path></svg>
\ No newline at end of file
import fetch from './fetch'
//获取验证码配置
export const captchaConfig = () => fetch('/auth/required-captcha?type=web', {});
//获取是否忘记密码配置
export const passwordRecover = () => fetch('/auth/get-authentication-config', {}, 'POST');
//获取验证码图片
export const captcha = () => fetch('/auth/get-captcha', {}, 'POST');
//登录
export const userLogin = (username, pass, captchaSign, verificationcode, captchaTimestamp) => fetch('/api/auth/login', {
username: username,
password: pass,
captcha: {
sign: captchaSign,
captcha: verificationcode,
timestamp: captchaTimestamp
}
}, 'POST');
export default async (url = '', data = {}, type = 'GET', method = 'fetch') => {
let baseUrl = '';
if (process.env.NODE_ENV == 'development') {
baseUrl = '/api';
} else if (process.env.NODE_ENV == 'production') {
}
type = type.toUpperCase();
url = baseUrl + url;
if (type == 'GET') {
let dataStr = ''; //数据拼接字符串
Object.keys(data).forEach(key => {
dataStr += key + '=' + data[key] + '&';
})
if (dataStr !== '') {
dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
url = url + '?' + dataStr;
}
}
if (window.fetch && method == 'fetch') {
let requestConfig = {
credentials: 'include',
method: type,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
mode: "cors",
cache: "force-cache"
}
if (type == 'POST') {
Object.defineProperty(requestConfig, 'body', {
value: JSON.stringify(data)
})
}
try {
const response = await fetch(url, requestConfig);
const responseJson = await response.json();
return responseJson
} catch (error) {
throw new Error(error)
}
} else {
return new Promise((resolve, reject) => {
let requestObj;
if (window.XMLHttpRequest) {
requestObj = new XMLHttpRequest();
} else {
requestObj = new ActiveXObject;
}
let sendData = '';
if (type == 'POST') {
sendData = JSON.stringify(data);
}
requestObj.open(type, url, true);
requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
requestObj.send(sendData);
requestObj.onreadystatechange = () => {
if (requestObj.readyState == 4) {
if (requestObj.status == 200) {
let obj = requestObj.response
if (typeof obj !== 'object') {
obj = JSON.parse(obj);
}
resolve(obj)
} else {
reject(requestObj)
}
}
}
})
}
}
.page {
background-color: rgba(0, 10, 50, 1.000000);
position: relative;
height: 1080.00px;
width: 100%;
min-width: 1920px;
overflow: hidden;
background: url(./img/SketchPng1d2d7c804f3d192d29ad3750c138064d493e3f502f79253a3bfa266fbdda7488.png) 100% no-repeat;
background-size: 100% 100%
}
.head {
height: 10%;
}
.head_content {
background: url(./img/SketchPng5fda9a9add36a51f8fa99e5a1426c6a0630dbdfb68a8e0ea5fbbd1c1392d5e28.png) 0px 0px no-repeat;
background-position: center;
width: 100%;
height: 100%;
}
.text_date {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 20.00px;
letter-spacing: 1.6666666269302368px;
text-align: left;
margin: 1% 0 0 6%
}
.text_time {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 20.00px;
letter-spacing: 1.6666666269302368px;
text-align: left;
margin: 1% 0 0 1%
}
.text_week {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 20.00px;
letter-spacing: 1.6666666269302368px;
text-align: left;
margin: 1% 0 0 1%
}
.text_title {
text-shadow: 0px 2px 6px rgba(121, 179, 255, 0.600000);
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 40.00px;
letter-spacing: 8px;
font-family: AlimamaShuHeiTi;
text-align: center;
white-space: nowrap;
margin: 1% 0 0 19%
}
.text_car {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 20.00px;
letter-spacing: 1.6666666269302368px;
font-family: Helvetica;
text-align: left;
margin: 1% 0 0 20%
}
/**边框**/
.l_t_line {
width: 5px;
height: 24px;
left: -3px;
top: -3px;
}
.t_l_line {
height: 5px;
width: 26px;
left: -3px;
top: -3px;
}
.t_line_box {
position: absolute;
width: 100%;
height: 100%;
}
.t_line_box i {
background-color: #4788fb;
box-shadow: 0px 0px 10px #4788fb;
position: absolute;
}
.t_r_line {
height: 5px;
width: 26px;
right: -3px;
top: -3px;
}
.r_t_line {
width: 5px;
height: 24px;
right: -3px;
top: -3px;
}
.l_b_line {
width: 5px;
height: 24px;
left: -3px;
bottom: -3px;
}
.b_l_line {
height: 5px;
width: 26px;
left: -3px;
bottom: -3px;
}
.r_b_line {
width: 5px;
height: 24px;
right: -3px;
bottom: -3px;
}
.b_r_line {
height: 5px;
width: 26px;
right: -3px;
bottom: -3px;
}
.middle > div {
box-sizing: border-box;
border: 1px solid #2C58A6;
position: relative;
box-shadow: 0 0 10px #2C58A6;
}
.middle {
height: 45%;
justify-content: center;
display: flex;
}
.content {
float: left;
}
.trade_left {
margin-bottom: 50px;
width: 20%;
}
.trade_middle {
margin-bottom: 50px;
width: 52%;
margin-left: 1%;
}
.trade_right {
margin-bottom: 50px;
width: 20%;
margin-left: 1%;
}
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
<template>
<div class="page">
<div class="head">
<div class="head_content">
<span class="text_date">2023-08-01</span>
<span class="text_time">17:18:29</span>
<span class="text_week">星期三</span>
<span class="text_title">联达供应链数据大屏</span>
<span class="text_car">车辆:482</span>
</div>
</div>
<div class="middle">
<div class="content trade_left" style="cursor: pointer;">
<!--左上边框-->
<div class="t_line_box">
<i class="t_l_line"></i>
<i class="l_t_line"></i>
</div>
<!--右上边框-->
<div class="t_line_box">
<i class="t_r_line"></i>
<i class="r_t_line"></i>
</div>
<!--左下边框-->
<div class="t_line_box">
<i class="l_b_line"></i>
<i class="b_l_line"></i>
</div>
<!--右下边框-->
<div class="t_line_box">
<i class="r_b_line"></i>
<i class="b_r_line"></i>
</div>
<div class="main_title">
<img src="img/t_1.png" alt="">
湖南省货运收入
</div>
<div id="chart_1" class="chart" style="width:100%;height: 280px;">
</div>
</div>
<div class="content trade_middle"><!--左上边框-->
<div class="t_line_box">
<i class="t_l_line"></i>
<i class="l_t_line"></i>
</div>
<!--右上边框-->
<div class="t_line_box">
<i class="t_r_line"></i>
<i class="r_t_line"></i>
</div>
<!--左下边框-->
<div class="t_line_box">
<i class="l_b_line"></i>
<i class="b_l_line"></i>
</div>
<!--右下边框-->
<div class="t_line_box">
<i class="r_b_line"></i>
<i class="b_r_line"></i>
</div>
<div class="main_title">
<img src="img/t_1.png" alt="">
湖南省货运收入
</div>
<div id="chart_1" class="chart" style="width:100%;height: 280px;"></div>
</div>
<div class="content trade_right"><!--左上边框-->
<div class="t_line_box">
<i class="t_l_line"></i>
<i class="l_t_line"></i>
</div>
<!--右上边框-->
<div class="t_line_box">
<i class="t_r_line"></i>
<i class="r_t_line"></i>
</div>
<!--左下边框-->
<div class="t_line_box">
<i class="l_b_line"></i>
<i class="b_l_line"></i>
</div>
<!--右下边框-->
<div class="t_line_box">
<i class="r_b_line"></i>
<i class="b_r_line"></i>
</div>
<div class="main_title">
<img src="img/t_1.png" alt="">
湖南省货运收入
</div>
<div id="chart_1" class="chart" style="width:100%;height: 280px;"></div>
</div>
</div>
<div class="middle">
<div class="content trade_left" style="cursor: pointer;">
<!--左上边框-->
<div class="t_line_box">
<i class="t_l_line"></i>
<i class="l_t_line"></i>
</div>
<!--右上边框-->
<div class="t_line_box">
<i class="t_r_line"></i>
<i class="r_t_line"></i>
</div>
<!--左下边框-->
<div class="t_line_box">
<i class="l_b_line"></i>
<i class="b_l_line"></i>
</div>
<!--右下边框-->
<div class="t_line_box">
<i class="r_b_line"></i>
<i class="b_r_line"></i>
</div>
<div class="main_title">
<img src="img/t_1.png" alt="">
湖南省货运收入
</div>
<div id="chart_1" class="chart" style="width:100%;height: 280px;"></div>
</div>
<div class="content trade_middle"><!--左上边框-->
<div class="t_line_box">
<i class="t_l_line"></i>
<i class="l_t_line"></i>
</div>
<!--右上边框-->
<div class="t_line_box">
<i class="t_r_line"></i>
<i class="r_t_line"></i>
</div>
<!--左下边框-->
<div class="t_line_box">
<i class="l_b_line"></i>
<i class="b_l_line"></i>
</div>
<!--右下边框-->
<div class="t_line_box">
<i class="r_b_line"></i>
<i class="b_r_line"></i>
</div>
<div class="main_title">
<img src="img/t_1.png" alt="">
湖南省货运收入
</div>
<div id="chart_1" class="chart" style="width:100%;height: 280px;"></div>
</div>
<div class="content trade_right"><!--左上边框-->
<div class="t_line_box">
<i class="t_l_line"></i>
<i class="l_t_line"></i>
</div>
<!--右上边框-->
<div class="t_line_box">
<i class="t_r_line"></i>
<i class="r_t_line"></i>
</div>
<!--左下边框-->
<div class="t_line_box">
<i class="l_b_line"></i>
<i class="b_l_line"></i>
</div>
<!--右下边框-->
<div class="t_line_box">
<i class="r_b_line"></i>
<i class="b_r_line"></i>
</div>
<div class="main_title">
<img src="img/t_1.png" alt="">
湖南省货运收入
</div>
<div id="chart_1" class="chart" style="width:100%;height: 280px;"></div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
constants: {}
};
},
methods: {}
};
</script>
<style scoped lang="css" src="./assets/index.css"/>
This source diff could not be displayed because it is too large. You can view the blob instead.
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './login.vue'
import md5 from 'js-md5';
Vue.prototype.$md5 = md5;
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
components: {App}
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>开尔维</title>
<!-- Google MD图标 -->
<link href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow-y: hidden;
}
</style>
</html>
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './index.vue'
import router from './router/index_router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
<template>
<router-view></router-view>
</template>
<script>
window.$ = window.jQuery = require('materialize-css/node_modules/jquery/dist/jquery.js')
require('materialize-css')
export default {
name: 'app',
// 页面加载之前
created() {
},
// 页面加载后
mounted() {
console.log(this.$router)
this.$router.push("/index");
}
}
</script>
<style>
@import "../../../node_modules/materialize-css/bin/materialize.css";
#app {
}
/*侧边栏头部背景*/
.side-nav .userView .background img {
width: 100%;
}
/*导航名字*/
.nav-name {
margin: 0 15px;
padding: 0;
font-size: 16px;
}
/*右侧导航栏图标*/
.nav-wrapper .right li a i {
padding: 0;
margin: 0;
font-size: 16px;
}
/*右侧导航栏文字*/
.nav-wrapper .right li a span {
margin-left: 8px;
}
/*为大屏幕的侧边栏提供空间*/
header, main, footer {
padding-left: 300px;
}
/*主干区域*/
main {
position: fixed;
width: 100%;
height: calc(100% - 64px);
z-index: -1;
}
@media only screen and (max-width: 992px) {
header, main, footer {
padding-left: 0;
}
}
</style>
import Vue from 'vue'
import Router from 'vue-router'
import Main from '../index.vue'
import index from '../../databoard/index.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'index',
component: Main
},
{
path: '/index',
name: 'index',
component: index
},
]
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<!-- Google MD图标 -->
</head>
<body>
<div id="app"></div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow-y: hidden;
}
</style>
</html>
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './login.vue'
import md5 from 'js-md5';
Vue.prototype.$md5 = md5;
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
components: {App}
})
<template>
<div class="custom-logwireLogin-Container">
<div class="form-wrapper">
<!-- 登录表单 -->
<form id="loginForm" class="login-form">
<div id="error">{{errorMsg}}</div>
<div class="form-container">
<div class="loginForm-title"></div>
<div class="form-item">
<div class="form-item-icon"><img src="../../assets/img/user_icon.png" alt=""></div>
<span class="separator"></span>
<input type="text" name="username" v-model="username" id="username" placeholder="请输入用户名">
</div>
<div class="form-item">
<div class="form-item-icon"><img src="../../assets/img/password_icon.png" alt=""></div>
<span class="separator"></span>
<input type="password" name="password" v-model="password" id="password" placeholder="请输入密码">
</div>
<div class="verificationcode" v-if="isCaptcha">
<input type="text" class="verificationcode" name="verificationcode" v-model="verificationcode"
placeholder="输入验证码">
<img v-bind:src="captchaImg" @click="getCaptcha()"/>
</div>
<div class="forget" v-if="passwordRecoverEnabled">
<span class="forget_txt"><a href="/#/passwordRecover"> 忘记密码</a></span>
</div>
<div class="form-item">
<button type="button" name="button" @click="login()" id="loginBtn" class="login-btn">登录</button>
<a id="res" style="display: none" href="/#"></a>
</div>
</div>
</form>
</div>
<!-- 登录背景图 -->
<div class="loginBG-content">
<img src="../../assets/img/login_bg.png" class="custom_image"/>
<!-- 动效部分 -->
<div class="animation-rect">
<img class="rect" src="../../assets/img/rect.png" alt="rect">
<img class="rect" src="../../assets/img/rect.png" alt="rect">
<img class="rect" src="../../assets/img/rect.png" alt="rect">
</div>
<!-- 线条渐变 -->
<div class="animation-line-1"><img src="../../assets/img/line.png" alt="line"></div>
<div class="animation-line-2"><img src="../../assets/img/line.png" alt="line"></div>
<div class="animation-line-3"><img src="../../assets/img/line.png" alt="line"></div>
<div class="animation-line-4"><img src="../../assets/img/line.png" alt="line"></div>
<div class="animation-line-5"><img src="../../assets/img/line.png" alt="line"></div>
<!-- Logo动画 -->
<div class="company-logo-outer">
<img class="company-logo" src="../../assets/img/logo_bg.png" alt="Logo背景">
<img class="company-logoText" src="../../assets/img/logo_text.png" alt="Logo文字">
<img class="company-logoBase" src="../../assets/img/logo_base.png" alt="Logo基座">
</div>
<!-- 向下传输 -->
<div class="transfer-down">
<div class="transfer-down-box"><img src="../../assets/img/leftBox.png" alt="向下传输"></div>
</div>
<!-- 向右传输 -->
<div class="transfer-right">
<div class="transfer-right-box"><img src="../../assets/img/rightBox.png" alt="向右传输"></div>
</div>
</div>
<!-- 登录页脚 -->
<div class="login-footer">
<span> &copy; 上海开尔唯国际物流有限公司
<a href="http://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="">沪ICP备16042816号-1</a>
</span>
</div>
</div>
</template>
<script>
window.$ = window.jQuery = require('materialize-css/node_modules/jquery/dist/jquery.js')
require('materialize-css')
import {Base64} from "js-base64";
import {captchaConfig, passwordRecover, captcha, userLogin} from "../api/apiList"
export default {
data() {
return {
errorMsg: '',
isCaptcha: false,
captchaImg: '',
passwordRecoverEnabled: false,
username: '',
password: '',
captchaSign: '',
verificationcode: '',
captchaTimestamp: ''
};
},
name: 'app',
// 页面加载之前
created() {
},
// 页面加载后
mounted() {
this.getConfig();
this.getCaptcha();
this.getPasswordRecoverEnabled();
},
methods: {
//获取是否验证码配置
getConfig() {
let res = captchaConfig();
res.then((data) => {
this.isCaptcha = data.data.required;
})
},
//获取是否忘记密码配置
getPasswordRecoverEnabled() {
let res = passwordRecover();
res.then((data) => {
this.passwordRecoverEnabled = data.data.passwordRecoverEnabled;
})
},
//获取验证码
getCaptcha() {
let res = captcha();
res.then((data) => {
this.captchaImg = "data:image/png;base64," + data.data.captcha;
this.captchaSign = data.data.sign;
this.captchaTimestamp = data.data.timestamp;
})
},
ascii_to_hex(str) {
var arr1 = [];
for (var n = 0, l = str.length; n < l; n++) {
var hex = Number(str.charCodeAt(n)).toString(16);
arr1.push(hex);
}
return arr1.join('');
},
login() {
let base64 = Base64.encode(this.password);
let pass = "{encrypted}" + this.ascii_to_hex(base64)
let res = userLogin(this.username, pass, this.captchaSign, this.verificationcode, this.captchaTimestamp);
res.then(data => {
console.log(data.messageType)
if ('success' == data.messageType) {
console.log(data)
if (data.data.forcePasswordReset == true) {
parent.window.location = "/#/ForcePasswordReset"
} else {
parent.window.location = "/";
}
} else {
this.errorMsg = data.message
this.getCaptcha();
}
})
}
},
}
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.custom-logwireLogin-Container {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
background: linear-gradient(45deg, #DFE2ED, #F7F7FA);
display: flex;
justify-content: center;
align-items: center;
}
.custom-logwireLogin-Container .loginBG-content {
width: 1644px;
height: 930px;
min-width: 1644px;
min-height: 930px;
overflow: hidden;
position: relative;
}
.custom-logwireLogin-Container .loginBG-content .custom_image {
width: 100%;
height: 100%;
}
.custom-logwireLogin-Container .loginBG-content .company-logo-outer {
width: 300px;
height: 300px;
position: absolute;
left: 620px;
top: 325px;
z-index: 1;
}
.custom-logwireLogin-Container .loginBG-content .company-logo-outer .company-logo {
position: absolute;
left: 144px;
top: 40px;
z-index: 0;
opacity: 0;
animation: rise 6s infinite linear;
}
@keyframes rise {
0% {
top: 165px;
}
25% {
top: 40px;
opacity: 1;
}
42% {
z-index: 1;
}
60% {
top: 40px;
opacity: 1;
z-index: 1;
}
100% {
opacity: 0;
z-index: 0;
}
}
.custom-logwireLogin-Container .loginBG-content .company-logo-outer .company-logoText {
position: absolute;
left: 150px;
top: 90px;
z-index: 2;
opacity: 0;
animation: L 6s infinite linear;
}
@keyframes L {
0% {
opacity: 0;
}
30% {
opacity: 0;
}
60% {
opacity: 1;
}
90% {
opacity: 0;
}
}
.custom-logwireLogin-Container .loginBG-content .company-logo-outer .company-logoBase {
position: absolute;
left: -32px;
top: 70px;
}
.custom-logwireLogin-Container .loginBG-content .animation-rect {
width: 70px;
height: 80px;
position: absolute;
left: 222px;
top: 450px;
}
.custom-logwireLogin-Container .loginBG-content .animation-rect .rect {
position: absolute;
opacity: 0.8;
bottom: 50%;
animation: rect 1.5s infinite linear;
}
@keyframes rect {
0% {
opacity: 0.8;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
opacity: 0;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
}
}
.custom-logwireLogin-Container .loginBG-content .animation-rect .rect:nth-child(2) {
bottom: 60%;
opacity: 0.6;
}
.custom-logwireLogin-Container .loginBG-content .animation-rect .rect:last-child {
bottom: 70%;
opacity: 0.4;
}
.custom-logwireLogin-Container .loginBG-content .animation-line-1,
.custom-logwireLogin-Container .loginBG-content .animation-line-2,
.custom-logwireLogin-Container .loginBG-content .animation-line-3,
.custom-logwireLogin-Container .loginBG-content .animation-line-4,
.custom-logwireLogin-Container .loginBG-content .animation-line-5 {
position: absolute;
animation: line 2.5s infinite linear;
}
@keyframes line {
0% {
opacity: 1;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
opacity: 0;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
}
}
.custom-logwireLogin-Container .loginBG-content .animation-line-1 {
left: 235px;
top: 275px;
}
.custom-logwireLogin-Container .loginBG-content .animation-line-2 {
left: 810px;
top: 235px;
}
.custom-logwireLogin-Container .loginBG-content .animation-line-3 {
left: 300px;
top: 800px;
}
.custom-logwireLogin-Container .loginBG-content .animation-line-4 {
left: 725px;
top: 700px;
}
.custom-logwireLogin-Container .loginBG-content .animation-line-5 {
left: 1010px;
top: 590px;
}
.custom-logwireLogin-Container .loginBG-content .transfer-down {
width: 150px;
height: 110px;
position: absolute;
left: 592px;
top: 395px;
overflow: hidden;
border-top-left-radius: 25%;
}
.custom-logwireLogin-Container .loginBG-content .transfer-down .transfer-down-box {
width: 150px;
height: 70px;
position: absolute;
left: -50%;
top: -34%;
animation: transferDown 3s infinite linear;
}
@keyframes transferDown {
0% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(35px, 20px, 0);
-moz-transform: translate3d(35px, 20px, 0);
-ms-transform: translate3d(35px, 20px, 0);
-o-transform: translate3d(35px, 20px, 0);
transform: translate3d(35px, 20px, 0);
}
}
.custom-logwireLogin-Container .loginBG-content .transfer-right {
width: 160px;
height: 115px;
position: absolute;
left: 838px;
top: 370px;
clip-path: polygon(0 0, 63% 0, 100% 28%, 100% 100%, 0 100%);
}
.custom-logwireLogin-Container .loginBG-content .transfer-right .transfer-right-box {
width: 150px;
height: 70px;
position: absolute;
left: -105%;
top: 8%;
animation: transferRight 5s infinite linear;
}
@keyframes transferRight {
0% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(70px, -40px, 0);
-moz-transform: translate3d(70px, -40px, 0);
-ms-transform: translate3d(70px, -40px, 0);
-o-transform: translate3d(70px, -40px, 0);
transform: translate3d(70px, -40px, 0);
}
}
.custom-logwireLogin-Container .form-wrapper {
width: 404px;
background: #FFFFFF;
box-shadow: 2px 3px 16px 0px rgba(0, 0, 0, 0.06);
border-radius: 8px;
padding: 35px 40px;
position: absolute;
z-index: 99;
top: 50%;
transform: translateY(-50%);
}
@media screen and (min-width: 1280px) {
.custom-logwireLogin-Container .form-wrapper {
right: 2%;
}
}
@media screen and (max-width: 1280px) {
.custom-logwireLogin-Container .form-wrapper {
right: 2%;
}
}
@media screen and (min-width: 1600px) {
.custom-logwireLogin-Container .form-wrapper {
right: 8%;
}
}
.custom-logwireLogin-Container .form-wrapper .login-form {
display: flex;
flex-direction: column;
height: 100%;
}
.custom-logwireLogin-Container .form-wrapper .login-form #error {
color: red;
position: absolute;
bottom: 105px;
left: 50%;
transform: translateX(-50%);
}
.custom-logwireLogin-Container .form-wrapper .login-form .loginForm-title {
text-shadow: 2px 3px 16px rgba(0, 0, 0, 0.06);
background-image: url('../../assets/img/cw_logo.png');
height: 30%;
width: 100%;
background-position: center;
background-repeat: space;
background-size: 163px;
}
.custom-logwireLogin-Container .form-wrapper .login-form .form-item {
margin: 16px 0;
height: 40px;
height: 42px;
background: #F3F4F8;
box-shadow: 2px 3px 16px 0px rgba(0, 0, 0, 0.06);
border-radius: 2px;
display: flex;
align-items: center;
}
.custom-logwireLogin-Container .form-wrapper .login-form .form-item .separator {
width: 1px;
height: 10px;
/*box-shadow: 2px 3px 16px 0px rgba(0, 0, 0, 0.06);*/
/*border-left: 2px solid #CCCCCC;*/
}
.custom-logwireLogin-Container .form-wrapper .login-form .form-item input {
border: none;
width: 100%;
height: 100%;
background: #F3F4F8;
padding-left: 8px;
}
.custom-logwireLogin-Container .form-wrapper .login-form .form-item input:focus-visible {
outline: none !important;
}
.custom-logwireLogin-Container .form-wrapper .login-form .form-item input:internal-autofill-selected {
background: #F3F4F8 !important;
}
.custom-logwireLogin-Container .form-wrapper .login-form .form-footer {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.custom-logwireLogin-Container .form-wrapper .login-form .verificationcode {
height: 42px;
display: flex;
align-items: center;
border: none;
}
.custom-logwireLogin-Container .form-wrapper .login-form .verificationcode input {
padding-left: 15px;
width: 215px;
}
.custom-logwireLogin-Container .form-wrapper .login-form .verificationcode img {
padding-left: 12px;
}
.custom-logwireLogin-Container .form-wrapper .login-form .forget {
margin: 10px;
font-size: 10pt;
display: flex;
justify-content: flex-end;
}
.custom-logwireLogin-Container .form-wrapper .login-form .forget span a {
cursor: pointer;
color: black;
text-decoration: none;
}
.custom-logwireLogin-Container .form-wrapper .login-form .forget span a:hover {
color: red;
}
.custom-logwireLogin-Container .form-wrapper .login-form input {
margin: 16px 0;
height: 42px;
background: #F3F4F8;
align-items: center;
}
.custom-logwireLogin-Container .form-wrapper .login-form .form-item .login-btn {
width: 100%;
height: 42px;
font-size: 18px;
font-weight: 400;
line-height: 42px;
color: #FFFFFF;
margin-bottom: 5px;
box-shadow: 2px 3px 16px 0px rgba(0, 0, 0, 0.06);
border-radius: 2px;
border: none;
background: #203993;
cursor: pointer;
}
.custom-logwireLogin-Container .form-wrapper .other-login-method {
font-size: 16px;
margin-top: 10%;
display: flex;
align-items: center;
flex-direction: column;
}
.custom-logwireLogin-Container .form-wrapper .other-login-method .other-method-title {
display: flex;
align-items: center;
}
.custom-logwireLogin-Container .form-wrapper .other-login-method .other-method-title .separator {
width: 8px;
box-shadow: 2px 3px 16px 0px rgba(0, 0, 0, 0.06);
border-top: 2px solid #434343;
}
.custom-logwireLogin-Container .form-wrapper .other-login-method .other-login-btn {
cursor: pointer;
display: flex;
justify-content: center;
}
.custom-logwireLogin-Container .login-footer {
position: absolute;
bottom: 5%;
left: 50%;
z-index: 99;
transform: translateX(-50%);
font-size: 12px;
font-weight: 400;
color: #262626;
line-height: 17px;
white-space: nowrap;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment