style:获取规则样式修改

src/components/drawers/ProjectScore.vue

@@ -129,26 +129,43 @@
       <a-tab-pane key="3" tab="获取规则">
         <div class="projectscore">
           <div class="pjc_body">
-            <div class="pjcb_header">
+            <div class="groupright">
-              <span>规则</span>
+              <div class="spandiv"><span class="spantext">规则</span></div>
-              <div class="btns">
+              <div v-if="edit" class="btns">
-                <div class="edit_btn1">
+                <div class="btn1" @click="edit=!edit">
-                  <div class="btnText">取消</div>
+                <img src="../../assets/images/projectadd/edit1.png" />
-                </div>
+                <span class="btn1text">编辑</span>
-                <div class="edit_btn2">
+              </div>
-                  <div class="btnText">确定</div>
+            
-                </div>
+              </div>
+              <div v-else class="btns">
+                <div class="btn1" @click="edit=!edit">
+                
+                <span class="btn1text">保存</span>
+              </div>
               </div>
             </div>
-            <div class="pjcb_content">
+
+            <div v-if="edit" class="pjcb_content">
               <div class="content content1">
-                <span>当前设计下，学员可以获得 10 积分</span>
+                <span>当前设计下，学员可以获得 </span><span class="scoretext">{{scoresum}}</span><span>积分</span>
               </div>
               <div class="content content2">
-                <span>完成【必修/选修】获得 5 积分</span>
+                <span>完成【必修/选修】获得 </span><span class="scoretext">{{score1}} </span><span>积分</span>
               </div>
               <div class="content content3">
-                <span>优秀学员可获得 5 积分</span>
+                <span>优秀学员可获得 </span><span class="scoretext">{{score2}}</span><span>积分</span>
+              </div>
+            </div>
+            <div v-else class="pjcb_content">
+              <div class="content content1">
+                <span>当前设计下，学员可以获得 </span><span class="scoretext">{{scoresum}}</span><span>积分</span>
+              </div>
+              <div class="content content2">
+                <span>完成【必修/选修】获得 </span><span ><a-input v-model:value="score1" :bordered="false" @change="getScore"/> </span><span>积分</span>
+              </div>
+              <div class="content content3">
+                <span>优秀学员可获得 </span><span ><a-input v-model:value="score2" :bordered="false" /></span><span>积分</span>
               </div>
             </div>
           </div>
@@ -326,6 +343,10 @@ export default {
       tableDataTotal: 30,
       stuValue: false,
       Svisible:false,
+      score1:5,
+      score2:5,
+      edit:true,
+     
       
       
     });
@@ -351,12 +372,18 @@ export default {
       state.tabledataStu = datas;
     };
     getTableData();
-   
+  
     return {
       ...toRefs(state),
      
     };
   },
+  computed: {
+    // 计算属性的 getter
+    scoresum: function () {
+        return Number(this.score1)+Number(this.score2);
+      }
+    }
 };
 </script>
 <style lang="scss">
@@ -572,60 +599,70 @@ export default {
   .pjc_body {
     margin-left: 34px;
     margin-right: 34px;
-    .pjcb_header {
+    .spandiv{
-      display: flex;
+      position: relative;
-      justify-content: space-between;
+      /* height: 100%; */
-      align-items: center;
+      width: 40px;
-      margin: 24px auto;
+      .spantext{
-      .btns {
+        position: absolute;
+        left: 0;
+        bottom: 0px;
+      }
+      }
+    
+    .groupright {
         display: flex;
-        .edit_btn1 {
+        justify-content: space-between;
+        .btn1 {
           width: 100px;
-          // padding: 0px 26px 0px 26px;
+          height: 40px;
-          height: 38px;
-          margin-left: 15px;
-          border-radius: 8px;
-          border: 1px solid rgba(64, 158, 255, 1);
           display: flex;
           align-items: center;
           justify-content: center;
-          flex-shrink: 0;
+          margin-right: 16px;
+          border: 1px solid #409eff;
+          border-radius: 8px;
+          background: #409eff;
           cursor: pointer;
-          background-color: rgb(255, 255, 255);
+          .btn1text {
-          .btnText {
+            color: #ffffff;
-            font-size: 14px;
-            font-weight: 400;
-            color: rgb(64, 158, 255);
-            line-height: 36px;
             margin-left: 5px;
+            font-size: 14px;
           }
         }
-        .edit_btn2 {
+        .btn2 {
           width: 100px;
-          // padding: 0px 26px 0px 26px;
+          height: 40px;
-          height: 38px;
-          margin-left: 15px;
-          border-radius: 8px;
-          border: 1px solid rgba(64, 158, 255, 1);
           display: flex;
           align-items: center;
           justify-content: center;
-          flex-shrink: 0;
+          margin-right: 32px;
+          border: 1px solid #409eff;
+          border-radius: 8px;
           cursor: pointer;
-          background-color: rgb(64, 158, 255);        
+          background: #ffffff;
-          .btnText {
+          .btn2text {
-            font-size: 14px;
+            color: #409eff;
-            font-weight: 400;
-            color: rgb(255, 255, 255);
-            line-height: 36px;
             margin-left: 5px;
+            font-size: 14px;
           }
         }
       }
-    }
     .pjcb_content {
       border: 1px solid #409eff;
       padding: 32px;
+      margin-top: 10px;
+      .ant-input{
+          width: 46px;
+          font-size: 16px;
+          color: #409eff;
+        }
+      .scoretext{
+        color: #409eff;
+        font-size: 16px;
+        margin-left: 3px;
+        margin-right: 4px;
+      }
       .pjcb_content :last-child {
         margin-bottom: 0px;
       }