feat:项目 项目积分 获取规则 样式

src/components/drawers/ProjectScore.vue

@@ -140,7 +140,6 @@
               </div>
               <div v-else class="btns">
                 <div class="btn1" @click="edit=!edit">
-                
                 <span class="btn1text">保存</span>
               </div>
               </div>
@@ -346,9 +345,6 @@ export default {
       score1:5,
       score2:5,
       edit:true,
-     
-      
-      
     });
     const getTableData = () => {
       let datas = state.tabledataStu;

src/views/projectcenter/LibraryAdd.vue

@@ -322,22 +322,58 @@
             </div>
             <hr color="#E8E8E8" />
             <div class="pjc_body">
-              <div class="pjcb_header">
+              <div class="groupright">
-                <span>规则</span>
+                <div class="spandiv"><span class="spantext">规则</span></div>
-                <div class="edit_btn">
+                <div v-if="edit" class="btns">
-                  <div class="edit"></div>
+                  <div class="btn1" @click="edit = !edit">
-                  <div class="btnText">编辑</div>
+                    <img src="../../assets/images/projectadd/edit1.png" />
+                    <span class="btn1text">编辑</span>
                   </div>
                 </div>
-              <div class="pjcb_content">
+                <div v-else class="btns">
+                  <div class="btn1" @click="edit = !edit">
+                    <span class="btn1text">保存</span>
+                  </div>
+                </div>
+              </div>
+
+              <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>
@@ -603,6 +639,9 @@ export default defineComponent({
       value3: false,
       value4: false,
       hideshow: false,
+      score1: 5,
+      score2: 5,
+      edit: true,
     });
     const value = ref("");
     const value2 = ref("");
@@ -626,6 +665,12 @@ export default defineComponent({
       changecheck3,
     };
   },
+  computed: {
+    // 计算属性的 getter
+    scoresum: function () {
+      return Number(this.score1) + Number(this.score2);
+    },
+  },
 });
 </script>
 <style lang="scss">
@@ -1098,47 +1143,70 @@ export default defineComponent({
       .pjc_body {
         margin-left: 34px;
         margin-right: 34px;
-        .pjcb_header {
+
+        .groupright {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          margin: 24px auto;
+          .btn1 {
-          .edit_btn {
             width: 100px;
-            // padding: 0px 26px 0px 26px;
+            height: 40px;
-            height: 38px;
-            background: rgb(64, 158, 255);
-            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;
-            .edit {
+            .btn1text {
-              width: 15px;
+              color: #ffffff;
-              height: 15px;
-              background-image: url(@/assets/images/coursewareManage/export1.png);
-              background-size: 100% 100%;
-            }
-            .btnText {
-              font-size: 14px;
-              font-weight: 400;
-              color: rgb(255, 255, 255);
-              line-height: 36px;
               margin-left: 5px;
+              font-size: 14px;
+            }
+          }
+          .btn2 {
+            width: 100px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 32px;
+            border: 1px solid #409eff;
+            border-radius: 8px;
+            cursor: pointer;
+            background: #ffffff;
+            .btn2text {
+              color: #409eff;
+              margin-left: 5px;
+              font-size: 14px;
             }
           }
         }
         .pjcb_content {
-          border: 1px solid #388be1;
+          border: 1px solid #409eff;
-          padding: 32px;
+          padding: 20px;
+          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;
           }
           .content {
-            margin-bottom: 24px;
+            align-items: center;
+            height: 50px;
+            display: flex;
           }
+          margin-bottom: 130px;
         }
       }
     }