style:增加项目证书创建添加

src/views/projectcenter/TaskPage.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/valid-v-model -->
 <!-- eslint-disable vue/no-parsing-error -->
-<!-- 任务页面 -->img
+<!-- 任务页面 -->
 <template>
   <div class="taskpage">
     <div class="addhead" style="flex-shrink: 0">
@@ -867,7 +867,48 @@
             </div>
           </div>
         </a-tab-pane>
-        <a-tab-pane key="7" tab="设置">
+        <a-tab-pane key="7" tab="证书">
+          <div class="split"></div>
+          <!-- 没有证书显示的页面 -->
+          <div v-if="3>7" style="display:flex; justify-content:center; align-items:center;height: 600px;flex-direction:column;">
+            <img
+              src="@/assets/images/nodata.png"
+              style=" width: 212px; height: 212px;"
+              alt=""
+            /> 
+            <button class="xkbtn11" @click="addCertificate">
+              添加证书
+            </button>
+          </div>
+          <!-- 有证书显示的页面 -->
+          <div v-else style="padding: 36px; display: flex;min-height: 400px;">
+            <div style="width:170px;height:200px;border:1px solid #b1b3b8;display: flex;justify-content: center;align-items: center;color: #4ea6ff;cursor: pointer;" @click="addCertificate">
+              <div class="ant-upload-text">+添加证书</div>
+            </div>
+
+            <div style="width:170px;height:200px;border:1px solid #b1b3b8;margin-left: 32px;display: flex;justify-content: center;align-items: center;flex-direction:column;">
+              <img 
+                @click="previewPic"
+                style="cursor:pointer"
+                width="140"
+                height="160"
+                src="https://picb6.photophoto.cn/32/552/32552236_1.jpg" alt="" srcset="">
+              <div style="display:flex;height: 26px;justify-content: space-around;align-items: center;">
+                <div style="font-size:14px; width: 85px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">培训认证证书</div>
+                <div style="font-size:12px;color:#999;width:50px;margin-left: 6px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">完成项目</div>
+                <div style="cursor:pointer;position: relative;">
+                  ...
+                  <div style="position:absolute;width: 45px;height: 60px;background: #fff;display: flex;flex-direction: column;justify-content: center;align-items: center;border: 1px solid #b1b3b8;">
+                    <div style="font-size:12px;color:#999">查看</div>
+                    <div style="font-size:12px;color:#999">编辑</div>
+                    <div style="font-size:12px;color:#999">删除</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="8" tab="设置">
           <div class="split"></div>
 
           <a-tabs v-model:activeKey="activeSetKey">
@@ -1148,6 +1189,30 @@
       :itemsType="evaltype"
       :datasource="evalData"
     />
+    
+    <!-- 添加证书抽屉 -->
+    <AddCertificate 
+      v-model:ACertificate="ACertificate"
+    />
+   
+    <!-- 创建证书抽屉 -->
+    <CreateCertificate 
+      v-model:CCertificate="CCertificate"
+    />
+
+    <!-- 预览 -->
+    <a-modal
+      :title="null"
+      width="60%"
+      :footer="null"
+      v-model:visible="modal1Visible"
+      style="display:flex; justify-content:center; align-items:center;"
+      @ok="setModal1Visible(false)"
+    >
+      <img 
+        :width="screenWidth*0.55"
+        src="https://picb6.photophoto.cn/32/552/32552236_1.jpg" alt="" srcset="">
+    </a-modal>
 
     <!-- 学员（小组管理）创建小组抽屉 -->
     <subset-manage v-model:Svisible="subsetVisivle" />
@@ -1753,7 +1818,11 @@ import ProjectFaceTaskManage from "../../components/drawers/project/ProjectFaceT
 import ProjectOnlineManage from "../../components/drawers/project/ProjectOnlineManage";
 import ProjectHomeWorkManage from "../../components/drawers/project/ProjectHomeWorkManage";
 import ProjectExamManage from "../../components/drawers/project/ProjectExamManage";
-import ProjectEvalManage from "../../components/drawers/project/ProjectEvalManage";
+import ProjectEvalManage from "../../components/drawers/project/ProjectEvalManage"; 
+import AddCertificate from "../../components/drawers/project/AddCertificate"; 
+import CreateCertificate from "../../components/drawers/project/CreateCertificate"; 
+
+
 import SubsetManage from "../../components/drawers/SubsetManage";
 import MemberList from "../../components/drawers/MemberList";
 import ActiveAttendance from "../../components/drawers/ActiveAttendance";
@@ -1786,6 +1855,7 @@ import { toDate, codeUrl } from "../../api/method";
 import projSet from "../../components/Modals/projSet";
 import { overview } from "../../api/indexProjStu";
 import TwoDimensionalCode from "../../components/TwoDimensionalCode.vue";
+import ProjectScore from "../../components/drawers/ProjectScore";
 import { useStore } from "vuex";
 import ProjectLevel from "@/components/project/ProjectLevel";
 import TrainClass from "@/components/project/TrainClass";
@@ -1813,18 +1883,22 @@ export default {
     SeeStu,
     ChangeGroup,
     NoticePub,
-    // ProjectScore,
+    ProjectScore,
     TaskImpStu,
     projSet,
     NoticeHis,
     TwoDimensionalCode,
     ProjectManager,
     TableStudent,
+    AddCertificate,
+    CreateCertificate
   },
   setup() {
     const store = useStore();
     const route = useRoute();
     const state = reactive({
+      screenHeight: document.body.clientHeight, 
+      screenWidth: document.body.clientWidth, 
       editRecord: {},
       choosedStageIndex:0,
       hasTask:false,
@@ -1964,6 +2038,8 @@ export default {
       Wvisible: false, //作业管理
       TMvisible: false, //考试管理
       Evalvisible: false, //测评管理
+      ACertificate: false, //证书添加 
+      CCertificate: false, //证书创建
       Stuvisible: false, //添加学员
       Importvisible: false, //导入学员
       Seevisible: false, //查看学员
@@ -2502,7 +2578,9 @@ export default {
       commonLevelName: "",
       evaltype: "",
       evalData: "",
-      facestudent: ""
+      facestudent: "",
+
+      modal1Visible: false, // 证书预览
     });
 
     const levelList = reactive({
@@ -4173,6 +4251,15 @@ export default {
       state.choosedStageIndex = index;
     }
 
+    {/* 证书 */}
+    function addCertificate(){
+      state.ACertificate = true;
+    }
+
+    function previewPic() {
+      state.modal1Visible = true;
+    }
+
     return {
       ...toRefs(state),
       ...toRefs(levelList),
@@ -4281,6 +4368,8 @@ export default {
       showCodeModel2,
       checkType,
       downloadFile,
+      addCertificate,
+      previewPic
     };
   },
 };
@@ -4293,6 +4382,11 @@ export default {
   clear: both;
 }
 
+.ant-upload.ant-upload-select-picture-card {
+  width: 170px;
+  height: 200px;
+}
+
 .pubproject {
   .ant-modal {
     .ant-modal-body {
@@ -4458,6 +4552,18 @@ export default {
   }
 }
 
+.xkbtn11 {
+  cursor: pointer;
+  width: 130px;
+  height: 40px;
+  background: #4ea6ff;
+  border-radius: 8px;
+  border: 0;
+  margin-right: 8px;
+  color: #fff;
+  margin-top: 24px;
+}
+
 .canclestu {
   .ant-modal {
     width: 424px !important;