Skip to content

GitLab

A
ant-design-pro
Commit ff612c5c authored by niko's avatar niko Committed by GitHub
Browse files
Options

design review (#22)

parent 6facbbea
Hide whitespace changes
Inline Side-by-side
Showing with 221 additions and 81 deletions
mock/api.js
View file @ ff612c5c
......@@ -18,10 +18,10 @@ export function fakeList(count) {
'https://gw.alipayobjects.com/zos/rmsportal/VcmdbCBcwPTGYgbYeMzX.png', // DesignLab
];
const covers = [
'https://gw.alipayobjects.com/zos/rmsportal/nQIAJyTLNeVJfUpTskWk.png',
'https://gw.alipayobjects.com/zos/rmsportal/pnhtvpOTzypPvmHVrfKN.png',
'https://gw.alipayobjects.com/zos/rmsportal/SVrKVZEFDnhDTNpkplZj.png',
'https://gw.alipayobjects.com/zos/rmsportal/bUIOUkPTHgfGdDhgsAgE.png',
'https://gw.alipayobjects.com/zos/rmsportal/HrxcVbrKnCJOZvtzSqjN.png',
'https://gw.alipayobjects.com/zos/rmsportal/alaPpKWajEbIYEUvvVNf.png',
'https://gw.alipayobjects.com/zos/rmsportal/RLwlKSYGSXGHuWSojyvp.png',
'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png',
];
const list = [];
......@@ -31,7 +31,7 @@ export function fakeList(count) {
owner: '曲丽丽',
title: titles[i % 8],
avatar: avatars[i % 4],
cover: covers[i % 4],
cover: Math.floor(i / 4) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
status: ['active', 'exception', 'normal'][i % 3],
percent: Math.ceil(Math.random() * 50) + 50,
logo: ['https://gw.alipayobjects.com/zos/rmsportal/KoJjkdbuTFxzJmmjuDVR.png', 'https://gw.alipayobjects.com/zos/rmsportal/UxGORCvEXJEsxOfEKZiA.png'][i % 2],
......
src/components/AvatarList/index.js
View file @ ff612c5c
......@@ -22,6 +22,7 @@ const Item = ({ src, size, tips, onClick = (() => {}) }) => {
const cls = classNames(styles.avatarItem, {
[styles.avatarItemLarge]: size === 'large',
[styles.avatarItemSmall]: size === 'small',
[styles.avatarItemMini]: size === 'mini',
});
return (
......
src/components/AvatarList/index.less
View file @ ff612c5c
......@@ -27,3 +27,15 @@
width: @avatar-size-sm;
height: @avatar-size-sm;
}
.avatarItemMini {
width: 20px;
height: 20px;
:global {
.ant-avatar {
width: 20px;
height: 20px;
line-height: 20px;
}
}
}
src/components/Charts/Bar/index.js
View file @ ff612c5c
......@@ -72,7 +72,9 @@ class Bar extends PureComponent {
name: 'x',
},
});
chart.interval().position('x*y').color(color);
chart.interval().position('x*y').color(color).style({
fillOpacity: 1,
});
chart.render();
this.chart = chart;
......
src/components/Charts/ChartCard/index.less
View file @ ff612c5c
......@@ -19,7 +19,7 @@
.total {
.textOverflow();
color: @heading-color;
margin-top: 8px;
margin-top: 4px;
font-size: 30px;
line-height: 38px;
height: 38px;
......@@ -37,7 +37,8 @@
.footer {
border-top: 1px solid @border-color-split;
padding-top: 8px;
margin-top: 11px;
margin-top: 20px;
margin-bottom: 10px;
& > * {
position: relative;
}
......
src/components/Charts/Gauge/index.js
View file @ ff612c5c
......@@ -121,7 +121,7 @@ class Gauge extends PureComponent {
height,
animate: false,
plotCfg: {
margin: [10, 0, 30, 0],
margin: [10, 10, 30, 10],
},
});
......
src/components/Charts/MiniArea/index.js
View file @ ff612c5c
......@@ -85,7 +85,8 @@ class MiniArea extends PureComponent {
view.source(data, dataConfig);
view.area().position('x*y').color(color).shape('smooth');
view.area().position('x*y').color(color).shape('smooth')
.style({ fillOpacity: 1 });
chart.on('tooltipchange', (ev) => {
const item = ev.items[0];
......
src/components/Charts/MiniBar/index.js
View file @ ff612c5c
......@@ -25,7 +25,7 @@ class MiniBar extends PureComponent {
}
renderChart(data) {
const { height = 0, fit = true, color = '#33ABFB' } = this.props;
const { height = 0, fit = true, color = '#1890FF' } = this.props;
if (!data || (data && data.length < 1)) {
return;
......
src/components/Charts/Pie/index.js
View file @ ff612c5c
......@@ -59,8 +59,11 @@ class Pie extends Component {
margin, percent, color,
inner = 0.75,
animate = true,
colors,
} = this.props;
const defaultColors = colors || ['#8543E0', '#F04864', '#FACC14', '#1890FF', '#13C2C2', '#2FC25B'];
let selected = this.props.selected || true;
let tooltip = this.props.tooltips || true;
......@@ -146,7 +149,11 @@ class Pie extends Component {
inner,
});
chart.intervalStack().position(Stat.summary.percent('y')).color('x', formatColor).selected(selected);
if (percent) {
chart.intervalStack().position(Stat.summary.percent('y')).color('x', formatColor).selected(selected);
} else {
chart.intervalStack().position(Stat.summary.percent('y')).color('x', defaultColors).selected(selected);
}
chart.render();
this.chart = chart;
......
src/components/Charts/Pie/index.less
View file @ ff612c5c
......@@ -62,7 +62,7 @@
& > p {
color: @heading-color;
display: block;
font-size: 24px;
font-size: 30px;
height: 32px;
line-height: 32px;
}
......
src/components/Charts/Radar/index.less
View file @ ff612c5c
......@@ -12,6 +12,7 @@
}
h6 {
color: @heading-color;
padding-left: 16px;
font-size: 24px;
line-height: 32px;
margin-top: 2px;
......
src/components/Charts/TimelineChart/index.js
View file @ ff612c5c
......@@ -30,7 +30,7 @@ class TimelineChart extends Component {
}
renderChart(data) {
const { height = 400, margin = [60, 40, 40, 40], titleMap } = this.props;
const { height = 400, margin = [60, 20, 40, 40], titleMap } = this.props;
if (!data || (data && data.length < 1)) {
return;
......@@ -81,8 +81,8 @@ class TimelineChart extends Component {
},
});
chart.line().position('x*y1').color('#4FAAEB');
chart.line().position('x*y2').color('#9AD681');
chart.line().position('x*y1').color('#1890FF');
chart.line().position('x*y2').color('#2FC25B');
this.chart = chart;
......
src/components/Charts/Trend/index.less
View file @ ff612c5c
......@@ -23,7 +23,7 @@
display: none;
}
.title {
margin-right: 4px;
margin-right: 8px;
}
.value {
color: @text-color;
......
src/components/EditableLinkGroup/index.js
View file @ ff612c5c
......@@ -30,7 +30,7 @@ class EditableLinkGroup extends PureComponent {
}
{
<Button size="small" onClick={() => this.handleOnClick()}>
<Icon type="plus" /> 添加
<Icon type="plus" />添加
</Button>
}
</div>
......
src/components/EditableLinkGroup/index.less
View file @ ff612c5c
......@@ -16,12 +16,13 @@
& > button {
border-color: @primary-color;
color: @primary-color;
padding-left: 12px;
padding-right: 12px;
i {
position: relative;
top: -1px;
}
span {
margin-left: 0 !important;
position: relative;
top: -1px;
}
......
src/components/StandardTable/index.js
View file @ ff612c5c
......@@ -130,7 +130,7 @@ class StandardTable extends PureComponent {
<p>
已选择 <a>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
服务调用总计 <span style={{ fontWeight: 600 }}>{totalCallNo}</span> 万
<a onClick={this.cleanSelectedKeys} style={{ marginLeft: 8 }}>清空</a>
<a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}>清空</a>
</p>
)}
type="info"
......
src/routes/Dashboard/Analysis.js
View file @ ff612c5c
......@@ -148,7 +148,7 @@ export default class Analysis extends Component {
const activeKey = currentTabKey || (offlineData[0] && offlineData[0].name);
const CustomTab = ({ data, currentTabKey: currentKey }) => (
<Row gutter={8} style={{ width: 138, margin: '8px 28px' }}>
<Row gutter={8} style={{ width: 138, margin: '8px 0' }}>
<Col span={12}>
<NumberInfo
title={data.name}
......@@ -186,7 +186,7 @@ export default class Analysis extends Component {
<Col {...topColResponsiveProps}>
<ChartCard
bordered={false}
title="销售额"
title="总销售额"
action={<Tooltip title="我是一段说明"><Icon type="exclamation-circle-o" /></Tooltip>}
total={yuan(126560)}
footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
......@@ -208,7 +208,7 @@ export default class Analysis extends Component {
contentHeight={46}
>
<MiniArea
color="#9f5ae0"
color="#975FE4"
height={46}
data={visitData}
/>
......@@ -243,7 +243,7 @@ export default class Analysis extends Component {
}
contentHeight={46}
>
<MiniProgress percent={78} strokeWidth={8} target={80} color="#5DD1DD" />
<MiniProgress percent={78} strokeWidth={8} target={80} color="#13C2C2" />
</ChartCard>
</Col>
</Row>
......@@ -255,11 +255,11 @@ export default class Analysis extends Component {
<div className={styles.salesCard}>
<Tabs tabBarExtraContent={salesExtra}>
<TabPane tab="销售额" key="sales">
<Row gutter={72}>
<Row>
<Col xl={16} lg={12} md={12} sm={24} xs={24}>
<div className={styles.salesBar}>
<Bar
height={292}
height={295}
title="销售额趋势"
data={salesData}
/>
......@@ -327,7 +327,7 @@ export default class Analysis extends Component {
<Row gutter={68}>
<Col sm={12} xs={24} style={{ marginBottom: 24 }}>
<NumberInfo
subTitle={<span>搜索用户数量 <Icon style={{ marginLeft: 8 }} type="info-circle-o" /></span>}
subTitle={<span>搜索用户数 <Icon style={{ marginLeft: 8 }} type="info-circle-o" /></span>}
total={numeral(12321).format('0,0')}
status="up"
subTotal={17.1}
......@@ -397,7 +397,7 @@ export default class Analysis extends Component {
total={yuan(salesPieData.reduce((pre, now) => now.y + pre, 0))}
data={salesPieData}
valueFormat={val => yuan(val)}
height={294}
height={314}
/>
</div>
</Card>
......@@ -407,8 +407,8 @@ export default class Analysis extends Component {
<Card
className={styles.offlineCard}
bordered={false}
bodyStyle={{ padding: '0 0 24px 0' }}
style={{ marginTop: 24 }}
bodyStyle={{ padding: '0 0 32px 0' }}
style={{ marginTop: 32 }}
>
<Tabs
activeKey={activeKey}
......
src/routes/Dashboard/Analysis.less
View file @ ff612c5c
......@@ -12,6 +12,7 @@
}
}
}
.rankingList {
margin-top: 25px;
li {
......@@ -59,14 +60,14 @@
.salesCard {
.salesBar {
padding: 0 0 24px 24px;
padding: 0 0 32px 32px;
}
.salesRank {
padding: 0 24px 24px 0;
padding: 0 32px 32px 72px;
}
:global {
.ant-tabs-bar {
padding-left: 24px;
padding-left: 16px;
.ant-tabs-nav .ant-tabs-tab {
padding-top: 16px;
padding-bottom: 14px;
......@@ -87,9 +88,11 @@
}
}
}
.salesCardExtra {
height: 88px;
height: 68px;
}
.salesTypeRadio {
position: absolute;
left: 24px;
......@@ -104,6 +107,18 @@
.ant-tabs-ink-bar {
top: 1px;
}
.ant-tabs-nav-container-scrolling {
padding-left: 40px;
padding-right: 40px;
}
.ant-tabs-tab-prev-icon:before {
position: relative;
left: 6px;
}
.ant-tabs-tab-next-icon:before {
position: relative;
right: 6px;
}
}
}
......@@ -111,6 +126,7 @@
.salesExtra {
display: none;
}
.rankingList {
li {
span:first-child {
......@@ -124,12 +140,19 @@
.rankingTitle {
margin-top: 16px;
}
.salesCard {
.salesBar {
padding: 16px;
}
}
}
@media screen and (max-width: @screen-sm) {
.salesExtraWrap {
display: none;
}
.salesCard {
:global {
.ant-tabs-content {
......
src/routes/Dashboard/Monitor.js
View file @ ff612c5c
......@@ -39,26 +39,26 @@ export default class Monitor extends PureComponent {
<Col xl={18} lg={24} md={24} sm={24} xs={24} style={{ marginBottom: 24 }}>
<Card title="活动实时交易情况" bordered={false}>
<Row>
<Col sm={6} xs={12}>
<Col md={6} sm={12} xs={24}>
<NumberInfo
subTitle="今日交易总额"
suffix="元"
total={numeral(124543233).format('0,0')}
/>
</Col>
<Col sm={6} xs={12}>
<Col md={6} sm={12} xs={24}>
<NumberInfo
subTitle="销售目标完成率"
total="92%"
/>
</Col>
<Col sm={6} xs={12}>
<Col md={6} sm={12} xs={24}>
<NumberInfo
subTitle="活动剩余时间"
total={<CountDown target={targetTime} />}
/>
</Col>
<Col sm={6} xs={12}>
<Col md={6} sm={12} xs={24}>
<NumberInfo
subTitle="每秒交易总额"
suffix="元"
......@@ -96,7 +96,7 @@ export default class Monitor extends PureComponent {
return '';
}
}}
title="核销率"
title="跳出率"
height={180}
percent={87}
/>
......
src/routes/Dashboard/Monitor.less
View file @ ff612c5c
......@@ -3,7 +3,7 @@
.mapChart {
padding-top: 24px;
height: 450px;
height: 457px;
img {
width: 100%;
}
......
src/routes/Dashboard/Workplace.js
View file @ ff612c5c
......@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import { Link } from 'dva/router';
import { Row, Col, Card, List, Avatar, Icon } from 'antd';
import { Row, Col, Card, List, Avatar } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import EditableLinkGroup from '../../components/EditableLinkGroup';
......@@ -109,7 +109,7 @@ export default class Workplace extends PureComponent {
<Avatar size="large" src="https://gw.alipayobjects.com/zos/rmsportal/XertDCubOxUvZbCdgWTW.png" />
</div>
<div className={styles.content}>
<p className={styles.contentTitle}>早安，曲丽丽，祝你开心每一天</p>
<p className={styles.contentTitle}>早安，曲丽丽，祝你开心每一天！</p>
<p>交互专家 | 蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED</p>
</div>
</div>
......@@ -118,17 +118,17 @@ export default class Workplace extends PureComponent {
const pageHeaderExtra = (
<div className={styles.pageHeaderExtra}>
<div>
<p><Icon type="appstore-o" /> 项目数</p>
<p>项目数</p>
<p>56</p>
<em />
</div>
<div>
<p><Icon type="trophy" /> 团队内排名</p>
<p>团队内排名</p>
<p>8<span> / 24</span></p>
<em />
</div>
<div>
<p><Icon type="eye-o" /> 项目访问</p>
<p>项目访问</p>
<p>2,223</p>
</div>
</div>
......@@ -181,7 +181,7 @@ export default class Workplace extends PureComponent {
title="动态"
loading={activitiesLoading}
>
<List loading={activitiesLoading}>
<List loading={activitiesLoading} size="large">
<div className={styles.activitiesList}>
{
activitiesList.map(item => (
......@@ -190,7 +190,7 @@ export default class Workplace extends PureComponent {
avatar={<Avatar src={item.user.avatar} />}
title={
<p>
<a>{item.user.name}</a> 在 <a>xx</a> 新建了项目 <a>xxxx</a>
<a style={{ fontWeight: 'bold' }}>{item.user.name}</a> 在 <a>xx</a> 新建了项目 <a>xxxx</a>
</p>
}
description={moment(item.updatedAt).fromNow()}
......
src/routes/Dashboard/Workplace.less
View file @ ff612c5c
......@@ -13,18 +13,19 @@
.pageHeaderContent {
display: flex;
.avatar {
flex: 0 1 80px;
flex: 0 1 72px;
margin-bottom: 12px;
& > span {
border-radius: 80px;
border-radius: 72px;
display: block;
width: 80px;
height: 80px;
width: 72px;
height: 72px;
}
}
.content {
position: relative;
top: 8px;
margin-left: 32px;
margin-left: 24px;
flex: 1 1 auto;
color: @text-color-secondary;
.contentTitle {
......@@ -38,18 +39,20 @@
.pageHeaderExtra {
.clearfix();
float: right;
margin-right: 8px;
& > div {
padding: 0 24px;
padding: 0 32px;
position: relative;
float: left;
& > p:first-child {
color: @text-color-secondary;
font-size: @font-size-base;
line-height: 22px;
margin-bottom: 2px;
margin-bottom: 4px;
}
& > p {
color: @text-color;
color: @heading-color;
font-size: 30px;
line-height: 38px;
& > span {
......@@ -108,11 +111,11 @@
:global {
.ant-card-meta-description {
color: @text-color-secondary;
font-size: 12px;
min-height: 36px;
min-height: 42px;
}
}
.cardTitle {
font-size: 14px;
:global {
.ant-avatar {
position: relative;
......@@ -178,6 +181,8 @@
margin-bottom: 0;
}
.pageHeaderExtra {
float: none;
margin-right: 0;
& > div {
padding: 0 16px;
text-align: left;
......
src/routes/List/BasicList.js
View file @ ff612c5c
......@@ -110,16 +110,18 @@ export default class BasicList extends PureComponent {
</Card>
<Card
className={styles.listCard}
bordered={false}
title="基础列表"
style={{ marginTop: 24 }}
bodyStyle={{ padding: '16px 32px 40px 32px' }}
bodyStyle={{ padding: '0 32px 40px 32px' }}
extra={extraContent}
>
<Button type="dashed" style={{ width: '100%', marginBottom: 12 }}>
<Icon type="plus" /> 添加
</Button>
<List
size="large"
rowKey="id"
loading={loading}
pagination={paginationProps}
......
src/routes/List/BasicList.less
View file @ ff612c5c
......@@ -8,10 +8,22 @@
}
.ant-card-head-title {
line-height: 32px;
padding: 24px 0;
}
.ant-card-extra {
padding: 24px 0;
}
.ant-list-pagination {
text-align: right;
}
.ant-avatar-lg {
width: 48px;
height: 48px;
line-height: 48px;
}
.ant-list-pagination {
margin-top: 16px;
}
}
.headerInfo {
position: relative;
......@@ -44,7 +56,7 @@
color: @text-color-secondary;
display: inline-block;
font-size: @font-size-base;
margin-left: 32px;
margin-left: 40px;
& > span {
line-height: 20px;
}
......@@ -83,6 +95,13 @@
margin-left: 0;
}
}
.listCard {
:global {
.ant-card-head-title {
overflow: visible;
}
}
}
}
}
......@@ -113,6 +132,14 @@
}
}
}
.listCard {
:global {
.ant-radio-group {
display: block;
margin-bottom: 8px;
}
}
}
}
@media screen and (max-width: @screen-lg) and (min-width: @screen-md) {
......@@ -128,3 +155,13 @@
}
}
}
@media screen and (max-width: @screen-xl) {
.standardList {
.listContent {
& > div:last-child {
top: 0;
}
}
}
}
src/routes/List/CardList.less
View file @ ff612c5c
......@@ -40,6 +40,9 @@
margin-top: 16px;
a {
margin-right: 32px;
img {
width: 24px;
}
}
img {
vertical-align: middle;
......@@ -54,6 +57,11 @@
}
}
}
@media screen and (max-width: @screen-md) {
.extraImg {
display: none;
}
}
@media screen and (max-width: @screen-sm) {
.pageHeaderContent {
......
src/routes/List/CoverCardList.js
View file @ ff612c5c
......@@ -90,7 +90,7 @@ export default class CoverCardList extends PureComponent {
<div className={styles.cardItemContent}>
<span>{moment(item.updatedAt).fromNow()}</span>
<div className={styles.avatarList}>
<AvatarList size="small">
<AvatarList size="mini">
{
item.members.map((member, i) => (
<AvatarList.Item
......@@ -153,7 +153,7 @@ export default class CoverCardList extends PureComponent {
onTabChange={this.handleTabChange}
>
<div className={styles.coverCardList}>
<Card bordered={false} bodyStyle={{ padding: 24 }}>
<Card bordered={false}>
<Form layout="inline">
<StandardFormRow title="所属类目" block>
<FormItem>
......
src/routes/List/CoverCardList.less
View file @ ff612c5c
......@@ -5,7 +5,7 @@
margin-bottom: -24px;
:global {
.ant-card-meta-description {
font-size: 12px;
color: @text-color;
}
}
.cardItemContent {
......@@ -14,7 +14,7 @@
line-height: 20px;
height: 20px;
& > span {
color: @disabled-color;
color: @text-color-secondary;
flex: 1;
font-size: 12px;
}
......
src/routes/List/FilterCardList.js
View file @ ff612c5c
......@@ -151,7 +151,7 @@ export default class FilterCardList extends PureComponent {
onTabChange={this.handleTabChange}
>
<div className={styles.filterCardList}>
<Card bordered={false} bodyStyle={{ padding: 24 }}>
<Card bordered={false}>
<Form layout="inline">
<StandardFormRow title="所属类目" block>
<FormItem>
......
src/routes/List/SearchList.js
View file @ ff612c5c
......@@ -141,7 +141,7 @@ export default class SearchList extends Component {
<div className={styles.listContent}>
<p>{content}</p>
<div>
<Avatar src={avatar} size="small" />{owner} 发布在 <a href={href}>{href}</a>
<Avatar src={avatar} size="small" /><a href={href}>{owner}</a> 发布在 <a href={href}>{href}</a>
<em>{moment(updatedAt).format('YYYY-MM-DD hh:mm')}</em>
</div>
</div>
......@@ -162,13 +162,14 @@ export default class SearchList extends Component {
const formItemLayout = {
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
sm: { span: 24 },
md: { span: 12 },
},
};
const loadMore = showLoadMore ? (
<div style={{ textAlign: 'center', marginTop: 16 }}>
<Button onClick={this.handleLoadMore}>
<Button onClick={this.handleLoadMore} style={{ paddingLeft: 48, paddingRight: 48 }}>
{loadingMore && (<span><Icon type="loading" /> 加载中...</span>)}
{!loadingMore && (<span>加载更多</span>)}
</Button>
......@@ -183,7 +184,7 @@ export default class SearchList extends Component {
onTabChange={this.handleTabChange}
>
<div>
<Card bordered={false} bodyStyle={{ padding: 24 }}>
<Card bordered={false}>
<Form layout="inline">
<StandardFormRow title="所属类目" block>
<FormItem>
......@@ -206,7 +207,7 @@ export default class SearchList extends Component {
grid
>
<Row>
<Col lg={16} md={16} sm={20} xs={20}>
<Col lg={16} md={24} sm={24} xs={24}>
<FormItem>
{getFieldDecorator('owner', {
initialValue: ['wjh', 'zxx'],
......@@ -223,7 +224,7 @@ export default class SearchList extends Component {
}
</Select>
)}
<a onClick={this.setOwner} style={{ marginLeft: 8 }}>只看自己的</a>
<a className={styles.selfTrigger} onClick={this.setOwner}>只看自己的</a>
</FormItem>
</Col>
</Row>
......@@ -234,7 +235,7 @@ export default class SearchList extends Component {
last
>
<Row gutter={16}>
<Col lg={8} md={10} sm={10} xs={24}>
<Col xl={8} lg={10} md={12} sm={24} xs={24}>
<FormItem
{...formItemLayout}
label="活跃用户"
......@@ -250,7 +251,7 @@ export default class SearchList extends Component {
)}
</FormItem>
</Col>
<Col lg={8} md={10} sm={10} xs={24}>
<Col xl={8} lg={10} md={12} sm={24} xs={24}>
<FormItem
{...formItemLayout}
label="好评度"
......@@ -282,6 +283,7 @@ export default class SearchList extends Component {
bodyStyle={{ padding: '12px 24px 32px 24px' }}
>
<List
size="large"
loading={!loadingMore && loading}
rowKey="id"
itemLayout="vertical"
......@@ -290,11 +292,17 @@ export default class SearchList extends Component {
renderItem={item => (
<List.Item
key={item.id}
actions={[<IconText type="star-o" text={item.star} />, <IconText type="like-o" text={item.like} />, <IconText type="message" text={item.message} />]}
actions={[
<IconText type="star-o" text={item.star} />,
<IconText type="like-o" text={item.like} />,
<IconText type="message" text={item.message} />,
]}
extra={<div className={styles.listItemExtra} />}
>
<List.Item.Meta
title={<a href={item.href}>{item.title}</a>}
title={(
<a className={styles.listItemMetaTitle} href={item.href}>{item.title}</a>
)}
description={<span><Tag>Ant Design</Tag><Tag>设计语言</Tag><Tag>蚂蚁金服</Tag></span>}
/>
<ListContent data={item} />
......
src/routes/List/SearchList.less
View file @ ff612c5c
......@@ -4,6 +4,7 @@
.listContent {
p {
line-height: 24px;
max-width: 720px;
}
& > div {
color: @text-color-secondary;
......@@ -15,7 +16,7 @@
}
& > span {
vertical-align: top;
margin-right: 16px;
margin-right: 8px;
width: 20px;
height: 20px;
& > img {
......@@ -25,7 +26,7 @@
& > em {
color: @disabled-color;
font-style: normal;
margin-left: 24px;
margin-left: 16px;
}
a {
color: @text-color-secondary;
......@@ -35,10 +36,16 @@
}
}
}
.listItemMetaTitle {
color: @heading-color;
}
.listItemExtra {
width: 272px;
height: 1px;
}
.selfTrigger {
margin-left: 24px;
}
@media screen and (max-width: @screen-xs) {
.listContent {
......@@ -46,6 +53,16 @@
height: auto;
}
}
.selfTrigger {
display: block;
margin-left: 0;
}
}
@media screen and (max-width: @screen-md) {
.selfTrigger {
display: block;
margin-left: 0;
}
}
@media screen and (max-width: @screen-lg) {
.listItemExtra {
......
src/routes/List/TableList.js
View file @ ff612c5c
......@@ -157,8 +157,8 @@ export default class TableList extends PureComponent {
const { selectedRows, modalVisible, addInputValue } = this.state;
const formItemLayout = {
labelCol: { span: 5 },
wrapperCol: { span: 19 },
labelCol: { xs: 5, sm: 8, lg: 6, xl: 6 },
wrapperCol: { xs: 18, sm: 16, lg: 17, xl: 17 },
};
const menu = (
......
src/routes/List/TableList.less
View file @ ff612c5c
......@@ -2,6 +2,12 @@
@import "../../utils/utils.less";
.tableList {
padding-bottom: 8px;
:global {
.ant-form-item {
margin-bottom: 24px;
}
}
.tableListOperator {
margin-bottom: 16px;
button {
......@@ -16,6 +22,12 @@
top: 2px;
}
@media screen and (max-width: @screen-lg) {
.formButton {
margin-left: 20px;
}
}
@media screen and (max-width: @screen-md) {
.formButton {
margin-left: 0;
......
src/theme.js
View file @ ff612c5c
// https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
module.exports = {
// 'primary-color': '#10e99b',
'card-actions-background': '#f7f9fa',
'card-actions-background': '#f5f8fa',
};
src/utils/utils.less
View file @ ff612c5c
......@@ -5,7 +5,7 @@
white-space: nowrap;
}
.textOverflowMulti(@line: 3) {
.textOverflowMulti(@line: 3, @bg: #fff) {
overflow: hidden;
position: relative;
line-height: 1.5em;
......@@ -14,9 +14,11 @@
margin-right: -1em;
padding-right: 1em;
&:before {
background: @bg;
content: '...';
padding: 0 1px;
position: absolute;
right: 0;
right: 14px;
bottom: 0;
}
&:after {
......
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