Skip to content

J
jinfa-platform
Commit 9c4c89a7 authored by 前端-黄佳鑫's avatar 前端-黄佳鑫
Browse files
Options

✨ feat(): 优化弹窗样式

parent 452cb24f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 262 additions and 51 deletions
src/pages/transaction/purchaseAbility/components/detailDrawer/index.less
View file @ 9c4c89a7
......@@ -42,3 +42,106 @@
}
}
}
.container {
display: flex;
height: 100%;
overflow: hidden;
.menu {
width: 200px;
height: 100%;
border-right: 1px solid #F4F5F7;
.menuItem {
padding: 18px 16px;
color: #606266;
}
.active {
position: relative;
font-weight: bold;
color: #303133;
&::after {
content: '';
height: 24px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border-left: 3px solid @main-color;
transform: scaleY(1);
opacity: 1;
transition: transform .15s cubic-bezier(.645,.045,.355,1),opacity .15s cubic-bezier(.645,.045,.355,1);
}
}
}
.content {
width: 100%;
padding: 24px 16px;
overflow-y: scroll;
.anchor {
color: #909399;
font-size: 14px;
position: relative;
padding-left: 6px;
margin-bottom: 16px;
&::after {
content: '';
height: 14px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border-left: 2px solid @main-color;
transform: scaleY(1);
opacity: 1;
transition: transform .15s cubic-bezier(.645,.045,.355,1),opacity .15s cubic-bezier(.645,.045,.355,1);
}
}
.upload_item {
padding: 5px 8px;
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: space-between;
// background-color: #FAFBFC;
.upload_left {
display: flex;
align-items: center;
color: #303133;
:global {
.anticon-file-word {
color: #4279df;
font-size: 20px;
margin-right: 8px;
}
}
}
.upload_right {
color: @main-color;
cursor: pointer;
:global {
.anticon-delete {
margin-left: 19px;
color: #C0C4CC;
}
}
}
}
.list {
display: flex;
h5 {
margin-bottom: 2em;
}
.listLable {
flex: 0 0 25%;
color: #909399;
}
}
}
}
src/pages/transaction/purchaseAbility/components/detailDrawer/index.tsx
View file @ 9c4c89a7
import React from 'react';
import React, { useState } from 'react';
import { Drawer, Anchor, Row, Col, Divider, Typography } from 'antd';
import style from './index.less';
import { LinkOutlined } from '@ant-design/icons';
import cx from 'classnames';
const { Link } = Anchor;
......@@ -15,6 +16,25 @@ interface IProps {
const DetailDrawer: React.FC<IProps> = (props: any) => {
const { dataSource, visible, title, onOk, onCalcel } = props;
const [isSeleted, setIsSeleted] = useState<number>(1);
const [menu] = useState([
{ id: 1, label: '基本信息' },
{ id: 2, label: '采购数量' },
{ id: 3, label: '附件' },
])
const handleClick = (id, anchorName) => {
setIsSeleted(id)
if (anchorName) {
let anchorElement = document.getElementById(anchorName);
if (anchorElement) {
anchorElement.scrollIntoView(
{ behavior: 'smooth' }
);
}
}
}
return (
<Drawer
title={title}
......@@ -24,59 +44,50 @@ const DetailDrawer: React.FC<IProps> = (props: any) => {
width="40%"
className={style.drawerBox}
>
<Row>
<Col span={6}>
<Anchor>
{dataSource.map((item, index) => (
<Link key={`link${index + 1}`} href={`#link${index + 1}`} title={item.linkTitle} />
))}
</Anchor>
</Col>
<Col
span={18}
style={{
height: '100%',
padding: '16px',
overflowY: 'scroll',
borderLeft: '1px solid #F4F5F7',
}}
>
<div className={style.container}>
<div className={style.menu}>
{menu.map(item => (
<div key={item.id} className={cx(style.menuItem, isSeleted === item.id && style.active)} onClick={() => handleClick(item.id, `menu${item.id}`)}>
{item.label}
</div>
))}
</div>
<div className={style.content}>
{dataSource.map((item, index) => (
<div key={`link${index + 1}`} id={`#link${index + 1}`}>
<div className={style.affixTitle}>
<Divider type="vertical" className={style.dividerStyle} />
{item.linkTitle}
</div>
{item.linkContent.map((items, keys) => (
<div key={`content${keys + 1}`} className={style.list}>
<h5 className={style.listLable} style={{ flex: '0 0 100px' }}>{items.label}：</h5>
{!items.file && <h5 className={style.listContent}>{items.content}</h5>}
{
items.file
&& (
<div className={style.upload_data}>
{items.content.length > 0 && items.content.map((v, index) => (
<div key={index} className={style.upload_item}>
<div className={style.upload_left}>
<Typography.Link
target="_blank"
key={`link_${index + 1}`}
href={`/api/contract/contractTemplate/downloadContract?contractName=${v.name}&contractUrl=${v.url}`}
>
<LinkOutlined style={{ marginRight: '5px' }} />
{v.name}
</Typography.Link>
<div key={`link${index + 1}`} id={`menu${index + 1}`}>
<div className={style.anchor}>{item.linkTitle}</div>
<div className={style.formItem}>
{item.linkContent.map((items, keys) => (
<div key={`content${keys + 1}`} className={style.list}>
<h5 className={style.listLable} style={{ flex: '0 0 100px' }}>{items.label}：</h5>
{!items.file && <h5 className={style.listContent}>{items.content}</h5>}
{
items.file
&& (
<div className={style.upload_data}>
{items.content.length > 0 && items.content.map((v, index) => (
<div key={index} className={style.upload_item}>
<div className={style.upload_left}>
<Typography.Link
target="_blank"
key={`link_${index + 1}`}
href={`/api/contract/contractTemplate/downloadContract?contractName=${v.name}&contractUrl=${v.url}`}
>
<LinkOutlined style={{ marginRight: '5px' }} />
{v.name}
</Typography.Link>
</div>
</div>
</div>
))}
</div>
)}
</div>
))}
))}
</div>
)}
</div>
))}
</div>
</div>
))}
</Col>
</Row>
</div>
</div>
</Drawer>
)
}
......
src/pages/transaction/purchaseAbility/offter/addOffter/modal/index.less
View file @ 9c4c89a7
......@@ -88,7 +88,7 @@
color: #3877FF;
background-color: #F0F7FF;
}
.content {
.content1 {
display: flex;
flex-wrap: wrap;
padding: 0px 7px;
......@@ -112,3 +112,100 @@
border: 1px solid #F0F7FF;
}
.container {
display: flex;
height: 100%;
overflow: hidden;
.menu {
width: 200px;
height: 100%;
border-right: 1px solid #F4F5F7;
.menuItem {
padding: 18px 16px;
color: #606266;
}
.active {
position: relative;
font-weight: bold;
color: #303133;
&::after {
content: '';
height: 24px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border-left: 3px solid @main-color;
transform: scaleY(1);
opacity: 1;
transition: transform .15s cubic-bezier(.645,.045,.355,1),opacity .15s cubic-bezier(.645,.045,.355,1);
}
}
}
.content {
width: 100%;
padding: 24px 16px;
overflow-y: scroll;
.anchor {
color: #909399;
font-size: 14px;
position: relative;
padding-left: 6px;
margin: 16px 0;
&::after {
content: '';
height: 14px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border-left: 2px solid @main-color;
transform: scaleY(1);
opacity: 1;
transition: transform .15s cubic-bezier(.645,.045,.355,1),opacity .15s cubic-bezier(.645,.045,.355,1);
}
}
#menu1 {
.anchor {margin-top: 0px;}
}
.upload_item {
padding: 5px 8px;
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #FAFBFC;
.upload_left {
display: flex;
align-items: center;
color: #303133;
:global {
.anticon-file-word {
color: #4279df;
font-size: 20px;
margin-right: 8px;
}
}
}
.upload_right {
color: @main-color;
cursor: pointer;
:global {
.anticon-delete {
margin-left: 19px;
color: #C0C4CC;
}
}
}
}
}
}
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