parent
7e7f66af9c
commit
eab4298725
@ -0,0 +1,18 @@
|
||||
{
|
||||
"presets": [
|
||||
["env", {
|
||||
"modules": false,
|
||||
"targets": {
|
||||
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
|
||||
}
|
||||
}],
|
||||
"stage-2"
|
||||
],
|
||||
"plugins": ["transform-runtime"],
|
||||
"env": {
|
||||
"test": {
|
||||
"presets": ["env", "stage-2"],
|
||||
"plugins": ["istanbul"]
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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,13 @@
|
||||
.DS_Store
|
||||
node_modules/
|
||||
dist/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
@ -0,0 +1,8 @@
|
||||
// https://github.com/michael-ciniawsky/postcss-load-config
|
||||
|
||||
module.exports = {
|
||||
"plugins": {
|
||||
// to edit target browsers: use "browserslist" field in package.json
|
||||
"autoprefixer": {}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,34 @@
|
||||
# shopping
|
||||
|
||||
> Vue2.0+Vue-router+Vuex打造商城购物网站
|
||||
|
||||
主要功能：
|
||||
|
||||
商品详情
|
||||
|
||||
商品添加购物车
|
||||
|
||||
商品购买
|
||||
|
||||
地址选择
|
||||
|
||||
结账(模拟)
|
||||
|
||||
|
||||
## 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
|
||||
```
|
||||
|
||||
For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
|
||||
@ -0,0 +1,40 @@
|
||||
require('./check-versions')()
|
||||
|
||||
process.env.NODE_ENV = 'production'
|
||||
|
||||
var ora = require('ora')
|
||||
var rm = require('rimraf')
|
||||
var path = require('path')
|
||||
var chalk = require('chalk')
|
||||
var webpack = require('webpack')
|
||||
var config = require('../config')
|
||||
var webpackConfig = require('./webpack.prod.conf')
|
||||
|
||||
var spinner = ora('building for production...')
|
||||
spinner.start()
|
||||
|
||||
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
|
||||
if (err) throw err
|
||||
webpack(webpackConfig, function (err, stats) {
|
||||
spinner.stop()
|
||||
if (err) throw err
|
||||
process.stdout.write(stats.toString({
|
||||
colors: true,
|
||||
modules: false,
|
||||
children: false,
|
||||
chunks: false,
|
||||
chunkModules: false
|
||||
}) + '\n\n')
|
||||
|
||||
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,48 @@
|
||||
var chalk = require('chalk')
|
||||
var semver = require('semver')
|
||||
var packageConfig = require('../package.json')
|
||||
var shell = require('shelljs')
|
||||
function exec (cmd) {
|
||||
return require('child_process').execSync(cmd).toString().trim()
|
||||
}
|
||||
|
||||
var versionRequirements = [
|
||||
{
|
||||
name: 'node',
|
||||
currentVersion: semver.clean(process.version),
|
||||
versionRequirement: packageConfig.engines.node
|
||||
}
|
||||
]
|
||||
|
||||
if (shell.which('npm')) {
|
||||
versionRequirements.push({
|
||||
name: 'npm',
|
||||
currentVersion: exec('npm --version'),
|
||||
versionRequirement: packageConfig.engines.npm
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = function () {
|
||||
var warnings = []
|
||||
for (var i = 0; i < versionRequirements.length; i++) {
|
||||
var mod = versionRequirements[i]
|
||||
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
|
||||
warnings.push(mod.name + ': ' +
|
||||
chalk.red(mod.currentVersion) + ' should be ' +
|
||||
chalk.green(mod.versionRequirement)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
if (warnings.length) {
|
||||
console.log('')
|
||||
console.log(chalk.yellow('To use this template, you must update following to modules:'))
|
||||
console.log()
|
||||
for (var i = 0; i < warnings.length; i++) {
|
||||
var warning = warnings[i]
|
||||
console.log(' ' + warning)
|
||||
}
|
||||
console.log()
|
||||
process.exit(1)
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
/* eslint-disable */
|
||||
require('eventsource-polyfill')
|
||||
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
|
||||
|
||||
hotClient.subscribe(function (event) {
|
||||
if (event.action === 'reload') {
|
||||
window.location.reload()
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,90 @@
|
||||
require('./check-versions')()
|
||||
|
||||
var config = require('../config')
|
||||
if (!process.env.NODE_ENV) {
|
||||
process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
|
||||
}
|
||||
|
||||
var opn = require('opn')
|
||||
var path = require('path')
|
||||
var express = require('express')
|
||||
var webpack = require('webpack')
|
||||
var proxyMiddleware = require('http-proxy-middleware')
|
||||
var webpackConfig = require('./webpack.dev.conf')
|
||||
|
||||
// default port where dev server listens for incoming traffic
|
||||
var port = process.env.PORT || config.dev.port
|
||||
// automatically open browser, if not set will be false
|
||||
var autoOpenBrowser = !!config.dev.autoOpenBrowser
|
||||
// Define HTTP proxies to your custom API backend
|
||||
// https://github.com/chimurai/http-proxy-middleware
|
||||
var proxyTable = config.dev.proxyTable
|
||||
|
||||
var app = express()
|
||||
var compiler = webpack(webpackConfig)
|
||||
|
||||
var devMiddleware = require('webpack-dev-middleware')(compiler, {
|
||||
publicPath: webpackConfig.output.publicPath,
|
||||
quiet: true
|
||||
})
|
||||
|
||||
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
|
||||
log: false,
|
||||
heartbeat: 2000
|
||||
})
|
||||
// force page reload when html-webpack-plugin template changes
|
||||
compiler.plugin('compilation', function (compilation) {
|
||||
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
|
||||
hotMiddleware.publish({ action: 'reload' })
|
||||
cb()
|
||||
})
|
||||
})
|
||||
|
||||
// proxy api requests
|
||||
Object.keys(proxyTable).forEach(function (context) {
|
||||
var options = proxyTable[context]
|
||||
if (typeof options === 'string') {
|
||||
options = { target: options }
|
||||
}
|
||||
app.use(proxyMiddleware(options.filter || context, options))
|
||||
})
|
||||
|
||||
// handle fallback for HTML5 history API
|
||||
app.use(require('connect-history-api-fallback')())
|
||||
|
||||
// serve webpack bundle output
|
||||
app.use(devMiddleware)
|
||||
|
||||
// enable hot-reload and state-preserving
|
||||
// compilation error display
|
||||
app.use(hotMiddleware)
|
||||
|
||||
// serve pure static assets
|
||||
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
|
||||
app.use(staticPath, express.static('./static'))
|
||||
|
||||
var uri = 'http://localhost:' + port
|
||||
|
||||
var _resolve
|
||||
var readyPromise = new Promise(resolve => {
|
||||
_resolve = resolve
|
||||
})
|
||||
|
||||
console.log('> Starting dev server...')
|
||||
devMiddleware.waitUntilValid(() => {
|
||||
console.log('> Listening at ' + uri + '\n')
|
||||
// when env is testing, don't need open it
|
||||
if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
|
||||
opn(uri)
|
||||
}
|
||||
_resolve()
|
||||
})
|
||||
|
||||
var server = app.listen(port)
|
||||
|
||||
module.exports = {
|
||||
ready: readyPromise,
|
||||
close: () => {
|
||||
server.close()
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,71 @@
|
||||
var path = require('path')
|
||||
var config = require('../config')
|
||||
var ExtractTextPlugin = require('extract-text-webpack-plugin')
|
||||
|
||||
exports.assetsPath = function (_path) {
|
||||
var assetsSubDirectory = process.env.NODE_ENV === 'production'
|
||||
? config.build.assetsSubDirectory
|
||||
: config.dev.assetsSubDirectory
|
||||
return path.posix.join(assetsSubDirectory, _path)
|
||||
}
|
||||
|
||||
exports.cssLoaders = function (options) {
|
||||
options = options || {}
|
||||
|
||||
var cssLoader = {
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
minimize: process.env.NODE_ENV === 'production',
|
||||
sourceMap: options.sourceMap
|
||||
}
|
||||
}
|
||||
|
||||
// generate loader string to be used with extract text plugin
|
||||
function generateLoaders (loader, loaderOptions) {
|
||||
var loaders = [cssLoader]
|
||||
if (loader) {
|
||||
loaders.push({
|
||||
loader: loader + '-loader',
|
||||
options: Object.assign({}, loaderOptions, {
|
||||
sourceMap: options.sourceMap
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// Extract CSS when that option is specified
|
||||
// (which is the case during production build)
|
||||
if (options.extract) {
|
||||
return ExtractTextPlugin.extract({
|
||||
use: loaders,
|
||||
fallback: 'vue-style-loader'
|
||||
})
|
||||
} else {
|
||||
return ['vue-style-loader'].concat(loaders)
|
||||
}
|
||||
}
|
||||
|
||||
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
|
||||
return {
|
||||
css: generateLoaders(),
|
||||
postcss: generateLoaders(),
|
||||
less: generateLoaders('less'),
|
||||
sass: generateLoaders('sass', { indentedSyntax: true }),
|
||||
scss: generateLoaders('sass'),
|
||||
stylus: generateLoaders('stylus'),
|
||||
styl: generateLoaders('stylus')
|
||||
}
|
||||
}
|
||||
|
||||
// Generate loaders for standalone style files (outside of .vue)
|
||||
exports.styleLoaders = function (options) {
|
||||
var output = []
|
||||
var loaders = exports.cssLoaders(options)
|
||||
for (var extension in loaders) {
|
||||
var loader = loaders[extension]
|
||||
output.push({
|
||||
test: new RegExp('\\.' + extension + '$'),
|
||||
use: loader
|
||||
})
|
||||
}
|
||||
return output
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
var utils = require('./utils')
|
||||
var config = require('../config')
|
||||
var isProduction = process.env.NODE_ENV === 'production'
|
||||
|
||||
module.exports = {
|
||||
loaders: utils.cssLoaders({
|
||||
sourceMap: isProduction
|
||||
? config.build.productionSourceMap
|
||||
: config.dev.cssSourceMap,
|
||||
extract: isProduction
|
||||
}),
|
||||
transformToRequire: {
|
||||
video: 'src',
|
||||
source: 'src',
|
||||
img: 'src',
|
||||
image: 'xlink:href'
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,66 @@
|
||||
var path = require('path')
|
||||
var utils = require('./utils')
|
||||
var config = require('../config')
|
||||
var vueLoaderConfig = require('./vue-loader.conf')
|
||||
|
||||
function resolve (dir) {
|
||||
return path.join(__dirname, '..', dir)
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
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')]
|
||||
},
|
||||
{
|
||||
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]')
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
var utils = require('./utils')
|
||||
var webpack = require('webpack')
|
||||
var config = require('../config')
|
||||
var merge = require('webpack-merge')
|
||||
var baseWebpackConfig = require('./webpack.base.conf')
|
||||
var HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
|
||||
|
||||
// add hot-reload related code to entry chunks
|
||||
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
|
||||
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
|
||||
})
|
||||
|
||||
module.exports = merge(baseWebpackConfig, {
|
||||
module: {
|
||||
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
|
||||
},
|
||||
// cheap-module-eval-source-map is faster for development
|
||||
devtool: '#cheap-module-eval-source-map',
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': config.dev.env
|
||||
}),
|
||||
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new webpack.NoEmitOnErrorsPlugin(),
|
||||
// https://github.com/ampedandwired/html-webpack-plugin
|
||||
new HtmlWebpackPlugin({
|
||||
filename: 'index.html',
|
||||
template: 'index.html',
|
||||
inject: true
|
||||
}),
|
||||
new FriendlyErrorsPlugin()
|
||||
]
|
||||
})
|
||||
@ -0,0 +1,122 @@
|
||||
var path = require('path')
|
||||
var utils = require('./utils')
|
||||
var webpack = require('webpack')
|
||||
var config = require('../config')
|
||||
var merge = require('webpack-merge')
|
||||
var baseWebpackConfig = require('./webpack.base.conf')
|
||||
var CopyWebpackPlugin = require('copy-webpack-plugin')
|
||||
var HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
var ExtractTextPlugin = require('extract-text-webpack-plugin')
|
||||
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
|
||||
|
||||
var env = config.build.env
|
||||
|
||||
var webpackConfig = merge(baseWebpackConfig, {
|
||||
module: {
|
||||
rules: utils.styleLoaders({
|
||||
sourceMap: config.build.productionSourceMap,
|
||||
extract: true
|
||||
})
|
||||
},
|
||||
devtool: config.build.productionSourceMap ? '#source-map' : false,
|
||||
output: {
|
||||
path: config.build.assetsRoot,
|
||||
filename: utils.assetsPath('js/[name].[chunkhash].js'),
|
||||
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
|
||||
},
|
||||
plugins: [
|
||||
// http://vuejs.github.io/vue-loader/en/workflow/production.html
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': env
|
||||
}),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false
|
||||
},
|
||||
sourceMap: true
|
||||
}),
|
||||
// extract css into its own file
|
||||
new ExtractTextPlugin({
|
||||
filename: utils.assetsPath('css/[name].[contenthash].css')
|
||||
}),
|
||||
// Compress extracted CSS. We are using this plugin so that possible
|
||||
// duplicated CSS from different components can be deduped.
|
||||
new OptimizeCSSPlugin({
|
||||
cssProcessorOptions: {
|
||||
safe: true
|
||||
}
|
||||
}),
|
||||
// generate dist index.html with correct asset hash for caching.
|
||||
// you can customize output by editing /index.html
|
||||
// see https://github.com/ampedandwired/html-webpack-plugin
|
||||
new HtmlWebpackPlugin({
|
||||
filename: config.build.index,
|
||||
template: 'index.html',
|
||||
inject: true,
|
||||
minify: {
|
||||
removeComments: true,
|
||||
collapseWhitespace: true,
|
||||
removeAttributeQuotes: true
|
||||
// more options:
|
||||
// https://github.com/kangax/html-minifier#options-quick-reference
|
||||
},
|
||||
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
|
||||
chunksSortMode: 'dependency'
|
||||
}),
|
||||
// keep module.id stable when vender modules does not change
|
||||
new webpack.HashedModuleIdsPlugin(),
|
||||
// split vendor js into its own file
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: 'vendor',
|
||||
minChunks: function (module, count) {
|
||||
// any required modules inside node_modules are extracted to vendor
|
||||
return (
|
||||
module.resource &&
|
||||
/\.js$/.test(module.resource) &&
|
||||
module.resource.indexOf(
|
||||
path.join(__dirname, '../node_modules')
|
||||
) === 0
|
||||
)
|
||||
}
|
||||
}),
|
||||
// extract webpack runtime and module manifest to its own file in order to
|
||||
// prevent vendor hash from being updated whenever app bundle is updated
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: 'manifest',
|
||||
chunks: ['vendor']
|
||||
}),
|
||||
// copy custom static assets
|
||||
new CopyWebpackPlugin([
|
||||
{
|
||||
from: path.resolve(__dirname, '../static'),
|
||||
to: config.build.assetsSubDirectory,
|
||||
ignore: ['.*']
|
||||
}
|
||||
])
|
||||
]
|
||||
})
|
||||
|
||||
if (config.build.productionGzip) {
|
||||
var CompressionWebpackPlugin = require('compression-webpack-plugin')
|
||||
|
||||
webpackConfig.plugins.push(
|
||||
new CompressionWebpackPlugin({
|
||||
asset: '[path].gz[query]',
|
||||
algorithm: 'gzip',
|
||||
test: new RegExp(
|
||||
'\\.(' +
|
||||
config.build.productionGzipExtensions.join('|') +
|
||||
')$'
|
||||
),
|
||||
threshold: 10240,
|
||||
minRatio: 0.8
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
if (config.build.bundleAnalyzerReport) {
|
||||
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
|
||||
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
|
||||
}
|
||||
|
||||
module.exports = webpackConfig
|
||||
@ -0,0 +1,6 @@
|
||||
var merge = require('webpack-merge')
|
||||
var prodEnv = require('./prod.env')
|
||||
|
||||
module.exports = merge(prodEnv, {
|
||||
NODE_ENV: '"development"'
|
||||
})
|
||||
@ -0,0 +1,38 @@
|
||||
// see http://vuejs-templates.github.io/webpack for documentation.
|
||||
var path = require('path')
|
||||
|
||||
module.exports = {
|
||||
build: {
|
||||
env: require('./prod.env'),
|
||||
index: path.resolve(__dirname, '../dist/index.html'),
|
||||
assetsRoot: path.resolve(__dirname, '../dist'),
|
||||
assetsSubDirectory: 'static',
|
||||
assetsPublicPath: '/',
|
||||
productionSourceMap: true,
|
||||
// Gzip off by default as many popular static hosts such as
|
||||
// Surge or Netlify already gzip all static assets for you.
|
||||
// Before setting to `true`, make sure to:
|
||||
// npm install --save-dev compression-webpack-plugin
|
||||
productionGzip: false,
|
||||
productionGzipExtensions: ['js', 'css'],
|
||||
// Run the build command with an extra argument to
|
||||
// View the bundle analyzer report after build finishes:
|
||||
// `npm run build --report`
|
||||
// Set to `true` or `false` to always turn it on or off
|
||||
bundleAnalyzerReport: process.env.npm_config_report
|
||||
},
|
||||
dev: {
|
||||
env: require('./dev.env'),
|
||||
port: 8080,
|
||||
autoOpenBrowser: true,
|
||||
assetsSubDirectory: 'static',
|
||||
assetsPublicPath: '/',
|
||||
proxyTable: {},
|
||||
// CSS Sourcemaps off by default because relative paths are "buggy"
|
||||
// with this option, according to the CSS-Loader README
|
||||
// (https://github.com/webpack/css-loader#sourcemaps)
|
||||
// In our experience, they generally work as expected,
|
||||
// just be aware of this issue when enabling this option.
|
||||
cssSourceMap: false
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
NODE_ENV: '"production"'
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>五色鲜-购鲜果首选</title>
|
||||
<link rel="stylesheet" href="./src/assets/css/font-awesome.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,65 @@
|
||||
{
|
||||
"name": "123",
|
||||
"version": "1.0.0",
|
||||
"description": "A Vue.js project",
|
||||
"author": "yush <389636851@qq.com>",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "node build/dev-server.js",
|
||||
"start": "node build/dev-server.js",
|
||||
"build": "node build/build.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"view-design": "^4.3.2",
|
||||
"vue": "^2.4.2",
|
||||
"vue-router": "^2.7.0",
|
||||
"vuex": "^2.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^7.1.2",
|
||||
"axios": "^0.19.2",
|
||||
"babel-core": "^6.22.1",
|
||||
"babel-loader": "^7.1.1",
|
||||
"babel-plugin-transform-runtime": "^6.22.0",
|
||||
"babel-preset-env": "^1.3.2",
|
||||
"babel-preset-stage-2": "^6.22.0",
|
||||
"babel-register": "^6.22.0",
|
||||
"chalk": "^2.0.1",
|
||||
"connect-history-api-fallback": "^1.3.0",
|
||||
"copy-webpack-plugin": "^4.0.1",
|
||||
"css-loader": "^0.28.0",
|
||||
"cssnano": "^3.10.0",
|
||||
"element-ui": "^2.13.2",
|
||||
"eventsource-polyfill": "^0.9.6",
|
||||
"express": "^4.14.1",
|
||||
"extract-text-webpack-plugin": "^2.0.0",
|
||||
"file-loader": "^0.11.1",
|
||||
"friendly-errors-webpack-plugin": "^1.1.3",
|
||||
"html-webpack-plugin": "^2.28.0",
|
||||
"http-proxy-middleware": "^0.17.3",
|
||||
"opn": "^5.1.0",
|
||||
"optimize-css-assets-webpack-plugin": "^2.0.0",
|
||||
"ora": "^1.2.0",
|
||||
"rimraf": "^2.6.0",
|
||||
"semver": "^5.3.0",
|
||||
"shelljs": "^0.7.6",
|
||||
"url-loader": "^0.5.8",
|
||||
"vue-loader": "^13.0.4",
|
||||
"vue-style-loader": "^3.0.1",
|
||||
"vue-template-compiler": "^2.4.2",
|
||||
"webpack": "^2.6.1",
|
||||
"webpack-bundle-analyzer": "^2.2.1",
|
||||
"webpack-dev-middleware": "^1.10.0",
|
||||
"webpack-hot-middleware": "^2.18.0",
|
||||
"webpack-merge": "^4.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 4.0.0",
|
||||
"npm": ">= 3.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<!-- <header-nav></header-nav>-->
|
||||
<router-view v-if="isRouterAlive"></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import "../src/plugins/iview.js"
|
||||
import "../src/plugins/element.js"
|
||||
// import headerNav from '@/components/header-nav' type="text/javascript" src="../src/plugins/iview.js"
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
// components: {
|
||||
// headerNav
|
||||
// }
|
||||
data () {
|
||||
return {
|
||||
isRouterAlive: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reload () {
|
||||
this.isRouterAlive = false
|
||||
this.$nextTick(function() {
|
||||
this.isRouterAlive = true
|
||||
})
|
||||
}
|
||||
},
|
||||
provide () {
|
||||
return {
|
||||
reload: this.reload
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -0,0 +1,92 @@
|
||||
@charset "utf-8";
|
||||
.content{
|
||||
clear: both;
|
||||
width: 1220px;
|
||||
min-height: 600px;
|
||||
padding: 0 0 25px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.account-wrapper{
|
||||
position: relative;
|
||||
min-height: 550px;
|
||||
}
|
||||
.account-sidebar{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 210px;
|
||||
}
|
||||
.gray-box, .gray-btn-menu-on:hover{
|
||||
background: #FFF;
|
||||
}
|
||||
.gray-box{
|
||||
overflow: hidden;
|
||||
border: 1px solid #D1D1D1;
|
||||
border-color: rgba(0,0,0,.14);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 3px 8px -6px rgba(0,0,0,.1);
|
||||
}
|
||||
.account-sidebar .avatar{
|
||||
padding-top: 20px;
|
||||
margin: 0 0 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.account-sidebar .avatar img{
|
||||
width: 168px;
|
||||
height: 168px;
|
||||
display: inline-block;
|
||||
}
|
||||
.account-sidebar .account-nav{
|
||||
padding-top: 15px;
|
||||
}
|
||||
.account-sidebar .account-nav li{
|
||||
position: relative;
|
||||
height: 48px;
|
||||
border-top: 1px solid #EBEBEB;
|
||||
line-height: 48px;
|
||||
}
|
||||
.account-sidebar .account-nav .current{
|
||||
border: none;
|
||||
}
|
||||
.account-sidebar .account-nav a{
|
||||
display: block;
|
||||
height: 48px;
|
||||
padding: 0 30px;
|
||||
color: #666;
|
||||
-moz-transition: none;
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
.account-sidebar .account-nav .current a, .account-sidebar .account-nav a:hover{
|
||||
position: relative;
|
||||
top: -1px;
|
||||
z-index: 1;
|
||||
height: 50px;
|
||||
background-color: #98AFEE;
|
||||
line-height: 50px;
|
||||
color: #FFF;
|
||||
}
|
||||
.account-content{
|
||||
margin-left: 230px;
|
||||
}
|
||||
.gray-box .title{
|
||||
height: 60px;
|
||||
padding: 0 10px 0 28px;
|
||||
background: #F5F5F5;
|
||||
background: linear-gradient(#FFF,#F5F5F5);
|
||||
border-bottom: 1px solid #DCDCDC;
|
||||
border-radius: 10px 10px 0 0;
|
||||
box-shadow: 0 1px 7px rgba(0,0,0,.06);
|
||||
line-height: 60px;
|
||||
color: #646464;
|
||||
}
|
||||
.gray-box .pre-title{
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.gray-box .title h2{
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #626262;
|
||||
}
|
||||
@ -0,0 +1,285 @@
|
||||
@charset "utf-8";
|
||||
.blue-btn, .gray-blue-btn, .gray-btn, .gray-icon-btn, .light-blue-btn, .light-gray-btn{
|
||||
display: inline-block;
|
||||
height: 38px;
|
||||
padding: 0 20px;
|
||||
border-radius: 8px;
|
||||
line-height: 38px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.gray-blue-btn{
|
||||
padding: 0;
|
||||
background: #A2A2A2;
|
||||
}
|
||||
.gray-box .title span{
|
||||
overflow: hidden;
|
||||
float: right;
|
||||
margin-top: 11px;
|
||||
}
|
||||
.blue-btn a, .gray-blue-btn a, .gray-btn a, .gray-icon-btn a, .light-blue-btn a, .light-gray-btn a{
|
||||
display: block;
|
||||
}
|
||||
.gray-blue-btn a{
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
color: #FFF;
|
||||
}
|
||||
.gray-blue-btn a.add{
|
||||
padding: 0 13px 0 38px;
|
||||
background: url(../img/btn-icon-new.png) 0 -6px no-repeat;
|
||||
transition: none;
|
||||
}
|
||||
.gray-blue-btn:hover{
|
||||
background: #7595e4;
|
||||
box-shadow: none;
|
||||
}
|
||||
.address-form{
|
||||
width: 370px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.account-address .address-form{
|
||||
padding: 30px;
|
||||
margin: 0;
|
||||
}
|
||||
.module-form-row{
|
||||
position: relative;
|
||||
padding-bottom: 10px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.address-form .module-form-row{
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.module-form-row .form-item-v3{
|
||||
position: relative;
|
||||
height: 46px;
|
||||
background: #FFF;
|
||||
border: 1px solid #CCC;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 3px 5px -4px rgba(0,0,0,.4) inset, -1px 0 3px -2px rgba(0,0,0,.1) inset;
|
||||
line-height: 46px;
|
||||
font-size: 18px;
|
||||
opacity: .618;
|
||||
transition: opacity .3s ease;
|
||||
}
|
||||
.module-form-row .form-item-v3 i{
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 0;
|
||||
font-size: 16px;
|
||||
color: #BEBEBE;
|
||||
}
|
||||
.module-form-row .form-item-v3 input{
|
||||
padding: 0 15px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
}
|
||||
.address-form .form-item-v3 input{
|
||||
width: 330px;
|
||||
}
|
||||
.address-form .area-code-w{
|
||||
width: 118px;
|
||||
}
|
||||
.address-form .telephone-w{
|
||||
width: 238px;
|
||||
}
|
||||
.module-form-row div.select-item{
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
background: 0 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
opacity: 1;
|
||||
}
|
||||
.module-form-row .form-item-v3 select{
|
||||
margin: 0 0 0 15px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
.address-form .select-province{
|
||||
width: 370px;
|
||||
}
|
||||
.form-focus-item{
|
||||
z-index: 1;
|
||||
opacity: 1;
|
||||
border: 1px solid #6B93F2;
|
||||
}
|
||||
.module-form-row div.select-item{
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
background: 0 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
opacity: 1;
|
||||
}
|
||||
.module-form-row .form-item-v3 select{
|
||||
height: 48px;
|
||||
padding: 0 15px;
|
||||
margin: 0;
|
||||
background: -webkit-linear-gradient(top,#FAFAFA,#F5F5F5);
|
||||
background: linear-gradient(#FAFAFA,#F5F5F5);
|
||||
border: 1px solid #CCC;
|
||||
border-radius: 6px;
|
||||
box-shadow: 2px 0 0 rgba(255,255,255,.4) inset, 1px 0 0 rgba(255,255,255,.3);
|
||||
line-height: 48px;
|
||||
text-indent: 0;
|
||||
outline: 0;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.address-form .select-city, .address-form .select-district{
|
||||
width: 180px;
|
||||
}
|
||||
.blue-checkbox, .blue-checkbox-disable, .blue-checkbox-on{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: url(../img/checkbox-bg.png) no-repeat;
|
||||
cursor: pointer;
|
||||
}
|
||||
.address-form .blue-checkbox{
|
||||
top: 0;
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.dialog-blue-btn{
|
||||
padding: 1px;
|
||||
background: #6383C6;
|
||||
background: linear-gradient(#6383C6,#4262AF);
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
color: #FFF;
|
||||
}
|
||||
.disabled-btn{
|
||||
opacity: .4;
|
||||
}
|
||||
.disabled-btn, .disabled-btn a{
|
||||
cursor: not-allowed;
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
.dialog-blue-btn a{
|
||||
display: block;
|
||||
padding: 2px 0;
|
||||
background: #5F7ED7;
|
||||
background: linear-gradient(#6F97E5,#527ED9);
|
||||
border-radius: 5px;
|
||||
box-shadow: inset 0 1px 2px #7EA1E8;
|
||||
text-shadow: 0 -1px 0 #4F70B3;
|
||||
color: #FFF;
|
||||
}
|
||||
.big-main-btn a{
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.account-address .address-list-item{
|
||||
height: 75px;
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid #CFCFCF;
|
||||
line-height: 24px;
|
||||
}
|
||||
.account-address .address-list-item:last-child{
|
||||
border-bottom: none;
|
||||
border-radius: 0 0 7px 7px;
|
||||
}
|
||||
.account-address .address-list-item .name{
|
||||
display: table;
|
||||
width: 106px;
|
||||
height: 100%;
|
||||
padding: 0 20px 0 24px;
|
||||
}
|
||||
.account-address .address-list-item .name-cell{
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.account-address .address-list-item .detail{
|
||||
display: table;
|
||||
width: 440px;
|
||||
height: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
.account-address .address-list-item .detail-cell{
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.account-address .address-list-item .operation{
|
||||
display: -webkit-box;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-box-align: center;
|
||||
width: 135px;
|
||||
padding: 24px 0;
|
||||
}
|
||||
.account-address .address-list-item .operation-cell{
|
||||
display: flex;
|
||||
text-align: center;
|
||||
}
|
||||
.gray-edit-btn, .red-del-btn{
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.gray-edit-btn{
|
||||
display: inline-block;
|
||||
background: url(../img/btn-icon-new.png) -9px -112px no-repeat #A2A2A2;
|
||||
text-indent: -9999em;
|
||||
}
|
||||
.account-address .address-list-item .operation .gray-edit-btn{
|
||||
margin-right: 6px;
|
||||
}
|
||||
.gray-edit-btn, .red-del-btn{
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.red-del-btn{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background: #d84747;
|
||||
background: linear-gradient(#f97474,#e05b5b);
|
||||
line-height: 26px;
|
||||
opacity: .62;
|
||||
cursor: pointer;
|
||||
transition: none;
|
||||
}
|
||||
.red-del-btn a{
|
||||
display: block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background: url(../img/btn-icon-new.png) -9px -262px no-repeat;
|
||||
text-indent: -9999em;
|
||||
color: #FFF;
|
||||
transition: none;
|
||||
}
|
||||
.red-del-btn em{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: none;
|
||||
height: 26px;
|
||||
text-indent: 0;
|
||||
font-size: 12px;
|
||||
color: #FFF;
|
||||
}
|
||||
.account-address .address-list-item .default{
|
||||
width: 80px;
|
||||
line-height: 75px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
.account-address .address-list-item .telephone{
|
||||
width: 160px;
|
||||
height: 100%;
|
||||
line-height: 75px;
|
||||
text-align: center;
|
||||
}
|
||||
@ -0,0 +1,457 @@
|
||||
@charset "utf-8";
|
||||
.nav-cart{
|
||||
visibility: hidden;
|
||||
}
|
||||
.nav-sub{
|
||||
display: none;
|
||||
}
|
||||
.cart-box{
|
||||
position: relative;
|
||||
margin-top: 40px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #dcdcdc;
|
||||
border-color: rgba(0,0,0,.14);
|
||||
box-shadow: 0 3px 8px -6px rgba(0,0,0,.1);
|
||||
}
|
||||
.cart-box .title{
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
height: 60px;
|
||||
padding: 0 10px 0 30px;
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
border-radius: 8px 8px 0 0;
|
||||
box-shadow: rgba(0,0,0,.06) 0 1px 7px;
|
||||
background: #f3f3f3;
|
||||
background: linear-gradient(#fbfbfb,#ececec);
|
||||
line-height: 60px;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
.cart-inner{
|
||||
padding-bottom: 91px;
|
||||
}
|
||||
.empty-label{
|
||||
height: 49px;
|
||||
padding: 385px 0 0 0;
|
||||
background: url(../img/cart-box-empty.png) no-repeat center 50px;
|
||||
text-align: center;
|
||||
}
|
||||
.empty-label h3{
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #8d8d8d;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.empty-label>a.link{
|
||||
width: 151px;
|
||||
line-height: 38px;
|
||||
height: 38px;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
background: #f9f9f9;
|
||||
background: -webkit-linear-gradient(#fff,#f0f0f0);
|
||||
background: linear-gradient(#fff,#f0f0f0);
|
||||
}
|
||||
.cart-table-title{
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
line-height: 38px;
|
||||
height: 38px;
|
||||
padding: 0 0 0 30px;
|
||||
font-size: 12px;
|
||||
background: #eee;
|
||||
border-bottom: 1px solid #dbdbdb;
|
||||
border-bottom-color: rgba(0,0,0,.08);
|
||||
}
|
||||
.cart-table-title span {
|
||||
float: right;
|
||||
text-align: center;
|
||||
}
|
||||
.cart-table-title .name{
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
.cart-table-title .operation,
|
||||
.cart-table-title .num,
|
||||
.cart-table-title .price,
|
||||
.cart-table-title .subtotal{
|
||||
width: 137px;
|
||||
}
|
||||
.cart-table-title .subtotal{
|
||||
text-align: right;
|
||||
}
|
||||
.cart-group{
|
||||
position: relative;
|
||||
}
|
||||
.cart-group .cart-items{
|
||||
border-top: 1px dashed #eee;
|
||||
position: relative;
|
||||
height: 140px;
|
||||
margin-left: 74px;
|
||||
}
|
||||
.cart-group .cart-top-items:first-child .cart-items{
|
||||
border-top: none;
|
||||
}
|
||||
.cart-items .items-choose, .cart-items .items-thumb, .cart-items .name{
|
||||
float: left;
|
||||
}
|
||||
.cart-items .items-choose{
|
||||
position: absolute;
|
||||
left: -74px;
|
||||
top: 0;
|
||||
width: 74px;
|
||||
height: 20px;
|
||||
padding: 60px 0 0 31px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
.blue-checkbox-new{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: url(../img/checkbox-new.png) no-repeat 0 -20px;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.checkbox-on{
|
||||
background: url(../img/checkbox-new.png) no-repeat 0 0;
|
||||
}
|
||||
.cart-items .items-thumb{
|
||||
position: relative;
|
||||
margin-top: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.cart-items .items-thumb, .cart-items .items-thumb img{
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.cart-items .items-thumb>a, .cart-items .items-thumb>i{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: 3px;
|
||||
border: 0 solid rgba(255,255,255,.1);
|
||||
box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
|
||||
}
|
||||
.cart-items .name{
|
||||
width: 380px;
|
||||
margin-left: 20px;
|
||||
color: #323232;
|
||||
display: table;
|
||||
}
|
||||
.hide-row{
|
||||
overflow: hidden;
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.cart-items .name-table{
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
height: 140px;
|
||||
}
|
||||
.cart-items .name a{
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
}
|
||||
.cart-items .name .attribute, .cart-items .name p{
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
padding-top: 4px;
|
||||
line-height: 17px;
|
||||
}
|
||||
.cart-items .name .attribute li{
|
||||
float: left;
|
||||
padding: 0 10px;
|
||||
position: relative;
|
||||
}
|
||||
.cart-items .name .attribute li:first-child{
|
||||
padding-left: 0;
|
||||
}
|
||||
.cart-items .item-cols-num,
|
||||
.cart-items .operation,
|
||||
.cart-items .price,
|
||||
.cart-items .subtotal{
|
||||
overflow: hidden;
|
||||
float: right;
|
||||
width: 137px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
line-height: 140px;
|
||||
}
|
||||
.cart-items .operation{
|
||||
padding: 58px 0 0;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.cart-items .operation .items-delete-btn{
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 0 auto;
|
||||
color: #C2C2C2;
|
||||
background: url(../img/delete-btn-icon.jpg);
|
||||
background-size: 100% auto;
|
||||
transition: none;
|
||||
}
|
||||
.cart-items .operation .items-delete-btn:hover{
|
||||
background-position: 0 -36px;
|
||||
}
|
||||
.cart-items .subtotal{
|
||||
font-weight: 700;
|
||||
text-align: right;
|
||||
}
|
||||
.cart-items .item-cols-num{
|
||||
padding-top: 50px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.cart-items .select{
|
||||
width: 112px;
|
||||
height: 40px;
|
||||
padding-top: 4px;
|
||||
margin: 0 auto;
|
||||
line-height: 40px;
|
||||
}
|
||||
.select .down, .select .up{
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
display: inline-block;
|
||||
width: 34px;
|
||||
height: 37px;
|
||||
margin-right: 5px;
|
||||
background: url(../img/cart-updown.jpg) no-repeat;
|
||||
background-image: url(../img/cart-updown.jpg);
|
||||
background-size: 100% auto;
|
||||
line-height: 40px;
|
||||
text-indent: -9999em;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.select .down{
|
||||
background-position: 0 -60px;
|
||||
}
|
||||
.select .down:hover{
|
||||
background-position: 0 -180px;
|
||||
}
|
||||
.select .down.down-disabled, .select .down.down-disabled:hover{
|
||||
background-position: 0 -300px;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.select .num{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
display: inline-block;
|
||||
width: 36px;
|
||||
height: 18px;
|
||||
margin: 7px 0 0;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.select input{
|
||||
width: 36px;
|
||||
height: 18px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
line-height: 18px;
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
}
|
||||
.select ul{
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 36px;
|
||||
}
|
||||
.select ul li{
|
||||
width: 36px;
|
||||
height: 18px;
|
||||
}
|
||||
.select .up{
|
||||
float: right;
|
||||
margin: 0;
|
||||
background-position: 0 0;
|
||||
}
|
||||
.select .up:hover{
|
||||
background-position: 0 -120px;
|
||||
}
|
||||
.select .up.up-disabled, .select .up.up-disabled:hover{
|
||||
background-position: 0 -240px;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.gray-box .cart-bottom-bg{
|
||||
/*height: 80px;
|
||||
background: url(../img/store/library/cart-wrapper-bg.jpg) repeat-x;
|
||||
border-top: 1px solid #D9D9D9;*/
|
||||
border-radius: 0 0 8px 8px;
|
||||
}
|
||||
.fix-bottom{
|
||||
height: 90px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
background-position: center;
|
||||
background: #fdfdfd;
|
||||
background: linear-gradient(#fdfdfd,#f9f9f9);
|
||||
border-top: 1px solid #e9e9e9;
|
||||
box-shadow: 0 -3px 8px rgba(0,0,0,.04);
|
||||
}
|
||||
.cart-bar-operation{
|
||||
float: left;
|
||||
padding: 35px 26px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.choose-all, .delete-choose-goods, .selected-count{
|
||||
float: left;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
.delete-choose-goods{
|
||||
position: relative;
|
||||
margin-left: 21px;
|
||||
color: #bbb;
|
||||
}
|
||||
.delete-choose-goods-disabled{
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.shipping{
|
||||
display: inline-block;
|
||||
float: right;
|
||||
padding: 20px 30px;
|
||||
}
|
||||
.shipping-box{
|
||||
display: inline-block;
|
||||
padding-top: 1px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.shipping-total{
|
||||
display: inline-block;
|
||||
border-left: 1px solid #e1e1e1;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.shipping-total:first-child{
|
||||
border: none;
|
||||
}
|
||||
.shipping-total.shipping-num{
|
||||
text-align: right;
|
||||
}
|
||||
.shipping-total h4{
|
||||
color: #323232;
|
||||
}
|
||||
.shipping-total h4 i{
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.shipping-total.shipping-num i{
|
||||
width: 28px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.shipping-total h4.highlight i, .shipping-total h4.highlight span{
|
||||
color: #d44d44;
|
||||
}
|
||||
.shipping-total h5{
|
||||
color: #959595;
|
||||
}
|
||||
.shipping-total h5 i{
|
||||
width: 28px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.shipping-total{
|
||||
display: inline-block;
|
||||
border-left: 1px solid #e1e1e1;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.shipping-total.shipping-price{
|
||||
width: 155px;
|
||||
padding-right: 0;
|
||||
}
|
||||
.blue-main-btn, .gray-main-btn, .jianguo-blue-main-btn{
|
||||
display: block;
|
||||
padding: 1px;
|
||||
margin: 0 auto;
|
||||
border-radius: 9px;
|
||||
background: #015e94;
|
||||
background: linear-gradient(#5598c9,#2a6da2);
|
||||
text-align: center;
|
||||
text-shadow: rgba(255,255,255,.496094) 0 1px 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.jianguo-blue-main-btn{
|
||||
background: #567CE6;
|
||||
background: linear-gradient(#799CEA,#567CE6);
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.1), inset 0 -1px 2px rgba(0,0,0,.2);
|
||||
}
|
||||
.big-main-btn{
|
||||
height: 48px;
|
||||
}
|
||||
.big-main-btn{
|
||||
float: right;
|
||||
background: #5d86e5;
|
||||
background: -webkit-linear-gradient(#688fe8,#5079e1);
|
||||
background: linear-gradient(#688fe8,#5079e1);
|
||||
}
|
||||
.big-main-btn.jianguo-blue-main-btn.disabled-btn{
|
||||
background: #A9A9A9;
|
||||
background: linear-gradient(#BFBFBF,#999);
|
||||
box-shadow: none;
|
||||
}
|
||||
.blue-main-btn a, .gray-main-btn a, .jianguo-blue-main-btn a{
|
||||
display: block;
|
||||
padding: 2px 0;
|
||||
border-radius: 9px;
|
||||
background: #5f7ed7;
|
||||
background: linear-gradient(#739fe1,#5f7ed7);
|
||||
box-shadow: inset 0 1px 3px #92b6ec, inset 0 0 2px #627dca, inset 0 -2px 3px #4c69b8;
|
||||
text-shadow: #4f70b3 0 -1px 0;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
.jianguo-blue-main-btn a{
|
||||
background: #6C94F3;
|
||||
background: linear-gradient(#7EA3F5,#5A82F0);
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
color: #FFF;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
.big-main-btn a{
|
||||
height: 44px;
|
||||
line-height: 45px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.big-main-btn a{
|
||||
padding: 2px 32px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.jianguo-blue-main-btn.disabled-btn a,
|
||||
.jianguo-blue-main-btn.disabled-btn:active a,
|
||||
.jianguo-blue-main-btn.disabled-btn:hover a{
|
||||
background: #B7B7B7;
|
||||
background: linear-gradient(#C3C3C3,#ABAAAA);
|
||||
box-shadow: inset 0 1px 3px #CCC;
|
||||
}
|
||||
.disabled-btn, .disabled-btn a{
|
||||
opacity: .7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@ -0,0 +1,463 @@
|
||||
@charset "utf-8";
|
||||
.nav-sub{
|
||||
display: none;
|
||||
}
|
||||
.content{
|
||||
clear: both;
|
||||
width: 1220px;
|
||||
min-height: 600px;
|
||||
padding: 0 0 25px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.page-order-checkout{
|
||||
padding-top: 40px;
|
||||
}
|
||||
.gray-box{
|
||||
overflow: hidden;
|
||||
border: 1px solid #D1D1D1;
|
||||
border-color: rgba(0,0,0,.14);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 3px 8px -6px rgba(0,0,0,.1);
|
||||
}
|
||||
.gray-box, .gray-btn-menu-on:hover{
|
||||
background: #FFF;
|
||||
}
|
||||
.page-order-checkout .gray-box{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.gray-box .title{
|
||||
height: 60px;
|
||||
padding: 0 10px 0 28px;
|
||||
background: #F5F5F5;
|
||||
background: linear-gradient(#FFF,#F5F5F5);
|
||||
border-bottom: 1px solid #DCDCDC;
|
||||
border-radius: 10px 10px 0 0;
|
||||
box-shadow: 0 1px 7px rgba(0,0,0,.06);
|
||||
line-height: 60px;
|
||||
color: #646464;
|
||||
}
|
||||
.gray-box .pre-title{
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.gray-box .title h2{
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #626262;
|
||||
}
|
||||
.gray-box .columns-title h2{
|
||||
float: left;
|
||||
}
|
||||
.address-common-table .address-item-list{
|
||||
padding: 30px 13px 0;
|
||||
}
|
||||
.address-common-table .address-item-list li{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
width: 276px;
|
||||
height: 158px;
|
||||
margin: 0 0 30px 16px;
|
||||
border: 1px solid #E5E5E5;
|
||||
border-radius: 3px;
|
||||
background: #FAFAFA;
|
||||
line-height: 14px;
|
||||
text-align: left;
|
||||
word-wrap: break-word;
|
||||
word-break: normal;
|
||||
color: #626262;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.address-common-table .address-item-list li.selected-address-item{
|
||||
background: #FFF;
|
||||
border-color: #6A8FE5;
|
||||
}
|
||||
.address-common-table .address-item-list .address-item{
|
||||
padding: 19px 14px 0 19px;
|
||||
}
|
||||
.address-common-table .name-section{
|
||||
height: 16px;
|
||||
padding-right: 20px;
|
||||
line-height: 16px;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
.address-common-table .mobile-section{
|
||||
height: 14px;
|
||||
padding-top: 17px;
|
||||
line-height: 14px;
|
||||
color: #999;
|
||||
}
|
||||
.address-common-table .detail-section{
|
||||
padding-top: 6px;
|
||||
line-height: 24px;
|
||||
color: #999;
|
||||
}
|
||||
.address-common-table .address-item-list li.selected-address-item:after{
|
||||
content: '√';
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 17px;
|
||||
top: 19px;
|
||||
font-size: 24px;
|
||||
color: #6A8FE5;
|
||||
}
|
||||
.address-common-table .operation-section{
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
background: #E1E1E1;
|
||||
border-top: 1px solid #E1E1E1;
|
||||
transform: translate(0,29px);
|
||||
}
|
||||
.address-common-table .operation-section .delete-btn, .address-common-table .operation-section .update-btn{
|
||||
float: left;
|
||||
display: block;
|
||||
height: 28px;
|
||||
background: #FFF;
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
font-size: 12px;
|
||||
transition: background .15s ease;
|
||||
}
|
||||
.address-common-table .operation-section .update-btn{
|
||||
width: 137px;
|
||||
}
|
||||
.address-common-table .operation-section .delete-btn{
|
||||
float: right;
|
||||
width: 138px;
|
||||
}
|
||||
.address-common-table .add-address-item::before{
|
||||
content: '+';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 54px;
|
||||
height: 24px;
|
||||
margin-left: -10px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
color: #626262;
|
||||
}
|
||||
.address-common-table .add-address-item p{
|
||||
height: 14px;
|
||||
padding-top: 85px;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
.address-common-table .address-item-list li:hover{
|
||||
background: #F2F2F2;
|
||||
}
|
||||
.page-order-checkout .invoice-box{
|
||||
padding: 22px 29px 29px 28px;
|
||||
}
|
||||
.page-order-checkout .invoice-box .invoice-detail{
|
||||
position: relative;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
color: #666;
|
||||
}
|
||||
.page-order-checkout .invoice-box .radio-box{
|
||||
position: absolute;
|
||||
left: 65px;
|
||||
top: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.page-order-checkout .invoice-box .radio-box>label{
|
||||
margin-right: 5px;
|
||||
}
|
||||
.blue-radio{
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
padding: 4px;
|
||||
background: #F9F9F9;
|
||||
background: linear-gradient(#F5F6F6,#FDFDFD);
|
||||
border: 1px solid #E6E6E6;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,.05) inset;
|
||||
cursor: pointer;
|
||||
}
|
||||
.page-order-checkout .invoice-box .blue-radio{
|
||||
top: 4px;
|
||||
margin: 0 3px 0 6px;
|
||||
}
|
||||
.blue-radio-on a, .choose-radio-on .blue-radio a{
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #6C94F3;
|
||||
background: linear-gradient(#749AF4,#668EF2);
|
||||
border: 1px solid #5D81D9;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.2);
|
||||
}
|
||||
.module-form-row .small-item{
|
||||
width: 180px;
|
||||
height: 36px;
|
||||
border-radius: 4px;
|
||||
line-height: 36px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.page-order-checkout .invoice-box .module-form-row{
|
||||
position: absolute;
|
||||
left: 215px;
|
||||
top: -1px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.module-form-item-wrapper i{
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 0;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #bebebe;
|
||||
}
|
||||
.module-form-row .small-item i{
|
||||
font-size: 14px;
|
||||
}
|
||||
.page-order-checkout .invoice-box .module-form-item-wrapper{
|
||||
width: 338px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
}
|
||||
.module-form-item-wrapper{
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 372px;
|
||||
height: 46px;
|
||||
background-color: #FFF;
|
||||
box-shadow: 0 3px 5px -4px rgba(0,0,0,.4) inset, -1px 0 3px -2px rgba(0,0,0,.1) inset;
|
||||
border: 1px solid #CCC;
|
||||
border-radius: 6px;
|
||||
line-height: 46px;
|
||||
font-size: 16px;
|
||||
opacity: .618;
|
||||
transition: opacity .3s ease-in;
|
||||
}
|
||||
.page-order-checkout .invoice-box .module-form-item-wrapper i{
|
||||
left: 11px;
|
||||
}
|
||||
.module-form-item-wrapper input{
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
width: 290px;
|
||||
padding: 0 13px 0 15px;
|
||||
background: 0 0;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
.module-form-row .small-item input{
|
||||
padding-left: 15px;
|
||||
margin-top: 8px;
|
||||
width: 137px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.page-order-checkout .invoice-box .module-form-item-wrapper input{
|
||||
width: 310px;
|
||||
padding-left: 11px;
|
||||
}
|
||||
.page-order-checkout .invoice-box .invoice-label{
|
||||
position: relative;
|
||||
padding-top: 25px;
|
||||
margin-top: 11px;
|
||||
border-top: 1px solid #E5E5E5;
|
||||
line-height: 12px;
|
||||
text-indent: 10px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
.gray-box .gray-sub-title{
|
||||
height: 38px;
|
||||
padding: 0 24px;
|
||||
background: #EEE;
|
||||
border-top: 1px solid #DBDBDB;
|
||||
border-bottom: 1px solid #DBDBDB;
|
||||
line-height: 38px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
.ui-goods-cart .cart-table-title{
|
||||
padding: 0 0 0 29px;
|
||||
border-top: none;
|
||||
font-size: 12px;
|
||||
}
|
||||
.ui-goods-cart .cart-table-title span{
|
||||
float: right;
|
||||
text-align: center;
|
||||
}
|
||||
.ui-goods-cart .cart-table-title .name{
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
.ui-goods-cart .cart-table-title .num, .ui-goods-cart .cart-table-title .operation, .ui-goods-cart .cart-table-title .price, .ui-goods-cart .cart-table-title .subtotal{
|
||||
width: 130px;
|
||||
padding-right: 29px;
|
||||
text-align: right;
|
||||
}
|
||||
.ui-goods-cart .cart-table-title .num{
|
||||
width: 132px;
|
||||
}
|
||||
.ui-goods-cart .cart-table-title .price{
|
||||
width: 120px;
|
||||
}
|
||||
.ui-goods-cart .cart-group, .ui-goods-cart .cart-items{
|
||||
border-top: 1px solid #EBEBEB;
|
||||
}
|
||||
.ui-goods-cart .cart-items{
|
||||
position: relative;
|
||||
height: 110px;
|
||||
padding-left: 29px;
|
||||
color: #666;
|
||||
}
|
||||
.ui-goods-cart .cart-group:first-child, .ui-goods-cart .cart-items:first-child{
|
||||
border-top: none;
|
||||
}
|
||||
.ui-goods-cart .cart-items .items-choose, .ui-goods-cart .cart-items .items-thumb, .ui-goods-cart .cart-items .name{
|
||||
float: left;
|
||||
}
|
||||
.ui-goods-cart .cart-items .items-thumb, .ui-goods-cart .cart-items .items-thumb img{
|
||||
width: 78px;
|
||||
height: 78px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.ui-goods-cart .cart-items .items-thumb{
|
||||
margin-top: 15px;
|
||||
border: 1px solid #EBEBEB;
|
||||
}
|
||||
.ui-goods-cart .cart-items .name{
|
||||
display: table;
|
||||
width: 420px;
|
||||
height: 100%;
|
||||
margin-left: 30px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.ui-goods-cart .cart-items .name-cell{
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ui-goods-cart .cart-items .name a{
|
||||
color: #333;
|
||||
}
|
||||
.ui-goods-cart .cart-items .subtotal{
|
||||
float: right;
|
||||
display: table;
|
||||
width: 129px;
|
||||
height: 100%;
|
||||
padding-right: 29px;
|
||||
text-align: right;
|
||||
line-height: 24px;
|
||||
color: #333;
|
||||
}
|
||||
.ui-goods-cart .cart-items .subtotal-cell{
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ui-goods-cart .cart-items .goods-num, .ui-goods-cart .cart-items .operation, .ui-goods-cart .cart-items .price, .ui-goods-cart .cart-items .select{
|
||||
overflow: hidden;
|
||||
float: right;
|
||||
width: 129px;
|
||||
padding-right: 29px;
|
||||
line-height: 110px;
|
||||
text-align: right;
|
||||
color: #333;
|
||||
}
|
||||
.ui-goods-cart .cart-items .goods-num{
|
||||
width: 64px;
|
||||
padding: 0 9px 0 90px;
|
||||
text-align: center;
|
||||
}
|
||||
.ui-goods-cart .cart-items .price{
|
||||
width: 120px;
|
||||
}
|
||||
.page-order-checkout .order-discount-line{
|
||||
padding: 21px 30px;
|
||||
border-top: 1px solid #EBEBEB;
|
||||
line-height: 30px;
|
||||
text-align: right;
|
||||
}
|
||||
.page-order-checkout .order-discount-line span{
|
||||
float: right;
|
||||
width: 157px;
|
||||
}
|
||||
.page-order-checkout .last-payment{
|
||||
padding: 22px 29px 19px 30px;
|
||||
background: linear-gradient(#FCFCFC,#F5F5F5);
|
||||
border-top: 1px solid #DADADA;
|
||||
box-shadow: -3px 0 8px rgba(0,0,0,.04);
|
||||
}
|
||||
.blue-main-btn, .gray-main-btn, .jianguo-blue-main-btn{
|
||||
display: block;
|
||||
padding: 1px;
|
||||
margin: 0 auto;
|
||||
border-radius: 6px;
|
||||
background: #015e94;
|
||||
background: linear-gradient(#5598c9,#2a6da2);
|
||||
text-align: center;
|
||||
text-shadow: rgba(255,255,255,.496094) 0 1px 0;
|
||||
font-family: 'Microsoft Yahei','微软雅黑','PingFang SC',sans-serif;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.jianguo-blue-main-btn{
|
||||
background: #6383C6;
|
||||
background: linear-gradient(#6383C6,#4262AF);
|
||||
box-shadow: none;
|
||||
}
|
||||
.big-main-btn{
|
||||
height: 46px;
|
||||
}
|
||||
.page-order-checkout .payment-blue-bt, .page-order-checkout .payment-blue-bt a{
|
||||
width: 136px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.blue-main-btn a, .gray-main-btn a, .jianguo-blue-main-btn a{
|
||||
display: block;
|
||||
padding: 2px 0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.jianguo-blue-main-btn a{
|
||||
background: linear-gradient(#6F97E5,#527ED9);
|
||||
box-shadow: inset 0 1px 2px #7EA1E8;
|
||||
text-shadow: 0 -1px 0 #4F70B3;
|
||||
color: #FFF;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
.big-main-btn a{
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
width: 136px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.jianguo-blue-main-btn:hover a{
|
||||
box-shadow: inset 0 1px 1px #7696DE, inset 0 0 2px #627DCA, inset 0 -2px 3px #5A77C7, inset 0 0 100px rgba(48,77,147,.4);
|
||||
}
|
||||
.page-order-checkout .last-payment .prices{
|
||||
padding: 0 40px;
|
||||
line-height: 50px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.page-order-checkout .last-payment .prices em{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
margin-top: -4px;
|
||||
font-size: 24px;
|
||||
color: #D44D44;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,225 @@
|
||||
@charset "utf-8";
|
||||
.sku-box{
|
||||
position: relative;
|
||||
}
|
||||
.sort-option{
|
||||
border-top: 1px solid #D8D8D8;
|
||||
color: #999;
|
||||
}
|
||||
.sort-option ul{
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
}
|
||||
.sort-option li{
|
||||
position: relative;
|
||||
float: left;
|
||||
padding-left: 42px;
|
||||
}
|
||||
.sort-option li:first-child{
|
||||
padding-left: 9px;
|
||||
}
|
||||
.sort-option li:before{
|
||||
content: ' ';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 50%;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
margin-top: -1px;
|
||||
background: #C7C7C7;
|
||||
}
|
||||
.sort-option li:first-child:before{
|
||||
display: none;
|
||||
}
|
||||
.sort-option a{
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
.sort-option a.active, .sort-option a:hover{
|
||||
color: #5683EA;
|
||||
}
|
||||
.gray-box{
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #dcdcdc;
|
||||
border-color: rgba(0,0,0,.14);
|
||||
box-shadow: 0 3px 8px -6px rgba(0,0,0,.1);
|
||||
}
|
||||
.sku-box .item-box{
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
margin: 0 -1px -1px -1px;
|
||||
}
|
||||
.sku-box .item{
|
||||
position: relative;
|
||||
float: left;
|
||||
border-right: 1px solid #efefef;
|
||||
border-bottom: 1px solid #efefef;
|
||||
width: 25%;
|
||||
height: 429px;
|
||||
background: #fff;
|
||||
box-sizing: border-box
|
||||
}
|
||||
.sku-box .item:hover{
|
||||
box-shadow: 0 0 38px rgba(0,0,0,.08) inset;
|
||||
transition: all .15s ease;
|
||||
}
|
||||
.sku-box .item .item-img img{
|
||||
display: block;
|
||||
width: 206px;
|
||||
height: 206px;
|
||||
margin: 50px auto 10px;
|
||||
}
|
||||
.sku-box .item h3, .sku-box .item h6{
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.sku-box .item h6{
|
||||
line-height: 1.2;
|
||||
font-size: 16px;
|
||||
color: #424242;
|
||||
margin: 0 auto;
|
||||
padding: 0 14px;
|
||||
}
|
||||
.sku-box .item h3{
|
||||
line-height: 1.2;
|
||||
font-size: 12px;
|
||||
color: #d0d0d0;
|
||||
margin: 8px auto 14px;
|
||||
}
|
||||
.sku-box .item .params-colors{
|
||||
margin-top: 23px;
|
||||
text-align: center;
|
||||
}
|
||||
.sku-box .item .colors-list{
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sku-box .item .colors-list li{
|
||||
float: left;
|
||||
margin: 0 5px;
|
||||
}
|
||||
.sku-box .item .colors-list>li a{
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border: 1px solid #e5e5e5;
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
padding: 2px;
|
||||
display: block;
|
||||
}
|
||||
.sku-box .item .colors-list>li a.active{
|
||||
box-shadow: inset 0 0 0 1px #b2b2b2;
|
||||
border-color: #b2b2b2;
|
||||
}
|
||||
.sku-box .item .colors-list>li img{
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
}
|
||||
.sku-box .item .item-btns{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 29px;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.sku-box .item:hover .item-btns{
|
||||
opacity: 1;
|
||||
transition: all .2s ease-in;
|
||||
}
|
||||
.sku-box .item .item-btns .item-blue-btn, .sku-box .item .item-btns .item-disabled-btn, .sku-box .item .item-btns .item-gray-btn, .sku-box .item .item-btns .item-green-btn{
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
font-size: 12px;
|
||||
line-height: 28px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: 200;
|
||||
transition: all .1s ease;
|
||||
}
|
||||
.sku-box .item .item-btns .item-gray-btn{
|
||||
border: 1px solid #d5d5d5;
|
||||
color: #646464;
|
||||
}
|
||||
.sku-box .item .item-btns .item-gray-btn a{
|
||||
display: block;
|
||||
color: #a1a1a1;
|
||||
}
|
||||
.sku-box .item .item-btns .item-gray-btn:hover{
|
||||
background-image: linear-gradient(#f6f6f6,#ededed);
|
||||
}
|
||||
.sku-box .item .item-btns .item-blue-btn{
|
||||
background-color: #5c85e5;
|
||||
background-image: linear-gradient(#779ae9,#5078df);
|
||||
border: 1px solid #5c81e3;
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.sku-box .item .item-btns .item-blue-btn:hover{
|
||||
border: 1px solid #5374c8;
|
||||
background-color: #5074db;
|
||||
background-image: linear-gradient(#6e8ed5,#4769c2);
|
||||
}
|
||||
.sku-box .item .item-btns .item-blue-btn:active{
|
||||
border: 1px solid #3e61d7;
|
||||
background-color: #5c85e5;
|
||||
background-image: linear-gradient(#4d72de,#6189e6);
|
||||
}
|
||||
.sku-box .item .item-price{
|
||||
font-family: Arial;
|
||||
color: #c30a18;
|
||||
margin-top: 24px;
|
||||
text-align: center;
|
||||
opacity: 1;
|
||||
}
|
||||
.sku-box .item .item-price i{
|
||||
font-size: 16px;
|
||||
}
|
||||
.sku-box .item .item-price span{
|
||||
font-size: 18px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
.sku-box .item:hover .item-price{
|
||||
opacity: 0;
|
||||
transition: all .1s ease-out;
|
||||
}
|
||||
.sku-box .item .discount-icon{
|
||||
display: none;
|
||||
}
|
||||
.sku-box .item .item-cover a{
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
width: 100%;
|
||||
height: 310px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,540 @@
|
||||
@charset "utf-8";
|
||||
.nav-global{
|
||||
height: 100px;
|
||||
background-color: #e8fae7;
|
||||
}
|
||||
.container{
|
||||
height: 100%;
|
||||
width: 1220px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
/*logo*/
|
||||
.nav-logo{
|
||||
float: left;
|
||||
}
|
||||
.nav-logo a{
|
||||
display: inline-block;
|
||||
width: 76px;
|
||||
height: 98px;
|
||||
background: url(../img/test1.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
/*导航*/
|
||||
.nav-global .nav-list{
|
||||
float: right;
|
||||
line-height: 28px;
|
||||
margin: 36px 23px 0 0;
|
||||
}
|
||||
.nav-global .nav-list li{
|
||||
float: left;
|
||||
|
||||
}
|
||||
.nav-global .nav-list a{
|
||||
color: #000000;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
padding: 0 25px;
|
||||
}
|
||||
.nav-global .nav-list a:hover{
|
||||
color: #05aa34;
|
||||
}
|
||||
.nav-aside{
|
||||
box-sizing: border-box;
|
||||
float: right;
|
||||
margin-top: 38px;
|
||||
border-left: 1px solid rgba(255,255,255,.2);
|
||||
}
|
||||
.nav-aside>li{
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
.nav-aside>li>a{
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
/*用户列表*/
|
||||
.nav-user{
|
||||
margin-left: 40px;
|
||||
width: 36px;
|
||||
}
|
||||
.nav-user>a:before{
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
width: 20px;
|
||||
top: 0;
|
||||
height: 20px;
|
||||
background: url(../img/account-icon.png) -155px 0;
|
||||
background-size: 240px 107px;
|
||||
transition: none;
|
||||
}
|
||||
/* .nav-user:hover>a:before{
|
||||
background-position: -5px 0;
|
||||
} */
|
||||
.nav-user-wrapper{
|
||||
position: absolute;
|
||||
z-index: 30;
|
||||
padding-top: 18px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
top: -3000px;
|
||||
width: 168px;
|
||||
left: 50%;
|
||||
margin-left: -70px;
|
||||
}
|
||||
.nav-user:hover .nav-user-wrapper{
|
||||
top: 18px;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity .15s ease-out;
|
||||
}
|
||||
.nav-user-list{
|
||||
position: relative;
|
||||
width: 168px;
|
||||
padding-top: 20px;
|
||||
background: #fff;
|
||||
border: 1px solid #d6d6d6;
|
||||
border-color: rgba(0,0,0,.08);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,.15)
|
||||
}
|
||||
.nav-user-list:before{
|
||||
position: absolute;
|
||||
content: " ";
|
||||
background: url(../img/account-icon.png) no-repeat -49px -43px;
|
||||
background-size: 240px 107px;
|
||||
width: 20px;
|
||||
height: 8px;
|
||||
left: 50%;
|
||||
top: -8px;
|
||||
margin-left: -25px;
|
||||
}
|
||||
.nav-user-avatar>dd{
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.nav-user-avatar>dd:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: 50%;
|
||||
box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
|
||||
}
|
||||
.nav-user-avatar span{
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(../img/user-avatar.png) no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.nav-user-avatar dt{
|
||||
margin-bottom: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
color: #757575;
|
||||
}
|
||||
.nav-user-list li a{
|
||||
position: relative;
|
||||
border-top: 1px solid #f5f5f5;
|
||||
display: block;
|
||||
padding-left: 54px;
|
||||
line-height: 44px;
|
||||
height: 44px;
|
||||
color: #616161;
|
||||
font-size: 12px;
|
||||
}
|
||||
.nav-user-list li a:hover{
|
||||
background-color: #05aa34;
|
||||
}
|
||||
.nav-user-list li a:before{
|
||||
background: url(../img/account-icon.png) no-repeat;
|
||||
background-size: 240px 107px;
|
||||
content: ' ';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 22px;
|
||||
top: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: -8px;
|
||||
}
|
||||
.nav-user-list li.order a:before{
|
||||
background-position: 0 -44px;
|
||||
}
|
||||
.nav-user-list li.support a:before{
|
||||
background-position: -20px -44px;
|
||||
}
|
||||
.nav-user-list li.coupon a:before{
|
||||
background-position: -20px -84px;
|
||||
}
|
||||
.nav-user-list li.information a:before{
|
||||
background-position: 0 -64px;
|
||||
}
|
||||
.nav-user-list li.address a:before{
|
||||
background-position: -20px -64px;
|
||||
}
|
||||
.nav-user-list li.logout a:before{
|
||||
background-position: 0 -84px;
|
||||
}
|
||||
/*购物车*/
|
||||
.nav-cart{
|
||||
margin-left: 21px;
|
||||
width: 61px;
|
||||
}
|
||||
.nav-cart>a{
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.nav-cart>a:before{
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
background: url(../img/account-icon.png) -150px -22px;
|
||||
background-size: 240px 107px;
|
||||
}
|
||||
/* .nav-cart:hover>a:before{
|
||||
background-position: 0 -22px;
|
||||
} */
|
||||
.cart-empty-num{
|
||||
position: relative;
|
||||
margin-left: 31px;
|
||||
margin-top: -1px;
|
||||
min-width: 30px;
|
||||
text-indent: 0;
|
||||
line-height: 20px;
|
||||
}
|
||||
.cart-empty-num i{
|
||||
font-style: normal;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background: #969696;
|
||||
background-image: linear-gradient(#A4A4A4,#909090);
|
||||
box-shadow: inset 0 0 1px #838383, 0 1px 2px #838383;
|
||||
}
|
||||
.cart-num i {
|
||||
background: #eb746b;
|
||||
background-image: linear-gradient(#eb746b,#e25147);
|
||||
box-shadow: inset 0 0 1px rgba(255,255,255,.15), 0 1px 2px rgba(255,255,255,.15);
|
||||
}
|
||||
.nav-cart-wrapper{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
padding-top: 18px;
|
||||
opacity: 1;
|
||||
top: 18px;
|
||||
z-index: 30;
|
||||
width: 360px;
|
||||
}
|
||||
.nav-cart-wrapper:before{
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
background: url(../img/account-icon.png) no-repeat -49px -43px;
|
||||
-webkit-background-size: 240px 107px;
|
||||
background-size: 240px 107px;
|
||||
width: 20px;
|
||||
height: 8px;
|
||||
right: 34px;
|
||||
top: 10px;
|
||||
z-index: 11;
|
||||
}
|
||||
.nav-cart.active .nav-cart-wrapper{
|
||||
display: block;
|
||||
top: 18px;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.nav-cart-list{
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
background: #fff;
|
||||
border: 0 solid rgba(255,255,255,.01);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 20px 40px rgba(0,0,0,.15);
|
||||
overflow: hidden;
|
||||
}
|
||||
.nav-cart-list .empty{
|
||||
overflow: hidden;
|
||||
height: 134px;
|
||||
padding-top: 180px;
|
||||
background: url(../img/cart-empty.png) center 90px no-repeat;
|
||||
background-size: auto 62px;
|
||||
text-align: center;
|
||||
}
|
||||
.nav-cart-list .empty h3{
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
.nav-cart-list .empty p{
|
||||
font-size: 12px;
|
||||
color: #bcbcbc;
|
||||
}
|
||||
.nav-cart-list .full{
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.nav-cart-list .nav-cart-items{
|
||||
max-height: 665px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.nav-cart-list .cart-item{
|
||||
height: 120px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
.nav-cart-list .cart-item:first-child{
|
||||
border-top: none;
|
||||
border-radius: 8px 8px 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.nav-cart-list .cart-item-inner{
|
||||
height: 80px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.nav-cart-list .item-thumb{
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.nav-cart-list .item-thumb:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
border: 1px solid #f0f0f0;
|
||||
border: 0 solid transparent;
|
||||
box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.nav-cart-list .item-thumb img{
|
||||
display: block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.nav-cart-list .item-desc{
|
||||
margin-left: 98px;
|
||||
display: table;
|
||||
width: 205px;
|
||||
height: 80px;
|
||||
}
|
||||
.nav-cart-list .cart-cell{
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.nav-cart-list .item-desc h4, .nav-cart-list .item-desc h4 a{
|
||||
color: #000;
|
||||
}
|
||||
.nav-cart-list .item-desc h4{
|
||||
width: 185px;
|
||||
overflow: hidden;
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.nav-cart-list .item-desc .attrs{
|
||||
font-size: 0;
|
||||
}
|
||||
.nav-cart-list .item-desc .attrs span{
|
||||
position: relative; */
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
color: #999;
|
||||
}
|
||||
.nav-cart-list .item-desc .attrs span:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
.nav-cart-list .item-desc h6{
|
||||
color: #cacaca;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.nav-cart-list .del-btn{
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 50%;
|
||||
margin-top: -11px;
|
||||
background: url(../img/account-icon.png) -50px -60px no-repeat;
|
||||
background-size: 240px 107px;
|
||||
text-indent: -9999em;
|
||||
}
|
||||
.nav-cart-list .cart-item:hover .del-btn{
|
||||
display: block;
|
||||
}
|
||||
.nav-cart-list .del-btn:hover{
|
||||
background-position: -75px -60px;
|
||||
}
|
||||
.nav-cart-list .nav-cart-total{
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
height: 40px;
|
||||
background: #fafafa;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
border-radius: 0 0 8px 8px;
|
||||
box-shadow: inset 0 -1px 0 rgba(255,255,255,.5), 0 -3px 8px rgba(0,0,0,.04);
|
||||
background: linear-gradient(#fafafa,#f5f5f5);
|
||||
}
|
||||
.nav-cart-list .nav-cart-total p{
|
||||
margin-bottom: 4px;
|
||||
line-height: 16px;
|
||||
font-size: 12px;
|
||||
color: #c1c1c1;
|
||||
}
|
||||
.nav-cart-list .nav-cart-total h5{
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
color: #6f6f6f;
|
||||
}
|
||||
.nav-cart-list .nav-cart-total h5 span{
|
||||
font-size: 18px;
|
||||
color: #de4037;
|
||||
display: inline-block;
|
||||
font-weight: 700;
|
||||
}
|
||||
.nav-cart-list .nav-cart-total h5 span:first-child{
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.nav-cart-list .nav-cart-total h5 span{
|
||||
font-size: 18px;
|
||||
color: #de4037;
|
||||
display: inline-block;
|
||||
font-weight: 700;
|
||||
}
|
||||
.nav-cart-list .nav-cart-total h6{
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
width: 108px;
|
||||
|
||||
}
|
||||
.nav-aside .nav-cart-btn{
|
||||
display: block;
|
||||
height: 38px;
|
||||
background: #688fe8;
|
||||
background: linear-gradient(#688fe8,#5079e1);
|
||||
border: 1px solid #5c81e3;
|
||||
border-radius: 6px;
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 3px rgba(0,0,0,.2);
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
color: #FFF;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.15)
|
||||
}
|
||||
/*次导航*/
|
||||
.nav-sub{
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
height: 90px;
|
||||
}
|
||||
.nav-sub-wrapper{
|
||||
padding: 31px 0;
|
||||
height: 28px;
|
||||
position: relative;
|
||||
}
|
||||
.nav-sub .nav-list{
|
||||
float: left;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.nav-sub .nav-list li{
|
||||
position: relative;
|
||||
float: left;
|
||||
padding-left: 2px;
|
||||
}
|
||||
.nav-sub .nav-list li:first-child{
|
||||
padding-left: 0;
|
||||
}
|
||||
.nav-sub .nav-list li:before{
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 13px;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background: #bdbdbd;
|
||||
}
|
||||
.nav-sub .nav-list li:first-child:before{
|
||||
display: none;
|
||||
}
|
||||
.nav-sub .nav-list li a{
|
||||
display: block;
|
||||
padding: 0 20px;
|
||||
color: #666;
|
||||
}
|
||||
.nav-sub .nav-list li:first-child a{
|
||||
padding-left: 10px;
|
||||
}
|
||||
.nav-sub .nav-list li.active a{
|
||||
font-weight: 700;
|
||||
}
|
||||
.nav-sub .nav-list li a:hover{
|
||||
color: #05aa34;
|
||||
}
|
||||
.nav-global .addcart-mask{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -5px;
|
||||
padding: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
pointer-events: none;
|
||||
z-index: 240;
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
.nav-global .addcart-mask .mask-item{
|
||||
pointer-events: none;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 3px 8px rgba(0,0,0,.1);
|
||||
background-size: contain;
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
@ -0,0 +1,297 @@
|
||||
@charset "utf-8";
|
||||
.item-box{
|
||||
width: 1098px;
|
||||
padding: 60px;
|
||||
margin-bottom: 20px;
|
||||
display: table;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #dcdcdc;
|
||||
border-color: rgba(0,0,0,.14);
|
||||
box-shadow: 0 3px 8px -6px rgba(0,0,0,.1);
|
||||
}
|
||||
.banner, .gallery-wrapper{
|
||||
display: table-cell;
|
||||
}
|
||||
.gallery-wrapper{
|
||||
vertical-align: top;
|
||||
}
|
||||
.gallery{
|
||||
float: left;
|
||||
width: 540px;
|
||||
display: table-cell;
|
||||
}
|
||||
.thumb, .thumbnail{
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.thumbnail li{
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
margin-top: 10px;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(0,0,0,.06);
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.thumbnail li:first-child{
|
||||
margin-top: 0;
|
||||
}
|
||||
.thumbnail li.on{
|
||||
padding: 10px;
|
||||
border: 3px solid #ccc;
|
||||
border: 3px solid rgba(0,0,0,.2);
|
||||
}
|
||||
item-box img{
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.thumb>ul{
|
||||
margin-left: 20px;
|
||||
width: 440px;
|
||||
height: 440px;
|
||||
position: relative;
|
||||
}
|
||||
.thumb li{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
text-align: center;\
|
||||
user-select: none;
|
||||
}
|
||||
.thumb li.on{
|
||||
animation: thumb-change .35s ease-out 1;
|
||||
position: relative;
|
||||
display: block;
|
||||
z-index: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
.item-box .banner{
|
||||
vertical-align: middle;
|
||||
width: 450px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.item-box .banner .sku-custom-title{
|
||||
overflow: hidden;
|
||||
padding: 8px 8px 18px 10px;
|
||||
position: relative;
|
||||
}
|
||||
.item-box .banner .params-price{
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
bottom: 19px;
|
||||
}
|
||||
.item-box .banner .params-price span{
|
||||
display: block;
|
||||
color: #de4037;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
.item-box .banner .params-price span i{
|
||||
padding-left: 2px;
|
||||
font-size: 24px;
|
||||
}
|
||||
.item-box .banner .sku-custom-title .params-info{
|
||||
width: 360px;
|
||||
}
|
||||
.item-box .banner .sku-custom-title h4{
|
||||
font-size: 24px;
|
||||
line-height: 1.25;
|
||||
color: #000;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.item-box .banner .sku-custom-title h6{
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #bdbdbd;
|
||||
}
|
||||
.item-box .banner .sku-dynamic-params-panel{
|
||||
padding: 29px 0 8px 10px;
|
||||
border-top: 1px solid #ebebeb;
|
||||
}
|
||||
.item-box .banner .sku-dynamic-params{
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
.item-box .banner .params-name{
|
||||
float: left;
|
||||
padding-right: 20px;
|
||||
font-size: 14px;
|
||||
color: #8d8d8d;
|
||||
line-height: 36px;
|
||||
}
|
||||
.item-box .banner .sku-dynamic-params .params-colors{
|
||||
float: left;
|
||||
line-height: 36px;
|
||||
margin: -10px 0 0 -10px;
|
||||
width: 402px;
|
||||
}
|
||||
.item-box .banner .sku-dynamic-params .params-colors>li{
|
||||
float: left;
|
||||
margin: 10px 0 0 10px;
|
||||
}
|
||||
.item-box .banner .sku-dynamic-params .params-colors>li a{
|
||||
display: block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: 2px solid #E5E5E5;
|
||||
padding: 3px;
|
||||
text-align: center;
|
||||
color: #757575;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.item-box .banner .sku-dynamic-params .params-colors>li.cur a{
|
||||
border-color: #B2B2B2;
|
||||
box-shadow: inset 0 0 0 1px #B2B2B2;
|
||||
}
|
||||
.item-box .banner .sku-dynamic-params .params-colors>li i, .item-box .banner .sku-dynamic-params .params-colors>li img{
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.item-box .banner .sku-dynamic-params{
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
.item-box .banner .params-detail{
|
||||
line-height: 36px;
|
||||
float: left;
|
||||
width: 392px;
|
||||
}
|
||||
.item-box .item-num{
|
||||
float: left;
|
||||
width: 128px;
|
||||
}
|
||||
.item-box .item-num .down:before, .item-box .item-num .up:before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
right: -4px;
|
||||
top: 0;
|
||||
height: 45px;
|
||||
background: url(../img/cart-updown-item.png) no-repeat;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
.item-box .item-num .down:before{
|
||||
content: " ";
|
||||
background-position: 0 -60px;
|
||||
}
|
||||
.item-box .item-num .down:hover:before{
|
||||
content: " ";
|
||||
background-position: 0 -180px;
|
||||
}
|
||||
.item-box .item-num .down.down-disabled:before, .item-box .item-num .down.down-disabled:hover:before{
|
||||
content: " ";
|
||||
background-position: 0 -300px;
|
||||
}
|
||||
.item-box .item-num .down, .item-box .item-num .up{
|
||||
position: relative;
|
||||
float: left;
|
||||
display: inline-block;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
line-height: 40px;
|
||||
text-indent: -9999em;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.item-box .item-num .down.down-disabled, .item-box .item-num .up.up-disabled{
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.item-box .item-num .up:before{
|
||||
background-position: 0 0;
|
||||
}
|
||||
.item-box .item-num .up:hover:before{
|
||||
background-position: 0 -120px;
|
||||
}
|
||||
.item-box .item-num .up.up-disabled:before, .item-box .item-num .up.up-disabled:hover:before{
|
||||
content: " ";
|
||||
background-position: 0 -240px;
|
||||
}
|
||||
.item-box .item-num .num{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
display: inline-block;
|
||||
width: 56px;
|
||||
height: 18px;
|
||||
margin: 7px 0 0;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.item-box .item-num input{
|
||||
width: 56px;
|
||||
height: 18px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding: 0;
|
||||
}
|
||||
.item-box .item-num ul{
|
||||
/*display: none;*/
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 56px;
|
||||
}
|
||||
.item-box .item-num ul li{
|
||||
width: 56px;
|
||||
height: 18px;
|
||||
}
|
||||
.item-box .sku-status{
|
||||
position: relative;
|
||||
border-top: 1px solid #ebebeb;
|
||||
padding: 30px 0 0 10px;
|
||||
}
|
||||
.item-box .blue-title-btn{
|
||||
float: left;
|
||||
display: inline-block;
|
||||
width: 143px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
border-radius: 7px;
|
||||
border: 1px solid #5c81e3;
|
||||
background-color: #5c85e5;
|
||||
background-image: linear-gradient(#779ae9,#5078df);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.item-box .blue-title-btn:hover{
|
||||
transition: all .15s ease-out;
|
||||
box-shadow: inset 0 1px 1px #7696DE, inset 0 0 2px #627DCA, inset 0 -2px 3px #5A77C7, inset 0 0 100px rgba(48,77,147,.4);
|
||||
}
|
||||
.item-box .blue-title-btn a, .item-box .green-title-btn a{
|
||||
color: #fff;
|
||||
}
|
||||
.item-box .cart-operation-wrapper .gray-title-btn{
|
||||
margin-left: 20px;
|
||||
}
|
||||
.item-box .gray-title-btn{
|
||||
display: inline-block;
|
||||
width: 143px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
background: linear-gradient(#fff,#fafafa);
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 7px;
|
||||
color: #8c8c8c;
|
||||
cursor: pointer;
|
||||
}
|
||||
.item-box .gray-title-btn:hover{
|
||||
transition: all .15s ease-out;
|
||||
background: linear-gradient(#f6f6f6,#ededed);
|
||||
}
|
||||
@ -0,0 +1,288 @@
|
||||
@charset "utf-8";
|
||||
.account-order .gray-box{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.gray-box .columns-title h2{
|
||||
float: left;
|
||||
}
|
||||
.gray-btn-menu{
|
||||
display: inline-block;
|
||||
height: 36px;
|
||||
background: #F2F2F2;
|
||||
background: linear-gradient(#FFF,#F5F5F5);
|
||||
border: 1px solid #DBDDE2;
|
||||
border-radius: 4px;
|
||||
line-height: 36px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
.account-order .sort-status-menu{
|
||||
width: 112px;
|
||||
}
|
||||
.gray-box .title .gray-btn-menu, .gray-box .title span.gray-normal-btn{
|
||||
margin: 10px 0 0 10px;
|
||||
}
|
||||
.gray-box .title .gray-btn-menu{
|
||||
overflow: visible;
|
||||
float: right;
|
||||
}
|
||||
.gray-btn-menu .label{
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
padding: 0 13px 0 16px;
|
||||
text-align: left;
|
||||
color: #666;
|
||||
}
|
||||
.gray-box .title .gray-btn-menu .label{
|
||||
overflow: visible;
|
||||
float: none;
|
||||
margin-top: 0;
|
||||
}
|
||||
.gray-btn-menu .label .arrow{
|
||||
float: right;
|
||||
width: 10px;
|
||||
height: 7px;
|
||||
margin: 16px 0 0 6px;
|
||||
background: url(../img/btn-icon-new.png) -15px -571px no-repeat;
|
||||
}
|
||||
.gray-btn-menu .menu-list{
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
top: -1px;
|
||||
width: 100%;
|
||||
padding: 38px 0 6px;
|
||||
background: #FFF;
|
||||
border: 1px solid #dbdde2;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 3px 0 #EEE;
|
||||
}
|
||||
.gray-btn-menu-on .menu-list, .white-btn-menu-on .menu-list{
|
||||
display: block;
|
||||
}
|
||||
.gray-btn-menu .menu-list li{
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
padding: 0 3px 3px;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
}
|
||||
.gray-btn-menu .menu-list li a{
|
||||
display: block;
|
||||
padding: 0 15px;
|
||||
border-radius: 3px;
|
||||
color: #999;
|
||||
}
|
||||
.gray-btn-menu .menu-list li a:hover{
|
||||
background: #C7C7CA;
|
||||
color: #FFF;
|
||||
}
|
||||
.gray-btn-menu .menu-list li.selected a{
|
||||
background: #8F9096;
|
||||
color: #FFF;
|
||||
cursor: default;
|
||||
}
|
||||
.account-order .sort-time-menu{
|
||||
width: 118px;
|
||||
}
|
||||
.gray-btn-menu-on .label .arrow, .white-btn-menu-on .label .arrow{
|
||||
margin-top: 15px;
|
||||
background-position: -15px -521px;
|
||||
}
|
||||
.gray-btn-menu-on, .white-btn-menu-on{
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
height: auto;
|
||||
background: #FFF;
|
||||
}
|
||||
.gray-btn-menu-on{
|
||||
border: 1px solid #DBDDE2;
|
||||
}
|
||||
.gray-box, .gray-btn-menu-on:hover{
|
||||
background: #FFF;
|
||||
}
|
||||
.gray-box .gray-sub-title{
|
||||
height: 38px;
|
||||
padding: 0 24px;
|
||||
background: #EEE;
|
||||
border-top: 1px solid #DBDBDB;
|
||||
border-bottom: 1px solid #DBDBDB;
|
||||
line-height: 38px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
.account-order .gray-box .box-inner:first-child .gray-sub-title{
|
||||
border-top: none;
|
||||
}
|
||||
.order-list-cart .cart-title span{
|
||||
float: right;
|
||||
text-align: center;
|
||||
}
|
||||
.order-list-cart .cart-title .operation, .order-list-cart .cart-title .order-detail, .order-list-cart .cart-title .sub-total{
|
||||
float: right;
|
||||
}
|
||||
.order-list-cart .cart-title .date, .order-list-cart .cart-title .order-id{
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
.order-list-cart .cart-title .date{
|
||||
width: 108px;
|
||||
padding-left: 6px;
|
||||
}
|
||||
.order-list-cart .cart-title .order-detail{
|
||||
width: 82px;
|
||||
padding-left: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
.order-list-cart .cart-title .sub-total{
|
||||
width: 102px;
|
||||
padding-right: 18px;
|
||||
border-left: 1px solid #DBDBDB;
|
||||
text-align: right;
|
||||
}
|
||||
.order-list-cart .cart-title .operation{
|
||||
width: 95px;
|
||||
height: 38px;
|
||||
padding-right: 23px;
|
||||
}
|
||||
.order-list-cart .cart-title .num{
|
||||
width: 70px;
|
||||
}
|
||||
.order-list-cart .cart-title .price{
|
||||
width: 85px;
|
||||
padding-right: 27px;
|
||||
text-align: right;
|
||||
}
|
||||
.gray-box .gray-sub-title a{
|
||||
color: #6989E0;
|
||||
}
|
||||
.order-list-cart .cart{
|
||||
float: left;
|
||||
width: 737px;
|
||||
padding: 0;
|
||||
border-right: 1px solid #EBEBEB;
|
||||
}
|
||||
.order-cart .cart-items{
|
||||
position: relative;
|
||||
padding: 18px 0 28px;
|
||||
border-top: 1px solid #EFEFEF;
|
||||
}
|
||||
.order-list-cart .cart-items{
|
||||
height: 110px;
|
||||
padding: 0;
|
||||
}
|
||||
.order-cart .cart-items:first-child{
|
||||
border-top: none;
|
||||
}
|
||||
.order-cart .prod-info{
|
||||
position: relative;
|
||||
margin-left: 138px;
|
||||
}
|
||||
.order-list-cart .prod-info{
|
||||
padding: 15px 0 15px 111px;
|
||||
margin-left: 0;
|
||||
position: relative;
|
||||
}
|
||||
.order-list-cart .items-thumb{
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
top: 15px;
|
||||
width: 78px;
|
||||
height: 78px;
|
||||
border: 1px solid #EBEBEB;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.order-list-cart .items-thumb img{
|
||||
width: 78px;
|
||||
height: 78px;
|
||||
}
|
||||
.order-list-cart .items-params{
|
||||
float: left;
|
||||
height: 50px;
|
||||
padding: 15px 0;
|
||||
margin-left: 29px;
|
||||
border-bottom: none;
|
||||
line-height: 25px;
|
||||
}
|
||||
.order-cart .items-params .name{
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
color: #666;
|
||||
width: 435px;
|
||||
height: 44px;
|
||||
text-align: left;
|
||||
}
|
||||
.order-list-cart .prod-info .name{
|
||||
float: none;
|
||||
width: 220px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.order-list-cart .prod-info .vh-center{
|
||||
height: auto;
|
||||
line-height: 50px;
|
||||
}
|
||||
.hide-row, .order-cart .items-params .name, .support-cart .items-detail .detail{
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.order-list-cart .prod-info .num, .order-list-cart .prod-info .operation, .order-list-cart .prod-info .price, .order-list-cart .prod-info .subtotal{
|
||||
float: right;
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
.order-list-cart .prod-info .operation{
|
||||
display: table;
|
||||
width: 95px;
|
||||
height: 80px;
|
||||
padding-right: 23px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.order-list-cart .prod-info .num{
|
||||
width: 70px;
|
||||
}
|
||||
.order-list-cart .prod-info .price{
|
||||
width: 85px;
|
||||
padding-right: 27px;
|
||||
text-align: right;
|
||||
}
|
||||
.order-list-cart .prod-operation{
|
||||
float: right;
|
||||
display: table;
|
||||
height: 110px;
|
||||
}
|
||||
.order-list-cart .prod-operation .total{
|
||||
display: table-cell;
|
||||
padding-right: 18px;
|
||||
line-height: 14px;
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.order-list-cart .prod-operation .status{
|
||||
display: table-cell;
|
||||
width: 80px;
|
||||
padding: 0 24px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.blue-small-btn, .orange-small-btn, .white-gray-small-btn{
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
padding: 0 13px;
|
||||
border-radius: 4px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.blue-small-btn{
|
||||
background: #6383C6;
|
||||
background: linear-gradient(#7EA3F5,#5A82F0);
|
||||
box-shadow: 0 1px 2px rgba(255,255,255,.1) inset, 0 0 0 1px rgba(0,0,0,.2) inset, 0 1px 3px rgba(0,0,0,.1);
|
||||
color: #FFF;
|
||||
}
|
||||
.blue-small-btn:hover{
|
||||
box-shadow: 0 1px 1px #7696DE inset, 0 0 2px #627DCA inset, 0 -2px 3px #5A77C7 inset, 0 0 100px rgba(48,77,147,.4) inset, 0 0 0 1px rgba(0,0,0,.3) inset, 0 1px 3px rgba(0,0,0,.1);
|
||||
color: #FFF;
|
||||
}
|
||||
@ -0,0 +1,125 @@
|
||||
@charset "utf-8";
|
||||
/* CSS Document */
|
||||
/*html,body { user-select: none; -moz-user-select: none; -webkit-user-select: none; }*/
|
||||
body,
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
dd,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
form {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 100%;
|
||||
font-weight: 400;
|
||||
}
|
||||
html {
|
||||
height: 100%;
|
||||
background: #ededed;
|
||||
}
|
||||
body {
|
||||
font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Microsoft Yahei", 微软雅黑, STHeiti, 华文细黑, sans-serif;
|
||||
color: rgb(102, 102, 102);
|
||||
font-size: 14px;
|
||||
min-width: 1220px;
|
||||
background-color: aliceblue;
|
||||
}
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
img {
|
||||
border: none;
|
||||
display: block;
|
||||
}
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
button {
|
||||
font-family: tahoma, arial, 'Hiragino Sans GB', '微软雅黑', sans-serif;
|
||||
outline: none;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
em,
|
||||
i,
|
||||
dfn {
|
||||
font-style: normal;
|
||||
}
|
||||
textarea {
|
||||
resize: none;
|
||||
overflow: auto;
|
||||
outline: none;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #666;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
a:hover {
|
||||
outline: none;
|
||||
}
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
button:focus {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
pre {
|
||||
white-space: pre-wrap!important;
|
||||
word-wrap: break-word!important;
|
||||
*white-space:normal!important;
|
||||
}
|
||||
.fl {
|
||||
float: left;
|
||||
}
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
.clear:after,
|
||||
.clear:before {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
.clear:after {
|
||||
clear: both;
|
||||
}
|
||||
.clear {
|
||||
*zoom: 1;
|
||||
}
|
||||
.store-content{
|
||||
width: 1220px;
|
||||
min-height: 600px;
|
||||
padding: 0 0 25px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
.hide{
|
||||
display: none!important;
|
||||
}
|
||||
.fn-left, .fn-right{
|
||||
display: inline;
|
||||
}
|
||||
.fn-left{
|
||||
float: left;
|
||||
}
|
||||
.fn-right{
|
||||
float: right;
|
||||
}
|
||||
|
After Width: | Height: | Size: 689 KiB |
|
After Width: | Height: | Size: 81 KiB |
|
After Width: | Height: | Size: 84 KiB |
|
After Width: | Height: | Size: 152 B |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 124 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 8.8 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 594 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 952 B |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 802 B |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 594 B |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
|
After Width: | Height: | Size: 68 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 952 B |
|
After Width: | Height: | Size: 132 B |
|
After Width: | Height: | Size: 328 B |
|
After Width: | Height: | Size: 138 B |
|
After Width: | Height: | Size: 292 B |
|
After Width: | Height: | Size: 122 B |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 53 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<h2>Essential Links</h2>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
|
||||
<li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
|
||||
<br>
|
||||
<li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
|
||||
</ul>
|
||||
<h2>Ecosystem</h2>
|
||||
<ul>
|
||||
<li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
|
||||
<li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
|
||||
<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'hello',
|
||||
data () {
|
||||
return {
|
||||
msg: 'Welcome to Your Vue.js App'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h1, h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div id="header">
|
||||
<div class="nav-global">
|
||||
<div class="container">
|
||||
<h1 class="nav-logo">
|
||||
<a href="javascript:;"></a>
|
||||
</h1>
|
||||
<ul class="nav-aside">
|
||||
<li class="nav-user">
|
||||
<router-link to="/account">个人中心</router-link>
|
||||
<!--active-->
|
||||
<div class="nav-user-wrapper">
|
||||
<div class="nav-user-list">
|
||||
<dl class="nav-user-avatar">
|
||||
<dd><span class="ng-scope"></span></dd>
|
||||
<dt class="ng-binding">+86 138****9453</dt>
|
||||
</dl>
|
||||
<ul>
|
||||
<li class="order"><router-link to="/account" exact>我的订单</router-link></li>
|
||||
<li class="information"><a href="javascript:;">账户资料</a></li>
|
||||
<li class="address"><router-link to="/address">收货地址</router-link></li>
|
||||
<li class="logout"><a href="javascript:;">退出</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!--active-->
|
||||
<car-panel class="nav-cart"></car-panel>
|
||||
</ul>
|
||||
<ul class="nav-list">
|
||||
<li><button @click="toshop" style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);border-radius: 30px;width: 60px;height: 30px;margin-right: 15px">登录</button></li>
|
||||
<li><button @click="toregister" style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);border-radius: 30px;width: 60px;height: 30px;">注册</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-sub">
|
||||
<div class="nav-sub-wrapper">
|
||||
<div class="container">
|
||||
<ul class="nav-list">
|
||||
<!-- <li><a href="javascript:;">首页</a></li> -->
|
||||
<router-link to="/phone" exact tag="li" activeClass="active">
|
||||
<a>首页</a>
|
||||
</router-link>
|
||||
<router-link to="/" exact tag="li" activeClass="active">
|
||||
<a>特价水果</a>
|
||||
</router-link>
|
||||
<router-link to="/" exact tag="li" activeClass="active">
|
||||
<a>精美包装</a>
|
||||
</router-link>
|
||||
<li><a href="javascript:;">国产水果</a></li>
|
||||
<li><a href="javascript:;">进口水果</a></li>
|
||||
<li><a href="javascript:;">果脯系列</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CarPanel from '@/components/car-panel'
|
||||
export default {
|
||||
components: {
|
||||
CarPanel
|
||||
},
|
||||
methods:{
|
||||
toshop(){
|
||||
this.$router.push({
|
||||
path:'/book_shopping',
|
||||
query:{
|
||||
userId:this.arr_userId[i]
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div class="item">
|
||||
<div>
|
||||
<div class="item-img"><img :alt="item.name" :src="item.sku_info[itemIndex].ali_image" style="opacity: 1;">
|
||||
</div>
|
||||
<h6>{{item.name}}</h6>
|
||||
<h3>{{item.name_title}}</h3>
|
||||
<div class="params-colors">
|
||||
<ul class="colors-list">
|
||||
<li key="index" v-for="sku,index in item.sku_info">
|
||||
<a href="javascript:;" @click="tableData(index)" :data-index="index" :title="sku.spec_json.show_name" :class="{'active':index==itemIndex}"><img :src="'http://img01.smartisanos.cn/'+ sku.spec_json.image +'/20X20.jpg'"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="item-btns clearfix">
|
||||
<span class="item-gray-btn"><router-link :to="{name: 'Item', query: {itemId:item.sku_info[itemIndex].sku_id}}">查看详情</router-link> </span>
|
||||
<span @click="addCarPanelHandle(item.sku_info[itemIndex])" class="item-blue-btn">加入购物车 </span>
|
||||
</div>
|
||||
<div class="item-price clearfix">
|
||||
<i>¥</i><span>{{item.price}}</span>
|
||||
</div>
|
||||
<div class="discount-icon">false</div>
|
||||
<div class="item-cover">
|
||||
<router-link :to="{name: 'Item', query: {itemId:item.sku_info[itemIndex].sku_id}}"></router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
itemIndex: 0
|
||||
}
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
ball () {
|
||||
return this.$store.state.ball
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addCarPanelHandle (item) {
|
||||
if(!this.ball.show){
|
||||
let data = [item,1]
|
||||
this.$store.commit('addCarPanelData',data)
|
||||
}
|
||||
},
|
||||
tableData (index) {
|
||||
this.itemIndex = index
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.sku-box .item{
|
||||
position: relative;
|
||||
float: left;
|
||||
border-right: 1px solid #efefef;
|
||||
border-bottom: 1px solid #efefef;
|
||||
width: 25%;
|
||||
height: 429px;
|
||||
background: #fff;
|
||||
box-sizing: border-box
|
||||
}
|
||||
.sku-box .item:hover{
|
||||
box-shadow: 0 0 38px rgba(0,0,0,.08) inset;
|
||||
transition: all .15s ease;
|
||||
}
|
||||
.sku-box .item .item-img img{
|
||||
display: block;
|
||||
width: 206px;
|
||||
height: 206px;
|
||||
margin: 50px auto 10px;
|
||||
}
|
||||
.sku-box .item h3, .sku-box .item h6{
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.sku-box .item h6{
|
||||
line-height: 1.2;
|
||||
font-size: 16px;
|
||||
color: #424242;
|
||||
margin: 0 auto;
|
||||
padding: 0 14px;
|
||||
}
|
||||
.sku-box .item h3{
|
||||
line-height: 1.2;
|
||||
font-size: 12px;
|
||||
color: #d0d0d0;
|
||||
margin: 8px auto 14px;
|
||||
}
|
||||
.sku-box .item .params-colors{
|
||||
margin-top: 23px;
|
||||
text-align: center;
|
||||
}
|
||||
.sku-box .item .colors-list{
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sku-box .item .colors-list li{
|
||||
float: left;
|
||||
margin: 0 5px;
|
||||
}
|
||||
.sku-box .item .colors-list>li a{
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border: 1px solid #e5e5e5;
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
padding: 2px;
|
||||
display: block;
|
||||
}
|
||||
.sku-box .item .colors-list>li a.active{
|
||||
box-shadow: inset 0 0 0 1px #b2b2b2;
|
||||
border-color: #b2b2b2;
|
||||
}
|
||||
.sku-box .item .colors-list>li img{
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
}
|
||||
.sku-box .item .item-btns{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 29px;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.sku-box .item:hover .item-btns{
|
||||
opacity: 1;
|
||||
transition: all .2s ease-in;
|
||||
}
|
||||
.sku-box .item .item-btns .item-blue-btn, .sku-box .item .item-btns .item-disabled-btn, .sku-box .item .item-btns .item-gray-btn, .sku-box .item .item-btns .item-green-btn{
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
font-size: 12px;
|
||||
line-height: 28px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: 200;
|
||||
transition: all .1s ease;
|
||||
}
|
||||
.sku-box .item .item-btns .item-gray-btn{
|
||||
border: 1px solid #d5d5d5;
|
||||
color: #646464;
|
||||
}
|
||||
.sku-box .item .item-btns .item-gray-btn a{
|
||||
display: block;
|
||||
color: #a1a1a1;
|
||||
}
|
||||
.sku-box .item .item-btns .item-gray-btn:hover{
|
||||
background-image: linear-gradient(#f6f6f6,#ededed);
|
||||
}
|
||||
.sku-box .item .item-btns .item-blue-btn{
|
||||
background-color: #5c85e5;
|
||||
background-image: linear-gradient(#779ae9,#5078df);
|
||||
border: 1px solid #5c81e3;
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.sku-box .item .item-btns .item-blue-btn:hover{
|
||||
border: 1px solid #5374c8;
|
||||
background-color: #5074db;
|
||||
background-image: linear-gradient(#6e8ed5,#4769c2);
|
||||
}
|
||||
.sku-box .item .item-btns .item-blue-btn:active{
|
||||
border: 1px solid #3e61d7;
|
||||
background-color: #5c85e5;
|
||||
background-image: linear-gradient(#4d72de,#6189e6);
|
||||
}
|
||||
.sku-box .item .item-price{
|
||||
font-family: Arial;
|
||||
color: #c30a18;
|
||||
margin-top: 24px;
|
||||
text-align: center;
|
||||
opacity: 1;
|
||||
}
|
||||
.sku-box .item .item-price i{
|
||||
font-size: 16px;
|
||||
}
|
||||
.sku-box .item .item-price span{
|
||||
font-size: 18px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
.sku-box .item:hover .item-price{
|
||||
opacity: 0;
|
||||
transition: all .1s ease-out;
|
||||
}
|
||||
.sku-box .item .discount-icon{
|
||||
display: none;
|
||||
}
|
||||
.sku-box .item .item-cover a{
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
width: 100%;
|
||||
height: 310px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,7 @@
|
||||
const provinceList =
|
||||
[{"area_id": 110000, "area_name": "北京市", "city_list": [{"area_name": "市辖区", "area_id": 110100, "county_list": [{"area_name": "东城区", "area_id": 110101}, {"area_name": "海淀区", "area_id": 110106}]}, {"area_name": "县", "area_id": 110200, "county_list": [{"area_name": "密云县", "area_id": 110228}, {"area_name": "延庆县", "area_id": 110229}]}]},
|
||||
{"area_id": 440000, "area_name": "广东省", "city_list": [{"area_id": 440300, "area_name": "深圳市", "county_list": [{"area_name": "罗湖区", "area_id": 440303}, {"area_name": "福田区", "area_id": 440304}]}, {"area_id": 440100, "area_name": "广州市", "county_list": [{"area_name": "荔湾区", "area_id": 440103}, {"area_name": "越秀区", "area_id": 440104}]}]},
|
||||
{"area_id": 310000, "area_name":"上海市", "city_list": [{"area_id": 310100, "area_name": "市辖区", "county_list": [{"area_id": 310113, "area_name": "宝山区"}, {"area_id": 310105, "area_name": "长宁区"}]}, {"area_id": 310200, "area_name": "县", "county_list": [{"area_name": "崇明县", "area_id": 310230}]}]}]
|
||||
export default provinceList
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,139 @@
|
||||
let goodsData = [
|
||||
[{
|
||||
"id": 1000271,
|
||||
"name": "坚果 Pro 软胶保护套",
|
||||
"name_title": "TPU 环保材质、耐磨、耐油、耐久性强",
|
||||
"price": 49,
|
||||
"sku_info": [{
|
||||
"sku_id": 100027101,
|
||||
"title": "坚果 Pro 软胶保护套",
|
||||
"sub_title": "TPU 环保材质、耐磨、耐油、耐久性强",
|
||||
"ali_image": "http://image.smartisanos.cn/resource/902befd5f32a8caf4ca79b55d39ee25a.jpg",
|
||||
"price": 49,
|
||||
"limit_num": 5,
|
||||
"spec_json": {
|
||||
"image": "attr/v2/1000271/948F029DCF134EF23267994487994DA5/",
|
||||
"show_name": "红色"
|
||||
}
|
||||
},{
|
||||
"sku_id": 100027102,
|
||||
"title": "坚果 Pro 软胶保护套",
|
||||
"sub_title": "TPU 环保材质、耐磨、耐油、耐久性强",
|
||||
"ali_image": "http://image.smartisanos.cn/resource/554da94d8e4f84f03e0015fd1c997f46.jpg",
|
||||
"price": 49,
|
||||
"limit_num": 5,
|
||||
"spec_json": {
|
||||
"image": "attr/v2/1000271/649AD35E36A9703BACBE1555AEB6D266/",
|
||||
"show_name": "黑色"
|
||||
}
|
||||
},{
|
||||
"sku_id": 100027103,
|
||||
"title": "坚果 Pro 软胶保护套",
|
||||
"sub_title": "TPU 环保材质、耐磨、耐油、耐久性强",
|
||||
"ali_image": "http://image.smartisanos.cn/resource/84b58718b8f8da3c08e0931e19fdc62e.png",
|
||||
"price": 49,
|
||||
"limit_num": 5,
|
||||
"spec_json": {
|
||||
"image": "attr/v2/1000271/07BAF8C0EF046224A84B593DEEBC869E/",
|
||||
"show_name": "巧克力色"
|
||||
}
|
||||
},{
|
||||
"sku_id": 100027104,
|
||||
"title": "坚果 Pro 软胶保护套",
|
||||
"sub_title": "TPU 环保材质、耐磨、耐油、耐久性强",
|
||||
"ali_image": "http://image.smartisanos.cn/resource/b20055215ae3db0f2c8b7ba4db68866f.png",
|
||||
"price": 49,
|
||||
"limit_num": 5,
|
||||
"spec_json": {
|
||||
"image": "attr/v2/1000271/52317E0C067C97FC6CE9376A2432CFFF/",
|
||||
"show_name": "浅金色"
|
||||
}
|
||||
}]
|
||||
},{
|
||||
"id": 1000299,
|
||||
"name": "Smartisan 快充移动电源 10000mAh",
|
||||
"name_title": "10000mAh 双向快充、轻盈便携、高标准安全保护",
|
||||
"price": 199,
|
||||
"sku_info": [{
|
||||
"sku_id": 100029901,
|
||||
"title": "Smartisan 快充移动电源 10000mAh",
|
||||
"sub_title": "10000mAh 双向快充、轻盈便携、高标准安全保护",
|
||||
"ali_image": "http://image.smartisanos.cn/resource/ae40a16324658c192c7361d829f603bd.jpg",
|
||||
"price": 199,
|
||||
"limit_num": 1,
|
||||
"spec_json": {
|
||||
"image": "attr/v2/1000299/B37F37544921114CEF1EC01ED4DF44E4/",
|
||||
"show_name": "灰色"
|
||||
}
|
||||
}]
|
||||
}
|
||||
],[{
|
||||
"id": 1000271,
|
||||
"name": "坚果 Pro 手机",
|
||||
"name_title": "TPU 环保材质、耐磨、耐油、耐久性强",
|
||||
"price": 49,
|
||||
"sku_info": [{
|
||||
"sku_id": 100027101,
|
||||
"title": "坚果 Pro 手机",
|
||||
"sub_title": "TPU 环保材质、耐磨、耐油、耐久性强",
|
||||
"ali_image": "http://image.smartisanos.cn/resource/902befd5f32a8caf4ca79b55d39ee25a.jpg",
|
||||
"price": 49,
|
||||
"limit_num": 5,
|
||||
"spec_json": {
|
||||
"image": "attr/v2/1000271/948F029DCF134EF23267994487994DA5/",
|
||||
"show_name": "红色"
|
||||
}
|
||||
},{
|
||||
"sku_id": 100027102,
|
||||
"title": "坚果 Pro 手机",
|
||||
"sub_title": "TPU 环保材质、耐磨、耐油、耐久性强",
|
||||
"ali_image": "http://image.smartisanos.cn/resource/554da94d8e4f84f03e0015fd1c997f46.jpg",
|
||||
"price": 49,
|
||||
"limit_num": 5,
|
||||
"spec_json": {
|
||||
"image": "attr/v2/1000271/649AD35E36A9703BACBE1555AEB6D266/",
|
||||
"show_name": "黑色"
|
||||
}
|
||||
},{
|
||||
"sku_id": 100027103,
|
||||
"title": "坚果 Pro 手机",
|
||||
"sub_title": "TPU 环保材质、耐磨、耐油、耐久性强",
|
||||
"ali_image": "http://image.smartisanos.cn/resource/84b58718b8f8da3c08e0931e19fdc62e.png",
|
||||
"price": 49,
|
||||
"limit_num": 5,
|
||||
"spec_json": {
|
||||
"image": "attr/v2/1000271/07BAF8C0EF046224A84B593DEEBC869E/",
|
||||
"show_name": "巧克力色"
|
||||
}
|
||||
},{
|
||||
"sku_id": 100027104,
|
||||
"title": "坚果 Pro 手机",
|
||||
"sub_title": "TPU 环保材质、耐磨、耐油、耐久性强",
|
||||
"ali_image": "http://image.smartisanos.cn/resource/b20055215ae3db0f2c8b7ba4db68866f.png",
|
||||
"price": 49,
|
||||
"limit_num": 5,
|
||||
"spec_json": {
|
||||
"image": "attr/v2/1000271/52317E0C067C97FC6CE9376A2432CFFF/",
|
||||
"show_name": "浅金色"
|
||||
}
|
||||
}]
|
||||
},{
|
||||
"id": 1000299,
|
||||
"name": "Smartisan 手机 10000mAh",
|
||||
"name_title": "10000mAh 双向快充、轻盈便携、高标准安全保护",
|
||||
"price": 199,
|
||||
"sku_info": [{
|
||||
"sku_id": 100029901,
|
||||
"title": "Smartisan 手机 10000mAh",
|
||||
"sub_title": "10000mAh 双向快充、轻盈便携、高标准安全保护",
|
||||
"ali_image": "http://image.smartisanos.cn/resource/ae40a16324658c192c7361d829f603bd.jpg",
|
||||
"price": 199,
|
||||
"limit_num": 1,
|
||||
"spec_json": {
|
||||
"image": "attr/v2/1000299/B37F37544921114CEF1EC01ED4DF44E4/",
|
||||
"show_name": "灰色"
|
||||
}
|
||||
}]
|
||||
}]]
|
||||
|
||||
export default goodsData
|
||||
@ -0,0 +1,184 @@
|
||||
let itemsData = [{
|
||||
"sku_id": 100027101,
|
||||
"title": "坚果 Pro 软胶保护套",
|
||||
"sub_title": "TPU 环保材质、耐磨、耐油、耐久性强",
|
||||
"ali_image": "http://image.smartisanos.cn/resource/902befd5f32a8caf4ca79b55d39ee25a.jpg",
|
||||
"price": 49,
|
||||
"limit_num": 5,
|
||||
"spec_json": {
|
||||
"image": "attr/v2/1000271/948F029DCF134EF23267994487994DA5/",
|
||||
"show_name": "红色"
|
||||
},
|
||||
"ali_images": [
|
||||
"http://image.smartisanos.cn/resource/902befd5f32a8caf4ca79b55d39ee25a.jpg",
|
||||
"http://image.smartisanos.cn/resource/ca760e50409c796a4e770c54554f92bf.jpg",
|
||||
"http://image.smartisanos.cn/resource/493c65d42fe83ec3daaf058d79fc1a95.jpg",
|
||||
"http://image.smartisanos.cn/resource/0bf30081dd17431c4fdfbd237c53743f.jpg",
|
||||
"http://image.smartisanos.cn/resource/cba7b4cdb2fc41d7f29fb45d94972e41.jpg"
|
||||
],
|
||||
"sku_list": [{
|
||||
"id": 100027101,
|
||||
"image": "attr/v2/1000271/948F029DCF134EF23267994487994DA5/",
|
||||
"limit_num": 5,
|
||||
"color": "红色"
|
||||
},{
|
||||
"id": 100027102,
|
||||
"image": "attr/v2/1000271/649AD35E36A9703BACBE1555AEB6D266/",
|
||||
"limit_num": 5,
|
||||
"color": "黑色"
|
||||
},{
|
||||
"id": 100027103,
|
||||
"image": "attr/v2/1000271/07BAF8C0EF046224A84B593DEEBC869E/",
|
||||
"limit_num": 5,
|
||||
"color": "巧克力色"
|
||||
},{
|
||||
"id": 100027104,
|
||||
"image": "attr/v2/1000271/52317E0C067C97FC6CE9376A2432CFFF/",
|
||||
"limit_num": 5,
|
||||
"color": "浅金色"
|
||||
}]
|
||||
},{
|
||||
"sku_id": 100027102,
|
||||
"title": "坚果 Pro 软胶保护套",
|
||||
"sub_title": "TPU 环保材质、耐磨、耐油、耐久性强",
|
||||
"ali_image": "http://image.smartisanos.cn/resource/554da94d8e4f84f03e0015fd1c997f46.jpg",
|
||||
"price": 49,
|
||||
"limit_num": 5,
|
||||
"spec_json": {
|
||||
"image": "attr/v2/1000271/649AD35E36A9703BACBE1555AEB6D266/",
|
||||
"show_name": "黑色"
|
||||
},
|
||||
"ali_images": [
|
||||
"http://image.smartisanos.cn/resource/554da94d8e4f84f03e0015fd1c997f46.jpg",
|
||||
"http://image.smartisanos.cn/resource/01f25111e1a2c238a0f77e84aebd0796.jpg",
|
||||
"http://image.smartisanos.cn/resource/2841709c21ef07616f621fd863dcf2f3.jpg",
|
||||
"http://image.smartisanos.cn/resource/1b6fd01e415c380947cd98f62fa44817.jpg",
|
||||
"http://image.smartisanos.cn/resource/9e40a858dff00faa2f139587b7085249.jpg"
|
||||
],
|
||||
"sku_list": [{
|
||||
"id": 100027101,
|
||||
"image": "attr/v2/1000271/948F029DCF134EF23267994487994DA5/",
|
||||
"limit_num": 5,
|
||||
"color": "红色"
|
||||
},{
|
||||
"id": 100027102,
|
||||
"image": "attr/v2/1000271/649AD35E36A9703BACBE1555AEB6D266/",
|
||||
"limit_num": 5,
|
||||
"color": "黑色"
|
||||
},{
|
||||
"id": 100027103,
|
||||
"image": "attr/v2/1000271/07BAF8C0EF046224A84B593DEEBC869E/",
|
||||
"limit_num": 5,
|
||||
"color": "巧克力色"
|
||||
},{
|
||||
"id": 100027104,
|
||||
"image": "attr/v2/1000271/52317E0C067C97FC6CE9376A2432CFFF/",
|
||||
"limit_num": 5,
|
||||
"color": "浅金色"
|
||||
}]
|
||||
},{
|
||||
"sku_id": 100027103,
|
||||
"title": "坚果 Pro 软胶保护套",
|
||||
"sub_title": "TPU 环保材质、耐磨、耐油、耐久性强",
|
||||
"ali_image": "http://image.smartisanos.cn/resource/84b58718b8f8da3c08e0931e19fdc62e.png",
|
||||
"price": 49,
|
||||
"limit_num": 5,
|
||||
"spec_json": {
|
||||
"image": "attr/v2/1000271/07BAF8C0EF046224A84B593DEEBC869E/",
|
||||
"show_name": "巧克力色"
|
||||
},
|
||||
"ali_images": [
|
||||
"http://image.smartisanos.cn/resource/6d39130f5ad4bfe1241c0c17211472c2.jpg",
|
||||
"http://image.smartisanos.cn/resource/5694eb55ad2777a87096677d9d39cc58.jpg",
|
||||
"http://image.smartisanos.cn/resource/bffbb5411470d97a13f2f380006c96e4.jpg",
|
||||
"http://image.smartisanos.cn/resource/701052c09e45bd4069d3f8280d0d1435.jpg",
|
||||
"http://image.smartisanos.cn/resource/4fa7c5f81b02f71be4cae051ce547433.jpg"
|
||||
],
|
||||
"sku_list": [{
|
||||
"id": 100027101,
|
||||
"image": "attr/v2/1000271/948F029DCF134EF23267994487994DA5/",
|
||||
"limit_num": 5,
|
||||
"color": "红色"
|
||||
},{
|
||||
"id": 100027102,
|
||||
"image": "attr/v2/1000271/649AD35E36A9703BACBE1555AEB6D266/",
|
||||
"limit_num": 5,
|
||||
"color": "黑色"
|
||||
},{
|
||||
"id": 100027103,
|
||||
"image": "attr/v2/1000271/07BAF8C0EF046224A84B593DEEBC869E/",
|
||||
"limit_num": 5,
|
||||
"color": "巧克力色"
|
||||
},{
|
||||
"id": 100027104,
|
||||
"image": "attr/v2/1000271/52317E0C067C97FC6CE9376A2432CFFF/",
|
||||
"limit_num": 5,
|
||||
"color": "浅金色"
|
||||
}]
|
||||
},{
|
||||
"sku_id": 100027104,
|
||||
"title": "坚果 Pro 软胶保护套",
|
||||
"sub_title": "TPU 环保材质、耐磨、耐油、耐久性强",
|
||||
"ali_image": "http://image.smartisanos.cn/resource/b20055215ae3db0f2c8b7ba4db68866f.png",
|
||||
"price": 49,
|
||||
"limit_num": 5,
|
||||
"spec_json": {
|
||||
"image": "attr/v2/1000271/52317E0C067C97FC6CE9376A2432CFFF/",
|
||||
"show_name": "浅金色"
|
||||
},
|
||||
"ali_images": [
|
||||
"http://image.smartisanos.cn/resource/46d4b1cc072c7daa0c69756ac62ab46e.jpg",
|
||||
"http://image.smartisanos.cn/resource/e0d86a84c13b995fe87910324b3c7771.jpg",
|
||||
"http://image.smartisanos.cn/resource/1febef151c00c073d65eb37f68b75faf.jpg",
|
||||
"http://image.smartisanos.cn/resource/520666f8a84d92963320cf94bd74c05c.jpg",
|
||||
"http://image.smartisanos.cn/resource/7087d8239dec31662978c4c44c8501ba.jpg"
|
||||
],
|
||||
"sku_list": [{
|
||||
"id": 100027101,
|
||||
"image": "attr/v2/1000271/948F029DCF134EF23267994487994DA5/",
|
||||
"limit_num": 5,
|
||||
"color": "红色"
|
||||
},{
|
||||
"id": 100027102,
|
||||
"image": "attr/v2/1000271/649AD35E36A9703BACBE1555AEB6D266/",
|
||||
"limit_num": 5,
|
||||
"color": "黑色"
|
||||
},{
|
||||
"id": 100027103,
|
||||
"image": "attr/v2/1000271/07BAF8C0EF046224A84B593DEEBC869E/",
|
||||
"limit_num": 5,
|
||||
"color": "巧克力色"
|
||||
},{
|
||||
"id": 100027104,
|
||||
"image": "attr/v2/1000271/52317E0C067C97FC6CE9376A2432CFFF/",
|
||||
"limit_num": 5,
|
||||
"color": "浅金色"
|
||||
}]
|
||||
},{
|
||||
"sku_id": 100029901,
|
||||
"title": "Smartisan 快充移动电源 10000mAh",
|
||||
"sub_title": "10000mAh 双向快充、轻盈便携、高标准安全保护",
|
||||
"ali_image": "http://image.smartisanos.cn/resource/ae40a16324658c192c7361d829f603bd.jpg",
|
||||
"price": 199,
|
||||
"limit_num": 1,
|
||||
"spec_json": {
|
||||
"image": "attr/v2/1000299/B37F37544921114CEF1EC01ED4DF44E4/",
|
||||
"show_name": "灰色"
|
||||
},
|
||||
"ali_images": [
|
||||
"http://image.smartisanos.cn/resource/ae40a16324658c192c7361d829f603bd.jpg",
|
||||
"http://image.smartisanos.cn/resource/0540778097a009364f2dcbb8c5286451.jpg",
|
||||
"http://image.smartisanos.cn/resource/ed7ea75824124d7385c99d532f1d4f1d.jpg",
|
||||
"http://image.smartisanos.cn/resource/40b8c1b1e5d175cc8fa9e7ff96cb6016.jpg",
|
||||
"http://image.smartisanos.cn/resource/fb24dc3db26c6f02542e0dea9b10151b.jpg"
|
||||
],
|
||||
"limit_num": 1,
|
||||
"sku_list": [{
|
||||
"id": 100029901,
|
||||
"image": "attr/v2/1000299/B37F37544921114CEF1EC01ED4DF44E4/",
|
||||
"limit_num": 1,
|
||||
"color": "灰色",
|
||||
}]
|
||||
}]
|
||||
|
||||
export default itemsData
|
||||
@ -0,0 +1,21 @@
|
||||
// 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 store from './store'
|
||||
|
||||
|
||||
console.log(store)
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
store,
|
||||
template: '<App/>',
|
||||
components: { App }
|
||||
})
|
||||
@ -0,0 +1,61 @@
|
||||
"use strict";
|
||||
|
||||
import Vue from 'vue';
|
||||
import axios from "axios";
|
||||
|
||||
// Full config: https://github.com/axios/axios#request-config
|
||||
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
|
||||
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
|
||||
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
|
||||
|
||||
let config = {
|
||||
// baseURL: process.env.baseURL || process.env.apiUrl || ""
|
||||
// timeout: 60 * 1000, // Timeout
|
||||
// withCredentials: true, // Check cross-site Access-Control
|
||||
};
|
||||
|
||||
const _axios = axios.create(config);
|
||||
|
||||
_axios.interceptors.request.use(
|
||||
function(config) {
|
||||
// Do something before request is sent
|
||||
return config;
|
||||
},
|
||||
function(error) {
|
||||
// Do something with request error
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
// Add a response interceptor
|
||||
_axios.interceptors.response.use(
|
||||
function(response) {
|
||||
// Do something with response data
|
||||
return response;
|
||||
},
|
||||
function(error) {
|
||||
// Do something with response error
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
Plugin.install = function(Vue, options) {
|
||||
Vue.axios = _axios;
|
||||
window.axios = _axios;
|
||||
Object.defineProperties(Vue.prototype, {
|
||||
axios: {
|
||||
get() {
|
||||
return _axios;
|
||||
}
|
||||
},
|
||||
$axios: {
|
||||
get() {
|
||||
return _axios;
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
Vue.use(Plugin)
|
||||
|
||||
export default Plugin;
|
||||
@ -0,0 +1,5 @@
|
||||
import Vue from 'vue'
|
||||
import Element from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
|
||||
Vue.use(Element)
|
||||
@ -0,0 +1,6 @@
|
||||
import Vue from 'vue'
|
||||
import ViewUI from 'view-design'
|
||||
|
||||
Vue.use(ViewUI)
|
||||
|
||||
import 'view-design/dist/styles/iview.css'
|
||||
@ -0,0 +1,95 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import '@/assets/css/reset.css'
|
||||
import '@/assets/css/header.css'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
import Shop from '@/views/shop'
|
||||
import Item from '@/views/item'
|
||||
import Cart from '@/views/cart'
|
||||
import Checkout from '@/views/checkout'
|
||||
import Payment from '@/views/payment'
|
||||
import Account from '@/views/account'
|
||||
import Order from '@/views/account/order'
|
||||
import Address from '@/views/account/address'
|
||||
import user_login from "../views/user_login";
|
||||
import user_register from "../views/user_register";
|
||||
|
||||
// export default new Router({
|
||||
// mode: 'history',
|
||||
// scrollBehavior (to, from, savePosition) {
|
||||
// if (savePosition) {
|
||||
// return savePosition
|
||||
// } else {
|
||||
// return {x: 0, y: 0}
|
||||
// }
|
||||
// },
|
||||
const routes = [
|
||||
{
|
||||
path:'/',
|
||||
redirect:'/user_login'
|
||||
},
|
||||
{ path:'/user_login',
|
||||
name:"Login",
|
||||
component: user_login,
|
||||
// redirect:'/Login',
|
||||
// show:true,
|
||||
// children:[
|
||||
// {path: 'Login',component: Login}
|
||||
// ]
|
||||
},
|
||||
{ path:'/user_register',
|
||||
name:"Register",
|
||||
component: user_register
|
||||
},
|
||||
{
|
||||
path: '/item',
|
||||
name: 'Item',
|
||||
component: Item
|
||||
},
|
||||
{
|
||||
path: '/shop',
|
||||
name: 'Shop',
|
||||
component: Shop
|
||||
},
|
||||
{
|
||||
path: '/cart',
|
||||
name: 'Cart',
|
||||
component: Cart
|
||||
},
|
||||
{
|
||||
path: '/checkout',
|
||||
name: 'Checkout',
|
||||
component: Checkout
|
||||
},
|
||||
{
|
||||
path: '/payment',
|
||||
name: 'Payment',
|
||||
component: Payment
|
||||
},
|
||||
{
|
||||
path: '/account',
|
||||
component: Account,
|
||||
children: [
|
||||
{
|
||||
path: '/order',
|
||||
name: 'Order',
|
||||
component: Order
|
||||
},
|
||||
{
|
||||
path: '/address',
|
||||
name: 'Address',
|
||||
component: Address
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
// })
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
base: process.env.BASE_URL,
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||
@ -0,0 +1,253 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'Vuex'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
let store = new Vuex.Store({
|
||||
state: {
|
||||
carPanelData: [],
|
||||
receiveInfo: [{
|
||||
'name': '王某某',
|
||||
'phone': '13811111111',
|
||||
'areaCode': '010',
|
||||
'landLine': '64627856',
|
||||
'provinceId': 110000,
|
||||
'province': '北京市',
|
||||
'cityId': 110100,
|
||||
'city': '市辖区',
|
||||
'countyId': 110106,
|
||||
'county': '海淀区',
|
||||
'add': '上地十街辉煌国际西6号楼319室',
|
||||
'default': true,
|
||||
'checked': true
|
||||
},{
|
||||
'name': '李某某',
|
||||
'phone': '13811111111',
|
||||
'areaCode': '010',
|
||||
'landLine': '64627856',
|
||||
'provinceId': 110000,
|
||||
'province': '北京市',
|
||||
'cityId': 110100,
|
||||
'city': '市辖区',
|
||||
'countyId': 110106,
|
||||
'county': '海淀区',
|
||||
'add': '上地十街辉煌国际东6号楼350室',
|
||||
'default': false,
|
||||
'checked': false
|
||||
}],
|
||||
provisionalOrder: [],
|
||||
orderData: [],
|
||||
maxOff: false,
|
||||
carShow: false,
|
||||
ball: {
|
||||
show: false,
|
||||
el: null,
|
||||
img: ''
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
totleCount (state) {
|
||||
let count = 0
|
||||
state.carPanelData.forEach((goods) => {
|
||||
count += goods.count;
|
||||
})
|
||||
return count
|
||||
},
|
||||
totlePrice (state) {
|
||||
let total = 0
|
||||
state.carPanelData.forEach((goods) => {
|
||||
total += goods.price * goods.count
|
||||
})
|
||||
return total
|
||||
},
|
||||
checkedCount (state) {
|
||||
let count = 0
|
||||
state.carPanelData.forEach((goods) => {
|
||||
if(goods.checked)
|
||||
count += goods.count;
|
||||
})
|
||||
return count
|
||||
},
|
||||
checkedPrice (state) {
|
||||
let total = 0
|
||||
state.carPanelData.forEach((goods) => {
|
||||
if(goods.checked)
|
||||
total += goods.price * goods.count
|
||||
})
|
||||
return total
|
||||
},
|
||||
checkedCarPanelData (state) {
|
||||
let checkedCarPanelData = []
|
||||
state.carPanelData.forEach((goods) => {
|
||||
if(goods.checked)
|
||||
checkedCarPanelData.push(goods);
|
||||
})
|
||||
return checkedCarPanelData
|
||||
},
|
||||
allChecked (state) {
|
||||
let allChecked = true
|
||||
state.carPanelData.forEach((goods) => {
|
||||
if(!goods.checked){
|
||||
allChecked = false
|
||||
return
|
||||
}
|
||||
})
|
||||
return allChecked
|
||||
},
|
||||
maxCount (state) {
|
||||
let maxOff = false
|
||||
state.carPanelData.forEach((goods) => {
|
||||
if(goods.count>goods.limit_num){
|
||||
goods.count--
|
||||
}
|
||||
})
|
||||
return maxOff
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
addCarPanelData (state,data) {
|
||||
let bOff = true
|
||||
state.carPanelData.forEach((goods) => {
|
||||
if(goods.sku_id === data[0].sku_id){
|
||||
goods.count += data[1]
|
||||
if(goods.count>goods.limit_num){
|
||||
goods.count -= data[1]
|
||||
state.maxOff = true
|
||||
bOff = false
|
||||
return
|
||||
}
|
||||
state.ball.el = event.path[0]
|
||||
state.ball.show = true
|
||||
state.ball.img = data[0].ali_image
|
||||
bOff = false
|
||||
state.carShow = true
|
||||
}
|
||||
})
|
||||
if(bOff){
|
||||
let goodsData = data[0]
|
||||
Vue.set(goodsData,'count',data[1])
|
||||
Vue.set(goodsData,'checked',true)
|
||||
state.carPanelData.push(goodsData)
|
||||
state.carShow = true
|
||||
state.ball.el = event.path[0]
|
||||
state.ball.show = true
|
||||
state.ball.img = data[0].ali_image
|
||||
}
|
||||
},
|
||||
plusCarPanelData (state,id) {
|
||||
state.carPanelData.forEach((goods,index) => {
|
||||
if(goods.sku_id === id){
|
||||
if(goods.count === goods.limit_num) return
|
||||
goods.count ++
|
||||
return
|
||||
}
|
||||
})
|
||||
},
|
||||
subCarPanelData (state,id) {
|
||||
state.carPanelData.forEach((goods,index) => {
|
||||
if(goods.sku_id === id){
|
||||
if(goods.count === 1) return
|
||||
goods.count --
|
||||
return
|
||||
}
|
||||
})
|
||||
},
|
||||
delCarPanelData (state,id) {
|
||||
state.carPanelData.forEach((goods,index) => {
|
||||
if(goods.sku_id === id){
|
||||
state.carPanelData.splice(index,1)
|
||||
return
|
||||
}
|
||||
})
|
||||
},
|
||||
checkGoods (state,id) {
|
||||
state.carPanelData.forEach((goods,index) => {
|
||||
if(goods.sku_id === id){
|
||||
goods.checked = !goods.checked
|
||||
}
|
||||
})
|
||||
},
|
||||
allGoodsCheck (state,checked) {
|
||||
if(checked){
|
||||
state.carPanelData.forEach((goods,index) => {
|
||||
goods.checked = false
|
||||
})
|
||||
}else{
|
||||
state.carPanelData.forEach((goods,index) => {
|
||||
goods.checked = true
|
||||
})
|
||||
}
|
||||
},
|
||||
delCheckGoods (state) {
|
||||
let i = state.carPanelData.length
|
||||
while(i--){
|
||||
if(state.carPanelData[i].checked){
|
||||
state.carPanelData.splice(i,1)
|
||||
}
|
||||
}
|
||||
},
|
||||
submitOrder (state,data) {
|
||||
let i = state.carPanelData.length
|
||||
while(i--){
|
||||
if(state.carPanelData[i].checked){
|
||||
state.carPanelData.splice(i,1)
|
||||
}
|
||||
}
|
||||
state.orderData.unshift(data)
|
||||
state.receiveInfo.forEach((receive) => {
|
||||
receive.checked = receive.default
|
||||
})
|
||||
},
|
||||
payNow (state,id) {
|
||||
state.orderData.forEach((order,index) => {
|
||||
if(order.orderId === id){
|
||||
order.isPay = true
|
||||
return
|
||||
}
|
||||
})
|
||||
},
|
||||
alertPrompt (state) {
|
||||
state.maxOff = true
|
||||
},
|
||||
closePrompt (state) {
|
||||
state.maxOff = false
|
||||
},
|
||||
showCar (state) {
|
||||
state.carShow = true
|
||||
},
|
||||
hideCar (state) {
|
||||
state.carShow = false
|
||||
},
|
||||
checkDefault (state,data) {
|
||||
state.receiveInfo.forEach((receive,index) => {
|
||||
if (receive==data) {
|
||||
receive.default = true
|
||||
// state.receiveInfo.unshift(state.receiveInfo.splice(index,1)[0])
|
||||
} else {
|
||||
receive.default = false
|
||||
}
|
||||
})
|
||||
},
|
||||
checkOut (state,data) {
|
||||
state.provisionalOrder = data
|
||||
},
|
||||
submitReceive (state,data) {
|
||||
if(data[0].default){
|
||||
state.receiveInfo.forEach((receive,index) => {
|
||||
receive.default = false
|
||||
receive.checked = false
|
||||
})
|
||||
// state.receiveInfo.unshift(data)
|
||||
// return
|
||||
}
|
||||
if(data[1]==null){
|
||||
state.receiveInfo.push(data[0])
|
||||
}else{
|
||||
console.log(data[0])
|
||||
state.receiveInfo[data[1]] = data[0]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default store
|
||||
@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div id="main">
|
||||
<header-nav></header-nav>
|
||||
<div class="content clear">
|
||||
<div class="account-wrapper">
|
||||
<div class="account-sidebar">
|
||||
<div class="avatar gray-box clear">
|
||||
<div class="js-account-sidebar-info">
|
||||
<img src="http://static.smartisanos.cn/account/asset/img/default-user-avatar.png">
|
||||
</div>
|
||||
<div class="box-inner">
|
||||
<ul class="account-nav">
|
||||
<router-link :to="{name: 'Order'}" exact tag="li" activeClass="current">
|
||||
<a>我的订单</a>
|
||||
</router-link>
|
||||
<router-link :to="{name: 'Address'}" tag="li" activeClass="current">
|
||||
<a>收货地址</a>
|
||||
</router-link>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import headerNav from '@/components/header-nav'
|
||||
export default {
|
||||
components: {
|
||||
headerNav
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content{
|
||||
clear: both;
|
||||
width: 1220px;
|
||||
min-height: 600px;
|
||||
padding: 0 0 25px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.account-wrapper{
|
||||
position: relative;
|
||||
min-height: 550px;
|
||||
}
|
||||
.account-sidebar{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 210px;
|
||||
}
|
||||
.gray-box, .gray-btn-menu-on:hover{
|
||||
background: #FFF;
|
||||
}
|
||||
.gray-box{
|
||||
overflow: hidden;
|
||||
border: 1px solid #D1D1D1;
|
||||
border-color: rgba(0,0,0,.14);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 3px 8px -6px rgba(0,0,0,.1);
|
||||
}
|
||||
.account-sidebar .avatar{
|
||||
padding-top: 20px;
|
||||
margin: 0 0 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.account-sidebar .avatar img{
|
||||
width: 168px;
|
||||
height: 168px;
|
||||
display: inline-block;
|
||||
}
|
||||
.account-sidebar .account-nav{
|
||||
padding-top: 15px;
|
||||
}
|
||||
.account-sidebar .account-nav li{
|
||||
position: relative;
|
||||
height: 48px;
|
||||
border-top: 1px solid #EBEBEB;
|
||||
line-height: 48px;
|
||||
}
|
||||
.account-sidebar .account-nav .current{
|
||||
border: none;
|
||||
}
|
||||
.account-sidebar .account-nav a{
|
||||
display: block;
|
||||
height: 48px;
|
||||
padding: 0 30px;
|
||||
color: #666;
|
||||
-moz-transition: none;
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
.account-sidebar .account-nav .current a, .account-sidebar .account-nav a:hover{
|
||||
position: relative;
|
||||
top: -1px;
|
||||
z-index: 1;
|
||||
height: 50px;
|
||||
background-color: #98AFEE;
|
||||
line-height: 50px;
|
||||
color: #FFF;
|
||||
}
|
||||
.account-content{
|
||||
margin-left: 230px;
|
||||
}
|
||||
.gray-box .title{
|
||||
height: 60px;
|
||||
padding: 0 10px 0 28px;
|
||||
background: #F5F5F5;
|
||||
background: linear-gradient(#FFF,#F5F5F5);
|
||||
border-bottom: 1px solid #DCDCDC;
|
||||
border-radius: 10px 10px 0 0;
|
||||
box-shadow: 0 1px 7px rgba(0,0,0,.06);
|
||||
line-height: 60px;
|
||||
color: #646464;
|
||||
}
|
||||
.gray-box .pre-title{
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.gray-box .title h2{
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #626262;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,421 @@
|
||||
<template>
|
||||
<div id="main">
|
||||
<header-nav></header-nav>
|
||||
<div class="store-content item">
|
||||
<div class="item-box">
|
||||
<div class="gallery-wrapper">
|
||||
<div class="gallery">
|
||||
<div class="thumbnail">
|
||||
<ul>
|
||||
<li :class="{'on':index==0}" key="index" v-for="img,index in itemsInfo.ali_images"><img :src="img+'?x-oss-process=image/resize,w_54/quality,Q_90/format,webp'"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="thumb">
|
||||
<ul>
|
||||
<li :class="{'on':index==0}" key="index" v-for="img,index in itemsInfo.ali_images"><img :src="img+'?x-oss-process=image/resize,w_440/quality,Q_90/format,webp'"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner">
|
||||
<div class="sku-custom-title">
|
||||
<div class="params-price">
|
||||
<span><em>¥</em><i>{{itemsInfo.price}}</i></span>
|
||||
</div>
|
||||
<div class="params-info">
|
||||
<h4>{{itemsInfo.title}}</h4>
|
||||
<h6>{{itemsInfo.sub_title}}</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sku-dynamic-params-panel">
|
||||
<div class="sku-dynamic-params clear">
|
||||
<span class="params-name">颜色</span>
|
||||
<ul class="params-colors">
|
||||
<li :class="{'cur':color.id==$route.query.itemId}" v-for="color,index in itemsInfo.sku_list">
|
||||
<router-link :to="{name: 'Item', query: {itemId:color.id}}" :title="color.color"><i><img :src="'http://img01.smartisanos.cn/'+color.image+'20X20.jpg'"></i></router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="sku-dynamic-params clear">
|
||||
<div class="params-name">数量</div>
|
||||
<div class="params-detail clear">
|
||||
<div class="item-num js-select-quantity">
|
||||
<span class="down" :class="{'down-disabled':count<=1}" @click="subCount">-</span>
|
||||
<span class="num">{{count}}</span>
|
||||
<span class="up" :class="{'up-disabled':count>=itemsInfo.limit_num}" @click="addCount">+</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sku-status">
|
||||
<div class="cart-operation-wrapper clearfix">
|
||||
<span class="blue-title-btn js-add-cart" @click="addCarPanelHandle"><a>加入购物车</a></span>
|
||||
<span class="gray-title-btn" @click="checkOutHandle"><a>现在购买</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<prompt v-if="maxCount"></prompt>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import itemsData from '@/lib/newItemsData.js'
|
||||
import prompt from '@/components/prompt'
|
||||
import headerNav from '@/components/header-nav'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
itemsList: itemsData,
|
||||
count: 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
itemsInfo () {
|
||||
let itemsInfo = this.itemsList.filter((item) => {
|
||||
return item.sku_id == this.$route.query.itemId
|
||||
})[0]
|
||||
return itemsInfo
|
||||
},
|
||||
maxCount () {
|
||||
return this.$store.state.maxOff
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addCount () {
|
||||
this.count++
|
||||
if(this.count>this.itemsInfo.limit_num){
|
||||
this.count = this.itemsInfo.limit_num
|
||||
this.$store.commit('alertPrompt')
|
||||
}
|
||||
},
|
||||
subCount () {
|
||||
this.count--
|
||||
if(this.count<1){
|
||||
this.count = 1
|
||||
}
|
||||
},
|
||||
checkOutHandle () {
|
||||
let itemsInfo = this.itemsInfo
|
||||
itemsInfo.count = this.count
|
||||
let provisionalOrder = {
|
||||
totlePrice: this.count * this.itemsInfo.price,
|
||||
totleCount: this.count,
|
||||
items: [itemsInfo]
|
||||
}
|
||||
this.$store.commit('checkOut',provisionalOrder)
|
||||
this.$router.push({name: 'Checkout'})
|
||||
},
|
||||
addCarPanelHandle () {
|
||||
let data = [this.itemsInfo,this.count]
|
||||
this.$store.commit('addCarPanelData',data)
|
||||
}
|
||||
},
|
||||
components: {
|
||||
prompt,
|
||||
headerNav
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.item .item-box{
|
||||
width: 1098px;
|
||||
padding: 60px;
|
||||
margin-bottom: 20px;
|
||||
display: table;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #dcdcdc;
|
||||
border-color: rgba(0,0,0,.14);
|
||||
box-shadow: 0 3px 8px -6px rgba(0,0,0,.1);
|
||||
}
|
||||
.banner, .gallery-wrapper{
|
||||
display: table-cell;
|
||||
}
|
||||
.gallery-wrapper{
|
||||
vertical-align: top;
|
||||
}
|
||||
.gallery{
|
||||
float: left;
|
||||
width: 540px;
|
||||
display: table-cell;
|
||||
}
|
||||
.thumb, .thumbnail{
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.thumbnail li{
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
margin-top: 10px;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(0,0,0,.06);
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.thumbnail li:first-child{
|
||||
margin-top: 0;
|
||||
}
|
||||
.thumbnail li.on{
|
||||
padding: 10px;
|
||||
border: 3px solid #ccc;
|
||||
border: 3px solid rgba(0,0,0,.2);
|
||||
}
|
||||
item-box img{
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.thumb>ul{
|
||||
margin-left: 20px;
|
||||
width: 440px;
|
||||
height: 440px;
|
||||
position: relative;
|
||||
}
|
||||
.thumb li{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
.thumb li.on{
|
||||
animation: thumb-change .35s ease-out 1;
|
||||
position: relative;
|
||||
display: block;
|
||||
z-index: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
.item-box .banner{
|
||||
vertical-align: middle;
|
||||
width: 450px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.item-box .banner .sku-custom-title{
|
||||
overflow: hidden;
|
||||
padding: 8px 8px 18px 10px;
|
||||
position: relative;
|
||||
}
|
||||
.item-box .banner .params-price{
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
bottom: 19px;
|
||||
}
|
||||
.item-box .banner .params-price span{
|
||||
display: block;
|
||||
color: #de4037;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
.item-box .banner .params-price span i{
|
||||
padding-left: 2px;
|
||||
font-size: 24px;
|
||||
}
|
||||
.item-box .banner .sku-custom-title .params-info{
|
||||
width: 360px;
|
||||
}
|
||||
.item-box .banner .sku-custom-title h4{
|
||||
font-size: 24px;
|
||||
line-height: 1.25;
|
||||
color: #000;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.item-box .banner .sku-custom-title h6{
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #bdbdbd;
|
||||
}
|
||||
.item-box .banner .sku-dynamic-params-panel{
|
||||
padding: 29px 0 8px 10px;
|
||||
border-top: 1px solid #ebebeb;
|
||||
}
|
||||
.item-box .banner .sku-dynamic-params{
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
.item-box .banner .params-name{
|
||||
float: left;
|
||||
padding-right: 20px;
|
||||
font-size: 14px;
|
||||
color: #8d8d8d;
|
||||
line-height: 36px;
|
||||
}
|
||||
.item-box .banner .sku-dynamic-params .params-colors{
|
||||
float: left;
|
||||
line-height: 36px;
|
||||
margin: -10px 0 0 -10px;
|
||||
width: 402px;
|
||||
}
|
||||
.item-box .banner .sku-dynamic-params .params-colors>li{
|
||||
float: left;
|
||||
margin: 10px 0 0 10px;
|
||||
}
|
||||
.item-box .banner .sku-dynamic-params .params-colors>li a{
|
||||
display: block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: 2px solid #E5E5E5;
|
||||
padding: 3px;
|
||||
text-align: center;
|
||||
color: #757575;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.item-box .banner .sku-dynamic-params .params-colors>li.cur a{
|
||||
border-color: #B2B2B2;
|
||||
box-shadow: inset 0 0 0 1px #B2B2B2;
|
||||
}
|
||||
.item-box .banner .sku-dynamic-params .params-colors>li i, .item-box .banner .sku-dynamic-params .params-colors>li img{
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.item-box .banner .sku-dynamic-params{
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
.item-box .banner .params-detail{
|
||||
line-height: 36px;
|
||||
float: left;
|
||||
width: 392px;
|
||||
}
|
||||
.item-box .item-num{
|
||||
float: left;
|
||||
width: 128px;
|
||||
}
|
||||
.item-box .item-num .down:before, .item-box .item-num .up:before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
right: -4px;
|
||||
top: 0;
|
||||
height: 45px;
|
||||
background: url(../assets/img/cart-updown-item.png) no-repeat;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
.item-box .item-num .down:before{
|
||||
content: " ";
|
||||
background-position: 0 -60px;
|
||||
}
|
||||
.item-box .item-num .down:hover:before{
|
||||
content: " ";
|
||||
background-position: 0 -180px;
|
||||
}
|
||||
.item-box .item-num .down.down-disabled:before, .item-box .item-num .down.down-disabled:hover:before{
|
||||
content: " ";
|
||||
background-position: 0 -300px;
|
||||
}
|
||||
.item-box .item-num .down, .item-box .item-num .up{
|
||||
position: relative;
|
||||
float: left;
|
||||
display: inline-block;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
line-height: 40px;
|
||||
text-indent: -9999em;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.item-box .item-num .down.down-disabled, .item-box .item-num .up.up-disabled{
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.item-box .item-num .up:before{
|
||||
background-position: 0 0;
|
||||
}
|
||||
.item-box .item-num .up:hover:before{
|
||||
background-position: 0 -120px;
|
||||
}
|
||||
.item-box .item-num .up.up-disabled:before, .item-box .item-num .up.up-disabled:hover:before{
|
||||
content: " ";
|
||||
background-position: 0 -240px;
|
||||
}
|
||||
.item-box .item-num .num{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
display: inline-block;
|
||||
width: 56px;
|
||||
height: 18px;
|
||||
margin: 7px 0 0;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.item-box .item-num input{
|
||||
width: 56px;
|
||||
height: 18px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding: 0;
|
||||
}
|
||||
.item-box .item-num ul{
|
||||
/*display: none;*/
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 56px;
|
||||
}
|
||||
.item-box .item-num ul li{
|
||||
width: 56px;
|
||||
height: 18px;
|
||||
}
|
||||
.item-box .sku-status{
|
||||
position: relative;
|
||||
border-top: 1px solid #ebebeb;
|
||||
padding: 30px 0 0 10px;
|
||||
}
|
||||
.item-box .blue-title-btn{
|
||||
float: left;
|
||||
display: inline-block;
|
||||
width: 143px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
border-radius: 7px;
|
||||
border: 1px solid #5c81e3;
|
||||
background-color: #5c85e5;
|
||||
background-image: linear-gradient(#779ae9,#5078df);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.item-box .blue-title-btn:hover{
|
||||
transition: all .15s ease-out;
|
||||
box-shadow: inset 0 1px 1px #7696DE, inset 0 0 2px #627DCA, inset 0 -2px 3px #5A77C7, inset 0 0 100px rgba(48,77,147,.4);
|
||||
}
|
||||
.item-box .blue-title-btn a, .item-box .green-title-btn a{
|
||||
color: #fff;
|
||||
}
|
||||
.item-box .cart-operation-wrapper .gray-title-btn{
|
||||
margin-left: 20px;
|
||||
}
|
||||
.item-box .gray-title-btn{
|
||||
display: inline-block;
|
||||
width: 143px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
background: linear-gradient(#fff,#fafafa);
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 7px;
|
||||
color: #8c8c8c;
|
||||
cursor: pointer;
|
||||
}
|
||||
.item-box .gray-title-btn:hover{
|
||||
transition: all .15s ease-out;
|
||||
background: linear-gradient(#f6f6f6,#ededed);
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<div id="main">
|
||||
<header-nav></header-nav>
|
||||
<div class="sku-box store-content">
|
||||
<div class="sort-option">
|
||||
<ul class="line clear">
|
||||
<li><a href="javascript:;" class="active">综合排序</a></li>
|
||||
<li><a href="javascript:;" class="">销量排序</a></li>
|
||||
<li><a href="javascript:;" class="">价格低到高</a></li>
|
||||
<li><a href="javascript:;" class="">价格高到低</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="gray-box">
|
||||
<div class="item-box">
|
||||
<shop-item key="index" v-for="item,index in goodsShow" :item="item"></shop-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<prompt v-if="maxCount"></prompt>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import headerNav from '@/components/header-nav'
|
||||
import goodData from '@/lib/newGoodsData'
|
||||
import shopItem from '@/components/shop-item'
|
||||
import prompt from '@/components/prompt'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
goodsList: goodData,
|
||||
goodsShow: []
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
"$route": 'reseat'
|
||||
},
|
||||
mounted(){
|
||||
this.reseat()
|
||||
},
|
||||
components: {
|
||||
shopItem,
|
||||
prompt,
|
||||
headerNav
|
||||
},
|
||||
computed: {
|
||||
maxCount () {
|
||||
return this.$store.state.maxOff
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
reseat(){
|
||||
if(this.$route.path == '/phone'){
|
||||
this.goodsShow = this.goodsList[1];
|
||||
}else{
|
||||
this.goodsShow = this.goodsList[0];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.sku-box{
|
||||
position: relative;
|
||||
}
|
||||
.sort-option{
|
||||
border-top: 1px solid #D8D8D8;
|
||||
color: #999;
|
||||
}
|
||||
.sort-option ul{
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
}
|
||||
.sort-option li{
|
||||
position: relative;
|
||||
float: left;
|
||||
padding-left: 42px;
|
||||
}
|
||||
.sort-option li:first-child{
|
||||
padding-left: 9px;
|
||||
}
|
||||
.sort-option li:before{
|
||||
content: ' ';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 50%;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
margin-top: -1px;
|
||||
background: #C7C7C7;
|
||||
}
|
||||
.sort-option li:first-child:before{
|
||||
display: none;
|
||||
}
|
||||
.sort-option a{
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
.sort-option a.active, .sort-option a:hover{
|
||||
color: #5683EA;
|
||||
}
|
||||
.gray-box{
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #dcdcdc;
|
||||
border-color: rgba(0,0,0,.14);
|
||||
box-shadow: 0 3px 8px -6px rgba(0,0,0,.1);
|
||||
}
|
||||
.sku-box .item-box{
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
margin: 0 -1px -1px -1px;
|
||||
}
|
||||
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue