@@ -570,6 +570,42 @@ export async function getInitialState() { | |||||
component: './order/ExOrder', | component: './order/ExOrder', | ||||
access: 'k32', | access: 'k32', | ||||
}, | }, | ||||
{ | |||||
name: '营销报表', | |||||
path: '/order/order-market-report', | |||||
component: './order/order-market-report', | |||||
access: 'k31', | |||||
}, | |||||
{ | |||||
name: '订单报表', | |||||
path: '/order/order-report', | |||||
component: './order/order-report', | |||||
access: 'k31', | |||||
}, | |||||
{ | |||||
name: '订单报表详情', | |||||
path: '/order/order-report/order-report-detail', | |||||
component: './order/order-report-detail', | |||||
access: 'k31', | |||||
}, | |||||
{ | |||||
name: '营收报表', | |||||
path: '/order/order-revenue-statement', | |||||
component: './order/order-revenue-statement', | |||||
access: 'k31', | |||||
}, | |||||
{ | |||||
name: '产品报表', | |||||
path: '/order/order-product-report', | |||||
component: './order/order-product-report', | |||||
access: 'k31', | |||||
}, | |||||
{ | |||||
name: '会员报表', | |||||
path: '/order/order-member-statement', | |||||
component: './order/order-member-statement', | |||||
access: 'k31', | |||||
}, | |||||
{ | { | ||||
name: '销售成本分析', | name: '销售成本分析', | ||||
path: '/order/cost-of-sales', | path: '/order/cost-of-sales', | ||||
@@ -1,6 +1,6 @@ | |||||
import React, { useState, useEffect } from 'react'; | import React, { useState, useEffect } from 'react'; | ||||
import { PageContainer } from '@ant-design/pro-layout'; | import { PageContainer } from '@ant-design/pro-layout'; | ||||
import { Button, Card, DatePicker, Table, Pagination, Spin, Select, message } from 'antd'; | |||||
import { Button, Card, DatePicker, Table, Pagination, Spin, Select, message, Col, Row } from 'antd'; | |||||
import styles from './index.less'; | import styles from './index.less'; | ||||
const { RangePicker } = DatePicker; | const { RangePicker } = DatePicker; | ||||
import costSalesAPI from "./service"; | import costSalesAPI from "./service"; | ||||
@@ -144,6 +144,17 @@ export default function Index() { | |||||
} | } | ||||
} | } | ||||
//重置搜索条件 | |||||
const onResetSearch = () => { | |||||
setGoodsIdArray([]); | |||||
setStoreIdArray([]); | |||||
setGoodsTypeArray([]); | |||||
setTimeRange([ | |||||
moment(moment(new Date(Date.now() - 24 * 60 * 60 * 1000 * 7)).format('YYYY-MM-DD 00:00:00')), | |||||
moment(moment(new Date(Date.now())).format('YYYY-MM-DD 23:59:59')), | |||||
]); | |||||
} | |||||
useEffect(() => { | useEffect(() => { | ||||
onQueryReportSalescost(); | onQueryReportSalescost(); | ||||
onQueryStoreList(); | onQueryStoreList(); | ||||
@@ -155,9 +166,14 @@ export default function Index() { | |||||
<PageContainer> | <PageContainer> | ||||
{showLoading ? <LoadingCard></LoadingCard> : null} | {showLoading ? <LoadingCard></LoadingCard> : null} | ||||
<Card className={styles['data-search-card']}> | <Card className={styles['data-search-card']}> | ||||
<div className={styles['data-search-box']}> | |||||
<div className={styles['data-search-left']}> | |||||
<Row gutter={20} justify="space-between"> | |||||
<Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}> | |||||
<div className={styles['data-search-prefix']}> | |||||
门店 | |||||
</div> | |||||
<Select | <Select | ||||
className={styles['data-search-sufixx']} | |||||
value={storeIdArray} | |||||
showSearch | showSearch | ||||
mode="tags" | mode="tags" | ||||
size="middle" | size="middle" | ||||
@@ -165,73 +181,80 @@ export default function Index() { | |||||
placeholder="请选择门店" | placeholder="请选择门店" | ||||
onChange={(values) => setStoreIdArray(values)} | onChange={(values) => setStoreIdArray(values)} | ||||
filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | ||||
style={{ | |||||
width: '300px', | |||||
marginRight: '50px' | |||||
}} | |||||
> | > | ||||
{ | { | ||||
storeSelect.map( (item) => { | |||||
storeSelect.map((item) => { | |||||
return ( | return ( | ||||
<Option key={item.key}>{item.title}</Option> | <Option key={item.key}>{item.title}</Option> | ||||
) | ) | ||||
}) | }) | ||||
} | } | ||||
</Select> | </Select> | ||||
</Col> | |||||
<Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}> | |||||
<div className={styles['data-search-prefix']}> | |||||
商品 | |||||
</div> | |||||
<Select | <Select | ||||
className={styles['data-search-sufixx']} | |||||
showSearch | showSearch | ||||
mode="tags" | mode="tags" | ||||
size="middle" | size="middle" | ||||
allowClear | allowClear | ||||
placeholder="请选择商品" | placeholder="请选择商品" | ||||
value={goodsIdArray} | |||||
onChange={(values) => setGoodsIdArray(values)} | onChange={(values) => setGoodsIdArray(values)} | ||||
filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | ||||
style={{ | |||||
width: '300px', | |||||
marginRight: '50px' | |||||
}} | |||||
> | > | ||||
{ | { | ||||
goodsIdSelect.map( (item, index) => { | |||||
goodsIdSelect.map((item, index) => { | |||||
return ( | return ( | ||||
<Option key={item.id}>{item.name}</Option> | <Option key={item.id}>{item.name}</Option> | ||||
) | ) | ||||
}) | }) | ||||
} | } | ||||
</Select> | </Select> | ||||
</Col> | |||||
<Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}> | |||||
<div className={styles['data-search-prefix']}> | |||||
商品类别 | |||||
</div> | |||||
<Select | <Select | ||||
className={styles['data-search-sufixx']} | |||||
showSearch | showSearch | ||||
mode="tags" | mode="tags" | ||||
size="middle" | size="middle" | ||||
allowClear | allowClear | ||||
placeholder="请选择商品类别" | placeholder="请选择商品类别" | ||||
value={goodsTypeArray} | |||||
onChange={(values) => setGoodsTypeArray(values)} | onChange={(values) => setGoodsTypeArray(values)} | ||||
filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | ||||
style={{ | |||||
width: '300px', | |||||
marginRight: '50px' | |||||
}} | |||||
> | > | ||||
{ | { | ||||
goodsTypeSelect.map( (item) => { | |||||
goodsTypeSelect.map((item) => { | |||||
return ( | return ( | ||||
<Option key={item.id}>{item.name}</Option> | <Option key={item.id}>{item.name}</Option> | ||||
) | ) | ||||
}) | }) | ||||
} | } | ||||
</Select> | </Select> | ||||
<RangePicker size='middle' className={styles['my-range-picker']} value={timeRange} onChange={(date, dateStrings) => { | |||||
</Col> | |||||
<Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}> | |||||
<div className={styles['data-search-prefix']}> | |||||
起始时间 | |||||
</div> | |||||
<RangePicker size='middle' className={styles['data-search-sufixx']} value={timeRange} onChange={(date, dateStrings) => { | |||||
let tempDate = [ | let tempDate = [ | ||||
moment(moment(new Date(dateStrings[0])).format('YYYY-MM-DD 00:00:00')), | moment(moment(new Date(dateStrings[0])).format('YYYY-MM-DD 00:00:00')), | ||||
moment(moment(new Date(dateStrings[1])).format('YYYY-MM-DD 23:59:59')), | moment(moment(new Date(dateStrings[1])).format('YYYY-MM-DD 23:59:59')), | ||||
] | ] | ||||
setTimeRange(tempDate); | setTimeRange(tempDate); | ||||
}} /> | }} /> | ||||
</div> | |||||
<div className={styles['data-search-btns']}> | |||||
<Button className={styles['search-btn-item']}>重置</Button> | |||||
<Button className={styles['search-btn-item']} type="primary" onClick={onQueryReportSalescost}>查询</Button> | |||||
</div> | |||||
</Col> | |||||
</Row> | |||||
<div className={styles['data-search-btns']}> | |||||
<Button className={styles['search-btn-item']} onClick={onResetSearch}>重置</Button> | |||||
<Button className={styles['search-btn-item']} type="primary" onClick={onQueryReportSalescost}>查询</Button> | |||||
</div> | </div> | ||||
</Card> | </Card> | ||||
<Card className={styles['table-card']}> | <Card className={styles['table-card']}> | ||||
@@ -33,4 +33,30 @@ | |||||
bottom: 0; | bottom: 0; | ||||
z-index: 999; | z-index: 999; | ||||
background-color: rgba(0, 0, 0, 0.5); | background-color: rgba(0, 0, 0, 0.5); | ||||
} | |||||
.data-search-item { | |||||
display: flex; | |||||
align-items: center; | |||||
margin-bottom: 10px; | |||||
} | |||||
.data-search-input { | |||||
width: 100%; | |||||
} | |||||
.data-search-prefix { | |||||
text-align-last: justify; | |||||
width: 60px; | |||||
flex-shrink: 0; | |||||
margin-right: 5px; | |||||
} | |||||
.data-search-sufixx { | |||||
flex-grow: 1; | |||||
} | |||||
.data-search-btns { | |||||
display: flex; | |||||
justify-content: flex-end; | |||||
} | } |
@@ -1,6 +1,6 @@ | |||||
import React, { useState, useEffect } from 'react'; | import React, { useState, useEffect } from 'react'; | ||||
import { PageContainer } from '@ant-design/pro-layout'; | import { PageContainer } from '@ant-design/pro-layout'; | ||||
import { Button, Card, DatePicker, Table, Pagination, Spin, Select, message } from 'antd'; | |||||
import { Button, Card, DatePicker, Table, Pagination, Spin, Select, message, Col, Row } from 'antd'; | |||||
import styles from './index.less'; | import styles from './index.less'; | ||||
const { RangePicker } = DatePicker; | const { RangePicker } = DatePicker; | ||||
import costSalesAPI from "./service"; | import costSalesAPI from "./service"; | ||||
@@ -75,7 +75,7 @@ export default function Index() { | |||||
/** | /** | ||||
* 查询店铺列表 | * 查询店铺列表 | ||||
*/ | */ | ||||
const onQueryStoreList = async () => { | |||||
const onQueryStoreList = async () => { | |||||
setShowLoading(true); | setShowLoading(true); | ||||
const response = await costSalesAPI.gettree({}); | const response = await costSalesAPI.gettree({}); | ||||
setShowLoading(false); | setShowLoading(false); | ||||
@@ -92,6 +92,15 @@ export default function Index() { | |||||
} | } | ||||
} | } | ||||
//重置搜索条件 | |||||
const onResetSearch = () => { | |||||
setStoreIdArray([]); | |||||
setTimeRange([ | |||||
moment(moment(new Date(Date.now() - 24 * 60 * 60 * 1000 * 7)).format('YYYY-MM-DD 00:00:00')), | |||||
moment(moment(new Date(Date.now())).format('YYYY-MM-DD 23:59:59')), | |||||
]); | |||||
} | |||||
useEffect(() => { | useEffect(() => { | ||||
onQueryReportSalescost(); | onQueryReportSalescost(); | ||||
onQueryStoreList(); | onQueryStoreList(); | ||||
@@ -101,9 +110,14 @@ export default function Index() { | |||||
<PageContainer> | <PageContainer> | ||||
{showLoading ? <LoadingCard></LoadingCard> : null} | {showLoading ? <LoadingCard></LoadingCard> : null} | ||||
<Card className={styles['data-search-card']}> | <Card className={styles['data-search-card']}> | ||||
<div className={styles['data-search-box']}> | |||||
<div className={styles['data-search-left']}> | |||||
<Select | |||||
<Row gutter={20} justify="start"> | |||||
<Col xs={24} sm={24} md={12} lg={12} xl={8} className={styles['data-search-item']}> | |||||
<div className={styles['data-search-prefix']}> | |||||
门店 | |||||
</div> | |||||
<Select | |||||
value={storeIdArray} | |||||
className={styles['data-search-sufixx']} | |||||
showSearch | showSearch | ||||
mode="tags" | mode="tags" | ||||
size="middle" | size="middle" | ||||
@@ -111,32 +125,33 @@ export default function Index() { | |||||
placeholder="请选择门店" | placeholder="请选择门店" | ||||
onChange={(values) => setStoreIdArray(values)} | onChange={(values) => setStoreIdArray(values)} | ||||
filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | ||||
style={{ | |||||
width: '300px', | |||||
marginRight: '50px' | |||||
}} | |||||
> | > | ||||
{ | { | ||||
storeSelect.map( (item) => { | |||||
storeSelect.map((item) => { | |||||
return ( | return ( | ||||
<Option key={item.key}>{item.title}</Option> | <Option key={item.key}>{item.title}</Option> | ||||
) | ) | ||||
}) | }) | ||||
} | } | ||||
</Select> | </Select> | ||||
<RangePicker size='middle' className={styles['my-range-picker']} value={timeRange} onChange={(date, dateStrings) => { | |||||
</Col> | |||||
<Col xs={24} sm={24} md={12} lg={12} xl={8} className={styles['data-search-item']}> | |||||
<div className={styles['data-search-prefix']}> | |||||
起始时间 | |||||
</div> | |||||
<RangePicker size='middle' className={styles['data-search-sufixx']} value={timeRange} onChange={(date, dateStrings) => { | |||||
let tempDate = [ | let tempDate = [ | ||||
moment(moment(new Date(dateStrings[0])).format('YYYY-MM-DD 00:00:00')), | moment(moment(new Date(dateStrings[0])).format('YYYY-MM-DD 00:00:00')), | ||||
moment(moment(new Date(dateStrings[1])).format('YYYY-MM-DD 23:59:59')), | moment(moment(new Date(dateStrings[1])).format('YYYY-MM-DD 23:59:59')), | ||||
] | ] | ||||
setTimeRange(tempDate); | setTimeRange(tempDate); | ||||
}} /> | }} /> | ||||
</div> | |||||
</Col> | |||||
<div className={styles['data-search-btns']}> | <div className={styles['data-search-btns']}> | ||||
<Button className={styles['search-btn-item']}>重置</Button> | |||||
<Button className={styles['search-btn-item']} onClick={onResetSearch}>重置</Button> | |||||
<Button className={styles['search-btn-item']} type="primary" onClick={onQueryReportSalescost}>查询</Button> | <Button className={styles['search-btn-item']} type="primary" onClick={onQueryReportSalescost}>查询</Button> | ||||
</div> | </div> | ||||
</div> | |||||
</Row> | |||||
</Card> | </Card> | ||||
<Card className={styles['table-card']}> | <Card className={styles['table-card']}> | ||||
<Table dataSource={costSalesData} columns={columns} pagination={false} /> | <Table dataSource={costSalesData} columns={columns} pagination={false} /> | ||||
@@ -33,4 +33,31 @@ | |||||
bottom: 0; | bottom: 0; | ||||
z-index: 999; | z-index: 999; | ||||
background-color: rgba(0, 0, 0, 0.5); | background-color: rgba(0, 0, 0, 0.5); | ||||
} | |||||
.data-search-item { | |||||
display: flex; | |||||
align-items: center; | |||||
margin-bottom: 10px; | |||||
} | |||||
.data-search-input { | |||||
width: 100%; | |||||
} | |||||
.data-search-prefix { | |||||
text-align-last: justify; | |||||
width: 60px; | |||||
flex-shrink: 0; | |||||
margin-right: 5px; | |||||
} | |||||
.data-search-sufixx { | |||||
flex-grow: 1; | |||||
} | |||||
.data-search-btns { | |||||
margin-left: auto; | |||||
display: flex; | |||||
justify-content: flex-end; | |||||
} | } |
@@ -1,6 +1,6 @@ | |||||
import React, { useState, useEffect } from 'react'; | import React, { useState, useEffect } from 'react'; | ||||
import { PageContainer } from '@ant-design/pro-layout'; | import { PageContainer } from '@ant-design/pro-layout'; | ||||
import { Button, Card, DatePicker, Table, Pagination, Spin, Select, message } from 'antd'; | |||||
import { Button, Card, DatePicker, Table, Pagination, Spin, Select, message, Col, Row } from 'antd'; | |||||
import styles from './index.less'; | import styles from './index.less'; | ||||
const { RangePicker } = DatePicker; | const { RangePicker } = DatePicker; | ||||
import costSalesAPI from "./service"; | import costSalesAPI from "./service"; | ||||
@@ -129,6 +129,17 @@ export default function Index() { | |||||
} | } | ||||
} | } | ||||
//重置搜索条件 | |||||
const onResetSearch = () => { | |||||
setGoodsIdArray([]); | |||||
setStoreIdArray([]); | |||||
setGoodsTypeArray([]); | |||||
setTimeRange([ | |||||
moment(moment(new Date(Date.now() - 24 * 60 * 60 * 1000 * 7)).format('YYYY-MM-DD 00:00:00')), | |||||
moment(moment(new Date(Date.now())).format('YYYY-MM-DD 23:59:59')), | |||||
]); | |||||
} | |||||
useEffect(() => { | useEffect(() => { | ||||
onQueryReportSalescost(); | onQueryReportSalescost(); | ||||
onQueryStoreList(); | onQueryStoreList(); | ||||
@@ -139,9 +150,14 @@ export default function Index() { | |||||
<PageContainer> | <PageContainer> | ||||
{showLoading ? <LoadingCard></LoadingCard> : null} | {showLoading ? <LoadingCard></LoadingCard> : null} | ||||
<Card className={styles['data-search-card']}> | <Card className={styles['data-search-card']}> | ||||
<div className={styles['data-search-box']}> | |||||
<div className={styles['data-search-left']}> | |||||
<Select | |||||
<Row gutter={20} justify="space-between"> | |||||
<Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}> | |||||
<div className={styles['data-search-prefix']}> | |||||
门店 | |||||
</div> | |||||
<Select | |||||
className={styles['data-search-sufixx']} | |||||
value={storeIdArray} | |||||
showSearch | showSearch | ||||
mode="tags" | mode="tags" | ||||
size="middle" | size="middle" | ||||
@@ -149,73 +165,80 @@ export default function Index() { | |||||
placeholder="请选择门店" | placeholder="请选择门店" | ||||
onChange={(values) => setStoreIdArray(values)} | onChange={(values) => setStoreIdArray(values)} | ||||
filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | ||||
style={{ | |||||
width: '300px', | |||||
marginRight: '50px' | |||||
}} | |||||
> | > | ||||
{ | { | ||||
storeSelect.map( (item) => { | |||||
storeSelect.map((item) => { | |||||
return ( | return ( | ||||
<Option key={item.key}>{item.title}</Option> | <Option key={item.key}>{item.title}</Option> | ||||
) | ) | ||||
}) | }) | ||||
} | } | ||||
</Select> | </Select> | ||||
</Col> | |||||
<Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}> | |||||
<div className={styles['data-search-prefix']}> | |||||
商品 | |||||
</div> | |||||
<Select | <Select | ||||
className={styles['data-search-sufixx']} | |||||
showSearch | showSearch | ||||
mode="tags" | mode="tags" | ||||
size="middle" | size="middle" | ||||
allowClear | allowClear | ||||
placeholder="请选择商品" | placeholder="请选择商品" | ||||
value={goodsIdArray} | |||||
onChange={(values) => setGoodsIdArray(values)} | onChange={(values) => setGoodsIdArray(values)} | ||||
filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | ||||
style={{ | |||||
width: '300px', | |||||
marginRight: '50px' | |||||
}} | |||||
> | > | ||||
{ | { | ||||
goodsIdSelect.map( (item, index) => { | |||||
goodsIdSelect.map((item, index) => { | |||||
return ( | return ( | ||||
<Option key={item.id}>{item.name}</Option> | <Option key={item.id}>{item.name}</Option> | ||||
) | ) | ||||
}) | }) | ||||
} | } | ||||
</Select> | </Select> | ||||
</Col> | |||||
<Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}> | |||||
<div className={styles['data-search-prefix']}> | |||||
商品类别 | |||||
</div> | |||||
<Select | <Select | ||||
className={styles['data-search-sufixx']} | |||||
showSearch | showSearch | ||||
mode="tags" | mode="tags" | ||||
size="middle" | size="middle" | ||||
allowClear | allowClear | ||||
placeholder="请选择商品类别" | placeholder="请选择商品类别" | ||||
value={goodsTypeArray} | |||||
onChange={(values) => setGoodsTypeArray(values)} | onChange={(values) => setGoodsTypeArray(values)} | ||||
filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | ||||
style={{ | |||||
width: '300px', | |||||
marginRight: '50px' | |||||
}} | |||||
> | > | ||||
{ | { | ||||
goodsTypeSelect.map( (item) => { | |||||
goodsTypeSelect.map((item) => { | |||||
return ( | return ( | ||||
<Option key={item.id}>{item.name}</Option> | <Option key={item.id}>{item.name}</Option> | ||||
) | ) | ||||
}) | }) | ||||
} | } | ||||
</Select> | </Select> | ||||
<RangePicker size='middle' className={styles['my-range-picker']} value={timeRange} onChange={(date, dateStrings) => { | |||||
</Col> | |||||
<Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}> | |||||
<div className={styles['data-search-prefix']}> | |||||
起始时间 | |||||
</div> | |||||
<RangePicker size='middle' className={styles['data-search-sufixx']} value={timeRange} onChange={(date, dateStrings) => { | |||||
let tempDate = [ | let tempDate = [ | ||||
moment(moment(new Date(dateStrings[0])).format('YYYY-MM-DD 00:00:00')), | moment(moment(new Date(dateStrings[0])).format('YYYY-MM-DD 00:00:00')), | ||||
moment(moment(new Date(dateStrings[1])).format('YYYY-MM-DD 23:59:59')), | moment(moment(new Date(dateStrings[1])).format('YYYY-MM-DD 23:59:59')), | ||||
] | ] | ||||
setTimeRange(tempDate); | setTimeRange(tempDate); | ||||
}} /> | }} /> | ||||
</div> | |||||
<div className={styles['data-search-btns']}> | |||||
<Button className={styles['search-btn-item']}>重置</Button> | |||||
<Button className={styles['search-btn-item']} type="primary" onClick={onQueryReportSalescost}>查询</Button> | |||||
</div> | |||||
</Col> | |||||
</Row> | |||||
<div className={styles['data-search-btns']}> | |||||
<Button className={styles['search-btn-item']} onClick={onResetSearch}>重置</Button> | |||||
<Button className={styles['search-btn-item']} type="primary" onClick={onQueryReportSalescost}>查询</Button> | |||||
</div> | </div> | ||||
</Card> | </Card> | ||||
<Card className={styles['table-card']}> | <Card className={styles['table-card']}> | ||||
@@ -33,4 +33,30 @@ | |||||
bottom: 0; | bottom: 0; | ||||
z-index: 999; | z-index: 999; | ||||
background-color: rgba(0, 0, 0, 0.5); | background-color: rgba(0, 0, 0, 0.5); | ||||
} | |||||
.data-search-item { | |||||
display: flex; | |||||
align-items: center; | |||||
margin-bottom: 10px; | |||||
} | |||||
.data-search-input { | |||||
width: 100%; | |||||
} | |||||
.data-search-prefix { | |||||
text-align-last: justify; | |||||
width: 60px; | |||||
flex-shrink: 0; | |||||
margin-right: 5px; | |||||
} | |||||
.data-search-sufixx { | |||||
flex-grow: 1; | |||||
} | |||||
.data-search-btns { | |||||
display: flex; | |||||
justify-content: flex-end; | |||||
} | } |