1

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

@@ -25,7 +25,7 @@
               />
             </template>
             <img
-              style="margin-right: 0px"
+              style="margin-right: 0"
               @click="closeWordShow"
               src="../../../../assets/icon/Cross-16-normal-Black.png"
               alt=""
@@ -751,31 +751,38 @@ export default {
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
 .wordDetailModule {
-  width: 100%;
   z-index: 999;
+  width: 100%;
   overflow-y: scroll;
+
   .module-inner {
     padding: 30px 0;
+
     > div {
       width: 788px;
+      padding: 16px 32px 40px;
       margin: 0 auto;
-      background: #ffffff;
-      box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
+      background: #fff;
       border-radius: 8px;
-      padding: 16px 32px 40px 32px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 15%);
+
       .operation {
         height: 16px;
         margin-bottom: 8px;
+
         div {
           display: flex;
-          justify-content: flex-end;
           align-items: center;
+          justify-content: flex-end;
+
           > :nth-child(1) {
             margin-right: 24px;
           }
+
           > :nth-child(2) {
             margin-right: 8px;
           }
+
           > :nth-child(3) {
             margin-right: 24px;
           }
@@ -789,94 +796,112 @@ export default {
       }
     }
   }
+
   .module-bottom {
     width: 788px;
     margin-top: 16px;
   }
+
   .top {
     padding-top: 16px;
+
     .wordDetail {
-      width: 100%;
-      margin-bottom: 16px;
       display: flex;
-      justify-content: flex-start;
       align-items: flex-start;
+      justify-content: flex-start;
+      width: 100%;
+      margin-bottom: 16px;
+
       .bwc-Strockplay {
+        box-sizing: border-box;
         display: flex;
-        justify-content: center;
         align-items: center;
+        justify-content: center;
         min-width: 130px;
         height: 130px;
+        margin-right: 37px;
         margin-bottom: 16px;
-        border-radius: 8px;
-        box-sizing: border-box;
         overflow: hidden;
-        margin-right: 37px;
+        border-radius: 8px;
+
         .strockplay {
+          position: relative;
           display: flex;
-          justify-content: center;
           align-items: center;
-          position: relative;
+          justify-content: center;
+
           .collect-icon {
-            width: 16px;
             position: absolute;
             right: 4px;
             bottom: 4px;
+            width: 16px;
             cursor: pointer;
           }
         }
+
         .bwc-line {
           width: 2px;
           height: 128px;
         }
+
         .red-bg {
           background: #ff5757;
         }
+
         .green-bg {
           background: #24b99e;
         }
+
         .brown-bg {
           background: #bd8865;
         }
       }
+
       .bwc-tolength {
-        color: #404040;
+        padding: 40px 0;
+        margin: 0 37px 16px 0;
+        font-family: "FZJCGFKTK";
         font-size: 30px;
         line-height: 1.5;
-        font-family: FZJCGFKTK;
+        color: #404040;
         text-align: center;
         border: 2px solid #d47064;
         border-radius: 8px;
-        padding: 40px 0;
-        margin: 0 37px 16px 0;
       }
+
       .red-border {
         border: 2px solid #ff5757;
       }
+
       .green-border {
         border: 2px solid #24b99e;
       }
+
       .brown-border {
         border: 2px solid #bd8865;
       }
+
       .wordInfor {
         flex: 1;
+
         .yinpin {
           display: flex;
-          justify-content: flex-start;
           align-items: center;
-          margin-bottom: 16px;
+          justify-content: flex-start;
           width: fit-content;
+          margin-bottom: 16px;
+
           .pinyintext {
-            font-size: 20px;
-            line-height: 30px;
-            color: #2c2c2c;
             display: flex;
             align-items: center;
             margin-right: 8px;
-            word-break: normal;
             font-family: 'GB-PINYINOK-B';
+            font-size: 20px;
+            line-height: 30px;
+            color: #2c2c2c;
+            word-break: normal;
           }
+
           .content-voices {
             width: 16px;
           }
@@ -886,177 +911,205 @@ export default {
       p {
         margin: 0;
       }
+
       .word {
-        font-weight: bold;
         font-size: 24px;
+        font-weight: bold;
         line-height: 28px;
-        color: #000000;
+        color: #000;
       }
 
       .jieshu {
         margin-top: 16px;
         font-size: 16px;
         line-height: 19px;
-        color: #000000;
+        color: #000;
       }
     }
+
     .zhedie-white {
       width: 100%;
       margin: 0 auto;
+
       > div {
         margin-bottom: 24px;
       }
+
       .topTitle {
-        width: 100%;
         display: flex;
+        align-items: center;
         justify-content: space-between;
+        width: 100%;
         padding: 8px 12px 0;
-        align-items: center;
         background: #fff !important;
-        border: 1px solid rgba(0, 0, 0, 0.1);
+        border: 1px solid rgba(0, 0, 0, 10%);
         border-radius: 4px 4px 0 0;
+
         > :nth-child(1) {
-          font-weight: 500;
           font-size: 16px;
+          font-weight: 500;
           line-height: 150%;
-          color: rgba(0, 0, 0, 0.85);
+          color: rgba(0, 0, 0, 85%);
         }
+
         > :nth-child(2) {
           display: flex;
           align-items: center;
-          font-weight: normal;
           font-size: 14px;
+          font-weight: normal;
           line-height: 22px;
-          color: rgba(0, 0, 0, 0.85);
+          color: rgba(0, 0, 0, 85%);
           cursor: pointer;
         }
+
         img {
           width: 16px;
           height: 16px;
           margin-left: 4px;
         }
+
         .rotate {
           animation-name: firstrotate;
+          animation-timing-function: linear;
           animation-direction: 2s;
           animation-fill-mode: both;
-          animation-timing-function: linear;
         }
       }
 
       .liju {
-        padding-bottom: 16px;
         padding-right: 24px;
+        padding-bottom: 16px;
         background: #f7f7f7;
-        border: 1px solid rgba(0, 0, 0, 0.1);
+        border: 1px solid rgba(0, 0, 0, 10%);
         border-top: none;
         border-radius: 0 0 4px 4px;
+
         .liju_main {
           > div {
+            display: flex;
             padding-top: 16px;
             margin-left: 8px;
-            display: flex;
 
             > :nth-child(1) {
-              text-align: right;
               margin-right: 6px;
-              line-height: 24px;
               font-family: 'FZJCGFKTK';
+              line-height: 24px;
+              text-align: right;
             }
+
             p {
               margin: 0;
-              line-height: 24px;
-              font-size: 16px;
-              color: rgba(0, 0, 0, 0.85);
               font-family: 'FZJCGFKTK';
+              font-size: 16px;
+              line-height: 24px;
+              color: rgba(0, 0, 0, 85%);
             }
+
             .p2 {
               font-size: 12px;
               line-height: 20px;
-              color: rgba(0, 0, 0, 0.85);
+              color: rgba(0, 0, 0, 85%);
               opacity: 0.3;
             }
           }
         }
       }
+
       .merge {
         .topTitle {
           .left {
-            height: 100%;
             display: flex;
-            font-size: 12px;
             align-items: flex-end;
+            height: 100%;
+            font-size: 12px;
+
             > div {
-              padding: 0 12px 8px 12px;
+              padding: 0 12px 8px;
               cursor: pointer;
+
               > :nth-child(1) {
                 margin-right: 4px;
-                color: #000000;
+                color: #000;
               }
+
               > :nth-child(2) {
-                color: rgba(0, 0, 0, 0.5);
+                color: rgba(0, 0, 0, 50%);
               }
             }
+
             .sele {
               border-bottom: 1px solid #ff5757;
+
               > :nth-child(1) {
                 color: #ff5757;
               }
+
               > :nth-child(2) {
-                color: rgba(255, 87, 87, 0.5);
+                color: rgba(255, 87, 87, 50%);
               }
             }
           }
+
           .right {
+            display: flex;
             width: 144px;
             height: 28px;
-            display: flex;
-            background: #eeeeee;
-            border-radius: 4px;
             padding: 2px;
+            background: #eee;
+            border-radius: 4px;
+
             > div {
               width: 76px;
               height: 24px;
-              color: #888888;
-              text-align: center;
               line-height: 24px;
+              color: #888;
+              text-align: center;
               cursor: pointer;
             }
+
             .sele {
-              background: #ffffff;
-              box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.08);
-              color: #000000;
+              color: #000;
+              background: #fff;
+              box-shadow: 0 2px 2px rgba(0, 0, 0, 8%);
             }
           }
         }
+
         .KWIC_liju {
           padding-top: 16px;
+
           > div {
             margin-left: 24px;
           }
+
           .sort_dv {
-            margin-left: 24px;
             display: flex;
+            margin-left: 24px;
+
             span {
               display: inline-block;
-              width: 28px;
-              height: 28px;
-              background: #ffffff;
-              border-radius: 4px;
               display: flex;
-              justify-content: center;
               align-items: center;
-              cursor: pointer;
+              justify-content: center;
+              width: 28px;
+              height: 28px;
               margin-right: 8px;
+              cursor: pointer;
+              background: #fff;
+              border-radius: 4px;
             }
+
             .sele {
               background: #f0f0f0;
             }
+
             .sort {
               img {
                 width: 14px;
                 height: 12px;
               }
             }
+
             .down {
               img {
                 width: 16px;
@@ -1067,40 +1120,47 @@ export default {
 
           .liju_main {
             margin-top: 24px;
+
             > div {
-              margin-top: 0;
-              padding: 0;
-              height: 26px;
               display: flex;
+              height: 26px;
+              padding: 0;
+              margin-top: 0;
+
               > div {
                 display: flex;
               }
+
               > :nth-child(1) {
+                justify-content: flex-end;
                 width: 16px;
                 margin-right: 16px;
-                justify-content: flex-end;
               }
+
               .p1 {
                 width: 117px;
+
                 // white-space: nowrap;
                 // overflow: hidden;
                 // text-overflow: ellipsis;
                 font-size: 12px;
               }
+
               .p2 {
-                font-family: 'FZJCGFKTK';
+                display: flex;
+                justify-content: center;
                 width: 469px;
                 height: 22px;
                 margin-left: 16px;
-                font-weight: 400;
+                overflow: hidden;
+                font-family: 'FZJCGFKTK';
                 font-size: 14px;
+                font-weight: 400;
                 line-height: 22px;
-                color: #000000;
-                opacity: 1;
-                display: flex;
-                justify-content: center;
-                overflow: hidden;
+                color: #000;
                 white-space: nowrap;
+                opacity: 1;
+
                 > :nth-child(1) {
                   // direction: rtl;
                   // unicode-bidi: plaintext;
@@ -1108,16 +1168,17 @@ export default {
                   display: flex;
                   justify-content: end;
                   width: 224px;
-                  white-space: nowrap;
                   overflow: hidden;
+                  white-space: nowrap;
                 }
+
                 > :nth-child(3) {
-                  direction: ltr;
-                  unicode-bidi: plaintext;
-                  text-align: left;
                   width: 224px;
-                  white-space: nowrap;
                   overflow: hidden;
+                  text-align: left;
+                  white-space: nowrap;
+                  direction: ltr;
+                  unicode-bidi: plaintext;
                 }
               }
             }
@@ -1126,71 +1187,86 @@ export default {
       }
     }
   }
+
   .bottom {
-    margin-top: 16px;
     padding-bottom: 23px;
+    margin-top: 16px;
+
     .from {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
       //   text-align: right;
       margin-right: 16px;
       font-size: 14px;
       line-height: 16px;
-      color: #000000;
+      color: #000;
       opacity: 0.2;
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
+
       img {
         width: 24px;
         margin-left: 24px;
       }
     }
+
     .wordDetail {
       width: 538px;
-      margin-left: 40px;
       padding-bottom: 23px;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+      margin-left: 40px;
+      border-bottom: 1px solid rgba(0, 0, 0, 10%);
+
       p {
         margin: 0;
       }
+
       .word {
-        font-weight: bold;
         font-size: 24px;
+        font-weight: bold;
         line-height: 28px;
-        color: #000000;
+        color: #000;
       }
+
       .yinpin {
+        display: flex;
+        margin-top: 16px;
         font-size: 16px;
         line-height: 150%;
-        color: #000000;
-        margin-top: 16px;
-        display: flex;
+        color: #000;
+
         > div {
-          height: 24px;
           display: flex;
           align-items: center;
+          height: 24px;
+
           > :nth-child(1) {
             margin-right: 5px;
           }
         }
+
         > :nth-child(2) {
           margin-left: 27px;
         }
+
         img {
-          margin-left: 10px;
           width: 24px;
           height: 24px;
+          margin-left: 10px;
           cursor: pointer;
         }
       }
+
       .jieshu {
+        display: flex;
         margin-top: 16px;
         font-size: 16px;
         line-height: 150%;
-        color: #000000;
-        display: flex;
+        color: #000;
+
         > :nth-child(1) {
           width: 30px;
         }
+
         :nth-child(2) {
           width: 524px;
         }
@@ -1204,44 +1280,47 @@ export default {
 .is-dark {
   z-index: 99999 !important;
 }
+
 .NPC-Big-Book-preview-red {
   .wordDetailChs {
     .zhedie-white {
       .topTitle {
+        box-sizing: border-box;
+        box-sizing: border-box;
         height: 40px;
         background: #fff !important;
-        border: 1px solid rgba(0, 0, 0, 0.1);
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        border-radius: 8px 8px 0px 0px;
+        border: 1px solid rgba(0, 0, 0, 10%);
+        border-radius: 8px 8px 0 0;
       }
     }
   }
 }
+
 .NPC-Big-Book-preview-green {
   .wordDetailChs {
     .zhedie-white {
       .topTitle {
+        box-sizing: border-box;
+        box-sizing: border-box;
         height: 40px;
         background: #fff !important;
-        border: 1px solid rgba(0, 0, 0, 0.1);
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        border-radius: 8px 8px 0px 0px;
+        border: 1px solid rgba(0, 0, 0, 10%);
+        border-radius: 8px 8px 0 0;
       }
     }
   }
 }
+
 .NPC-Big-Book-preview-brown {
   .wordDetailChs {
     .zhedie-white {
       .topTitle {
+        box-sizing: border-box;
+        box-sizing: border-box;
         height: 40px;
         background: #fff !important;
-        border: 1px solid rgba(0, 0, 0, 0.1);
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        border-radius: 8px 8px 0px 0px;
+        border: 1px solid rgba(0, 0, 0, 10%);
+        border-radius: 8px 8px 0 0;
       }
     }
   }