This commit is contained in:
BOE\10867418
2022-11-18 14:47:13 +08:00
commit 5da6d8da9d
114 changed files with 25106 additions and 0 deletions

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

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

Binary file not shown.

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>

97
src/App.vue Normal file
View 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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 454 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 806 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 347 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 826 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 189 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 571 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 572 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 968 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 734 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 620 B

BIN
src/assets/image/cycle.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 826 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 676 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 404 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 392 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 496 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 655 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 430 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 656 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 484 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 852 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 708 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 968 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 885 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 638 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 884 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 753 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 877 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 752 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 758 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 729 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 642 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 671 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 615 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 650 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 551 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 826 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 676 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 922 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 655 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 656 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 590 B

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

13
src/assets/image/index.js Normal file
View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 734 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 620 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 270 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 475 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 571 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 546 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 572 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 546 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 262 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 536 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/assets/image/next.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 571 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 208 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 270 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 528 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 521 B

BIN
src/assets/image/pre.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 572 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 722 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 968 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 136 KiB

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

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: {
}
})

View 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电梯麦克维尔中央空调高端安防系统等商务空间新标准匹配项目在亦庄地标综合体的形象写字楼空间设计由亚洲著名的室内空间设计大师之一梁景华设计写字楼群由六栋(T1T6)呈舰队排列的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>

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

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

Some files were not shown because too many files have changed in this diff Show More