.tp uni-image { width: 100%; height: 100%; } .box { width: 100vw; height: 100vh; display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0vw 2vw 0; } .box .rights { width: 25vw; height: calc(100% - 4vw); margin-top: 4vw; } .box .rights .typeitem { width: 100%; height: 54vh; } .box .rights .typeitem .scroltype { width: 100%; height: calc(54vh - 2vw); display: flex; justify-content: space-around; } .box .rights .typeitem .scroltype .scroll-Y { width: 7vw; height: calc(54vh - 2vw); } .box .rights .typeitem .scroltype .scroll-Y uni-view { width: 7vw; height: 3.8vw; background: rgba(255, 255, 255, 0.5); border-radius: 1.9vw; font-weight: 400; font-size: 0.9vw; color: #212327; display: flex; justify-content: center; align-items: center; padding: 0 1.4vw; margin-bottom: 0.8vw; text-align: center; } .box .rights .typeitem .scroltype .scroll-Y .act { background: #ffffff !important; color: #0385FA !important; } .box .rights .typeitem .toptype { width: 100%; height: 2vw; display: flex; justify-content: space-around; margin: 0.4vw 0 0.4vw 0; } .box .rights .typeitem .toptype > uni-view { width: 7vw; height: 1.9vw; background: rgba(255, 255, 255, 0.5); border-radius: 0.9vw; display: flex; justify-content: center; align-items: center; font-weight: 400; font-size: 0.9vw; color: #333333; } .box .rights .shitem { width: 24vw; height: 10.3vw; background: #E8E9ED; border-radius: 1.6vw; padding: 1.8vw; } .box .rights .shitem .jqry { width: 100%; display: flex; align-items: center; } .box .rights .shitem .jqry .left { width: 5vw; height: 5vw; } .box .rights .shitem .jqry .rigname { height: 3vw; display: flex; flex-direction: column; justify-content: space-around; } .box .rights .shitem .jqry .rigname:nth-child(1) { font-weight: bold; font-size: 1.4vw; color: #212327; } .box .rights .shitem .jqry .rigname:nth-child(2) { width: 11vw; font-weight: 400; font-size: 1vw; color: #212327; display: flex; justify-content: space-between; } .box .rights .shitem .shypk { width: 100%; display: flex; justify-content: space-between; align-items: center; } .box .rights .shitem .shypk uni-view:nth-child(1) { font-weight: bold; font-size: 1vw; color: #333333; } .box .rights .shitem .shypk uni-view:nth-child(2) { display: flex; flex-direction: column; align-items: center; } .box .rights .shitem .shypk uni-view:nth-child(2) uni-text { font-weight: 400; font-size: 0.8vw; color: #666666; } .box .rights .shitem .shypk uni-view:nth-child(2) .guodu { transition: 0.4s; -webkit-transform-style: preserve-3d; -webkit-overflow-scrolling: touch; } .box .rights .shitem .shypk uni-view:nth-child(2) .swsh { width: 2.7vw; height: 1.5vw; background: #D6D8DC; border-radius: 0.75vw; border: 1px solid #D6D8DC; padding: 0.2vw; box-sizing: border-box; display: flex; align-items: center; } .box .rights .shitem .shypk uni-view:nth-child(2) .swsh > uni-view { width: 1.1vw; height: 1.1vw; background: #FCFCFD; border-radius: 50%; } .box .rights .shitem .shypk uni-view:nth-child(2) .act { background: linear-gradient(-69deg, #E1EFFC, #CAE0F9, #D2E9FF) !important; border: 1px solid rgba(0, 130, 251, 0.34) !important; padding-left: 1.3vw; } .box .rights .shitem .shypk uni-view:nth-child(2) .act uni-view { background: #0385FA; position: absolute; } .box .lefts { width: 70vw; margin-left: 1vw; height: calc(100%); position: relative; } .box .lefts .fxj { width: 23vw; height: 22vw; position: absolute; left: 0; bottom: 2vw; z-index: 11; border-radius: 1.6vw; } .box .lefts .mblbg { width: 23vw; height: 21vw; position: absolute; left: -0.2vw; bottom: 0.5vw; border-radius: 1.6vw; filter: blur(0.46875rem); background: #eff0f4; z-index: 10; } .box .lefts .scroll-Y { width: 100%; height: 100%; display: flex; flex-wrap: wrap; } .box .lefts .scroll-Y .boxitem:nth-child(1), .box .lefts .scroll-Y .boxitem:nth-child(2), .box .lefts .scroll-Y .boxitem:nth-child(3) { margin-top: 4vw; } .box .lefts .boxitem { width: 22vw; height: 19.3vw; background: rgba(255, 255, 255, 0.7); border-radius: 1.6vw; margin: 0 1.3vw 1.2vw 0; border: 2px dashed #fff; display: inline-block; padding: 2.3vw; position: relative; } .box .lefts .boxitem > uni-view .hl { color: #0385FA; background: #E7F0FB; } .box .lefts .boxitem > uni-view .yl { background: #DCF6F3; color: #00C6A9; } .box .lefts .boxitem > uni-view .bj { background: #E9EBFC; color: #727BFF; } > .box .lefts .boxitem > uni-view:nth-child(1) { font-weight: bold; font-size: 1.3vw; color: #212327; } > .box .lefts .boxitem > uni-view:nth-child(2) { font-weight: 400; font-size: 0.3125rem; color: #555555; margin-top: 0.9vw; } > .box .lefts .boxitem > uni-view:nth-child(3) { font-weight: 400; font-size: 0.3125rem; color: #666666; margin-top: 0.6vw; } > .box .lefts .boxitem > uni-view:nth-child(4) { width: 100%; height: 10vw; position: absolute; left: 0; bottom: 0; } .box .lefts .boxitem > uni-view .num { position: absolute; bottom: 2vw; left: 2.5vw; display: flex; flex-direction: column; } .box .lefts .boxitem > uni-view .num uni-view:nth-child(1) { font-weight: bold; font-size: 2.2vw; color: #333333; margin-bottom: 0.6vw; } .box .lefts .boxitem > uni-view .num uni-view:nth-child(2) { font-weight: 400; font-size: 0.9vw; color: #999999; } .box .lefts .boxitem > uni-view .znk { width: 12vw; height: 11.5vw; position: absolute; right: 0; bottom: 0; } .box .lefts .boxitem > uni-view .znk uni-image { width: 100%; height: 100%; } .box .lefts .boxitem > uni-view .carditem { width: 5.8vw; height: 2.1vw; border-radius: 1vw; display: flex; justify-content: center; align-items: center; font-weight: 400; font-size: 0.9vw; margin-top: 0.8vw; } .box .lefts .boxitem > uni-view .carditem uni-image { width: 1.4vw; height: 1.4vw; } .box .lefts .yujing { background: rgba(255, 87, 87, 0.095); border: 2px solid rgba(255, 102, 107, 0.51) !important; box-shadow: 0 0 8px rgba(255, 102, 107, 0.51); } .box .lefts .yujing uni-view .num uni-view:nth-child(1) { color: #FF5757 !important; } .box .lefts .active { border: 2px dashed #017DE9 !important; } body{ background: RGBA(239, 240, 244, 1); }