Browse Source

UI样式修改

master
wenlele 1 year ago
parent
commit
e17f547dfa
  1. BIN
      super-screen/client/assets/images/homepage/fire/arm.png
  2. BIN
      super-screen/client/assets/images/homepage/fire/fire.png
  3. BIN
      super-screen/client/assets/images/homepage/fire/medical.png
  4. BIN
      super-screen/client/assets/images/homepage/fire/refuge.png
  5. BIN
      super-screen/client/assets/images/homepage/fire/supply.png
  6. 108
      super-screen/client/src/sections/water-prevention/components/emergency-right-top.js
  7. 12
      super-screen/client/src/sections/water-prevention/components/style.less

BIN
super-screen/client/assets/images/homepage/fire/arm.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

BIN
super-screen/client/assets/images/homepage/fire/fire.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

BIN
super-screen/client/assets/images/homepage/fire/medical.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

BIN
super-screen/client/assets/images/homepage/fire/refuge.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

BIN
super-screen/client/assets/images/homepage/fire/supply.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

108
super-screen/client/src/sections/water-prevention/components/emergency-right-top.js

@ -3,58 +3,62 @@ import { Box, AutoRollComponent } from '$components';
import { getName, getPhone } from '$utils'; import { getName, getPhone } from '$utils';
import './style.less'; import './style.less';
function CitySafty(props) { function CitySafty (props) {
const { emengencyTab, emergencyList } = props; const { emengencyTab, emergencyList } = props;
const tab_name = { const tab_name = {
yjwz: { name: '应急物资', items: [{ key: 'street', name: '乡镇街道' }, { key: 'location', name: '仓库地址' }, { key: 'responsiblePerson', name: '联系人' }, { key: 'phone', name: '联系电话' }, { key: 'materialDescription', name: '物资数量' }] }, yjwz: { name: '应急物资', subscript: "物资", img: 'supply', items: [{ key: 'street', name: '乡镇街道' }, { key: 'location', name: '仓库地址' }, { key: 'responsiblePerson', name: '联系人' }, { key: 'phone', name: '联系电话' }, { key: 'materialDescription', name: '物资数量' }] },
xfjy: { name: '消防救援', items: [{ key: 'teamName', name: '队伍名称' }, { key: 'supervisoryUnit', name: '主管单位' }, { key: 'emergencyContactPhone', name: '联系人' }, { key: 'emergencyContactPhone', name: '联系电话' }, { key: 'totalMembers', name: '总人数' }, { key: 'baseAddress', name: '驻地地址' }] }, xfjy: { name: '消防救援', subscript: "队伍", img: "fire", items: [{ key: 'teamName', name: '队伍名称' }, { key: 'supervisoryUnit', name: '主管单位' }, { key: 'emergencyContactPhone', name: '联系人' }, { key: 'emergencyContactPhone', name: '联系电话' }, { key: 'totalMembers', name: '总人数' }, { key: 'baseAddress', name: '驻地地址' }] },
rmwzb: { name: '人民武装部', items: [{ key: 'teamName', name: '队伍名称' }, { key: 'supervisoryUnit', name: '主管单位' }, { key: 'emergencyContactPhone', name: '联系人' }, { key: 'emergencyContactPhone', name: '联系电话' }, { key: 'totalMembers', name: '总人数' }, { key: 'baseAddress', name: '驻地地址' }] }, rmwzb: { name: '人民武装部', subscript: "队伍", img: "arm", items: [{ key: 'teamName', name: '队伍名称' }, { key: 'supervisoryUnit', name: '主管单位' }, { key: 'emergencyContactPhone', name: '联系人' }, { key: 'emergencyContactPhone', name: '联系电话' }, { key: 'totalMembers', name: '总人数' }, { key: 'baseAddress', name: '驻地地址' }] },
yljy: { name: '医疗救援', items: [{ key: 'teamName', name: '队伍名称' }, { key: 'supervisoryUnit', name: '主管单位' }, { key: 'emergencyContactPhone', name: '联系人' }, { key: 'emergencyContactPhone', name: '联系电话' }, { key: 'totalMembers', name: '总人数' }, { key: 'baseAddress', name: '驻地地址' }] }, yljy: { name: '医疗救援', subscript: "队伍", img: "medical", items: [{ key: 'teamName', name: '队伍名称' }, { key: 'supervisoryUnit', name: '主管单位' }, { key: 'emergencyContactPhone', name: '联系人' }, { key: 'emergencyContactPhone', name: '联系电话' }, { key: 'totalMembers', name: '总人数' }, { key: 'baseAddress', name: '驻地地址' }] },
yjbns: { name: '应急避难场所', items: [{ key: 'shelterName', name: '场所全称' }, { key: 'address', name: '场所地址' }, { key: 'eventType', name: '事件类型' }, { key: 'capacity', name: '容纳人数' }] }, yjbns: { name: '应急避难场所', subscript: "场所", img: "refuge", items: [{ key: 'shelterName', name: '场所全称' }, { key: 'address', name: '场所地址' }, { key: 'eventType', name: '事件类型' }, { key: 'capacity', name: '容纳人数' }] },
} }
const getContent = () => { const getContent = () => {
return <div className='water_item_right_container'> return <div className='water_item_right_container'>
{ {
emergencyList[emengencyTab]?.map((s, index) => { emergencyList[emengencyTab]?.map((s, index) => {
return <div className='water_right_item'> return <div className='water_right_item'>
<div className='item_left'></div> <div className='item_left' style={{
<div className='item_right'> width: 50, height: 50,
{ background: `url(/assets/images/homepage/fire/${tab_name[emengencyTab]?.img}.png) no-repeat`,
tab_name[emengencyTab]?.items?.map(x => { backgroundSize: '100% 100%'
let value = s[x.key] || '--' }}></div>
if (x.name == '联系人' && s[x.key]) { <div className='item_right'>
if (x.key == 'emergencyContactPhone') { {
value = value.substring(0, value.length - 11) tab_name[emengencyTab]?.items?.map(x => {
} let value = s[x.key] || '--'
value = getName(value) if (x.name == '联系人' && s[x.key]) {
} else if (x.name == '联系电话' && s[x.key]) { if (x.key == 'emergencyContactPhone') {
if (x.key == 'emergencyContactPhone') { value = value.substring(0, value.length - 11)
value = value.substring(value.length - 11, value.length) }
} value = getName(value)
value = getPhone(value) } else if (x.name == '联系电话' && s[x.key]) {
} if (x.key == 'emergencyContactPhone') {
return <div className='flex-row'> value = value.substring(value.length - 11, value.length)
<div className='item_right_left'>{x.name}</div> }
<div className='item_right_right'>{value} value = getPhone(value)
{x.name.indexOf('人数') > -1 && <span style={{ marginLeft: 30 }}></span>} }
</div> return <div className='flex-row'>
</div> <div className='item_right_left'>{x.name}</div>
}) <div className='item_right_right'>{value}
} {x.name.indexOf('人数') > -1 && <span style={{ marginLeft: 30 }}></span>}
</div> </div>
<div className='position_bg'><div className='position_icon' /> <span>场所{index + 1}</span> </div> </div>
</div> })
}) }
} </div>
<div className='position_bg'><div className='position_icon' /> <span>{tab_name[emengencyTab]?.subscript}{index + 1}</span> </div>
</div> </div>
} })
}
return <Box title={tab_name[emengencyTab]?.name} >
<AutoRollComponent key={emengencyTab} canScroll={emergencyList[emengencyTab]?.length > 3} content={getContent()} divHeight={860} divId={`fire-left-bottom${emengencyTab}`} /> </div>
</Box> }
return <Box title={tab_name[emengencyTab]?.name} >
<AutoRollComponent key={emengencyTab} canScroll={emergencyList[emengencyTab]?.length > 3} content={getContent()} divHeight={860} divId={`fire-left-bottom${emengencyTab}`} />
</Box>
} }
export default CitySafty; export default CitySafty;

12
super-screen/client/src/sections/water-prevention/components/style.less

@ -21,12 +21,12 @@
position: relative; position: relative;
margin-bottom: 20px; margin-bottom: 20px;
.item_left { // .item_left {
width: 50px; // width: 50px;
height: 50px; // height: 50px;
background: url('/assets/images/homepage/fire/iconhome.png') no-repeat; // background: url('/assets/images/homepage/fire/iconhome.png') no-repeat;
background-size: 100% 100%; // background-size: 100% 100%;
} // }
.item_right { .item_right {
width: calc(100% - 100px); width: calc(100% - 100px);

Loading…
Cancel
Save