更新样式

src/components/card-type/index.tsx

@@ -5,6 +5,7 @@ import iconImage from '@common/images/icon-image.png';
 import iconVideo from '@common/images/icon-video.png';
 import iconAudio from '@common/images/icon-audio.png';
 import iconMusic from '@common/images/icon-music.png';
+import TheNoticeBar from '../TheNoticeBar';
 
 type itemType = {
   id: string | number;
@@ -97,7 +98,9 @@ export default defineComponent({
                     src={formatType(props.item.type)}
                     objectFit="cover"
                   />
-                  <span class={styles.titleContent}>{props.item.title}</span>
+                  <span class={styles.titleContent}>
+                    <TheNoticeBar text={props.item.title} />
+                  </span>
                 </div>
                 {/* 收藏 */}
                 {props.isShowCollect && (

src/components/searchInput/index.tsx

@@ -1,16 +1,12 @@
-import { defineComponent, ref } from 'vue';
+import { defineComponent } from 'vue';
 import styles from './index.module.less';
-import { NImage, NInput, NIcon, dividerDark } from 'naive-ui';
+import { NInput } from 'naive-ui';
 
-import { renderfontsvg } from '@/utils/index';
-import disSearch from './images/disSearch.png';
-import searchIcon from './images/searchIcon.png';
 export default defineComponent({
   name: 'student-studentList',
   props: ['searchWord'],
   emits: ['changeValue'],
   setup(props, { emit, attrs }) {
-    const isFocus = ref(false);
     return () => (
       <div>
         <NInput
@@ -18,22 +14,11 @@ export default defineComponent({
           clearable
           class={styles.searchInput}
           v-slots={{
-            prefix: () => (
-              <NImage
-                class={styles.searchIcon}
-                previewDisabled
-                src={isFocus.value ? searchIcon : disSearch}></NImage>
-            )
+            prefix: () => <span class={'icon-search-input'}></span>
           }}
           value={props.searchWord}
           onInput={(str: string) => {
             emit('changeValue', str);
-          }}
-          onFocus={() => {
-            isFocus.value = true;
-          }}
-          onBlur={() => {
-            isFocus.value = false;
           }}></NInput>
       </div>
     );

src/styles/index.less

@@ -17,15 +17,27 @@ body {
   background-color: #f1f5ff;
 }
 
-.n-base-selection,
-.n-input {
-  // border-radius: 8px;
-  // min-height: 40px;
-  // height: 40px;
-  // font-size: 15px;
-  // --n-height: 40px !important;
+// 搜索框前面放大镜样式重置
+.icon-search-input {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  background: url('../common/images/icon_search.svg') no-repeat center;
+  background-size: contain;
+}
+
+.n-input:not(.n-input--disabled).n-input--focus {
+  .icon-search-input {
+    background: url('../common/images/icon_searchActive.svg') no-repeat center;
+    background-size: contain;
+  }
 }
 
+// 初始化弹窗关闭的默认状态
+// .n-base-close:not(.n-base-close--disabled):focus::before {
+//   background-color: transparent;
+// }
+
 .n-base-select-menu .n-base-select-option {
   font-size: 15px;
 }
@@ -112,6 +124,7 @@ body {
     font-weight: 600;
   }
 }
+
 .n-data-table-tr {
   .n-data-table-td {
     padding-left: 20px;
@@ -120,6 +133,7 @@ body {
     font-size: 15px;
   }
 }
+
 .n-data-table-th__title-wrapper {
   &::after {
     content: '';
@@ -176,6 +190,7 @@ body {
     padding: 0;
   }
 }
+
 .favitor-enter-active,
 .favitor-leave-active {
   transition: all 0.5s cubic-bezier(0.18, 0.89, 0, 1.29);
@@ -186,6 +201,7 @@ body {
   transform: scale(1.4);
   opacity: 0.1;
 }
+
 @font-face {
   font-family: 'DINA';
   src: url('../common/DIN_Alternate_Bold.ttf');
@@ -195,10 +211,10 @@ body {
   --product-color: #3044ca;
   --n-text-color: #1677ff !important;
 }
+
 // .n-button--primary-type {
 //   color: #1677ff !important;
 // }
-
 ::-webkit-input-placeholder {
   /* WebKit browsers */
 
@@ -221,4 +237,4 @@ body {
   /* Internet Explorer 10+ */
 
   color: rgba(0, 0, 0, 0.4);
-}
+}

src/views/attend-class/component/audio-pay.tsx

@@ -2,6 +2,7 @@ import { defineComponent, reactive, ref, nextTick } from 'vue';
 import styles from './audio.module.less';
 import iconplay from '../image/icon-pause.svg';
 import iconpause from '../image/icon-play.svg';
+import iconReplay from '../image/icon-replay.svg';
 import { NSlider } from 'naive-ui';
 import Vudio from 'vudio.js';
 import tickMp3 from '../image/tick.mp3';
@@ -34,7 +35,6 @@ export default defineComponent({
     const canvas: any = ref();
     const audio: any = ref();
     let vudio: any = null;
-    const controlID = 'v' + Date.now() + Math.floor(Math.random() * 100);
 
     // 切换音频播放
     const onToggleAudio = (e?: MouseEvent) => {
@@ -89,6 +89,11 @@ export default defineComponent({
       audioForms.showBar = isShow;
     };
 
+    const onReplay = () => {
+      if (!audio.value) return;
+      audio.value.currentTime = 0;
+    };
+
     let vudio1 = null;
     const canvas1: any = ref();
     const audio1: any = ref();
@@ -213,6 +218,14 @@ export default defineComponent({
               }}
             />
           </div>
+
+          <div class={styles.actions}>
+            <div class={styles.actionWrap}>
+              <button class={styles.iconReplay} onClick={onReplay}>
+                <img src={iconReplay} />
+              </button>
+            </div>
+          </div>
         </div>
       </div>
     );

src/views/attend-class/component/audio.module.less

@@ -94,11 +94,23 @@
     height: 82px;
     padding: 4px 0;
     background: transparent;
+
+    &>img {
+      width: 100%;
+      height: 100%;
+    }
   }
 
-  .actionBtn>img {
-    width: 100%;
-    height: 100%;
+
+  .iconReplay {
+    width: 41px;
+    height: 39px;
+    background-color: transparent;
+
+    &>img {
+      width: 100%;
+      height: 100%;
+    }
   }
 }
 

src/views/attend-class/component/musicScore.tsx

@@ -1,10 +1,7 @@
 import { defineComponent, ref, watch } from 'vue';
 import { NSkeleton } from 'naive-ui';
 import styles from './musicScore.module.less';
-// import iconStart from '../image/icon-start.svg';
-// import { listenerMessage, postMessage } from '@/helpers/native-message';
 import { usePageVisibility } from '@vant/use';
-import { browser } from '@/helpers/utils';
 
 export default defineComponent({
   name: 'musicScore',
@@ -19,7 +16,6 @@ export default defineComponent({
   },
   emits: ['setIframe'],
   setup(props, { emit }) {
-    const browserInfo = browser();
     const isLoading = ref(false);
     const pageVisibility = usePageVisibility();
     /** 页面显示和隐藏 */

src/views/attend-class/component/video-play.tsx

@@ -3,10 +3,9 @@ import 'plyr/dist/plyr.css';
 import Plyr from 'plyr';
 import { ref } from 'vue';
 import styles from './video.module.less';
-// import iconLoop from '../image/icon-loop.svg';
-// import iconLoopActive from '../image/icon-loop-active.svg';
 import iconplay from '../image/icon-pause.svg';
 import iconpause from '../image/icon-play.svg';
+import iconReplay from '../image/icon-replay.svg';
 
 export default defineComponent({
   name: 'video-play',
@@ -29,7 +28,7 @@ export default defineComponent({
     const videoItem = ref<Plyr>();
     const controlID = 'v' + Date.now() + Math.floor(Math.random() * 100);
     const playBtnId = 'play' + Date.now() + Math.floor(Math.random() * 100);
-    const loopBtnId = 'loop' + Date.now() + Math.floor(Math.random() * 100);
+    const replayBtnId = 'replay' + Date.now() + Math.floor(Math.random() * 100);
     const toggleHideControl = (isShow: false) => {
       videoItem.value?.toggleControls(isShow);
     };
@@ -37,16 +36,10 @@ export default defineComponent({
       e.stopPropagation();
       videoItem.value?.togglePlay();
     };
-    const toggleLoop = () => {
-      const loopBtn = document.getElementById(loopBtnId);
-      if (!loopBtn || !videoItem.value) return;
-      const isLoop = videoItem.value.loop;
-      if (isLoop) {
-        loopBtn.classList.remove(styles.active);
-      } else {
-        loopBtn.classList.add(styles.active);
-      }
-      videoItem.value.loop = !videoItem.value.loop;
+    const toggleReplay = () => {
+      const replayBtn = document.getElementById(replayBtnId);
+      if (!replayBtn || !videoItem.value) return;
+      videoItem.value.restart();
     };
     const onDefault = () => {
       document
@@ -56,7 +49,9 @@ export default defineComponent({
           emit('reset');
         });
       document.getElementById(playBtnId)?.addEventListener('click', togglePlay);
-      document.getElementById(loopBtnId)?.addEventListener('click', toggleLoop);
+      document
+        .getElementById(replayBtnId)
+        ?.addEventListener('click', toggleReplay);
     };
 
     const changePlayBtn = (code: string) => {
@@ -93,6 +88,11 @@ export default defineComponent({
                     </div>
 
                 </div>
+                <div class="${styles.actions}" style="padding-right: 0;">
+                    <button id="${replayBtnId}" class="${styles.actionBtn} ${styles.loopBtn}">
+                        <img class="loop" src="${iconReplay}" />
+                    </button>
+                </div>
             </div>`;
 
     // <div class="${styles.actionWrap}">
@@ -101,10 +101,7 @@ export default defineComponent({
     //                 <img class="${styles.playIcon}" src="${iconplay}" />
     //                 <img class="${styles.playIcon}" src="${iconpause}" />
     //             </button>
-    //             <button id="${loopBtnId}" class="${styles.actionBtn} ${styles.loopBtn}">
-    //                 <img class="loop" src="${iconLoop}" />
-    //                 <img class="loopActive" src="${iconLoopActive}" />
-    //             </button>
+
     //         </div>
     //         <div>${item.value.name}</div>
 

src/views/attend-class/component/video.module.less

@@ -123,6 +123,11 @@
     }
 
     .loopBtn {
+      background-color: transparent;
+      width: 41px;
+      height: 39px;
+      cursor: pointer;
+
       :global {
         .loop {
           display: block;
@@ -133,18 +138,5 @@
         }
       }
     }
-
-    .loopBtn.active {
-      :global {
-        .loop {
-          display: none;
-        }
-
-        .loopActive {
-          display: block;
-        }
-      }
-    }
-
   }
 }

src/views/attend-class/image/icon-replay.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="41px" height="39px" viewBox="0 0 41 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 4</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="55、音频预览" transform="translate(-1608.000000, -985.000000)" fill="#FFFFFF">
+            <g id="编组-4" transform="translate(1609.000000, 985.000000)">
+                <g id="重播" transform="translate(0.000000, 1.739352)" fill-rule="nonzero" stroke="#FFFFFF" stroke-width="0.559639224">
+                    <path d="M17.9791266,0 C7.98273221,0 0,8.04986389 0,18.1303241 C0,28.2107843 7.98273221,36.2606481 17.9791266,36.2606481 C27.975521,36.2606481 35.9582532,28.2107843 35.9582532,18.1303241 C35.9582532,17.1150259 35.2930255,16.4442039 34.2861944,16.4442039 C33.2793633,16.4442039 32.6141356,17.1150259 32.6141356,18.1303241 C32.6141356,26.180188 25.9618588,32.9065382 17.9611475,32.9065382 C9.97841526,32.9065382 3.30815929,26.1983183 3.30815929,18.1303241 C3.30815929,10.0804602 9.96043613,3.35410995 17.9611475,3.35410995 C20.6220582,3.35410995 23.6245723,4.02493194 25.6202554,5.71105208 L27.9395627,3.02776412 C24.9730068,1.01529815 21.6468684,0 17.9791266,0 Z" id="路径"></path>
+                </g>
+                <path d="M21.1011222,16.6253209 L24.9218621,22.9401158 C25.4018636,23.7334466 25.1478599,24.7656864 24.3545291,25.2456878 C24.0923753,25.4043029 23.7918135,25.488153 23.4854096,25.488153 L15.8439298,25.488153 C14.9166892,25.488153 14.1650121,24.7364759 14.1650121,23.8092353 C14.1650121,23.5028314 14.2488622,23.2022696 14.4074773,22.9401158 L18.2282172,16.6253209 C18.7082186,15.8319901 19.7404584,15.5779865 20.5337892,16.0579879 C20.7659718,16.198469 20.9606411,16.3931384 21.1011222,16.6253209 Z" id="三角形" transform="translate(19.664670, 19.869676) rotate(-270.000000) translate(-19.664670, -19.869676) "></path>
+                <path d="M32.0108342,5.53932276 L35.7963766,11.8570123 C36.2729684,12.6523961 36.0145365,13.6835361 35.2191527,14.160128 C34.96034,14.3152078 34.664519,14.3976774 34.3628033,14.3988629 L26.741813,14.4288062 C25.8145795,14.4324493 25.0599549,13.6837314 25.0563117,12.7564979 C25.0551004,12.4481956 25.1388048,12.1455124 25.2982468,11.8816372 L29.1336947,5.53400439 C29.6132238,4.74038796 30.6453121,4.48576984 31.4389286,4.96529892 C31.6735706,5.10707734 31.8699242,5.30415816 32.0108342,5.53932276 Z" id="三角形备份" transform="translate(30.532284, 8.793212) rotate(125.000000) translate(-30.532284, -8.793212) "></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/attend-class/model/train-type/index.tsx

@@ -9,7 +9,7 @@ import eEdit from './images/e-edit.svg';
 import iconPause from './images/icon-pause.svg';
 import pDelete from './images/p-delete.svg';
 import eDelete from './images/e-delete.svg';
-
+import { useUserStore } from '/src/store/modules/users';
 type ItemType = {
   id: string | number;
   type: 'practice' | 'evaluation';
@@ -28,6 +28,7 @@ export default defineComponent({
   },
   emits: ['click', 'delete', 'edit'],
   setup(props, { emit }) {
+    const userStore = useUserStore();
     const dialog = useDialog();
 
     const onDelete = () => {

src/views/natural-resources/index.module.less

@@ -128,11 +128,6 @@
       font-size: 15px;
       font-weight: 500;
     }
-
-    .iconSearch {
-      width: 16px;
-      height: 17px;
-    }
   }
 
   .searchCatatory {

src/views/natural-resources/search-group-resources.tsx

@@ -1,14 +1,11 @@
-import { defineComponent, reactive, ref } from 'vue';
+import { defineComponent, reactive } from 'vue';
 import styles from './index.module.less';
 import { NButton, NForm, NFormItem, NInput, NSpace } from 'naive-ui';
-import disSearch from '@/components/searchInput/images/disSearch.png';
-import searchIcon from '@/components/searchInput/images/searchIcon.png';
 import iconAdd from './images/icon-add.svg';
 
 export default defineComponent({
   name: 'search-group',
   setup() {
-    const isFocus = ref(false);
     const forms = reactive({
       search: ''
     });
@@ -91,20 +88,9 @@ export default defineComponent({
             clearable
             round
             v-model:value={forms.search}
-            class={styles.inputSearch}
-            onFocus={() => {
-              isFocus.value = true;
-            }}
-            onBlur={() => {
-              isFocus.value = false;
-            }}>
+            class={styles.inputSearch}>
             {{
-              prefix: () => (
-                <img
-                  src={isFocus.value ? searchIcon : disSearch}
-                  class={styles.iconSearch}
-                />
-              ),
+              prefix: () => <span class={'icon-search-input'}></span>,
               suffix: () => (
                 <NButton round type="primary" class={styles.searchBtn}>
                   搜索

src/views/prepare-lessons/model/attend-class/index.tsx

@@ -22,7 +22,7 @@ export default defineComponent({
         <div class={styles.attendClassSearch}>
           <NInput placeholder="请输入班级名称" clearable>
             {{
-              prefix: () => <img src={iconSearch} class={styles.iconSearch} />
+              prefix: () => <span class="icon-search-input"></span>
             }}
           </NInput>
           <NSelect

src/views/prepare-lessons/model/resource-search-group/index.module.less

@@ -8,11 +8,6 @@
     gap: 0px 16px;
   }
 
-  .iconSearch {
-    width: 18px;
-    height: 19px;
-  }
-
   :global {
 
     .n-base-selection,

src/views/prepare-lessons/model/resource-search-group/index.tsx

@@ -2,7 +2,6 @@ import { defineComponent, reactive } from 'vue';
 import styles from './index.module.less';
 import { NButton, NInput, NSelect, NSpace } from 'naive-ui';
 import { instrumentArray, teachingArray } from '@/utils/searchArray';
-import iconSearch from '../../components/resource-main/images/icon-search.png';
 
 export default defineComponent({
   name: 'resource-search-group',
@@ -43,7 +42,7 @@ export default defineComponent({
             v-model:value={forms.search}
             class={styles.inputSearch}>
             {{
-              prefix: () => <img src={iconSearch} class={styles.iconSearch} />,
+              prefix: () => <span class={'icon-search-input'}></span>,
               suffix: () => (
                 <NButton
                   type="primary"

src/views/prepare-lessons/model/select-music/index.tsx

@@ -2,7 +2,6 @@ import { NButton, NIcon, NScrollbar, NTabPane, NTabs } from 'naive-ui';
 import { defineComponent, reactive } from 'vue';
 import styles from './index.module.less';
 import CardType from '@/components/card-type';
-import { NBaseIcon } from 'naive-ui/es/_internal';
 import SearchGroup from './search-group';
 import listData from '@views/xiaoku-music/data.json';
 

src/views/prepare-lessons/model/select-music/search-group.tsx

@@ -1,8 +1,6 @@
 import { defineComponent, reactive, ref } from 'vue';
 import styles from './index.module.less';
 import { NButton, NForm, NFormItem, NInput, NSpace } from 'naive-ui';
-import disSearch from '@/components/searchInput/images/disSearch.png';
-import searchIcon from '@/components/searchInput/images/searchIcon.png';
 
 export default defineComponent({
   name: 'search-group',
@@ -62,20 +60,9 @@ export default defineComponent({
           clearable
           round
           v-model:value={forms.search}
-          class={styles.inputSearch}
-          onFocus={() => {
-            isFocus.value = true;
-          }}
-          onBlur={() => {
-            isFocus.value = false;
-          }}>
+          class={styles.inputSearch}>
           {{
-            prefix: () => (
-              <img
-                src={isFocus.value ? searchIcon : disSearch}
-                class={styles.iconSearch}
-              />
-            ),
+            prefix: () => <span class={'icon-search-input'}></span>,
             suffix: () => (
               <NButton round type="primary" class={styles.searchBtn}>
                 搜索

src/views/xiaoku-music/index.tsx

@@ -81,7 +81,9 @@ export default defineComponent({
     };
 
     /** 音频控制 */
-    const handleChangeAudio = (type: 'play' | 'pause' | 'pre' | 'next' | 'favitor') => {
+    const handleChangeAudio = (
+      type: 'play' | 'pause' | 'pre' | 'next' | 'favitor'
+    ) => {
       if (type === 'play') {
         data.playState = 'play';
       } else if (type === 'pause') {