free-sun
/
GovernmentDataResourceCenter
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

（*）一体化大屏首页适应优化

master
peng.peng 2 years ago
parent
76ad6fe7f8
commit
6529270731
3 changed files with 166 additions and 152 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 30
      super-screen/client/src/sections/homePage/containers/homePage.js
  2. 287
      super-screen/client/src/sections/homePage/containers/style.less
  3. 1
      super-screen/client/src/sections/water-prevention/components/style.less

30
super-screen/client/src/sections/homePage/containers/homePage.js
View File

@ -2,24 +2,30 @@ import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { push } from 'react-router-redux'; import { push } from 'react-router-redux';
import './style.less' import './style.less'
import { FullScreenContainer } from '$components'
function homePage(props) { function homePage(props) {
const { dispatch } = props; const { dispatch } = props;
const childStyle = { height: '32%', color: '#fff', marginBottom: 17 } const childStyle = { height: '32%', color: '#fff', marginBottom: 17 }
const cardHeight = document.body.clientHeight * 0.896 * 0.32 const cardHeight = document.body.clientHeight * 0.896 * 0.32
const cardContentHeight = cardHeight - 42 - 13 const cardContentHeight = cardHeight - 42 - 13
return <div className='enter_homepage'>
<div className='_enter_title'></div> return <div className='enter_container'>
<div className='_enter_row1'> <FullScreenContainer>
<div className='_row1_item' onClick={() => { window.open('https://superchangnan.anxinyun.cn/') }}></div> <div className='enter_homepage'>
</div> <div className='_enter_title'></div>
<div className='_enter_row2'> <div className='_enter_row1'>
<div className='_row2_item1' onClick={() => { <div className='_row1_item' onClick={() => { window.open('https://superchangnan.anxinyun.cn/') }}></div>
dispatch(push('/waterprevention')) </div>
}}></div> <div className='_enter_row2'>
<div className='_row2_item2' onClick={() => { dispatch(push('/communitysafty')) }}></div> <div className='_row2_item1' onClick={() => {
<div className='_row2_item3' onClick={() => { dispatch(push('/firecontrol')) }}></div> dispatch(push('/waterprevention'))
</div> }}></div>
<div className='_row2_item2' onClick={() => { dispatch(push('/communitysafty')) }}></div>
<div className='_row2_item3' onClick={() => { dispatch(push('/firecontrol')) }}></div>
</div>
</div>
</FullScreenContainer>
</div> </div>
} }

287
super-screen/client/src/sections/homePage/containers/style.less
View File

