9.22 大屏部分样式修改并增加滚动条

This commit is contained in:
jl-zhoujl2
2022-09-22 13:37:42 +08:00
parent 2f1be12fa5
commit 9720880a1c
7 changed files with 61 additions and 18 deletions

View File

@ -301,7 +301,7 @@ const BidEvalAppointment: React.FC<BidEvalAppointmentProps> = (props) => {
rules={[{ required: true, message: '请选择' }]} rules={[{ required: true, message: '请选择' }]}
extra={<span style={{ color: "#b30000" }}> 7:00 ~ 18:00</span>} extra={<span style={{ color: "#b30000" }}> 7:00 ~ 18:00</span>}
> >
<DatePicker showTime showNow={false} disabledDate={disabledDate} disabledTime={(current) => otherDisabledDateTime(current, disabledMap)} showMinute={false} showSecond={false} format={dateFormat} style={{ width: '100%' }} renderExtraFooter={() => "注:若时间被占用,则置灰不可选"} /> <DatePicker showTime showNow={false} disabledDate={disabledDate} disabledTime={(current) => otherDisabledDateTime(current, disabledMap)} showMinute={false} showSecond={false} format={dateFormat} style={{ width: '100%' }} renderExtraFooter={() => <span style={{ color: '#b30000' }}></span>} />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={12}> <Col span={12}>
@ -310,7 +310,7 @@ const BidEvalAppointment: React.FC<BidEvalAppointmentProps> = (props) => {
name="reserveEndDate" name="reserveEndDate"
rules={[{ required: true, message: '请选择' }]} rules={[{ required: true, message: '请选择' }]}
> >
<DatePicker showTime showNow={false} disabledDate={disabledDate} disabledTime={(current) => otherDisabledDateTime(current, disabledMap)} showMinute={false} showSecond={false} format={dateFormat} style={{ width: '100%' }} renderExtraFooter={() => "注:若时间被占用,则置灰不可选"} /> <DatePicker showTime showNow={false} disabledDate={disabledDate} disabledTime={(current) => otherDisabledDateTime(current, disabledMap)} showMinute={false} showSecond={false} format={dateFormat} style={{ width: '100%' }} renderExtraFooter={() => <span style={{ color: '#b30000' }}></span>} />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={12}> <Col span={12}>

View File

@ -826,6 +826,10 @@ export default () => {
className="screen-table" className="screen-table"
rowKey="id" rowKey="id"
size="small" size="small"
scroll={{
y: 200,
scrollToFirstRowOnChange: true,
}}
dataSource={bidProjectData} dataSource={bidProjectData}
columns={evalColumn} columns={evalColumn}
onRow={record => { onRow={record => {

View File

@ -87,14 +87,6 @@
.screen-warn-list { .screen-warn-list {
height: 67.4%; height: 67.4%;
margin-top: 0; margin-top: 0;
::-webkit-scrollbar {
display: none;
}
.ant-table-cell-scrollbar {
display: none;
}
} }
.screen-graph-top { .screen-graph-top {
@ -372,8 +364,8 @@
} }
.screen-table { .screen-table {
margin-top: 0.5rem; margin-top: 0.25rem;
height: calc(100% - 40px - 0.5rem); height: calc(100% - 40px - 0.25rem);
overflow: hidden; overflow: hidden;
.ant-table-container table>thead>tr:first-child th:first-child { .ant-table-container table>thead>tr:first-child th:first-child {
@ -409,4 +401,12 @@
.ant-table-small .ant-table-thead>tr>th { .ant-table-small .ant-table-thead>tr>th {
background-color: #045da8; background-color: #045da8;
} }
::-webkit-scrollbar {
display: none;
}
.ant-table-cell-scrollbar {
display: none;
}
} }

View File

@ -333,6 +333,7 @@ export default () => {
pagination={{ pagination={{
defaultPageSize: 6, defaultPageSize: 6,
onChange: onPageChange, onChange: onPageChange,
current: pageNo.current,
total: totalItem, total: totalItem,
showTotal: (total, range) => `当前第 ${range[0]}-${range[1]} 条,共计 ${total}`, showTotal: (total, range) => `当前第 ${range[0]}-${range[1]} 条,共计 ${total}`,
// itemRender // itemRender

View File

@ -476,6 +476,15 @@
.ant-pagination-prev { .ant-pagination-prev {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.ant-pagination-item-ellipsis {
color: #8de3f3;
}
.ant-pagination-jump-prev .ant-pagination-item-container .ant-pagination-item-link-icon,
.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon {
color: #8de3f3;
}
} }
} }

View File

@ -350,7 +350,7 @@ export default (props: any) => {
<div className="top-title-global"> <div className="top-title-global">
<div className="top-title-left"></div> <div className="top-title-left"></div>
<div className="top-title-center"><span>{basicInfo?.areaName}</span></div> <div className="top-title-center"><span>{basicInfo?.areaName}</span></div>
<div className="top-title-right"><div className={basicInfo?.status == "1" ? "ing-status" : "end-status"}>{bidStatusMap[basicInfo?.status]}</div></div> <div className="top-title-right">{basicInfo?.status && <div className={basicInfo?.status == "1" ? "ing-status" : "end-status"}>{bidStatusMap[basicInfo?.status]}</div>}</div>
</div> </div>
<div><a className="top-back" onClick={() => previousClick()}></a></div> <div><a className="top-back" onClick={() => previousClick()}></a></div>
</Col> </Col>
@ -367,7 +367,7 @@ export default (props: any) => {
<Col span={18}> <Col span={18}>
<div className="answer-supplier"> <div className="answer-supplier">
<span>{basicInfo?.supplierLength}</span> <span>{basicInfo?.supplierLength}</span>
<Tooltip placement="topLeft" title={<>{basicInfo?.sectionPayerList?.map((item: any) => <p key={item.sectionName}>{item.sectionName}{item.payerNumber}{item.payerNames.join("、")}</p>)}</>} visible={visible} color="rgba(4,20,47,0.85)" overlayInnerStyle={{ width: '250%' }} overlayClassName="screen-tag"> <Tooltip placement="topLeft" title={<>{basicInfo?.sectionPayerList?.map((item: any, index: any) => <p key={index}>{item.sectionName}{item.payerNumber}{item.payerNames.join("、")}</p>)}</>} visible={visible} color="rgba(4,20,47,0.85)" overlayInnerStyle={{ width: '250%' }} overlayClassName="screen-tag">
<span>{basicInfo?.sectionPayerList?.[0]?.payerNames.slice(0, 5).join("、")}<a onMouseEnter={() => setVisible(true)} onMouseLeave={() => setVisible(false)}></a></span> <span>{basicInfo?.sectionPayerList?.[0]?.payerNames.slice(0, 5).join("、")}<a onMouseEnter={() => setVisible(true)} onMouseLeave={() => setVisible(false)}></a></span>
</Tooltip> </Tooltip>
</div> </div>
@ -381,7 +381,7 @@ export default (props: any) => {
<div className="left-monitor-content"> <div className="left-monitor-content">
<div className="left-menu"> <div className="left-menu">
<div className="left-menu-content"> <div className="left-menu-content">
{caremaList.map(item => <div className={cameraSelect == item.id ? "left-menu-btn left-menu-btn-select" : "left-menu-btn"} onClick={() => onCaremaPlay(item)} key={item.id}>{item.deviceName}</div>)} {caremaList.map((item, index) => <div className={cameraSelect == item.id ? "left-menu-btn left-menu-btn-select" : "left-menu-btn"} onClick={() => onCaremaPlay(item)} key={index}>{item.deviceName}</div>)}
</div> </div>
</div> </div>
<div className="right-content-c"> <div className="right-content-c">
@ -400,7 +400,7 @@ export default (props: any) => {
{btnSelect == "0" ? ( {btnSelect == "0" ? (
<div className="stranger-list"> <div className="stranger-list">
{basicInfo?.status == "2" {basicInfo?.status == "2"
? backStrangerList.slice(0, 5).map((item: any, index: any) => ( ? backStrangerList.map((item: any, index: any) => (
<div className="stranger-list-card" key={index}> <div className="stranger-list-card" key={index}>
<div> <div>
<p><span></span>{item.createDate}</p> <p><span></span>{item.createDate}</p>

View File

@ -259,23 +259,52 @@
text-align: center; text-align: center;
.stranger-list { .stranger-list {
height: calc(100% - 76px); // height: calc(100% - 76px);
height: calc(100% - 36px);
overflow-y: auto;
overflow-x: hidden;
margin-top: 4px;
.stranger-list-card { .stranger-list-card {
// border: 1px solid #2B5093; // border: 1px solid #2B5093;
// background-color: #051666; // background-color: #051666;
border-bottom: 1px solid #5c6aa2; border-bottom: 1px solid #5c6aa2;
height: 20%; height: 20%;
margin-top: 8px; // margin-top: 8px;
padding: 8px; padding: 8px;
color: #99f6ff; color: #99f6ff;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
text-align: left;
&>div>p>span { &>div>p>span {
color: #fff; color: #fff;
} }
} }
/*设置宽度,轨道颜色*/
&::-webkit-scrollbar {
width: 6px;
height: 6px;
// padding-right: 3px;
}
/*滚动条*/
&::-webkit-scrollbar-thumb {
background: #b9bfd7;
border-radius: 10px;
}
/*增加悬停样式*/
&::-webkit-scrollbar-thumb:hover {
background: #dcdfeb;
}
/*滚动轨道样式*/
&::-webkit-scrollbar-track-piece {
background: #505e9a;
border-radius: 3px;
}
} }
.ant-drawer-close { .ant-drawer-close {