Merge branch 'lhd'

src/icons/svg/luyin-radio-play.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="24" height="24" style="" filter="none">
+    
+    <g>
+    <path d="M16 29.333c-7.364 0-13.333-5.969-13.333-13.333s5.969-13.333 13.333-13.333 13.333 5.969 13.333 13.333-5.969 13.333-13.333 13.333zM16 26.667c5.891 0 10.667-4.776 10.667-10.667s-4.776-10.667-10.667-10.667v0c-5.891 0-10.667 4.776-10.667 10.667s4.776 10.667 10.667 10.667v0zM14.163 11.22l6.505 4.336c0.144 0.097 0.238 0.26 0.238 0.444s-0.094 0.347-0.236 0.443l-0.002 0.001-6.507 4.336c-0.083 0.056-0.185 0.089-0.295 0.089-0.294 0-0.532-0.238-0.533-0.531v-8.675c0.001-0.294 0.239-0.532 0.533-0.532 0.11 0 0.213 0.034 0.298 0.091l-0.002-0.001z" fill="currentColor"></path>
+    </g>
+  </svg>

src/views/book/courseware/preview/common/SoundRecord.vue

@@ -43,8 +43,17 @@
       <div
         :class="['playBack', hasMicro]"
         @click="playmicrophone(selectIndex || selectIndex == 0 ? recordList[selectIndex].toltime : '')"
+        :style="{
+          backgroundColor: (microphoneStatus || hasMicro) && attrib && attrib.topic_color ? attrib.topic_color : '#000',
+          maskImage: hasMicro
+            ? hasMicro === 'normal'
+              ? `url(${require('@/assets/voice_matrix/luyin-play-active.png')})`
+              : `url(${require('@/assets/voice_matrix/luyin-play-stop.png')})`
+            : `url(${require('@/assets/voice_matrix/luyin-play.png')})`,
+        }"
+        class="icon-mask"
       >
-        <!-- <SvgIcon icon-class="luyin-paly-back" size="24" /> -->
+        <!-- <SvgIcon icon-class="luyin-radio-play" size="24" /> -->
       </div>
     </template>
 
@@ -81,8 +90,17 @@
       <div
         :class="['playBack', hasMicro]"
         @click="playmicrophone(selectIndex || selectIndex == 0 ? recordList[selectIndex].toltime : '')"
+        :style="{
+          backgroundColor: (microphoneStatus || hasMicro) && attrib && attrib.topic_color ? attrib.topic_color : '#000',
+          maskImage: hasMicro
+            ? hasMicro === 'normal'
+              ? `url(${require('@/assets/voice_matrix/luyin-play-active.png')})`
+              : `url(${require('@/assets/voice_matrix/luyin-play-stop.png')})`
+            : `url(${require('@/assets/voice_matrix/luyin-play.png')})`,
+        }"
+        class="icon-mask"
       >
-        <!-- <SvgIcon icon-class="luyin-paly-back" size="24" /> -->
+        <!-- <SvgIcon icon-class="luyin-radio-play" size="24" /> -->
       </div>
       <a
         :class="['record-delete', hasMicro ? 'record-delete-has' : '']"
@@ -139,8 +157,17 @@
       <div
         :class="['playBack', hasMicro]"
         @click="playmicrophone(selectIndex || selectIndex == 0 ? recordList[selectIndex].toltime : '')"
+        :style="{
+          backgroundColor: (microphoneStatus || hasMicro) && attrib && attrib.topic_color ? attrib.topic_color : '#000',
+          maskImage: hasMicro
+            ? hasMicro === 'normal'
+              ? `url(${require('@/assets/voice_matrix/luyin-play-active.png')})`
+              : `url(${require('@/assets/voice_matrix/luyin-play-stop.png')})`
+            : `url(${require('@/assets/voice_matrix/luyin-play.png')})`,
+        }"
+        class="icon-mask"
       >
-        <!-- <SvgIcon icon-class="luyin-paly-back" size="24" /> -->
+        <!-- <SvgIcon icon-class="luyin-radio-play" size="24" /> -->
       </div>
       <a
         :class="['record-delete', hasMicro ? 'record-delete-has' : '']"
@@ -444,17 +471,18 @@ export default {
     height: 20px;
     margin-left: 8px;
     cursor: pointer;
-    background: url('@/assets/voice_matrix/luyin-play.png') center no-repeat;
-    background-size: 100%;
+
+    // background: url('@/assets/voice_matrix/luyin-play.png') center no-repeat;
+    // background-size: 100%;
 
     &.normal {
-      background: url('@/assets/voice_matrix/luyin-play-active.png') center no-repeat;
-      background-size: 100%;
+      // background: url('@/assets/voice_matrix/luyin-play-active.png') center no-repeat;
+      // background-size: 100%;
     }
 
     &.active {
-      background: url('@/assets/voice_matrix/luyin-play-stop.png') center no-repeat;
-      background-size: 100%;
+      // background: url('@/assets/voice_matrix/luyin-play-stop.png') center no-repeat;
+      // background-size: 100%;
     }
   }
 

src/views/book/courseware/preview/components/dialogue_article/NormalModelChs.vue

@@ -1240,15 +1240,20 @@ export default {
     }
 
     .dia-article-record {
+      display: flex;
+      justify-content: end;
       width: 100%;
       border-top: 1px solid rgba(0, 0, 0, 10%);
 
       .luyin-box {
-        justify-content: start;
-        justify-content: flex-start;
-        width: 280px;
+        justify-content: end;
+        max-width: 200px;
         height: 40px;
         padding: 8px 12px;
+
+        :deep .el-select {
+          width: 24px;
+        }
       }
     }
   }

src/views/book/courseware/preview/components/dialogue_article/WordModelChs.vue

@@ -460,6 +460,7 @@
             :answer-record-list="curQue.Bookanswer.wordModel.recordList"
             type="promax"
             class="luyin-box"
+            :attrib="attrib"
             @handleWav="handleWav"
           />
         </div>
@@ -1076,15 +1077,20 @@ export default {
     }
 
     .dia-article-record {
+      display: flex;
+      justify-content: end;
       width: 100%;
       border-top: 1px solid rgba(0, 0, 0, 10%);
 
       .luyin-box {
-        justify-content: start;
-        justify-content: flex-start;
-        width: 280px;
+        justify-content: end;
+        max-width: 200px;
         height: 40px;
         padding: 8px 12px;
+
+        :deep .el-select {
+          width: 24px;
+        }
       }
     }
   }

src/views/book/courseware/preview/components/new_word/NewWordPreview.vue

@@ -1460,7 +1460,7 @@ export default {
           // flex-flow: wrap;
           justify-content: flex-start;
           padding: 8px 13px 8px 12px;
-          padding-right: 80px;
+          padding-right: 82px;
           cursor: pointer;
           border-radius: 8px;
 
@@ -1696,7 +1696,7 @@ export default {
     position: relative;
     display: flex;
     column-gap: 8px;
-    width: 225px;
+    width: 235px;
 
     .left,
     .right {