mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git
synced 2025-12-06 09:26:46 +08:00
style:增加面授课及调研页面
This commit is contained in:
李晓鸽
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal 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
24
README.md
Normal file
@@ -0,0 +1,24 @@
|
||||
# jdfstudy
|
||||
|
||||
## 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
5
babel.config.js
Normal file
@@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
19
jsconfig.json
Normal file
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
19759
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
50
package.json
Normal file
50
package.json
Normal file
@@ -0,0 +1,50 @@
|
||||
{
|
||||
"name": "jdfstudy",
|
||||
"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.16",
|
||||
"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
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
18
public/index.html
Normal file
18
public/index.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<!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> -->
|
||||
<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>
|
||||
66
src/App.vue
Normal file
66
src/App.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<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;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
color: #2c3e50;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 30px;
|
||||
box-sizing: border-box;
|
||||
background-color: rgba(242, 245, 247, 1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/assets/image/checkbox.png
Normal file
BIN
src/assets/image/checkbox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 734 B |
BIN
src/assets/image/checkbox2.png
Normal file
BIN
src/assets/image/checkbox2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 620 B |
BIN
src/assets/image/course.png
Normal file
BIN
src/assets/image/course.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 602 B |
BIN
src/assets/image/download.png
Normal file
BIN
src/assets/image/download.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 457 B |
BIN
src/assets/image/file/excel.png
Normal file
BIN
src/assets/image/file/excel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 885 B |
BIN
src/assets/image/file/ppt.png
Normal file
BIN
src/assets/image/file/ppt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 753 B |
BIN
src/assets/image/file/word.png
Normal file
BIN
src/assets/image/file/word.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 877 B |
BIN
src/assets/image/img.jpg
Normal file
BIN
src/assets/image/img.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
BIN
src/assets/image/livelecturer.png
Normal file
BIN
src/assets/image/livelecturer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 687 B |
BIN
src/assets/image/logo.png
Normal file
BIN
src/assets/image/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
src/assets/image/medal/medal1.png
Normal file
BIN
src/assets/image/medal/medal1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/image/medal/medal2.png
Normal file
BIN
src/assets/image/medal/medal2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/image/medal/medal3.png
Normal file
BIN
src/assets/image/medal/medal3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/image/next.png
Normal file
BIN
src/assets/image/next.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
src/assets/image/position.png
Normal file
BIN
src/assets/image/position.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 771 B |
BIN
src/assets/image/prev.png
Normal file
BIN
src/assets/image/prev.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 882 B |
BIN
src/assets/image/time.png
Normal file
BIN
src/assets/image/time.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
7
src/assets/scss/common.scss
Normal file
7
src/assets/scss/common.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
html,
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
// overflow-y: auto;
|
||||
}
|
||||
13
src/main.js
Normal file
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
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
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
14
src/store/index.js
Normal file
@@ -0,0 +1,14 @@
|
||||
import { createStore } from 'vuex'
|
||||
|
||||
export default createStore({
|
||||
state: {
|
||||
},
|
||||
getters: {
|
||||
},
|
||||
mutations: {
|
||||
},
|
||||
actions: {
|
||||
},
|
||||
modules: {
|
||||
}
|
||||
})
|
||||
487
src/views/faceteach/FaceTeach.vue
Normal file
487
src/views/faceteach/FaceTeach.vue
Normal file
@@ -0,0 +1,487 @@
|
||||
<template>
|
||||
<div class="faceteach">
|
||||
<!-- 面包屑导航 -->
|
||||
<div class="crumb">
|
||||
<div>课程列表</div>
|
||||
<div style="margin-left: 6px; margin-right: 6px">/</div>
|
||||
<div style="font-weight: 700">课程详情</div>
|
||||
</div>
|
||||
<!-- 面包屑导航 -->
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div class="bascinfo">
|
||||
<div style="margin-left: 46px">
|
||||
<div class="title">【其他活动】核心项目面授课</div>
|
||||
<div class="time" style="margin-top: 26px">
|
||||
<img width="15px" height="17px" src="../../assets/image/time.png" />
|
||||
<div style="margin-left: 8px">2022-07-20 20:00-21:00</div>
|
||||
</div>
|
||||
<div class="time" style="margin-top: 23px">
|
||||
<img
|
||||
width="16px"
|
||||
height="18px"
|
||||
src="../../assets/image/position.png"
|
||||
/>
|
||||
<div style="margin-left: 8px">大族广场</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn">评估</div>
|
||||
</div>
|
||||
<!-- 基本信息 -->
|
||||
|
||||
<!-- 详细信息 -->
|
||||
<div class="detailinfo">
|
||||
<div class="detail">
|
||||
<div class="detailT">
|
||||
<div class="" style="margin-left: 48px; margin-right: 48px">
|
||||
<div class="title">
|
||||
<img
|
||||
width="20px"
|
||||
height="20px"
|
||||
src="../../assets/image/course.png"
|
||||
/>
|
||||
<div class="text">课程详情</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center">
|
||||
<div class="content">
|
||||
通过对各级人员的软件平台培训，使其能够了解如何运用乾元坤和智能信息管理系统来提升企业管理水平，最大限度发挥软件产品在企业中的作用。<br />
|
||||
1.使企业不同部门人员掌握便捷、有效的系统平台操作方法;<br />
|
||||
2.通过系统平台的培训提高员工对企业的管理理念认识与提升。<br />
|
||||
3.通过系统平台培训加强沟通，统一部署，协同工作，提高效率。<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detailB">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="课程附件" name="first">
|
||||
<div
|
||||
v-for="(el, index) in enclosure"
|
||||
:key="el.id"
|
||||
class="enclosure"
|
||||
:style="{
|
||||
'border-bottom':
|
||||
index === enclosure.length - 1
|
||||
? null
|
||||
: '1px solid rgba(56, 125, 247, 0.2)',
|
||||
}"
|
||||
>
|
||||
<div class="enclosureL">
|
||||
<img
|
||||
style="width: 22px; height: 26px; margin-left: 10px"
|
||||
:src="el.img"
|
||||
/>
|
||||
<div style="margin-left: 20px">{{ el.name }}</div>
|
||||
</div>
|
||||
<div class="download">
|
||||
<img
|
||||
style="width: 16px; height: 15px"
|
||||
src="../../assets/image/download.png"
|
||||
/>
|
||||
<div style="margin-left: 5px">下载</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="课程作业" name="second">
|
||||
<div class="work">
|
||||
<div>
|
||||
<div class="question">社交产品如何做好模块化处理？</div>
|
||||
<div style="margin-top: 16px; display: flex">
|
||||
<div class="active">必修</div>
|
||||
<div class="unactive">作业</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="submit">提交</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="课程考试" name="third">
|
||||
<div class="work">
|
||||
<div>
|
||||
<div class="question">
|
||||
模块化产品展示相关案例与展示：如何自由组合你的思考？
|
||||
</div>
|
||||
<div style="margin-top: 16px; display: flex">
|
||||
<div class="active btncolor">必修</div>
|
||||
<div class="unactive bordercolor fontcolor">考试</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="submit">去考试</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<div class="teacher">
|
||||
<div class="title">
|
||||
<img
|
||||
style="width: 21px; height: 23px"
|
||||
src="../../assets/image/livelecturer.png"
|
||||
/>
|
||||
<div class="text">直播讲师</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
<div
|
||||
v-for="(el, index) in teacher"
|
||||
:key="el.id"
|
||||
class="teacheritem"
|
||||
:style="{
|
||||
'border-bottom':
|
||||
index === teacher.length - 1
|
||||
? null
|
||||
: '1px solid rgba(56, 125, 247, 0.2)',
|
||||
}"
|
||||
>
|
||||
<img class="peopleimg" :src="el.peopleimg" />
|
||||
<div style="margin-left: 17px">
|
||||
<div class="teacherName">
|
||||
<div style="margin-right: 5px">{{ el.name }}</div>
|
||||
<div v-for="(item, key) in el.medal" :key="key">
|
||||
<img class="teacherMedal" :src="item" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="introduce">{{ el.introduce }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 详细信息 -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive, toRefs } from "vue";
|
||||
export default {
|
||||
name: "FaceTeach",
|
||||
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 {
|
||||
.crumb {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.bascinfo {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
border-radius: 8px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
margin-top: 37px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.btn {
|
||||
width: 146px;
|
||||
height: 46px;
|
||||
background: #2478ff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
margin-right: 96px;
|
||||
}
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
color: #333333;
|
||||
line-height: 24px;
|
||||
margin-left: -9px;
|
||||
}
|
||||
.time {
|
||||
font-size: 14px;
|
||||
color: #6e7b84;
|
||||
line-height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.detailinfo {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
.detail {
|
||||
flex: 1;
|
||||
margin-right: 20px;
|
||||
.detailT {
|
||||
height: 263px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 39px;
|
||||
position: relative;
|
||||
}
|
||||
.title .text {
|
||||
margin-left: 8px;
|
||||
font-size: 16px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
font-weight: 800;
|
||||
}
|
||||
.title .box {
|
||||
width: 75px;
|
||||
height: 10px;
|
||||
background-color: rgba(36, 120, 255, 0.15);
|
||||
position: absolute;
|
||||
left: 23px;
|
||||
top: 53px;
|
||||
}
|
||||
.content {
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
color: rgba(51, 51, 48, 1);
|
||||
font-weight: 500;
|
||||
line-height: 35px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
.detailB {
|
||||
min-height: 363px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
margin-top: 20px;
|
||||
.el-tabs__item {
|
||||
height: 69px;
|
||||
padding: 25px 7px 0px 52px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.el-tabs__nav-wrap::after {
|
||||
background-color: rgba(56, 125, 247, 0.2);
|
||||
}
|
||||
.enclosure {
|
||||
height: 89px;
|
||||
margin-left: 51px;
|
||||
margin-right: 40px;
|
||||
// border-bottom: 1px solid rgba(56, 125, 247, 0.2);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.enclosureL {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #677d86;
|
||||
line-height: 24px;
|
||||
}
|
||||
.download {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #2478ff;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.work {
|
||||
margin-left: 51px;
|
||||
margin-right: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 37px;
|
||||
}
|
||||
.work .question {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333330;
|
||||
line-height: 18px;
|
||||
}
|
||||
.work .active {
|
||||
width: 82px;
|
||||
height: 28px;
|
||||
background: linear-gradient(90deg, #a5d4e0 0%, #b4dce6 100%);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
margin-right: 11px;
|
||||
}
|
||||
.work .unactive {
|
||||
width: 80px;
|
||||
height: 26px;
|
||||
border: 1px solid #a5d4e0;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #a5d4e0;
|
||||
line-height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 11px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.work .btncolor {
|
||||
background: linear-gradient(90deg, #84aad2 0%, #a4c5e9 100%);
|
||||
}
|
||||
.work .bordercolor {
|
||||
border: 1px solid #85aad2;
|
||||
}
|
||||
.work .fontcolor {
|
||||
color: rgba(133, 170, 210, 1);
|
||||
}
|
||||
.work .submit {
|
||||
width: 126px;
|
||||
height: 46px;
|
||||
background: #2478ff;
|
||||
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: #ffffff;
|
||||
line-height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.teacher {
|
||||
width: 434px;
|
||||
min-height: 557px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 8px;
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 39px;
|
||||
position: relative;
|
||||
margin-left: 48px;
|
||||
}
|
||||
.title .text {
|
||||
margin-left: 8px;
|
||||
font-size: 16px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
font-weight: 800;
|
||||
}
|
||||
.title .box {
|
||||
width: 75px;
|
||||
height: 10px;
|
||||
background-color: rgba(36, 120, 255, 0.15);
|
||||
position: absolute;
|
||||
left: 23px;
|
||||
top: 53px;
|
||||
}
|
||||
.teacheritem {
|
||||
margin-left: 48px;
|
||||
margin-right: 48px;
|
||||
// min-height: 115px;
|
||||
padding: 25px 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.teacheritem .peopleimg {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
.teacheritem .teacherName {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #394145;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 260px;
|
||||
}
|
||||
.teacheritem .teacherName .teacherMedal {
|
||||
width: 17px;
|
||||
height: 19px;
|
||||
margin-right: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.teacheritem .introduce {
|
||||
width: 260px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #394145;
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
307
src/views/survey/SurveyDetail.vue
Normal file
307
src/views/survey/SurveyDetail.vue
Normal file
@@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<div class="surveydetail">
|
||||
<!-- 面包屑导航 -->
|
||||
<div
|
||||
style="display: flex; align-items: center; justify-content: space-between"
|
||||
>
|
||||
<div class="crumb">
|
||||
<div>混合制项目</div>
|
||||
<div style="margin-left: 6px; margin-right: 6px">/</div>
|
||||
<div>管理者进阶-腾飞班</div>
|
||||
<div style="margin-left: 6px; margin-right: 6px">/</div>
|
||||
<div style="font-weight: 700; font-size: 16px">调研详情</div>
|
||||
</div>
|
||||
<div class="prevnext">
|
||||
<div class="prev">
|
||||
<img
|
||||
style="width: 23px; height: 23px"
|
||||
src="../../assets/image/prev.png"
|
||||
/>
|
||||
<div style="margin-left: 7px">上一个</div>
|
||||
</div>
|
||||
<div class="prev" style="margin-left: 31px">
|
||||
<div style="margin-right: 7px">下一个</div>
|
||||
<img
|
||||
style="width: 23px; height: 23px"
|
||||
src="../../assets/image/next.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 面包屑导航 -->
|
||||
<!-- 标题 -->
|
||||
<div class="title">【调研】管理者进阶腾飞班 - 培训阶段性调研</div>
|
||||
<!-- 标题 -->
|
||||
<!-- 基本信息 -->
|
||||
<div class="bascinfo">
|
||||
<div>
|
||||
<div
|
||||
class="question"
|
||||
v-for="(value, index) in question"
|
||||
:key="index"
|
||||
:style="{ 'margin-top': index === 0 ? '57px' : '41px' }"
|
||||
>
|
||||
<div class="text">{{ value.text }}</div>
|
||||
<div class="answer">
|
||||
<div class="answerL">完全没用</div>
|
||||
<div class="answerC">
|
||||
<div
|
||||
class="answerCitem"
|
||||
v-for="(item, key) in select"
|
||||
:key="key"
|
||||
:style="{
|
||||
'margin-left': key === 0 ? '15px' : '10px',
|
||||
background:
|
||||
value.selectAnswer === item
|
||||
? 'rgba(86, 163, 249, 1)'
|
||||
: 'rgba(86, 163, 249, 0)',
|
||||
color:
|
||||
value.selectAnswer === item
|
||||
? '#fff'
|
||||
: 'rgba(86, 163, 249, 1)',
|
||||
}"
|
||||
@click="score(value, item)"
|
||||
>
|
||||
<div>{{ item }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="answerR">非常有帮助/启发</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="question" style="margin-top: 41px">
|
||||
<div class="text">4.类似相应的课程，您认为适合哪些人观看？</div>
|
||||
<div
|
||||
v-for="(value, index) in viewpeople"
|
||||
:key="index"
|
||||
style="display: flex; align-items: center"
|
||||
:style="{ 'margin-top': index === 0 ? '29px' : '22px' }"
|
||||
@click="selectPeople(value)"
|
||||
>
|
||||
<img
|
||||
style="width: 19px; height: 18px; cursor: pointer"
|
||||
:src="
|
||||
value.select
|
||||
? require('../../assets/image/checkbox.png')
|
||||
: require('../../assets/image/checkbox2.png')
|
||||
"
|
||||
/>
|
||||
<div class="people">{{ value.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="question" style="margin-top: 41px">
|
||||
<div class="text">5.您的其他意见</div>
|
||||
<div style="width: 713px; margin-top: 31px; position: relative">
|
||||
<el-input
|
||||
v-model="textarea1"
|
||||
:autosize="{ minRows: 5, maxRows: 5 }"
|
||||
resize="none"
|
||||
maxlength="200"
|
||||
type="textarea"
|
||||
@input="textareaInput"
|
||||
/>
|
||||
<div class="words">{{ textarealength }}/200</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center">
|
||||
<div class="submit">提交</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 基本信息 -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { reactive, toRefs } from "vue";
|
||||
export default {
|
||||
name: "SurveyDetail",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
question: [
|
||||
{
|
||||
id: 1,
|
||||
text: "1.您觉得课程对您是否有用？",
|
||||
selectAnswer: 0,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
text: "2.您是否会推荐课程给其他同事？",
|
||||
selectAnswer: 0,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
text: "3.后续该讲师有其他课程是否会参与？",
|
||||
selectAnswer: 0,
|
||||
},
|
||||
],
|
||||
select: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
|
||||
viewpeople: [
|
||||
{
|
||||
id: 1,
|
||||
text: "基础员工",
|
||||
select: false,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
text: "中层管理",
|
||||
select: false,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
text: "专业人员",
|
||||
select: false,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
text: "高级管理",
|
||||
select: false,
|
||||
},
|
||||
],
|
||||
textarea1: "",
|
||||
textarealength: 0,
|
||||
});
|
||||
const score = (value, item) => {
|
||||
let arr = state.question;
|
||||
arr.map((i) => {
|
||||
if (i.id === value.id) {
|
||||
i.selectAnswer = item;
|
||||
}
|
||||
});
|
||||
state.question = arr;
|
||||
};
|
||||
const selectPeople = (value) => {
|
||||
let arr = state.viewpeople;
|
||||
arr.map((i) => {
|
||||
if (i.id === value.id) {
|
||||
i.select = !i.select;
|
||||
}
|
||||
});
|
||||
state.viewpeople = arr;
|
||||
};
|
||||
const textareaInput = (e) => {
|
||||
// console.log("eee", e);
|
||||
state.textarea1 = e;
|
||||
state.textarealength = e.length;
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
score,
|
||||
selectPeople,
|
||||
textareaInput,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.surveydetail {
|
||||
.crumb {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.prevnext {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
.prev {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
color: #ffffff;
|
||||
line-height: 24px;
|
||||
margin-top: 17px;
|
||||
margin-left: -11px;
|
||||
}
|
||||
.bascinfo {
|
||||
width: 100%;
|
||||
min-height: 1032px;
|
||||
margin-top: 24px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.question .text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333330;
|
||||
}
|
||||
.question .answer {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #56a3f9;
|
||||
}
|
||||
.question .answer .answerC {
|
||||
width: 540px;
|
||||
height: 73px;
|
||||
border: 1px solid #d7e5fd;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 11px;
|
||||
margin-right: 11px;
|
||||
// justify-content: center;
|
||||
.answerCitem {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px solid #56a3f9;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.question .people {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333330;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.question .words {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
bottom: 5px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333330;
|
||||
}
|
||||
.question .el-textarea__inner {
|
||||
border-radius: 8px;
|
||||
background-color: rgba(245, 246, 247, 1);
|
||||
}
|
||||
.submit {
|
||||
width: 126px;
|
||||
height: 46px;
|
||||
background: #2478ff;
|
||||
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: #ffffff;
|
||||
line-height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
margin-top: 39px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
4
vue.config.js
Normal file
4
vue.config.js
Normal file
@@ -0,0 +1,4 @@
|
||||
const { defineConfig } = require('@vue/cli-service')
|
||||
module.exports = defineConfig({
|
||||
transpileDependencies: true
|
||||
})
|
||||
Reference in New Issue
Block a user