.troubleItemComponent{ width: 1396px; height: 608px; border: 1px solid #e5e5e5; background-color: #ffffff; border-radius: 20px; overflow: hidden; padding: 42px 45px 0 45px; position: relative; } .troubleItemComponent .border_e5{ border: 2px solid #e5e5e5; border-radius: 10px; } .troubleItemComponent .border_dashed_e5{ border: 2px dashed #e5e5e5; border-radius: 10px; } .troubleItemComponent .rel{ position: relative; padding-left: 44px; } .troubleItemComponent .itemText{ font-weight: bold; } .troubleItemComponent .itemWrongInfo{ height: 86px; position: relative; } .troubleItemComponent .itemWrongInfo>p{ line-height: 32px; top: 50%; transform: translateY(-50%); position: absolute; } .troubleItemComponent .star{ display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); left: 0; } .troubleItemComponent .jugdeQuestion{ height: 61px; line-height: 61px; margin-bottom: 30px; } .troubleItemComponent .jugdeQuestion .questionBox{ height: 100%; width: 161px; text-align: center; display: inline-block; margin-left: 30px; } .troubleItemComponent .jugdeQuestion .questionBox.active{ border-color: #26ce61; } .troubleItemComponent .itemTextArea{ height: 198px; margin-bottom: 29px; } .troubleItemComponent .itemTextAreaBox{ width: 1250px; height: 100%; display: inline-block; background-color: #f2f2f2; padding: 20px; overflow: hidden; } .itemTextAreaBoxs{ background-color: #f2f2f2; border: none; resize: none; width: 100%; height: 100%; line-height: 40px; text-align: justify; } .troubleItemComponent .itemTextArea .itemPlayceHolder{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .troubleItemComponent .itemTextArea .itemTextEdit{ text-align: right; position: absolute; line-height: 57px; top: -57px; right: 46px; } .troubleItemComponent .itemControl .controlBox{ width: 90px; height: 90px; position: relative; display: inline-block; margin-right: 30px; } .troubleItemComponent .itemControl .controlBox>img{ position: absolute; width: 90px; height: 90px; top: 50%; left: 50%; transform: translate(-50%,-50%); } .troubleItemComponent .finishBox{ display: none; position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 63px solid #26ce61; border-bottom: 63px solid transparent; border-left: 63px solid transparent; border-right: 63px solid #26ce61; } .troubleItemComponent .finishBox .finishText{ position: absolute; text-align: center; width: 178px; height: 178px; line-height: 126px; left: -89px; top: -89px; transform: rotate(45deg); } .troubleItemComponent.finish{ border: 3px solid #26ce61; } .troubleItemComponent.finish .finishBox{ display: block; }