From 2a327c5c19f880560f00a573ada27de6d024d5c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=8B=E6=96=87=E8=B6=85?= <songwc@dongwu-inc.com>
Date: Sun, 9 Oct 2022 21:35:44 +0800
Subject: [PATCH] =?UTF-8?q?style=EF=BC=9A=E5=AE=8C=E6=88=90=E5=88=9B?=
 =?UTF-8?q?=E5=BB=BA=E5=85=B3=E5=8D=A1=E7=BB=86=E8=8A=82=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E9=83=A8=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/courselibrary/CoursewareManage.vue | 1452 ++++++++++--------
 src/views/learningpath/LevelAdd.vue          |  246 ++-
 2 files changed, 1021 insertions(+), 677 deletions(-)

diff --git a/src/views/courselibrary/CoursewareManage.vue b/src/views/courselibrary/CoursewareManage.vue
index 03da7922..a82089d1 100644
--- a/src/views/courselibrary/CoursewareManage.vue
+++ b/src/views/courselibrary/CoursewareManage.vue
@@ -6,13 +6,25 @@
       <div class="filter">
         <div class="filterItems">
           <div class="fi_input fitems">
-              <a-input v-model:value="value" style="width: 270px ;height:40px;border-radius: 8px;" placeholder="请输入项目名称" />
+            <a-input
+              v-model:value="value"
+              style="width: 270px; height: 40px; border-radius: 8px"
+              placeholder="请输入项目名称"
+            />
           </div>
           <div class="fi_input fitems">
-              <a-input v-model:value="value" style="width: 270px ;height:40px;border-radius: 8px;" placeholder="请输入名称" />
+            <a-input
+              v-model:value="value"
+              style="width: 270px; height: 40px; border-radius: 8px"
+              placeholder="请输入名称"
+            />
           </div>
           <div class="fi_input fitems">
-              <a-input v-model:value="value" style="width: 270px ;height:40px;border-radius: 8px;" placeholder="请输入所属项目" />
+            <a-input
+              v-model:value="value"
+              style="width: 270px; height: 40px; border-radius: 8px"
+              placeholder="请输入所属项目"
+            />
           </div>
           <div class="select fitems">
             <a-select
@@ -23,7 +35,7 @@
               allowClear
               showSearch
             >
-          </a-select>
+            </a-select>
           </div>
           <div class="select fitems">
             <a-select
@@ -46,30 +58,33 @@
           </div>
         </div>
       </div>
-      
+
       <div class="btns">
-          <div class="btn btn1">
-            <div class="search"></div>
-            <div class="btnText">搜索</div>
-          </div>
-          <div class="btn btn2">
-            <div class="search"></div>
-            <div class="btnText">重置</div>
-          </div>
-          <div class="btn btn3">
-            <div class="search"></div>
-            <div class="btnText">导出</div>
-          </div>
-          <div class="btn btn4">
-            <div class="search"></div>
-            <div class="btnText" @click="of_hShow">新建课程</div>
-          </div>
+        <div class="btn btn1">
+          <div class="search"></div>
+          <div class="btnText">搜索</div>
+        </div>
+        <div class="btn btn2">
+          <div class="search"></div>
+          <div class="btnText">重置</div>
+        </div>
+        <div class="btn btn3">
+          <div class="search"></div>
+          <div class="btnText">导出</div>
+        </div>
+        <div class="btn btn4">
+          <div class="search"></div>
+          <div class="btnText" @click="of_hShow">新建课程</div>
+        </div>
       </div>
-    <!-- 搜索框及按钮 -->
+      <!-- 搜索框及按钮 -->
     </div>
 
     <!-- 新建选择线上还是面授课弹窗 -->
-    <div class="selectonlineface" :style="{display:of_hs ?  'block' :'none' }">
+    <div
+      class="selectonlineface"
+      :style="{ display: of_hs ? 'block' : 'none' }"
+    >
       <div class="of_header"></div>
       <div class="of_main">
         <div class="m_header">
@@ -79,67 +94,86 @@
         </div>
         <div class="m_body">
           <div class="b_header">
-            <span style="font-weight: 900; color: red;margin-right: 6px;">⃰</span>
-            <span style="margin-right:14px;">课程名称</span>
+            <span style="font-weight: 900; color: red; margin-right: 6px"
+              >⃰</span
+            >
+            <span style="margin-right: 14px">课程名称</span>
             <div class="b_input">
-              <a-input v-model:value="value" style="width: 440px ;height:40px;border-radius: 8px;" placeholder="请输入课程名称" />
+              <a-input
+                v-model:value="value"
+                style="width: 440px; height: 40px; border-radius: 8px"
+                placeholder="请输入课程名称"
+              />
             </div>
           </div>
           <div class="b_sub">
             <div class="bs_header">
               <div class="b_left">课程命名规则</div>
-              <div class="b_right" @click="hideShow" >
-                <div class="b_zk" :style="{display:hideshow ?  'block' :'none' }">
-                  <span  style="color: #4EA6FF;">收起</span>
+              <div class="b_right" @click="hideShow">
+                <div
+                  class="b_zk"
+                  :style="{ display: hideshow ? 'block' : 'none' }"
+                >
+                  <span style="color: #4ea6ff">收起</span>
                 </div>
-                <div class="b_sq" :style="{display:hideshow ?  'none' :'block' }">
-                  <span style="color: #4EA6FF;">展开</span>
+                <div
+                  class="b_sq"
+                  :style="{ display: hideshow ? 'none' : 'block' }"
+                >
+                  <span style="color: #4ea6ff">展开</span>
                 </div>
                 <div class="b_icon"></div>
               </div>
             </div>
-            <div class="bl_detail" :style="{display:hideshow ?  'block' :'none'  }">
-              <span style="color: #999BA3;">
-                  1、课程名称统一不加书名号。<br/>
-                  2、项目名称、属地等信息如需体现在课程名称中，请放在课程名称信息
-                  之后，如“时间管理（GROW180项目）”或“时间管理（B*）”确保首先
-                  看到的是课程内容主题。<br/>
-                  3、同一课程如先后有多个版本，原则上仅开放最新版本，旧版本应停用
-                  版本如必须以年份标明，请以“沟通技巧（2022年）”的方式呈现。
+            <div
+              class="bl_detail"
+              :style="{ display: hideshow ? 'block' : 'none' }"
+            >
+              <span style="color: #999ba3">
+                1、课程名称统一不加书名号。<br />
+                2、项目名称、属地等信息如需体现在课程名称中，请放在课程名称信息
+                之后，如“时间管理（GROW180项目）”或“时间管理（B*）”确保首先
+                看到的是课程内容主题。<br />
+                3、同一课程如先后有多个版本，原则上仅开放最新版本，旧版本应停用
+                版本如必须以年份标明，请以“沟通技巧（2022年）”的方式呈现。
               </span>
             </div>
           </div>
           <div class="b_center">
