提交

1

package-lock.json

@@ -43,6 +43,7 @@
         "lint-staged": "^13.2.2",
         "naive-ui": "^2.34.4",
         "plop": "^3.1.2",
+        "postcss-px-to-viewport": "^1.1.1",
         "prettier": "^2.8.7",
         "typescript": "^5.0.4",
         "unplugin-vue-components": "^0.24.1",
@@ -6392,6 +6393,15 @@
         "node": "*"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.12.3",
       "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.12.3.tgz",
@@ -6888,6 +6898,16 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-px-to-viewport": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/postcss-px-to-viewport/-/postcss-px-to-viewport-1.1.1.tgz",
+      "integrity": "sha512-2x9oGnBms+e0cYtBJOZdlwrFg/mLR4P1g2IFu7jYKvnqnH/HLhoKyareW2Q/x4sg0BgklHlP1qeWo2oCyPm8FQ==",
+      "dev": true,
+      "dependencies": {
+        "object-assign": ">=4.0.1",
+        "postcss": ">=5.0.2"
+      }
+    },
     "node_modules/postcss-selector-parser": {
       "version": "6.0.11",
       "resolved": "https://registry.npmmirror.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
@@ -13285,6 +13305,12 @@
       "resolved": "https://registry.npmmirror.com/numeral/-/numeral-2.0.6.tgz",
       "integrity": "sha512-qaKRmtYPZ5qdw4jWJD6bxEf1FJEqllJrwxCLIm0sQU/A7v2/czigzOb+C2uSiFsa9lBUzeH7M1oK+Q+OLxL3kA=="
     },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true
+    },
     "object-inspect": {
       "version": "1.12.3",
       "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.12.3.tgz",
@@ -13658,6 +13684,16 @@
         "source-map-js": "^1.0.2"
       }
     },
+    "postcss-px-to-viewport": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/postcss-px-to-viewport/-/postcss-px-to-viewport-1.1.1.tgz",
+      "integrity": "sha512-2x9oGnBms+e0cYtBJOZdlwrFg/mLR4P1g2IFu7jYKvnqnH/HLhoKyareW2Q/x4sg0BgklHlP1qeWo2oCyPm8FQ==",
+      "dev": true,
+      "requires": {
+        "object-assign": ">=4.0.1",
+        "postcss": ">=5.0.2"
+      }
+    },
     "postcss-selector-parser": {
       "version": "6.0.11",
       "resolved": "https://registry.npmmirror.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",

package.json

@@ -56,6 +56,7 @@
     "lint-staged": "^13.2.2",
     "naive-ui": "^2.34.4",
     "plop": "^3.1.2",
+    "postcss-px-to-viewport": "^1.1.1",
     "prettier": "^2.8.7",
     "typescript": "^5.0.4",
     "unplugin-vue-components": "^0.24.1",

postcss.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+  plugins: {
+    'postcss-px-to-viewport': {
+      unitToConvert: 'px', // 需要转换的单位，默认为"px"
+      viewportWidth: 1920, // 设计稿的视口宽度
+      unitPrecision: 5, // 单位转换后保留的精度
+      propList: ['*'], // 能转化为vw的属性列表
+      viewportUnit: 'vw', // 希望使用的视口单位
+      fontViewportUnit: 'vw', // 字体使用的视口单位
+      selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
+      minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
+      mediaQuery: false, // 媒体查询里的单位是否需要转换单位
+      replace: true, //  是否直接更换属性值，而不添加备用属性
+      exclude: undefined, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
+      include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换
+      landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
+      landscapeUnit: 'vw', // 横屏时使用的单位
+      landscapeWidth: 1920 // 横屏时使用的视口宽度
+    }
+  }
+};

src/components/layout/index.module.less

@@ -0,0 +1,25 @@
+.wrap {
+  display: flex;
+  flex-direction: row;
+  .WrapcoreView {
+    margin-top: 32px;
+  }
+  height: 100vh;
+  overflow-y: scroll;
+}
+.silder {
+  width: 100px;
+  background: #3044ca;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .logoWrap {
+    margin-top: 22px;
+    width: 62px;
+    height: 60px;
+  }
+  .sliderList {
+    margin-top: 37px;
+  }
+}

src/components/layout/index.tsx

@@ -1,10 +1,25 @@
 import { defineComponent } from 'vue';
