style:修改面授课

src/components/student/CommonStudent.vue

@@ -3,20 +3,20 @@
 <template>
   <div class="CommonStudent">
     <a-drawer
-        :visible="visiable"
+      :visible="visiable"
-        class="drawerStyle ProjCheckship CommonStudent"
+      class="drawerStyle ProjCheckship CommonStudent"
-        placement="right"
+      placement="right"
-        width="60%"
+      width="60%"
     >
       <div class="drawerMain" id="ProjCheckship" style="">
         <div class="header">
           <div class="headerTitle">
-            {{ {1: "添加学员", 2: "添加学员", 3: "添加学员"}[type] || "" }}
+            {{ { 1: "添加学员", 2: "添加学员", 3: "添加学员" }[type] || "" }}
           </div>
           <img
-              style="width: 29px; height: 29px; cursor: pointer"
+            style="width: 29px; height: 29px; cursor: pointer"
-              src="../../assets/images/basicinfo/close.png"
+            src="../../assets/images/basicinfo/close.png"
-              @click="closeDrawer"
+            @click="closeDrawer"
           />
         </div>
         <div style="display: flex; overflow-x: auto; overflow-y: auto">
@@ -27,154 +27,157 @@
                   <div class="tab1">
                     <a-form-item label="姓名">
                       <a-input
-                          v-model:value="nameSearch.keyword"
+                        v-model:value="nameSearch.keyword"
-
+                        style="width: 270px; height: 40px; border-radius: 8px"
-                          style="width: 270px; height: 40px; border-radius: 8px"
+                        placeholder="请输入姓名"
-                          placeholder="请输入姓名"
+                        @change="peopleName"
-                          @change="peopleName"
                       />
                       <a-button
-                          type="primary"
+                        type="primary"
-                          @click="onSearchStu"
+                        @click="onSearchStu"
-                          style="margin-left: 20px; border-radius: 4px"
+                        style="margin-left: 20px; border-radius: 4px"
                       >
                         <template #icon>
-                          <SearchOutlined/>
+                          <SearchOutlined />
                         </template>
                         搜索
                       </a-button>
                       <a-button
-                          @click="resetStu"
+                        @click="resetStu"
-                          style="margin-left: 20px; border-radius: 4px"
+                        style="margin-left: 20px; border-radius: 4px"
-                      >重置
+                        >重置
-                      </a-button
+                      </a-button>
-                      >
                     </a-form-item>
                   </div>
                   <div
-                      class="chooseLeft"
+                    class="chooseLeft"
-                      style="display: grid; grid-template-columns: 250px auto"
+                    style="display: grid; grid-template-columns: 250px auto"
                   >
                     <div
-                        :style="{
+                      :style="{
                         height: screenHeight - 180 + 'px',
                         overflowY: 'auto',
                       }"
-                        style="border: 1px solid #f0f0f0"
+                      style="border: 1px solid #f0f0f0"
                     >
                       <div class="tree" style="margin: 10px 4px 220px 10px">
                         <a-tree
-                            allow-clear
+                          allow-clear
-                            tree-default-expand-all
+                          tree-default-expand-all
-                            :tree-data="treeData"
+                          :tree-data="treeData"
-                            :loading="orgLoading"
+                          :loading="orgLoading"
-                            :load-data="onLoadData"
+                          :load-data="onLoadData"
-                            v-model:selectedKeys="stuTreeSelectKeys"
+                          v-model:selectedKeys="stuTreeSelectKeys"
-                            v-model:expandedKeys="stuTreeExpandedKeys"
+                          v-model:expandedKeys="stuTreeExpandedKeys"
-                            :fieldNames="{
+                          :fieldNames="{
                             children: 'treeChildList',
                             key: 'id',
                             title: 'name',
                             value: 'name',
                           }"
-                            @select="stuStuOrgSelect"
+                          @select="stuStuOrgSelect"
                         >
                         </a-tree>
                       </div>
                     </div>
                     <div
-                        class="tableBox tabb"
+                      class="tableBox tabb"
-                        style="
+                      style="
                         margin: 0px 4px 120px 10px;
                         border: 1px solid #f0f0f0;
                       "
                     >
                       <a-table
-                          :columns="stuColumns"
+                        :columns="stuColumns"
-                          :data-source="stuData"
+                        :data-source="stuData"
-                          :pagination="stuPagination"
+                        :pagination="stuPagination"
-                          :loading="stuLoading"
+                        :loading="stuLoading"
-                          row-key="id"
+                        row-key="id"
-                          :row-selection="stuRowSelection"
+                        :row-selection="stuRowSelection"
                       />
                     </div>
                   </div>
                 </div>
               </a-tab-pane>