-            <span style="font-weight: 900; color: red;margin-right: 6px;">⃰</span>
-            <span style="margin-right:14px;">授课形式</span>
+            <span style="font-weight: 900; color: red; margin-right: 6px"
+              >⃰</span
+            >
+            <span style="margin-right: 14px">授课形式</span>
             <div class="bc_boxl">
               <div class="ol_checkbox"><div class="checkbtn"></div></div>
-              <span style="margin:auto 31px auto 5px;">线上</span>
+              <span style="margin: auto 31px auto 5px">线上</span>
             </div>
-            <div class="bc_boxr"  @click="bs_hShow">
+            <div class="bc_boxr" @click="bs_hShow">
               <div class="ol_checkbox"><div class="checkbtn"></div></div>
-              <span style="margin:auto 31px auto 5px;">面授</span>
+              <span style="margin: auto 31px auto 5px">面授</span>
             </div>
           </div>
-          <div class="b_sup" :style="{display:bs_hs ?  'block' :'none'  }">
+          <div class="b_sup" :style="{ display: bs_hs ? 'block' : 'none' }">
             <div class="bs_box">
-              <span style="font-weight: 900; color: red;margin-right: 6px;">⃰</span>
-              <span style="margin-right:14px;">是否设置目录</span>
+              <span style="font-weight: 900; color: red; margin-right: 6px"
+                >⃰</span
+              >
+              <span style="margin-right: 14px">是否设置目录</span>
               <div class="ol_checkbox">
                 <div class="checkbtn"></div>
               </div>
-              <span style="margin:auto 45px auto 5px;">是</span>
+              <span style="margin: auto 45px auto 5px">是</span>
               <div class="ol_checkbox">
                 <div class="checkbtn"></div>
               </div>
-              <span style="margin:auto 0px auto 5px;">否</span>
+              <span style="margin: auto 0px auto 5px">否</span>
             </div>
           </div>
           <div class="b_footer">
             <div class="btn btn5">
               <div class="btnText">取消</div>
             </div>
-            <div class="btn btn6" >
+            <div class="btn btn6">
               <div class="btnText" @click="createft">确定</div>
             </div>
           </div>
@@ -151,151 +185,196 @@
     <!-- 确定新建面授课弹窗 -->
     <div class="faceteach">
       <div class="ft_header"></div>
-        <div class="ft_main">
-          <div class="m_header">
-            <div class="add_icon"></div>
-            <span>新建面授课</span>
-            <div class="add_exit">x</div>
-          </div>
-          <div class="m_title">课程信息</div>
-          <div class="m_body">
-            <div class="mb_left">
-              <div class="mbl_items1">
-                <span style="font-weight: 900; color: red;margin-right: 6px;">⃰</span>
-                <span style="margin-right:14px;">课程名称</span>
-                <div class="i1_input">
-                  <a-input v-model:value="value" style="width: 440px ;height:40px;border-radius: 8px;" placeholder="请输入课程名称" />
-                </div>
-              </div>
-              <div class="mbl_items2">
-                <div class="i2_top">
-                  <div class="i2_left">课程命名规则</div>
-                  <div class="i2_right" @click="hideShow" >
-                    <div class="b_zk" :style="{display:hideshow ?  'block' :'none' }">
-                      <span  style="color: #4EA6FF;">收起</span>
-                    </div>
-                    <div class="b_sq" :style="{display:hideshow ?  'none' :'block' }">
-                      <span style="color: #4EA6FF;">展开</span>
-                    </div>
-                    <div class="b_icon"></div>
-                  </div>
-                </div>
-                <div class="i2_detail" :style="{display:hideshow ?  'block' :'none'  }">
-                    <span style="color: #999BA3;">
-                        1、课程名称统一不加书名号。<br/>
-                        2、项目名称、属地等信息如需体现在课程名称中，请放在课程名称信息
-                        之后，如“时间管理（GROW180项目）”或“时间管理（B*）”确保首先
-                        看到的是课程内容主题。<br/>
-                        3、同一课程如先后有多个版本，原则上仅开放最新版本，旧版本应停用
-                        版本如必须以年份标明，请以“沟通技巧（2022年）”的方式呈现。
-                    </span>
-                </div>
-              </div>
-              <div class="mbl_items3">
-                <div class="i3_top">
-                  <span style="font-weight: 900; color: red;margin-right: 6px;">⃰</span>
-                  <span style="margin-right:14px;">封面图</span>
-                  <div class="i3_upload">
-                    <a-upload
-                      v-model:file-list="fileList"
-                      name="avatar"
-                      list-type="picture-card"
-                      class="avatar-uploader"
-                      :show-upload-list="false"
-                      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-                      :before-upload="beforeUpload"
-                      @change="handleChange"
-                    >
-                      <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
-                      <div v-else>
-                        <loading-outlined v-if="loading"></loading-outlined>
-                        <plus-outlined v-else></plus-outlined>
-                        <div class="ant-upload-text">Upload</div>
-                      </div>
-                    </a-upload>
-                  </div>
-                </div>
-                <div class="i3_bottom">
-                  <span style="color:#999BA3;">高宽比为16:9 (如:800*450) png或jpg图片</span>
-                </div>
-              </div>
-              <div class="mbl_items4">
-                <span style="font-weight: 900; color: red;margin-right: 6px;">⃰</span>
-                <span style="margin-right:14px;">目标人群</span>
-                <div class="i1_input">
-                  <a-input v-model:value="value" style="width: 440px ;height:40px;border-radius: 8px;" placeholder="请输入目标人群" />
-                </div>
-              </div>
-              <div class="mbl_items5">
-                <span style="margin-right:14px;">课程价值</span>
-                <div class="i1_input">
-                  <a-input v-model:value="value" style="width: 440px ;height:40px;border-radius: 8px;" placeholder="请输入课程价值" />
-                </div>
-              </div>
-              <div class="mbl_items6">
-                <span style="font-weight: 900; color: red;margin-right: 6px;">⃰</span>
-                <span style="margin-right:14px;">内容分类</span>
-                <div class="select i6_input">
-                  <a-select
-                    dropdownClassName="dropdown-style"
-                    style="width: 440px"
-                    placeholder="请选择"
-                    :options="options2"
-                    allowClear
-                    showSearch
-                  ></a-select>
-                </div>
-              </div>
-              <div class="mbl_items7">
-                <span style="margin-right:14px;">场景</span>
-                <div class="select i7_input">
-                  <a-select
-                    dropdownClassName="dropdown-style"
-                    style="width: 440px"
-                    placeholder="请选择"
-                    :options="options2"
-                    allowClear
-                    showSearch
-                  ></a-select>
-                </div>
-              </div>
-              <div class="mbl_items8">
-                <div class="i8_top">
-                  <span style="margin-right:14px;">内容标签</span>
-                  <div class="i1_input">
-                    <a-input v-model:value="value" style="width: 440px ;height:40px;border-radius: 8px;" placeholder="请输入按回车键创建成功" />
-                  </div>
-                </div>
-                <div class="i8_bottom">
-                  <a-tag closable @close="log">Tag 2</a-tag>
-                  <a-tag closable @close.prevent>Prevent Default</a-tag>
-                </div>
+      <div class="ft_main">
+        <div class="m_header">
+          <div class="add_icon"></div>
+          <span>新建面授课</span>
+          <div class="add_exit">x</div>
+        </div>
+        <div class="m_title">课程信息</div>
+        <div class="m_body">
+          <div class="mb_left">
+            <div class="mbl_items1">
+              <span style="font-weight: 900; color: red; margin-right: 6px"
+                >⃰</span
+              >
+              <span style="margin-right: 14px">课程名称</span>
+              <div class="i1_input">
+                <a-input
+                  v-model:value="value"
+                  style="width: 440px; height: 40px; border-radius: 8px"
+                  placeholder="请输入课程名称"
+                />
               </div>
             </div>
