.reportDetail { width: 100%; min-height: 100vh; --header-height: 62px; } .reportHead { position: fixed; left: 0; top: 0; width: 100%; display: flex; align-items: center; background: #fff; padding: 0 22px; height: var(--header-height); .backIcon { width: 32px; height: 32px; } .content { flex: 1; margin: 0 12px; .title { display: flex; align-items: center; .titleName { font-size: 16px; color: #131415; font-weight: 600; margin-right: 6px; } .titleLevel { border: 1px solid #01C1B5; border-radius: 2px; padding: 0 3px; line-height: 16px; font-size: 12px; color: #01C1B5; font-weight: normal; transform: scale(0.9); } } .score { margin-top: 4px; display: flex; align-items: center; span { font-size: 12px; color: #777777; } .total { font-weight: 500; color: #FF2F0E; } } } .right { display: flex; align-items: center; .fItem { color: #1A1A1A; font-size: 13px; display: flex; align-items: center; i { width: 16px; height: 16px; border-radius: 4px; border: 1px solid #88974C; background: rgba(253, 255, 171, 0.41); margin-right: 6px; } } .sItem { display: flex; align-items: center; color: #1A1A1A; font-size: 13px; margin-left: 20px; i { width: 16px; height: 16px; border-radius: 4px; background: rgba(16, 216, 203, 0.6); margin-right: 6px; } } .videoIcon { width: 71px; height: 28px; margin-left: 20px; cursor: pointer; } :global{ .van-switch{ margin-left: 6px; width: 25px; height: 13px; background-color: transparent!important; background-image: url("./image/guan.png"); background-repeat: no-repeat; background-size: 100% 100%; border-radius: 0; &.van-switch--on{ background-image: url("./image/kai.png"); } .van-switch__node{ display: none; } } } } } .scoreTable { padding-top: calc(var(--header-height) + 54px); background: #ECFDFC; }