edit
This commit is contained in:
weixiansheng
parent
adfb2e2f02
commit
bda2c9a3fa
12
captcha/aj-front/.babelrc
Normal file
12
captcha/aj-front/.babelrc
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"presets": [
|
||||
["env", {
|
||||
"modules": false,
|
||||
"targets": {
|
||||
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
|
||||
}
|
||||
}],
|
||||
"stage-2"
|
||||
],
|
||||
"plugins": ["transform-vue-jsx", "transform-runtime"]
|
||||
}
|
||||
9
captcha/aj-front/.editorconfig
Normal file
9
captcha/aj-front/.editorconfig
Normal file
@ -0,0 +1,9 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
4
captcha/aj-front/.eslintignore
Normal file
4
captcha/aj-front/.eslintignore
Normal file
@ -0,0 +1,4 @@
|
||||
build/*.js
|
||||
src/assets
|
||||
public
|
||||
dist
|
||||
206
captcha/aj-front/.eslintrc.js
Normal file
206
captcha/aj-front/.eslintrc.js
Normal file
@ -0,0 +1,206 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
parserOptions: {
|
||||
parser: 'babel-eslint',
|
||||
sourceType: 'module'
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
node: true,
|
||||
es6: true,
|
||||
},
|
||||
extends: [
|
||||
'plugin:vue/recommended',
|
||||
// 'eslint:recommended'
|
||||
],
|
||||
|
||||
// add your custom rules here
|
||||
globals: {
|
||||
'AMap': 'readonly',
|
||||
'THREE': 'readonly'
|
||||
},
|
||||
//it is base on https://github.com/vuejs/eslint-config-vue
|
||||
rules: {
|
||||
"vue/max-attributes-per-line": [2, {
|
||||
"singleline": 10,
|
||||
"multiline": {
|
||||
"max": 1,
|
||||
"allowFirstLine": false
|
||||
}
|
||||
}],
|
||||
"vue/require-default-prop":0,
|
||||
"vue/singleline-html-element-content-newline": "off",
|
||||
"vue/multiline-html-element-content-newline": "off",
|
||||
"vue/name-property-casing": ["error", "PascalCase"],
|
||||
"vue/no-v-html": "off",
|
||||
'accessor-pairs': 2,
|
||||
'arrow-spacing': [2, {
|
||||
'before': true,
|
||||
'after': true
|
||||
}],
|
||||
'block-spacing': [2, 'always'],
|
||||
'brace-style': [2, '1tbs', {
|
||||
'allowSingleLine': true
|
||||
}],
|
||||
'camelcase': [0, {
|
||||
'properties': 'always'
|
||||
}],
|
||||
// 'comma-dangle': [2, 'never'],
|
||||
'comma-spacing': [2, {
|
||||
'before': false,
|
||||
'after': true
|
||||
}],
|
||||
'comma-style': [2, 'last'],
|
||||
'constructor-super': 2,
|
||||
'curly': [2, 'multi-line'],
|
||||
'dot-location': [2, 'property'],
|
||||
'eol-last': 2,
|
||||
// 'eqeqeq': ["error", "always", { "null": "ignore" }],
|
||||
'generator-star-spacing': [2, {
|
||||
'before': true,
|
||||
'after': true
|
||||
}],
|
||||
// 'handle-callback-err': [2, '^(err|error)$'],
|
||||
'indent': [2, 2, {
|
||||
'SwitchCase': 1
|
||||
}],
|
||||
'jsx-quotes': [2, 'prefer-single'],
|
||||
'key-spacing': [2, {
|
||||
'beforeColon': false,
|
||||
'afterColon': true
|
||||
}],
|
||||
'keyword-spacing': [2, {
|
||||
'before': true,
|
||||
'after': true
|
||||
}],
|
||||
// 'new-cap': [2, {
|
||||
// 'newIsCap': true,
|
||||
// 'capIsNew': false
|
||||
// }],
|
||||
'new-parens': 2,
|
||||
'no-array-constructor': 2,
|
||||
'no-caller': 2,
|
||||
'no-console': 'off',
|
||||
'no-class-assign': 2,
|
||||
'no-cond-assign': 2,
|
||||
'no-const-assign': 2,
|
||||
'no-control-regex': 0,
|
||||
'no-delete-var': 2,
|
||||
'no-dupe-args': 2,
|
||||
'no-dupe-class-members': 2,
|
||||
'no-dupe-keys': 2,
|
||||
'no-duplicate-case': 2,
|
||||
'no-empty-character-class': 2,
|
||||
'no-empty-pattern': 2,
|
||||
'no-eval': 2,
|
||||
'no-ex-assign': 2,
|
||||
'no-extend-native': 2,
|
||||
'no-extra-bind': 2,
|
||||
'no-extra-boolean-cast': 2,
|
||||
'no-extra-parens': [2, 'functions'],
|
||||
'no-fallthrough': 2,
|
||||
'no-floating-decimal': 2,
|
||||
'no-func-assign': 2,
|
||||
'no-implied-eval': 2,
|
||||
'no-inner-declarations': [2, 'functions'],
|
||||
'no-invalid-regexp': 2,
|
||||
'no-irregular-whitespace': 2,
|
||||
'no-iterator': 2,
|
||||
'no-label-var': 2,
|
||||
'no-labels': [2, {
|
||||
'allowLoop': false,
|
||||
'allowSwitch': false
|
||||
}],
|
||||
'no-lone-blocks': 2,
|
||||
'no-mixed-spaces-and-tabs': 2,
|
||||
'no-multi-spaces': 2,
|
||||
'no-multi-str': 2,
|
||||
'no-multiple-empty-lines': [2, {
|
||||
'max': 1
|
||||
}],
|
||||
'no-native-reassign': 2,
|
||||
'no-negated-in-lhs': 2,
|
||||
'no-new-object': 2,
|
||||
'no-new-require': 2,
|
||||
'no-new-symbol': 2,
|
||||
'no-new-wrappers': 2,
|
||||
'no-obj-calls': 2,
|
||||
'no-octal': 2,
|
||||
'no-octal-escape': 2,
|
||||
'no-path-concat': 2,
|
||||
'no-proto': 2,
|
||||
'no-redeclare': 2,
|
||||
'no-regex-spaces': 2,
|
||||
'no-return-assign': [2, 'except-parens'],
|
||||
'no-self-assign': 2,
|
||||
'no-self-compare': 2,
|
||||
// 'no-sequences': 2,
|
||||
'no-shadow-restricted-names': 2,
|
||||
'no-spaced-func': 2,
|
||||
'no-sparse-arrays': 2,
|
||||
'no-this-before-super': 2,
|
||||
'no-throw-literal': 2,
|
||||
// 'no-trailing-spaces': 2,
|
||||
'no-undef': 2,
|
||||
'no-undef-init': 2,
|
||||
'no-unexpected-multiline': 2,
|
||||
'no-unmodified-loop-condition': 2,
|
||||
'no-unneeded-ternary': [2, {
|
||||
'defaultAssignment': false
|
||||
}],
|
||||
'no-unreachable': 0,
|
||||
'no-unsafe-finally': 2,
|
||||
'no-unused-vars': [0, {
|
||||
'vars': 'all',
|
||||
'args': 'none'
|
||||
}],
|
||||
'no-useless-call': 2,
|
||||
'no-useless-computed-key': 2,
|
||||
'no-useless-constructor': 2,
|
||||
'no-useless-escape': 0,
|
||||
'no-whitespace-before-property': 2,
|
||||
'no-with': 2,
|
||||
'one-var': [2, {
|
||||
'initialized': 'never'
|
||||
}],
|
||||
'operator-linebreak': [2, 'after', {
|
||||
'overrides': {
|
||||
'?': 'before',
|
||||
':': 'before'
|
||||
}
|
||||
}],
|
||||
'padded-blocks': [2, 'never'],
|
||||
'quotes': [2, 'single', {
|
||||
'avoidEscape': true,
|
||||
'allowTemplateLiterals': true
|
||||
}],
|
||||
'semi': [2, 'never'],
|
||||
'semi-spacing': [2, {
|
||||
'before': false,
|
||||
'after': true
|
||||
}],
|
||||
'space-before-blocks': [2, 'always'],
|
||||
'space-before-function-paren': [2, 'never'],
|
||||
'space-in-parens': [2, 'never'],
|
||||
'space-infix-ops': 2,
|
||||
'space-unary-ops': [2, {
|
||||
'words': true,
|
||||
'nonwords': false
|
||||
}],
|
||||
'spaced-comment': [2, 'always', {
|
||||
'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
|
||||
}],
|
||||
'template-curly-spacing': [2, 'never'],
|
||||
'use-isnan': 2,
|
||||
'valid-typeof': 2,
|
||||
'wrap-iife': [2, 'any'],
|
||||
'yield-star-spacing': [2, 'both'],
|
||||
'yoda': [2, 'never'],
|
||||
'prefer-const': 2,
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
|
||||
'object-curly-spacing': [2, 'always', {
|
||||
objectsInObjects: false
|
||||
}],
|
||||
'array-bracket-spacing': [2, 'never']
|
||||
}
|
||||
}
|
||||
14
captcha/aj-front/.gitignore
vendored
Normal file
14
captcha/aj-front/.gitignore
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
.DS_Store
|
||||
node_modules/
|
||||
/dist/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
10
captcha/aj-front/.postcssrc.js
Normal file
10
captcha/aj-front/.postcssrc.js
Normal file
@ -0,0 +1,10 @@
|
||||
// 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": {}
|
||||
}
|
||||
}
|
||||
124
captcha/aj-front/README.md
Normal file
124
captcha/aj-front/README.md
Normal file
@ -0,0 +1,124 @@
|
||||
## 前端接入
|
||||
### 1. 兼容性
|
||||
IE8+、Chrome、Firefox.(其他未测试)
|
||||
### 2. 初始化组件
|
||||
1)复制view/vue/src/components/verifition文件夹,到自己工程对应目录下,在登录页面插入如下代码。
|
||||
|
||||
2)安装请求和加密依赖
|
||||
|
||||
npm install axios crypto-js -S
|
||||
|
||||
#### 基础示例
|
||||
```javascript
|
||||
<template>
|
||||
<Verify
|
||||
@success="'success'" //验证成功的回调函数
|
||||
:mode="'pop'" //调用的模式
|
||||
:captchaType="'blockPuzzle'" //调用的类型 点选或者滑动
|
||||
:imgSize="{ width: '330px', height: '155px' }" //图片的大小对象
|
||||
ref="verify"
|
||||
></Verify>
|
||||
//mode="pop"模式
|
||||
<button @click="useVerify">调用验证组件</button>
|
||||
</template>
|
||||
|
||||
****注: mode为"pop"时,使用组件需要给组件添加ref值,并且手动调用show方法 例: this.$refs.verify.show()****
|
||||
****注: mode为"fixed"时,无需添加ref值,无需调用show()方法****
|
||||
|
||||
<script>
|
||||
//引入组件
|
||||
import Verify from "./../../components/verifition/Verify";
|
||||
export default {
|
||||
name: 'app',
|
||||
components: {
|
||||
Verify
|
||||
}
|
||||
methods:{
|
||||
success(params){
|
||||
// params 返回的二次验证参数, 和登录参数一起回传给登录接口，方便后台进行二次验证
|
||||
},
|
||||
useVerify(){
|
||||
this.$refs.verify.show()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 3.回调事件
|
||||
|
||||
| 参数 | 类型 | 说明 |
|
||||
| ------------ | ------------ | ------------ |
|
||||
| success(params) | funciton | 验证码匹配成功后的回调函数,params为返回需回传服务器的二次验证参数 |
|
||||
| error | funciton | 验证码匹配失败后的回调函数 |
|
||||
| ready | funciton | 验证码初始化成功的回调函数 |
|
||||
|
||||
### 4. 验证码参数
|
||||
|
||||
| 参数 | 类型 | 说明 |
|
||||
| ------------ | ------------ | ------------ |
|
||||
| captchaType | String | 1）滑动拼图 blockPuzzle 2）文字点选 clickWord |
|
||||
| mode | String | 验证码的显示方式，弹出式pop，固定fixed，默认：mode : ‘pop’ |
|
||||
| vSpace | String | 验证码图片和移动条容器的间隔，默认单位是px。如：间隔为5px，默认:vSpace:5 |
|
||||
| explain | String | 滑动条内的提示，不设置默认是：'向右滑动完成验证' |
|
||||
| imgSize | Object | 其中包含了width、height两个参数，分别代表图片的宽度和高度，支持百分比方式设置 如:{width:'400px',height:'200px'}
|
||||
|
||||
### 5.1默认接口api地址
|
||||
| 请求URL | 请求方式 |
|
||||
| ------------ | ------------ |
|
||||
| /captcha/get | Post |
|
||||
| /captcha/check | Post |
|
||||
|
||||
### 5.2 获取验证码接口详情
|
||||
#### 接口地址：http://*:*/captcha/get
|
||||
组件内部默认请求服务器地址: process.env.BASE_API ; 是vue项目打包配置地址,方便分环境打包
|
||||
##### 请求参数：
|
||||
```json
|
||||
{
|
||||
"captchaType": "blockPuzzle" //验证码类型 clickWord
|
||||
}
|
||||
```
|
||||
##### 响应参数：
|
||||
```json
|
||||
{
|
||||
"repCode": "0000",
|
||||
"repData": {
|
||||
"originalImageBase64": "底图base64",
|
||||
"point": { //默认不返回的，校验的就是该坐标信息，允许误差范围
|
||||
"x": 205,
|
||||
"y": 5
|
||||
},
|
||||
"jigsawImageBase64": "滑块图base64",
|
||||
"token": "71dd26999e314f9abb0c635336976635", //一次校验唯一标识
|
||||
"result": false,
|
||||
"opAdmin": false
|
||||
},
|
||||
"success": true,
|
||||
"error": false
|
||||
}
|
||||
```
|
||||
### 5.3 核对验证码接口详情
|
||||
#### 请求接口：http://*:*/captcha/check
|
||||
组件内部默认请求服务器地址: process.env.BASE_API ; 是vue项目打包配置地址,方便分环境打包
|
||||
##### 请求参数：
|
||||
```json
|
||||
{
|
||||
"captchaType": "blockPuzzle",
|
||||
"pointJson": "QxIVdlJoWUi04iM+65hTow==", //aes加密坐标信息
|
||||
"token": "71dd26999e314f9abb0c635336976635" //get请求返回的token
|
||||
}
|
||||
```
|
||||
##### 响应参数：
|
||||
```json
|
||||
{
|
||||
"repCode": "0000",
|
||||
"repData": {
|
||||
"captchaType": "blockPuzzle",
|
||||
"token": "71dd26999e314f9abb0c635336976635",
|
||||
"result": true,
|
||||
"opAdmin": false
|
||||
},
|
||||
"success": true,
|
||||
"error": false
|
||||
}
|
||||
```
|
||||
41
captcha/aj-front/build/build.js
Normal file
41
captcha/aj-front/build/build.js
Normal file
@ -0,0 +1,41 @@
|
||||
'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 ' + process.env.NODE_ENV + '...')
|
||||
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'
|
||||
// ))
|
||||
})
|
||||
})
|
||||
54
captcha/aj-front/build/check-versions.js
Normal file
54
captcha/aj-front/build/check-versions.js
Normal file
@ -0,0 +1,54 @@
|
||||
'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)
|
||||
}
|
||||
}
|
||||
BIN
captcha/aj-front/build/logo.png
Normal file
BIN
captcha/aj-front/build/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
102
captcha/aj-front/build/utils.js
Normal file
102
captcha/aj-front/build/utils.js
Normal file
@ -0,0 +1,102 @@
|
||||
'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',
|
||||
publicPath:'../../'
|
||||
})
|
||||
} 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')
|
||||
})
|
||||
}
|
||||
}
|
||||
22
captcha/aj-front/build/vue-loader.conf.js
Normal file
22
captcha/aj-front/build/vue-loader.conf.js
Normal file
@ -0,0 +1,22 @@
|
||||
'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'
|
||||
}
|
||||
}
|
||||
92
captcha/aj-front/build/webpack.base.conf.js
Normal file
92
captcha/aj-front/build/webpack.base.conf.js
Normal file
@ -0,0 +1,92 @@
|
||||
'use strict'
|
||||
const path = require('path')
|
||||
const utils = require('./utils')
|
||||
const config = require('../config')
|
||||
const vueLoaderConfig = require('./vue-loader.conf')
|
||||
|
||||
var webpack = require("webpack")
|
||||
|
||||
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
|
||||
publicPath: config.build.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]')
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.less$/,
|
||||
loader: "style-loader!css-loader!less-loader",
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
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'
|
||||
},
|
||||
plugins: [
|
||||
new webpack.optimize.CommonsChunkPlugin('common.js'),
|
||||
new webpack.ProvidePlugin({
|
||||
jQuery: "jquery",
|
||||
$: "jquery"
|
||||
})
|
||||
]
|
||||
}
|
||||
101
captcha/aj-front/build/webpack.dev.conf.js
Normal file
101
captcha/aj-front/build/webpack.dev.conf.js
Normal file
@ -0,0 +1,101 @@
|
||||
'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, {
|
||||
// mode: 'development',
|
||||
output: {
|
||||
path: config.build.assetsRoot,
|
||||
filename: '[name].js',
|
||||
publicPath: config.dev.assetsPublicPath
|
||||
},
|
||||
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.config
|
||||
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)
|
||||
}
|
||||
})
|
||||
})
|
||||
154
captcha/aj-front/build/webpack.prod.conf.js
Normal file
154
captcha/aj-front/build/webpack.prod.conf.js
Normal file
@ -0,0 +1,154 @@
|
||||
'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')
|
||||
|
||||
var env = require('../config/dev.env')
|
||||
if (process.env.NODE_ENV === 'testing') {
|
||||
env = require('../config/test.env')
|
||||
}
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
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('config/[name].[chunkhash].js'),
|
||||
chunkFilename: utils.assetsPath('config/[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 config 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
|
||||
9
captcha/aj-front/config/dev.env.js
Normal file
9
captcha/aj-front/config/dev.env.js
Normal file
@ -0,0 +1,9 @@
|
||||
'use strict'
|
||||
const merge = require('webpack-merge')
|
||||
const prodEnv = require('./prod.env')
|
||||
|
||||
module.exports = merge(prodEnv, {
|
||||
NODE_ENV: '"development"',
|
||||
BASE_API: '"http://localhost:8080"' //如果在本地启动server/springboot 打开此注释
|
||||
// BASE_API: '"https://captcha.anji-plus.com/captcha-api"'
|
||||
})
|
||||
72
captcha/aj-front/config/index.js
Normal file
72
captcha/aj-front/config/index.js
Normal file
@ -0,0 +1,72 @@
|
||||
'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: './',//测试
|
||||
assetsPublicPath: '/',//本地
|
||||
productionSourceMap: true,
|
||||
proxyTable: {},
|
||||
|
||||
// Various Dev Server settings
|
||||
// host: '10.108.12.59', // can be overwritten by process.env.HOST
|
||||
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: false,
|
||||
// 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
|
||||
}
|
||||
}
|
||||
5
captcha/aj-front/config/prod.env.js
Normal file
5
captcha/aj-front/config/prod.env.js
Normal file
@ -0,0 +1,5 @@
|
||||
'use strict'
|
||||
module.exports = {
|
||||
NODE_ENV: '"production"',
|
||||
BASE_API: '"https://captcha.anji-plus.com/captcha-api"'
|
||||
}
|
||||
8
captcha/aj-front/config/test.env.js
Normal file
8
captcha/aj-front/config/test.env.js
Normal file
@ -0,0 +1,8 @@
|
||||
'use strict'
|
||||
const merge = require('webpack-merge')
|
||||
const prodEnv = require('./prod.env')
|
||||
|
||||
module.exports = merge(prodEnv, {
|
||||
NODE_ENV: '"testing"',
|
||||
BASE_API: '"http://localhost:8080"'
|
||||
})
|
||||
21
captcha/aj-front/index.html
Normal file
21
captcha/aj-front/index.html
Normal file
@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<title>AJ-Captcha在线体验</title>
|
||||
</head>
|
||||
<script>
|
||||
var _hmt = _hmt || [];
|
||||
(function() {
|
||||
var hm = document.createElement("script");
|
||||
hm.src = "https://hm.baidu.com/hm.js?9773cfcd3aa9f4de66a8aaed99bb4627";
|
||||
var s = document.getElementsByTagName("script")[0];
|
||||
s.parentNode.insertBefore(hm, s);
|
||||
})();
|
||||
</script>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
32981
captcha/aj-front/package-lock.json
generated
Normal file
32981
captcha/aj-front/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
82
captcha/aj-front/package.json
Normal file
82
captcha/aj-front/package.json
Normal file
@ -0,0 +1,82 @@
|
||||
{
|
||||
"name": "mirror-verify",
|
||||
"version": "1.0.0",
|
||||
"description": "A Vue.js project",
|
||||
"author": "wemooly <525507670@qq.com>",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
|
||||
"start": "npm run dev",
|
||||
"build": "cross-env NODE_ENV=production node build/build.js",
|
||||
"build:dev": "cross-env NODE_ENV=development node build/build.js",
|
||||
"build:test": "cross-env NODE_ENV=testing node build/build.js",
|
||||
"build:prod": "cross-env NODE_ENV=production node build/build.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.19.2",
|
||||
"crypto-js": "^4.0.0",
|
||||
"element-ui": "^2.13.0",
|
||||
"less": "^3.11.1",
|
||||
"less-loader": "^5.0.0",
|
||||
"mavon-editor": "^2.9.0",
|
||||
"vue": "^2.5.2",
|
||||
"vue-router": "^3.0.1",
|
||||
"vuex": "^3.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-eslint": "3.9.1",
|
||||
"autoprefixer": "^7.1.2",
|
||||
"babel-core": "^6.22.1",
|
||||
"babel-eslint": "10.0.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",
|
||||
"cross-env": "^5.2.0",
|
||||
"css-loader": "^0.28.0",
|
||||
"eslint": "5.15.3",
|
||||
"eslint-plugin-vue": "5.2.2",
|
||||
"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.3.0",
|
||||
"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"
|
||||
],
|
||||
"main": ".postcssrc.js",
|
||||
"directories": {
|
||||
"doc": "docs"
|
||||
},
|
||||
"license": "ISC"
|
||||
}
|
||||
19
captcha/aj-front/src/App.vue
Normal file
19
captcha/aj-front/src/App.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
</style>
|
||||
32
captcha/aj-front/src/api/axios.js
Normal file
32
captcha/aj-front/src/api/axios.js
Normal file
@ -0,0 +1,32 @@
|
||||
import axios from 'axios'
|
||||
axios.defaults.baseURL = process.env.BASE_API
|
||||
|
||||
const service = axios.create({
|
||||
withCredentials: true,
|
||||
timeout: 40000,
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
'Content-Type': 'application/json; charset=UTF-8'
|
||||
},
|
||||
})
|
||||
|
||||
service.interceptors.request.use(
|
||||
config => {
|
||||
return config
|
||||
},
|
||||
error => {
|
||||
// Do something with request error
|
||||
// console.log(error) // for debug
|
||||
Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// response interceptor
|
||||
service.interceptors.response.use(
|
||||
response => {
|
||||
const res = response.data
|
||||
return res
|
||||
},
|
||||
)
|
||||
|
||||
export default service
|
||||
133
captcha/aj-front/src/api/basic.js
Normal file
133
captcha/aj-front/src/api/basic.js
Normal file
@ -0,0 +1,133 @@
|
||||
import request from './axios'
|
||||
// 登录
|
||||
export function reqLogin(data) {
|
||||
return request({
|
||||
// url: 'user/noauth/login',
|
||||
url: '/base/accessUser/login',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 登出
|
||||
export function LogOut(data) {
|
||||
return request({
|
||||
url: '/base/accessUser/logout',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 项目分页接口
|
||||
export function queryByPage(data) {
|
||||
return request({
|
||||
// url: 'user/noauth/login',
|
||||
url: '/base/project/queryByPage',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 项目创建
|
||||
export function addCreate(data) {
|
||||
return request({
|
||||
url: '/base/project/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 项目信息更新
|
||||
export function UpdataPro(data) {
|
||||
return request({
|
||||
url: '/base/project/update',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 顶部项目列表
|
||||
export function GetTopPro(data) {
|
||||
return request({
|
||||
url: '/base/project/selectTop4',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 拖拽排序
|
||||
export function DndSort(data) {
|
||||
return request({
|
||||
url: '/base/sort/setListSort',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 项目置顶接口
|
||||
export function SetTop(data) {
|
||||
return request({
|
||||
url: '/base/sort/setTop',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 获得导航
|
||||
export function getMenu() {
|
||||
return request({
|
||||
url: 'auth/menu/getList',
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
export function loadOption(data1) {
|
||||
const data = {
|
||||
pageNum: 1,
|
||||
pageSize: 30,
|
||||
parameter: data1.row.code
|
||||
}
|
||||
request({
|
||||
url: 'dataDic/getValueList',
|
||||
method: 'post',
|
||||
data: data
|
||||
}).then(res => {
|
||||
return res.repData
|
||||
}).catch(error => {
|
||||
self.msgError(error.repMsg)
|
||||
})
|
||||
}
|
||||
|
||||
// 下拉框数据
|
||||
export function loadDicValList(data) {
|
||||
return request({
|
||||
url: 'dataDic/getValueList',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// delProject
|
||||
export function delProject(data) {
|
||||
return request({
|
||||
url: '/business/project/delete/' + data,
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 前端所属项目下拉接口
|
||||
export function queryForProjectSelect() {
|
||||
return request({
|
||||
url: '/base/project/queryForProjectSelect',
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
// 项目Id查询
|
||||
export function projectQueryById(data) {
|
||||
return request({
|
||||
url: '/base/project/queryById',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 前端select组件接口
|
||||
export function queryForCodeSelect() {
|
||||
return request({
|
||||
url: '/base/baseCode/queryForCodeSelect',
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
BIN
captcha/aj-front/src/assets/image/blockPuzzle.png
Normal file
BIN
captcha/aj-front/src/assets/image/blockPuzzle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
BIN
captcha/aj-front/src/assets/image/clickWord.png
Normal file
BIN
captcha/aj-front/src/assets/image/clickWord.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
captcha/aj-front/src/assets/image/default.jpg
Normal file
BIN
captcha/aj-front/src/assets/image/default.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
captcha/aj-front/src/assets/image/getKey.png
Normal file
BIN
captcha/aj-front/src/assets/image/getKey.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
captcha/aj-front/src/assets/image/liucheng.png
Normal file
BIN
captcha/aj-front/src/assets/image/liucheng.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
captcha/aj-front/src/assets/image/logo2.png
Normal file
BIN
captcha/aj-front/src/assets/image/logo2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
captcha/aj-front/src/assets/image/ziti.png
Normal file
BIN
captcha/aj-front/src/assets/image/ziti.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
BIN
captcha/aj-front/src/assets/logo.png
Normal file
BIN
captcha/aj-front/src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
733
captcha/aj-front/src/assets/style/common.css
Normal file
733
captcha/aj-front/src/assets/style/common.css
Normal file
@ -0,0 +1,733 @@
|
||||
/**
|
||||
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
|
||||
* http://cssreset.com
|
||||
*/
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
span,
|
||||
applet,
|
||||
object,
|
||||
iframe,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
a,
|
||||
abbr,
|
||||
acronym,
|
||||
address,
|
||||
big,
|
||||
cite,
|
||||
code,
|
||||
del,
|
||||
dfn,
|
||||
em,
|
||||
img,
|
||||
ins,
|
||||
kbd,
|
||||
q,
|
||||
s,
|
||||
samp,
|
||||
small,
|
||||
strike,
|
||||
strong,
|
||||
sub,
|
||||
sup,
|
||||
tt,
|
||||
var,
|
||||
b,
|
||||
u,
|
||||
i,
|
||||
center,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
fieldset,
|
||||
form,
|
||||
label,
|
||||
legend,
|
||||
table,
|
||||
caption,
|
||||
tbody,
|
||||
tfoot,
|
||||
thead,
|
||||
tr,
|
||||
th,
|
||||
td,
|
||||
article,
|
||||
aside,
|
||||
canvas,
|
||||
details,
|
||||
embed,
|
||||
figure,
|
||||
figcaption,
|
||||
footer,
|
||||
header,
|
||||
menu,
|
||||
nav,
|
||||
output,
|
||||
ruby,
|
||||
section,
|
||||
summary,
|
||||
time,
|
||||
mark,
|
||||
audio,
|
||||
video,
|
||||
input {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font-weight: normal;
|
||||
vertical-align: baseline;
|
||||
font-family: 'pingFangSC-Regular';
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
font-size: 1em;
|
||||
font-family: PingFangSC-Semibold;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
.crumbs {
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.el-icon-info {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.el-menu-item-group .el-menu-item-group__title {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
blockquote:before,
|
||||
blockquote:after,
|
||||
q:before,
|
||||
q:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/* custom */
|
||||
a {
|
||||
color: #7e8c8d;
|
||||
text-decoration: none;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
a:hover,a:visited,a:active{
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
button:hover,button:visited,button:active{
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* 滚动条 */
|
||||
::-webkit-scrollbar {
|
||||
/*垂直滚动条的宽*/
|
||||
width: 10px;
|
||||
/*垂直滚动条的高*/
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track-piece {
|
||||
/*修改滚动条的背景和圆角*/
|
||||
background: #F7F7F7;
|
||||
-webkit-border-radius: 7px;
|
||||
}
|
||||
|
||||
/*修改垂直滚动条的样式*/
|
||||
::-webkit-scrollbar-thumb:vertical {
|
||||
background-color: #dcdfe6;
|
||||
-webkit-border-radius: 7px;
|
||||
}
|
||||
|
||||
/*修改水平滚动条的样式*/
|
||||
::-webkit-scrollbar-thumb:horizontal {
|
||||
background-color: #dcdfe6;
|
||||
-webkit-border-radius: 7px;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-text-size-adjust: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
/*html,*/
|
||||
/*body,*/
|
||||
/*#app {*/
|
||||
/*height: 100%;*/
|
||||
/*}*/
|
||||
|
||||
/* IE7 */
|
||||
|
||||
input:focus,
|
||||
a:focus,
|
||||
button:focus,
|
||||
textarea:focus {
|
||||
outline: none
|
||||
}
|
||||
|
||||
::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-ms-reveal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.on-focus:focus {
|
||||
border: 1px solid #5BC0DE;
|
||||
}
|
||||
|
||||
/*清除浮动*/
|
||||
.clearfix:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
line-height: 0;
|
||||
height: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
/*button*/
|
||||
.el-button{
|
||||
/*color: #7ab1f9;*/
|
||||
}
|
||||
.el-button.padding0{
|
||||
padding: 0 !important;
|
||||
}
|
||||
.el-button.is-round{
|
||||
padding: 9px 23px;
|
||||
}
|
||||
/*表头td*/
|
||||
|
||||
.el-table th {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
/*表格tr*/
|
||||
|
||||
.el-table td {
|
||||
padding: 4px 0;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.el-table__row {
|
||||
height: 36px;
|
||||
}
|
||||
.logTable .el-table .cell {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
.logTable .el-table__row .el-table_1_column_2{
|
||||
text-align: left
|
||||
}
|
||||
|
||||
/*列表外边距*/
|
||||
|
||||
.spaceTable {
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
/*-----弹框-------*/
|
||||
.el-dialog{
|
||||
border-radius: 12px;
|
||||
}
|
||||
.el-dialog__header {
|
||||
background-color: #fff;
|
||||
padding:.8rem;
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
border-bottom: 12px solid #f2f4fb;
|
||||
}
|
||||
|
||||
.el-dialog__title {
|
||||
color: #333;
|
||||
padding-left: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn .el-dialog__close {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn .el-dialog__close:hover {
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.el-dialog--center .el-dialog__body {
|
||||
padding: 12px 25px 13px;
|
||||
}
|
||||
|
||||
.el-table th,
|
||||
.el-table thead tr {
|
||||
background-color: #EEF0F9;
|
||||
}
|
||||
|
||||
/*输入框高度*/
|
||||
.el-form-item{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.el-form-item__label,.el-form-item__content{
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
padding: 0 24px 0 10px;
|
||||
font-size: 14px !important;
|
||||
background: #fff;
|
||||
border: 1px solid #DEDEDE;
|
||||
border-radius: 100px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
/*font-size: 14px !important;*/
|
||||
resize: none;
|
||||
}
|
||||
.app-select{
|
||||
width: 80px;
|
||||
}
|
||||
.app-select .el-input__inner{
|
||||
padding: 0 24px 0 10px;
|
||||
font-size: 14px !important;
|
||||
background: none;
|
||||
border: 0;
|
||||
border-radius: 100px;
|
||||
height: 32px;
|
||||
color: #fff;
|
||||
}
|
||||
/* Tabel */
|
||||
.el-pagination,
|
||||
.el-pager,
|
||||
.el-pager,
|
||||
.number,
|
||||
.el-pagination__jump,
|
||||
.el-pagination button {
|
||||
height: 40px !important;
|
||||
line-height: 40px !important;
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-checked+.el-checkbox__label {
|
||||
color: #919191 !important;
|
||||
font-size: 14px;
|
||||
}
|
||||
.left-box .el-checkbox__input.is-checked+.el-checkbox__label {
|
||||
color: #fff !important;
|
||||
font-size: 14px;
|
||||
}
|
||||
.el-carousel__container{
|
||||
height: 29vh;
|
||||
}
|
||||
.el-carousel__indicators--outside{
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-carousel__arrow i{
|
||||
font-size: 0!important;
|
||||
}
|
||||
/*日志折叠面板定制*/
|
||||
.log .el-collapse{
|
||||
border-top:0;
|
||||
border-bottom:0;
|
||||
}
|
||||
.log .el-collapse-item__header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #fff;
|
||||
background:rgba(145,163,177,.15);
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
-webkit-transition: border-bottom-color .3s;
|
||||
transition: border-bottom-color .3s;
|
||||
outline: 0;
|
||||
padding: 0 20px;
|
||||
}
|
||||
[class*=" el-icon-"], [class^=el-icon-] {
|
||||
/* line-height: 40px; */
|
||||
}
|
||||
.log .el-collapse-item__wrap {
|
||||
will-change: height;
|
||||
overflow: hidden;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #fff;
|
||||
background: #263C7C;
|
||||
|
||||
}
|
||||
.log .el-collapse-item__content{
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
padding: 20px;
|
||||
}
|
||||
.log .el-collapse-item__arrow{
|
||||
margin-top: 14px;
|
||||
float: right;
|
||||
margin-right: -77px;
|
||||
}
|
||||
/*计算配置面板配置*/
|
||||
.analysisCollapse .xing{
|
||||
color: red;
|
||||
margin-right:5px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.analysisCollapse .el-collapse{
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
.analysisCollapse .el-collapse-item__header{
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
.analysisCollapse .el-collapse-item__wrap{
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
|
||||
/*表格样式*/
|
||||
.el-table th, .el-table thead tr {
|
||||
background: #5E6988;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-table th, .el-table thead tr {
|
||||
border:0;
|
||||
}
|
||||
/*分页*/
|
||||
.el-pagination{
|
||||
padding: 10px 0;
|
||||
}
|
||||
.el-pagination button, .el-pagination span:not([class*=suffix]) {
|
||||
vertical-align: inherit;
|
||||
}
|
||||
.el-pager, .el-pager li {
|
||||
vertical-align: inherit;
|
||||
}
|
||||
.el-pagination .el-input__inner{
|
||||
background: #fff!important;
|
||||
}
|
||||
.el-pagination .el-select .el-input .el-input__inner{
|
||||
border-radius: 100px;
|
||||
}
|
||||
.el-select .el-input.is-disabled .el-input__inner{
|
||||
height: 32px!important;
|
||||
}
|
||||
.code-selected .el-input__inner{
|
||||
height: 32px!important;
|
||||
}
|
||||
/*添加监控分步图标*/
|
||||
.el-step__main{
|
||||
margin-top: 30px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
.el-step__icon-inner{
|
||||
font-weight: 300;
|
||||
font-size: 22px;
|
||||
transform:rotate(0deg);
|
||||
-ms-transform:rotate(0deg); /* IE 9 */
|
||||
-moz-transform:rotate(0deg); /* Firefox */
|
||||
-webkit-transform:rotate(0deg); /* Safari 和 Chrome */
|
||||
-o-transform:rotate(0deg); /* Opera */
|
||||
}
|
||||
.el-step__title{
|
||||
font-size: 14px;
|
||||
}
|
||||
.el-step:last-of-type.is-flex .el-step__main{
|
||||
margin-top: 0;
|
||||
}
|
||||
.el-step__icon{
|
||||
border-radius: 60px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
.el-step__icon.is-icon{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
/*正在进行的状态*/
|
||||
.is-finish .el-step__icon{
|
||||
background:#7AB1F9;
|
||||
color: #fff;
|
||||
border-left: 3px solid #7AB1F9 ;
|
||||
border-top: 3px solid #7AB1F9 ;
|
||||
border-right: 3px solid #7AB1F9;
|
||||
border-bottom: 3px solid #7AB1F9;
|
||||
float: left;
|
||||
}
|
||||
.el-step__head.is-finish .el-step__icon .el-step__icon-inner{
|
||||
|
||||
}
|
||||
.is-process .el-step__icon .el-step__icon-inner{
|
||||
transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
-moz-transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-o-transform: rotate(-45deg);
|
||||
}
|
||||
.el-step__head.is-finish i.el-step__line-inner {
|
||||
border-width: 0!important;
|
||||
border-top-width: 3px!important;
|
||||
border-style: dashed;
|
||||
border-color: #7AB1F9;
|
||||
margin-top: -3px;
|
||||
}
|
||||
.el-step.is-horizontal .el-step__line{
|
||||
height: 0!important;
|
||||
top: 8px!important;
|
||||
}
|
||||
/*完成的状态*/
|
||||
.el-step__title.is-process{
|
||||
color: #7AB1F9;
|
||||
font-weight: 300!important;
|
||||
}
|
||||
.is-process .el-step__icon{
|
||||
background:#fff;
|
||||
color: #7AB1F9;
|
||||
border-left: 3px solid #e3eefc ;
|
||||
border-top: 3px solid #7AB1F9 ;
|
||||
border-right: 3px solid #7AB1F9;
|
||||
border-bottom: 3px solid #7AB1F9;
|
||||
transform:rotate(45deg);
|
||||
-ms-transform:rotate(45deg); /* IE 9 */
|
||||
-moz-transform:rotate(45deg); /* Firefox */
|
||||
-webkit-transform:rotate(45deg); /* Safari 和 Chrome */
|
||||
-o-transform:rotate(45deg); /* Opera */
|
||||
float: left;
|
||||
}
|
||||
.app-chart-checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner{
|
||||
background-color: #fff;
|
||||
}
|
||||
/*待完成状态*/
|
||||
.el-step__title.is-wait{
|
||||
color: #9199B1;
|
||||
font-weight: 300!important;
|
||||
}
|
||||
.is-wait .el-step__icon{
|
||||
background:#9199B1;
|
||||
color: #fff;
|
||||
border-left: 3px solid #9199B1 ;
|
||||
border-top: 3px solid #9199B1 ;
|
||||
border-right: 3px solid #9199B1;
|
||||
border-bottom: 3px solid #9199B1;
|
||||
}
|
||||
|
||||
/*步骤条的线*/
|
||||
.el-step.is-horizontal .el-step__line{
|
||||
background: none;
|
||||
border-top: 3px dashed #9199B1;
|
||||
}
|
||||
/*header*/
|
||||
.el-menu.el-menu--horizontal{
|
||||
border-bottom: none;
|
||||
}
|
||||
/*tree*/
|
||||
.el-tree {
|
||||
margin-top:10px;
|
||||
}
|
||||
/* 错误提示*/
|
||||
.el-message--error,.el-message--success,.el-message--warning{
|
||||
top:90px;
|
||||
}
|
||||
.el-upload-list--picture-card .el-upload-list__item {
|
||||
background: #99ccff;
|
||||
}
|
||||
/*日期选择控件*/
|
||||
.el-date-editor .el-range__icon{
|
||||
|
||||
}
|
||||
.el-carousel__arrow i{
|
||||
font-size: 40px;
|
||||
}
|
||||
/*提示框*/
|
||||
.el-message-box{
|
||||
width: auto!important;
|
||||
padding:10px;
|
||||
min-width: 250px;
|
||||
}
|
||||
/**/
|
||||
.gropu_by .el-select__tags .el-tag:first-child .el-icon-close{
|
||||
display: none;
|
||||
}
|
||||
/*tab 切页*/
|
||||
.el-tabs--card>.el-tabs__header{
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
.el-tabs__content{
|
||||
overflow: initial;
|
||||
}
|
||||
.el-tabs__item{
|
||||
padding: 0 6px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.el-tabs--card>.el-tabs__header .el-tabs__nav{
|
||||
border: none;
|
||||
border-bottom: 2px solid #2c3e50;
|
||||
border-radius: 0!important;
|
||||
}
|
||||
.el-tabs--bottom .el-tabs--left .el-tabs__item:last-child, .el-tabs--bottom .el-tabs--right .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--border-card .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--card .el-tabs__item:last-child, .el-tabs--top .el-tabs--left .el-tabs__item:last-child, .el-tabs--top .el-tabs--right .el-tabs__item:last-child, .el-tabs--top.el-tabs--border-card .el-tabs__item:last-child, .el-tabs--top.el-tabs--card .el-tabs__item:last-child{
|
||||
padding-right: 6px;
|
||||
}
|
||||
.el-tabs__item.is-active{
|
||||
color: #2c3e50;
|
||||
}
|
||||
.monitor-carousel .el-carousel__container{
|
||||
height: 100vh!important;
|
||||
}
|
||||
.wrap-bg{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh!important;
|
||||
background: #000;
|
||||
z-index: 999998;
|
||||
opacity: .0!important;
|
||||
}
|
||||
.wrap-content-list{
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.selectInputEntry .el-input__inner{
|
||||
min-height: 62px;
|
||||
height:auto!important;
|
||||
}
|
||||
.correlation{
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
float: left;
|
||||
padding: 0 7px;
|
||||
}
|
||||
.correlation:hover{
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
background:rgba(244,233,333,.1);
|
||||
}
|
||||
.correlation-popo{
|
||||
position:absolute;
|
||||
z-index:1;
|
||||
background:#79b1f9;
|
||||
color:#fff;
|
||||
box-shadow:0 0 9px #79b1f9;
|
||||
border-radius:12px;
|
||||
font-size:12px;
|
||||
padding: 3px;
|
||||
min-width: 100px;
|
||||
}
|
||||
.button_icon{
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
/*收藏列表tabs*/
|
||||
.chart-carousel .el-tabs__nav-wrap::after{
|
||||
background-color:transparent;
|
||||
}
|
||||
.el-tabs__active-bar{
|
||||
height: 0;
|
||||
}
|
||||
.el-tabs__item{
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.el-tabs__item:hover{
|
||||
color: #7AB1F9;
|
||||
}
|
||||
.el-tabs__item.is-active {
|
||||
color: #fff;
|
||||
background: #7AB1F9;
|
||||
font-size: 12px;
|
||||
border-radius: 50px;
|
||||
padding: 0 10px!important;
|
||||
}
|
||||
.chart-carousel .el-tabs__item{
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
/*表格超出弹出气泡框的样式*/
|
||||
.el-tooltip__popper{max-width:20%!important;}
|
||||
.el-tooltip__popper,.el-tooltip__popper.is-dark{background:#444 !important;
|
||||
color: #eee !important;}
|
||||
.more_selected .el-input__inner{
|
||||
min-height: 62px;
|
||||
height: auto;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.more_selected .el-select__tags{
|
||||
padding-left: 20px!important;
|
||||
}
|
||||
.el-row--flex.is-justify-center{
|
||||
outline: none;
|
||||
}
|
||||
.progress {
|
||||
margin-top: 18px;
|
||||
}
|
||||
.progress:nth-child(3){
|
||||
margin-top: 23px;
|
||||
}
|
||||
|
||||
.progress .el-progress-bar__outer{
|
||||
overflow: inherit;
|
||||
background: rgba(0,0,0,.1999);
|
||||
}
|
||||
.progress .el-progress-bar__inner{
|
||||
background-image: linear-gradient(83deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)!important;
|
||||
}
|
||||
.progress .el-progress-bar__innerText{
|
||||
margin-top: -38px;
|
||||
}
|
||||
321
captcha/aj-front/src/assets/style/group.css
Normal file
321
captcha/aj-front/src/assets/style/group.css
Normal file
@ -0,0 +1,321 @@
|
||||
.content {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
.bg-w {
|
||||
background: #fff;
|
||||
}
|
||||
.c-mt20 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.h2 {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
line-height: 42px;
|
||||
}
|
||||
.content-border {
|
||||
border-top: 12px solid #f2f4fb;
|
||||
}
|
||||
.pd-content {
|
||||
padding: 12px 120px;
|
||||
}
|
||||
.pd-main {
|
||||
padding-left: 2.5rem;
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
@media screen and (max-width: 1420px) {
|
||||
.pd-content {
|
||||
padding: 12px 10px;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1200px){
|
||||
.el-col-lg-22 {
|
||||
width: 99.66667%;
|
||||
}
|
||||
@media only screen and (min-width: 992px){
|
||||
.el-col-md-22 {
|
||||
width: 99.66667%;
|
||||
}
|
||||
@media only screen and (min-width: 768px){
|
||||
.el-col-sm-22 {
|
||||
width: 99.66667%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mt10{
|
||||
margin-top: 10px;
|
||||
}
|
||||
.pt20 {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.pt10 {
|
||||
padding-top: 10px;
|
||||
}
|
||||
.mb10{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.pb20 {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.pb50 {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
.pc-height {
|
||||
/*height: calc(100vh - 186px);*/
|
||||
/*height: -moz-calc(100vh - 186px);*/
|
||||
/*height: -webkit-calc(100vh - 186px);*/
|
||||
/*height: calc(100vh - 186px);*/
|
||||
/*overflow-y: auto;*/
|
||||
/*overflow-x: hidden;*/
|
||||
}
|
||||
/*搜索框，输入框，按钮*/
|
||||
input::-webkit-input-placeholder {
|
||||
/* WebKit browsers */
|
||||
color: #e3e3e3;
|
||||
}
|
||||
input:-moz-placeholder {
|
||||
/* Mozilla Firefox 4 to 18 */
|
||||
color: #e3e3e3;
|
||||
}
|
||||
input::-moz-placeholder {
|
||||
/* Mozilla Firefox 19+ */
|
||||
color: #e3e3e3;
|
||||
}
|
||||
input:-ms-input-placeholder {
|
||||
/* Internet Explorer 10+ */
|
||||
color: #e3e3e3;
|
||||
}
|
||||
.c-input {
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(151, 151, 151, 0.2);
|
||||
border-radius: 100px;
|
||||
height: 24px;
|
||||
line-height: 31px;
|
||||
padding: 3px 30px 3px 10px ;
|
||||
/*min-width: 20vw;*/
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
.c-search {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.c-search-button.position {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.c-search-button {
|
||||
background: #7ab1f9;
|
||||
border-radius: 0 30px 30px 0;
|
||||
height: 31px;
|
||||
text-align: center;
|
||||
padding: 0 16px;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
}
|
||||
.c-search-button:hover {
|
||||
color: #fff;
|
||||
background: #3395fb;
|
||||
}
|
||||
.c-button {
|
||||
border-radius: 100px;
|
||||
border: 0;
|
||||
height: 32px;
|
||||
color: #fff;
|
||||
line-height: 0;
|
||||
/*width: 90px;*/
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.c-button-normal {
|
||||
border-radius: 100px;
|
||||
border: 0;
|
||||
height: 40px;
|
||||
color: #fff;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
.c-button-mini {
|
||||
border-radius: 100px;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
padding: 5px 12px;
|
||||
text-align: center;
|
||||
}
|
||||
.c-button.blue,
|
||||
.c-button-normal.blue,
|
||||
.c-button-mini.blue {
|
||||
background: #7ab1f9;
|
||||
}
|
||||
.c-button.green,
|
||||
.c-button-normal.green,
|
||||
.c-button-mini.green {
|
||||
background: #7ed321;
|
||||
}
|
||||
.c-button.red,
|
||||
.c-button-normal.red,
|
||||
.c-button-mini.red {
|
||||
background: #ff7272;
|
||||
}
|
||||
.c-button.yellow,
|
||||
.c-button-normal.yellow,
|
||||
.c-button-mini.yellow {
|
||||
background: #f6a93b;
|
||||
}
|
||||
.c-button.white,
|
||||
.c-button-normal.white,
|
||||
.c-button-mini.white {
|
||||
background: #fff;
|
||||
border: 1px solid #79b1f9;
|
||||
color: #79b1f9;
|
||||
}
|
||||
.c-button.purple,
|
||||
.c-button-normal.purple,
|
||||
.c-button-mini.purple {
|
||||
background: #e5bfa3;
|
||||
}
|
||||
.c-button.blue:hover,
|
||||
.c-button-normal.blue:hover,
|
||||
.c-button-mini.blue:hover {
|
||||
color: white;
|
||||
background: #3395fb;
|
||||
}
|
||||
.c-button.green:hover,
|
||||
.c-button-normal.green:hover,
|
||||
.c-button-mini.green:hover {
|
||||
color: white;
|
||||
background: #50d310;
|
||||
}
|
||||
.c-button.red:hover,
|
||||
.c-button-normal.red:hover,
|
||||
.c-button-mini.red:hover {
|
||||
color: white;
|
||||
background: #ff7260;
|
||||
}
|
||||
.c-button.yellow:hover,
|
||||
.c-button-normal.yellow:hover,
|
||||
.c-button-mini.yellow:hover {
|
||||
color: white;
|
||||
background: #f6b01d;
|
||||
}
|
||||
.c-button.white:hover,
|
||||
.c-button-normal.white:hover,
|
||||
.c-button-mini.white:hover {
|
||||
color: #fff;
|
||||
background: #79b1f9;
|
||||
}
|
||||
.c-button.purple:hover,
|
||||
.c-button-normal.purple:hover,
|
||||
.c-button-mini.purple:hover {
|
||||
color: #fff;
|
||||
background: #e5bfa3;
|
||||
}
|
||||
/*图标 按钮 隐藏按钮特性*/
|
||||
.icon-btn_style {
|
||||
background: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.icon-btn_style:hover {
|
||||
background: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/*模态框 总体样式*/
|
||||
.dialog {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 9999;
|
||||
}
|
||||
.dialog .dialog-container {
|
||||
width: 600px;
|
||||
height: 500px;
|
||||
background: #ffffff;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
}
|
||||
.dialog .dialog-title {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
font-size: 18px;
|
||||
color: #696969;
|
||||
font-weight: 600;
|
||||
padding: 16px 50px 0 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.content {
|
||||
color: #797979;
|
||||
line-height: 26px;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.inp {
|
||||
margin: 10px 0 0 20px;
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
padding-left: 4px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
background: #efefef;
|
||||
outline: none;
|
||||
}
|
||||
.inp:focus {
|
||||
border: 1px solid #509ee3;
|
||||
}
|
||||
.btns {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
text-align: right;
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.btns > div {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 14px;
|
||||
color: #ffffff;
|
||||
background: #f1f1f1;
|
||||
border-radius: 8px;
|
||||
margin-right: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.close-btn:hover {
|
||||
font-weight: 600;
|
||||
}
|
||||
/*main*/
|
||||
.search-pop {
|
||||
margin-top: 64px;
|
||||
}
|
||||
.table-input .el-input--mini .el-input__inner {
|
||||
height: 32px !important;
|
||||
}
|
||||
.see-data .el-input {
|
||||
width: auto !important;
|
||||
}
|
||||
.fr{
|
||||
float: right;
|
||||
}
|
||||
12
captcha/aj-front/src/assets/style/markdown.less
Normal file
12
captcha/aj-front/src/assets/style/markdown.less
Normal file
@ -0,0 +1,12 @@
|
||||
/deep/.v-note-wrapper {
|
||||
.v-note-op{
|
||||
display: none!important;
|
||||
}
|
||||
.v-note-edit{
|
||||
display: none!important;
|
||||
}
|
||||
.v-note-show{
|
||||
width: 100%!important;
|
||||
flex: 0 0 100%!important;
|
||||
}
|
||||
}
|
||||
87
captcha/aj-front/src/assets/style/theme.css
Normal file
87
captcha/aj-front/src/assets/style/theme.css
Normal file
@ -0,0 +1,87 @@
|
||||
.mt5 {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.mt10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.mt12 {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.mt20 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.mb5 {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.mb10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.mb12 {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.mb20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.mt30 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.mt40 {
|
||||
margin-top: 40px;
|
||||
}
|
||||
.mt50 {
|
||||
margin-top: 50px;
|
||||
}
|
||||
.mt60 {
|
||||
margin-top: 60px;
|
||||
}
|
||||
.mt70 {
|
||||
margin-top: 750px;
|
||||
}
|
||||
.mt80 {
|
||||
margin-top: 80px;
|
||||
}
|
||||
.ml5 {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.ml10 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.ml12 {
|
||||
margin-left: 12px;
|
||||
}
|
||||
.ml20 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.ml30 {
|
||||
margin-left: 30px;
|
||||
}
|
||||
.ml40 {
|
||||
margin-left: 40px;
|
||||
}
|
||||
.ml50 {
|
||||
margin-left: 50px;
|
||||
}
|
||||
.ml60 {
|
||||
margin-left: 60px;
|
||||
}
|
||||
.ml70 {
|
||||
margin-left: 750px;
|
||||
}
|
||||
.ml80 {
|
||||
margin-left: 80px;
|
||||
}
|
||||
.fl {
|
||||
float: left;
|
||||
}
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
.mt5vh {
|
||||
margin-top: 5vh;
|
||||
}
|
||||
.mt10vh {
|
||||
margin-top: 10vh;
|
||||
}
|
||||
.mt14vh {
|
||||
margin-top: 11vh;
|
||||
}
|
||||
0
captcha/aj-front/src/assets/style/theme.css.map
Normal file
0
captcha/aj-front/src/assets/style/theme.css.map
Normal file
131
captcha/aj-front/src/assets/style/theme.less
Normal file
131
captcha/aj-front/src/assets/style/theme.less
Normal file
@ -0,0 +1,131 @@
|
||||
// image
|
||||
//@image: "@/common/image";
|
||||
// color
|
||||
@blue: #0D76BD;
|
||||
@lightblue: #3E76D4;
|
||||
@azure: #3376E4;
|
||||
@grren: #00CC99;
|
||||
@red: #FF7272;
|
||||
@pink: #FDA5A5;
|
||||
@purple: #B68BFF;
|
||||
@gray: #666;
|
||||
@white: #fff;
|
||||
@lightgray:#D8D8D8;
|
||||
@grayf2:#F2F4FB;
|
||||
@ft-btn-color:#7AB1F9;
|
||||
@color333:#333;
|
||||
@steelgray:#5E6988;
|
||||
// font
|
||||
@f12: 12px;
|
||||
@f13: 13px;
|
||||
@f14: 14px;
|
||||
@f15: 15px;
|
||||
@f16: 16px;
|
||||
@f18: 18px;
|
||||
@f24: 24px;
|
||||
//jianju
|
||||
@px3:3px;
|
||||
@px5:5px;
|
||||
@px10:10px;
|
||||
@px12:12px;
|
||||
@px16:16px;
|
||||
@px24:24px;
|
||||
@px30:30px;
|
||||
//百分比
|
||||
@c10:10%;
|
||||
@c20:20%;
|
||||
@c30:30%;
|
||||
@c40:40%;
|
||||
@c50:50%;
|
||||
@c100:100%;
|
||||
.mt5{
|
||||
margin-top: 5px;
|
||||
}
|
||||
.mt10{
|
||||
margin-top: 10px;
|
||||
}
|
||||
.mt12{
|
||||
margin-top: 12px;
|
||||
}
|
||||
.mt20{
|
||||
margin-top: 20px;
|
||||
}
|
||||
.mb5{
|
||||
margin-top: 5px;
|
||||
}
|
||||
.mb10{
|
||||
margin-top: 10px;
|
||||
}
|
||||
.mb12{
|
||||
margin-top: 12px;
|
||||
}
|
||||
.mb20{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.mt30{
|
||||
margin-top: 30px;
|
||||
}
|
||||
.mt40{
|
||||
margin-top: 40px;
|
||||
}
|
||||
.mt50{
|
||||
margin-top: 50px;
|
||||
}
|
||||
.mt60{
|
||||
margin-top: 60px;
|
||||
}
|
||||
.mt70 {
|
||||
margin-top: 750px;
|
||||
}
|
||||
.mt80{
|
||||
margin-top: 80px;
|
||||
}
|
||||
.ml5{
|
||||
margin-left: 5px;
|
||||
}
|
||||
.ml10{
|
||||
margin-left: 10px;
|
||||
}
|
||||
.ml12{
|
||||
margin-left: 12px;
|
||||
}
|
||||
.ml20{
|
||||
margin-left: 20px;
|
||||
}
|
||||
.mr20{
|
||||
margin-right: 20px;
|
||||
}
|
||||
.ml30{
|
||||
margin-left: 30px;
|
||||
}
|
||||
.ml40{
|
||||
margin-left: 40px;
|
||||
}
|
||||
.ml50{
|
||||
margin-left: 50px;
|
||||
}
|
||||
.ml60{
|
||||
margin-left: 60px;
|
||||
}
|
||||
.ml70 {
|
||||
margin-left: 750px;
|
||||
}
|
||||
.ml80{
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.fl{
|
||||
float: left;
|
||||
}
|
||||
.fr{
|
||||
float: right;
|
||||
}
|
||||
.mt5vh{
|
||||
margin-top: 5vh;
|
||||
}
|
||||
.mt10vh{
|
||||
margin-top: 10vh;
|
||||
}
|
||||
.mt14vh{
|
||||
margin-top: 11vh;
|
||||
}
|
||||
58
captcha/aj-front/src/components/Markdown.vue
Normal file
58
captcha/aj-front/src/components/Markdown.vue
Normal file
@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div class="markdown">
|
||||
<mavon-editor v-model="value" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { readFile } from './../utils/readFile'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
filePath: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: ' '
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
newFilePath: '',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'filePath': {
|
||||
handler() {
|
||||
this.newFilePath = 'https://captcha.anji-plus.com/' + this.filePath
|
||||
this.loadFile()
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadFile() {
|
||||
readFile(this.newFilePath).then(res => {
|
||||
this.value = res.data ? res.data : res
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/deep/.v-note-wrapper {
|
||||
height:calc(100vh - 186px)!important;
|
||||
.v-note-op{
|
||||
display: none!important;
|
||||
}
|
||||
.v-note-edit{
|
||||
display: none!important;
|
||||
}
|
||||
.v-note-show{
|
||||
width: 100%!important;
|
||||
flex: 0 0 100%!important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
493
captcha/aj-front/src/components/verifition/Verify.vue
Normal file
493
captcha/aj-front/src/components/verifition/Verify.vue
Normal file
File diff suppressed because one or more lines are too long
@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<div
|
||||
style="position: relative"
|
||||
>
|
||||
<div class="verify-img-out">
|
||||
<div
|
||||
class="verify-img-panel"
|
||||
:style="{'width': setSize.imgWidth,
|
||||
'height': setSize.imgHeight,
|
||||
'background-size' : setSize.imgWidth + ' '+ setSize.imgHeight,
|
||||
'margin-bottom': vSpace + 'px'}"
|
||||
>
|
||||
<div v-show="showRefresh" class="verify-refresh" style="z-index:3" @click="refresh">
|
||||
<i class="iconfont icon-refresh" />
|
||||
</div>
|
||||
<img
|
||||
ref="canvas"
|
||||
:src="pointBackImgBase?('data:image/png;base64,'+pointBackImgBase):defaultImg"
|
||||
alt=""
|
||||
style="width:100%;height:100%;display:block"
|
||||
@click="bindingClick?canvasClick($event):undefined"
|
||||
>
|
||||
|
||||
<div
|
||||
v-for="(tempPoint, index) in tempPoints"
|
||||
:key="index"
|
||||
class="point-area"
|
||||
:style="{
|
||||
'background-color':'#1abd6c',
|
||||
color:'#fff',
|
||||
'z-index':9999,
|
||||
width:'20px',
|
||||
height:'20px',
|
||||
'text-align':'center',
|
||||
'line-height':'20px',
|
||||
'border-radius': '50%',
|
||||
position:'absolute',
|
||||
top:parseInt(tempPoint.y-10) + 'px',
|
||||
left:parseInt(tempPoint.x-10) + 'px'
|
||||
}"
|
||||
>
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 'height': this.barSize.height, -->
|
||||
<div
|
||||
class="verify-bar-area"
|
||||
:style="{'width': setSize.imgWidth,
|
||||
'color': this.barAreaColor,
|
||||
'border-color': this.barAreaBorderColor,
|
||||
'line-height':this.barSize.height}"
|
||||
>
|
||||
<span class="verify-msg">{{ text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/babel">
|
||||
/**
|
||||
* VerifyPoints
|
||||
* @description 点选
|
||||
* */
|
||||
import { resetSize, _code_chars, _code_color1, _code_color2 } from './../utils/util'
|
||||
import { aesEncrypt } from './../utils/ase'
|
||||
import { reqGet, reqCheck } from './../api/index'
|
||||
|
||||
export default {
|
||||
name: 'VerifyPoints',
|
||||
props: {
|
||||
// 弹出式pop，固定fixed
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'fixed'
|
||||
},
|
||||
captchaType: {
|
||||
type: String,
|
||||
},
|
||||
// 间隔
|
||||
vSpace: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
imgSize: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: '310px',
|
||||
height: '155px'
|
||||
}
|
||||
}
|
||||
},
|
||||
barSize: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: '310px',
|
||||
height: '40px'
|
||||
}
|
||||
}
|
||||
},
|
||||
defaultImg: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
secretKey: '', // 后端返回的ase加密秘钥
|
||||
checkNum: 3, // 默认需要点击的字数
|
||||
fontPos: [], // 选中的坐标信息
|
||||
checkPosArr: [], // 用户点击的坐标
|
||||
num: 1, // 点击的记数
|
||||
pointBackImgBase: '', // 后端获取到的背景图片
|
||||
poinTextList: [], // 后端返回的点击字体顺序
|
||||
backToken: '', // 后端返回的token值
|
||||
setSize: {
|
||||
imgHeight: 0,
|
||||
imgWidth: 0,
|
||||
barHeight: 0,
|
||||
barWidth: 0
|
||||
},
|
||||
tempPoints: [],
|
||||
text: '',
|
||||
barAreaColor: undefined,
|
||||
barAreaBorderColor: undefined,
|
||||
showRefresh: true,
|
||||
bindingClick: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
resetSize() {
|
||||
return resetSize
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// type变化则全面刷新
|
||||
type: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.init()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 禁止拖拽
|
||||
this.$el.onselectstart = function() {
|
||||
return false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
// 加载页面
|
||||
this.fontPos.splice(0, this.fontPos.length)
|
||||
this.checkPosArr.splice(0, this.checkPosArr.length)
|
||||
this.num = 1
|
||||
this.getPictrue()
|
||||
this.$nextTick(() => {
|
||||
this.setSize = this.resetSize(this) // 重新设置宽度高度
|
||||
this.$parent.$emit('ready', this)
|
||||
})
|
||||
},
|
||||
canvasClick(e) {
|
||||
this.checkPosArr.push(this.getMousePos(this.$refs.canvas, e))
|
||||
if (this.num == this.checkNum) {
|
||||
this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e))
|
||||
// 按比例转换坐标值
|
||||
this.checkPosArr = this.pointTransfrom(this.checkPosArr, this.setSize)
|
||||
// 等创建坐标执行完
|
||||
setTimeout(() => {
|
||||
// var flag = this.comparePos(this.fontPos, this.checkPosArr);
|
||||
// 发送后端请求
|
||||
var captchaVerification = this.secretKey ? aesEncrypt(this.backToken + '---' + JSON.stringify(this.checkPosArr), this.secretKey) : this.backToken + '---' + JSON.stringify(this.checkPosArr)
|
||||
const data = {
|
||||
captchaType: this.captchaType,
|
||||
'pointJson': this.secretKey ? aesEncrypt(JSON.stringify(this.checkPosArr), this.secretKey) : JSON.stringify(this.checkPosArr),
|
||||
'token': this.backToken
|
||||
}
|
||||
reqCheck(data).then(res => {
|
||||
if (res.repCode == '0000') {
|
||||
this.barAreaColor = '#4cae4c'
|
||||
this.barAreaBorderColor = '#5cb85c'
|
||||
this.text = '验证成功'
|
||||
this.bindingClick = false
|
||||
if (this.mode == 'pop') {
|
||||
setTimeout(() => {
|
||||
this.$parent.clickShow = false
|
||||
this.refresh()
|
||||
}, 1500)
|
||||
}
|
||||
this.$parent.$emit('success', { captchaVerification })
|
||||
} else {
|
||||
this.$parent.$emit('error', this)
|
||||
this.barAreaColor = '#d9534f'
|
||||
this.barAreaBorderColor = '#d9534f'
|
||||
this.text = '验证失败'
|
||||
setTimeout(() => {
|
||||
this.refresh()
|
||||
}, 700)
|
||||
}
|
||||
})
|
||||
}, 400)
|
||||
}
|
||||
if (this.num < this.checkNum) {
|
||||
this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e))
|
||||
}
|
||||
},
|
||||
|
||||
// 获取坐标
|
||||
getMousePos: function(obj, e) {
|
||||
var x = e.offsetX
|
||||
var y = e.offsetY
|
||||
return { x, y }
|
||||
},
|
||||
// 创建坐标点
|
||||
createPoint: function(pos) {
|
||||
this.tempPoints.push(Object.assign({}, pos))
|
||||
return ++this.num
|
||||
},
|
||||
refresh: function() {
|
||||
this.tempPoints.splice(0, this.tempPoints.length)
|
||||
this.barAreaColor = '#000'
|
||||
this.barAreaBorderColor = '#ddd'
|
||||
this.bindingClick = true
|
||||
this.fontPos.splice(0, this.fontPos.length)
|
||||
this.checkPosArr.splice(0, this.checkPosArr.length)
|
||||
this.num = 1
|
||||
this.getPictrue()
|
||||
this.text = '验证失败'
|
||||
this.showRefresh = true
|
||||
},
|
||||
|
||||
// 请求背景图片和验证图片
|
||||
getPictrue() {
|
||||
const data = {
|
||||
captchaType: this.captchaType,
|
||||
clientUid: localStorage.getItem('point'),
|
||||
ts: Date.now(), // 现在的时间戳
|
||||
}
|
||||
reqGet(data).then(res => {
|
||||
if (res.repCode == '0000') {
|
||||
this.pointBackImgBase = res.repData.originalImageBase64
|
||||
this.backToken = res.repData.token
|
||||
this.secretKey = res.repData.secretKey
|
||||
this.poinTextList = res.repData.wordList
|
||||
this.text = '请依次点击【' + this.poinTextList.join(',') + '】'
|
||||
} else {
|
||||
this.text = res.repMsg
|
||||
}
|
||||
|
||||
// 判断接口请求次数是否失效
|
||||
if (res.repCode == '6201') {
|
||||
this.pointBackImgBase = null
|
||||
}
|
||||
})
|
||||
},
|
||||
// 坐标转换函数
|
||||
pointTransfrom(pointArr, imgSize) {
|
||||
var newPointArr = pointArr.map(p => {
|
||||
const x = Math.round(310 * p.x / parseInt(imgSize.imgWidth))
|
||||
const y = Math.round(155 * p.y / parseInt(imgSize.imgHeight))
|
||||
return { x, y }
|
||||
})
|
||||
// console.log(newPointArr,"newPointArr");
|
||||
return newPointArr
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,377 @@
|
||||
<template>
|
||||
<div style="position: relative;">
|
||||
<div
|
||||
v-if="type === '2'"
|
||||
class="verify-img-out"
|
||||
:style="{height: (parseInt(setSize.imgHeight) + vSpace) + 'px'}"
|
||||
>
|
||||
<div
|
||||
class="verify-img-panel"
|
||||
:style="{width: setSize.imgWidth,
|
||||
height: setSize.imgHeight,}"
|
||||
>
|
||||
<img :src="backImgBase?('data:image/png;base64,'+backImgBase):defaultImg" alt="" style="width:100%;height:100%;display:block">
|
||||
<div v-show="showRefresh" class="verify-refresh" @click="refresh"><i class="iconfont icon-refresh" />
|
||||
</div>
|
||||
<transition name="tips">
|
||||
<span v-if="tipWords" class="verify-tips" :class="passFlag ?'suc-bg':'err-bg'">{{ tipWords }}</span>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 公共部分 -->
|
||||
<div
|
||||
class="verify-bar-area"
|
||||
:style="{width: setSize.imgWidth,
|
||||
height: barSize.height,
|
||||
'line-height':barSize.height}"
|
||||
>
|
||||
<span class="verify-msg" v-text="text" />
|
||||
<div
|
||||
class="verify-left-bar"
|
||||
:style="{width: (leftBarWidth!==undefined)?leftBarWidth: barSize.height, height: barSize.height, 'border-color': leftBarBorderColor, transaction: transitionWidth}"
|
||||
>
|
||||
<span class="verify-msg" v-text="finishText" />
|
||||
<div
|
||||
class="verify-move-block"
|
||||
:style="{width: barSize.height, height: barSize.height, 'background-color': moveBlockBackgroundColor, left: moveBlockLeft, transition: transitionLeft}"
|
||||
@touchstart="start"
|
||||
@mousedown="start"
|
||||
>
|
||||
<i
|
||||
:class="['verify-icon iconfont', iconClass]"
|
||||
:style="{color: iconColor}"
|
||||
/>
|
||||
<div
|
||||
v-if="type === '2'"
|
||||
class="verify-sub-block"
|
||||
:style="{'width':Math.floor(parseInt(setSize.imgWidth)*47/310)+ 'px',
|
||||
'height': setSize.imgHeight,
|
||||
'top':'-' + (parseInt(setSize.imgHeight) + vSpace) + 'px',
|
||||
'background-size': setSize.imgWidth + ' ' + setSize.imgHeight,
|
||||
}"
|
||||
>
|
||||
<img :src="'data:image/png;base64,'+blockBackImgBase" alt="" style="width:100%;height:100%;display:block">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/babel">
|
||||
/**
|
||||
* VerifySlide
|
||||
* @description 滑块
|
||||
* */
|
||||
import { aesEncrypt } from './../utils/ase'
|
||||
import { resetSize } from './../utils/util'
|
||||
import { reqGet, reqCheck } from './../api/index'
|
||||
|
||||
// "captchaType":"blockPuzzle",
|
||||
export default {
|
||||
name: 'VerifySlide',
|
||||
props: {
|
||||
captchaType: {
|
||||
type: String,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: '1'
|
||||
},
|
||||
// 弹出式pop，固定fixed
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'fixed'
|
||||
},
|
||||
vSpace: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
explain: {
|
||||
type: String,
|
||||
default: '向右滑动完成验证'
|
||||
},
|
||||
imgSize: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: '310px',
|
||||
height: '155px'
|
||||
}
|
||||
}
|
||||
},
|
||||
blockSize: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: '50px',
|
||||
height: '50px'
|
||||
}
|
||||
}
|
||||
},
|
||||
barSize: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: '310px',
|
||||
height: '40px'
|
||||
}
|
||||
}
|
||||
},
|
||||
defaultImg: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
secretKey: '', // 后端返回的加密秘钥 字段
|
||||
passFlag: '', // 是否通过的标识
|
||||
backImgBase: '', // 验证码背景图片
|
||||
blockBackImgBase: '', // 验证滑块的背景图片
|
||||
backToken: '', // 后端返回的唯一token值
|
||||
startMoveTime: '', // 移动开始的时间
|
||||
endMovetime: '', // 移动结束的时间
|
||||
tipsBackColor: '', // 提示词的背景颜色
|
||||
tipWords: '',
|
||||
text: '',
|
||||
finishText: '',
|
||||
setSize: {
|
||||
imgHeight: 0,
|
||||
imgWidth: 0,
|
||||
barHeight: 0,
|
||||
barWidth: 0
|
||||
},
|
||||
top: 0,
|
||||
left: 0,
|
||||
moveBlockLeft: undefined,
|
||||
leftBarWidth: undefined,
|
||||
// 移动中样式
|
||||
moveBlockBackgroundColor: undefined,
|
||||
leftBarBorderColor: '#ddd',
|
||||
iconColor: undefined,
|
||||
iconClass: 'icon-right',
|
||||
status: false, // 鼠标状态
|
||||
isEnd: false, // 是够验证完成
|
||||
showRefresh: true,
|
||||
transitionLeft: '',
|
||||
transitionWidth: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
barArea() {
|
||||
return this.$el.querySelector('.verify-bar-area')
|
||||
},
|
||||
resetSize() {
|
||||
return resetSize
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// type变化则全面刷新
|
||||
type: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.init()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 禁止拖拽
|
||||
this.$el.onselectstart = function() {
|
||||
return false
|
||||
}
|
||||
console.log(this.defaultImg)
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.text = this.explain
|
||||
this.getPictrue()
|
||||
this.$nextTick(() => {
|
||||
const setSize = this.resetSize(this) // 重新设置宽度高度
|
||||
for (const key in setSize) {
|
||||
this.$set(this.setSize, key, setSize[key])
|
||||
}
|
||||
this.$parent.$emit('ready', this)
|
||||
})
|
||||
|
||||
var _this = this
|
||||
|
||||
window.removeEventListener('touchmove', function(e) {
|
||||
_this.move(e)
|
||||
})
|
||||
window.removeEventListener('mousemove', function(e) {
|
||||
_this.move(e)
|
||||
})
|
||||
|
||||
// 鼠标松开
|
||||
window.removeEventListener('touchend', function() {
|
||||
_this.end()
|
||||
})
|
||||
window.removeEventListener('mouseup', function() {
|
||||
_this.end()
|
||||
})
|
||||
|
||||
window.addEventListener('touchmove', function(e) {
|
||||
_this.move(e)
|
||||
})
|
||||
window.addEventListener('mousemove', function(e) {
|
||||
_this.move(e)
|
||||
})
|
||||
|
||||
// 鼠标松开
|
||||
window.addEventListener('touchend', function() {
|
||||
_this.end()
|
||||
})
|
||||
window.addEventListener('mouseup', function() {
|
||||
_this.end()
|
||||
})
|
||||
},
|
||||
|
||||
// 鼠标按下
|
||||
start: function(e) {
|
||||
e = e || window.event
|
||||
if (!e.touches) { // 兼容PC端
|
||||
var x = e.clientX
|
||||
} else { // 兼容移动端
|
||||
var x = e.touches[0].pageX
|
||||
}
|
||||
this.startLeft = Math.floor(x - this.barArea.getBoundingClientRect().left)
|
||||
this.startMoveTime = +new Date() // 开始滑动的时间
|
||||
if (this.isEnd == false) {
|
||||
this.text = ''
|
||||
this.moveBlockBackgroundColor = '#337ab7'
|
||||
this.leftBarBorderColor = '#337AB7'
|
||||
this.iconColor = '#fff'
|
||||
e.stopPropagation()
|
||||
this.status = true
|
||||
}
|
||||
},
|
||||
// 鼠标移动
|
||||
move: function(e) {
|
||||
e = e || window.event
|
||||
if (this.status && this.isEnd == false) {
|
||||
if (!e.touches) { // 兼容PC端
|
||||
var x = e.clientX
|
||||
} else { // 兼容移动端
|
||||
var x = e.touches[0].pageX
|
||||
}
|
||||
var bar_area_left = this.barArea.getBoundingClientRect().left
|
||||
var move_block_left = x - bar_area_left // 小方块相对于父元素的left值
|
||||
if (move_block_left >= this.barArea.offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2) {
|
||||
move_block_left = this.barArea.offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2
|
||||
}
|
||||
if (move_block_left <= 0) {
|
||||
move_block_left = parseInt(parseInt(this.blockSize.width) / 2)
|
||||
}
|
||||
// 拖动后小方块的left值
|
||||
this.moveBlockLeft = (move_block_left - this.startLeft) + 'px'
|
||||
this.leftBarWidth = (move_block_left - this.startLeft) + 'px'
|
||||
}
|
||||
},
|
||||
|
||||
// 鼠标松开
|
||||
end: function() {
|
||||
this.endMovetime = +new Date()
|
||||
var _this = this
|
||||
// 判断是否重合
|
||||
if (this.status && this.isEnd == false) {
|
||||
var moveLeftDistance = parseInt((this.moveBlockLeft || '').replace('px', ''))
|
||||
moveLeftDistance = moveLeftDistance * 310 / parseInt(this.setSize.imgWidth)
|
||||
const data = {
|
||||
captchaType: this.captchaType,
|
||||
'pointJson': this.secretKey ? aesEncrypt(JSON.stringify({ x: moveLeftDistance, y: 5.0 }), this.secretKey) : JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
|
||||
'token': this.backToken
|
||||
}
|
||||
reqCheck(data).then(res => {
|
||||
if (res.repCode == '0000') {
|
||||
this.moveBlockBackgroundColor = '#5cb85c'
|
||||
this.leftBarBorderColor = '#5cb85c'
|
||||
this.iconColor = '#fff'
|
||||
this.iconClass = 'icon-check'
|
||||
this.showRefresh = false
|
||||
this.isEnd = true
|
||||
if (this.mode == 'pop') {
|
||||
setTimeout(() => {
|
||||
this.$parent.clickShow = false
|
||||
this.refresh()
|
||||
}, 1500)
|
||||
}
|
||||
this.passFlag = true
|
||||
this.tipWords = `${((this.endMovetime - this.startMoveTime) / 1000).toFixed(2)}s验证成功`
|
||||
var captchaVerification = this.secretKey ? aesEncrypt(this.backToken + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 }), this.secretKey) : this.backToken + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 })
|
||||
setTimeout(() => {
|
||||
this.tipWords = ''
|
||||
this.$parent.closeBox()
|
||||
this.$parent.$emit('success', { captchaVerification })
|
||||
}, 1000)
|
||||
} else {
|
||||
this.moveBlockBackgroundColor = '#d9534f'
|
||||
this.leftBarBorderColor = '#d9534f'
|
||||
this.iconColor = '#fff'
|
||||
this.iconClass = 'icon-close'
|
||||
this.passFlag = false
|
||||
setTimeout(function() {
|
||||
_this.refresh()
|
||||
}, 1000)
|
||||
this.$parent.$emit('error', this)
|
||||
this.tipWords = '验证失败'
|
||||
setTimeout(() => {
|
||||
this.tipWords = ''
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
this.status = false
|
||||
}
|
||||
},
|
||||
|
||||
refresh: function() {
|
||||
this.showRefresh = true
|
||||
this.finishText = ''
|
||||
|
||||
this.transitionLeft = 'left .3s'
|
||||
this.moveBlockLeft = 0
|
||||
|
||||
this.leftBarWidth = undefined
|
||||
this.transitionWidth = 'width .3s'
|
||||
|
||||
this.leftBarBorderColor = '#ddd'
|
||||
this.moveBlockBackgroundColor = '#fff'
|
||||
this.iconColor = '#000'
|
||||
this.iconClass = 'icon-right'
|
||||
this.isEnd = false
|
||||
|
||||
this.getPictrue()
|
||||
setTimeout(() => {
|
||||
this.transitionWidth = ''
|
||||
this.transitionLeft = ''
|
||||
this.text = this.explain
|
||||
}, 300)
|
||||
},
|
||||
|
||||
// 请求背景图片和验证图片
|
||||
getPictrue() {
|
||||
const data = {
|
||||
captchaType: this.captchaType,
|
||||
clientUid: localStorage.getItem('slider'),
|
||||
ts: Date.now(), // 现在的时间戳
|
||||
}
|
||||
reqGet(data).then(res => {
|
||||
if (res.repCode == '0000') {
|
||||
this.backImgBase = res.repData.originalImageBase64
|
||||
this.blockBackImgBase = res.repData.jigsawImageBase64
|
||||
this.backToken = res.repData.token
|
||||
this.secretKey = res.repData.secretKey
|
||||
} else {
|
||||
this.tipWords = res.repMsg
|
||||
}
|
||||
|
||||
// 判断接口请求次数是否失效
|
||||
if (res.repCode == '6201') {
|
||||
this.backImgBase = null
|
||||
this.blockBackImgBase = null
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
25
captcha/aj-front/src/components/verifition/api/index.js
Normal file
25
captcha/aj-front/src/components/verifition/api/index.js
Normal file
@ -0,0 +1,25 @@
|
||||
/**
|
||||
* 此处可直接引用自己项目封装好的 axios 配合后端联调
|
||||
*/
|
||||
|
||||
import request from './../utils/axios' // 组件内部封装的axios
|
||||
// import request from "@/api/axios.js" //调用项目封装的axios
|
||||
|
||||
// 获取验证图片 以及token
|
||||
export function reqGet(data) {
|
||||
return request({
|
||||
url: '/captcha/get',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 滑动或者点选验证
|
||||
export function reqCheck(data) {
|
||||
return request({
|
||||
url: '/captcha/check',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
11
captcha/aj-front/src/components/verifition/utils/ase.js
Normal file
11
captcha/aj-front/src/components/verifition/utils/ase.js
Normal file
@ -0,0 +1,11 @@
|
||||
import CryptoJS from 'crypto-js'
|
||||
/**
|
||||
* @word 要加密的内容
|
||||
* @keyWord String 服务器随机返回的关键字
|
||||
* */
|
||||
export function aesEncrypt(word, keyWord = 'XwKsGlMcdPMEhR1B') {
|
||||
var key = CryptoJS.enc.Utf8.parse(keyWord)
|
||||
var srcs = CryptoJS.enc.Utf8.parse(word)
|
||||
var encrypted = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })
|
||||
return encrypted.toString()
|
||||
}
|
||||
30
captcha/aj-front/src/components/verifition/utils/axios.js
Normal file
30
captcha/aj-front/src/components/verifition/utils/axios.js
Normal file
@ -0,0 +1,30 @@
|
||||
import axios from 'axios'
|
||||
|
||||
axios.defaults.baseURL = process.env.BASE_API
|
||||
|
||||
const service = axios.create({
|
||||
timeout: 40000,
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
'Content-Type': 'application/json; charset=UTF-8'
|
||||
},
|
||||
})
|
||||
service.interceptors.request.use(
|
||||
config => {
|
||||
return config
|
||||
},
|
||||
error => {
|
||||
Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// response interceptor
|
||||
service.interceptors.response.use(
|
||||
response => {
|
||||
const res = response.data
|
||||
return res
|
||||
},
|
||||
error => {
|
||||
}
|
||||
)
|
||||
export default service
|
||||
36
captcha/aj-front/src/components/verifition/utils/util.js
Normal file
36
captcha/aj-front/src/components/verifition/utils/util.js
Normal file
@ -0,0 +1,36 @@
|
||||
export function resetSize(vm) {
|
||||
var img_width, img_height, bar_width, bar_height // 图片的宽度、高度，移动条的宽度、高度
|
||||
|
||||
var parentWidth = vm.$el.parentNode.offsetWidth || window.offsetWidth
|
||||
var parentHeight = vm.$el.parentNode.offsetHeight || window.offsetHeight
|
||||
|
||||
if (vm.imgSize.width.indexOf('%') != -1) {
|
||||
img_width = parseInt(this.imgSize.width) / 100 * parentWidth + 'px'
|
||||
} else {
|
||||
img_width = this.imgSize.width
|
||||
}
|
||||
|
||||
if (vm.imgSize.height.indexOf('%') != -1) {
|
||||
img_height = parseInt(this.imgSize.height) / 100 * parentHeight + 'px'
|
||||
} else {
|
||||
img_height = this.imgSize.height
|
||||
}
|
||||
|
||||
if (vm.barSize.width.indexOf('%') != -1) {
|
||||
bar_width = parseInt(this.barSize.width) / 100 * parentWidth + 'px'
|
||||
} else {
|
||||
bar_width = this.barSize.width
|
||||
}
|
||||
|
||||
if (vm.barSize.height.indexOf('%') != -1) {
|
||||
bar_height = parseInt(this.barSize.height) / 100 * parentHeight + 'px'
|
||||
} else {
|
||||
bar_height = this.barSize.height
|
||||
}
|
||||
|
||||
return { imgWidth: img_width, imgHeight: img_height, barWidth: bar_width, barHeight: bar_height }
|
||||
}
|
||||
|
||||
export const _code_chars = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
|
||||
export const _code_color1 = ['#fffff0', '#f0ffff', '#f0fff0', '#fff0f0']
|
||||
export const _code_color2 = ['#FF0033', '#006699', '#993366', '#FF9900', '#66CC66', '#FF33CC']
|
||||
26
captcha/aj-front/src/main.js
Normal file
26
captcha/aj-front/src/main.js
Normal file
@ -0,0 +1,26 @@
|
||||
// The Vue build version to load with the `import` command
|
||||
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
|
||||
import Vue from 'vue'
|
||||
import App from './App'
|
||||
import router from './router'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
Vue.use(ElementUI)
|
||||
|
||||
import './assets/style/common.css'
|
||||
import './assets/style/group.css'
|
||||
|
||||
import mavonEditor from 'mavon-editor'
|
||||
import 'mavon-editor/dist/css/index.css'
|
||||
Vue.use(mavonEditor)
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
components: { App },
|
||||
template: '<App/>'
|
||||
})
|
||||
47
captcha/aj-front/src/router/index.js
Normal file
47
captcha/aj-front/src/router/index.js
Normal file
@ -0,0 +1,47 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
// import HelloWorld from '@/components/HelloWorld'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
export default new Router({
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'login-1',
|
||||
component: () => import('./../views/Login.vue')
|
||||
},
|
||||
{
|
||||
path: '/useOnline',
|
||||
name: 'useOnline',
|
||||
component: () => import('./../views/useOnline/UseOnline.vue'),
|
||||
redirect: '/useOnline/sliderFixed',
|
||||
children: [
|
||||
{ path: 'sliderPop', name: 'sliderPop', component: () => import('./../views/useOnline/SliderPop.vue') },
|
||||
{ path: 'sliderFixed', name: 'sliderFixed', component: () => import('./../views/useOnline/SliderFixed.vue') },
|
||||
{ path: 'pointPop', name: 'pointPop', component: () => import('./../views/useOnline/PointPop.vue') },
|
||||
{ path: 'pointFixed', name: 'pointFixed', component: () => import('./../views/useOnline/PointFixed.vue') },
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/doc',
|
||||
name: 'doc',
|
||||
component: () => import('./../views/doc/doc.vue')
|
||||
},
|
||||
{
|
||||
path: '/apply',
|
||||
name: 'apply',
|
||||
component: () => import('./../views/apply/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login-2',
|
||||
component: () => import('./../views/Login.vue')
|
||||
},
|
||||
{
|
||||
path: '*',
|
||||
name: 'login-3',
|
||||
component: () => import('./../views/Login.vue')
|
||||
}
|
||||
]
|
||||
})
|
||||
12
captcha/aj-front/src/utils/aes.js
Normal file
12
captcha/aj-front/src/utils/aes.js
Normal file
@ -0,0 +1,12 @@
|
||||
import CryptoJS from 'crypto-js'
|
||||
export function aesEncrypt(word) {
|
||||
var key = CryptoJS.enc.Utf8.parse('XwKsGlMcdPMEhR1B')
|
||||
var srcs = CryptoJS.enc.Utf8.parse(word)
|
||||
var encrypted = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })
|
||||
return encrypted.toString()
|
||||
}
|
||||
export function aesDecrypt(word) {
|
||||
var key = CryptoJS.enc.Utf8.parse('XwKsGlMcdPMEhR1B')
|
||||
var decrypt = CryptoJS.AES.decrypt(word, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })
|
||||
return CryptoJS.enc.Utf8.stringify(decrypt).toString()
|
||||
}
|
||||
11
captcha/aj-front/src/utils/readFile.js
Normal file
11
captcha/aj-front/src/utils/readFile.js
Normal file
@ -0,0 +1,11 @@
|
||||
import axios from '@/api/axios'
|
||||
|
||||
export const readFile = (filePath) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
axios.get(filePath).then(res => {
|
||||
resolve(res)
|
||||
}).catch((err) => {
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
}
|
||||
21
captcha/aj-front/src/utils/storage.js
Normal file
21
captcha/aj-front/src/utils/storage.js
Normal file
@ -0,0 +1,21 @@
|
||||
export function setItem(k, v) {
|
||||
if (typeof (v) == 'undefined' || v == null) {
|
||||
return
|
||||
}
|
||||
|
||||
var val = v
|
||||
if (typeof (v) == 'object') {
|
||||
val = JSON.stringify(v)
|
||||
}
|
||||
sessionStorage.setItem(k, val)
|
||||
}
|
||||
|
||||
export function getItem(k) {
|
||||
var val = sessionStorage.getItem(k)
|
||||
try {
|
||||
// 如果是number boolean jsonstring是不会报错的
|
||||
return JSON.parse(val)
|
||||
} catch (e) {
|
||||
return val
|
||||
}
|
||||
}
|
||||
407
captcha/aj-front/src/views/Login.vue
Normal file
407
captcha/aj-front/src/views/Login.vue
Normal file
@ -0,0 +1,407 @@
|
||||
<template>
|
||||
<div class="login-bg">
|
||||
<div class="login-bg_pattern">
|
||||
<div class="login-bg_left-top-circle" />
|
||||
<div class="login-bg_left100-top-circle" />
|
||||
<div class="login-bg_right-top-circle" />
|
||||
<div class="login-bg_right-bottom-circle" />
|
||||
<div class="login-bg_left-bottom-circle" />
|
||||
</div>
|
||||
|
||||
<Verify
|
||||
ref="verify"
|
||||
:captcha-type="'blockPuzzle'"
|
||||
:img-size="{width:'400px',height:'200px'}"
|
||||
@success="login"
|
||||
/>
|
||||
|
||||
<div class="login-login_wrap">
|
||||
<div class="login-login_box">
|
||||
<el-row type="flex" justify="center">
|
||||
<el-col :xs="22" :sm="20" :md="20" :lg="20" :xl="14">
|
||||
<div class="grid-content">
|
||||
<!--登录-->
|
||||
<div class="key">
|
||||
<div class="bottom-img" />
|
||||
<div class="form-info mt14vh pb50" style="margin-left:5vw">
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="22" :sm="14" :md="10" :lg="8" :xl="7">
|
||||
<div class="logo"><img src="./../../static/logo.png" alt=""></div>
|
||||
<form onsubmit="return false">
|
||||
<ul class="user-info mt60">
|
||||
<li class="user-input">
|
||||
<input id="usernameIput" v-model.trim="loginName" class="effect" placeholder="请输入用户名" type="text" required autocomplete="username">
|
||||
<label>用户名</label>
|
||||
</li>
|
||||
<li class="user-input">
|
||||
<input id="passwordIput" v-model.trim="loginPassword" class="effect" placeholder="请输入密码" type="password" required autocomplete="current-password">
|
||||
<label>密码</label>
|
||||
</li>
|
||||
<li class="keep-password">
|
||||
<label>
|
||||
测试账号: admin 密码: 123456
|
||||
</label>
|
||||
|
||||
</li>
|
||||
<li class="keep-password">
|
||||
<label>
|
||||
<a href="https://gitee.com/anji-plus/captcha/" target="_blank" style="color:#222"><img src="https://gitee.com/static/images/logo-en.svg" style="vertical-align:middle;margin-right:5px" width="24px"> gitee</a>
|
||||
</label>
|
||||
|
||||
<label class="ml20">
|
||||
<a href="https://gitee.com/anji-plus/captcha/stargazers" target="_blank"><img src="https://gitee.com/anji-plus/captcha/badge/star.svg?theme=gvp" style="vertical-align:middle;" alt="star"></a>
|
||||
</label>
|
||||
|
||||
</li>
|
||||
<li class="keep-password">
|
||||
<label>
|
||||
<a href="https://github.com/anji-plus/captcha" target="_blank" style="color:#222">
|
||||
<img
|
||||
src="https://github.githubassets.com/favicons/favicon.png"
|
||||
style="vertical-align:middle;margin-right:5px"
|
||||
width="24px"
|
||||
> github</a>
|
||||
</label>
|
||||
<label class="ml20">
|
||||
<a href="https://github.com/anji-plus/captcha/stargazers" target="_blank">
|
||||
<img
|
||||
src="https://img.shields.io/github/stars/anji-plus/captcha?style=social"
|
||||
style="vertical-align:middle;"
|
||||
alt="star"
|
||||
></a>
|
||||
</label>
|
||||
</li>
|
||||
<li class="mt50">
|
||||
|
||||
<el-button class="buttonSize button-solid goHome" type="primary" @click="checkPrama">
|
||||
登 录</el-button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reqLogin, getMenu, queryForCodeSelect } from '@/api/basic'
|
||||
import { aesEncrypt, aesDecrypt } from '@/utils/aes'
|
||||
import { setItem, getItem } from '@/utils/storage'
|
||||
|
||||
import Verify from './../components/verifition/Verify'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Verify
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loginName: 'admin',
|
||||
loginPassword: '123456',
|
||||
menu: [],
|
||||
checked: true,
|
||||
dialogFormVisible: false
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
document.removeEventListener('keyup', this.handerKeyup)
|
||||
},
|
||||
created() {
|
||||
document.addEventListener('keyup', this.handerKeyup)
|
||||
},
|
||||
methods: {
|
||||
handerKeyup(e) {
|
||||
var keycode = document.all ? event.keyCode : e.which
|
||||
if (keycode == 13) {
|
||||
this.checkPrama()
|
||||
}
|
||||
},
|
||||
goRegister() {
|
||||
this.$router.push('/register')
|
||||
},
|
||||
|
||||
checkPrama() {
|
||||
if (!this.loginName || !this.loginPassword) {
|
||||
this.$message({
|
||||
message: '请输入完整的用户名密码',
|
||||
type: 'error'
|
||||
})
|
||||
return false
|
||||
}
|
||||
this.$refs.verify.show()
|
||||
},
|
||||
login(params) {
|
||||
if (this.loginName == 'admin' && this.loginPassword == '123456') {
|
||||
this.$router.push('/useOnline/sliderFixed')
|
||||
} else {
|
||||
this.$message({
|
||||
message: '输入测试账号密码',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
@import "./../assets/style/theme";
|
||||
@wathet-blue: #f0f7ff;
|
||||
@wathet-blue: #f0f7ff;
|
||||
@color91: #919191;
|
||||
@coloreE0: #e0e0e0;
|
||||
@colore666: #666;
|
||||
:focus {
|
||||
outline: none;
|
||||
}
|
||||
.login-bg {
|
||||
background: @wathet-blue;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.login-bg_pattern {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
.login-bg_left-top-circle,
|
||||
.login-bg_left100-top-circle,
|
||||
.login-bg_right-top-circle,
|
||||
.login-bg_right-bottom-circle,
|
||||
.login-bg_left-bottom-circle {
|
||||
opacity: 0.45;
|
||||
background: #e1eeff;
|
||||
border-radius: 74px;
|
||||
display: block;
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
.login-bg_left-top-circle {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
transform: rotate(30deg);
|
||||
margin-top: -150px;
|
||||
margin-left: 70px;
|
||||
}
|
||||
.login-bg_left100-top-circle {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
transform: rotate(30deg);
|
||||
margin-top: -150px;
|
||||
margin-left: 200px;
|
||||
}
|
||||
.login-bg_right-top-circle {
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
margin-right: -100px;
|
||||
transform: rotate(42deg);
|
||||
float: right;
|
||||
}
|
||||
.login-bg_right-bottom-circle {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
transform: rotate(30deg);
|
||||
bottom: -200px;
|
||||
right: 350px;
|
||||
position: absolute;
|
||||
}
|
||||
.login-bg_left-bottom-circle {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
transform: rotate(-11deg);
|
||||
bottom: -50px;
|
||||
left: -100px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.login-login_box {
|
||||
position: absolute;
|
||||
left:50%;
|
||||
top:50%;
|
||||
transform:translate(-50%,-50%);
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
/*overflow: auto;*/
|
||||
.key {
|
||||
box-sizing: border-box;
|
||||
background: @white url("/static/login/bg-1.png") right top no-repeat;
|
||||
box-shadow: 0 0 60px 5px rgba(36, 132, 255, 0.41);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
-webkit-animation: fromBack 0.3s linear 0.1s forwards;
|
||||
-moz-animation: fromBack 0.3s linear 0.1s forwards;
|
||||
-ms-animation: fromBack 0.3s linear 0.1s forwards;
|
||||
animation: fromBack 0.3s linear 0.1s forwards;
|
||||
/* -webkit- */
|
||||
@-webkit-keyframes fromBack {
|
||||
0% {
|
||||
-webkit-transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
opacity: 1;
|
||||
min-height: 69vh;
|
||||
max-height: 90vh;
|
||||
}
|
||||
}
|
||||
/* -moz- */
|
||||
@-moz-keyframes fromBack {
|
||||
0% {
|
||||
-moz-transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-moz-transform: scale(1);
|
||||
opacity: 1;
|
||||
height: 69vh;
|
||||
min-height: 69vh;
|
||||
max-height: 90vh;
|
||||
}
|
||||
}
|
||||
/**/
|
||||
@keyframes fromBack {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
min-height: 69vh;
|
||||
max-height: 90vh;
|
||||
}
|
||||
}
|
||||
.bottom-img {
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
bottom: 0;
|
||||
background: url("/static/login/bg-2.png") left bottom no-repeat;
|
||||
}
|
||||
.form-info {
|
||||
.logo img{
|
||||
width: 200px;
|
||||
height: 89px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.user-info {
|
||||
padding-left: @px30;
|
||||
.user-input {
|
||||
position: relative;
|
||||
border-bottom: 1px solid @coloreE0;
|
||||
padding: 0 20px 0 30px;
|
||||
margin-top: 37px;
|
||||
height: 30px;
|
||||
background: #fff;
|
||||
.effect ~ label {
|
||||
position: relative;
|
||||
top: -45px;
|
||||
width: 100%;
|
||||
color: @color91;
|
||||
transition: 0.3s;
|
||||
-webkit-transition: 0.1s;
|
||||
font-size: @f12;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.effect:focus ~ label {
|
||||
position: relative;
|
||||
top: -45px;
|
||||
color: @lightblue;
|
||||
transition: 0.3s;
|
||||
border-left: 3px solid @lightblue;
|
||||
margin-left: -30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
input {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.keep-password {
|
||||
font-size: @f13;
|
||||
letter-spacing: 0;
|
||||
margin-top: @px24;
|
||||
label {
|
||||
.el-checkbox__input.is-checked + .el-checkbox__label {
|
||||
color: @color91;
|
||||
}
|
||||
}
|
||||
}
|
||||
.goHome {
|
||||
background: @lightblue;
|
||||
box-shadow: 0 12px 51px -12px @azure;
|
||||
border-radius: 100px;
|
||||
width: 140px;
|
||||
height: 40px;
|
||||
display: block;
|
||||
margin: @px24 auto;
|
||||
font-size: @f18;
|
||||
text-align: center;
|
||||
line-height: 17px;
|
||||
}
|
||||
.register {
|
||||
font-size: 13px;
|
||||
color: #919191;
|
||||
text-align: center;
|
||||
.a {
|
||||
color: @lightblue;
|
||||
cursor: pointer;
|
||||
}
|
||||
.a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.forget {
|
||||
font-size: @f13;
|
||||
color: @lightblue;
|
||||
letter-spacing: 0;
|
||||
text-align: right;
|
||||
border: none;
|
||||
padding: 0;
|
||||
text-decoration: underline;
|
||||
background: none;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/*注册*/
|
||||
.transition-box {
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
z-index: 1000;
|
||||
background-color: @white;
|
||||
}
|
||||
.qrcode {
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
#qrcode {
|
||||
width: 120px;
|
||||
padding: 20px;
|
||||
margin: 40px auto;
|
||||
display: block;
|
||||
}
|
||||
input:-webkit-autofill,
|
||||
textarea:-webkit-autofill,
|
||||
select:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0 1000px white inset;
|
||||
}
|
||||
</style>
|
||||
280
captcha/aj-front/src/views/apply/index.vue
Normal file
280
captcha/aj-front/src/views/apply/index.vue
Normal file
@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-container style="width: 100%;height: 100%;">
|
||||
<el-header style="height: auto; padding: 0;">
|
||||
<myHeader />
|
||||
</el-header>
|
||||
</el-container>
|
||||
<el-main>
|
||||
<div class="search-pop clearfix">
|
||||
<el-row>
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="24"
|
||||
:md="24"
|
||||
:lg="24"
|
||||
:xl="24"
|
||||
>
|
||||
<div class="grid-content">
|
||||
<el-row
|
||||
type="flex"
|
||||
justify="center"
|
||||
>
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="24"
|
||||
:md="24"
|
||||
:lg="24"
|
||||
:xl="24"
|
||||
>
|
||||
<div class="grid-content pd-main pt20 pb20">
|
||||
<el-row class="row-bg">
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="24"
|
||||
:md="24"
|
||||
:lg="24"
|
||||
:xl="24"
|
||||
>
|
||||
<div class="grid-content">
|
||||
<div class="right-box">
|
||||
<div class="log-list">
|
||||
<div class="title">
|
||||
<h2>WHO IS<span> USING </span> US</h2>
|
||||
<h4>谁在使用</h4>
|
||||
</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
round
|
||||
class="push-logo"
|
||||
@click="addLogo"
|
||||
>我要提交</el-button>
|
||||
<div class="apply-logo">
|
||||
<el-row>
|
||||
<el-col
|
||||
:span="22"
|
||||
:offset="1"
|
||||
>
|
||||
<li><img
|
||||
src="../../../static/9.png"
|
||||
width="100%"
|
||||
></li>
|
||||
<li><img
|
||||
src="../../../static/7.png"
|
||||
width="100%"
|
||||
></li>
|
||||
<li><img
|
||||
src="../../../static/3.png"
|
||||
width="100%"
|
||||
></li>
|
||||
<li><img
|
||||
src="../../../static/11.png"
|
||||
width="100%"
|
||||
></li>
|
||||
<li><img
|
||||
src="../../../static/12.png"
|
||||
width="100%"
|
||||
></li>
|
||||
|
||||
<li><img
|
||||
src="../../../static/5.png"
|
||||
width="100%"
|
||||
></li>
|
||||
<li><img
|
||||
src="../../../static/1.png"
|
||||
width="100%"
|
||||
></li>
|
||||
<li><img
|
||||
src="../../../static/2.png"
|
||||
width="100%"
|
||||
></li>
|
||||
<li><img
|
||||
src="../../../static/4.png"
|
||||
width="100%"
|
||||
></li>
|
||||
<li>安吉智行TMS</li>
|
||||
|
||||
<li><img
|
||||
src="../../../static/10.png"
|
||||
width="100%"
|
||||
></li>
|
||||
<li>上汽红岩VLS</li>
|
||||
<li><img
|
||||
src="../../../static/8.png"
|
||||
width="100%"
|
||||
></li>
|
||||
<li><img
|
||||
src="../../../static/6.png"
|
||||
width="100%"
|
||||
></li>
|
||||
<li style="background:rgb(121 143 222)">智行库位专家</li>
|
||||
|
||||
<li><img
|
||||
src="../../../static/13.png"
|
||||
width="100%"
|
||||
></li>
|
||||
<li><img
|
||||
src="../../../static/15.png"
|
||||
width="100%"
|
||||
></li>
|
||||
<li><img
|
||||
src="../../../static/14.png"
|
||||
width="100%"
|
||||
></li>
|
||||
<li><img
|
||||
src="../../../static/16.png"
|
||||
width="100%"
|
||||
></li>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import myHeader from './../layout/Header'
|
||||
import MenuItem from './../layout/UseMenuItem'
|
||||
|
||||
export default {
|
||||
name: 'UserOnline',
|
||||
components: {
|
||||
myHeader,
|
||||
MenuItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addLogo() {
|
||||
const html = '<div>我们希望您能提供的信息</div>' +
|
||||
'<div>您所在公司、学校或组织和首页，公司logo</div>' +
|
||||
'<div>您的联系方式: 微博、邮箱、微信 (至少一个)</div>' +
|
||||
'<div>您将AJ-Captcha用于哪些业务场景</div>' +
|
||||
'<div>有何改进优化建议</div>' +
|
||||
'<div>将以上信息发送到：MS@anji-plus.com</div>' +
|
||||
'<a href="https://gitee.com/anji-plus/captcha/issues/I2ACRL" style="color:#03afff" target="_blank">了解更多</a>'
|
||||
this.$alert(html, '我要提交', {
|
||||
dangerouslyUseHTMLString: true,
|
||||
confirmButtonText: '确定',
|
||||
callback: action => {
|
||||
window.open('mailto:MS@anji-plus.com&Subject=我要提交宣传栏&Body=' + html)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "./../../assets/style/theme";
|
||||
.nav-menu {
|
||||
width: 100%;
|
||||
background: #203160;
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
top: 0;
|
||||
.logo {
|
||||
margin-top: 14px;
|
||||
width: 85px;
|
||||
}
|
||||
}
|
||||
.userBox {
|
||||
line-height: 64px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
.goOut {
|
||||
padding: 10px 18px;
|
||||
|
||||
&:hover {
|
||||
color: #03afff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-button {
|
||||
font-size: 12px;
|
||||
}
|
||||
.right-box {
|
||||
padding: 20px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.right-box {
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(151, 151, 151, 0.07);
|
||||
box-shadow: 0 0 10px 0 rgba(122, 177, 249, 0.4);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.log-list {
|
||||
min-height: calc(100vh - 225px);
|
||||
min-height: -moz-calc(100vh - 225px);
|
||||
min-height: -webkit-calc(100vh - 225px);
|
||||
min-height: calc(100vh - 225px);
|
||||
max-height: calc(100vh - 225px);
|
||||
max-height: -moz-calc(100vh - 225px);
|
||||
max-height: -webkit-calc(100vh - 225px);
|
||||
max-height: calc(100vh - 225px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.title {
|
||||
text-align: center;
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
line-height: 50px;
|
||||
font-weight: bold;
|
||||
span {
|
||||
color: #03afff;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
font-size: 24px;
|
||||
line-height: 52px;
|
||||
}
|
||||
border-bottom: 60px solid #edf4f7;
|
||||
}
|
||||
.apply-logo {
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin-top: 20px;
|
||||
li {
|
||||
width: 15.4vw;
|
||||
height: 100px;
|
||||
float: left;
|
||||
display: block;
|
||||
border: 1px solid #efefef;
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
font-size: 28px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
margin-right: 10px;
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.push-logo {
|
||||
float: right;
|
||||
margin-top: -1px;
|
||||
display: block;
|
||||
margin-top: -45px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
45
captcha/aj-front/src/views/doc/doc.vue
Normal file
45
captcha/aj-front/src/views/doc/doc.vue
Normal file
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-container style="width: 100%;height: 100%;">
|
||||
<el-header style="height: auto; padding: 0;">
|
||||
<myHeader />
|
||||
</el-header>
|
||||
</el-container>
|
||||
<el-main>
|
||||
<iframe
|
||||
id="mainContent"
|
||||
style="position:absolute;width:99%;height:80vh;top:64px"
|
||||
src="https://captcha.anji-plus.com/captcha-doc/"
|
||||
/>
|
||||
</el-main>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import myHeader from './../layout/Header'
|
||||
import MenuItem from './../layout/UseMenuItem'
|
||||
|
||||
export default {
|
||||
name: 'Doc',
|
||||
components: {
|
||||
myHeader
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
|
||||
204
captcha/aj-front/src/views/layout/Header.vue
Normal file
204
captcha/aj-front/src/views/layout/Header.vue
Normal file
@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<div class="nav-menu">
|
||||
<el-menu :default-active="onRoutes" :default-openeds="[$route.path]" class="el-menu-demo" mode="horizontal" background-color="#203160" text-color="rgba(255,255,255,0.4)" active-text-color="#7AB1F9" router @select="handleSelect">
|
||||
<el-row type="flex" justify="center">
|
||||
<el-col :xs="22" :sm="22" :md="22" :lg="22" :xl="23">
|
||||
<div class="grid-content pd-main">
|
||||
<div class="userBox fr" @click="dropOut">
|
||||
<!-- {{getAccessUser.userName}} -->
|
||||
<el-button class="goOut"><i class="icon iconfont icon-zhuxiao" />退出</el-button>
|
||||
</div>
|
||||
<a @click="goHome"><img class="logo" src="./../../assets/image/logo2.png" alt=""></a>
|
||||
<div class="nav-md fr">
|
||||
<el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name" class="fr">{{ item.navItem }}</el-menu-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!--
|
||||
-->
|
||||
<script>
|
||||
import { setItem, getItem } from '@/utils/storage'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeIndex: '1',
|
||||
userManageCode: [],
|
||||
navList: [
|
||||
{ name: '/apply', navItem: '谁在使用', manage: 'applyManage' },
|
||||
{ name: '/doc', navItem: '在线文档', manage: 'docManage' },
|
||||
{ name: '/useOnline', navItem: '在线体验', manage: 'chartManage' },
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getAccessUser() {
|
||||
return getItem('accessUser')
|
||||
},
|
||||
onRoutes() {
|
||||
if (this.$route.path.includes('/helpCenter')) {
|
||||
return '/helpCenter'
|
||||
} else if (this.$route.path.includes('/useOnline')) {
|
||||
return '/useOnline'
|
||||
} else {
|
||||
return this.$route.path
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
dropOut() {
|
||||
var self = this
|
||||
this.$confirm('您确定要退出吗?', '退出平台', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消'
|
||||
}).then(() => {
|
||||
this.$router.push('/login')
|
||||
// const info = {
|
||||
// userName: this.getAccessUser.userName
|
||||
// }
|
||||
// LogOut(info).then(res => {
|
||||
// if (res.repCode == "0000") {
|
||||
// sessionStorage.clear()
|
||||
// localStorage.clear();
|
||||
// this.$router.push("/login");
|
||||
// }
|
||||
// }).catch(error => {
|
||||
// })
|
||||
}).catch(() => {
|
||||
|
||||
})
|
||||
},
|
||||
handleSelect(key, keyPath) {
|
||||
},
|
||||
// go home
|
||||
goHome() {
|
||||
this.$router.push('/index')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.el-dropdown-link{
|
||||
color:rgba(255, 255, 255, 0.4);
|
||||
font-size: 12px;
|
||||
}
|
||||
.nav-menu {
|
||||
width: 100%;
|
||||
background: #203160;
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
.logo {
|
||||
margin-top: 14px;
|
||||
width: 85px;
|
||||
}
|
||||
.nav-md {
|
||||
display: block;
|
||||
margin-right: 80px;
|
||||
}
|
||||
.nav-mini {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.el-menu-item {
|
||||
padding: 0;
|
||||
margin: 0 15px;
|
||||
font-size: 15px;
|
||||
line-height: 70px;
|
||||
}
|
||||
|
||||
.el-menu-item.is-active {
|
||||
animation: 2s infinite;
|
||||
border-top: 6px solid #7ab1f9;
|
||||
font-size: 15px;
|
||||
color: #7ab1f9;
|
||||
font-weight: bold;
|
||||
line-height: 59px;
|
||||
}
|
||||
|
||||
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
|
||||
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
|
||||
border-top: 6px solid #7ab1f9;
|
||||
color: #7ab1f9;
|
||||
background: none !important;
|
||||
line-height: 59px;
|
||||
}
|
||||
.el-menu-item:last-child {
|
||||
margin-right: 15px !important;
|
||||
}
|
||||
.el-menu-item:first-child {
|
||||
margin-left: 15px !important;
|
||||
}
|
||||
.userBox {
|
||||
line-height: 64px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
.headerP {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
border-radius: 100%;
|
||||
border: 1px solid #03afff;
|
||||
margin-top: 20px;
|
||||
margin-right: 10px;
|
||||
float: left;
|
||||
}
|
||||
.goOut {
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: 0;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
margin-left: 5px;
|
||||
.iconfont {
|
||||
font-size: 14px;
|
||||
}
|
||||
&:hover {
|
||||
color: #03afff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and(max-width: 900px) {
|
||||
.nav-menu {
|
||||
.nav-md {
|
||||
display: none;
|
||||
}
|
||||
.nav-mini {
|
||||
display: block;
|
||||
span {
|
||||
margin-right: -30px;
|
||||
color: #fff;
|
||||
line-height: 62px;
|
||||
float: right;
|
||||
position: relative;
|
||||
font-size: 36px;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
.menu {
|
||||
display: none;
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
background: #203160;
|
||||
padding: 10px;
|
||||
right: 190px;
|
||||
top: 50px;
|
||||
}
|
||||
}
|
||||
.nav-mini:hover {
|
||||
.menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
113
captcha/aj-front/src/views/layout/HelpMenuItem.vue
Normal file
113
captcha/aj-front/src/views/layout/HelpMenuItem.vue
Normal file
@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div class="left-manu">
|
||||
<el-row class="tac">
|
||||
<el-col :span="24">
|
||||
<el-menu
|
||||
:default-active="activeNav"
|
||||
class="el-menu-vertical-demo"
|
||||
router
|
||||
@select="handleSelect2"
|
||||
>
|
||||
<!-- <el-menu-item index="/helpCenter/desc">
|
||||
<span slot="title">功能概述</span>
|
||||
</el-menu-item> -->
|
||||
<el-submenu index="/helpCenter/question">
|
||||
<template slot="title">
|
||||
<span>开发文档</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<el-menu-item v-for="item in sliderArr" :key="item.id" :index="`/helpCenter/admin/${item.id}`">{{ item.title }}</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-submenu>
|
||||
<el-menu-item index="/helpCenter/question">
|
||||
<span slot="title">常见问题</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'MenuItem',
|
||||
data() {
|
||||
return {
|
||||
sliderArr: [
|
||||
{ id: 1, title: '接入流程' },
|
||||
{ id: 2, title: '后端接入' },
|
||||
{ id: 3, title: 'html接入' },
|
||||
{ id: 4, title: 'vue接入' },
|
||||
{ id: 5, title: 'flutter接入' },
|
||||
{ id: 6, title: 'uni-app接入' },
|
||||
{ id: 7, title: 'weex接入' },
|
||||
{ id: 8, title: 'ReactNative接入' },
|
||||
{ id: 9, title: 'android接入' },
|
||||
{ id: 10, title: 'ios接入' },
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
activeNav() {
|
||||
return this.$route.path
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.activeNav=window.location.href.lastIndexOf("\\");
|
||||
// console.log(this.activeNav)
|
||||
},
|
||||
methods: {
|
||||
handleSelect2(key, keyPath) {
|
||||
// this.activeNav=key
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.sidebar-container {
|
||||
transition: width 0.28s;
|
||||
.horizontal-collapse-transition {
|
||||
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
|
||||
}
|
||||
.el-scrollbar {
|
||||
height: 100%;
|
||||
}
|
||||
.scrollbar-wrapper {
|
||||
overflow-x: hidden!important;
|
||||
.el-scrollbar__view {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.el-scrollbar__bar.is-vertical{
|
||||
right: 0px;
|
||||
}
|
||||
.is-horizontal {
|
||||
display: none;
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-menu {
|
||||
border: none;
|
||||
height: 100%;
|
||||
width: 100% !important;
|
||||
}
|
||||
.is-active > .el-submenu__title{
|
||||
color: #f4f4f5!important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border-right: none;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
// div:hover,ul:hover,li:hover,span:hover,ul li:hover,ul li ul:hover{
|
||||
// background: none!important;
|
||||
// color: #333!important;
|
||||
// }
|
||||
|
||||
</style>
|
||||
111
captcha/aj-front/src/views/layout/UseMenuItem.vue
Normal file
111
captcha/aj-front/src/views/layout/UseMenuItem.vue
Normal file
@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div class="left-manu">
|
||||
<el-row class="tac">
|
||||
<el-col :span="24">
|
||||
<el-menu
|
||||
:default-active="activeNav"
|
||||
class="el-menu-vertical-demo"
|
||||
router
|
||||
@select="handleSelect2"
|
||||
>
|
||||
<el-submenu index="/useOnline">
|
||||
<template slot="title">
|
||||
<span>滑动验证</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<el-menu-item index="/useOnline/sliderFixed">嵌入式</el-menu-item>
|
||||
<el-menu-item index="/useOnline/sliderPop">弹出式</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-submenu>
|
||||
<el-submenu index="/useOnline">
|
||||
<template slot="title">
|
||||
<span>点选验证</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<el-menu-item index="/useOnline/pointFixed">嵌入式</el-menu-item>
|
||||
<el-menu-item index="/useOnline/pointPop">弹出式</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'MenuItem',
|
||||
data() {
|
||||
return {
|
||||
// activeNav:'/projectDetails'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
activeNav() {
|
||||
return this.$route.path
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.activeNav=window.location.href.lastIndexOf("\\");
|
||||
// console.log(this.activeNav)
|
||||
},
|
||||
methods: {
|
||||
handleSelect2(key, keyPath) {
|
||||
// this.activeNav=key
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.sidebar-container {
|
||||
transition: width 0.28s;
|
||||
.horizontal-collapse-transition {
|
||||
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
|
||||
}
|
||||
.el-scrollbar {
|
||||
height: 100%;
|
||||
}
|
||||
.scrollbar-wrapper {
|
||||
overflow-x: hidden!important;
|
||||
.el-scrollbar__view {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.el-scrollbar__bar.is-vertical{
|
||||
right: 0px;
|
||||
}
|
||||
.is-horizontal {
|
||||
display: none;
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-menu {
|
||||
border: none;
|
||||
height: 100%;
|
||||
width: 100% !important;
|
||||
}
|
||||
.is-active > .el-submenu__title{
|
||||
color: #f4f4f5!important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.el-submenu__title .el-icon-arrow-down{
|
||||
line-height: 13px!important;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border-right: none;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
// div:hover,ul:hover,li:hover,span:hover,ul li:hover,ul li ul:hover{
|
||||
// background: none!important;
|
||||
// color: #333!important;
|
||||
// }
|
||||
|
||||
</style>
|
||||
181
captcha/aj-front/src/views/useOnline/PointFixed.vue
Normal file
181
captcha/aj-front/src/views/useOnline/PointFixed.vue
Normal file
@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<div class="pointFixed">
|
||||
<h1 class="title">点选嵌入式（point-embed）</h1>
|
||||
<p class="desc">
|
||||
验证区域直接完整嵌入网页，清晰直观，便于用户使用和广告宣传
|
||||
</p>
|
||||
<el-row class="demo">
|
||||
<el-col :xs="24" :sm="24" :md="13" :lg="13" :xl="13" class="demo-result">
|
||||
<h2 class="result-title">示例</h2>
|
||||
<form class="result_form">
|
||||
<input
|
||||
class="result_input"
|
||||
type="text"
|
||||
value="用户名"
|
||||
disabled="disabled"
|
||||
>
|
||||
<input
|
||||
class="result_input"
|
||||
type="password"
|
||||
value="123456"
|
||||
disabled="disabled"
|
||||
>
|
||||
<!-- @success="login" -->
|
||||
<Verify
|
||||
:mode="'fixed'"
|
||||
:captcha-type="'clickWord'"
|
||||
:captcha-id="'936c8254-abf6-446e-ba34-0b02ed15f6e2'"
|
||||
:container-id="'#pointFixed_btn'"
|
||||
:img-size="{ width: '330px', height: '155px' }"
|
||||
/>
|
||||
<!-- 组件 -->
|
||||
<button id="pointFixed_btn" class="result_btn">登录</button>
|
||||
</form>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="11" :lg="11" :xl="11" class="demo-code">
|
||||
<div class="code-header clearfix">
|
||||
<h2 class="code-title">代码 :</h2>
|
||||
<!-- <button class="code_copy">复制</button> -->
|
||||
</div>
|
||||
<div class="code-container">
|
||||
<pre>
|
||||
<i><</i>template<i>></i>
|
||||
<i><</i>Verify
|
||||
@success<i>=</i>"'success'" //验证成功的回调函数
|
||||
:mode<i>=</i>"'fixed'" //调用的模式
|
||||
:captchaType="'clickWord'" //调用的类型 点选或者滑动
|
||||
:imgSize<i>=</i>"{ width: '330px', height: '155px' }" //图片的大小对象
|
||||
<i>></i><i><</i>/Verify
|
||||
<i><</i>/template<i>></i>
|
||||
|
||||
<i><</i>script<i>></i>
|
||||
//引入组件
|
||||
import Verify from "./../../components/verifition/Verify";
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
components<i>:</i> {
|
||||
Verify
|
||||
}
|
||||
methods:{
|
||||
success(params){
|
||||
// params 返回的二次验证参数
|
||||
}
|
||||
}
|
||||
}
|
||||
<i><</i>/script<i>></i>
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Verify from './../../components/verifition/Verify'
|
||||
export default {
|
||||
name: 'SliderFixed',
|
||||
components: {
|
||||
Verify
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.pointFixed {
|
||||
.title {
|
||||
font-size: 28px;
|
||||
color: #222;
|
||||
line-height: 40px;
|
||||
}
|
||||
.desc {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
color: #777;
|
||||
padding-top: 8px;
|
||||
}
|
||||
.demo {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #e4e7ef;
|
||||
width: 99%;
|
||||
// height: 530px;
|
||||
margin-top: 24px;
|
||||
padding-bottom: 20px;
|
||||
.demo-result,
|
||||
.demo-code {
|
||||
box-sizing: border-box;
|
||||
padding: 24px;
|
||||
float: left;
|
||||
height: 100%;
|
||||
}
|
||||
.demo-result {
|
||||
.result-title {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
color: #222;
|
||||
}
|
||||
.result_form {
|
||||
width: 60%;
|
||||
margin: 72px auto 0;
|
||||
}
|
||||
.result_input {
|
||||
width: 100%;
|
||||
border: 1px solid #e4e7ef;
|
||||
height: 40px;
|
||||
line-height: 38px;
|
||||
padding-left: 16px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 16px;
|
||||
font-size: 18px;
|
||||
color: #abaeb2;
|
||||
background-color: transparent;
|
||||
}
|
||||
.result_btn {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
background: #cdd2df;
|
||||
cursor: not-allowed;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
.demo-code {
|
||||
background: #f7f9fa;
|
||||
position: relative;
|
||||
.code-title {
|
||||
float: left;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
color: #222;
|
||||
}
|
||||
.code_copy {
|
||||
float: right;
|
||||
width: 68px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
border-radius: 12px;
|
||||
background: #6f7482;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.code-container{
|
||||
padding-top: 20px;
|
||||
display: block;
|
||||
overflow: auto;
|
||||
color: #4d4d4c;
|
||||
padding: 0.5em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
184
captcha/aj-front/src/views/useOnline/PointPop.vue
Normal file
184
captcha/aj-front/src/views/useOnline/PointPop.vue
Normal file
@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div class="sliderFixed">
|
||||
<h1 class="title">点选弹出式（point-popup）</h1>
|
||||
<p class="desc">
|
||||
点击自有验证按钮，弹出验证码，与自有业务样式完美融合
|
||||
</p>
|
||||
<el-row class="demo">
|
||||
<el-col :xs="24" :sm="24" :md="13" :lg="13" :xl="13" class="demo-result">
|
||||
<h2 class="result-title">示例</h2>
|
||||
<form class="result_form">
|
||||
<input
|
||||
class="result_input"
|
||||
type="text"
|
||||
value="用户名"
|
||||
disabled="disabled"
|
||||
>
|
||||
<input
|
||||
class="result_input"
|
||||
type="password"
|
||||
value="123456"
|
||||
disabled="disabled"
|
||||
>
|
||||
<!-- @success="login" -->
|
||||
<Verify
|
||||
ref="verify"
|
||||
:mode="'pop'"
|
||||
:captcha-type="'clickWord'"
|
||||
:img-size="{ width: '330px', height: '155px' }"
|
||||
/>
|
||||
<!-- 组件 -->
|
||||
<button class="result_btn" @click.prevent="$refs.verify.show()">登录</button>
|
||||
</form>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="11" :lg="11" :xl="11" class="demo-code">
|
||||
<div class="code-header clearfix">
|
||||
<h2 class="code-title">代码 :</h2>
|
||||
<!-- <button class="code_copy">复制</button> -->
|
||||
</div>
|
||||
<div class="code-container">
|
||||
<i><</i>template<i>></i>
|
||||
<pre> <i><</i>Verify
|
||||
@success<i>=</i>"success" //验证成功的回调函数
|
||||
:mode<i>=</i>"'pop'" //调用的模式
|
||||
:captchaType="'clickWord'" // //调用的类型 点选或者滑动
|
||||
:imgSize<i>=</i>"{ width: '330px', height: '155px' }" //图片的大小
|
||||
ref<i>=</i>"verify"
|
||||
<i>></i><i><</i>/Verify
|
||||
<i><</i>/template<i>></i>
|
||||
|
||||
<i><</i>script<i>></i>
|
||||
//引入组件
|
||||
import Verify from "./../../components/verifition/Verify";
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
methods: {
|
||||
success(params){
|
||||
// params 返回的二次验证参数
|
||||
},
|
||||
showVerify(){
|
||||
//当mode="pop"时,调用组件实例的show方法显示组件
|
||||
this.$refs.verify.show();
|
||||
}
|
||||
},
|
||||
components<i>:</i> {
|
||||
Verify
|
||||
}
|
||||
}
|
||||
<i><</i>/script<i>></i>
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Verify from './../../components/verifition/Verify'
|
||||
export default {
|
||||
name: 'SliderFixed',
|
||||
components: {
|
||||
Verify
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.sliderFixed {
|
||||
.title {
|
||||
font-size: 28px;
|
||||
color: #222;
|
||||
line-height: 40px;
|
||||
}
|
||||
.desc {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
color: #777;
|
||||
padding-top: 8px;
|
||||
}
|
||||
.demo {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #e4e7ef;
|
||||
width: 99%;
|
||||
// height: 530px;
|
||||
margin-top: 24px;
|
||||
padding-bottom: 20px;
|
||||
.demo-result,
|
||||
.demo-code {
|
||||
box-sizing: border-box;
|
||||
padding: 24px;
|
||||
float: left;
|
||||
height: 100%;
|
||||
}
|
||||
.demo-result {
|
||||
.result-title {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
color: #222;
|
||||
}
|
||||
.result_form {
|
||||
width: 60%;
|
||||
margin: 72px auto 0;
|
||||
}
|
||||
.result_input {
|
||||
width: 100%;
|
||||
border: 1px solid #e4e7ef;
|
||||
height: 40px;
|
||||
line-height: 38px;
|
||||
padding-left: 16px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 16px;
|
||||
font-size: 18px;
|
||||
color: #abaeb2;
|
||||
background-color: transparent;
|
||||
}
|
||||
.result_btn {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
background: #0a4bee;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
.demo-code {
|
||||
background: #f7f9fa;
|
||||
position: relative;
|
||||
.code-title {
|
||||
float: left;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
color: #222;
|
||||
}
|
||||
.code_copy {
|
||||
float: right;
|
||||
width: 68px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
border-radius: 12px;
|
||||
background: #6f7482;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.code-container{
|
||||
padding-top: 20px;
|
||||
display: block;
|
||||
overflow: auto;
|
||||
color: #4d4d4c;
|
||||
padding: 0.5em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
181
captcha/aj-front/src/views/useOnline/SliderFixed.vue
Normal file
181
captcha/aj-front/src/views/useOnline/SliderFixed.vue
Normal file
@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<div class="sliderFixed">
|
||||
<h1 class="title">滑动嵌入式（slider-embed）</h1>
|
||||
<p class="desc">
|
||||
验证区域直接完整嵌入网页，清晰直观，便于用户使用和广告宣传
|
||||
</p>
|
||||
<el-row class="demo">
|
||||
<el-col :xs="24" :sm="24" :md="13" :lg="13" :xl="13" class="demo-result">
|
||||
<h2 class="result-title">示例</h2>
|
||||
<form class="result_form">
|
||||
<input
|
||||
class="result_input"
|
||||
type="text"
|
||||
value="用户名"
|
||||
disabled="disabled"
|
||||
>
|
||||
<input
|
||||
class="result_input"
|
||||
type="password"
|
||||
value="123456"
|
||||
disabled="disabled"
|
||||
>
|
||||
<!-- @success="login" -->
|
||||
<Verify
|
||||
:mode="'fixed'"
|
||||
:captcha-type="'blockPuzzle'"
|
||||
:captcha-id="'9ca07a9c-c260-50ae-2c13-89cde2f34cb9'"
|
||||
:container-id="'#sliderFixed_btn'"
|
||||
:img-size="{ width: '330px', height: '155px' }"
|
||||
/>
|
||||
<!-- 组件 -->
|
||||
<button id="sliderFixed_btn" class="result_btn">登录</button>
|
||||
</form>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="11" :lg="11" :xl="11" class="demo-code">
|
||||
<div class="code-header clearfix">
|
||||
<h2 class="code-title">代码 :</h2>
|
||||
<!-- <button class="code_copy">复制</button> -->
|
||||
</div>
|
||||
<div class="code-container">
|
||||
<pre>
|
||||
<i><</i>template<i>></i>
|
||||
<i><</i>Verify
|
||||
@success<i>=</i>"'success'" //验证成功的回调函数
|
||||
:mode<i>=</i>"'fixed'" //调用的模式
|
||||
:captchaType="'blockPuzzle'" //调用的类型 点选或者滑动
|
||||
:imgSize<i>=</i>"{ width: '330px', height: '155px' }" //图片的大小对象
|
||||
<i>></i><i><</i>/Verify
|
||||
<i><</i>/template<i>></i>
|
||||
|
||||
<i><</i>script<i>></i>
|
||||
//引入组件
|
||||
import Verify from "./../../components/verifition/Verify";
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
components<i>:</i> {
|
||||
Verify
|
||||
}
|
||||
methods:{
|
||||
success(params){
|
||||
// params 返回的二次验证参数
|
||||
}
|
||||
}
|
||||
}
|
||||
<i><</i>/script<i>></i>
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Verify from './../../components/verifition/Verify'
|
||||
export default {
|
||||
name: 'SliderFixed',
|
||||
components: {
|
||||
Verify
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.sliderFixed {
|
||||
.title {
|
||||
font-size: 28px;
|
||||
color: #222;
|
||||
line-height: 40px;
|
||||
}
|
||||
.desc {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
color: #777;
|
||||
padding-top: 8px;
|
||||
}
|
||||
.demo {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #e4e7ef;
|
||||
width: 99%;
|
||||
// height: 530px;
|
||||
margin-top: 24px;
|
||||
padding-bottom: 20px;
|
||||
.demo-result,
|
||||
.demo-code {
|
||||
box-sizing: border-box;
|
||||
padding: 24px;
|
||||
float: left;
|
||||
height: 100%;
|
||||
}
|
||||
.demo-result {
|
||||
.result-title {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
color: #222;
|
||||
}
|
||||
.result_form {
|
||||
width: 60%;
|
||||
margin: 72px auto 0;
|
||||
}
|
||||
.result_input {
|
||||
width: 100%;
|
||||
border: 1px solid #e4e7ef;
|
||||
height: 40px;
|
||||
line-height: 38px;
|
||||
padding-left: 16px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 16px;
|
||||
font-size: 18px;
|
||||
color: #abaeb2;
|
||||
background-color: transparent;
|
||||
}
|
||||
.result_btn {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
background: #cdd2df;
|
||||
cursor: not-allowed;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
.demo-code {
|
||||
background: #f7f9fa;
|
||||
position: relative;
|
||||
.code-title {
|
||||
float: left;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
color: #222;
|
||||
}
|
||||
.code_copy {
|
||||
float: right;
|
||||
width: 68px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
border-radius: 12px;
|
||||
background: #6f7482;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.code-container{
|
||||
padding-top: 20px;
|
||||
display: block;
|
||||
overflow: auto;
|
||||
color: #4d4d4c;
|
||||
padding: 0.5em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
189
captcha/aj-front/src/views/useOnline/SliderPop.vue
Normal file
189
captcha/aj-front/src/views/useOnline/SliderPop.vue
Normal file
@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<div class="sliderFixed">
|
||||
<h1 class="title">滑动弹出式（slider-popup）</h1>
|
||||
<p class="desc">
|
||||
点击自有验证按钮，弹出验证码，与自有业务样式完美融合
|
||||
</p>
|
||||
<el-row class="demo">
|
||||
<el-col :xs="24" :sm="24" :md="13" :lg="13" :xl="13" class="demo-result">
|
||||
<h2 class="result-title">示例</h2>
|
||||
<form class="result_form">
|
||||
<input
|
||||
class="result_input"
|
||||
type="text"
|
||||
value="用户名"
|
||||
disabled="disabled"
|
||||
>
|
||||
<input
|
||||
class="result_input"
|
||||
type="password"
|
||||
value="123456"
|
||||
disabled="disabled"
|
||||
>
|
||||
<!-- @success="login" -->
|
||||
<Verify
|
||||
ref="verify"
|
||||
:mode="'pop'"
|
||||
:captcha-type="'blockPuzzle'"
|
||||
:img-size="{ width: '330px', height: '155px' }"
|
||||
/>
|
||||
<!-- 组件 -->
|
||||
<button class="result_btn" @click.prevent="showBox">登录</button>
|
||||
</form>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="11" :lg="11" :xl="11" class="demo-code">
|
||||
<div class="code-header clearfix">
|
||||
<h2 class="code-title">代码 :</h2>
|
||||
<!-- <button class="code_copy">复制</button> -->
|
||||
</div>
|
||||
<div class="code-container">
|
||||
<i><</i>template<i>></i>
|
||||
<pre> <i><</i>Verify
|
||||
@success<i>=</i>"success" //验证成功的回调函数
|
||||
:mode<i>=</i>"'pop'" //调用的模式
|
||||
:captchaType="'blockPuzzle'" //调用的类型 点选或者滑动
|
||||
:imgSize<i>=</i>"{ width: '330px', height: '155px' }" //图片的大小
|
||||
ref<i>=</i>"verify"
|
||||
<i>></i><i><</i>/Verify
|
||||
<i><</i>/template<i>></i>
|
||||
|
||||
<i><</i>script<i>></i>
|
||||
//引入组件
|
||||
import Verify from "./../../components/verifition/Verify";
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
methods: {
|
||||
success(params){
|
||||
// params 返回的二次验证参数
|
||||
},
|
||||
showVerify(){
|
||||
//当mode="pop"时,调用组件实例的show方法显示组件
|
||||
this.$refs.verify.show();
|
||||
}
|
||||
},
|
||||
components<i>:</i> {
|
||||
Verify
|
||||
}
|
||||
}
|
||||
<i><</i>/script<i>></i>
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Verify from './../../components/verifition/Verify'
|
||||
export default {
|
||||
name: 'SliderFixed',
|
||||
components: {
|
||||
Verify
|
||||
},
|
||||
methods: {
|
||||
showBox() {
|
||||
this.$refs.verify.show()
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.sliderFixed {
|
||||
.title {
|
||||
font-size: 28px;
|
||||
color: #222;
|
||||
line-height: 40px;
|
||||
}
|
||||
.desc {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
color: #777;
|
||||
padding-top: 8px;
|
||||
}
|
||||
.demo {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #e4e7ef;
|
||||
width: 99%;
|
||||
// height: 530px;
|
||||
margin-top: 24px;
|
||||
padding-bottom: 20px;
|
||||
.demo-result,
|
||||
.demo-code {
|
||||
box-sizing: border-box;
|
||||
padding: 24px;
|
||||
float: left;
|
||||
height: 100%;
|
||||
}
|
||||
.demo-result {
|
||||
.result-title {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
color: #222;
|
||||
}
|
||||
.result_form {
|
||||
width: 60%;
|
||||
margin: 72px auto 0;
|
||||
}
|
||||
.result_input {
|
||||
width: 100%;
|
||||
border: 1px solid #e4e7ef;
|
||||
height: 40px;
|
||||
line-height: 38px;
|
||||
padding-left: 16px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 16px;
|
||||
font-size: 18px;
|
||||
color: #abaeb2;
|
||||
background-color: transparent;
|
||||
}
|
||||
.result_btn {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
background: #0a4bee;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
.demo-code {
|
||||
background: #f7f9fa;
|
||||
position: relative;
|
||||
.code-title {
|
||||
float: left;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
color: #222;
|
||||
}
|
||||
.code_copy {
|
||||
float: right;
|
||||
width: 68px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
border-radius: 12px;
|
||||
background: #6f7482;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.code-container{
|
||||
padding-top: 20px;
|
||||
display: block;
|
||||
overflow: auto;
|
||||
color: #4d4d4c;
|
||||
padding: 0.5em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
231
captcha/aj-front/src/views/useOnline/UseOnline.vue
Normal file
231
captcha/aj-front/src/views/useOnline/UseOnline.vue
Normal file
@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-container style="width: 100%;height: 100%;">
|
||||
<el-header style="height: auto; padding: 0;">
|
||||
<myHeader />
|
||||
</el-header>
|
||||
</el-container>
|
||||
<el-main>
|
||||
<div class="search-pop clearfix">
|
||||
<el-row>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<div class="grid-content">
|
||||
<el-row type="flex" justify="center">
|
||||
<el-col :xs="22" :sm="22" :md="22" :lg="22" :xl="24">
|
||||
<div class="grid-content pd-main pt20 pb20">
|
||||
<el-row class="row-bg">
|
||||
<el-col type="flex" :xs="24" :sm="24" :md="6" :lg="4" :xl="4">
|
||||
<div class="grid-content">
|
||||
<div class="left-box">
|
||||
<div class="project-list">
|
||||
<MenuItem />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col type="flex" :xs="24" :sm="24" :md="18" :lg="20" :xl="20">
|
||||
<div class="grid-content">
|
||||
<div class="right-box">
|
||||
<div class="log-list">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import myHeader from './../layout/Header'
|
||||
import MenuItem from './../layout/UseMenuItem'
|
||||
|
||||
export default {
|
||||
name: 'UserOnline',
|
||||
components: {
|
||||
myHeader,
|
||||
MenuItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "./../../assets/style/theme";
|
||||
.nav-menu {
|
||||
width: 100%;
|
||||
background: #203160;
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
top:0;
|
||||
.logo {
|
||||
margin-top: 14px;
|
||||
width: 85px;
|
||||
}
|
||||
}
|
||||
.userBox {
|
||||
line-height: 64px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
.goOut {
|
||||
padding: 10px 18px;
|
||||
|
||||
&:hover {
|
||||
color: #03afff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-collapse{
|
||||
position: relative;
|
||||
}
|
||||
.el-button {
|
||||
font-size: 12px;
|
||||
}
|
||||
.left-box {
|
||||
margin-right: 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.right-box {
|
||||
padding: 20px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.left-box, .right-box {
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(151, 151, 151, 0.07);
|
||||
box-shadow: 0 0 10px 0 rgba(122, 177, 249, 0.4);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.project-lid {
|
||||
background: #9199b1;
|
||||
height: 60px;
|
||||
padding: 0 20px;
|
||||
color: @white;
|
||||
line-height: 60px;
|
||||
font-size: @f16;
|
||||
overflow: hidden;
|
||||
label {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
.project-list {
|
||||
line-height: 42px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
width: 100%;
|
||||
height: calc(100vh - 110px);
|
||||
height: -moz-calc(100vh - 110px);
|
||||
height: -webkit-calc(100vh - 110px);
|
||||
height: calc(100vh - 110px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.log-list {
|
||||
min-height: calc(100vh - 150px);
|
||||
min-height: -moz-calc(100vh - 150px);
|
||||
min-height: -webkit-calc(100vh - 150px);
|
||||
min-height: calc(100vh - 150px);
|
||||
max-height: calc(100vh - 150px);
|
||||
max-height: -moz-calc(100vh - 150px);
|
||||
max-height: -webkit-calc(100vh - 150px);
|
||||
max-height: calc(100vh - 150px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.log-repeat {
|
||||
.log-info {
|
||||
div {
|
||||
line-height: 20px;
|
||||
font-size: 13px;
|
||||
word-wrap:break-word;
|
||||
white-space:pre-wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-collapse {
|
||||
border-width: 0;
|
||||
}
|
||||
.advanced-search {
|
||||
background: @white;
|
||||
border-radius: 100px;
|
||||
font-size: 13px;
|
||||
color: @ft-btn-color;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.icon-zuidahua {
|
||||
color: @white;
|
||||
font-size: @f24;
|
||||
&:hover {
|
||||
font-size: 29px;
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
.zhiding {
|
||||
margin-top: 14px;
|
||||
font-size: @f14;
|
||||
color: #999;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
right: 37px;
|
||||
.icon {
|
||||
color: @ft-btn-color;
|
||||
}
|
||||
.del-log{
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
right: -25px;
|
||||
color: #d8d8d8;
|
||||
}
|
||||
.del-log:hover {
|
||||
color: @pink;
|
||||
}
|
||||
}
|
||||
.amount{
|
||||
padding: 40px;
|
||||
line-height: 40px;
|
||||
strong{
|
||||
font-size: 36px;
|
||||
line-height: 40px;
|
||||
i{
|
||||
font-size: 32px;
|
||||
}
|
||||
&.yj{
|
||||
color: #DD4A68;
|
||||
|
||||
}
|
||||
&.dx{
|
||||
color: #ea9015;
|
||||
|
||||
}
|
||||
&.jg{
|
||||
color: #4bc70b;
|
||||
|
||||
}
|
||||
&.ym{
|
||||
color: #3b89dd;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
||||
width: 200px;
|
||||
min-height: 400px;
|
||||
}
|
||||
</style>
|
||||
|
||||
0
captcha/aj-front/static/.gitkeep
Normal file
0
captcha/aj-front/static/.gitkeep
Normal file
BIN
captcha/aj-front/static/1.png
Normal file
BIN
captcha/aj-front/static/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
BIN
captcha/aj-front/static/10.png
Normal file
BIN
captcha/aj-front/static/10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
captcha/aj-front/static/11.png
Normal file
BIN
captcha/aj-front/static/11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
captcha/aj-front/static/12.png
Normal file
BIN
captcha/aj-front/static/12.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
captcha/aj-front/static/13.png
Normal file
BIN
captcha/aj-front/static/13.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
captcha/aj-front/static/14.png
Normal file
BIN
captcha/aj-front/static/14.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
captcha/aj-front/static/15.png
Normal file
BIN
captcha/aj-front/static/15.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
captcha/aj-front/static/16.png
Normal file
BIN
captcha/aj-front/static/16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
captcha/aj-front/static/2.png
Normal file
BIN
captcha/aj-front/static/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
captcha/aj-front/static/3.png
Normal file
BIN
captcha/aj-front/static/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
BIN
captcha/aj-front/static/4.png
Normal file
BIN
captcha/aj-front/static/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
BIN
captcha/aj-front/static/5.png
Normal file
BIN
captcha/aj-front/static/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
captcha/aj-front/static/6.png
Normal file
BIN
captcha/aj-front/static/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
captcha/aj-front/static/7.png
Normal file
BIN
captcha/aj-front/static/7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
captcha/aj-front/static/8.png
Normal file
BIN
captcha/aj-front/static/8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
BIN
captcha/aj-front/static/8cm.jpg
Normal file
BIN
captcha/aj-front/static/8cm.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
captcha/aj-front/static/9.png
Normal file
BIN
captcha/aj-front/static/9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
BIN
captcha/aj-front/static/QRcode.png
Normal file
BIN
captcha/aj-front/static/QRcode.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
captcha/aj-front/static/blockPuzzle.png
Normal file
BIN
captcha/aj-front/static/blockPuzzle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
BIN
captcha/aj-front/static/clickWord.png
Normal file
BIN
captcha/aj-front/static/clickWord.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
captcha/aj-front/static/font-error.png
Normal file
BIN
captcha/aj-front/static/font-error.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 246 KiB |
BIN
captcha/aj-front/static/jetbrains.png
Normal file
BIN
captcha/aj-front/static/jetbrains.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
BIN
captcha/aj-front/static/login/bg-1.png
Normal file
BIN
captcha/aj-front/static/login/bg-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 397 KiB |
BIN
captcha/aj-front/static/login/bg-2.png
Normal file
BIN
captcha/aj-front/static/login/bg-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
captcha/aj-front/static/login/login_bg2.png
Normal file
BIN
captcha/aj-front/static/login/login_bg2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
BIN
captcha/aj-front/static/logo.png
Normal file
BIN
captcha/aj-front/static/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
BIN
captcha/aj-front/static/qq.png
Normal file
BIN
captcha/aj-front/static/qq.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
BIN
captcha/aj-front/static/shixu.png
Normal file
BIN
captcha/aj-front/static/shixu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
21
captcha/aj-front/static/web-html/LICENSE
Normal file
21
captcha/aj-front/static/web-html/LICENSE
Normal file
@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2017 Hibear
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
5
captcha/aj-front/static/web-html/README.md
Normal file
5
captcha/aj-front/static/web-html/README.md
Normal file
@ -0,0 +1,5 @@
|
||||
# verify
|
||||
常规验证码、滑动验证码、拼图验证码、选字验证码，纯前端验证码。
|
||||
|
||||
<a href="http://veui.net">官网</a>
|
||||
|
||||
247
captcha/aj-front/static/web-html/css/verify.css
Normal file
247
captcha/aj-front/static/web-html/css/verify.css
Normal file
@ -0,0 +1,247 @@
|
||||
/* 需要引入的css文件 */
|
||||
.verify-code {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.cerify-code-panel {
|
||||
height:100%;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.verify-code-area {
|
||||
float:left;
|
||||
}
|
||||
|
||||
.verify-input-area {
|
||||
float: left;
|
||||
width: 60%;
|
||||
padding-right: 10px;
|
||||
|
||||
}
|
||||
|
||||
.verify-change-area {
|
||||
line-height: 30px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.varify-input-code {
|
||||
display:inline-block;
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.verify-change-code {
|
||||
color: #337AB7;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.verify-btn {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
background-color: #337AB7;
|
||||
color:#FFFFFF;
|
||||
border:none;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.verifybox{
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #e4e7eb;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,.3);
|
||||
left: 50%;
|
||||
top:50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
.verifybox-top{
|
||||
padding: 0 15px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
color: #45494c;
|
||||
border-bottom: 1px solid #e4e7eb;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.verifybox-bottom{
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.verifybox-close{
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
right: 9px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mask{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left:0;
|
||||
z-index: 1001;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: rgba(0,0,0,.3);
|
||||
/* display: none; */
|
||||
transition: all .5s;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.verify-tips{
|
||||
position: absolute;
|
||||
display: none;
|
||||
left: 0px;
|
||||
bottom:-35px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
/* transition: all .5s; */
|
||||
line-height:30px;
|
||||
color: #fff;
|
||||
/* animation:move 1.5s linear; */
|
||||
}
|
||||
|
||||
@keyframes move {
|
||||
0%{
|
||||
bottom:-35px;
|
||||
}
|
||||
50%,80%{
|
||||
bottom:0px;
|
||||
}
|
||||
100%{
|
||||
bottom:-35px;
|
||||
}
|
||||
}
|
||||
|
||||
.suc-bg{
|
||||
background-color:rgba(92, 184, 92,.5);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f5CB85C, endcolorstr=#7f5CB85C);
|
||||
}
|
||||
.err-bg{
|
||||
background-color:rgba(217, 83, 79,.5);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7fD9534F, endcolorstr=#7fD9534F);
|
||||
}
|
||||
|
||||
/*滑动验证码*/
|
||||
.verify-bar-area {
|
||||
position: relative;
|
||||
background: #FFFFFF;
|
||||
text-align: center;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
border: 1px solid #ddd;
|
||||
-webkit-border-radius: 4px;
|
||||
}
|
||||
|
||||
.verify-bar-area .verify-move-block {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
box-shadow: 0 0 2px #888888;
|
||||
-webkit-border-radius: 1px;
|
||||
}
|
||||
|
||||
.verify-bar-area .verify-move-block:hover {
|
||||
background-color: #337ab7;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.verify-bar-area .verify-left-bar {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
background: #f0fff0;
|
||||
cursor: pointer;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.verify-img-panel {
|
||||
margin:0;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.verify-img-panel .verify-refresh {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
text-align:center;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.verify-img-panel .icon-refresh {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.verify-img-panel .verify-gap {
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border:1px solid #fff;
|
||||
}
|
||||
|
||||
.verify-bar-area .verify-move-block .verify-sub-block {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
z-index: 3;
|
||||
/* border: 1px solid #fff; */
|
||||
}
|
||||
|
||||
.verify-bar-area .verify-move-block .verify-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.verify-bar-area .verify-msg {
|
||||
z-index : 3;
|
||||
}
|
||||
|
||||
/*字体图标的css*/
|
||||
@font-face {font-family: "iconfont";
|
||||
src: url('../fonts/iconfont.eot?t=1508229193188'); /* IE9*/
|
||||
src: url('../fonts/iconfont.eot?t=1508229193188#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAaAAAsAAAAACUwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kiSY21hcAAAAYAAAAB3AAABuM+qBlRnbHlmAAAB+AAAAnQAAALYnrUwT2hlYWQAAARsAAAALwAAADYPNwajaGhlYQAABJwAAAAcAAAAJAfeA4dobXR4AAAEuAAAABMAAAAYF+kAAGxvY2EAAATMAAAADgAAAA4CvAGsbWF4cAAABNwAAAAfAAAAIAEVAF1uYW1lAAAE/AAAAUUAAAJtPlT+fXBvc3QAAAZEAAAAPAAAAE3oPPXPeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sM4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDxbwtzwv4EhhrmBoQEozAiSAwAw1A0UeJzFkcENgCAMRX8RjCGO4gTe9eQcnhzAfXC2rqG/hYsT8MmD9gdS0gJIAAaykAjIBYHppCvuD8juR6zMJ67A89Zdn/f1aNPikUn8RvYo8G20CjKim6Rf6b9m34+WWd/vBr+oW8V6q3vF5qKlYrPRp4L0Ad5nGL8AeJxFUc9rE0EYnTezu8lMsrvtbrqb3TRt0rS7bdOmdI0JbWmCtiItIv5oi14qevCk9SQVLFiQgqAF8Q9QLKIHLx48FkHo3ZNnFUXwD5C2B6dO6sFhmI83w7z3fe8RnZCjb2yX5YlLhskkmScXCIFRxYBFiyjH9Rqtoqes9/g5i8WVuJyqDNTYLPwBI+cljXrkGynDhoU+nCgnjbhGY5yst+gMEq8IBIXwsjPU67CnEPm4b0su0h309Fd67da4XBhr55KSm17POk7gOE/Shq6nKdVsC7d9j+tcGPKVboc9u/0jtB/ZIA7PXTVLBef6o/paccjnwOYm3ELJetPuDrvV3gg91wlSXWY6H5qVwRzWf2TybrYYfSdqoXOwh/Qa8RWIjBTiSI3h614/vKSNRhONOrsnQi6Xf4nQFQDTmJE1NKbhI6crHEJO/+S5QPxhYJRRyvBFBP+5T9EPpEAIVzzRQIrjmJ6jY1WTo+NXTMchuBsKuS8PRZATSMl9oTA4uNLkeIA0V1UeqOoGQh7IAxGo+7T83fn3T+voqCNPPAUazUYUI7LgKSV1Jk2oUeghYGhZ+cKOe2FjVu5ZKEY2VkE13AK1+jI4r1KLbPlZfrKiPhOXKPRj7q9sj9XJ7LFHNmrKJS3VCdhXGSdKrtmoQaWeMjQVt0KD6sGPOx0oH2fgtzoNROxtNq8F3tzYM/n+TjKSX5qf2jx941276TIr9FjXxKr8eX/6bK4yuopwo9py1sw8F9kdw4AmurRpLUM3tYx5ZnKpfHPi8dzz19vJ6MjyxYUrpqeb1uLs3eGV6vr21pSqpeWkqonAN9oUyIiXpv8XvlN5e3icY2BkYGAA4n0vN4fG89t8ZeBmYQCBa9wPPRH0/wcsDMwmQC4HAxNIFABAfAqaAHicY2BkYGBu+N/AEMPCAAJAkpEBFbABAEcMAm94nGNhYGBgfsnAwMKAigESnwEBAAAAAAAAdgCkANoBCAFsAAB4nGNgZGBgYGMIZGBlAAEmIOYCQgaG/2A+AwARSAFzAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgI2RiZGZkYWRlZGNkZ2BsYI1OSM1OZs1OSe/OJW1KDM9o4S9KDWtKLU4g4EBAJ79CeQ=') format('woff'),
|
||||
url('../fonts/iconfont.ttf?t=1508229193188') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||
url('../fonts/iconfont.svg?t=1508229193188#iconfont') format('svg'); /* iOS 4.1- */
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family:"iconfont" !important;
|
||||
font-size:16px;
|
||||
font-style:normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-check:before { content: "\e645"; }
|
||||
|
||||
.icon-close:before { content: "\e646"; }
|
||||
|
||||
.icon-right:before { content: "\e6a3"; }
|
||||
|
||||
.icon-refresh:before { content: "\e6a4"; }
|
||||
BIN
captcha/aj-front/static/web-html/fonts/iconfont.eot
Normal file
BIN
captcha/aj-front/static/web-html/fonts/iconfont.eot
Normal file
Binary file not shown.
45
captcha/aj-front/static/web-html/fonts/iconfont.svg
Normal file
45
captcha/aj-front/static/web-html/fonts/iconfont.svg
Normal file
@ -0,0 +1,45 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<!--
|
||||
2013-9-30: Created.
|
||||
-->
|
||||
<svg>
|
||||
<metadata>
|
||||
Created by iconfont
|
||||
</metadata>
|
||||
<defs>
|
||||
|
||||
<font id="iconfont" horiz-adv-x="1024" >
|
||||
<font-face
|
||||
font-family="iconfont"
|
||||
font-weight="500"
|
||||
font-stretch="normal"
|
||||
units-per-em="1024"
|
||||
ascent="896"
|
||||
descent="-128"
|
||||
/>
|
||||
<missing-glyph />
|
||||
|
||||
<glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
|
||||
d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
|
||||
t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
|
||||
t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
|
||||
|
||||
|
||||
|
||||
<glyph glyph-name="check" unicode="" d="M887.904 597.792c-12.864 12.064-33.152 11.488-45.216-1.408L415.936 142.016l-233.12 229.696C170.208 384.128 149.952 384 137.536 371.392c-12.416-12.576-12.256-32.864 0.352-45.248l256.48-252.672c0.096-0.096 0.224-0.128 0.32-0.224 0.096-0.096 0.128-0.224 0.224-0.32 2.016-1.92 4.448-3.008 6.784-4.288 1.152-0.672 2.144-1.664 3.36-2.144 3.776-1.472 7.776-2.24 11.744-2.24 4.192 0 8.384 0.832 12.288 2.496 1.312 0.544 2.336 1.664 3.552 2.368 2.4 1.408 4.896 2.592 6.944 4.672 0.096 0.096 0.128 0.256 0.224 0.352 0.064 0.096 0.192 0.128 0.288 0.224l449.184 478.208C901.44 565.408 900.768 585.664 887.904 597.792z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="close" unicode="" d="M557.312 382.752l265.28 263.904c12.544 12.48 12.608 32.704 0.128 45.248-12.512 12.576-32.704 12.608-45.248 0.128l-265.344-263.936-263.04 263.84C236.64 704.416 216.384 704.48 203.84 692 191.328 679.52 191.296 659.264 203.776 646.72l262.976-263.776L201.6 119.2c-12.544-12.48-12.608-32.704-0.128-45.248 6.24-6.272 14.464-9.44 22.688-9.44 8.16 0 16.32 3.104 22.56 9.312l265.216 263.808 265.44-266.24c6.24-6.272 14.432-9.408 22.656-9.408 8.192 0 16.352 3.136 22.592 9.344 12.512 12.48 12.544 32.704 0.064 45.248L557.312 382.752z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="right" unicode="" d="M761.056 363.872c0.512 0.992 1.344 1.824 1.792 2.848 8.8 18.304 5.92 40.704-9.664 55.424L399.936 756.256c-19.264 18.208-49.632 17.344-67.872-1.888-18.208-19.264-17.376-49.632 1.888-67.872l316.96-299.84-315.712-304.288c-19.072-18.4-19.648-48.768-1.248-67.872 9.408-9.792 21.984-14.688 34.56-14.688 12 0 24 4.48 33.312 13.44l350.048 337.376c0.672 0.672 0.928 1.6 1.6 2.304 0.512 0.48 1.056 0.832 1.568 1.344C757.76 357.12 759.2 360.608 761.056 363.872z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="refresh" unicode="" d="M939.456 639.776c-16.672 5.984-34.976-2.72-40.896-19.36l-24.768-69.344c-28.992 65.312-74.784 122.72-133.088 165.92C555.328 854.272 291.296 816.768 152.32 633.344c-67.264-88.768-95.616-198.176-79.84-308.032 15.84-110.304 74.208-207.776 164.352-274.496 75.424-55.808 163.808-82.752 251.456-82.752 128.032 0 254.56 57.44 336.992 166.272 36.48 48.128 61.472 102.08 74.208 160.416 3.776 17.248-7.136 34.304-24.416 38.08-17.216 3.712-34.304-7.104-38.08-24.416-10.784-49.184-31.872-94.752-62.72-135.456-117.888-155.52-341.92-187.232-499.392-70.72-76.288 56.48-125.664 138.912-139.072 232.16-13.344 92.8 10.656 185.248 67.488 260.288 117.856 155.584 341.792 187.424 499.328 70.848 57.024-42.24 99.84-100.608 122.976-166.624l-109.984 42.944c-16.416 6.368-35.008-1.696-41.44-18.176-6.432-16.48 1.728-35.008 18.176-41.44l161.856-63.2c3.808-1.472 7.744-2.208 11.616-2.208 0.544 0 1.024 0.192 1.568 0.224 1.216-0.128 2.432-0.64 3.648-0.64 13.12 0 25.472 8.16 30.112 21.248l57.632 161.184C964.768 615.52 956.096 633.856 939.456 639.776z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
|
||||
|
||||
</font>
|
||||
</defs></svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
BIN
captcha/aj-front/static/web-html/fonts/iconfont.ttf
Normal file
BIN
captcha/aj-front/static/web-html/fonts/iconfont.ttf
Normal file
Binary file not shown.
BIN
captcha/aj-front/static/web-html/fonts/iconfont.woff
Normal file
BIN
captcha/aj-front/static/web-html/fonts/iconfont.woff
Normal file
Binary file not shown.
125
captcha/aj-front/static/web-html/index.html
Normal file
125
captcha/aj-front/static/web-html/index.html
Normal file
@ -0,0 +1,125 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
|
||||
<title>verify插件demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/verify.css">
|
||||
<style>
|
||||
.btn{
|
||||
border: none;
|
||||
outline: none;
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background-color: #409EFF;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box">
|
||||
<h1>verify---anji</h1>
|
||||
<p>前后端联合交互的验证码插件</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<h3>滑动嵌入式（slider-embed）</h3>
|
||||
<div id="mpanel1" >
|
||||
</div>
|
||||
<h3>滑动弹出式（slider-popup）</h3>
|
||||
<button class="btn" id='btn'>点击我</button>
|
||||
<div id="mpanel2" style="margin-top:50px;">
|
||||
</div>
|
||||
|
||||
<h3>点选嵌入式（point-embed）</h3>
|
||||
<div id="mpanel3" style="margin-top:50px;">
|
||||
</div>
|
||||
<h3>点选弹出式（point-popup）</h3>
|
||||
<button class="btn" id='btn2'>点击我</button>
|
||||
<div id="mpanel4" style="margin-top:50px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="js/jquery.min.js" ></script>
|
||||
<!-- 可选 为示例加密方式 start-->
|
||||
<script src="./js/md5.js"></script>
|
||||
<script src="./js/signUtil.js"></script>
|
||||
<!-- 以上 为示例加密方式 end-->
|
||||
<script src="./js/crypto-js.js"></script>
|
||||
<script src="./js/ase.js"></script>
|
||||
<script type="text/javascript" src="js/verify.js" ></script>
|
||||
|
||||
<script>
|
||||
// 初始化验证码 嵌入式
|
||||
$('#mpanel1').slideVerify({
|
||||
mode:'fixed',
|
||||
imgSize : { //图片的大小对象
|
||||
width: '400px',
|
||||
height: '200px',
|
||||
},
|
||||
barSize:{
|
||||
width: '400px',
|
||||
height: '40px',
|
||||
},
|
||||
ready : function() { //加载完毕的回调
|
||||
},
|
||||
success : function(params) { //成功的回调
|
||||
// 返回的二次验证参数 合并到验证通过之后的逻辑 参数中回传服务器
|
||||
},
|
||||
error : function() { //失败的回调
|
||||
}
|
||||
});
|
||||
// 初始化验证码 弹出式
|
||||
$('#mpanel2').slideVerify({
|
||||
mode:'pop',
|
||||
containerId:'btn',//pop模式 必填 被点击之后出现行为验证码的元素id
|
||||
ready : function() { //加载完毕的回调
|
||||
},
|
||||
success : function(params) { //成功的回调
|
||||
// 返回的二次验证参数 合并到验证通过之后的逻辑 参数中回传服务器
|
||||
},
|
||||
error : function() { //失败的回调
|
||||
}
|
||||
});
|
||||
// 初始化验证码 嵌入式
|
||||
$('#mpanel3').pointsVerify({
|
||||
mode:'fixed',
|
||||
imgSize : {
|
||||
width: '500px',
|
||||
height: '255px',
|
||||
},
|
||||
ready : function() {
|
||||
},
|
||||
success : function(params) {
|
||||
//返回的二次验证参数 合并到验证通过之后的逻辑 参数中回传服务器
|
||||
},
|
||||
error : function() {
|
||||
}
|
||||
|
||||
});
|
||||
// 初始化验证码 弹出式
|
||||
$('#mpanel4').pointsVerify({
|
||||
containerId:'btn2', // pop模式 必填 被点击之后出现行为验证码的元素id
|
||||
mode:'pop',
|
||||
imgSize : { //图片的大小对象
|
||||
width: '400px',
|
||||
height: '200px',
|
||||
},
|
||||
ready : function() {
|
||||
},
|
||||
success : function(params) {
|
||||
//返回的二次验证参数 合并到验证通过之后的逻辑 参数中回传服务器
|
||||
},
|
||||
error : function() {
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user