样式

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

@@ -7,7 +7,7 @@
         <div
           class="left"
           @click="submit"
-          :style="{ marginLeft: showPractice ? '97px' : '' }"
+          :style="{ marginLeft: '97px' }"
           v-if="
             tokenData &&
               tokenData.popedom_code_list &&
@@ -18,42 +18,44 @@
           文本分析
         </div>
       </div>
-      <template v-if="curQue.checkList.indexOf(1) > -1">
-        <el-switch
-          style="display: block"
-          v-model="showPhrases"
-          :active-color="activeColor"
-          inactive-color="rgba(0,0,0,0.1)"
-          active-text=""
-          inactive-text="本课生词"
-          @change="handleSwitchChange('showPractice', 'showWord')"
-        >
-        </el-switch>
-      </template>
-      <template v-if="curQue.checkList.indexOf(2) > -1">
-        <el-switch
-          style="display: block"
-          v-model="showPractice"
-          :active-color="activeColor"
-          inactive-color="rgba(0,0,0,0.1)"
-          active-text=""
-          inactive-text="语音练习"
-          @change="handleSwitchChange('showPhrases', 'showWord')"
-        >
-        </el-switch>
-      </template>
-      <template v-if="curQue.checkList.indexOf(3) > -1">
-        <el-switch
-          style="display: block"
-          v-model="showWord"
-          :active-color="activeColor"
-          inactive-color="rgba(0,0,0,0.1)"
-          active-text=""
-          inactive-text="取词"
-          @change="handleSwitchChange('showPhrases', 'showPractice')"
-        >
-        </el-switch>
-      </template>
+      <div class="right">
+        <template v-if="curQue.checkList.indexOf(1) > -1">
+          <el-switch
+            style="display: block"
+            v-model="showPhrases"
+            :active-color="activeColor"
+            inactive-color="rgba(0,0,0,0.1)"
+            active-text=""
+            inactive-text="New words in this lesson"
+            @change="handleSwitchChange('showPractice', 'showWord')"
+          >
+          </el-switch>
+        </template>
+        <template v-if="curQue.checkList.indexOf(2) > -1">
+          <el-switch
+            style="display: block"
+            v-model="showPractice"
+            :active-color="activeColor"
+            inactive-color="rgba(0,0,0,0.1)"
+            active-text=""
+            inactive-text="Pronunciation practice"
+            @change="handleSwitchChange('showPhrases', 'showWord')"
+          >
+          </el-switch>
+        </template>
+        <template v-if="curQue.checkList.indexOf(3) > -1">
+          <el-switch
+            style="display: block"
+            v-model="showWord"
+            :active-color="activeColor"
+            inactive-color="rgba(0,0,0,0.1)"
+            active-text=""
+            inactive-text="取词"
+            @change="handleSwitchChange('showPhrases', 'showPractice')"
+          >
+          </el-switch>
+        </template>
+      </div>
       <!-- <div class="setting-fontsize">
         <a @click="handleFontsize('-')"
           ><img src="../../../../assets/newImage/common/btn-reduce.png"
@@ -619,7 +621,7 @@ export default {
   }
   .ArticleView-header {
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
     align-items: center;
     margin-bottom: 16px;
     position: relative;
@@ -640,6 +642,9 @@ export default {
         margin-right: 4px;
       }
     }
+    .right {
+      display: flex;
+    }
     .setting-fontsize {
       display: flex;
       margin-left: 24px;