style:修改投票的参与情况样式

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="container">
-    <div id="nav">
+    <!-- <div id="nav">
       <router-link
         v-for="item in routes"
         :key="item.path"
@@ -12,7 +12,7 @@
       >
         {{ item.name }}
       </router-link>
-    </div>
+    </div> -->
     <main>
       <router-view />
     </main>

src/views/ballot/ballot.vue

@@ -21,7 +21,7 @@
     <div class="detailinfo">
       <div class="detail">
         <div class="detailT">
-          <div style="margin-left: 48px; margin-right: 48px">
+          <div class="left">
             <div class="title">
               <img
                 width="20px"
@@ -173,20 +173,26 @@ export default {
   }
 
   .detailinfo {
-    width: calc(100% + 20px);
+    width: 100%;
     margin-top: 20px;
     display: flex;
     .detail {
       flex: 1;
-      margin-right: 20px;
+      // margin-right: 20px;
       .detailT {
         height: 1000px;
         background: #ffffff;
         border-radius: 8px;
         color: rgba(51, 51, 51, 1);
         display: flex;
+        .left {
+          margin-left: 48px;
+          flex: 1;
+        }
 
         .right {
+          width: 417px;
+          margin-right: 48px;
           .righttitle {
             display: flex;
             padding-top: 39px;
@@ -289,9 +295,11 @@ export default {
         .all {
           display: flex;
           justify-content: space-between;
-          width: 1280px;
+          // width: 1280px;
+          margin-right: 48px;
           margin-top: 43px;
           .allbox1 {
+            margin-right: 22px;
             background: linear-gradient(
               0deg,
               rgba(160, 193, 230, 0) 0%,
@@ -299,6 +307,7 @@ export default {
             );
           }
           .allbox2 {
+            margin-right: 22px;
             background: linear-gradient(
               0deg,
               rgba(177, 219, 229, 0) 0%,
@@ -313,7 +322,8 @@ export default {
             );
           }
           .item {
-            width: 410px;
+            // width: 410px;
+            width: calc(100% - 44px);
             height: 149px;
             text-align: center;
             border-radius: 4px;
@@ -331,7 +341,8 @@ export default {
           }
         }
         .join {
-          width: 1280px;
+          // width: 1280px;
+          margin-right: 48px;
           min-height: 408px;
           background: #f5f6f7;
           border-radius: 8px;

src/views/examination/ExamPage.vue

@@ -34,16 +34,81 @@
     <!-- 标题 -->
     <!-- 详细内容 -->
     <div class="bascinfo">
-      <div></div>
+      <!-- 中间盒子 -->
+      <div class="centercontent">
+        <div class="righttitle">
+          <img width="20px" height="20px" src="../../assets/image/yuan.png" />
+
+          <div class="text">考试测试</div>
+          <div class="box"></div>
+        </div>
+        <!-- 考试测试的盒子 -->
+        <div class="test clearfix">
+          <div class="detail">
+            <span style="margin-right: 43px">考试时间：30分钟</span>
+            <span>及格线：60</span>
+          </div>
+          <div class="testtime clearfix">
+            <div class="timedetail">
+              考试时间：2022-7-20 00:00 至 2022-8-29 23:59:59
+            </div>
+          </div>
+        </div>
+        <!-- 考试测试的盒子 -->
+
+        <!-- 开始考试按钮 -->
+        <button class="starttest">开始考试</button>
+        <!-- 开始考试按钮 -->
+        <div class="righttitle" style="padding-top: 80px">
+          <img width="20px" height="20px" src="../../assets/image/yuan.png" />
+
+          <div class="text">历史纪录</div>
+          <div class="box" style="top: 94px"></div>
+        </div>
+
+        <div class="history">
+          <div class="historytitle clearfix tongyi">
+            <div class="content1">提交时间</div>
+            <div class="content2">成绩</div>
+            <div class="content3">状态</div>
+            <div class="content4">操作</div>
+          </div>
+          <div class="historytitle2 clearfix tongyi">
+            <div class="content1">2022-7-20&nbsp;00:00</div>
+            <div class="content2">10分</div>
+            <div class="content3" style="left: 505px">已完成</div>
+            <button class="contentbtn">查看考卷</button>
+          </div>
+          <div class="fenge"></div>
+          <div class="historytitle2 clearfix tongyi">
+            <div class="content1">2022-7-18&nbsp;00:00</div>
+            <div class="content2">10分</div>
+            <div class="content3" style="left: 505px">已完成</div>
+            <button class="contentbtn">查看考卷</button>
+          </div>
+          <div class="fenge"></div>
+          <div
+            class="historytitle2 clearfix tongyi"
+            style="border-radius: 0px 0px 8px 8px"
+          >
+            <div class="content1">2022-7-14&nbsp;00:00</div>
+            <div class="content2">10分</div>
+            <div class="content3" style="left: 505px">已完成</div>
+            <button class="contentbtn">查看考卷</button>
+          </div>
+        </div>
+      </div>
     </div>
     <!-- 详细内容 -->
   </div>
 </template>
+
 <script>
 export default {
   name: "ExamPage",
 };
 </script>
+
 <style scoped lang="scss">
 .surveydetail {
   .crumb {
@@ -73,6 +138,7 @@ export default {
     margin-left: -11px;
   }
   .bascinfo {
+    min-height: 800px;
     width: 100%;
     background: #ffffff;
     border-radius: 8px;
@@ -80,6 +146,153 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center;
+    .clearfix:before,
+    .clearfix:after {
+      content: "";
+      display: table;
+      clear: both;
+    }
+    .centercontent {
+      position: relative;
+      .righttitle {
+        display: flex;
+        padding-top: 30px;
+        position: relative;
+        .text {
+          margin-left: 8px;
+          font-size: 16px;
+          color: rgba(51, 51, 51, 1);
+          font-weight: 800;
+        }
+        .box {
+          width: 75px;
+          height: 10px;
+          background-color: rgba(36, 120, 255, 0.15);
+          position: absolute;
+          left: 23px;
+          top: 44px;
+        }
+      }
+      .test {
+        margin-top: 16px;
+        margin-bottom: 26px;
+        width: 842px;
+        height: 158px;
+        background: #f2f5f7;
+        border-radius: 8px;
+        .detail {
+          margin-top: 29px;
+          margin-left: 44px;
+          height: 14px;
+          font-size: 14px;
+          font-family: PingFang SC;
+          font-weight: 500;
+          color: #56a3f9;
+        }
+        .testtime {
+          margin-top: 20px;
+          margin-left: 10px;
+          width: 823px;
+          height: 81px;
+          background: #ffffff;
+          border-radius: 0px 8px 0px 8px;
+          .timedetail {
+            font-size: 14px;
+            font-family: PingFang SC;
+            font-weight: 500;
+            color: #333330;
+            margin-top: 32px;
+            margin-left: 34px;
+          }
+        }
+      }
+      .starttest {
+        position: absolute;
+        width: 146px;
+        height: 46px;
+        background: #2478ff;
+        box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
+        border-radius: 4px;
+        border: 0;
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 800;
+        color: #ffffff;
+        left: calc(50% - 73px);
+      }
+      .history {
+        position: relative;
+        margin-top: 32px;
+        width: 842px;
+        height: 200px;
+        border: 1px solid #d7e5fd;
+        border-radius: 8px;
+        .clearfix:before,
+        .clearfix:after {
+          content: "";
+          display: table;
+          clear: both;
+        }
+        .fenge {
+          width: 841px;
+          border-top: 1px solid #d7e5fd;
+        }
+        .tongyi {
+          display: flex;
+        }
+        .content1 {
+          margin-top: 14px;
+          margin-left: 77px;
+        }
+        .content2 {
+          position: absolute;
+          margin-top: 14px;
+          left: 328px;
+        }
+        .content3 {
+          position: absolute;
+          margin-top: 14px;
+          left: 512px;
+        }
+        .content4 {
+          position: absolute;
+          margin-top: 14px;
+          left: 700px;
+        }
+        .contentbtn {
+          position: absolute;
+          margin-top: 14px;
+          left: 685px;
+          font-size: 15px;
+          // line-height: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #2478ff;
+          background-color: #fff;
+          border: 0;
+        }
+        .historycontent {
+          width: 59px;
+          height: 14px;
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          // font-weight: 400;
+          color: #333330;
+          line-height: 38px;
+        }
+        .historytitle {
+          width: 842px;
+          height: 50px;
+          background: #f2f5f7;
+          border-radius: 8px 8px 0px 0px;
+        }
+        .historytitle2 {
+          width: 842px;
+          height: 48px;
+          background: #fff;
+        }
+      }
+    }
   }
 }
 </style>

src/views/liveBroadcast/LiveBroadcast.vue

@@ -231,23 +231,25 @@ export default {
     align-items: center;
     .threeBtn {
       display: flex;
+      width: 490px;
       justify-content: space-between;
-    }
+      margin-right: 87px;
-    .btn {
+      .btn {
-      width: 146px;
+        width: 146px;
-      height: 46px;
+        height: 46px;
-      background: #2478ff;
+        background: #2478ff;
-      border-radius: 4px;
+        border-radius: 4px;
-      box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
+        box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
-      display: flex;
+        display: flex;
-      align-items: center;
+        align-items: center;
-      justify-content: center;
+        justify-content: center;
-      color: #fff;
+        color: #fff;
-      font-size: 14px;
+        font-size: 14px;
-      font-weight: 800;
+        font-weight: 800;
-      line-height: 24px;
+        line-height: 24px;
-      cursor: pointer;
+        cursor: pointer;
-      margin-right: 96px;
+        // margin-right: 96px;
+      }
     }
 
     .title {
@@ -257,6 +259,16 @@ export default {
       line-height: 24px;
       margin-left: -9px;
     }
+    @media screen and (max-width: 1030px) {
+      // .threeBtn {
+      //   margin-right: 30px;
+      // }
+      .title {
+        margin-bottom: -24px;
+      }
+    }
+    // @media screen and(max-width:) {
+    // }
     .time {
       font-size: 14px;
       color: #6e7b84;

src/views/testscore/TestScore.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="surveydetail">
+    <!-- 标题 -->
+    <div class="title">考试模式</div>
+    <!-- 标题 -->
+    <!-- 详细内容 -->
+    <div class="bascinfo">
+      <!-- 中间盒子 -->
+      <div class="centercontent clearfix">
+        <div class="gaptest">阶段性考试</div>
+        <div class="scorebox clearfix">
+          <div class="yourscore">您本次考试分数：</div>
+          <div class="score">84</div>
+          <div class="fen">分</div>
+        </div>
+      </div>
+    </div>
+    <!-- 详细内容 -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TestScore",
+};
+</script>
+
+<style scoped lang="scss">
+.surveydetail {
+  .title {
+    font-size: 20px;
+    font-weight: 800;
+    color: #ffffff;
+    line-height: 24px;
+    margin-top: 17px;
+    margin-left: 0px;
+  }
+  .bascinfo {
+    min-height: 800px;
+    width: 100%;
+    background: #ffffff;
+    border-radius: 8px;
+    margin-top: 24px;
+    display: flex;
+    // flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    .clearfix:before,
+    .clearfix:after {
+      content: "";
+      display: table;
+      clear: both;
+    }
+    .centercontent {
+      width: 842px;
+      height: 228px;
+      background: #f2f5f7;
+      border-radius: 8px;
+      position: relative;
+      .gaptest {
+        // margin-left: 362px;
+        font-size: 24px;
+        font-family: PingFang SC;
+        font-weight: 800;
+        color: #56a3f9;
+        position: absolute;
+        left: 50%;
+        top: 38px;
+        transform: translate(-50%, 0);
+      }
+      .scorebox {
+        width: 803px;
+        height: 111px;
+        background: #ffffff;
+        border-radius: 0px 8px 0px 8px;
+        margin-top: 94px;
+        margin-left: 20px;
+        display: flex;
+        .yourscore {
+          margin-top: 44px;
+          margin-left: 277px;
+          font-size: 18px;
+          font-family: PingFang SC;
+          font-weight: 800;
+          color: #56a3f9;
+        }
+        .score {
+          font-size: 48px;
+          font-family: PingFang SC;
+          font-weight: 800;
+          color: #ee423d;
+          margin-left: 20px;
+          margin-top: 26px;
+        }
+        .fen {
+          font-size: 18px;
+          font-weight: 600;
+          color: #ef4f4a;
+          margin-left: 20px;
+          margin-top: 54px;
+        }
+      }
+    }
+  }
+}
+</style>