修复样式与问题

src/components/layout/guide-section/index.tsx

@@ -38,6 +38,7 @@ export default defineComponent({
     const opInfo = reactive({
       showGuide: false, // 是否显示
       routePath: route.path === '/' ? '/Home' : route.path,
+      searchValue: '',
       collapseId: [], // 默认展开哪个
       dataList: [] as any[], // 手册列表
       manualDetail: {} as any, // 详情
@@ -108,10 +109,10 @@ export default defineComponent({
       windowInfo.showType = 'MENU';
     };
     /** 获取操作手册 */
-    const getTeacherManual = async (keyword = '') => {
+    const getTeacherManual = async () => {
       try {
         const { data } = await api_sysTeacherManualPage({
-          keyword,
+          keyword: opInfo.searchValue,
           permission: opInfo.routePath
         });
         opInfo.dataList = data || [];
@@ -172,6 +173,8 @@ export default defineComponent({
         opInfo.showGuide = false;
         opInfo.routePath = route.path === '/' ? '/Home' : route.path;
         windowInfo.showType = 'MENU';
+        opInfo.searchValue = '';
+
         getTeacherManual();
       }
     });
@@ -190,6 +193,9 @@ export default defineComponent({
       const nImage = document.querySelectorAll('.rightGuide .n-image')[index];
       const img: any = nImage.querySelector('img');
       img.click();
+
+      // 默认关闭视频
+      previewShow.value = false;
     };
 
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -259,6 +265,7 @@ export default defineComponent({
                     <div class={styles.searchContainer}>
                       <TheSearch
                         round={false}
+                        v-model:value={opInfo.searchValue}
                         onSearch={async (val: any) => {
                           await getTeacherManual(val);
                           if (windowInfo.windowType === 'LARGE') {

src/styles/index.less

@@ -31,8 +31,8 @@ body > .n-drawer-container-relative {
 // 搜索框前面放大镜样式重置
 .icon-search-input {
   display: inline-block;
-  width: max(16px, 14px);
-  height: max(16px, 14px);
+  width: max(16px, 14Px);
+  height: max(16px, 14Px);
   background: url('../common/images/icon_search.png') no-repeat center;
   background-size: contain;
 }
@@ -50,7 +50,7 @@ body > .n-drawer-container-relative {
 // }
 
 .n-base-select-menu .n-base-select-option {
-  font-size: max(15px, 12px);
+  font-size: max(15px, 12Px);
 }
 
 .n-popselect-menu {
@@ -125,8 +125,8 @@ body > .n-drawer-container-relative {
 
 .searchDate,
 .searchDateDefault {
-  font-size: max(18px, 13px);
-  --n-height: max(40px, 36px) !important;
+  font-size: max(18px, 13Px);
+  --n-height: max(40px, 36Px) !important;
 
   --n-padding: 0 28px !important;
   background: linear-gradient(312deg, #1b7af8 0%, #3cbbff 100%);
@@ -374,7 +374,7 @@ body > .n-drawer-container-relative {
   color: rgba(113, 113, 114, 1) !important;
   border: none;
   min-height: 54px;
-  font-size: max(15px, 12px);
+  font-size: max(15px, 12Px);
 }
 
 .n-data-table.n-data-table--bordered .n-data-table-wrapper {
@@ -384,7 +384,7 @@ body > .n-drawer-container-relative {
 .n-data-table-tr .n-data-table-td .n-button__content,
 .n-data-table .n-data-table-td {
   font-weight: bold;
-  font-size: max(15px, 12px);
+  font-size: max(15px, 12Px);
 }
 
 .n-tooltip {
@@ -392,7 +392,7 @@ body > .n-drawer-container-relative {
   --n-border-radius: 6px !important;
 
   .n-popover__content {
-    font-size: max(14px, 12px);
+    font-size: max(14px, 12Px);
   }
 }
 
@@ -416,32 +416,32 @@ body > .n-drawer-container-relative {
 }
 
 .n-breadcrumb .n-breadcrumb-item {
-  font-size: max(16px, 12px) !important;
+  font-size: max(16px, 12Px) !important;
 }
 
 .n-base-selection,
 .n-input,
 .n-input-group-label {
-  --n-height: max(40px, 36px) !important;
+  --n-height: max(40px, 36Px) !important;
   --n-border-radius: 8px !important;
-  font-size: max(15px, 13px) !important;
+  font-size: max(15px, 13Px) !important;
 }
 
 .n-button {
-  font-size: max(18px, 13px);
-  --n-height: max(40px, 36px) !important;
+  font-size: max(18px, 13Px);
+  --n-height: max(40px, 36Px) !important;
 }
 
 .n-base-selection-input,
 .n-input .n-input__input-el,
 .n-input .n-input__textarea-el {
-  font-size: max(15px, 13px) !important;
+  font-size: max(15px, 13Px) !important;
 }
 
 .n-base-selection
   .n-base-selection-label
   .n-base-selection-label__render-label {
-  font-size: max(15px, 13px) !important;
+  font-size: max(15px, 13Px) !important;
 }
 
 .n-select-menu .n-button {
@@ -449,7 +449,7 @@ body > .n-drawer-container-relative {
 }
 
 .n-form-item-label__text {
-  font-size: max(15px, 13px);
+  font-size: max(15px, 13Px);
 }
 
 .n-date-panel {

src/views/prepare-lessons/model/courseware-type/index.module.less

@@ -395,13 +395,24 @@
       background: #fff;
       color: #484f59;
       padding: 0 13px;
-
-      :global {
-        .n-badge-sup {
-          width: 7px;
-          height: 7px;
-          min-width: 7px;
-        }
+      position: relative;
+
+      // :global {
+      //   .n-badge-sup {
+      //     width: 7px;
+      //     height: 7px;
+      //     min-width: 7px;
+      //   }
+      // }
+      .dot {
+        width: 7px;
+        height: 7px;
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        background-color: #EA4132;
+        border-radius: 5px;
+        display: inline-block;
       }
 
       &:hover {

src/views/prepare-lessons/model/courseware-type/index.tsx

@@ -175,16 +175,13 @@ export default defineComponent({
               </div>
 
               <NSpace>
-                <NBadge
-                  dot={props.item.isNotWork}
-                  offset={[-5, 4]}
-                  color="#EA4132"
-                  class={[styles.actionClass, styles.actionWork]}>
-                  <div onClick={() => emit('work')}>
-                    作业
-                    {/* 是否布置作业 */}
-                  </div>
-                </NBadge>
+                <div
+                  class={[styles.actionClass, styles.actionWork]}
+                  onClick={() => emit('work')}>
+                  {props.item.isNotWork ? <i class={styles.dot}></i> : ''}
+                  {/* 是否布置作业 */}
+                  作业
+                </div>
                 <NPopover
                   trigger="hover"
                   showArrow={false}