Skip to content

J
jinfa-platform
Commit b76c04ec authored by Bill's avatar Bill
Browse files
Options

fix: 修改首页自适应

parent e9a8edc4
Hide whitespace changes
Inline Side-by-side
Showing with 159 additions and 95 deletions
src/pages/home/components/AdvertisementSpace/index.less
View file @ b76c04ec
......@@ -6,7 +6,7 @@
// background-color: #fff;
// border-radius: 8px;
// .header {
// margin-bottom: 24px;
// .title {
// font-size: 18px;
......@@ -39,10 +39,10 @@
// }
// }
.advertisementSpace {
width: 386px;
margin-bottom: 16px;
height: 217px;
.img {
width: 100%;
height: 100%;
}
}
\ No newline at end of file
}
src/pages/home/components/AdvertisementSpace/index.tsx
View file @ b76c04ec
......@@ -32,9 +32,9 @@ const AdvertisementContainer = () => {
{
data.map((item, key) => {
return (
<AdvertisementSpace
urlLink={item.link}
imageUrl={item.imageUrl}
<AdvertisementSpace
urlLink={item.link}
imageUrl={item.imageUrl}
key={key}
/>
)
......@@ -53,4 +53,4 @@ const AdvertisementSpace: React.FC<Iprops> = (props) => {
</div>
)
}
export default AdvertisementContainer
\ No newline at end of file
export default AdvertisementContainer
src/pages/home/components/LatestAnnounces/index.less
View file @ b76c04ec
......@@ -2,13 +2,14 @@
padding: 24px;
background-color: #fff;
border-radius: 8px;
height: 361px;
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
.title {
color: #303133;
color: #303133;
font-size: 16px;
}
.nextOrPreview {
......@@ -25,6 +26,10 @@
display: flex;
flex-direction: row;
align-items: center;
&:last-of-type {
margin-bottom: 0px;
}
.date {
margin-right: 16px;
padding: 2px 6px;
......@@ -42,6 +47,13 @@
}
.content {
cursor: pointer;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
}
}
......@@ -59,7 +71,7 @@
.title {
flex: 1;
text-align: center;
font-size: 20px;
font-size: 20px;
font-weight: 500;
color: #303133;
}
......@@ -83,4 +95,4 @@
justify-content: center;
align-items: center;
}
}
\ No newline at end of file
}
src/pages/home/components/LatestAnnounces/index.tsx
View file @ b76c04ec
......@@ -17,7 +17,7 @@ const LatestAnnouces: React.FC = () => {
current: 1,
pageSize: 5
})
const getList = (params) => {
setLoading(true);
PublicApi.getManageContentNoticeFindNewestNotice(params)
......@@ -29,7 +29,7 @@ const LatestAnnouces: React.FC = () => {
}
})
}
useEffect(() => {
getList(pagination);
}, [])
......@@ -86,7 +86,7 @@ const LatestAnnouces: React.FC = () => {
})
}
</div>
<Modal
<Modal
width={800}
visible={visible}
footer={false}
......@@ -106,10 +106,10 @@ const LatestAnnouces: React.FC = () => {
<Button onClick={() => setVisible(false)} type={"primary"}>我知道了</Button>
</div>
</div>
</Modal>
</div>
)
}
export default LatestAnnouces
\ No newline at end of file
export default LatestAnnouces
src/pages/home/components/RecentVisit/index.less
View file @ b76c04ec
......@@ -2,6 +2,7 @@
background-color: #fff;
padding: 24px;
border-radius: 8px;
height: 235px;
.header {
.title {
......
src/pages/home/index.less
View file @ b76c04ec
.userGuaid {
margin-bottom: 24px;
.grid_container {
display: grid;
}
.ability {
margin-top: 16px;
}
.controller {
background-color: @main-color;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
color: #fff;
display: flex;
flex-direction: row;
margin-left: auto;
cursor: pointer;
.main {
// display: flex;
// flex-direction: row;
.mainSide {
// flex: 1;
// display: flex;
// flex-direction: column;
.ability {
margin-top: 24px;
}
.icon {
font-size: 22px;
}
.text {
margin-left: 8px;
}
}
.advertise {
margin-top: 16px;
}
.rightSide {
.actions {
display: flex;
}
@media (min-width: 1600px) {
.grid_container {
// display: grid;
// grid-template-columns: 75% 25%;
// grid-template-columns: repeat(24, 1fr);
// grid-auto-flow: column dense;
// grid-column-gap: 16px;
.announce {
margin-top: 24px;
}
.top {
display: grid;
grid-template-columns: repeat(24, 1fr);
grid-column-gap: 16px;
grid-row-gap: 16px;
.controller {
background-color: @main-color;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
color: #fff;
display: flex;
flex-direction: row;
margin-left: auto;
cursor: pointer;
.icon {
font-size: 22px;
.userCenter {
grid-column-start: 1;
grid-column-end: 19;
grid-row-start: 1;
}
.actions {
grid-column-start: 19;
grid-column-end: 25;
grid-row-start: 1;
}
.text {
margin-left: 8px;
.announce {
grid-column-start: 19;
grid-column-end: 25;
margin-top: -200px;
}
.recentVisit {
grid-column-start: 19;
grid-column-end: 25;
}
}
}
.bottom {
display: grid;
grid-template-columns: repeat(24, 1fr);
grid-column-gap: 16px;
grid-row-gap: 16px;
.otherCenter {
grid-column-start: 1;
grid-column-end: 19;
grid-row-start: 1;
margin-top: -425px;
}
.anyQuestion {
grid-column-start: 19;
grid-column-end: 25;
margin-top: 16px;
}
.advertise {
grid-column-start: 19;
grid-column-end: 25;
}
}
}
@media (max-width: 1599px) {
.userCenter {
margin: 16px 0;
}
.recentVisit {
margin-top: 16px;
}
}
src/pages/home/index.tsx
View file @ b76c04ec
......@@ -57,31 +57,9 @@ const Home: React.FC<{}> = () => {
<div className={styles.userGuaid} style={{display: visible ? 'none': 'none'}}>
<UseGuaid/>
</div>
<div className={styles.main}>
<Row gutter={[16,16]}>
<Col className={styles.mainSide} sm={24} md={24} lg={24} xl={16} xxl={18}>
<div>
<UserCenter />
</div>
{
layout.map((item) => {
const RenderComponent = ComponentSelect[item.name]
return (
<div
className={styles.ability}
style={{order: item.sort, display: (item.isShow ? 'block' : 'none')}}
key={item.code}
>
{
RenderComponent &&
<RenderComponent />
}
</div>
)
})
}
</Col>
<Col className={styles.rightSide} sm={24} md={24} lg={24} xl={8} xxl={6}>
<div className={styles.grid_container}>
<div className={styles.top}>
<div className={styles.actions}>
<Row gutter={24}>
<Col span={12}>
<CustomWorkBench
......@@ -95,21 +73,46 @@ const Home: React.FC<{}> = () => {
</div>
</Col>
</Row>
<div className={styles.announce}>
<LatestAnnounce />
</div>
<div className={styles.announce}>
<RecentVisit />
</div>
<div className={styles.announce}>
<AnyQuestion />
</div>
<div className={styles.announce}>
<AdvertisementContainer />
</div>
</Col>
</Row>
</div>
<div className={styles.userCenter}>
<UserCenter />
</div>
<div className={styles.announce}>
<LatestAnnounce />
</div>
<div className={styles.recentVisit}>
<RecentVisit />
</div>
</div>
<div className={styles.bottom}>
<div className={styles.otherCenter}>
{
layout.map((item) => {
const RenderComponent = ComponentSelect[item.name]
return (
<div
className={styles.ability}
style={{order: item.sort, display: (item.isShow ? 'block' : 'none')}}
key={item.code}
>
{
RenderComponent &&
<RenderComponent />
}
</div>
)
})
}
</div>
<div className={styles.anyQuestion}>
<AnyQuestion />
</div>
<div className={styles.advertise}>
<AdvertisementContainer />
</div>
</div>
</div>
</>
</PageHeaderWrapper>
)
......
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