├── .gitignore ├── README.md ├── build ├── dev-client.js ├── server.js ├── webpack.base.config.js ├── webpack.dev.config.js └── webpack.pro.config.js ├── package-lock.json ├── package.json └── src ├── app.js ├── assets ├── images │ ├── 1-menu-w.png │ ├── 1.png │ ├── 10-menu-w.png │ ├── 10-menu.png │ ├── 11-menu-w.png │ ├── 11-menu.png │ ├── 12-menu-w.png │ ├── 12-menu.png │ ├── 13-menu-w.png │ ├── 13-menu.png │ ├── 14-menu-w.png │ ├── 14-menu.png │ ├── 15-menu-w.png │ ├── 15-menu.png │ ├── 15.png │ ├── 1525670168.jpg │ ├── 1525670269.jpg │ ├── 1525670385.jpg │ ├── 16-menu-w.png │ ├── 16-menu.png │ ├── 17-menu-w.png │ ├── 17-menu.png │ ├── 18-menu-w.png │ ├── 18-menu.png │ ├── 19-menu-w.png │ ├── 19-menu.png │ ├── 2-menu-w.png │ ├── 2.png │ ├── 20-menu-w.png │ ├── 20-menu.png │ ├── 3.png │ ├── 4-menu-w.jpg │ ├── 4.jpg │ ├── 5-menu-w.png │ ├── 5-menu.png │ ├── 6-menu-w.png │ ├── 6-menu.png │ ├── 7-menu-w.png │ ├── 7-menu.png │ ├── 8-menu-w.png │ ├── 8-menu.png │ ├── 9-menu-w.png │ ├── 9-menu.png │ └── logo.png └── less │ └── common.less ├── components ├── banner │ ├── banner.ejs │ ├── banner.js │ ├── banner.less │ └── preview.ejs ├── discount │ ├── discount.ejs │ ├── discount.js │ ├── discount.less │ └── preview.ejs ├── head │ ├── head.ejs │ ├── head.js │ ├── head.less │ └── preview.ejs ├── menu │ ├── menu.ejs │ ├── menu.js │ ├── menu.less │ └── preview.ejs ├── moveContent │ ├── moveContent.ejs │ ├── moveContent.js │ ├── moveContent.less │ └── preview.ejs ├── moveHeader │ ├── moveHeader.ejs │ ├── moveHeader.js │ ├── moveHeader.less │ └── preview.ejs └── pattern │ ├── pattern.ejs │ ├── pattern.js │ ├── pattern.less │ └── preview.ejs ├── contentpage.ejs ├── index.ejs ├── lib.js ├── pages └── global.ejs └── verdors.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .vscode 3 | dist 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # node-ejs-webpack 2 | ```js 3 | 要求兼容到iE6,并且有SEO需求, 市面上一些MVVM 框架都不能用，只能用比较原始的 jquery, 4 | 但是mvvm的开发模式实在有很爽，于是用node webpack ejs express 5 | 配置了一个多页面应用程序，支持模块独立开发，模块预览，模块独立调试 6 | 技术栈: jquery webpack ejs node express 7 | ``` 8 | ```js 9 | 生成静态页面部署：1 npm run probuild 10 | 2 把生成的dist 拷贝到服务器上即可 11 | 支持服务端渲染部署(把 css、html、js写入到内存): 1 把项目通过ftp上传到服务器 12 | 2 npm install 13 | 3 pm2 start ./build/server.js production 14 | "scripts": { 15 | "test": "echo \"Error: no test specified\" && exit 1", 16 | "devbuild": "webpack --config ./build/webpack.dev.config.js", 17 | "probuild": "webpack --config ./build/webpack.pro.config.js", 18 | "server": "node ./build/server.js development", 19 | "pro": "node ./build/server.js production" 20 | } 21 | ``` 22 | 23 | ```js 24 | |---build 25 | | |--- dev-client.js // 热加载配置 26 | | |--- server.js // node 服务模块 27 | | |--- webpack.base.config.js // webpack共用模块 28 | | |--- webpack.dev.config.js // 开发配置 29 | | |--- webpack.pro.config.js // 生产配置 30 | |---dist // 打包后 31 | | |--- css 32 | | |--- js 33 | | |--- index.html // 首页 34 | | |--- banner.preview.html // 组件预览页面 35 | |---src 36 | | |--- assets // 静态资源 37 | | |--- components // 组件 38 | | |--- banner // 组件名称 39 | | |--- banner.js // 组件js 40 | | |--- banner.ejs // 组件模板 41 | | |--- banner.less // 组件样式 42 | | |--- preview.ejs // 组件预览模板 43 | | |--- app.js // 入口文件 44 | | |--- contentpage.ejs // 开发环境下导航页面 45 | | |--- index.ejs // 首页 46 | | |--- verdors.js // 公共模块 47 | |---package.json 48 | ``` 49 | 50 | ##### 用webpack打包文件，并且使用webpack-dev-middlewear,把打包好的文件写入到内存 51 | ```js 52 | // 把wepack-dev-middleware当做一个中间件使用 53 | // 把 webpack 处理后的文件,写入到内存中，并且传递给服务器(server) 54 | app.use(webpackDevMiddleware(compiler, { 55 | publicPath: config.output.publicPath 56 | })) 57 | ``` 58 | ##### 更加expree router 从内存中读取文件 59 | ```js 60 | // 配置路由 解析 html 61 | // 如果要匹配更加复杂的路由，可以使用正则 62 | app.get('/:page?', function (req, res, next) { 63 | let page = req.params.page; 64 | if (page === 'favicon.ico') { 65 | return next() 66 | } else { 67 | if (req.params.page.indexOf('.ejs') > -1) { 68 | page = req.params.page ? req.params.page.substr(0, req.params.page.length - 4) + '.html' : 'contentpage.html' 69 | } else { 70 | page = req.params.page ? req.params.page + '.html' : 'contentpage.html' 71 | } 72 | } 73 | var filepath = path.join(compiler.outputPath, page); 74 | console.log(filepath); 75 | 76 | // 从内存中读取文件 77 | compiler.outputFileSystem.readFile(filepath, function (err, result) { 78 | if (err) { 79 | return next(err) 80 | } 81 | res.set('content-type', 'text/html'); 82 | res.send(result); 83 | res.end(); 84 | }) 85 | }) 86 | ``` 87 | 88 | ##### 配置热更新 89 | ```js 90 | // 热模块 中间件 91 | var hotMiddleware = require('webpack-hot-middleware')(compiler, { 92 | log: false, 93 | heartbeat: 2000 94 | }) 95 | // compilation对象代表了一次资源版本构建,当运行 webpack 开发环境中间件时， 96 | // 每当检测到一个文件变化，就会创建一个新的 compilation，从而生成一组新的编译资源 97 | // 当html-webpack-plugin template更改之后，强制刷新浏览器 98 | compiler.plugin('compilation', function (compilation) { 99 | compilation.plugin('html-webpack-plugin-after-emit', function (data) { 100 | hotMiddleware.publish({ 101 | action: 'reload' 102 | }) 103 | }) 104 | }) 105 | 106 | app.use(hotMiddleware); 107 | ``` 108 | 109 | ##### webapck.dev.config.js 遍历入口文件，无需手动写入，实现自动扫描 110 | ```js 111 | function getEntry(globPath) { 112 | var entries = {}, 113 | basename, tmp; 114 | 115 | glob.sync(globPath).forEach(function (entry) { 116 | basename = path.basename(entry, path.extname(entry)); 117 | tmp = entry.split('/').splice(-3); 118 | // 为组件模块的 preview.ejs 重新命名 119 | if (path.extname(entry).indexOf('.ejs') > -1 && tmp[2].indexOf(tmp[1]) === -1 || path.extname(entry).indexOf('.js') > -1) { 120 | if (basename === 'preview') { 121 | entries[tmp[1] + '.preview'] = entry; 122 | } else { 123 | entries[basename] = entry; 124 | } 125 | } 126 | }); 127 | return entries; 128 | } 129 | const Entry = getEntry('./src/components/**/*.js') 130 | const HtmlTpl = getEntry('./src/**/*.ejs') 131 | ``` 132 | 133 | ##### 项目导航 和组件预览图片 134 | 135 | ##### 项目首页图片 136 | 137 | 138 | -------------------------------------------------------------------------------- /build/dev-client.js: -------------------------------------------------------------------------------- 1 | require('eventsource-polyfill'); 2 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 3 | hotClient.subscribe(function (event) { 4 | if(event.action === 'reload') { 5 | window.location.reload() 6 | } 7 | }) -------------------------------------------------------------------------------- /build/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const webpack = require('webpack') 3 | const webpackDevMiddleware = require('webpack-dev-middleware') 4 | const path = require('path') 5 | const fs = require("fs") 6 | const merge = require('webpack-merge') 7 | 8 | const app = express() 9 | const config = process.argv[2] == 'development' ? require('./webpack.dev.config') : require('./webpack.pro.config') 10 | const compiler = webpack(config) 11 | 12 | app.use('/assets', express.static('src/assets')) 13 | 14 | 15 | // 把wepack-dev-middleware当做一个中间件使用 16 | // 把 webpack 处理后的文件,写入到内存中，并且传递给服务器(server) 17 | app.use(webpackDevMiddleware(compiler, { 18 | publicPath: config.output.publicPath 19 | })) 20 | 21 | 22 | if (process.argv[2] == 'development') { 23 | // 热模块 中间件 24 | var hotMiddleware = require('webpack-hot-middleware')(compiler, { 25 | log: false, 26 | heartbeat: 2000 27 | }) 28 | // compilation对象代表了一次资源版本构建,当运行 webpack 开发环境中间件时， 29 | // 每当检测到一个文件变化，就会创建一个新的 compilation，从而生成一组新的编译资源 30 | // 当html-webpack-plugin template更改之后，强制刷新浏览器 31 | compiler.plugin('compilation', function (compilation) { 32 | compilation.plugin('html-webpack-plugin-after-emit', function (data) { 33 | hotMiddleware.publish({ 34 | action: 'reload' 35 | }) 36 | }) 37 | }) 38 | 39 | app.use(hotMiddleware); 40 | } 41 | 42 | // 获取目录结构 43 | function walk(dir, _obj = {}, _key = '') { 44 | var _key = _key 45 | fs.readdirSync(dir).forEach(function (filename) { 46 | if (dir.indexOf('pages') > -1) { 47 | _key = filename 48 | _obj[_key] = [] 49 | } 50 | if (filename.indexOf('.') === -1) { 51 | _key = filename 52 | } 53 | var path = dir + "/" + filename 54 | var stat = fs.statSync(path) 55 | if (stat && stat.isDirectory()) { 56 | _obj[_key] = [] 57 | walk(path, _obj, _key) 58 | } 59 | else { 60 | _obj[_key].push(path) 61 | } 62 | }) 63 | return _obj 64 | } 65 | app.use('/get', express.Router().get('/menu', function (req, res, next) { 66 | var dir = 'src/components' 67 | var _compoents = walk(dir) 68 | var pageDir = 'src/pages' 69 | var _pages = walk(pageDir) 70 | res.send({ compoents: _compoents, pages: _pages }) 71 | })) 72 | 73 | 74 | // 配置路由 解析 html 75 | // 如果要匹配更加复杂的路由，可以使用正则 76 | app.get('/:page?', function (req, res, next) { 77 | let page = req.params.page; 78 | if (page === 'favicon.ico') { 79 | return next() 80 | } else { 81 | if (req.params.page.indexOf('.ejs') > -1) { 82 | page = req.params.page ? req.params.page.substr(0, req.params.page.length - 4) + '.html' : 'contentpage.html' 83 | } else { 84 | page = req.params.page ? req.params.page + '.html' : 'contentpage.html' 85 | } 86 | } 87 | var filepath = path.join(compiler.outputPath, page); 88 | console.log(filepath); 89 | 90 | // 从内存中读取文件 91 | compiler.outputFileSystem.readFile(filepath, function (err, result) { 92 | if (err) { 93 | return next(err) 94 | } 95 | res.set('content-type', 'text/html'); 96 | res.send(result); 97 | res.end(); 98 | }) 99 | }) 100 | app.listen(3001, function () { 101 | console.log('服务器已开启端口: 3001!\n'); 102 | }) -------------------------------------------------------------------------------- /build/webpack.base.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | const ExtractTextPlugin = require('extract-text-webpack-plugin') //从js中抽出css 4 | function resolve(dir) { 5 | return path.join(__dirname, '..', dir) 6 | } 7 | module.exports = { 8 | entry: { 9 | app: path.resolve(__dirname, '..', 'src/app.js'), 10 | lib: path.resolve(__dirname, '..', 'src/lib.js'), 11 | common: path.resolve(__dirname, '..', 'src/verdors.js') 12 | }, 13 | module: { 14 | rules: [ 15 | // { 16 | // test: require.resolve('jquery'), 17 | // use: [{ 18 | // loader: 'expose-loader', 19 | // options: 'jQuery' 20 | // },{ 21 | // loader: 'expose-loader', 22 | // options: '$' 23 | // }] 24 | // }, 25 | { 26 | test: /\.ejs$/, 27 | exclude: /node_modules/, 28 | use: [{ 29 | loader: 'underscore-template-loader' 30 | }] 31 | }, 32 | { 33 | test: /\.js$/, 34 | loader: 'babel-loader', 35 | include: [resolve('src')] 36 | }, 37 | { 38 | test: /\.css$/, 39 | use: ExtractTextPlugin.extract({ 40 | fallback: 'style-loader', 41 | use: [ 42 | { 43 | loader: 'css-loader' 44 | } 45 | ] 46 | }) 47 | }, 48 | { 49 | test: /.less$/, 50 | use: ExtractTextPlugin.extract({ 51 | fallback: 'style-loader', 52 | use: [ 53 | { 54 | loader: 'css-loader', 55 | options: { 56 | modules: false, 57 | camelCase: 'dashes', 58 | minimize: true 59 | } 60 | }, 61 | { 62 | loader: 'less-loader' 63 | } 64 | ] 65 | }) 66 | }, 67 | { 68 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 69 | loader: 'url-loader', 70 | options: { 71 | limit: 8192, 72 | name: '[name].[ext]', 73 | outputPath: 'images/' 74 | } 75 | } 76 | ] 77 | }, 78 | resolve: { 79 | extensions: ['.js', '.json', '.ejs'], 80 | alias: { 81 | '@': resolve('src') 82 | } 83 | }, 84 | optimization: { 85 | runtimeChunk: { 86 | "name": "runtime" 87 | } 88 | } 89 | } -------------------------------------------------------------------------------- /build/webpack.dev.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | const HtmlWebpackPlugin = require('html-webpack-plugin') 4 | const CleanWebpackPlugin = require('clean-webpack-plugin') 5 | const merger = require('webpack-merge') 6 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 7 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 8 | const baseWebpackConfig = require('./webpack.base.config') 9 | 10 | const glob = require('glob') 11 | 12 | Object.keys(baseWebpackConfig.entry).forEach(function (name) { 13 | baseWebpackConfig.entry[name] = [path.resolve(__dirname, '.', 'dev-client')].concat(baseWebpackConfig.entry[name]) 14 | }) 15 | 16 | function getEntry(globPath) { 17 | var entries = {}, 18 | basename, tmp; 19 | 20 | glob.sync(globPath).forEach(function (entry) { 21 | basename = path.basename(entry, path.extname(entry)); 22 | tmp = entry.split('/').splice(-3); 23 | // 过滤掉本模块的 ejs 的入口文件 24 | if (path.extname(entry).indexOf('.ejs') > -1 && tmp[2].indexOf(tmp[1]) === -1 || path.extname(entry).indexOf('.js') > -1) { 25 | if (basename === 'preview') { 26 | entries[tmp[1] + '.preview'] = entry; 27 | } else { 28 | entries[basename] = entry; 29 | } 30 | } 31 | }); 32 | return entries; 33 | } 34 | const Entry = getEntry('./src/components/**/*.js') 35 | const HtmlTpl = getEntry('./src/**/*.ejs') 36 | 37 | 38 | const htmlConfig = () => { 39 | let config = [] 40 | for (let attr in HtmlTpl) { 41 | if (attr.indexOf('preview') === -1) { // 首页 和导航页面 42 | config.push( 43 | new HtmlWebpackPlugin({ 44 | filename: `./${attr}.html`, 45 | template: HtmlTpl[attr], 46 | chunks: ['lib', 'runtime','common', 'app'], // 选择要打包js 入口文件 47 | chunksSortMode: 'manual', // 顺序插入js 48 | inject: true 49 | }) 50 | ) 51 | } else if (attr.indexOf('preview') > -1) { // 模块预览 52 | config.push( 53 | new HtmlWebpackPlugin({ 54 | filename: `./${attr}.html`, 55 | template: HtmlTpl[attr], 56 | chunks: ['common', HtmlTpl[attr].split('/')[3]], // 预览模块js独立打包 57 | chunksSortMode: 'manual', 58 | inject: true 59 | }) 60 | ) 61 | } else { 62 | } 63 | } 64 | return config; 65 | } 66 | 67 | module.exports = merger(baseWebpackConfig, { 68 | entry: Entry, 69 | devtool: '#cheap-module-eval-source-map', 70 | output: { 71 | filename: 'js/[name].[hash].js', 72 | path: path.resolve(__dirname, '..', 'dist'), 73 | publicPath: '' //也会在服务器脚本用到 74 | }, 75 | plugins: [ 76 | new webpack.HotModuleReplacementPlugin(), // 实现刷新浏览器 77 | new CleanWebpackPlugin(['dist']), 78 | new webpack.NoEmitOnErrorsPlugin(), 79 | new ExtractTextPlugin('css/[name].[hash].css'), 80 | // new webpack.ProvidePlugin({ 81 | // $: "jquery", 82 | // jQuery: "jquery" 83 | // }), 84 | new BundleAnalyzerPlugin({ 85 | analyzerMode: 'server', 86 | analyzerHost: '127.0.0.1', 87 | analyzerPort: 8888, 88 | reportFilename: 'report.html', 89 | defaultSizes: 'parsed', 90 | openAnalyzer: true, 91 | statsFilename: 'stats.json', 92 | statsOptions: null, 93 | logLevel: 'info' 94 | }) 95 | ].concat(htmlConfig()), 96 | mode: 'development' 97 | }) 98 | -------------------------------------------------------------------------------- /build/webpack.pro.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | const HtmlWebpackPlugin = require('html-webpack-plugin') 4 | const CleanWebpackPlugin = require('clean-webpack-plugin') 5 | const merger = require('webpack-merge') 6 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 7 | const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); 8 | const baseWebpackConfig = require('./webpack.base.config') 9 | 10 | const glob = require('glob') 11 | 12 | function getEntry(globPath) { 13 | var entries = {}, 14 | basename, tmp; 15 | 16 | glob.sync(globPath).forEach(function (entry) { 17 | basename = path.basename(entry, path.extname(entry)); 18 | tmp = entry.split('/').splice(-3); 19 | // 过滤掉本模块的 ejs 的入口文件 20 | if (path.extname(entry).indexOf('.ejs') > -1 && tmp[2].indexOf(tmp[1]) === -1 || path.extname(entry).indexOf('.js') > -1) { 21 | // if (basename === 'preview') { 22 | // entries[tmp[1] + '.preview'] = entry; 23 | // } else { 24 | // entries[basename] = entry; 25 | // } 26 | if (basename !== 'preview') { 27 | entries[basename] = entry 28 | } 29 | } 30 | }); 31 | return entries; 32 | } 33 | const Entry = getEntry('./src/components/**/*.js') 34 | const HtmlTpl = getEntry('./src/**/*.ejs') 35 | 36 | const htmlConfig = () => { 37 | let config = [] 38 | for (let attr in HtmlTpl) { 39 | if (attr.indexOf('preview') === -1) { // 首页 和导航页面 40 | config.push( 41 | new HtmlWebpackPlugin({ 42 | filename: `./${attr}.html`, 43 | template: HtmlTpl[attr], 44 | chunks: ['lib', 'runtime','common', 'app'], // 选择要打包js 入口文件 45 | chunksSortMode: 'manual', // 顺序插入js 46 | inject: true 47 | }) 48 | ) 49 | } else if (attr.indexOf('preview') > -1) { // 模块预览 50 | config.push( 51 | new HtmlWebpackPlugin({ 52 | filename: `./${attr}.html`, 53 | template: HtmlTpl[attr], 54 | chunks: ['common', HtmlTpl[attr].split('/')[3]], // 预览模块js独立打包 55 | chunksSortMode: 'manual', 56 | inject: true 57 | }) 58 | ) 59 | } else { 60 | } 61 | } 62 | return config; 63 | } 64 | 65 | module.exports = merger(baseWebpackConfig, { 66 | entry: Entry, 67 | output: { 68 | filename: 'js/[name].[hash].js', 69 | path: path.resolve(__dirname, '..', 'dist'), 70 | publicPath: '' //也会在服务器脚本用到 71 | }, 72 | plugins: [ 73 | new CleanWebpackPlugin(['dist']), 74 | new webpack.NoEmitOnErrorsPlugin(), 75 | new ExtractTextPlugin('css/[name].[hash].css'), 76 | // new webpack.ProvidePlugin({ 77 | // $: "jquery", 78 | // jQuery: "jquery" 79 | // }), 80 | new UglifyJSPlugin({ 81 | uglifyOptions: { 82 | ie8: false, 83 | output: { 84 | comments: false, 85 | beautify: false, 86 | }, 87 | mangle: { 88 | keep_fnames: true 89 | }, 90 | compress: { 91 | warnings: false, 92 | drop_console: true 93 | }, 94 | } 95 | }), 96 | ].concat(htmlConfig()), 97 | mode: 'production' 98 | }) 99 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ejs-test-2", 3 | "version": "1.0.1", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "devbuild": "webpack --config ./build/webpack.dev.config.js", 9 | "probuild": "webpack --config ./build/webpack.pro.config.js", 10 | "server": "node ./build/server.js development", 11 | "pro": "node ./build/server.js production" 12 | }, 13 | "author": "", 14 | "license": "ISC", 15 | "dependencies": { 16 | "ejs": "^2.5.9", 17 | "jquery": "^3.3.1", 18 | "webpack": "^4.6.0" 19 | }, 20 | "devDependencies": { 21 | "babel-loader": "^7.1.4", 22 | "clean-webpack-plugin": "^0.1.19", 23 | "css-loader": "^0.28.11", 24 | "eventsource-polyfill": "^0.9.6", 25 | "expose-loader": "^0.7.5", 26 | "extract-text-webpack-plugin": "^4.0.0-beta.0", 27 | "file-loader": "^1.1.11", 28 | "glob": "^7.1.2", 29 | "html-webpack-plugin": "^3.2.0", 30 | "less": "^3.0.2", 31 | "less-loader": "^4.1.0", 32 | "style-loader": "^0.21.0", 33 | "uglifyjs-webpack-plugin": "^1.2.5", 34 | "underscore-template-loader": "^1.0.0", 35 | "url-loader": "^1.0.1", 36 | "webpack-bundle-analyzer": "^2.11.1", 37 | "webpack-cli": "^2.0.15", 38 | "webpack-dev-middleware": "^3.1.2", 39 | "webpack-dev-server": "^3.1.3", 40 | "webpack-hot-middleware": "^2.22.1", 41 | "webpack-merge": "^4.1.2" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | require('./components/head/head') 2 | require('./components/menu/menu') 3 | require('./components/banner/banner') 4 | require('./components/pattern/pattern') 5 | require('./components/discount/discount') 6 | require('./components/moveHeader/moveHeader') 7 | require('./components/moveContent/moveContent') 8 | console.log('3232434343') -------------------------------------------------------------------------------- /src/assets/images/1-menu-w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/1-menu-w.png -------------------------------------------------------------------------------- /src/assets/images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/1.png -------------------------------------------------------------------------------- /src/assets/images/10-menu-w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/10-menu-w.png -------------------------------------------------------------------------------- /src/assets/images/10-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/10-menu.png -------------------------------------------------------------------------------- /src/assets/images/11-menu-w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/11-menu-w.png -------------------------------------------------------------------------------- /src/assets/images/11-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/11-menu.png -------------------------------------------------------------------------------- /src/assets/images/12-menu-w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/12-menu-w.png -------------------------------------------------------------------------------- /src/assets/images/12-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/12-menu.png -------------------------------------------------------------------------------- /src/assets/images/13-menu-w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/13-menu-w.png -------------------------------------------------------------------------------- /src/assets/images/13-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/13-menu.png -------------------------------------------------------------------------------- /src/assets/images/14-menu-w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/14-menu-w.png -------------------------------------------------------------------------------- /src/assets/images/14-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/14-menu.png -------------------------------------------------------------------------------- /src/assets/images/15-menu-w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/15-menu-w.png -------------------------------------------------------------------------------- /src/assets/images/15-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/15-menu.png -------------------------------------------------------------------------------- /src/assets/images/15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/15.png -------------------------------------------------------------------------------- /src/assets/images/1525670168.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/1525670168.jpg -------------------------------------------------------------------------------- /src/assets/images/1525670269.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/1525670269.jpg -------------------------------------------------------------------------------- /src/assets/images/1525670385.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/1525670385.jpg -------------------------------------------------------------------------------- /src/assets/images/16-menu-w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/16-menu-w.png -------------------------------------------------------------------------------- /src/assets/images/16-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/16-menu.png -------------------------------------------------------------------------------- /src/assets/images/17-menu-w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/17-menu-w.png -------------------------------------------------------------------------------- /src/assets/images/17-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/17-menu.png -------------------------------------------------------------------------------- /src/assets/images/18-menu-w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/18-menu-w.png -------------------------------------------------------------------------------- /src/assets/images/18-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/18-menu.png -------------------------------------------------------------------------------- /src/assets/images/19-menu-w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/19-menu-w.png -------------------------------------------------------------------------------- /src/assets/images/19-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/19-menu.png -------------------------------------------------------------------------------- /src/assets/images/2-menu-w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/2-menu-w.png -------------------------------------------------------------------------------- /src/assets/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/2.png -------------------------------------------------------------------------------- /src/assets/images/20-menu-w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/20-menu-w.png -------------------------------------------------------------------------------- /src/assets/images/20-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/20-menu.png -------------------------------------------------------------------------------- /src/assets/images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/3.png -------------------------------------------------------------------------------- /src/assets/images/4-menu-w.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/4-menu-w.jpg -------------------------------------------------------------------------------- /src/assets/images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/4.jpg -------------------------------------------------------------------------------- /src/assets/images/5-menu-w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/5-menu-w.png -------------------------------------------------------------------------------- /src/assets/images/5-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/5-menu.png -------------------------------------------------------------------------------- /src/assets/images/6-menu-w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/6-menu-w.png -------------------------------------------------------------------------------- /src/assets/images/6-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/6-menu.png -------------------------------------------------------------------------------- /src/assets/images/7-menu-w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/7-menu-w.png -------------------------------------------------------------------------------- /src/assets/images/7-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/7-menu.png -------------------------------------------------------------------------------- /src/assets/images/8-menu-w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/8-menu-w.png -------------------------------------------------------------------------------- /src/assets/images/8-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/8-menu.png -------------------------------------------------------------------------------- /src/assets/images/9-menu-w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/9-menu-w.png -------------------------------------------------------------------------------- /src/assets/images/9-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/9-menu.png -------------------------------------------------------------------------------- /src/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antbrothers/node-ejs-webpack/2a8ab3f6834d4c0a3b03a5a30cdef9762db8c3ed/src/assets/images/logo.png -------------------------------------------------------------------------------- /src/assets/less/common.less: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | font-family: "-apple-system",BlinkMacSystemFont,Roboto,"Helvetica Neue","MIcrosoft YaHei",sans-serif!important; 5 | font-size: 12px; 6 | background-color: #F8F8F8; 7 | } 8 | a { 9 | text-decoration: none; 10 | } 11 | .main { 12 | width: 1110px; 13 | margin: 0 auto; 14 | overflow: hidden; 15 | } 16 | .menu-container { 17 | margin-top: -45px; 18 | 19 | } 20 | .left-banner { 21 | width: 230px; 22 | float: left; 23 | } 24 | .right-banner { 25 | float: left; 26 | margin-left: 10px; 27 | margin-top: 10px; 28 | } 29 | .quality-container { 30 | margin: 40px auto; 31 | } 32 | h5 { 33 | margin-top: 10px; 34 | margin-bottom: -10px; 35 | } -------------------------------------------------------------------------------- /src/components/banner/banner.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/banner/banner.js: -------------------------------------------------------------------------------- 1 | require('./banner.less') 2 | console.log('banner') -------------------------------------------------------------------------------- /src/components/banner/banner.less: -------------------------------------------------------------------------------- 1 | .banner-container { 2 | width: 870px; 3 | margin-top: -6px; 4 | .silide { 5 | width: 470px; 6 | height: 240px; 7 | float: left; 8 | img { 9 | width: 100%; 10 | height: 100%; 11 | } 12 | } 13 | .login-module { 14 | float: left; 15 | width: 228px; 16 | height: 238px; 17 | margin-left: 10px; 18 | text-align: center; 19 | border: 1px solid #e5e5e5; 20 | background-color: white; 21 | .head-img-row { 22 | width: 55px; 23 | height: 55px; 24 | border-radius: 100%; 25 | padding-top: 30px; 26 | } 27 | .user-name { 28 | font-size: 16px; 29 | color: #222; 30 | text-align: center; 31 | font-weight: 500; 32 | white-space: nowrap; 33 | width: 6em; 34 | overflow: hidden; 35 | text-overflow: ellipsis; 36 | margin: 0 auto; 37 | padding: 0; 38 | margin: 0; 39 | margin: 0 auto; 40 | } 41 | .btn-login { 42 | width: 118px; 43 | text-align: center; 44 | margin: 10px auto 15px; 45 | background: #fff; 46 | border: 1px solid #e5e5e5; 47 | border-radius: 40px; 48 | font-size: 14px; 49 | color: #333; 50 | transition: background-color .5s; 51 | display: block; 52 | line-height: 38px; 53 | } 54 | } 55 | .pic-1 { 56 | width: 150px; 57 | height: 240px; 58 | margin-left: 10px; 59 | float: left; 60 | img { 61 | width: 150px; 62 | height: 240px; 63 | } 64 | } 65 | .pic-2 { 66 | float: left; 67 | width: 230px; 68 | height: 165px; 69 | margin-top: 10px; 70 | } 71 | .pic-3 { 72 | margin-left: 10px; 73 | margin-right: 10px; 74 | } 75 | .pic-4 { 76 | width: 150px; 77 | height: 165px; 78 | margin-top: 10px; 79 | float: left; 80 | } 81 | .download-app { 82 | width: 228px; 83 | height: 165px; 84 | margin-top: 10px; 85 | background-color: #fff; 86 | border: 1px solid #e5e5e5; 87 | float: left; 88 | text-align: center; 89 | margin-left: 10px; 90 | p { 91 | padding: 0; 92 | margin: 0; 93 | } 94 | .qrcode-box { 95 | margin: 10px auto 0; 96 | img { 97 | width: 95px; 98 | height: 95px; 99 | } 100 | } 101 | .app-name { 102 | font-size: 16px; 103 | color: #222; 104 | font-weight: 500; 105 | } 106 | .red { 107 | color: #EC5330; 108 | margin-right: 5px; 109 | } 110 | .gary { 111 | color: #3f3f3f; 112 | } 113 | } 114 | .home-header-links { 115 | margin-bottom: 27px; 116 | margin-top: 9px; 117 | margin-left: 20px; 118 | a { 119 | color: #222; 120 | font-weight: 700; 121 | font-size: 16px; 122 | margin: 0 20px; 123 | cursor: pointer; 124 | position: relative; 125 | } 126 | .nav-promotion { 127 | font-size: 12px; 128 | color: #fff; 129 | background: #FF4848; 130 | font-weight: 400; 131 | border-radius: 20px; 132 | padding: 3px 6px; 133 | margin: 0 5px; 134 | position: relative; 135 | top: -1px; 136 | } 137 | } 138 | } -------------------------------------------------------------------------------- /src/components/banner/preview.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | <%= require('./banner.ejs')() %> 11 | 12 | -------------------------------------------------------------------------------- /src/components/discount/discount.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 | 11 |
12 |
13 | 15 |
16 | 17 |
18 |
19 |
Godiva（欧美汇购物中心店）
20 |
甜心热巧套餐1份
21 |
22 | 23 | ¥ 24 | 72 25 | 26 | 门市价¥84 27 | 中关村 28 |
29 |
30 | 31 | 33 |
34 | 35 |
36 |
37 |
燕语生活燕窝养生滋补炖品（中粮祥云店）
38 |
挖球木瓜燕窝1份
39 |
40 | 41 | ¥ 42 | 48 43 | 44 | 门市价¥68 45 | 顺义区 46 |
47 |
48 | 49 | 51 |
52 | 53 |
54 |
55 |
黄鹤楼酒店
56 |
超值六人套餐，提供免费WiFi
57 |
58 | 59 | ¥ 60 | 698 61 | 62 | 门市价¥1126 63 | 复兴门 64 |
65 |
66 | 67 | 69 |
70 | 71 |
72 |
73 |
云海肴云南菜（喜隆多店）
74 |
腊排骨火锅双人餐
75 |
76 | 77 | ¥ 78 | 抢光了 79 | 80 | 苹果园 81 |
82 |
83 | 84 | 86 |
87 | 88 |
89 |
90 |
铭仁铁桶烤肉
91 |
精品六人餐人餐，包间免费
92 |
93 | 94 | ¥ 95 | 468 96 | 97 | 门市价¥598 98 | 云岗 99 |
100 |
101 | 102 | 104 |
105 | 106 |
107 |
108 |
汉釜宫韩式烤肉（亦庄店）
109 |
双人餐套，提供免费WiFi
110 |
111 | 112 | ¥ 113 | 158 114 | 115 | 门市价¥266 116 | 亦庄 117 |
118 |
119 | 120 |
121 |
-------------------------------------------------------------------------------- /src/components/discount/discount.js: -------------------------------------------------------------------------------- 1 | require('./discount.less') 2 | console.log('3232') -------------------------------------------------------------------------------- /src/components/discount/discount.less: -------------------------------------------------------------------------------- 1 | .discount{ 2 | .index-nav-container { 3 | width: 100%; 4 | height: 44px; 5 | line-height: 44px; 6 | box-sizing: border-box; 7 | font-size: 14px; 8 | color: #fff; 9 | border-top-right-radius: 5px; 10 | border-top-left-radius: 5px; 11 | background-color: rgb(190, 164, 116); 12 | background-image: linear-gradient(to right, rgb(255, 113, 74) 2%, rgb(252, 66, 66) 97%); 13 | .title { 14 | font-size: 18px; 15 | margin-left: 13px; 16 | margin-right: 10px; 17 | } 18 | .nav-item { 19 | float: left; 20 | padding: 0 5px; 21 | position: relative; 22 | cursor: pointer; 23 | text-transform: uppercase; 24 | } 25 | .nav-item.active:after { 26 | position: absolute; 27 | border-left: 5px solid transparent; 28 | border-right: 5px solid transparent; 29 | border-bottom: 7px solid #fff; 30 | content: " "; 31 | display: block; 32 | width: 2px; 33 | height: 0; 34 | top: 37px; 35 | left: 0; 36 | right: 0; 37 | margin: auto; 38 | } 39 | .mf-shang-hei-regular { 40 | font-family: MFShangHei-Regular!important; 41 | } 42 | } 43 | ul { 44 | margin: 0; 45 | padding: 0; 46 | } 47 | li { 48 | list-style: none; 49 | } 50 | 51 | .quality-area { 52 | width: 100%; 53 | padding: 11px 0px 10px; 54 | background-color: #fff; 55 | border-bottom-left-radius: 4px; 56 | border-bottom-right-radius: 4px; 57 | box-sizing: border-box; 58 | border-left: 1px solid #e5e5e5; 59 | border-right: 1px solid #e5e5e5; 60 | border-bottom: 1px solid #e5e5e5; 61 | .quality-card { 62 | width: 33.3%; 63 | height: 314px; 64 | padding: 10px; 65 | box-sizing: border-box; 66 | float: left; 67 | background: #fff; 68 | transition: background-color .5s; 69 | .quality-img { 70 | background: url(//p0.meituan.net/codeman/1a1ea80….png); 71 | background-size: 100% 100%; 72 | max-width: 100%; 73 | height: 208px; 74 | margin-bottom: 11px; 75 | cursor: pointer; 76 | img { 77 | width: 100%; 78 | height: 100%; 79 | border-radius: 4px; 80 | } 81 | } 82 | .poi-info { 83 | text-align: left; 84 | } 85 | .title { 86 | font-size: 16px; 87 | color: #222; 88 | height: 22px; 89 | line-height: 22px; 90 | margin-bottom: 8px; 91 | font-weight: 500; 92 | white-space: nowrap; 93 | overflow: hidden; 94 | text-overflow: ellipsis; 95 | cursor: pointer; 96 | } 97 | .sub-title { 98 | font-size: 12px; 99 | color: #999; 100 | line-height: 18px; 101 | height: 18px; 102 | margin-bottom: 7px; 103 | white-space: nowrap; 104 | overflow: hidden; 105 | text-overflow: ellipsis; 106 | } 107 | .price-info { 108 | height: 27px; 109 | overflow: hidden; 110 | margin-bottom: 10px; 111 | } 112 | .current-price-wrapper { 113 | cursor: pointer; 114 | } 115 | .price-symbol { 116 | font-size: 14px; 117 | color: #BE9E4D; 118 | font-weight: 500; 119 | } 120 | .numfont { 121 | font-family: numbers!important; 122 | letter-spacing: -.5px; 123 | } 124 | .current-price { 125 | font-size: 22px; 126 | color: #BE9E4D; 127 | margin-right: 6px; 128 | letter-spacing: -.8px; 129 | cursor: pointer; 130 | .current-price-type { 131 | font-size: 12px; 132 | letter-spacing: -.6px; 133 | } 134 | } 135 | .sold { 136 | font-size: 12px; 137 | color: #999; 138 | float: right; 139 | margin-top: 10px; 140 | } 141 | .old-price { 142 | font-size: 12px; 143 | color: #999; 144 | text-decoration: line-through; 145 | } 146 | } 147 | } 148 | } -------------------------------------------------------------------------------- /src/components/discount/preview.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | <%= require('./discount.ejs')() %> 11 | 12 | -------------------------------------------------------------------------------- /src/components/head/head.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | 6 | 北京 7 | 切换城市2 8 |
[ 9 | 大厂回族自治县 10 | 廊坊 11 | 三河] 12 |
13 |
14 | 立即登录 15 | 注册 16 |
17 | 148 |
149 |
150 |
151 | 152 |
153 |
154 |
155 |
156 | 157 | 美团 158 | 159 |
160 |
161 |
162 |
163 | 164 | 167 |
168 |
169 | 上海迪士尼度假区 170 | 东方明珠广播电视塔 171 | 上海野生动物园 172 | 173 |
174 |
175 | 176 |
    177 |
  • 178 | 179 |
    随时退
    180 |
    • 181 |
  • 182 | 183 |
    不满意免单
    184 |
    • 185 |
  • 186 | 187 |
    过期退
    188 |
    • 189 |
190 | 191 |
192 |
193 | 194 |
-------------------------------------------------------------------------------- /src/components/head/head.js: -------------------------------------------------------------------------------- 1 | require('./head.less') 2 | $(function() { 3 | $('.web-addr').hover(function() { 4 | $('.header-nav-second').css('display', 'block') 5 | }, function() { 6 | $('.header-nav-second').css('display', 'none') 7 | }) 8 | }) -------------------------------------------------------------------------------- /src/components/head/head.less: -------------------------------------------------------------------------------- 1 | 2 | .head-main { 3 | width: 100%; 4 | box-shadow: 0 2px 27px 0 rgba(0,0,0,.1); 5 | .head-top { 6 | width: 100%; 7 | height: 40px; 8 | background: #F8F8F8; 9 | } 10 | .head { 11 | width: 1110px; 12 | color: #999; 13 | height: 40px; 14 | line-height: 40px; 15 | margin: 0 auto; 16 | .icon-map { 17 | color: #999; 18 | width: 10px; 19 | height: 10px; 20 | margin-top: 13px; 21 | margin-right: 3px; 22 | margin-bottom: 12px; 23 | margin-left: 3px; 24 | border: solid 1px currentColor; 25 | border-radius: 16px 16px 16px 0; 26 | -webkit-transform: rotate(-45deg); 27 | -moz-transform: ratate(-45deg); 28 | transform: rotate(-45deg); 29 | display: block; 30 | float: left; 31 | } 32 | .icon-map:after { 33 | content: ""; 34 | width: 3px; 35 | height: 3px; 36 | border: 1px solid currentcolor; 37 | position: absolute; 38 | top: 3px; 39 | left: 2px; 40 | border-radius: 100%; 41 | } 42 | .current-city { 43 | color: #666; 44 | } 45 | .change-city { 46 | background: #F4F4F4; 47 | border: 1px solid #E5E5E5; 48 | border-radius: 2px; 49 | color: #666; 50 | margin: 0 4px; 51 | padding: 0 2px; 52 | } 53 | .near-citys { 54 | display: inline-block; 55 | a { 56 | color: #999; 57 | } 58 | } 59 | .user-entry { 60 | margin-left: 15px; 61 | .user-importent { 62 | color: #31BBAC; 63 | } 64 | a { 65 | margin-left: 10px; 66 | color: #999999; 67 | } 68 | } 69 | .header-bar .header-bar-nav { 70 | float: right; 71 | ul { 72 | padding: 0; 73 | margin: 0; 74 | li { 75 | list-style: none; 76 | } 77 | } 78 | } 79 | .web-addr:hover { 80 | color: #31BBAC; 81 | background-color: #fff; 82 | border-color: #E5E5E5; 83 | box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .1); 84 | } 85 | .header-bar .header-nav-first>li { 86 | float: left; 87 | position: relative; 88 | height: 40px; 89 | padding: 12px 14px; 90 | box-sizing: border-box; 91 | border-left: 1px solid transparent; 92 | border-right: 1px solid transparent; 93 | line-height: 16px; 94 | } 95 | .header-bar .header-nav-site { 96 | width: 1027px; 97 | box-sizing: border-box; 98 | border-top-left-radius: 4px; 99 | padding: 30px 36px 36px 47px; 100 | } 101 | .header-bar .header-nav-second { 102 | position: absolute; 103 | background: #fff; 104 | text-align: center; 105 | z-index: 1000; 106 | right: -1px; 107 | top: 95%; 108 | box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .1); 109 | border-bottom-left-radius: 4px; 110 | border-bottom-right-radius: 4px; 111 | box-sizing: content-box; 112 | display: none; 113 | dt { 114 | margin-bottom: 20px; 115 | } 116 | dd { 117 | a { 118 | color: #999; 119 | line-height: 22px; 120 | } 121 | } 122 | } 123 | .header-bar .header-nav-third { 124 | float: left; 125 | } 126 | .header-bar .header-jiulv { 127 | width: 256px; 128 | dd { 129 | width: 29%; 130 | text-align: center; 131 | float: left; 132 | margin-left: 10px; 133 | } 134 | } 135 | .header-bar .header-meishi { 136 | width: 156px; 137 | dd { 138 | float: left; 139 | margin-left: 34px; 140 | } 141 | } 142 | .header-bar .header-movie { 143 | width: 90px; 144 | dd { 145 | margin-left: 0px; 146 | } 147 | } 148 | .header-bar .header-app { 149 | float: right; 150 | width: 395px; 151 | dd { 152 | float: left; 153 | margin-left: 10px; 154 | img { 155 | width: 60px; 156 | height: 60px; 157 | border: 0; 158 | } 159 | } 160 | } 161 | } 162 | 163 | .search-module { 164 | background-color: white; 165 | .header-content { 166 | width: 1110px; 167 | height: 157px; 168 | background-color: white; 169 | margin: 0 auto; 170 | .header-title-module { 171 | float: left; 172 | padding-top: 28px; 173 | padding-right: 60px; 174 | font-size: 16px; 175 | min-width: 220px; 176 | height: 54px; 177 | box-sizing: content-box; 178 | .header-title img { 179 | width: 126px; 180 | height: 46px; 181 | border: 0; 182 | vertical-align: initial; 183 | } 184 | } 185 | .header-search-module { 186 | float: left; 187 | padding-top: 28px; 188 | position: relative; 189 | .header-search-block { 190 | width: 422px; 191 | height: 40px; 192 | border: 1px solid #13D1BE; 193 | background: #fff; 194 | border-radius: 4px; 195 | .header-search-input { 196 | border: none; 197 | line-height: 100%; 198 | box-sizing: border-box; 199 | display: inline-block!important; 200 | padding: 10px; 201 | font-size: 15px; 202 | height: 100%; 203 | background: 0 0; 204 | width: 84%; 205 | } 206 | .header-search-btn { 207 | outline: 0; 208 | width: 16%; 209 | box-sizing: border-box; 210 | line-height: 100%; 211 | height: 100%; 212 | background: #6ad7be; 213 | border: none; 214 | float: right; 215 | color: #fff; 216 | cursor: pointer; 217 | border-bottom-left-radius: 0; 218 | border-top-left-radius: 0; 219 | } 220 | } 221 | .header-search-hotword { 222 | padding-top: 8px; 223 | font-size: 12px; 224 | width: 422px; 225 | overflow: hidden; 226 | height: 25px; 227 | box-sizing: border-box; 228 | text-align: left; 229 | padding-left: 12px; 230 | a { 231 | color: #999; 232 | margin-right: 10px; 233 | margin-bottom: 3px; 234 | display: inline-block; 235 | } 236 | } 237 | } 238 | .header-commitment { 239 | width: 186px; 240 | float: right; 241 | color: #13D1BE; 242 | padding-top: 23px; 243 | text-align: center; 244 | ul { 245 | padding: 0; 246 | margin: 0; 247 | li { 248 | list-style: none 249 | } 250 | } 251 | .commitment-item { 252 | width: 33%; 253 | float: left; 254 | transform: scale(.9); 255 | } 256 | .commitment-item div { 257 | color: #999; 258 | font-size: 12px; 259 | } 260 | } 261 | } 262 | } 263 | } 264 | -------------------------------------------------------------------------------- /src/components/head/preview.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | head 8 | 9 | 10 | <%= require('./head.ejs')() %> 11 | 12 | -------------------------------------------------------------------------------- /src/components/menu/menu.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 全部分类 5 | 6 |
7 |
8 | 186 |
187 | 188 | 262 |
263 |
-------------------------------------------------------------------------------- /src/components/menu/menu.js: -------------------------------------------------------------------------------- 1 | require('./menu.less') 2 | $(function () { 3 | var time = false 4 | $('.nav-li').hover(function() { 5 | clearTimeout(time) 6 | var _this = this 7 | $(_this).find('.orgin-u').css('display', 'none') 8 | $(_this).find('.orgin-w').css('display', 'block') 9 | $('.category-nav-detail-wrapper').css('display','block'); 10 | time = setTimeout(function() { 11 | $('.detail-title').text($(_this).find('.nav-text').text()) 12 | }, 100) 13 | 14 | }, function() { 15 | $(this).find('.orgin-u').css('display', 'block') 16 | $(this).find('.orgin-w').css('display', 'none') 17 | $('.category-nav-detail-wrapper').css('display','none'); 18 | }) 19 | $('.category-nav-detail-wrapper').hover(function() { 20 | $('.category-nav-detail-wrapper').css('display','block'); 21 | }, function() { 22 | $(this).css('display','none'); 23 | }) 24 | }) -------------------------------------------------------------------------------- /src/components/menu/menu.less: -------------------------------------------------------------------------------- 1 | .category-nav-container { 2 | position: relative; 3 | width: 230px; 4 | height: 475px; 5 | color: #FFF; 6 | background: rgba(2,181,157,.85); 7 | background: -webkit-linear-gradient(-90deg,rgba(2,181,157,.85) 2%,rgba(22,146,183,.85) 100%); 8 | background: -o-linear-gradient(-90deg,rgba(2,181,157,.85) 2%,rgba(22,146,183,.85) 100%); 9 | background: -moz-linear-gradient(-90deg,rgba(2,181,157,.85) 2%,rgba(22,146,183,.85) 100%); 10 | .category-nav-title-wrapper { 11 | background: #65c7b3; 12 | height: 45px; 13 | padding-top: 15px; 14 | box-sizing: border-box; 15 | .category-nav-title { 16 | font-size: 16px; 17 | font-weight: 400; 18 | margin-left: 15px; 19 | } 20 | } 21 | .category-nav-content-wrapper { 22 | ul { 23 | padding: 0; 24 | margin: 0; 25 | padding-top: 12px; 26 | } 27 | li { 28 | list-style: none; 29 | } 30 | .nav-li { 31 | position: relative; 32 | box-sizing: border-box; 33 | padding: 2px 12px; 34 | height: 26px; 35 | overflow: hidden; 36 | img { 37 | float: left; 38 | margin-top: 3px; 39 | margin-right: 10px; 40 | width: 17px; 41 | } 42 | .nav-text-wrapper { 43 | padding-top: 10px; 44 | display: block; 45 | float: left; 46 | margin-top: -8px; 47 | } 48 | .home-category-iconfont { 49 | font-family: home-category-iconfont!important; 50 | font-size: 14px; 51 | font-style: normal; 52 | -webkit-font-smoothing: antialiased; 53 | -moz-osx-font-smoothing: grayscale; 54 | } 55 | nav-text-wrapper { 56 | display: inline-block; 57 | margin-left: 11px; 58 | } 59 | .nav-text { 60 | font-size: 13px; 61 | line-height: 20px; 62 | height: 20px; 63 | color: #fff; 64 | cursor: pointer; 65 | } 66 | .nav-right-arrow { 67 | width: 4px; 68 | height: 4px; 69 | border-bottom: 1px solid #fff; 70 | border-right: 1px solid #fff; 71 | transform: rotate(-45deg); 72 | display: block; 73 | position: absolute; 74 | right: 13px; 75 | top: 0; 76 | bottom: 0; 77 | margin: auto; 78 | } 79 | } 80 | .nav-li:hover { 81 | background: rgba(255,255,255,.2); 82 | } 83 | } 84 | 85 | .category-nav-detail-wrapper { 86 | position: absolute; 87 | top: 60px; 88 | left: 230px; 89 | width: 400px; 90 | height: 416px; 91 | background-color: #fff; 92 | padding-top: 25px; 93 | z-index: 199; 94 | color: #666; 95 | overflow: hidden; 96 | padding-left: 20px; 97 | padding-right: 20px; 98 | .category-nav-container .detail-area { 99 | padding: 0 30px; 100 | } 101 | .detail-title-wrapper { 102 | height: 22px; 103 | line-height: 22px; 104 | padding-bottom: 10px; 105 | border-bottom: 1px solid #e5e5e5; 106 | h2 { 107 | margin: 0; 108 | padding: 0; 109 | a { 110 | font-size: 16px; 111 | font-weight: 500; 112 | color: #222; 113 | cursor: pointer; 114 | float: left; 115 | } 116 | } 117 | .detail-more { 118 | font-size: 12px; 119 | color: #999; 120 | font-weight: 400; 121 | float: right; 122 | margin-right: 6px; 123 | position: relative; 124 | cursor: pointer; 125 | } 126 | .detail-right-arrow { 127 | width: 4px; 128 | height: 4px; 129 | border-bottom: 1px solid #999; 130 | border-right: 1px solid #999; 131 | transform: rotate(-45deg); 132 | display: block; 133 | position: absolute; 134 | top: 0; 135 | bottom: 0; 136 | right: -6px; 137 | margin: auto; 138 | } 139 | 140 | } 141 | .detail-text { 142 | color: #999; 143 | font-size: 12px; 144 | line-height: 15px; 145 | display: inline-block; 146 | margin-right: 16px; 147 | margin-top: 10px; 148 | cursor: pointer; 149 | } 150 | } 151 | .orgin-w { 152 | display: none; 153 | } 154 | } -------------------------------------------------------------------------------- /src/components/menu/preview.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | <%= require('./menu.ejs')() %> 11 | 12 | -------------------------------------------------------------------------------- /src/components/moveContent/moveContent.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

2018-12-11已更新

6 |

榜单规则：将昨日国内热映的影片，按照评分从高到低排列取前10名，每天上午10点更新。相关数据来源于“猫眼专业版”及“猫眼电影库”。

7 |
8 |
9 | 1 10 | 11 | 12 | 海王 13 | 14 |
15 |
16 |
17 |

海王

19 |

20 | 主演：杰森·莫玛,艾梅柏·希尔德,妮可·基德曼 21 |

22 |

上映时间：2018-12-07

23 |
24 |
25 |

9.5

26 |
27 | 28 |
29 |
30 | 31 |
32 |
33 | 2 34 | 35 | 36 | 毒液：致命守护者 37 | 38 |
39 |
40 |
41 |

毒液：致命守护者

43 |

44 | 主演：汤姆·哈迪,米歇尔·威廉姆斯,里兹·阿迈德 45 |

46 |

上映时间：2018-11-09

47 |
48 |
49 |

9.2

50 |
51 | 52 |
53 |
54 | 55 |
56 |
57 | 3 58 | 59 | 60 | 无名之辈 61 | 62 |
63 |
64 |
65 |

无名之辈

67 |

68 | 主演：陈建斌,任素汐,潘斌龙 69 |

70 |

上映时间：2018-11-16

71 |
72 |
73 |

9.1

74 |
75 | 76 |
77 |
78 | 79 |
80 |
81 | 4 82 | 83 | 84 | 生活万岁 85 | 86 |
87 |
88 |
89 |

生活万岁

91 |

92 | 主演：李安甫,胡兆翠,康昕 93 |

94 |

上映时间：2018-11-27

95 |
96 |
97 |

9.1

98 |
99 | 100 |
101 |
102 | 103 |
104 |
105 | 5 106 | 108 | 109 | 无敌破坏王2：大闹互联网 110 | 111 |
112 |
113 |
114 |

无敌破坏王2：大闹互联网

116 |

117 | 主演：约翰·C·赖利,萨拉·西尔弗曼,克里斯汀·贝尔 118 |

119 |

上映时间：2018-11-23

120 |
121 |
122 |

8.9

123 |
124 | 125 |
126 |
127 | 128 |
129 |
130 | 6 131 | 132 | 133 | 恐龙王 135 | 136 |
137 |
138 |
139 |

恐龙王

141 |

142 | 主演：王衡,吕佩玉,孙晔 143 |

144 |

上映时间：2018-11-10

145 |
146 |
147 |

8.9

148 |
149 | 150 |
151 |
152 | 153 |
154 |
155 | 7 156 | 157 | 158 | 老爸102岁 160 | 161 |
162 |
163 |
164 |

老爸102岁

166 |

167 | 主演：阿米特巴·巴强,里希·卡普尔,达尔曼德拉·吉尔 168 |

169 |

上映时间：2018-11-30

170 |
171 |
172 |

8.7

173 |
174 | 175 |
176 |
177 | 178 |
179 |
180 | 8 181 | 182 | 183 | 憨豆特工3 184 | 185 |
186 |
187 |
188 |

憨豆特工3

190 |

191 | 主演：罗温·艾金森,本·米勒,欧嘉·柯瑞兰寇 192 |

193 |

上映时间：2018-11-23

194 |
195 |
196 |

8.6

197 |
198 | 199 |
200 |
201 | 202 |
203 |
204 | 9 205 | 206 | 207 | 三只小猪2 208 | 209 |
210 |
211 |
212 |

三只小猪2

214 |

215 | 主演：王晓彤,李晔,洪海天 216 |

217 |

上映时间：2017-05-27

218 |
219 |
220 |

8.3

221 |
222 | 223 |
224 |
225 | 226 |
227 |
228 | 10 229 | 230 | 231 | 摘金奇缘 232 | 233 |
234 |
235 |
236 |

摘金奇缘

238 |

239 | 主演：康斯坦斯·吴,杨紫琼,亨利·戈尔丁 240 |

241 |

上映时间：2018-11-30

242 |
243 |
244 |

8.3

245 |
246 | 247 |
248 |
249 | 250 |
251 |
252 | 253 |
254 |
255 |
256 |
-------------------------------------------------------------------------------- /src/components/moveContent/moveContent.js: -------------------------------------------------------------------------------- 1 | require('./moveContent.less') 2 | $(function() { 3 | console.log('moveContent') 4 | }) -------------------------------------------------------------------------------- /src/components/moveContent/moveContent.less: -------------------------------------------------------------------------------- 1 | #move-content { 2 | .wrapper { 3 | overflow: hidden 4 | } 5 | 6 | .main { 7 | width: 950px; 8 | margin: 0 auto; 9 | margin-top: 70px 10 | } 11 | 12 | .board-content,.update-time { 13 | text-align: center; 14 | font-size: 12px; 15 | color: #999 16 | } 17 | 18 | .board-content { 19 | margin-top: 6px 20 | } 21 | .board-wrapper { 22 | margin-top: 40px 23 | } 24 | 25 | .board-wrapper dd { 26 | margin-bottom: 30px; 27 | font-size: 0; 28 | position: relative; 29 | overflow: hidden 30 | } 31 | 32 | .board-wrapper .image-link { 33 | display: inline-block; 34 | width: 160px; 35 | height: 220px; 36 | margin-left: 80px; 37 | position: relative; 38 | float: left 39 | } 40 | 41 | .board-wrapper .image-link .poster-default { 42 | position: absolute; 43 | top: 50%; 44 | left: 50%; 45 | width: 68px; 46 | height: 62px; 47 | margin-left: -34px; 48 | margin-top: -31px 49 | } 50 | dd, dl, h4, li, p, ul { 51 | padding: 0; 52 | margin: 0; 53 | } 54 | .board-index { 55 | display: inline-block; 56 | width: 50px; 57 | height: 50px; 58 | line-height: 50px; 59 | text-align: center; 60 | background: #f7f7f7; 61 | font-size: 18px; 62 | color: #999; 63 | font-weight: 700; 64 | position: absolute; 65 | left: 0; 66 | top: 85px 67 | } 68 | 69 | .board-index-1 { 70 | background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAXVBMVEXvQjj////hOTDqPjToPTPtQDbthoHlPDL75OL2xMHnX1jjOjH63dvvlJD++PjyqaXwnZnvmZTmV1DjRT3+9/f99fT51dP3yMX0tbLzr6vrfHboaGLkTETjSD/jRDtUdlqqAAAAmUlEQVRIx+3PNw7EMAxEUY5EZWdvTvc/5gYs4NDQglu9is0HMVQUxX5aUya2ljN/xKaJOqsYPeDHjY02REYFfAT1vbVY1ENi7vHTM6fBSk3yqDqLP9tVaFlI3Bkr0QgJX1fFyZGA61Vi5fk3LBxeJDERCxcnJ08s3A2J1BEzXpEsVZipmWQuYOZhSMYtJsHRBobVxGkqimKPN2KiBE+fgK2MAAAAAElFTkSuQmCC); 71 | font-size: 0 72 | } 73 | 74 | .board-index-2,.board-index-3 { 75 | background: #ffb400; 76 | color: #fff 77 | } 78 | .board-img { 79 | vertical-align: middle; 80 | position: absolute; 81 | left: 0; 82 | top: 0; 83 | } 84 | img { 85 | border-style: none; 86 | } 87 | .board-item-main { 88 | display: inline-block; 89 | width: 680px; 90 | margin-left: 30px; 91 | height: 219px; 92 | float: right; 93 | line-height: 219px; 94 | border-bottom: 1px solid #e5e5e5 95 | } 96 | 97 | .board-item-content { 98 | display: inline-block; 99 | vertical-align: middle; 100 | width: 680px; 101 | font-size: 0; 102 | line-height: 1 103 | } 104 | 105 | .board-item-content .name a { 106 | font-size: 26px; 107 | color: #333; 108 | overflow: hidden; 109 | text-overflow: ellipsis; 110 | white-space: nowrap; 111 | width: 420px; 112 | display: block 113 | } 114 | 115 | .board-item-content .star { 116 | margin-top: 18px; 117 | color: #333 118 | } 119 | 120 | .board-item-content .releasetime { 121 | margin-top: 8px; 122 | color: #999 123 | } 124 | .movie-item-info { 125 | font-size: 16px; 126 | display: inline-block; 127 | width: 420px; 128 | vertical-align: middle 129 | } 130 | 131 | .movie-item-number { 132 | display: inline-block; 133 | text-align: right; 134 | width: 260px; 135 | vertical-align: top; 136 | margin-top: 10px; 137 | font-size: 16px 138 | } 139 | .score-num { 140 | color: #ffb400 141 | } 142 | 143 | .score-num .score { 144 | padding-right: 4px 145 | } 146 | 147 | .score-num .integer { 148 | font-size: 56px; 149 | font-weight: 700 150 | } 151 | 152 | .score-num .fraction { 153 | font-size: 26px; 154 | font-weight: 700 155 | } 156 | 157 | } -------------------------------------------------------------------------------- /src/components/moveContent/preview.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | <%= require('./moveContent.ejs')() %> 12 | 13 | -------------------------------------------------------------------------------- /src/components/moveHeader/moveHeader.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 |
7 |
8 |
9 |
10 | 18 |
19 | 20 | 29 | 30 |
31 | 32 | 33 |
34 | 35 |
36 |
37 |
38 |
39 | 56 |
57 |
-------------------------------------------------------------------------------- /src/components/moveHeader/moveHeader.js: -------------------------------------------------------------------------------- 1 | require('./moveHeader.less') 2 | $(function() { 3 | console.log('moveHeader') 4 | }) -------------------------------------------------------------------------------- /src/components/moveHeader/moveHeader.less: -------------------------------------------------------------------------------- 1 | .move-header { 2 | .header form,.header h3,.header input,.header li,.header ul { 3 | padding: 0; 4 | margin: 0; 5 | list-style: none; 6 | border: none 7 | } 8 | 9 | .header { 10 | position: fixed; 11 | top: 0; 12 | z-index: 999; 13 | width: 100%; 14 | min-width: 1200px; 15 | background-color: #fff; 16 | border-bottom: 1px solid #d8d8d8 17 | } 18 | 19 | .header .header-inner { 20 | width: 1200px; 21 | margin: 0 auto; 22 | height: 80px 23 | } 24 | 25 | .header-placeholder { 26 | height: 81px 27 | } 28 | 29 | .header .logo { 30 | float: left; 31 | width: 133px; 32 | height: 80px; 33 | background: url(data:image/png;base64,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) no-repeat 0; 34 | background-size: contain 35 | } 36 | 37 | .header .nav { 38 | display: inline-block; 39 | background-color: #fff; 40 | overflow: hidden; 41 | margin-left: 40px; 42 | float: left 43 | } 44 | 45 | .header .nav .navbar li { 46 | float: left 47 | } 48 | 49 | .header .nav .navbar li a { 50 | text-align: center; 51 | display: inline-block; 52 | height: 80px; 53 | line-height: 80px; 54 | width: 80px; 55 | font-size: 18px; 56 | color: #333 57 | } 58 | 59 | .header .nav .navbar li a:hover { 60 | color: #ef4238 61 | } 62 | 63 | .header .nav .navbar li a.active { 64 | color: #fff; 65 | background-color: #ef4238 66 | } 67 | 68 | .header form { 69 | float: right; 70 | margin: 20px 10px 0 0; 71 | position: relative 72 | } 73 | 74 | .header form input { 75 | -webkit-box-sizing: border-box; 76 | box-sizing: border-box 77 | } 78 | 79 | .header form .search { 80 | display: inline-block; 81 | height: 40px; 82 | line-height: 1.2; 83 | width: 260px; 84 | padding: 0 40px 0 20px; 85 | border: 1px solid #ccc; 86 | font-size: 14px; 87 | border-radius: 30px; 88 | background-color: #faf8fa; 89 | overflow: hidden; 90 | color: #333 91 | } 92 | 93 | .ie8 .header form .search { 94 | padding-top: 11px 95 | } 96 | 97 | .header form .submit { 98 | display: inline-block; 99 | position: absolute; 100 | left: 220px; 101 | top: 0; 102 | height: 40px; 103 | width: 40px; 104 | background-color: #ef4238; 105 | border-radius: 30px; 106 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAQlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////8IX9KGAAAAFXRSTlMA+Y/XljcvKwbekR/z5MoeDAq7vWFffapXAAAAlElEQVQ4y+3S3QrDIAwFYBNNf6y1uu28/6sOcdDdaITdrNBzpfCBSYy5c5HMbIkszwpbHD5xueseIC8piSc8lw502Kd6mna4Tn1ExVVJ1K6T4c+LBzehhZwXgW1CwvLVGGgMJoSfntab0cejD1z5QpachQlAPIaWAsB6KGsWyprFKvVsa5HbqIxmUAYzJGN4mTv/nje3wQeTZXOUBwAAAABJRU5ErkJggg==); 107 | cursor: pointer 108 | } 109 | 110 | .header .user-info { 111 | float: right; 112 | position: relative; 113 | z-index: 9999; 114 | height: 100% 115 | } 116 | 117 | .header .user-info .user-avatar { 118 | display: block; 119 | border: 1px solid transparent; 120 | border-top: none; 121 | border-bottom: none; 122 | padding: 0 10px; 123 | width: 56px; 124 | height: 100% 125 | } 126 | 127 | .header .user-info .user-avatar img { 128 | margin-top: 20px; 129 | width: 40px; 130 | height: 40px; 131 | border-radius: 50%; 132 | cursor: pointer 133 | } 134 | 135 | .header .user-info .user-avatar .caret { 136 | position: absolute; 137 | top: 39px; 138 | right: 10px 139 | } 140 | 141 | .header .user-info .user-avatar:hover { 142 | border-color: #d8d8d8 143 | } 144 | 145 | .header .user-info .user-avatar:hover .caret { 146 | -webkit-transform: rotate(180deg); 147 | -ms-transform: rotate(180deg); 148 | transform: rotate(180deg) 149 | } 150 | 151 | .header .user-info .user-avatar:hover .user-menu { 152 | display: block 153 | } 154 | 155 | .header .user-info .user-avatar:hover:after { 156 | content: " "; 157 | position: absolute; 158 | height: 10px; 159 | bottom: -1px; 160 | left: 1px; 161 | right: 1px; 162 | background-color: #fff 163 | } 164 | 165 | .header .user-info .user-menu { 166 | display: none; 167 | position: absolute; 168 | right: 0; 169 | top: 80px; 170 | border: 1px solid #d8d8d8; 171 | background-color: #fff; 172 | font-size: 14px; 173 | color: #333; 174 | text-align: right; 175 | padding: 15px 26px 5px; 176 | text-align: center 177 | } 178 | 179 | .header .user-info .user-menu li { 180 | margin-bottom: 6px 181 | } 182 | 183 | .header .user-info .user-menu li>a { 184 | color: #999; 185 | display: block; 186 | word-break: keep-all; 187 | white-space: nowrap; 188 | overflow: hidden; 189 | text-overflow: ellipsis 190 | } 191 | 192 | .header .user-info .user-menu li>a:hover { 193 | color: #ef4238; 194 | text-decoration: underline 195 | } 196 | 197 | .header .user-info .user-menu li.text { 198 | word-break: keep-all; 199 | white-space: nowrap; 200 | text-overflow: ellipsis; 201 | overflow: hidden 202 | } 203 | .subnav li,.subnav ul { 204 | margin: 0; 205 | padding: 0; 206 | list-style: none 207 | } 208 | 209 | .subnav { 210 | background-color: #47464a; 211 | height: 60px; 212 | width: 100%; 213 | min-width: 1200px; 214 | text-align: center 215 | } 216 | 217 | .subnav .navbar { 218 | display: inline-block; 219 | overflow: hidden 220 | } 221 | 222 | .subnav .navbar li { 223 | display: inline-block; 224 | float: left 225 | } 226 | 227 | .subnav .navbar li a { 228 | display: block; 229 | font-size: 16px; 230 | color: #999; 231 | height: 60px; 232 | line-height: 60px; 233 | padding: 0 40px 234 | } 235 | 236 | .subnav .navbar li a:hover { 237 | color: #fff 238 | } 239 | 240 | .subnav .navbar li .active { 241 | color: #ef4238; 242 | position: relative; 243 | cursor: default 244 | } 245 | 246 | .subnav .navbar li .active:hover { 247 | color: #ef4238 248 | } 249 | 250 | .subnav .navbar li .active:before { 251 | content: ""; 252 | width: 2px; 253 | height: 0; 254 | display: inline-block; 255 | position: absolute; 256 | left: 50%; 257 | margin-left: -5px; 258 | top: 53px; 259 | border-bottom: 7px solid #fff; 260 | border-left: 8px solid transparent; 261 | border-right: 8px solid transparent; 262 | border-top: none 263 | } 264 | } -------------------------------------------------------------------------------- /src/components/moveHeader/preview.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | <%= require('./moveHeader.ejs')() %> 11 | 12 | -------------------------------------------------------------------------------- /src/components/pattern/pattern.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 | 11 |
12 |
13 | 15 |
16 | 18 |
19 |
20 |
Nail All 妮欧美甲美睫（闵行店）
21 |
Nail All 妮欧美甲美睫（闵行店）
22 |
23 | 24 | ¥ 25 | 183 26 | /人均 27 | 28 | 29 | 老闵行/交大师大 30 |
31 |
32 | 33 | 35 |
36 | 37 |
38 |
39 |
塔哈尔（宝山龙湖店）
40 |
商务双人套餐，提供免费WiFi
41 |
42 | 43 | ¥ 44 | 99 45 | 46 | 门市价¥162 47 | 宝山区 48 |
49 |
50 | 51 | 53 |
54 | 55 |
56 |
57 |
保利国际影城(江川店)
58 |
免押金,可停车,儿童票,巨幕厅,60帧厅
59 |
60 | 61 | ¥ 62 | 19.9 63 | /人均 64 | 65 | 66 |
67 |
68 | 69 | 71 |
72 | 73 |
74 |
75 |
Godiva（大悦城）
76 |
软冰买一送一套餐1份
77 |
78 | 79 | ¥ 80 | 50 81 | 82 | 门市价¥100 83 | 大悦城 84 |
85 |
86 | 87 | 89 |
90 | 91 |
92 |
93 |
inWE因味茶（丁香路店）
94 |
桂花酿米酵素1份
95 |
96 | 97 | ¥ 98 | 26 99 | 100 | 门市价¥32 101 | 世纪公园 102 |
103 |
104 | 105 | 107 |
108 | 109 |
110 |
111 |
中影国际影城(嘉定菊园店)
112 |
中国巨幕厅,巨幕厅
113 |
114 | 115 | ¥ 116 | 24 117 | /人均 118 | 119 | 120 |
121 |
122 | 123 |
124 |
125 |
-------------------------------------------------------------------------------- /src/components/pattern/pattern.js: -------------------------------------------------------------------------------- 1 | require('./pattern.less') 2 | console.log('pattern') -------------------------------------------------------------------------------- /src/components/pattern/pattern.less: -------------------------------------------------------------------------------- 1 | .pattern { 2 | .index-nav-container { 3 | width: 100%; 4 | height: 44px; 5 | line-height: 44px; 6 | box-sizing: border-box; 7 | font-size: 14px; 8 | color: #fff; 9 | border-top-right-radius: 5px; 10 | border-top-left-radius: 5px; 11 | background-color: rgb(190, 164, 116); 12 | background-image: linear-gradient(to right, rgb(194, 176, 142) 3%, rgb(190, 164, 116) 100%); 13 | .title { 14 | font-size: 18px; 15 | margin-left: 13px; 16 | margin-right: 10px; 17 | } 18 | .nav-item { 19 | float: left; 20 | padding: 0 5px; 21 | position: relative; 22 | cursor: pointer; 23 | text-transform: uppercase; 24 | } 25 | .nav-item.active:after { 26 | position: absolute; 27 | border-left: 5px solid transparent; 28 | border-right: 5px solid transparent; 29 | border-bottom: 7px solid #fff; 30 | content: " "; 31 | display: block; 32 | width: 2px; 33 | height: 0; 34 | top: 37px; 35 | left: 0; 36 | right: 0; 37 | margin: auto; 38 | } 39 | .mf-shang-hei-regular { 40 | font-family: MFShangHei-Regular!important; 41 | } 42 | } 43 | ul { 44 | margin: 0; 45 | padding: 0; 46 | } 47 | li { 48 | list-style: none; 49 | } 50 | 51 | .quality-area { 52 | width: 100%; 53 | padding: 11px 0px 10px; 54 | background-color: #fff; 55 | border-bottom-left-radius: 4px; 56 | border-bottom-right-radius: 4px; 57 | box-sizing: border-box; 58 | border-left: 1px solid #e5e5e5; 59 | border-right: 1px solid #e5e5e5; 60 | border-bottom: 1px solid #e5e5e5; 61 | .quality-card { 62 | width: 33.3%; 63 | height: 314px; 64 | padding: 10px; 65 | box-sizing: border-box; 66 | float: left; 67 | background: #fff; 68 | transition: background-color .5s; 69 | .quality-img { 70 | background: url(//p0.meituan.net/codeman/1a1ea80….png); 71 | background-size: 100% 100%; 72 | max-width: 100%; 73 | height: 208px; 74 | margin-bottom: 11px; 75 | cursor: pointer; 76 | img { 77 | width: 100%; 78 | height: 100%; 79 | border-radius: 4px; 80 | } 81 | } 82 | .poi-info { 83 | text-align: left; 84 | } 85 | .title { 86 | font-size: 16px; 87 | color: #222; 88 | height: 22px; 89 | line-height: 22px; 90 | margin-bottom: 8px; 91 | font-weight: 500; 92 | white-space: nowrap; 93 | overflow: hidden; 94 | text-overflow: ellipsis; 95 | cursor: pointer; 96 | } 97 | .sub-title { 98 | font-size: 12px; 99 | color: #999; 100 | line-height: 18px; 101 | height: 18px; 102 | margin-bottom: 7px; 103 | white-space: nowrap; 104 | overflow: hidden; 105 | text-overflow: ellipsis; 106 | } 107 | .price-info { 108 | height: 27px; 109 | overflow: hidden; 110 | margin-bottom: 10px; 111 | } 112 | .current-price-wrapper { 113 | cursor: pointer; 114 | } 115 | .price-symbol { 116 | font-size: 14px; 117 | color: #BE9E4D; 118 | font-weight: 500; 119 | } 120 | .numfont { 121 | font-family: numbers!important; 122 | letter-spacing: -.5px; 123 | } 124 | .current-price { 125 | font-size: 22px; 126 | color: #BE9E4D; 127 | margin-right: 6px; 128 | letter-spacing: -.8px; 129 | cursor: pointer; 130 | .current-price-type { 131 | font-size: 12px; 132 | letter-spacing: -.6px; 133 | } 134 | } 135 | .sold { 136 | font-size: 12px; 137 | color: #999; 138 | float: right; 139 | margin-top: 10px; 140 | } 141 | .old-price { 142 | font-size: 12px; 143 | color: #999; 144 | text-decoration: line-through; 145 | } 146 | } 147 | } 148 | } -------------------------------------------------------------------------------- /src/components/pattern/preview.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | <%= require('./pattern.ejs')() %> 11 | 12 | -------------------------------------------------------------------------------- /src/contentpage.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 导航页面 8 | 15 | 16 | 17 |
18 |

19 | 首页 20 |

21 | index.html 22 |

pages

23 |
24 | 25 |
26 |

27 | components 28 |

29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /src/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 |
12 |
13 | <%= require('../src/components/head/head.ejs')() %> 14 |
15 |
16 |
17 |
18 |
19 | <%= require('../src/components/menu/menu.ejs')() %> 20 |
21 |
22 | <%= require('../src/components/banner/banner.ejs')() %> 23 |
24 |
25 |
26 |
27 | <%= require('../src/components/pattern/pattern.ejs')() %> 28 |
29 | 30 |
31 | <%= require('../src/components/discount/discount.ejs')() %> 32 |
33 | 34 | -------------------------------------------------------------------------------- /src/lib.js: -------------------------------------------------------------------------------- 1 | import $ from 'jquery' 2 | window.$ = $ 3 | window.jQuery = $ -------------------------------------------------------------------------------- /src/pages/global.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |
13 |
14 | <%= require('../../src/components/moveHeader/moveHeader.ejs')() %> 15 |
16 |
17 | <%= require('../../src/components/moveContent/moveContent.ejs')() %> 18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /src/verdors.js: -------------------------------------------------------------------------------- 1 | require('./assets/less/common.less') 2 | 3 | --------------------------------------------------------------------------------