Skip to content

M
mr-julyedu
Commit cb85739a by zhanghaozhe
Options

Merge branch 'xzhindex' into study

parents eaf56428 bc87a39e
Showing with 1417 additions and 7 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 @@ ...@@ -137,8 +137,5 @@
"babel-plugin-import": "^1.11.0", "babel-plugin-import": "^1.11.0",
"sass-resources-loader": "^2.0.0" "sass-resources-loader": "^2.0.0"
}, },
"theme": { "theme": "./src/assets/theme/config.js"
"brand-primary": "green",
"color-text-base": "#333"
}
} }
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 Nav } from './Nav'
export { default as VList } from './VList' 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 { 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() { render() {
const top = <div>333</div>
return (
<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 ( return (
<div> <Course key={index} top={top} data={item} bottom={bottom}></Course>
首页 )
})}
</ul>
</div> </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>
);
} }
} }
......
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; ...@@ -9,6 +9,7 @@ $color_333: #333;
$color_555: #555; $color_555: #555;
$color_666: #666; $color_666: #666;
$color_999: #999; $color_999: #999;
$color_606: #606060;
/* /*
......
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