mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git
synced 2025-12-11 11:56:48 +08:00
style:增加路径图详情
This commit is contained in:
李晓鸽
@@ -41,8 +41,10 @@ export default defineComponent({
|
||||
</script>
|
||||
<style lang="scss">
|
||||
#app {
|
||||
font-family: MicrosoftYaHei, Microsoft YaHei, Avenir, Helvetica, Arial,
|
||||
sans-serif;
|
||||
// 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;
|
||||
@@ -56,7 +58,6 @@ export default defineComponent({
|
||||
background-color: rgba(242, 245, 247, 1);
|
||||
main {
|
||||
flex: 1;
|
||||
// min-height: 100%;
|
||||
width: 100%;
|
||||
padding: 30px;
|
||||
box-sizing: border-box;
|
||||
|
||||
BIN
src/assets/image/VS.png
Normal file
BIN
src/assets/image/VS.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/image/avator.png
Normal file
BIN
src/assets/image/avator.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
src/assets/image/book.png
Normal file
BIN
src/assets/image/book.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 260 B |
BIN
src/assets/image/call.png
Normal file
BIN
src/assets/image/call.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 740 B |
BIN
src/assets/image/file/md.png
Normal file
BIN
src/assets/image/file/md.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 638 B |
BIN
src/assets/image/file/pdf.png
Normal file
BIN
src/assets/image/file/pdf.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 884 B |
BIN
src/assets/image/file/zip.png
Normal file
BIN
src/assets/image/file/zip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 752 B |
BIN
src/assets/image/pathdetails/circle2.png
Normal file
BIN
src/assets/image/pathdetails/circle2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 336 B |
BIN
src/assets/image/pathdetails/info.png
Normal file
BIN
src/assets/image/pathdetails/info.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 717 B |
BIN
src/assets/image/pathdetails/notstarted.png
Normal file
BIN
src/assets/image/pathdetails/notstarted.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
src/assets/image/pathdetails/study.png
Normal file
BIN
src/assets/image/pathdetails/study.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 712 B |
BIN
src/assets/image/toupiao1.png
Normal file
BIN
src/assets/image/toupiao1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
src/assets/image/toupiao2.png
Normal file
BIN
src/assets/image/toupiao2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
src/assets/image/tv.png
Normal file
BIN
src/assets/image/tv.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 560 B |
BIN
src/assets/image/write.png
Normal file
BIN
src/assets/image/write.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/image/yinhao.png
Normal file
BIN
src/assets/image/yinhao.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 380 B |
BIN
src/assets/image/yinhao2.png
Normal file
BIN
src/assets/image/yinhao2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 384 B |
BIN
src/assets/image/yuan.png
Normal file
BIN
src/assets/image/yuan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
@@ -10,31 +10,46 @@ body {
|
||||
.tag1{
|
||||
width: 80px;
|
||||
height: 26px;
|
||||
background: linear-gradient(90deg, #84aad2 0%, #a4c5e9 100%);
|
||||
border: 1px solid #51C6E6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
color: #51C6E6;
|
||||
}
|
||||
// 在线
|
||||
// 选修
|
||||
.tag2{
|
||||
width: 78px;
|
||||
height: 24px;
|
||||
border: 1px solid #85AAD2;
|
||||
width: 80px;
|
||||
height: 26px;
|
||||
border: 1px solid #CD7FED;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #85AAD2;
|
||||
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;
|
||||
}
|
||||
// 标签
|
||||
.tag3{
|
||||
width: 78px;
|
||||
.tag4{
|
||||
padding-left:15px ;
|
||||
padding-right: 12px;
|
||||
height: 24px;
|
||||
border: 1px solid rgba(255, 185, 109, 1);
|
||||
border-radius: 4px;
|
||||
|
||||
454
src/views/ballot/ballot.vue
Normal file
454
src/views/ballot/ballot.vue
Normal file
@@ -0,0 +1,454 @@
|
||||
<template>
|
||||
<div class="moreactive">
|
||||
<!-- 面包屑导航 -->
|
||||
<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 class="preNext">
|
||||
<button class="btn btn01"></button>
|
||||
<span class="content">上一个</span>
|
||||
<span class="content" style="margin-left: 31px">下一个</span>
|
||||
<button class="btn btn02"></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 面包屑导航 -->
|
||||
<div class="debateTitle">【投票】管理者进阶腾飞班 - 授课方式</div>
|
||||
<!-- 详细信息 -->
|
||||
<div class="detailinfo">
|
||||
<div class="detail">
|
||||
<div class="detailT">
|
||||
<div style="margin-left: 48px; margin-right: 48px">
|
||||
<div class="title">
|
||||
<img
|
||||
width="20px"
|
||||
height="20px"
|
||||
src="../../assets/image/yuan.png"
|
||||
/>
|
||||
<div class="text">参与情况</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
<!-- <div style="display: flex; align-items: center"></div> -->
|
||||
<div class="all">
|
||||
<div class="item allbox1">
|
||||
<div class="item1" style="color: #089dff">123</div>
|
||||
<div class="item2">参与数</div>
|
||||
</div>
|
||||
<div class="item allbox2">
|
||||
<div class="item1" style="color: #387df7">6172</div>
|
||||
<div class="item2">总票数</div>
|
||||
</div>
|
||||
<div class="item allbox3">
|
||||
<div class="item1" style="color: #00c6ff">11241</div>
|
||||
<div class="item2">浏览数</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title">
|
||||
<img
|
||||
width="20px"
|
||||
height="20px"
|
||||
src="../../assets/image/yuan.png"
|
||||
/>
|
||||
<div class="text">参与投票</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
|
||||
<div class="join"></div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="righttitle">
|
||||
<img
|
||||
width="20px"
|
||||
height="20px"
|
||||
src="../../assets/image/yuan.png"
|
||||
/>
|
||||
<div class="text">投票时间</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
<div class="timebox clearfix">
|
||||
<div class="innertime">
|
||||
2022-7-20
|
||||
00:00 至 2022-8-29
|
||||
23:59:59
|
||||
</div>
|
||||
<div class="endtime clearfix">
|
||||
<div class="endtimetext">
|
||||
距离结束还有
|
||||
<span class="te">123</span> 小时 <span
|
||||
class="te"
|
||||
>42</span
|
||||
> 分钟
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="righttitle">
|
||||
<img
|
||||
width="20px"
|
||||
height="20px"
|
||||
src="../../assets/image/yuan.png"
|
||||
/>
|
||||
|
||||
<div class="text">投票说明</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
<div class="explain clearfix">
|
||||
<div class="explaincontent">
|
||||
为提高核心项目讲解体验，现向广大学员征集较为接受的授课方式,每位学员可投票2个选项，我们将选取最高选项的两个做后续讲解。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 详细信息 -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive, toRefs } from "vue";
|
||||
export default {
|
||||
name: "balloT",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
activeName: "first",
|
||||
});
|
||||
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">
|
||||
.moreactive {
|
||||
.crumb {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.preNext {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
.content {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
width: 43px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -6px;
|
||||
}
|
||||
.btn {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
border-radius: 50%;
|
||||
border: 0;
|
||||
}
|
||||
.btn01 {
|
||||
background-image: url("../../assets/image/prev.png");
|
||||
}
|
||||
.btn02 {
|
||||
background-image: url("../../assets/image/next.png");
|
||||
}
|
||||
}
|
||||
|
||||
.debateTitle {
|
||||
margin-top: 15px;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.detailinfo {
|
||||
width: calc(100% + 20px);
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
.detail {
|
||||
flex: 1;
|
||||
margin-right: 20px;
|
||||
.detailT {
|
||||
height: 1000px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
display: flex;
|
||||
|
||||
.right {
|
||||
.righttitle {
|
||||
display: flex;
|
||||
padding-top: 39px;
|
||||
position: relative;
|
||||
.text {
|
||||
margin-left: 8px;
|
||||
font-size: 16px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
font-weight: 800;
|
||||
}
|
||||
.box {
|
||||
width: 75px;
|
||||
height: 10px;
|
||||
background-color: rgba(36, 120, 255, 0.15);
|
||||
position: absolute;
|
||||
left: 23px;
|
||||
top: 53px;
|
||||
}
|
||||
}
|
||||
.timebox {
|
||||
width: 417px;
|
||||
height: 149px;
|
||||
background: linear-gradient(90deg, #b6c6e1 0%, #89aed6 100%);
|
||||
border-radius: 4px;
|
||||
margin-top: 42px;
|
||||
}
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
.innertime {
|
||||
margin-top: 17px;
|
||||
margin-left: 55px;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: 24px;
|
||||
}
|
||||
.endtime {
|
||||
margin-left: 10px;
|
||||
margin-top: 16px;
|
||||
width: 397px;
|
||||
height: 81px;
|
||||
background: #f2f5f7;
|
||||
border-radius: 0px 8px 0px 8px;
|
||||
.endtimetext {
|
||||
margin-top: 25px;
|
||||
margin-left: 46px;
|
||||
.te {
|
||||
font-size: 28px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 800;
|
||||
color: #4a9cf8;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.explain {
|
||||
margin-top: 30px;
|
||||
width: 416px;
|
||||
height: 158px;
|
||||
background: #f2f5f7;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.explaincontent {
|
||||
width: 368px;
|
||||
height: 64px;
|
||||
font-size: 16px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333330;
|
||||
line-height: 24px;
|
||||
margin-left: 24px;
|
||||
margin-top: 47px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.all {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 1280px;
|
||||
margin-top: 43px;
|
||||
.allbox1 {
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(160, 193, 230, 0) 0%,
|
||||
rgba(161, 195, 231, 0.2) 100%
|
||||
);
|
||||
}
|
||||
.allbox2 {
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(177, 219, 229, 0) 0%,
|
||||
rgba(172, 216, 227, 0.2) 100%
|
||||
);
|
||||
}
|
||||
.allbox3 {
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(195, 209, 234, 0) 0%,
|
||||
rgba(191, 206, 231, 0.2) 100%
|
||||
);
|
||||
}
|
||||
.item {
|
||||
width: 410px;
|
||||
height: 149px;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
.item1 {
|
||||
color: #089dff;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-top: 36px;
|
||||
}
|
||||
.item2 {
|
||||
color: #333330;
|
||||
font-size: 14px;
|
||||
margin-top: 29px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.join {
|
||||
width: 1280px;
|
||||
height: 408px;
|
||||
background: #f5f6f7;
|
||||
border-radius: 8px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1008
src/views/debate/debate.vue
Normal file
1008
src/views/debate/debate.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -88,8 +88,8 @@
|
||||
<div>
|
||||
<div class="question">社交产品如何做好模块化处理？</div>
|
||||
<div style="margin-top: 16px; display: flex">
|
||||
<div class="active">必修</div>
|
||||
<div class="unactive">作业</div>
|
||||
<div class="tag1">必修</div>
|
||||
<div class="tag3" style="margin-left: 11px">作业</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="submit">提交</div>
|
||||
@@ -102,8 +102,8 @@
|
||||
模块化产品展示相关案例与展示：如何自由组合你的思考？
|
||||
</div>
|
||||
<div style="margin-top: 16px; display: flex">
|
||||
<div class="active btncolor">必修</div>
|
||||
<div class="unactive bordercolor fontcolor">考试</div>
|
||||
<div class="tag1">必修</div>
|
||||
<div class="tag3" style="margin-left: 11px">考试</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="submit">去考试</div>
|
||||
@@ -273,6 +273,7 @@ export default {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
.detail {
|
||||
flex: 1;
|
||||
margin-right: 20px;
|
||||
@@ -365,45 +366,7 @@ export default {
|
||||
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;
|
||||
@@ -423,7 +386,8 @@ export default {
|
||||
}
|
||||
.teacher {
|
||||
width: 434px;
|
||||
min-height: 557px;
|
||||
min-height: 500px;
|
||||
// height: 10%;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 8px;
|
||||
.title {
|
||||
@@ -453,7 +417,7 @@ export default {
|
||||
// min-height: 115px;
|
||||
padding: 25px 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// align-items: center;
|
||||
}
|
||||
.teacheritem .peopleimg {
|
||||
width: 60px;
|
||||
@@ -481,6 +445,7 @@ export default {
|
||||
font-weight: 500;
|
||||
color: #394145;
|
||||
margin-top: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
531
src/views/liveBroadcast/LiveBroadcast.vue
Normal file
531
src/views/liveBroadcast/LiveBroadcast.vue
Normal file
@@ -0,0 +1,531 @@
|
||||
<template>
|
||||
<div class="moreactive">
|
||||
<!-- 面包屑导航 -->
|
||||
<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 class="preNext">
|
||||
<button class="btn btn01"></button>
|
||||
<span class="content">上一个</span>
|
||||
<span class="content" style="margin-left: 31px">下一个</span>
|
||||
<button class="btn btn02"></button>
|
||||
</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"
|
||||
style="margin-right: -660px; background: rgb(59, 191, 252)"
|
||||
>
|
||||
观看
|
||||
</div>
|
||||
<div
|
||||
class="btn"
|
||||
style="margin-right: -660px; background: rgb(57, 146, 249)"
|
||||
>
|
||||
签到
|
||||
</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 />
|
||||
● 培训目标
|
||||
<br />1.使企业不同部门人员掌握便捷、有效的系统平台操作方法;<br />
|
||||
2.通过系统平台的培训提高员工对企业的管理理念认识与提升。<br />
|
||||
3.通过系统平台培训加强沟通，统一部署，协同工作，提高效率。
|
||||
<br />
|
||||
●培训对象<br />
|
||||
集团领导、各相关部门领导、总经理、车间主管、车间操作员等;<br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title">
|
||||
<img
|
||||
width="20px"
|
||||
height="20px"
|
||||
src="../../assets/image/write.png"
|
||||
/>
|
||||
<div class="text">课后作业</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center">
|
||||
<div class="content">
|
||||
<span style="font-weight: 600"
|
||||
>网易有道词典现有功能结构拆解+问题分析</span
|
||||
><br />
|
||||
查找资料，介绍一种国外（日本、美国、欧洲）道路（公路、铁路、城市道路、地铁）设计规范的演变过程，可以一种或几种主要技术指标为例，并说明其原因。<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tell">
|
||||
<div class="title">
|
||||
<img
|
||||
style="width: 21px; height: 23px"
|
||||
src="../../assets/image/tv.png"
|
||||
/>
|
||||
<div class="text">直播公告</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
当你走进这直播间，我和毛不易老师@毛不易就已
|
||||
经在直播间等你们了!今晚20点30，不见不散!<br />
|
||||
</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>
|
||||
<!-- 详细信息 -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive, toRefs } from "vue";
|
||||
export default {
|
||||
name: "LiveBroadcast",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
activeName: "first",
|
||||
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"),
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
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">
|
||||
.moreactive {
|
||||
.crumb {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.preNext {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
.content {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
width: 43px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -6px;
|
||||
}
|
||||
.btn {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
border-radius: 50%;
|
||||
border: 0;
|
||||
}
|
||||
.btn01 {
|
||||
background-image: url("../../assets/image/prev.png");
|
||||
}
|
||||
.btn02 {
|
||||
background-image: url("../../assets/image/next.png");
|
||||
}
|
||||
}
|
||||
.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: 646px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tell {
|
||||
width: 434px;
|
||||
height: 188px;
|
||||
// min-height: 557px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(36, 120, 255, 0.15) 0%,
|
||||
rgba(255, 255, 255) 50%
|
||||
);
|
||||
.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;
|
||||
}
|
||||
.content {
|
||||
margin: 25px 24px 49px 49px;
|
||||
color: #677d86;
|
||||
width: 361px;
|
||||
height: 304px;
|
||||
line-height: 24px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
font-family: PingFang-SC-Heavy;
|
||||
}
|
||||
}
|
||||
}
|
||||
.teacher {
|
||||
margin-top: 22px;
|
||||
width: 434px;
|
||||
height: 328px;
|
||||
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>
|
||||
394
src/views/moreActive/MoreActive.vue
Normal file
394
src/views/moreActive/MoreActive.vue
Normal file
@@ -0,0 +1,394 @@
|
||||
<template>
|
||||
<div class="moreactive">
|
||||
<!-- 面包屑导航 -->
|
||||
<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 class="preNext">
|
||||
<button class="btn btn01"></button>
|
||||
<span class="content">上一个</span>
|
||||
<span class="content" style="margin-left: 31px">下一个</span>
|
||||
<button class="btn btn02"></button>
|
||||
</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/book.png"
|
||||
/>
|
||||
<div class="text">课程详情</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center">
|
||||
<div class="content">
|
||||
写字楼介绍 <br />
|
||||
大族广场写字楼采用国际顶级硬件设施，美国OTIS电梯、麦克维尔中央空调、高端安防系统等商务空间新标准匹配项目在亦庄地标综合体的形象。写字楼空间设计由亚洲著名的
|
||||
室内空间设计大师之一梁景华设计，写字楼群由六栋(T1—T6)呈舰队排列的5A写字楼构成形成独特的舰队造型。
|
||||
<br />
|
||||
购物中心介绍 <br />
|
||||
大族广场Mall&More位于北京经济技术开发区核心商圈荣华路，由荷兰鹿特丹缤纷市场设计师HANS
|
||||
VAN DALEN
|
||||
主持设计,秉持自然与未来和谐共生理念,倡导乐活、有机、绿色环保的生活方式,传递生活美学。
|
||||
<br />
|
||||
大族广场Mall&More汇集众多知名优质品牌,7FRESH生鲜超市、CGV星聚汇影城、中信书店、源力悦体等,集购物、餐饮、娱乐、文化于一体,丰富的业态品类为消费者提供城市
|
||||
生活的第三空间感受。<br />
|
||||
大族广场Mall&More以人为本,不断提升服务水平,升级消费购物体验,致力于营造更加舒适的购物环境与空间,打造有温度的品牌。同时根据春夏秋冬四季策划丰富多样的大型主题
|
||||
活动；为会员设置专属的沙龙活动，打造专属会员日等,与顾客近距离产生情感上的互动与链接,为城市人们提供自由、放松、愉悦的社交空间与精神的栖息地。<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="teacher">
|
||||
<div class="title">
|
||||
<img
|
||||
style="width: 24px; height: 20px"
|
||||
src="../../assets/image/call.png"
|
||||
/>
|
||||
<div class="text">活动公告</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
为拓宽人民群众的表达途径、畅听民意，及时了解
|
||||
和解决人民群众反映强烈的公共法律服务问题，我
|
||||
局将在浈江区公共法律服务中心开展领导干部接待
|
||||
活动，现将2022年8月的活动安排公告如下：<br />
|
||||
一、接待时间 <br />
|
||||
工作日上午9:00-12:00。<br />
|
||||
二、接待地点<br />
|
||||
浈江区公共法律服务中心（浈江区新韶镇乐土路3号
|
||||
曲仁田螺冲党群服务中心一楼）。<br />
|
||||
三、接待受理范围 <br />（一）听取人民群众对公共法律服务工作的批评和
|
||||
意见建议。 <br />（二）解答或接收公共法律服务相关业务咨询。<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 详细信息 -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive, toRefs } from "vue";
|
||||
export default {
|
||||
name: "MoreActive",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
activeName: "first",
|
||||
});
|
||||
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">
|
||||
.moreactive {
|
||||
.crumb {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.preNext {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
.content {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
width: 43px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -6px;
|
||||
}
|
||||
.btn {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
border-radius: 50%;
|
||||
border: 0;
|
||||
}
|
||||
.btn01 {
|
||||
background-image: url("../../assets/image/prev.png");
|
||||
}
|
||||
.btn02 {
|
||||
background-image: url("../../assets/image/next.png");
|
||||
}
|
||||
}
|
||||
.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: 646px;
|
||||
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;
|
||||
height: 438px;
|
||||
// min-height: 557px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(36, 120, 255, 0.15) 0%,
|
||||
rgba(255, 255, 255) 50%
|
||||
);
|
||||
.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;
|
||||
}
|
||||
.content {
|
||||
margin: 25px 24px 49px 49px;
|
||||
color: #677d86;
|
||||
width: 361px;
|
||||
height: 304px;
|
||||
line-height: 24px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
font-family: PingFang-SC-Heavy;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -11,18 +11,269 @@
|
||||
<!-- 详细信息 -->
|
||||
<div class="detailinfo">
|
||||
<div class="detailL">
|
||||
<div v-for="(i, k) in course" :key="k">
|
||||
<div class="title">
|
||||
<div class="titleL">序：产品经理从初级到中级</div>
|
||||
<div class="titleR">
|
||||
<div class="titleL">{{ i.title }}</div>
|
||||
<div
|
||||
class="titleR"
|
||||
:style="{ display: i.state === 1 ? 'flex' : 'none' }"
|
||||
>
|
||||
<img src="../../assets/image/pathdetails/circle.png" />
|
||||
<div class="titleRT">进行中</div>
|
||||
</div>
|
||||
<div
|
||||
class="titleR"
|
||||
:style="{ display: i.state === 2 ? 'flex' : 'none' }"
|
||||
>
|
||||
<img src="../../assets/image/pathdetails/circle2.png" />
|
||||
<div class="titleRT" style="color: rgba(102, 102, 102, 1)">
|
||||
未开始
|
||||
</div>
|
||||
<div class="tag1">必修</div>
|
||||
<div class="tag2">在线</div>
|
||||
<div class="tag3">#通用力</div>
|
||||
</div>
|
||||
<div class="detailR"></div>
|
||||
</div>
|
||||
<div
|
||||
class="course"
|
||||
v-for="(value, index) in i.courseItem"
|
||||
:key="index"
|
||||
>
|
||||
<div>
|
||||
<div class="coursename">{{ value.name }}</div>
|
||||
<div class="coursetag">
|
||||
<div
|
||||
v-for="(item, key) in value.tag"
|
||||
:key="key"
|
||||
:class="
|
||||
item.classify === 1
|
||||
? 'tag1'
|
||||
: item.classify === 2
|
||||
? 'tag2'
|
||||
: item.classify === 3
|
||||
? 'tag3'
|
||||
: item.classify === 4
|
||||
? 'tag4'
|
||||
: ''
|
||||
"
|
||||
style="margin-right: 11px; margin-top: 16px"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="progressBox"
|
||||
:style="{ display: i.state === 1 ? 'block' : 'none' }"
|
||||
>
|
||||
<div>当前进度</div>
|
||||
<div class="progress">
|
||||
<div style="width: 291px">
|
||||
<el-progress
|
||||
:percentage="value.progress"
|
||||
:show-text="false"
|
||||
:stroke-width="8"
|
||||
:color="
|
||||
value.progress < 20
|
||||
? 'rgba(238, 112, 108, 1)'
|
||||
: value.progress < 30
|
||||
? 'rgba(255, 151, 38, 1)'
|
||||
: value.progress < 50
|
||||
? 'rgba(39, 122, 255, 1)'
|
||||
: value.progress < 100
|
||||
? 'rgba(59, 94, 251, 1)'
|
||||
: value.progress === 100
|
||||
? 'rgba(57, 219, 183, 1)'
|
||||
: ''
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #277aff;
|
||||
margin-left: 10px;
|
||||
"
|
||||
:style="{
|
||||
color:
|
||||
value.progress < 20
|
||||
? 'rgba(238, 112, 108, 1)'
|
||||
: value.progress < 30
|
||||
? 'rgba(255, 151, 38, 1)'
|
||||
: value.progress < 50
|
||||
? 'rgba(39, 122, 255, 1)'
|
||||
: value.progress < 100
|
||||
? 'rgba(59, 94, 251, 1)'
|
||||
: value.progress === 100
|
||||
? 'rgba(57, 219, 183, 1)'
|
||||
: '',
|
||||
}"
|
||||
>
|
||||
{{ value.progress }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :style="{ display: i.state === 1 ? 'block' : 'none' }">
|
||||
<div
|
||||
class="goclass"
|
||||
:style="{ display: value.progress === 0 ? 'none' : 'flex' }"
|
||||
>
|
||||
去上课
|
||||
</div>
|
||||
<img
|
||||
style="width: 76px; height: 76px; margin-right: 61px"
|
||||
:style="{ display: value.progress === 0 ? 'flex' : 'none' }"
|
||||
src="../../assets/image/pathdetails/notstarted.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="tag1">必修</div>
|
||||
<div class="tag2">选修</div>
|
||||
<div class="tag3">测评</div>
|
||||
<div class="tag4">#通用力</div> -->
|
||||
</div>
|
||||
<div class="detailR">
|
||||
<!-- 课程公告及共享文档 -->
|
||||
<div class="detailRT">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="课程公告" name="first">
|
||||
<div class="notice">
|
||||
请各位选课的同学提前阅读本课程的
|
||||
“教学大纲与计划”“课程考核要求”与“学习要求”
|
||||
，并按给定的中学化学教学主题分好小组 <br />
|
||||
每位同学在网上学习的活动轨迹都会自动被系统记录将作为大家个人线上参与的评价依据；<br />
|
||||
请大家务必在规定的时间内提交作业，否则会被系统自动记录为“迟交”或“未交”则会影响线上参与的平时成
|
||||
绩；<br />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="共享文档" name="second">
|
||||
<div style="padding: 19px 30px 17px 28px">
|
||||
<div
|
||||
v-for="(value, index) in sharedoc"
|
||||
:key="index"
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
"
|
||||
>
|
||||
<img :src="value.img" style="width: 22px; height: 26px" />
|
||||
<div class="sharedocname">{{ value.name }}</div>
|
||||
<div class="download">
|
||||
<img
|
||||
src="../../assets/image/download.png"
|
||||
style="width: 16px; height: 15px"
|
||||
/>
|
||||
<div style="margin-left: 7px">下载</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<!-- 课程公告及共享文档 -->
|
||||
<!-- 个人信息及学习进度 -->
|
||||
<div class="detailRB">
|
||||
<div class="info">
|
||||
<div class="title">
|
||||
<img
|
||||
style="width: 21px; height: 20px"
|
||||
src="../../assets/image/pathdetails/info.png"
|
||||
/>
|
||||
<div class="text" style="margin-left: 7px">个人信息</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 class="info" style="padding-top: 20px">
|
||||
<div class="title">
|
||||
<img
|
||||
style="width: 18px; height: 17px"
|
||||
src="../../assets/image/pathdetails/study.png"
|
||||
/>
|
||||
<div class="text" style="margin-left: 9px">学习进度</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
<div class="rate">
|
||||
<div class="ratetext">上次学到：启航班-领导寄语</div>
|
||||
<div class="ratebtn">继续学习</div>
|
||||
</div>
|
||||
<div style="margin-top: 16px">
|
||||
<div class="progressBox">
|
||||
<div>总进度</div>
|
||||
<div class="progress">
|
||||
<div style="width: 291px">
|
||||
<el-progress
|
||||
percentage="32"
|
||||
:show-text="false"
|
||||
:stroke-width="8"
|
||||
color="rgba(39, 122, 255, 1)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #277aff;
|
||||
margin-left: 10px;
|
||||
color: rgba(39, 122, 255, 1);
|
||||
"
|
||||
>
|
||||
32%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 31px">
|
||||
<div class="progressBox">
|
||||
<div>必修进度</div>
|
||||
<div class="progress">
|
||||
<div style="width: 291px">
|
||||
<el-progress
|
||||
percentage="10"
|
||||
:show-text="false"
|
||||
:stroke-width="8"
|
||||
color="rgba(238, 112, 108, 1)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #277aff;
|
||||
margin-left: 10px;
|
||||
color: rgba(238, 112, 108, 1);
|
||||
"
|
||||
>
|
||||
10%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 个人信息及学习进度 -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 详细信息 -->
|
||||
</div>
|
||||
@@ -33,7 +284,190 @@ import { reactive, toRefs } from "vue";
|
||||
export default {
|
||||
name: "PathDetails",
|
||||
setup() {
|
||||
const state = reactive({});
|
||||
const state = reactive({
|
||||
activeName: "first",
|
||||
course: [
|
||||
{
|
||||
state: 1, //1：进行中 2：未开始
|
||||
title: "序：产品经理从初级到中级",
|
||||
courseItem: [
|
||||
{
|
||||
id: 1,
|
||||
name: "人工智能启蒙就讲解（上）",
|
||||
tag: [
|
||||
{
|
||||
classify: 1, //1：必修 2：选修 3：在线、测评等 4：标签
|
||||
name: "必修",
|
||||
},
|
||||
{
|
||||
classify: 3,
|
||||
name: "在线",
|
||||
},
|
||||
{
|
||||
classify: 4,
|
||||
name: "#通用力",
|
||||
},
|
||||
{
|
||||
classify: 4,
|
||||
name: "#前沿趋势",
|
||||
},
|
||||
],
|
||||
progress: 48,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "人工智能启蒙就讲解（下）",
|
||||
tag: [
|
||||
{
|
||||
classify: 2,
|
||||
name: "选修",
|
||||
},
|
||||
{
|
||||
classify: 3,
|
||||
name: "测评",
|
||||
},
|
||||
{
|
||||
classify: 4,
|
||||
name: "#通用力",
|
||||
},
|
||||
{
|
||||
classify: 4,
|
||||
name: "#前沿趋势",
|
||||
},
|
||||
],
|
||||
progress: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
state: 2, //1：进行中 2：未开始
|
||||
title: "第一讲：中级产品经理的思考逻辑",
|
||||
courseItem: [
|
||||
{
|
||||
id: 1,
|
||||
name: "趣味课前小测 - MBTI测试：你适合做哪个方向？",
|
||||
tag: [
|
||||
{
|
||||
classify: 1, //1：必修 2：选修 3：在线、测评等 4：标签
|
||||
name: "必修",
|
||||
},
|
||||
{
|
||||
classify: 3,
|
||||
name: "测评",
|
||||
},
|
||||
],
|
||||
progress: 48,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "趣味课前小测 - MBTI测试：你适合做哪个方向？",
|
||||
tag: [
|
||||
{
|
||||
classify: 2,
|
||||
name: "选修",
|
||||
},
|
||||
{
|
||||
classify: 3,
|
||||
name: "外部链接",
|
||||
},
|
||||
],
|
||||
progress: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
state: 2, //1：进行中 2：未开始
|
||||
title: "第二讲：模块化产品展示",
|
||||
courseItem: [
|
||||
{
|
||||
id: 1,
|
||||
name: "模块化产品展示相关案例与展示：如何自由组合你的思考？",
|
||||
tag: [
|
||||
{
|
||||
classify: 1, //1：必修 2：选修 3：在线、测评等 4：标签
|
||||
name: "必修",
|
||||
},
|
||||
{
|
||||
classify: 3,
|
||||
name: "测评",
|
||||
},
|
||||
],
|
||||
progress: 48,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "社交产品如何做好模块化处理？",
|
||||
tag: [
|
||||
{
|
||||
classify: 2,
|
||||
name: "选修",
|
||||
},
|
||||
{
|
||||
classify: 3,
|
||||
name: "作业",
|
||||
},
|
||||
],
|
||||
progress: 0,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "微信与Telegram哪个平台的功能模块化做的最好？",
|
||||
tag: [
|
||||
{
|
||||
classify: 2,
|
||||
name: "选修",
|
||||
},
|
||||
{
|
||||
classify: 3,
|
||||
name: "辩论",
|
||||
},
|
||||
],
|
||||
progress: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
sharedoc: [
|
||||
{
|
||||
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: "中级产品经理必备工具.pdf",
|
||||
img: require("../../assets/image/file/pdf.png"),
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Python学习入门讲义.zip",
|
||||
img: require("../../assets/image/file/zip.png"),
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Axure RP10更新内容.md",
|
||||
img: require("../../assets/image/file/md.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"),
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
const handleClick = (tab, event) => {
|
||||
console.log(tab, event);
|
||||
};
|
||||
@@ -79,6 +513,7 @@ export default {
|
||||
align-items: center;
|
||||
background-color: rgba(249, 249, 249, 1);
|
||||
margin-top: 27px;
|
||||
margin-bottom: 19px;
|
||||
.titleL {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
@@ -97,12 +532,198 @@ export default {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
.course {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 32px;
|
||||
margin-left: 26px;
|
||||
.coursename {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333330;
|
||||
line-height: 24px;
|
||||
}
|
||||
.coursetag {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.progressBox {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #677d86;
|
||||
margin-top: 24px;
|
||||
.progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.progress .el-progress-bar__outer {
|
||||
background-color: rgba(232, 241, 254, 1);
|
||||
}
|
||||
}
|
||||
.goclass {
|
||||
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;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 37px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.detailR {
|
||||
width: 434px;
|
||||
min-height: 557px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
.detailRT {
|
||||
min-height: 298px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
.el-tabs__item {
|
||||
height: 56px;
|
||||
padding: 10px 33px 0px 27px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.el-tabs__nav-wrap::after {
|
||||
background-color: rgba(56, 125, 247, 0.2);
|
||||
}
|
||||
.notice {
|
||||
padding: 15px 43px 30px 47px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333330;
|
||||
line-height: 24px;
|
||||
}
|
||||
.sharedocname {
|
||||
width: 259px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #677d86;
|
||||
margin-left: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.download {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #2478ff;
|
||||
}
|
||||
}
|
||||
.detailRB {
|
||||
min-height: 459px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
margin-top: 17px;
|
||||
.info .title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 39px;
|
||||
position: relative;
|
||||
margin-left: 48px;
|
||||
}
|
||||
.info .title .text {
|
||||
margin-left: 8px;
|
||||
font-size: 16px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
font-weight: 800;
|
||||
}
|
||||
.info .title .box {
|
||||
width: 75px;
|
||||
height: 10px;
|
||||
background-color: rgba(36, 120, 255, 0.15);
|
||||
position: absolute;
|
||||
left: 23px;
|
||||
top: 53px;
|
||||
}
|
||||
.info .teacheritem {
|
||||
margin-left: 48px;
|
||||
margin-right: 48px;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
}
|
||||
.info .teacheritem .peopleimg {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
.info .teacheritem .teacherName {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #394145;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 260px;
|
||||
}
|
||||
.info .teacheritem .teacherName .teacherMedal {
|
||||
width: 17px;
|
||||
height: 19px;
|
||||
margin-right: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.info .teacheritem .introduce {
|
||||
width: 260px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #394145;
|
||||
margin-top: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.info .rate {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 29px;
|
||||
margin-left: 48px;
|
||||
margin-right: 26px;
|
||||
}
|
||||
.info .rate .ratetext {
|
||||
width: 259px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #677d86;
|
||||
line-height: 24px;
|
||||
}
|
||||
.info .rate .ratebtn {
|
||||
width: 86px;
|
||||
height: 36px;
|
||||
border: 1px solid #2478ff;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #2478ff;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.info .progressBox {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #677d86;
|
||||
margin-top: 16px;
|
||||
margin-left: 44px;
|
||||
.progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.progress .el-progress-bar__outer {
|
||||
background-color: rgba(232, 241, 254, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user