样式

src/components/pages/liveRoom.vue

@@ -1,17 +1,23 @@
 <template>
-  <div
-    style="
-      background: #D0D6E4;
-      width: 100%;
-      margin: 0;
-      position: relate;
-    "
-  >
+  <div style="background: #d0d6e4; width: 100%; margin: 0; position: relate">
     <!-- <div class="pb_content_body" style="height: 100%">
     </div>-->
     <div class="blackBottom">
-      <div style="color: #fff; line-height: 45px; padding-left: 15px">
-        人工智能风车实践课程
+      <div
+        style="
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          align-items: flex-end;
+          padding-left: 10px;
+        "
+      >
+        <div class="logoLive">
+          <img src="../../assets/icon/logo.png" alt="" />
+        </div>
+        <div style="color: #fff; line-height: 45px; padding-left: 15px">
+          人工智能风车实践课程
+        </div>
       </div>
     </div>
     <div class="isNoOther">
@@ -47,8 +53,12 @@
 
           <div class="answerBox" v-if="type == 1">
             <div class="answerTimuBox" v-for="item in 1" :key="item">
-              <div>{{ item }}、风车是怎么运行的？</div>
-              <el-button style="margin-right: 30px" @click="showMember(item)"
+              <div>
+                {{
+                  item
+                }}、小明有3本不同的语文书，2本不同的数学书，4本不同的英语书，小明整理书架时，要把这些书放在同一层，且相同科目的书要相邻摆放，问共有多少种摆放方式？
+              </div>
+              <el-button style="margin: 0 auto" @click="showMember(item)"
                 >开始答题</el-button
               >
             </div>
@@ -103,6 +113,7 @@
             <AnswerData :problemJson="answerJson"></AnswerData>
           </div>
           <span slot="footer" class="dialog-footer sztFooter">
+            <el-button type="primary" @click="type = 0">下一步</el-button>
             <el-button type="primary" @click="type = 2">返回</el-button>
           </span>
         </div>
@@ -168,9 +179,19 @@
     </div>
 
     <div class="blackBottomB">
-      <div class="blackButton" @click="answerWork">开始答题</div>
-      <div class="blackButton" @click="(steps = 1), (type = 0)">查看工具</div>
-      <div class="blackButton" @click="checkStudentAnswer">选择学生回答</div>
+      <div style="display: flex">
+        <div class="blackButton" @click="answerWork">开始答题</div>
+        <div class="blackButton" @click="(steps = 1), (type = 0)">查看工具</div>
+        <div class="blackButton" @click="checkStudentAnswer">选择学生回答</div>
+        <div class="blackButton" @click="dialogVisible1 = true">查看作业</div>
+      </div>
+      <div
+        class="blackButton"
+        style="margin-right: 10px"
+        @click="dialogVisible2 = true"
+      >
+        查看报告
+      </div>
     </div>
     <el-dialog
       title="选择答题"
@@ -200,6 +221,60 @@
         确定
       </div>
     </el-dialog>
+    <el-dialog
+      :visible.sync="dialogVisible1"
+      :append-to-body="true"
+      width="500px"
+      :before-close="handleClose"
+      class="dialog_diy"
+    >
+      <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">
+        正在开发中！
+      </div>
+      <div
+        style="
+          width: 200px;
+          background: #4d8ae0;
+          height: 35px;
+          margin: 0 auto;
+          text-align: center;
+          line-height: 35px;
+          color: #fff;
+          border-radius: 5px;
+          cursor: pointer;
+        "
+        @click="dialogVisible1 = false"
+      >
+        确定
+      </div>
+    </el-dialog>
+    <el-dialog
+      :visible.sync="dialogVisible2"
+      :append-to-body="true"
+      width="500px"
+      :before-close="handleClose"
+      class="dialog_diy"
+    >
+      <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">
+        课程结束后才有报告！
+      </div>
+      <div
+        style="
+          width: 200px;
+          background: #4d8ae0;
+          height: 35px;
+          margin: 0 auto;
+          text-align: center;
+          line-height: 35px;
+          color: #fff;
+          border-radius: 5px;
+          cursor: pointer;
+        "
+        @click="dialogVisible2 = false"
+      >
+        确定
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -224,6 +299,15 @@ export default {
       steps: 0,
       answerType: 1,
       dialogVisible: false,
+      dialogVisible1: false,
+      dialogVisible2: false,
+      answerBox: "",
+      answer: [
+        { name: "A.1568" },
+        { name: "B.720" },
+        { name: "C.1728" },
+        { name: "D.480" },
+      ],
       studentArray: [
         { name: "张可松", is: 1 },
         { name: "陈佳佳", is: 1 },
@@ -426,7 +510,7 @@ export default {
   color: #fff;
 }
 .dialog_diy >>> .el-dialog__headerbtn {
-  top: 19px;
+  top: 9px;
 }
 .dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
   color: #fff;
@@ -449,7 +533,8 @@ export default {
 
 .imgMiddle > img,
 .imghalf > img,
-.szt > img {
+.szt > img,
+.logoLive > img {
   width: 100%;
   height: 100%;
   max-height: 920px;
@@ -463,7 +548,7 @@ export default {
   flex-direction: row;
   flex-wrap: wrap;
   align-content: center;
-  justify-content: flex-start;
+  justify-content: space-between;
   align-items: center;
   background: rgb(0, 0, 0);
   height: 45px;
@@ -476,7 +561,7 @@ export default {
 
 .blackButton {
   color: #fff;
-  background: rgb(179, 62, 117);
+  background: #066ebe;
   width: 100px;
   height: 30px;
   line-height: 30px;
@@ -507,10 +592,10 @@ export default {
 }
 .answerTimuBox {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   flex-wrap: nowrap;
-  align-items: center;
-  justify-content: space-between;
+  align-items: flex-start;
+  justify-content: flex-start;
   padding-bottom: 15px;
 }
 .memberBox {
@@ -592,4 +677,17 @@ export default {
   left: 40%;
   cursor: pointer;
 }
+.logoLive {
+  width: 35px;
+}
+.anserBoxCss {
+  box-sizing: border-box;
+  padding: 20px 0;
+}
+.anserBoxCss >>> .el-radio__label {
+  font-size: 18px;
+}
+.anserBoxCss >>> .el-radio__inner {
+  border-radius: 0px !important;
+}
 </style>