-              <!--              <a-tab-pane :key="2" tab="添加组织">-->
+              <!-- <a-tab-pane :key="2" tab="添加组织">
-              <!--                <div-->
+                <div :style="{ height: screenHeight - 235 + 'px' }">
-              <!--                    :style="{ height: screenHeight - 235 + 'px' }"-->
+                  <div class="tab2">
-              <!--                >-->
+                    <a-form-item label="组织：">
-              <!--                  <div class="tab2">-->
+                      <a-input
-              <!--                    <a-form-item label="组织：">-->
+                        v-model:value="searchOrgName.keyword"
-              <!--                      <a-input-->
+                        style="width: 230px; height: 40px; border-radius: 8px"
-              <!--                          v-model:value="searchOrgName.keyword"-->
+                        placeholder="请输入组织"
-              <!--                          style="width: 230px; height: 40px; border-radius: 8px"-->
+                      />
-              <!--                          placeholder="请输入组织"-->
+                      <a-button
-              <!--                      />-->
+                        type="primary"
-              <!--                      <a-button type="primary" @click="searchOrg" style="margin-left: 20px;border-radius: 4px">-->
+                        @click="searchOrg"
-              <!--                        <template #icon>-->
+                        style="margin-left: 20px; border-radius: 4px"
-              <!--                          <SearchOutlined/>-->
+                      >
-              <!--                        </template>-->
+                        <template #icon>
-              <!--                        搜索-->
+                          <SearchOutlined />
-              <!--                      </a-button>-->
+                        </template>
-              <!--                      <a-button @click="resetOrg" style="margin-left: 20px;border-radius: 4px">重置</a-button>-->
+                        搜索
-              <!--                    </a-form-item>-->
+                      </a-button>
-              <!--                  </div>-->
+                      <a-button
-              <!--                  <div class="boeTree">-->
+                        @click="resetOrg"
-              <!--                    <a-tree-->
+                        style="margin-left: 20px; border-radius: 4px"
-              <!--                        :tree-data="searchOrgName.keyword ? orgData : treeData"-->
+                        >重置</a-button
-              <!--                        @select="onOrgSelectChange"-->
+                      >
-              <!--                        :fieldNames="{-->
+                    </a-form-item>
-              <!--                          children: 'treeChildList',-->
+                  </div>
-              <!--                          key: 'id',-->
+                  <div class="boeTree">
-              <!--                          title: 'name',-->
+                    <a-tree
-              <!--                          value: 'name',-->
+                      :tree-data="searchOrgName.keyword ? orgData : treeData"
-              <!--                        }"-->
+                      @select="onOrgSelectChange"
-              <!--                        row-key="id"-->
+                      :fieldNames="{
-              <!--                        :row-selection="orgRowSelection"-->
+                        children: 'treeChildList',
-              <!--                        multiple-->
+                        key: 'id',
-              <!--                    >-->
+                        title: 'name',
-              <!--                    </a-tree>-->
+                        value: 'name',
-              <!--                  </div>-->
+                      }"
-              <!--                </div>-->
+                      row-key="id"
-              <!--              </a-tab-pane>-->
+                      :row-selection="orgRowSelection"
+                      multiple
+                    >
+                    </a-tree>
+                  </div>
+                </div>
+              </a-tab-pane> -->
               <a-tab-pane :key="3" tab="受众关联">
                 <div :style="{ height: screenHeight - 235 + 'px' }">
                   <div>
                     <a-form-item label="受众名称：">
                       <a-input
-                          v-model:value="audienceName.keyword"
+                        v-model:value="audienceName.keyword"
-                          style="width: 260px; height: 40px; border-radius: 8px"
+                        style="width: 260px; height: 40px; border-radius: 8px"
-                          placeholder="请输入受众名称"
+                        placeholder="请输入受众名称"
                       />
                       <a-button
-                          type="primary"
+                        type="primary"
-                          @click="searchAudi"
+                        @click="searchAudi"
-                          style="margin-left: 20px; border-radius: 4px"
+                        style="margin-left: 20px; border-radius: 4px"
                       >
                         <template #icon>
-                          <SearchOutlined/>
+                          <SearchOutlined />
                         </template>
                         搜索
                       </a-button>
                       <a-button
