style:增加下载中心

src/api/index1.js

@@ -2,7 +2,7 @@
  * @Author: lixg lixg@dongwu-inc.com
  * @Date: 2022-11-04 22:45:31
  * @LastEditors: lixg lixg@dongwu-inc.com
- * @LastEditTime: 2023-01-05 14:22:29
+ * @LastEditTime: 2023-01-06 10:18:41
  * @FilePath: /fe-manage/src/api/index1.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -163,6 +163,10 @@ export const AssessmentManagementMessage = (obj) => http.get(`/admin/student/get
 export const exportTaskStudent = (obj) => http.post('/admin/student/exportTaskStudent', obj)
 //导出任务作业
 export const exportHomeWork = (obj) => http.post('/admin/student/exportHomeWork', obj)
+//签到 
+export const attendanceSign = (obj) => http.post('/stu/task/attendance/sign', obj)
+//请假 
+export const attendanceLeave = (obj) => http.post('/stu/task/attendance/leave', obj)
 
 // //面授课批量导入成绩
 export const batchImportScore = (offcoursePlanId, obj) =>

src/components/BreadCrumb.vue

@@ -423,6 +423,13 @@ export default {
             },
           ];
         }
+        if (n.indexOf("/download") !== -1 || n.indexOf("/download") !== -1) {
+          state.list = [
+            {
+              name: "下载中心",
+            },
+          ];
+        }
       }
     );
 

src/components/NavLeft.vue

@@ -278,6 +278,15 @@
           </div>
           <router-link to="/qamanage">问答管理</router-link>
         </a-menu-item>
+        <a-menu-item key="sub15" @titleClick="titleClick">
+          <div class="imgBox">
+            <img
+              style="width: 20px; height: 20px"
+              src="../assets/images/navleft/qa.png"
+            />
+          </div>
+          <router-link to="/download">下载中心</router-link>
+        </a-menu-item>
       </a-menu>
     </div>
     <div
@@ -343,6 +352,9 @@
         <a-menu-item key="sub14" @titleClick="titleClick">
           <router-link to="/qamanage">问答</router-link>
         </a-menu-item>
+        <a-menu-item key="sub15" @titleClick="titleClick">
+          <router-link to="/download">问答</router-link>
+        </a-menu-item>
       </a-menu>
     </div>
   </div>
@@ -374,6 +386,7 @@ export default {
         "sub12",
         "sub13",
         "sub14",
+        "sub15",
       ],
       openKeys: localStorage.getItem("openKeys")
         ? JSON.parse(localStorage.getItem("openKeys"))
@@ -535,6 +548,12 @@ export default {
           selectedKeys: "sub14",
           pagename: "问答管理",
         },
+        {
+          href: "/download",
+          openKeys: "sub15",
+          selectedKeys: "sub15",
+          pagename: "下载中心",
+        },
       ],
     });
 

src/components/drawers/AddLevelImportStu.vue

@@ -24,11 +24,26 @@
         <div class="upload">
           <div class="text">上传：</div>
           <div class="right">
-            <div class="load">
+            <div style="height: 176px; margin-bottom: 20px">
+              <a-upload-dragger
+                v-model:fileList="fileList"
+                :action="BATCH_IMPORT_SCORE + '?offcoursePlanId=' + id"
+                name="file"
+                :multiple="true"
+                @change="handleChange"
+              >
+                <p class="ant-upload-drag-icon">
+                  <inbox-outlined></inbox-outlined>
+                </p>
+                <p class="ant-upload-text">点击或将文件拖拽到此处上传</p>
+                <p class="ant-upload-hint">支持扩展名：.xls/.xlsx</p>
+              </a-upload-dragger>
+            </div>
+            <!-- <div class="load">
               <div class="cloud"></div>
               <div class="tip">点击或将文件拖拽到此处上传</div>
               <div class="tipz">支持扩展名：.xls/.xlsx</div>
-            </div>
+            </div> -->
             <div class="loadstate">
               <div class="loadborder">
                 <div class="content">
@@ -111,6 +126,9 @@
 
 <script>
 import { reactive, toRefs } from "vue";
+import { message } from "ant-design-vue";
+import * as api from "../../api/index1";
+import { BATCH_IMPORT_SCORE } from "@/api/config";
 export default {
   name: "ImpStu",
   props: {
@@ -128,12 +146,36 @@ export default {
     const afterVisibleChange = (bool) => {
       console.log("state", bool);
     };
-
+    //上传文件
+    const handleChange = (info) => {
+      console.log("info", info, props.id);
+      const status = info.file.status;
+      if (status !== "uploading") {
+        console.log(info.file, info.fileList);
+      }
+      if (status === "done") {
+        const formData = new FormData();
+        formData.append("uploadFile", info.file);
+        // formData.append("offcoursePlanId", props.id);
+        console.log(info.file);
+        api.batchImportScore(props.id, formData).then((res) => {
+          // if (res.data.code === 200) {
+          //   console.log('上传成功')
+          // }
+          console.log("上传成绩", res);
+        });
+        message.success(`${info.file.name} file uploaded successfully.`);
+      } else if (status === "error") {
+        message.error(`${info.file.name} file upload failed.`);
+      }
+    };
     return {
       ...toRefs(state),
       afterVisibleChange,
       closeDrawer,
       // change,
+      handleChange,
+      BATCH_IMPORT_SCORE,
     };
   },
 };

src/components/drawers/ImportStu.vue

@@ -107,7 +107,6 @@
       </div>
     </div>
   </a-drawer>
-  
 </template>
 
 <script>

src/components/drawers/project/ProjectFaceStu.vue

@@ -367,44 +367,44 @@ export default {
     const clearLine = () => {
       state.selectedRowKeys = [];
     };
-    const getTableData = () => {
+    // const getTableData = () => {
-      let arr = state.tabledata;
+    //   let arr = state.tabledata;
-      arr.map((value) => {
+    //   arr.map((value) => {
-        // console.log("value", value);
+    //     // console.log("value", value);
-        value.opacation = (
+    //     value.opacation = (
-          <div class="opa">
+    //       <div class="opa">
-            <a-checkbox
+    //         <a-checkbox
-              checked={value.signIn}
+    //           checked={value.signIn}
-              onChange={(e) => {
+    //           onChange={(e) => {
-                console.log("点击签到", e);
+    //             console.log("点击签到", e);
-              }}
+    //           }}
-            >
+    //         >
-              签到
+    //           签到
-            </a-checkbox>
+    //         </a-checkbox>
-            {/**
+    //         {/**
-            <a-checkbox
+    //         <a-checkbox
-              checked={value.signOut}
+    //           checked={value.signOut}
-              onChange={(e) => {
+    //           onChange={(e) => {
-                console.log("点击签退", e);
+    //             console.log("点击签退", e);
-              }}
+    //           }}
-            >
+    //         >
-              签退
+    //           签退
-            </a-checkbox>
+    //         </a-checkbox>
-           */}
+    //        */}
-            <a-checkbox
+    //         <a-checkbox
-              checked={value.leave}
+    //           checked={value.leave}
-              onChange={(e) => {
+    //           onChange={(e) => {
-                console.log("点击请假", e);
+    //             console.log("点击请假", e);
-              }}
+    //           }}
-            >
+    //         >
-              请假
+    //           请假
-            </a-checkbox>
+    //         </a-checkbox>
-          </div>
+    //       </div>
-        );
+    //     );
-      });
+    //   });
-      state.tabledata = arr;
+    //   state.tabledata = arr;
-    };
+    // };
-    getTableData();
+    // getTableData();
     const tableDataFunc = () => {
       const columns = [
         {
@@ -524,21 +524,81 @@ export default {
           align: "center",
           // scopedSlots: { customRender: "action" }, //引入的插槽
 
-          // customRender: () => {
+          customRender: (text) => {
-          //   return (
+            return (
-          //     <div class="opa">
+              <div class="opa">
-          //       <a-checkbox-group
+                <a-checkbox
-          //         // value={state.selectOption}
+                  checked={text.record.signIn}
-          //         name="checkboxgroup"
+                  onChange={(e) => {
-          //         options={state.tableOptions}
+                    console.log("点击签到", e);
-          //         onChange={(e) => {
+                    let obj = {
-          //           console.log("eee", e);
+                      courseId: Number(props.projectTaskInfo.courseId),
-          //           // state.selectOption = e;
+                      projectId: Number(props.projectTaskInfo.projectId),
-          //         }}
+                      // routerId: Number(props.projectTaskInfo.projectId),
-          //       />
+                      studentId: Number(text.record.studentId),
-          //     </div>
+                      studentName: text.record.studentName,
-          //   );
+                      taskId: Number(props.projectTaskInfo.projectTaskId),
-          // },
+                      taskType: Number(props.projectTaskInfo.type),
+                      type: 1,
+                      // userName: "",
+                    };
+                    api
+                      .attendanceSign(obj, (res) => {
+                        console.log("签到结果", res, obj, e);
+                        if (res.data.code === 200) {
+                          text.record.signIn = true;
+                        }
+                      })
+                      .catch((err) => {
+                        console.log("签到失败", err, obj);
+                        text.record.signIn = false;
+                      });
+                  }}
+                >
+                  签到
+                </a-checkbox>
+                {/**
+            <a-checkbox
+              checked={value.signOut}
+              onChange={(e) => {
+                console.log("点击签退", e);
+              }}
+            >
+              签退
+            </a-checkbox>
+           */}
+                <a-checkbox
+                  checked={text.record.leave}
+                  onChange={(e) => {
+                    console.log("点击请假", e, props.datasource);
+                    let obj = {
+                      courseId: Number(props.projectTaskInfo.courseId),
+                      projectId: Number(props.projectTaskInfo.projectId),
+                      // routerId: Number(props.projectTaskInfo.projectId),
+                      studentId: Number(text.record.studentId),
+                      studentName: text.record.studentName,
+                      taskId: Number(props.projectTaskInfo.projectTaskId),
+                      taskType: Number(props.projectTaskInfo.type),
+                      type: 1,
+                    };
+                    api
+                      .attendanceLeave(obj, (res) => {
+                        console.log("请假结果", res, obj, e);
+                        if (res.data.code === 200) {
+                          text.record.leave = true;
+                        }
+                      })
+                      .catch((err) => {
+                        console.log("请假结果", err, obj);
+                        text.record.leave = false;
+                      });
+                  }}
+                >
+                  请假
+                </a-checkbox>
+              </div>
+            );
+          },
         },
       ];
       return columns;
@@ -644,7 +704,6 @@ export default {
       closeDrawer,
       onSelectChange,
       tableDataFunc,
-      getTableData,
       showImpStu,
       showCopyModal,
       closeCopyModal,
@@ -1054,6 +1113,7 @@ export default {
       align-items: center;
       justify-content: center;
       box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
+      background-color: #fff;
       .btn1 {
         width: 100px;
         height: 40px;

src/components/drawers/project/ProjectFaceTaskManage.vue

@@ -390,15 +390,8 @@ export default {
           width: 100,
           align: "center",
           className: "h",
-        },
+          customRender: (text) => {
-      ],
+            return text.record.finishStatus == 1 ? (
-    });
-    //面授直播管理列表操作
-    const ListOpera = () => {
-      let arr = state.tabledata;
-      arr.map((value) => {
-        if (value.finishStatus == 1) {
-          value.operation = (
               <div
                 style={{
                   display: "flex",
@@ -427,9 +420,7 @@ export default {
                   查看答卷
                 </a-button>
               </div>
-          );
+            ) : (
-        } else {
-          value.operation = (
               <div
                 style={{
                   display: "flex",
@@ -455,9 +446,75 @@ export default {
                 </a-button>
               </div>
             );
-        }
+          },
+        },
+      ],
     });
-    };
+    // //面授直播管理列表操作
+    // const ListOpera = () => {
+    //   let arr = state.tabledata;
+    //   arr.map((value) => {
+    //     if (value.finishStatus == 1) {
+    //       value.operation = (
+    //         <div
+    //           style={{
+    //             display: "flex",
+    //             alignItems: "center",
+    //             justifyContent: "center",
+    //           }}
+    //         >
+    //           <a-button
+    //             type="link"
+    //             class="operation"
+    //             style="cursor:pointer;margin-right:10px;"
+    //             onClick={() => {
+    //               state.CWvisible = true;
+    //             }}
+    //           >
+    //             查看作业
+    //           </a-button>
+    //           <a-button
+    //             type="link"
+    //             class="operation"
+    //             style="cursor:pointer;margin-right:10px;"
+    //             onClick={() => {
+    //               state.CQvisible = true;
+    //             }}
+    //           >
+    //             查看答卷
+    //           </a-button>
+    //         </div>
+    //       );
+    //     } else {
+    //       value.operation = (
+    //         <div
+    //           style={{
+    //             display: "flex",
+    //             alignItems: "center",
+    //             justifyContent: "center",
+    //           }}
+    //         >
+    //           <a-button
+    //             type="link"
+    //             class="operation"
+    //             style="cursor:pointer;margin-right:10px;"
+    //             disabled
+    //           >
+    //             查看作业
+    //           </a-button>
+    //           <a-button
+    //             type="link"
+    //             class="operation"
+    //             style="cursor:pointer;margin-right:10px;"
+    //             disabled
+    //           >
+    //             查看答卷
+    //           </a-button>
+    //         </div>
+    //       );
+    //     }
+    //   });
+    // };
     const closeDrawer = () => {
       ctx.emit("update:Fvisible", false);
       state.name = "";
@@ -532,7 +589,7 @@ export default {
               newData.push(res.data.data.records[i]);
             }
             state.tabledata = newData;
-            ListOpera();
+            // ListOpera();
             state.tableDataTotal = res.data.data.total;
             state.tableDataTotal2 = res.data.data.total;
           }

src/components/drawers/router/RouterFaceStu.vue

@@ -361,44 +361,7 @@ export default {
     const clearLine = () => {
       state.selectedRowKeys = [];
     };
-    const getTableData = () => {
+
-      let arr = state.tabledata;
-      arr.map((value) => {
-        // console.log("value", value);
-        value.opacation = (
-          <div class="opa">
-            <a-checkbox
-              checked={value.signIn}
-              onChange={(e) => {
-                console.log("点击签到", e);
-              }}
-            >
-              签到
-            </a-checkbox>
-            {/**
-            <a-checkbox
-              checked={value.signOut}
-              onChange={(e) => {
-                console.log("点击签退", e);
-              }}
-            >
-              签退
-            </a-checkbox>
-           */}
-            <a-checkbox
-              checked={value.leave}
-              onChange={(e) => {
-                console.log("点击请假", e);
-              }}
-            >
-              请假
-            </a-checkbox>
-          </div>
-        );
-      });
-      state.tabledata = arr;
-    };
-    getTableData();
     const tableDataFunc = () => {
       const columns = [
         {
@@ -518,21 +481,88 @@ export default {
           align: "center",
           // scopedSlots: { customRender: "action" }, //引入的插槽
 
-          // customRender: () => {
+          customRender: (text) => {
-          //   return (
+            return (
-          //     <div class="opa">
+              <div class="opa">
-          //       <a-checkbox-group
+                <a-checkbox
-          //         // value={state.selectOption}
+                  checked={text.record.signIn}
-          //         name="checkboxgroup"
+                  onChange={(e) => {
-          //         options={state.tableOptions}
+                    let obj = {
-          //         onChange={(e) => {
+                      courseId: Number(props.datasource.courseId),
-          //           console.log("eee", e);
+                      // projectId: 0,
-          //           // state.selectOption = e;
+                      routerId: Number(props.datasource.routerId),
-          //         }}
+                      studentId: Number(text.record.studentId),
-          //       />
+                      studentName: text.record.studentName,
-          //     </div>
+                      taskId: Number(props.datasource.routerTaskId),
+                      taskType: Number(props.datasource.type),
+                      type: 2,
+                      // userName: "",
+                    };
+                    api
+                      .attendanceSign(obj, (res) => {
+                        console.log("签到结果", res, obj, e);
+                        if (res.data.code === 200) {
+                          text.record.signIn = true;
+                        }
+                      })
+                      .catch((err) => {
+                        console.log("签到失败", err, obj);
+                        text.record.signIn = false;
+                      });
+                    // console.log(
+                    //   "点击签到",
+                    //   e,
+                    //   text.record,
+                    //   props.datasource,
+                    //   obj
                     // );
-          // },
+                  }}
+                >
+                  签到
+                </a-checkbox>
+                {/**
+            <a-checkbox
+              checked={value.signOut}
+              onChange={(e) => {
+                console.log("点击签退", e);
+              }}
+            >
+              签退
+            </a-checkbox>
+           */}
+                <a-checkbox
+                  checked={text.record.leave}
+                  onChange={(e) => {
+                    console.log("点击请假", e, props.datasource);
+                    let obj = {
+                      courseId: Number(props.datasource.courseId),
+                      // projectId: 0,
+                      routerId: Number(props.datasource.routerId),
+                      studentId: Number(text.record.studentId),
+                      studentName: text.record.studentName,
+                      taskId: Number(props.datasource.routerTaskId),
+                      taskType: Number(props.datasource.type),
+                      type: 2,
+                      // userName: "",
+                    };
+                    api
+                      .attendanceLeave(obj, (res) => {
+                        console.log("请假结果", res, obj, e);
+                        if (res.data.code === 200) {
+                          text.record.leave = true;
+                        }
+                      })
+                      .catch((err) => {
+                        console.log("请假结果", err, obj);
+                        text.record.leave = false;
+                      });
+                  }}
+                >
+                  请假
+                </a-checkbox>
+              </div>
+            );
+          },
         },
       ];
       return columns;
@@ -543,23 +573,23 @@ export default {
       console.log("我是传递的查询参数", props.datasource, {
         pageNo: state.currentPage,
         pageSize: state.pageSize,
-        currentStageId: props.datasource.stageId,
+        currentStageId: props.datasource.chapterId,
         type: 2,
-        pid: props.datasource.projectId,
+        pid: props.datasource.routerId,
         // status: Number(state.name),
         studentName: state.name,
-        currentTaskId: props.datasource.projectTaskId,
+        currentTaskId: props.datasource.routerTaskId,
       });
       api
         .AssessmentManagementMessage({
           pageNo: state.currentPage,
           pageSize: state.pageSize,
-          currentStageId: props.datasource.stageId,
+          currentStageId: props.datasource.chapterId,
           type: 2,
-          pid: props.datasource.projectId,
+          pid: props.datasource.routerId,
           // status: Number(state.name),
           studentName: state.name,
-          currentTaskId: props.datasource.projectTaskId,
+          currentTaskId: props.datasource.routerTaskId,
           taskType: props.datasource.type,
         })
         .then((res) => {
@@ -610,9 +640,9 @@ export default {
         `${
           process.env.VUE_APP_PROXY_URL
         }admin/student/exportTaskStudent?currentStageId=${
-          props.datasource.stageId
+          props.datasource.chapterId
-        }&type=${2}&pid=${props.datasource.projectId}&taskId=${
+        }&type=${2}&pid=${props.datasource.routerId}&taskId=${
-          props.datasource.projectTaskId
+          props.datasource.routerTaskId
         }&taskType=${props.datasource.type}`
       );
       // api
@@ -638,7 +668,6 @@ export default {
       closeDrawer,
       onSelectChange,
       tableDataFunc,
-      getTableData,
       showImpStu,
       showCopyModal,
       closeCopyModal,
@@ -1048,6 +1077,7 @@ export default {
       align-items: center;
       justify-content: center;
       box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
+      background-color: #fff;
       .btn1 {
         width: 100px;
         height: 40px;

src/components/drawers/router/RouterFaceTeachManage.vue

@@ -905,14 +905,14 @@ export default {
       height: 72px;
       width: 100%;
       position: absolute;
-      background-color: #fff;
+
       bottom: 0;
       left: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
-
+      background-color: #fff;
       .btn1 {
         width: 100px;
         height: 40px;

src/views/DownLoad.vue

@@ -0,0 +1,257 @@
+<!--
+ * @Author: lixg lixg@dongwu-inc.com
+ * @Date: 2023-01-06 11:30:15
+ * @LastEditors: lixg lixg@dongwu-inc.com
+ * @LastEditTime: 2023-01-06 11:55:38
+ * @FilePath: /fe-manage/src/views/DownLoad.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="DownLoad">
+    <div
+      style="
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+      "
+    >
+      <div class="tab1">
+        <div class="nameinp">
+          <div class="namee">作业名称：</div>
+          <a-input
+            v-model:value="name"
+            style="width: 330px; height: 40px; border-radius: 8px"
+            placeholder="请输入作业名称"
+          />
+        </div>
+        <div class="btns">
+          <div class="btn1">
+            <div class="img1">
+              <img src="../assets/images/courseManage/search0.png" />
+            </div>
+            <div class="wz">搜索</div>
+          </div>
+          <div class="btn2">
+            <div class="img2">
+              <img src="../assets/images/courseManage/reset1.png" />
+            </div>
+            <div class="wz">重置</div>
+          </div>
+        </div>
+      </div>
+      <div style="width: 200px">
+        <div
+          style="
+            display: flex;
+            align-items: center;
+            font-size: 12px;
+            font-weight: 400;
+            color: rgba(153, 153, 153, 0.85);
+            line-height: 22px;
+            justify-content: space-between;
+          "
+        >
+          <div>当前容量:</div>
+          <div>55.01MB / 2GB</div>
+        </div>
+        <a-progress :percent="40" :width="200" :show-info="false" />
+      </div>
+    </div>
+    <!-- 文件容器 -->
+    <div class="zipcontainer">
+      <!-- 单个文件 -->
+      <div class="item">
+        <div class="itemup">
+          <div class="lefttop"></div>
+          <div class="cent">
+            <div class="zip"></div>
+            <div class="ziprit">
+              <div class="textop">作业名称</div>
+              <div class="texdown">
+                <div class="timemanag" style="margin-top: 12px">
+                  2022-08-08 10:30:30 管理员
+                </div>
+                <div class="timemanag">来源：管理者进阶-腾飞班Z1</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="itemdown">
+          <div class="download">下载</div>
+          <div class="delete">删除</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { toRefs, reactive } from "vue";
+export default {
+  name: "DownLoad",
+  setup() {
+    const state = reactive({
+      name: "",
+    });
+
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.DownLoad {
+  width: 100%;
+  margin: 42px 64px 0 32px;
+  .tab1 {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    .t1 {
+      display: flex;
+      align-items: center;
+      margin-bottom: 5px;
+    }
+    .nameinp {
+      display: flex;
+      align-items: center;
+      margin-top: 10px;
+      margin-right: 10px;
+      .namee {
+        color: rgba(0, 0, 0, 0.85);
+        font-size: 14px;
+      }
+    }
+    .btns {
+      display: flex;
+      margin-top: 10px;
+
+      .btn1 {
+        width: 100px;
+        height: 40px;
+        margin-right: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #ffffff;
+        font-size: 14px;
+        background: #4ea6ff;
+        border-radius: 8px;
+        border: 1px solid #4ea6ff;
+        cursor: pointer;
+        .wz {
+          margin-left: 10px;
+        }
+      }
+      .btn2 {
+        width: 100px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #4ea6ff;
+        font-size: 14px;
+        background: #ffffff;
+        border-radius: 8px;
+        cursor: pointer;
+        border: 1px solid #4ea6ff;
+        .wz {
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+  .zipcontainer {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 30px;
+    .item {
+      margin-right: 50px;
+      margin-bottom: 50px;
+      .itemup {
+        width: 352px;
+        height: 160px;
+        background: #ffffff;
+        border-radius: 2px 2px 0px 0px;
+        border: 1px solid #4ea6ff;
+        position: relative;
+        .lefttop {
+          width: 8px;
+          height: 21px;
+          background: #4ea6ff;
+          border-radius: 0px 4px 4px 0px;
+          top: 18px;
+          position: absolute;
+        }
+        .cent {
+          display: flex;
+          margin-top: 40px;
+          margin-left: 40px;
+          .zip {
+            width: 62px;
+            height: 72px;
+            background-image: url(../assets/images/leveladd/zip.png);
+            background-size: 100%;
+          }
+          .ziprit {
+            margin-left: 20px;
+            margin-top: -5px;
+            .textop {
+              font-size: 18px;
+              font-weight: 600;
+              color: #4ea6ff;
+            }
+            .texdown {
+              .timemanag {
+                font-size: 14px;
+                font-weight: 400;
+                color: #878b92;
+              }
+            }
+          }
+        }
+      }
+      .itemdown {
+        width: 352px;
+        height: 48px;
+        border-radius: 0px 0px 2px 2px;
+        border: 1px solid #4ea6ff;
+        border-top: 0;
+        display: flex;
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 22px;
+        .download {
+          width: 176px;
+          height: 48px;
+          color: #ffffff;
+          cursor: pointer;
+          background: #409eff;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+        .delete {
+          width: 176px;
+          height: 48px;
+          color: #4ea6ff;
+          cursor: pointer;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+        .outime {
+          font-size: 16px;
+          font-weight: 400;
+          color: #878b92;
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+}
+</style>