-            <div class="mb_right">
-              <div class="mbl_items9">
-                <span style="font-weight: 900; color: red;margin-right: 6px;">⃰</span>
-                <span style="margin-right:14px;">授课教师</span>
+            <div class="mbl_items2">
+              <div class="i2_top">
+                <div class="i2_left">课程命名规则</div>
+                <div class="i2_right" @click="hideShow">
+                  <div
+                    class="b_zk"
+                    :style="{ display: hideshow ? 'block' : 'none' }"
+                  >
+                    <span style="color: #4ea6ff">收起</span>
+                  </div>
+                  <div
+                    class="b_sq"
+                    :style="{ display: hideshow ? 'none' : 'block' }"
+                  >
+                    <span style="color: #4ea6ff">展开</span>
+                  </div>
+                  <div class="b_icon"></div>
+                </div>
+              </div>
+              <div
+                class="i2_detail"
+                :style="{ display: hideshow ? 'block' : 'none' }"
+              >
+                <span style="color: #999ba3">
+                  1、课程名称统一不加书名号。<br />
+                  2、项目名称、属地等信息如需体现在课程名称中，请放在课程名称信息
+                  之后，如“时间管理（GROW180项目）”或“时间管理（B*）”确保首先
+                  看到的是课程内容主题。<br />
+                  3、同一课程如先后有多个版本，原则上仅开放最新版本，旧版本应停用
+                  版本如必须以年份标明，请以“沟通技巧（2022年）”的方式呈现。
+                </span>
+              </div>
+            </div>
+            <div class="mbl_items3">
+              <div class="i3_top">
+                <span style="font-weight: 900; color: red; margin-right: 6px"
+                  >⃰</span
+                >
+                <span style="margin-right: 14px">封面图</span>
+                <div class="i3_upload">
+                  <a-upload
+                    v-model:file-list="fileList"
+                    name="avatar"
+                    list-type="picture-card"
+                    class="avatar-uploader"
+                    :show-upload-list="false"
+                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+                    :before-upload="beforeUpload"
+                    @change="handleChange"
+                  >
+                    <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
+                    <div v-else>
+                      <loading-outlined v-if="loading"></loading-outlined>
+                      <plus-outlined v-else></plus-outlined>
+                      <div class="ant-upload-text">Upload</div>
+                    </div>
+                  </a-upload>
+                </div>
+              </div>
+              <div class="i3_bottom">
+                <span style="color: #999ba3"
+                  >高宽比为16:9 (如:800*450) png或jpg图片</span
+                >
+              </div>
+            </div>
+            <div class="mbl_items4">
+              <span style="font-weight: 900; color: red; margin-right: 6px"
+                >⃰</span
+              >
+              <span style="margin-right: 14px">目标人群</span>
+              <div class="i1_input">
+                <a-input
+                  v-model:value="value"
+                  style="width: 440px; height: 40px; border-radius: 8px"
+                  placeholder="请输入目标人群"
+                />
+              </div>
+            </div>
+            <div class="mbl_items5">
+              <span style="margin-right: 14px">课程价值</span>
+              <div class="i1_input">
+                <a-input
+                  v-model:value="value"
+                  style="width: 440px; height: 40px; border-radius: 8px"
+                  placeholder="请输入课程价值"
+                />
+              </div>
+            </div>
+            <div class="mbl_items6">
+              <span style="font-weight: 900; color: red; margin-right: 6px"
+                >⃰</span
+              >
+              <span style="margin-right: 14px">内容分类</span>
+              <div class="select i6_input">
+                <a-select
+                  dropdownClassName="dropdown-style"
+                  style="width: 440px"
+                  placeholder="请选择"
+                  :options="options2"
+                  allowClear
+                  showSearch
+                ></a-select>
+              </div>
+            </div>
+            <div class="mbl_items7">
+              <span style="margin-right: 14px">场景</span>
+              <div class="select i7_input">
+                <a-select
+                  dropdownClassName="dropdown-style"
+                  style="width: 440px"
+                  placeholder="请选择"
+                  :options="options2"
+                  allowClear
+                  showSearch
+                ></a-select>
+              </div>
+            </div>
+            <div class="mbl_items8">
+              <div class="i8_top">
+                <span style="margin-right: 14px">内容标签</span>
                 <div class="i1_input">
-                  <a-input v-model:value="value" style="width: 440px ;height:40px;border-radius: 8px;" placeholder="请输入" />
+                  <a-input
+                    v-model:value="value"
+                    style="width: 440px; height: 40px; border-radius: 8px"
+                    placeholder="请输入按回车键创建成功"
+                  />
                 </div>
               </div>
-              <div class="mbl_items10">
-                <span style="margin-right:14px;">课程简介</span>
-                <div class="i10_textarea">
-                  <a-textarea v-model:value="value" style="width: 440px ;height:100px;border-radius: 8px; " placeholder="请输入" />
-                </div>
+              <div class="i8_bottom">
+                <a-tag closable @close="log">Tag 2</a-tag>
+                <a-tag closable @close.prevent>Prevent Default</a-tag>
               </div>
-              <div class="mbl_items11">
-                <div class="i11_top">
-                  <span style="margin-right: 10px;">附件</span>
-                  <div class="accessory_icon"></div>
-                  <span style="color:#4EA6FF;">添加附件</span>
-                </div>
+            </div>
+          </div>
+          <div class="mb_right">
+            <div class="mbl_items9">
+              <span style="font-weight: 900; color: red; margin-right: 6px"
+                >⃰</span
+              >
+              <span style="margin-right: 14px">授课教师</span>
+              <div class="i1_input">
+                <a-input
+                  v-model:value="value"
+                  style="width: 440px; height: 40px; border-radius: 8px"
+                  placeholder="请输入"
+                />
+              </div>
+            </div>
+            <div class="mbl_items10">
+              <span style="margin-right: 14px">课程简介</span>
+              <div class="i10_textarea">
+                <a-textarea
+                  v-model:value="value"
+                  style="width: 440px; height: 100px; border-radius: 8px"
+                  placeholder="请输入"
+                />
+              </div>
+            </div>
+            <div class="mbl_items11">
+              <div class="i11_top">
+                <span style="margin-right: 10px">附件</span>
+                <div class="accessory_icon"></div>
+                <span style="color: #4ea6ff">添加附件</span>
               </div>
             </div>
           </div>
         </div>
+      </div>
     </div>
     <!-- 确定新建面授课弹窗 -->
 