-                          @click="resetAudienceInfo"
+                        @click="resetAudienceInfo"
-                          style="margin-left: 20px; border-radius: 4px"
+                        style="margin-left: 20px; border-radius: 4px"
-                      >重置
+                        >重置
-                      </a-button
+                      </a-button>
-                      >
                     </a-form-item>
                   </div>
                   <div class="tableBox tabb">
                     <a-table
-                        style="border: 1px solid #f2f6fe"
+                      style="border: 1px solid #f2f6fe"
-                        row-key="id"
+                      row-key="id"
-                        :columns="audiColums"
+                      :columns="audiColums"
-                        :data-source="audiData"
+                      :data-source="audiData"
-                        :loading="audiLoading"
+                      :loading="audiLoading"
-                        :pagination="auditPagination"
+                      :pagination="auditPagination"
-                        :row-selection="auditRowSelection"
+                      :row-selection="auditRowSelection"
                     />
                   </div>
                 </div>
@@ -188,9 +191,9 @@
               </div>
             </div>
             <div
-                class="selecteds"
+              class="selecteds"
-                :style="{ 'max-height': screenHeight - 235 + 'px' }"
+              :style="{ 'max-height': screenHeight - 235 + 'px' }"
-                style="overflow-y: auto"
+              style="overflow-y: auto"
             >
               <div class="person">快速选人</div>
               <div v-for="(item, i) in selectsData.studentList">
@@ -210,14 +213,14 @@
                 </div>
               </div>
               <div
-                  v-if="!person && selectsData.studentList.length > 10"
+                v-if="!person && selectsData.studentList.length > 10"
-                  class="ifsw"
+                class="ifsw"
               >
                 <div @click="person = !person" class="“sw”">查看更多></div>
               </div>
               <div
-                  v-if="person && selectsData.studentList.length > 10"
+                v-if="person && selectsData.studentList.length > 10"
-                  class="ifsw"
+                class="ifsw"
               >
                 <div @click="person = !person" class="sw">收起&lt;</div>
               </div>
@@ -262,8 +265,8 @@
                 </div>
               </div>
               <div
-                  v-if="!group && selectsData.groupList.length > 10"
+                v-if="!group && selectsData.groupList.length > 10"
-                  class="ifsw"
+                class="ifsw"
               >
                 <div @click="group = !group" class="“sw”">查看更多></div>
               </div>
@@ -338,19 +341,18 @@
   </a-modal>
  -->
   <a-modal
-      style="padding: 0"
+    style="padding: 0"
-      :closable="true"
+    :closable="true"
-      :visible="stageVisible"
+    :visible="stageVisible"
-      :footer="null"
+    :footer="null"
-      centered="true"
+    centered="true"
-      @ok="handleStageOk"
+    @ok="handleStageOk"
-      wrapClassName="changeModal"
+    wrapClassName="changeModal"
   >
     <div class="con">
       <div class="header">
         <div class="inhe">
-
+          <div class="tz">{{ type === 1 ? "选择阶段" : "添加学员到关卡" }}</div>
-          <div class="tz"> {{ type === 1 ? "选择阶段" : "添加学员到关卡" }}</div>
           <div class="mg" @click="closeChangeModal"></div>
         </div>
       </div>
@@ -359,29 +361,34 @@
           <!-- <div class="cur">当前关卡：关卡2</div> -->
           <div class="select">
             <a-select
-                style="width: 400px"
+              style="width: 400px"
-                :placeholder="type === 1 ? '选择阶段' : '选择关卡'"
+              :placeholder="type === 1 ? '选择阶段' : '选择关卡'"
-                v-model:value="selectsData.stageId"
+              v-model:value="selectsData.stageId"
-                className="cus-select"
+              className="cus-select"
             >
-              <a-select-option v-for="(item, i) in stageIds" :key="i" :value="item.id"
+              <a-select-option
-              >{{ item.name || "默认" }}
+                v-for="(item, i) in stageIds"
+                :key="i"
+                :value="item.id"
+                >{{ item.name || "默认" }}
               </a-select-option>
             </a-select>
           </div>
-          <span style="color: #999999;margin-left:10px;"><minus-circle-outlined/>已在其他关卡的学员，不会被添加到该关卡</span>
+          <span style="color: #999999; margin-left: 10px"
-          <div class="btn" style="margin-top:50px;">
+            ><minus-circle-outlined />已在其他关卡的学员，不会被添加到该关卡</span
+          >
+          <div class="btn" style="margin-top: 50px">
             <button
