Skip to content

B
banManager
Commit 4b2f612b authored by 余苗苗's avatar 余苗苗
Browse files
Options

set merge

parent acb0de8c
Hide whitespace changes
Inline Side-by-side
Showing with 91104 additions and 19341 deletions
.babelrc deleted 100644 → 0
View file @ acb0de8c
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}
.editorconfig deleted 100644 → 0
View file @ acb0de8c
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
.gitignore deleted 100644 → 0
View file @ acb0de8c
.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
.postcssrc.js deleted 100644 → 0
View file @ acb0de8c
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {}
}
}
README.md deleted 100644 → 0
View file @ acb0de8c
# bandmanager
> A Vue.js 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 a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
account/account.css 0 → 100644
View file @ 4b2f612b
.login{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: url(./../static/images/1200.png);
background-size:100% 100%;
}
.login .login-header{
height: 64px;
background: #ffffff;
line-height: 64px;
position: absolute;top: 0;
left: 0;right: 0;
}
.login .login-header .login-title{
font-size:28px;
font-weight:400;
color: #333333;
}
.login .login-header .login-title:nth-child(1){
margin-left: 16%;margin-right: 10px;
}
.login .login-header .login-title:nth-child(2){
position: relative;
padding-left: 15px
}
.login .login-header .login-title:nth-child(2):before{
position: absolute;
content: '';
left: 0;
top: 5px;
bottom: 0;
width: 2px;
background: #ececec;
}
.login-content .login-box{
width: 400px;
height: 500px;
border: 20px solid #AAD2F2;
position: absolute;
top: 20%;
/*margin-top: -250px;*/
right: 20%;
background: #ffffff;
box-sizing: border-box;
}
.login-content .login-box{
padding: 0 40px;
}
.login-content .login-box h2{
font-size: 24px;
color: #333333;
margin-top: 60px;
}
.login-content .login-box p{
font-size: 18px;
color: #666666;
margin: 10px 0;
}
.login-content .login-box .code{
width: 84px;
height: 40px;
margin: auto;
border-radius: 5px;
background-image: url(./../static/images/login-code.png);
background-size: 100% 100%;
}
.login-content .login-box .change-text{
color: #5B76D1;
font-size: 14px;
height: 40px;
line-height: 40px;
text-align: center;
}
.login .login-content img{
width: 100%
}
.login .form-bt{
margin-top: 20px;
}
.login .form-bt button{
width: 100%
}
.login .el-form-item{
margin-bottom: 10px !important;
}
.login .el-form-item__error{
display: none;
}
.login .login-footer{
font-size: 12px;
height: 64px;
line-height: 64px;
text-align: center;
position: absolute;
left: 0;
right: 0;
bottom: 0;
background:#ffffff;
}
.login-box:hover{
box-shadow:0px 0px 13px 0px rgba(59, 47, 216, 0.98);
}
\ No newline at end of file
account/login.html 0 → 100644
View file @ 4b2f612b
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="./../static/css/main.css">
<link rel="stylesheet" href="./account.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1195086_awxmw28nttf.css">
</head>
<body>
<div id="login" class="login">
<div class="login-header">
<span class="login-title">扳手工单中心后台管理系统</span>
<span class="login-title">欢迎登录</span>
</div>
<div class="login-content">
<!-- <img src="./../static/images/login-bj.png" alt="" > -->
<div class="login-box">
<el-form :model="form" :rules="rules" ref="form1" label-width="0" class="inputword" >
<h2>登陆账号</h2>
<p>账号：</p>
<el-form-item prop="name" style=" " >
<el-input v-model='form.name' placeholder='请输入用户账号'></el-input>
</el-form-item>
<p>密码：</p>
<el-form-item prop="password" style=" " >
<el-input v-model='form.password' type="password" placeholder='请输入密码'></el-input>
</el-form-item>
<p>验证码：</p>
<el-row :gutter="0">
<el-col :span='12' >
<el-form-item prop="code" style=" " >
<el-input v-model='form.code' placeholder='请输入验证码'></el-input>
</el-form-item>
</el-col>
<el-col :span='8' >
<div class="code"></div>
</el-col>
<el-col :span='4' >
<div class="change-text cursor">换一组</div>
</el-col>
</el-row>
</el-form>
<div class="form-bt">
<el-button type="primary" class="firstbackgroud_blue firstborder_blue" @click="saveFun('form1')">登录</el-button>
</div>
</div>
</div>
<div class="login-footer">
CopyRight @ 扳手工单中心 2019 - 2020
</div>
</div>
</body>
<!-- 先引入 Vue -->
<script src="./../static/js/vue.js"></script>
<script src="./../static/js/jquery.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#login',
data: function() {
return {
form:{
name:'',password:'',code:''
},
rules:{
name:[{required: true, message: '请输入用户账号', trigger: 'blur' }],
password:[{required: true, message: '请输入密码', trigger: 'blur' }],
code:[{required: true, message: '请输入验证码', trigger: 'blur' }],
}
}
},
methods:{
saveFun(formName){
const self = this;
self.$refs[formName].validate((valid) => {
if (valid) {
//提交表单
window.location.href = '../main/index.html'
} else {
return false;
}
});
},
}
})
</script>
</html>
\ No newline at end of file
build/build.js deleted 100644 → 0
View file @ acb0de8c
'use strict'
require('./check-versions')()
process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
const spinner = ora('building for production...')
spinner.start()
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
webpack(webpackConfig, (err, stats) => {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
chunks: false,
chunkModules: false
}) + '\n\n')
if (stats.hasErrors()) {
console.log(chalk.red(' Build failed with errors.\n'))
process.exit(1)
}
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'
))
})
})
build/check-versions.js deleted 100644 → 0
View file @ acb0de8c
'use strict'
const chalk = require('chalk')
const semver = require('semver')
const packageConfig = require('../package.json')
const shell = require('shelljs')
function exec (cmd) {
return require('child_process').execSync(cmd).toString().trim()
}
const 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 () {
const warnings = []
for (let i = 0; i < versionRequirements.length; i++) {
const 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 (let i = 0; i < warnings.length; i++) {
const warning = warnings[i]
console.log(' ' + warning)
}
console.log()
process.exit(1)
}
}
build/utils.js deleted 100644 → 0
View file @ acb0de8c
'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')
exports.assetsPath = function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [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) {
const output = []
const loaders = exports.cssLoaders(options)
for (const extension in loaders) {
const loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
}
exports.createNotifierCallback = () => {
const notifier = require('node-notifier')
return (severity, errors) => {
if (severity !== 'error') return
const error = errors[0]
const filename = error.file && error.file.split('!').pop()
notifier.notify({
title: packageConfig.name,
message: severity + ': ' + error.name,
subtitle: filename || '',
icon: path.join(__dirname, 'logo.png')
})
}
}
build/vue-loader.conf.js deleted 100644 → 0
View file @ acb0de8c
'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap
module.exports = {
loaders: utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: isProduction
}),
cssSourceMap: sourceMapEnabled,
cacheBusting: config.dev.cacheBusting,
transformToRequire: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href'
}
}
build/webpack.base.conf.js deleted 100644 → 0
View file @ acb0de8c
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
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$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}
build/webpack.dev.conf.js deleted 100644 → 0
View file @ acb0de8c
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool,
// these devServer options should be customized in /config/index.js
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
module.exports = new Promise((resolve, reject) => {
portfinder.basePort = process.env.PORT || config.dev.port
portfinder.getPort((err, port) => {
if (err) {
reject(err)
} else {
// publish the new Port, necessary for e2e tests
process.env.PORT = port
// add port to devServer config
devWebpackConfig.devServer.port = port
// Add FriendlyErrorsPlugin
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
},
onErrors: config.dev.notifyOnErrors
? utils.createNotifierCallback()
: undefined
}))
resolve(devWebpackConfig)
}
})
})
build/webpack.prod.conf.js deleted 100644 → 0
View file @ acb0de8c
'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const env = require('../config/prod.env')
const webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true,
usePostCSS: true
})
},
devtool: config.build.productionSourceMap ? config.build.devtool : 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 UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
// Setting the following option to `false` will not extract CSS from codesplit chunks.
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
allChunks: true,
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { 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'
}),
// keep module.id stable when vendor modules does not change
new webpack.HashedModuleIdsPlugin(),
// enable scope hoisting
new webpack.optimize.ModuleConcatenationPlugin(),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
// 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',
minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
if (config.build.productionGzip) {
const 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) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig
config/dev.env.js deleted 100644 → 0
View file @ acb0de8c
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})
config/index.js deleted 100644 → 0
View file @ acb0de8c
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// 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
}
}
config/prod.env.js deleted 100644 → 0
View file @ acb0de8c
'use strict'
module.exports = {
NODE_ENV: '"production"'
}
new/cooperate/index.html → cooperate/index.html
View file @ 4b2f612b
......@@ -6,7 +6,7 @@
<link rel="stylesheet" href="./../static/css/main.css">
<link rel="stylesheet" href="./../static/css/animate.css">
<link rel="stylesheet" href="./cooperate.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1195086_uybvbn4h3b.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1195086_awxmw28nttf.css">
</head>
<body>
<div id="app" >
......
new/cooperate/js/addOperate.js → cooperate/js/addOperate.js
View file @ 4b2f612b
......@@ -188,7 +188,6 @@ var addOperate={
}
},
created(){
this.resizeTop = (document.documentElement.clientHeight/2 -319)+'px';
if(this.modalData.type=='creat'){
this.dialog.title = '新增授权点';
this.isCreat = true;
......@@ -197,6 +196,7 @@ var addOperate={
this.isCreat = false;
this.getinfo()
}
this.resizeTop = (document.documentElement.clientHeight/2 -319)+'px';
//屏幕缩放时大小适应
const that = this;
window.onresize = function temp() {
......
index.html deleted 100644 → 0
View file @ acb0de8c
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>bandmanager</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
main/index.html 0 → 100644
View file @ 4b2f612b
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="./main.css">
<link rel="stylesheet" href="./../static/css/main.css">
<link rel="stylesheet" href="./../static/css/animate.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1195086_awxmw28nttf.css">
</head>
<body>
<div id="app">
<common-header :modal-data="active_header"></common-header>
<div class="content main ">
<div class="main-top">
<el-row :gutter="0" class="main-topLeft">
<el-col :span='12' >
<span class="tips1">Hi! 早上好</span>
<i class="iconfont icontubiao204 firsttext_blue"></i>
<span class="tips2">2019-05-29</span>
<i class="iconfont iconyu firsttext_blue"></i>
<span class="tips3">小雨</span>
</el-col>
<el-col :span='12' class="main-topRight" >
<i class="el-icon-location firsttext_blue"></i>
<span class="tips3">湖南-郴州</span>
</el-col>
</el-row>
</div>
<div class="main-content">
<div class="main-content-left">
<div class="main-info">
<div class="main-info-title">
<el-row :gutter="0" >
<el-col :span='12' >
<p>完工信息</p>
</el-col>
<el-col :span='12' class="text_right" >
<el-radio-group v-model="radio1" size="small" class=" mr-20">
<el-radio-button label="今日" ></el-radio-button>
<el-radio-button label="昨日"></el-radio-button>
<el-radio-button label="本周"></el-radio-button>
<el-radio-button label="本月"></el-radio-button>
</el-radio-group>
</el-col>
</el-row>
</div>
<div>
<el-row :gutter="0" >
<el-col :span='6' class="main-card" >
<p>派单量</p>
<div>12</div>
</el-col>
<el-col :span='6' class="main-card" >
<p>派单量</p>
<div>12</div>
</el-col>
<el-col :span='6' class="main-card" >
<p>派单量</p>
<div>12</div>
</el-col>
<el-col :span='6' class="main-card" >
<p>派单量</p>
<div>12</div>
</el-col>
</el-row>
</div>
</div>
<div class="main-chart">
<div class="main-info-title">
<el-row :gutter="0" >
<el-col :span='12' >
<p>时效</p>
</el-col>
<el-col :span='12' class="text_right" >
<el-radio-group v-model="radio2" size="small" class=" mr-20">
<el-radio-button label="本周" ></el-radio-button>
<el-radio-button label="上周" ></el-radio-button>
</el-radio-group>
</el-col>
</el-row>
</div>
<div id="chartmain" style=" height: 400px;">
</div>
<span class="chart_title1">已完工单</span>
<span class="chart_title2">未完工单</span>
</div>
</div>
<div class="main-content-right">
<div class="main-news">
<div class="main-info-title">
<p>公告</p>
</div>
<div class="news-content">
<p v-for="(item,index) in titles" :key="index" @click="onopendialog(item)">{{item.content}}</p>
</div>
</div>
<div class="main-code">
<div class="main-info-title">
<p>咨询</p>
</div>
<div class="wecht">
<img src="./../static/images/wechat.png" alt="" width="145px" height="145px">
<p>扫二维码，有事咨询产品经理</p>
</div>
</div>
</div>
</div>
</div>
<component :modal-Data="modalData" :is="modal" @close="closeChild"></component>
</div>
</body>
<!-- 先引入 Vue -->
<script src="./../static/js/vue.js"></script>
<script src="./../static/js/jquery.js"></script>
<script src="./../static/js/echarts.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./../static/js/common.js"></script>
<script src="./js/title.js"></script>
<script>
new Vue({
el: '#app',
components: {commonHeader,Vtitle},
data: function() {
return {
modal:null,modalData:{},
active_header:'./../main/index.html',
radio1:'今日',radio2:'本周',
titles:[
{content:'【公告】5月25日，系统全面升级'},
{content:'【公告】5月23日，中国已有11家航空公司向波音提出索赔恢复谈判？外交'},
{content:'【新闻】中美究竟会不会恢复谈判？外交部、商务部刚刚这恢复谈判？外交部、商务部刚刚这 '},
{content:'【公告】5月25日，系统全面升级 '},
{content:'【公告】5月23日，中国已有11家航空公司向波音提出索赔恢复谈判？外交 '},
{content:'【新闻】中美究竟会不会恢复谈判？外交部、商务部刚刚这 恢复谈判？外交部、商务部刚刚这'}
]
}
},
mounted(){
this.initmap();
},
methods:{
initmap(){
var myChart = echarts.init(document.getElementById('chartmain'));
//指定图标的配置和数据
myChart.setOption(
{
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} 单({d}%)",
shadowStyle: {//默认值，
color: 'rgba(0,0,0,0.7)',//默认值，
type: 'default',//默认值，
},
},
color: ['#5A77D2','#71C255','#F7BF57','#50B5FC'],
legend: {
orient: 'vertical',
x: 'left',
left:'20px',
top:'20px',
data:['24小时内','大于24小时','大于48小时','大于72小时'],
},
series: [
{
name:'已完工单',
type:'pie',
center : ['35%', '50%'],
radius: ['45%', '60%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center',shadowBlur: 10
},
emphasis: {
show: true,
formatter: ["{b}"," {c} 单"].join('\n\n'),
textStyle: {
fontSize: '16',
},
color:'#666'
}
},
itemStyle:{
emphasis: {
label: {show:false},
labelLine: {show:false},
shadowBlur: 20,
shadowColor: 'rgba(129, 123, 123, 0.5)',
}
},
labelLine: {
normal: {
show: false
},
},
data:[
{value:335, name:'24小时内'},
{value:310, name:'大于24小时'},
{value:234, name:'大于48小时'},
{value:135, name:'大于72小时'},
]
},
{
name:'未完工单',
type:'pie',
center : ['75%', '50%'],
radius: ['45%', '60%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
formatter: ["{b}"," {c} 单"].join('\n\n'),
textStyle: {
fontSize: '16',
},
color:'#666'
}
},
itemStyle:{
emphasis: {
label: {show:false},
labelLine: {show:false},
shadowBlur: 20,
shadowColor: 'rgba(129, 123, 123, 0.5)',
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:335, name:'24小时内'},
{value:310, name:'大于24小时'},
{value:234, name:'大于48小时'},
{value:135, name:'大于72小时'},
]
}
]
}
)
},
onopendialog(item){
this.modalData = item;
this.modal = Vtitle;
},
closeChild(){
this.modal = null;
}
}
})
</script>
</html>
\ No newline at end of file
main/js/title.js 0 → 100644
View file @ 4b2f612b
// 公告弹窗
var Vtitle={
template: `
<el-dialog :title="dialog.title" width='444px' :visible.sync="dialog.show" custom-class='deliver-dialog' @close="handleClose" :append-to-body="true" :show-close='true'>
<div class="dialog-content">
<div class="title">
【升级】5月25日，全网网络升级公告
</div>
<div class="title-content">
<p>
【中华门窗网】3月26日—3月28日，素有“全屋高端定制平台”之称的2019中国建博会（上海）在上海虹桥·国家会展中心隆重启幕。本次展会由中贸展与红星美凯龙联合举办，首创“展”“店”结合的崭新办展模式。作为战略合作媒体，
</p>
<p>
中华建材网携手旗下垂直门户重磅推出“商”定虹桥 “盟”约建博”主题报道。报道从品牌招商政策、加盟帮扶、产品亮点出发，为您全方位展示品牌加盟优势。
</p>
</div>
</div>
</el-dialog>`,
props: {
modalData: Object
},
data(){
return{
dialog:{
show:true,title:'公告',tab:'1',
},
form:{
address:'',options:[]
}
}
},
created(){
},
methods:{
handleClose() {
this.$emit('close')
},
},
}
\ No newline at end of file
main/main.css 0 → 100644
View file @ 4b2f612b
.main{
width: 1400px;
margin: auto;
overflow: auto;
}
.main .main-top{
height: 38px;
line-height: 38px;
background: #ffffff;
padding: 0 20px;
}
.main .main-top .main-topLeft i{
font-size: 14px;
}
.main .main-top .main-topRight i{
font-size: 16px;
}
.main .main-top .main-topRight {
text-align: right;
}
.main .main-top .tips1{
font-size: 20px;
color: #666666;
margin-right: 30px
}
.main .main-top .tips2{
font-size: 14px;
color: #354052;
margin-right: 20px;
margin-left: 6px;
}
.main .main-top .tips3{
font-size: 14px;
color: #8F97A4;
margin-left: 6px;
}
.main .main-content{
/*background: #ffffff;*/
position: absolute;
top: 50px;
width: 1400px;
margin: auto;
bottom: 0;
display:flex;/*设为伸缩容器*/
flex-flow:row;/*伸缩项目单行排列*/
}
.main .main-content .main-content-left{
width: 950px;
}
.main .main-content .main-content-left .main-info{
width: 100%;
height:276px;
box-shadow:0px 0px 13px 0px rgba(87,118,217,0.2);
border-radius:4px;
background: #ffffff;
}
.main .main-content .main-info-title{
height: 76px;
line-height: 76px;
margin: 0 10px;
border-bottom: 1px solid #ececec;
}
.main .main-content .main-info-title p{
font-size: 24px;
color: #333333;
margin-left: 20px;
font-weight: 500;
}
.main .main-content .main-content-left .main-card{
height: 200px;
}
.main .main-content .main-content-left .main-card p{
font-size: 16px;
color: #666666;
margin-left: 20px;
margin-top: 20px;
}
.main .main-content .main-content-left .main-card div{
font-size: 30px;
color: #333333;
text-align: center;
height: 150px;
line-height: 150px;
}
.main .main-content .main-content-left .main-card:nth-child(1){
border-right: 1px solid #ececec;
border-bottom: 6px solid #5A77D2
}
.main .main-content .main-content-left .main-card:nth-child(2){
border-right: 1px solid #ececec;
border-bottom: 6px solid #71C255
}
.main .main-content .main-content-left .main-card:nth-child(3){
border-right: 1px solid #ececec;
border-bottom: 6px solid #FDECCC
}
.main .main-content .main-content-left .main-card:nth-child(4){
border-bottom: 6px solid #50B5FC;
}
.main .main-content .main-content-left .main-chart{
height:491px;
background:#ffffff;
box-shadow:0px 0px 13px 0px rgba(87,118,217,0.2);
border-radius:4px;
margin-top: 20px;
position: relative;
}
.main .main-content .main-content-right .main-news{
height:413px;
background:#ffffff;
box-shadow:0px 0px 13px 0px rgba(87,118,217,0.2);
border-radius:4px;
}
.main .main-content .main-content-right .main-news .news-content{
padding: 20px;
}
.main .main-content .main-content-right .main-news .news-content p{
font-size:14px;
font-weight:400;
color:#8F97A4;
width: 375px;
line-height: 2; overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
cursor: pointer;
}
.main .main-content .main-content-right .main-code{
height:354px;
background:#ffffff;
box-shadow:0px 0px 13px 0px rgba(87,118,217,0.2);
border-radius:4px;
margin-top: 20px;
}
.main .main-content .main-content-right .main-code .wecht{
text-align: center;
padding-top: 45px;
}
.main .main-content .main-content-right .main-code .wecht p{
font-size: 12px;
color: #8F97A4;
margin-top: 10px;
}
.main .main-content .main-content-right{
flex: 1;
margin-left: 30px;
}
.main .main-content .el-radio-button__orig-radio:checked+.el-radio-button__inner{
background-color: #5874d8;
border-color: #5874d8;
}
.main .mr-20{
margin-right: 20px;
}
.main .chart_title1{
font-size: 20px;
color: #666666;
position: absolute;
left: 30%;
bottom: 10%;
}
.main .chart_title2{
font-size: 20px;
color: #666666;
position: absolute;
right: 20%;
bottom: 10%;
}
/*******公告弹框start************/
.deliver-dialog{
height: 492px;
}
.deliver-dialog .el-dialog__header{
background: #ffffff ;
padding-left: 30px;
}
.deliver-dialog .el-dialog__header .el-dialog__title{
color: #5B76D1 ;
font-size:24px;
font-family:PingFangSC-Medium;
font-weight:500;
line-height:35px
}
.deliver-dialog .el-dialog__header .el-dialog__headerbtn i{
color: #8F97A4 ;
font-size: 24px;
}
.deliver-dialog .el-dialog__body{
padding: 30px 21px;
}
.deliver-dialog .deliver-dialog-title{
font-size:14px;
font-family:PingFangSC-Medium;
font-weight:500;
color:rgba(143,151,164,1);
line-height:35px;
}
.deliver-dialog .title{
border-bottom: 1px solid #ececec;
padding-bottom: 10px;
}
.deliver-dialog .title-content{
padding: 20px;
color: #8F97A4;
line-height: 1.6;
}
.deliver-dialog .title-content p{
text-indent: 20px;
}
\ No newline at end of file
new/message/index.html → message/index.html
View file @ 4b2f612b
......@@ -5,7 +5,7 @@
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="./../static/css/main.css">
<link rel="stylesheet" href="./../static/css/animate.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1195086_uybvbn4h3b.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1195086_awxmw28nttf.css">
</head>
<body>
<div id="app">
......
new/main/index.html deleted 100644 → 0
View file @ acb0de8c
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="./../static/css/main.css">
<link rel="stylesheet" href="./../static/css/animate.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1195086_uybvbn4h3b.css">
</head>
<body>
<div id="app">
<common-header :modal-data="active_header"></common-header>
<div class="content">
</div>
</div>
</body>
<!-- 先引入 Vue -->
<script src="./../static/js/vue.js"></script>
<script src="./../static/js/jquery.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./../static/js/common.js"></script>
<script>
new Vue({
el: '#app',
components: {commonHeader},
data: function() {
return {
activeIndex:'1',tabindex:'1',active_header:'./../main/index.html',
}
},
methods:{
}
})
</script>
</html>
new/order/addOrder.html → order/addOrder.html
View file @ 4b2f612b
......@@ -6,7 +6,7 @@
<link rel="stylesheet" href="./../static/css/main.css">
<link rel="stylesheet" href="./order.css">
<link rel="stylesheet" href="./../static/css/animate.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1195086_uybvbn4h3b.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1195086_awxmw28nttf.css">
</head>
<body>
<div id="app">
......
new/order/index.html → order/index.html
View file @ 4b2f612b
......@@ -6,7 +6,7 @@
<link rel="stylesheet" href="./../static/css/main.css">
<link rel="stylesheet" href="./order.css">
<link rel="stylesheet" href="./../static/css/animate.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1195086_uybvbn4h3b.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1195086_awxmw28nttf.css">
</head>
<body>
<div id="app">
......@@ -138,7 +138,7 @@
components: {commonHeader,beCompleting,beRighting,VRefuse,settlePrice,hasDone,Deliver},
data: function() {
return {
activeIndex:'9',tabindex:'9',modal:null,active_header:'./../order/index.html',
activeIndex:'9',tabindex:'9',active_header:'./../order/index.html',
menus:[
{name:'待派单',value:'1',icon:'iconfenpei',number:10},
{name:'未分配',value:'2',icon:'iconmulufenpei',number:10},
......
new/order/js/beCompleting.js → order/js/beCompleting.js
View file @ 4b2f612b
......@@ -130,8 +130,8 @@ var beCompleting={
}
},
created(){
this.resizeTop = (document.documentElement.clientHeight/2 -319)+'px';
this.dialog.title = '工单（GLDQ0019211237）--待完工';
this.resizeTop = (document.documentElement.clientHeight/2 -319)+'px';
//屏幕缩放时大小适应
const that = this;
window.onresize = function temp() {
......
new/order/js/beRighting.js → order/js/beRighting.js
View file @ 4b2f612b
......@@ -181,8 +181,8 @@ var beRighting={
}
},
created(){
this.resizeTop = (document.documentElement.clientHeight/2 -319)+'px';
this.dialog.title = '工单（GLDQ0019211237）--待确权' ;
this.resizeTop = (document.documentElement.clientHeight/2 -319)+'px';
//屏幕缩放时大小适应
const that = this;
window.onresize = function temp() {
......
new/order/order.css → order/order.css
View file @ 4b2f612b
......@@ -333,10 +333,17 @@
position: absolute;right: 20px;
top:60px;z-index: 3000;
}
.order-detail .edict-icon i{
.order-detail .edict-icon i:nth-child(1){
font-size: 24px;
color: #5874D8;
cursor: pointer;
vertical-align:bottom;
margin-right: 5px;
}
.order-detail .edict-icon i:nth-child(2){
font-size: 22px;
color: #5874D8;
cursor: pointer;
}
/**********************反馈start*************************/
.order-detail .order-detail-response{
......@@ -535,6 +542,13 @@
margin: auto;
}
.order .el-radio__label{
padding-left: 0 !important;
text-align: center !important;
}
.order .el-radio--mini.is-bordered{
padding: 6px 10px 0 10px !important;
}
.add-order-left{
width: 198px;
height: 100%;
......
package-lock.json deleted 100644 → 0
View file @ acb0de8c
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json deleted 100644 → 0
View file @ acb0de8c
{
"name": "bandmanager",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "ymm",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"axios": "^0.18.0",
"element-ui": "^2.8.2",
"qs": "^6.7.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
new/set/Index.html → set/Index.html
View file @ 4b2f612b
......@@ -7,7 +7,7 @@
<link rel="stylesheet" href="./../static/css/main.css">
<link rel="stylesheet" href="./../static/css/animate.css">
<link rel="stylesheet" href="./set.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1195086_uybvbn4h3b.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1195086_awxmw28nttf.css">
</head>
<body>
<div id="app">
......
new/settlement/index.html → settlement/index.html
View file @ 4b2f612b
......@@ -6,7 +6,7 @@
<link rel="stylesheet" href="./../static/css/main.css">
<link rel="stylesheet" href="./../static/css/animate.css">
<link rel="stylesheet" href="./settlement.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1195086_uybvbn4h3b.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1195086_awxmw28nttf.css">
</head>
<body>
<div id="app" >
......
src/App.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
@import "./assets/css/main.css";
@import "./assets/css/animate.css";
#app{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
}
</style>
src/api/base.js deleted 100644 → 0
View file @ acb0de8c
export const base_url = ''
\ No newline at end of file
src/api/config.js deleted 100644 → 0
View file @ acb0de8c
import router from '../router';
import axios from 'axios'
import {base_url} from './base.js'
import qs from 'qs'
import { Message } from 'element-ui';
const axiosAjax = axios.create({
baseURL:base_url,
timeout:30000,
headers:{
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
'Cache-Control':'no-cache'
},
});
axiosAjax.interceptors.request.use(
);
axiosAjax.interceptors.response.use(
);
var ajaxFun = (option)=> {
return new Promise( (resolve, reject)=> {
axiosAjax(option).then((response) => {
resolve(response);
}).catch((error) => {
reject(error);
});
})
}
export default ajaxFun
\ No newline at end of file
src/assets/css/animate.css deleted 100644 → 0
View file @ acb0de8c
@charset "UTF-8";
/*!
* animate.css -http://daneden.me/animate
* Version - 3.7.0
* Licensed under the MIT license - http://opensource.org/licenses/MIT
*
* Copyright (c) 2018 Daniel Eden
*/
@-webkit-keyframes bounce {
from,
20%,
53%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40%,
43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
}
}
@keyframes bounce {
from,
20%,
53%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40%,
43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
@-webkit-keyframes flash {
from,
50%,
to {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
@keyframes flash {
from,
50%,
to {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
.flash {
-webkit-animation-name: flash;
animation-name: flash;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
}
@-webkit-keyframes rubberBand {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes rubberBand {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.rubberBand {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}
@-webkit-keyframes shake {
from,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
@keyframes shake {
from,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
.shake {
-webkit-animation-name: shake;
animation-name: shake;
}
@-webkit-keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg);
}
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg);
}
50% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg);
}
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg);
}
50% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.headShake {
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-name: headShake;
animation-name: headShake;
}
@-webkit-keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}
to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}
@keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}
to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}
.swing {
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing;
}
@-webkit-keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%,
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%,
50%,
70%,
90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%,
60%,
80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%,
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%,
50%,
70%,
90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%,
60%,
80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.tada {
-webkit-animation-name: tada;
animation-name: tada;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes wobble {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.wobble {
-webkit-animation-name: wobble;
animation-name: wobble;
}
@-webkit-keyframes jello {
from,
11.1%,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
@keyframes jello {
from,
11.1%,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
.jello {
-webkit-animation-name: jello;
animation-name: jello;
-webkit-transform-origin: center;
transform-origin: center;
}
@-webkit-keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
28% {
-webkit-transform: scale(1);
transform: scale(1);
}
42% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
28% {
-webkit-transform: scale(1);
transform: scale(1);
}
42% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.heartBeat {
-webkit-animation-name: heartBeat;
animation-name: heartBeat;
-webkit-animation-duration: 1.3s;
animation-duration: 1.3s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
@-webkit-keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.bounceIn {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInDown {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInLeft {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0);
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInRight {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0);
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInRight {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInUp {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
@-webkit-keyframes bounceOut {
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
50%,
55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
}
@keyframes bounceOut {
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
50%,
55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
}
.bounceOut {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-name: bounceOut;
animation-name: bounceOut;
}
@-webkit-keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
@keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
.bounceOutDown {
-webkit-animation-name: bounceOutDown;
animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
@keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
.bounceOutLeft {
-webkit-animation-name: bounceOutLeft;
animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
@keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
.bounceOutRight {
-webkit-animation-name: bounceOutRight;
animation-name: bounceOutRight;
}
@-webkit-keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
@keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
.bounceOutUp {
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInDownBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeftBig {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
from {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInRightBig {
from {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
@keyframes fadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutDownBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
@keyframes fadeOutDownBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
.fadeOutDownBig {
-webkit-animation-name: fadeOutDownBig;
animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeft {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes fadeOutLeft {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutLeftBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
@keyframes fadeOutLeftBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
.fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig;
animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRight {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@keyframes fadeOutRight {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
.fadeOutRight {
-webkit-animation-name: fadeOutRight;
animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutRightBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
@keyframes fadeOutRightBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
.fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig;
animation-name: fadeOutRightBig;
}
@-webkit-keyframes fadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes fadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutUpBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
@keyframes fadeOutUpBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
.fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig;
animation-name: fadeOutUpBig;
}
@-webkit-keyframes flip {
from {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
to {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@keyframes flip {
from {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
to {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
.animated.flip {
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-animation-name: flip;
animation-name: flip;
}
@-webkit-keyframes flipInX {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
@keyframes flipInX {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX;
}
@-webkit-keyframes flipInY {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
@keyframes flipInY {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
.flipInY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInY;
animation-name: flipInY;
}
@-webkit-keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
@keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
.flipOutX {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-name: flipOutX;
animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
}
@-webkit-keyframes flipOutY {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
@keyframes flipOutY {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
.flipOutY {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
animation-name: flipOutY;
}
@-webkit-keyframes lightSpeedIn {
from {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1;
}
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes lightSpeedIn {
from {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1;
}
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.lightSpeedIn {
-webkit-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedOut {
from {
opacity: 1;
}
to {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
@keyframes lightSpeedOut {
from {
opacity: 1;
}
to {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
.lightSpeedOut {
-webkit-animation-name: lightSpeedOut;
animation-name: lightSpeedOut;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
@-webkit-keyframes rotateIn {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateIn {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateIn {
-webkit-animation-name: rotateIn;
animation-name: rotateIn;
}
@-webkit-keyframes rotateInDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft;
}
@-webkit-keyframes rotateInDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
animation-name: rotateInDownRight;
}
@-webkit-keyframes rotateInUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft;
}
@-webkit-keyframes rotateInUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
animation-name: rotateInUpRight;
}
@-webkit-keyframes rotateOut {
from {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0;
}
}
@keyframes rotateOut {
from {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0;
}
}
.rotateOut {
-webkit-animation-name: rotateOut;
animation-name: rotateOut;
}
@-webkit-keyframes rotateOutDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
}
@keyframes rotateOutDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
}
.rotateOutDownLeft {
-webkit-animation-name: rotateOutDownLeft;
animation-name: rotateOutDownLeft;
}
@-webkit-keyframes rotateOutDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
@keyframes rotateOutDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
.rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
animation-name: rotateOutDownRight;
}
@-webkit-keyframes rotateOutUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
@keyframes rotateOutUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
.rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft;
animation-name: rotateOutUpLeft;
}
@-webkit-keyframes rotateOutUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0;
}
}
@keyframes rotateOutUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0;
}
}
.rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight;
}
@-webkit-keyframes hinge {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%,
60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40%,
80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0;
}
}
@keyframes hinge {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%,
60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40%,
80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0;
}
}
.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-name: hinge;
animation-name: hinge;
}
@-webkit-keyframes jackInTheBox {
from {
opacity: 0;
-webkit-transform: scale(0.1) rotate(30deg);
transform: scale(0.1) rotate(30deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
50% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
70% {
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes jackInTheBox {
from {
opacity: 0;
-webkit-transform: scale(0.1) rotate(30deg);
transform: scale(0.1) rotate(30deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
50% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
70% {
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.jackInTheBox {
-webkit-animation-name: jackInTheBox;
animation-name: jackInTheBox;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes rollIn {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.rollIn {
-webkit-animation-name: rollIn;
animation-name: rollIn;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}
@keyframes rollOut {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}
.rollOut {
-webkit-animation-name: rollOut;
animation-name: rollOut;
}
@-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}
@keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
@-webkit-keyframes zoomInDown {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInDown {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomInDown {
-webkit-animation-name: zoomInDown;
animation-name: zoomInDown;
}
@-webkit-keyframes zoomInLeft {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInLeft {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomInLeft {
-webkit-animation-name: zoomInLeft;
animation-name: zoomInLeft;
}
@-webkit-keyframes zoomInRight {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInRight {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomInRight {
-webkit-animation-name: zoomInRight;
animation-name: zoomInRight;
}
@-webkit-keyframes zoomInUp {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInUp {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomInUp {
-webkit-animation-name: zoomInUp;
animation-name: zoomInUp;
}
@-webkit-keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
to {
opacity: 0;
}
}
@keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
to {
opacity: 0;
}
}
.zoomOut {
-webkit-animation-name: zoomOut;
animation-name: zoomOut;
}
@-webkit-keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomOutDown {
-webkit-animation-name: zoomOutDown;
animation-name: zoomOutDown;
}
@-webkit-keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
transform: scale(0.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center;
}
}
@keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
transform: scale(0.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center;
}
}
.zoomOutLeft {
-webkit-animation-name: zoomOutLeft;
animation-name: zoomOutLeft;
}
@-webkit-keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
transform: scale(0.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center;
}
}
@keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
transform: scale(0.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center;
}
}
.zoomOutRight {
-webkit-animation-name: zoomOutRight;
animation-name: zoomOutRight;
}
@-webkit-keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomOutUp {
-webkit-animation-name: zoomOutUp;
animation-name: zoomOutUp;
}
@-webkit-keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
}
@-webkit-keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}
@-webkit-keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
}
@-webkit-keyframes slideOutDown {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
@keyframes slideOutDown {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
.slideOutDown {
-webkit-animation-name: slideOutDown;
animation-name: slideOutDown;
}
@-webkit-keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.slideOutLeft {
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@keyframes slideOutRight {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
.slideOutRight {
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight;
}
@-webkit-keyframes slideOutUp {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes slideOutUp {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.delay-1s {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.animated.delay-2s {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.animated.delay-3s {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.animated.delay-4s {
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.animated.delay-5s {
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.animated.fast {
-webkit-animation-duration: 800ms;
animation-duration: 800ms;
}
.animated.faster {
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
}
.animated.slow {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.slower {
-webkit-animation-duration: 3s;
animation-duration: 3s;
}
@media (print), (prefers-reduced-motion) {
.animated {
-webkit-animation: unset !important;
animation: unset !important;
-webkit-transition: none !important;
transition: none !important;
}
}
\ No newline at end of file
src/assets/css/main.css deleted 100644 → 0
View file @ acb0de8c
*{
margin:0;
padding:0;
font-size: 14px;
}
html,body,#app,.wrapper{
width:100%;
height:100%;
overflow: hidden;
background: #F5F5F5;
position: relative;
}
body{
font-family: "microsoft yahei" !important;
}
a{
text-decoration: none
}
button,.el-button{
font-family: "microsoft yahei" !important;
}
.cursor{
cursor: pointer;
}
.text_center{
text-align: center;
}
.primary_btcolor{
background: #5874D8;
border: #5874D8;
}
.el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #5874D8;
}
.background-blue{
background: #5874D8;
}
.text-white{
color: #ffffff;
}
.el-dialog__wrapper{
overflow: hidden !important;
}
.el-dialog__body{
padding:30px 0 !important;
}
.el-dialog__header{
background: #6C8BF8 !important;
}
.el-dialog__header .el-dialog__title, .el-dialog__header .el-dialog__headerbtn i{
color: #ffffff !important;
}
\ No newline at end of file
src/main.js deleted 100644 → 0
View file @ acb0de8c
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
src/router/index.js deleted 100644 → 0
View file @ acb0de8c
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router ({
routes: [
{
path: '/',
redirect: '/login'
},
{
path: '/login',
name: 'login',
component: () => import(/* webpackChunkName: "login" */ '@/views/accounts/Login.vue')
},
{
path:'/index',
component: resolve => require(['../views/root/Home.vue'], resolve),
children:[
{
path: '/main',
name: 'main',
component: () => import(/* webpackChunkName: "main" */ '@/views/main/Index.vue')
},
{
path: '/cooperate',
name: 'cooperate',
component: () => import(/* webpackChunkName: "cooperate" */ '@/views/cooperate/Index.vue')
},
{
path: '/message',
name: 'message',
component: () => import(/* webpackChunkName: "message" */ '@/views/message/Index.vue')
},
{
path: '/orders',
name: 'orders',
component: () => import(/* webpackChunkName: "orders" */ '@/views/orders/Index.vue'),
},
{
path: '/addOrder',
name: 'addOrder',
component: () => import(/* webpackChunkName: "addOrder" */ '@/views/orders/AddOrder.vue')
},
{
path: '/set',
name: 'set',
component: () => import(/* webpackChunkName: "set" */ '@/views/set/Index.vue')
},
{
path: '/settlement',
name: 'settlement',
component: () => import(/* webpackChunkName: "settlement" */ '@/views/settlement/Index.vue')
},
]
}
]
})
/***********路由拦截**************************************/
// router.beforeEach((to, from, next) => {
// });
export default router;
\ No newline at end of file
src/views/accounts/Login.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<div>
login
</div>
</template>
src/views/cooperate/All.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<div class="cooperate-right">
<div class="all-cooperate-serch">
<el-select class="seach-select" v-model="search.type" @change='' placeholder="选择品类">
<el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options2'></el-option>
</el-select>
<el-select class="seach-select" v-model="search.area" @change='' placeholder="选择区域">
<el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options1'></el-option>
</el-select>
<el-input class="seach-input" v-model='search.name' prefix-icon="el-icon-search" placeholder='输入名称、联系人或区域'></el-input>
<el-button type='primary' class='button-color'>搜索</el-button>
<el-button type='primary' class='button-color addbutton' @click=''>新增授权点</el-button>
</div>
<div class="cooperate-content">
<el-table :data="tableData" style="width: 100%" @row-click='checkData'>
<el-table-column prop="date" label="授权点" ></el-table-column>
<el-table-column label="负责人" >
<template slot-scope="scope" >
<span class='cursor' style=' color: #5B76D1; '>
{{scope.row.name }}
</span>
<span style=' color: #999;'>{{scope.row.phone}}</span>
</template>
</el-table-column>
<el-table-column prop="address" label="合作区域"> </el-table-column>
<el-table-column prop="type" label="合作品类"> </el-table-column>
<el-table-column label="合作状态" width='80px'>
<template slot-scope="scope" >
<div class='text_center'>
<i class='el-icon-success' v-if='scope.row.status==1' style='color:#6FC152;font-size:16px;'></i>
<i class='el-icon-success' v-else style='color:#F05050;font-size:16px'></i>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="cooperate-bottom">
<el-pagination @current-change="handleCurrentChange" background :current-page="table.current_page" layout="total, prev, pager, next" :page-size="15" :pager-count="table.page_count" :total="table.total">
</el-pagination>
</div>
<component :is="modal" @close="closeChild" :modalData="modalData"></component>
</div>
</template>
<script>
import Detail from './dialog/Detail.vue'
export default {
data(){
return{
modal:null,modalData:{},
search:{
type:'',area:'',options1:[],options2:[],name:''
},
table:{
current_page:1,page_count:7,total:50,
},
tableData:[
{
date: '精诚维修',
name: '张无极',
phone:'13800009999',
address: '上海市',
type:'空调 冰洗',
status:1
},
{
date: '精诚维修',
name: '张无极',
phone:'13800009999',
address: '上海市',
type:'空调 冰洗',
status:0
},
{
date: '精诚维修',
name: '张无极',
phone:'13800009999',
address: '上海市',
type:'空调 冰洗',
status:1
},
{
date: '精诚维修',
name: '张无极',
phone:'13800009999',
address: '上海市',
type:'空调 冰洗',
status:0
},
]
}
},
wacth:{
},
methods:{
handleCurrentChange(page) {
},
checkData(row,event, column){
this.modalData = row;
this.modal = Detail;
},
closeChild(){
this.modal = null;
}
}
}
</script>
<style>
.cooperate-right{
float: right;
width: 1180px;
height: 100%;
position: relative;
background: #ffffff;
}
.cooperate-right .all-cooperate-serch{
background: #ffffff;
padding: 10px;
position: relative;
}
.all-cooperate-serch:after{
position: absolute;
content: '';
left: 20px;
right: 20px;
bottom: 0;
height:1px;
background: #ececec;
}
.cooperate-right .all-cooperate-serch .seach-select .el-input__inner,.cooperate-right .all-cooperate-serch .seach-select .el-input{
width: 120px !important;
background: #F1F3F9;
border: none;
}
.cooperate-right .all-cooperate-serch .seach-input .el-input__inner,.cooperate-right .all-cooperate-serch .seach-input {
width: 298px;
}
.button-color{
background: #5874D8;
}
.button-icon{
background: rgba(88,116,216,0.1) ; padding: 10px 8px;
border-radius: 4px;
}
.addbutton{float: right;}
.cooperate-right .cooperate-bottom{
position: absolute;
left: 0;
right: 0;
text-align: center;
bottom: 15px;
}
.cooperate-right .cooperate-content{
position: absolute;
left: 0;
right:0;
top: 60px;
bottom: 50px;
overflow: auto;
padding: 15px;
}
.cooperate-right .cooperate-content table th{
background: #EEF1FC;
color: #666;
}
.cooperate-right .cooperate-content table td{
font-size: 12px;
}
</style>
\ No newline at end of file
src/views/cooperate/Index.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<div class="cooperate">
<div class='cooperate-left'>
<div class="cooperate-title">合作资源</div>
<el-menu :default-active="activeIndex" :unique-opened="false" @select="handleSelect" background-color="#ffffff" text-color="#666" class='cooperate-menu'>
<el-menu-item :index="item.value" :key='index' v-for='(item,index) in menus' >
<i :class="item.icon"></i>
{{item.name}}
</el-menu-item>
</el-menu>
</div>
<component :is="modal" ></component>
</div>
</template>
<script>
import VAll from './All.vue'
export default {
data(){
return{
activeIndex:'3',tabindex:'3',modal:VAll,
menus:[
{name:'正常',value:'1',icon:'el-icon-upload2'},
{name:'停用',value:'2',icon:'el-icon-sort'},
{name:'全部',value:'3',icon:'el-icon-date'},
],
}
},
wacth:{
},
methods:{
handleSelect(key, keyPath) {
this.tabindex = key;
switch(Number(key)){
case 3:
this.modal = VAll
break;
default:
this.modal = null
break;
}
},
handleCurrentChange(page) {
},
}
}
</script>
<style>
.cooperate{
width: 1400px;
height: 100%;
margin: auto;
}
.cooperate-left{
width: 198px;
height: 100%;
background: #ffffff;
float: left;
}
.cooperate-left .cooperate-title{
color: #5874D8;
text-align: center;
font-size: 18px;
height: 64px;
line-height: 64px;
border-bottom: 1px solid #ececec;
}
.cooperate-menu .el-menu-item.is-active{
background-color: rgba(88,116,216,0.1) !important;
position: relative;
}
.cooperate-menu .el-menu-item.is-active:before{
content: '';
position: absolute;
width: 3px;
height: 20px;
left: 0;
top: 20px;
background: #50B5FC
}
</style>
\ No newline at end of file
src/views/cooperate/dialog/Detail.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<el-dialog :title="dialog.title" :visible.sync="dialog.show" custom-class='cooperate-detail animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'>
<div class="dialog-content">
<div class="edict-icon">
<i class="el-icon-edit-outline"></i>
<i class="el-icon-delete"></i>
</div>
<el-tabs v-model="dialog.tab" type="card" @tab-click="handleClick">
<el-tab-pane label="详情" name="1" >
<h2>基本信息</h2>
<div class='cooperate-detail-tab'>
<p>名 称: <span> 精诚维修</span></p>
<p>负 责 人：<span>张三（13800001111）</span></p>
<p>状 态：<span>正常（已开通接口 ）</span></p>
<p>地 址：<span>深圳市精诚家电维修有限公司</span> </p>
</div>
<h2>结算信息</h2>
<div class='cooperate-detail-tab'>
<p>周期: <span> 日结</span></p>
<p>结算方式：<span>银行卡（13800001111）</span></p>
<p>收款信息：<span>张三 中国建设银行宝安支行 6222212132881212</span></p>
</div>
<h2>认证信息</h2>
<div class='cooperate-detail-tab' style="border:none">
<p>认证方式: <span>企业认证</span></p>
<p>认证信息：<span>深圳市精诚家电维修有限公司 0102198902010215</span></p>
<p>认证图片：
<img src="../../../assets/images/dog.jpeg" alt="" width="60px" height="60px" style="vertical-align: text-top;">
</p>
</div>
</el-tab-pane>
<el-tab-pane label="范围" name="2">
<h2>服务区域</h2>
<div class='cooperate-detail-tab' style="padding:20px;line-height:3">
<span class='tag' v-for='(item,index) in 9' :key='index'>
<i class='el-icon-location'></i>广东-深圳
</span>
</div>
<h2>服务品类</h2>
<div class='cooperate-detail-tab' style="padding:20px;line-height:3;border:none">
<span class='tag' v-for='(item,index) in 2' :key='index'>
空调
</span>
</div>
</el-tab-pane>
<el-tab-pane label="授权码" name="3">
<h2>授权信息</h2>
<div class='cooperate-detail-tab' style="border:none">
<p>授权ID:<span>31E8792IWE73</span></p>
<p>授权密钥:<span>31E8792IWE7331E8792IWE7331E8792IWE73</span></p>
<p>接单方式一：<span>API对接</span></p>
<p>接单方式二：<span>小程序</span></p>
</div>
<div class="wechat"></div>
<div class="wechatTip">扫一扫，登录小程序</div>
</el-tab-pane>
</el-tabs>
</div>
</el-dialog>
</template>
<script>
export default{
props: {
//父组件调用时传进来的参数
modalData: Object
},
data(){
return{
detail:{ },
dialog:{
show:true,title:'授权点--精诚维修',tab:'1',
},
}
},
methods:{
handleClose() {
this.$emit('close')
},
handleClick(){
},
}
}
</script>
<style>
/********************详情start*******************/
.cooperate-detail{
width: 720px;
height: 630px;
}
.dialog-content{
position: relative;
}
.dialog-content .edict-icon{
position: absolute;right: 20px;
top:0;
}
.dialog-content .edict-icon i{
font-size: 24px;
color: #5874D8;
cursor: pointer;
}
.dialog-content .edict-icon i:nth-child(1){
margin-right: 15px;
}
.el-dialog__wrapper{
overflow: hidden !important;
}
.cooperate-detail h2{
padding-left: 15px;
position: relative;
margin-left: 20px;
}
.cooperate-detail h2:before{
position: absolute;
content: '';
left: 0;
top: 0;
width: 5px;
height: 20px;
background: #50B5FC;
}
.cooperate-detail .el-tabs--card>.el-tabs__header{
padding: 0 20px;
}
.cooperate-detail .el-dialog__body{
padding:30px 0;
}
.cooperate-detail .el-dialog__header{
background: #6C8BF8;
}
.cooperate-detail .el-dialog__header .el-dialog__title,.cooperate-detail .el-dialog__header .el-dialog__headerbtn i{
color: #ffffff;
font-size: 16px;
}
.cooperate-detail .cooperate-detail-tab{
margin-top: 5px;
line-height: 2.5;
border-bottom: 1px solid #ececec;
padding-bottom: 10px;
margin-bottom: 10px;
padding-left: 20px;
}
.cooperate-detail .cooperate-detail-tab p{
color: #999;
font-size: 12px;
}
.cooperate-detail .cooperate-detail-tab span{
color: #333;
font-size: 12px;
}
.cooperate-detail-steps {
height: 300px;
margin-top: 10px;
padding-left: 20px;
}
.cooperate-detail-steps .el-step.is-vertical .el-step__title{
font-size: 14px;
}
.cooperate-detail .cooperate-request-box{
position: relative;
height: 530px;
}
.cooperate-detail .cooperate-detail-request{
background: #ececec;
position: absolute;bottom: 0;
left:0;
right: 0;
height: 54px;
}
.cooperate-detail .cooperate-detail-request .plus{
border: 1px solid #333;
width: 30px;
height: 30px;
margin-top: 10px;
margin-left: 20px;
float: left;
border-radius: 5px;
}
.cooperate-detail .cooperate-detail-request .plus i{
font-size: 29px;
}
.cooperate-detail .cooperate-detail-request .cooperate-input-area .seach-input .el-input__inner,.cooperate-detail .cooperate-detail-request .cooperate-input-area {
width: 540px;
margin-top: 6px;
margin-left: 20px;
}
.cooperate-detail .seach-input .el-input__inner,.cooperate-detail .seach-input {
width: 200px;
height: 25px;
}
.cooperate-detail .seach-area .el-input__inner,.cooperate-detail .seach-area {
width: 430px;
width: 490px;
height: 28px;
margin-right: 20px;
}
/*******************************范围start******************************/
.cooperate-detail-tab .tag{
background: #F1F3F8;
padding: 5px 14px;
border-radius: 3px;
margin-right: 20px;
color:#999999 !important;
}
.cooperate-detail-tab .tag i{
color: #3B4B84;
font-size: 14px;
}
/*******************************授权start******************************/
.el-tabs .wechat{
width: 180px;
height: 180px;
background: #ececec;
margin: auto;
margin-top: 50px;
}
.el-tabs .wechatTip{
text-align: center;
margin-top: 10px;
font-size: 12px;
color: #999;
}
</style>
src/views/main/Index.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<div>
main
</div>
</template>
\ No newline at end of file
src/views/message/Index.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<div>
message
</div>
</template>
\ No newline at end of file
src/views/orders/AddOrder.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<div class="add-order">
<div class='add-order-left'>
<div class="add-order-title">工单中心</div>
<el-menu :default-active="activeIndex" :unique-opened="false" @select="handleSelect" background-color="#ffffff" text-color="#666" class='add-order-menu'>
<el-menu-item :index="item.value" :key='index' v-for='(item,index) in menus' >
<i :class="item.icon"></i>
{{item.name}}
</el-menu-item>
</el-menu>
</div>
<div class="add-order-right">
<component :is="modal" ></component>
</div>
</div>
</template>
<script>
import Addone from './add/AddOne.vue'
import Onekey from './add/OneKey.vue'
import ExportAll from './add/ExportAll.vue'
import ExportTM from './add/ExportTM.vue'
import ExportJD from './add/ExportJD.vue'
export default {
data(){
return{
activeIndex:'1',tabindex:'1',modal:Addone,
menus:[
{name:'逐条新建',value:'1',icon:'el-icon-upload2'},
{name:'智能新建',value:'2',icon:'el-icon-sort'},
{name:'批量导出',value:'3',icon:'el-icon-date'},
{name:'天猫导出',value:'4',icon:'el-icon-warning'},
{name:'京东导出',value:'5',icon:'el-icon-upload'},
],
}
},
methods:{
handleSelect(key, keyPath) {
this.tabindex = key;
switch(Number(key)){
case 1:
this.modal = Addone
break;
case 2:
this.modal = Onekey
break;
case 3:
this.modal = ExportAll
break;
case 4:
this.modal = ExportTM
break;
case 5:
this.modal = ExportJD
break;
default:
break;
}
},
}
}
</script>
<style>
.add-order{
width: 1400px;
height: 100%;
margin: auto;
}
.add-order-left{
width: 198px;
height: 100%;
background: #ffffff;
float: left;
}
.add-order-left .add-order-title{
color: #5874D8;
text-align: center;
font-size: 18px;
height: 64px;
line-height: 64px;
border-bottom: 1px solid #ececec;
}
.add-order-menu .el-menu-item.is-active{
background-color: rgba(88,116,216,0.1) !important;
position: relative;
}
.add-order-menu .el-menu-item.is-active:before{
content: '';
position: absolute;
width: 3px;
height: 20px;
left: 0;
top: 20px;
background: #50B5FC
}
.add-order-right{
float: right;
width: 1180px;
height: 100%;
position: relative;
}
</style>
\ No newline at end of file
src/views/orders/AllOrder.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<div class="all-order">
<div class="all-order-serch">
<el-select class="seach-select" v-model="search.time" @change='' placeholder="创建时间">
<el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options1'></el-option>
</el-select>
<el-select class="seach-select" v-model="search.type" @change='' placeholder="选择品类">
<el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options2'></el-option>
</el-select>
<el-input class="seach-input" v-model='search.name' prefix-icon="el-icon-search" placeholder='请输入项目名、合作商名查询'></el-input>
<el-button type='primary' class='button-color'>搜索</el-button>
<span class='button-icon'><i class='el-icon-d-caret'></i></span>
<span class='button-icon'><i class='el-icon-d-caret'></i></span>
<el-button type='primary' class='button-color addbutton' @click='$router.push({name:"addOrder"})'>新建工单</el-button>
</div>
<div class="all-orders-box">
<div class="all-order-content">
<div class="all-order-box" v-for='(item,index) in tableData' :key='index' @click='checkDetail(item)'>
<div class="all-box-top">
<span class='type'>保内</span>
美的洗衣机--清理
<div class="all-box-topright">
<i class='el-icon-share' @click.stop=''></i>
<i class='el-icon-star-on' @click.stop=''></i>
<i class='el-icon-news' @click.stop=''></i>
</div>
</div>
<div class="all-box-bottom">
<el-row>
<el-col :span="8">
<div class="all-box-mess1">
<p>张先生 15676758907</p>
<span>广东 深圳 福田 深南大道1102号招商大厦1102房</span>
</div>
</el-col>
<el-col :span="8">
<div class="all-box-mess2">
<p>
机型：
<span>KFR-35GW/NhEaB1W（2台）</span>
</p>
<p>授权点：<span>精诚美好生活维修</span></p>
</div>
</el-col>
<el-col :span="6">
<div class="all-box-mess3">
<p>
创建时间：<span>05-06 11:09</span>
</p>
<p>
已 创 建：<span>23时18分</span>
</p>
</div>
</el-col>
<el-col :span="2">
<span class='all-box-status'>{{item.statusText}}</span>
</el-col>
</el-row>
</div>
</div>
</div>
</div>
<div class="table_bottm">
<el-pagination @current-change="handleCurrentChange" background :current-page="table.current_page" layout="total, prev, pager, next" :page-size="15" :pager-count="table.page_count" :total="table.total">
</el-pagination>
</div>
<component :is="modal" @close="closeChild" :modalData="modalData"></component>
</div>
</template>
<script>
import Detail from './dialog/Detail.vue'
export default{
data(){
return{
search:{
type:'',time:'',options1:[],options2:[],name:''
},
tableData:[
{id:'1',statusText:'待派单'},
{id:'2',statusText:'待分配'},
{id:'3',statusText:'待完工'},
{id:'4',statusText:'待确权'},
{id:'5',statusText:'已完成'},
{id:'6',statusText:'已退回'}
],
table:{
current_page:1,page_count:7,total:50,
},
modal:null,modalData:{},
}
},
methods:{
handleCurrentChange(page) {
},
closeChild(){
this.modal = null
},
checkDetail(item){
console.log(4444)
this.modalData = item;
this.modal = Detail;
}
}
}
</script>
<style>
.all-order .all-order-serch{
background: #ffffff;
padding: 10px;
}
.all-order .all-order-serch .seach-select{
}
.all-order .all-order-serch .seach-select .el-input__inner,.all-order .all-order-serch .seach-select .el-input{
width: 120px !important;
background: #F1F3F9;
border: none;
}
.all-order .all-order-serch .seach-input .el-input__inner,.all-order .all-order-serch .seach-input {
width: 298px;
}
.button-color{
background: #5874D8;
}
.button-icon{
background: rgba(88,116,216,0.1) ; padding: 10px 8px;
border-radius: 4px;
}
.button-icon i {
font-size: 22px;color: #5874D8;
vertical-align:middle;
}
.addbutton{float: right;}
.all-orders-box{
position: absolute;
left: 0;
right: 0;
bottom: 50px;
top: 64px;
overflow: auto;
}
.all-order-content{
width: 1180px;
/*height: 100%;*/
position: relative;
}
.all-order-box{
width: 100%;
background: #EEF1FB;
height: 104px;
margin-top: 10px;
box-shadow: 3px 0px 5px 0px rgba(43,67,153,0.2);
}
.all-box-top{
height: 42px;
line-height: 42px;
}
.all-box-top .type{
background: #486DED;
color: #ffffff;
padding: 3px 6px;
margin-right: 10px;
}
.all-box-topright{
float: right;
}
.all-box-topright i {
color: #5874D8;margin-right: 20px;
font-size: 20px;
}
.all-box-bottom{
background: #ffffff;
height: 62px;
}
.all-box-bottom .all-box-mess1,.all-box-bottom .all-box-mess2,.all-box-bottom .all-box-mess3{
height: 62px;
line-height: 1.5;
padding-left: 20px;
}
.all-box-bottom .all-box-mess1,.all-box-bottom .all-box-mess2{
border-right: 1px solid #ececec;
}
.all-box-bottom .all-box-mess1 p{
color: #5874D8;padding-top: 8px;
}
.all-box-bottom .all-box-mess1 span{
font-size: 12px;
}
.all-box-bottom .all-box-mess2,.all-box-bottom .all-box-mess3{
line-height: 1.8;
}
.all-box-bottom .all-box-mess2 p,.all-box-bottom .all-box-mess3 p{
color: #999;
font-size: 12px;
}
.all-box-bottom .all-box-mess2 p:nth-child(1),.all-box-bottom .all-box-mess3 p:nth-child(1){
padding-top: 8px;
}
.all-box-bottom .all-box-mess2 p span,.all-box-bottom .all-box-mess3 p span{
color: #333;
font-size: 12px;
}
.all-box-bottom .all-box-status{
text-align: right;
line-height: 62px;
padding-right:20px;
cursor: pointer;
font-size:16px;
font-family:PingFangSC-Regular;
font-weight:400;
}
.table_bottm{
text-align: center;
padding-top: 20px;
position: absolute;
bottom: 15px;
left: 0;
right: 0;
}
</style>
\ No newline at end of file
src/views/orders/Index.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<div class="order">
<div class='order-left'>
<div class="order-title">工单中心</div>
<el-menu :default-active="activeIndex" :unique-opened="false" @select="handleSelect" background-color="#ffffff" text-color="#666" class='order-menu'>
<el-menu-item :index="item.value" :key='index' v-for='(item,index) in menus' >
<i :class="item.icon"></i>
{{item.name}}
</el-menu-item>
</el-menu>
</div>
<div class="order-right">
<component :is="modal" ></component>
</div>
</div>
</template>
<script>
import VAll from './AllOrder.vue'
export default {
data(){
return{
activeIndex:'9',tabindex:'9',modal:VAll,
menus:[
{name:'待派单',value:'1',icon:'el-icon-upload2'},
{name:'未分配',value:'2',icon:'el-icon-sort'},
{name:'未预约',value:'3',icon:'el-icon-date'},
{name:'未完工',value:'4',icon:'el-icon-warning'},
{name:'超约未完工',value:'5',icon:'el-icon-upload'},
{name:'未确认',value:'6',icon:'el-icon-question'},
{name:'已退回',value:'7',icon:'el-icon-news'},
{name:'取消工单',value:'8',icon:'el-icon-close'},
{name:'所有工单',value:'9',icon:'el-icon-tickets'},
],
}
},
wacth:{
},
methods:{
handleSelect(key, keyPath) {
this.tabindex = key;
},
handleSelect(key, keyPath) {
this.tabindex = key;
switch(Number(key)){
case 9:
this.modal = VAll
break;
default:
this.modal = null
break;
}
},
}
}
</script>
<style>
.order{
width: 1400px;
height: 100%;
margin: auto;
}
.order-left{
width: 198px;
height: 100%;
background: #ffffff;
float: left;
}
.order-left .order-title{
color: #5874D8;
text-align: center;
font-size: 18px;
height: 64px;
line-height: 64px;
border-bottom: 1px solid #ececec;
}
.order-menu .el-menu-item.is-active{
background-color: rgba(88,116,216,0.1) !important;
position: relative;
}
.order-menu .el-menu-item.is-active:before{
content: '';
position: absolute;
width: 3px;
height: 20px;
left: 0;
top: 20px;
background: #50B5FC
}
.order-right{
/* float: right;
width: 1180px;*/
float: right;
width: 1180px;
height: 100%;
position: relative;
}
</style>
\ No newline at end of file
src/views/orders/add/AddOne.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<div>
<div class="add-order-rightTitle">
新建工单
<el-button type="primary" plain size='mini' style='float:right;margin-top:20px' @click='reback()'>返回</el-button>
</div>
<div class="add-order-content">
<el-form :model="addData.form" :rules="addData.rules" ref="form1" label-width="100px" class="inputword" >
<el-row :gutter="20">
<el-col :span='10' >
<el-form-item prop="tel" label='用户电话：' style=" " >
<el-input v-model='addData.form.tel' placeholder='请输入电话号码'></el-input>
</el-form-item>
</el-col>
<el-col :span='14' >
<el-input v-model='addData.form.phone' placeholder='备用电话'></el-input>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span='10' >
<el-form-item prop="name" label='用户姓名：' style=" " >
<el-input v-model='addData.form.name' placeholder='请输入用户姓名'></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span='10' >
<el-form-item prop="address" label='地址：' style=" " >
<el-input v-model='addData.form.address' placeholder='请选择地址'></el-input>
</el-form-item>
</el-col>
<el-col :span='14' >
<el-input v-model='addData.form.local' placeholder='详细地址'></el-input>
</el-col>
</el-row>
<el-form-item prop="type" label='服务类型：' style=" " >
<el-radio v-model="addData.form.type" label="1" border size="medium">安装</el-radio>
<el-radio v-model="addData.form.type" label="2" border size="medium">维修</el-radio>
<el-radio v-model="addData.form.type" label="3" border size="medium">检查</el-radio>
</el-form-item>
<el-form-item prop="date" label='质 保 期：' style=" " >
<el-radio v-model="addData.form.date" label="1" border size="medium">保内</el-radio>
<el-radio v-model="addData.form.date" label="2" border size="medium">保外</el-radio>
</el-form-item>
<el-row :gutter="20">
<el-col :span='10' >
<el-form-item prop="product_type" label='产品型号：' style=" " >
<el-select v-model="addData.form.product_type" placeholder="请选择">
<el-option v-for="item in addData.form.options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span='10' >
<el-form-item prop="num" label='数量：' style=" " >
<el-input v-model='addData.form.num' placeholder='请输入数量' type='number'></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item label='描述：' style=" " >
<el-input v-model='addData.form.remark' type='textarea'></el-input>
</el-form-item>
<el-row :gutter="20">
<el-col :span='10' >
<el-form-item label='快速派单：' style=" " >
<el-input v-model='addData.form.auth' placeholder='请输入授权点' ></el-input>
</el-form-item>
</el-col>
</el-row>
<el-button class='save' @click='saveFun("form1")'>保存</el-button>
</el-form>
</div>
</div>
</template>
<script>
export default {
data(){
return{
addData:{
form:{
tel:'',phone:'',name:'',address:'',local:'',type:'',date:'',product_type:'',options:[],num:'',remark:'',auth:''
},
rules:{
tel:[{required: true, message: '请输入电话号码', trigger: 'blur' }],
name:[{required: true, message: '请输入用户姓名', trigger: 'blur' }],
address:[{required: true, message: '请选择地址', trigger: 'blur' }],
type:[{required: true, message: '请选择类型', trigger: 'blur' }],
date:[{required: true, message: '请选择质保期', trigger: 'blur' }],
product_type:[{required: true, message: '请选择产品型号', trigger: 'blur' }],
num:[{required: true, message: '请输入数量', trigger: 'blur' }],
}
}
}
},
methods:{
saveFun(formName){
const self = this;
self.$refs[formName].validate((valid) => {
if (valid) {
} else {
return false;
}
});
},
reback(){
this.$router.back(-1)
}
}
}
</script>
<style>
.add-order-right .add-order-rightTitle{
height: 64px;
line-height: 64px;
position: relative;
padding-left: 20px;
color: #5B76D1;
font-weight:500;
font-size: 20px;
}
.add-order-right .add-order-rightTitle:before{
position: absolute;
content: '';
left: 0;
top: 20px;
width: 6px;
height: 24px;
background: #50B4FC;
}
.add-order-right .add-order-content{
background: #ffffff;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 64px;
padding: 20px;
overflow: auto;
}
.add-order-right .add-order-content form{
width: 800px;
}
.add-order-right .add-order-content form .el-radio__input{
display: none;
}
.add-order-right .add-order-content form .el-radio{
margin-right: 0;
}
.add-order-right .add-order-content form .save{
background: #5774D8;
color: #ffffff;
width: 115px;
margin-left: 100px;
margin-top: 20px;
}
</style>
\ No newline at end of file
src/views/orders/add/ExportAll.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<div>
export all
</div>
</template>
\ No newline at end of file
src/views/orders/add/ExportJD.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<div>
export JD
</div>
</template>
\ No newline at end of file
src/views/orders/add/ExportTM.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<div>
export TM
</div>
</template>
\ No newline at end of file
src/views/orders/add/OneKey.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<div>
<div class="add-order-rightTitle">
新建工单
<el-button type="primary" plain size='mini' style='float:right;margin-top:20px' @click='reback()'>返回</el-button>
</div>
<div class="add-order-content">
<div class="title">
文本框内可输入<span>用户信息</span>、<span>产品信息</span>等;<br>
(信息之间用空格或换行，系统会自动匹配并完成工单创建.)
</div>
<el-input class='textarea' type="textarea" :autosize="{ minRows: 10, maxRows: 26}" placeholder="" v-model="inputValue"></el-input>
<el-button type="primary" size='mini' style=' '>确定</el-button>
</div>
</div>
</template>
<script>
export default{
data(){
return{
inputValue:''
}
},
methods:{
reback(){
this.$router.back(-1)
}
}
}
</script>
<style>
.add-order-right .add-order-content .title{
font-size: 12px;
font-family: PingFangSC-Medium;
font-weight: 500;
color: #8F97A4;
}
.add-order-right .add-order-content .title span{
color: #5B76D1;
}
.add-order-right .add-order-content .textarea{
margin-top: 20px;
}
.add-order-right .add-order-content button{
margin-top: 20px;background: rgb(87, 116, 216);width: 90px;
}
</style>
\ No newline at end of file
src/views/orders/dialog/Detail.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<el-dialog :title="dialog.title" :visible.sync="dialog.show" custom-class='order-detail animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'>
<el-tabs v-model="dialog.tab" type="card" @tab-click="handleClick">
<el-tab-pane label="详情" name="1" >
<h2>派单信息</h2>
<div class='order-detail-tab'>
<p>
用 户: <span>张女士 13711387865</span>
</p>
<p>地 址：<span>广东深圳福田深南大道招商银行大厦1101</span></p>
<p>产 品：<span>格力 空调 KFR-35GW/NhEaB1W （安装1台）</span></p>
<p>授权点：<span>唯修汇（张师傅 13644442222）</span></p>
<p>描述：<span>请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽</span></p>
</div>
<h2>工单履历</h2>
<div>
<div class="order-detail-steps" style="">
<el-steps direction="vertical" :active="1">
<el-step title="客服：结算确权 " description='03-13 18:30:02'></el-step>
<el-step title="张师傅：完工" description=' 03-13 18:30:02'></el-step>
<el-step title="张师傅：改预约时间（03-13 10:00），备注：用户明天回 " description='03-13 18:30:02'></el-step>
<el-step title="张师傅：改预约时间（03-12 11:00），备注：用户出差不在家，已经协调修改预约时间" description='03-13 18:30:02'></el-step>
<el-step title="客服：结算确权" description='03-13 18:30:02'></el-step>
<el-step title="系统：派单给唯修汇 " description='03-13 18:30:02'></el-step>
</el-steps>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="反馈" name="2">
<div class="order-request-box">
<div class="order-detail-response">
<div v-for='(item,index) in resdata.talks' :key='index'>
<el-row v-if='item.type==1' class="right-response">
<el-col :span="22">
<div class="right-response-text" >{{item.value}}</div>
</el-col>
<el-col :span="2">
<img src="../../../assets/images/man.jpg" alt="" width="42px" height="42px">
</el-col>
</el-row>
<el-row v-if='item.type==0' class="left-response">
<el-col :span="2">
<img src="../../../assets/images/women.jpg" alt="" width="42px" height="42px">
</el-col>
<el-col :span="22">
<div class="left-response-text" >{{item.value}}</div>
</el-col>
</el-row>
<div v-if='item.type==2' class="timestep">2019-5-16-09</div>
</div>
</div>
<div class="order-detail-request">
<div class="plus" style=''>
<el-upload title="点击选取或更换图片" :action="uploadApi" name="img" :show-file-list="false" :on-success="handleAvatarSuccess1" :before-upload="beforeAvatarUpload1" :on-error='uploaderror'>
<i class='el-icon-plus' ></i>
</el-upload>
</div>
<el-input class='order-input-area' v-model='resdata.inputValue'></el-input>
<el-button style="margin-left:10px">发送</el-button>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="确权" name="3">
<h2>结算信息</h2>
<div class='order-detail-tab' style="line-height:2.5">
<p>
基 本: <span>安装--新机安装*1¥200.00</span>
</p>
<p>
其 他:
<el-input class="seach-input" placeholder='其他项目'></el-input>
</p>
<p>
金 额:
<el-input class="seach-input" placeholder='其他项目'></el-input>
</p>
</div>
<div class='order-detail-tab' style="line-height:2.5">
<p>
备 注:
<el-input class="seach-area" placeholder='打回必填'></el-input>
<el-button size='mini'>确权</el-button>
<el-button size='mini'>返回</el-button>
</p>
</div>
<h2>完工信息</h2>
<div class='order-detail-tab' style="line-height:2.5;border:none">
<el-row>
<el-col :span="12">
<p>授 权 点: <span> 唯修汇 （张三 15599991111）</span></p>
</el-col>
<el-col :span="12">
<p>内 机 码: <span>421362871684921</span> </p>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<p>完 工: <span>03-28 10:09:12</span> </p>
</el-col>
<el-col :span="12">
<p>外 机 码: <span>421362871684921</span></p>
</el-col>
</el-row>
<p>
产品信息: <span>格力 空调 KFR-35GW/NhEaB1W</span>
</p>
<p>
完工图片: <span>（6张）</span>
</p>
<div class="order-carousel">
<el-carousel :interval="4000" type="card" height="100px" :autoplay='false' arrow="always">
<el-carousel-item v-for="item in 6" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
<p>
完工备注注:
<span>请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽</span>
</p>
</div>
</el-tab-pane>
<el-tab-pane label="范围" name="4">
<h2>服务区域</h2>
<div class='order-detail-tab' style="padding:20px;line-height:3">
<span class='tag' v-for='(item,index) in 9' :key='index'>
<i class='el-icon-location'></i>广东-深圳
</span>
</div>
<h2>服务品类</h2>
<div class='order-detail-tab' style="padding:20px;line-height:3;border:none">
<span class='tag' v-for='(item,index) in 2' :key='index'>
空调
</span>
</div>
</el-tab-pane>
<el-tab-pane label="授权码" name="5">
<h2>授权信息</h2>
<div class='order-detail-tab' style="border:none">
<p>授权ID:<span>31E8792IWE73</span></p>
<p>授权密钥:<span>31E8792IWE7331E8792IWE7331E8792IWE73</span></p>
<p>接单方式一：<span>API对接</span></p>
<p>接单方式二：<span>小程序</span></p>
</div>
<div class="wechat"></div>
<div class="wechatTip">扫一扫，登录小程序</div>
</el-tab-pane>
</el-tabs>
</el-dialog>
</template>
<script>
export default{
props: {
//父组件调用时传进来的参数
modalData: Object
},
data(){
return{
detail:{ },uploadApi:'',
resdata:{
inputValue:"",
talks:[
{
type:'1',value:'不制冷 用户报修麻烦处理',
},
{
type:'0',value:'用户不同意维修，想换机',
},
{
type:'2',value:'2019-5-16-09',
},
{
type:'1',value:'新机已发：申通快递，5313865831164，请把机器寄回总部请把机器寄回总部请把机器寄回总部请把机器寄回总部请把机器寄回总',
}
]
},
message:{ },
dialog:{
show:true,title:'工单（GLDQ0019211237）--待确权',tab:'1',
},
}
},
methods:{
handleClose() {
this.$emit('close')
},
handleClick(){
},
/*********上传图片 start************/
handleAvatarSuccess1(res, file) {
},
beforeAvatarUpload1(file) {
const isJPG = (file.type == 'image/jpeg' || file.type == 'image/png');
var limit = 200;
const isLimit = file.size / 1024 <= limit;
if (!isLimit) {
this.$message({ duration:3000,message:'上传图片大小不能超过'+limit+'k!', type: 'error' });
}
if (!isJPG) {
this.$message.error('支持jpg/png格式!');
}
return isLimit && isJPG;
},
uploaderror(err, file, fileList){
var res = JSON.parse(err.message)
this.$message({ duration:3000,message:res.message, type: 'error' });
},
/*********上传图片 end************/
}
}
</script>
<style>
/********************详情start*******************/
.order-detail{
width: 720px;
height: 670px;
}
.el-dialog__wrapper{
overflow: hidden !important;
}
.order-detail h2{
padding-left: 20px;
}
.order-detail .el-tabs--card>.el-tabs__header{
padding: 0 20px;
}
.order-detail .el-dialog__body{
padding:30px 0;
}
.order-detail .el-dialog__header{
background: #6C8BF8;
}
.order-detail .el-dialog__header .el-dialog__title,.order-detail .el-dialog__header .el-dialog__headerbtn i{
color: #ffffff;
}
.order-detail .order-detail-tab{
margin-top: 5px;
line-height: 2;
border-bottom: 1px solid #ececec;
padding-bottom: 10px;
margin-bottom: 10px;
padding-left: 20px;
}
.order-detail .order-detail-tab p{
color: #999;
font-size: 12px;
}
.order-detail .order-detail-tab span{
color: #333;
font-size: 12px;
}
.order-detail-steps {
height: 300px;
margin-top: 10px;
padding-left: 20px;
}
.order-detail-steps .el-step.is-vertical .el-step__title{
font-size: 14px;
}
.order-detail .order-request-box{
position: relative;
height: 530px;
}
.order-detail .order-detail-request{
background: #ececec;
position: absolute;bottom: 0;
left:0;
right: 0;
height: 54px;
}
.order-detail .order-detail-request .plus{
border: 1px solid #333;
width: 30px;
height: 30px;
margin-top: 10px;
margin-left: 20px;
float: left;
border-radius: 5px;
}
.order-detail .order-detail-request .plus i{
font-size: 29px;
}
.order-detail .order-detail-request .order-input-area .seach-input .el-input__inner,.order-detail .order-detail-request .order-input-area {
width: 540px;
margin-top: 6px;
margin-left: 20px;
}
.order-detail .seach-input .el-input__inner,.order-detail .seach-input {
width: 200px;
height: 25px;
}
.order-detail .seach-area .el-input__inner,.order-detail .seach-area {
width: 430px;
width: 490px;
height: 28px;
margin-right: 20px;
}
/**********************反馈start*************************/
.order-detail .order-detail-response{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 54px;
overflow: auto;
}
.order-detail .order-detail-response .right-response,.order-detail .order-detail-response .left-response{
width: 95%;
margin: auto;
margin-bottom: 15px;
}
.order-detail .order-detail-response .right-response img {
float: right;
border-radius: 50%;
}
.order-detail .order-detail-response .left-response img{
float: left;
border-radius: 50%;
}
.order-detail .order-detail-response .right-response-text{
background: #ececed;
margin-top: 4px;
padding: 8px 10px;
max-width: 380px;
float: right;
border-radius: 5px;
}
.order-detail .order-detail-response .left-response-text{
background: #ececed;
margin-top: 4px;
padding: 8px 10px;
max-width: 380px;
float: left;
border-radius: 5px;
}
.order-detail .order-detail-response .timestep{
font-size: 12px;
color: #999;
margin: auto;
text-align: center;
position: relative;
margin-bottom:15px;
}
.order-detail .order-detail-response .timestep::before{
content: '';
position: absolute;
width: 200px;
height: 1px;
left: 87px;
top: 8px;
background: #ececec;
}
.order-detail .order-detail-response .timestep::after{
content: '';
position: absolute;
width: 200px;
height: 1px;
right: 87px;
top: 8px;
background: #ececec;
}
/************************确权start******************************/
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 100px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
.order-carousel{
width: 600px;
margin: auto;
}
/*******************************范围start******************************/
.order-detail-tab .tag{
background: #F1F3F8;
padding: 5px 14px;
border-radius: 3px;
margin-right: 20px;
color:#999999 !important;
}
.order-detail-tab .tag i{
color: #3B4B84;
font-size: 14px;
}
/*******************************授权start******************************/
.el-tabs .wechat{
width: 180px;
height: 180px;
background: #ececec;
margin: auto;
margin-top: 50px;
}
.el-tabs .wechatTip{
text-align: center;
margin-top: 10px;
font-size: 12px;
color: #999;
}
</style>
src/views/root/Header.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<div class="header">
<div class="header-content">
<div class="header-logo">
<img src="@/assets/images/dog.jpeg" alt="" width="42px" height="42px">
<p class='header-title'>Hi!隔壁老王</p>
</div>
<div class="header-side">
<el-menu mode="horizontal" :router="true" :unique-opened="true" :default-active="onRoutes" background-color="#708DF1" text-color="#ffffff" active-text-color="#708DF1" class='mian_side'>
<el-menu-item :index="item.value" :key='index' v-for='(item,index) in menus' >
<i :class="item.icon"></i>{{item.name}}
</el-menu-item>
</el-menu>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
onRoutes:'',
menus:[
{name:'首页',value:'/main',icon:'el-icon-menu'},
{name:'工单',value:'/orders',icon:'el-icon-tickets'},
{name:'结算',value:'/settlement',icon:'el-icon-printer'},
{name:'合作',value:'/cooperate',icon:'el-icon-refresh'},
{name:'消息',value:'/message',icon:'el-icon-service'},
{name:'设置',value:'/set',icon:'el-icon-setting'},
],
}
},
watch:{
$route:function(){
if(this.$route.name=='addOrder'){
// this.
}
}
},
mounted(){
this.onRoutes = this.$route.path;
}
}
</script>
<style>
.header{
height:60px;
background:rgba(112,141,241,1);
}
.header-content{
width: 1400px;
height: 100%;
margin: auto;
}
.header-logo{
width: 198px;height: 100%;background:rgba(72,109,237,1);float: left;
}
.header-logo img{
margin-top: 10px;
margin-left: 10px;
border-radius: 50%;
float: left;
}
.header-title{
height: 100%;
color: rgba(255,255,255,1);
float: left;
line-height: 60px;
margin-left: 10px;
}
.header-side{
float: right;
height: 100%;
line-height: 60px;
}
.header .header-side .mian_side{
height: 40px;
overflow: hidden;
margin-top: 20px;
border-bottom: none;
}
.header .header-side .mian_side .el-menu-item{
line-height: 3;
height: 40px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
color: #ffffff;
}
.header .header-side .mian_side .el-menu-item i{
color: #ffffff
}
.header .header-side .mian_side .el-menu-item.is-active{
border-bottom: 2px solid #F5F5F5;
color: #708DF1;
background-color: #F5F5F5 !important;
border-bottom-color: #F5F5F5 !important;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.header .header-side .mian_side .el-menu-item.is-active i{
color: #708DF1
}
</style>
\ No newline at end of file
src/views/root/Home.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<div>
<v-header></v-header>
<div class="content">
<router-view ></router-view>
</div>
</div>
</template>
<script>
import VHeader from './Header.vue'
export default{
components:{
VHeader
},
data(){
return{
}
}
}
</script>
<style>
.content{
/*background: #ffffff;*/
/*width: 1400px;*/
margin: auto;
position: absolute;
top: 80px;
bottom: 15px;
left: 0;
right: 0;
/*overflow: auto;*/
}
</style>
\ No newline at end of file
src/views/set/Index.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<div class="settle">
<div class='settle-left'>
<div class="settle-title">系统设置</div>
<el-menu :default-active="activeIndex" :unique-opened="false" @select="handleSelect" background-color="#ffffff" text-color="#666" class='settle-menu'>
<el-menu-item :index="item.value" :key='index' v-for='(item,index) in menus' >
<i :class="item.icon"></i>
{{item.name}}
</el-menu-item>
</el-menu>
</div>
<component :is="modal" ></component>
</div>
</template>
<script>
import Server from './Server.vue'
import Product from './Product.vue'
import Protect from './Protect.vue'
export default {
data(){
return{
activeIndex:'1',tabindex:'1',modal:Product,
menus:[
{name:'产品维护',value:'1',icon:'el-icon-upload2'},
{name:'服务维护',value:'2',icon:'el-icon-upload2'},
{name:'包内结算',value:'3',icon:'el-icon-sort'},
],
}
},
wacth:{
},
methods:{
handleSelect(key, keyPath) {
this.tabindex = key;
switch(Number(key)){
case 1:
this.modal = Product
break;
case 2:
this.modal = Server
break;
case 3:
this.modal = Protect
break;
default:
this.modal = null
break;
}
},
handleCurrentChange(page) {
},
}
}
</script>
<style>
.settle{
width: 1400px;
height: 100%;
margin: auto;
}
.settle-left{
width: 198px;
height: 100%;
background: #ffffff;
float: left;
}
.settle-left .settle-title{
color: #5874D8;
text-align: center;
font-size: 18px;
height: 64px;
line-height: 64px;
border-bottom: 1px solid #ececec;
}
.settle-menu .el-menu-item.is-active{
background-color: rgba(88,116,216,0.1) !important;
position: relative;
}
.settle-menu .el-menu-item.is-active:before{
content: '';
position: absolute;
width: 3px;
height: 20px;
left: 0;
top: 20px;
background: #50B5FC
}
</style>
\ No newline at end of file
src/views/set/Product.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<div class="settle-right">
<div class="all-settle-serch">
<el-select class="seach-select" v-model="search.type" @change='' placeholder="选择品类">
<el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options1'></el-option>
</el-select>
<el-input class="seach-input" v-model='search.name' prefix-icon="el-icon-search" placeholder='输入规格，型号名查询'></el-input>
<el-button type='primary' class='button-color'>搜索</el-button>
<el-button type='primary' plain class='button-color addbutton' @click='AddCardfun()'>新建品牌</el-button>
<el-button type='primary' class='button-color addbutton' @click='creatProduct()'>新建产品</el-button>
</div>
<div class="settle-content">
<table class="table-header">
<tr >
<td style="width:15%"><div class="text_center">产品品类</div></td>
<td style="width:85%;">
<table >
<tr>
<td style="width:25%;"><div class="text_center">产品规格</div></td>
<td style="width:75%; ">
<table >
<tr>
<td style="width:70%" class='third-table-center'><div class="text_center">产品型号</div></td>
<td style="width:30%"><div class="text_center">品牌</div></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="first-table">
<tr v-for='(item,index) in tableData' :key='index'>
<td style="width:15%"><div class="text_center cursor" @click='edictType(item)'>{{item.name}}</div></td>
<td style="width:85%;">
<table class="second-table">
<tr v-for='(items,indexs) in item.type' :key='indexs'>
<td style="width:25%;">
<div class="text_center cursor" @click='edictCate(item,items)'>{{items.cate}}</div>
</td>
<td style="width:75%; ">
<table class="third-table" >
<tr v-for='(child,key) in items.type' :key='key'>
<td style="width:70%" class='third-table-center'>
<div class="text_center"><el-button type='text' @click='edictModel(items,child)'>{{child.type}}</el-button></div>
</td>
<td style="width:30%">
<div class="text_center"><div class="text_center">{{child.name}}</div></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<component :is="modal" @close="closeChild" :modalData="modalData"></component>
</div>
</template>
<script>
import AddProduct from './dialog/product/AddProduct.vue'
import AddCard from './dialog/product/AddCard.vue'
import AddType from './dialog/product/AddType.vue'
import AddCate from './dialog/product/AddCate.vue'
import AddModel from './dialog/product/AddModel.vue'
export default {
data(){
return{
modal:null,modalData:[],
search:{
type:'',status:'',options1:[],options2:[],name:''
},
table:{
current_page:1,page_count:7,total:50,
},
tableData:[
{
id:1,
name: '空调',
type:[
{
cate:'定频1.5p',
id:1,
type:[
{
id:1,
type:'KFR-25GW/NFW+2',
name:'海尔'
},
{
id:2,
type:'KFR-25GW/NFW+2',
name:'海尔'
},
]
},
{
cate:'定频1.5p',
id:2,
type:[
{
id:3,
type:'KFR-25GW/NFW+2',
name:'海尔'
},
{
id:4,
type:'KFR-25GW/NFW+2',
name:'海尔'
},
{
id:7,
type:'KFR-25GW/NFW+2',
name:'海尔'
},
]
},
{
cate:'定频1.5p',
id:3,
type:[
{
id:5,
type:'KFR-25GW/NFW+2',
name:'海尔'
},
]
},
{
cate:'定频1.5p',
id:4,
type:[
{
id:6,
type:'KFR-25GW/NFW+2',
name:'海尔'
},
{
id:6,
type:'KFR-25GW/NFW+2',
name:'海尔'
},
{
id:6,
type:'KFR-25GW/NFW+2',
name:'海尔'
},
{
id:6,
type:'KFR-25GW/NFW+2',
name:'海尔'
},
]
}
]
},
],
chooseData:[]
}
},
wacth:{
},
methods:{
opendialog(row){
if(row.status==1){
this.modalData = row;
this.modal = SettleDetail;
}else if(row.status==3){
this.modalData = row;
this.modal = PayDetail;
}else if(row.status==2){
this.modalData = row;
this.modal = Pay;
}
},
closeChild(){
this.modal = null;
},
creatProduct(){
this.modalData = {};
this.modal = AddProduct;
},
AddCardfun(){
this.modalData = {type:'creat'};
this.modal = AddCard;
},
edictType(item){
this.modalData = {type:'edict',id:item.id};
this.modal = AddType;
},
edictCate(item,items){
this.modalData = {type:'edict',id:items.id,cate:items.cate,name:item.name};
this.modal = AddCate;
},
edictModel(item,items){
this.modalData = {type:'edict',id:items.id,name:item.cate,cate:items.type,card:items.name};
console.log(this.modalData,items)
this.modal = AddModel;
}
}
}
</script>
<style>
.settle-content table{
width: 100%;
border-collapse: separate;
border-spacing: 0px 0px;
}
.settle-content .first-table{
border:1px solid #ececec;
margin-top: 10px;
}
.settle-content .second-table{
border-left: 1px solid #ececec;
}
.settle-content .second-table td:not(:last-child){
border-bottom: 1px solid #ececec;
}
.settle-content .third-table{
border-left: 1px solid #ececec;
}
.settle-content .third-table td{
border-bottom: 1px solid #ececec;
}
.settle-content .third-table .third-table-center{
border-left: 1px solid #ececec;
border-right: 1px solid #ececec;
}
.settle-content .table-header{
background: #EEF1FB;
text-align: center;
height: 38px;
line-height: 38px;
}
.settle-right{
float: right;
width: 1180px;
height: 100%;
position: relative;
background: #ffffff;
}
.settle-right .all-settle-serch{
background: #ffffff;
padding: 10px;
position: relative;
}
.all-settle-serch:after{
position: absolute;
content: '';
left: 20px;
right: 20px;
bottom: 0;
height:1px;
background: #ececec;
}
.settle-right .all-settle-serch .seach-select .el-input__inner,.settle-right .all-settle-serch .seach-select .el-input{
width: 120px !important;
background: #F1F3F9;
border: none;
}
.settle-right .all-settle-serch .seach-input .el-input__inner,.settle-right .all-settle-serch .seach-input {
width: 298px;
}
.button-color{
background: #5874D8;
}
.button-icon{
background: rgba(88,116,216,0.1) ; padding: 10px 8px;
border-radius: 4px;
}
.button-icon i {
font-size: 22px;color: #5874D8;
vertical-align:middle;
}
.addbutton{float: right;}
.settle-right .settle-bottom{
position: absolute;
left: 0;
right: 0;
text-align: center;
bottom: 15px;
}
.settle-right .settle-content{
position: absolute;
left: 0;
right:0;
top: 60px;
bottom: 50px;
overflow: auto;
padding: 15px;
}
</style>
\ No newline at end of file
src/views/set/Protect.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<div class="settle-right">
<div class="all-settle-serch">
<el-select class="seach-select" v-model="search.type" @change='' placeholder="选择品类">
<el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options1'></el-option>
</el-select>
<el-select class="seach-select" v-model="search.status" @change='' placeholder="选择类型">
<el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options2'></el-option>
</el-select>
<!-- <el-input class="seach-input" v-model='search.name' prefix-icon="el-icon-search" placeholder='输入项目名，合作商名查询'></el-input> -->
<el-button type='primary' class='button-color'>搜索</el-button>
<el-button type='primary' class='button-color addbutton' @click=''>新建</el-button>
</div>
<div class="settle-content">
<table class="table-header">
<tr >
<td style="width:15%"><div class="text_center">品类名称</div></td>
<td style="width:85%;">
<table >
<tr>
<td style="width:15%;"><div class="text_center">服务类型</div></td>
<td style="width:85%; ">
<table >
<tr>
<td style="width:20%"> <div class="text_center">服务分类</div></td>
<td style="width:70%" class='third-table-center'><div class="text_center">服务措施</div></td>
<td style="width:10%"><div class="text_center">操作</div></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="first-table">
<tr v-for='(item,index) in tableData' :key='index'>
<td style="width:15%"><div class="text_center">{{item.name}}</div></td>
<td style="width:85%;">
<table class="second-table">
<tr v-for='(items,indexs) in item.type' :key='indexs'>
<td style="width:15%;">
<div class="text_center">{{items.name}}</div>
</td>
<td style="width:85%; ">
<table class="third-table" >
<tr v-for='(child,key) in items.type' :key='key'>
<td style="width:20%">
<div class="text_center">{{child.name}}</div>
</td>
<td style="width:70%" class='third-table-center'>
<div class="text_center">{{child.cate}}</div>
</td>
<td style="width:10%">
<div class="text_center"><el-button type='text'>操作</el-button></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<component :is="modal" @close="closeChild" :modalData="modalData"></component>
</div>
</template>
<script>
// import Settle from './dialog/Settle.vue'
// import SettleDetail from './dialog/SettleDetail.vue'
// import PayDetail from './dialog/PayDetail.vue'
// import Pay from './dialog/Pay.vue'
export default {
data(){
return{
modal:null,modalData:[],
search:{
type:'',status:'',options1:[],options2:[],name:''
},
table:{
current_page:1,page_count:7,total:50,
},
tableData:[
{
name: '空调',
type:[
{
name:'安装',
type:[
{
name:'安装',
cate:'定频1.5p',price:'8'
},
{
name:'拆机',
cate:'定频1.5p',price:'8'
},
]
},
{
name:'维修',
type:[
{ name:'大修',
cate:'定频1.5p',price:'8'
},
{ name:'中修',
cate:'定频1.5p',price:'8'
},
{ name:'小修',
cate:'定频1.5p',price:'8'
},
]
},
{
name:'安装',
type:[
{
name:'安装',
cate:'定频1.5p',price:'8'
},
{
name:'拆机',
cate:'定频1.5p',price:'8'
},
]
},
{
name:'维修',
type:[
{ name:'大修',
cate:'定频1.5p',price:'8'
},
{ name:'中修',
cate:'定频1.5p',price:'8'
},
{ name:'小修',
cate:'定频1.5p',price:'8'
},
]
}
]
},
],
chooseData:[]
}
},
wacth:{
},
methods:{
handleCurrentChange(page) {
},
checkData(row,event, column){
console.log(row.status)
},
opendialog(row){
if(row.status==1){
this.modalData = row;
this.modal = SettleDetail;
}else if(row.status==3){
this.modalData = row;
this.modal = PayDetail;
}else if(row.status==2){
this.modalData = row;
this.modal = Pay;
}
},
closeChild(){
this.modal = null;
},
handleSelectionChange(val){
this.chooseData = val;
console.log(val)
},
settleFun(){
if(this.chooseData.length>0){
this.modalData = this.chooseData;
this.modal = Settle
}else{
this.$message({ message: '请选择数据', type: 'warning' });
}
}
}
}
</script>
<style>
.settle-content table{
width: 100%;
border-collapse: separate;
border-spacing: 0px 0px;
}
.settle-content .first-table{
border:1px solid #ececec;
margin-top: 10px;
}
.settle-content .second-table{
border-left: 1px solid #ececec;
}
.settle-content .second-table td:not(:last-child){
border-bottom: 1px solid #ececec;
}
.settle-content .third-table{
border-left: 1px solid #ececec;
}
.settle-content .third-table td{
border-bottom: 1px solid #ececec;
}
.settle-content .third-table .third-table-center{
border-left: 1px solid #ececec;
border-right: 1px solid #ececec;
}
.settle-content .table-header{
background: #EEF1FB;
text-align: center;
height: 38px;
line-height: 38px;
}
.settle-right{
float: right;
width: 1180px;
height: 100%;
position: relative;
background: #ffffff;
}
.settle-right .all-settle-serch{
background: #ffffff;
padding: 10px;
position: relative;
}
.all-settle-serch:after{
position: absolute;
content: '';
left: 20px;
right: 20px;
bottom: 0;
height:1px;
background: #ececec;
}
.settle-right .all-settle-serch .seach-select .el-input__inner,.settle-right .all-settle-serch .seach-select .el-input{
width: 120px !important;
background: #F1F3F9;
border: none;
}
.settle-right .all-settle-serch .seach-input .el-input__inner,.settle-right .all-settle-serch .seach-input {
width: 298px;
}
.button-color{
background: #5874D8;
}
.button-icon{
background: rgba(88,116,216,0.1) ; padding: 10px 8px;
border-radius: 4px;
}
.button-icon i {
font-size: 22px;color: #5874D8;
vertical-align:middle;
}
.addbutton{float: right;}
.settle-right .settle-bottom{
position: absolute;
left: 0;
right: 0;
text-align: center;
bottom: 15px;
}
.settle-right .settle-content{
position: absolute;
left: 0;
right:0;
top: 60px;
bottom: 50px;
overflow: auto;
padding: 15px;
}
</style>
\ No newline at end of file
src/views/set/Server.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<div class="settle-right">
<div class="all-settle-serch">
<el-select class="seach-select" v-model="search.type" @change='' placeholder="选择品类">
<el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options1'></el-option>
</el-select>
<el-select class="seach-select" v-model="search.status" @change='' placeholder="选择状态">
<el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options2'></el-option>
</el-select>
<!-- <el-input class="seach-input" v-model='search.name' prefix-icon="el-icon-search" placeholder='输入项目名，合作商名查询'></el-input> -->
<el-button type='primary' class='button-color'>搜索</el-button>
<el-button type='primary' class='button-color addbutton' @click='AddServerFun()'>新建服务</el-button>
</div>
<div class="settle-content">
<table class="table-header">
<tr >
<td style="width:15%"><div class="text_center">品类名称</div></td>
<td style="width:85%;">
<table >
<tr>
<td style="width:15%;"><div class="text_center">服务类型</div></td>
<td style="width:85%; ">
<table >
<tr>
<td style="width:20%"> <div class="text_center">服务分类</div></td>
<td style="width:70%" class='third-table-center'><div class="text_center">服务措施</div></td>
<td style="width:10%"><div class="text_center">操作</div></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="first-table">
<tr v-for='(item,index) in tableData' :key='index'>
<td style="width:15%">
<div class="text_center">
<el-button type='text' style='color:#333'>{{item.name}}</el-button>
</div>
</td>
<td style="width:85%;">
<table class="second-table">
<tr v-for='(items,indexs) in item.type' :key='indexs'>
<td style="width:15%;">
<div class="text_center">{{items.name}}</div>
</td>
<td style="width:85%; ">
<table class="third-table" >
<tr v-for='(child,key) in items.type' :key='key'>
<td style="width:30%">
<div class="text_center">{{child.name}}</div>
</td>
<td style="width:70%" class='third-table-center'>
<div class="text_center">
<el-button type='text' style='color:#333'>{{child.cate}}</el-button>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<component :is="modal" @close="closeChild" :modalData="modalData"></component>
</div>
</template>
<script>
import AddServer from './dialog/server/AddServer.vue'
// import SettleDetail from './dialog/SettleDetail.vue'
// import PayDetail from './dialog/PayDetail.vue'
// import Pay from './dialog/Pay.vue'
export default {
data(){
return{
modal:null,modalData:[],
search:{
type:'',status:'',options1:[],options2:[],name:''
},
table:{
current_page:1,page_count:7,total:50,
},
tableData:[
{
name: '空调',
type:[
{
name:'安装',
type:[
{
name:'安装',
cate:'定频1.5p',price:'8'
},
{
name:'拆机',
cate:'定频1.5p',price:'8'
},
]
},
{
name:'维修',
type:[
{ name:'大修',
cate:'定频1.5p',price:'8'
},
{ name:'中修',
cate:'定频1.5p',price:'8'
},
{ name:'小修',
cate:'定频1.5p',price:'8'
},
]
},
{
name:'安装',
type:[
{
name:'安装',
cate:'定频1.5p',price:'8'
},
{
name:'拆机',
cate:'定频1.5p',price:'8'
},
]
},
{
name:'维修',
type:[
{ name:'大修',
cate:'定频1.5p',price:'8'
},
{ name:'中修',
cate:'定频1.5p',price:'8'
},
{ name:'小修',
cate:'定频1.5p',price:'8'
},
]
}
]
},
],
chooseData:[]
}
},
wacth:{
},
methods:{
handleCurrentChange(page) {
},
checkData(row,event, column){
console.log(row.status)
},
opendialog(row){
if(row.status==1){
this.modalData = row;
this.modal = SettleDetail;
}else if(row.status==3){
this.modalData = row;
this.modal = PayDetail;
}else if(row.status==2){
this.modalData = row;
this.modal = Pay;
}
},
closeChild(){
this.modal = null;
},
handleSelectionChange(val){
this.chooseData = val;
console.log(val)
},
settleFun(){
if(this.chooseData.length>0){
this.modalData = this.chooseData;
this.modal = Settle
}else{
this.$message({ message: '请选择数据', type: 'warning' });
}
},
AddServerFun(){
this.modalData = {type:'creat',name:'空调'};
this.modal = AddServer;
}
}
}
</script>
<style>
.settle-content table{
width: 100%;
border-collapse: separate;
border-spacing: 0px 0px;
}
.settle-content .first-table{
border:1px solid #ececec;
margin-top: 10px;
}
.settle-content .second-table{
border-left: 1px solid #ececec;
}
.settle-content .second-table td:not(:last-child){
border-bottom: 1px solid #ececec;
}
.settle-content .third-table{
border-left: 1px solid #ececec;
}
.settle-content .third-table td{
border-bottom: 1px solid #ececec;
}
.settle-content .third-table .third-table-center{
border-left: 1px solid #ececec;
border-right: 1px solid #ececec;
}
.settle-content .table-header{
background: #EEF1FB;
text-align: center;
height: 38px;
line-height: 38px;
}
.settle-right{
float: right;
width: 1180px;
height: 100%;
position: relative;
background: #ffffff;
}
.settle-right .all-settle-serch{
background: #ffffff;
padding: 10px;
position: relative;
}
.all-settle-serch:after{
position: absolute;
content: '';
left: 20px;
right: 20px;
bottom: 0;
height:1px;
background: #ececec;
}
.settle-right .all-settle-serch .seach-select .el-input__inner,.settle-right .all-settle-serch .seach-select .el-input{
width: 120px !important;
background: #F1F3F9;
border: none;
}
.settle-right .all-settle-serch .seach-input .el-input__inner,.settle-right .all-settle-serch .seach-input {
width: 298px;
}
.button-color{
background: #5874D8;
}
.button-icon{
background: rgba(88,116,216,0.1) ; padding: 10px 8px;
border-radius: 4px;
}
.button-icon i {
font-size: 22px;color: #5874D8;
vertical-align:middle;
}
.addbutton{float: right;}
.settle-right .settle-bottom{
position: absolute;
left: 0;
right: 0;
text-align: center;
bottom: 15px;
}
.settle-right .settle-content{
position: absolute;
left: 0;
right:0;
top: 60px;
bottom: 50px;
overflow: auto;
padding: 15px;
}
</style>
\ No newline at end of file
src/views/set/dialog/product/AddCard.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<el-dialog width="420px" :title="dialog.title" custom-class='addcate animated slideInRight' :visible.sync="dialog.show" @close="handleClose" append-to-body>
<el-form ref="form" :model="form" label-width="100px">
<el-form-item label="品牌名称：">
<el-input v-model='form.name'></el-input>
</el-form-item>
</el-form>
<div class='button-box'>
<el-button type='primary' class='primary_btcolor' >保存</el-button>
</div>
</el-dialog>
</template>
<script>
export default{
props: {
//父组件调用时传进来的参数
modalData: Object
},
data(){
return{
uploadApi:'',
dialog:{
show:true,title:'',type:1
},
form:{
name:'',
cate:''
}
}
},
created(){
// this.dialog.title = this.modalData.title;
// this.form.name = this.modalData.name;
// this.dialog.show = this.modalData.show;
if(this.modalData.type=='creat'){
this.dialog.title = '新增品牌'
}
},
methods:{
handleClose() {
this.$emit('close')
},
}
}
</script>
<style>
.addcate form{
width: 300px;
}
.addcate .button-box{
text-align: center;
}
.addcate .button-box button{
width: 100px;
}
.addcate .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
color: #394A88;
}
</style>
\ No newline at end of file
src/views/set/dialog/product/AddCate.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<el-dialog width="420px" :title="dialog.title" custom-class='addcate animated slideInRight' :visible.sync="dialog.show" @close="handleClose" append-to-body>
<el-form ref="form" :model="form" label-width="100px">
<el-form-item label="产品品类：">
{{form.name}}
</el-form-item>
<el-form-item label="产品规格：">
<el-input v-model='form.cate'></el-input>
</el-form-item>
</el-form>
<div class='button-box'>
<el-button type='primary' class='primary_btcolor' >保存</el-button>
<el-button type='danger' v-if='!isCreat'>删除</el-button>
</div>
</el-dialog>
</template>
<script>
export default{
props: {
//父组件调用时传进来的参数
modalData: Object
},
data(){
return{
uploadApi:'',isCreat:true,
dialog:{
show:true,title:'',type:1
},
form:{
name:'',
cate:''
}
}
},
created(){
this.form.name = this.modalData.name;
if(this.modalData.type=='creat'){
this.dialog.title = '新增规格';
this.isCreat = true;
}else{
this.dialog.title = '编辑规格';
this.isCreat = false;
this.getinfo()
}
},
methods:{
getinfo(){
this.form.cate = this.modalData.cate;
},
handleClose() {
this.$emit('close')
},
}
}
</script>
<style>
.addcate form{
width: 300px;
}
.addcate .button-box{
text-align: center;
}
.addcate .button-box button{
width: 100px;
}
</style>
\ No newline at end of file
src/views/set/dialog/product/AddModel.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<el-dialog width="420px" :title="dialog.title" custom-class='addcate' :visible.sync="dialog.show" @close="handleClose" append-to-body>
<el-form ref="form" :model="form" label-width="100px">
<el-form-item label="规格分类：">
{{form.name}}
</el-form-item>
<el-form-item label="归属品牌：">
<el-select v-model="form.card" placeholder="请选择">
<el-option label="海尔" value="海尔"></el-option>
<el-option label="美的" value="美的"></el-option>
</el-select>
</el-form-item>
<el-form-item label="输入型号：">
<el-input v-model='form.cate'></el-input>
</el-form-item>
</el-form>
<div class='button-box'>
<el-button type='primary' class='primary_btcolor' >保存</el-button>
<el-button type='danger' v-if='!isCreat'>删除</el-button>
</div>
</el-dialog>
</template>
<script>
export default{
props: {
//父组件调用时传进来的参数
modalData: Object
},
data(){
return{
uploadApi:'',isCreat:true,
dialog:{
show:true,title:'',type:1
},
form:{
name:'',
card:'',
cate:''
}
}
},
created(){
this.form.name = this.modalData.name;
if(this.modalData.type=='creat'){
this.dialog.title = '新增型号';
this.isCreat = true;
}else{
this.dialog.title = '编辑型号';
this.isCreat = false;
this.getinfo()
}
},
methods:{
getinfo(){
this.form.name = this.modalData.name;
this.form.card = this.modalData.card;
this.form.cate = this.modalData.cate;
},
handleClose() {
this.$emit('close')
},
}
}
</script>
<style>
.addcate form{
width: 300px;
}
.addcate .button-box{
text-align: center;
}
.addcate .button-box button{
width: 100px;
}
</style>
\ No newline at end of file
src/views/set/dialog/product/AddProduct.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<el-dialog :title="dialog.title" :visible.sync="dialog.show" custom-class='order-detail animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'>
<el-tabs v-model="dialog.tab" type="card" @tab-click="handleClick">
<el-tab-pane label="品类" name="1">
<div class='order-detail-tab' style="padding:20px;line-height:3">
<el-radio v-model="choose_type" v-for='(item,index) in products' :key='index' :label="item.id" @change='clickType(item)' border size="medium">{{item.name}}</el-radio>
<span class='tag cursor' @click='addType()'>
<i class='el-icon-plus'></i>
</span>
</div>
<template v-if='choose_type!==""'>
<el-tabs type="card">
<el-tab-pane :label="'【' +choose_typeName+'】下的产品规格'" >
<div class='order-detail-tab' style="padding:20px;line-height:3;">
<el-radio v-model="choose_cate" v-for='(item,index) in cates' :key='index' :label="item.id" @change='clickCate(item)' border size="medium">{{item.name}}</el-radio>
<span class='tag cursor' @click='addType()'>
<i class='el-icon-plus'></i>
</span>
</div>
</el-tab-pane>
</el-tabs>
</template>
<template v-if='choose_cate!==""'>
<el-tabs type="card">
<el-tab-pane :label="'【' +choose_cateName+'】下的产品型号'" >
<div class='order-detail-tab' style="padding:20px;line-height:3;">
<el-radio v-model="choose_model" v-for='(item,index) in models' :key='index' :label="item.id" border size="medium">{{item.name}}</el-radio>
<span class='tag cursor' @click='addModel()'>
<i class='el-icon-plus'></i>
</span>
</div>
</el-tab-pane>
</el-tabs>
</template>
</el-tab-pane>
</el-tabs>
<component :is="modal" @close="closeChild" :modalData="innerData"></component>
</el-dialog>
</template>
<script>
import AddType from './AddType.vue'
import AddCate from './AddCate.vue'
import AddModel from './AddModel.vue'
export default{
props: {
//父组件调用时传进来的参数
modalData: Object
},
data(){
return{
detail:{ },
modal:null,innerData:{},
products:[
{id:1,name:'空调'},
{id:2,name:'洗衣机'},
{id:3,name:'电视机'},
],
choose_type:1,
choose_typeName:'空调',
cates:[
{id:1,name:'50L以上'},
{id:2,name:'50L以下'},
],
choose_cate:'',
choose_cateName:'',
models:[
{id:1,name:'KFWROO'},
{id:2,name:'KFUUWROO'},
],
choose_model:'',
dialog:{
show:true,title:'新增产品信息',tab:'1',
},
innerDialog1:{
show:false,title:'',type:1
}
}
},
methods:{
handleClose() {
this.$emit('close')
},
handleClick(){
},
addType(){
this.innerData = {type:'creat'};
this.modal = AddType;
},
addCate(){
this.innerData = {type:'creat',name:this.choose_typeName};
this.modal = AddCate;
},
addModel(){
this.innerData = {title:'新增类型',name:this.choose_cateName,show:true};
this.modal = AddModel;
},
closeChild(){
this.modal = null;
},
clickType(item){
this.choose_typeName = item.name ;
},
clickCate(item){
this.choose_cateName =item.name;
}
}
}
</script>
<style>
.order-detail{
width: 720px;
height: 670px;
}
.order-detail h2{
padding-left: 20px;
}
.order-detail .el-tabs--card>.el-tabs__header{
padding: 0 20px;
}
.order-detail .order-detail-tab{
margin-top: 5px;
line-height: 2;
/*border-bottom: 1px solid #ececec;*/
padding-bottom: 10px;
margin-bottom: 10px;
padding-left: 20px;
}
.order-detail .el-radio__input{
display: none;
}
.order-detail .el-radio{
/*margin-right: 0;*/
/*background: #F1F3F8;*/
padding: 7px 15px 9px 3px;
border-radius: 3px;
margin-right: 20px;
color: #999999 !important;
height: 30px;
}
/*******************************范围start******************************/
.order-detail-tab .tag{
/*background: #F1F3F8;*/
padding: 5px 24px;
border-radius: 3px;
margin-right: 20px;
color:#999999 !important;
border:1px solid #ececec;
}
.order-detail-tab .tag i{
color: #3B4B84;
font-size: 14px;
}
</style>
src/views/set/dialog/product/AddType.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<el-dialog width="420px" :title="dialog.title" custom-class='addcate animated slideInRight' :visible.sync="dialog.show" @close="handleClose" append-to-body>
<el-form ref="form" :model="form" label-width="100px">
<el-form-item label="品类名称：">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="图片：">
<el-upload class="avatar-uploader" :action="uploadApi"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="form.img" :src="form.img" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-form>
<div class='button-box'>
<el-button type='primary' class='primary_btcolor' >保存</el-button>
<el-button type='danger' v-if='!isCreat'>删除</el-button>
</div>
</el-dialog>
</template>
<script>
export default{
props: {
//父组件调用时传进来的参数
modalData: Object
},
data(){
return{
uploadApi:'',isCreat:true,
dialog:{
show:true,title:'',type:1
},
form:{
name:'',
img:''
}
}
},
created(){
if(this.modalData.type=='creat'){
this.dialog.title = '新增品类';
this.isCreat = true;
}else{
this.dialog.title = '编辑品类';
this.isCreat = false;
this.getinfo()
}
},
methods:{
getinfo(){
this.form.name = '空调';
this.form.img = require('../../../../assets/images/man.jpg');
},
handleClose() {
this.$emit('close')
},
handleAvatarSuccess(res, file) {
this.form.img = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
}
}
}
</script>
<style>
.addcate form{
width: 220px;
}
.addcate .button-box{
text-align: center;
}
.addcate .button-box button{
width: 100px;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 120px;
height: 120px;
line-height: 120px;
text-align: center;
}
.avatar {
width: 120px;
height: 120px;
display: block;
}
</style>
\ No newline at end of file
src/views/set/dialog/server/AddServer.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<el-dialog :title="dialog.title" :visible.sync="dialog.show" custom-class='order-detail addserver animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'>
<h2 style="margin-bottom:15px">品类名称：{{modalData.name}}</h2>
<el-tabs v-model="dialog.tab" type="card" @tab-click="handleClick">
<el-tab-pane label="服务类型" name="1">
<div class='order-detail-tab' style="padding:10px 20px;line-height:3">
<el-radio v-model="choose_type" v-for='(item,index) in products' :key='index' :label="item.id" @change='clickType(item)' border size="medium">{{item.name}}</el-radio>
<el-row class='add-input'>
<el-col :span="6">
<el-input v-model='input_first' ></el-input>
</el-col>
<el-col :span="18">
<i class='el-icon-success cursor' @click='addFirst()'></i>
</el-col>
</el-row>
</div>
<template v-if='choose_type!==""'>
<el-tabs type="card">
<el-tab-pane :label="'【' +choose_typeName+'】下的服务分类'" >
<div class='order-detail-tab' style="padding:10px 20px;line-height:3;">
<el-radio v-model="choose_cate" v-for='(item,index) in cates' :key='index' :label="item.id" @change='clickCate(item)' border size="medium">{{item.name}}</el-radio>
<el-row class='add-input'>
<el-col :span="6">
<el-input v-model='input_second' ></el-input>
</el-col>
<el-col :span="18">
<i class='el-icon-success cursor' @click='addSecond()'></i>
</el-col>
</el-row>
</div>
</el-tab-pane>
</el-tabs>
</template>
<template v-if='choose_cate!==""'>
<el-tabs type="card">
<el-tab-pane :label="'【' +choose_cateName+'】下的服务措施'" >
<div class='order-detail-tab' style="padding:10px 20px;line-height:3;">
<el-radio v-model="choose_model" v-for='(item,index) in models' :key='index' :label="item.id" border size="medium">{{item.name}}</el-radio>
<el-row class='add-input'>
<el-col :span="10">
<el-input v-model='input_third' type='textarea'></el-input>
</el-col>
<el-col :span="14">
<i class='el-icon-success cursor' @click='addThird()'></i>
</el-col>
</el-row>
</div>
</el-tab-pane>
</el-tabs>
</template>
</el-tab-pane>
</el-tabs>
<component :is="modal" @close="closeChild" :modalData="innerData"></component>
</el-dialog>
</template>
<script>
export default{
props: {
//父组件调用时传进来的参数
modalData: Object
},
data(){
return{
detail:{ },isCreat:true,
input_first:'',input_second:'',
input_third:'',
modal:null,innerData:{},
products:[
{id:1,name:'安装'},
{id:2,name:'维修'},
],
choose_type:1,
choose_typeName:'安装',
cates:[
{id:1,name:'大修'},
{id:2,name:'中修'},
{id:3,name:'小修'},
],
choose_cate:'',
choose_cateName:'',
models:[
{id:1,name:'咨询'},
{id:2,name:'维修'},
],
choose_model:'',
dialog:{
show:true,title:'新增产品信息',tab:'1',
},
innerDialog1:{
show:false,title:'',type:1
}
}
},
created(){
if(this.modalData.type=='creat'){
this.dialog.title = '新增服务';
this.isCreat = true;
}else{
this.dialog.title = '编辑服务';
this.isCreat = false;
this.getinfo()
}
},
methods:{
handleClose() {
this.$emit('close')
},
handleClick(){
},
addFirst(){
if(this.input_first.length>0){
this.products.push({id:this.products.length+1,name:this.input_first});
this.input_first = '';
}
},
addSecond(){
if(this.input_second.length>0){
this.cates.push({id:this.products.length+1,name:this.input_second});
this.input_second = '';
}
},
addThird(){
if(this.input_third.length>0){
this.models.push({id:this.models.length+1,name:this.input_third});
this.input_third = '';
}
},
closeChild(){
this.modal = null;
},
clickType(item){
this.choose_typeName = item.name ;
},
clickCate(item){
this.choose_cateName =item.name;
}
}
}
</script>
<style>
.order-detail{
width: 720px;
height: 670px;
}
.order-detail h2{
padding-left: 20px;
}
.order-detail .add-input{
margin-top: 10px;
}
.order-detail .add-input i{
color: #81C868;
font-size: 30px;
vertical-align: middle;
margin-left: 10px;
}
.order-detail .el-tabs--card>.el-tabs__header{
padding: 0 20px;
}
.order-detail .order-detail-tab{
/*margin-top: 5px;*/
line-height: 2;
/*border-bottom: 1px solid #ececec;*/
padding-bottom: 10px;
margin-bottom: 10px;
padding-left: 20px;
}
.order-detail .el-radio__input{
display: none;
}
.order-detail .el-radio{
/*margin-right: 0;*/
/*background: #F1F3F8;*/
padding: 7px 15px 9px 3px;
border-radius: 3px;
margin-right: 20px;
color: #999999 !important;
height: 30px;
}
/*******************************范围start******************************/
.order-detail-tab .tag{
/*background: #F1F3F8;*/
padding: 5px 24px;
border-radius: 3px;
margin-right: 20px;
color:#999999 !important;
border:1px solid #ececec;
}
.order-detail-tab .tag i{
color: #3B4B84;
font-size: 14px;
}
</style>
src/views/set/dialog/server/EdictName.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<el-dialog width="420px" title="编辑" custom-class='addcate animated slideInRight' :visible.sync="dialog.show" @close="handleClose" append-to-body>
<el-form ref="form" :model="form" label-width="100px">
<el-form-item label="名称：">
<el-input v-model='form.name'></el-input>
</el-form-item>
</el-form>
<div class='button-box'>
<el-button type='primary' class='primary_btcolor' >保存</el-button>
<el-button type='danger' >删除</el-button>
</div>
</el-dialog>
</template>
<script>
export default{
props: {
//父组件调用时传进来的参数
modalData: Object
},
data(){
return{
uploadApi:'',
dialog:{
show:true,title:'',type:1
},
form:{
name:'大修',
cate:''
}
}
},
created(){
// this.dialog.title = this.modalData.title;
// this.form.name = this.modalData.name;
// this.dialog.show = this.modalData.show;
},
methods:{
handleClose() {
this.$emit('close')
},
}
}
</script>
<style>
.addcate form{
width: 300px;
}
.addcate .button-box{
text-align: center;
}
.addcate .button-box button{
width: 100px;
}
.addcate .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
color: #394A88;
}
</style>
\ No newline at end of file
src/views/settlement/All.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<div class="settle-right">
<div class="all-settle-serch">
<el-select class="seach-select" v-model="search.date" @change='' placeholder="选择时间">
<el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options1'></el-option>
</el-select>
<el-select class="seach-select" v-model="search.type" @change='' placeholder="结算周期">
<el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options2'></el-option>
</el-select>
<el-input class="seach-input" v-model='search.name' prefix-icon="el-icon-search" placeholder='输入项目名，合作商名查询'></el-input>
<el-button type='primary' class='button-color'>搜索</el-button>
<span class='button-icon'><i class='el-icon-d-caret'></i></span>
<span class='button-icon'><i class='el-icon-d-caret'></i></span>
<el-button type='primary' class='button-color addbutton' @click='settleFun()'>结算</el-button>
</div>
<div class="settle-content">
<el-table :data="tableData" style="width: 100%" @row-click='checkData' row-class-name="tableRowClassName" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column prop="name" label="授权点" ></el-table-column>
<el-table-column label="结算金额" >
<template slot-scope="scope" >
￥{{scope.row.price }}
</template>
</el-table-column>
<el-table-column label="组成" >
<template slot-scope="scope" >
<span class='blue-text'>{{scope.row.construst }}</span>
</template>
</el-table-column>
<el-table-column label="完工信息" >
<template slot-scope="scope" >
<p>{{scope.row.info }}</p>
<p class="detail">{{scope.row.detail }}</p>
</template>
</el-table-column>
<el-table-column label="工单号" >
<template slot-scope="scope" >
<span class='blue-text'>{{scope.row.number }}</span>
</template>
</el-table-column>
<el-table-column prop="date" label="确权日" ></el-table-column>
<el-table-column label="结算状态" width='80px'>
<template slot-scope="scope" >
<div class='text_center' @click='opendialog(scope.row)'>
<span v-if='scope.row.status==1'>
<i class='el-icon-date' style='color:#F7BF57;font-size:18px;'></i>
待结
</span>
<span v-if='scope.row.status==2' >
<i class='el-icon-message' style='color:#F05050;font-size:18px'></i>
待付
</span>
<span v-if='scope.row.status==3'>
<i class='el-icon-message' style='color:#71C255;font-size:18px'></i>
已付
</span>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="settle-bottom">
<el-pagination @current-change="handleCurrentChange" background :current-page="table.current_page" layout="total, prev, pager, next" :page-size="15" :pager-count="table.page_count" :total="table.total">
</el-pagination>
</div>
<component :is="modal" @close="closeChild" :modalData="modalData"></component>
</div>
</template>
<script>
import Settle from './dialog/Settle.vue'
import SettleDetail from './dialog/SettleDetail.vue'
import PayDetail from './dialog/PayDetail.vue'
import Pay from './dialog/Pay.vue'
export default {
data(){
return{
modal:null,modalData:[],
search:{
type:'',date:'',options1:[],options2:[],name:''
},
table:{
current_page:1,page_count:7,total:50,
},
tableData:[
{
name: '精诚维修',
price:'10000',
construst:'1105.00+0.00',
info:'格力 空调 安装 ',
detail:'（KFR-26GW/NhDbB3）',
date:'2019-02-3',
number:'GLDQ0019211237',
status:1
},
{
name: '精诚维修',
price:'10000',
construst:'1105.00+0.00',
info:'格力 空调 安装 ',
detail:'（KFR-26GW/NhDbB3）',
date:'2019-02-3',
number:'GLDQ0019211237',
status:2
},
{
name: '精诚维修',
price:'10000',
construst:'1105.00+0.00',
info:'格力 空调 安装 ',
detail:'（KFR-26GW/NhDbB3）',
date:'2019-02-3',
number:'GLDQ0019211237',
status:3
},
],
chooseData:[]
}
},
wacth:{
},
methods:{
handleCurrentChange(page) {
},
checkData(row,event, column){
console.log(row.status)
},
opendialog(row){
if(row.status==1){
this.modalData = row;
this.modal = SettleDetail;
}else if(row.status==3){
this.modalData = row;
this.modal = PayDetail;
}else if(row.status==2){
this.modalData = row;
this.modal = Pay;
}
},
closeChild(){
this.modal = null;
},
handleSelectionChange(val){
this.chooseData = val;
console.log(val)
},
settleFun(){
if(this.chooseData.length>0){
this.modalData = this.chooseData;
this.modal = Settle
}else{
this.$message({ message: '请选择数据', type: 'warning' });
}
}
}
}
</script>
<style>
.settle-right{
float: right;
width: 1180px;
height: 100%;
position: relative;
background: #ffffff;
}
.settle-right .all-settle-serch{
background: #ffffff;
padding: 10px;
position: relative;
}
.all-settle-serch:after{
position: absolute;
content: '';
left: 20px;
right: 20px;
bottom: 0;
height:1px;
background: #ececec;
}
.settle-right .all-settle-serch .seach-select .el-input__inner,.settle-right .all-settle-serch .seach-select .el-input{
width: 120px !important;
background: #F1F3F9;
border: none;
}
.settle-right .all-settle-serch .seach-input .el-input__inner,.settle-right .all-settle-serch .seach-input {
width: 298px;
}
.button-color{
background: #5874D8;
}
.button-icon{
background: rgba(88,116,216,0.1) ; padding: 10px 8px;
border-radius: 4px;
}
.button-icon i {
font-size: 22px;color: #5874D8;
vertical-align:middle;
}
.addbutton{float: right;}
.settle-right .settle-bottom{
position: absolute;
left: 0;
right: 0;
text-align: center;
bottom: 15px;
}
.settle-right .settle-content{
position: absolute;
left: 0;
right:0;
top: 60px;
bottom: 50px;
overflow: auto;
padding: 15px;
}
.settle-right .settle-content table{
text-align: center;
}
.settle-right .settle-content table th{
background: #EEF1FC;
color: #666;
text-align: center;
}
.settle-right .settle-content table td .cell{
/*font-size: 12px;*/
text-align: center;
}
.settle-right .settle-content table td .cell .detail{
font-size: 12px;
color: #999;
}
.settle-right .settle-content table td .cell .blue-text{
color: #5B76D1;
}
</style>
\ No newline at end of file
src/views/settlement/Index.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<div class="settle">
<div class='settle-left'>
<div class="settle-title">结算中心</div>
<el-menu :default-active="activeIndex" :unique-opened="false" @select="handleSelect" background-color="#ffffff" text-color="#666" class='settle-menu'>
<el-menu-item :index="item.value" :key='index' v-for='(item,index) in menus' >
<i :class="item.icon"></i>
{{item.name}}
</el-menu-item>
</el-menu>
</div>
<component :is="modal" ></component>
</div>
</template>
<script>
import VAll from './All.vue'
export default {
data(){
return{
activeIndex:'1',tabindex:'1',modal:VAll,
menus:[
{name:'待结算',value:'1',icon:'el-icon-upload2'},
{name:'全部结算单',value:'2',icon:'el-icon-sort'},
{name:'待付款',value:'3',icon:'el-icon-date'},
{name:'全部付款单',value:'4',icon:'el-icon-date'},
],
}
},
wacth:{
},
methods:{
handleSelect(key, keyPath) {
this.tabindex = key;
switch(Number(key)){
case 1:
this.modal = VAll
break;
default:
this.modal = null
break;
}
},
handleCurrentChange(page) {
},
}
}
</script>
<style>
.settle{
width: 1400px;
height: 100%;
margin: auto;
}
.settle-left{
width: 198px;
height: 100%;
background: #ffffff;
float: left;
}
.settle-left .settle-title{
color: #5874D8;
text-align: center;
font-size: 18px;
height: 64px;
line-height: 64px;
border-bottom: 1px solid #ececec;
}
.settle-menu .el-menu-item.is-active{
background-color: rgba(88,116,216,0.1) !important;
position: relative;
}
.settle-menu .el-menu-item.is-active:before{
content: '';
position: absolute;
width: 3px;
height: 20px;
left: 0;
top: 20px;
background: #50B5FC
}
</style>
\ No newline at end of file
src/views/settlement/dialog/Pay.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<el-dialog :title="dialog.title" :visible.sync="dialog.show" custom-class='settle-dialog animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'>
<div class="dialog-content">
<p>
<span>授权点数：</span>
<span>唯修汇（张三 15599991111）</span>
</p>
<p>
<span>收款方式：</span>
<span>银行卡（中国银行高新支行）</span>
</p>
<p>收款人：<span>张三（62220998678123）</span></p>
<p>
<span>金额：</span>
<span>￥120000</span>
</p>
<div class="bt-center">
<el-button class='background-blue text-white' >确定付款</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
export default{
props: {
//父组件调用时传进来的参数
modalData: Object
},
data(){
return{
detail:{ },uploadApi:'',
dialog:{
show:true,title:'结算付款',tab:'1',
},
}
},
methods:{
handleClose() {
this.$emit('close')
},
}
}
</script>
<style>
.settle-dialog{
width: 420px;
height: 290px;
}
.el-dialog__wrapper{
overflow: hidden !important;
}
.settle-dialog .el-tabs--card>.el-tabs__header{
padding: 0 20px;
}
.settle-dialog .el-dialog__body{
padding:30px 0;
}
.settle-dialog .el-dialog__header{
background: #6C8BF8;
}
.settle-dialog .el-dialog__header .el-dialog__title,.settle-dialog .el-dialog__header .el-dialog__headerbtn i{
color: #ffffff;
}
.settle-dialog .dialog-content{
padding: 0 20px;
line-height: 2;
}
.bt-center{
text-align: center;
margin-top: 20px;
}
</style>
src/views/settlement/dialog/PayDetail.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<el-dialog :title="dialog.title" :visible.sync="dialog.show" custom-class='order-detail animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'>
<el-tabs v-model="dialog.tab" type="card" @tab-click="handleClick">
<el-tab-pane label="详情" name="1">
<h2>付款信息</h2>
<div class='order-detail-tab' style="line-height:2.5;border:none">
<p>
付款状态: <span>已付</span>
</p>
</div>
</el-tab-pane>
</el-tabs>
</el-dialog>
</template>
<script>
export default{
props: {
//父组件调用时传进来的参数
modalData: Object
},
data(){
return{
detail:{ },uploadApi:'',isdedict:false,other:'',price:'',
dialog:{
show:true,title:'付款单（GLDQ0019211237）',tab:'1',
},
}
},
methods:{
handleClose() {
this.$emit('close')
},
handleClick(){
},
edictFun(){
this.isdedict = true;
}
}
}
</script>
<style>
/********************详情start*******************/
.order-detail{
width: 420px;
height: 260px;
}
.el-dialog__wrapper{
overflow: hidden !important;
}
.order-detail h2{
padding-left: 20px;
}
.order-detail .el-tabs--card>.el-tabs__header{
padding: 0 20px;
}
.order-detail .el-dialog__body{
padding:30px 0;
}
.order-detail .el-dialog__header{
background: #6C8BF8;
}
.order-detail .el-dialog__header .el-dialog__title,.order-detail .el-dialog__header .el-dialog__headerbtn i{
color: #ffffff;
}
.order-detail .order-detail-tab{
margin-top: 5px;
line-height: 2;
border-bottom: 1px solid #ececec;
padding-bottom: 10px;
margin-bottom: 10px;
padding-left: 20px;
}
.order-detail .order-detail-tab p{
color: #999;
font-size: 12px;
}
.order-detail .order-detail-tab span{
color: #333;
font-size: 12px;
}
</style>
src/views/settlement/dialog/Settle.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<el-dialog :title="dialog.title" :visible.sync="dialog.show" custom-class='settle-dialog animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'>
<div class="dialog-content">
<p>
<span>授权点数：</span>
<span>3</span>
</p>
<p>
<span>工单数量：</span>
<span>300</span>
</p>
<p>
<span>结算金额：</span>
<span>￥120000</span>
</p>
<div class="bt-center">
<el-button class='background-blue text-white' >确定结算</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
export default{
props: {
//父组件调用时传进来的参数
modalData: Array
},
data(){
return{
detail:{ },uploadApi:'',
dialog:{
show:true,title:'结算工单',tab:'1',
},
}
},
methods:{
handleClose() {
this.$emit('close')
},
}
}
</script>
<style>
.settle-dialog{
width: 420px;
height: 260px;
}
.el-dialog__wrapper{
overflow: hidden !important;
}
.settle-dialog .el-tabs--card>.el-tabs__header{
padding: 0 20px;
}
.settle-dialog .el-dialog__body{
padding:30px 0;
}
.settle-dialog .el-dialog__header{
background: #6C8BF8;
}
.settle-dialog .el-dialog__header .el-dialog__title,.settle-dialog .el-dialog__header .el-dialog__headerbtn i{
color: #ffffff;
}
.settle-dialog .dialog-content{
padding: 0 20px;
line-height: 2;
}
.bt-center{
text-align: center;
margin-top: 20px;
}
</style>
src/views/settlement/dialog/SettleDetail.vue deleted 100644 → 0
View file @ acb0de8c
<template>
<el-dialog :title="dialog.title" :visible.sync="dialog.show" custom-class='order-detail animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'>
<div class="dialog-content">
<div class="edict-icon">
<i class="el-icon-edit-outline" @click='edictFun()' v-show='!isdedict'></i>
</div>
<el-tabs v-model="dialog.tab" type="card" @tab-click="handleClick">
<el-tab-pane label="结算信息" name="1">
<h2>结算信息</h2>
<div class='order-detail-tab' style="line-height:2.5">
<p>
基 本: <span>安装--新机安装*1¥200.00</span>
</p>
<p>
其 他:
<el-input class="seach-input" placeholder='其他项目' v-model='other' :disabled='!isdedict'></el-input>
</p>
<p>
金 额:
<el-input class="seach-input" placeholder='其他项目' v-model='price' :disabled='!isdedict'></el-input>
</p>
</div>
<h2>完工信息</h2>
<div class='order-detail-tab' style="line-height:2.5;border:none">
<el-row>
<el-col :span="12">
<p>授 权 点: <span> 唯修汇 （张三 15599991111）</span></p>
</el-col>
<el-col :span="12">
<p>内 机 码: <span>421362871684921</span> </p>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<p>完 工: <span>03-28 10:09:12</span> </p>
</el-col>
<el-col :span="12">
<p>外 机 码: <span>421362871684921</span></p>
</el-col>
</el-row>
<p>
产品信息: <span>格力 空调 KFR-35GW/NhEaB1W</span>
</p>
<p>
完工图片: <span>（6张）</span>
</p>
<div class="order-carousel">
<el-carousel :interval="4000" type="card" height="100px" :autoplay='false' arrow="always">
<el-carousel-item v-for="item in 6" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
<p>
完工备注注:
<span>请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽</span>
</p>
</div>
</el-tab-pane>
</el-tabs>
</div>
</el-dialog>
</template>
<script>
export default{
props: {
//父组件调用时传进来的参数
modalData: Object
},
data(){
return{
detail:{ },uploadApi:'',isdedict:false,other:'',price:'',
dialog:{
show:true,title:'工单（GLDQ0019211237）--待结',tab:'1',
},
}
},
methods:{
handleClose() {
this.$emit('close')
},
handleClick(){
},
edictFun(){
this.isdedict = true;
}
}
}
</script>
<style>
/********************详情start*******************/
.order-detail{
width: 720px;
height: 670px;
}
.dialog-content{
position: relative;
}
.dialog-content .edict-icon{
position: absolute;right: 20px;
top:0;z-index: 3000;
}
.dialog-content .edict-icon i{
font-size: 24px;
color: #5874D8;
cursor: pointer;
}
.dialog-content .edict-icon i:nth-child(1){
margin-right: 15px;
}
.el-dialog__wrapper{
overflow: hidden !important;
}
.order-detail h2{
padding-left: 20px;
}
.order-detail .el-tabs--card>.el-tabs__header{
padding: 0 20px;
}
.order-detail .el-dialog__body{
padding:30px 0;
}
.order-detail .el-dialog__header{
background: #6C8BF8;
}
.order-detail .el-dialog__header .el-dialog__title,.order-detail .el-dialog__header .el-dialog__headerbtn i{
color: #ffffff;
}
.order-detail .order-detail-tab{
margin-top: 5px;
line-height: 2;
border-bottom: 1px solid #ececec;
padding-bottom: 10px;
margin-bottom: 10px;
padding-left: 20px;
}
.order-detail .order-detail-tab p{
color: #999;
font-size: 12px;
}
.order-detail .order-detail-tab span{
color: #333;
font-size: 12px;
}
.order-detail .seach-input .el-input__inner,.order-detail .seach-input {
width: 200px;
height: 25px;
}
/************************确权start******************************/
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 100px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
.order-carousel{
width: 600px;
margin: auto;
}
</style>
new/static/css/main.css → static/css/main.css
View file @ 4b2f612b
......@@ -29,7 +29,7 @@ button,.el-button{
cursor: pointer;
}
.pre_space{
white-space: pre;
/*white-space: pre;*/
}
.text_center{
text-align: center;
......@@ -62,6 +62,9 @@ button,.el-button{
.text-white{
color: #ffffff;
}
input:focus{
border-color: #5874d8;
}
/********************主配色 start******************/
.firstbackgroud_blue{
background: #5874d8
......@@ -365,4 +368,10 @@ ul .iconfont {
}
.el-select :-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #666666 !important;
}
.el-form-item__content{
white-space:normal !important;
}
.pre_space .el-form-item__error{
white-space: pre;
}
\ No newline at end of file
new/static/js/common.js → static/js/common.js
View file @ 4b2f612b
......@@ -8,7 +8,7 @@ var commonHeader={
<i class="el-icon-caret-bottom" v-popover:popoverHeader></i>
<el-popover ref="popoverHeader" placement="bottom" width="110" trigger="click" >
<div class="popover-content">
<div>退出登录</div>
<div class="cursor" @click="exit()">退出登录</div>
</div>
</el-popover>
</p>
......@@ -41,8 +41,11 @@ var commonHeader={
this.onRoutes = this.modalData;
},
methods:{
selectRoute:function(val){
selectRoute(val){
window.location.href = val;
},
exit(){
window.location.href = './../account/login.html'
}
},
}
......
static/js/echarts.js 0 → 100644
View file @ 4b2f612b
This source diff could not be displayed because it is too large. You can view the blob instead.
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