Commit b3e4a832 by Zhang Xin

first

parents
{
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": [
"transform-runtime",
["import", {"libraryName": "antd", "libraryDirectory": "es", "style": "css" }],
"react-hot-loader/babel"
]
}
\ No newline at end of file
# Created by .ignore support plugin (hsz.mobi)
.DS_Store
.idea/
node_modules/
client/font/
static
client/.DS_Store
package-lock.json
\ No newline at end of file
import actiontypes from '../actiontype/index';
import mock from '../mock/index'
const initStart = () => {
return {
type : actiontypes.INITSTART,
data : mock
}
}
const setPickedCategory = (data)=>{
return {
type:actiontypes.SETPICKEDCATEGORY,
data
}
}
export {initStart,setPickedCategory}
const actionTypes = {
INITSTART : 'INITSTART',
SETPICKEDCATEGORY : 'SETPICKEDCATEGORY',
}
export default actionTypes;
\ No newline at end of file
import React from 'react';
import Swiper from 'swiper';
import SwiperContainers from '../../../config/swiperContainer'
require('./swiper.css');
let swiperListValues = Object.values(SwiperContainers);
let initSwiperList = [];
swiperListValues.forEach(s=>{
initSwiperList[s] = null;
});
export default class SwiperComponent extends React.Component{
constructor(props){
super(props);
this.state = {
swiperList :initSwiperList,
swiper : null
}
}
componentDidMount(){
let {swiperContainer,swiperOptions} = this.props;
let swiperList = this.state.swiperList;
swiperList[swiperContainer] = new Swiper("."+swiperContainer, swiperOptions);
this.setState({
swiperList : swiperList
})
}
componentDidUpdate(prevProps){
const { swiperCount,swiperContainer,initialSlide,initialSlideTime } = this.props;
if (prevProps.swiperCount !== swiperCount) {
this.state.swiperList[swiperContainer].init();
}
if(
initialSlideTime &&
initialSlide !== prevProps.initialSlide
){
this.state.swiperList[swiperContainer].slideTo(initialSlide,0);
}
}
componentWillUnmount() {
this.setState({
swiperList : initSwiperList
})
}
render(){
let props = this.props;
let {swiperContainer,swiperOptions} = props;
let childNodes = React.Children.map(props.children,function (child,index) {
return (
<div key={swiperContainer + "swiper" +index} className={"swiper-slide"}>
{child}
</div>
)
});
return(
<div className={"swiper-container " + swiperContainer}>
<div className={"swiper-wrapper"}>
{childNodes}
</div>
{
swiperOptions && swiperOptions.pagination ? <div className="swiper-pagination"></div> : null
}
{
swiperOptions && swiperOptions.prevButton ? <div className="swiper-button-prev"></div> : null
}
{
swiperOptions && swiperOptions.nextButton ? <div className="swiper-button-next"></div> : null
}
</div>
)
}
}
\ No newline at end of file
import swiperContainers from './swiperContainer'
module.exports = {swiperContainers}
\ No newline at end of file
module.exports = {
bannerSwiperContainer : 'bannerSwiperContainer',
categorySwiperContainer : 'categorySwiperContainer',
subSwiperContainer : 'subSwiperContainer',
skuListSwiperContainer : 'skuListSwiperContainer',
}
\ No newline at end of file
"use strict";
import React from 'react';
export default class App extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
{this.props.children}
</div>
)
}
}
\ No newline at end of file
import React from 'react';
import PropTypes from 'prop-types';
import CategoryComponent from '../../components/HomeComponent/CategoryComponent/CategoryComponent';
import SubContentComponent from '../../components/HomeComponent/SubContentComponent/SubContentComponent';
import SkuListComponent from '../../components/HomeComponent/SkuListComponent/SkuListComponent';
require('./index.css');
export default class HomeContainer extends React.Component{
constructor(props){
super(props);
this.state = {
}
}
componentWillMount(){
}
componentWillReceiveProps(nextProps){
}
render(){
let {categories,currentPicked,setPickedCategory} = this.props;
return(
<div className={"homeContainer"}>
</div>
)
}
}
HomeContainer.propTypes = {
};
HomeContainer.defaultProps = {
}
\ No newline at end of file
"use strict";
import React from 'react';
import {connect} from 'react-redux';
import HeaderContainer from '../HeaderContainer/HeaderContainer'
require('./index.css');
import {initStart} from "../../actions";
class PageContainer extends React.Component{
constructor(props){
super(props);
}
componentWillMount(){
let {dispatch} = this.props;
dispatch(initStart());
}
render(){
let {dispatch,state} = this.props;
return (
<div className={"pageContainer"}>
<HeaderContainer />
</div>
)
}
}
const select = (store)=>{
return Object.assign({},{state:store})
}
module.exports = connect(select)(PageContainer);
\ No newline at end of file
.pageContainer{
position: relative;
width: 1920px;
height: 1080px;
}
\ No newline at end of file
import react from 'react';
export default class Trouble extends react.Component{
constructor(props){
super(props);
}
render(){
return <div>trouble</div>
}
}
\ No newline at end of file
@value blue: #0c77f8;
@value red: #ff0000;
@value green: #aaf200;
.colfffd00{
color : #fffd00 !important;
}
.colff7860{
color: #ff7860!important;
}
.col666{
color: #666666!important;
}
.colfff{
color: #ffffff!important;
}
.col333{
color: #333333!important;
}
\ No newline at end of file
#root {
overflow: hidden!important;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently*/
}
div{
touch-action: none;
user-select: none;
-webkit-user-drag: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar {
background: transparent;
width:0;
height:0;
}
.hide{
display: none!important;
}
.disappear{
opacity: 0!important;
}
body,.ant-modal-mask , .ant-modal-wrap ,.totalClass,.storeManagerQrcodeComponent,.pageContainer{
}
\ No newline at end of file
/* 字体大小使用px,针对不同dpr屏幕设置不同样式 */
body{
--font2:2;
--font3:3;
--font10:10;
}
@value font10: 10px;
@value font12: 12px;
@value font14: 14px;
@value font16: 16px;
@value font18: 18px;
@value font20: 20px;
@value font22: 22px;
@value font24: 24px;
@value font26: 26px;
@value font28: 28px;
@value font30: 30px;
@value font40: 40px;
@value font44: 44px;
@value font50: 50px;
@value font60: 60px;
.font10 {
font-size: font10 !important;
}
[data-dpr="2"] .font10 {
font-size: calc(var(--font2) * font10) !important;
}
[data-dpr="3"] .font10 {
font-size: calc(var(--font3) * font10) !important;
}
.font12 {
font-size: font12 !important;
}
[data-dpr="2"] .font12 {
font-size: calc(var(--font2) * font12) !important;
}
[data-dpr="3"] .font12 {
font-size: calc(var(--font3) * font12) !important;
}
.font14 {
font-size: font14 !important;
}
[data-dpr="2"] .font14 {
font-size: calc(var(--font2) * font14) !important;
}
[data-dpr="3"] .font14 {
font-size: calc(var(--font3) * font14) !important;
}
.font18 {
font-size: font18 !important;
}
[data-dpr="2"] .font18 {
font-size: calc(var(--font2) * font18) !important;
}
[data-dpr="3"] .font18 {
font-size: calc(var(--font3) * font18) !important;
}
.font22 {
font-size: font22 !important;
}
[data-dpr="2"] .font22 {
font-size: calc(var(--font2) * font22) !important;
}
[data-dpr="3"] .font22 {
font-size: calc(var(--font3) * font22) !important;
}
.font24 {
font-size: font24 !important;
}
[data-dpr="2"] .font24 {
font-size: calc(var(--font2) * font24) !important;
}
[data-dpr="3"] .font24 {
font-size: calc(var(--font3) * font24) !important;
}
.font30 {
font-size: font30 !important;
}
[data-dpr="2"] .font30 {
font-size: calc(var(--font2) * font30) !important;
}
[data-dpr="3"] .font30 {
font-size: calc(var(--font3) * font30) !important;
}
.font40 {
font-size: font40 !important;
}
[data-dpr="2"] .font40 {
font-size: calc(var(--font2) * font40) !important;
}
[data-dpr="3"] .font40 {
font-size: calc(var(--font3) * font40) !important;
}
.font44 {
font-size: font44 !important;
}
[data-dpr="2"] .font44 {
font-size: calc(var(--font2) * font44) !important;
}
[data-dpr="3"] .font44 {
font-size: calc(var(--font3) * font44) !important;
}
/*
CSS Reset
理念:清除和重置是紧密不可分的
特色:1.适应中文 2.基于最新主流浏览器
*/
html {
font-size: 72px;
}
/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
video, /* H5 元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */
margin: 0;
padding: 0;
outline: none; /* Remove style with border when elements get focused */
}
/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */
/*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
font: 16px/1 Microsoft YaHei, Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示,使得在任何编码下都无问题 */
outline: none;
}
html, body {
height: 100%;
background-color: #ffffff;
}
h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */
/* 重置列表元素 */
ul, ol { list-style: none; }
/* 重置文本格式元素 */
a, s, div { text-decoration: none; outline: none; }
a:hover { text-decoration: underline; }
abbr[title], acronym[title] { /* 注:1.ie6 不支持 abbr; 2.这里用了属性选择符,ie6 下无效果 */
border-bottom: 1px dotted;
cursor: help;
}
q:before, q:after { content: ''; }
/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; } /* img 搭车:让链接里的 img 无边框 */
/* 注:optgroup 无法扶正 */
button, input, select, textarea {
font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}
/* 重置表格元素 */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 重置 hr */
hr {
border: none;
height: 1px;
}
/* 让非ie浏览器默认也显示垂直滚动条,防止因滚动条引起的闪烁 */
html { overflow-y: scroll; }
/*清楚浮动*/
.clearfix {
display: block;
*zoom: 1
}
.clearfix:after {
content: "\0020";
display: block;
visibility: hidden;
clear: both;
height: 0;
overflow: hidden;
}
i{
font-style: normal;
}
.fl{
float:left;
}
.fr{
float: right;
}
div{
box-sizing: border-box;
}
\ No newline at end of file
/**
* Created by ruibing on 16/11/2.
*/
module.exports = {
domain: 'http://test.mjitech.com'
}
\ No newline at end of file
/**
* Created by ruibing on 16/11/2.
*/
module.exports = {
domain: 'http://www.mjitech.com'
}
\ No newline at end of file
/**
* Created by ruibing on 16/11/2.
*/
module.exports = {
domain: 'http://test.mjitech.com'
}
\ No newline at end of file
@import url('./css/reset.css');
@import url('./css/font.css');
@import url('./css/color.css');
@import url('./css/common.css');
@import url('./css/iconfont.css');
\ No newline at end of file
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>怪兽家便利店</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,target-densitydpi=device-dpi'/>
<meta name="format-detection" content="telephone=no"/>
</head>
<body>
<div id="root"></div>
<script src="/vendor.bundle.js"></script>
<script src="/index.js"></script>
</body>
</html>
\ No newline at end of file
import React from 'react';
import ReactDom from 'react-dom';
import {createStore , applyMiddleware} from 'redux';
import {Provider} from 'react-redux';
import reducers from './reducers/index';
import { createLogger } from 'redux-logger'
import thunkMiddleware from 'redux-thunk';
import {Router,hashHistory} from 'react-router';
import routes from './routes/index'
require('./index.css');
function activateVendor() {
const logMiddleware = createLogger();
return createStore(
reducers,
applyMiddleware(
thunkMiddleware,
logMiddleware
)
)
}
function renderPage(store) {
ReactDom.render(
<Provider store={store}>
<Router history={hashHistory} routes={routes}>
</Router>
</Provider>,
document.getElementById('root')
)
}
let store = activateVendor();
renderPage(store);
\ No newline at end of file
let info =
{};
module.exports = info;
\ No newline at end of file
import { combineReducers } from 'redux';
import trouble from './trouble';
export default combineReducers({
trouble
})
\ No newline at end of file
export default function (state={},action) {
switch (action.type){
default:
return state;
}
}
\ No newline at end of file
module.exports = {
path : '/',
indexRoute : {
getComponent(nextState,cb){
require.ensure([],(require)=>{
require.ensure([], (require) => {
cb(null, require('../containers/PageContainer/pageContainer').default)
}, 'HomePage')
})
}
},
getComponent(nextState, cb) {
require.ensure([], (require) => {
cb(null, require('../containers/App/App').default)
}, 'App')
},
childRoutes : [
require('./trouble')
]
}
\ No newline at end of file
module.exports = {
path : '/trouble/:troubleid',
getComponent(nextState,cb){
require.ensure([],(require)=>{
cb(null,require('../containers/Trouble/Trouble'))
},'Trouble')
}
};
\ No newline at end of file
import headlogo from '../image/header-logo.png';
import banner1 from '../image/banner1.png';
import banner2 from '../image/banner2.png';
import banner3 from '../image/banner3.png';
import defaultImg from '../image/default.png';
const localHost = 'http://localhost:7788';
const devHost = 'http://test.mjitech.com';
const masterHost = 'http://www.mjitech.com';
/**
* 获取新的图片链接
* @param path
* @param host
* @returns {*}
*/
const getNewPath = (path,host)=>{
return path.indexOf('http') < 0 ? host + path : path;
};
/**
* 获取新的规格的图片地址
* @param path
* @param format
* @returns {*}
*/
const getNewFormatPath = (path,format)=>{
let particial = path.split('.');
if(particial.length === 2){
particial[0] = particial[0] + '_' + format;
return particial.join('.')
} else {
return path;
}
};
/**
* 获取本地图片的新规格链接
* @param path
* @param format
* @returns {*}
*/
const getPic = (path,format)=>{
let newPath = getNewFormatPath(path,format);
newPath = getNewPath(newPath,localHost);
return newPath;
};
const handleImgError = (ref)=>{
let src = ref.src;
if(src.indexOf(localHost) > -1){
let len = src.indexOf(localHost) + localHost.length;
src = devHost + src.substring(len);
}else{
src = defaultImg
}
return src;
}
const handleImgLoad = (ref)=>{
let width = ref.width;
let height = ref.height;
let style = {}
if(width >= height){
style ={
width : "100%",
height : "auto"
}
}else{
style ={
width : "auto",
height : "100%"
}
}
return style;
}
const localImg = {headlogo,banner1,banner2,banner3,defaultImg}
module.exports = {localHost,devHost,masterHost,getPic,handleImgError,handleImgLoad,localImg};
\ No newline at end of file
import image from './image';
module.exports = {...image};
\ No newline at end of file
{
"name": "machinehomepage_new_27",
"version": "1.0.0",
"private": true,
"description": "Maxbox machinePage 27",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"clean": "rm -rf static/*",
"start": "set NODE_ENV=development && webpack-dev-server --env=dev -d --history-api-fallback --hot --inline --progress --colors --port 80 --host 0.0.0.0",
"build": "set NODE_ENV=production && webpack --env=build --progress --color"
},
"author": "",
"license": "MIT",
"devDependencies": {
"antd": "^3.6.3",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-import": "^1.8.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "^6.26.0",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"isomorphic-fetch": "^2.2.1",
"minimist": "^1.2.0",
"postcss-loader": "^2.1.5",
"prop-types": "^15.6.2",
"qrcode.react": "^0.8.0",
"react-hot-loader": "^4.0.0",
"react-router": "^4.3.1",
"react-router-redux": "^4.0.8",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"rucksack-css": "^1.0.2",
"style-loader": "^0.21.0",
"swiper": "^3.4.2",
"url-loader": "^1.0.1",
"webpack": "^3.12.0",
"webpack-dev-server": "^2.11.2"
},
"dependencies": {
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
"redux": "^4.0.0"
}
}
module.exports = {
plugins: [
require('autoprefixer')({
broswers: ['last 5 versions']
})
]
}
\ No newline at end of file
const path = require('path');
const webpack = require('webpack')
const rucksack = require('rucksack-css');
let baseConfig = {
context : path.join(__dirname,'./client'), //基础目录
entry : { //入口文件
index:['./index.js','./index.html'],
vendor:[
'react',
'react-dom',
'react-redux',
'redux'
]
},
module : {
rules:[
{
test:/\.(ttf|eot|otf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use:["url-loader?limit=5120"]
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: ['url-loader?limit=10000&mimetype=image/svg+xml']
},
{
test:/\.(jpg|png|jpeg)$/,
use:["url-loader?limit=512000&name=[name]-[hash:6].[ext]&mimetype=image/png"] //limit 500kb
},
{
test:/\.(gif)$/,
use:["url-loader?limit=512000&name=[path][name].[ext]&mimetype=image/gif"]
},
{
test: /\.html$/,
use: ['file-loader?name=[name].[ext]']
},
{
test: /\.css$/,
use: ["style-loader", "css-loader","postcss-loader"]
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
include: path.join(__dirname, 'client'),
use: ['babel-loader?cacheDirectory=true']
}
]
},
resolve:{ //自动解析确定的扩展
extensions:['.js', '.jsx', '.scss', '.css'],
modules: [
path.resolve(__dirname, 'node_modules'),
path.join(__dirname, './client')
]
}
}
function getEnv(){
const args = require('minimist')(process.argv.slice(2));
let env;
if(args._.length > 0 && args._.indexOf('start') !== -1){
env = 'test';
}else if(args.env){
env = args.env;
}else{
env = 'dev'
}
return env;
}
let env = getEnv();
let envConfig = {
'build':{
output:{
path : path.join(__dirname,'./static'),
filename : 'bundle-[hash:6].js',
chunkFilename : '[name].[chunkhash:5].chunk.js',
},
plugins:[
new webpack.optimize.UglifyJsPlugin(), //js压缩
new webpack.optimize.CommonsChunkPlugin({
name : "vendor",
filename : "vendor.bundle.js"
}), //分割共有模块和代码模块
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development') }
}),
new webpack.ProvidePlugin({
ENV: __dirname + '/client/env/' + (process.env.NODE_ENV || 'development'),
UTILPATH:__dirname+'/client/util/util',
CONFIG:__dirname+'/client/config/index'
}),
new webpack.NoEmitOnErrorsPlugin(), //配置了NoErrorsPlugin插件,用来跳过编译时出错的代码并记录,使编译后运行时的包不会发生错误
]
},
'dev':{
output: {
path: path.join(__dirname, './static'),
filename: '[name].js',
chunkFilename: '[name].[chunkhash:5].chunk.js',
},
plugins:[
new webpack.optimize.UglifyJsPlugin(), //js压缩
new webpack.optimize.CommonsChunkPlugin({
name : "vendor",
filename : "vendor.bundle.js"
}), //分割共有模块和代码模块
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development') }
}),
new webpack.ProvidePlugin({
ENV: __dirname + '/client/env/' + (process.env.NODE_ENV || 'development'),
UTILPATH:__dirname+'/client/util/util',
CONFIG:__dirname+'/client/config/index'
}),
new webpack.LoaderOptionsPlugin({
options: {
devServer: {
contentBase: "./client", //本地服务器所加载的页面所在的目录
colors: true, //终端中输出结果为彩色
historyApiFallback: true, //不跳转
inline: true, //实时刷新
disableHostCheck : true,
hot : true
}
}
}),
]
}
}
module.exports = Object.assign({},baseConfig,envConfig[env]);
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment