feat:新建项目

src/App.vue

@@ -0,0 +1,96 @@
+<template>
+  <div id="container">
+    <!-- <div id="nav">
+      <router-link
+        v-for="item in routes"
+        :key="item.path"
+        :to="item.path"
+        :class="{
+          link: true,
+          active: name === item.name,
+        }"
+      >
+        {{ item.name }}
+      </router-link>
+    </div> -->
+    <main>
+      <router-view />
+    </main>
+  </div>
+</template>
+<script>
+import { computed, defineComponent } from "vue";
+import { useRouter, useRoute } from "vue-router";
+export default defineComponent({
+  setup() {
+    const router = useRouter();
+    const route = useRoute();
+    console.log("router", router.getRoutes(), route);
+    const routes = computed(() => {
+      return router.getRoutes().filter((e) => e.meta?.isLink);
+    });
+
+    const currentRouteName = computed(() => route.name);
+
+    return {
+      routes,
+      name: currentRouteName,
+    };
+  },
+});
+</script>
+<style lang="scss">
+#app {
+  // font-family: MicrosoftYaHei, Microsoft YaHei, Avenir, Helvetica, Arial,
+  // sans-serif;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+    Microsoft YaHei, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+  height: 100%;
+}
+
+#container {
+  display: flex;
+  width: 100%;
+  min-height: 100%;
+  background-color: rgba(242, 245, 247, 1);
+  // background-color: #ccc;
+  #nav {
+    width: 220px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    padding: 30px 0;
+    box-sizing: border-box;
+    background: #f1f1f1;
+    box-shadow: 0 5px 15px 8px rgba(1, 22, 54, 0.795);
+
+    .link {
+      text-decoration: none;
+      color: rgb(0, 0, 0);
+      padding: 10px;
+      transition: all 0.4s;
+      text-align: center;
+
+      &:hover {
+        background: rgba(4, 37, 223, 0.274);
+        color: #f1f1f1;
+      }
+
+      &.active {
+        color: #f1f1f1;
+        background: rgba(17, 120, 255, 0.74);
+      }
+    }
+  }
+  main {
+    flex: 1;
+    width: 100%;
+    // padding: 30px;
+    box-sizing: border-box;
+  }
+}
+</style>

src/assets/scss/common.scss

@@ -0,0 +1,65 @@
+html,
+body {
+		height: 100vh;
+		margin: 0;
+	 padding: 0;
+    // overflow-y: auto;
+}
+
+//标签tag样式-----------------------------------------------------------------
+// 必修
+.tag1{
+	width: 80px;
+	height: 26px;
+	border: 1px solid #51C6E6;
+	border-radius: 4px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 14px;
+	font-weight: bold;
+	color: #51C6E6;
+}
+// 选修
+.tag2{
+	width: 80px;
+	height: 26px;
+	border: 1px solid #CD7FED;
+	border-radius: 4px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 14px;
+	font-weight: bold;
+	color: #CD7FED;
+}
+// 在线 面授 测评 外部链接 作业 辩论等
+.tag3{
+	height: 26px;
+	border: 1px solid #7F96ED;
+	border-radius: 4px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 14px;
+	font-weight: bold;
+	color: #7F96ED;
+	padding-left:25px ;
+	padding-right: 25px;
+}
+// 标签 
+.tag4{
+	padding-left:15px ;
+	padding-right: 12px;
+	height: 24px;
+	border: 1px solid rgba(255, 185, 109, 1);
+	border-radius: 4px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 14px;
+	font-weight: 500;
+	color: rgba(255, 185, 109, 1);
+}
+
+//标签tag样式-----------------------------------------------------------------

src/components/TitleHead.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="titleHead">
+    <div class="text">{{ text }}</div>
+  </div>
+</template>
+<script>
+export default {
+  name: "TitleHead",
+  props: {
+    text: String,
+  },
+};
+</script>
+<style scoped lang="scss">
+.titleHead {
+  width: 100%;
+  height: 80px;
+  background-image: url("../assets/image/titleBg.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  .text {
+    font-size: 15px;
+    font-weight: 600;
+    color: #ffffff;
+    line-height: 12px;
+    padding-top: 33px;
+    margin-left: 11px;
+  }
+}
+</style>

src/main.js

@@ -0,0 +1,13 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import "@/assets/scss/common.scss"
+const app = createApp(App)
+app.use(store).use(router).mount('#app')
+app.use(ElementPlus, {
+	locale: zhCn,
+})

src/router/config.js

