mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-09 02:46:44 +08:00
修改
This commit is contained in:
lmj
BIN
public/images/artfoot.png
Normal file
BIN
public/images/artfoot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 234 KiB |
BIN
public/images/cotedetel.png
Normal file
BIN
public/images/cotedetel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 415 B |
BIN
public/images/coteplay.png
Normal file
BIN
public/images/coteplay.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 311 B |
BIN
public/images/couresdetail.png
Normal file
BIN
public/images/couresdetail.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 181 KiB |
BIN
public/images/playicon.png
Normal file
BIN
public/images/playicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 208 B |
324
src/views/study/coursenew.vue
Normal file
324
src/views/study/coursenew.vue
Normal file
@@ -0,0 +1,324 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="coures-bg">
|
||||
<portal-header current="course" :goSearch="1"></portal-header>
|
||||
<el-breadcrumb style="margin-top:50px;margin-left:82px" separator-class="el-icon-arrow-right" class="breadcrumb-nav" >
|
||||
<el-breadcrumb-item :to="{ path: '/course' }">课程列表</el-breadcrumb-item>
|
||||
<el-breadcrumb-item class="hear-nav">课程详情</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
<div class="coures-title">
|
||||
<div>课程名称 标准化异常处理流程</div>
|
||||
<span>课程简介通俗易懂的入门课程！</span>
|
||||
<h6>评分5.0分</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="coures-content">
|
||||
<div class="coures-play">
|
||||
|
||||
</div>
|
||||
<div class="coures-info">
|
||||
<div class="hear-tab">
|
||||
<div @click="heartabone" :class="tab == 1 ? 'tab-active' : ' '"><i class="el-icon-reading" style="margin-right:9px;margin-left:9px"></i>课程单元</div>
|
||||
<div @click="heartabtwo" :class="tab == 2 ? 'tab-active' : ' '"><i class="el-icon-edit" style="margin-right:9px;margin-left:9px"></i>我的笔记</div>
|
||||
|
||||
</div>
|
||||
<div class="course-units" v-if="tab == 1">
|
||||
<div class="units-info">
|
||||
1. 任务工程师角色认知
|
||||
</div>
|
||||
<div class="units-info units-active">
|
||||
<img src="../../../public/images/playicon.png" alt=""> 1. 任务工程师角色认知
|
||||
</div>
|
||||
<div class="units-info">
|
||||
1. 任务工程师角色认知
|
||||
</div>
|
||||
<div class="units-info">
|
||||
1. 任务工程师角色认知
|
||||
</div>
|
||||
<div class="units-info">
|
||||
1. 任务工程师角色认知
|
||||
</div>
|
||||
<div class="units-info">
|
||||
1. 任务工程师角色认知
|
||||
</div>
|
||||
<div class="units-info">
|
||||
1. 任务工程师角色认知
|
||||
</div>
|
||||
<div class="units-info">
|
||||
1. 任务工程师角色认知
|
||||
</div>
|
||||
<div class="units-info">
|
||||
1. 任务工程师角色认知
|
||||
</div>
|
||||
<div class="units-info">
|
||||
1. 任务工程师角色认知
|
||||
</div>
|
||||
</div>
|
||||
<div class="mynote" v-if="tab == 2">
|
||||
<div class="mynote-tab">
|
||||
<div @click="notetab1" :class="notetab == 1 ? 'noteactive' : ' ' "> <a href="#">新增笔记</a> </div>
|
||||
<div @click="notetab2" :class="notetab == 2 ? 'noteactive' : ' '"> <a href="#">我的笔记</a> </div>
|
||||
</div>
|
||||
<div class="newcote-content" v-if="notetab == 1">
|
||||
<div class="newcote-time">
|
||||
<img src="../../../public/images/coteplay.png" alt="">
|
||||
8:40
|
||||
<img src="../../../public/images/cotedetel.png" alt="">
|
||||
</div>
|
||||
<div class="newcote-text">
|
||||
我见过的策划们，不管是甲方企业的，还是广告代理公司的，还营销策划公司的，在做策略写方案的时候，都经常错误：找一个营销理论，做策略时直接向上套。不管是什么行业、企业处在什么发展阶段，都要照着这个理论的要求来实施营销传播，写PPT时也要照着这个理论的框架来写。
|
||||
|
||||
我见过的策划们，不管是甲方企业的，还是广告代理公司的，还营销策划公司的，在做策略写方案的时候，都经常错误：找一个营销理论，做策略时直接向上套。不管是什么行业、企业处在什么发展阶段，都要照着这个理论的要求来实施营销传播，写PPT时也要照着这个理论的框架来写。
|
||||
</div>
|
||||
</div>
|
||||
<div class="mycote-content" v-if="notetab == 2">
|
||||
<div style="border-bottom:1px solid #4444;padding-bottom:25px;">
|
||||
<span class="mycote-time">2022-06-21 21:35:12 <span class="sm">私密</span> <span class="more" icon="el-icon-more"></span> </span>
|
||||
<div style="margin-top:20px" class="newcote-time">
|
||||
<img src="../../../public/images/coteplay.png" alt="">
|
||||
8:40
|
||||
<img src="../../../public/images/cotedetel.png" alt="">
|
||||
</div>
|
||||
<div class="newcote-text">
|
||||
在做策略写方案的时候，都经常错套。都要照着这个理论的要求来实施营销传播，写PPT时也要照着这个理论的框架来写。
|
||||
|
||||
我见划公司的，在做策略写方案的时候，都经常不管是什么行业、企业处在什么来实施营销传播，写PPT时也要照着这个理论的框架来写。
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="mycote-dibu">已经到底啦</h6>
|
||||
|
||||
</div>
|
||||
<div class="newcote-bottom" v-if="notetab == 1">
|
||||
<span> 视频位置</span>
|
||||
<el-radio v-model="radio" label="1">公开</el-radio>
|
||||
<el-radio v-model="radio" label="2">私密</el-radio>
|
||||
<el-button type="primary" size="small">保存</el-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import portalHeader from "@/components/PortalHeader.vue";
|
||||
import portalFooter from "@/components/PortalFooter.vue";
|
||||
import comments from "@/components/Portal/comments.vue";
|
||||
import interactBar from "@/components/Portal/interactBar.vue";
|
||||
export default {
|
||||
name: "atticle",
|
||||
components: {portalHeader, portalFooter,interactBar,comments,},
|
||||
data(){
|
||||
return{
|
||||
tab:1,
|
||||
notetab:1,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
heartabone(){
|
||||
this.tab = 1
|
||||
},
|
||||
heartabtwo(){
|
||||
this.tab = 2
|
||||
},
|
||||
notetab1(){
|
||||
this.notetab = 1
|
||||
},
|
||||
notetab2(){
|
||||
this.notetab = 2
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.course-units{
|
||||
.units-info{
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.units-active{
|
||||
background: #F6F6F6;
|
||||
color: #387DF7;
|
||||
font-weight: 600;
|
||||
img{
|
||||
width: 18px;
|
||||
height: 20px;
|
||||
vertical-align: middle;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.more{
|
||||
float: right;
|
||||
}
|
||||
.newcote-bottom{
|
||||
span{
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
margin-right: 30px;
|
||||
|
||||
}
|
||||
}
|
||||
.newcote-time{
|
||||
width: 120px;
|
||||
height: 30px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #3379FB;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #387DF7;;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
img{
|
||||
vertical-align: middle;
|
||||
margin: 0 5px;
|
||||
|
||||
}
|
||||
}
|
||||
.newcote-text{
|
||||
margin-top: 24px;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
.mycote-content{
|
||||
margin: 30px 0px;
|
||||
box-sizing: border-box;
|
||||
padding: 35px 30px;
|
||||
height: 474px;
|
||||
background-color: #F8F7F7;
|
||||
.mycote-time{
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
padding-bottom: 20px;
|
||||
.sm{
|
||||
width: 50px;
|
||||
height: 22px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #3379FB;
|
||||
color: #3379FB;
|
||||
font-size: 12px;
|
||||
line-height: 50px;
|
||||
margin-left: 20px;
|
||||
padding: 3px 10px;
|
||||
}
|
||||
}
|
||||
.mycote-dibu{
|
||||
margin: 50px 38%;
|
||||
|
||||
color: #999999;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.newcote-content{
|
||||
margin: 30px 0px;
|
||||
box-sizing: border-box;
|
||||
padding: 35px 30px;
|
||||
height: 474px;
|
||||
background-color: #F8F7F7;
|
||||
|
||||
|
||||
}
|
||||
.mynote{
|
||||
width: 100%;
|
||||
|
||||
.mynote-tab{
|
||||
width: 180px;
|
||||
margin-top: 17px;
|
||||
|
||||
display: flex;
|
||||
div{
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
flex: 1;
|
||||
}
|
||||
.noteactive a{
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
padding-bottom: 7px;
|
||||
border-bottom: 4px solid #387DF7;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.coures-content{
|
||||
height: 745px;
|
||||
margin: 20px 80px;
|
||||
background-color: #999;
|
||||
display: flex;
|
||||
.coures-info{
|
||||
width: 500px;
|
||||
background-color: #f0f0f0;
|
||||
padding: 35px 30px;
|
||||
box-sizing: border-box;
|
||||
.hear-tab{
|
||||
width: 300px;
|
||||
border-bottom: 1px solid #D8D8D8 ;
|
||||
display: flex;
|
||||
padding-bottom: 12px;
|
||||
div{
|
||||
flex: 1;
|
||||
color: #666666;
|
||||
}
|
||||
.tab-active{
|
||||
color: #333333;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
.coures-play{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.coures-title{
|
||||
margin-left:82px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
margin-top: 25px;
|
||||
div{
|
||||
float: left;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
line-height: 20px;
|
||||
|
||||
}
|
||||
span{
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
margin-left: 27px;
|
||||
}
|
||||
h6{
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
margin: 0 20px;
|
||||
|
||||
}
|
||||
}
|
||||
::v-deep.el-breadcrumb__item:first-child .el-breadcrumb__inner a, .el-breadcrumb__inner .is-link {
|
||||
color: #fff !important;
|
||||
}
|
||||
::v-deep.el-breadcrumb__item:last-child .el-breadcrumb__inner{
|
||||
color: #fff !important;
|
||||
}
|
||||
::v-deep.hear-nav{
|
||||
color: #fff !important;
|
||||
}
|
||||
.breadcrumb-nav{
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.coures-bg{
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background: url('../../../public/images/couresdetail.png');
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user