$borderColor: rgba(0, 0, 0, 0.06);; .box{ display: flex; .left{ width: 240px; margin-right: 24px; } .left{ .title{ padding: 16px 24px; font-size: 16px; color: rgba(0, 0, 0, 0.85); } .time{ font-size: 14px; color: #CC221C; text-align: center; } .progress{ padding: 16px; margin: 0 24px 24px; box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.04); .ans{ margin-bottom: 8px; font-size: 14px; color: rgba(0, 0, 0, 0.85); text-align: center; } } .item{ padding: 16px 24px; margin-bottom: 10px; border-bottom: 1px solid $borderColor; &:first-child{ border-top: 1px solid $borderColor; } .type{ margin-bottom: 13px; color: rgba(0, 0, 0, 0.85); font-size: 14px; } .nums{ display: flex; flex-wrap: wrap; span{ width: 32px; margin: 0 8px 8px 0; line-height: 30px; text-align: center; color: rgba(0, 0, 0, 0.25); font-size: 14px; box-sizing: border-box; border: 1px solid #e6e6e6; border-radius: 50%; } .active{ color: #fff; background-color: #CC221C; border-color: #CC221C; } } } .btn{ margin: 20px 0; text-align: center; } } .right{ width: calc(100% - 264px); height: calc(100vh - 164px); overflow: auto; .title{ padding: 16px 24px; font-size: 16px; color: rgba(0, 0, 0, 0.85); border-bottom: 1px solid $borderColor; } .ques-wrap{ padding: 0 24px; .ques{ margin: 16px 0; } .name-wrap{ display: flex; align-items: center; margin-bottom: 10px; font-size: 16px; color: rgba(0, 0, 0, 0.85); .index{ font-size: 16px; color: rgba(0, 0, 0, 0.85); } /deep/.input{ width: 100px; height: 28px; padding: 0 5px; margin: 0 5px; color: #444; background-color: #fff; border: 1px solid #ebebeb; box-sizing: border-box; &:focus{ outline: none; } &:disabled{ background-color: #e8e8e8; cursor: not-allowed; } } } .options{ margin-top: 10px; font-size: 14px; color: #8b8b8b; .option{ margin: 5px 0; &.selected{ font-weight: bold; color: #555; } .el-radio-group{ display: flex; flex-direction: column; .el-radio{ margin: 3px 0; } } } .option-check{ display: block; margin-right: 6px; } /deep/.el-radio__label{ padding-left: 6px; } .upload{ margin: 20px 0 10px; } } } } }