卡片

src/components/Adult/preview/ArticleViewChs/WordModelChs.vue

@@ -336,8 +336,8 @@ export default {
 }
 .NNPE-wordDetail {
   position: fixed;
-  width: 260px;
-  height: 200px;
+//   width: 260px;
+//   height: 200px;
 //   background: #cc0;
 }
 </style>

src/components/Adult/preview/components/AudioRed.vue

@@ -13,8 +13,8 @@ export default {
         return {
             audio: new Audio(),
             voiceSrc: "",
-            // voicePauseSrc: require("../../assets/common/icon-voice-red.png"),
-            // voicePlaySrc: require("../../assets/common/icon-voice-red-play.png"),
+            voicePauseSrc: require("../../../../assets/NPC/play-red.png"),
+            voicePlaySrc: require("../../../../assets/NPC/icon-voice-play-red.png"),
         };
     },
     computed: {},

src/components/Adult/preview/components/Strockplayredline.vue

@@ -57,10 +57,10 @@ export default {
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-    // let _this = this;
-    // _this.$nextTick(() => {
-    //   _this.initHanziwrite();
-    // });
+    let _this = this;
+    _this.$nextTick(() => {
+      _this.initHanziwrite();
+    });
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
@@ -76,13 +76,13 @@ export default {
 .strockplayRedInner {
   position: relative;
 
-  width: 126px; //444px
+  width: 128px; //444px
   height: 100%; //480px
 }
 
 .character-target-div {
-  width: 126px;
-  height: 126px;
+  width: 128px;
+  height: 128px;
   background: #fff url("../../../../assets/NPC/chinaTianRed.png") center no-repeat;
   background-size: 100% 100%;
   display: flex;
@@ -93,8 +93,8 @@ export default {
 }
 .strock-play-box {
   position: absolute;
-  right: -1px;
-  top: -1px;
+  right: -2px;
+  top: -2px;
   z-index: 999;
   width: 32px;
   height: 32px;

src/components/Adult/preview/components/Wordcard.vue

@@ -35,17 +35,17 @@
     <div class="bwc-more-intp" @click="viewIntp">更多释义</div>
     <div class="bwc-footer">
       <button class="bwc-btn">
-        <!-- <img
-          src="../../assets/common/icon-collect-red.png"
+        <img
+          src="../../../../assets/NPC/icon-collect-red.png"
           class="collect-icon"
-        /> -->
+        />
         收藏
       </button>
       <button class="bwc-btn" @click="writeWord">
-        <!-- <img
-          src="../../assets/common/icon-write-red.png"
+        <img
+          src="../../../../assets/NPC/icon-write-red.png"
           class="collect-icon"
-        /> -->
+        />
         写一写
       </button>
     </div>
@@ -185,16 +185,19 @@ export default {
     width: 100%;
     display: flex;
     justify-content: flex-end;
+    position: absolute;
+    top: 16px;
+    right: 24px;
     > i {
       cursor: pointer;
     }
   }
-  min-width: 312px;
+  min-width: 304px;
   min-height: 360px;
   background: #ffffff;
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
   border-radius: 8px;
-  padding: 24px;
+  padding: 30px 24px 24px;
   box-sizing: border-box;
   .bwc-top {
     margin-bottom: 16px;
@@ -207,13 +210,14 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
-    min-width: 130px;
-    height: 130px;
+    min-width: 128px;
+    height: 128px;
     margin: 0 auto;
     margin-bottom: 16px;
-    border: 2px solid #ff5757;
+    border: 2px solid #DE4444;
     border-radius: 8px;
     box-sizing: border-box;
+    overflow: hidden;
     .strockplay {
       display: flex;
       justify-content: center;
@@ -221,8 +225,8 @@ export default {
     }
     .bwc-line {
       width: 2px;
-      height: 126px;
-      background: #ff5757;
+      height: 128px;
+      background: #DE4444;
     }
   }
   .bwc-tolength{
@@ -262,16 +266,18 @@ export default {
       display: flex;
       justify-content: center;
       align-items: center;
-      color: #ff5757;
-      background: rgba(255, 87, 87, 0.1);
-      border-radius: 4px;
+      color: #000000;
+      background: #ffffff;
+      border-radius: 8px;
       outline: 0;
       border: 0;
       cursor: pointer;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      font-size: 16px;
       > img {
         width: 24px;
         height: 24px;
-        margin-right: 8px;
+        margin-right: 4px;
       }
     }
   }