Skip to content

R
report-html-template
Commit b486088d by wangmin
Options

能耗预测报告静态页面样式媒体查询修改

parent 7ce8c29e
正在显示 包含 828 行增加 和 369 行删除
energyPredict/index.css
@media screen and (max-width: 750px) {
.report-title-bg > img {
width: 42rem;
height: 4.5rem;
}
.report-title {
margin-top: 10px;
}
.report-title-text {
font-size: 2rem;
}
.dian-wrapper img {
width: 11rem;
height: 2.35rem;
}
.dian-wrapper .dian-main .dian-box1 {
width: calc(100% - 2rem);
height: 25rem;
}
.dian-wrapper .dian-main .dian-zs-1 {
left: 1.75rem;
top: 4.05rem;
}
.dian-wrapper .dian-main .dian-ys-1 {
right: 1.25rem;
top: 4.05rem;
}
.dian-wrapper .dian-main .dian-zx-1 {
left: 1.75rem;
top: 29.75rem;
}
.dian-wrapper .dian-main .dian-yx-1 {
right: 1.25rem;
top: 29.75rem;
}
.dian-wrapper .dian-main .dian-box2 {
width: calc(100% - 2rem);
height: 25rem;
}
.dian-wrapper .dian-main .dian-zs-2 {
left: 1.75rem;
top: 31.25rem;
}
.dian-wrapper .dian-main .dian-ys-2 {
right: 1.25rem;
top: 31.25rem;
}
.dian-wrapper .dian-main .dian-zx-2 {
left: 1.75rem;
top: 56.95rem;
}
.dian-wrapper .dian-main .dian-yx-2 {
right: 1.25rem;
top: 56.95rem;
}
.shui-box {
width: calc(100% - 2rem);
height: 25rem;
}
.shui-wrapper .shui-zs {
left: 1.75rem;
top: 66rem;
}
.shui-wrapper .shui-ys {
right: 1.25rem;
top: 66rem;
}
.shui-wrapper .shui-zx {
left: 1.75rem;
top: 91.7rem;
}
.shui-wrapper .shui-yx {
right: 1.25rem;
top: 91.7rem;
}
.shui-wrapper img {
width: 11rem;
height: 2.35rem;
}
.yuny-wrapper {
width: 100%;
}
.yuny-wrapper img {
width: 13.5rem;
height: 2.4rem;
}
.advise-wrapper-content-item {
margin-bottom: 0.57rem;
}
.advise-wrapper-content-item img {
width: 1rem;
height: 1rem;
margin-right: 1rem;
margin-top: 0.4rem;
}
.advise-wrapper-content-item-text {
font-size: 1.4rem;
letter-spacing: 3px;
}
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
.report-title-bg > img {
width: 504px;
height: 51px;
}
.report-title {
margin-top: 2px;
}
.report-title-text {
font-size: 24px;
}
.dian-wrapper img {
width: 180px;
height: 42px;
}
.dian-wrapper .dian-main {
display: flex;
}
.dian-wrapper .dian-main .dian-box1 {
width: 50%;
height: 410px;
}
.dian-wrapper .dian-main .dian-zs-1 {
left: 28px;
top: 69px;
}
.dian-wrapper .dian-main .dian-ys-1 {
left: calc(50% - 16px);
top: 69px;
}
.dian-wrapper .dian-main .dian-zx-1 {
left: 28px;
top: 490px;
}
.dian-wrapper .dian-main .dian-yx-1 {
left: calc(50% - 16px);
top: 490px;
}
.dian-wrapper .dian-main .dian-box2 {
width: 50%;
height: 410px;
}
.dian-wrapper .dian-main .dian-zs-2 {
left: calc(50% + 18px);
top: 69px;
}
.dian-wrapper .dian-main .dian-ys-2 {
left: calc(100% - 27px);
top: 69px;
}
.dian-wrapper .dian-main .dian-zx-2 {
left: calc(50% + 18px);
top: 490px;
}
.dian-wrapper .dian-main .dian-yx-2 {
left: calc(100% - 27px);
top: 490px;
}
.shui-box {
width: calc(50% - 42px);
height: 410px;
}
.shui-wrapper .shui-zs {
left: 28px;
top: 640px;
}
.shui-wrapper .shui-ys {
left: calc(50% - 16px);
top: 640px;
}
.shui-wrapper .shui-zx {
left: 28px;
top: 1061px;
}
.shui-wrapper .shui-yx {
left: calc(50% - 16px);
top: 1061px;
}
.shui-wrapper img {
width: 180px;
height: 42px;
}
.yuny-wrapper {
width: 56%;
}
.yuny-wrapper img {
width: 210px;
height: 42px;
}
.advise-wrapper-content-item {
margin-bottom: 8px;
}
.advise-wrapper-content-item img {
width: 13px;
height: 13px;
margin-right: 13px;
margin-top: 6px;
}
.advise-wrapper-content-item-text {
font-size: 18px;
}
}
@media screen and (min-width: 1651px) {
.report-title-bg > img {
width: 780px;
height: 82px;
}
.report-title {
margin-top: 15px;
}
.report-title-text {
font-size: 36px;
}
.dian-wrapper img {
width: 215px;
height: 50px;
}
.dian-wrapper .dian-main {
display: flex;
}
.dian-wrapper .dian-main .dian-box1 {
width: 50%;
height: 500px;
}
.dian-wrapper .dian-main .dian-zs-1 {
left: 28px;
top: 77px;
}
.dian-wrapper .dian-main .dian-ys-1 {
left: calc(50% - 16px);
top: 77px;
}
.dian-wrapper .dian-main .dian-zx-1 {
left: 28px;
top: 588px;
}
.dian-wrapper .dian-main .dian-yx-1 {
left: calc(50% - 16px);
top: 588px;
}
.dian-wrapper .dian-main .dian-box2 {
width: 50%;
height: 500px;
}
.dian-wrapper .dian-main .dian-zs-2 {
left: calc(50% + 17px);
top: 77px;
}
.dian-wrapper .dian-main .dian-ys-2 {
left: calc(100% - 27px);
top: 77px;
}
.dian-wrapper .dian-main .dian-zx-2 {
left: calc(50% + 17px);
top: 588px;
}
.dian-wrapper .dian-main .dian-yx-2 {
left: calc(100% - 27px);
top: 588px;
}
.shui-box {
width: calc(50% - 42px);
height: 500px;
}
.shui-wrapper .shui-zs {
left: 28px;
top: 746px;
}
.shui-wrapper .shui-ys {
left: calc(50% - 16px);
top: 746px;
}
.shui-wrapper .shui-zx {
left: 28px;
top: 1251px;
}
.shui-wrapper .shui-yx {
left: calc(50% - 16px);
top: 1251px;
}
.shui-wrapper img {
width: 215px;
height: 50px;
}
.yuny-wrapper {
width: 56%;
}
.yuny-wrapper img {
width: 275px;
height: 55px;
}
.advise-wrapper-content-item {
margin-bottom: 16px;
}
.advise-wrapper-content-item img {
width: 20px;
height: 20px;
margin-right: 20px;
margin-top: 10px;
}
.advise-wrapper-content-item-text {
font-size: 28px;
}
}
html {
border: 3px solid rgba(255, 255, 255, 0.15);
background-color: #152235;
@media screen and (max-width: 1650px) and (min-width: 751px) {
height: 99vh;
}
@media screen and (min-width: 1651px) {
}
position: relative;
}
body {
......@@ -49,459 +348,112 @@ body {
left: 50%;
transform: translateX(-50%);
}
.report-title-bg > img {
@media screen and (max-width: 750px) {
width: 42rem;
height: 4.5rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 504px;
height: 51px;
}
@media screen and (min-width: 1651px) {
width: 780px;
height: 82px;
}
}
.report-title {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
@media screen and (max-width: 750px) {
margin-top: 10px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-top: 2px;
}
@media screen and (min-width: 1651px) {
margin-top: 15px;
}
}
.report-title-text {
color: #ffffff;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: 400;
line-height: 36px;
@media screen and (max-width: 750px) {
font-size: 2rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 24px;
}
@media screen and (min-width: 1651px) {
font-size: 36px;
}
}
.dian-wrapper img {
margin-top: 80px;
/*width: 180px;*/
/*height: 42px;*/
@media screen and (max-width: 750px) {
width: 11rem;
height: 2.35rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
width: 180px;
height: 42px;
}
@media screen and (min-width: 1651px) {
width: 215px;
height: 50px;
}
}
.dian-wrapper .dian-main {
/*display: flex;*/
width: 100%;
@media screen and (max-width: 750px) {
/*display: flex;*/
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
display: flex;
}
@media screen and (min-width: 1651px) {
display: flex;
}
}
.dian-wrapper .dian-main .dian-box1 {
/*width: 50%;*/
margin-right: 24px;
/*height: 410px;*/
background: rgba(8, 16, 24, 0.27);
margin-top: 15px;
padding: 20px 10px 0 20px;
@media screen and (max-width: 750px) {
width: calc(100% - 2rem);
height: 25rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
width: 50%;
height: 410px;
}
@media screen and (min-width: 1651px) {
width: 50%;
height: 500px;
}
}
.dian-wrapper .dian-main .dian-zs-1 {
position: absolute;
/*left: 28px;*/
/*top: 69px;*/
width: 9px;
height: 9px;
@media screen and (max-width: 750px) {
left: 1.75rem;
top: 4.05rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
left: 28px;
top: 69px;
}
@media screen and (min-width: 1651px) {
left: 28px;
top: 77px;
}
}
.dian-wrapper .dian-main .dian-ys-1 {
position: absolute;
/*left: calc(50% - 16px);*/
/*top: 69px;*/
width: 9px;
height: 9px;
@media screen and (max-width: 750px) {
right: 1.25rem;
top: 4.05rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
left: calc(50% - 16px);
top: 69px;
}
@media screen and (min-width: 1651px) {
left: calc(50% - 16px);
top: 77px;
}
}
.dian-wrapper .dian-main .dian-zx-1 {
position: absolute;
/*left: 28px;*/
/*top: 490px;*/
width: 9px;
height: 9px;
@media screen and (max-width: 750px) {
left: 1.75rem;
top: 29.75rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
left: 28px;
top: 490px;
}
@media screen and (min-width: 1651px) {
left: 28px;
top: 588px;
}
}
.dian-wrapper .dian-main .dian-yx-1 {
position: absolute;
/*left: calc(50% - 16px);*/
/*top: 490px;*/
width: 9px;
height: 9px;
@media screen and (max-width: 750px) {
right: 1.25rem;
top: 29.75rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
left: calc(50% - 16px);
top: 490px;
}
@media screen and (min-width: 1651px) {
left: calc(50% - 16px);
top: 588px;
}
}
.dian-wrapper .dian-main .dian-box2 {
/*width: 50%;*/
/*height: 410px;*/
background: rgba(8, 16, 24, 0.27);
margin-top: 15px;
padding: 20px 10px 0 20px;
@media screen and (max-width: 750px) {
width: calc(100% - 2rem);
height: 25rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
width: 50%;
height: 410px;
}
@media screen and (min-width: 1651px) {
width: 50%;
height: 500px;
}
}
.dian-wrapper .dian-main .dian-zs-2 {
position: absolute;
/*left: calc(50% + 18px);*/
/*top: 69px;*/
width: 9px;
height: 9px;
@media screen and (max-width: 750px) {
left: 1.75rem;
top: 31.25rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
left: calc(50% + 18px);
top: 69px;
}
@media screen and (min-width: 1651px) {
left: calc(50% + 17px);
top: 77px;
}
}
.dian-wrapper .dian-main .dian-ys-2 {
position: absolute;
/*left: calc(100% - 27px);*/
/*top: 69px;*/
width: 9px;
height: 9px;
@media screen and (max-width: 750px) {
right: 1.25rem;
top: 31.25rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
left: calc(100% - 27px);
top: 69px;
}
@media screen and (min-width: 1651px) {
left: calc(100% - 27px);
top: 77px;
}
}
.dian-wrapper .dian-main .dian-zx-2 {
position: absolute;
/*left: calc(50% + 18px);*/
/*top: 490px;*/
width: 9px;
height: 9px;
@media screen and (max-width: 750px) {
left: 1.75rem;
top: 56.95rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
left: calc(50% + 18px);
top: 490px;
}
@media screen and (min-width: 1651px) {
left: calc(50% + 17px);
top: 588px;
}
}
.dian-wrapper .dian-main .dian-yx-2 {
position: absolute;
/*left: calc(100% - 27px);*/
/*top: 490px;*/
width: 9px;
height: 9px;
@media screen and (max-width: 750px) {
right: 1.25rem;
top: 56.95rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
left: calc(100% - 27px);
top: 490px;
}
@media screen and (min-width: 1651px) {
left: calc(100% - 27px);
top: 588px;
}
}
.shui-box {
/*width: calc(50% - 42px);*/
height: 410px;
background: rgba(8, 16, 24, 0.27);
margin-top: 15px;
padding: 20px 10px 0 20px;
@media screen and (max-width: 750px) {
width: calc(100% - 2rem);
height: 25rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
width: calc(50% - 42px);
height: 410px;
}
@media screen and (min-width: 1651px) {
width: calc(50% - 42px);
height: 500px;
}
}
.shui-wrapper .shui-zs {
position: absolute;
/*left: 28px;*/
/*top: 640px;*/
width: 9px;
height: 9px;
@media screen and (max-width: 750px) {
left: 1.75rem;
top: 66rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
left: 28px;
top: 640px;
}
@media screen and (min-width: 1651px) {
left: 28px;
top: 746px;
}
}
.shui-wrapper .shui-ys {
position: absolute;
/*left: calc(50% - 16px);*/
/*top: 640px;*/
width: 9px;
height: 9px;
@media screen and (max-width: 750px) {
right: 1.25rem;
top: 66rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
left: calc(50% - 16px);
top: 640px;
}
@media screen and (min-width: 1651px) {
left: calc(50% - 16px);
top: 746px;
}
}
.shui-wrapper .shui-zx {
position: absolute;
/*left: 28px;*/
/*top: 1061px;*/
width: 9px;
height: 9px;
@media screen and (max-width: 750px) {
left: 1.75rem;
top: 91.70rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
left: 28px;
top: 1061px;
}
@media screen and (min-width: 1651px) {
left: 28px;
top: 1251px;
}
}
.shui-wrapper .shui-yx {
position: absolute;
/*left: calc(50% - 16px);*/
/*top: 1061px;*/
width: 9px;
height: 9px;
@media screen and (max-width: 750px) {
right: 1.25rem;
top: 91.70rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
left: calc(50% - 16px);
top: 1061px;
}
@media screen and (min-width: 1651px) {
left: calc(50% - 16px);
top: 1251px;
}
}
.shui-wrapper img {
margin-top: 40px;
/*width: 180px;*/
/*height: 42px;*/
@media screen and (max-width: 750px) {
width: 11rem;
height: 2.35rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
width: 180px;
height: 42px;
}
@media screen and (min-width: 1651px) {
width: 215px;
height: 50px;
}
}
.yuny-wrapper {
/*width: 56%;*/
@media screen and (max-width: 750px) {
width: 100%;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 56%;
}
@media screen and (min-width: 1651px) {
width: 56%;
}
}
.yuny-wrapper img {
margin-top: 40px;
/*width: 210px;*/
/*height: 42px;*/
margin-bottom: 23px;
@media screen and (max-width: 750px) {
width: 13.5rem;
height: 2.4rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
width: 210px;
height: 42px;
}
@media screen and (min-width: 1651px) {
width: 275px;
height: 55px;
}
}
.advise-wrapper-content-item {
display: flex;
@media screen and (max-width: 750px) {
margin-bottom: 0.57rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-bottom: 8px;
}
@media screen and (min-width: 1651px) {
margin-bottom: 16px;
}
}
.advise-wrapper-content-item img {
@media screen and (max-width: 750px) {
width: 1rem;
height: 1rem;
margin-right: 1rem;
margin-top: 0.4rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 13px;
height: 13px;
margin-right: 13px;
margin-top: 6px;
}
@media screen and (min-width: 1651px) {
width: 20px;
height: 20px;
margin-right: 20px;
margin-top: 10px;
}
}
.advise-wrapper-content-item-text {
@media screen and (max-width: 750px) {
font-size: 1.4rem;
letter-spacing: 3px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) and (min-width: 751px) {
font-size: 18px;
}
@media screen and (min-width: 1651px) {
font-size: 28px;
}
color: #fff;
opacity: 0.7;
}
energyPredict/index.html
......@@ -18,40 +18,40 @@
<div class="left-bottom"></div>
<div class="right-bottom"></div>
<div class="report-title-bg">
<img src="../assets/report-header.png" />
<img src="./assets/report-header.png" />
</div>
<div class="report-title">
<span class="report-title-text">能耗数据预测报告</span>
</div>
<div class="dian-wrapper">
<img src="../assets/energyPredict/dian.svg" />
<img src="./assets/dian.svg" />
<div class="dian-main">
<img class="dian-zs-1" src="../assets/energyPredict/zs.svg" />
<img class="dian-ys-1" src="../assets/energyPredict/ys.svg" />
<img class="dian-zx-1" src="../assets/energyPredict/zx.svg" />
<img class="dian-yx-1" src="../assets/energyPredict/yx.svg" />
<img class="dian-zs-1" src="./assets/zs.svg" />
<img class="dian-ys-1" src="./assets/ys.svg" />
<img class="dian-zx-1" src="./assets/zx.svg" />
<img class="dian-yx-1" src="./assets/yx.svg" />
<div class="dian-box1" id="forecast-line-e"></div>
<img class="dian-zs-2" src="../assets/energyPredict/zs.svg" />
<img class="dian-ys-2" src="../assets/energyPredict/ys.svg" />
<img class="dian-zx-2" src="../assets/energyPredict/zx.svg" />
<img class="dian-yx-2" src="../assets/energyPredict/yx.svg" />
<img class="dian-zs-2" src="./assets/zs.svg" />
<img class="dian-ys-2" src="./assets/ys.svg" />
<img class="dian-zx-2" src="./assets/zx.svg" />
<img class="dian-yx-2" src="./assets/yx.svg" />
<div class="dian-box2" id="forecast-bar-e"></div>
</div>
</div>
<div class="shui-wrapper">
<img src="../assets/energyPredict/shui.svg" />
<img class="shui-zs" src="../assets/energyPredict/zs.svg" />
<img class="shui-ys" src="../assets/energyPredict/ys.svg" />
<img class="shui-zx" src="../assets/energyPredict/zx.svg" />
<img class="shui-yx" src="../assets/energyPredict/yx.svg" />
<img src="./assets/shui.svg" />
<img class="shui-zs" src="./assets/zs.svg" />
<img class="shui-ys" src="./assets/ys.svg" />
<img class="shui-zx" src="./assets/zx.svg" />
<img class="shui-yx" src="./assets/yx.svg" />
<div class="shui-box" id="forecast-bar-w"></div>
</div>
<div class="yuny-wrapper">
<img src="../assets/energyPredict/yuny.svg" />
<img src="./assets/yuny.svg" />
<div class="advise-wrapper-content">
<div class="advise-wrapper-content-item">
<img src="../assets/icon.png" />
<img src="./assets/icon.png" />
<div class="advise-wrapper-content-item-text">
根据去年用能情况，预测今年8、9月出现园区限电概率较大，预测6、7月出现全年用电高峰概率较大，请园区做好用电负荷维护与设备巡查工作，增加巡检频次。
</div>
......
energyPredict/old.css 0 → 100644
html {
border: 3px solid rgba(255, 255, 255, 0.15);
background-color: #152235;
@media screen and (max-width: 1650px) and (min-width: 751px) {
height: 99vh;
}
@media screen and (min-width: 1651px) {
}
position: relative;
}
body {
padding: 0 10px 80px 20px;
}
.left-top {
width: 9px;
height: 9px;
background: #fffcfc;
position: absolute;
left: -2px;
top: -2px;
}
.right-top {
width: 9px;
height: 9px;
background: #fffcfc;
position: absolute;
right: -2px;
top: -2px;
}
.left-bottom {
width: 9px;
height: 9px;
background: #fffcfc;
position: absolute;
left: -2px;
bottom: -2px;
}
.right-bottom {
width: 9px;
height: 9px;
background: #fffcfc;
position: absolute;
right: -2px;
bottom: -2px;
}
.report-title-bg {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.report-title-bg > img {
@media screen and (max-width: 750px) {
width: 42rem;
height: 4.5rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 504px;
height: 51px;
}
@media screen and (min-width: 1651px) {
width: 780px;
height: 82px;
}
}
.report-title {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
@media screen and (max-width: 750px) {
margin-top: 10px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-top: 2px;
}
@media screen and (min-width: 1651px) {
margin-top: 15px;
}
}
.report-title-text {
color: #ffffff;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: 400;
line-height: 36px;
@media screen and (max-width: 750px) {
font-size: 2rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 24px;
}
@media screen and (min-width: 1651px) {
font-size: 36px;
}
}
.dian-wrapper img {
margin-top: 80px;
/*width: 180px;*/
/*height: 42px;*/
@media screen and (max-width: 750px) {
width: 11rem;
height: 2.35rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 180px;
height: 42px;
}
@media screen and (min-width: 1651px) {
width: 215px;
height: 50px;
}
}
.dian-wrapper .dian-main {
/*display: flex;*/
width: 100%;
@media screen and (max-width: 750px) {
/*display: flex;*/
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
display: flex;
}
@media screen and (min-width: 1651px) {
display: flex;
}
}
.dian-wrapper .dian-main .dian-box1 {
/*width: 50%;*/
margin-right: 24px;
/*height: 410px;*/
background: rgba(8, 16, 24, 0.27);
margin-top: 15px;
padding: 20px 10px 0 20px;
@media screen and (max-width: 750px) {
width: calc(100% - 2rem);
height: 25rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 50%;
height: 410px;
}
@media screen and (min-width: 1651px) {
width: 50%;
height: 500px;
}
}
.dian-wrapper .dian-main .dian-zs-1 {
position: absolute;
/*left: 28px;*/
/*top: 69px;*/
width: 9px;
height: 9px;
@media screen and (max-width: 750px) {
left: 1.75rem;
top: 4.05rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
left: 28px;
top: 69px;
}
@media screen and (min-width: 1651px) {
left: 28px;
top: 77px;
}
}
.dian-wrapper .dian-main .dian-ys-1 {
position: absolute;
/*left: calc(50% - 16px);*/
/*top: 69px;*/
width: 9px;
height: 9px;
@media screen and (max-width: 750px) {
right: 1.25rem;
top: 4.05rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
left: calc(50% - 16px);
top: 69px;
}
@media screen and (min-width: 1651px) {
left: calc(50% - 16px);
top: 77px;
}
}
.dian-wrapper .dian-main .dian-zx-1 {
position: absolute;
/*left: 28px;*/
/*top: 490px;*/
width: 9px;
height: 9px;
@media screen and (max-width: 750px) {
left: 1.75rem;
top: 29.75rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
left: 28px;
top: 490px;
}
@media screen and (min-width: 1651px) {
left: 28px;
top: 588px;
}
}
.dian-wrapper .dian-main .dian-yx-1 {
position: absolute;
/*left: calc(50% - 16px);*/
/*top: 490px;*/
width: 9px;
height: 9px;
@media screen and (max-width: 750px) {
right: 1.25rem;
top: 29.75rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
left: calc(50% - 16px);
top: 490px;
}
@media screen and (min-width: 1651px) {
left: calc(50% - 16px);
top: 588px;
}
}
.dian-wrapper .dian-main .dian-box2 {
/*width: 50%;*/
/*height: 410px;*/
background: rgba(8, 16, 24, 0.27);
margin-top: 15px;
padding: 20px 10px 0 20px;
@media screen and (max-width: 750px) {
width: calc(100% - 2rem);
height: 25rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 50%;
height: 410px;
}
@media screen and (min-width: 1651px) {
width: 50%;
height: 500px;
}
}
.dian-wrapper .dian-main .dian-zs-2 {
position: absolute;
/*left: calc(50% + 18px);*/
/*top: 69px;*/
width: 9px;
height: 9px;
@media screen and (max-width: 750px) {
left: 1.75rem;
top: 31.25rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
left: calc(50% + 18px);
top: 69px;
}
@media screen and (min-width: 1651px) {
left: calc(50% + 17px);
top: 77px;
}
}
.dian-wrapper .dian-main .dian-ys-2 {
position: absolute;
/*left: calc(100% - 27px);*/
/*top: 69px;*/
width: 9px;
height: 9px;
@media screen and (max-width: 750px) {
right: 1.25rem;
top: 31.25rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
left: calc(100% - 27px);
top: 69px;
}
@media screen and (min-width: 1651px) {
left: calc(100% - 27px);
top: 77px;
}
}
.dian-wrapper .dian-main .dian-zx-2 {
position: absolute;
/*left: calc(50% + 18px);*/
/*top: 490px;*/
width: 9px;
height: 9px;
@media screen and (max-width: 750px) {
left: 1.75rem;
top: 56.95rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
left: calc(50% + 18px);
top: 490px;
}
@media screen and (min-width: 1651px) {
left: calc(50% + 17px);
top: 588px;
}
}
.dian-wrapper .dian-main .dian-yx-2 {
position: absolute;
/*left: calc(100% - 27px);*/
/*top: 490px;*/
width: 9px;
height: 9px;
@media screen and (max-width: 750px) {
right: 1.25rem;
top: 56.95rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
left: calc(100% - 27px);
top: 490px;
}
@media screen and (min-width: 1651px) {
left: calc(100% - 27px);
top: 588px;
}
}
.shui-box {
/*width: calc(50% - 42px);*/
height: 410px;
background: rgba(8, 16, 24, 0.27);
margin-top: 15px;
padding: 20px 10px 0 20px;
@media screen and (max-width: 750px) {
width: calc(100% - 2rem);
height: 25rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: calc(50% - 42px);
height: 410px;
}
@media screen and (min-width: 1651px) {
width: calc(50% - 42px);
height: 500px;
}
}
.shui-wrapper .shui-zs {
position: absolute;
/*left: 28px;*/
/*top: 640px;*/
width: 9px;
height: 9px;
@media screen and (max-width: 750px) {
left: 1.75rem;
top: 66rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
left: 28px;
top: 640px;
}
@media screen and (min-width: 1651px) {
left: 28px;
top: 746px;
}
}
.shui-wrapper .shui-ys {
position: absolute;
/*left: calc(50% - 16px);*/
/*top: 640px;*/
width: 9px;
height: 9px;
@media screen and (max-width: 750px) {
right: 1.25rem;
top: 66rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
left: calc(50% - 16px);
top: 640px;
}
@media screen and (min-width: 1651px) {
left: calc(50% - 16px);
top: 746px;
}
}
.shui-wrapper .shui-zx {
position: absolute;
/*left: 28px;*/
/*top: 1061px;*/
width: 9px;
height: 9px;
@media screen and (max-width: 750px) {
left: 1.75rem;
top: 91.7rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
left: 28px;
top: 1061px;
}
@media screen and (min-width: 1651px) {
left: 28px;
top: 1251px;
}
}
.shui-wrapper .shui-yx {
position: absolute;
/*left: calc(50% - 16px);*/
/*top: 1061px;*/
width: 9px;
height: 9px;
@media screen and (max-width: 750px) {
right: 1.25rem;
top: 91.7rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
left: calc(50% - 16px);
top: 1061px;
}
@media screen and (min-width: 1651px) {
left: calc(50% - 16px);
top: 1251px;
}
}
.shui-wrapper img {
margin-top: 40px;
/*width: 180px;*/
/*height: 42px;*/
@media screen and (max-width: 750px) {
width: 11rem;
height: 2.35rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 180px;
height: 42px;
}
@media screen and (min-width: 1651px) {
width: 215px;
height: 50px;
}
}
.yuny-wrapper {
/*width: 56%;*/
@media screen and (max-width: 750px) {
width: 100%;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 56%;
}
@media screen and (min-width: 1651px) {
width: 56%;
}
}
.yuny-wrapper img {
margin-top: 40px;
/*width: 210px;*/
/*height: 42px;*/
margin-bottom: 23px;
@media screen and (max-width: 750px) {
width: 13.5rem;
height: 2.4rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 210px;
height: 42px;
}
@media screen and (min-width: 1651px) {
width: 275px;
height: 55px;
}
}
.advise-wrapper-content-item {
display: flex;
@media screen and (max-width: 750px) {
margin-bottom: 0.57rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-bottom: 8px;
}
@media screen and (min-width: 1651px) {
margin-bottom: 16px;
}
}
.advise-wrapper-content-item img {
@media screen and (max-width: 750px) {
width: 1rem;
height: 1rem;
margin-right: 1rem;
margin-top: 0.4rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 13px;
height: 13px;
margin-right: 13px;
margin-top: 6px;
}
@media screen and (min-width: 1651px) {
width: 20px;
height: 20px;
margin-right: 20px;
margin-top: 10px;
}
}
.advise-wrapper-content-item-text {
@media screen and (max-width: 750px) {
font-size: 1.4rem;
letter-spacing: 3px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 18px;
}
@media screen and (min-width: 1651px) {
font-size: 28px;
}
color: #fff;
opacity: 0.7;
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论