.content { display: flex; justify-content: right; align-items: flex-end; height: 100vh; width: 100%; padding-bottom: 40px; color: #3b3b3b; } .left { text-align: center; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; } .right { .left; } .box { margin: 28px 28px 0 0; text-align: left; position: relative; display: inline-block; cursor: pointer; border-radius: 46px 6px 48px 6px; box-shadow: 2px 13px 18px 0 rgba(9, 64, 115, 0.49); > ul { display: flex; justify-content: center; > li { text-align: center; width: 50%; } } } .smartWork { .box; width: 604px; height: 357px; background: url('@/assets/home/bg5.png') no-repeat center; background-size: 100% 100%; } .selfInspection { .box; width: 403px; height: 357px; background: url('@/assets/home/bg6.png') no-repeat center; background-size: 100% 100%; } .waterAmt { .box; width: 604px; height: 340px; background: url('@/assets/home/bg1.png') no-repeat center; background-size: 100% 100%; } .waterQuality { .box; width: 604px; height: 399px; background: url('@/assets/home/bg3.png') no-repeat center; background-size: 100% 100%; } .backlogMain { .box; width: 604px; height: 357px; background: url('@/assets/home/bg7.png') no-repeat center; background-size: 100% 100%; } .electric { .box; width: 707px; height: 335px; background: url('@/assets/home/bg2.png') no-repeat center; background-size: 100% 100%; } .medicine { .box; width: 707px; height: 399px; background: url('@/assets/home/bg4.png') no-repeat center; background-size: 100% 100%; } .scadaMain { .box; width: 707px; height: 357px; background: url('@/assets/home/bg8.png') no-repeat center; background-size: 100% 100%; } .titleContent { margin: 20px 36px; display: inline-block; position: relative; } .boxTitle { padding: 0 10px; position: relative; // z-index: 99; font-size: 32px; font-weight: 600; color: #0139f1; line-height: 34px; z-index: 1; } .line { position: absolute; bottom: 0; width: 100%; height: 14px; background: url('@/assets/home-box-line.png') no-repeat center; background-size: 100% 100%; z-index: 0; } .name { font-size: 22px; font-weight: 400; color: #ffffff; line-height: 28px; text-align: center; margin-top: 18px; } .value { margin: 50px 0; font-size: 40px; font-weight: 600; color: #3b3b3b; line-height: 50px; text-align: center; letter-spacing: 4px; font-family: PangMenZhengDao-3, PangMenZhengDao-3; } .valueLong { .value; margin: 80px 0; } .boxH { .box; height: 420px; } .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .scadaContent { padding: 20px; height: 30px; width: 1000px; display: flex; justify-content: space-between; iframe { height: 100%; width: calc(50% - 10px); border: none; pointer-events: none; } } .scoreBox { margin-top: 10px; display: flex; justify-content: space-around; .score { font-size: 50px; font-weight: 600; font-family: PangMenZhengDao-3, PangMenZhengDao-3; color: #615d5d; } .scoreTitle { width: 300px; font-size: 40px; margin-top: 20px; font-family: Source Han Sans, Source Han Sans; color: #3b3b3b; } .grade { font-size: 22px; margin-top: 10px; } .circle { width: 178px; height: 178px; text-align: center; display: flex; flex-direction: column; justify-content: center; // border-image: linear-gradient(49deg, rgba(255, 123.24999645352364, 0, 1), rgba(255, 242.24999696016312, 0, 1)) 25 25; background: url('@/assets/home-circle.png') no-repeat center; background-size: 100% 100%; } } .time { font-size: 22px; text-align: right; position: absolute; right: 49px; bottom: 14px; } .insTag { position: absolute; right: 54px; top: 44px; width: 114px; height: 50px; background: #4a90e2; border-radius: 5px; text-align: center; line-height: 50px; font-size: 26px; font-weight: 400; color: #ffffff; } .insStatus { text-align: center; font-size: 42px; font-weight: 500; color: #f5a623; line-height: 56px; margin-top: 50px; margin-bottom: 22px; } .centerBox { display: flex; justify-content: space-around; height: calc(100vh - 80px); align-items: flex-end; } .backlog { margin-right: 6px; margin-bottom: 40px; padding: 0 20px; overflow-y: auto; height: 260px; color: #3b3b3b; .item { padding: 8px 0 14px; width: 100%; font-size: 22px; line-height: 50px; border-bottom: 1px solid #d8d8d8; } .titleCon { display: flex; align-items: center; } .point { display: inline-block; width: 12px; height: 24px; background-color: #ff8400; } .createTime { float: right; } .titleText { font-size: 24px; margin: 0 20px; font-family: Source Han Sans, Source Han Sans; } .bottomCon { margin-left: 24px; font-size: 20px; line-height: 36px; word-wrap: break-word; font-family: Source Han Sans, Source Han Sans; } } .count { background: #f69040; border-radius: 4px; margin-left: 10px; padding: 0 6px; } .btn1 { margin-bottom: 20px; padding: 14px 28px; font-size: 32px; font-family: Source Han Sans, Source Han Sans; font-weight: 500; color: #ffffff; display: inline-block; border-radius: 100px; background-color: #1755ff; } .btn2 { .btn1; background-color: #1d83ff; } .selfCon { margin-top: 10px; display: flex; justify-content: space-around; align-items: center; .circle { width: 178px; height: 178px; text-align: center; line-height: 178px; background: url('@/assets/home-self-circle.png') no-repeat center; background-size: 100% 100%; } .text { width: 119px; height: 50px; font-size: 50px; font-family: Source Han Sans, Source Han Sans; font-weight: 500; } .texting { width: 128px; font-size: 40px; margin-top: 20px; font-family: Source Han Sans, Source Han Sans; color: #3b3b3b; } }