add global scss an container class

src/views/questioncenter/AnswerDetails.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="padding: 20px">
+  <div style="padding: 20px" class=".answer-details-container">
     <!-- 头部 -->
     <el-card>
       <div class="header">

src/views/questioncenter/practice-answer-detail.scss

@@ -1,152 +1,182 @@
-.header_tit {
-  padding: 16px 32px 16px 20px;
-  border-bottom: 1px solid #b7b7b7;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-weight: 500;
-  color: #343434;
-}
-.more {
-  color: white;
-  background: #47c6a2;
-  right: 32px;
-  padding: 6px 16px;
-  border-radius: 16px;
-}
-.basic_info {
-  width: 100%;
-  text-align: left;
-  padding: 36px 21px;
-}
-.basic_info tr {
-  font-size: 12px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #717171;
-  line-height: 17px;
-}
-.basic_info td {
-  font-size: 21px;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
-  color: #343434;
-  line-height: 29px;
-}
-.info {
-  margin-top: 16px;
-  padding: 0;
-}
-.view {
-  cursor: pointer;
-  color: #47c6a2;
-  display: flex;
-  align-items: center;
-}
-.view img {
-  margin-right: 5px;
-  height: 100%;
-}
-.prase {
-  border: 2px solid #47c6a2;
-  display: flex;
-  margin-top: 24px;
-}
-.prase .jiexi {
-  background: #47c6a2;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0 22px;
-  color: white;
-}
-.prase div:last-child {
-  padding: 10px;
-}
-.empty-box {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.que_tit {
-  display: flex;
-  position: relative;
-}
-.que_tit .fix {
-  position: absolute;
-  right: 0;
-}
-.que_tit .fix > span:first-child {
-  background: #47c6a2;
-  color: white;
-  padding: 4px;
-  border-radius: 3px;
-  margin-right: 28px;
-}
-.btn {
-  display: flex;
-  justify-content: center;
-  margin-top: 16px;
-}
-.btn span {
-  padding: 14px 29px;
-  color: white;
-  background: #47c6a2;
-  border-radius: 4px;
-  cursor: pointer;
-}
-.center {
-  width: 1000px;
-}
-.option-list {
-  margin-top: 10px;
-}
-.option-item {
-  line-height: 30px;
-}
-.option-symbol {
-  margin-right: 10px;
-}
+.answer-details-container {
+  .header_tit {
+    padding: 16px 32px 16px 20px;
+    border-bottom: 1px solid #b7b7b7;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 500;
+    color: #343434;
+  }
 
-.que_item {
-  border-radius: 1px;
-  border: 1px solid #dedede;
-  margin-bottom: 8px;
-}
-.que_content {
-  padding: 12px 24px 0 33px;
-  font-size: 14px;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
-  color: #4c4c4c;
-  line-height: 27px;
-  margin-bottom: 40px;
-}
-.options {
-  padding-left: 36px;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #4c4c4c;
-  line-height: 27px;
-}
-.options .option {
-  margin-bottom: 10px;
-}
-.paper_questions {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.que_item {
-  width: 100%;
-}
-.is-correct {
-  padding: 10px 36px;
-}
-.correct-text.success {
-  color: #47c6a2;
-}
-.correct-text.error {
-  color: crimson;
+  .more {
+    color: white;
+    background: #47c6a2;
+    right: 32px;
+    padding: 6px 16px;
+    border-radius: 16px;
+  }
+
+  .basic_info {
+    width: 100%;
+    text-align: left;
+    padding: 36px 21px;
+  }
+
+  .basic_info tr {
+    font-size: 12px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #717171;
+    line-height: 17px;
+  }
+
+  .basic_info td {
+    font-size: 21px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #343434;
+    line-height: 29px;
+  }
+
+  .info {
+    margin-top: 16px;
+    padding: 0;
+  }
+
+  .view {
+    cursor: pointer;
+    color: #47c6a2;
+    display: flex;
+    align-items: center;
+  }
+
+  .view img {
+    margin-right: 5px;
+    height: 100%;
+  }
+
+  .prase {
+    border: 2px solid #47c6a2;
+    display: flex;
+    margin-top: 24px;
+  }
+
+  .prase .jiexi {
+    background: #47c6a2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 22px;
+    color: white;
+  }
+
+  .prase div:last-child {
+    padding: 10px;
+  }
+
+  .empty-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .que_tit {
+    display: flex;
+    position: relative;
+  }
+
+  .que_tit .fix {
+    position: absolute;
+    right: 0;
+  }
+
+  .que_tit .fix > span:first-child {
+    background: #47c6a2;
+    color: white;
+    padding: 4px;
+    border-radius: 3px;
+    margin-right: 28px;
+  }
+
+  .btn {
+    display: flex;
+    justify-content: center;
+    margin-top: 16px;
+  }
+
+  .btn span {
+    padding: 14px 29px;
+    color: white;
+    background: #47c6a2;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .center {
+    width: 1000px;
+  }
+
+  .option-list {
+    margin-top: 10px;
+  }
+
+  .option-item {
+    line-height: 30px;
+  }
+
+  .option-symbol {
+    margin-right: 10px;
+  }
+
+  .que_item {
+    border-radius: 1px;
+    border: 1px solid #dedede;
+    margin-bottom: 8px;
+  }
+
+  .que_content {
+    padding: 12px 24px 0 33px;
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #4c4c4c;
+    line-height: 27px;
+    margin-bottom: 40px;
+  }
+
+  .options {
+    padding-left: 36px;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #4c4c4c;
+    line-height: 27px;
+  }
+
+  .options .option {
+    margin-bottom: 10px;
+  }
+
+  .paper_questions {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .que_item {
+    width: 100%;
+  }
+
+  .is-correct {
+    padding: 10px 36px;
+  }
+
+  .correct-text.success {
+    color: #47c6a2;
+  }
+
+  .correct-text.error {
+    color: crimson;
+  }
 }

src/views/questioncenter/practice-style.scss

@@ -1,137 +1,161 @@
 .preview_container {
   padding: 20px;
-}
-.paper_header {
-  overflow: hidden;
-  margin-bottom: 33px;
-}
-.paper_title {
-  height: 25px;
-  font-size: 18px;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
-  color: #292929;
-  line-height: 25px;
-  float: left;
-}
-.operation {
-  float: right;
-}
-.shoucan {
-  display: flex;
-  align-items: center;
-  margin-right: 53px;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-}
-.shoucan img {
-  margin-right: 6px;
-  cursor: pointer;
-}
-.shoucan .sc_text {
-  color: #9f9f9f;
-  line-height: 20px;
-  cursor: pointer;
-  margin-right: 28px;
-}
-.shoucan .btn {
-  padding: 6px 20px;
-  cursor: pointer;
-  background: #47c6a2;
-  color: white;
-  border-radius: 4px;
-}
-.que_item {
-  border-radius: 1px;
-  border: 1px solid #dedede;
-  margin-bottom: 8px;
-}
-.que_content {
-  padding: 12px 24px 0 33px;
-  font-size: 14px;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
-  color: #4c4c4c;
-  line-height: 27px;
-  margin-bottom: 40px;
-}
-.options {
-  padding-left: 36px;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #4c4c4c;
-  line-height: 27px;
-}
-.options .option {
-  margin-bottom: 10px;
-}
 
-.operation {
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #47c6a2;
-  line-height: 20px;
-}
-.operation > div {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-.operation .shoucan {
-  margin-right: 46px;
-}
-.operation .detail span {
-  border-radius: 1px;
-  border-bottom: 1px solid #47c6a2;
-}
-.operation .detail {
-  margin-right: 32px;
-}
-.operation > div > img {
-  margin-right: 10px;
-}
-.operation .addQue {
-  padding: 7px;
-  border-radius: 4px;
-  border: 1px solid #979797;
-  margin-right: 24px;
-}
-.info {
-  padding: 12px 40px;
-}
-.que_item p {
-  margin: 0 !important;
-}
-.save {
-  display: flex;
-  justify-content: center;
-}
-.save span {
-  padding: 20px;
-  background: #47c6a2;
-  color: white;
-  cursor: pointer;
-}
-.exam_time {
-  position: fixed;
-  right: 0;
-  color: white;
-  background: #47c6a2;
-  top: 50%;
-  padding: 5px 10px;
-}
+  .paper_header {
+    overflow: hidden;
+    margin-bottom: 33px;
+  }
 
-.paper_questions .options .el-radio {
-  display: flex;
-}
-.paper_questions .options .el-radio:hover {
-  color: #47c6a2;
-}
-.paper_questions .options .el-radio__label {
-  display: flex;
+  .paper_title {
+    height: 25px;
+    font-size: 18px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #292929;
+    line-height: 25px;
+    float: left;
+  }
+
+  .operation {
+    float: right;
+  }
+
+  .shoucan {
+    display: flex;
+    align-items: center;
+    margin-right: 53px;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+  }
+
+  .shoucan img {
+    margin-right: 6px;
+    cursor: pointer;
+  }
+
+  .shoucan .sc_text {
+    color: #9f9f9f;
+    line-height: 20px;
+    cursor: pointer;
+    margin-right: 28px;
+  }
+
+  .shoucan .btn {
+    padding: 6px 20px;
+    cursor: pointer;
+    background: #47c6a2;
+    color: white;
+    border-radius: 4px;
+  }
+
+  .que_item {
+    border-radius: 1px;
+    border: 1px solid #dedede;
+    margin-bottom: 8px;
+  }
+
+  .que_content {
+    padding: 12px 24px 0 33px;
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #4c4c4c;
+    line-height: 27px;
+    margin-bottom: 40px;
+  }
+
+  .options {
+    padding-left: 36px;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #4c4c4c;
+    line-height: 27px;
+  }
+
+  .options .option {
+    margin-bottom: 10px;
+  }
+
+  .operation {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #47c6a2;
+    line-height: 20px;
+  }
+
+  .operation > div {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .operation .shoucan {
+    margin-right: 46px;
+  }
+
+  .operation .detail span {
+    border-radius: 1px;
+    border-bottom: 1px solid #47c6a2;
+  }
+
+  .operation .detail {
+    margin-right: 32px;
+  }
+
+  .operation > div > img {
+    margin-right: 10px;
+  }
+
+  .operation .addQue {
+    padding: 7px;
+    border-radius: 4px;
+    border: 1px solid #979797;
+    margin-right: 24px;
+  }
+
+  .info {
+    padding: 12px 40px;
+  }
+
+  .que_item p {
+    margin: 0 !important;
+  }
+
+  .save {
+    display: flex;
+    justify-content: center;
+  }
+
+  .save span {
+    padding: 20px;
+    background: #47c6a2;
+    color: white;
+    cursor: pointer;
+  }
+
+  .exam_time {
+    position: fixed;
+    right: 0;
+    color: white;
+    background: #47c6a2;
+    top: 50%;
+    padding: 5px 10px;
+  }
+
+  .paper_questions .options .el-radio {
+    display: flex;
+  }
+
+  .paper_questions .options .el-radio:hover {
+    color: #47c6a2;
+  }
+
+  .paper_questions .options .el-radio__label {
+    display: flex;
+  }
 }