@@ -0,0 +1,16 @@
+const routes = [];
+const context = require.context('@/views', true, /\.vue$/, 'lazy');
+context.keys().forEach(path => {
+	// console.log('path', path)
+	const componentName = path.replace(/.*\/([^\\.\\/]*)\.vue$/, '$1');
+	routes.push({
+		path: `/${componentName.toLowerCase()}`,
+		name: componentName,
+		component: () => context(path),
+		meta: {
+			isLink: true
+		}
+	});
+});
+
+export default routes;

src/router/index.js

@@ -0,0 +1,19 @@
+import { createRouter, createWebHashHistory } from 'vue-router';
+import routesConfig from './config';
+// console.log('routesConfig', routesConfig)
+
+const routes = [
+	{
+		path: '/',
+		name: '首页',
+		redirect: routesConfig[0].path
+	},
+	...routesConfig
+]
+
+const router = createRouter({
+	history: createWebHashHistory(),
+	routes
+})
+
+export default router

src/store/index.js

@@ -0,0 +1,14 @@
+import { createStore } from 'vuex'
+
+export default createStore({
+  state: {
+  },
+  getters: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})

src/views/faceteach/FaceTeach.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="faceteach">
+    <TitleHead text="【其他活动】核心项目面授课"></TitleHead>
+    <div class="main">
+      <div class="title">
+        <div class="titlemain">
+          <div class="timeposition">
+            <div class="time">
+              <img
+                style="width: 13px; height: 14.5px; margin-right: 5.5px"
+                src="../../assets/image/faceteach/time.png"
+              />
+              <div style="font-size: 12px; color: rgba(110, 123, 132, 1)">
+                2022-07-20 20:00-21:00
+              </div>
+            </div>
+            <div class="time" style="margin-top: 9px">
+              <img
+                style="width: 13px; height: 15px; margin-right: 5.5px"
+                src="../../assets/image/faceteach/position.png"
+              />
+              <div style="font-size: 12px; color: rgba(110, 123, 132, 1)">
+                大族广场
+              </div>
+            </div>
+          </div>
+          <div class="titlebtn">评估</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { reactive, toRefs } from "vue";
+import TitleHead from "@/components/TitleHead.vue";
+export default {
+  name: "FaceTeach",
+  components: {
+    TitleHead,
+  },
+  setup() {
+    const state = reactive({
+      activeName: "first",
+      enclosure: [
+        {
+          id: 1,
+          name: "项目参考文档.doc",
+          img: require("../../assets/image/file/word.png"),
+        },
+        {
+          id: 2,
+          name: "人工智能启蒙讲解讲义.pptx",
+          img: require("../../assets/image/file/ppt.png"),
+        },
+        {
+          id: 3,
+          name: "人工智能启蒙讲解讲义.xlsx",
+          img: require("../../assets/image/file/excel.png"),
+        },
+      ],
+      teacher: [
+        {
+          id: 1,
+          name: "王星天（显示事业）",
+          introduce: "教师是学生的镜子,学生是老师的影子。",
+          peopleimg: require("../../assets/image/img.jpg"),
+          medal: [
+            require("../../assets/image/medal/medal1.png"),
+            require("../../assets/image/medal/medal2.png"),
+            require("../../assets/image/medal/medal3.png"),
+          ],
+        },
+        {
+          id: 2,
+          name: "王星天（显示事业）",
+          introduce: "教师是学生的镜子,学生是老师的影子。",
+          peopleimg: require("../../assets/image/img.jpg"),
+          medal: [
+            require("../../assets/image/medal/medal1.png"),
+            require("../../assets/image/medal/medal2.png"),
+          ],
+        },
+        {
+          id: 3,
+          name: "王星天（显示事业）",
+          introduce:
+            "教师是学生的镜子,学生是老师的影子。教师是学生的镜子,学生是老师的影子。教师是学生的镜子,学生是老师的影子。教师是学生的镜子,学生是老师的影子。",
+          peopleimg: require("../../assets/image/img.jpg"),
+          medal: [
+            require("../../assets/image/medal/medal1.png"),
+            require("../../assets/image/medal/medal2.png"),
+            require("../../assets/image/medal/medal3.png"),
+          ],
+        },
+      ],
+    });
+    const handleClick = (tab, event) => {
+      console.log(tab, event);
+    };
+    return {
+      ...toRefs(state),
+      handleClick,
+    };
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss">
+.faceteach {
+  width: 100%;
+  .main {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: -14.5px;
+    .title {
+      width: 90%;
+      height: 74px;
+      border-radius: 4px;
+      background-color: rgba(255, 255, 255, 1);
+      display: flex;
+      justify-content: center;
+      .titlemain {
+        width: 90%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .timeposition {
+          .time {
+            display: flex;
+            align-items: center;
+          }
+        }
+        .titlebtn {
+          width: 83px;
+          height: 33px;
+          background: #2478ff;
+          box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
+          border-radius: 2px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 14px;
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 12px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+</style>