feat:合并

src/api/indexLibrary.js

@@ -1,10 +0,0 @@
-import http from "./config";
-
-// 获取模板库列表
-export const templateList = obj => http.post('/admin/project/template/list', obj);
-
-// 获取模板详情
-export const templateDetail = id => http.get(`/admin/project/template/detail?projectTemplateId=${id}`);
-
-// 操作模板(撤回,发布,删除) 
-export const templateHadle = obj => http.post(`/admin/project/template/handle`,obj);

src/api/indexTemplate.js

@@ -14,4 +14,8 @@ export const moveTask = (obj) => http.post('/admin/project/template/moveTask',ob
 // 新建或编辑阶段
 export const editStage = (obj) => http.post('/admin/project/template/editStage',obj);
 // 新建或编辑阶段任务
-export const editTask = (obj) => http.post('/admin/project/template/editTask',obj);
+export const editTask = (obj) => http.post('/admin/project/template/editTask',obj);
+// 操作模板(撤回，发布，删除)
+export const handleTemplates = (obj) => http.post('/admin/project/template/handle',obj);
+// 模板库列表
+export const templateList = (obj) => http.post(`/admin/project/template/list`,obj);

src/views/examine/CourseReviewed.vue

@@ -9,31 +9,294 @@
 <!-- 已审核课程页面 -->
 <template>
   <div class="coursereviewed">
-  
+    <div class="tmpl">
+      <div class="tmpl_header">
+        <div class="tmplh_inp">
+          <div class="inpbox">
+            <div class="inpbox1">
+              <a-select
+                v-model:value="valueproj"
+                placeholder="请输入内容分类"
+                @change="handleChangeproj"
+                :options="optionsproj"
+              />
+            </div>
+            <div class="inpbox1">
+              <a-input
+                v-model:value="valuecreater"
+                style="
+                  width: 270px;
+                  height: 40px;
+                  border-radius: 8px;
+                  margin-right: 14px;
+                "
+                placeholder="请输入创建人"
+              />
+            </div>
+            <div class="inpbox1">
+              <a-input
+                v-model:value="valuename"
+                style="
+                  width: 270px;
+                  height: 40px;
+                  border-radius: 8px;
+                  margin-right: 14px;
+                "
+                placeholder="请输入名称"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="tmplh_btn">
+          <div class="btn btn1">
+            <div class="search"></div>
+            <div class="btnText btnText1">搜索</div>
+          </div>
+          <div class="btn btn2">
+            <div class="search"></div>
+            <div class="btnText btnText2">重置</div>
+          </div>
+        </div>
+      </div>
+      <div class="tmpl_body">
+        <div class="tmpl_tabbox">
+          <a-table
+            :columns="columns1"
+            :data-source="tableData1"
+            :loading="tableDataTotal === -1 ? true : false"
+            expandRowByClick="true"
+            @expand="expandTable"
+            :pagination="false"
+          />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
-import { reactive, toRefs, } from "vue";
+import { reactive, toRefs } from "vue";
 
 export default {
   name: "CoursereViewed",
 
   setup() {
     const state = reactive({
-    
+      optionsproj: [
+        {
+          value: "jack",
+          label: "Jack",
+        },
+        {
+          value: "rose",
+          label: "rose",
+        },
+      ],
+      valueproj: null,
+      valuecreater: null,
+      valuename: null,
+
+      columns1: [
+        {
+          title: "序号",
+          dataIndex: "number",
+          key: "number",
+          align: "center",
+        },
+        {
+          title: "名称",
+          dataIndex: "name",
+          key: "name",
+          align: "center",
+        },
+        {
+          title: "类型",
+          dataIndex: "type",
+          key: "type",
+          align: "center",
+        },
+        {
+          title: "内容分类",
+          dataIndex: "content",
+          key: "content",
+          align: "center",
+        },
+        {
+          title: "审核状态",
+          dataIndex: "status",
+          key: "status",
+          align: "center",
+        },
+        {
+          title: "创建人",
+          dataIndex: "creater",
+          key: "creater",
+          align: "center",
+        },
+        {
+          title: "审核时间",
+          dataIndex: "time",
+          key: "time",
+          align: "center",
+        },
+        {
+          title: "审核说明",
+          dataIndex: "msg",
+          key: "msg",
+          align: "center",
+        },
+        {
+          title: "操作",
+          dataIndex: "opt",
+          key: "opt",
+          align: "center",
+          customRender: () => {
+            return <div>审核日志</div>;
+          },
+        },
+      ],
+      tableData1: [
+        {
+          number: "1",
+          name: "课程1",
+          type: "在线",
+          content: "领导力/领导业务",
+          status: "通过",
+          creater: "-",
+          time: "-",
+          msg: "-",
+        },
+      ],
     });
 
-   
     return {
       ...toRefs(state),
-      
     };
   },
 };
 </script>
 <style lang="scss">
 .coursereviewed {
- 
+  width: 100%;
-}
+  .tmpl {
+    width: 100%;
+    .tmpl_header {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      margin-bottom: 32px;
 
+      margin-left: 32px;
+      margin-right: 32px;
+      .tmplh_inp {
+        .inpbox {
+          display: flex;
+          margin-top: 32px;
+          .inpbox1 {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-right: 24px;
+            .ant-select-selector {
+              border-radius: 8px;
+              width: 270px;
+              height: 40px;
+              padding-top: 5px;
+            }
+            span {
+              white-space: nowrap;
+            }
+          }
+        }
+      }
+      .tmplh_btn {
+        display: flex;
+        margin-left: 38px;
+        margin-top: 32px;
+        .btn {
+          padding: 0px 26px 0px 26px;
+          height: 38px;
+          border-radius: 8px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-left: 14px;
+          cursor: pointer;
+          flex-shrink: 0;
+          .search {
+            background-size: 100%;
+          }
+          .btnText {
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 36px;
+            margin-left: 5px;
+          }
+          .btnText1 {
+            color: rgb(255, 255, 255);
+          }
+          .btnText2 {
+            color: rgba(64, 158, 255, 1);
+          }
+        }
+        .btn1 {
+          background: #409eff;
+          .search {
+            width: 15px;
+            height: 17px;
+            background-image: url("../../assets/images/courseManage/search0.png");
+          }
+        }
+        .btn2 {
+          background: #ffffff;
+          border: 1px solid #388be1;
+          .search {
+            width: 16px;
+            height: 18px;
+            background-image: url("../../assets/images/courseManage/reset1.png");
+          }
+        }
+        .btn1:hover {
+          background: rgb(255, 255, 255);
+          border: 1px solid #388be1;
+          .search {
+            background-image: url("../../assets/images/courseManage/search1.png");
+          }
+          .btnText {
+            color: rgba(64, 158, 255, 1);
+          }
+        }
+        .btn2:hover {
+          background: rgba(64, 158, 255, 1);
+          .search {
+            background-image: url("../../assets/images/courseManage/reset0.png");
+          }
+          .btnText {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+    .tmpl_body {
+      padding: 0px 30px;
+      .tmpl_tabbox {
+        .operation {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: #4ea6ff;
+          .nselect {
+            justify-content: center;
+            align-items: center;
+            display: flex;
+            .jc {
+              margin-left: 20px;
+              white-space: nowrap;
+              cursor: pointer;
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/views/examine/ProjectReviewed.vue

@@ -6,34 +6,26 @@
  * @FilePath: /fe-manage/src/views/examine/ProjectReviewed.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
-<!-- 待审核课程页面 -->
+<!-- 已审核项目页面 -->
 <template>
-  <div class="projectviewed">
+  <div class="projectviewed"></div>
-  
-  </div>
 </template>
 <script>
-import { reactive, toRefs, } from "vue";
+import { reactive, toRefs } from "vue";
 
 export default {
   name: "ProjectViewed",
 
   setup() {
-    const state = reactive({
+    const state = reactive({});
-    
-    });
 
-   
     return {
       ...toRefs(state),
-      
     };
   },
 };
 </script>
 <style lang="scss">
 .projectviewed {
- 
 }
-
 </style>

src/views/examine/ProjectReviewedN.vue

@@ -6,33 +6,26 @@
  * @FilePath: /fe-manage/src/views/examine/ProjectReviewedN.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
+<!-- 待审核项目页面 -->
 <template>
-  <div class="projectviewedn">
+  <div class="projectviewedn"></div>
-  
-  </div>
 </template>
 <script>
-import { reactive, toRefs, } from "vue";
+import { reactive, toRefs } from "vue";
 
 export default {
   name: "ProjectViewedN",
 
   setup() {
-    const state = reactive({
+    const state = reactive({});
-    
-    });
 
-   
     return {
       ...toRefs(state),
-      
     };
   },
 };
 </script>
 <style lang="scss">
 .projectviewedn {
- 
 }
-
 </style>

src/views/projectcenter/LibraryAdd.vue

@@ -5,11 +5,12 @@
         <img class="img" src="../../assets/images/projectadd/picture.png" />
       </div>
       <div class="imgfor">
-        <div class="forz">管理者进阶-腾飞班1备份</div>
+        <div class="forz">{{ projectInfo.name || "-" }}</div>
         <div class="fort">
-          <div class="fort1">项目经理：黄华、刘俊备份</div>
+          <div class="fort1">项目经理：{{ projectInfo.manager || "-" }}</div>
           <div class="fort2">
-            起止时间：2022-09-21 00:00 至 2022-10-21 00:00
+            起止时间：{{ projectInfo.beginTime || "-" }} 至
+            {{ projectInfo.endTime || "-" }}
           </div>
         </div>
       </div>
@@ -338,7 +339,6 @@
                   </div>
                 </div>
               </div>
-
               <div v-if="edit" class="pjcb_content">
                 <div class="content content1">
                   <span>当前设计下，学员可以获得 </span
@@ -640,7 +640,6 @@
     </div>
   </div>
 </template>
-
 <script>
 import { ref, reactive, defineComponent, toRefs, onMounted } from "vue";
 import { message } from "ant-design-vue";
@@ -839,6 +838,12 @@ export default defineComponent({
         boeFlag: false,
       },
       isEdit: false, // 是否处于编辑状态
+      projectInfo: {
+        beginTime: null,
+        endTime: null,
+        name: null,
+        manager: null,
+      },
     });
     const value = ref("");
     const value2 = ref("");
@@ -868,7 +873,7 @@ export default defineComponent({
     // 获取详情
     const getDetail = () => {
       api
-        .templateDetail(0)
+        .templateDetail(1)
         .then((res) => {
           console.log(res);
           state.formData.name = res.data.data.projectInfo.name;
@@ -1074,7 +1079,6 @@ export default defineComponent({
   display: block;
   clear: both;
 }
-
 .addwrapper {
   width: 100%;
   height: 100%;
@@ -1235,7 +1239,6 @@ export default defineComponent({
       margin-left: 30px;
       margin-top: 10px;
     }
-
     .split {
       width: 100%;
       height: 20px;
@@ -1304,13 +1307,11 @@ export default defineComponent({
       .taskSyllabus {
         // flex: 1;
         overflow-x: auto;
-
         .ant-collapse {
           border: 0px;
           background-color: rgba(255, 255, 255, 0);
           min-width: 1040px;
         }
-
         .ant-collapse-content > .ant-collapse-content-box {
           padding-top: 0px;
           padding-bottom: 0px;
@@ -1342,13 +1343,11 @@ export default defineComponent({
         //width: 100%;
         flex-shrink: 0;
         margin-right: 24px;
-
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         padding: 25px 0px;
         margin-left: 22px;
-
         //margin: 0 12px;
         border: 1px solid #f2f6fc;
         border-top: 0px;
@@ -1360,7 +1359,6 @@ export default defineComponent({
           //height: 71px;
           margin-left: 12px;
           margin-right: 50px;
-
           .iconame {
             //position: absolute;
             color: #4f5156;
@@ -1472,7 +1470,6 @@ export default defineComponent({
         }
       }
     }
-
     .notice {
       .ntc_tit {
         padding-top: 22px;
@@ -1533,7 +1530,6 @@ export default defineComponent({
         }
       }
     }
-
     .projectscore {
       padding-top: 22px;
       .pjc_tit {
@@ -1545,7 +1541,6 @@ export default defineComponent({
       .pjc_body {
         margin-left: 34px;
         margin-right: 34px;
-
         .groupright {
           display: flex;
           justify-content: space-between;
@@ -1612,7 +1607,6 @@ export default defineComponent({
         }
       }
     }
-
     .setting {
       padding-top: 22px;
       .set_tit {
@@ -1642,4 +1636,4 @@ export default defineComponent({
     }
   }
 }
-</style>
+</style>

src/views/projectcenter/TemplateLibrary.vue

@@ -6,30 +6,21 @@
           <div class="inpbox">
             <div class="inpbox1">
               <span>模版名称：</span>
-              <a-input
+              <a-input v-model:value="value1" style="
-                v-model:value="value1"
-                style="
                   width: 270px;
                   height: 40px;
                   border-radius: 8px;
                   margin-right: 14px;
-                "
+                " placeholder="请输入项目名称" />
-                placeholder="请输入项目名称"
-              />
             </div>
             <div class="inpbox1">
               <span>创建时间：</span>
-              <a-date-picker
+              <a-date-picker v-model="selectTime" type="date" placeholder="创建时间" style="
-                v-model="selectTime"
+                width: 270px;
-                type="date"
+                height: 40px; 
-                placeholder="创建时间"
+                border-radius: 8px;
-                style="
+                margin-right: 14px;
-                  width: 270px;
+                " />
-                  height: 40px;
-                  border-radius: 8px;
-                  margin-right: 14px;
-                "
-              />
             </div>
           </div>
         </div>
@@ -46,14 +37,8 @@
       </div>
       <div class="tmpl_body">
         <div class="tmpl_tabbox">
-          <a-table
+          <a-table :columns="columns1" :data-source="tableData1" :loading="tableDataTotal === -1 ? true : false"
-            :columns="columns1"
+            expandRowByClick="true" @expand="expandTable" :pagination="pagination" />
-            :data-source="tableData1"
-            :loading="tableDataTotal === -1 ? true : false"
-            expandRowByClick="true"
-            @expand="expandTable"
-            :pagination="false"
-          />
         </div>
       </div>
     </div>
@@ -62,7 +47,7 @@
 <script>
 import { reactive, defineComponent, toRefs, onMounted } from "vue";
 import { message } from "ant-design-vue";
-import * as api from "@/api/indexLibrary";
+import * as api from "@/api/indexTemplate"
 const columns1 = [
   {
     title: "模版名称",
@@ -115,6 +100,7 @@ export default defineComponent({
           creator: "李部长",
           stutime: "2022-10-31  23:12:00",
           operation: "operation",
+          projectTemplateId: 1,
         },
         {
           key: "2",
@@ -123,9 +109,9 @@ export default defineComponent({
           creator: "李部长",
           stutime: "2022-10-31  23:12:00",
           operation: "operation",
-        },
+          projectTemplateId: 2,
+        }
       ],
-      // state
     });
     const getTableDate1 = () => {
       let data = state.tableData1;
@@ -146,17 +132,9 @@ export default defineComponent({
                       </router-link>
                     </div>
                     <div class="ops3">
-                      <div
+                      <div class="jc"
-                        class="jc"
+                        onClick={() => { templateHadler({ "projectTemplateId": value.projectTemplateId, "type": 0 }) }}
-                        onClick={() => {
+                      >撤回</div>
-                          templateHadler({
-                            projectTemplateId: value.projectTemplateId,
-                            type: 0,
-                          });
-                        }}
-                      >
-                        撤回
-                      </div>
                     </div>
                   </div>
                 ) : (
@@ -165,15 +143,8 @@ export default defineComponent({
                 {value.status === "未发布" ? (
                   <div class="nselect">
                     <div class="ops1">
-                      <div
+                      <div class="jc"
-                        class="jc"
+                        onClick={() => { templateHadler({ "projectTemplateId": value.projectTemplateId, "type": 1 }) }}>
-                        onClick={() => {
-                          templateHadler({
-                            projectTemplateId: value.projectTemplateId,
-                            type: 1,
-                          });
-                        }}
-                      >
                         发布
                         <span style="color:#E9E9E9;margin-left:15px;">|</span>
                       </div>
@@ -187,17 +158,9 @@ export default defineComponent({
                       </router-link>
                     </div>
                     <div class="ops3">
-                      <div
+                      <div class="jc"
-                        class="jc"
+                        onClick={() => { templateHadler({ "projectTemplateId": value.projectTemplateId, "type": -1 }) }}
-                        onClick={() => {
+                      >删除</div>
-                          templateHadler({
-                            projectTemplateId: value.projectTemplateId,
-                            type: -1,
-                          });
-                        }}
-                      >
-                        删除
-                      </div>
                     </div>
                   </div>
                 ) : (
@@ -210,67 +173,86 @@ export default defineComponent({
       });
       state.tableData = data;
     };
+    const pagination = reactive({
+      current: 1,
+      total: 50,
+      defaultPageSize: 10,
+      onChange: (id) => { pagination.current = id; getLibraryList() },
+    })
     getTableDate1();
 
     onMounted(() => {
       getLibraryList();
-    });
+    })
+
+    // 获取模板列表
     const getLibraryList = () => {
       let obj = {
-        beginTime: 0,
+        "beginTime": 0,
-        endTime: 0,
+        "endTime": 0,
-        name: "",
+        "name": "",
-        pageNo: 0,
+        "pageNo": pagination.current,
-        pageSize: 0,
+        "pageSize": 10,
-        status: 0,
+        "status": 0 || 1
-      };
+      }
-      api
+      api.templateList(obj).then((res) => {
-        .templateList(obj)
+        console.log(res);
-        .then((res) => {
+        let resData = res.data.data.rows
-          console.log(res);
+        if (resData.length) {
-          let resData = res.data.data.rows;
+          for (let i in resData) {
-          if (resData.length) {
+            state.tableData1[i].id = i + 1;
-            for (let i in resData) {
+            state.tableData1[i].projectTemplateId = resData[i].projectTemplateId;
-              state.tableData1[i].id = i + 1;
+            state.tableData1[i].status = resData[i].status ? "已发布" : "未发布";
-              state.tableData1[i].projectTemplateId =
+            state.tableData1[i].name = resData[i].name;
-                resData[i].projectTemplateId;
+            state.tableData1[i].creator = resData[i].createName;
-              state.tableData1[i].status = resData[i].status
+            state.tableData1[i].stutime = resData[i].publishTime;
-                ? "已发布"
+            state.tableData1[i].operation = "operation";
-                : "未发布";
-              state.tableData1[i].name = resData[i].name;
-              state.tableData1[i].creator = resData[i].createName;
-              state.tableData1[i].stutime = resData[i].publishTime;
-              state.tableData1[i].operation = "operation";
-            }
-          } else {
-            message.warning("获取的列表数据为空值");
           }
-        })
+
-        .catch((error) => {
+        } else {
-          message.error(`获取模板列表失败` + error);
+          message.warning("获取的列表数据为空值")
-        });
+        }
+      }).catch((error) => {
+        message.error(`获取模板列表失败` + error)
+      });
     };
     const templateHadler = (obj) => {
-      api
+      api.handleTemplates(obj).then((res) => {
-        .templateHadle(obj)
+        if (res.data.success) {
-        .then((res) => {
+          message.success(`模板${obj.type == 1 ? '发布' : obj.type == 0 ? '撤回' : '删除'}成功`)
-          if (res.data.success) {
+          getLibraryList();
-            message.success(`模板操作成功`);
+        }
-            getLibraryList();
+      }).catch((error) => {
-          }
+        message.error(`模板${obj.type == 1 ? '发布' : obj.type == 0 ? '撤回' : '删除'}失败` + error)
-        })
+      })
-        .catch((error) => {
+    }
-          message.error(`模板操作失败` + error);
-        });
-    };
     const searchLevel = () => {
-      const result = state.tableData1.filter(
+      state.tableData1 = [
-        (item) => item.name == state.value1
+        {
-      );
+          key: "1",
+          name: "测试模板1",
+          status: "已发布",
+          creator: "李部长",
+          stutime: "2022-10-31  23:12:00",
+          operation: "operation",
+          projectTemplateId: 1,
+        },
+        {
+          key: "2",
+          name: "测试模板2",
+          status: "未发布",
+          creator: "李部长",
+          stutime: "2022-10-31  23:12:00",
+          operation: "operation",
+          projectTemplateId: 2,
+        }
+      ];
+      const result = state.tableData1.filter(item => item.name.includes(state.value1))
       state.tableData1 = result;
+      getTableDate1()
     };
     const resetLevel = () => {
-      state.value1 = "";
+      state.value1 = '';
       // getLibraryList();
       state.tableData1 = [
         {
@@ -280,6 +262,7 @@ export default defineComponent({
           creator: "李部长",
           stutime: "2022-10-31  23:12:00",
           operation: "operation",
+          projectTemplateId: 1,
         },
         {
           key: "2",
@@ -288,8 +271,10 @@ export default defineComponent({
           creator: "李部长",
           stutime: "2022-10-31  23:12:00",
           operation: "operation",
-        },
+          projectTemplateId: 2,
-      ];
+        }
+      ]
+      getTableDate1()
     };
 
     return {
@@ -298,6 +283,7 @@ export default defineComponent({
       templateHadler,
       searchLevel,
       resetLevel,
+      pagination,
     };
   },
 });
@@ -305,8 +291,10 @@ export default defineComponent({
 <style lang="scss">
 .templatelibrary {
   width: 100%;
+
   .tmpl {
     width: 100%;
+
     .tmpl_header {
       display: flex;
       flex-wrap: wrap;
@@ -315,25 +303,30 @@ export default defineComponent({
 
       margin-left: 32px;
       margin-right: 32px;
+
       .tmplh_inp {
         .inpbox {
           display: flex;
           margin-top: 32px;
+
           .inpbox1 {
             display: flex;
             justify-content: center;
             align-items: center;
             margin-right: 24px;
+
             span {
               white-space: nowrap;
             }
           }
         }
       }
+
       .tmplh_btn {
         display: flex;
         margin-left: 38px;
         margin-top: 32px;
+
         .btn {
           padding: 0px 26px 0px 26px;
           height: 38px;
@@ -344,72 +337,90 @@ export default defineComponent({
           margin-left: 14px;
           cursor: pointer;
           flex-shrink: 0;
+
           .search {
             background-size: 100%;
           }
+
           .btnText {
             font-size: 14px;
             font-weight: 400;
             line-height: 36px;
             margin-left: 5px;
           }
+
           .btnText1 {
             color: rgb(255, 255, 255);
           }
+
           .btnText2 {
             color: rgba(64, 158, 255, 1);
           }
         }
+
         .btn1 {
           background: #409eff;
+
           .search {
             width: 15px;
             height: 17px;
             background-image: url("../../assets/images/courseManage/search0.png");
           }
         }
+
         .btn2 {
           background: #ffffff;
           border: 1px solid #388be1;
+
           .search {
             width: 16px;
             height: 18px;
             background-image: url("../../assets/images/courseManage/reset1.png");
           }
         }
+
         .btn1:hover {
           background: rgb(255, 255, 255);
           border: 1px solid #388be1;
+
           .search {
             background-image: url("../../assets/images/courseManage/search1.png");
           }
+
           .btnText {
             color: rgba(64, 158, 255, 1);
           }
         }
+
         .btn2:hover {
           background: rgba(64, 158, 255, 1);
+
           .search {
             background-image: url("../../assets/images/courseManage/reset0.png");
           }
+
           .btnText {
             color: #ffffff;
           }
         }
       }
     }
+
     .tmpl_body {
       padding: 0px 30px;
+
       .tmpl_tabbox {
         .operation {
           display: flex;
           justify-content: center;
           align-items: center;
           color: #4ea6ff;
+
           .nselect {
             justify-content: center;
             align-items: center;
             display: flex;
+
             .jc {
               margin-left: 20px;
               white-space: nowrap;