文章内容

src/components/common/AudioLine.vue

@@ -78,7 +78,8 @@ export default {
   props: [
     "mp3",
     "width",
-    "audioId"
+    "audioId",
+    "getCurTime"
   ],
   data() {
     // 这里存放数据
@@ -246,7 +247,9 @@ export default {
     onTimeupdate(res) {
       let audioId = this.audioId;
       this.audio.currentTime = res.target.currentTime;
-    //   this.getCurTime(res.target.currentTime);
+      if(this.getCurTime){
+        this.getCurTime(res.target.currentTime);
+      }
       if(this.isRepeat){
         if(this.audio.currentTime>=this.audio.maxTime || this.audio.currentTime<=0){
             this.onTimeupdateTime(0,true)
@@ -374,6 +377,7 @@ export default {
     height: 24px;
     color: #175DFF;
     cursor: pointer;
+    flex-shrink: 0;
   }
   .icon-repeat{
     margin: 0 8px;

src/icons/svg/check-double-line.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.602 13.7599L13.014 15.1719L21.4795 6.7063L22.8938 8.12051L13.014 18.0003L6.65 11.6363L8.06421 10.2221L10.189 12.3469L11.602 13.7599ZM11.6037 10.9322L16.5563 5.97949L17.9666 7.38977L13.014 12.3424L11.6037 10.9322ZM8.77698 16.5873L7.36396 18.0003L1 11.6363L2.41421 10.2221L3.82723 11.6352L3.82604 11.6363L8.77698 16.5873Z" fill="white"/>
+</svg>

src/icons/svg/icon-wrapper.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1493_55593)">
+<path d="M8 3V5H4V9H2V3H8ZM2 21V15H4V19H8V21H2ZM22 21H16V19H20V15H22V21ZM22 9H20V5H16V3H22V9Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_1493_55593">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/views/bookShelf/articleDetail.vue

@@ -20,7 +20,12 @@
         <div class="artricle-inner" :style="{background:bgColorList[activeIndex].contentInnerBg}">
             <!-- 文章 -->
             <div class="atricle-data">
-                <normal-model :titleFontsize="wordFontsize+30" :wordFontsize="wordFontsize"></normal-model>
+                <normal-model :titleFontsize="wordFontsize+30" :wordFontsize="wordFontsize" :colorObj="bgColorList[activeIndex]" :style="{'padding':'0 40px'}"></normal-model>
+                <div class="article-btn">
+                    <el-button type="text" class="btn-left" @click="handlePage('-')"><svg-icon icon-class="arrow-left-line"></svg-icon>上一页</el-button>
+                    <el-button class="explain-video"><svg-icon icon-class="check-double-line"></svg-icon>已读</el-button>
+                    <el-button type="text" class="btn-right" @click="handlePage('+')">下一页<svg-icon icon-class="arrow-right-line"></svg-icon></el-button>
+                </div>
             </div>
             <!-- 词汇表 -->
             <div class="glossary-box" :style="{borderTopColor:bgColorList[activeIndex].contentBg}">
@@ -91,7 +96,7 @@ export default {
   },
   data(){
     return{
-        wordFontsize: 14, // 文章文字大小
+        wordFontsize: 16, // 文章文字大小
         bgColorList:[
             {
                 type:'white',
@@ -528,6 +533,13 @@ export default {
     handleChangeBgColor(index){
         this.activeIndex = index
         this.inityuan()
+    },
+    handlePage(type){
+        if(type==='-'){
+            
+        }else{
+            
+        }
     }
   },
   created(){
@@ -581,7 +593,7 @@ export default {
         }
     }
     .atricle-data{
-        padding: 160px 100px 40px 100px;
+        padding: 120px 100px 40px 100px;
     }
     .glossary-box{
         border-top: 1px solid #F2F3F5;
@@ -666,6 +678,40 @@ export default {
         }
     }
 }
+.article-btn{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .btn-left,.btn-right{
+        color: #3459D2;
+        font-size: 16px;
+        line-height: 24px;
+        .svg-icon{
+            margin-right: 12px;
+        }
+    }
+    .btn-right{
+        .svg-icon{
+            margin-right: 0;
+            margin-left: 12px;
+        }
+    }
+    .explain-video{
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 40px;
+        padding: 0;
+        color: rgba(255, 255, 255, 0.88);
+        width: 120px;
+        height: 40px;
+        background: #3459D2;
+        border-radius: 30px;
+        border: none;
+        .svg-icon{
+            margin-right: 24px;
+        }
+    }
+}
 </style>
 <style lang="scss">
 .article-fontsize{

src/views/bookShelf/courseDetail.vue

@@ -89,7 +89,7 @@ export default {
                     title:'课程介绍',
                     teacher:'王琦',
                     length:'8分钟',
-                    src:'https://beiyu.utschool.cn/CSFileServer/URL/001/44E58E2BB9CA2212DA925A656DA8BC2720230510155845W1CJOYSP1XNS4L1VTWODJAQJHGITYYJFK2MPRZOA_00102-20230220-21-YUMCHQIB.mp3'
+                    src:'https://nnpe.utschool.cn/CSFileServer/URL/001/DC2B5164FB8F2351BB51C31CB8CD273020230627093140OIRIMXKQJRYGI0HYQ4JSOMTH1H4QNI1JSOOPCWWB_00103-20211214-17-EDNENNKW.mp3'
                 },
                 {
                     number:'2',