hz/student-h5
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git synced 2025-12-07 09:56:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat:新建项目

Browse Source
This commit is contained in:
李晓鸽
2022-09-21 15:45:33 +08:00
commit fc64aa3787
34 changed files with 20309 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
.gitignore vendored Normal file
View File

@@ -0,0 +1,23 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

24
README.md Normal file
View File

@@ -0,0 +1,24 @@
# stu_h5
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

5
babel.config.js Normal file
View File

@@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

19
jsconfig.json Normal file
View File

@@ -0,0 +1,19 @@
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}

19759
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

50
package.json Normal file
View File

@@ -0,0 +1,50 @@
{
"name": "stu_h5",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"element-plus": "^2.2.17",
"vue": "^3.2.13",
"vue-router": "^4.0.3",
"vuex": "^4.0.0"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"sass": "^1.32.7",
"sass-loader": "^12.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

17
public/index.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

96
src/App.vue Normal file
View File

@@ -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>

BIN
src/assets/image/faceteach/course.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 852 B

BIN
src/assets/image/faceteach/download.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 708 B

BIN
src/assets/image/faceteach/livelecturer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
src/assets/image/faceteach/position.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/image/faceteach/time.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 968 B

BIN
src/assets/image/file/excel.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 885 B

BIN
src/assets/image/file/md.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 638 B

BIN
src/assets/image/file/pdf.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 884 B

BIN
src/assets/image/file/ppt.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 753 B

BIN
src/assets/image/file/word.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 877 B

BIN
src/assets/image/file/zip.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 752 B

BIN
src/assets/image/img.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 150 KiB

BIN
src/assets/image/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
src/assets/image/medal/medal1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/assets/image/medal/medal2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/assets/image/medal/medal3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/assets/image/titleBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 136 KiB

65
src/assets/scss/common.scss Normal file
View File

@@ -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样式-----------------------------------------------------------------

30
src/components/TitleHead.vue Normal file
View File

@@ -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>

13
src/main.js Normal file
View File

@@ -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,
})

16
src/router/config.js Normal file
View File

@@ -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;

19
src/router/index.js Normal file
View File

@@ -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

14
src/store/index.js Normal file
View File

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

155
src/views/faceteach/FaceTeach.vue Normal file
View File

@@ -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>

4
vue.config.js Normal file
View File

@@ -0,0 +1,4 @@
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})