@@ -313,130 +392,148 @@
   </div>
 </template>
 <script>
-import { reactive, toRefs, defineComponent, ref } from 'vue';
-import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
-import { message } from 'ant-design-vue';
-const columns = [{
-  title: '序号',
-  width: 200,
-  dataIndex: 'num',
-  key: 'num',
-  align: "center",
-}, {
-  title: '名称',
-  width: 200,
-  dataIndex: 'name',
-  key: 'name',
-}, {
-  title: '内容分类',
-  width: 200,
-  dataIndex: 'content',
-  key: '1',
-  align: "center",
-}, {
-  title: '课程形式',
-  width: 200,
-  dataIndex: 'courseform',
-  key: '2',
-  align: "center",
-}, {
-  title: ' 所属项目',
-  width: 300,
-  dataIndex: 'project',
-  key: '3',
-  align: "center",
-}, {
-  title: '学习人数',
-  width: 200,
-  dataIndex: 'stunum',
-  key: '4',
-  align: "center",
-}, {
-  title: '评分',
-  width: 200,
-  dataIndex: 'grade',
-  key: '5',
-  align: "center",
-}, {
-  title: '状态',
-  width: 200,
-  dataIndex: 'status',
-  key: '6',
-  align: "center",
-}, {
-  title: '是否发布',
-  width: 200,
-  dataIndex: 'ynpub',
-  key: '7',
-  align: "center",
-}, {
-  title: '创建人',
-  width: 200,
-  dataIndex: 'creator',
-  key: '8',
-  align: "center",
-}, {
-  title: '创建时间',
-  width: 280,
-  dataIndex: 'createtime',
-  key: '9',
-  align: "center",
-}, {
-  title: '上线时间',
-  width: 280,
-  dataIndex: 'pubtime',
-  key: '10',
-  align: "center",
-}, {
-  title: '是否停用',
-  width: 200,
-  key: 'either',
-  dataIndex: 'ynuse',
-  align: "center",
-}, {
-  title: '操作',
-  width: 400,
-  key: 'operation',
-  fixed: 'right',
-  align: "center",
-}];
-const data = [{
-  key: '1',
-  num:1,
-  name: '时间管理',
-  content: '领导力',
-  courseform: '线上',
-  project: '管理者进阶-腾飞班1',
-  stunum: '50',
-  grade: '5',
-  status: '未提交',
-  ynpub: '未发布',
-  creator: '管理员',
-  createtime: '2022-07-20 9:30',
-  pubtime: '2022-07-20 9:30',
-  ynuse: '启用',
-  kkty:false,
-}, {
-  key: '2',
-  num:2,
-  name: '智能制造初级课程',
-  content: '专业力',
-  courseform: '线上',
-  project: '-',
-  stunum: '200',
-  grade: '5',
-  status: '待审核',
-  ynpub: '未发布',
-  creator: '管理员',
-  createtime: '2022-07-20 9:30',
-  pubtime: '2022-07-20 9:30',
-  ynuse: '启用',
-  kkty:true,
-  }];
+import { reactive, toRefs, defineComponent, ref } from "vue";
+import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";
+import { message } from "ant-design-vue";
+const columns = [
+  {
+    title: "序号",
+    width: 200,
+    dataIndex: "num",
+    key: "num",
+    align: "center",
+  },
+  {
+    title: "名称",
+    width: 200,
+    dataIndex: "name",
+    key: "name",
+  },
+  {
+    title: "内容分类",
+    width: 200,
+    dataIndex: "content",
+    key: "1",
+    align: "center",
+  },
+  {
+    title: "课程形式",
+    width: 200,
+    dataIndex: "courseform",
+    key: "2",
+    align: "center",
+  },
+  {
+    title: " 所属项目",
+    width: 300,
+    dataIndex: "project",
+    key: "3",
+    align: "center",
+  },
+  {
+    title: "学习人数",
+    width: 200,
+    dataIndex: "stunum",
+    key: "4",
+    align: "center",
+  },
+  {
+    title: "评分",
+    width: 200,
+    dataIndex: "grade",
+    key: "5",
+    align: "center",
+  },
+  {
+    title: "状态",
+    width: 200,
+    dataIndex: "status",
+    key: "6",
+    align: "center",
+  },
+  {
+    title: "是否发布",
+    width: 200,
+    dataIndex: "ynpub",
+    key: "7",
+    align: "center",
+  },
+  {
+    title: "创建人",
+    width: 200,
+    dataIndex: "creator",
+    key: "8",
+    align: "center",
+  },
+  {
+    title: "创建时间",
+    width: 280,
+    dataIndex: "createtime",
+    key: "9",
+    align: "center",
+  },
+  {
+    title: "上线时间",
+    width: 280,
+    dataIndex: "pubtime",
+    key: "10",
+    align: "center",
+  },
+  {
+    title: "是否停用",
+    width: 200,
+    key: "either",
+    dataIndex: "ynuse",
+    align: "center",
+  },
+  {
+    title: "操作",
+    width: 400,
+    key: "operation",
+    fixed: "right",
+    align: "center",
+  },
+];
+const data = [
+  {
+    key: "1",
+    num: 1,
+    name: "时间管理",
+    content: "领导力",
+    courseform: "线上",
+    project: "管理者进阶-腾飞班1",
+    stunum: "50",
+    grade: "5",
+    status: "未提交",
+    ynpub: "未发布",
+    creator: "管理员",
+    createtime: "2022-07-20 9:30",
+    pubtime: "2022-07-20 9:30",
+    ynuse: "启用",
+    kkty: false,
+  },
+  {
+    key: "2",
+    num: 2,
+    name: "智能制造初级课程",
+    content: "专业力",
+    courseform: "线上",
+    project: "-",
+    stunum: "200",
+    grade: "5",
+    status: "待审核",
+    ynpub: "未发布",
+    creator: "管理员",
+    createtime: "2022-07-20 9:30",
+    pubtime: "2022-07-20 9:30",
+    ynuse: "启用",
+    kkty: true,
+  },
+];
 
