生词详情页面移动端

src/views/book/courseware/preview/components/article/components/WordPhraseDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="wordDetailModule wordDetailChs">
+  <div class="wordDetailModule wordDetailChs" :class="[isMobile ? 'wordDetailModule-phone' : '']">
     <div class="module-inner">
       <div v-if="data" class="top">
         <div class="operation">
@@ -1433,4 +1433,66 @@ export default {
     }
   }
 }
+
+.wordDetailModule-phone {
+  .module-inner {
+    > div {
+      width: 100% !important;
+    }
+
+    .top {
+      .wordDetail {
+        .bwc-Strockplay {
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          min-width: 65px;
+          height: 65px;
+          margin-right: 10px;
+          margin-bottom: 16px;
+          overflow: hidden;
+          border-radius: 8px;
+
+          .strockplay {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .collect-icon {
+              position: absolute;
+              right: 4px;
+              bottom: 4px;
+              width: 16px;
+              cursor: pointer;
+            }
+          }
+
+          .bwc-line {
+            width: 1px;
+            height: 65px;
+          }
+
+          .red-bg {
+            background: #ff5757;
+          }
+
+          .green-bg {
+            background: #24b99e;
+          }
+
+          .brown-bg {
+            background: #bd8865;
+          }
+        }
+      }
+    }
+
+    .strockplayRedInner {
+      width: 65px;
+      height: 65px;
+    }
+  }
+}
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="wordDetailModule wordDetailChs">
+  <div class="wordDetailModule wordDetailChs" :class="[isMobile ? 'wordDetailModule-phone' : '']">
     <div class="module-inner">
       <div v-if="data" class="top">
         <div class="operation">
@@ -1348,4 +1348,66 @@ export default {
     }
   }
 }
+
+.wordDetailModule-phone {
+  .module-inner {
+    > div {
+      width: 100% !important;
+    }
+
+    .top {
+      .wordDetail {
+        .bwc-Strockplay {
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          min-width: 65px;
+          height: 65px;
+          margin-right: 10px;
+          margin-bottom: 16px;
+          overflow: hidden;
+          border-radius: 8px;
+
+          .strockplay {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .collect-icon {
+              position: absolute;
+              right: 4px;
+              bottom: 4px;
+              width: 16px;
+              cursor: pointer;
+            }
+          }
+
+          .bwc-line {
+            width: 1px;
+            height: 65px;
+          }
+
+          .red-bg {
+            background: #ff5757;
+          }
+
+          .green-bg {
+            background: #24b99e;
+          }
+
+          .brown-bg {
+            background: #bd8865;
+          }
+        }
+      }
+    }
+
+    .strockplayRedInner {
+      width: 65px;
+      height: 65px;
+    }
+  }
+}
 </style>