到设置

1

src/components/layout/index.module.less

@@ -6,6 +6,11 @@
   background: #f1f5ff;
   overflow: hidden;
   .WrapcoreView {
+    .WrapcoreViewInfo {
+      border-radius: 20px;
+      background-color: #fff;
+      overflow: hidden;
+    }
     padding: 32px;
     height: calc(100vh - 64px);
     overflow-y: auto;

src/components/layout/index.tsx

@@ -15,13 +15,15 @@ export default defineComponent({
             <div class={styles.Wrapcore}>
               <LayoutTop></LayoutTop>
               <div class={styles.WrapcoreView}>
-                <router-view>
-                  {(obj: any) => (
-                    <Transition name="fade-slide" mode="out-in">
-                      <obj.Component />
-                    </Transition>
-                  )}
-                </router-view>
+                <div class={styles.WrapcoreViewInfo}>
+                  <router-view>
+                    {(obj: any) => (
+                      <Transition name="fade-slide" mode="out-in">
+                        <obj.Component />
+                      </Transition>
+                    )}
+                  </router-view>
+                </div>
               </div>
             </div>
           </div>

src/components/layout/layoutSilder.tsx

@@ -78,7 +78,7 @@ export default defineComponent({
         normalIcon: setNormal,
         isActive: false,
         id: 7,
-        path: '/'
+        path: '/setting'
       }
     ]);
     const checkNavBar = (item: any) => {

src/router/routes/index.ts

@@ -64,6 +64,14 @@ export const constantRoutes: RouteRecordRaw[] = [
         meta: {
           title: '曲谱库'
         }
+      },
+      {
+        path: '/setting',
+        name: 'base-setting',
+        component: () => import('@/views/setting/index'),
+        meta: {
+          title: '设置'
+        }
       }
     ]
   },

src/views/setting/components/personInfo.tsx

@@ -0,0 +1,76 @@
+import { defineComponent, reactive, ref } from 'vue';
+import styles from '../index.module.less';
+import { NImage, NForm, NFormItem, NInput, NGrid, NGi } 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';
+import maleIcon from '../images/maleIcon.png';
+export default defineComponent({
+  name: 'setting-personInfo',
+  setup(props, { emit, attrs }) {
+    const teacherForm = reactive({
+      name: '张晚意',
+      phone: '18971685555',
+      sex: '男'
+    });
+    return () => (
+      <div class={styles.infoWrap}>
+        <div class={styles.teacherInfoWrap}>
+          <div class={styles.teacherHeadWrap}>
+            <NImage
+              previewDisabled
+              class={styles.headerD}
+              src={headerD}></NImage>
+            <NImage
+              previewDisabled
+              class={styles.defultHeade}
+              src={defultHeade}></NImage>
+          </div>
+          <div class={styles.headerInfo}>
+            <p class={styles.headerTitle}>
+              张晚意
+              <NImage
+                previewDisabled
+                class={styles.sexIcon}
+                src={maleIcon}></NImage>
+            </p>
+            <p class={styles.headerSubTitle}>武汉小学 | 音乐老师</p>
+          </div>
+        </div>
+        <div class={styles.setInfo}>
+          <NForm inline model={teacherForm}>
+            <NGrid cols={3} x-gap="160">
+              <NGi>
+                {' '}
+                <NFormItem label="姓名" path="name">
+                  <NInput
+                    disabled
+                    placeholder="请输入老师姓名"
+                    v-model:value={teacherForm.name}></NInput>
+                </NFormItem>
+              </NGi>
+              <NGi>
+                {' '}
+                <NFormItem label="手机号" path="phone">
+                  <NInput
+                    disabled
+                    placeholder="请输入老师姓名"
+                    v-model:value={teacherForm.phone}></NInput>
+                </NFormItem>
+              </NGi>
+              <NGi>
+                {' '}
+                <NFormItem label="性别" path="sex">
+                  <NInput
+                    disabled
+                    placeholder="请选择性别"
+                    v-model:value={teacherForm.sex}></NInput>
+                </NFormItem>
+              </NGi>
+            </NGrid>
+          </NForm>
+        </div>
+      </div>
+    );
+  }
+});

src/views/setting/index.module.less

@@ -0,0 +1,109 @@
+@img: './images';
+.listWrap {
+  min-height: 805px;
+  padding: 32px;
+  .customTabs {
+    :global {
+      .n-tabs-tab--active {
+        font-size: 18px !important;
+
+        font-weight: 600 !important;
+        color: #131415 !important;
+      }
+      .n-tabs-tab {
+        font-size: 18px;
+        padding: 8px 0 !important;
+        font-weight: 400;
+        min-width: 50px;
+        color: #8b8d98;
+        &:hover {
+          color: #198cfe !important;
+        }
+      }
+      .n-tabs-bar {
+        // background-color: red !important;
+        width: 50px !important;
+        height: 5px !important;
+        background: url('@{img}/barIcon.png') no-repeat;
+        background-size: 50px 5px;
+      }
+    }
+  }
+}
+.infoWrap {
+  height: 100%;
+  padding-top: 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .teacherInfoWrap {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .teacherHeadWrap {
+      position: relative;
+      .headerD {
+        width: 237px;
+        height: 142px;
+      }
+      .defultHeade {
+        width: 116px;
+        height: 116px;
+        overflow: hidden;
+        border-radius: 50%;
+        position: absolute;
+        top: 13px;
+        left: 61px;
+      }
+    }
+    .headerInfo {
+      .headerTitle {
+        font-size: 22px;
+        font-weight: 600;
+        color: #131415;
+        line-height: 28px;
+        letter-spacing: 1px;
+        margin: 18px 0 8px;
+        text-align: center;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        .sexIcon {
+          width: 12px;
+          height: 21px;
+          margin-left: 5px;
+        }
+      }
+      .headerSubTitle {
+        font-size: 16px;
+        font-weight: 400;
+        color: #707a92;
+        line-height: 20px;
+      }
+    }
+  }
+  .setInfo {
+    margin-top: 64px;
+    width: 1172px;
+    :global {
+      .n-form-item-label {
+        font-size: 15px;
+        color: rgba(0, 0, 0, 0.8);
+      }
+      .n-input.n-input--disabled {
+        background-color: #f5f6fa;
+        color: rgba(0, 0, 0, 0.4);
+        border: none;
+      }
+      .n-input {
+        border-radius: 8px;
+      }
+      .n-input__input-el {
+        height: 55px;
+        line-height: 55px;
+        border-radius: 8px;
+      }
+    }
+  }
+}

src/views/setting/index.tsx

@@ -0,0 +1,26 @@
+import { defineComponent, ref } from 'vue';
+import styles from './index.module.less';
+import { NTabs, NTabPane } from 'naive-ui';
+import PersonInfo from './components/personInfo';
+export default defineComponent({
+  name: 'base-setting',
+  setup(props, { emit, attrs }) {
+    const activeTab = ref('person');
+    return () => (
+      <div class={styles.listWrap}>
+        <NTabs
+          class={styles.customTabs}
+          v-model:value={activeTab.value}
+          size="large"
+          animated
+          pane-wrapper-style="margin: 0 -4px"
+          pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;">
+          <NTabPane name="person" tab="个人信息">
+            <PersonInfo></PersonInfo>
+          </NTabPane>
+          <NTabPane name="school" tab="学校设置"></NTabPane>
+        </NTabs>
+      </div>
+    );
+  }
+});