// 左右模块背景 .WaterAssetsBoxLeft { left: 18px; } .WaterAssetsBoxRight { right: 18px; } .TOP_Title { width: 100%; height: 44px; background: url('@/assets/images/shuiwuzichan/big-title-bg.png') no-repeat center; background-size: 100% 100%; .p56 { height: 100%; padding-left: 56px; padding-right: 7px; margin-left: 2px; } .tabData { .eachClick { // width: 64px; height: 26px; background: linear-gradient(0deg, rgba(0, 98, 183, 0.8) 0%, rgba(0, 98, 183, 0.1) 100%); margin-left: 10px; padding: 0 12px; font-weight: bold; font-size: 14px; color: #8fbffe; line-height: 26px; cursor: pointer; border-radius: 1px; border: 1px solid #0b9bff; } .active { background: linear-gradient(0deg, rgba(6, 227, 209, 0.8) 0%, rgba(12, 59, 85, 0.1) 100%); border-radius: 1px; border: 1px solid #2ff6e8; font-family: Source Han Sans CN; font-weight: bold; font-size: 14px; color: #ffffff; } } } .shuziluansheng { background: url('@/assets/images/shuiwuzichan/shuziluansheng.png') no-repeat center; background-size: 100% 100%; } .WaterAssetsBox { width: 450px; height: calc(100vh - 108px); position: fixed; top: 88px; background: linear-gradient(90deg, rgba(11, 18, 28, 0.4) 0%, rgba(48, 58, 69, 0.3) 4100%); background-size: 100% 100%; overflow: hidden; z-index: 10; } .centerbottmBox { width: calc(100% - 1000px); height: 110px; position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; background: url('@/assets/images/donghu/bottombg.png') no-repeat; background-size: 100% 100%; z-index: 10; padding-top: 10px; } .pbottom { padding-bottom: 10px; } .top-title { font-weight: bold; font-size: 20px; color: #ffffff; } // .small-TitleBox { // width: 100%; // height: 27px; // font-weight: bold; // font-size: 18px; // color: #ffffff; // padding-left: 40px; // margin-left: 10px; // } .small-TitleBox { height: 35px; background: url('@/assets/images/pictureOnMap/leve2.png') no-repeat center bottom; background-size: 103% auto; font-weight: bold; font-size: 18px; color: #e0e5fa; padding-left: 39px; line-height: 37px; } .wushuichulizhan { background: url('@/assets/images/shuiwuzichan/title-wushuichulizhan.png') no-repeat; background-size: 100% 100%; } .tiaoxuchi { background: url('@/assets/images/shuiwuzichan/title-tiaoxuchi.png') no-repeat; background-size: 100% 100%; } .guanwang { background: url('@/assets/images/shuiwuzichan/title-guanwang.png') no-repeat; background-size: 100% 100%; } .fenliujin { background: url('@/assets/images/shuiwuzichan/title-fenliujin.png') no-repeat; background-size: 100% 100%; } .jishuidian { background: url('@/assets/images/shuiwuzichan/title-jishuidian.png') no-repeat; background-size: 100% 100%; } .guanwangjiance { background: url('@/assets/images/shuiwuzichan/title-guanwangjiance.png') no-repeat; background-size: 100% 100%; } .shuixijiance { background: url('@/assets/images/shuiwuzichan/title-shuixijiance.png') no-repeat; background-size: 100% 100%; } .video { background: url('@/assets/images/shuiwuzichan/title-video.png') no-repeat; background-size: 100% 100%; } .psh { background: url('@/assets/images/shuiwuzichan/title-psh.png') no-repeat; background-size: 100% 100%; } .bengzhan { background: url('@/assets/images/shuiwuzichan/title-bengzhan.png') no-repeat; background-size: 100% 100%; } .Gw_center_box { padding: 10px; display: flex; justify-content: space-between; .boxitem { width: 28%; position: relative; .itemimg { width: 100%; height: 80%; } .centervalue { left: 50%; } .Numbervalue { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: end; .value { font-family: DINPro; font-weight: bold; font-size: 23px; color: #61cdfa; } .unit { margin-left: 4px; font-size: 11px; font-weight: normal; color: #ffffff; } } .name { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-weight: bold; font-size: 12px; color: #ffffff; } } } .shuixijianceBox { display: flex; justify-content: space-around; padding: 0 10px; .boxitem { width: 218; .itemimg { width: 100%; height: 55%; } .value { text-align: center; font-family: DINPro; font-weight: bold; font-size: 20px; color: #61cdfa; } .name { text-align: center; font-weight: 400; font-size: 12px; color: #ffffff; } } } .videoitem { display: flex; height: 18%; align-items: center; padding: 0 20px; background: url('@/assets/images/shuiwuzichan/video-bg.png') no-repeat; background-size: 100% 100%; .lefticon { width: 60px; height: 30px; } .itembox { display: flex; width: 74px; justify-content: space-between; margin-left: 30px; .name { font-family: Source Han Sans SC; font-weight: 500; font-size: 14px; color: #ffffff; line-height: 32px; } .value { font-family: DINPro; font-weight: bold; font-size: 24px; } &.two_item { margin-left: 80px; } } .blue { color: #61cdfa; } .green { color: #a9fa61; } .yellow { color: #fabf61; } }