-                class="sameb btn1"
+              class="sameb btn1"
-                @click="closeChangeModal"
+              @click="closeChangeModal"
-                style="cursor: pointer"
+              style="cursor: pointer"
             >
               取消
             </button>
             <button
-                class="sameb btn2"
+              class="sameb btn2"
-                @click="handleStageOk"
+              @click="handleStageOk"
-                style="cursor: pointer"
+              style="cursor: pointer"
             >
               确定
             </button>
@@ -390,14 +397,17 @@
       </div>
     </div>
   </a-modal>
-
-
 </template>
 <script setup>
-import {computed, defineEmits, defineProps, ref, watch} from "vue";
+import { computed, defineEmits, defineProps, ref, watch } from "vue";
-import {request, useBoeApi, useBoeApiPage} from "@/api/request";
+import { request, useBoeApi, useBoeApiPage } from "@/api/request";
-import {AUDIENCE_LIST, ORG_CHILD_LIST, ORG_LIST, USER_LIST} from "@/api/ThirdApi";
+import {
-import {saveStu} from "@/api/index1";
+  AUDIENCE_LIST,
+  ORG_CHILD_LIST,
+  ORG_LIST,
+  USER_LIST,
+} from "@/api/ThirdApi";
+import { saveStu } from "@/api/index1";
 
 const emit = defineEmits({});
 const props = defineProps({
@@ -427,8 +437,8 @@ const nameSearch = ref({
   page: 1,
   pageSize: 10,
 });
-const stuTreeSelectKeys = ref([])
+const stuTreeSelectKeys = ref([]);
-const stuTreeExpandedKeys = ref([])
+const stuTreeExpandedKeys = ref([]);
 const audienceName = ref({
   keyword: "",
   page: 1,
@@ -447,7 +457,7 @@ const {
   pageSize: stuPageSize,
   loading: stuLoading,
   total: stuTotal,
-  reset: stuReset
+  reset: stuReset,
 } = useBoeApiPage(USER_LIST, nameSearch.value, {
   init: false,
   result: (res) => res.result.userInfoList,
@@ -458,13 +468,14 @@ const {
 //   data: orgData,
 //   fetch: searchOrg,
 // } = useBoeApiPage(ORG_LIST, searchOrgName.value)
-const {
+const { data: treeData, loading: orgLoading } = useBoeApi(
-  data: treeData,
+  ORG_LIST,
-  loading: orgLoading,
+  { keyword: "" },
-} = useBoeApi(ORG_LIST, {keyword: ''}, {
+  {
-  init: true,
+    init: true,
-  result: (res) => res.result.map(e => ({...e,isLeaf:false})),
+    result: (res) => res.result.map((e) => ({ ...e, isLeaf: false })),
-})
+  }
+);
 const {
   data: audiData,
   fetch: searchAudi,
@@ -472,11 +483,11 @@ const {
   pageSize: audiPageSize,
   loading: audiLoading,
   total: audiTotal,
-  reset: auditReset
+  reset: auditReset,
 } = useBoeApiPage(AUDIENCE_LIST, audienceName.value, {
   init: true,
   result: (res) =>
-      res.result.audienceList.map((e) => ({...e, id: e.id + ""})),
+    res.result.audienceList.map((e) => ({ ...e, id: e.id + "" })),
   totalPage: (res) => res.result.totalPage,
   total: (res) => res.result.totalElement,
 });
@@ -586,11 +597,13 @@ const closeDrawer = () => {
   stuData.value = [];
   nameSearch.value.keyword = "";
 };
-function onLoadData(treeNode){
+function onLoadData(treeNode) {
-  return request(ORG_CHILD_LIST, {keyword:'',orgId:treeNode.id}).then(r => {
+  return request(ORG_CHILD_LIST, { keyword: "", orgId: treeNode.id }).then(
-    treeNode.dataRef.treeChildList = r.result.directChildList
+    (r) => {
-    treeData.value = [...treeData.value]
+      treeNode.dataRef.treeChildList = r.result.directChildList;
-  })
+      treeData.value = [...treeData.value];
+    }
+  );
 }
 const closeChangeModal = () => {
   stageVisible.value = false;
@@ -615,7 +628,7 @@ function stuStuOrgSelect(e) {
 
 function stuDel(i) {
   stuSelectKeys.value = stuSelectKeys.value.filter(
-      (e) => e !== selectsData.value.studentList[i].id
+    (e) => e !== selectsData.value.studentList[i].id
   );
   selectsData.value.studentList.splice(i, 1);
 }
@@ -626,7 +639,7 @@ function stuDel(i) {
 // }
 function AuditDel(i) {
   auditSelectKeys.value = auditSelectKeys.value.filter(
-      (e) => e !== selectsData.value.groupList[i].id
+    (e) => e !== selectsData.value.groupList[i].id
   );
   selectsData.value.groupList.splice(i, 1);
 }
@@ -668,7 +681,7 @@ const auditChangePagination = (page) => {
 
 //重置
 function peopleName(name) {
-  console.log('people-name', name.target.value)
+  console.log("people-name", name.target.value);
   nameSearch.value.keyword = name.target.value;
 }
 
@@ -677,10 +690,10 @@ const resetStu = () => {
   nameSearch.value.keyword = "";
   nameSearch.value.page = 1;
   nameSearch.value.pageSize = 10;
-  nameSearch.value.departId = null
+  nameSearch.value.departId = null;
-  stuTreeExpandedKeys.value = []
+  stuTreeExpandedKeys.value = [];
-  stuTreeSelectKeys.value = []
+  stuTreeSelectKeys.value = [];
-  stuReset()
+  stuReset();
 };
 //清空选择部门信息
 const deleteDepSelect = () => {
@@ -695,8 +708,8 @@ const resetAudienceInfo = () => {
   audienceName.value.keyword = "";
   audienceName.value.page = 1;
   audienceName.value.pageSize = 10;
-  auditReset()
+  auditReset();
-  searchAudi()
+  searchAudi();
 };
 //全部清除
 // const deleteAll = () => {
@@ -739,9 +752,9 @@ watch(visiable, () => {
   audienceName.value.keyword = "";
   audienceName.value.page = 1;
   audienceName.value.pageSize = 10;
-  nameSearch.value.departId = null
+  nameSearch.value.departId = null;
-  stuTreeExpandedKeys.value = []
+  stuTreeExpandedKeys.value = [];
-  stuTreeSelectKeys.value = []
+  stuTreeSelectKeys.value = [];
   activeKey.value = 1;
   selectsData.value = {
     stageId: "",
@@ -749,8 +762,8 @@ watch(visiable, () => {
     deptList: [],
     groupList: [],
   };
-  stuReset()
+  stuReset();
-  auditReset()
+  auditReset();
 
   searchAudi();
 });

src/components/student/TableStudent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="TableStudent">
     <a-row
       type="flex"
       gutter="12"
@@ -54,7 +54,7 @@
         </CommonStudent>
       </a-col>
       <!-- 新加导入学员 批量换组 导出学习信息  -->
-      <a-col :span="1.5">
+      <a-col :span="1.5" v-if="type === 1 || type === 2">
         <a-button class="cus-btn white">
           <template #icon
             ><img
@@ -86,6 +86,52 @@
           批量调整关卡
         </a-button>
       </a-col>
+      <!-- 新加批量操作、导出、导出作业 -->
+      <a-col :span="1.5" v-if="type === 3" class="batchOpera">
+        <div class="stmm_btn btn4" @click="hideShow">
+          <div class="btn4_sub">
+            <span style="color: #4ea6ff; margin-right: 4px"> 批量操作 </span>
+            <div
+              class="b_zk"
+              :style="{ display: hideshow ? 'block' : 'none' }"
+            ></div>
+            <div
+              class="b_sq"
+              :style="{ display: hideshow ? 'none' : 'block' }"
+            ></div>
+          </div>
+          <div
+            class="btn4_sup"
+            :style="{ display: hideshow ? 'none' : 'block' }"
+          >
+            <div class="btnsbox">
+              <div class="btn4_tit" @click="handleAllJion">
+                <span>批量录入成绩</span>
+              </div>
+              <div class="btn4_op1" @click="handleAllover">
+                <span>批量结业</span>
+              </div>
+              <div class="btn4_op2" @click="handleAllSuc">
+                <span>批量通过</span>
+              </div>
+              <div class="btn4_op3" @click="handleAllReject">
+                <span>批量拒绝</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="stmm_btn btn5" @click="handleExportStu">
+          <div class="export"></div>
+          <div class="btnText">导出</div>
+        </div>
+        <div
+          class="stmm_btn btn5"
+          style="margin-left: 15px"
+          @click="handleExportStu"
+        >
+          <div class="btnText">导出作业</div>
+        </div>
+      </a-col>
     </a-row>
     <div style="margin-top: 20px">
       <a-table
@@ -117,7 +163,7 @@
             <a-col>
               <slot name="extension" v-bind:data="{ record }"></slot>
             </a-col>
-            <!-- 新加 -->
+            <!-- 新加 换组 通过 拒绝-->
             <a-col v-if="type === 1">
               <div
                 style="
@@ -131,6 +177,32 @@
                 换组
               </div>
             </a-col>
+            <a-col v-if="type === 3">
+              <div
+                style="
+                  color: #4ea6ff;
+                  font-size: 14px;
+                  text-align: center;
+                  margin-left: 10px;
+                  cursor: pointer;
+                "
+              >
+                通过
+              </div>
+            </a-col>
+            <a-col v-if="type === 3">
+              <div
+                style="
+                  color: #4ea6ff;
+                  font-size: 14px;
+                  text-align: center;
+                  margin-left: 10px;
+                  cursor: pointer;
+                "
+              >
+                拒绝
+              </div>
+            </a-col>
             <a-col>
               <div
                 @click="del(record.id)"
@@ -306,7 +378,7 @@ const tablecolumns = ref([
     title: "加入方式",
     dataIndex: "source",
     key: "source",
-    width: 100,
+    width: "15%",
     align: "center",
     customRender: ({ record: { source } }) =>
       ({ 1: "快速添加", 2: "组织", 3: "受众", 4: "报名" }[source]),
@@ -316,7 +388,7 @@ const tablecolumns = ref([
     title: "操作",
     dataIndex: "operation",
     key: "operation",
-    width: 170,
+    width: 210,
     align: "center",
     slots: { customRender: "action" },
   },
@@ -478,8 +550,24 @@ const projectId = ref(null);
 
 // 	console.log(checkStuId.value, projectId.value)
 // }
+
+//面授课批量操作
+const hideshow = ref(true);
+const hideShow = () => {
+  if (hideshow.value == true) {
+    hideshow.value = false;
+  } else {
+    hideshow.value = true;
+  }
+};
 </script>
 <style lang="scss">
+.TableStudent {
+  table tr th.ant-table-selection-column,
+  table tr td.ant-table-selection-column {
+    padding-left: 3px;
+  }
+}
 .stydentName {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -553,7 +641,113 @@ const projectId = ref(null);
     rgba(78, 166, 255, 0) 100%
   );
 }
+.batchOpera {
+  display: flex;
+  .stmm_btn {
+    width: 100px;
+    height: 40px;
+    margin-right: 14px;
+    background: #ffffff;
+    border: 1px solid #4ea6ff;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    cursor: pointer;
 
+    .btnText {
+      color: #4ea6ff;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 40px;
+    }
+  }
+
+  .btn4 {
+    display: flex;
+    width: 130px;
+    flex-direction: column;
+    position: relative;
+
+    .btn4_sub {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .b_zk {
+        width: 10px;
+        height: 8px;
+        background-image: url("@/assets/images/coursewareManage/down.png");
+        background-size: 100% 100%;
+      }
+
+      .b_sq {
+        width: 10px;
+        height: 8px;
+        background-image: url("@/assets/images/coursewareManage/up.png");
+        background-size: 100% 100%;
+      }
+    }
+
+    .btn4_sup {
+      width: 100%;
+      background-color: #ffffff;
+      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
+      position: absolute;
+      top: 40px;
+      z-index: 999;
+
+      .btnsbox {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        .btn4_tit {
+          margin: 10px auto;
+          white-space: nowrap;
+        }
+
+        .btn4_op1,
+        .btn4_op2,
+        .btn4_op3 {
+          margin-bottom: 10px;
+          white-space: nowrap;
+        }
+        .btn4_tit:hover,
+        .btn4_op1:hover,
+        .btn4_op2:hover,
+        .btn4_op3:hover {
+          color: #4ea6ff;
+        }
+      }
+    }
+  }
+
+  .btn5 {
+    margin-right: 0px;
+
+    .export {
+      width: 17px;
+      height: 18px;
+      margin-right: 5px;
+      background-image: url("@/assets/images/coursewareManage/export.png");
+    }
+  }
+
+  .btn5:hover {
+    background: #4ea6ff;
+
+    .export {
+      background-image: url("@/assets/images/coursewareManage/export1.png");
+    }
+
+    .btnText {
+      color: #ffffff;
+    }
+  }
+}
 /*.delete {
   z-index: 9999;
   width: 424px;