修改样式

src/views/site/renKeJiaoCheng/checkKecheng/dqxqkc.vue

@@ -2,11 +2,9 @@
   <div>
     <a-row>
       <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }" :key="index" v-for="(item, index) in allList">
-        <div class="ketangCard ketangCardcol">
+        <div class=" ketangback ketangCard ketangCardcol">
           <div class="rjkcTopDiv">
-            <div style="text-align: left"
+            <div style="text-align: left"><Icon icon="ant-design:read-outlined" /><span>{{ item.sksj }}</span></div>
-              ><span>{{ item.sksj }}</span></div
-            >
           </div>
           <div class="rjkcBodyDiv">
             <div class="kcmcDiv">
@@ -20,11 +18,20 @@
                 <span style="font-size: 20px">{{ item.kcmc }}</span>
               </a-badge>
             </div>
-            <div class="skddDiv" style="margin-top: 20px">{{ item.skdd }}</div>
+            <div class="skddDiv">{{ item.skdd }}</div>
-            <div class="skddDiv" style="margin-top: 20px">学分：{{ item.xf }}</div>
+            <!-- <div class="skddDiv">教课周次：{{ item.jkzc }}</div> -->
-            <!-- <div class="skddDiv" style="margin-top: 20px">教课周次：{{ item.jkzc }}</div> -->
+            <div class="xkrsDiv skdd-Left-section">
-            <div class="xkrsDiv"><span @click="openXkrs(item)" style="cursor: pointer;">{{ item.xkrs }}人选课&nbsp;&nbsp;&nbsp;</span>
+                <div style="width:70%; display: flex; justify-content: flex-start; ">
-              <a-button class="buttonClass" @click="openKechengDetail(item)">进入课程</a-button>
+                  <div class="skdd-line">
+                    <div class="xkrs-color">{{ item.xf }}</div>
+                    <div class="skddDiv">学分</div>
+                  </div>
+                  <div class="skdd-line">
+                      <div class="xkrs-color">{{ item.xkrs }}</div>
+                      <div class="skddDiv" @click="openXkrs(item)">选课人数</div>
+                  </div>
+                </div>
+                <a-button class="buttonClass" @click="openKechengDetail(item)">进入课程</a-button>
             </div>
           </div>
         </div>
@@ -95,13 +102,12 @@ function openKechengDetail(item) {
 .ketangCardcol {
   background-color: #f3f3f3;
   padding: 1px;
+  box-shadow: 1px 1px 5px 1px #e1e1e1;
 }
 .rjkcTopDiv {
-  background: #fff;
+  padding: 0.5rem;
-  padding: 0.9rem;
+  color: #798394;
-  color: #1ab394;
+  font-size: 15px;
-  font-size: 16px;
-  font-weight: bold;
   text-align: right;
 }
 .nDayDiv {
@@ -118,35 +124,74 @@ function openKechengDetail(item) {
 .rjkcBodyDiv {
   margin-top: 1px;
   background: #fff;
-  padding: 1rem 2rem 2rem 2rem;
+  padding:1rem;
 }
 .kcmcDiv {
   font-size: 24px;
   font-weight: bold;
 }
 .skddDiv {
-  color: #1c84c6;
+  color: #333333;
-  font-size: 16px;
+  font-size:14px;
   // font-weight: bold;
 }
 .xkrsDiv {
-  padding-top: 2.5rem;
+  padding-top:1rem;
   font-size: 18px;
   font-weight: bold;
   text-align: right;
 }
 .buttonClass {
-  background: #1c84c6;
+  background: #1ab394;
   font-weight: 600;
   color: #fff;
   border-radius: 5px;
-  line-height: 23px;
+  line-height: 22px;
 
   &[disabled] {
     background: #6cafda;
   }
 }
-.xkrsDiv:hover{
+.skdd-Left-section{
-  color:#1c84c6;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+}
+.ketangback{
+  background: #f7f7f7;
+  border-radius: 5px;
+}
+.skdd-line{
+  text-align: left;
+  width:30%;
+  margin-right: 10rpx;
+}
+.xkrs-color{
+  color: #18a689;
+}
+.xkrs-color:hover{
+  color: #ff5a00;
+}
+.ant-btn {
+    line-height: 1.5715;
+    position: relative;
+    display: inline-block;
+    font-weight: 400;
+    white-space: nowrap;
+    text-align: center;
+    background-image: none;
+    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    touch-action: manipulation;
+    height: 32px;
+    padding: 4px 15px;
+    font-size: 14px;
+    border-radius:5px;
+    border-color: #fff;
+    color: #fff;
 }
 </style>

src/views/zy/zyInfo/ZyInfoV2List.vue

@@ -3,11 +3,15 @@
     <div v-if="showType == 0">
       <a-row>
         <a-col :span="24"><span class="title">课程作业次数设置</span><a-divider /></a-col>
-        <a-col :span="24" style="text-align: center">
+        <div class="tishi">温馨提示：设置完成后，您也可以在课程教学过程中，随时根据实际情况进行调整。</div>
-          <div style="margin-top: 10%">老师您好，</div>
+        <div class="work-img">
-          <div>请根据课程目标及课程教学大纲的要求，设置学生修完本课程需要完成的作业次数及每次作业在期末成绩中所占的比例。</div>
+            <img class="work-img-img" src="../../../assets/images/homework.png" />
-          <div style="margin-top: 30px"><a @click="handleShowType(1)">设置作业次数</a></div>
+        </div>
-          <div class="tishi">温馨提示：设置完成后，您也可以在课程教学过程中，随时根据实际情况进行调整。</div>
+        <a-col :span="24" style="text-align: center; color: #494b56;">
+          <div>老师您好，</div>
+          <div>请根据课程目标及课程教学大纲的要求，</div>
+          <div>设置学生修完本课程需要完成的作业次数及每次作业在期末成绩中所占的比例。</div>
+          <div style="margin-top: 30px" class="ant-btn buttonClass"><a @click="handleShowType(1)" >设置作业次数</a></div>
         </a-col>
       </a-row>
     </div>
@@ -1270,7 +1274,7 @@ onMounted(() => {
 
 <style lang="less" scoped>
 .title {
-  padding: 20px;
+  margin-left: 20px;
   font-size: 18px;
 }
 .ant-divider-horizontal {
@@ -1281,9 +1285,13 @@ onMounted(() => {
   margin: 3px 0 5px;
 }
 .tishi {
+  width: 100%;
   font-size: 12px;
-  color: #adabab;
+  color: #fd8f02;
-  margin-top: 8px;
+  margin-top: -4px;
+  background: #fff6e1;
+  text-align: center;
+  padding: 6px 0;
 }
 .cardClass {
   min-height: 200px;
@@ -1327,4 +1335,23 @@ onMounted(() => {
   cursor: pointer;
   color: #18a689;
 }
+.work-img{
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top:80px;
+  margin-bottom: 30px;
+
+}
+.work-img-img{
+  width:180px;
+  height:139px;
+}
+.buttonClass{
+    background: #1ab394;
+    font-weight: 600;
+    color: #fff;
+    border-radius: 5px;
+    line-height: 22px;
+    }
 </style>