diff --git a/super-screen/client/assets/images/homepage/bigscreen/empty.png b/super-screen/client/assets/images/homepage/bigscreen/empty.png new file mode 100644 index 0000000..463d0e9 Binary files /dev/null and b/super-screen/client/assets/images/homepage/bigscreen/empty.png differ diff --git a/super-screen/client/assets/images/homepage/bigscreen/loading.ani b/super-screen/client/assets/images/homepage/bigscreen/loading.ani new file mode 100644 index 0000000..17d9917 Binary files /dev/null and b/super-screen/client/assets/images/homepage/bigscreen/loading.ani differ diff --git a/super-screen/client/assets/images/homepage/bigscreen/loading.png b/super-screen/client/assets/images/homepage/bigscreen/loading.png new file mode 100644 index 0000000..bd000cb Binary files /dev/null and b/super-screen/client/assets/images/homepage/bigscreen/loading.png differ diff --git a/super-screen/client/assets/images/homepage/water/tab1.png b/super-screen/client/assets/images/homepage/water/tab1.png new file mode 100644 index 0000000..ffe01e3 Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/tab1.png differ diff --git a/super-screen/client/assets/images/homepage/water/tab1select.png b/super-screen/client/assets/images/homepage/water/tab1select.png new file mode 100644 index 0000000..6a0b98c Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/tab1select.png differ diff --git a/super-screen/client/assets/images/homepage/water/tab2.png b/super-screen/client/assets/images/homepage/water/tab2.png new file mode 100644 index 0000000..d52f4ed Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/tab2.png differ diff --git a/super-screen/client/assets/images/homepage/water/tab2select.png b/super-screen/client/assets/images/homepage/water/tab2select.png new file mode 100644 index 0000000..b926c58 Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/tab2select.png differ diff --git a/super-screen/client/assets/images/homepage/water/tab3.png b/super-screen/client/assets/images/homepage/water/tab3.png new file mode 100644 index 0000000..41e719a Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/tab3.png differ diff --git a/super-screen/client/assets/images/homepage/water/tab3select.png b/super-screen/client/assets/images/homepage/water/tab3select.png new file mode 100644 index 0000000..bf30980 Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/tab3select.png differ diff --git a/super-screen/client/assets/images/homepage/water/tab4.png b/super-screen/client/assets/images/homepage/water/tab4.png new file mode 100644 index 0000000..2960296 Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/tab4.png differ diff --git a/super-screen/client/assets/images/homepage/water/tab4select.png b/super-screen/client/assets/images/homepage/water/tab4select.png new file mode 100644 index 0000000..83db1b5 Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/tab4select.png differ diff --git a/super-screen/client/assets/images/homepage/water/tab5.png b/super-screen/client/assets/images/homepage/water/tab5.png new file mode 100644 index 0000000..9b08e8d Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/tab5.png differ diff --git a/super-screen/client/assets/images/homepage/water/tab5select.png b/super-screen/client/assets/images/homepage/water/tab5select.png new file mode 100644 index 0000000..c074951 Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/tab5select.png differ diff --git a/super-screen/client/src/components/public/noData.js b/super-screen/client/src/components/public/noData.js index 9b2957f..ce41722 100644 --- a/super-screen/client/src/components/public/noData.js +++ b/super-screen/client/src/components/public/noData.js @@ -2,7 +2,7 @@ import React from 'react'; import { Empty } from 'antd'; -function NoData({ height = 180, marginTop = 0 }) { +function NoData({ height = 225, marginTop = 0 }) { return ( + {/* */}
{ data.map((s, index) => { @@ -22,7 +23,6 @@ function Infrastructure(props) {
}) } - } diff --git a/super-screen/client/src/sections/community-safty/containers/gis.js b/super-screen/client/src/sections/community-safty/containers/gis.js index a53d587..07b1181 100644 --- a/super-screen/client/src/sections/community-safty/containers/gis.js +++ b/super-screen/client/src/sections/community-safty/containers/gis.js @@ -443,11 +443,7 @@ function Map(props) { return ( <> {/* 延缓加载遮罩 */} - {delay &&
-
} + {delay &&
} {/* 地图容器 */}
diff --git a/super-screen/client/src/sections/community-safty/containers/gis.less b/super-screen/client/src/sections/community-safty/containers/gis.less index 1dea2d3..9903780 100644 --- a/super-screen/client/src/sections/community-safty/containers/gis.less +++ b/super-screen/client/src/sections/community-safty/containers/gis.less @@ -516,4 +516,25 @@ color: #93ABC0; } +} + + +.map_delay { + width: 100%; + height: 100%; + left: 0; + top: 0; + z-index: 1000; + background: #000000; + position: absolute; + display: flex; + align-items: center; + justify-content: center; + + .delay_img { + background: url('/assets/images/homepage/bigscreen/loading.png') no-repeat; + background-size: 100% 100%; + width: 753px; + height: 753px; + } } \ No newline at end of file diff --git a/super-screen/client/src/sections/fire-control/containers/gis.js b/super-screen/client/src/sections/fire-control/containers/gis.js index 841fdd3..5a64d9b 100644 --- a/super-screen/client/src/sections/fire-control/containers/gis.js +++ b/super-screen/client/src/sections/fire-control/containers/gis.js @@ -564,11 +564,7 @@ function Map(props) { return ( <> {/* 延缓加载遮罩 */} - {delay &&
-
} + {delay &&
} {/* 地图容器 */}
@@ -577,8 +573,8 @@ function Map(props) { {/* 底部按钮 */} {props.propTab == 'item' && tabs.map((s, index) => { - return <> -
+
{ setTab(s.tab) s.className ? props.changeEmengencyTab(s.tab) : props.changeTab(s.tab) @@ -592,7 +588,7 @@ function Map(props) {
{/*
*/} - +
}) } diff --git a/super-screen/client/src/sections/fire-control/containers/gis.less b/super-screen/client/src/sections/fire-control/containers/gis.less index 985e59a..678c139 100644 --- a/super-screen/client/src/sections/fire-control/containers/gis.less +++ b/super-screen/client/src/sections/fire-control/containers/gis.less @@ -56,7 +56,8 @@ } .button_img_select { - background: url('/assets/images/homepage/communtity/homeselect.png'); + background: url('/assets/images/homepage/communtity/homeselect.png') no-repeat; + background-size: 100% 100%; } @@ -542,4 +543,124 @@ cursor: pointer; } } +} + +.fire-gis-button1 { + position: absolute; + left: 39%; + bottom: -5%; + font-family: YouSheBiaoTiHei; + font-size: 12px; + color: #ECF7FF; + letter-spacing: 0; + width: 76.95px; + text-align: center; + cursor: pointer; + z-index: 999; + + .button_img { + background: url('/assets/images/homepage/water/home.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + width: 76.95px; + height: 64px; + } + + .button_img_select { + background: url('/assets/images/homepage/water/homeselect.png'); + } + + +} + + +.fire-gis-button2 { + position: absolute; + left: 57%; + bottom: -5%; + font-family: YouSheBiaoTiHei; + font-size: 12px; + color: #ECF7FF; + letter-spacing: 0; + width: 76.95px; + text-align: center; + cursor: pointer; + z-index: 999; + + .button_img { + background: url('/assets/images/homepage/water/devicebutton.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + width: 76.95px; + height: 64px; + } + + .button_img_select { + background: url('/assets/images/homepage/water/devicebuttonselect.png'); + } + + +} + +.fire-gis-button { + .button_yjjg { + background: url('/assets/images/homepage/water/yjjg.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + width: 76.95px; + height: 64px; + } + + .button_yjjg_select { + background: url('/assets/images/homepage/water/yjjgselect.png'); + } + + .button_yjdw { + background: url('/assets/images/homepage/water/yjdw.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + width: 76.95px; + height: 64px; + } + + .button_yjdw_select { + background: url('/assets/images/homepage/water/yjdwselect.png'); + } + + .button_yjzj { + background: url('/assets/images/homepage/water/yjzj.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + width: 76.95px; + height: 64px; + } + + .button_yjzj_select { + background: url('/assets/images/homepage/water/yjzjselect.png'); + } + + .button_yljg { + background: url('/assets/images/homepage/water/yljg.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + width: 76.95px; + height: 64px; + } + + .button_yljg_select { + background: url('/assets/images/homepage/water/yljgselect.png'); + } + + .button_bncs { + background: url('/assets/images/homepage/water/bncs.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + width: 76.95px; + height: 64px; + } + + .button_bncs_select { + background: url('/assets/images/homepage/water/bncsselect.png'); + } + } \ No newline at end of file diff --git a/super-screen/client/src/sections/water-prevention/components/emergency-left-bottom.js b/super-screen/client/src/sections/water-prevention/components/emergency-left-bottom.js index 1f0b274..2780e78 100644 --- a/super-screen/client/src/sections/water-prevention/components/emergency-left-bottom.js +++ b/super-screen/client/src/sections/water-prevention/components/emergency-left-bottom.js @@ -1,5 +1,5 @@ import React from 'react' -import { Box, AutoRollComponent } from '$components'; +import { Box, AutoRollComponent, NoData } from '$components'; import { Tooltip } from 'antd'; function Infrastructure(props) { @@ -24,7 +24,7 @@ function Infrastructure(props) {
return - {waterLevelAlarms?.length > 0 ? : '暂无数据 等UI出图'} + {waterLevelAlarms?.length > 0 ? : } } diff --git a/super-screen/client/src/sections/water-prevention/components/emergency-right-top.js b/super-screen/client/src/sections/water-prevention/components/emergency-right-top.js index 1964d60..df80125 100644 --- a/super-screen/client/src/sections/water-prevention/components/emergency-right-top.js +++ b/super-screen/client/src/sections/water-prevention/components/emergency-right-top.js @@ -1,40 +1,46 @@ import React, { useEffect, useState } from 'react' import { Box } from '$components'; +import { getName, getPhone } from '$utils'; import './style.less'; function CitySafty(props) { - const { emengencyTab, emerResource } = props; + const { emengencyTab, emergencyList } = props; const tab_name = { - yjwz: '应急物资', - xfjy: '消防救援', - rmwzb: '人民武装部', - yljy: '医疗救援', - yjbns: '应急避难场所', + yjwz: { name: '应急物资', 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: '驻地地址' }] }, + rmwzb: { name: '人民武装部', 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: '驻地地址' }] }, + yjbns: { name: '应急避难场所', items: [{ key: 'shelterName', name: '场所全称' }, { key: 'address', name: '场所地址' }, { key: 'eventType', name: '事件类型' }, { key: 'capacity', name: '容纳人数' }] }, } - return + return
{ - emerResource?.map((s, index) => { - return
+ emergencyList[emengencyTab]?.map((s, index) => { + + return
-
-
场所名称
-
{s.name || '--'}
-
-
-
场所地点
-
{s.address || s.region || '--'}
-
-
-
承载人数
-
-- 人
-
-
-
目标距离
-
-- Km
-
+ { + tab_name[emengencyTab]?.items?.map(x => { + let value = s[x.key] || '--' + if (x.name == '联系人' && s[x.key]) { + if (x.key == 'emergencyContactPhone') { + value = value.substring(0, value.length - 11) + } + value = getName(value) + } else if (x.name == '联系电话' && s[x.key]) { + if (x.key == 'emergencyContactPhone') { + value = value.substring(value.length - 11, value.length) + } + value = getPhone(value) + } + return
+
{x.name}
+
{value}
+
+ }) + }
场所{index + 1}
diff --git a/super-screen/client/src/sections/water-prevention/components/style.less b/super-screen/client/src/sections/water-prevention/components/style.less index cc249d5..3a3c4d9 100644 --- a/super-screen/client/src/sections/water-prevention/components/style.less +++ b/super-screen/client/src/sections/water-prevention/components/style.less @@ -114,19 +114,88 @@ } .water_item_right_container { - display: flex; - width: 100%; + // display: flex; + // width: 100%; height: 100%; - text-align: center; - flex-direction: column; - align-items: center; + // text-align: center; + // flex-direction: column; + // align-items: center; overflow: auto; - padding-top: 24px; + padding: 24px; + .water_right_item { + // width: 95%; + padding-top: 20px; + min-height: 183px; + background: url('/assets/images/homepage/fire/rightbgbig.png') no-repeat; + background-size: 100% 100%; + display: flex; + justify-content: center; + align-items: center; + color: #ECF7FF; + position: relative; + margin-bottom: 20px; + + .item_left { + width: 50px; + height: 50px; + background: url('/assets/images/homepage/fire/iconhome.png') no-repeat; + background-size: 100% 100%; + } + + .item_right { + width: calc(100% - 100px); + display: flex; + flex-wrap: wrap; + padding-left: 20px; + + + .item_right_left { + width: 100px; + font-size: 14px; + color: #ECF7FF; + font-family: ''; + } + + .item_right_right { + width: 170px; + font-size: 14px; + color: #9CF2FF; + letter-spacing: 0; + font-family: ''; + text-align: left; + margin-bottom: 12px; + } + + + } + + .position_bg { + position: absolute; + left: 0%; + bottom: 0%; + width: 85px; + height: 30px; + background: rgba(31, 237, 255, 0.1); + background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 80%, rgba(0, 255, 244, 0.98) 100%); + border-radius: 0 20px 0 0; + display: flex; + justify-content: space-evenly; + align-items: center; + + .position_icon { + width: 12px; + height: 12px; + background: url('/assets/images/homepage/fire/position.png') no-repeat; + background-size: 100% 100%; + } + } + } } + .water_item_right_container::-webkit-scrollbar { width: 0 !important } diff --git a/super-screen/client/src/sections/water-prevention/containers/gis.js b/super-screen/client/src/sections/water-prevention/containers/gis.js index 1c7baee..70b27de 100644 --- a/super-screen/client/src/sections/water-prevention/containers/gis.js +++ b/super-screen/client/src/sections/water-prevention/containers/gis.js @@ -17,7 +17,7 @@ const MARKER_IMG_NAME = { markeryellow: '廉租房', } function Map(props) { - const { trendData, waterLevelAlarms } = props; + const { trendData, waterLevelAlarms, emergencyList } = props; const [delay, setDelay] = useState(true) const [tab, setTab] = useState('overview') @@ -82,70 +82,6 @@ function Map(props) { // }, 1000); }; - const createText = () => { - var text = new AMap.Text({ - text: '南昌县', - anchor: 'center', // 设置文本标记锚点 - draggable: false, - // cursor: 'pointer', - zooms: [3, 11], - style: { - 'padding': '.75rem 1.25rem', - 'margin-bottom': '1rem', - 'border-radius': '.25rem', - 'background-color': 'rgba(238,77,90,0.001)', - 'width': '8rem', - 'border-width': 0, - //'box-shadow': '0 2px 6px 0 rgba(255, 255, 255, .1)', - 'text-align': 'center', - 'font-size': '14px', - 'color': '#AFEFFF', - 'opacity': 1, - // 'font-weight': 'bold' - }, - position: [115.934664, 28.538966] - }); - text.setMap(map); - - } - const drawBounds = () => { - let district = null; - let polygons = []; - //加载行政区划插件 - if (!district) { - //实例化DistrictSearch - let opts = { - subdistrict: 0, //获取边界不需要返回下级行政区 - extensions: 'all', //返回行政区边界坐标组等具体信息 - level: 'district' //查询行政级别为 市 - }; - district = new AMap.DistrictSearch(opts); - } - //行政区查询 - district.setLevel('district') - district.search('南昌县', function (status, result) { - map.remove(polygons)//清除上次结果 - polygons = []; - let bounds = result.districtList[0].boundaries; - if (bounds) { - for (let i = 0, l = bounds.length; i < l; i++) { - //生成行政区划polygon - let polygon = new AMap.Polygon({ - strokeWeight: 1, - path: bounds[i], - fillOpacity: 0.4, - fillColor: '#1F2F4D', - strokeColor: '#DE7B35', - fillOpacity: 0.35, //填充透明度 - }); - polygons.push(polygon); - } - } - map.add(polygons) - // map.setFitView(polygons);//视口自适应 - }); - } - // 初始化GIS 组件销毁清空定时器 useEffect(() => { loadMap(); @@ -429,145 +365,18 @@ function Map(props) { { name: '实时监测', tab: 'overview' }, { name: '应急抢险', tab: 'emergency' } ] : [ - { name: '应急机构', tab: 'yjjg', className: 'emergency_button' }, - { name: '应急队伍', tab: 'yjdw', className: 'emergency_button' }, - { name: '应急专家', tab: 'yjzj', className: 'emergency_button' }, - { name: '医疗机构', tab: 'yljg', className: 'emergency_button' }, - { name: '避难场所', tab: 'bncs', className: 'emergency_button' }, + { name: '应急物资', tab: 'yjwz', className: 'emergency_button' }, + { name: '消防救援', tab: 'xfjy', className: 'emergency_button' }, + { name: '人民武装部', tab: 'rmwzb', className: 'emergency_button' }, + { name: '医疗救援', tab: 'yljy', className: 'emergency_button' }, + { name: '应急避难场所', tab: 'yjbns', className: 'emergency_button' }, ] - const renderLayer = () => { - if (!loca) return; - const dataSource = trendData; - - if (gridLayer && loca) loca.remove(gridLayer) - - let data = [] - dataSource.map(x => { - data.push({ - "type": "Feature", "properties": { "time": 1534296083, x }, - "geometry": { "coordinates": [x.lng, x.lat], "type": "Point", x } - }) - }) - var geo = new Loca.GeoJSONSource({ - data: { - "features": data, "type": "FeatureCollection" - } - }); - - gridLayer = new Loca.GridLayer({ - // loca, - zIndex: 10, - opacity: 1, - visible: true, - zooms: [2, 22], - acceptLight: true, - // shinniness: 0, - // cullface: 'none', - // depth: true, - // hasSide: true, - }); - - - var colors = ['#FAE200', '#D27E37', '#C53634', '#C12B6E', '#A92E9A', '#67238A', '#211A50', '#18244E'].reverse(); - var heights = [100, 200, 400, 600, 800, 1400, 1800, 4000]; - gridLayer.setSource(geo); - gridLayer.setStyle({ - unit: 'meter', - radius: 200, - gap: 0, - altitude: 100, - // height: function (index, feature) { - // return 6000 - - // }, - // topColor: function (index, feature) { - // console.log(feature) - // return 'red' - // }, - // sideColor: function (index, feature) { - // return 'red' - // } - height: function (index, feature) { - const baseHeigh = 1200 - return feature.coordinates[0].properties.x.waterLevel > 30 ? baseHeigh * 14 : - feature.coordinates[0].properties.x.waterLevel > 25 ? baseHeigh * 13 : - feature.coordinates[0].properties.x.waterLevel > 20 ? baseHeigh * 12 : - feature.coordinates[0].properties.x.waterLevel > 15 ? baseHeigh * 11 : - feature.coordinates[0].properties.x.waterLevel > 10 ? baseHeigh * 10 : - feature.coordinates[0].properties.x.waterLevel > 0 ? baseHeigh * 9 : 0 - - }, - topColor: function (index, feature) { - return feature.coordinates[0].properties.x.waterLevel > Number(feature.coordinates[0].properties.x.alert) ? 'rgba(255,136,140,1)' : 'rgba(117,154,206,1)' - }, - sideColor: function (index, feature) { - return feature.coordinates[0].properties.x.waterLevel > Number(feature.coordinates[0].properties.x.alert) ? 'rgba(255,136,140,1)' : 'rgba(117,154,206,1)' - }, - sideTopColor: function (index, feature) { - return feature.coordinates[0].properties.x.waterLevel > Number(feature.coordinates[0].properties.x.alert) ? 'rgba(255,136,140,1)' : 'rgba(117,154,206,1)' - }, - sideBottomColor: function (index, feature) { - return feature.coordinates[0].properties.x.waterLevel > Number(feature.coordinates[0].properties.x.alert) ? 'rgba(255,136,140,0.5)' : 'rgba(117,154,206,0.5)' - }, - }); - gridLayer = gridLayer - loca.add(gridLayer); - - dataSource.map(s => { - // 创建纯文本标记 - var text = new AMap.Text({ - text: '纯文本标记', - anchor: 'center', // 设置文本标记锚点 - // draggable: true, - cursor: 'pointer', - angle: 0, - // visible: false, - offset: [0, -s.waterLevel], - style: { - 'padding': '2px 4px', - 'margin-bottom': '1rem', - 'border-radius': '.25rem', - 'background-color': '#143857', - // 'width': '12rem', - 'border-width': 0, - 'box-shadow': '0 2px 6px 0 rgba(255, 255, 255, .3)', - 'text-align': 'center', - 'font-size': '14px', - 'color': '#DCF2FD', - }, - }); - text.setMap(map); - text.show(); - text.setText(`${s.waterLevel || '--'}m`) - text.setPosition(new AMap.LngLat(s.lng, s.lat)); - }) - - - // // 拾取 - // map.on('mousemove', (e) => { - // text.setMap(map); - // var feat = gridLayer.queryFeature(e.pixel.toArray()); - - // if (feat) { - // text.show(); - // text.setText(feat.coordinates[0].properties.x.waterLevel + 'm'); - // text.setPosition(e.lnglat); - - // } else { - // text.hide(); - // } - // }); - } - return ( <> {/* 延缓加载遮罩 */} - {delay &&
-
} + {delay &&
} + {/* 地图容器 */}
@@ -580,13 +389,17 @@ function Map(props) { onClick={() => { setTab(s.tab) s.className ? props.changeEmengencyTab(s.tab) : props.changeTab(s.tab) + if (s.tab == 'emergency') { + setTab('yjwz') + props.changeEmengencyTab('yjwz') + } }} >
{s.name}
- {s.className &&
7
} + {s.className &&
{emergencyList[s.tab]?.length}
}
{/* { tab !== 'overview' && <>
diff --git a/super-screen/client/src/sections/water-prevention/containers/gis.less b/super-screen/client/src/sections/water-prevention/containers/gis.less index 6567cf2..afcbdd1 100644 --- a/super-screen/client/src/sections/water-prevention/containers/gis.less +++ b/super-screen/client/src/sections/water-prevention/containers/gis.less @@ -585,9 +585,9 @@ position: absolute; right: 6%; top: -14%; - font-family: D-DINExp-Italic; + font-family: D-DIN-Italic; font-weight: Italic; - font-size: 20px; + font-size: 16px; color: #003FA6; text-align: center; } @@ -640,64 +640,74 @@ cursor: pointer; } -.button_yjjg { - background: url('/assets/images/homepage/water/yjjg.png'); +.button_img_1 { + background: url('/assets/images/homepage/water/tab1.png'); background-repeat: no-repeat; background-size: 100% 100%; width: 76.95px; height: 64px; } -.button_yjjg_select { - background: url('/assets/images/homepage/water/yjjgselect.png'); +.button_img_1_select { + background: url('/assets/images/homepage/water/tab1select.png'); + background-repeat: no-repeat; + background-size: 100% 100%; } -.button_yjdw { - background: url('/assets/images/homepage/water/yjdw.png'); +.button_img_2 { + background: url('/assets/images/homepage/water/tab2.png'); background-repeat: no-repeat; background-size: 100% 100%; width: 76.95px; height: 64px; } -.button_yjdw_select { - background: url('/assets/images/homepage/water/yjdwselect.png'); +.button_img_2_select { + background: url('/assets/images/homepage/water/tab2select.png'); + background-repeat: no-repeat; + background-size: 100% 100%; } -.button_yjzj { - background: url('/assets/images/homepage/water/yjzj.png'); +.button_img_3 { + background: url('/assets/images/homepage/water/tab3.png'); background-repeat: no-repeat; background-size: 100% 100%; width: 76.95px; height: 64px; } -.button_yjzj_select { - background: url('/assets/images/homepage/water/yjzjselect.png'); +.button_img_3_select { + background: url('/assets/images/homepage/water/tab3select.png'); + background-repeat: no-repeat; + background-size: 100% 100%; } -.button_yljg { - background: url('/assets/images/homepage/water/yljg.png'); +.button_img_4 { + background: url('/assets/images/homepage/water/tab4.png'); background-repeat: no-repeat; background-size: 100% 100%; width: 76.95px; height: 64px; } -.button_yljg_select { - background: url('/assets/images/homepage/water/yljgselect.png'); +.button_img_4_select { + background: url('/assets/images/homepage/water/tab4select.png'); + background-repeat: no-repeat; + background-size: 100% 100%; } -.button_bncs { - background: url('/assets/images/homepage/water/bncs.png'); +.button_img_5 { + background: url('/assets/images/homepage/water/tab5.png'); background-repeat: no-repeat; background-size: 100% 100%; width: 76.95px; height: 64px; } -.button_bncs_select { - background: url('/assets/images/homepage/water/bncsselect.png'); +.button_img_5_select { + background: url('/assets/images/homepage/water/tab5select.png'); + background-repeat: no-repeat; + background-size: 100% 100%; } ._weather_container {