diff --git a/public/images/artfoot.png b/public/images/artfoot.png
new file mode 100644
index 00000000..3874b492
Binary files /dev/null and b/public/images/artfoot.png differ
diff --git a/public/images/cotedetel.png b/public/images/cotedetel.png
new file mode 100644
index 00000000..717a69f8
Binary files /dev/null and b/public/images/cotedetel.png differ
diff --git a/public/images/coteplay.png b/public/images/coteplay.png
new file mode 100644
index 00000000..2a79b299
Binary files /dev/null and b/public/images/coteplay.png differ
diff --git a/public/images/couresdetail.png b/public/images/couresdetail.png
new file mode 100644
index 00000000..da4e381f
Binary files /dev/null and b/public/images/couresdetail.png differ
diff --git a/public/images/playicon.png b/public/images/playicon.png
new file mode 100644
index 00000000..b9e0940b
Binary files /dev/null and b/public/images/playicon.png differ
diff --git a/src/views/study/coursenew.vue b/src/views/study/coursenew.vue
new file mode 100644
index 00000000..6e23ddae
--- /dev/null
+++ b/src/views/study/coursenew.vue
@@ -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>
\ No newline at end of file