@ -1,4 +1,4 @@
.enter_homepage { .enter_container {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
@ -7,174 +7,181 @@
background: url('/assets/images/homepage/enter/bg.gif') !important; background: url('/assets/images/homepage/enter/bg.gif') !important;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 5%;
._enter_row1 {
height: 302px;
._row1_item {
width: 1434px;
height: 241px;
// opacity: 0.8;
background: url('/assets/images/homepage/enter/row1.png');
background-repeat: no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
._row1_item:hover {
width: 1434px;
height: 302.6px;
background: url('/assets/images/homepage/enter/row1-select.png');
background-repeat: no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
}
._enter_row2 { .enter_homepage {
height: 427px;
display: flex;
width: 100%; width: 100%;
padding-left: 4%; height: 100%;
overflow: hidden;
._row2_item1 { display: flex;
width: 454px; flex-direction: column;
height: 371px; justify-content: center;
// opacity: 0.8; align-items: center;
background: url('/assets/images/homepage/enter/row2-1.png'); padding-top: 5%;
background-repeat: no-repeat;
background-size: 100% 100%; ._enter_row1 {
cursor: pointer; height: 302px;
margin-left: 60px;
._row1_item {
width: 1434px;
height: 241px;
// opacity: 0.8;
background: url('/assets/images/homepage/enter/row1.png');
background-repeat: no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
._row1_item:hover {
width: 1434px;
height: 302.6px;
background: url('/assets/images/homepage/enter/row1-select.png');
background-repeat: no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
} }
._row2_item1:hover { ._enter_row2 {
background: url('/assets/images/homepage/enter/row2-1-select.png'); height: 427px;
background-repeat: no-repeat; display: flex;
background-size: 100% 100%; width: 100%;
cursor: pointer; padding-left: 4%;
._row2_item1 {
width: 454px;
height: 371px;
// opacity: 0.8;
background: url('/assets/images/homepage/enter/row2-1.png');
background-repeat: no-repeat;
background-size: 100% 100%;
cursor: pointer;
margin-left: 60px;
}
._row2_item1:hover {
background: url('/assets/images/homepage/enter/row2-1-select.png');
background-repeat: no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
._row2_item2 {
margin-left: 60px;
width: 454px;
height: 371px;
// opacity: 0.8;
background: url('/assets/images/homepage/enter/row2-2.png');
background-repeat: no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
._row2_item2:hover {
background: url('/assets/images/homepage/enter/row2-2-select.png');
background-repeat: no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
._row2_item3 {
margin-left: 60px;
width: 454px;
height: 371px;
// opacity: 0.8;
background: url('/assets/images/homepage/enter/row2-3.png');
background-repeat: no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
._row2_item3:hover {
background: url('/assets/images/homepage/enter/row2-3-select.png');
background-repeat: no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
} }
._row2_item2 { ._enter_title {
margin-left: 60px; position: absolute;
width: 454px; top: 4%;
height: 371px; left: 3%;
// opacity: 0.8; width: 575.35px;
background: url('/assets/images/homepage/enter/row2-2.png'); height: 78px;
background: url('/assets/images/homepage/enter/title.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
cursor: pointer;
} }
._row2_item2:hover { ._title {
background: url('/assets/images/homepage/enter/row2-2-select.png'); width: 100%;
height: 88px;
background: url('/assets/images/homepage/bigscreen/top.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
cursor: pointer;
} }
._row2_item3 { ._exit {
margin-left: 60px; position: absolute;
width: 454px; right: 60px;
height: 371px; top: 38px;
// opacity: 0.8;
background: url('/assets/images/homepage/enter/row2-3.png');
background-repeat: no-repeat;
background-size: 100% 100%;
cursor: pointer; cursor: pointer;
color: #C8F0FF;
display: flex;
._icon {
display: inline-block;
width: 28px;
height: 28px;
background: url('/assets/images/homepage/bigscreen/exit.png');
background-repeat: no-repeat;
background-size: 100% 100%;
margin-right: 3px;
}
} }
._row2_item3:hover { .homepage-left {
background: url('/assets/images/homepage/enter/row2-3-select.png'); width: 21.8%;
background-repeat: no-repeat; height: 89.6%;
background-size: 100% 100%; position: absolute;
cursor: pointer; top: 8.2%;
z-index: 300;
} }
}
._enter_title {
position: absolute;
top: 4%;
left: 3%;
width: 575.35px;
height: 78px;
background: url('/assets/images/homepage/enter/title.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
._title {
width: 100%;
height: 88px;
background: url('/assets/images/homepage/bigscreen/top.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
._exit { .homepage-center {
position: absolute; width: 49.16%;
right: 60px; height: 89.6%;
top: 38px; position: absolute;
cursor: pointer; bottom: 2.4%;
color: #C8F0FF; left: 25.5%;
display: flex; padding-left: 16px;
padding-right: 16px;
._icon { z-index: 400;
display: inline-block;
width: 28px; ._top {
height: 28px; margin-top: 5%;
background: url('/assets/images/homepage/bigscreen/exit.png'); height: calc(100% - 200px);
background-repeat: no-repeat; background: url('/assets/images/homepage/bigscreen/centerbg.png');
background-size: 100% 100%; background-repeat: no-repeat;
margin-right: 3px; background-size: 100% 100%;
position: relative;
}
} }
}
.homepage-left {
width: 21.8%;
height: 89.6%;
position: absolute;
top: 8.2%;
z-index: 300;
}
.homepage-center { .homepage-left-left {
width: 49.16%; left: 48px;
height: 89.6%;
position: absolute;
bottom: 2.4%;
left: 25.5%;
padding-left: 16px;
padding-right: 16px;
z-index: 400;
._top {
margin-top: 5%;
height: calc(100% - 200px);
background: url('/assets/images/homepage/bigscreen/centerbg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
} }
}
.homepage-left-left { .homepage-left-right {
left: 48px; right: 48px;
} }
.homepage-left-right {
right: 48px;
} }
} }
.list { .list {
list-style: none; list-style: none;
height: 100%; height: 100%;

1
super-screen/client/src/sections/water-prevention/components/style.less
View File

@ -785,6 +785,7 @@
justify-content: center; justify-content: center;
.doc_img { .doc_img {
margin-top: 11px;
width: 361.63px; width: 361.63px;
height: 242.49px; height: 242.49px;
background: url(/assets/images/homepage/water/doc.png); background: url(/assets/images/homepage/water/doc.png);

Write Preview
Loading…
Cancel
Save