diff --git a/AccountCenter/package.json b/AccountCenter/package.json index b9e2f48d098ce5e8f1f9887af212ab06eaf910da..835a993a3ed17f3f1d0ea7e5ba8628cf2c3a31fb 100644 --- a/AccountCenter/package.json +++ b/AccountCenter/package.json @@ -13,6 +13,7 @@ "dependencies": { "antd": "^3.16.3", "dva": "^2.4.0", + "numeral": "^2.0.6", "react": "^16.6.3", "umi-request": "^1.0.0" }, diff --git a/AccountCenter/src/_mock.ts b/AccountCenter/src/_mock.ts index 3c9ef791dce51d8bed8dc2b6f2dcc56d7e8bc046..6dcf4e0d8569beeed0ae9803d6d4af6ca028f8e5 100644 --- a/AccountCenter/src/_mock.ts +++ b/AccountCenter/src/_mock.ts @@ -1,3 +1,5 @@ +import { ListItemDataType } from './data'; + const titles = [ 'Alipay', 'Angular', @@ -82,7 +84,96 @@ const getNotice = [ }, ]; +const covers = [ + 'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png', + 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png', + 'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png', + 'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png', +]; +const desc = [ + '那是一种内在的东西， 他们到达不了，也无法触及的', + '希望是一个好东西，也许是最好的，好东西是不会消亡的', + '生命就像一盒巧克力，结果往往出人意料', + '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆', + '那时候我只会想自己想要什么，从不想自己拥有什么', +]; + +const user = [ + '付小小', + '曲丽丽', + '林东东', + '周星星', + '吴加好', + '朱偏右', + '鱼酱', + '乐哥', + '谭小仪', + '仲尼', +]; + +function fakeList(count: number): ListItemDataType[] { + const list = []; + for (let i = 0; i < count; i += 1) { + list.push({ + id: `fake-list-${i}`, + owner: user[i % 10], + title: titles[i % 8], + avatar: avatars[i % 8], + cover: parseInt(i / 4 + '', 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)], + status: ['active', 'exception', 'normal'][i % 3] as + | 'normal' + | 'exception' + | 'active' + | 'success', + percent: Math.ceil(Math.random() * 50) + 50, + logo: avatars[i % 8], + href: 'https://ant.design', + updatedAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(), + createdAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(), + subDescription: desc[i % 5], + description: + '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。', + activeUser: Math.ceil(Math.random() * 100000) + 100000, + newUser: Math.ceil(Math.random() * 1000) + 1000, + star: Math.ceil(Math.random() * 100) + 100, + like: Math.ceil(Math.random() * 100) + 100, + message: Math.ceil(Math.random() * 10) + 10, + content: + '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。', + members: [ + { + avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png', + name: '曲丽丽', + id: 'member1', + }, + { + avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png', + name: '王昭君', + id: 'member2', + }, + { + avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png', + name: '董娜娜', + id: 'member3', + }, + ], + }); + } + + return list; +} + +function getFakeList(req: { query: any }, res: { json: (arg0: ListItemDataType[]) => void }) { + const params = req.query; + + const count = params.count * 1 || 20; + + const result = fakeList(count); + return res.json(result); +} + export default { + 'GET /api/BLOCK_NAME/fake_list': getFakeList, // 支持值为 Object 和 Array 'GET /api/BLOCK_NAME/currentUser': { name: 'Serati Ma', diff --git a/AccountCenter/src/components/Applications/index.less b/AccountCenter/src/components/Applications/index.less new file mode 100644 index 0000000000000000000000000000000000000000..6fa63e32a33b0642d0e1547efdb146b5d9a35f5d --- /dev/null +++ b/AccountCenter/src/components/Applications/index.less @@ -0,0 +1,53 @@ +@import '~antd/lib/style/themes/default.less'; + +.filterCardList { + margin-bottom: -24px; + :global { + .ant-card-meta-content { + margin-top: 0; + } + // disabled white space + .ant-card-meta-avatar { + font-size: 0; + } + .ant-card-actions { + background: #f7f9fa; + } + .ant-list .ant-list-item-content-single { + max-width: 100%; + } + } + .cardInfo { + margin-top: 16px; + margin-left: 40px; + zoom: 1; + &::before, + &::after { + display: table; + content: ' '; + } + &::after { + clear: both; + height: 0; + font-size: 0; + visibility: hidden; + } + & > div { + position: relative; + float: left; + width: 50%; + text-align: left; + p { + margin: 0; + font-size: 24px; + line-height: 32px; + } + p:first-child { + margin-bottom: 4px; + color: @text-color-secondary; + font-size: 12px; + line-height: 20px; + } + } + } +} diff --git a/AccountCenter/src/components/Applications/index.tsx b/AccountCenter/src/components/Applications/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..7d2737f656408b630046adea2b7432ba176f1c34 --- /dev/null +++ b/AccountCenter/src/components/Applications/index.tsx @@ -0,0 +1,115 @@ +import React, { Component } from 'react'; +import { List, Card, Icon, Dropdown, Menu, Avatar, Tooltip } from 'antd'; +import numeral from 'numeral'; +import { connect } from 'dva'; +import stylesApplications from './index.less'; +import { ModalState } from '../../model'; + +export function formatWan(val: number) { + const v = val * 1; + if (!v || Number.isNaN(v)) return ''; + + let result: React.ReactNode = val; + if (val > 10000) { + result = ( + + {Math.floor(val / 10000)} + + 万 + + + ); + } + return result; +} + +@connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: ModalState }) => ({ + list: BLOCK_NAME_CAMEL_CASE.list, +})) +class Applications extends Component> { + render() { + const { list } = this.props; + const itemMenu = ( + + + + 1st menu item + + + + + 2nd menu item + + + + + 3d menu item + + + + ); + const CardInfo: React.SFC<{ + activeUser: React.ReactNode; + newUser: React.ReactNode; + }> = ({ activeUser, newUser }) => ( +
+
+

活跃用户

+

{activeUser}

+
+
+

新增用户

+

{newUser}

+
+
+ ); + return ( + ( + + + + , + + + , + + + , + + + , + ]} + > + } title={item.title} /> +
+ +
+ + + )} + /> + ); + } +} + +export default Applications; diff --git a/AccountCenter/src/components/ArticleListContent/index.less b/AccountCenter/src/components/ArticleListContent/index.less new file mode 100644 index 0000000000000000000000000000000000000000..dd0baa101d5ef10a432d5531732552ba3ffd266b --- /dev/null +++ b/AccountCenter/src/components/ArticleListContent/index.less @@ -0,0 +1,38 @@ +@import '~antd/lib/style/themes/default.less'; + +.listContent { + .description { + max-width: 720px; + line-height: 22px; + } + .extra { + margin-top: 16px; + color: @text-color-secondary; + line-height: 22px; + & > :global(.ant-avatar) { + position: relative; + top: 1px; + width: 20px; + height: 20px; + margin-right: 8px; + vertical-align: top; + } + & > em { + margin-left: 16px; + color: @disabled-color; + font-style: normal; + } + } +} + +@media screen and (max-width: @screen-xs) { + .listContent { + .extra { + & > em { + display: block; + margin-top: 8px; + margin-left: 0; + } + } + } +} diff --git a/AccountCenter/src/components/ArticleListContent/index.tsx b/AccountCenter/src/components/ArticleListContent/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..2179e13aa0ebc7a1cc6ed217fe4380f5ed7cd19d --- /dev/null +++ b/AccountCenter/src/components/ArticleListContent/index.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import moment from 'moment'; +import { Avatar } from 'antd'; +import styles from './index.less'; + +export interface ApplicationsProps { + data: { + content?: string; + updatedAt?: any; + avatar?: string; + owner?: string; + href?: string; + }; +} +const ArticleListContent: React.SFC = ({ + data: { content, updatedAt, avatar, owner, href }, +}) => ( +
+
{content}
+
+ + {owner} 发布在 {href} + {moment(updatedAt).format('YYYY-MM-DD HH:mm')} +
+
+); + +export default ArticleListContent; diff --git a/AccountCenter/src/components/Articles/index.less b/AccountCenter/src/components/Articles/index.less new file mode 100644 index 0000000000000000000000000000000000000000..2e51509ba7debe11d9da0981b633d3ffe4b90d20 --- /dev/null +++ b/AccountCenter/src/components/Articles/index.less @@ -0,0 +1,12 @@ +@import '~antd/lib/style/themes/default.less'; + +.articleList { + :global { + .ant-list-item:first-child { + padding-top: 0; + } + } +} +a.listItemMetaTitle { + color: @heading-color; +} diff --git a/AccountCenter/src/components/Articles/index.tsx b/AccountCenter/src/components/Articles/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..727bba521578c16b0d949eb8e8a547156f0e1321 --- /dev/null +++ b/AccountCenter/src/components/Articles/index.tsx @@ -0,0 +1,62 @@ +import React, { Component } from 'react'; +import { List, Icon, Tag } from 'antd'; +import { connect } from 'dva'; +import ArticleListContent from '../ArticleListContent'; +import styles from './index.less'; +import { ModalState } from '../../model'; +import { ListItemDataType } from '../../data'; + +@connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: ModalState }) => ({ + list: BLOCK_NAME_CAMEL_CASE.list, +})) +class Articles extends Component> { + render() { + const { list } = this.props; + const IconText: React.SFC<{ + type: string; + text: React.ReactNode; + }> = ({ type, text }) => ( + + + {text} + + ); + return ( + + size="large" + className={styles.articleList} + rowKey="id" + itemLayout="vertical" + dataSource={list} + renderItem={item => ( + , + , + , + ]} + > + + {item.title} + + } + description={ + + Ant Design + 设计语言 + 蚂蚁金服 + + } + /> + + + )} + /> + ); + } +} + +export default Articles; diff --git a/AccountCenter/src/components/AvatarList/index.less b/AccountCenter/src/components/AvatarList/index.less new file mode 100644 index 0000000000000000000000000000000000000000..45904ce6ae8bc31c48c4512c87163757ec010e76 --- /dev/null +++ b/AccountCenter/src/components/AvatarList/index.less @@ -0,0 +1,50 @@ +@import '~antd/lib/style/themes/default.less'; + +.avatarList { + display: inline-block; + ul { + display: inline-block; + margin-left: 8px; + font-size: 0; + } +} + +.avatarItem { + display: inline-block; + width: @avatar-size-base; + height: @avatar-size-base; + margin-left: -8px; + font-size: @font-size-base; + :global { + .ant-avatar { + border: 1px solid #fff; + } + } +} + +.avatarItemLarge { + width: @avatar-size-lg; + height: @avatar-size-lg; +} + +.avatarItemSmall { + width: @avatar-size-sm; + height: @avatar-size-sm; +} + +.avatarItemMini { + width: 20px; + height: 20px; + :global { + .ant-avatar { + width: 20px; + height: 20px; + line-height: 20px; + + .ant-avatar-string { + font-size: 12px; + line-height: 18px; + } + } + } +} diff --git a/AccountCenter/src/components/AvatarList/index.tsx b/AccountCenter/src/components/AvatarList/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..0e63359647515cc9245a5a02d15a8bebe28b5537 --- /dev/null +++ b/AccountCenter/src/components/AvatarList/index.tsx @@ -0,0 +1,85 @@ +import React from 'react'; +import { Tooltip, Avatar } from 'antd'; +import classNames from 'classnames'; +import styles from './index.less'; + +export declare type SizeType = number | 'small' | 'default' | 'large'; + +export interface AvatarItemProps { + tips: React.ReactNode; + src: string; + size?: SizeType; + style?: React.CSSProperties; + onClick?: () => void; +} + +export interface AvatarListProps { + Item?: React.ReactElement; + size?: SizeType; + maxLength?: number; + excessItemsStyle?: React.CSSProperties; + style?: React.CSSProperties; + children: React.ReactElement | Array>; +} + +const avatarSizeToClassName = (size?: SizeType) => + classNames(styles.avatarItem, { + [styles.avatarItemLarge]: size === 'large', + [styles.avatarItemSmall]: size === 'small', + [styles.avatarItemMini]: size === 'mini', + }); + +const Item: React.SFC = ({ src, size, tips, onClick = () => {} }) => { + const cls = avatarSizeToClassName(size); + + return ( +
  • + {tips ? ( + + + + ) : ( + + )} +
    • + ); +}; + +const AvatarList: React.SFC & { Item: typeof Item } = ({ + children, + size, + maxLength = 5, + excessItemsStyle, + ...other +}) => { + const numOfChildren = React.Children.count(children); + const numToShow = maxLength >= numOfChildren ? numOfChildren : maxLength; + const childrenArray = React.Children.toArray(children) as Array< + React.ReactElement + >; + const childrenWithProps = childrenArray.slice(0, numToShow).map(child => + React.cloneElement(child, { + size, + }), + ); + + if (numToShow < numOfChildren) { + const cls = avatarSizeToClassName(size); + + childrenWithProps.push( +
  • + {`+${numOfChildren - maxLength}`} +
    • , + ); + } + + return ( +
    +
      {childrenWithProps}
    +
    + ); +}; + +AvatarList.Item = Item; + +export default AvatarList; diff --git a/AccountCenter/src/components/Projects/index.less b/AccountCenter/src/components/Projects/index.less new file mode 100644 index 0000000000000000000000000000000000000000..d2bc5307b2820e24494b9e7b539b24d558f42efe --- /dev/null +++ b/AccountCenter/src/components/Projects/index.less @@ -0,0 +1,56 @@ +@import '~antd/lib/style/themes/default.less'; + +.coverCardList { + margin-bottom: -24px; + + .card { + :global { + .ant-card-meta-title { + margin-bottom: 4px; + & > a { + display: inline-block; + max-width: 100%; + color: @heading-color; + } + } + .ant-card-meta-description { + height: 44px; + overflow: hidden; + line-height: 22px; + } + } + + &:hover { + :global { + .ant-card-meta-title > a { + color: @primary-color; + } + } + } + } + + .cardItemContent { + display: flex; + height: 20px; + margin-top: 16px; + margin-bottom: -4px; + line-height: 20px; + & > span { + flex: 1; + color: @text-color-secondary; + font-size: 12px; + } + .avatarList { + flex: 0 1 auto; + } + } + .cardList { + margin-top: 24px; + } + + :global { + .ant-list .ant-list-item-content-single { + max-width: 100%; + } + } +} diff --git a/AccountCenter/src/components/Projects/index.tsx b/AccountCenter/src/components/Projects/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..918ffbb6f876eb8d216e59bd1a2da64a4d3ebb34 --- /dev/null +++ b/AccountCenter/src/components/Projects/index.tsx @@ -0,0 +1,52 @@ +import React, { Component } from 'react'; +import { List, Card } from 'antd'; +import moment from 'moment'; +import { connect } from 'dva'; +import AvatarList from '../AvatarList'; +import styles from './index.less'; +import { ModalState } from '../../model'; +import { ListItemDataType } from '../../data'; + +@connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: ModalState }) => ({ + list: BLOCK_NAME_CAMEL_CASE.list, +})) +class Projects extends Component> { + render() { + const { list } = this.props; + return ( + + className={styles.coverCardList} + rowKey="id" + grid={{ gutter: 24, xxl: 3, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }} + dataSource={list} + renderItem={item => ( + + } + > + {item.title}} description={item.subDescription} /> +
    + {moment(item.updatedAt).fromNow()} +
    + + {item.members.map(member => ( + + ))} + +
    +
    +     +     + )} + /> + ); + } +} + +export default Projects; diff --git a/AccountCenter/src/data.d.ts b/AccountCenter/src/data.d.ts index 0f4070e639963b4c792120695aafbb917122a84e..beba7f37c4d76a39968fd01b3c952e8754237e6e 100644 --- a/AccountCenter/src/data.d.ts +++ b/AccountCenter/src/data.d.ts @@ -46,3 +46,33 @@ export interface CurrentUser { address: string; phone: string; } + +export interface Member { + avatar: string; + name: string; + id: string; +} + +export interface ListItemDataType { + id: string; + owner: string; + title: string; + avatar: string; + cover: string; + status: 'normal' | 'exception' | 'active' | 'success'; + percent: number; + logo: string; + href: string; + body?: any; + updatedAt: number; + createdAt: number; + subDescription: string; + description: string; + activeUser: number; + newUser: number; + star: number; + like: number; + message: number; + content: string; + members: Member[]; +} diff --git a/AccountCenter/src/index.tsx b/AccountCenter/src/index.tsx index 5ff12f963c3782ec80d8e44cdeaf0fe1dd2099fc..c0c74928613443b6c4aa26c39acd8d12bf9cf62f 100644 --- a/AccountCenter/src/index.tsx +++ b/AccountCenter/src/index.tsx @@ -7,6 +7,9 @@ import { Card, Row, Col, Icon, Avatar, Tag, Divider, Input } from 'antd'; import styles from './Center.less'; import { ITag, CurrentUser } from './data'; import { ModalState } from './model'; +import Articles from './components/Articles'; +import Applications from './components/Applications'; +import Projects from './components/Projects'; const operationTabList = [ { @@ -42,7 +45,7 @@ interface BLOCK_NAME_CAMEL_CASEProps extends RouteChildrenProps { } interface BLOCK_NAME_CAMEL_CASEState { newTags: ITag[]; - tabKey: string; + tabKey: 'articles' | 'applications' | 'projects'; inputVisible: boolean; inputValue: string; } @@ -95,6 +98,9 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent< dispatch({ type: 'BLOCK_NAME_CAMEL_CASE/fetchCurrent', }); + dispatch({ + type: 'BLOCK_NAME_CAMEL_CASE/fetch', + }); } onTabChange = (key: string) => { @@ -102,7 +108,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent< // const { match } = this.props; // router.push(`${match.url}/${key}`); this.setState({ - tabKey: key, + tabKey: key as BLOCK_NAME_CAMEL_CASEState['tabKey'], }); }; @@ -131,10 +137,21 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent< inputValue: '', }); }; - + renderChildrenByTabKey = (tabKey: BLOCK_NAME_CAMEL_CASEState['tabKey']) => { + if (tabKey === 'projects') { + return ; + } + if (tabKey === 'applications') { + return ; + } + if (tabKey === 'articles') { + return ; + } + return null; + }; render() { const { newTags, inputVisible, inputValue, tabKey } = this.state; - const { currentUser, currentUserLoading, children } = this.props; + const { currentUser, currentUserLoading } = this.props; const dataLoading = currentUserLoading || !(currentUser && Object.keys(currentUser).length); return ( @@ -215,7 +232,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent< activeTabKey={tabKey} onTabChange={this.onTabChange} > - {children || tabKey} + {this.renderChildrenByTabKey(tabKey)} diff --git a/AccountCenter/src/model.ts b/AccountCenter/src/model.ts index ec27747d45fccfe29ddf247ca95590e80bb3b45f..bf482ba9b8053bb49e93a6eba26b9bf368f1459a 100644 --- a/AccountCenter/src/model.ts +++ b/AccountCenter/src/model.ts @@ -1,8 +1,9 @@ -import { queryCurrent } from './service'; -import { CurrentUser } from './data'; +import { queryCurrent, queryFakeList } from './service'; +import { CurrentUser, ListItemDataType } from './data'; export interface ModalState { currentUser: Partial; + list: ListItemDataType[]; } import { Reducer } from 'redux'; @@ -19,9 +20,11 @@ export interface ModelType { state: ModalState; effects: { fetchCurrent: Effect; + fetch: Effect; }; reducers: { saveCurrentUser: Reducer; + queryList: Reducer; }; } @@ -30,6 +33,7 @@ const Model: ModelType = { state: { currentUser: {}, + list: [], }, effects: { @@ -40,15 +44,28 @@ const Model: ModelType = { payload: response, }); }, + *fetch({ payload }, { call, put }) { + const response = yield call(queryFakeList, payload); + yield put({ + type: 'queryList', + payload: Array.isArray(response) ? response : [], + }); + }, }, reducers: { saveCurrentUser(state, action) { return { - ...state, + ...state!, currentUser: action.payload || {}, }; }, + queryList(state, action) { + return { + ...state!, + list: action.payload, + }; + }, }, }; diff --git a/AccountCenter/src/service.ts b/AccountCenter/src/service.ts index d4b10c6b2a7679d9db5db3afdd51b88fdfd01f99..71036596cf8b08cc33f0599326a34ab45795e6ed 100644 --- a/AccountCenter/src/service.ts +++ b/AccountCenter/src/service.ts @@ -3,3 +3,9 @@ import request from 'umi-request'; export async function queryCurrent() { return request('/api/BLOCK_NAME/currentUser'); } + +export async function queryFakeList(params: { count: number }) { + return request(`/api/BLOCK_NAME/fake_list`, { + params, + }); +} diff --git a/DashboardAnalysis/src/style.less b/DashboardAnalysis/src/style.less index e1e898e594abec60264826e6fee472d71dfa68eb..1967c3a6c2dd1b057f2b445171401712654ed239 100644 --- a/DashboardAnalysis/src/style.less +++ b/DashboardAnalysis/src/style.less @@ -1,5 +1,4 @@ @import '~antd/lib/style/themes/default.less'; -@import './utils/utils.less'; .iconGroup { i { @@ -18,11 +17,21 @@ padding: 0; list-style: none; li { - .clearfix(); - display: flex; align-items: center; margin-top: 16px; + zoom: 1; + &::before, + &::after { + display: table; + content: ' '; + } + &::after { + clear: both; + height: 0; + font-size: 0; + visibility: hidden; + } span { color: @text-color; font-size: 14px; diff --git a/ListCardList/src/data.d.ts b/ListCardList/src/data.d.ts index 7abebe61c3fc17602679c4ac734d8fa6fc667153..35fbca30db1bd8a5eb119879a8a453d2770b3ccf 100644 --- a/ListCardList/src/data.d.ts +++ b/ListCardList/src/data.d.ts @@ -1,10 +1,10 @@ -export interface member { +export interface Member { avatar: string; name: string; id: string; } -export interface cardlistitemdatatype { +export interface CardListItemDataType { id: string; owner: string; title: string; diff --git a/ListSearchApplications/src/style.less b/ListSearchApplications/src/style.less index fadbdc0b9e776fe28399b10d60e82e67a84a2161..6fa63e32a33b0642d0e1547efdb146b5d9a35f5d 100644 --- a/ListSearchApplications/src/style.less +++ b/ListSearchApplications/src/style.less @@ -1,5 +1,4 @@ @import '~antd/lib/style/themes/default.less'; -@import './utils/utils.less'; .filterCardList { margin-bottom: -24px; @@ -19,10 +18,20 @@ } } .cardInfo { - .clearfix(); - margin-top: 16px; margin-left: 40px; + zoom: 1; + &::before, + &::after { + display: table; + content: ' '; + } + &::after { + clear: both; + height: 0; + font-size: 0; + visibility: hidden; + } & > div { position: relative; float: left; diff --git a/package.json b/package.json index b0927c90411ffa2101eae839b0261f0244960113..3fbbf9016f911d4d56202b379a64cf6eb0b7dc51 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "private": true, "scripts": { - "dev": "cross-env PAGES_PATH='EditorKoni/src' umi dev", + "dev": "cross-env PAGES_PATH='AccountCenter/src' umi dev", "lint": "npm run lint:ts && npm run lint:style && npm run lint:prettier", "lint-staged": "lint-staged", "lint-staged:ts": "tslint",