Skip to content

M
mr-julyedu
Commit cb85739a by zhanghaozhe
Options

Merge branch 'xzhindex' into study

parents eaf56428 bc87a39e
Showing with 1421 additions and 13 deletions
.history/package_20190419094732.json 0 → 100644
{
"name": "my-julyedu",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/core": "7.2.2",
"@svgr/webpack": "4.1.0",
"antd-mobile": "^2.2.11",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "9.0.0",
"babel-jest": "23.6.0",
"babel-loader": "8.0.5",
"babel-plugin-named-asset-import": "^0.3.1",
"babel-preset-react-app": "^7.0.2",
"bfj": "6.1.1",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"css-loader": "1.0.0",
"dotenv": "6.0.0",
"dotenv-expand": "4.2.0",
"eslint": "5.12.0",
"eslint-config-react-app": "^3.0.8",
"eslint-loader": "2.1.1",
"eslint-plugin-flowtype": "2.50.1",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-jsx-a11y": "6.1.2",
"eslint-plugin-react": "7.12.4",
"file-loader": "2.0.0",
"fs-extra": "7.0.1",
"html-webpack-plugin": "4.0.0-alpha.2",
"identity-obj-proxy": "3.0.0",
"jest": "23.6.0",
"jest-pnp-resolver": "1.0.2",
"jest-resolve": "23.6.0",
"jest-watch-typeahead": "^0.2.1",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "0.5.0",
"node-sass": "^4.11.0",
"optimize-css-assets-webpack-plugin": "5.0.1",
"pnp-webpack-plugin": "1.2.1",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-preset-env": "6.5.0",
"postcss-safe-parser": "4.0.1",
"react": "^16.8.6",
"react-app-polyfill": "^0.2.2",
"react-dev-utils": "^8.0.0",
"react-dom": "^16.8.6",
"react-redux": "^7.0.2",
"react-router-dom": "^5.0.0",
"redux": "^4.0.1",
"resolve": "1.10.0",
"sass-loader": "^7.1.0",
"sass-resources-loader": "^2.0.0",
"style-loader": "0.23.1",
"terser-webpack-plugin": "1.2.2",
"url-loader": "1.1.2",
"webpack": "4.28.3",
"webpack-dev-server": "3.1.14",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "3.6.3"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"resolver": "jest-pnp-resolver",
"setupFiles": [
"react-app-polyfill/jsdom"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
],
"testEnvironment": "jsdom",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins": [
"/Users/baiguangyao/project/my-julyedu/node_modules/jest-watch-typeahead/filename.js",
"/Users/baiguangyao/project/my-julyedu/node_modules/jest-watch-typeahead/testname.js"
]
},
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd-mobile",
"style": true
}
]
]
},
"devDependencies": {
"babel-plugin-import": "^1.11.0",
"sass-resources-loader": "^2.0.0"
},
"theme": './src/assets/theme/index.less'
}
.history/package_20190419094913.json 0 → 100644
{
"name": "my-julyedu",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/core": "7.2.2",
"@svgr/webpack": "4.1.0",
"antd-mobile": "^2.2.11",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "9.0.0",
"babel-jest": "23.6.0",
"babel-loader": "8.0.5",
"babel-plugin-named-asset-import": "^0.3.1",
"babel-preset-react-app": "^7.0.2",
"bfj": "6.1.1",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"css-loader": "1.0.0",
"dotenv": "6.0.0",
"dotenv-expand": "4.2.0",
"eslint": "5.12.0",
"eslint-config-react-app": "^3.0.8",
"eslint-loader": "2.1.1",
"eslint-plugin-flowtype": "2.50.1",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-jsx-a11y": "6.1.2",
"eslint-plugin-react": "7.12.4",
"file-loader": "2.0.0",
"fs-extra": "7.0.1",
"html-webpack-plugin": "4.0.0-alpha.2",
"identity-obj-proxy": "3.0.0",
"jest": "23.6.0",
"jest-pnp-resolver": "1.0.2",
"jest-resolve": "23.6.0",
"jest-watch-typeahead": "^0.2.1",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "0.5.0",
"node-sass": "^4.11.0",
"optimize-css-assets-webpack-plugin": "5.0.1",
"pnp-webpack-plugin": "1.2.1",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-preset-env": "6.5.0",
"postcss-safe-parser": "4.0.1",
"react": "^16.8.6",
"react-app-polyfill": "^0.2.2",
"react-dev-utils": "^8.0.0",
"react-dom": "^16.8.6",
"react-redux": "^7.0.2",
"react-router-dom": "^5.0.0",
"redux": "^4.0.1",
"resolve": "1.10.0",
"sass-loader": "^7.1.0",
"sass-resources-loader": "^2.0.0",
"style-loader": "0.23.1",
"terser-webpack-plugin": "1.2.2",
"url-loader": "1.1.2",
"webpack": "4.28.3",
"webpack-dev-server": "3.1.14",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "3.6.3"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"resolver": "jest-pnp-resolver",
"setupFiles": [
"react-app-polyfill/jsdom"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
],
"testEnvironment": "jsdom",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins": [
"/Users/baiguangyao/project/my-julyedu/node_modules/jest-watch-typeahead/filename.js",
"/Users/baiguangyao/project/my-julyedu/node_modules/jest-watch-typeahead/testname.js"
]
},
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd-mobile",
"style": true
}
]
]
},
"devDependencies": {
"babel-plugin-import": "^1.11.0",
"sass-resources-loader": "^2.0.0"
},
"theme": './src/assets/theme/config.js'
}
.history/package_20190419095455.json 0 → 100644
{
"name": "my-julyedu",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/core": "7.2.2",
"@svgr/webpack": "4.1.0",
"antd-mobile": "^2.2.11",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "9.0.0",
"babel-jest": "23.6.0",
"babel-loader": "8.0.5",
"babel-plugin-named-asset-import": "^0.3.1",
"babel-preset-react-app": "^7.0.2",
"bfj": "6.1.1",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"css-loader": "1.0.0",
"dotenv": "6.0.0",
"dotenv-expand": "4.2.0",
"eslint": "5.12.0",
"eslint-config-react-app": "^3.0.8",
"eslint-loader": "2.1.1",
"eslint-plugin-flowtype": "2.50.1",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-jsx-a11y": "6.1.2",
"eslint-plugin-react": "7.12.4",
"file-loader": "2.0.0",
"fs-extra": "7.0.1",
"html-webpack-plugin": "4.0.0-alpha.2",
"identity-obj-proxy": "3.0.0",
"jest": "23.6.0",
"jest-pnp-resolver": "1.0.2",
"jest-resolve": "23.6.0",
"jest-watch-typeahead": "^0.2.1",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "0.5.0",
"node-sass": "^4.11.0",
"optimize-css-assets-webpack-plugin": "5.0.1",
"pnp-webpack-plugin": "1.2.1",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-preset-env": "6.5.0",
"postcss-safe-parser": "4.0.1",
"react": "^16.8.6",
"react-app-polyfill": "^0.2.2",
"react-dev-utils": "^8.0.0",
"react-dom": "^16.8.6",
"react-redux": "^7.0.2",
"react-router-dom": "^5.0.0",
"redux": "^4.0.1",
"resolve": "1.10.0",
"sass-loader": "^7.1.0",
"sass-resources-loader": "^2.0.0",
"style-loader": "0.23.1",
"terser-webpack-plugin": "1.2.2",
"url-loader": "1.1.2",
"webpack": "4.28.3",
"webpack-dev-server": "3.1.14",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "3.6.3"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"resolver": "jest-pnp-resolver",
"setupFiles": [
"react-app-polyfill/jsdom"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
],
"testEnvironment": "jsdom",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins": [
"/Users/baiguangyao/project/my-julyedu/node_modules/jest-watch-typeahead/filename.js",
"/Users/baiguangyao/project/my-julyedu/node_modules/jest-watch-typeahead/testname.js"
]
},
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd-mobile",
"style": true
}
]
]
},
"devDependencies": {
"babel-plugin-import": "^1.11.0",
"sass-resources-loader": "^2.0.0"
},
"theme": "./src/assets/theme/config.js"
}
.history/src/assets/theme/config_20190419094858.js 0 → 100644
@hd: 1px; // 基本单位
// 支付宝钱包默认主题
// https://github.com/ant-design/ant-design-mobile/wiki/设计变量表及命名规范
// 色彩
// ---
// 文字色
@color-text - base: #000; // 基本
@color-text - base - inverse: #fff; // 基本 - 反色
@color-text - secondary: #a4a9b0; // 辅助色
@color-text - placeholder: #bbb; // 文本框提示
@color-text - disabled: #bbb; // 失效
@color-text - caption: #888; // 辅助描述
@color-text - paragraph: #333; // 段落
@color-link: @brand-primary; // 链接
// 背景色
@fill-base: #fff; // 组件默认背景
@fill-body: #f5f5f9; // 页面背景
@fill-tap: #ddd; // 组件默认背景 - 按下
@fill-disabled: #ddd; // 通用失效背景
@fill-mask: rgba(0, 0, 0, 0.4); // 遮罩背景
@color-icon - base: #ccc; // 许多小图标的背景，比如一些小圆点，加减号
@fill-grey: #f7f7f7;
// 透明度
@opacity-disabled: 0.3; // switch checkbox radio 等组件禁用的透明度
// 全局/品牌色
@brand-primary: #108ee9;
@brand-primary - tap: #0e80d2;
@brand-success: #6abf47;
@brand-warning: #ffc600;
@brand-error: #f4333c;
@brand-important: #ff5b05; // 用于小红点
@brand-wait: #108ee9;
// 边框色
@border-color - base: #ddd;
// 字体尺寸
// ---
@font-size - icontext: 10 * @hd;
@font-size - caption - sm: 12 * @hd;
@font-size - base: 14 * @hd;
@font-size - subhead: 15 * @hd;
@font-size - caption: 16 * @hd;
@font-size - heading: 17 * @hd;
// 圆角
// ---
@radius-xs: 2 * @hd;
@radius-sm: 3 * @hd;
@radius-md: 5 * @hd;
@radius-lg: 7 * @hd;
@radius-circle: 50 %;
// 边框尺寸
// ---
@border-width - sm: 1PX;
@border-width - md: 1PX;
@border-width - lg: 2 * @hd;
// 间距
// ---
// 水平间距
@h-spacing - sm: 5 * @hd;
@h-spacing - md: 8 * @hd;
@h-spacing - lg: 15 * @hd;
// 垂直间距
@v-spacing - xs: 3 * @hd;
@v-spacing - sm: 6 * @hd;
@v-spacing - md: 9 * @hd;
@v-spacing - lg: 15 * @hd;
@v-spacing - xl: 21 * @hd;
// 高度
// ---
@line-height - base: 1; // 单行行高
@line-height - paragraph: 1.5; // 多行行高
// 图标尺寸
// ---
@icon-size - xxs: 15 * @hd;
@icon-size - xs: 18 * @hd;
@icon-size - sm: 21 * @hd;
@icon-size - md: 22 * @hd; // 导航条上的图标、grid的图标大小
@icon-size - lg: 36 * @hd;
// 动画缓动
// ---
@ease-in -out - quint: cubic - bezier(.86, 0, .07, 1);
// 组件变量
// ---
@actionsheet-item - height: 50 * @hd;
@actionsheet-item - font - size: 18 * @hd;
// button
@button-height: 47 * @hd;
@button-font - size: 18 * @hd;
@button-height - sm: 30 * @hd;
@button-font - size - sm: 13 * @hd;
@primary-button - fill: @brand-primary;
@primary-button - fill - tap: @brand-primary - tap;
@ghost-button - color: @brand-primary; // 同时应用于背景、文字颜色、边框色
@ghost-button - fill - tap: fade(@brand-primary, 60 %);
@warning-button - fill: #e94f4f;
@warning-button - fill - tap: #d24747;
@link-button - fill - tap: #ddd;
@link-button - font - size: 16 * @hd;
// menu
@menu-multi - select - btns - height: @button-height;
// modal
@modal-font - size - heading: 18 * @hd;
@modal-button - font - size: 18 * @hd; // 按钮字号
@modal-button - height: 50 * @hd; // 按钮高度
// list
@list-title - height: 30 * @hd;
@list-item - height - sm: 35 * @hd;
@list-item - height: 44 * @hd;
// input
@input-label - width: 17 * @hd; // InputItem、TextareaItem 文字长度基础值
@input-font - size: 17 * @hd;
@input-color - icon: #ccc; // input clear icon 的背景色
@input-color - icon - tap: @brand-primary;
// tabs
@tabs-color: @brand-primary;
@tabs-height: 43.5 * @hd;
@tabs-font - size - heading: 15 * @hd;
@tabs-ink - bar - height: @border-width - lg;
// segmented-control
@segmented-control - color: @brand-primary; // 同时应用于背景、文字颜色、边框色
@segmented-control - height: 27 * @hd;
@segmented-control - fill - tap: fade(@brand-primary, 0.1);
// tab-bar
@tab-bar - fill: #ebeeef;
@tab-bar - height: 50 * @hd;
// toast
@toast-fill: rgba(58, 58, 58, 0.9); // toast, activity-indicator 的背景颜色
// search-bar
@search-bar - fill: #efeff4;
@search-bar - height: 44 * @hd;
@search-bar - input - height: 28 * @hd;
@search-bar - font - size: 15 * @hd;
@search-color - icon: #bbb; // input search icon 的背景色
// notice-bar
@notice-bar - fill: #fefcec;
@notice-bar - height: 36 * @hd;
@notice-bar - color: #f76a24;
// switch
@switch-fill: #4dd865;
@switch-fill - android: @brand-primary;
// tag
@tag-height: 25 * @hd;
@tag-height - sm: 15 * @hd;
@tag-color: @brand-primary;
// keyboard
@keyboard-confirm - color: @brand-primary;
@keyboard-confirm - tap - color: @brand-primary - tap;
// picker
@option-height: 42 * @hd; // picker 标题的高度
// z-index
@progress-zindex: 2000;
@popover-zindex: 1999;
@toast-zindex: 1999;
@action-sheet - zindex: 1000; // actonsheet 会放到 popup / modal 中
@picker-zindex: 1000;
@popup-zindex: 999;
@modal-zindex: 999; // modal.alert 应该最大，其他应该较小
@tabs-pagination - zindex: 999;
.history/src/assets/theme/config_20190419095041.js 0 → 100644
module.exports = function() {
return {
"@brand-primary": 'green'
}
}
\ No newline at end of file
.history/src/assets/theme/index_20190419094649.less 0 → 100644
@hd: 1px; // 基本单位
// 支付宝钱包默认主题
// https://github.com/ant-design/ant-design-mobile/wiki/设计变量表及命名规范
// 色彩
// ---
// 文字色
@color-text - base: #000; // 基本
@color-text - base - inverse: #fff; // 基本 - 反色
@color-text - secondary: #a4a9b0; // 辅助色
@color-text - placeholder: #bbb; // 文本框提示
@color-text - disabled: #bbb; // 失效
@color-text - caption: #888; // 辅助描述
@color-text - paragraph: #333; // 段落
@color-link: @brand-primary; // 链接
// 背景色
@fill-base: #fff; // 组件默认背景
@fill-body: #f5f5f9; // 页面背景
@fill-tap: #ddd; // 组件默认背景 - 按下
@fill-disabled: #ddd; // 通用失效背景
@fill-mask: rgba(0, 0, 0, 0.4); // 遮罩背景
@color-icon - base: #ccc; // 许多小图标的背景，比如一些小圆点，加减号
@fill-grey: #f7f7f7;
// 透明度
@opacity-disabled: 0.3; // switch checkbox radio 等组件禁用的透明度
// 全局/品牌色
@brand-primary: #108ee9;
@brand-primary - tap: #0e80d2;
@brand-success: #6abf47;
@brand-warning: #ffc600;
@brand-error: #f4333c;
@brand-important: #ff5b05; // 用于小红点
@brand-wait: #108ee9;
// 边框色
@border-color - base: #ddd;
// 字体尺寸
// ---
@font-size - icontext: 10 * @hd;
@font-size - caption - sm: 12 * @hd;
@font-size - base: 14 * @hd;
@font-size - subhead: 15 * @hd;
@font-size - caption: 16 * @hd;
@font-size - heading: 17 * @hd;
// 圆角
// ---
@radius-xs: 2 * @hd;
@radius-sm: 3 * @hd;
@radius-md: 5 * @hd;
@radius-lg: 7 * @hd;
@radius-circle: 50 %;
// 边框尺寸
// ---
@border-width - sm: 1PX;
@border-width - md: 1PX;
@border-width - lg: 2 * @hd;
// 间距
// ---
// 水平间距
@h-spacing - sm: 5 * @hd;
@h-spacing - md: 8 * @hd;
@h-spacing - lg: 15 * @hd;
// 垂直间距
@v-spacing - xs: 3 * @hd;
@v-spacing - sm: 6 * @hd;
@v-spacing - md: 9 * @hd;
@v-spacing - lg: 15 * @hd;
@v-spacing - xl: 21 * @hd;
// 高度
// ---
@line-height - base: 1; // 单行行高
@line-height - paragraph: 1.5; // 多行行高
// 图标尺寸
// ---
@icon-size - xxs: 15 * @hd;
@icon-size - xs: 18 * @hd;
@icon-size - sm: 21 * @hd;
@icon-size - md: 22 * @hd; // 导航条上的图标、grid的图标大小
@icon-size - lg: 36 * @hd;
// 动画缓动
// ---
@ease-in -out - quint: cubic - bezier(.86, 0, .07, 1);
// 组件变量
// ---
@actionsheet-item - height: 50 * @hd;
@actionsheet-item - font - size: 18 * @hd;
// button
@button-height: 47 * @hd;
@button-font - size: 18 * @hd;
@button-height - sm: 30 * @hd;
@button-font - size - sm: 13 * @hd;
@primary-button - fill: @brand-primary;
@primary-button - fill - tap: @brand-primary - tap;
@ghost-button - color: @brand-primary; // 同时应用于背景、文字颜色、边框色
@ghost-button - fill - tap: fade(@brand-primary, 60 %);
@warning-button - fill: #e94f4f;
@warning-button - fill - tap: #d24747;
@link-button - fill - tap: #ddd;
@link-button - font - size: 16 * @hd;
// menu
@menu-multi - select - btns - height: @button-height;
// modal
@modal-font - size - heading: 18 * @hd;
@modal-button - font - size: 18 * @hd; // 按钮字号
@modal-button - height: 50 * @hd; // 按钮高度
// list
@list-title - height: 30 * @hd;
@list-item - height - sm: 35 * @hd;
@list-item - height: 44 * @hd;
// input
@input-label - width: 17 * @hd; // InputItem、TextareaItem 文字长度基础值
@input-font - size: 17 * @hd;
@input-color - icon: #ccc; // input clear icon 的背景色
@input-color - icon - tap: @brand-primary;
// tabs
@tabs-color: @brand-primary;
@tabs-height: 43.5 * @hd;
@tabs-font - size - heading: 15 * @hd;
@tabs-ink - bar - height: @border-width - lg;
// segmented-control
@segmented-control - color: @brand-primary; // 同时应用于背景、文字颜色、边框色
@segmented-control - height: 27 * @hd;
@segmented-control - fill - tap: fade(@brand-primary, 0.1);
// tab-bar
@tab-bar - fill: #ebeeef;
@tab-bar - height: 50 * @hd;
// toast
@toast-fill: rgba(58, 58, 58, 0.9); // toast, activity-indicator 的背景颜色
// search-bar
@search-bar - fill: #efeff4;
@search-bar - height: 44 * @hd;
@search-bar - input - height: 28 * @hd;
@search-bar - font - size: 15 * @hd;
@search-color - icon: #bbb; // input search icon 的背景色
// notice-bar
@notice-bar - fill: #fefcec;
@notice-bar - height: 36 * @hd;
@notice-bar - color: #f76a24;
// switch
@switch-fill: #4dd865;
@switch-fill - android: @brand-primary;
// tag
@tag-height: 25 * @hd;
@tag-height - sm: 15 * @hd;
@tag-color: @brand-primary;
// keyboard
@keyboard-confirm - color: @brand-primary;
@keyboard-confirm - tap - color: @brand-primary - tap;
// picker
@option-height: 42 * @hd; // picker 标题的高度
// z-index
@progress-zindex: 2000;
@popover-zindex: 1999;
@toast-zindex: 1999;
@action-sheet - zindex: 1000; // actonsheet 会放到 popup / modal 中
@picker-zindex: 1000;
@popup-zindex: 999;
@modal-zindex: 999; // modal.alert 应该最大，其他应该较小
@tabs-pagination - zindex: 999;
package.json
......@@ -137,8 +137,5 @@
"babel-plugin-import": "^1.11.0",
"sass-resources-loader": "^2.0.0"
},
"theme": {
"brand-primary": "green",
"color-text-base": "#333"
}
"theme": "./src/assets/theme/config.js"
}
src/assets/theme/config.js 0 → 100644
module.exports = function() {
return {
"@brand-primary": 'green'
}
}
\ No newline at end of file
src/common/Scroll/index.js 0 → 100644
import React, {Component} from 'react';
import { Carousel, WingBlank } from 'antd-mobile';
class Scroll extends Component {
render() {
return (
<WingBlank className='scroll'>
<Carousel
autoplay={true}
infinite
>
{this.props.data.map(val => (
<a
key={val}
href="http://www.baidu.com"
style={{ display: 'inline-block', width: '100%', height: this.props.height}}
>
<img
src={val.src}
alt=""
style={{ width: '100%', verticalAlign: 'top' }}
onLoad={() => {
// fire window resize event to change height
window.dispatchEvent(new Event('resize'));
this.setState({ imgHeight: 'auto' });
}}
/>
</a>
))}
</Carousel>
</WingBlank>
);
}
}
export default Scroll
src/common/Topscroll/index.js 0 → 100644
import React, {Component} from 'react';
import {Carousel, WingBlank} from 'antd-mobile';
class Topscroll extends Component {
state = {}
render() {
return (
<WingBlank>
<Carousel className="space-carousel"
frameOverflow="visible"
cellSpacing={12}
slideWidth={0.9}
autoplay
infinite
beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
afterChange={index => this.setState({slideIndex: index})}
>
{this.props.data.map((val, index) => (
<a
key={val}
href="http://www.alipay.com"
style={{
display: 'block',
position: 'relative',
top: this.state.slideIndex === index ? -10 : 0,
height: this.props.height,
boxShadow: '2px 1px 1px rgba(0, 0, 0, 0.2)',
}}
>
<img
src={val.src}
alt=""
style={{width: '100%', verticalAlign: 'top'}}
onLoad={() => {
// fire window resize event to change height
window.dispatchEvent(new Event('resize'));
this.setState({imgHeight: this.props.height});
}}
/>
</a>
))}
</Carousel>
</WingBlank>
);
}
}
export default Topscroll
src/common/carousel/carousel.scss 0 → 100644
.scroll-box {
width: 100%;
overflow: auto;
position: relative;
margin-top: 15px;
.scroll-list {
height: 100%;
display: flex;
overflow: hidden;
position: absolute;
}
}::-webkit-scrollbar{
display:none;
}
src/common/carousel/index.js 0 → 100644
import React from 'react';
import './carousel.scss'
const Carousel = (props) => {
return (
<div className='scroll-box'>
<ul className='scroll-list'>
{props.children}
</ul>
</div>
)
};
export default Carousel;
src/common/course/course.scss 0 → 100644
.course-item {
width: 47.8%;
margin-top: 15px;
margin-bottom: 5px;
position: relative;
img {
width: 100%;
height: 119px;
}
.course-title {
font-size: 14px;
color: $color_333;
line-height: 19px;
margin-top: 9px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
src/common/course/index.js 0 → 100644
import React from 'react';
import './course.scss'
const Course = (props) => {
return (
<li className='course-item'>
{props.top}
<a href="">
<img src={props.data.src} alt=""/>
<p className="course-title">{props.data.title}</p>
</a>
{props.bottom}
</li>
);
};
export default Course;
src/common/index.js
// 底部路由
export { default as Nav } from './Nav'
export { default as VList } from './VList'
\ No newline at end of file
export { default as VList } from './VList'
export { default as Course } from './Course' // 课程状态（试听 正在直播）+封面+标题+ 详情
export { default as Carousel } from './Carousel' // 横向滚动
export { default as Topscroll } from './Topscroll' // 首页头部轮播
export { default as Scroll } from './Scroll' // 首页正常轮播图
src/components/Index/index.js
import React, { Component } from 'react';
import React, {Component} from 'react';
import {Course, Carousel,Scroll,Topscroll} from '../../common'
import './index.scss';
class Index extends Component {
state = {
dataList: [
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 0,
'price0': 100,
'price1': 1000
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '啊啊啊啊啊啊啊啊啊啊啊',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 0,
'price0': 100,
'price1': 1000
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '啊啊啊啊啊啊啊啊啊啊啊',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 0,
'price0': 100,
'price1': 1000
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '啊啊啊啊啊啊啊啊啊啊啊',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 1,
'price0': 200,
'price1': 2000
}
],
tabdata: [
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'name': '公开课'
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'name': '精品特惠'
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'name': '赚奖学金'
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'name': '每日一题'
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'name': '企业内训'
}
]
}
render() {
const top = <div>333</div>
return (
<div>
首页
<div className='indexbox'>
<Topscroll data={this.state.dataList} height='168px'></Topscroll>
<div className="tabbox">
<ul>
{
this.state.tabdata.map((item, index) => {
return (
<li key={index}>
<img src={item.src} alt=""/>
<span>{item.name}</span>
</li>
)
})
}
</ul>
</div>
<div className='category'>
<h2 className="title">近期直播</h2>
<Carousel>
{
this.state.dataList.map((item, index) => {
return (
<li key={index} className='scroll-item'>
<a href="">
<img className="item-img" src={item.src} alt=""/>
<div className="item-content">
<h2 className="item-title">{item.title}</h2>
<p className="item-teacher">讲师：{item.teacher}</p>
<p className="item-time">时间：{item.time}</p>
</div>
</a>
</li>
)
})
}
</Carousel>
<div className="vip">
<a href="">
<img
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
alt=""/>
</a>
</div>
</div>
<div className='category'>
<h2 className="title">新上好课</h2>
<ul className='course-detail'>
{this.state.dataList.map((item, index) => {
// const top = (
// {
// item.isbuy === '1' && <span className='audition'>
// <i className={'iconfont iconerji'}></i>
// 试听
// </span>
// }
// )
const bottom = (
<p className="course-price">
<span className="new">¥{item.price0}</span>
<span className="old">¥{item.price1}</span>
</p>
// {item.isbuy === 1 &&
// <a href="" className="isbuy">已购买</a>
// }
)
return (
<Course key={index} top={top} data={item} bottom={bottom}></Course>
)
})}
</ul>
</div>
<div className='category'>
<h2 className="title">热门推荐</h2>
<a className="more" href="#">更多 ></a>
<Scroll data={this.state.dataList} height='106px'></Scroll>
<ul className='course-detail'>
{this.state.dataList.map((item, index) => {
const top = (
<span className='audition'>
<i className={'iconfont iconerji'}></i>
试听
</span>
)
const bottom = (
<p className="course-price">
<span className="new">¥{item.price0}</span>
<span className="old">¥{item.price1}</span>
</p>
// {item.isbuy === 1 &&
// <a href="" className="isbuy">已购买</a>
// }
)
return (
<Course key={index} top={top} data={item} bottom={bottom}></Course>
)
})}
</ul>
</div>
<div className='category'>
<h2 className="title">基础入门</h2>
<a className="more" href="#">更多 ></a>
<ul className='course-detail'>
{this.state.dataList.map((item, index) => {
const top = (
<span className='audition'>
<i className={'iconfont iconerji'}></i>
试听
</span>
)
const bottom = (
<p className="course-price">
<span className="new">¥{item.price0}</span>
<span className="old">¥{item.price1}</span>
</p>
// {item.isbuy === 1 &&
// <a href="" className="isbuy">已购买</a>
// }
)
return (
<Course key={index} top={top} data={item} bottom={bottom}></Course>
)
})}
</ul>
</div>
<div className='category'>
<h2 className="title">就业班</h2>
<ul className='course-detail'>
{this.state.dataList.map((item, index) => {
const top = (
<span className='audition'>
<i className={'iconfont iconerji'}></i>
试听
</span>
)
const bottom = (
<p className="course-price">
<span className="new">¥{item.price0}</span>
<span className="old">¥{item.price1}</span>
</p>
// {item.isbuy === 1 &&
// <a href="" className="isbuy">已购买</a>
// }
)
return (
<Course key={index} top={top} data={item} bottom={bottom}></Course>
)
})}
</ul>
</div>
<div className="category all-course">
<p>查看全部课程</p>
<span>数学基础、数学结构、大数据实战、Python...</span>
</div>
</div>
)
);
}
}
export default Index;
\ No newline at end of file
export default Index;
src/components/Index/index.scss 0 → 100644
.indexbox {
overflow: hidden;
background-color: $bg_fff;
}
.am-wingblank {
margin-top: 15px;
}
/*热门推荐轮播*/
.scroll {
width: 100%;
margin-left: 0 !important;
margin-top: 12px;
margin-bottom: 5px;
}
/*
页面tab
*/
.tabbox {
width: 100%;
height: 103px;
padding: 20px 17px;
margin-top: 50px;
ul {
display: flex;
justify-content: space-between;
text-align: center;
li {
width: 64px;
img {
width: 40px;
height: 40px;
border-radius: 50%;
}
span {
color: $color_606;
font-size: 13px;
display: block;
margin-top: 10px;
}
}
}
}
/*
近期直播
*/
.scroll-item {
display: inline-block;
width: 301px;
height: 100%;
margin-right: 20px;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
background-color: $bg_fff;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 5px;
a {
width: 100%;
height: 100%;
padding: 10px;
display: flex;
.item-img {
width: 100px;
height: 72px;
margin-right: 8px;
}
.item-content .item-title, .item-teacher, .item-time {
max-width: 173px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.item-title {
font-size: 15px;
color: $color_333;
}
.item-teacher {
font-size: 13px;
color: $color_555;
margin-top: 6px;
}
.item-time {
font-size: 12px;
color: $color_999;
margin-top: 11px;
}
}
}
.vip {
width: 100%;
height: 106px;
border-radius: 5px;
margin-top: 20px;
img {
width: 100%;
height: 106px;
border-radius: 5px;
}
}
/*课程公共样式*/
.category {
width: 100%;
border-top: 8px solid #F3F4F8;
padding: 20px 15px 15px 15px;
.title {
font-size: 15px;
color: $color_333;
display: inline-block;
}
.more {
color: $active;
font-size: 12px;
float: right;
}
}
/*
底部查看所有课程
*/
.all-course {
text-align: center;
padding-bottom: 30px;
margin-bottom: 50px;
p {
color: $color_555;
font-size: 15px;
margin-bottom: 10px;
}
span {
color: $color_999;
font-size: 12px;
}
}
.course-detail {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.audition {
position: absolute;
top: 10px;
width: 54px;
height: 18px;
line-height: 18px;
background-color: $bg_active;
font-size: 12px;
color: $white;
text-align: center;
border-radius: 1px;
.iconerji {
font-size: 14px !important;
display: inline-block;
margin-right: 4px;
}
}
.course-price {
margin-top: 15px;
.new {
color: $red;
font-size: 15px;
}
.old {
color: $color_999;
font-size: 12px;
display: inline-block;
margin-left: 15px;
text-decoration: line-through;
}
}
.isbuy {
display: inline-block;
margin-top: 15px;
width: 61px;
height: 18px;
background-color: $bg_active;
border-radius: 9px;
color: $white;
font-size: 12px;
text-align: center;
line-height: 18px;
}
}
/*
横向滚动
*/
.scroll-box {
height: 92px;
}
src/styles/variable.scss
......@@ -9,6 +9,7 @@ $color_333: #333;
$color_555: #555;
$color_666: #666;
$color_999: #999;
$color_606: #606060;
/*
......@@ -35,7 +36,7 @@ $bg_fff: #fff;
$bg_000: #000;
$bg_f4f4f4: #f4f4f4;
$bg_f5f5f5: #f5f5f5;
$body-bg: #fff;
$body-bg: #fff;
/*
......
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