1
BOE\10867418
24
README.md
Normal 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
@@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/cli-plugin-babel/preset'
|
||||||
|
]
|
||||||
|
}
|
||||||
19
jsconfig.json
Normal 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
50
package.json
Normal 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
|
After Width: | Height: | Size: 4.2 KiB |
17
public/index.html
Normal 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>
|
||||||
97
src/App.vue
Normal file
@@ -0,0 +1,97 @@
|
|||||||
|
<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;
|
||||||
|
flex-direction: column;
|
||||||
|
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/activities/bg.png
Normal file
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/assets/image/activities/no.png
Normal file
|
After Width: | Height: | Size: 454 B |
BIN
src/assets/image/activities/trumpet.png
Normal file
|
After Width: | Height: | Size: 806 B |
BIN
src/assets/image/activities/yes.png
Normal file
|
After Width: | Height: | Size: 347 B |
BIN
src/assets/image/ballotpage/baccone.png
Normal file
|
After Width: | Height: | Size: 2.5 KiB |
BIN
src/assets/image/ballotpage/baccthr.png
Normal file
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/assets/image/ballotpage/bacctwo.png
Normal file
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/assets/image/ballotpage/cycle.png
Normal file
|
After Width: | Height: | Size: 826 B |
BIN
src/assets/image/ballotpage/left.png
Normal file
|
After Width: | Height: | Size: 189 B |
BIN
src/assets/image/ballotpage/next.png
Normal file
|
After Width: | Height: | Size: 571 B |
BIN
src/assets/image/ballotpage/pre.png
Normal file
|
After Width: | Height: | Size: 572 B |
BIN
src/assets/image/ballotpage/px.jpg
Normal file
|
After Width: | Height: | Size: 40 KiB |
BIN
src/assets/image/ballotpage/time.png
Normal file
|
After Width: | Height: | Size: 968 B |
BIN
src/assets/image/checkbox.png
Normal file
|
After Width: | Height: | Size: 734 B |
BIN
src/assets/image/checkbox2.png
Normal file
|
After Width: | Height: | Size: 620 B |
BIN
src/assets/image/cycle.png
Normal file
|
After Width: | Height: | Size: 826 B |
BIN
src/assets/image/discuss/delete.png
Normal file
|
After Width: | Height: | Size: 676 B |
BIN
src/assets/image/discuss/dianzan.png
Normal file
|
After Width: | Height: | Size: 404 B |
BIN
src/assets/image/discuss/dianzan2.png
Normal file
|
After Width: | Height: | Size: 392 B |
BIN
src/assets/image/discuss/elsedianzan.png
Normal file
|
After Width: | Height: | Size: 496 B |
BIN
src/assets/image/discuss/images.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/image/discuss/next.png
Normal file
|
After Width: | Height: | Size: 655 B |
BIN
src/assets/image/discuss/pinglun.png
Normal file
|
After Width: | Height: | Size: 430 B |
BIN
src/assets/image/discuss/pre.png
Normal file
|
After Width: | Height: | Size: 656 B |
BIN
src/assets/image/discuss/px.jpg
Normal file
|
After Width: | Height: | Size: 40 KiB |
BIN
src/assets/image/discuss/shoucang.png
Normal file
|
After Width: | Height: | Size: 484 B |
BIN
src/assets/image/faceteach/course.png
Normal file
|
After Width: | Height: | Size: 852 B |
BIN
src/assets/image/faceteach/download.png
Normal file
|
After Width: | Height: | Size: 708 B |
BIN
src/assets/image/faceteach/livelecturer.png
Normal file
|
After Width: | Height: | Size: 1.0 KiB |
BIN
src/assets/image/faceteach/position.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/image/faceteach/time.png
Normal file
|
After Width: | Height: | Size: 968 B |
BIN
src/assets/image/file/excel.png
Normal file
|
After Width: | Height: | Size: 885 B |
BIN
src/assets/image/file/md.png
Normal file
|
After Width: | Height: | Size: 638 B |
BIN
src/assets/image/file/pdf.png
Normal file
|
After Width: | Height: | Size: 884 B |
BIN
src/assets/image/file/ppt.png
Normal file
|
After Width: | Height: | Size: 753 B |
BIN
src/assets/image/file/word.png
Normal file
|
After Width: | Height: | Size: 877 B |
BIN
src/assets/image/file/zip.png
Normal file
|
After Width: | Height: | Size: 752 B |
BIN
src/assets/image/filestorag/excel.png
Normal file
|
After Width: | Height: | Size: 758 B |
BIN
src/assets/image/filestorag/md.png
Normal file
|
After Width: | Height: | Size: 729 B |
BIN
src/assets/image/filestorag/pdf.png
Normal file
|
After Width: | Height: | Size: 642 B |
BIN
src/assets/image/filestorag/ppt.png
Normal file
|
After Width: | Height: | Size: 671 B |
BIN
src/assets/image/filestorag/rar.png
Normal file
|
After Width: | Height: | Size: 615 B |
BIN
src/assets/image/filestorag/word.png
Normal file
|
After Width: | Height: | Size: 650 B |
BIN
src/assets/image/filestorag/zip.png
Normal file
|
After Width: | Height: | Size: 551 B |
BIN
src/assets/image/homeworkpage/bacc.png
Normal file
|
After Width: | Height: | Size: 4.0 KiB |
BIN
src/assets/image/homeworkpage/cycle.png
Normal file
|
After Width: | Height: | Size: 826 B |
BIN
src/assets/image/homeworkpage/delete.png
Normal file
|
After Width: | Height: | Size: 676 B |
BIN
src/assets/image/homeworkpage/link.png
Normal file
|
After Width: | Height: | Size: 922 B |
BIN
src/assets/image/homeworkpage/next.png
Normal file
|
After Width: | Height: | Size: 655 B |
BIN
src/assets/image/homeworkpage/pre.png
Normal file
|
After Width: | Height: | Size: 656 B |
BIN
src/assets/image/homeworkpage/rar.png
Normal file
|
After Width: | Height: | Size: 590 B |
BIN
src/assets/image/img.jpg
Normal file
|
After Width: | Height: | Size: 150 KiB |
13
src/assets/image/index.js
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
const Images = {
|
||||||
|
//选择按钮
|
||||||
|
checkboxImg: require('./checkbox.png'),
|
||||||
|
checkbox2Img: require('./checkbox2.png'),
|
||||||
|
zipImg: require('./filestorag/zip.png'),
|
||||||
|
excelImg: require('./filestorag/excel.png'),
|
||||||
|
mdImg: require('./filestorag/md.png'),
|
||||||
|
pdfImg: require('./filestorag/pdf.png'),
|
||||||
|
pptImg: require('./filestorag/ppt.png'),
|
||||||
|
rarImg: require('./filestorag/rar.png'),
|
||||||
|
wordImg: require('./filestorag/word.png'),
|
||||||
|
}
|
||||||
|
export default Images
|
||||||
BIN
src/assets/image/investigat/checkbox.png
Normal file
|
After Width: | Height: | Size: 734 B |
BIN
src/assets/image/investigat/checkbox2.png
Normal file
|
After Width: | Height: | Size: 620 B |
BIN
src/assets/image/liveboradcast/cha.png
Normal file
|
After Width: | Height: | Size: 270 B |
BIN
src/assets/image/liveboradcast/class.png
Normal file
|
After Width: | Height: | Size: 475 B |
BIN
src/assets/image/liveboradcast/next.png
Normal file
|
After Width: | Height: | Size: 571 B |
BIN
src/assets/image/liveboradcast/notic.png
Normal file
|
After Width: | Height: | Size: 546 B |
BIN
src/assets/image/liveboradcast/pre.png
Normal file
|
After Width: | Height: | Size: 572 B |
BIN
src/assets/image/liveboradcast/px.jpg
Normal file
|
After Width: | Height: | Size: 40 KiB |
BIN
src/assets/image/liveboradcast/time.png
Normal file
|
After Width: | Height: | Size: 546 B |
BIN
src/assets/image/liveboradcast/toright.png
Normal file
|
After Width: | Height: | Size: 262 B |
BIN
src/assets/image/liveboradcast/tv.png
Normal file
|
After Width: | Height: | Size: 536 B |
BIN
src/assets/image/liveboradcast/write.png
Normal file
|
After Width: | Height: | Size: 1.0 KiB |
BIN
src/assets/image/logo.png
Normal file
|
After Width: | Height: | Size: 6.7 KiB |
BIN
src/assets/image/medal/medal1.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/image/medal/medal2.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/image/medal/medal3.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/image/next.png
Normal file
|
After Width: | Height: | Size: 571 B |
BIN
src/assets/image/pathmap/btn.png
Normal file
|
After Width: | Height: | Size: 208 B |
BIN
src/assets/image/pathmap/close.png
Normal file
|
After Width: | Height: | Size: 270 B |
BIN
src/assets/image/pathmap/firstclass.png
Normal file
|
After Width: | Height: | Size: 7.9 KiB |
BIN
src/assets/image/pathmap/nostart.png
Normal file
|
After Width: | Height: | Size: 3.7 KiB |
BIN
src/assets/image/pathmap/personal.png
Normal file
|
After Width: | Height: | Size: 528 B |
BIN
src/assets/image/pathmap/photo.png
Normal file
|
After Width: | Height: | Size: 5.9 KiB |
BIN
src/assets/image/pathmap/secondclass.png
Normal file
|
After Width: | Height: | Size: 7.1 KiB |
BIN
src/assets/image/pathmap/study.png
Normal file
|
After Width: | Height: | Size: 521 B |
BIN
src/assets/image/pre.png
Normal file
|
After Width: | Height: | Size: 572 B |
BIN
src/assets/image/readyexamination/sandclock.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/image/readyexamination/smile.png
Normal file
|
After Width: | Height: | Size: 722 B |
BIN
src/assets/image/readyexamination/time.png
Normal file
|
After Width: | Height: | Size: 968 B |
BIN
src/assets/image/titleBg.png
Normal file
|
After Width: | Height: | Size: 136 KiB |
65
src/assets/scss/common.scss
Normal 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,14 @@
|
|||||||
|
import { createStore } from 'vuex'
|
||||||
|
|
||||||
|
export default createStore({
|
||||||
|
state: {
|
||||||
|
},
|
||||||
|
getters: {
|
||||||
|
},
|
||||||
|
mutations: {
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
},
|
||||||
|
modules: {
|
||||||
|
}
|
||||||
|
})
|
||||||
179
src/views/activities/ActivitiesPage.vue
Normal file
@@ -0,0 +1,179 @@
|
|||||||
|
<template>
|
||||||
|
<div class="activities">
|
||||||
|
<div class="main">
|
||||||
|
<div class="notice">
|
||||||
|
<span class="text"
|
||||||
|
>请各位选课的同学提前阅读本课程的“教学大纲与计划请各位选课的同学提前阅读本课程的“教学大纲与计划</span
|
||||||
|
>
|
||||||
|
<span class="close"></span>
|
||||||
|
</div>
|
||||||
|
<div class="title">
|
||||||
|
<div class="titlemain">
|
||||||
|
<div class="timeposition">
|
||||||
|
<div
|
||||||
|
calss="titlecontent"
|
||||||
|
style="
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 21.6px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
管理者进阶腾飞班 - 专属线下活动
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
<el-button class="titlebtn" @click="open">签到</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="details">
|
||||||
|
<div class="details_title">活动详情</div>
|
||||||
|
<div class="details_content">
|
||||||
|
大族广场写字楼采用国际顶级硬件设施，美国OTIS电梯、麦克维尔中央空调、高端安防系统等商务空间新标准匹配项目在亦庄地标综合体的形象。写字楼空间设计由亚洲著名的室内空间设计大师之一梁景华设计，写字楼群由六栋(T1—T6)呈舰队排列的5A写字楼构成形成独特的舰队造型。<br />购物中心介绍<br />大族广场Mall&More位于北京经济技术开发区核心商圈荣华路，由荷兰鹿特丹缤纷市场设计师HANS
|
||||||
|
VAN DALEN
|
||||||
|
主持设计,秉持自然与未来和谐共生理念,倡导乐活、有机、绿色环保的生活方式,传递生活美学。<br />大族广场Mall&More汇集众多知名优质品牌,7FRESH生鲜超市、CGV星聚汇影城、中信书店、源力悦体等,集购物、餐饮娱乐、文化于一体,丰富的业态品类为消费者提供城市生活的第三空间感受。<br />大族广场Mall&More以人为本,不断提升服务水平,升级消费购物体验,致力于营造更加舒适的购物环境与空间,打造有温度的品牌。同时根据春夏秋冬四季策划丰富多样的大型主题活动；为会员设置专属的沙龙活动，打造专属会员日等
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import { reactive, toRefs } from "vue";
|
||||||
|
//import TitleHead from "@/components/TitleHead.vue";
|
||||||
|
export default {
|
||||||
|
name: "ActivitiesPage",
|
||||||
|
components: {
|
||||||
|
//TitleHead,
|
||||||
|
},
|
||||||
|
setup() {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.activities {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.main {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
//margin-top: -14.5px;
|
||||||
|
.notice {
|
||||||
|
background-color: rgba(255, 251, 238, 1);
|
||||||
|
width: 100%;
|
||||||
|
height: 25px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
.text {
|
||||||
|
//display: flex;
|
||||||
|
height: 25px;
|
||||||
|
//position: absolute;
|
||||||
|
color: rgba(255, 158, 0, 1);
|
||||||
|
padding: 6px 41px 6.5px 15.5px;
|
||||||
|
font-size: 12px;
|
||||||
|
//line-height: 24px;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.close {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 9.5px;
|
||||||
|
height: 9.5px;
|
||||||
|
background-image: url(../../assets/image/pathmap/close.png);
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-right: 16px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
//height: 74px;
|
||||||
|
//border-radius: 4px;
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.titlemain {
|
||||||
|
width: 90%;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.timeposition {
|
||||||
|
.time {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.titlebtn {
|
||||||
|
width: 83px;
|
||||||
|
height: 33px;
|
||||||
|
background: rgba(0, 150, 250, 1);
|
||||||
|
//box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
||||||
|
border-radius: 6px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.details {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 11.5px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
padding-bottom: 20px;
|
||||||
|
.details_title {
|
||||||
|
width: 90%;
|
||||||
|
display: flex;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 12px;
|
||||||
|
color: rgba(13, 35, 58, 1);
|
||||||
|
padding: 17px 0 17px 0px;
|
||||||
|
border-bottom: 0.5px solid rgba(241, 242, 243, 1);
|
||||||
|
}
|
||||||
|
.details_content {
|
||||||
|
display: flex;
|
||||||
|
width: 90%;
|
||||||
|
margin-top: 15px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: rgba(110, 123, 132, 1);
|
||||||
|
line-height: 30.29px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
315
src/views/ballotpage/BallotPage.vue
Normal file
@@ -0,0 +1,315 @@
|
|||||||
|
<template>
|
||||||
|
<div class="ballotpage">
|
||||||
|
<!-- <TitleHead text="【投票】管理者进阶腾飞班 - 授课方式"></TitleHead> -->
|
||||||
|
|
||||||
|
<div class="notice">
|
||||||
|
<div class="noticebox">
|
||||||
|
<div class="mani">
|
||||||
|
<div class="joininfo" style="margin-left: -8px">
|
||||||
|
【投票】管理者进阶腾飞班 - 授课方式
|
||||||
|
</div>
|
||||||
|
<div class="contenttitle">
|
||||||
|
<img class="timeimg" src="../../assets/image/ballotpage/time.png" />
|
||||||
|
<div class="timee">2022-07-20 20:00-21:00</div>
|
||||||
|
</div>
|
||||||
|
<div class="timebox">
|
||||||
|
<div class="samez" style="margin-left: 18px">00</div>
|
||||||
|
<div class="samey">时</div>
|
||||||
|
<div class="samez">00</div>
|
||||||
|
<div class="samey">分</div>
|
||||||
|
<div class="samez">00</div>
|
||||||
|
<div class="samey">秒</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="notice">
|
||||||
|
<div class="noticebox">
|
||||||
|
<div class="mani">
|
||||||
|
<div class="joininfo">参与情况</div>
|
||||||
|
<div class="line"></div>
|
||||||
|
<div class="contentone">
|
||||||
|
<div class="same ba">
|
||||||
|
<div class="samenum" style="color: #089dff">123</div>
|
||||||
|
<div class="samego">参与数</div>
|
||||||
|
</div>
|
||||||
|
<div class="same bt">
|
||||||
|
<div class="samenum" style="color: #387df7">123</div>
|
||||||
|
<div class="samego">总票数</div>
|
||||||
|
</div>
|
||||||
|
<div class="same bh">
|
||||||
|
<div class="samenum" style="color: #00c1fc">123</div>
|
||||||
|
<div class="samego">浏览数</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="notice">
|
||||||
|
<div class="noticebox">
|
||||||
|
<div class="mani">
|
||||||
|
<div class="joininfo">投票说明</div>
|
||||||
|
<div class="line"></div>
|
||||||
|
<div class="contentone">
|
||||||
|
<div class="ballotdetail">
|
||||||
|
为提高核心项目讲解体验，现向广大学员征集较为接受的授课方式
|
||||||
|
，每位学员可投票2个选项，我们将选取最高选项的两个做后续讲解。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="notice">
|
||||||
|
<div class="noticebox">
|
||||||
|
<div class="mani">
|
||||||
|
<div class="joininfo">参加投票</div>
|
||||||
|
<div class="line"></div>
|
||||||
|
<div class="contentone">
|
||||||
|
<div class="ballotjoincontainer">
|
||||||
|
<div class="ballotjoin">
|
||||||
|
<div
|
||||||
|
class="ballotitem"
|
||||||
|
v-for="(item, index) in ballot"
|
||||||
|
:key="item.id"
|
||||||
|
>
|
||||||
|
<div class="upitem">
|
||||||
|
<div class="left">
|
||||||
|
<img
|
||||||
|
class="leftimg"
|
||||||
|
src="../../assets/image/ballotpage/left.png"
|
||||||
|
/>
|
||||||
|
<div class="leftcontent">{{ item.content }}</div>
|
||||||
|
</div>
|
||||||
|
<button class="btn" @click="getId(item.id)">投票</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
:class="index === ballot.length - 1 ? null : 'thinline'"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { reactive, toRefs } from "vue";
|
||||||
|
// import TitleHead from "@/components/TitleHead.vue";
|
||||||
|
export default {
|
||||||
|
name: "BallotPage",
|
||||||
|
components: {
|
||||||
|
// TitleHead,
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const state = reactive({
|
||||||
|
ballot: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
content: "录播课",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
content: "PPT+配音",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
content: "HTML5",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
content: "OTHER",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
const getId = (id) => {
|
||||||
|
console.log(id);
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
getId,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
<style lang="scss">
|
||||||
|
.clearfix:before,
|
||||||
|
.clearfix:after {
|
||||||
|
content: " ";
|
||||||
|
display: table;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.ballotpage {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.notice {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
// margin-top: -17.5px;
|
||||||
|
margin-top: 20px;
|
||||||
|
.noticebox {
|
||||||
|
width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
// border-radius: 4px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.line {
|
||||||
|
width: 100%;
|
||||||
|
height: 0;
|
||||||
|
border-top: 1px solid #f1f2f3;
|
||||||
|
margin-top: 17px;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.mani {
|
||||||
|
width: 90%;
|
||||||
|
margin-top: 20px;
|
||||||
|
// position:relative;
|
||||||
|
.joininfo {
|
||||||
|
color: #0d233a;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.samenum {
|
||||||
|
margin-top: 18.5px;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
}
|
||||||
|
.samego {
|
||||||
|
margin-top: 45px;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 13px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
}
|
||||||
|
.contenttitle {
|
||||||
|
width: 100%;
|
||||||
|
// height:10px;
|
||||||
|
margin-top: 15px;
|
||||||
|
// background-color: #bfa;
|
||||||
|
display: flex;
|
||||||
|
.timeimg {
|
||||||
|
width: 12.8px;
|
||||||
|
height: 13px;
|
||||||
|
}
|
||||||
|
.timee {
|
||||||
|
color: #6e7b84;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 13px;
|
||||||
|
margin-left: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.timebox {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 49px;
|
||||||
|
background-color: #f2f5f7;
|
||||||
|
margin-top: 17.5px;
|
||||||
|
margin-bottom: 27.5px;
|
||||||
|
border-radius: 10px;
|
||||||
|
.samez {
|
||||||
|
color: #0060ff;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 49px;
|
||||||
|
margin-left: 13px;
|
||||||
|
}
|
||||||
|
.samey {
|
||||||
|
color: #6e7b84;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 49px;
|
||||||
|
|
||||||
|
margin-left: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.contentone {
|
||||||
|
margin-top: 43px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
// height: 200px;
|
||||||
|
.same {
|
||||||
|
position: relative;
|
||||||
|
width: 108px;
|
||||||
|
height: 75px;
|
||||||
|
// background-color: red;
|
||||||
|
}
|
||||||
|
.ba {
|
||||||
|
background-image: url(../../assets/image/ballotpage/baccone.png);
|
||||||
|
}
|
||||||
|
.bt {
|
||||||
|
background-image: url(../../assets/image/ballotpage/bacctwo.png);
|
||||||
|
}
|
||||||
|
.bh {
|
||||||
|
background-image: url(../../assets/image/ballotpage/baccthr.png);
|
||||||
|
}
|
||||||
|
.ballotdetail {
|
||||||
|
color: #6e7b84;
|
||||||
|
line-height: 30px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.ballotjoincontainer {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
.ballotjoin {
|
||||||
|
width: 85%;
|
||||||
|
// height:100px;
|
||||||
|
// background-color: #bfa;
|
||||||
|
.ballotitem {
|
||||||
|
.upitem {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.left {
|
||||||
|
display: flex;
|
||||||
|
.leftimg {
|
||||||
|
width: 4.5px;
|
||||||
|
height: 14.5px;
|
||||||
|
margin-top: 1px;
|
||||||
|
}
|
||||||
|
.leftcontent {
|
||||||
|
margin-left: 9px;
|
||||||
|
color: #6e7b84;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 30px;
|
||||||
|
margin-top: -5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
background-color: #2478ff;
|
||||||
|
color: #fff;
|
||||||
|
width: 64px;
|
||||||
|
height: 21px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 0;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 19px;
|
||||||
|
margin-top: -1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.thinline {
|
||||||
|
width: 100%;
|
||||||
|
border-top: 1px solid #f1f2f3;
|
||||||
|
margin-top: 17px;
|
||||||
|
margin-bottom: 17px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
557
src/views/discuss/DiscussDetail.vue
Normal file
@@ -0,0 +1,557 @@
|
|||||||
|
<template>
|
||||||
|
<div class="discussdetail">
|
||||||
|
<!-- <TitleHead text="【直播】管理者进阶腾飞班 - 毕业典礼"></TitleHead> -->
|
||||||
|
|
||||||
|
<div class="tithead">
|
||||||
|
<div class="headin">
|
||||||
|
<div class="vaa">
|
||||||
|
<img class="vaaimg" src="../../assets/image/discuss/px.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class="vaainfo">
|
||||||
|
<div class="vaana">付欣晴</div>
|
||||||
|
<div class="vaanato">认识事物的本质。</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="preview">
|
||||||
|
<div class="previewbox">
|
||||||
|
<div class="previewmani">
|
||||||
|
<div class="alltalkcontainer">
|
||||||
|
<div class="inne">
|
||||||
|
<div class="takltitle">从营销角度分析：我的团队需要这些能力</div>
|
||||||
|
<div class="taklcon">
|
||||||
|
所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说，不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力。
|
||||||
|
</div>
|
||||||
|
<div class="tt clearfix">
|
||||||
|
<div class="ttin">
|
||||||
|
请基于公司战略方向和你所负责的组织业务发展，识别3个你和你的团队在未来3年的新的能力与技能要求
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="botime">2022-08-15 22:28</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="restore">
|
||||||
|
<div class="reshead">
|
||||||
|
<div class="headn">
|
||||||
|
<div class="pl">评论</div>
|
||||||
|
<div class="ts">1992条</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="linee"></div>
|
||||||
|
|
||||||
|
<div class="restorebox">
|
||||||
|
<div class="restoremani">
|
||||||
|
<div
|
||||||
|
class="rescon clearfix"
|
||||||
|
v-for="(item, index) in restore"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<div class="head">
|
||||||
|
<div>
|
||||||
|
<img class="headavator" :src="item.head" />
|
||||||
|
</div>
|
||||||
|
<div class="namehead">
|
||||||
|
{{ item.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="inner">
|
||||||
|
<div class="recon">{{ item.re }}</div>
|
||||||
|
<div class="botto">
|
||||||
|
<div class="time">{{ item.time }}</div>
|
||||||
|
<div class="re">回复</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="good">
|
||||||
|
<img src="../../assets/image/discuss/elsedianzan.png" />
|
||||||
|
</div>
|
||||||
|
<div class="gocount">67</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="newre">
|
||||||
|
<div class="tri"></div>
|
||||||
|
<div class="reccon">
|
||||||
|
<div class="rec clearfix">
|
||||||
|
<div
|
||||||
|
class="it"
|
||||||
|
v-for="(itemc, index) in newrestore"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<div class="ava">
|
||||||
|
<img class="avainner" :src="itemc.head" />
|
||||||
|
</div>
|
||||||
|
<div class="redetail">
|
||||||
|
<div class="rename">{{ itemc.name }}</div>
|
||||||
|
<div class="rein">{{ itemc.re }}</div>
|
||||||
|
<div class="detre">
|
||||||
|
<div class="day">{{ itemc.time }}</div>
|
||||||
|
<div class="huifu">回复</div>
|
||||||
|
<div class="good">
|
||||||
|
<img
|
||||||
|
class="gimg"
|
||||||
|
src="../../assets/image/discuss/elsedianzan.png"
|
||||||
|
/>
|
||||||
|
<div class="gcou">0</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="line"></div> -->
|
||||||
|
<div
|
||||||
|
:class="index === newrestore.length - 1 ? null : 'line'"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btncon clearfix">
|
||||||
|
<button class="btnn">查看全部14条评论</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 重复上述 -->
|
||||||
|
<div class="linee"></div>
|
||||||
|
<div class="restorebox">
|
||||||
|
<div class="restoremani">
|
||||||
|
<div
|
||||||
|
class="rescon clearfix"
|
||||||
|
style="margin-bottom: 20px"
|
||||||
|
v-for="(item, index) in restore"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<div class="head">
|
||||||
|
<div>
|
||||||
|
<img class="headavator" :src="item.head" />
|
||||||
|
</div>
|
||||||
|
<div class="namehead">
|
||||||
|
{{ item.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="inner">
|
||||||
|
<div class="recon">{{ item.re }}</div>
|
||||||
|
<div class="botto">
|
||||||
|
<div class="time">{{ item.time }}</div>
|
||||||
|
<div class="re">回复</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="good">
|
||||||
|
<img src="../../assets/image/discuss/elsedianzan.png" />
|
||||||
|
</div>
|
||||||
|
<div class="gocount">67</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { reactive, toRefs } from "vue";
|
||||||
|
// import TitleHead from "@/components/TitleHead.vue";
|
||||||
|
export default {
|
||||||
|
name: "DiscussDetail",
|
||||||
|
components: {
|
||||||
|
// TitleHead,
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const state = reactive({
|
||||||
|
restore: [
|
||||||
|
{
|
||||||
|
name: "罗宗梅",
|
||||||
|
time: "2022-09-01",
|
||||||
|
re: "教师基本功扎实，知识讲解准确，教学设计合理，始终以学生为主体，自主学习，小组交流讨论，上台交流展示等形式，师生配合默契，取得了较好的学习效果。",
|
||||||
|
head: require("../../assets/image/discuss/px.jpg"),
|
||||||
|
reimg: require("../../assets/image/discuss/px.jpg"),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
newrestore: [
|
||||||
|
{
|
||||||
|
name: "赵雪梨",
|
||||||
|
time: "3天前",
|
||||||
|
re: "教学重难点突出，板书条理清晰。教学步骤设计合理由浅入深，循序渐进。",
|
||||||
|
head: require("../../assets/image/discuss/px.jpg"),
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// name: "赵雪梨",
|
||||||
|
// time: "三天前",
|
||||||
|
// re: "教学重难点突出，板书条理清晰。教学步骤设计合理由浅入深，循序渐进。",
|
||||||
|
// head: require("../../assets/image/discuss/px.jpg"),
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
<style lang="scss">
|
||||||
|
.clearfix:before,
|
||||||
|
.clearfix:after {
|
||||||
|
content: " ";
|
||||||
|
display: table;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.discussdetail {
|
||||||
|
width: 100%;
|
||||||
|
.tithead {
|
||||||
|
margin-top: 20px;
|
||||||
|
height: 77px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #fff;
|
||||||
|
.headin {
|
||||||
|
width: 90%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
// background-color: lightcoral;
|
||||||
|
.vaa {
|
||||||
|
margin-top: 22px;
|
||||||
|
.vaaimg {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.vaainfo {
|
||||||
|
margin-left: 8px;
|
||||||
|
margin-top: 16.5px;
|
||||||
|
.vaana {
|
||||||
|
color: #0d233a;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.vaanato {
|
||||||
|
margin-top: 4px;
|
||||||
|
color: #747474;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preview {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
.previewbox {
|
||||||
|
width: 100%;
|
||||||
|
// height: 200px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.previewmani {
|
||||||
|
width: 90%;
|
||||||
|
|
||||||
|
// .discusstitle {
|
||||||
|
// width: 100%;
|
||||||
|
// margin-top: 15px;
|
||||||
|
// background-color: #f9f9f9;
|
||||||
|
// // height: 20px;
|
||||||
|
// display: flex;
|
||||||
|
// justify-content: center;
|
||||||
|
// .titcon {
|
||||||
|
// margin-top: 11px;
|
||||||
|
// width: 95%;
|
||||||
|
// display: flex;
|
||||||
|
// justify-content: space-between;
|
||||||
|
// .maint {
|
||||||
|
// color: #333330;
|
||||||
|
// font-size: 14px;
|
||||||
|
// line-height: 24px;
|
||||||
|
// font-weight: bold;
|
||||||
|
// width: 100%;
|
||||||
|
// margin-bottom: 16px;
|
||||||
|
// }
|
||||||
|
// .intime {
|
||||||
|
// display: flex;
|
||||||
|
// margin-top: 2px;
|
||||||
|
// .yuna {
|
||||||
|
// margin-top: 4px;
|
||||||
|
// width: 10px;
|
||||||
|
// height: 10px;
|
||||||
|
// border-radius: 50%;
|
||||||
|
// border: 1px solid #0060ff;
|
||||||
|
// }
|
||||||
|
// .in {
|
||||||
|
// margin-left: 3px;
|
||||||
|
// color: #0060ff;
|
||||||
|
// font-size: 14px;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
.alltalkcontainer {
|
||||||
|
width: 100%;
|
||||||
|
// background-color: #bfa;
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.inne {
|
||||||
|
width: 95%;
|
||||||
|
.takltitle {
|
||||||
|
color: #04243c;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.taklcon {
|
||||||
|
color: #333330;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
.tt {
|
||||||
|
margin-top: 20px;
|
||||||
|
background-color: #f0f3f6;
|
||||||
|
border-radius: 10px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.ttin {
|
||||||
|
width: 90%;
|
||||||
|
margin-top: 25px;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 24px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.botime {
|
||||||
|
width: 100%;
|
||||||
|
text-align: right;
|
||||||
|
color: #6e7b84;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 24px;
|
||||||
|
margin: 16.5px 0 18.5px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.restore {
|
||||||
|
width: 100%;
|
||||||
|
// display: flex;
|
||||||
|
// justify-content: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
background: #fff;
|
||||||
|
.reshead {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
height: 50px;
|
||||||
|
.headn {
|
||||||
|
width: 90%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.pl {
|
||||||
|
color: #0d233a;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 50px;
|
||||||
|
}
|
||||||
|
.ts {
|
||||||
|
color: #6e7b84;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.linee {
|
||||||
|
height: 0;
|
||||||
|
width: 100%;
|
||||||
|
border-top: 1px solid #f1f2f3;
|
||||||
|
}
|
||||||
|
.restorebox {
|
||||||
|
width: 100%;
|
||||||
|
// height: 200px;
|
||||||
|
|
||||||
|
border-radius: 4px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.restoremani {
|
||||||
|
width: 90%;
|
||||||
|
margin-top: 17px;
|
||||||
|
position: relative;
|
||||||
|
.rescon {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
// height: 100px;
|
||||||
|
// background-color: #bfa;
|
||||||
|
.head {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
.headavator {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.namehead {
|
||||||
|
margin-left: 5px;
|
||||||
|
color: #02172a;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 36px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.inner {
|
||||||
|
margin-top: 8px;
|
||||||
|
margin-left: 36px;
|
||||||
|
|
||||||
|
.recon {
|
||||||
|
margin-top: 7px;
|
||||||
|
color: #5f6d75;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
.botto {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 20px;
|
||||||
|
position: relative;
|
||||||
|
.time {
|
||||||
|
color: #5f6d75;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-right: 16.5px;
|
||||||
|
}
|
||||||
|
.re {
|
||||||
|
color: #00152a;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-top: -2px;
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
.good {
|
||||||
|
margin-top: -2px;
|
||||||
|
}
|
||||||
|
.gocount {
|
||||||
|
color: #4e5e67;
|
||||||
|
font-size: 13px;
|
||||||
|
margin-left: 6.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.newre {
|
||||||
|
margin-top: 7.5px;
|
||||||
|
.tri {
|
||||||
|
margin-left: 80px;
|
||||||
|
height: 0px;
|
||||||
|
width: 0px;
|
||||||
|
border-bottom: 10px solid #f0f3f6;
|
||||||
|
border-left: 10px solid transparent;
|
||||||
|
border-right: 10px solid transparent;
|
||||||
|
}
|
||||||
|
.reccon {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: right;
|
||||||
|
.rec {
|
||||||
|
background-color: #f0f3f6;
|
||||||
|
border-radius: 13px;
|
||||||
|
width: 90%;
|
||||||
|
.it {
|
||||||
|
margin-left: 12.5px;
|
||||||
|
width: 92%;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 20px;
|
||||||
|
// margin-bottom: 20px;
|
||||||
|
.ava {
|
||||||
|
// margin-top: 20px;
|
||||||
|
.avainner {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.redetail {
|
||||||
|
margin-left: 12.5px;
|
||||||
|
.rename {
|
||||||
|
color: #02172a;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.rein {
|
||||||
|
color: #5f6d75;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-top: 16.5px;
|
||||||
|
}
|
||||||
|
.detre {
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
.day {
|
||||||
|
color: #5f6d75;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-right: 14px;
|
||||||
|
}
|
||||||
|
.huifu {
|
||||||
|
color: #00152a;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.good {
|
||||||
|
position: absolute;
|
||||||
|
right: 2px;
|
||||||
|
display: flex;
|
||||||
|
.gimg {
|
||||||
|
width: 14px;
|
||||||
|
height: 15px;
|
||||||
|
}
|
||||||
|
.gcou {
|
||||||
|
color: #4e5e67;
|
||||||
|
font-size: 13px;
|
||||||
|
margin-top: 2px;
|
||||||
|
margin-left: 7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.line {
|
||||||
|
// margin-top: 24.5px;
|
||||||
|
margin-left: -45px;
|
||||||
|
height: 0;
|
||||||
|
width: 117%;
|
||||||
|
border-top: 1px solid #dcdedf;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btncon {
|
||||||
|
width: 100%;
|
||||||
|
height: 60px;
|
||||||
|
position: relative;
|
||||||
|
.btnn {
|
||||||
|
margin-top: 30px;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
border: 0;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #2478ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||