diff --git a/antd-sample/MyComponent.jsx b/antd-sample/MyComponent.jsx new file mode 100644 index 0000000..064dd74 --- /dev/null +++ b/antd-sample/MyComponent.jsx @@ -0,0 +1,37 @@ +import React from 'react'; + +import styles from './MyComponent.module.less'; + +export const MyComponent = () => { + return ( +
+
+
+
+ 数据总览 + 你的每一份成长都记录 +
+
近 1 年
+
+
+
+ 创作天数 + 160 +
+
+ 创作字数 + 14,385 +
+
+ 内容更新 + 1,807 +
+
+ 获得点赞 + 413 +
+
+
+
+ ); +}; diff --git a/antd-sample/MyComponent.module.less b/antd-sample/MyComponent.module.less new file mode 100644 index 0000000..89594ba --- /dev/null +++ b/antd-sample/MyComponent.module.less @@ -0,0 +1,92 @@ +.wrapper { + background-color: #ffffff; + width: 500px; + + .div { + display: flex; + flex-direction: column; + width: 100%; + + .pZvKR { + display: flex; + flex-direction: row; + align-items: center; + border-radius: 4px; + background-color: #fafafa; + margin-bottom: 11px; + padding: 2px 10px 2px 10px; + + .zTgKe { + display: flex; + flex-direction: column; + flex: 1; + margin-left: 10px; + + .span { + color: #333333; + font-size: 12px; + } + + .qJDnm { + color: #585a5a; + font-size: 11px; + } + } + + .kBVol { + display: inline-flex; + flex-direction: row; + align-items: center; + font-size: 10px; + border-radius: 5px; + border: solid 1px #e7e9e8; + margin-left: 16px; + padding: 4px 10px 4px 10px; + } + } + + .xEqUH { + display: flex; + flex-direction: row; + align-items: center; + border-radius: 4px; + background-color: #fafafa; + margin-bottom: 11px; + padding: 2px 10px 2px 10px; + + .xYuOG { + display: flex; + flex-direction: column; + flex: 1; + margin-left: 10px; + + .vHYtO { + color: #333333; + font-size: 12px; + } + + .fCtBp { + color: #585a5a; + font-size: 11px; + } + } + + .oSVrf { + display: flex; + flex-direction: column; + flex: 1; + margin-left: 10px; + + .jlPlf { + color: #585a5a; + font-size: 12px; + } + + .aAiBx { + color: #8b8f8d; + font-size: 11px; + } + } + } + } +} diff --git a/antd-sample/app.jsx b/antd-sample/app.jsx index d70e8b6..c8dc3e1 100644 --- a/antd-sample/app.jsx +++ b/antd-sample/app.jsx @@ -11,6 +11,9 @@ import './app.less'; import fetch from './common/fetch'; import Login from './login.jsx'; +import { MyComponent } from './MyComponent'; +import styles from './app.module.less'; + import { Layout, Select, @@ -94,6 +97,10 @@ class App extends React.Component { return (
+
+

MyComponent

+ +