样式修改

1

src/components/CSelect/index.module.less

@@ -23,6 +23,26 @@
     }
   }
 }
+.CSelectWrap.CSelectInitWrap {
+  :global {
+    .n-select {
+      width: 180px !important;
+      .n-base-selection-label {
+        height: 43px;
+        line-height: 43px;
+      }
+      .n-base-selection__border {
+        border-radius: 8px;
+        overflow: hidden;
+      }
+      .n-base-selection__state-border {
+        border-radius: 8px;
+        overflow: hidden;
+      }
+    }
+  }
+}
+
 // :global {
 //   .n-base-select-option {
 //     line-height: 45px;

src/components/CSelect/index.tsx

@@ -5,6 +5,12 @@ import { NIcon, NImage, NDatePicker, NSelect } from 'naive-ui';
 import activeArrow from './images/activeArrow.png';
 import arrow from './images/arrow.png';
 export default defineComponent({
+  props: {
+    inline: {
+      type: Boolean,
+      default: false
+    }
+  },
   name: 'CSelect',
   setup(props, { emit, attrs }) {
     const timer = ref(null);
@@ -15,7 +21,11 @@ export default defineComponent({
     const isFocus = ref(false);
     return () => (
       <>
-        <div class={styles.CSelectWrap}>
+        <div
+          class={[
+            styles.CSelectWrap,
+            props.inline ? styles.CSelectInitWrap : null
+          ]}>
           <NSelect
             show-checkmark={false}
             {...attrs}

src/components/layout/index.module.less

@@ -131,21 +131,21 @@
       .messageBadge {
         margin-right: 24px;
         :global {
-          .n-badge-sup {
-            height: 22px;
-            padding: 0 5px;
-            border: 1px solid #fff;
-            min-width: 22px;
-            border-radius: 11px;
-            text-align: center;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            line-height: 20px;
-          }
-          .n-base-slot-machine-current-number__inner {
-            top: 1px;
-          }
+          // .n-badge-sup {
+          //   height: 22px;
+          //   padding: 0 5px;
+          //   border: 1px solid #fff;
+          //   min-width: 22px;
+          //   border-radius: 11px;
+          //   text-align: center;
+          //   display: flex;
+          //   flex-direction: column;
+          //   align-items: center;
+          //   line-height: 20px;
+          // }
+          // .n-base-slot-machine-current-number__inner {
+          //   top: 1px;
+          // }
         }
         .messageIcon {
           width: 32px;
@@ -291,6 +291,11 @@
   cursor: pointer;
   z-index: 1000;
 }
+.isDragIng {
+  width: 115px;
+  height: 115px;
+}
+
 :global {
   .moveable-control-box {
     --moveable-color: transparent !important;

src/components/layout/index.tsx

@@ -11,6 +11,7 @@ import toneIcon from './images/toneIcon.png';
 import beatImage from './images/beatImage.png';
 import toneImage from './images/toneImage.png';
 import setTimeImage from './images/setTimeImage.png';
+import dragingBoxIcon from './images/dragingBoxIcon.png';
 export default defineComponent({
   name: 'layoutView',
   setup() {
@@ -18,6 +19,7 @@ export default defineComponent({
     const showModalBeat = ref(false);
     const showModalTone = ref(false);
     const showModalTime = ref(false);
+    const isDragIng = ref(false);
     const initMoveable = async () => {
       if (document.querySelector('.wrap')) {
         const moveable = new Moveable(document.querySelector('.wrap') as any, {
@@ -61,6 +63,7 @@ export default defineComponent({
               clientX,
               clientY
             }) => {
+              isDragIng.value = true;
               const subdEl = document.getElementById(
                 `moveNPopover`
               ) as HTMLDivElement;
@@ -118,6 +121,7 @@ export default defineComponent({
               // 往又出
               directionType.value = 'left';
             }
+            isDragIng.value = false;
           });
       }
     };
@@ -162,9 +166,13 @@ export default defineComponent({
           v-slots={{
             trigger: () => (
               <img
-                src={toolbox}
+                src={isDragIng.value ? dragingBoxIcon : toolbox}
                 id="moveNPopover"
-                class={[styles.toolboxImg, 'moveNPopover']}
+                class={[
+                  styles.toolboxImg,
+                  'moveNPopover',
+                  isDragIng.value ? styles.isDragIng : ''
+                ]}
                 alt=""
               />
             )

src/styles/index.less

@@ -198,3 +198,27 @@ body {
 // .n-button--primary-type {
 //   color: #1677ff !important;
 // }
+
+::-webkit-input-placeholder {
+  /* WebKit browsers */
+
+  color: rgba(0, 0, 0, 0.4);
+}
+
+:-moz-placeholder {
+  /* Mozilla Firefox 4 to 18 */
+
+  color: rgba(0, 0, 0, 0.4);
+}
+
+::-moz-placeholder {
+  /* Mozilla Firefox 19+ */
+
+  color: rgba(0, 0, 0, 0.4);
+}
+
+:-ms-input-placeholder {
+  /* Internet Explorer 10+ */
+
+  color: rgba(0, 0, 0, 0.4);
+}

src/views/classList/index.tsx

@@ -119,6 +119,7 @@ export default defineComponent({
           <NForm label-placement="left" inline>
             <NFormItem>
               <SearchInput
+                {...{ placeholder: '请输入班级名称' }}
                 class={styles.searchInput}
                 searchWord={state.searchWord}
                 onChangeValue={(val: string) =>
@@ -131,17 +132,17 @@ export default defineComponent({
                 {...({
                   options: [
                     {
-                      label:
-                        "Everybody's Got Something to Hide Except Me and My Monkey",
+                      label: '一年级',
                       value: 'song0'
                     },
                     {
-                      label: 'Drive My Car',
+                      label: '二年级',
                       value: 'song1'
                     }
                   ],
                   placeholder: '全部年级',
-                  clearable: true
+                  clearable: true,
+                  inline: true
                 } as any)}
                 v-model:value={state.orchestraType}></CSelect>
             </NFormItem>
@@ -150,19 +151,19 @@ export default defineComponent({
                 {...({
                   options: [
                     {
-                      label:
-                        "Everybody's Got Something to Hide Except Me and My Monkey",
+                      label: '1班',
                       value: 'song0'
                     },
                     {
-                      label: 'Drive My Car',
+                      label: '2班',
                       value: 'song1'
                     }
                   ],
                   placeholder: '全部班级',
-                  clearable: true
+                  clearable: true,
+                  inline: true
                 } as any)}
-                v-model:value={state.orchestraType}></CSelect>
+                v-model:value={state.courseTypeCode}></CSelect>
             </NFormItem>
 
             <NFormItem>

src/views/home/index.module.less

@@ -238,7 +238,7 @@
 
           span {
             font-family: 'DINA';
-            font-size: 24px;
+            font-size: 26px;
             font-weight: 600;
             color: #131415;
             line-height: 28px;

src/views/setting/components/personInfo.tsx

@@ -1,6 +1,14 @@
 import { defineComponent, reactive, ref } from 'vue';
 import styles from '../index.module.less';
-import { NImage, NForm, NFormItem, NInput, NGrid, NGi } from 'naive-ui';
+import {
+  NImage,
+  NForm,
+  NFormItem,
+  NInput,
+  NGrid,
+  NGi,
+  NButton
+} from 'naive-ui';
 import headerD from '@/views/home/images/headerD.png';
 import defultHeade from '@/components/layout/images/teacherIcon.png';
 import femaleIcon from '../images/femaleIcon.png';
@@ -70,7 +78,14 @@ export default defineComponent({
             </NGrid>
           </NForm>
         </div>
-        <div class={styles.btnList}></div>
+        <div class={styles.btnList}>
+          <NButton class={styles.resetpwd} type="primary">
+            修改密码
+          </NButton>
+          <NButton class={styles.resetInfo} type="error">
+            修改信息
+          </NButton>
+        </div>
       </div>
     );
   }

src/views/setting/index.module.less

@@ -126,4 +126,31 @@
       }
     }
   }
-}
+}
+.btnList {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin-top: 100px;
+  .resetpwd {
+    width: 144px;
+    height: 45px;
+    background: #198cfe;
+    border-radius: 8px;
+    font-size: 18px;
+    font-weight: 600 !important;
+    color: #ffffff;
+    margin-right: 24px;
+  }
+  .resetInfo {
+    width: 144px;
+    height: 45px;
+    background: #f24433;
+    border-radius: 8px;
+    font-size: 18px;
+    font-weight: 600 !important;
+    color: #ffffff;
+    margin-right: 100px;
+  }
+}

src/views/studentList/index.module.less

@@ -16,9 +16,11 @@
   line-height: 41px;
   width: 144px;
   padding: 0 24px;
+
   :global {
     .n-button__content {
       font-size: 18px;
+      font-weight: 600;
     }
   }
 }

src/views/studentList/index.tsx

@@ -20,6 +20,9 @@ export default defineComponent({
       searchWord: '',
       orchestraType: null,
       courseTypeCode: null,
+      subjectId: null,
+      classId: null,
+      studentType: null,
       loading: false,
       pagination: {
         page: 1,
@@ -135,6 +138,7 @@ export default defineComponent({
           <NForm label-placement="left" inline>
             <NFormItem>
               <SearchInput
+                {...{ placeholder: '请输入学生姓名' }}
                 class={styles.searchInput}
                 searchWord={state.searchWord}
                 onChangeValue={(val: string) =>
@@ -147,64 +151,68 @@ export default defineComponent({
                 {...({
                   options: [
                     {
-                      label:
-                        "Everybody's Got Something to Hide Except Me and My Monkey",
+                      label: '竖笛',
                       value: 'song0'
                     },
                     {
-                      label: 'Drive My Car',
+                      label: '葫芦丝',
                       value: 'song1'
                     }
                   ],
                   placeholder: '学生声部',
-                  clearable: true
+                  clearable: true,
+                  inline: true
                 } as any)}
-                v-model:value={state.orchestraType}></CSelect>
+                v-model:value={state.subjectId}></CSelect>
             </NFormItem>
             <NFormItem>
               <CSelect
                 {...({
                   options: [
                     {
-                      label:
-                        "Everybody's Got Something to Hide Except Me and My Monkey",
+                      label: '一年级2班',
                       value: 'song0'
                     },
                     {
-                      label: 'Drive My Car',
+                      label: '一年级3班',
                       value: 'song1'
                     }
                   ],
                   placeholder: '年级班级',
-                  clearable: true
+                  clearable: true,
+                  inline: true
                 } as any)}
-                v-model:value={state.orchestraType}></CSelect>
+                v-model:value={state.classId}></CSelect>
             </NFormItem>
             <NFormItem>
               <CSelect
                 {...({
                   options: [
                     {
-                      label:
-                        "Everybody's Got Something to Hide Except Me and My Monkey",
+                      label: '会员',
                       value: 'song0'
                     },
                     {
-                      label: 'Drive My Car',
+                      label: '普通',
                       value: 'song1'
                     }
                   ],
                   placeholder: '学生类型',
-                  clearable: true
+                  clearable: true,
+                  inline: true
                 } as any)}
-                v-model:value={state.orchestraType}></CSelect>
+                v-model:value={state.studentType}></CSelect>
             </NFormItem>
             <NFormItem>
               <NSpace justify="end">
-                <NButton type="primary" ghost class="resetBtn" onClick={search}>
+                <NButton type="primary" class="searchBtn" onClick={search}>
                   搜索
                 </NButton>
-                <NButton type="primary" class="searchBtn" onClick={onReset}>
+                <NButton
+                  type="primary"
+                  ghost
+                  class="resetBtn"
+                  onClick={onReset}>
                   重置
                 </NButton>
               </NSpace>