+import LayoutSilder from './layoutSilder';
+import LayoutTop from './layoutTop';
+import styles from './index.module.less';
 export default defineComponent({
   name: 'layoutView',
   setup() {
     return () => (
       <>
-        <router-view></router-view>
+        <div>
+          <div class={styles.wrap}>
+            <div>
+              <LayoutSilder></LayoutSilder>
+            </div>
+            <div class={styles.Wrapcore}>
+              <LayoutTop></LayoutTop>
+              <div class={styles.WrapcoreView}>
+                <router-view></router-view>
+              </div>
+            </div>
+          </div>
+        </div>
       </>
     );
   }

src/components/layout/layoutSilder.tsx

@@ -0,0 +1,82 @@
+import { defineComponent } from 'vue';
+import { NImage } from 'naive-ui';
+import styles from './index.module.less';
+import logo from './images/logo.png';
+import classIcon from './images/classIcon.png';
+import classNormal from './images/classNormal.png';
+import indexIcon from './images/indexIcon.png';
+import indexNormal from './images/indexNormal.png';
+import kuIcon from './images/kuIcon.png';
+import kuNormal from './images/kuNormal.png';
+import palyIcon from './images/palyIcon.png';
+import palyNormal from './images/palyNormal.png';
+import resourceIcon from './images/resourceIcon.png';
+import resourceNormal from './images/resourceNormal.png';
+import setIcon from './images/setIcon.png';
+import setNormal from './images/setNormal.png';
+import studentIcon from './images/studentIcon.png';
+import studentNormal from './images/studentNormal.png';
+import SilderItem from './modals/silderItem';
+export default defineComponent({
+  name: 'layoutSilder',
+  setup() {
+    const itemInfoList = [
+      {
+        activeIcon: indexIcon,
+        name: '主页',
+        normalIcon: indexNormal,
+        isActive: false
+      },
+      {
+        activeIcon: studentIcon,
+        name: '学生',
+        normalIcon: studentNormal,
+        isActive: false
+      },
+      {
+        activeIcon: classIcon,
+        name: '班级',
+        normalIcon: classNormal,
+        isActive: false
+      },
+      {
+        activeIcon: palyIcon,
+        name: '备课',
+        normalIcon: palyNormal,
+        isActive: false
+      },
+      {
+        activeIcon: kuIcon,
+        name: '小酷AI',
+        normalIcon: kuNormal,
+        isActive: false
+      },
+      {
+        activeIcon: resourceIcon,
+        name: '资源',
+        normalIcon: resourceNormal,
+        isActive: false
+      },
+      {
+        activeIcon: setIcon,
+        name: '设置',
+        normalIcon: setNormal,
+        isActive: false
+      }
+    ];
+    return () => (
+      <>
+        <div class={styles.silder}>
+          <div class={styles.logoWrap}>
+            <NImage width="62" height="60" src={logo} preview-disabled></NImage>
+          </div>
+          <div class={styles.sliderList}>
+            {itemInfoList.map((item: any) => (
+              <SilderItem item={item}> </SilderItem>
+            ))}
+          </div>
+        </div>
+      </>
+    );
+  }
+});

src/components/layout/layoutTop.tsx

@@ -0,0 +1,11 @@
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'layoutTop',
+  setup() {
+    return () => (
+      <>
+        <div>layoutTop</div>
+      </>
+    );
+  }
+});

src/components/layout/modals/silderItem.tsx

@@ -0,0 +1,30 @@
+import { defineComponent } from 'vue';
+import styles from '../index.module.less';
+import { NImage } from 'naive-ui';
+
+export default defineComponent({
+  props: ['item'],
+  name: 'layoutSilder',
+  setup(props, { emit }) {
+    return () => (
+      <>
+        <div
+          class={[
+            styles.silderItem,
+            props.item.isActive ? styles.isActiveItem : ''
+          ]}>
+          <NImage
+            width="62"
+            height="60"
+            src={
+              props.item.isActive
+                ? props.item.activeIcon
+                : props.item.normalIcon
+            }
+            preview-disabled></NImage>
+          <p>{props.item.name}</p>
+        </div>
+      </>
+    );
+  }
+});

src/router/routes/index.ts

@@ -9,6 +9,19 @@ export const constantRoutes: any[] = [
     }
   },
   {
+    name: '/Layout',
+    path: '/',
+    component: () => import('@/components/layout/index'),
+    children: [
+      {
+        //默认 显示home组件
+        path: '',
+        name: 'Home',
+        component: () => import('@/views/home/index')
+      }
+    ]
+  },
+  {
     name: '404',
     path: '/404',
     component: () => import('@/views/404/index'),