.cd_box { padding: 20px 0 30px; box-sizing: border-box; position: relative; min-height: 891px; color: #111111; .cb_db { .cb_db_l { font-family: STSongti-SC, STSongti-SC; font-weight: 400; font-size: 10px; color: #ffffff; line-height: 16px; padding-left: 32px; &.cdl { color: #111111; padding-left: 0; } } } .cd_page { width: 100%; font-family: STSongti-SC, STSongti-SC; font-weight: 400; font-size: 10px; color: #111111; line-height: 16px; text-align: center; position: absolute; bottom: 20px; } p { font-family: STSongti-SC, STSongti-SC; font-weight: 400; font-size: 10px; color: #252525; line-height: 14px; margin-top: 20px; &.p2 { font-size: 12px; line-height: 16px; } &.p3 { font-size: 12px; line-height: 16px; color: #33a7a7; } } .bp { font-family: PingFangSC, PingFang SC; font-weight: 600; font-size: 20px; color: #111111; line-height: 24px; } .big_title { font-family: STSongti-SC, STSongti-SC; font-weight: bold; font-size: 32px; color: #009191; line-height: 45px; margin-top: 20px; } &.fm { background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/report/fm_bg.png') no-repeat; background-size: 100% 100%; position: relative; } &.fm2 { background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/fm_bg.png') no-repeat; background-size: 100% 100%; position: relative; justify-content: flex-end; padding: 0 40px 30px; box-sizing: border-box; } .fm2-logo { width: 163px; height: 44px; position: absolute; top: 48px; left: 30px; } .fm2-perill { width: 308px; height: 58px; } .fm2-line { width: calc(100% - 87px); height: 1px; background: rgba(255, 255, 255, 0.12); margin-top: 12px; } .fm2-p { font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 38px; color: #ffdf73; line-height: 48px; margin-top: 12px; } .fm2-texts { margin-top: 15px; overflow: hidden; justify-content: space-between; flex-wrap: wrap; } .fm2-texts-pre { width: 50%; margin-top: 15px; font-family: PingFang-SC, PingFang-SC; font-weight: 500; font-size: 12px; color: #ffffff; line-height: 12px; text-align: left; } .fm_img { width: 178px; height: 48px; margin: 20px 0 0 28px; } .fm_info { width: 100%; padding: 0 51px 41px 51px; position: absolute; bottom: 0; .fi_p { font-family: Helvetica; font-size: 48px; color: #ffd750; line-height: 58px; text-align: left; } .fi_line { width: 161px; height: 2px; background: #ffffff; margin-top: 5px; } .fi_title { font-family: PingFang-SC, PingFang-SC; font-weight: 500; font-size: 46px; color: #ffffff; line-height: 67px; text-align: left; margin-top: 10px; } .fi_tip { font-family: PingFang-SC, PingFang-SC; font-weight: 500; font-size: 14px; color: #ffffff; line-height: 20px; margin-top: 2px; } .fi_xx { margin-top: 15px; .fi_xx_pre { font-family: PingFang-SC, PingFang-SC; font-weight: 500; font-size: 10px; color: #99d3d3; line-height: 14px; &.ml { margin-left: 16px; } } } } .cb_content { padding: 28px 32px 0; &.jxpjmddj { padding: 28px 0 0; } } &.js { .js_boxs { margin-top: 26px; display: flex; justify-content: space-between; .jb_pre { width: calc(20% - 10px); height: 302px; border-radius: 0px 18px 0px 18px; border: 2px solid #33a7a7; padding-left: 10px; box-sizing: border-box; position: relative; .jbp_zm { width: 32px; height: 32px; background: #33a7a7; font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 22px; color: #ffffff; line-height: 27px; text-align: center; position: absolute; left: 0; right: 0; } img { width: 48px; height: 48px; margin: 35px 32px 0 15px; } .jbp_title { width: 100%; height: 30px; padding: 0 20px 7px 0; border-bottom: 2px solid #33a7a7; box-sizing: border-box; font-family: STSongti-SC, STSongti-SC; font-weight: bold; font-size: 9px; color: #111111; line-height: 16px; margin-top: 10px; } p { font-family: STSongti-SC, STSongti-SC; font-weight: 400; font-size: 9px; color: #111111; line-height: 14px; padding: 7px 0 0 0; &:last-child { margin-top: 14px; } } &.jp1 { border: 2px solid #833479; .jbp_zm { background: #833479; } .jbp_title { color: #833479; border-bottom: 2px solid #833479; } .jbp_title { color: #833479; } } &.jp2 { border: 2px solid #009191; .jbp_zm { background: #009191; } .jbp_title { color: #009191; border-bottom: 2px solid #009191; } } &.jp3 { border: 2px solid #193d59; .jbp_zm { background: #193d59; } .jbp_title { color: #193d59; border-bottom: 2px solid #193d59; } } &.jp4 { border: 2px solid #ffd750; .jbp_zm { background: #ffd750; } .jbp_title { color: #ffd750; border-bottom: 2px solid #ffd750; } } &.jp5 { border: 2px solid #afcdf5; .jbp_zm { background: #afcdf5; } .jbp_title { color: #afcdf5; border-bottom: 2px solid #afcdf5; } } } } .js_single_box { margin-top: 20px; width: 100%; height: 112px; border-radius: 0px 18px 0px 18px; border: 2px solid #898989; padding-bottom: 10px; position: relative; .jsb_zm { width: 32px; height: 32px; background: #898989; font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 22px; color: #ffffff; line-height: 32px; text-align: center; position: absolute; left: 0; right: 0; } .jsb_l { width: 111px; img { width: 48px; height: 48px; margin-top: 30px; } p { font-family: STSongti-SC, STSongti-SC; font-weight: 400; font-size: 10px; color: #898989; line-height: 16px; margin-top: 0px; } } .jsb_r { border-left: 2px solid #898989; padding: 10px 22px; flex: 1; font-family: STSongti-SC, STSongti-SC; font-weight: 400; font-size: 10px; color: #111111; line-height: 16px; } } } .mddj_title { img { width: 65px; height: 45px; } span { font-family: PingFang-SC, PingFang-SC; font-weight: 800; font-size: 32px; color: #009191; line-height: 40px; margin-left: 8px; } } .mddj_tip { font-size: 12px; margin-top: 30px; } .mddj_top { justify-content: space-between; margin-top: 42px; .tt_pre { width: calc(100% / 3 - 5px); .ttp_l { width: 27px; height: 48px; &.tl1 { background: #d6bbd2; } &.tl2 { background: #ffe796; } &.tl3 { background: #ad78a6; } } .ttp_r { width: calc(100% - 27px); font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 10px; color: #252525; line-height: 14px; padding-left: 4px; box-sizing: border-box; } } } .mddj_table { margin-top: 33px; .mt_l { flex: 1; box-sizing: border-box; } .mt_r { .mr_pre { font-size: 10px; color: #ffffff; width: 27px; padding: 0 4px; box-sizing: border-box; height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; } } .mt_top { background: #833479; .mt_l { font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 20px; color: #ffffff; line-height: 20px; padding-left: 14px; } } .mt_list { border: 3px solid #833479; .ml_pre { border-bottom: 1px solid #e5e7eb; &:last-child { border: none; } &:nth-child(odd) { background: #f4f4f4; } &:nth-child(even) { background: #ffffff; } .mt_l { padding: 10px 12px; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 10px; color: #252525; line-height: 16px; box-sizing: border-box; } .mp_pre { width: 27px; height: 100%; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 10px; color: #1d2129; line-height: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; &.mp1 { background: #d6bbd2; } &.mp2 { background: #ffe796; } &.mp3 { background: #ad78a6; } } } } } .pjgx_title { font-size: 32px; color: #f09216; margin-top: 20px; } .mddj_boxs { margin-top: 10px; .mb_item { padding: 20px 0; border-bottom: 1px dotted #33a7a7; .mbi_title { background: rgba(131, 52, 120, 0.12); font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 10px; color: #33a7a7; line-height: 14px; padding: 5px; display: inline; } .mbi_text { font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 10px; color: #111111; line-height: 14px; margin-top: 10px; } } } .cyfx_boxs { margin-top: 5px; display: flex; .cyfxb_box { width: calc(100% / 4 - 1px); border-left: 1px dotted #c1c7d2; padding: 0 5px; box-sizing: border-box; .cbb_top { padding: 9px 0; border-bottom: 1px dotted #c1c7d2; font-family: PingFangSC, PingFang SC; font-weight: 600; font-size: 20px; color: #33a7a7; line-height: 24px; text-align: right; &.red { color: #ad78a6; } } .cbb_bottom { .cbbb_item { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-top: 10px; min-height: 64px; .ci_l { width: calc(100% - 42px); font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 10px; color: #252525; line-height: 16px; padding-right: 10px; box-sizing: border-box; } .ci_r { width: 42px; height: 42px; .circle { position: relative; width: 39px; height: 39px; border-radius: 50%; border: 3px solid #ffe796; background-color: transparent; } .semi-circle { position: absolute; top: -3px; right: -3px; width: 39px; height: 39px; border-radius: 100%; background: conic-gradient( #33a7a7 0deg, /* 起始点 */ #33a7a7 calc(var(--percentage, 0) * 3.6deg), /* 切割范围 */ transparent calc(var(--percentage, 0) * 3.6deg), /* 切割的部分,使用透明 */ transparent 360deg /* 圆的结束 */ ); z-index: 2; &.red { background: conic-gradient( #ad78a6 0deg, /* 起始点 */ #ad78a6 calc(var(--percentage, 0) * 3.6deg), /* 切割范围 */ transparent calc(var(--percentage, 0) * 3.6deg), /* 切割的部分,使用透明 */ transparent 360deg /* 圆的结束 */ ); } } .number { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #ffffff; font-family: PingFang-SC, PingFang-SC; font-weight: 800; font-size: 18px; color: #33a7a7; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; &.red { color: #ad78a6; } } } } } } } .jxpjmddj_box { border-radius: 0px 6px 0px 6px; border: 1px solid #e5e7eb; margin-top: 20px; padding: 8px; .jb_title { font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 12px; color: #252525; line-height: 16px; } .jb_title2 { margin-top: 12px; font-family: PingFangSC, PingFang SC; font-weight: bold; font-size: 20px; color: #833479; line-height: 16px; } .jb_text { font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 10px; color: #252525; line-height: 16px; margin-top: 10px; } } .xxfx_title { margin-top: 40px; .xt_pre { width: 58px; font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 16px; color: #666666; line-height: 16px; text-align: center; } } .xxfx_list { .xl_item { margin-top: 20px; .xli_l { width: 177px; .xl_pre { width: 58px; font-family: PangMenZhengDaoBiaoTiTiMianFeiBan, PangMenZhengDaoBiaoTiTiMianFeiBan; font-weight: bolder; font-size: 20px; color: #666666; line-height: 16px; text-align: center; &.red { color: #33a7a7; } } } .xli_r { width: calc(100% - 177px); .xr_p { font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 10px; color: #252525; line-height: 10px; } .xr_tb { width: 100%; height: 4px; margin-top: 26px; position: relative; .xt_pre { width: calc(100% / 3); height: 100%; &.p1 { background: #33a7a7; } &.p2 { background: rgba(118, 30, 106, 0.6); } &.p3 { background: #ffe796; } } .xt_score { position: absolute; left: 14px; top: -20px; .xts_num { background: #ffffff; box-shadow: 0px 4px 10px 0px rgba(118, 30, 106, 0.08); border-radius: 8px; border: 1px solid rgba(131, 52, 120, 0.19); font-family: PangMenZhengDao, PangMenZhengDao; font-weight: bold; font-size: 12px; line-height: 16px; padding: 10px 8px; white-space: nowrap; &.red { color: #33a7a7; } &.green { color: #ad78a6; } } .xts_box { flex: 1; height: 13px; background: #8f2e7c; } } } } } } .next_box { margin-top: 10px; background: rgba(118, 30, 106, 0.05); border-radius: 0px 6px 0px 6px; padding: 8px 8px; .nb_title { font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 12px; color: #33a7a7; line-height: 16px; } .nb_p { font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 10px; color: #111111; line-height: 16px; margin-top: 6px; } .nb_sj { font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 10px; color: #252525; line-height: 20px; padding-left: 18px; } } .next_tip { font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 10px; color: #252525; line-height: 16px; margin-top: 20px; } .team_title { margin-top: 20px; font-size: 20px; font-weight: bold; line-height: 24px; color: #111111; } .team_p { font-size: 10px; line-height: 16px; color: #111111; margin-top: 6px; } .cc_table { margin-top: 11px; table { width: 100%; border-collapse: separate; border-spacing: 1px; background-color: #efefef; tr { td { font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 10px; color: #111111; line-height: 16px; min-height: 28px; background: #ffffff; padding: 5px 5px; &.red { background: #33a7a7; color: #ffffff; } &.pink { width: 58px; background: #dcbad4; } &.yellow { background: #ffd750; } &.th { text-align: center; } &.title { width: 27px; text-align: center; } } } } } .team_table { margin-top: 10px; table { width: 100%; border-collapse: separate; border-spacing: 1px; background-color: #efefef; tr { td { font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 10px; color: #252525; line-height: 16px; padding: 6px 10px; background: #ffffff; &.mw { width: 50px; padding: 5px; } &.tc { height: 140px; } } &.th td { background: #33a7a7; color: #ffffff; } } } } .ztzdfx_box { width: 320px; margin-top: 16px; .zb_text { font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 12px; color: #009191; line-height: 24px; } .zb_title { font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 10px; color: #252525; line-height: 10px; margin-top: 6px; } .zb_line { width: 100%; height: 1px; background: #1d2129; margin-top: 9px; } .zb_pre { margin-top: 8px; .zbp_dian { width: 10px; height: 10px; border-radius: 5px; &.zd1 { background: #ffd650; } &.zd2 { background: #751e6a; } &.zd3 { background: #012846; } } span { font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 10px; color: #252525; line-height: 10px; margin-left: 8px; } } .zb_memo { font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 10px; color: #252525; line-height: 14px; margin-top: 7px; } } .cb_content { &.box_dj { .mddj_title span { color: #833479; } .p3 { color: #111111; } .mbi_title { background: #833479; font-weight: bold; font-size: 10px; color: #ffffff; line-height: 14px; } .mb_item { border-bottom: 1px dotted #833479; } } &.box_wbjg { .mddj_title span { color: #009191; } .p3 { color: #111111; } .mbi_title { background: #009191; font-weight: bold; font-size: 10px; color: #ffffff; line-height: 14px; } .mb_item { border-bottom: 1px dotted #009191; } } &.box_gx { .mddj_title span { color: #002846; } .p3 { color: #111111; } .mbi_title { background: #002846; font-weight: bold; font-size: 10px; color: #ffffff; line-height: 14px; } .mb_item { border-bottom: 1px dotted #002846; } } &.box_nbjg { .mddj_title span { color: #ffd750; } .p3 { color: #111111; } .mbi_title { background: #ffd750; font-weight: bold; font-size: 10px; color: #ffffff; line-height: 14px; } .mb_item { border-bottom: 1px dotted #ffd750; } .mbi_title { color: #252525; } } &.box_xx { .mddj_title span { color: #afcdf5; } .p3 { color: #111111; } .mbi_title { background: #afcdf5; font-weight: bold; font-size: 10px; color: #ffffff; line-height: 14px; } .mb_item { border-bottom: 1px dotted #afcdf5; } .mbi_title { color: #252525; } } &.box_ldl { .mddj_title span { color: #898989; } .p3 { color: #111111; } .mbi_title { background: #898989; font-weight: bold; font-size: 10px; color: #ffffff; line-height: 14px; } .mb_item { border-bottom: 1px dotted #898989; } .mbi_title { color: #fff; } } &.other { .mddj_title span { font-weight: 800; font-size: 32px; color: #252525; line-height: 32px; } .nb_title { font-weight: bold; font-size: 12px; color: #252525; line-height: 16px; } .next_box { background: #f7fafe; } } } .v2-top { width: 100%; height: 49px; background-repeat: no-repeat; background-size: 100% 100%; padding: 0 8px 0 32px; box-sizing: border-box; .vt-left { font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 24px; color: #ffffff; span { font-family: PingFangSC, PingFang SC; font-weight: 600; font-size: 20px; color: #199c9c; margin-left: 40px; } &.black { color: #002846; } } .vt-right { font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 8px; color: #002846; line-height: 14px; text-align: right; } } .v2-box { margin-top: 13px; background: #ffffff; border-radius: 10px; border: 1px solid #33a7a7; padding: 16px 16px 18px; position: relative; .vb-img1 { width: 48px; height: 6px; position: absolute; left: 12px; top: -3px; } .vb-img2 { width: 44px; height: 20px; position: absolute; left: 16px; bottom: -10px; } } .v2-p { font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 10px; color: #002846; line-height: 16px; span { font-family: DIN, DIN; font-weight: bold; font-size: 14px; color: #009191; line-height: 14px; margin: 0 10px; } } .v2-p2 { font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 12px; color: #002846; line-height: 16px; } .v2-p3 { font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 14px; color: #002846; line-height: 20px; } .v2-six { flex: 1; margin-top: 29px; background: #f1f9f9; border-radius: 10px; position: relative; padding: 46px 16px 25px; .vsix-title { width: 234px; height: 42px; background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/intro_box_title_bg.png') no-repeat; background-size: 100% 100%; font-family: PingFangSC, PingFang SC; font-weight: 600; font-size: 20px; color: #ffffff; line-height: 42px; text-align: center; position: absolute; left: 50%; margin-left: -117px; top: -10px; } .vsix-p { font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 10px; color: #002846; line-height: 16px; } .vsix-boxs { margin-top: 16px; overflow: hidden; .vsb { margin-top: 2px; background: #ffffff; border-radius: 8px; padding: 12px 16px 12px 24px; .vsb-img { width: 48px; height: 48px; } .vsb-right { width: calc(100% - 77px); margin-left: 29px; padding-left: 24px; box-sizing: border-box; position: relative; &::before { content: ''; width: 1px; height: 48px; background: #e6eaed; position: absolute; left: 0; top: 50%; margin-top: -24px; } .vsbr-top { .vsbrt-type { width: 24px; height: 24px; border-radius: 4px; font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 20px; color: #ffffff; line-height: 24px; text-align: center; } .vsbrt-title { font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 14px; line-height: 16px; margin-left: 8px; } } .vsbr-desc { font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 10px; color: #002846; line-height: 16px; margin-top: 10px; } } } } } .v2-data { background: #ffffff; border-radius: 10px; border: 1px solid #aedada; width: calc(100% - 9px); padding: 46px 16px 16px; box-sizing: border-box; margin: 27px 0 0 8px; position: relative; .vd-title { width: 134px; height: 44px; background-size: 100%; font-family: PingFangSC, PingFang SC; font-weight: 600; font-size: 18px; color: #ffffff; line-height: 30px; padding-left: 24px; box-sizing: border-box; position: absolute; top: -1px; left: -9px; &.vt2 { width: 224px; } &.vt3 { line-height: 36px; } &.black { color: #002846; } } } .vd-wd { margin-top: 8px; width: 100%; height: 34px; border-radius: 6px; padding: 0 10px; box-sizing: border-box; .vdwd-pre { width: 30%; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 12px; color: #4d697e; line-height: 34px; text-align: left; &.vp { width: 40%; } span { font-family: DIN, DIN; font-weight: bold; font-size: 14px; color: #002846; line-height: 20px; } } } .vb-table { margin-top: 11px; border: 1px solid #ffe796; border-radius: 4px; .vbt-pre { height: 44px; .vbtp-left { width: 110px; height: 44px; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 10px; color: #ffffff; line-height: 14px; border-bottom: 1px solid #ffffff; box-sizing: border-box; &.black { color: #002846; } } .vbtp-right { width: calc(100% - 110px); height: 44px; padding: 0 18px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; .vbtpr-title { font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 9px; color: #193d59; line-height: 10px; } .vbtpr-jd { margin-top: 7px; width: 100%; height: 6px; background: #f0f2f8; border-radius: 3px; position: relative; .vj_num { position: absolute; height: 6px; left: 0; top: 0; } .vj-val { background: #ffffff; border-radius: 4px; padding: 4px 7px; font-family: DIN, DIN; font-weight: bold; font-size: 12px; color: #002846; line-height: 10px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; } } } &:last-child { .vbtp-left, .vbtp-right { border: none; } } } .vbt-th { height: 26px; border-radius: 4px 4px 0px 0px; border-bottom: 1px solid #ffffff; & > view { font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 10px; color: #ffffff; line-height: 26px; text-align: center; } &.black { & > view { color: #002846; } } } .vbtt-w1 { width: 72px !important; } .vbtt-w2 { width: 46px !important; } .vbtt-w3 { flex: 1 !important; } .vbtp-num { font-family: DIN, DIN; font-weight: bold; font-size: 14px; color: #667e90; text-align: center; line-height: 44px; &.green { color: #199c9c; } } .vbtp-desc { height: 44px; flex: 1; display: flex; flex-direction: column; justify-content: center; .vbtpd-title { font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 9px; color: #193d59; line-height: 10px; } .xr_tb { width: calc(100% - 20px); height: 4px; margin-top: 11px; position: relative; .xt_pre { width: calc(100% / 3); height: 100%; &.p1 { background: #ba8eb4; } &.p2 { background: #66bdbd; } &.p3 { background: #afcdf5; } } .xt_score { position: absolute; left: 14px; top: -9px; .xts_num { background: #ffffff; box-shadow: 0px 4px 10px 0px rgba(118, 30, 106, 0.08); border-radius: 4px; border: 1px solid rgba(131, 52, 120, 0.19); font-family: DIN, DIN; font-weight: bold; font-size: 12px; color: #904a87; line-height: 10px; padding: 4px 7px; white-space: nowrap; &.red { color: #904a87; } &.green { color: #199c9c; } } .xts_box { flex: 1; height: 8px; background: #199c9c; } } } } } .vb-category { position: absolute; top: 80px; left: 16px; .vbc-pre { margin-top: 16px; .vbcp-yuan { width: 10px; height: 10px; border-radius: 5px; &.y1 { background: #9f6196; } &.y2 { background: #afcdf5; } &.y3 { background: #ffd650; } &.y4 { background: #012846; } } .vbcp-text { font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 12px; color: #002846; line-height: 10px; margin-left: 8px; } } } } .cd_box{ width: 100%; color: #A1A1A1; }