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

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

master
peng.peng 1 year 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
Split 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 { push } from 'react-router-redux';
import './style.less'
import { FullScreenContainer } from '$components'
function homePage(props) {
const { dispatch } = props;
const childStyle = { height: '32%', color: '#fff', marginBottom: 17 }
const cardHeight = document.body.clientHeight * 0.896 * 0.32
const cardContentHeight = cardHeight - 42 - 13
return <div className='enter_homepage'>
<div className='_enter_title'></div>
<div className='_enter_row1'>
<div className='_row1_item' onClick={() => { window.open('https://superchangnan.anxinyun.cn/') }}></div>
</div>
<div className='_enter_row2'>
<div className='_row2_item1' onClick={() => {
dispatch(push('/waterprevention'))
}}></div>
<div className='_row2_item2' onClick={() => { dispatch(push('/communitysafty')) }}></div>
<div className='_row2_item3' onClick={() => { dispatch(push('/firecontrol')) }}></div>
</div>
return <div className='enter_container'>
<FullScreenContainer>
<div className='enter_homepage'>
<div className='_enter_title'></div>
<div className='_enter_row1'>
<div className='_row1_item' onClick={() => { window.open('https://superchangnan.anxinyun.cn/') }}></div>
</div>
<div className='_enter_row2'>
<div className='_row2_item1' onClick={() => {
dispatch(push('/waterprevention'))
}}></div>
<div className='_row2_item2' onClick={() => { dispatch(push('/communitysafty')) }}></div>
<div className='_row2_item3' onClick={() => { dispatch(push('/firecontrol')) }}></div>
</div>
</div>
</FullScreenContainer>
</div>
}

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

@ -1,4 +1,4 @@
.enter_homepage {
.enter_container {
width: 100%;
height: 100%;
position: absolute;
@ -7,174 +7,181 @@
background: url('/assets/images/homepage/enter/bg.gif') !important;
background-repeat: no-repeat;
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 {
height: 427px;
display: flex;
.enter_homepage {
width: 100%;
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;
height: 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;
}
}
._row2_item1:hover {
background: url('/assets/images/homepage/enter/row2-1-select.png');
background-repeat: no-repeat;
background-size: 100% 100%;
cursor: pointer;
._enter_row2 {
height: 427px;
display: flex;
width: 100%;
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 {
margin-left: 60px;
width: 454px;
height: 371px;
// opacity: 0.8;
background: url('/assets/images/homepage/enter/row2-2.png');
._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%;
cursor: pointer;
}
._row2_item2:hover {
background: url('/assets/images/homepage/enter/row2-2-select.png');
._title {
width: 100%;
height: 88px;
background: url('/assets/images/homepage/bigscreen/top.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%;
._exit {
position: absolute;
right: 60px;
top: 38px;
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 {
background: url('/assets/images/homepage/enter/row2-3-select.png');
background-repeat: no-repeat;
background-size: 100% 100%;
cursor: pointer;
.homepage-left {
width: 21.8%;
height: 89.6%;
position: absolute;
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 {
position: absolute;
right: 60px;
top: 38px;
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;
.homepage-center {
width: 49.16%;
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 {
width: 21.8%;
height: 89.6%;
position: absolute;
top: 8.2%;
z-index: 300;
}
.homepage-center {
width: 49.16%;
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 {
left: 48px;
}
}
.homepage-left-left {
left: 48px;
}
.homepage-left-right {
right: 48px;
}
.homepage-left-right {
right: 48px;
}
}
.list {
list-style: none;
height: 100%;

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

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

Write Preview
Loading…
Cancel
Save