mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-08 02:16:47 +08:00
style:增加面授课页面
This commit is contained in:
李晓鸽
BIN
src/assets/image/activities/bg.png
Normal file
BIN
src/assets/image/activities/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/assets/image/activities/no.png
Normal file
BIN
src/assets/image/activities/no.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 454 B |
BIN
src/assets/image/activities/trumpet.png
Normal file
BIN
src/assets/image/activities/trumpet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 806 B |
BIN
src/assets/image/activities/yes.png
Normal file
BIN
src/assets/image/activities/yes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 347 B |
6
src/assets/image/index.js
Normal file
6
src/assets/image/index.js
Normal file
@@ -0,0 +1,6 @@
|
||||
const Images = {
|
||||
//选择按钮
|
||||
checkboxImg: require('./checkbox.png'),
|
||||
checkbox2Img: require('./checkbox2.png')
|
||||
}
|
||||
export default Images
|
||||
BIN
src/assets/image/pathmap/personal.png
Normal file
BIN
src/assets/image/pathmap/personal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 528 B |
BIN
src/assets/image/pathmap/photo.png
Normal file
BIN
src/assets/image/pathmap/photo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
src/assets/image/pathmap/study.png
Normal file
BIN
src/assets/image/pathmap/study.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 521 B |
274
src/views/activities/activities.vue
Normal file
274
src/views/activities/activities.vue
Normal file
@@ -0,0 +1,274 @@
|
||||
<template>
|
||||
<div class="activities">
|
||||
<TitleHead text="【其他活动】管理者进阶腾飞班 - 专属线下活动"></TitleHead>
|
||||
<div class="message">
|
||||
<div class="yes"></div>
|
||||
<div class="textmessage">签到成功</div>
|
||||
<div class="no"></div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="title">
|
||||
<div class="titlemain">
|
||||
<div class="timeposition">
|
||||
<div class="time">
|
||||
<img
|
||||
style="width: 13px; height: 14.5px; margin-right: 5.5px"
|
||||
src="../../assets/image/faceteach/time.png"
|
||||
/>
|
||||
<div style="font-size: 12px; color: rgba(110, 123, 132, 1)">
|
||||
2022-07-20 20:00-21:00
|
||||
</div>
|
||||
</div>
|
||||
<div class="time" style="margin-top: 9px">
|
||||
<img
|
||||
style="width: 13px; height: 15px; margin-right: 5.5px"
|
||||
src="../../assets/image/faceteach/position.png"
|
||||
/>
|
||||
<div style="font-size: 12px; color: rgba(110, 123, 132, 1)">
|
||||
大族广场
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="titlebtn">签到</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notice">
|
||||
<div class="noticebox">
|
||||
<div class="mani">
|
||||
<div class="lefttitle">
|
||||
<div class="img"></div>
|
||||
<div class="rightmain">
|
||||
<div class="talk">活动公告</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
为拓宽人民群众的表达途径、畅听民意，及时了解和解决人民群众反映强烈的公共法律服务问题，我局将在浈江区公共法律服务中心开展领导干部接待活动，<br>现将2022年8月的活动安排公告如下：<br> 一、接待时间 <br>工作日上午9:00-12:00。 <br>二、接待地点 <br>浈江区公共法律服务中心（浈江区新韶镇乐土路3号曲仁田螺冲党群服务中心一楼）。<br>三、接待受理范围 <br>（一）听取人民群众对公共法律服务工作的批评和意见建议。 <br>（二）解答或接收公共法律服务相关业务咨询。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="details">
|
||||
<div class="teachbox">
|
||||
<div class="teachmani">
|
||||
<div class="lefttitle">
|
||||
<div class="img"></div>
|
||||
<div class="rightmain">
|
||||
<div class="talk">活动详情</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
写字楼介绍<br>大族广场写字楼采用国际顶级硬件设施，美国OTIS电梯、麦克维尔中央空调、高端安防系统等商务空间新标准匹配项目在亦庄地标综合体的形象。写字楼空间设计由亚洲著名的室内空间设计大师之一梁景华设计，写字楼群由六栋(T1—T6)呈舰队排列的5A写字楼构成形成独特的舰队造型。<br>购物中心介绍<br>大族广场Mall&More位于北京经济技术开发区核心商圈荣华路，由荷兰鹿特丹缤纷市场设计师HANS VAN DA LEN 主持设计,秉持自然与未来和谐共生理念,倡导乐活有机、绿色环保的生活方式,传递生活美学。<br>大族广场Mall&More汇集众多知名优质品牌,7FRESH生 鲜超市、CGV星聚汇影城、中信书店、源力悦体等,集 购物、餐饮、娱乐、文化于一体,丰富的业态品类为消费 者提供城市生活的第三空间感受。<br>大族广场Mall&More以人为本,不断提升服务水平,升级 消费购物体验,致力于营造更加舒适的购物环境与空间打造有温度的品牌。同时根据春夏秋冬四季策划丰富多样的大型主题活动；为会员设置专属的沙龙活动，打造专属会员日等,与顾客近距离产生情感上的互动与链接为城市人们提供自由、放松、愉悦的社交空间与精神的栖息地。
|
||||
</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() {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.activities {
|
||||
width: 100%;
|
||||
.main {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: -14.5px;
|
||||
.title {
|
||||
width: 90%;
|
||||
height: 74px;
|
||||
border-radius: 4px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.titlemain {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.timeposition {
|
||||
.time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.titlebtn {
|
||||
width: 83px;
|
||||
height: 33px;
|
||||
background: #2478ff;
|
||||
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.message {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 194px;
|
||||
left: 80.5px;
|
||||
width: 234px;
|
||||
height: 64px;
|
||||
z-index: 1;
|
||||
background-image: url(../../assets/image/activities/bg.png);
|
||||
.textmessage {
|
||||
margin-top: 18px;
|
||||
margin-left: 46px;
|
||||
color: #333330;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.yes {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
margin-top: 19px;
|
||||
margin-left: 32px;
|
||||
background-image: url(../../assets/image/activities/yes.png);
|
||||
}
|
||||
.no {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
margin-top: 19px;
|
||||
margin-left: 50px;
|
||||
background-image: url(../../assets/image/activities/no.png);
|
||||
}
|
||||
}
|
||||
.notice {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
.noticebox {
|
||||
width: 90%;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(36, 120, 255, 0.15) 0%,
|
||||
white 20%
|
||||
);
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
|
||||
.mani {
|
||||
margin-left: 20.5px;
|
||||
margin-top: 20px;
|
||||
line-height: 24px;
|
||||
|
||||
.lefttitle {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 90px;
|
||||
.img {
|
||||
width: 18px;
|
||||
height: 15px;
|
||||
margin-top: 4px;
|
||||
background-image: url(../../assets/image/activities/trumpet.png);
|
||||
}
|
||||
.rightmain {
|
||||
margin-left: 7.5px;
|
||||
.talk {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
}
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 62.5px;
|
||||
height: 10px;
|
||||
right: 6px;
|
||||
bottom: -4px;
|
||||
background: #cccfff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
color: #333330;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
margin: 18.5px 12px 24.5px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.details {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
.teachbox {
|
||||
width: 90%;
|
||||
// height: 200px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.teachmani {
|
||||
width: 90%;
|
||||
margin-top: 20px;
|
||||
.lefttitle {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 90px;
|
||||
.img {
|
||||
width: 18px;
|
||||
height: 15px;
|
||||
margin-top: 4px;
|
||||
background-image: url(../../assets/image/activities/trumpet.png);
|
||||
}
|
||||
.rightmain {
|
||||
margin-left: 7.5px;
|
||||
.talk {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
}
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 62.5px;
|
||||
height: 10px;
|
||||
right: 6px;
|
||||
bottom: -4px;
|
||||
background: #cccfff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
color: #333330;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
margin: 18.5px 0 29.5px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -14,54 +14,124 @@
|
||||
<div class="questiontype clearfix">
|
||||
<div class="type">判断题</div>
|
||||
</div>
|
||||
|
||||
<!-- 循环遍历生成判断题的问题和选项 -->
|
||||
<div class="questions" v-for="(q, index) in j_questions" :key="index">
|
||||
<div class="questions" v-for="(q, index) in questions" :key="index">
|
||||
<div class="questiontitle">
|
||||
{{ q.text }}
|
||||
</div>
|
||||
<div class="btnswitch" v-for="(j, index) in j_options" :key="index">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div
|
||||
class="btnswitch"
|
||||
v-for="(j, index) in q.options"
|
||||
:key="index"
|
||||
@click="selectBtn(j)"
|
||||
>
|
||||
<div
|
||||
class="checkoutbtn"
|
||||
:style="{
|
||||
backgroundImage:
|
||||
'url(' +
|
||||
(j.selected === true
|
||||
? Images.checkboxImg
|
||||
: Images.checkbox2Img) +
|
||||
')',
|
||||
}"
|
||||
></div>
|
||||
<div class="select">{{ j.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="questions">
|
||||
<div class="questiontitle">1、控制计划是由工艺部门完成 （4分）</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">正确</div>
|
||||
<div class="questiontitle">
|
||||
1、控制计划是由工艺部门完成 （4分）
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">正确</div>
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">错误</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="questions">
|
||||
<div class="questiontitle">
|
||||
2、.PFMEA假定所设计的产品能满足设计要求
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">正确</div>
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">错误</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="questions">
|
||||
<div class="questiontitle">
|
||||
3、PFMEA假定所设计的产品能满足设计要求 （4分）
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">正确</div>
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">错误</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="questiontype clearfix">
|
||||
<div class="type">选择题</div>
|
||||
</div>
|
||||
|
||||
<!-- 循环遍历生成选择题的问题和选项 -->
|
||||
<div class="questions" v-for="(q, index) in s_questions" :key="index">
|
||||
<div class="questiontitle">
|
||||
{{ q.text }}
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">错误</div>
|
||||
<div
|
||||
class="btnswitch"
|
||||
v-for="(s, index) in s_options"
|
||||
:key="index"
|
||||
@click="selectBtn2(s)"
|
||||
>
|
||||
<div
|
||||
class="checkoutbtn"
|
||||
:style="{
|
||||
backgroundImage:
|
||||
'url(' +
|
||||
(s.selected === true
|
||||
? Images.checkboxImg
|
||||
: Images.checkbox2Img) +
|
||||
')',
|
||||
}"
|
||||
></div>
|
||||
<div class="select">{{ s.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="questions">
|
||||
<div class="questiontitle">
|
||||
2、.PFMEA假定所设计的产品能满足设计要求
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">正确</div>
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">错误</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="questions">
|
||||
<div class="questiontitle">
|
||||
3、PFMEA假定所设计的产品能满足设计要求 （4分）
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">正确</div>
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">错误</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="questions">
|
||||
<div class="questiontitle">
|
||||
4、.FMEA 是一种（ ）工具（4分）
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">问题解决</div>
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">项目策划</div>
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">过程分析</div>
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">风险分析</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="questiontype clearfix">
|
||||
<div class="type">选择题</div>
|
||||
@@ -128,6 +198,7 @@
|
||||
</template>
|
||||
<script>
|
||||
import { reactive, toRefs } from "vue";
|
||||
import Images from "../../assets/image/index";
|
||||
import TitleHead from "@/components/TitleHead.vue";
|
||||
export default {
|
||||
name: "ReadyExamination",
|
||||
@@ -136,25 +207,81 @@ export default {
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
select: require("../../assets/image/checkbox.png"),
|
||||
noselect: require("../../assets/image/checkbox2.png"),
|
||||
j_questions: [
|
||||
questions: [
|
||||
{
|
||||
type: "judge",
|
||||
id: 1,
|
||||
text: "1、控制计划是由工艺部门完成 （4分）",
|
||||
options: [
|
||||
{
|
||||
text: "正确",
|
||||
select: "flase",
|
||||
},
|
||||
{
|
||||
text: "错误",
|
||||
select: "flase",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "judge",
|
||||
id: 2,
|
||||
text: "2、.PFMEA假定所设计的产品能满足设计要求",
|
||||
options: [
|
||||
{
|
||||
text: "正确",
|
||||
select: "flase",
|
||||
},
|
||||
{
|
||||
text: "错误",
|
||||
select: "flase",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "judge",
|
||||
id: 3,
|
||||
text: "3、PFMEA假定所设计的产品能满足设计要求 （4分）",
|
||||
text: "3、控制计划是由工艺部门完成 （4分）",
|
||||
options: [
|
||||
{
|
||||
text: "正确",
|
||||
select: "flase",
|
||||
},
|
||||
{
|
||||
text: "错误",
|
||||
select: "flase",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
text: "4、.PFMEA假定所设计的产品能满足设计要求",
|
||||
options: [
|
||||
{
|
||||
text: "正确",
|
||||
select: "flase",
|
||||
},
|
||||
{
|
||||
text: "错误",
|
||||
select: "flase",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
// j_questions: [
|
||||
// {
|
||||
// type: "judge",
|
||||
// id: 1,
|
||||
// text: "1、控制计划是由工艺部门完成 （4分）",
|
||||
// },
|
||||
// {
|
||||
// type: "judge",
|
||||
// id: 2,
|
||||
// text: "2、.PFMEA假定所设计的产品能满足设计要求",
|
||||
// },
|
||||
// {
|
||||
// type: "judge",
|
||||
// id: 3,
|
||||
// text: "3、PFMEA假定所设计的产品能满足设计要求 （4分）",
|
||||
// },
|
||||
// ],
|
||||
s_questions: [
|
||||
{
|
||||
type: "choice",
|
||||
@@ -162,18 +289,18 @@ export default {
|
||||
text: "4、.FMEA 是一种（ ）工具（4分）",
|
||||
},
|
||||
],
|
||||
j_options: [
|
||||
{
|
||||
id: 1,
|
||||
text: "正确",
|
||||
selected: false,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
text: "错误",
|
||||
selected: false,
|
||||
},
|
||||
],
|
||||
// j_options: [
|
||||
// {
|
||||
// id: 1,
|
||||
// text: "正确",
|
||||
// selected: false,
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// text: "错误",
|
||||
// selected: false,
|
||||
// },
|
||||
// ],
|
||||
s_options: [
|
||||
{
|
||||
id: 1,
|
||||
@@ -198,20 +325,34 @@ export default {
|
||||
],
|
||||
});
|
||||
const selectBtn = (value) => {
|
||||
// let arr = state.questions;
|
||||
const arry = [];
|
||||
state.questions.map((item) => {
|
||||
arry.push(item.options);
|
||||
});
|
||||
console.log(arry);
|
||||
console.log(value);
|
||||
// arry.map((i) => {
|
||||
// if (i.id === value.id) {
|
||||
// i.selected = !i.selected;
|
||||
// }
|
||||
// });
|
||||
// state.questions = arry;
|
||||
};
|
||||
const selectBtn2 = (value) => {
|
||||
let arr = state.s_options;
|
||||
arr.map((i) => {
|
||||
i.selected = false;
|
||||
if (i.id === value.id) {
|
||||
i.selected = !i.selected;
|
||||
}
|
||||
// console.log("iii", i);
|
||||
});
|
||||
state.s_options = arr;
|
||||
console.log("iii", state.s_options);
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
selectBtn,
|
||||
selectBtn2,
|
||||
Images,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
436
src/views/pathmap/pathmap.vue
Normal file
436
src/views/pathmap/pathmap.vue
Normal file
@@ -0,0 +1,436 @@
|
||||
<template>
|
||||
<div class="pathmap">
|
||||
<TitleHead text="中级产品经理"></TitleHead>
|
||||
<div class="main">
|
||||
<div class="title">
|
||||
<div class="box">
|
||||
<div class="nav">
|
||||
<span class="announcement">课程公告</span>
|
||||
<span class="share">共享文档</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
请各位选课的同学提前阅读本课程的“教学大纲与计划”“课程考核要求”与“学习要求”，并按给定的中学化学教学主题分好小组 <br>每位同学在网上学习的活动轨迹都会自动被系统记录，将作为大家个人线上参与的评价依据；<br>请大家务必在规定的时间内提交作业，否则会被系统自动记录为“迟交”或“未交”，则会影响线上参与的平时成绩；
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="messaeg">
|
||||
<div class="mani">
|
||||
<div class="uptitle">
|
||||
<div class="img"></div>
|
||||
<div class="rightmain">
|
||||
<div class="talk">个人信息</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="information">
|
||||
<div class="photo"></div>
|
||||
<div class="description">
|
||||
<span class="text1">乐晓琪（显示事业）</span>
|
||||
<span class="text2">真正的陪伴经得起坎坷，经得起平淡。</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="downtitle">
|
||||
<div class="img"></div>
|
||||
<div class="rightmain">
|
||||
<div class="talk">学习进度</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="speed">
|
||||
<span class="text3">上次学到：启航班 - 领导寄语</span>
|
||||
<button class="btn">去上课</button>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="total">
|
||||
<div class="total_part">
|
||||
<span class="text4">总进度</span> <span class="text5">32%</span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress_part"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="compulsory">
|
||||
<div class="compulsory_part">
|
||||
<span class="text6">必修进度</span> <span class="text7">10%</span>
|
||||
</div>
|
||||
<div class="progress1">
|
||||
<div class="progress1_part"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="course">
|
||||
<div class="course_box">
|
||||
<div class="course_first">
|
||||
<span class="text8">序：产品经理从初级到中级</span>
|
||||
<span class="text9"><span class="circular"></span>进行中</span>
|
||||
</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() {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pathmap {
|
||||
width: 100%;
|
||||
.main {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: -14.5px;
|
||||
.course {
|
||||
width: 90%;
|
||||
height: 903px;
|
||||
margin-top: 10px;
|
||||
border-radius: 4px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.course_box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 90%;
|
||||
margin-top: 18.5px;
|
||||
background-color: pink;
|
||||
.course_first {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
justify-content: content;
|
||||
background-color: #F9F9F9;
|
||||
.text8 {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
margin-top: 11px;
|
||||
margin-left: 10.5px;
|
||||
margin-bottom: 10.5px;
|
||||
height: 13.5px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333330;
|
||||
}
|
||||
.text9 {
|
||||
margin-top: 11px;
|
||||
margin-left: 77.5px;
|
||||
color: #0060FF;
|
||||
font-size:13px;
|
||||
font-weight: 400;
|
||||
.circular {
|
||||
|
||||
border: 1px solid #0060FF;
|
||||
border-radius: 25%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
width: 90%;
|
||||
height: 272px;
|
||||
border-radius: 4px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.box {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap:wrap;
|
||||
overflow-y: auto;
|
||||
.nav {
|
||||
width: 100%;
|
||||
height: 49.5px;
|
||||
display: flex;
|
||||
.announcement {
|
||||
color: #2478FF;
|
||||
font-size: 14px;
|
||||
line-height: 21.6px;
|
||||
font-weight: 700;
|
||||
margin-top: 18.5px;
|
||||
border-bottom: 1px solid #2478FF;
|
||||
}
|
||||
.share {
|
||||
color: #394145;
|
||||
font-size: 13px;
|
||||
line-height: 21.6px;
|
||||
margin-top: 19px;
|
||||
margin-left: 70px;
|
||||
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 180.5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #333330;
|
||||
font-size:13px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.messaeg {
|
||||
width: 90%;
|
||||
height: 314px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
.mani {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: content;
|
||||
margin-left: 20.5px;
|
||||
margin-top: 23px;
|
||||
.downtitle {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 90px;
|
||||
margin-top: 21.5px;
|
||||
.img {
|
||||
width: 15.5px;
|
||||
height: 14.5px;
|
||||
margin-top: 3px;
|
||||
background-image: url(../../assets/image/pathmap/study.png);
|
||||
}
|
||||
.rightmain {
|
||||
margin-left: 7.5px;
|
||||
.talk {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
}
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 62.5px;
|
||||
height: 10px;
|
||||
right: 6px;
|
||||
bottom: -4px;
|
||||
background: #ccdfff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.uptitle {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 90px;
|
||||
.img {
|
||||
width: 17px;
|
||||
height: 15px;
|
||||
margin-top: 3px;
|
||||
background-image: url(../../assets/image/pathmap/personal.png);
|
||||
}
|
||||
.rightmain {
|
||||
margin-left: 7.5px;
|
||||
.talk {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
}
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 62.5px;
|
||||
height: 10px;
|
||||
right: 6px;
|
||||
bottom: -4px;
|
||||
background: #ccdfff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.information {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
justify-content: content;
|
||||
.photo {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-image: url(../../assets/image/pathmap/photo.png)
|
||||
}
|
||||
.description {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
margin-left: 11.5px;
|
||||
.text1 {
|
||||
height: 13.5px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #394145;
|
||||
line-height: 21.6px;
|
||||
|
||||
}
|
||||
.text2 {
|
||||
height: 13px;
|
||||
margin-top: 12px;
|
||||
font-size: 13px;
|
||||
color: #394145;
|
||||
line-height: 21.6px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.speed {
|
||||
width: 100%;
|
||||
margin-top:11px;
|
||||
display: flex;
|
||||
justify-content: content;
|
||||
.text3 {
|
||||
display: flex;
|
||||
flex:1;
|
||||
margin-top: 4.5px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: #677D86;
|
||||
text-overflow: elipsis;
|
||||
}
|
||||
.btn {
|
||||
width: 73px;
|
||||
height: 28px;
|
||||
font-size: 13px;
|
||||
line-height: 28px;
|
||||
margin-rihgt: 21px;
|
||||
color: #2478FF;
|
||||
font-weight: 400;
|
||||
border: 0.5px solid #2478FF;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.progress {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
margin-top: 15px;
|
||||
width: 100%;
|
||||
height: 74px;
|
||||
.total {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 29px;
|
||||
.total_part {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
height: 12.5px;
|
||||
.text4 {
|
||||
width: 38.5px;
|
||||
height: 12.5px;
|
||||
font-size: 12px;
|
||||
// line-height: 30.29px;
|
||||
color: #677D86;
|
||||
}
|
||||
.text5 {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 25px;
|
||||
height: 9.5px;
|
||||
font-size: 12px;
|
||||
// line-height: 30.29px;
|
||||
color: #277AFF;
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 6.4px;
|
||||
margin-top: 20px;
|
||||
background-color: #E8F1FE;
|
||||
border-radius: 2px;
|
||||
.progress_part {
|
||||
width: 32%;
|
||||
height: 6.4px;
|
||||
border-radius: 2px;
|
||||
background: linear-gradient(
|
||||
-180deg,
|
||||
rgba(36, 120, 255, 1),
|
||||
rgba(80, 147, 255, 1)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
.compulsory{
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 29px;
|
||||
margin-top: 16px;
|
||||
.compulsory_part {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
height: 12.5px;
|
||||
.text6 {
|
||||
width: 38.5px;
|
||||
height: 12.5px;
|
||||
font-size: 12px;
|
||||
// line-height: 30.29px;
|
||||
color: #677D86;
|
||||
}
|
||||
.text7 {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 25px;
|
||||
height: 9.5px;
|
||||
font-size: 12px;
|
||||
// line-height: 30.29px;
|
||||
color: #EE6661;
|
||||
}
|
||||
}
|
||||
.progress1 {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 6.4px;
|
||||
margin-top: 20px;
|
||||
background-color: #E8F1FE;
|
||||
border-radius: 2px;
|
||||
.progress1_part {
|
||||
width: 10%;
|
||||
height: 6.4px;
|
||||
border-radius: 2px;
|
||||
background: linear-gradient(
|
||||
-180deg,
|
||||
rgba(238, 98, 94, 1),
|
||||
rgba(238, 164, 161, 1)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user