-  function getBase64(img, callback) {
+function getBase64(img, callback) {
   const reader = new FileReader();
-  reader.addEventListener('load', () => callback(reader.result));
+  reader.addEventListener("load", () => callback(reader.result));
   reader.readAsDataURL(img);
 }
 export default defineComponent({
@@ -448,39 +545,40 @@ export default defineComponent({
   setup() {
     const fileList = ref([]);
     const loading = ref(false);
-    const imageUrl = ref('');
+    const imageUrl = ref("");
 
-    const handleChange = info => {
-      if (info.file.status === 'uploading') {
+    const handleChange = (info) => {
+      if (info.file.status === "uploading") {
         loading.value = true;
         return;
       }
 
-      if (info.file.status === 'done') {
+      if (info.file.status === "done") {
         // Get this url from response in real world.
-        getBase64(info.file.originFileObj, base64Url => {
+        getBase64(info.file.originFileObj, (base64Url) => {
           imageUrl.value = base64Url;
           loading.value = false;
         });
       }
 
-      if (info.file.status === 'error') {
+      if (info.file.status === "error") {
         loading.value = false;
-        message.error('upload error');
+        message.error("upload error");
       }
     };
 
-    const beforeUpload = file => {
-      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+    const beforeUpload = (file) => {
+      const isJpgOrPng =
+        file.type === "image/jpeg" || file.type === "image/png";
 
       if (!isJpgOrPng) {
-        message.error('You can only upload JPG file!');
+        message.error("You can only upload JPG file!");
       }
 
       const isLt2M = file.size / 1024 / 1024 < 2;
 
       if (!isLt2M) {
-        message.error('Image must smaller than 2MB!');
+        message.error("Image must smaller than 2MB!");
       }
 
       return isJpgOrPng && isLt2M;
@@ -495,71 +593,81 @@ export default defineComponent({
     };
   },
 
-
   data() {
-    const options1 = ref([ {
-      value: 'value1',
-      label: '请选择状态',
-    },{
-      value: 'uncommitted',
-      label: '未提交',
-    }, {
-      value: 'tocheck',
-      label: '待审核',
-    }, {
-      value: 'checked',
-      label: '已审核',
-    }, {
-      value: 'uncheck',
-      label: '审核未通过',
-      }]);
+    const options1 = ref([
+      {
+        value: "value1",
+        label: "请选择状态",
+      },
+      {
+        value: "uncommitted",
+        label: "未提交",
+      },
+      {
+        value: "tocheck",
+        label: "待审核",
+      },
+      {
+        value: "checked",
+        label: "已审核",
+      },
+      {
+        value: "uncheck",
+        label: "审核未通过",
+      },
+    ]);
 
-    const options2 = ref([{
-      value: 'value2',
-      label: '请选择内容分类',
-    }, {
-      value: 'leadership',
-      label: '领导力',
-    }, {
-      value: 'ingeneral',
-      label: '通用力',
-    }, {
-      value: 'profession',
-      label: '专业力',
-      }]);
+    const options2 = ref([
+      {
+        value: "value2",
+        label: "请选择内容分类",
+      },
+      {
+        value: "leadership",
+        label: "领导力",
+      },
+      {
+        value: "ingeneral",
+        label: "通用力",
+      },
+      {
+        value: "profession",
+        label: "专业力",
+      },
+    ]);
 
     const state = reactive({
-      of_hs:false,
+      of_hs: false,
       hideshow: false,
-      bs_hs:true,
+      bs_hs: true,
     });
 
     const of_hShow = () => {
       if (state.of_hs == false) {
-        state.of_hs = true
-      } 
-    }
+        state.of_hs = true;
+      }
+    };
 
     const hideShow = () => {
       if (state.hideshow == false) {
-        state.hideshow = true
+        state.hideshow = true;
       } else {
-        state.hideshow = false
+        state.hideshow = false;
       }
-    }
+    };
 
     const bs_hShow = () => {
       if (state.bs_hs == true) {
-        state.bs_hs = false
+        state.bs_hs = false;
       } else {
-        state.bs_hs = true
+        state.bs_hs = true;
       }
-    }
+    };
     const createft = () => {
       if (state.bs_hs == false) {
-        state.of_hs = false
-      } 
-    }
+        state.of_hs = false;
+      }
+    };
     return {
       ...toRefs(state),
       data,
@@ -573,7 +681,6 @@ export default defineComponent({
     };
   },
 });
-
 </script>
 <style lang="scss">
 // .dropdown-style{
@@ -590,387 +697,394 @@ export default defineComponent({
   height: 100%;
   display: flex;
   flex-direction: column;
-  .headerf{
+  .headerf {
     display: flex;
     margin-left: 38px;
     margin-top: 30px;
     .filter {
-      width: calc(70% - 40px) ;
-      margin-right: 30px ;
+      width: calc(70% - 40px);
+      margin-right: 30px;
       display: flex;
       justify-content: space-between;
       flex-wrap: wrap;
       .filterItems {
         display: flex;
         flex-wrap: wrap;
-        .fitems{
+        .fitems {
           margin-right: 20px;
           margin-bottom: 20px;
         }
       }
     }
-      .btns {
+    .btns {
+      display: flex;
+      // flex-wrap: wrap;
+      .btn {
+        padding: 0px 26px 0px 26px;
+        height: 38px;
+        background: rgba(64, 158, 255, 0);
+        border-radius: 8px;
+        border: 1px solid rgba(64, 158, 255, 1);
         display: flex;
-        // flex-wrap: wrap;
-        .btn {
-          padding: 0px 26px 0px 26px;
-          height: 38px;
-          background: rgba(64, 158, 255, 0);
-          border-radius: 8px;
-          border: 1px solid rgba(64, 158, 255, 1);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin-right: 14px;
-          flex-shrink: 0;
-          .search {
-            background-size: 100%;
-          }
-          .btnText {
-            font-size: 14px;
-            font-weight: 400;
-            color: rgba(64, 158, 255, 1);
-            line-height: 36px;
-            margin-left: 5px;
-          }
+        align-items: center;
+        justify-content: center;
+        margin-right: 14px;
+        flex-shrink: 0;
+        .search {
+          background-size: 100%;
         }
-        .btn1 {
-          .search {
-            width: 15px;
-            height: 17px;
-            background-image: url("../../assets/images/courseManage/search1.png");
-          }
+        .btnText {
+          font-size: 14px;
+          font-weight: 400;
+          color: rgba(64, 158, 255, 1);
+          line-height: 36px;
+          margin-left: 5px;
         }
-        .btn2 {
-          .search {
-            width: 16px;
-            height: 18px;
-            background-image: url("../../assets/images/courseManage/reset1.png");
-          }
+      }
+      .btn1 {
+        .search {
+          width: 15px;
+          height: 17px;
+          background-image: url("../../assets/images/courseManage/search1.png");
         }
-        .btn3 {
-          .search {
-            width: 17px;
-            height: 18px;
-            background-image: url("../../assets/images/courseManage/add1.png");
-          }
+      }
+      .btn2 {
+        .search {
+          width: 16px;
+          height: 18px;
+          background-image: url("../../assets/images/courseManage/reset1.png");
         }
-        .btn4 {
-          margin-right: 0px;
-          .search {
-            width: 17px;
-            height: 18px;
-            background-image: url("../../assets/images/courseManage/add1.png");
-          }
+      }
+      .btn3 {
+        .search {
+          width: 17px;
+          height: 18px;
+          background-image: url("../../assets/images/courseManage/add1.png");
         }
-        .btn1:hover {
-          background: rgba(64, 158, 255, 1);
-          .search {
-            background-image: url("../../assets/images/courseManage/search0.png");
-          }
-          .btnText {
-            color: #ffffff;
-          }
+      }
+      .btn4 {
+        margin-right: 0px;
+        .search {
+          width: 17px;
+          height: 18px;
+          background-image: url("../../assets/images/courseManage/add1.png");
         }
-        .btn2:hover {
-          background: rgba(64, 158, 255, 1);
-          .search {
-            background-image: url("../../assets/images/courseManage/reset0.png");
-          }
-          .btnText {
-            color: #ffffff;
-          }
+      }
+      .btn1:hover {
+        background: rgba(64, 158, 255, 1);
+        .search {
+          background-image: url("../../assets/images/courseManage/search0.png");
         }
-        .btn3:hover {
-          background: rgba(64, 158, 255, 1);
-          .search {
-            background-image: url("../../assets/images/courseManage/add0.png");
-          }
-          .btnText {
-            color: #ffffff;
-          }
+        .btnText {
+          color: #ffffff;
         }
-        .btn4:hover {
-          background: rgba(64, 158, 255, 1);
-          .search {
-            background-image: url("../../assets/images/courseManage/add0.png");
-          }
-          .btnText {
-            color: #ffffff;
-          }
+      }
+      .btn2:hover {
+        background: rgba(64, 158, 255, 1);
+        .search {
+          background-image: url("../../assets/images/courseManage/reset0.png");
+        }
+        .btnText {
+          color: #ffffff;
+        }
+      }
+      .btn3:hover {
+        background: rgba(64, 158, 255, 1);
+        .search {
+          background-image: url("../../assets/images/courseManage/add0.png");
+        }
+        .btnText {
+          color: #ffffff;
+        }
+      }
+      .btn4:hover {
+        background: rgba(64, 158, 255, 1);
+        .search {
+          background-image: url("../../assets/images/courseManage/add0.png");
+        }
+        .btnText {
+          color: #ffffff;
         }
       }
     }
-  
-  .selectonlineface{
+  }
+
+  .selectonlineface {
     z-index: 1000;
     width: 679px;
     height: 525px;
-    background: #FFFFFF;
-    box-shadow: 0px 1px 35px 0px rgba(118,136,166,0.21);
+    background: #ffffff;
+    box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
     position: absolute;
     left: 50%;
     top: 50%;
-    transform: translate(-50%,-50%);
-    .of_header{
-        position: absolute;
-        width:calc(100%);
-        height: 40px;
-        background: linear-gradient( rgba(78,166,255,0.2) 0%, rgba(78,166,255,0) 100%);
+    transform: translate(-50%, -50%);
+    .of_header {
+      position: absolute;
+      width: calc(100%);
+      height: 40px;
+      background: linear-gradient(
+        rgba(78, 166, 255, 0.2) 0%,
+        rgba(78, 166, 255, 0) 100%
+      );
     }
-    .of_main{
-        width:calc(100%);
-        position: relative;
-        .m_header{
-            display: flex;
-            align-items: center;
-            padding-top: 20px;
-            padding-left: 26px;
-            font-size: 16px;
-            .add_icon{
-                width: 16px;
-                height: 16px;
-                margin-right: 10px;
-                background-image: url(@/assets/images/coursewareManage/add1.png);
-                background-size: 100% 100%;
-            }
-            .add_exit{
-                position: absolute;
-                right:42px;
-                cursor: pointer;
-            }
+    .of_main {
+      width: calc(100%);
+      position: relative;
+      .m_header {
+        display: flex;
+        align-items: center;
+        padding-top: 20px;
+        padding-left: 26px;
+        font-size: 16px;
+        .add_icon {
+          width: 16px;
+          height: 16px;
+          margin-right: 10px;
+          background-image: url(@/assets/images/coursewareManage/add1.png);
+          background-size: 100% 100%;
         }
-        .m_body{
-          width: 88%;
-          .checkbtn{
-            width: 7.8px;
-            height: 7.8px;
-            border: 1px solid #4EA6FF;
-            background-color: #4EA6FF;
-            border-radius: 50%;
-          }
-          .ol_checkbox{
-              width: 14px;
-              height: 14px;
-              border: 1px solid #000000;
-              border-radius: 50%;
+        .add_exit {
+          position: absolute;
+          right: 42px;
+          cursor: pointer;
+        }
+      }
+      .m_body {
+        width: 88%;
+        .checkbtn {
+          width: 7.8px;
+          height: 7.8px;
+          border: 1px solid #4ea6ff;
+          background-color: #4ea6ff;
+          border-radius: 50%;
+        }
+        .ol_checkbox {
+          width: 14px;
+          height: 14px;
+          border: 1px solid #000000;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .b_header {
+          display: flex;
+          align-items: center;
+          margin: 21px auto 14px 80px;
+        }
+        .b_sub {
+          margin-left: 164px;
+          .bs_header {
+            display: flex;
+            justify-content: space-between;
+            .b_right {
               display: flex;
-              align-items: center;
-              justify-content: center;
             }
-          .b_header{
+          }
+        }
+        .bl_detail {
+          top: 24px;
+        }
+        .b_center {
+          display: flex;
+          align-items: center;
+          margin: 21px auto 14px 80px;
+          .bc_boxl,
+          .bc_boxr {
             display: flex;
             align-items: center;
-            margin: 21px auto 14px 80px;
           }
-          .b_sub{
-            margin-left: 164px;
-            .bs_header{
-              display: flex;
-              justify-content: space-between;
-              .b_right{
-                display: flex;
-              }
-            }
-          }
-          .bl_detail{
-            top: 24px;
-          }
-          .b_center{
+        }
+        .b_sup {
+          margin: 21px auto 14px 52px;
+          .bs_box {
             display: flex;
             align-items: center;
-            margin: 21px auto 14px 80px;
-            .bc_boxl,.bc_boxr{
-              display: flex;
-              align-items: center;
-            }
           }
-          .b_sup{
-            margin: 21px auto 14px 52px;
-            .bs_box{
-              display: flex;
-              align-items: center;
-            }
-          }
-          .b_footer{
-            width: 100%;
-            margin-left: 212px;
-            margin-top: 25px;
+        }
+        .b_footer {
+          width: 100%;
+          margin-left: 212px;
+          margin-top: 25px;
+          display: flex;
+          .btn {
+            width: 100px;
+            height: 40px;
+            background: rgba(64, 158, 255, 0);
+            border-radius: 8px;
             display: flex;
-            .btn {
-              width: 100px;
-              height: 40px;
-              background: rgba(64, 158, 255, 0);
-              border-radius: 8px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              margin-right: 14px;
-              flex-shrink: 0;
-              .btnText {
-                font-size: 14px;
-                font-weight: 400;
-                line-height: 40px;
-              }
-            }
-            .btn5{
-              border: 1px solid rgba(64, 158, 255, 1);
-              color: #4EA6FF ;
-            }
-            .btn6{
-              background-color: #4EA6FF;
-              color: #ffffff;
+            align-items: center;
+            justify-content: center;
+            margin-right: 14px;
+            flex-shrink: 0;
+            .btnText {
+              font-size: 14px;
+              font-weight: 400;
+              line-height: 40px;
             }
           }
+          .btn5 {
+            border: 1px solid rgba(64, 158, 255, 1);
+            color: #4ea6ff;
+          }
+          .btn6 {
+            background-color: #4ea6ff;
+            color: #ffffff;
+          }
         }
       }
-  }  
+    }
+  }
 
-  .faceteach{
-    // display: none;
+  .faceteach {
+    display: none;
     z-index: 1000;
     width: 1358px;
     min-width: 1000px;
     height: 805px;
-    background: #FFFFFF;
-    box-shadow: 0px 1px 35px 0px rgba(118,136,166,0.21);
+    background: #ffffff;
+    box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
     position: absolute;
     left: 50%;
     top: 50%;
-    transform: translate(-50%,-50%);
-    .ft_header{
-        position: absolute;
-        width:calc(100%);
-        height: 40px;
-        background: linear-gradient( rgba(78,166,255,0.2) 0%, rgba(78,166,255,0) 100%);
+    transform: translate(-50%, -50%);
+    .ft_header {
+      position: absolute;
+      width: calc(100%);
+      height: 40px;
+      background: linear-gradient(
+        rgba(78, 166, 255, 0.2) 0%,
+        rgba(78, 166, 255, 0) 100%
+      );
     }
-    .ft_main{
-        width:calc(100%);
-        position: relative;
-        .m_header{
+    .ft_main {
+      width: calc(100%);
+      position: relative;
+      .m_header {
+        display: flex;
+        align-items: center;
+        padding-top: 20px;
+        padding-left: 26px;
+        font-size: 16px;
+        .add_icon {
+          width: 16px;
+          height: 16px;
+          margin-right: 10px;
+          background-image: url(@/assets/images/coursewareManage/add1.png);
+          background-size: 100% 100%;
+        }
+        .add_exit {
+          position: absolute;
+          right: 42px;
+          cursor: pointer;
+        }
+      }
+      .m_title {
+        margin: 7px auto 25px 52px;
+      }
+      .m_body {
+        display: flex;
+        .mb_left {
+          .mbl_items1 {
             display: flex;
             align-items: center;
-            padding-top: 20px;
-            padding-left: 26px;
-            font-size: 16px;
-            .add_icon{
-                width: 16px;
-                height: 16px;
-                margin-right: 10px;
-                background-image: url(@/assets/images/coursewareManage/add1.png);
-                background-size: 100% 100%;
-            }
-            .add_exit{
-                position: absolute;
-                right:42px;
-                cursor: pointer;
-            }
-        }
-        .m_title{
-            margin: 7px auto 25px 52px;
-        }
-        .m_body{
-          display: flex;
-          .mb_left{
-            .mbl_items1{
+            margin-left: 87px;
+            margin-bottom: 10px;
+          }
+          .mbl_items2 {
+            margin-left: 164px;
+            margin-bottom: 30px;
+            .i2_top {
               display: flex;
-              align-items: center;
-              margin-left: 87px;
-              margin-bottom: 10px;
-            }
-            .mbl_items2{
-              margin-left: 164px;
-              margin-bottom: 30px;
-              .i2_top{
+              .i2_right {
+                margin-left: 320px;
                 display: flex;
-                .i2_right{
-                  margin-left: 320px;
-                  display: flex;
-                }
-              }
-              .i2_detail{
-                width: 400px;
               }
             }
-            .mbl_items3{
-              margin-left: 87px;
-              margin-bottom: 10px;
-              .i3_top{
-                display: flex;
-                align-items: start;
-              }
-              .i3_bottom{
-                margin-left: 60px;
-              }
-            }
-            .mbl_items4{
-              display: flex;
-              align-items: center;
-              margin-left: 87px;
-              margin-bottom: 10px;
-            }
-            .mbl_items5{
-              display: flex;
-              align-items: center;
-              margin-left: 93px;
-              margin-bottom: 10px;
-            }
-            .mbl_items6{
-              display: flex;
-              align-items: center;
-              margin-left: 87px;
-              margin-bottom: 10px;
-            }
-            .mbl_items7{
-              display: flex;
-              align-items: center;
-              margin-left: 121px;
-              margin-bottom: 10px;
-            }
-            .mbl_items8{
-              margin-left: 93px;
-              margin-bottom: 10px;
-              .i8_top{
-                display: flex;
-                align-items: center;
-                margin-bottom: 10px;
-              }
-              .i8_bottom{
-                display: flex;
-                align-items: center;
-                margin-left: 71px;
-              }
+            .i2_detail {
+              width: 400px;
             }
           }
-          .mb_right{
-            .mbl_items9{
+          .mbl_items3 {
+            margin-left: 87px;
+            margin-bottom: 10px;
+            .i3_top {
+              display: flex;
+              align-items: start;
+            }
+            .i3_bottom {
+              margin-left: 60px;
+            }
+          }
+          .mbl_items4 {
+            display: flex;
+            align-items: center;
+            margin-left: 87px;
+            margin-bottom: 10px;
+          }
+          .mbl_items5 {
+            display: flex;
+            align-items: center;
+            margin-left: 93px;
+            margin-bottom: 10px;
+          }
+          .mbl_items6 {
+            display: flex;
+            align-items: center;
+            margin-left: 87px;
+            margin-bottom: 10px;
+          }
+          .mbl_items7 {
+            display: flex;
+            align-items: center;
+            margin-left: 121px;
+            margin-bottom: 10px;
+          }
+          .mbl_items8 {
+            margin-left: 93px;
+            margin-bottom: 10px;
+            .i8_top {
               display: flex;
               align-items: center;
-              margin-left: 100px;
               margin-bottom: 10px;
             }
-            .mbl_items10{
+            .i8_bottom {
               display: flex;
-              align-items: flex-start;
-              margin-left: 107px;
-              margin-bottom: 30px;
+              align-items: center;
+              margin-left: 71px;
             }
-            .mbl_items11{
-              margin-left: 105px;
-              margin-bottom: 10px;
-              .i11_top{
-                display: flex;
-                align-items: center;
-                .accessory_icon{
-                  width: 15px ;
-                  height: 15px ;
-                  background-color: #4EA6FF;
-                  margin-right: 6px;
-                }
+          }
+        }
+        .mb_right {
+          .mbl_items9 {
+            display: flex;
+            align-items: center;
+            margin-left: 100px;
+            margin-bottom: 10px;
+          }
+          .mbl_items10 {
+            display: flex;
+            align-items: flex-start;
+            margin-left: 107px;
+            margin-bottom: 30px;
+          }
+          .mbl_items11 {
+            margin-left: 105px;
+            margin-bottom: 10px;
+            .i11_top {
+              display: flex;
+              align-items: center;
+              .accessory_icon {
+                width: 15px;
+                height: 15px;
+                background-color: #4ea6ff;
+                margin-right: 6px;
               }
             }
           }
         }
+      }
     }
   }
 
diff --git a/src/views/learningpath/LevelAdd.vue b/src/views/learningpath/LevelAdd.vue
index 89688a7f..a031e5aa 100644
--- a/src/views/learningpath/LevelAdd.vue
+++ b/src/views/learningpath/LevelAdd.vue
@@ -134,7 +134,10 @@
           </div>
         </a-tab-pane>
         <a-tab-pane key="2" tab="学员管理" force-render
-          ><div class="sametab">
+          ><div class="sametab"></div
+        ></a-tab-pane>
+        <a-tab-pane key="3" tab="设置">
+          <div class="sametab">
             <div class="Gcon">
               <div class="pad"></div>
               <div class="Gin">
@@ -143,14 +146,111 @@
                   <div class="onetitle">关卡内容可见可学设置</div>
                   <div class="oneedi">编辑</div>
                 </div>
-                <div class="onemain">fewfew</div>
+                <div class="onemain clearfix">
+                  <div class="checkcon">
+                    <input
+                      type="checkbox"
+                      name="cb1"
+                      value="yulan"
+                      class="in"
+                    />
+                    <span class="yulan">预览其他关卡</span><br />
+                    <div style="width: 10px; height: 4px"></div>
+                    <span class="yulan2">学员可预览第</span
+                    ><span style="color: #4ea6ff">1</span><span>关-第</span
+                    ><span style="color: #4ea6ff">4</span><span>关内容</span>
+                  </div>
+                  <div class="checkcon" style="margin-top: 20px">
+                    <input
+                      type="checkbox"
+                      name="cb1"
+                      value="xuexi"
+                      class="in"
+                    />
+                    <span class="yulan">学习其他关卡</span><br />
+                    <div style="width: 10px; height: 4px"></div>
+                    <span class="yulan2">学员可预览第</span
+                    ><span style="color: #4ea6ff">1</span><span>关-第</span
+                    ><span style="color: #4ea6ff">4</span><span>关内容</span>
+                  </div>
+
+                  <br />
+                </div>
+              </div>
+            </div>
+            <div class="Gcon">
+              <div class="pad"></div>
+              <div class="Gin" style="margin-top: 0px">
+                <div class="headone">
+                  <div class="box"></div>
+                  <div class="onetitle">关卡晋级规则</div>
+                </div>
+                <div class="twomain">
+                  <a-switch size="small" v-model:checked="checked2" />
+                  <span class="info">启用关卡自动规则加入</span>
+                  <div class="infor">
+                    若开启“新建/编辑关卡-添加学员”支持设定自动加入规则，将于每日8点同步数据
+                  </div>
+                  <div :class="[checked2 ? 'chooseshow' : 'choo']">
+                    <div class="fane">选择范围</div>
+                    <div class="select">
+                      <a-select
+                        v-model:value="projectName"
+                        style="
+                          width: 250px;
+                          border-radius: 8px;
+                          margin-top: 15px;
+                        "
+                        placeholder="请选择部门"
+                        :options="projectNameList"
+                        @change="selectProjectName"
+                        allowClear
+                        showSearch
+                      ></a-select>
+                    </div>
+                    <div class="select">
+                      <a-select
+                        v-model:value="projectName2"
+                        style="
+                          width: 250px;
+                          border-radius: 8px;
+                          margin-top: 15px;
+                        "
+                        placeholder="请选择岗位"
+                        :options="projectNameList2"
+                        @change="selectProjectName2"
+                        allowClear
+                        showSearch
+                      ></a-select>
+                    </div>
+                  </div>
+                  <div class="btm">
+                    <div class="bmo">关卡学习方案展示设置</div>
+                    <div class="bmt">仅支持移动端</div>
+                    <div class="chosecon">
+                      <div class="chose">
+                        <input
+                          type="checkbox"
+                          name="cb1"
+                          value="lieb"
+                          class="inl"
+                        /><span class="sh">列表展示</span>
+                      </div>
+                      <div class="chose" style="margin-left: 20px">
+                        <input
+                          type="checkbox"
+                          name="cb1"
+                          value="lieb"
+                          class="inl"
+                        /><span class="sh">路径展示</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div></a-tab-pane
         >
-        <a-tab-pane key="3" tab="设置">
-          <div class="sametab">eee</div></a-tab-pane
-        >
       </a-tabs>
     </div>
   </div>
@@ -164,8 +264,53 @@ export default {
   methods: {},
   setup() {
     const state = reactive({
+      projectNameList: [
+        {
+          id: 1,
+          value: "项目一",
+          label: "项目一",
+        },
+        {
+          id: 2,
+          value: "项目二",
+          label: "项目二",
+        },
+        {
+          id: 3,
+          value: "项目三",
+          label: "项目三",
+        },
+        {
+          id: 4,
+          value: "项目四",
+          label: "项目四",
+        },
+      ],
+      projectNameList2: [
+        {
+          id: 1,
+          value: "项目一",
+          label: "项目一",
+        },
+        {
+          id: 2,
+          value: "项目二",
+          label: "项目二",
+        },
+        {
+          id: 3,
+          value: "项目三",
+          label: "项目三",
+        },
+        {
+          id: 4,
+          value: "项目四",
+          label: "项目四",
+        },
+      ],
       activeKey: ref("1"),
       value: ref(" "),
+      checked2: false,
       level: [
         {
           id: 1,
@@ -191,8 +336,16 @@ export default {
         },
       ],
     });
+    const selectProjectName = (value, index) => {
+      console.log("value", value, index);
+    };
+    const selectProjectName2 = (value, index) => {
+      console.log("value", value, index);
+    };
     return {
       ...toRefs(state),
+      selectProjectName,
+      selectProjectName2,
     };
   },
 };
@@ -571,8 +724,7 @@ export default {
         width: 40px;
       }
       .Gin {
-        background-color: #bfa;
-
+        // background-color: #bfa;
         margin-top: 30px;
         .headone {
           // background-color: red;
@@ -595,8 +747,86 @@ export default {
           }
         }
         .onemain {
-          margin-top: 30px;
+          margin-top: 20px;
           margin-left: 55px;
+
+          color: #6f6f6f;
+          font-size: 14px;
+          .checkcon {
+            position: relative;
+            .in {
+              position: absolute;
+              // margin-top: 10px;
+              left: 0;
+              top: 5px;
+            }
+            .yulan {
+              // color: yellow;
+              margin-left: 22px;
+              // display: inline-block;
+            }
+            .yulan2 {
+              margin-left: 22px;
+            }
+          }
+        }
+        .twomain {
+          margin-left: 20px;
+          margin-top: 20px;
+          .info {
+            margin-left: 10px;
+            color: #6f6f6f;
+            font-size: 14px;
+          }
+          .infor {
+            margin-left: 38px;
+            margin-top: 10px;
+            color: #c7cbd2;
+            font-size: 14px;
+          }
+          .chooseshow {
+            // background-color: red;
+            margin-left: 38px;
+            margin-top: 12px;
+            .fane {
+              color: #6f6f6f;
+              font-size: 14px;
+            }
+            .select {
+            }
+          }
+          .choo {
+            display: none;
+          }
+          .btm {
+            margin-left: 38px;
+            margin-top: 20px;
+            .bmo {
+              color: #6f6f6f;
+              font-size: 14px;
+            }
+            .bmt {
+              color: #c7cbd2;
+              font-size: 14px;
+              margin-top: 3px;
+            }
+            .chosecon {
+              display: flex;
+              margin-top: 6px;
+              margin-bottom: 20px;
+              .chose {
+                position: relative;
+                .inl {
+                  position: absolute;
+                  top: 5px;
+                }
+                .sh {
+                  margin-left: 23px;
+                  color: #6f6f6f;
+                }
+              }
+            }
+          }
         }
       }
     }