commit
983bdd8526
45 changed files with 15747 additions and 0 deletions
@ -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"] |
||||
|
} |
||||
@ -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 |
||||
@ -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 |
||||
@ -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": {} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,21 @@ |
|||||
|
# wenhuayun_index |
||||
|
|
||||
|
> A Vue.js project |
||||
|
|
||||
|
## Build Setup |
||||
|
|
||||
|
``` bash |
||||
|
# install dependencies |
||||
|
npm install |
||||
|
|
||||
|
# serve with hot reload at localhost:8080 |
||||
|
npm run dev |
||||
|
|
||||
|
# build for production with minification |
||||
|
npm run build |
||||
|
|
||||
|
# build for production and view the bundle analyzer report |
||||
|
npm run build --report |
||||
|
``` |
||||
|
|
||||
|
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). |
||||
@ -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 production...') |
||||
|
spinner.start() |
||||
|
|
||||
|
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { |
||||
|
if (err) throw err |
||||
|
webpack(webpackConfig, (err, stats) => { |
||||
|
spinner.stop() |
||||
|
if (err) throw err |
||||
|
process.stdout.write(stats.toString({ |
||||
|
colors: true, |
||||
|
modules: false, |
||||
|
children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
|
||||
|
chunks: false, |
||||
|
chunkModules: false |
||||
|
}) + '\n\n') |
||||
|
|
||||
|
if (stats.hasErrors()) { |
||||
|
console.log(chalk.red(' Build failed with errors.\n')) |
||||
|
process.exit(1) |
||||
|
} |
||||
|
|
||||
|
console.log(chalk.cyan(' Build complete.\n')) |
||||
|
console.log(chalk.yellow( |
||||
|
' Tip: built files are meant to be served over an HTTP server.\n' + |
||||
|
' Opening index.html over file:// won\'t work.\n' |
||||
|
)) |
||||
|
}) |
||||
|
}) |
||||
@ -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) |
||||
|
} |
||||
|
} |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,101 @@ |
|||||
|
'use strict' |
||||
|
const path = require('path') |
||||
|
const config = require('../config') |
||||
|
const ExtractTextPlugin = require('extract-text-webpack-plugin') |
||||
|
const packageConfig = require('../package.json') |
||||
|
|
||||
|
exports.assetsPath = function (_path) { |
||||
|
const assetsSubDirectory = process.env.NODE_ENV === 'production' |
||||
|
? config.build.assetsSubDirectory |
||||
|
: config.dev.assetsSubDirectory |
||||
|
|
||||
|
return path.posix.join(assetsSubDirectory, _path) |
||||
|
} |
||||
|
|
||||
|
exports.cssLoaders = function (options) { |
||||
|
options = options || {} |
||||
|
|
||||
|
const cssLoader = { |
||||
|
loader: 'css-loader', |
||||
|
options: { |
||||
|
sourceMap: options.sourceMap |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const postcssLoader = { |
||||
|
loader: 'postcss-loader', |
||||
|
options: { |
||||
|
sourceMap: options.sourceMap |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// generate loader string to be used with extract text plugin
|
||||
|
function generateLoaders (loader, loaderOptions) { |
||||
|
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] |
||||
|
|
||||
|
if (loader) { |
||||
|
loaders.push({ |
||||
|
loader: loader + '-loader', |
||||
|
options: Object.assign({}, loaderOptions, { |
||||
|
sourceMap: options.sourceMap |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// Extract CSS when that option is specified
|
||||
|
// (which is the case during production build)
|
||||
|
if (options.extract) { |
||||
|
return ExtractTextPlugin.extract({ |
||||
|
use: loaders, |
||||
|
fallback: 'vue-style-loader' |
||||
|
}) |
||||
|
} else { |
||||
|
return ['vue-style-loader'].concat(loaders) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
|
||||
|
return { |
||||
|
css: generateLoaders(), |
||||
|
postcss: generateLoaders(), |
||||
|
less: generateLoaders('less'), |
||||
|
sass: generateLoaders('sass', { indentedSyntax: true }), |
||||
|
scss: generateLoaders('sass'), |
||||
|
stylus: generateLoaders('stylus'), |
||||
|
styl: generateLoaders('stylus') |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Generate loaders for standalone style files (outside of .vue)
|
||||
|
exports.styleLoaders = function (options) { |
||||
|
const output = [] |
||||
|
const loaders = exports.cssLoaders(options) |
||||
|
|
||||
|
for (const extension in loaders) { |
||||
|
const loader = loaders[extension] |
||||
|
output.push({ |
||||
|
test: new RegExp('\\.' + extension + '$'), |
||||
|
use: loader |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
return output |
||||
|
} |
||||
|
|
||||
|
exports.createNotifierCallback = () => { |
||||
|
const notifier = require('node-notifier') |
||||
|
|
||||
|
return (severity, errors) => { |
||||
|
if (severity !== 'error') return |
||||
|
|
||||
|
const error = errors[0] |
||||
|
const filename = error.file && error.file.split('!').pop() |
||||
|
|
||||
|
notifier.notify({ |
||||
|
title: packageConfig.name, |
||||
|
message: severity + ': ' + error.name, |
||||
|
subtitle: filename || '', |
||||
|
icon: path.join(__dirname, 'logo.png') |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
@ -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' |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,82 @@ |
|||||
|
'use strict' |
||||
|
const path = require('path') |
||||
|
const utils = require('./utils') |
||||
|
const config = require('../config') |
||||
|
const vueLoaderConfig = require('./vue-loader.conf') |
||||
|
|
||||
|
function resolve (dir) { |
||||
|
return path.join(__dirname, '..', dir) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
module.exports = { |
||||
|
context: path.resolve(__dirname, '../'), |
||||
|
entry: { |
||||
|
app: './src/main.js' |
||||
|
}, |
||||
|
output: { |
||||
|
path: config.build.assetsRoot, |
||||
|
filename: '[name].js', |
||||
|
publicPath: process.env.NODE_ENV === 'production' |
||||
|
? config.build.assetsPublicPath |
||||
|
: config.dev.assetsPublicPath |
||||
|
}, |
||||
|
resolve: { |
||||
|
extensions: ['.js', '.vue', '.json'], |
||||
|
alias: { |
||||
|
'vue$': 'vue/dist/vue.esm.js', |
||||
|
'@': resolve('src'), |
||||
|
} |
||||
|
}, |
||||
|
module: { |
||||
|
rules: [ |
||||
|
{ |
||||
|
test: /\.vue$/, |
||||
|
loader: 'vue-loader', |
||||
|
options: vueLoaderConfig |
||||
|
}, |
||||
|
{ |
||||
|
test: /\.js$/, |
||||
|
loader: 'babel-loader', |
||||
|
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] |
||||
|
}, |
||||
|
{ |
||||
|
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, |
||||
|
loader: 'url-loader', |
||||
|
options: { |
||||
|
limit: 10000, |
||||
|
name: utils.assetsPath('img/[name].[hash:7].[ext]') |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, |
||||
|
loader: 'url-loader', |
||||
|
options: { |
||||
|
limit: 10000, |
||||
|
name: utils.assetsPath('media/[name].[hash:7].[ext]') |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, |
||||
|
loader: 'url-loader', |
||||
|
options: { |
||||
|
limit: 10000, |
||||
|
name: utils.assetsPath('fonts/[name].[hash:7].[ext]') |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
node: { |
||||
|
// prevent webpack from injecting useless setImmediate polyfill because Vue
|
||||
|
// source contains it (although only uses it if it's native).
|
||||
|
setImmediate: false, |
||||
|
// prevent webpack from injecting mocks to Node native modules
|
||||
|
// that does not make sense for the client
|
||||
|
dgram: 'empty', |
||||
|
fs: 'empty', |
||||
|
net: 'empty', |
||||
|
tls: 'empty', |
||||
|
child_process: 'empty' |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,95 @@ |
|||||
|
'use strict' |
||||
|
const utils = require('./utils') |
||||
|
const webpack = require('webpack') |
||||
|
const config = require('../config') |
||||
|
const merge = require('webpack-merge') |
||||
|
const path = require('path') |
||||
|
const baseWebpackConfig = require('./webpack.base.conf') |
||||
|
const CopyWebpackPlugin = require('copy-webpack-plugin') |
||||
|
const HtmlWebpackPlugin = require('html-webpack-plugin') |
||||
|
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') |
||||
|
const portfinder = require('portfinder') |
||||
|
|
||||
|
const HOST = process.env.HOST |
||||
|
const PORT = process.env.PORT && Number(process.env.PORT) |
||||
|
|
||||
|
const devWebpackConfig = merge(baseWebpackConfig, { |
||||
|
module: { |
||||
|
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) |
||||
|
}, |
||||
|
// cheap-module-eval-source-map is faster for development
|
||||
|
devtool: config.dev.devtool, |
||||
|
|
||||
|
// these devServer options should be customized in /config/index.js
|
||||
|
devServer: { |
||||
|
clientLogLevel: 'warning', |
||||
|
historyApiFallback: { |
||||
|
rewrites: [ |
||||
|
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, |
||||
|
], |
||||
|
}, |
||||
|
hot: true, |
||||
|
contentBase: false, // since we use CopyWebpackPlugin.
|
||||
|
compress: true, |
||||
|
host: HOST || config.dev.host, |
||||
|
port: PORT || config.dev.port, |
||||
|
open: config.dev.autoOpenBrowser, |
||||
|
overlay: config.dev.errorOverlay |
||||
|
? { warnings: false, errors: true } |
||||
|
: false, |
||||
|
publicPath: config.dev.assetsPublicPath, |
||||
|
proxy: config.dev.proxyTable, |
||||
|
quiet: true, // necessary for FriendlyErrorsPlugin
|
||||
|
watchOptions: { |
||||
|
poll: config.dev.poll, |
||||
|
} |
||||
|
}, |
||||
|
plugins: [ |
||||
|
new webpack.DefinePlugin({ |
||||
|
'process.env': require('../config/dev.env') |
||||
|
}), |
||||
|
new webpack.HotModuleReplacementPlugin(), |
||||
|
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
|
||||
|
new webpack.NoEmitOnErrorsPlugin(), |
||||
|
// https://github.com/ampedandwired/html-webpack-plugin
|
||||
|
new HtmlWebpackPlugin({ |
||||
|
filename: 'index.html', |
||||
|
template: 'index.html', |
||||
|
inject: true |
||||
|
}), |
||||
|
// copy custom static assets
|
||||
|
new CopyWebpackPlugin([ |
||||
|
{ |
||||
|
from: path.resolve(__dirname, '../static'), |
||||
|
to: config.dev.assetsSubDirectory, |
||||
|
ignore: ['.*'] |
||||
|
} |
||||
|
]) |
||||
|
] |
||||
|
}) |
||||
|
|
||||
|
module.exports = new Promise((resolve, reject) => { |
||||
|
portfinder.basePort = process.env.PORT || config.dev.port |
||||
|
portfinder.getPort((err, port) => { |
||||
|
if (err) { |
||||
|
reject(err) |
||||
|
} else { |
||||
|
// publish the new Port, necessary for e2e tests
|
||||
|
process.env.PORT = port |
||||
|
// add port to devServer config
|
||||
|
devWebpackConfig.devServer.port = port |
||||
|
|
||||
|
// Add FriendlyErrorsPlugin
|
||||
|
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ |
||||
|
compilationSuccessInfo: { |
||||
|
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], |
||||
|
}, |
||||
|
onErrors: config.dev.notifyOnErrors |
||||
|
? utils.createNotifierCallback() |
||||
|
: undefined |
||||
|
})) |
||||
|
|
||||
|
resolve(devWebpackConfig) |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
@ -0,0 +1,145 @@ |
|||||
|
'use strict' |
||||
|
const path = require('path') |
||||
|
const utils = require('./utils') |
||||
|
const webpack = require('webpack') |
||||
|
const config = require('../config') |
||||
|
const merge = require('webpack-merge') |
||||
|
const baseWebpackConfig = require('./webpack.base.conf') |
||||
|
const CopyWebpackPlugin = require('copy-webpack-plugin') |
||||
|
const HtmlWebpackPlugin = require('html-webpack-plugin') |
||||
|
const ExtractTextPlugin = require('extract-text-webpack-plugin') |
||||
|
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') |
||||
|
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') |
||||
|
|
||||
|
const env = require('../config/prod.env') |
||||
|
|
||||
|
const webpackConfig = merge(baseWebpackConfig, { |
||||
|
module: { |
||||
|
rules: utils.styleLoaders({ |
||||
|
sourceMap: config.build.productionSourceMap, |
||||
|
extract: true, |
||||
|
usePostCSS: true |
||||
|
}) |
||||
|
}, |
||||
|
devtool: config.build.productionSourceMap ? config.build.devtool : false, |
||||
|
output: { |
||||
|
path: config.build.assetsRoot, |
||||
|
filename: utils.assetsPath('js/[name].[chunkhash].js'), |
||||
|
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') |
||||
|
}, |
||||
|
plugins: [ |
||||
|
// http://vuejs.github.io/vue-loader/en/workflow/production.html
|
||||
|
new webpack.DefinePlugin({ |
||||
|
'process.env': env |
||||
|
}), |
||||
|
new UglifyJsPlugin({ |
||||
|
uglifyOptions: { |
||||
|
compress: { |
||||
|
warnings: false |
||||
|
} |
||||
|
}, |
||||
|
sourceMap: config.build.productionSourceMap, |
||||
|
parallel: true |
||||
|
}), |
||||
|
// extract css into its own file
|
||||
|
new ExtractTextPlugin({ |
||||
|
filename: utils.assetsPath('css/[name].[contenthash].css'), |
||||
|
// Setting the following option to `false` will not extract CSS from codesplit chunks.
|
||||
|
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
|
||||
|
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
|
||||
|
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
|
||||
|
allChunks: true, |
||||
|
}), |
||||
|
// Compress extracted CSS. We are using this plugin so that possible
|
||||
|
// duplicated CSS from different components can be deduped.
|
||||
|
new OptimizeCSSPlugin({ |
||||
|
cssProcessorOptions: config.build.productionSourceMap |
||||
|
? { safe: true, map: { inline: false } } |
||||
|
: { safe: true } |
||||
|
}), |
||||
|
// generate dist index.html with correct asset hash for caching.
|
||||
|
// you can customize output by editing /index.html
|
||||
|
// see https://github.com/ampedandwired/html-webpack-plugin
|
||||
|
new HtmlWebpackPlugin({ |
||||
|
filename: config.build.index, |
||||
|
template: 'index.html', |
||||
|
inject: true, |
||||
|
minify: { |
||||
|
removeComments: true, |
||||
|
collapseWhitespace: true, |
||||
|
removeAttributeQuotes: true |
||||
|
// more options:
|
||||
|
// https://github.com/kangax/html-minifier#options-quick-reference
|
||||
|
}, |
||||
|
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
|
||||
|
chunksSortMode: 'dependency' |
||||
|
}), |
||||
|
// keep module.id stable when vendor modules does not change
|
||||
|
new webpack.HashedModuleIdsPlugin(), |
||||
|
// enable scope hoisting
|
||||
|
new webpack.optimize.ModuleConcatenationPlugin(), |
||||
|
// split vendor js into its own file
|
||||
|
new webpack.optimize.CommonsChunkPlugin({ |
||||
|
name: 'vendor', |
||||
|
minChunks (module) { |
||||
|
// any required modules inside node_modules are extracted to vendor
|
||||
|
return ( |
||||
|
module.resource && |
||||
|
/\.js$/.test(module.resource) && |
||||
|
module.resource.indexOf( |
||||
|
path.join(__dirname, '../node_modules') |
||||
|
) === 0 |
||||
|
) |
||||
|
} |
||||
|
}), |
||||
|
// extract webpack runtime and module manifest to its own file in order to
|
||||
|
// prevent vendor hash from being updated whenever app bundle is updated
|
||||
|
new webpack.optimize.CommonsChunkPlugin({ |
||||
|
name: 'manifest', |
||||
|
minChunks: Infinity |
||||
|
}), |
||||
|
// This instance extracts shared chunks from code splitted chunks and bundles them
|
||||
|
// in a separate chunk, similar to the vendor chunk
|
||||
|
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
|
||||
|
new webpack.optimize.CommonsChunkPlugin({ |
||||
|
name: 'app', |
||||
|
async: 'vendor-async', |
||||
|
children: true, |
||||
|
minChunks: 3 |
||||
|
}), |
||||
|
|
||||
|
// copy custom static assets
|
||||
|
new CopyWebpackPlugin([ |
||||
|
{ |
||||
|
from: path.resolve(__dirname, '../static'), |
||||
|
to: config.build.assetsSubDirectory, |
||||
|
ignore: ['.*'] |
||||
|
} |
||||
|
]) |
||||
|
] |
||||
|
}) |
||||
|
|
||||
|
if (config.build.productionGzip) { |
||||
|
const CompressionWebpackPlugin = require('compression-webpack-plugin') |
||||
|
|
||||
|
webpackConfig.plugins.push( |
||||
|
new CompressionWebpackPlugin({ |
||||
|
asset: '[path].gz[query]', |
||||
|
algorithm: 'gzip', |
||||
|
test: new RegExp( |
||||
|
'\\.(' + |
||||
|
config.build.productionGzipExtensions.join('|') + |
||||
|
')$' |
||||
|
), |
||||
|
threshold: 10240, |
||||
|
minRatio: 0.8 |
||||
|
}) |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
if (config.build.bundleAnalyzerReport) { |
||||
|
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin |
||||
|
webpackConfig.plugins.push(new BundleAnalyzerPlugin()) |
||||
|
} |
||||
|
|
||||
|
module.exports = webpackConfig |
||||
@ -0,0 +1,7 @@ |
|||||
|
'use strict' |
||||
|
const merge = require('webpack-merge') |
||||
|
const prodEnv = require('./prod.env') |
||||
|
|
||||
|
module.exports = merge(prodEnv, { |
||||
|
NODE_ENV: '"development"' |
||||
|
}) |
||||
@ -0,0 +1,69 @@ |
|||||
|
'use strict' |
||||
|
// Template version: 1.3.1
|
||||
|
// see http://vuejs-templates.github.io/webpack for documentation.
|
||||
|
|
||||
|
const path = require('path') |
||||
|
|
||||
|
module.exports = { |
||||
|
dev: { |
||||
|
|
||||
|
// Paths
|
||||
|
assetsSubDirectory: 'static', |
||||
|
assetsPublicPath: '/', |
||||
|
proxyTable: {}, |
||||
|
|
||||
|
// Various Dev Server settings
|
||||
|
host: 'localhost', // can be overwritten by process.env.HOST
|
||||
|
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
|
||||
|
autoOpenBrowser: false, |
||||
|
errorOverlay: true, |
||||
|
notifyOnErrors: true, |
||||
|
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
|
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* Source Maps |
||||
|
*/ |
||||
|
|
||||
|
// https://webpack.js.org/configuration/devtool/#development
|
||||
|
devtool: 'cheap-module-eval-source-map', |
||||
|
|
||||
|
// If you have problems debugging vue-files in devtools,
|
||||
|
// set this to false - it *may* help
|
||||
|
// https://vue-loader.vuejs.org/en/options.html#cachebusting
|
||||
|
cacheBusting: true, |
||||
|
|
||||
|
cssSourceMap: true |
||||
|
}, |
||||
|
|
||||
|
build: { |
||||
|
// Template for index.html
|
||||
|
index: path.resolve(__dirname, '../dist/index.html'), |
||||
|
|
||||
|
// Paths
|
||||
|
assetsRoot: path.resolve(__dirname, '../dist'), |
||||
|
assetsSubDirectory: 'static', |
||||
|
assetsPublicPath: '/', |
||||
|
|
||||
|
/** |
||||
|
* Source Maps |
||||
|
*/ |
||||
|
|
||||
|
productionSourceMap: true, |
||||
|
// https://webpack.js.org/configuration/devtool/#production
|
||||
|
devtool: '#source-map', |
||||
|
|
||||
|
// Gzip off by default as many popular static hosts such as
|
||||
|
// Surge or Netlify already gzip all static assets for you.
|
||||
|
// Before setting to `true`, make sure to:
|
||||
|
// npm install --save-dev compression-webpack-plugin
|
||||
|
productionGzip: false, |
||||
|
productionGzipExtensions: ['js', 'css'], |
||||
|
|
||||
|
// Run the build command with an extra argument to
|
||||
|
// View the bundle analyzer report after build finishes:
|
||||
|
// `npm run build --report`
|
||||
|
// Set to `true` or `false` to always turn it on or off
|
||||
|
bundleAnalyzerReport: process.env.npm_config_report |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,4 @@ |
|||||
|
'use strict' |
||||
|
module.exports = { |
||||
|
NODE_ENV: '"production"' |
||||
|
} |
||||
@ -0,0 +1,12 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
||||
|
<title>wenhuayun_index</title> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div id="app"></div> |
||||
|
<!-- built files will be auto injected --> |
||||
|
</body> |
||||
|
</html> |
||||
File diff suppressed because it is too large
@ -0,0 +1,63 @@ |
|||||
|
{ |
||||
|
"name": "wenhuayun_index", |
||||
|
"version": "1.0.0", |
||||
|
"description": "A Vue.js project", |
||||
|
"author": "ltlzx <942659938@qq.com>", |
||||
|
"private": true, |
||||
|
"scripts": { |
||||
|
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", |
||||
|
"start": "npm run dev", |
||||
|
"build": "node build/build.js" |
||||
|
}, |
||||
|
"dependencies": { |
||||
|
"element-ui": "^2.15.3", |
||||
|
"vue": "^2.5.2", |
||||
|
"vue-router": "^3.0.1" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"autoprefixer": "^7.1.2", |
||||
|
"babel-core": "^6.22.1", |
||||
|
"babel-helper-vue-jsx-merge-props": "^2.0.3", |
||||
|
"babel-loader": "^7.1.1", |
||||
|
"babel-plugin-syntax-jsx": "^6.18.0", |
||||
|
"babel-plugin-transform-runtime": "^6.22.0", |
||||
|
"babel-plugin-transform-vue-jsx": "^3.5.0", |
||||
|
"babel-preset-env": "^1.3.2", |
||||
|
"babel-preset-stage-2": "^6.22.0", |
||||
|
"chalk": "^2.0.1", |
||||
|
"copy-webpack-plugin": "^4.0.1", |
||||
|
"css-loader": "^0.28.0", |
||||
|
"extract-text-webpack-plugin": "^3.0.0", |
||||
|
"file-loader": "^1.1.4", |
||||
|
"friendly-errors-webpack-plugin": "^1.6.1", |
||||
|
"html-webpack-plugin": "^2.30.1", |
||||
|
"node-notifier": "^5.1.2", |
||||
|
"optimize-css-assets-webpack-plugin": "^3.2.0", |
||||
|
"ora": "^1.2.0", |
||||
|
"portfinder": "^1.0.13", |
||||
|
"postcss-import": "^11.0.0", |
||||
|
"postcss-loader": "^2.0.8", |
||||
|
"postcss-url": "^7.2.1", |
||||
|
"rimraf": "^2.6.0", |
||||
|
"semver": "^5.3.0", |
||||
|
"shelljs": "^0.7.6", |
||||
|
"uglifyjs-webpack-plugin": "^1.1.1", |
||||
|
"url-loader": "^0.5.8", |
||||
|
"vue-loader": "^13.3.0", |
||||
|
"vue-style-loader": "^3.0.1", |
||||
|
"vue-template-compiler": "^2.5.2", |
||||
|
"webpack": "^3.6.0", |
||||
|
"webpack-bundle-analyzer": "^2.9.0", |
||||
|
"webpack-dev-server": "^2.9.1", |
||||
|
"webpack-merge": "^4.1.0" |
||||
|
}, |
||||
|
"engines": { |
||||
|
"node": ">= 6.0.0", |
||||
|
"npm": ">= 3.0.0" |
||||
|
}, |
||||
|
"browserslist": [ |
||||
|
"> 1%", |
||||
|
"last 2 versions", |
||||
|
"not ie <= 8" |
||||
|
] |
||||
|
} |
||||
@ -0,0 +1,15 @@ |
|||||
|
<template> |
||||
|
<div id="app"> |
||||
|
<router-view/> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'App' |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
@import "./assets/css/main.css"; |
||||
|
</style> |
||||
@ -0,0 +1,176 @@ |
|||||
|
* { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
html, |
||||
|
body, |
||||
|
#app, |
||||
|
.wrapper { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif; |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
text-decoration: none |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.content-box { |
||||
|
position: absolute; |
||||
|
left: 250px; |
||||
|
right: 0; |
||||
|
top: 70px; |
||||
|
bottom: 0; |
||||
|
padding-bottom: 30px; |
||||
|
-webkit-transition: left .3s ease-in-out; |
||||
|
transition: left .3s ease-in-out; |
||||
|
background: #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
width: auto; |
||||
|
height: 100%; |
||||
|
padding: 10px; |
||||
|
overflow-y: scroll; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.content-collapse { |
||||
|
left: 65px; |
||||
|
} |
||||
|
|
||||
|
.container { |
||||
|
padding: 30px; |
||||
|
background: #fff; |
||||
|
border: 1px solid #ddd; |
||||
|
border-radius: 5px; |
||||
|
} |
||||
|
|
||||
|
.crumbs { |
||||
|
margin: 10px 0; |
||||
|
} |
||||
|
|
||||
|
.el-table th { |
||||
|
background-color: #f5f7fa !important; |
||||
|
} |
||||
|
|
||||
|
.pagination { |
||||
|
margin: 20px 0; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.plugins-tips { |
||||
|
padding: 20px 10px; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.el-button+.el-tooltip { |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
|
||||
|
.el-table tr:hover { |
||||
|
background: #f6faff; |
||||
|
} |
||||
|
|
||||
|
.mgb20 { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.move-enter-active, |
||||
|
.move-leave-active { |
||||
|
transition: opacity .5s; |
||||
|
} |
||||
|
|
||||
|
.move-enter, |
||||
|
.move-leave { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
/*BaseForm*/ |
||||
|
|
||||
|
.form-box { |
||||
|
width: 600px; |
||||
|
} |
||||
|
|
||||
|
.form-box .line { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.el-time-panel__content::after, |
||||
|
.el-time-panel__content::before { |
||||
|
margin-top: -7px; |
||||
|
} |
||||
|
|
||||
|
.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) { |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
/*Upload*/ |
||||
|
|
||||
|
.pure-button { |
||||
|
width: 150px; |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
text-align: center; |
||||
|
color: #fff; |
||||
|
border-radius: 3px; |
||||
|
} |
||||
|
|
||||
|
.g-core-image-corp-container .info-aside { |
||||
|
height: 45px; |
||||
|
} |
||||
|
|
||||
|
.el-upload--text { |
||||
|
background-color: #fff; |
||||
|
border: 1px dashed #d9d9d9; |
||||
|
border-radius: 6px; |
||||
|
box-sizing: border-box; |
||||
|
width: 360px; |
||||
|
height: 180px; |
||||
|
text-align: center; |
||||
|
cursor: pointer; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.el-upload--text .el-icon-upload { |
||||
|
font-size: 67px; |
||||
|
color: #97a8be; |
||||
|
margin: 40px 0 16px; |
||||
|
line-height: 50px; |
||||
|
} |
||||
|
|
||||
|
.el-upload--text { |
||||
|
color: #97a8be; |
||||
|
font-size: 14px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.el-upload--text em { |
||||
|
font-style: normal; |
||||
|
} |
||||
|
|
||||
|
/*VueEditor*/ |
||||
|
|
||||
|
.ql-container { |
||||
|
min-height: 400px; |
||||
|
} |
||||
|
|
||||
|
.ql-snow .ql-tooltip { |
||||
|
transform: translateX(117.5px) translateY(10px) !important; |
||||
|
} |
||||
|
|
||||
|
.editor-btn { |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
|
||||
|
/*markdown*/ |
||||
|
|
||||
|
.v-note-wrapper .v-note-panel { |
||||
|
min-height: 500px; |
||||
|
} |
||||
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,119 @@ |
|||||
|
<template> |
||||
|
<div class="body"> |
||||
|
<div class="foot_top"> |
||||
|
<div class="foot_top_left"> |
||||
|
<div class="foot_top_left_item"> |
||||
|
<img src="../../assets/img/header_logo.png" alt="" class="QRcode"> |
||||
|
<span>深圳文化产权交易所</span> |
||||
|
<span>公众号</span> |
||||
|
</div> |
||||
|
<div class="foot_top_left_item"> |
||||
|
<img src="../../assets/img/header_logo.png" alt="" class="QRcode"> |
||||
|
<span>深圳文化产权交易所</span> |
||||
|
<span>公众号</span> |
||||
|
</div> |
||||
|
<div class="foot_top_left_item"> |
||||
|
<img src="../../assets/img/header_logo.png" alt="" class="QRcode"> |
||||
|
<span>深圳文化产权交易所</span> |
||||
|
<span>公众号</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="foot_top_right"> |
||||
|
<div class="foot_top_right_item"> |
||||
|
<div class="foot_top_right_item_title"> |
||||
|
<span class="title_span">深圳</span> |
||||
|
<span>SHENZHEN</span> |
||||
|
</div> |
||||
|
<p>地址：广东省深圳市福田区滨河大道5008号</p> |
||||
|
<p>电话：0755-88266839</p> |
||||
|
<p>邮箱：szwenjiaosuo@126.com</p> |
||||
|
<p>QQ：3446235353</p> |
||||
|
</div> |
||||
|
<div class="foot_top_right_item"> |
||||
|
<div class="foot_top_right_item_title"> |
||||
|
<span class="title_span">北京业务联络处</span> |
||||
|
<span>BEIJING</span> |
||||
|
</div> |
||||
|
<p>地址：北京市朝阳区华文国际传媒大厦C座427室</p> |
||||
|
<p>电话：010-84244880</p> |
||||
|
<p>邮箱：szwenjiaosuo@126.com</p> |
||||
|
<p>QQ：1124357341</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="foot_info"> |
||||
|
Copyright 2021 深圳文化产权交易所 | 粤ICP备11099274号 | 粤公网安备： 44030402001783号 | 拍卖经营批准书：4406441100002018 | 广东省文物拍卖许可证：粤文物证2019001号 |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.body{ |
||||
|
width: 100%; |
||||
|
border-top: 2px solid black; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
padding-top: 20px; |
||||
|
padding-bottom: 10px; |
||||
|
margin-top: 30px; |
||||
|
} |
||||
|
.body>div{ |
||||
|
width: 1200px; |
||||
|
} |
||||
|
.foot_top{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.foot_top_left,.foot_top_right{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.foot_top_left_item{ |
||||
|
font-size: 12px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
color: #555555; |
||||
|
align-items: center; |
||||
|
margin-left: 55px; |
||||
|
} |
||||
|
.foot_top_left_item:first-child,.foot_top_right_item:first-child{ |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
.QRcode{ |
||||
|
width: 116px; |
||||
|
height: 116px; |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
.foot_top_right_item{ |
||||
|
margin-left: 55px; |
||||
|
width: 272px; |
||||
|
} |
||||
|
.foot_top_right_item>p{ |
||||
|
font-size: 12px; |
||||
|
color: #7F7F7F; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
.foot_top_right_item_title{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 5px 0; |
||||
|
border-bottom: 1px solid #AAAAAA; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.title_span{ |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.foot_info{ |
||||
|
font-size: 12px; |
||||
|
color: rgba(127, 127, 127, 0.898039215686275); |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,189 @@ |
|||||
|
<template> |
||||
|
<div class="header"> |
||||
|
<div class="header_title"> |
||||
|
<span v-if="login_type==0" @click="showLogin">用户登录</span> |
||||
|
<span v-else @click="UserConsole(0)">交易平台首页</span> |
||||
|
<span @click="UserConsole(1)">用户控制台</span> |
||||
|
<span>联系客服</span> |
||||
|
<span>帮助中心</span> |
||||
|
<span>友情链接</span> |
||||
|
</div> |
||||
|
<div class="header_content"> |
||||
|
<img src="../../assets/img/header_logo.png" alt="" class="header_logo"> |
||||
|
<div class="header_sidebar"> |
||||
|
<div class="header_sidebar_left"> |
||||
|
<span v-for="(item , index) in sidebarList" :key='index' :class="activeClass==item.url ? 'activeClass': ''" @click="goPage(item.url)"> {{item.name}}</span> |
||||
|
</div> |
||||
|
<el-input |
||||
|
class="header_search" |
||||
|
placeholder="资产名称/所在地/编号" |
||||
|
suffix-icon="el-icon-search" |
||||
|
v-model="search"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
activeClass:'', |
||||
|
search:'', |
||||
|
login_type:0, |
||||
|
examine_type:1, |
||||
|
sidebarList:[ |
||||
|
{name:'首页',url:''}, |
||||
|
{name:'资产分类',url:'/AssetClassification'}, |
||||
|
{name:'挂牌公告',url:'/Listing'}, |
||||
|
{name:'成交公告',url:'/Deal'}, |
||||
|
{name:'站内通知',url:'/StationNotice'}, |
||||
|
], |
||||
|
showLogin:false |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
//显示用户登录 |
||||
|
showLogin(){ |
||||
|
this.showLogin=true |
||||
|
}, |
||||
|
UserConsole(type){ |
||||
|
this.login_type=type; |
||||
|
if(type==1){ |
||||
|
if(this.examine_type==0){ |
||||
|
this.sidebarList=[ |
||||
|
{name:'购买方',url:'/wkPurchaser'}, |
||||
|
{name:'托管方',url:'/Listing'}, |
||||
|
{name:'第三方服务机构',url:'/Deal'}, |
||||
|
{name:'我的账户',url:'/StationNotice'}, |
||||
|
] |
||||
|
this.goPage('/wkPurchaser') |
||||
|
}else{ |
||||
|
this.sidebarList=[ |
||||
|
{name:'购买方',url:'/Purchaser'}, |
||||
|
{name:'托管方',url:'/Hoster'}, |
||||
|
{name:'第三方服务机构',url:'/Deal'}, |
||||
|
{name:'我的账户',url:'/StationNotice'}, |
||||
|
] |
||||
|
this.goPage('/Purchaser') |
||||
|
} |
||||
|
}else{ |
||||
|
this.sidebarList=[ |
||||
|
{name:'首页',url:''}, |
||||
|
{name:'资产分类',url:'/AssetClassification'}, |
||||
|
{name:'挂牌公告',url:'/Listing'}, |
||||
|
{name:'成交公告',url:'/Deal'}, |
||||
|
{name:'站内通知',url:'/StationNotice'}, |
||||
|
] |
||||
|
this.goPage('/') |
||||
|
} |
||||
|
}, |
||||
|
goPage(url){ |
||||
|
this.$router.replace(url) |
||||
|
}, |
||||
|
}, |
||||
|
watch:{ |
||||
|
$route(newValue, oldValue){ |
||||
|
this.activeClass=newValue.path |
||||
|
} |
||||
|
}, |
||||
|
created(){ |
||||
|
this.activeClass=this.$route.path |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.header{ |
||||
|
background-color: #29304D; |
||||
|
width: 100%; |
||||
|
height: 185px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.header>div{ |
||||
|
width: 1200px; |
||||
|
} |
||||
|
.header_title{ |
||||
|
height: 45px; |
||||
|
text-align: right; |
||||
|
line-height: 45px; |
||||
|
color: #999; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
.header_title>span{ |
||||
|
display: inline-block; |
||||
|
margin-right: 15px; |
||||
|
} |
||||
|
.header_title>span:hover{ |
||||
|
color: #C94C4C; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.header_title>span:last-child{ |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
.header_content{ |
||||
|
height: 140px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
/* align-items: center; */ |
||||
|
justify-content: center; |
||||
|
} |
||||
|
.header_logo{ |
||||
|
width: 300px; |
||||
|
height: 52px; |
||||
|
} |
||||
|
.header_sidebar{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
margin-top: 57px; |
||||
|
} |
||||
|
.header_sidebar_left{ |
||||
|
color: white; |
||||
|
} |
||||
|
.header_sidebar_left>span{ |
||||
|
display: inline-block; |
||||
|
width: 100px; |
||||
|
height: 30px; |
||||
|
text-align: center; |
||||
|
font-size: 14px; |
||||
|
line-height: 30px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.header_sidebar_left>span:hover{ |
||||
|
color: #C94C4C; |
||||
|
background-color: white; |
||||
|
border-radius: 25px; |
||||
|
} |
||||
|
.activeClass{ |
||||
|
background-color: white; |
||||
|
border-radius: 20px 20px 0 0 ; |
||||
|
color: #C94C4C; |
||||
|
} |
||||
|
.activeClass:hover{ |
||||
|
border-radius: 20px 20px 0 0 !important; |
||||
|
} |
||||
|
.header_search{ |
||||
|
width: 220px; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.header_sidebar>>>.el-input__inner{ |
||||
|
border: none ; |
||||
|
border-radius: 25px; |
||||
|
} |
||||
|
.header_search >>>.el-input__suffix{ |
||||
|
color: #E9B7B7; |
||||
|
right: 10px; |
||||
|
} |
||||
|
.header_sidebar>>>.el-input__inner::-webkit-input-placeholder { |
||||
|
color: #F17F7F; |
||||
|
} |
||||
|
.header_sidebar>>>.el-input__inner::-moz-input-placeholder { |
||||
|
color: #F17F7F; |
||||
|
} |
||||
|
.header_sidebar>>>.el-input__inner::-ms-input-placeholder { |
||||
|
color: #F17F7F; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,32 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<Header></Header> |
||||
|
<div class="body"> |
||||
|
<router-view/> |
||||
|
</div> |
||||
|
<Footer/> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import Header from './Header.vue'; |
||||
|
import Footer from './Footer.vue'; |
||||
|
export default { |
||||
|
data(){ |
||||
|
return{ |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
components:{ |
||||
|
Header,Footer |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
body{ |
||||
|
margin: 0; |
||||
|
} |
||||
|
.body{ |
||||
|
width: 1200px; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,152 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="condition" v-for="(item,index) in conditionList" :key="index"> |
||||
|
<div class="condition_title">{{item.title}}</div> |
||||
|
<div class="condition_item" v-for="(item1,index1) in item.data" :key="index1"> |
||||
|
<span class="condition_item_span">{{item1.name}}</span> |
||||
|
<div class="condition_item_right"> |
||||
|
<span v-for="(item2,index2) in item1.condition" :key="index2" @click="goDetails">{{item2.item}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return{ |
||||
|
conditionList:[ |
||||
|
{title:'人才产权',data:[{name:'人力资本产权',condition:[{item:'使用权'},{item:'所有权'},{item:'收益权'},{item:'处置权'}]}]}, |
||||
|
{ |
||||
|
title:'无形实物资产 ', |
||||
|
data:[ |
||||
|
{ |
||||
|
name:'著作权', |
||||
|
condition:[ |
||||
|
{item:'复制权'},{item:'发行权'},{item:'出租权'},{item:'展览权'},{item:'表演权'},{item:'放映权'},{item:'广播权'},{item:'摄制权'}, |
||||
|
{item:'改编权'},{item:'翻译权'},{item:'汇编权'},{item:'信息网络传播权'},{item:'使用权'},{item:'所有权'} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
name:'专利权', |
||||
|
condition:[{item:'发明专利'},{item:'实用新型专利'},{item:'外观设计专利'},{item:'使用权'},{item:'所有权'}] |
||||
|
}, |
||||
|
{ |
||||
|
name:'专有技术', |
||||
|
condition:[ |
||||
|
{item:'设计资料'},{item:'技术规范'},{item:'工艺流程'},{item:'配方'},{item:'图纸'},{item:'数据'},{item:'经营诀窍'},{item:'使用权'},{item:'所有权'} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
name:'商标资产', |
||||
|
condition:[{item:'商标专用权'},{item:'商标许可权'}] |
||||
|
}, |
||||
|
{ |
||||
|
name:'销售网络', |
||||
|
condition:[{item:'使用权'},{item:'所有权'}] |
||||
|
}, |
||||
|
{ |
||||
|
name:'客户关系', |
||||
|
condition:[{item:'使用权'},{item:'所有权'}] |
||||
|
}, |
||||
|
{ |
||||
|
name:'特许经营权', |
||||
|
condition:[{item:'独占许可'},{item:'独家许可'},{item:'普通许可'}] |
||||
|
}, |
||||
|
{ |
||||
|
name:'合同权益', |
||||
|
condition:[{item:'租赁合同'},{item:'劳务性合同'},{item:'销售合同'},{item:'债权合同'},{item:'股权合同'}] |
||||
|
}, |
||||
|
{ |
||||
|
name:'域名和商誉', |
||||
|
condition:[{item:'域名'},{item:'商誉'}] |
||||
|
}, |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
title:'有形实物资产 ', |
||||
|
data:[ |
||||
|
{ |
||||
|
name:'房屋', |
||||
|
condition:[{item:'租赁权'},{item:'所有权'},{item:'使用权'},{item:'盈利收益'}] |
||||
|
}, |
||||
|
{ |
||||
|
name:'土地', |
||||
|
condition:[{item:'租赁权'},{item:'所有权'},{item:'使用权'},{item:'盈利收益'}] |
||||
|
}, |
||||
|
{ |
||||
|
name:'园林绿化', |
||||
|
condition:[{item:'租赁权'},{item:'所有权'},{item:'使用权'},{item:'盈利收益'}] |
||||
|
}, |
||||
|
{ |
||||
|
name:'船舶', |
||||
|
condition:[{item:'租赁权'},{item:'所有权'},{item:'使用权'},{item:'盈利收益'}] |
||||
|
}, |
||||
|
{ |
||||
|
name:'车辆', |
||||
|
condition:[{item:'租赁权'},{item:'所有权'},{item:'使用权'},{item:'盈利收益'}] |
||||
|
}, |
||||
|
{ |
||||
|
name:'工艺品', |
||||
|
condition:[{item:'租赁权'},{item:'所有权'},{item:'使用权'},{item:'盈利收益'}] |
||||
|
}, |
||||
|
{ |
||||
|
name:'家具电器', |
||||
|
condition:[{item:'租赁权'},{item:'所有权'},{item:'使用权'},{item:'盈利收益'}] |
||||
|
}, |
||||
|
{ |
||||
|
name:'其他有形实物', |
||||
|
condition:[{item:'租赁权'},{item:'所有权'},{item:'使用权'},{item:'盈利收益'}] |
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
goDetails(){ |
||||
|
this.$router.push('/ClassificationDetails') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.condition{ |
||||
|
margin-top: 30px; |
||||
|
} |
||||
|
.condition:first{ |
||||
|
margin-top: 0; |
||||
|
} |
||||
|
.condition_title{ |
||||
|
font-weight: bold; |
||||
|
font-size: 20px; |
||||
|
border-bottom: 2px solid #EAB1B1; |
||||
|
} |
||||
|
.condition_item{ |
||||
|
margin-top: 15px; |
||||
|
font-size: 16px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.condition_item_span{ |
||||
|
width: 150px; |
||||
|
display: inline-block; |
||||
|
color: #555555; |
||||
|
} |
||||
|
.condition_item_right{ |
||||
|
margin-left: 20px; |
||||
|
font-size: 12px; |
||||
|
color: #555555; |
||||
|
} |
||||
|
.condition_item_right>span{ |
||||
|
cursor: pointer; |
||||
|
display: inline-block; |
||||
|
margin-left: 15px; |
||||
|
} |
||||
|
.condition_item_right>span:first{ |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
.condition_item_right>span:hover{ |
||||
|
color: #C94C4C; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,192 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="asset"> |
||||
|
<div class="asset_banner"> |
||||
|
<el-carousel trigger="click" height="425px" ref="carousel"> |
||||
|
<el-carousel-item v-for="item in 4" :key="item"> |
||||
|
<img src="../../assets/img/header_logo.png" alt="" class="asset_banner_img"> |
||||
|
</el-carousel-item> |
||||
|
</el-carousel> |
||||
|
<div class="asset_banner1"> |
||||
|
<img src="../../assets/img/header_logo.png" alt="" v-for="(item,index) in 4" :key="item" @click="setActiveItem(index)"> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="asset_info"> |
||||
|
<p class="asset_info_title">东莞市芳华沉香园林景观有限公司20棵沉香树采集权（2年）</p> |
||||
|
<p class="asset_info_p"> |
||||
|
<span>评估价格：</span> |
||||
|
<span class="asset_info_span">¥ 99,980.00</span> |
||||
|
</p> |
||||
|
<p class="asset_info_p"> |
||||
|
<span>资产类型：</span> |
||||
|
<span class="asset_info_span1">房屋</span> |
||||
|
</p> |
||||
|
<p class="asset_info_p"> |
||||
|
<span>所在地：</span> |
||||
|
<span class="asset_info_span1">广东省东莞市虎门区</span> |
||||
|
</p> |
||||
|
<p class="asset_info_p"> |
||||
|
<span>交易方式：</span> |
||||
|
<span class="asset_info_span1">线下交易（物流配送）</span> |
||||
|
</p> |
||||
|
<p class="asset_info_p"> |
||||
|
<span>有效日期：</span> |
||||
|
<span class="asset_info_span1">2022年7月15日 14:00 前</span> |
||||
|
</p> |
||||
|
<p class="asset_info_p"> |
||||
|
<span>数量：</span> |
||||
|
<el-input v-model="number" placeholder="请输入标的所在地" class="seach_input" ></el-input> |
||||
|
<span class="asset_info_span2">棵（可购数量20棵）</span> |
||||
|
</p> |
||||
|
<p class="asset_info_p1">浏览记录 88次</p> |
||||
|
<div class="asset_info_button"> |
||||
|
<button class="purchase">立即购买</button> |
||||
|
<button class="collection">放入收藏</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="asset1"> |
||||
|
<div class="asset1_title"> |
||||
|
<div class="asset1_title_item">标的物介绍</div> |
||||
|
<div class="asset1_title_item">资产评估报告</div> |
||||
|
<div class="asset1_title_item">购买须知</div> |
||||
|
<div class="asset1_title_item">历史评价</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return{ |
||||
|
number:1 |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
setActiveItem(index){ |
||||
|
this.$refs.carousel.setActiveItem(index) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.asset{ |
||||
|
width: 100%; |
||||
|
border: 1px solid #CCCCCC; |
||||
|
height: 585px; |
||||
|
margin-top: 20px; |
||||
|
padding: 10px; |
||||
|
display: flex; |
||||
|
} |
||||
|
.asset1{ |
||||
|
width: 100%; |
||||
|
border: 1px solid #CCCCCC; |
||||
|
padding-bottom: 15px; |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
.asset_banner{ |
||||
|
width: 624px; |
||||
|
height: 425px; |
||||
|
} |
||||
|
.asset_banner_img{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.asset_banner1{ |
||||
|
width: 624px; |
||||
|
height: 108px; |
||||
|
margin-top: 20px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.asset_banner1 img{ |
||||
|
width: 147px; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.asset_info{ |
||||
|
margin-left: 20px; |
||||
|
padding-top: 15px; |
||||
|
} |
||||
|
.asset_info_title{ |
||||
|
font-size: 20px; |
||||
|
font-weight: bold; |
||||
|
margin-bottom: 60px; |
||||
|
} |
||||
|
.asset_info_p{ |
||||
|
font-size: 18px; |
||||
|
color: #7F7F7F; |
||||
|
margin-bottom: 25px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.asset_info_span{ |
||||
|
font-size: 36px; |
||||
|
color: #C94C4C; |
||||
|
} |
||||
|
.asset_info_span1{ |
||||
|
color: #333333; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.asset_info_span2{ |
||||
|
color: #333333; |
||||
|
} |
||||
|
.seach_input{ |
||||
|
width: 180px; |
||||
|
height: 40px; |
||||
|
border: 1px solid #CCCCCC; |
||||
|
margin-left: 15px; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
.seach_input>>>.el-input__inner{ |
||||
|
border: none; |
||||
|
padding-left: 5px; |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
.asset_info_p1{ |
||||
|
font-size: 14px; |
||||
|
color: #7F7F7F; |
||||
|
} |
||||
|
.asset_info_button{ |
||||
|
height: 50px; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
margin-top: 53px; |
||||
|
} |
||||
|
.asset_info_button button{ |
||||
|
width: 240px; |
||||
|
height: 100%; |
||||
|
border-radius: 2px; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
.purchase{ |
||||
|
color: white; |
||||
|
background-color: rgba(201, 76, 76, 1); |
||||
|
border: none; |
||||
|
} |
||||
|
.collection{ |
||||
|
background-color: rgba(233, 173, 133, 1); |
||||
|
border: 1px solid rgba(201, 76, 76, 1); |
||||
|
color: rgba(201, 76, 76, 1); |
||||
|
} |
||||
|
.asset1_title{ |
||||
|
height: 70px; |
||||
|
border-bottom: 1px solid #ADADAD; |
||||
|
display: flex; |
||||
|
} |
||||
|
.asset1_title_item{ |
||||
|
height: 100%; |
||||
|
width: 160px; |
||||
|
font-size: 22px; |
||||
|
color: #C94C4C; |
||||
|
border-right: 1px solid #ADADAD; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,227 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="breadcrumb"> |
||||
|
<el-breadcrumb separator-class="el-icon-arrow-right"> |
||||
|
<el-breadcrumb-item :to="{ path: '/AssetClassification' }">所以分类</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>活动管理</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>活动列表</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>活动详情</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="seach"> |
||||
|
<div class="seach_div"> |
||||
|
<div class="seach_item"> |
||||
|
<span>标的所在地</span> |
||||
|
<el-input v-model="query.input" placeholder="请输入标的所在地" class="seach_input" suffix-icon="el-icon-search"></el-input> |
||||
|
</div> |
||||
|
<div class="seach_item"> |
||||
|
<span>标的挂牌类型</span> |
||||
|
<el-select v-model="query.value" placeholder="全部" class="seach_input"> |
||||
|
<el-option key="1" label="全部" value="全部"></el-option> |
||||
|
<el-option key="2" label="协议" value="协议"></el-option> |
||||
|
<el-option key="3" label="拍卖" value="拍卖"></el-option> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<el-dropdown trigger="click"> |
||||
|
<span class="el-dropdown-link"> |
||||
|
排序<i class="el-icon-arrow-down el-icon--right"></i> |
||||
|
</span> |
||||
|
<el-dropdown-menu slot="dropdown"> |
||||
|
<el-dropdown-item>黄金糕</el-dropdown-item> |
||||
|
<el-dropdown-item>狮子头</el-dropdown-item> |
||||
|
<el-dropdown-item>螺蛳粉</el-dropdown-item> |
||||
|
<el-dropdown-item disabled>双皮奶</el-dropdown-item> |
||||
|
<el-dropdown-item divided>蚵仔煎</el-dropdown-item> |
||||
|
</el-dropdown-menu> |
||||
|
</el-dropdown> |
||||
|
</div> |
||||
|
|
||||
|
<div class="tabs"> |
||||
|
<div class="tabs_item" @click="goDetails"> |
||||
|
<img src="../../assets/img/header_logo.png" alt="" class="tabs_item_img"> |
||||
|
<div class="tabs_item_lable">有形实物资产</div> |
||||
|
<div class="tabs_item_content"> |
||||
|
<p class="tabs_item_content_title">资产标题名称字数多的显示…</p> |
||||
|
<p class="tabs_item_content_p"> |
||||
|
<span>评估价格： </span> |
||||
|
<span class="tabs_item_content_span">￥</span> |
||||
|
<span class="tabs_item_content_span tabs_item_content_span1">800,000.00</span> |
||||
|
</p> |
||||
|
<p class="tabs_item_content_p"> |
||||
|
<span>资产类型： </span> |
||||
|
<span class="tabs_item_content_span2 tabs_item_content_span3">房屋</span> |
||||
|
</p> |
||||
|
<p class="tabs_item_content_p"> |
||||
|
<span>所在地： </span> |
||||
|
<span class="tabs_item_content_span2 tabs_item_content_span3">深圳</span> |
||||
|
</p> |
||||
|
<p class="tabs_item_content_p"> |
||||
|
<span>有效日期： </span> |
||||
|
<span class="tabs_item_content_span2 ">2022年7月15日 14:00 前</span> |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
layout="total, prev, pager, next" |
||||
|
:current-page="query.page" |
||||
|
:page-size="query.limit" |
||||
|
:total="pageTotal" |
||||
|
@current-change="handlePageChange" |
||||
|
></el-pagination> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return{ |
||||
|
query:{ |
||||
|
page:1, |
||||
|
limit:10, |
||||
|
input:'', |
||||
|
value:'' |
||||
|
}, |
||||
|
pageTotal:50 |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
// 分页导航 |
||||
|
handlePageChange(val) { |
||||
|
this.$set(this.query, 'page', val); |
||||
|
// this.getData(); |
||||
|
}, |
||||
|
goDetails(){ |
||||
|
this.$router.push('/AssetDetails') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.seach{ |
||||
|
display: flex; |
||||
|
background-color: #FDF8F8; |
||||
|
border: 1px solid #E9B7B7; |
||||
|
height: 50px; |
||||
|
margin-top: 30px; |
||||
|
padding: 0 15px; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.seach_item{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 14px; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
.seach_input{ |
||||
|
width: 170px; |
||||
|
border: 1px solid #E9B7B7; |
||||
|
margin-left: 15px; |
||||
|
} |
||||
|
.seach_input>>>.el-input__inner{ |
||||
|
border: none; |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
.el-dropdown-link{ |
||||
|
color: #EAB1B1; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.tabs{ |
||||
|
margin-top: 20px; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.tabs_item{ |
||||
|
width: 283px; |
||||
|
height: 300px; |
||||
|
border: 1px solid #E9B7B7; |
||||
|
margin-bottom: 20px; |
||||
|
box-sizing: border-box; |
||||
|
position: relative; |
||||
|
border-radius: 5px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.tabs_item_img{ |
||||
|
width: 100%; |
||||
|
height: 170px; |
||||
|
border-radius: 5px 5px 0 0; |
||||
|
} |
||||
|
.tabs_item_lable{ |
||||
|
width: 100px; |
||||
|
height: 25px; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
font-size: 12px; |
||||
|
color: #FFFFFF; |
||||
|
background: #C94C4C; |
||||
|
z-index: 100; |
||||
|
line-height: 25px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.tabs_item_lable::after{ |
||||
|
content: ''; |
||||
|
border-top: 12.5px solid transparent; |
||||
|
border-left: 10px solid #C94C4C; |
||||
|
border-bottom: 12.5px solid transparent; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 100px; |
||||
|
} |
||||
|
.breadcrumb{ |
||||
|
margin-top: 30px; |
||||
|
} |
||||
|
.el-breadcrumb{ |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
.seach_div{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.tabs_item_content{ |
||||
|
width: 100%; |
||||
|
background-color: rgba(255, 255, 255, 0.5); |
||||
|
height: 150px; |
||||
|
margin-top: -40px; |
||||
|
/* padding: 10px 10px; */ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
box-sizing: border-box; |
||||
|
/* padding-bottom: 10px; */ |
||||
|
} |
||||
|
.tabs_item_content_title{ |
||||
|
width: 100%; |
||||
|
overflow: hidden; |
||||
|
text-overflow:ellipsis; |
||||
|
white-space: nowrap; |
||||
|
font-size: 14px; |
||||
|
background: rgba(238, 238, 238, 0.5); |
||||
|
box-sizing: border-box; |
||||
|
padding: 10px; |
||||
|
} |
||||
|
.tabs_item_content_p{ |
||||
|
color: #7F7F7F; |
||||
|
font-size: 12px; |
||||
|
padding-left: 10px; |
||||
|
} |
||||
|
.tabs_item_content_span{ |
||||
|
color: #C94C4C; |
||||
|
} |
||||
|
.tabs_item_content_span1{ |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
.tabs_item_content_span2{ |
||||
|
color: #333333; |
||||
|
} |
||||
|
.tabs_item_content_span3{ |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,165 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="seach"> |
||||
|
<div class="seach_item"> |
||||
|
<span>挂牌代码</span> |
||||
|
<el-input v-model="query.input" placeholder="请输入挂牌代码" class="seach_input"></el-input> |
||||
|
</div> |
||||
|
<div class="seach_item"> |
||||
|
<span>标的挂牌类型</span> |
||||
|
<el-select v-model="query.value" placeholder="全部" class="seach_input"> |
||||
|
<el-option key="1" label="全部" value="全部"></el-option> |
||||
|
<el-option key="2" label="协议" value="协议"></el-option> |
||||
|
<el-option key="3" label="拍卖" value="拍卖"></el-option> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
<div class="seach_item"> |
||||
|
<span>标的资产类型</span> |
||||
|
<el-input v-model="query.input" placeholder="请输入资产类型关键字" class="seach_input"></el-input> |
||||
|
</div> |
||||
|
<div class="seach_item"> |
||||
|
<span>标的名称</span> |
||||
|
<el-input v-model="query.input" placeholder="请输入标的名称关键字" class="seach_input"></el-input> |
||||
|
</div> |
||||
|
|
||||
|
<el-dropdown trigger="click"> |
||||
|
<span class="el-dropdown-link"> |
||||
|
排序<i class="el-icon-arrow-down el-icon--right"></i> |
||||
|
</span> |
||||
|
<el-dropdown-menu slot="dropdown"> |
||||
|
<el-dropdown-item>黄金糕</el-dropdown-item> |
||||
|
<el-dropdown-item>狮子头</el-dropdown-item> |
||||
|
<el-dropdown-item>螺蛳粉</el-dropdown-item> |
||||
|
<el-dropdown-item disabled>双皮奶</el-dropdown-item> |
||||
|
<el-dropdown-item divided>蚵仔煎</el-dropdown-item> |
||||
|
</el-dropdown-menu> |
||||
|
</el-dropdown> |
||||
|
</div> |
||||
|
|
||||
|
<div class="tabs"> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
header-cell-class-name="theader" |
||||
|
:header-cell-style="{background:'#F8E6E6 !important',color:'#C94C4C',height:'60px',fontSize:'14px'}" |
||||
|
style="width: 100%"> |
||||
|
<el-table-column |
||||
|
prop="date" |
||||
|
align="center" |
||||
|
label="挂牌代码"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
align="center" |
||||
|
label="托管方名称"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="address" |
||||
|
align="center" |
||||
|
label="标的名称"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="address" |
||||
|
align="center" |
||||
|
label="购买方名称"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="address" |
||||
|
align="center" |
||||
|
label="挂牌类型"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="address" |
||||
|
align="center" |
||||
|
label="交易总额"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="address" |
||||
|
align="center" |
||||
|
label="挂牌日期"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="address" |
||||
|
align="center" |
||||
|
label="成交日期"> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
layout="total, prev, pager, next" |
||||
|
:current-page="query.page" |
||||
|
:page-size="query.limit" |
||||
|
:total="pageTotal" |
||||
|
@current-change="handlePageChange" |
||||
|
></el-pagination> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return{ |
||||
|
query:{ |
||||
|
page:1, |
||||
|
limit:10, |
||||
|
input:'', |
||||
|
value:'' |
||||
|
}, |
||||
|
tableData:[], |
||||
|
pageTotal:50 |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
// 分页导航 |
||||
|
handlePageChange(val) { |
||||
|
this.$set(this.query, 'page', val); |
||||
|
// this.getData(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.seach{ |
||||
|
display: flex; |
||||
|
background-color: #FDF8F8; |
||||
|
border: 1px solid #E9B7B7; |
||||
|
height: 50px; |
||||
|
margin-top: 30px; |
||||
|
padding: 0 15px; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.seach_item{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 14px; |
||||
|
|
||||
|
} |
||||
|
.seach_input{ |
||||
|
width: 170px; |
||||
|
border: 1px solid #E9B7B7; |
||||
|
margin-left: 15px; |
||||
|
} |
||||
|
.seach_input>>>.el-input__inner{ |
||||
|
border: none; |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
.el-dropdown-link{ |
||||
|
color: #EAB1B1; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.tabs{ |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
.tabs>>> .el-table tr{ |
||||
|
border:1px solid #E9B7B7 !important |
||||
|
} |
||||
|
.tabs>>>.el-table td, .el-table th.is-leaf{ |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
.tabs>>>.el-table::before{ |
||||
|
height: 0; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,52 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="header"> |
||||
|
<span v-for="(item,index) in headerList" :key="index" :class="header_active==index ? 'header_active':''" @click="goPage(item.url,index)">{{item.name}}</span> |
||||
|
</div> |
||||
|
<div class="content1"> |
||||
|
<router-view></router-view> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return{ |
||||
|
headerList:[ |
||||
|
{name:'我的订单',url:'/Hoster'}, |
||||
|
{name:'我的资产',url:'/Hoster/myCollection'}, |
||||
|
], |
||||
|
header_active:0 |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
goPage(url,index){ |
||||
|
this.$router.push(url) |
||||
|
this.header_active=index |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.header{ |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
.header_active{ |
||||
|
color: #C94C4C; |
||||
|
border-bottom: 3px solid rgba(201, 76, 76, 1); |
||||
|
} |
||||
|
.header span{ |
||||
|
display: inline-block; |
||||
|
padding: 0 10px; |
||||
|
cursor: pointer; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
.header span:hover{ |
||||
|
color: #C94C4C; |
||||
|
} |
||||
|
.content1{ |
||||
|
margin-top: 30px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,213 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="header"> |
||||
|
<span v-for="(item,index) in headerList" :key="index" :class="header_active==index ? 'header_active':''" @click="goPage(item.url)">{{item.name}}</span> |
||||
|
</div> |
||||
|
<div class="seach"> |
||||
|
<div class="seach_item"> |
||||
|
<el-input v-model="query.input" placeholder="请输入资产名称/资产编号或托管方名称" class="seach_input" suffix-icon="el-icon-search"></el-input> |
||||
|
</div> |
||||
|
<div class="seach_item"> |
||||
|
<el-date-picker |
||||
|
v-model="query.time" |
||||
|
class="seach_input1" |
||||
|
type="date" |
||||
|
placeholder="选择日期"> |
||||
|
</el-date-picker> |
||||
|
</div> |
||||
|
<div class="seach_item"> |
||||
|
<span class="el-dropdown-link"> |
||||
|
展开更多筛选条件 |
||||
|
<i class="el-icon-arrow-down el-icon--right"></i> |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="body"> |
||||
|
<div class="order_item" v-for="(item,index) in 4" :key="index"> |
||||
|
<div class="order_item_id">1</div> |
||||
|
<img src="../../../assets/img/header_logo.png" alt="" class="order_item_img"> |
||||
|
<div class="order_item_info"> |
||||
|
<div class="order_item_info_title"> |
||||
|
<span>2021-07-13 18:30:25</span> |
||||
|
<span>订单编号：15852458965124</span> |
||||
|
<span>托管方：东莞市芳华沉香园林景观有限公司</span> |
||||
|
<span>资产编号：GM-BZ-165254</span> |
||||
|
</div> |
||||
|
<div class="order_item_info_content"> |
||||
|
<div class="order_item_info_content_left"> |
||||
|
<p>东莞市芳华沉香园林景观有限公司20棵沉香树采集权（2年）</p> |
||||
|
<p>运费：¥ 80.00</p> |
||||
|
<p>服务费：¥ 1,000.00</p> |
||||
|
</div> |
||||
|
<div class="order_item_info_content_price"> |
||||
|
<p class="order_item_info_content_price_p">¥ 30,000.00</p> |
||||
|
<p>单价：¥ 10,000.00</p> |
||||
|
</div> |
||||
|
<div class="order_item_id">数量：3</div> |
||||
|
<div class="order_item_info_content_all">交易总额：¥ 31,080.00</div> |
||||
|
<div>交易状态：已完成</div> |
||||
|
<div class="order_item_info_content_operation"> |
||||
|
<p>订单详情</p> |
||||
|
<p>在线联系</p> |
||||
|
<p>查看评价</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
layout="total, prev, pager, next" |
||||
|
:current-page="query.page" |
||||
|
:page-size="query.limit" |
||||
|
:total="pageTotal" |
||||
|
@current-change="handlePageChange" |
||||
|
></el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return{ |
||||
|
query:{ |
||||
|
input:'', |
||||
|
time:'', |
||||
|
page:1, |
||||
|
limit:10, |
||||
|
}, |
||||
|
pageTotal:50, |
||||
|
|
||||
|
headerList:[ |
||||
|
{name:'全部订单',url:''}, |
||||
|
{name:'代付款',url:''}, |
||||
|
{name:'待交付',url:''}, |
||||
|
{name:'待评价',url:''}, |
||||
|
{name:'已完成',url:''}, |
||||
|
], |
||||
|
header_active:0 |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
// 分页导航 |
||||
|
handlePageChange(val) { |
||||
|
this.$set(this.query, 'page', val); |
||||
|
// this.getData(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.header{ |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.header_active{ |
||||
|
color: rgba(201, 76, 76, 0.698039215686274); |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.header span{ |
||||
|
display: inline-block; |
||||
|
padding: 0 10px; |
||||
|
cursor: pointer; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
.header span:hover{ |
||||
|
color: rgba(201, 76, 76, 0.698039215686274); |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.seach{ |
||||
|
display: flex; |
||||
|
background-color: #FDF8F8; |
||||
|
border: 1px solid #E9B7B7; |
||||
|
height: 50px; |
||||
|
margin-top: 30px; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.seach_item{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 14px; |
||||
|
margin-left: 20px; |
||||
|
|
||||
|
} |
||||
|
.seach_input{ |
||||
|
width: 260px; |
||||
|
border: 1px solid #E9B7B7; |
||||
|
} |
||||
|
.seach_input1{ |
||||
|
border: 1px solid #E9B7B7; |
||||
|
} |
||||
|
.seach_input1>>>.el-input__inner{ |
||||
|
border: none; |
||||
|
} |
||||
|
.seach_input>>>.el-input__inner{ |
||||
|
border: none; |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
.el-dropdown-link{ |
||||
|
color: #EAB1B1; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.body{ |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
.order_item{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 14px; |
||||
|
padding: 15px 0; |
||||
|
} |
||||
|
.order_item:nth-child(2n+2){ |
||||
|
background-color: #FDF8F8; |
||||
|
} |
||||
|
.order_item_id{ |
||||
|
padding: 0 15px; |
||||
|
} |
||||
|
.order_item_img{ |
||||
|
width: 100px; |
||||
|
height: 100px; |
||||
|
margin: 0 15px; |
||||
|
} |
||||
|
.order_item_info_title{ |
||||
|
display: flex; |
||||
|
font-size: 14px; |
||||
|
color: #7F7F7F; |
||||
|
align-items: center; |
||||
|
width: 1020px; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.order_item_info_content{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
width: 1020px; |
||||
|
font-size: 14px; |
||||
|
justify-content: space-between; |
||||
|
margin-top: 5px; |
||||
|
color: #333333; |
||||
|
} |
||||
|
.order_item_info_content_left p{ |
||||
|
width: 300px; |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
.order_item_info_content_price{ |
||||
|
/* margin:0 30px; */ |
||||
|
text-align: center; |
||||
|
} |
||||
|
.order_item_info_content_price_p{ |
||||
|
text-decoration: line-through; |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
.order_item_info_content_all{ |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.order_item_info_content_operation{ |
||||
|
color: #555555; |
||||
|
} |
||||
|
.order_item_info_content_operation p{ |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,238 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="seach"> |
||||
|
<div class="seach_item"> |
||||
|
<span>标的所在地</span> |
||||
|
<el-input v-model="query.input" placeholder="请输入标的所在地" class="seach_input" suffix-icon="el-icon-search"></el-input> |
||||
|
</div> |
||||
|
<div class="seach_item"> |
||||
|
<span>标的挂牌类型</span> |
||||
|
<el-select v-model="query.value" placeholder="全部" class="seach_input"> |
||||
|
<el-option key="1" label="全部" value="全部"></el-option> |
||||
|
<el-option key="2" label="协议" value="协议"></el-option> |
||||
|
<el-option key="3" label="拍卖" value="拍卖"></el-option> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
<div class="seach_item"> |
||||
|
<span>标的资产类型</span> |
||||
|
<el-input v-model="query.input" placeholder="请输入资产类型关键字" class="seach_input"></el-input> |
||||
|
</div> |
||||
|
<div class="seach_item"> |
||||
|
<span>标的名称</span> |
||||
|
<el-input v-model="query.input" placeholder="请输入标的名称关键字" class="seach_input"></el-input> |
||||
|
</div> |
||||
|
|
||||
|
<el-dropdown trigger="click"> |
||||
|
<span class="el-dropdown-link"> |
||||
|
排序<i class="el-icon-arrow-down el-icon--right"></i> |
||||
|
</span> |
||||
|
<el-dropdown-menu slot="dropdown"> |
||||
|
<el-dropdown-item>黄金糕</el-dropdown-item> |
||||
|
<el-dropdown-item>狮子头</el-dropdown-item> |
||||
|
<el-dropdown-item>螺蛳粉</el-dropdown-item> |
||||
|
<el-dropdown-item disabled>双皮奶</el-dropdown-item> |
||||
|
<el-dropdown-item divided>蚵仔煎</el-dropdown-item> |
||||
|
</el-dropdown-menu> |
||||
|
</el-dropdown> |
||||
|
</div> |
||||
|
|
||||
|
<div class="tabs"> |
||||
|
<div class="tabs_item"> |
||||
|
<img src="../../assets/img/header_logo.png" alt="" class="tabs_item_img"> |
||||
|
<div class="tabs_item_right"> |
||||
|
<p class="tabs_item_right_p">910056</p> |
||||
|
<p class="tabs_item_right_p">东莞市大岭山镇大环村莞香非物质文化遗产保护园内在种植沉香树的采集</p> |
||||
|
<div class="tabs_item_right_div"> |
||||
|
本次托管资产为：沉香树采集权的财产权。现代香结评定，依品质优劣可分司登记。最低品为白木香。此为香门除开，第一…. |
||||
|
</div> |
||||
|
<p class="tabs_item_right_p1">2021年7月16日 10:32:21</p> |
||||
|
<p class="tabs_item_right_p2" @click="goDetails">点击详情 ></p> |
||||
|
<p class="tabs_item_right_p3"> |
||||
|
<span class="tabs_item_right_span">托管方 </span> |
||||
|
<span>东莞市尚正堂莞香种植有限公司</span> |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tabs_item"> |
||||
|
<img src="../../assets/img/header_logo.png" alt="" class="tabs_item_img"> |
||||
|
<div class="tabs_item_right"> |
||||
|
<p class="tabs_item_right_p">910056</p> |
||||
|
<p class="tabs_item_right_p">东莞市大岭山镇大环村莞香非物质文化遗产保护园内在种植沉香树的采集</p> |
||||
|
<div class="tabs_item_right_div"> |
||||
|
本次托管资产为：沉香树采集权的财产权。现代香结评定，依品质优劣可分司登记。最低品为白木香。此为香门除开，第一…. |
||||
|
</div> |
||||
|
<p class="tabs_item_right_p1">2021年7月16日 10:32:21</p> |
||||
|
<p class="tabs_item_right_p2">点击详情 ></p> |
||||
|
<p class="tabs_item_right_p3"> |
||||
|
<span class="tabs_item_right_span">托管方 </span> |
||||
|
<span>东莞市尚正堂莞香种植有限公司</span> |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tabs_item"> |
||||
|
<img src="../../assets/img/header_logo.png" alt="" class="tabs_item_img"> |
||||
|
<div class="tabs_item_right"> |
||||
|
<p class="tabs_item_right_p">910056</p> |
||||
|
<p class="tabs_item_right_p">东莞市大岭山镇大环村莞香非物质文化遗产保护园内在种植沉香树的采集</p> |
||||
|
<div class="tabs_item_right_div"> |
||||
|
本次托管资产为：沉香树采集权的财产权。现代香结评定，依品质优劣可分司登记。最低品为白木香。此为香门除开，第一…. |
||||
|
</div> |
||||
|
<p class="tabs_item_right_p1">2021年7月16日 10:32:21</p> |
||||
|
<p class="tabs_item_right_p2">点击详情 ></p> |
||||
|
<p class="tabs_item_right_p3"> |
||||
|
<span class="tabs_item_right_span">托管方 </span> |
||||
|
<span>东莞市尚正堂莞香种植有限公司</span> |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tabs_item"> |
||||
|
<img src="../../assets/img/header_logo.png" alt="" class="tabs_item_img"> |
||||
|
<div class="tabs_item_right"> |
||||
|
<p class="tabs_item_right_p">910056</p> |
||||
|
<p class="tabs_item_right_p">东莞市大岭山镇大环村莞香非物质文化遗产保护园内在种植沉香树的采集</p> |
||||
|
<div class="tabs_item_right_div"> |
||||
|
本次托管资产为：沉香树采集权的财产权。现代香结评定，依品质优劣可分司登记。最低品为白木香。此为香门除开，第一…. |
||||
|
</div> |
||||
|
<p class="tabs_item_right_p1">2021年7月16日 10:32:21</p> |
||||
|
<p class="tabs_item_right_p2">点击详情 ></p> |
||||
|
<p class="tabs_item_right_p3"> |
||||
|
<span class="tabs_item_right_span">托管方 </span> |
||||
|
<span>东莞市尚正堂莞香种植有限公司</span> |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
layout="total, prev, pager, next" |
||||
|
:current-page="query.page" |
||||
|
:page-size="query.limit" |
||||
|
:total="pageTotal" |
||||
|
@current-change="handlePageChange" |
||||
|
></el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return{ |
||||
|
query:{ |
||||
|
page:1, |
||||
|
limit:10, |
||||
|
input:'', |
||||
|
value:'' |
||||
|
}, |
||||
|
pageTotal:50 |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
goDetails(){ |
||||
|
this.$router.push('/NoticeDetails') |
||||
|
}, |
||||
|
// 分页导航 |
||||
|
handlePageChange(val) { |
||||
|
this.$set(this.query, 'page', val); |
||||
|
// this.getData(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.seach{ |
||||
|
display: flex; |
||||
|
background-color: #FDF8F8; |
||||
|
border: 1px solid #E9B7B7; |
||||
|
height: 50px; |
||||
|
margin-top: 30px; |
||||
|
padding: 0 15px; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.seach_item{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 14px; |
||||
|
|
||||
|
} |
||||
|
.seach_input{ |
||||
|
width: 170px; |
||||
|
border: 1px solid #E9B7B7; |
||||
|
margin-left: 15px; |
||||
|
} |
||||
|
.seach_input>>>.el-input__inner{ |
||||
|
border: none; |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
.el-dropdown-link{ |
||||
|
color: #EAB1B1; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.tabs{ |
||||
|
margin-top: 20px; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.tabs_item{ |
||||
|
width: 583px; |
||||
|
height: 232px; |
||||
|
background-color: #FDF8F8; |
||||
|
border: 1px solid #E9B7B7; |
||||
|
margin-bottom: 20px; |
||||
|
box-sizing: border-box; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding-left: 10px; |
||||
|
} |
||||
|
.tabs_item:nth-child(2n){ |
||||
|
background: #F5FAFA; |
||||
|
border: 1px solid #99CCCC; |
||||
|
} |
||||
|
.tabs_item_img{ |
||||
|
width: 201px; |
||||
|
height: 201px; |
||||
|
margin-right: 15px; |
||||
|
} |
||||
|
.tabs_item_right{ |
||||
|
height: 201px; |
||||
|
} |
||||
|
.tabs_item_right_p{ |
||||
|
font-size: 18px; |
||||
|
color: #C94C4C; |
||||
|
width: 324px; |
||||
|
overflow: hidden; /*文本超出隐藏*/ |
||||
|
display:-webkit-box; /*盒子模型微弹性伸缩模型*/ |
||||
|
-webkit-box-orient: vertical;/*伸缩盒子的子元素垂直排列*/ |
||||
|
-webkit-line-clamp: 2; /*文本显示3行*/ |
||||
|
} |
||||
|
.tabs_item_right_div{ |
||||
|
font-size: 14px; |
||||
|
color: #7F7F7F; |
||||
|
width: 324px; |
||||
|
overflow: hidden; /*文本超出隐藏*/ |
||||
|
display:-webkit-box; /*盒子模型微弹性伸缩模型*/ |
||||
|
-webkit-box-orient: vertical;/*伸缩盒子的子元素垂直排列*/ |
||||
|
-webkit-line-clamp: 3; /*文本显示3行*/ |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
.tabs_item_right_p1{ |
||||
|
font-size: 14px; |
||||
|
color: #7F7F7F; |
||||
|
text-align: right; |
||||
|
} |
||||
|
.tabs_item_right_p2{ |
||||
|
font-size: 14px; |
||||
|
color: #C94C4C; |
||||
|
cursor: pointer; |
||||
|
margin: 5px 0; |
||||
|
} |
||||
|
.tabs_item_right_p3{ |
||||
|
font-size: 14px; |
||||
|
color: #C94C4C; |
||||
|
} |
||||
|
.tabs_item_right_span{ |
||||
|
color: #7F7F7F; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,182 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="breadcrumb"> |
||||
|
<el-breadcrumb separator-class="el-icon-arrow-right"> |
||||
|
<el-breadcrumb-item :to="{ path: '/Listing' }">挂牌公告</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>公告详情</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
|
||||
|
<div class="tabs"> |
||||
|
<div class="detalie"> |
||||
|
<div class="detalie_title">所含标的物</div> |
||||
|
<div class="detalie_content"> |
||||
|
<div class="tabs_item" @click="goDetails"> |
||||
|
<img src="../../assets/img/header_logo.png" alt="" class="tabs_item_img"> |
||||
|
<div class="tabs_item_lable">有形实物资产</div> |
||||
|
<div class="tabs_item_content"> |
||||
|
<p class="tabs_item_content_title">资产标题名称字数多的显示…</p> |
||||
|
<p class="tabs_item_content_p"> |
||||
|
<span>评估价格： </span> |
||||
|
<span class="tabs_item_content_span">￥</span> |
||||
|
<span class="tabs_item_content_span tabs_item_content_span1">800,000.00</span> |
||||
|
</p> |
||||
|
<p class="tabs_item_content_p"> |
||||
|
<span>资产类型： </span> |
||||
|
<span class="tabs_item_content_span2 tabs_item_content_span3">房屋</span> |
||||
|
</p> |
||||
|
<p class="tabs_item_content_p"> |
||||
|
<span>所在地： </span> |
||||
|
<span class="tabs_item_content_span2 tabs_item_content_span3">深圳</span> |
||||
|
</p> |
||||
|
<p class="tabs_item_content_p"> |
||||
|
<span>有效日期： </span> |
||||
|
<span class="tabs_item_content_span2 ">2022年7月15日 14:00 前</span> |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="detalie detalie1"> |
||||
|
<div class="detalie_title">公告内容</div> |
||||
|
<div class="detalie_content"> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return{ |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
goDetails(){ |
||||
|
this.$router.push('/AssetDetails') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.tabs{ |
||||
|
margin-top: 20px; |
||||
|
/* display: flex; */ |
||||
|
border: 1px solid #E9B7B7; |
||||
|
} |
||||
|
.detalie{ |
||||
|
display: flex; |
||||
|
min-height: 360px; |
||||
|
} |
||||
|
.detalie1{ |
||||
|
border-top: 1px solid #E9B7B7; |
||||
|
} |
||||
|
.detalie_title{ |
||||
|
width: 110px; |
||||
|
height: 360px; |
||||
|
background: #F6E0E0; |
||||
|
font-size: 18px; |
||||
|
color: #C94C4C; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-weight: bold; |
||||
|
writing-mode: vertical-lr |
||||
|
} |
||||
|
.detalie_content{ |
||||
|
background: #FDF8F8; |
||||
|
padding: 20px 20px; |
||||
|
width: 1088px; |
||||
|
box-sizing: border-box; |
||||
|
border-left: 1px solid #E9B7B7; |
||||
|
} |
||||
|
.tabs_item{ |
||||
|
width: 283px; |
||||
|
height: 300px; |
||||
|
border: 1px solid #E9B7B7; |
||||
|
margin-bottom: 20px; |
||||
|
box-sizing: border-box; |
||||
|
position: relative; |
||||
|
border-radius: 5px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.tabs_item_img{ |
||||
|
width: 100%; |
||||
|
height: 170px; |
||||
|
border-radius: 5px 5px 0 0; |
||||
|
} |
||||
|
.tabs_item_lable{ |
||||
|
width: 100px; |
||||
|
height: 25px; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
font-size: 12px; |
||||
|
color: #FFFFFF; |
||||
|
background: #C94C4C; |
||||
|
z-index: 100; |
||||
|
line-height: 25px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.tabs_item_lable::after{ |
||||
|
content: ''; |
||||
|
border-top: 12.5px solid transparent; |
||||
|
border-left: 10px solid #C94C4C; |
||||
|
border-bottom: 12.5px solid transparent; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 100px; |
||||
|
} |
||||
|
.breadcrumb{ |
||||
|
margin-top: 30px; |
||||
|
} |
||||
|
.el-breadcrumb{ |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
.seach_div{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.tabs_item_content{ |
||||
|
width: 100%; |
||||
|
background-color: rgba(255, 255, 255, 0.5); |
||||
|
height: 150px; |
||||
|
margin-top: -40px; |
||||
|
/* padding: 10px 10px; */ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
box-sizing: border-box; |
||||
|
/* padding-bottom: 10px; */ |
||||
|
} |
||||
|
.tabs_item_content_title{ |
||||
|
width: 100%; |
||||
|
overflow: hidden; |
||||
|
text-overflow:ellipsis; |
||||
|
white-space: nowrap; |
||||
|
font-size: 14px; |
||||
|
background: rgba(238, 238, 238, 0.5); |
||||
|
box-sizing: border-box; |
||||
|
padding: 10px; |
||||
|
} |
||||
|
.tabs_item_content_p{ |
||||
|
color: #7F7F7F; |
||||
|
font-size: 12px; |
||||
|
padding-left: 10px; |
||||
|
} |
||||
|
.tabs_item_content_span{ |
||||
|
color: #C94C4C; |
||||
|
} |
||||
|
.tabs_item_content_span1{ |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
.tabs_item_content_span2{ |
||||
|
color: #333333; |
||||
|
} |
||||
|
.tabs_item_content_span3{ |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,54 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="header"> |
||||
|
<span v-for="(item,index) in headerList" :key="index" :class="header_active==index ? 'header_active':''" @click="goPage(item.url,index)">{{item.name}}</span> |
||||
|
</div> |
||||
|
<div class="content1"> |
||||
|
<router-view></router-view> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return{ |
||||
|
headerList:[ |
||||
|
{name:'我的订单',url:'/Purchaser'}, |
||||
|
{name:'我的收藏',url:'/Purchaser/myCollection'}, |
||||
|
{name:'在线学习',url:'/Purchaser/study'}, |
||||
|
{name:'学习成果',url:'/Purchaser/achievements'} |
||||
|
], |
||||
|
header_active:0 |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
goPage(url,index){ |
||||
|
this.$router.push(url) |
||||
|
this.header_active=index |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.header{ |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
.header_active{ |
||||
|
color: #C94C4C; |
||||
|
border-bottom: 3px solid rgba(201, 76, 76, 1); |
||||
|
} |
||||
|
.header span{ |
||||
|
display: inline-block; |
||||
|
padding: 0 10px; |
||||
|
cursor: pointer; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
.header span:hover{ |
||||
|
color: #C94C4C; |
||||
|
} |
||||
|
.content1{ |
||||
|
margin-top: 30px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,61 @@ |
|||||
|
<template> |
||||
|
<div class="body"> |
||||
|
<div class="title">荣誉墙</div> |
||||
|
<div class="achievements"> |
||||
|
<div class="achievements_item" v-for="(item,index) in 7" :key="index"> |
||||
|
<img src="../../../assets/img/header_logo.png" alt="" class="achievements_item_img"> |
||||
|
<p class="achievements_item_p">《人才产权管理》第一章</p> |
||||
|
<p>考试成绩：100 分</p> |
||||
|
<p>成果日期：2021-07-13</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return{ |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.body{ |
||||
|
margin-top: 40px; |
||||
|
} |
||||
|
.title{ |
||||
|
text-align: center; |
||||
|
font-size: 34px; |
||||
|
color: #C94C4C; |
||||
|
font-weight: bold; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
.achievements{ |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
.achievements_item{ |
||||
|
width: 200px; |
||||
|
height: 240px; |
||||
|
margin-bottom: 20px; |
||||
|
background: url('../../../assets/img/achievements_bg.png') no-repeat ; |
||||
|
background-size: 100% 100%; |
||||
|
text-align: center; |
||||
|
padding-top: 10px; |
||||
|
color: #EAB1B1; |
||||
|
font-size: 12px; |
||||
|
margin-right: 40px; |
||||
|
} |
||||
|
.achievements_item >p{ |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
.achievements_item_img{ |
||||
|
width: 132px; |
||||
|
height: 132px; |
||||
|
} |
||||
|
.achievements_item_p{ |
||||
|
font-size: 14px; |
||||
|
margin: 15px 0 !important; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,203 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="seach"> |
||||
|
<div class="seach_item"> |
||||
|
<el-input v-model="query.input" placeholder="请输入资产名称/资产编号或托管方名称" class="seach_input" suffix-icon="el-icon-search"></el-input> |
||||
|
</div> |
||||
|
<div class="seach_item"> |
||||
|
<el-date-picker |
||||
|
v-model="query.time" |
||||
|
class="seach_input1" |
||||
|
type="date" |
||||
|
placeholder="选择日期"> |
||||
|
</el-date-picker> |
||||
|
</div> |
||||
|
<div class="seach_item"> |
||||
|
<span class="el-dropdown-link"> |
||||
|
展开更多筛选条件 |
||||
|
<i class="el-icon-arrow-down el-icon--right"></i> |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="body"> |
||||
|
<div class="order_item" v-for="(item,index) in 4" :key="index"> |
||||
|
<div class="order_item_id">1</div> |
||||
|
<img src="../../../assets/img/header_logo.png" alt="" class="order_item_img"> |
||||
|
<div class="order_item_info"> |
||||
|
<div class="order_item_info_title"> |
||||
|
<span>2021-07-13 18:30:25</span> |
||||
|
<span>订单编号：15852458965124</span> |
||||
|
<span>资产编号：GM-BZ-165254</span> |
||||
|
</div> |
||||
|
<div class="order_item_info_content"> |
||||
|
<div class="order_item_info_content_left"> |
||||
|
<p>东莞市芳华沉香园林景观有限公司20棵沉香树采集权（2年）</p> |
||||
|
<p>运费：¥ 80.00</p> |
||||
|
<p>服务费：¥ 1,000.00</p> |
||||
|
</div> |
||||
|
<div class="order_item_info_content_price"> |
||||
|
<p class="order_item_info_content_price_p">¥ 30,000.00</p> |
||||
|
<p>单价：¥ 10,000.00</p> |
||||
|
</div> |
||||
|
<div class="order_item_id">数量：3</div> |
||||
|
<div class="order_item_info_content_all">交易总额：¥ 31,080.00</div> |
||||
|
<div>交易状态：已完成</div> |
||||
|
<div class="order_item_info_content_operation"> |
||||
|
<p>订单详情</p> |
||||
|
<p>在线联系</p> |
||||
|
<p>查看评价</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
layout="total, prev, pager, next" |
||||
|
:current-page="query.page" |
||||
|
:page-size="query.limit" |
||||
|
:total="pageTotal" |
||||
|
@current-change="handlePageChange" |
||||
|
></el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return{ |
||||
|
query:{ |
||||
|
input:'', |
||||
|
time:'', |
||||
|
page:1, |
||||
|
limit:10, |
||||
|
}, |
||||
|
pageTotal:50, |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
// 分页导航 |
||||
|
handlePageChange(val) { |
||||
|
this.$set(this.query, 'page', val); |
||||
|
// this.getData(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.header{ |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.header_active{ |
||||
|
color: rgba(201, 76, 76, 0.698039215686274); |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.header span{ |
||||
|
display: inline-block; |
||||
|
padding: 0 10px; |
||||
|
cursor: pointer; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
.header span:hover{ |
||||
|
color: rgba(201, 76, 76, 0.698039215686274); |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.seach{ |
||||
|
display: flex; |
||||
|
background-color: #FDF8F8; |
||||
|
border: 1px solid #E9B7B7; |
||||
|
height: 50px; |
||||
|
margin-top: 30px; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.seach_item{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 14px; |
||||
|
margin-left: 20px; |
||||
|
|
||||
|
} |
||||
|
.seach_input{ |
||||
|
width: 260px; |
||||
|
border: 1px solid #E9B7B7; |
||||
|
} |
||||
|
.seach_input1{ |
||||
|
border: 1px solid #E9B7B7; |
||||
|
} |
||||
|
.seach_input1>>>.el-input__inner{ |
||||
|
border: none; |
||||
|
} |
||||
|
.seach_input>>>.el-input__inner{ |
||||
|
border: none; |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
.el-dropdown-link{ |
||||
|
color: #EAB1B1; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.body{ |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
.order_item{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 14px; |
||||
|
padding: 15px 0; |
||||
|
} |
||||
|
.order_item:nth-child(2n+2){ |
||||
|
background-color: #FDF8F8; |
||||
|
} |
||||
|
.order_item_id{ |
||||
|
padding: 0 15px; |
||||
|
} |
||||
|
.order_item_img{ |
||||
|
width: 100px; |
||||
|
height: 100px; |
||||
|
margin: 0 15px; |
||||
|
} |
||||
|
.order_item_info_title{ |
||||
|
display: flex; |
||||
|
font-size: 14px; |
||||
|
color: #7F7F7F; |
||||
|
align-items: center; |
||||
|
width: 1020px; |
||||
|
} |
||||
|
.order_item_info_title span{ |
||||
|
display: inline-block; |
||||
|
margin-right: 50px; |
||||
|
} |
||||
|
.order_item_info_content{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
width: 1020px; |
||||
|
font-size: 14px; |
||||
|
justify-content: space-between; |
||||
|
margin-top: 5px; |
||||
|
color: #333333; |
||||
|
} |
||||
|
.order_item_info_content_left p{ |
||||
|
width: 300px; |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
.order_item_info_content_price{ |
||||
|
/* margin:0 30px; */ |
||||
|
text-align: center; |
||||
|
} |
||||
|
.order_item_info_content_price_p{ |
||||
|
text-decoration: line-through; |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
.order_item_info_content_all{ |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.order_item_info_content_operation{ |
||||
|
color: #555555; |
||||
|
} |
||||
|
.order_item_info_content_operation p{ |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,213 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="header"> |
||||
|
<span v-for="(item,index) in headerList" :key="index" :class="header_active==index ? 'header_active':''" @click="goPage(item.url)">{{item.name}}</span> |
||||
|
</div> |
||||
|
<div class="seach"> |
||||
|
<div class="seach_item"> |
||||
|
<el-input v-model="query.input" placeholder="请输入资产名称/资产编号或托管方名称" class="seach_input" suffix-icon="el-icon-search"></el-input> |
||||
|
</div> |
||||
|
<div class="seach_item"> |
||||
|
<el-date-picker |
||||
|
v-model="query.time" |
||||
|
class="seach_input1" |
||||
|
type="date" |
||||
|
placeholder="选择日期"> |
||||
|
</el-date-picker> |
||||
|
</div> |
||||
|
<div class="seach_item"> |
||||
|
<span class="el-dropdown-link"> |
||||
|
展开更多筛选条件 |
||||
|
<i class="el-icon-arrow-down el-icon--right"></i> |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="body"> |
||||
|
<div class="order_item" v-for="(item,index) in 4" :key="index"> |
||||
|
<div class="order_item_id">1</div> |
||||
|
<img src="../../../assets/img/header_logo.png" alt="" class="order_item_img"> |
||||
|
<div class="order_item_info"> |
||||
|
<div class="order_item_info_title"> |
||||
|
<span>2021-07-13 18:30:25</span> |
||||
|
<span>订单编号：15852458965124</span> |
||||
|
<span>托管方：东莞市芳华沉香园林景观有限公司</span> |
||||
|
<span>资产编号：GM-BZ-165254</span> |
||||
|
</div> |
||||
|
<div class="order_item_info_content"> |
||||
|
<div class="order_item_info_content_left"> |
||||
|
<p>东莞市芳华沉香园林景观有限公司20棵沉香树采集权（2年）</p> |
||||
|
<p>运费：¥ 80.00</p> |
||||
|
<p>服务费：¥ 1,000.00</p> |
||||
|
</div> |
||||
|
<div class="order_item_info_content_price"> |
||||
|
<p class="order_item_info_content_price_p">¥ 30,000.00</p> |
||||
|
<p>单价：¥ 10,000.00</p> |
||||
|
</div> |
||||
|
<div class="order_item_id">数量：3</div> |
||||
|
<div class="order_item_info_content_all">交易总额：¥ 31,080.00</div> |
||||
|
<div>交易状态：已完成</div> |
||||
|
<div class="order_item_info_content_operation"> |
||||
|
<p>订单详情</p> |
||||
|
<p>在线联系</p> |
||||
|
<p>查看评价</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
layout="total, prev, pager, next" |
||||
|
:current-page="query.page" |
||||
|
:page-size="query.limit" |
||||
|
:total="pageTotal" |
||||
|
@current-change="handlePageChange" |
||||
|
></el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return{ |
||||
|
query:{ |
||||
|
input:'', |
||||
|
time:'', |
||||
|
page:1, |
||||
|
limit:10, |
||||
|
}, |
||||
|
pageTotal:50, |
||||
|
|
||||
|
headerList:[ |
||||
|
{name:'全部订单',url:''}, |
||||
|
{name:'代付款',url:''}, |
||||
|
{name:'待交付',url:''}, |
||||
|
{name:'待评价',url:''}, |
||||
|
{name:'已完成',url:''}, |
||||
|
], |
||||
|
header_active:0 |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
// 分页导航 |
||||
|
handlePageChange(val) { |
||||
|
this.$set(this.query, 'page', val); |
||||
|
// this.getData(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.header{ |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.header_active{ |
||||
|
color: rgba(201, 76, 76, 0.698039215686274); |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.header span{ |
||||
|
display: inline-block; |
||||
|
padding: 0 10px; |
||||
|
cursor: pointer; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
.header span:hover{ |
||||
|
color: rgba(201, 76, 76, 0.698039215686274); |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.seach{ |
||||
|
display: flex; |
||||
|
background-color: #FDF8F8; |
||||
|
border: 1px solid #E9B7B7; |
||||
|
height: 50px; |
||||
|
margin-top: 30px; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.seach_item{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 14px; |
||||
|
margin-left: 20px; |
||||
|
|
||||
|
} |
||||
|
.seach_input{ |
||||
|
width: 260px; |
||||
|
border: 1px solid #E9B7B7; |
||||
|
} |
||||
|
.seach_input1{ |
||||
|
border: 1px solid #E9B7B7; |
||||
|
} |
||||
|
.seach_input1>>>.el-input__inner{ |
||||
|
border: none; |
||||
|
} |
||||
|
.seach_input>>>.el-input__inner{ |
||||
|
border: none; |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
.el-dropdown-link{ |
||||
|
color: #EAB1B1; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.body{ |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
.order_item{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 14px; |
||||
|
padding: 15px 0; |
||||
|
} |
||||
|
.order_item:nth-child(2n+2){ |
||||
|
background-color: #FDF8F8; |
||||
|
} |
||||
|
.order_item_id{ |
||||
|
padding: 0 15px; |
||||
|
} |
||||
|
.order_item_img{ |
||||
|
width: 100px; |
||||
|
height: 100px; |
||||
|
margin: 0 15px; |
||||
|
} |
||||
|
.order_item_info_title{ |
||||
|
display: flex; |
||||
|
font-size: 14px; |
||||
|
color: #7F7F7F; |
||||
|
align-items: center; |
||||
|
width: 1020px; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.order_item_info_content{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
width: 1020px; |
||||
|
font-size: 14px; |
||||
|
justify-content: space-between; |
||||
|
margin-top: 5px; |
||||
|
color: #333333; |
||||
|
} |
||||
|
.order_item_info_content_left p{ |
||||
|
width: 300px; |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
.order_item_info_content_price{ |
||||
|
/* margin:0 30px; */ |
||||
|
text-align: center; |
||||
|
} |
||||
|
.order_item_info_content_price_p{ |
||||
|
text-decoration: line-through; |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
.order_item_info_content_all{ |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.order_item_info_content_operation{ |
||||
|
color: #555555; |
||||
|
} |
||||
|
.order_item_info_content_operation p{ |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,212 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="header"> |
||||
|
<span v-for="(item,index) in headerList" :key="index" :class="header_active==index ? 'header_active':''" @click="goPage(item.url)">{{item.name}}</span> |
||||
|
</div> |
||||
|
<div class="seach"> |
||||
|
<div class="seach_item"> |
||||
|
<el-input v-model="query.input" placeholder="请输入资产名称/资产编号或托管方名称" class="seach_input" suffix-icon="el-icon-search"></el-input> |
||||
|
</div> |
||||
|
<div class="seach_item"> |
||||
|
<el-date-picker |
||||
|
v-model="query.time" |
||||
|
class="seach_input1" |
||||
|
type="date" |
||||
|
placeholder="选择日期"> |
||||
|
</el-date-picker> |
||||
|
</div> |
||||
|
<div class="seach_item"> |
||||
|
<span class="el-dropdown-link"> |
||||
|
展开更多筛选条件 |
||||
|
<i class="el-icon-arrow-down el-icon--right"></i> |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="body"> |
||||
|
<div class="order_item" v-for="(item,index) in 4" :key="index"> |
||||
|
<div class="order_item_id">1</div> |
||||
|
<img src="../../../assets/img/header_logo.png" alt="" class="order_item_img"> |
||||
|
<div class="order_item_info"> |
||||
|
<div class="order_item_info_title"> |
||||
|
<span>2021-07-13 18:30:25</span> |
||||
|
<span>订单编号：15852458965124</span> |
||||
|
<span>托管方：东莞市芳华沉香园林景观有限公司</span> |
||||
|
<span>资产编号：GM-BZ-165254</span> |
||||
|
</div> |
||||
|
<div class="order_item_info_content"> |
||||
|
<div class="order_item_info_content_left"> |
||||
|
<p>东莞市芳华沉香园林景观有限公司20棵沉香树采集权（2年）</p> |
||||
|
<p>运费：¥ 80.00</p> |
||||
|
<p>服务费：¥ 1,000.00</p> |
||||
|
</div> |
||||
|
<div class="order_item_info_content_price"> |
||||
|
<p class="order_item_info_content_price_p">¥ 30,000.00</p> |
||||
|
<p>单价：¥ 10,000.00</p> |
||||
|
</div> |
||||
|
<div class="order_item_id">数量：3</div> |
||||
|
<div class="order_item_info_content_all">交易总额：¥ 31,080.00</div> |
||||
|
<div>交易状态：已完成</div> |
||||
|
<div class="order_item_info_content_operation"> |
||||
|
<p>开始学习</p> |
||||
|
<p>订单详情</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
layout="total, prev, pager, next" |
||||
|
:current-page="query.page" |
||||
|
:page-size="query.limit" |
||||
|
:total="pageTotal" |
||||
|
@current-change="handlePageChange" |
||||
|
></el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return{ |
||||
|
query:{ |
||||
|
input:'', |
||||
|
time:'', |
||||
|
page:1, |
||||
|
limit:10, |
||||
|
}, |
||||
|
pageTotal:50, |
||||
|
|
||||
|
headerList:[ |
||||
|
{name:'全部内容',url:''}, |
||||
|
{name:'未开始',url:''}, |
||||
|
{name:'学习中',url:''}, |
||||
|
{name:'待考试',url:''}, |
||||
|
{name:'已完成',url:''}, |
||||
|
], |
||||
|
header_active:0 |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
// 分页导航 |
||||
|
handlePageChange(val) { |
||||
|
this.$set(this.query, 'page', val); |
||||
|
// this.getData(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.header{ |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.header_active{ |
||||
|
color: rgba(201, 76, 76, 0.698039215686274); |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.header span{ |
||||
|
display: inline-block; |
||||
|
padding: 0 10px; |
||||
|
cursor: pointer; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
.header span:hover{ |
||||
|
color: rgba(201, 76, 76, 0.698039215686274); |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.seach{ |
||||
|
display: flex; |
||||
|
background-color: #FDF8F8; |
||||
|
border: 1px solid #E9B7B7; |
||||
|
height: 50px; |
||||
|
margin-top: 30px; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.seach_item{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 14px; |
||||
|
margin-left: 20px; |
||||
|
|
||||
|
} |
||||
|
.seach_input{ |
||||
|
width: 260px; |
||||
|
border: 1px solid #E9B7B7; |
||||
|
} |
||||
|
.seach_input1{ |
||||
|
border: 1px solid #E9B7B7; |
||||
|
} |
||||
|
.seach_input1>>>.el-input__inner{ |
||||
|
border: none; |
||||
|
} |
||||
|
.seach_input>>>.el-input__inner{ |
||||
|
border: none; |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
.el-dropdown-link{ |
||||
|
color: #EAB1B1; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.body{ |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
.order_item{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 14px; |
||||
|
padding: 15px 0; |
||||
|
} |
||||
|
.order_item:nth-child(2n+2){ |
||||
|
background-color: #FDF8F8; |
||||
|
} |
||||
|
.order_item_id{ |
||||
|
padding: 0 15px; |
||||
|
} |
||||
|
.order_item_img{ |
||||
|
width: 100px; |
||||
|
height: 100px; |
||||
|
margin: 0 15px; |
||||
|
} |
||||
|
.order_item_info_title{ |
||||
|
display: flex; |
||||
|
font-size: 14px; |
||||
|
color: #7F7F7F; |
||||
|
align-items: center; |
||||
|
width: 1020px; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.order_item_info_content{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
width: 1020px; |
||||
|
font-size: 14px; |
||||
|
justify-content: space-between; |
||||
|
margin-top: 5px; |
||||
|
color: #333333; |
||||
|
} |
||||
|
.order_item_info_content_left p{ |
||||
|
width: 300px; |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
.order_item_info_content_price{ |
||||
|
/* margin:0 30px; */ |
||||
|
text-align: center; |
||||
|
} |
||||
|
.order_item_info_content_price_p{ |
||||
|
text-decoration: line-through; |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
.order_item_info_content_all{ |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.order_item_info_content_operation{ |
||||
|
color: #555555; |
||||
|
} |
||||
|
.order_item_info_content_operation p{ |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,239 @@ |
|||||
|
<template> |
||||
|
<div class="body"> |
||||
|
<p class="title">购买方开户信息完善</p> |
||||
|
<p class="title_info">用户在购买资产前需先进行开户信息审核，待审核通过后方能进行购买。（个人用户目前仅支持人才产权交易，如需交易有形实物资产或无形实物资产请注册机构用户！）</p> |
||||
|
<div class="subject"> |
||||
|
<span>账户主体：</span> |
||||
|
<el-radio v-model="subject" :label="1">机构</el-radio> |
||||
|
<el-radio v-model="subject" :label="2">个人</el-radio> |
||||
|
</div> |
||||
|
<div class="table"> |
||||
|
<div class="table_left"> |
||||
|
<p class="table_title">请如实上传以下资料：</p> |
||||
|
<div class="table_content"> |
||||
|
<div class="table_content_item" v-for="(item,index) in upList" :key="index"> |
||||
|
<span>{{item.name}}</span> |
||||
|
<div class="table_content_item_upload"> |
||||
|
<el-upload |
||||
|
class="upload-demo" |
||||
|
action="https://jsonplaceholder.typicode.com/posts/" |
||||
|
:on-change="fileChange" |
||||
|
:show-file-list="false" |
||||
|
:on-error="handleAvatarError" |
||||
|
list-type="picture" |
||||
|
:on-success="(res,file)=>{handleAvatarSuccess(res,file,index)}" |
||||
|
> |
||||
|
<span class="upload_span">上传</span> |
||||
|
</el-upload> |
||||
|
<span class="el-icon-success"></span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<p class="table_title">请确认并完善以下信息：</p> |
||||
|
<div class="table_content"> |
||||
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="ruleForm" label-position="left"> |
||||
|
<el-form-item :label="item.name" :prop="item.prop" v-for="(item,index) in infoList" :key="index"> |
||||
|
<el-input v-model="item.data"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="footer"> |
||||
|
<button class="submit" @click="submit">提交资料</button> |
||||
|
<div> |
||||
|
<el-checkbox v-model="checked" :true-label=1 :false-label=2></el-checkbox> |
||||
|
<span class="footer_span">已阅读并同意</span> |
||||
|
<span class="footer_span1">《开户申请书与承诺书》</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return{ |
||||
|
subject:1, |
||||
|
checked:1, |
||||
|
upList:[ |
||||
|
{name:'营业执照（复印件）'}, |
||||
|
{name:'法人代表证明书'}, |
||||
|
{name:'法人身份证件（复印件）'}, |
||||
|
{name:' 数字证书申请表'}, |
||||
|
{name:' 银行开户证明'}, |
||||
|
{name:'资产证明文件'}, |
||||
|
{name:'法人授权委托书'}, |
||||
|
{name:'经办人身份证（复印件）'}, |
||||
|
{name:'其他要求文件'}, |
||||
|
], |
||||
|
infoList:[ |
||||
|
{name:'机构名称',prop:'name',type:'input',data:''}, |
||||
|
{name:'统一社会信用代码',prop:'region',type:'input',data:''}, |
||||
|
{name:'主体类型',prop:'region',type:'input',data:''}, |
||||
|
{name:'注册资本',prop:'region',type:'input',data:''}, |
||||
|
{name:'法定代表人',prop:'region',type:'input',data:''}, |
||||
|
{name:'住所',prop:'region',type:'input',data:''}, |
||||
|
{name:'成立日期',prop:'region',type:'input',data:''}, |
||||
|
{name:'收货地址',prop:'region',type:'input',data:''}, |
||||
|
{name:'收货联系人',prop:'region',type:'input',data:''}, |
||||
|
{name:'收货联系电话',prop:'region',type:'input',data:''}, |
||||
|
], |
||||
|
ruleForm: { |
||||
|
name: '', |
||||
|
region: '', |
||||
|
date1: '', |
||||
|
date2: '', |
||||
|
delivery: false, |
||||
|
type: [], |
||||
|
resource: '', |
||||
|
desc: '' |
||||
|
}, |
||||
|
rules: { |
||||
|
name: [ |
||||
|
{ required: true, message: '请输入活动名称', trigger: 'blur' }, |
||||
|
], |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
submit(){ |
||||
|
console.info(this.ruleForm) |
||||
|
}, |
||||
|
handleAvatarError(){ |
||||
|
this.$message.error('文件上传失败！'); |
||||
|
}, |
||||
|
handleAvatarSuccess(res, file, index){ |
||||
|
console.info(res) |
||||
|
console.info(file) |
||||
|
console.info(index) |
||||
|
if(res.code===1){ |
||||
|
let name; |
||||
|
if(type==0){ |
||||
|
name='goods_img' |
||||
|
}else if(type==1){ |
||||
|
// name='praise_img' |
||||
|
console.info(res); |
||||
|
return |
||||
|
} |
||||
|
this.$set(this.query.goods[index],name, this.host+ res.data.img_url); |
||||
|
console.info(this.query) |
||||
|
} |
||||
|
}, |
||||
|
fileChange(file){ |
||||
|
const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg']; |
||||
|
const isJPG = typeArr.indexOf(file.raw.type) !== -1; |
||||
|
const isLt3M = file.size / 1024 / 1024 < 3; |
||||
|
if (!isJPG) { |
||||
|
this.$message.error('只能是图片!'); |
||||
|
this.$refs.upload.clearFiles(); |
||||
|
// this.$set(this.query, 'goods_img', ''); |
||||
|
return; |
||||
|
} |
||||
|
if (!isLt3M) { |
||||
|
this.$message.error('上传图片大小不能超过 3MB!'); |
||||
|
this.$refs.upload.clearFiles(); |
||||
|
// this.$set(this.query, 'goods_img', ''); |
||||
|
return; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.body{ |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
.title{ |
||||
|
font-size: 18px; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.title_info{ |
||||
|
font-size: 12px; |
||||
|
color: #AAAAAA; |
||||
|
} |
||||
|
.subject{ |
||||
|
display: flex; |
||||
|
font-size: 14px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-top: 30px; |
||||
|
} |
||||
|
.subject >>>.el-radio, .el-radio__input{ |
||||
|
line-height: inherit; |
||||
|
margin-left: 30px; |
||||
|
} |
||||
|
.table{ |
||||
|
display: flex; |
||||
|
margin-top: 15px; |
||||
|
} |
||||
|
.table_left{ |
||||
|
width: 800px; |
||||
|
border-right: 1px solid #EAB1B1; |
||||
|
} |
||||
|
.table_title{ |
||||
|
font-size: 14px; |
||||
|
margin-bottom: 15px; |
||||
|
} |
||||
|
.table_content{ |
||||
|
padding-left: 30px; |
||||
|
margin-bottom: 15px; |
||||
|
padding-right: 50px; |
||||
|
} |
||||
|
.table_content_item{ |
||||
|
font-size: 14px; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
margin-bottom: 15px; |
||||
|
} |
||||
|
.table_content_item_upload{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
color: #C94C4C; |
||||
|
} |
||||
|
.el-icon-success{ |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
.upload-demo{ |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
.upload_span{ |
||||
|
color: #C94C4C; |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
.ruleForm>>>.el-form-item__label{ |
||||
|
color: black; |
||||
|
} |
||||
|
.ruleForm>>>.el-input{ |
||||
|
width: 500px; |
||||
|
} |
||||
|
.footer{ |
||||
|
margin-top: 20px; |
||||
|
text-align: center; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
.submit{ |
||||
|
width: 340px; |
||||
|
height: 40px; |
||||
|
background: -moz-linear-gradient(top, #F8D89F 0%, #D98282 100%); |
||||
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F8D89F), color-stop(100%,#D98282)); |
||||
|
background: -webkit-linear-gradient(top, #F8D89F 0%,#D98282 100%); |
||||
|
background: -o-linear-gradient(top, #F8D89F 0%,#D98282 100%); |
||||
|
background: -ms-linear-gradient(top, #F8D89F 0%,#D98282 100%); |
||||
|
background: linear-gradient(to bottom, #F8D89F 0%,#D98282 100%); |
||||
|
font-size: 14px; |
||||
|
color: #FFFFFF; |
||||
|
border: none; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.footer_span{ |
||||
|
color: rgb(127, 127, 127); |
||||
|
} |
||||
|
.footer_span1{ |
||||
|
color: rgb(201, 76, 76); |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,85 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
|
||||
|
<div class="tabs"> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
header-cell-class-name="theader" |
||||
|
:header-cell-style="{background:'#F8E6E6 !important',color:'#C94C4C',height:'60px',fontSize:'14px'}" |
||||
|
style="width: 100%"> |
||||
|
<el-table-column |
||||
|
prop="date" |
||||
|
align="center" |
||||
|
label="发布日期"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
align="center" |
||||
|
label="通知类型"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="address" |
||||
|
align="center" |
||||
|
label="通知标题"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="address" |
||||
|
align="center" |
||||
|
label="通知详情"> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
layout="total, prev, pager, next" |
||||
|
:current-page="query.page" |
||||
|
:page-size="query.limit" |
||||
|
:total="pageTotal" |
||||
|
@current-change="handlePageChange" |
||||
|
></el-pagination> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return{ |
||||
|
query:{ |
||||
|
page:1, |
||||
|
limit:10, |
||||
|
input:'', |
||||
|
value:'' |
||||
|
}, |
||||
|
tableData:[], |
||||
|
pageTotal:50 |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
// 分页导航 |
||||
|
handlePageChange(val) { |
||||
|
this.$set(this.query, 'page', val); |
||||
|
// this.getData(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.el-dropdown-link{ |
||||
|
color: #EAB1B1; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.tabs{ |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
.tabs>>> .el-table tr{ |
||||
|
border:1px solid #E9B7B7 !important |
||||
|
} |
||||
|
.tabs>>>.el-table td, .el-table th.is-leaf{ |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
.tabs>>>.el-table::before{ |
||||
|
height: 0; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,19 @@ |
|||||
|
// 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' |
||||
|
import ElementUI from 'element-ui'; |
||||
|
import 'element-ui/lib/theme-chalk/index.css'; |
||||
|
Vue.config.productionTip = false |
||||
|
|
||||
|
Vue.use(ElementUI, { |
||||
|
size: 'small' |
||||
|
}); |
||||
|
/* eslint-disable no-new */ |
||||
|
new Vue({ |
||||
|
el: '#app', |
||||
|
router, |
||||
|
components: { App }, |
||||
|
template: '<App/>' |
||||
|
}) |
||||
@ -0,0 +1,99 @@ |
|||||
|
import Vue from 'vue' |
||||
|
import Router from 'vue-router' |
||||
|
|
||||
|
Vue.use(Router) |
||||
|
|
||||
|
export default new Router({ |
||||
|
routes: [ |
||||
|
{ |
||||
|
path: '/', |
||||
|
redirect: 'AssetClassification', |
||||
|
}, |
||||
|
{ |
||||
|
path: '/', |
||||
|
component: () => import(/* webpackChunkName: "home" */ '../components/common/Home.vue'), |
||||
|
meta: { title: '自述文件' }, |
||||
|
children: [ |
||||
|
{ |
||||
|
path: '/AssetClassification', |
||||
|
component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/AssetClassification.vue'), |
||||
|
meta: { title: '资产分类' } |
||||
|
}, |
||||
|
{ |
||||
|
path: '/Listing', |
||||
|
component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Listing.vue'), |
||||
|
meta: { title: '挂牌公告' } |
||||
|
}, |
||||
|
{ |
||||
|
path: '/Deal', |
||||
|
component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Deal.vue'), |
||||
|
meta: { title: '成交公告' } |
||||
|
}, |
||||
|
{ |
||||
|
path: '/StationNotice', |
||||
|
component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/StationNotice.vue'), |
||||
|
meta: { title: '站内通知' } |
||||
|
}, |
||||
|
{ |
||||
|
path: '/ClassificationDetails', |
||||
|
component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/ClassificationDetails.vue'), |
||||
|
meta: { title: '分类详情' } |
||||
|
}, |
||||
|
{ |
||||
|
path: '/AssetDetails', |
||||
|
component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/AssetDetails.vue'), |
||||
|
meta: { title: '资产详情' } |
||||
|
}, |
||||
|
{ |
||||
|
path: '/NoticeDetails', |
||||
|
component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/NoticeDetails.vue'), |
||||
|
meta: { title: '公共详情' } |
||||
|
}, |
||||
|
{ |
||||
|
path: '/wkPurchaser', |
||||
|
component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Purchaser/wkPurchaser.vue'), |
||||
|
meta: { title: '购买方未开户' } |
||||
|
}, |
||||
|
{ |
||||
|
path: '/Purchaser', |
||||
|
component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Purchaser/Purchaser.vue'), |
||||
|
meta: { title: '购买方已开户' }, |
||||
|
children:[ |
||||
|
{ |
||||
|
path: '', |
||||
|
component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Purchaser/myOrder.vue'), |
||||
|
meta: { title: '我的订单' } |
||||
|
}, |
||||
|
{ |
||||
|
path: 'myCollection', |
||||
|
component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Purchaser/myCollection.vue'), |
||||
|
meta: { title: '我的收藏' } |
||||
|
}, |
||||
|
{ |
||||
|
path: 'study', |
||||
|
component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Purchaser/study.vue'), |
||||
|
meta: { title: '在线学习' } |
||||
|
}, |
||||
|
{ |
||||
|
path: 'achievements', |
||||
|
component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Purchaser/achievements.vue'), |
||||
|
meta: { title: '学习成果' } |
||||
|
}, |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
path: 'Hoster', |
||||
|
component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Hoster/index.vue'), |
||||
|
meta: { title: '托管方' }, |
||||
|
children:[ |
||||
|
{ |
||||
|
path: '', |
||||
|
component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Hoster/myOrder.vue'), |
||||
|
meta: { title: '我的订单' } |
||||
|
}, |
||||
|
] |
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
Loading…
Reference in new issue