newWord

src/components/Adult/common/Header.vue

@@ -1,691 +0,0 @@
-<template>
-  <!-- 顶部登录导航 -->
-  <div class="LoginNav">
-    <div class="logo">
-      <span class="logo-img"> logo </span>
-      <el-menu
-        :default-active="activeIndex"
-        class="el-menu-demo"
-        mode="horizontal"
-        @select="handleSelect"
-        text-color="#000"
-        active-text-color="#FF9900"
-      >
-        <el-menu-item index="1">主页</el-menu-item>
-        <el-menu-item index="2">
-          <template v-if="projectList.length > 1">
-            <el-dropdown trigger="click" @command="handleCommand">
-              <span
-                class="el-dropdown-link"
-                :style="{ color: activeIndex == 2 ? '#FF9900' : '#000' }"
-              >
-                {{ projectName }}
-                <!-- SYSTEM -->
-                <i class="el-icon-arrow-down el-icon--right"></i>
-              </span>
-              <el-dropdown-menu slot="dropdown" style="min-width: 278px">
-                <el-dropdown-item
-                  :class="i == LoginNavIndex ? 'menuActive' : ''"
-                  :command="i"
-                  :key="i"
-                  class="projectList"
-                  v-for="(item, i) in projectList"
-                >
-                  <img
-                    style="position: relative; width: 24px"
-                    :src="require('../../assets/login/' + item.img + '.png')"
-                    alt=""
-                  />
-                  <span style="margin-left: 16px">
-                    {{ item.name }}
-                  </span>
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </template>
-          <template v-else>{{
-            projectList.length > 0 && projectList[0].name
-          }}</template>
-        </el-menu-item>
-      </el-menu>
-    </div>
-    <div class="userName">
-      <template>
-        <el-dropdown
-          style="margin-right: 16px; cursor: pointer"
-          trigger="click"
-          @command="changeLang"
-        >
-          <span class="el-dropdown-link" style="color: #000">
-            {{ lang }}<i class="el-icon-arrow-down el-icon--right"></i>
-          </span>
-          <el-dropdown-menu slot="dropdown" style="width: 200px">
-            <el-dropdown-item
-              v-for="item in language_list"
-              :key="item.language_type"
-              :command="item"
-              >{{ item.language_name }}</el-dropdown-item
-            >
-          </el-dropdown-menu>
-        </el-dropdown>
-      </template>
-      <div v-if="!userMessage" class="selectLoginOrRegistration">
-        <span @click="cutLoginReg">登录</span>
-      </div>
-      <!-- 用户头像和用户名 -->
-      <div class="user" v-else>
-        <img
-          @click="userShow = !userShow"
-          class="headPhoto"
-          :src="
-            userMessage.image_url
-              ? userMessage.image_url
-              : require('../../assets/login/Group3214.png')
-          "
-          alt=""
-        />
-        <span @click="userShow = !userShow">{{
-          userMessage.user_real_name
-        }}</span>
-        <div class="userShow" v-show="userShow">
-          <p>
-            <img src="../../assets/login/project7.png" alt="" />
-            个人中心
-          </p>
-          <p @click="QuitLogin">
-            <img src="../../assets/login/Frame77.png" alt="" />
-            退出登录
-          </p>
-        </div>
-      </div>
-      <!-- 消息 铃铛图片 -->
-      <div class="message">
-        <img src="../../assets/login/Vector.png" alt="" />
-        <span class="redDot"></span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from "vuex";
-import { getToken, removeToken } from "@/utils/auth";
-import Cookies from "js-cookie";
-import { getContent, getStaticContent } from "@/api/ajax";
-import { setI18nLang } from "@/utils/i18n";
-
-export default {
-  name: "LayoutHeader",
-  props: [],
-  data() {
-    return {
-      activeIndex: "2", // 主导航索引
-      LoginNavIndex: 0, //下拉框导航索引
-      projectName: "个人中心",
-      projectList: [
-        {
-          id: 0,
-          name: "教学中心",
-          img: "project1-1",
-          selectImg: "project1-1-1",
-          text: "帮助您快速完成课程及任务安排，快速清晰的完成学习任务。",
-        },
-        {
-          id: 1,
-          name: "教材管理系统",
-          img: "project1-1",
-          selectImg: "project1-1-1",
-          text: "帮您快速定制生动、有趣、实用的数字教材。",
-        },
-        {
-          id: 2,
-          name: "教培中心",
-          img: "project2-2-2",
-          selectImg: "project2-2",
-          text: "名师授课，丰富的课程体系，快速扎实帮您提升教学能力。",
-        },
-        {
-          id: 3,
-          name: "教研中心",
-          img: "project6-6-6",
-          selectImg: "project6-6",
-          text: "丰富的教学资料和珍贵的文献可以在线查看或下载。",
-        },
-        // 丰富的题库将帮助您快速编写实用、准确、全面的试卷。
-        {
-          id: 4,
-          name: "考试中心",
-          img: "project6-6-6",
-          selectImg: "project6-6",
-          text: "丰富的教学资料和珍贵的文献可以在线查看或下载。",
-        },
-        {
-          id: 5,
-          name: "学习中心",
-          img: "project4-4-4",
-          selectImg: "project4-4",
-          text: "在这里可以很容易地找到数字教科书、学习材料和丰富的课程。",
-        },
-        {
-          id: 6,
-          // Teacher training center
-          name: "个人中心",
-          img: "project3-3-3",
-          selectImg: "project3-3",
-          text: "您收集和购买的所有资源都可以在这里轻松找到。",
-        },
-      ],
-      teacherProList: [
-        //普通教师
-        {
-          id: 0,
-          name: "教学中心",
-          img: "project1",
-        },
-        {
-          id: 2,
-          name: "教培中心",
-          img: "project3",
-        },
-        {
-          id: 3,
-          name: "教研中心",
-          img: "project4",
-        },
-        {
-          id: 5,
-          name: "学习中心",
-          img: "project6",
-        },
-        {
-          id: 6,
-          name: "个人中心",
-          img: "project7",
-        },
-      ],
-      stuProList: [
-        {
-          id: 0,
-          name: "教学中心",
-          img: "project1",
-        },
-        {
-          id: 5,
-          name: "学习中心",
-          img: "project6",
-        },
-        {
-          id: 6,
-          name: "个人中心",
-          img: "project7",
-        },
-      ],
-      userMessage: null,
-      userShow: false,
-      language_list: [],
-      lang: "",
-    };
-  },
-  watch: {},
-  computed: {
-    ...mapGetters(["language_type"]),
-  },
-  methods: {
-    // 切换导航
-    handleSelect(key, keyPath) {
-      this.activeIndex = key;
-      if (this.activeIndex == "1") {
-        window.location.href = "/";
-      }
-    },
-    // 切换项目
-    handleCommand(command) {
-      let _this = this;
-      _this.LoginNavIndex = command;
-      if (!_this.userMessage) {
-        _this.$message.warning("请先登录");
-        this.projectName = "个人中心";
-        window.location.href = "/";
-        return;
-      }
-      _this.projectName = _this.projectList[command].name;
-      let id = _this.projectList[command].id;
-      if (id == 0) {
-        // 教学管理系统
-        location.href = `/GCLS-Learn/#/EnterSys`;
-      } else if (id == 1) {
-        // 教材管理系统
-        location.href = `/GCLS-Book/#/EnterSys`;
-      } else if (id == 2) {
-        // 教培中心
-        location.href = `/GCLS-TRC/#/EnterSys`;
-      } else if (id == 3) {
-        // 教研中心
-        location.href = `/GCLS-TC/#/EnterSys`;
-      } else if (id == 4) {
-        // 考试中心
-        location.href = `/GCLS-Test/#/EnterSys`;
-      } else if (id == 5) {
-        // 学习中心
-        location.href = `/GCLS-LC/#/EnterSys`;
-      } else {
-        // 个人中心
-        location.href = `/GCLS-Personal/#/EnterSys`;
-      }
-    },
-    handleCommand2(command) {
-      let _this = this;
-      _this.LoginNavIndex = command;
-      if (!_this.userMessage) {
-        this.$message.warning("Please login first");
-        this.projectName = "考试中心";
-        window.location.href = "/";
-        return;
-      }
-      let MethodName = "login_control-CreateAccessCode";
-      let acsCode = null;
-      getContent(MethodName, {}).then((res) => {
-        acsCode = res.access_code;
-        _this.projectName = this.projectList[command].name;
-        let id = this.projectList[command].id;
-
-        if (id == 0) {
-          // 教学管理系统
-          location.href = `/GCLS-Learn/#/EnterSys?AccessCode=${acsCode}`;
-        } else if (id == 1) {
-          // 教材管理系统
-          location.href = `/GCLS-Book/#/EnterSys?AccessCode=${acsCode}`;
-        } else if (id == 2) {
-          // 教培中心
-          location.href = `/GCLS-TRC/#/EnterSys?AccessCode=${acsCode}`;
-        } else if (id == 3) {
-          // 教研中心
-          location.href = `/GCLS-TC/#/EnterSys?AccessCode=${acsCode}`;
-        } else if (id == 4) {
-          // 考试中心
-          location.href = `/GCLS-Test/#/EnterSys?AccessCode=${acsCode}`;
-        } else if (id == 5) {
-          // 学习中心
-          location.href = `/GCLS-LC/#/EnterSys?AccessCode=${acsCode}`;
-        } else {
-          // 个人中心
-          location.href = `/GCLS-Personal/#/EnterSys?AccessCode=${acsCode}`;
-        }
-      });
-    },
-    // 切换登录的注册
-    cutLoginReg() {
-      window.location.href = "/";
-    },
-    QuitLogin() {
-      removeToken();
-      this.userShow = false;
-      this.userMessage = null;
-      window.location.href = "/";
-    },
-    getLangList() {
-      let MethodName = "language_manager-GetLanguageList";
-      let data = {};
-      getStaticContent(MethodName, data).then((res) => {
-        this.language_list = res.language_list;
-        for (let i = 0; i < this.language_list.length; i++) {
-          let item = this.language_list[i];
-          if (item.language_type == this.language_type) {
-            this.lang = item.language_name;
-            break;
-          }
-        }
-      });
-    },
-    async changeLang(command) {
-      this.lang = command.language_name;
-      let lang_type = command.language_type;
-      await setI18nLang(lang_type);
-      this.$router.go(0);
-    },
-    handleProList(list) {
-      let projectList = [];
-      if (list.length == 0) {
-        let arr = [
-          {
-            id: 2,
-            name: "教培中心",
-            img: "project2-2-2",
-            selectImg: "project2-2",
-            text: "名师授课，丰富的课程体系，快速扎实帮您提升教学能力。",
-          },
-          {
-            id: 3,
-            name: "教研中心",
-            img: "project6-6-6",
-            selectImg: "project6-6",
-            text: "丰富的教学资料和珍贵的文献可以在线查看或下载。",
-          },
-          {
-            id: 5,
-            name: "学习中心",
-            img: "project4-4-4",
-            selectImg: "project4-4",
-            text: "在这里可以很容易地找到数字教科书、学习材料和丰富的课程。",
-          },
-          {
-            id: 6,
-            // Teacher training center
-            name: "个人中心",
-            img: "project3-3-3",
-            selectImg: "project3-3",
-            text: "您收集和购买的所有资源都可以在这里轻松找到。",
-          },
-        ];
-        projectList = arr;
-      } else {
-        if (list.includes(2000001)) {
-          projectList = JSON.parse(JSON.stringify(this.teacherProList));
-          for (let i = 0; i < list.length; i++) {
-            let code = list[i];
-            if (code == 2000003) {
-              projectList.push({
-                id: 1,
-                name: "教材管理系统",
-                img: "project1-1",
-                selectImg: "project1-1-1",
-                text: "帮您快速定制生动、有趣、实用的数字教材。",
-              });
-            }
-            if (code == 2000005) {
-              projectList.push({
-                id: 4,
-                name: "考试中心",
-                img: "project5-5-5",
-                selectImg: "project5-5",
-                text: "丰富的题库将帮助您快速编写实用、准确、全面的试卷。",
-              });
-            }
-          }
-        } else {
-          for (let i = 0; i < list.length; i++) {
-            let code = list[i];
-            if (code == 2000002) {
-              projectList.push({
-                id: 0,
-                name: "教学管理系统",
-                img: "project1-1-1",
-                selectImg: "project1-1",
-                text: "帮助您快速完成课程及任务安排，快速清晰的完成学习任务。",
-              });
-            } else if (code == 2000003) {
-              projectList.push({
-                id: 1,
-                name: "教材管理系统",
-                img: "project1-1",
-                selectImg: "project1-1-1",
-                text: "帮您快速定制生动、有趣、实用的数字教材。",
-              });
-            } else if (code == 2000004) {
-              projectList.push({
-                id: 2,
-                name: "教师培训中心",
-                img: "project2-2-2",
-                selectImg: "project2-2",
-                text: "名师授课，丰富的课程体系，快速扎实帮您提升教学能力。",
-              });
-            } else if (code == 2000005) {
-              projectList.push({
-                id: 4,
-                name: "考试中心",
-                img: "project5-5-5",
-                selectImg: "project5-5",
-                text: "丰富的题库将帮助您快速编写实用、准确、全面的试卷。",
-              });
-            } else if (code == 2000006) {
-              projectList.push({
-                id: 3,
-                name: "教研中心",
-                img: "project4-4-4",
-                selectImg: "project4-4",
-                text: "丰富的教学资料和珍贵的文献可以在线查看或下载。",
-              });
-            }
-          }
-          projectList.push({
-            id: 6,
-            // Teacher training center
-            name: "个人中心",
-            img: "project3-3-3",
-            selectImg: "project3-3",
-            text: "您收集和购买的所有资源都可以在这里轻松找到。",
-          });
-        }
-      }
-      // 排序
-      for (var i = 0; i < projectList.length - 1; i++) {
-        for (var j = 0; j < projectList.length - 1 - i; j++) {
-          // 相邻元素两两对比，元素交换，大的元素交换到后面
-          if (projectList[j].id > projectList[j + 1].id) {
-            var temp = projectList[j];
-            projectList[j] = projectList[j + 1];
-            projectList[j + 1] = temp;
-          }
-        }
-      }
-      console.log(projectList);
-      return projectList;
-    },
-  },
-  created() {},
-  mounted() {
-    let _this = this;
-    let user = getToken();
-    if (user) {
-      _this.userMessage = JSON.parse(user);
-      let popedom_code_list = _this.userMessage.popedom_code_list;
-      if (_this.userMessage.user_type == "TEACHER") {
-        _this.projectList = _this.handleProList(popedom_code_list);
-      } else if (_this.userMessage.user_type == "STUDENT") {
-        _this.projectList = _this.stuProList;
-      }
-      _this.projectList.forEach((item, index) => {
-        if (item.id == 6) {
-          _this.LoginNavIndex = index;
-        }
-      });
-    }
-    _this.getLangList();
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.LoginNav {
-  height: 74px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  padding: 0px 24px;
-  z-index: 999;
-  background: #ffffff;
-  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
-  font-family: "sourceR";
-  .logo {
-    &-img {
-      font-style: normal;
-      font-weight: 600;
-      font-size: 30px;
-      font-variant: small-caps;
-      color: #000000;
-      margin-right: 29px;
-      line-height: 74px;
-    }
-    display: flex;
-    align-items: center;
-    .el-menu-demo {
-      background: rgba(0, 0, 0, 0);
-      // margin-left: 100px;
-      li:hover {
-        background: none;
-      }
-      li {
-        font-size: 16px;
-        background: none;
-      }
-    }
-    // 取消组件默认的样式
-    .el-menu.el-menu--horizontal {
-      border-bottom: none;
-    }
-  }
-  .userName {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    .seek {
-      margin-right: 100px;
-      position: relative;
-      img {
-        left: 10px;
-        top: 11px;
-        position: absolute;
-      }
-    }
-    .flag {
-      position: relative;
-      top: 5px;
-    }
-    .headPhoto {
-      width: 50px;
-      height: 50px;
-      // background: url("../assets/teacherTrain/image 4.png") no-repeat 100% 100%;
-      // background-size: 100%;
-      border-radius: 50%;
-      // margin-right: 10px;
-    }
-    .message {
-      height: 100%;
-      position: relative;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin-left: 23px;
-      img {
-        width: 18px;
-        height: 24px;
-      }
-      .redDot {
-        position: absolute;
-        top: 2px;
-        right: -2px;
-        width: 6px;
-        height: 6px;
-        display: inline-block;
-        background: red;
-        border-radius: 50%;
-      }
-    }
-    .selectLoginOrRegistration {
-      display: flex;
-      height: 32px;
-      border: 1px solid #ffffff;
-      box-sizing: border-box;
-      border-radius: 4px;
-      justify-content: space-evenly;
-      align-items: center;
-      padding: 0 16px;
-      > span {
-        cursor: pointer;
-        font-size: 16px;
-        color: #fff;
-      }
-    }
-    .user {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-      position: relative;
-      > img {
-        width: 34px;
-        height: 34px;
-      }
-      > span {
-        font-size: 20px;
-        padding-left: 10px;
-      }
-      .userShow {
-        position: absolute;
-        width: 156px;
-        height: 96px;
-        background: #ffffff;
-        box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
-        border-radius: 8px;
-        bottom: -100px;
-        color: black;
-        img {
-          width: 24px;
-          height: 24px;
-          margin-right: 10px;
-        }
-        p {
-          font-size: 16px;
-          height: 40px;
-          display: flex;
-          align-items: center;
-          padding-left: 20px;
-          margin: 0;
-          margin-top: 5px;
-        }
-        > p:hover {
-          background: #f2f2f2;
-        }
-      }
-    }
-  }
-}
-</style>
-<style lang="scss">
-.LoginNav {
-  .el-dropdown-menu__item {
-    line-height: 40px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    > span {
-      font-family: "sourceR";
-      font-size: 16px;
-    }
-  }
-  .el-menu--horizontal > .el-menu-item {
-    height: 74px;
-    line-height: 78px;
-  }
-  .el-dropdown {
-    display: block;
-    > span {
-      font-family: "sourceR";
-      font-size: 16px;
-    }
-  }
-}
-.projectList {
-  &.el-dropdown-menu__item {
-    line-height: 40px;
-    display: flex;
-    align-items: center;
-    color: #000000;
-    > img {
-      top: 0;
-    }
-    > span {
-      line-height: 40px;
-      font-family: "sourceR";
-    }
-  }
-  &:hover {
-    background: rgba(255, 153, 0, 0.1) !important;
-    color: #000 !important;
-  }
-  &.menuActive {
-    background: #ff9900;
-  }
-}
-</style>

src/components/Adult/common/NewordPhraseModule.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="Big-Book-input">
     <div class="Big-Book-content m">
-      <div class="Big-Book-main">
+      <div class="Big-Book-main2">
         <div class="adult-book-input-item">
           <span class="adult-book-lable">汉字：</span>
           <el-input
@@ -12,7 +12,7 @@
             class="adult-book-input"
             :autosize="{ minRows: 2 }"
           ></el-input>
-          <el-button type="danger" size="small" @click="deleteGroup"
+          <el-button type="danger" size="small" @click="deleteGroup2"
             >删除</el-button
           >
         </div>
@@ -88,7 +88,7 @@ export default {
   components: {
     Upload,
   },
-  props: ["curQueItem", "index", "type", "deleteGroup"],
+  props: ["curQueItem", "index", "sIndex", "type", "deleteGroup"],
   data() {
     return {
       mp3Number: 1,
@@ -158,6 +158,9 @@ export default {
       //this.articleImgList = articleImgRes;
       this.curQueItem.mp3_list = JSON.parse(JSON.stringify(articleImgRes));
     },
+    deleteGroup2() {
+      this.deleteGroup(this.index, this.sIndex);
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -196,9 +199,10 @@ export default {
       color: #000;
       margin-right: 15px;
     }
-    .Big-Book-main {
+    .Big-Book-main2 {
       position: relative;
       width: 100%;
+      border-bottom: 1px #999 dotted;
       > div {
         margin-bottom: 10px;
         &.Big-Book-pinyin,

src/components/Adult/inputModules/Neword.vue

@@ -16,17 +16,30 @@
       <div
         class="Big-Book-main"
         v-for="(item, index) in curQue.option"
-        :key="item + index"
+        :key="'newWord' + index"
         style="border-bottom: 1px #ccc solid; margin-bottom: 20px"
       >
-        <NewordPhraseModule
-          :curQueItem="item"
-          :index="index"
-          :type="curQue.type"
-          :deleteGroup="deleteGroup"
-        />
+        <div
+          class="Big-Book-main-inner"
+          v-for="(sItem, sIndex) in item"
+          :key="'newWord_' + sIndex"
+        >
+          <NewordPhraseModule
+            :curQueItem="sItem"
+            :index="index"
+            :sIndex="sIndex"
+            :type="curQue.type"
+            :deleteGroup="deleteGroup"
+          />
+        </div>
+        <div class="addoption addoption2" @click="saddoption(item)">
+          添加字词
+        </div>
+        <el-button size="mini" type="danger" @click="delsItem(index)">
+          删除本组
+        </el-button>
       </div>
-      <div class="addoption" @click="addoption">添加单词</div>
+      <div class="addoption" @click="addoption">添加一组</div>
     </div>
   </div>
 </template>
@@ -49,14 +62,16 @@ export default {
         name: "生词",
         title: "",
         option: [
-          {
-            new_word: "",
-            cixing: "", //词性
-            definition_list: [""], //需要增加词性
-            pinyin: "",
-            img_list: [],
-            mp3_list: [],
-          },
+          [
+            {
+              new_word: "",
+              cixing: "", //词性
+              definition_list: [""], //需要增加词性
+              pinyin: "",
+              img_list: [],
+              mp3_list: [],
+            },
+          ],
         ],
       },
     };
@@ -75,11 +90,25 @@ export default {
       let obj = res_data.option[0];
       this.curQue.option.push(obj);
     },
-    deleteGroup(index) {
-      if (this.curQue.option.length == 1) {
+    deleteGroup(index, sIndex) {
+      if (this.curQue.option[0].length == 1) {
         this.$message.warning("至少剩余1个，不能全部删除");
         return;
       }
+      this.curQue.option[index].splice(sIndex, 1);
+    },
+    saddoption(item) {
+      let con = {
+        new_word: "",
+        cixing: "", //词性
+        definition_list: [""], //需要增加词性
+        pinyin: "",
+        img_list: [],
+        mp3_list: [],
+      };
+      item.push(con);
+    },
+    delsItem(index) {
       this.curQue.option.splice(index, 1);
     },
   },
@@ -118,6 +147,10 @@ export default {
       margin-right: 15px;
     }
     .Big-Book-main {
+      background: rgba(230, 229, 229, 0.3);
+      border: 1px #999 solid;
+      border-radius: 8px;
+      padding: 20px;
       > div {
         margin-bottom: 10px;
         &.Big-Book-pinyin {
@@ -126,6 +159,8 @@ export default {
           align-items: center;
         }
       }
+      .Big-Book-main-inner {
+      }
     }
   }
   .addoption {
@@ -140,6 +175,9 @@ export default {
     text-align: center;
     line-height: 40px;
     cursor: pointer;
+    &.addoption2 {
+      width: 200px;
+    }
   }
   .Big-Book-con {
     padding-bottom: 6px;

src/components/Adult/preview/DialogueArticleViewChs/NormalModelChs.vue

@@ -16,13 +16,14 @@
     <template v-if="resArr.length > 0">
       <div class="NPC-sentences-list">
         <div class="NPC-article-empty">
-          <div class="empty-left"></div>
+          <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
           <div class="empty-right"></div>
         </div>
         <div
           :class="[
             'NNPE-detail',
             item.isTitle ? 'NNPE-detail-title' : '',
+            item.timeList.length > 0 &&
             curTime >= item.timeList[0].bg &&
             curTime <= item.timeList[item.timeList.length - 1].ed
               ? 'active'
@@ -31,7 +32,7 @@
           v-for="(item, index) in resArr"
           :key="'detail' + index"
         >
-          <div class="article-content">
+          <div :class="['article-content', isHasRemark ? 'hasRemark' : '']">
             <RoleChs :curRole="item.roleDetail" />
             <div class="wordsList-box">
               <img
@@ -44,7 +45,12 @@
                   v-for="(pItem, pIndex) in item.wordsList"
                   :key="'wordsList' + pIndex"
                   :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
-                  @click="handleChangeTime(item.timeList[pItem.sentIndex].bg)"
+                  @click="
+                    handleChangeTime(
+                      item.timeList.length > 0 &&
+                        item.timeList[pItem.sentIndex].bg
+                    )
+                  "
                 >
                   <template v-if="!pItem.width">
                     <template v-if="pItem.isShow">
@@ -63,6 +69,7 @@
                           <span
                             class="NNPE-chs"
                             :class="[
+                              item.timeList.length > 0 &&
                               curTime >=
                                 item.timeList[pItem.sentIndex].wordsResultList[
                                   pItem.wordIndex
@@ -82,6 +89,7 @@
                             class="NNPE-chs"
                             style="text-align: left"
                             :class="[
+                              item.timeList.length > 0 &&
                               curTime >=
                                 item.timeList[pItem.sentIndex].wordsResultList[
                                   pItem.wordIndex
@@ -106,6 +114,7 @@
                         <span
                           class="NNPE-chs"
                           :class="[
+                            item.timeList.length > 0 &&
                             curTime >=
                               item.timeList[pItem.sentIndex].wordsResultList[
                                 pItem.wordIndex
@@ -129,16 +138,19 @@
                     ></span>
                   </template>
                 </div>
+                <div v-if="item.enwords" class="enwords">
+                  {{ item.enwords }}
+                </div>
               </div>
               <img :src="articleImg[index + 1]" v-if="articleImg[index + 1]" />
             </div>
           </div>
-          <div class="remarkBox remark-top">
+          <div class="remarkBox remark-top" v-if="item.remarkDetail">
             <RemarkChs :remarkDetail="item.remarkDetail" />
           </div>
         </div>
         <div class="NPC-article-empty NPC-article-empty-bottom">
-          <div class="empty-left"></div>
+          <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
           <div class="empty-right"></div>
         </div>
         <div class="dia-article-record">
@@ -176,6 +188,7 @@ export default {
       top: 0,
       left: 0,
       articleImg: {}, // 文章图片
+      isHasRemark: false,
     };
   },
   computed: {},
@@ -194,6 +207,9 @@ export default {
       curQue.detail.forEach((dItem, dIndex) => {
         let roleDetail = this.getRole(dItem);
         let remarkDetail = dItem.remark;
+        if (remarkDetail && (remarkDetail.chs || remarkDetail.en)) {
+          this.isHasRemark = true;
+        }
         let paraArr = [];
         dItem.wordsList.forEach((sItem, sIndex) => {
           sItem.forEach((wItem, wIndex) => {
@@ -218,9 +234,17 @@ export default {
         let startLeg = dIndex == 0 ? 0 : curQue.detail[dIndex - 1].endLeg;
         let endLeg = startLeg + curSentencesLeg;
         dItem.endLeg = endLeg;
-        let timeList = curQue.wordTime.slice(startLeg, endLeg);
+        let timeList = [];
+        if (curQue.wordTime && curQue.wordTime.length > 0) {
+          timeList = curQue.wordTime.slice(startLeg, endLeg);
+        }
+        let enwords =
+          dItem.sentencesEn && dItem.sentencesEn.length > 0
+            ? dItem.sentencesEn.join(" ")
+            : "";
         let paraObj = {
           wordsList: paraArr,
+          enwords: enwords,
           timeList: timeList,
           roleDetail: roleDetail,
           remarkDetail: remarkDetail,
@@ -329,9 +353,14 @@ export default {
       > div {
         height: 24px;
         &.empty-left {
-          width: 553px;
+          width: 100%;
           box-sizing: border-box;
-          border-right: 1px rgba(0, 0, 0, 0.1) solid;
+
+          &.hasRemark {
+            width: 553px;
+            box-sizing: border-box;
+            border-right: 1px rgba(0, 0, 0, 0.1) solid;
+          }
         }
         &.empty-right {
           flex: 1;
@@ -365,10 +394,14 @@ export default {
       background: rgba(0, 0, 0, 0.06);
     }
     .article-content {
-      width: 553px;
+      width: 100%;
       box-sizing: border-box;
-      border-right: 1px rgba(0, 0, 0, 0.1) solid;
-      padding: 8px 0px 8px 23px;
+      padding: 8px 24px 8px 24px;
+      &.hasRemark {
+        width: 553px;
+        border-right: 1px rgba(0, 0, 0, 0.1) solid;
+        padding: 8px 0px 8px 23px;
+      }
       &.paraLast {
         padding-bottom: 24px;
       }
@@ -443,6 +476,13 @@ export default {
         }
       }
     }
+    .enwords {
+      font-family: "robot";
+      font-weight: normal;
+      font-size: 14px;
+      line-height: 22px;
+      color: rgba(0, 0, 0, 0.85);
+    }
     &.NNPE-detail-title {
       .wordsList-box {
         > div {

src/components/Adult/preview/DialogueArticleViewChs/PhraseModelChs.vue

@@ -16,7 +16,7 @@
     <template v-if="resArr.length > 0">
       <div class="NPC-sentences-list">
         <div class="NPC-article-empty">
-          <div class="empty-left"></div>
+          <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
           <div class="empty-right"></div>
         </div>
         <div
@@ -24,7 +24,7 @@
           v-for="(item, index) in resArr"
           :key="'detail' + index"
         >
-          <div class="article-content">
+          <div :class="['article-content', isHasRemark ? 'hasRemark' : '']">
             <RoleChs :curRole="item.roleDetail" />
             <div class="wordsList-box">
               <img
@@ -103,6 +103,9 @@
                     ></span>
                   </template>
                 </div>
+                <div v-if="item.enwords" class="enwords">
+                  {{ item.enwords }}
+                </div>
               </div>
               <img :src="articleImg[index + 1]" v-if="articleImg[index + 1]" />
             </div>
@@ -112,7 +115,7 @@
           </div>
         </div>
         <div class="NPC-article-empty NPC-article-empty-bottom">
-          <div class="empty-left"></div>
+          <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
           <div class="empty-right"></div>
         </div>
         <div class="dia-article-record">
@@ -166,6 +169,7 @@ export default {
       isShow: false,
       screenHeight: 0,
       cardHeight: 0,
+      isHasRemark: false,
     };
   },
   computed: {},
@@ -211,6 +215,9 @@ export default {
       curQue.detail.forEach((dItem, dIndex) => {
         let roleDetail = this.getRole(dItem);
         let remarkDetail = dItem.remark;
+        if (remarkDetail && (remarkDetail.chs || remarkDetail.en)) {
+          this.isHasRemark = true;
+        }
         let paraArr = [];
         dItem.wordsList.forEach((sItem, sIndex) => {
           sItem.forEach((wItem, wIndex) => {
@@ -230,9 +237,13 @@ export default {
             paraArr.push(obj);
           });
         });
-
+        let enwords =
+          dItem.sentencesEn && dItem.sentencesEn.length > 0
+            ? dItem.sentencesEn.join(" ")
+            : "";
         let paraObj = {
           wordsList: paraArr,
+          enwords: enwords,
           roleDetail: roleDetail,
           remarkDetail: remarkDetail,
         };
@@ -416,9 +427,14 @@ export default {
       > div {
         height: 24px;
         &.empty-left {
-          width: 553px;
+          width: 100%;
           box-sizing: border-box;
-          border-right: 1px rgba(0, 0, 0, 0.1) solid;
+
+          &.hasRemark {
+            width: 553px;
+            box-sizing: border-box;
+            border-right: 1px rgba(0, 0, 0, 0.1) solid;
+          }
         }
         &.empty-right {
           flex: 1;
@@ -452,14 +468,25 @@ export default {
       background: rgba(0, 0, 0, 0.06);
     }
     .article-content {
-      width: 553px;
+      width: 100%;
       box-sizing: border-box;
-      border-right: 1px rgba(0, 0, 0, 0.1) solid;
-      padding: 8px 0px 8px 23px;
+      padding: 8px 24px 8px 24px;
+      &.hasRemark {
+        width: 553px;
+        border-right: 1px rgba(0, 0, 0, 0.1) solid;
+        padding: 8px 0px 8px 23px;
+      }
       &.paraLast {
         padding-bottom: 24px;
       }
     }
+    .enwords {
+      font-family: "robot";
+      font-weight: normal;
+      font-size: 14px;
+      line-height: 22px;
+      color: rgba(0, 0, 0, 0.85);
+    }
     .NNPE-words {
       float: left;
       &-box {

src/components/Adult/preview/DialogueArticleViewChs/Practicechs.vue

@@ -58,25 +58,92 @@
                 class="sentence-box-inner"
                 :style="{ background: item.roleDetail.color.bg }"
               >
-                <div
-                  class="NNPE-words"
-                  v-for="(pItem, pIndex) in item.sentArr"
-                  :key="'wordsList' + pIndex"
-                  :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
-                >
-                  <template v-if="!pItem.width">
-                    <template v-if="pItem.isShow">
-                      <template
-                        v-if="
-                          item.sentArr[pIndex + 1].chs &&
-                          chsFhList.indexOf(item.sentArr[pIndex + 1].chs) > -1
-                        "
-                      >
-                        <span class="NNPE-words-box">
+                <div class="NNPE-words-box">
+                  <div
+                    class="NNPE-words"
+                    v-for="(pItem, pIndex) in item.sentArr"
+                    :key="'wordsList' + pIndex"
+                    :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
+                  >
+                    <template v-if="!pItem.width">
+                      <template v-if="pItem.isShow">
+                        <template
+                          v-if="
+                            item.sentArr[pIndex + 1].chs &&
+                            chsFhList.indexOf(item.sentArr[pIndex + 1].chs) > -1
+                          "
+                        >
+                          <span class="NNPE-words-box">
+                            <span
+                              v-if="isShowPY"
+                              class="NNPE-pinyin"
+                              :class="[
+                                pItem.className ? pItem.className : '',
+                                sentIndex == index ? 'wordBlank' : '',
+                              ]"
+                              >{{ pItem.pinyin }}</span
+                            >
+                            <span
+                              class="NNPE-chs"
+                              :class="[
+                                pItem.padding && isShowPY ? 'padding' : '',
+                                sentIndex == index ? 'wordBlank' : '',
+                              ]"
+                            >
+                              <template
+                                v-if="
+                                  pItem.timeList && pItem.timeList.length > 0
+                                "
+                              >
+                                <span
+                                  v-for="(wItem, wIndex) in pItem.leg"
+                                  :key="'ci' + wIndex + pIndex + index"
+                                  :class="[
+                                    pItem.timeList[wIndex] &&
+                                    curTime >= pItem.timeList[wIndex].wordBg &&
+                                    curTime <= curQue.wordTime[index].ed
+                                      ? 'active'
+                                      : '',
+                                    sentIndex == index ? 'wordBlank' : '',
+                                  ]"
+                                  >{{ pItem.chs[wIndex] }}</span
+                                >
+                              </template>
+                            </span>
+                          </span>
+                          <span class="NNPE-words-box">
+                            <span
+                              v-if="isShowPY"
+                              :class="[
+                                'NNPE-pinyin',
+                                sentIndex == index ? 'wordBlank' : '',
+                              ]"
+                              style="text-align: left"
+                              >{{ item.sentArr[pIndex + 1].pinyin }}</span
+                            >
+                            <span class="NNPE-chs" style="text-align: left">
+                              <span
+                                :class="[
+                                  pItem.timeList[pItem.leg - 1] &&
+                                  curTime >=
+                                    pItem.timeList[pItem.leg - 1].wordBg &&
+                                  curTime <= curQue.wordTime[index].ed
+                                    ? 'active'
+                                    : '',
+                                  sentIndex == index ? 'wordBlank' : '',
+                                ]"
+                              >
+                                {{ item.sentArr[pIndex + 1].chs }}</span
+                              >
+                            </span>
+                          </span>
+                        </template>
+                        <template v-else>
                           <span
                             v-if="isShowPY"
                             class="NNPE-pinyin"
                             :class="[
+                              pItem.padding ? 'padding' : '',
                               pItem.className ? pItem.className : '',
                               sentIndex == index ? 'wordBlank' : '',
                             ]"
@@ -101,86 +168,29 @@
                                   curTime <= curQue.wordTime[index].ed
                                     ? 'active'
                                     : '',
-                                  sentIndex == index ? 'wordBlank' : '',
                                 ]"
                                 >{{ pItem.chs[wIndex] }}</span
                               >
                             </template>
                           </span>
-                        </span>
-                        <span class="NNPE-words-box">
-                          <span
-                            v-if="isShowPY"
-                            :class="[
-                              'NNPE-pinyin',
-                              sentIndex == index ? 'wordBlank' : '',
-                            ]"
-                            style="text-align: left"
-                            >{{ item.sentArr[pIndex + 1].pinyin }}</span
-                          >
-                          <span class="NNPE-chs" style="text-align: left">
-                            <span
-                              :class="[
-                                pItem.timeList[pItem.leg - 1] &&
-                                curTime >=
-                                  pItem.timeList[pItem.leg - 1].wordBg &&
-                                curTime <= curQue.wordTime[index].ed
-                                  ? 'active'
-                                  : '',
-                                sentIndex == index ? 'wordBlank' : '',
-                              ]"
-                            >
-                              {{ item.sentArr[pIndex + 1].chs }}</span
-                            >
-                          </span>
-                        </span>
-                      </template>
-                      <template v-else>
-                        <span
-                          v-if="isShowPY"
-                          class="NNPE-pinyin"
-                          :class="[
-                            pItem.padding ? 'padding' : '',
-                            pItem.className ? pItem.className : '',
-                            sentIndex == index ? 'wordBlank' : '',
-                          ]"
-                          >{{ pItem.pinyin }}</span
-                        >
-                        <span
-                          class="NNPE-chs"
-                          :class="[
-                            pItem.padding && isShowPY ? 'padding' : '',
-                            sentIndex == index ? 'wordBlank' : '',
-                          ]"
-                        >
-                          <template
-                            v-if="pItem.timeList && pItem.timeList.length > 0"
-                          >
-                            <span
-                              v-for="(wItem, wIndex) in pItem.leg"
-                              :key="'ci' + wIndex + pIndex + index"
-                              :class="[
-                                pItem.timeList[wIndex] &&
-                                curTime >= pItem.timeList[wIndex].wordBg &&
-                                curTime <= curQue.wordTime[index].ed
-                                  ? 'active'
-                                  : '',
-                              ]"
-                              >{{ pItem.chs[wIndex] }}</span
-                            >
-                          </template>
-                        </span>
+                        </template>
                       </template>
                     </template>
-                  </template>
-                  <template v-else>
-                    <span
-                      :style="{
-                        height: pItem.height + 'px',
-                        width: pItem.width + 'px',
-                      }"
-                    ></span>
-                  </template>
+                    <template v-else>
+                      <span
+                        :style="{
+                          height: pItem.height + 'px',
+                          width: pItem.width + 'px',
+                        }"
+                      ></span>
+                    </template>
+                  </div>
+                </div>
+                <div
+                  v-if="item.enwords"
+                  :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
+                >
+                  {{ item.enwords }}
                 </div>
               </div>
             </div>
@@ -258,14 +268,15 @@ export default {
     handleData() {
       let resArr = [],
         timeArr = [],
-        sentArrTotal = [];
+        sentArrTotal = [],
+        enList = [];
       let curQue = JSON.parse(JSON.stringify(this.curQue));
       let wordTimeList = curQue.wordTime;
       curQue.detail.forEach((dItem, dIndex) => {
         let roleDetail = this.getRole(dItem);
+
         dItem.wordsList.forEach((sItem, sIndex) => {
           let sentArr = [];
-
           sItem.forEach((wItem, wIndex) => {
             let startIndex =
               wIndex == 0
@@ -297,6 +308,7 @@ export default {
           let obj = {
             roleDetail: roleDetail,
             sentArr: sentArr,
+            enwords: dItem.sentencesEn && dItem.sentencesEn[sIndex],
           };
           sentArrTotal.push(sentArr);
           resArr.push(obj);
@@ -414,7 +426,7 @@ export default {
           }
         });
       });
-      this.resObj = { sentList: resArr, timeList: timeList };
+      this.resObj = { sentList: resArr, timeList: timeList, enList: enList };
       console.log(this.resObj);
     },
     //判断是否有padding
@@ -536,6 +548,16 @@ export default {
       background: rgba(0, 0, 0, 0.06);
     }
   }
+  .enwords {
+    font-family: "robot";
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 22px;
+    color: rgba(0, 0, 0, 0.45);
+    &.wordBlank {
+      color: rgba(0, 0, 0, 0.85);
+    }
+  }
   .NNPE-detail {
     clear: both;
     overflow: hidden;

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

@@ -16,7 +16,7 @@
     <template v-if="resArr.length > 0">
       <div class="NPC-sentences-list">
         <div class="NPC-article-empty">
-          <div class="empty-left"></div>
+          <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
           <div class="empty-right"></div>
         </div>
         <div
@@ -108,13 +108,16 @@
                     ></span>
                   </template>
                 </div>
+                <div v-if="item.enwords" class="enwords">
+                  {{ item.enwords }}
+                </div>
               </div>
               <img :src="articleImg[index + 1]" v-if="articleImg[index + 1]" />
             </div>
           </div>
         </div>
         <div class="NPC-article-empty NPC-article-empty-bottom">
-          <div class="empty-left"></div>
+          <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
           <div class="empty-right"></div>
         </div>
         <div class="dia-article-record">
@@ -173,6 +176,7 @@ export default {
       wordIndex: -1,
       screenHeight: 0,
       cardHeight: 0,
+      isHasRemark: false,
     };
   },
   computed: {},
@@ -219,6 +223,9 @@ export default {
       curQue.detail.forEach((dItem, dIndex) => {
         let roleDetail = this.getRole(dItem);
         let remarkDetail = dItem.remark;
+        if (remarkDetail && (remarkDetail.chs || remarkDetail.en)) {
+          this.isHasRemark = true;
+        }
         let paraArr = [];
         dItem.wordsList.forEach((sItem, sIndex) => {
           sItem.forEach((wItem, wIndex) => {
@@ -244,8 +251,13 @@ export default {
         let endLeg = startLeg + curSentencesLeg;
         dItem.endLeg = endLeg;
         let timeList = curQue.wordTime.slice(startLeg, endLeg);
+        let enwords =
+          dItem.sentencesEn && dItem.sentencesEn.length > 0
+            ? dItem.sentencesEn.join(" ")
+            : "";
         let paraObj = {
           wordsList: paraArr,
+          enwords: enwords,
           timeList: timeList,
           roleDetail: roleDetail,
           remarkDetail: remarkDetail,
@@ -425,9 +437,14 @@ export default {
       > div {
         height: 24px;
         &.empty-left {
-          width: 553px;
+          width: 100%;
           box-sizing: border-box;
-          border-right: 1px rgba(0, 0, 0, 0.1) solid;
+
+          &.hasRemark {
+            width: 553px;
+            box-sizing: border-box;
+            border-right: 1px rgba(0, 0, 0, 0.1) solid;
+          }
         }
         &.empty-right {
           flex: 1;
@@ -468,6 +485,14 @@ export default {
         padding-bottom: 24px;
       }
     }
+    .enwords {
+      font-family: "robot";
+      font-weight: normal;
+      font-size: 14px;
+      line-height: 22px;
+      color: rgba(0, 0, 0, 0.85);
+    }
+
     .NNPE-words {
       float: left;
       &-box {

src/components/Adult/preview/WordPhrase.vue

@@ -33,20 +33,19 @@
           class="NPC-word-list"
           v-if="curQue.option && curQue.option.length > 0"
         >
-          <table
-            class="NPC-word-table"
-            cellspacing="0"
-            border="0"
-            cellpadding="0"
-          >
-            <tr
-              valign="top"
+          <ul class="NPC-word-table" cellspacing="0" border="0" cellpadding="0">
+            <li
+              class="NPC-word-tr"
               v-for="(item, index) in curQue.option"
               :key="'curQue.option' + index"
             >
-              <td class="NPC-word-td1" width="40">
+              <div
+                class="NPC-word-row"
+                v-for="(sItem, sIndex) in item"
+                :key="'curQue.option.child' + sIndex"
+              >
                 <template
-                  v-if="item.mp3_list.length > 0 && item.mp3_list[0].url"
+                  v-if="sItem.mp3_list.length > 0 && sItem.mp3_list[0].url"
                 >
                   <span
                     :class="[
@@ -56,36 +55,36 @@
                     @click="palyAudio(item.new_word, index)"
                   ></span>
                   <audio
-                    :id="item.new_word"
-                    :src="item.mp3_list[0].url"
+                    :id="sItem.new_word"
+                    :src="sItem.mp3_list[0].url"
                   ></audio>
                 </template>
-              </td>
-              <td class="NPC-word-tab-common" width="36" align="right">
-                {{ index + 1 }}.
-              </td>
-              <td width="120" class="NPC-word-tab-common NPC-word-tab-pinyin">
-                {{ item.pinyin }}
-              </td>
-              <td width="120" class="NPC-word-tab-common NPC-word-tab-word">
-                {{ item.new_word }}
-              </td>
-              <td width="48" class="NPC-word-tab-common NPC-word-tab-def">
-                {{ item.speech }}
-              </td>
-              <td
-                class="NPC-word-tab-common NPC-word-tab-def"
-                v-html="item.def_str"
-              ></td>
-              <td width="80">
-                <img
-                  src="../../../assets/NPC/detail-icon.png"
-                  class="detail-icon"
-                  @click="showDetail(item)"
-                />
-              </td>
-            </tr>
-          </table>
+
+                <span class="tabNum" v-if="sIndex == 0">{{ index + 1 }}.</span>
+
+                <span class="NPC-word-tab-common NPC-word-tab-pinyin">
+                  {{ sItem.pinyin }}
+                </span>
+                <span class="NPC-word-tab-common NPC-word-tab-word">
+                  {{ sItem.new_word }}
+                </span>
+                <span class="NPC-word-tab-common NPC-word-tab-def">
+                  {{ sItem.speech }}
+                </span>
+                <span
+                  class="NPC-word-tab-common NPC-word-tab-def"
+                  v-html="sItem.def_str"
+                ></span>
+                <span>
+                  <img
+                    src="../../../assets/NPC/detail-icon.png"
+                    class="detail-icon"
+                    @click="showDetail(sItem)"
+                  />
+                </span>
+              </div>
+            </li>
+          </ul>
         </div>
       </el-collapse-item>
     </el-collapse>
@@ -239,14 +238,14 @@ export default {
       this.detailShow = val;
     },
     // 上一个单词详情
-    lastDetail(val) {
+    lasspanetail(val) {
       this.detailIndex = val;
       this.data = null;
       this.data = this.curQue.option[this.detailIndex];
       this.getWordLiju(this.data.new_word);
     },
     // 下一个单词详情
-    nextDetail(val) {
+    nexspanetail(val) {
       this.detailIndex = val;
       this.data = null;
       this.data = this.curQue.option[this.detailIndex];
@@ -400,46 +399,33 @@ export default {
   }
   .NPC-word-table {
     width: 100%;
-    > tr {
-      > td {
-        border: 0;
-        background: #ffffff;
-        box-sizing: border-box;
-        padding: 8px 0;
-        height: auto !important;
-        border-top: 4px #f7f7f7 solid;
-        border-bottom: 4px #f7f7f7 solid;
-        line-height: 150%;
-        font-size: 16px;
-        color: #000000;
-        &:nth-child(1) {
-          border-radius: 8px 0 0 8px;
-        }
-        &:nth-last-child(1) {
-          border-radius: 0px 8px 8px 0;
-          padding-left: 8px;
-          cursor: pointer;
-        }
-        &.NPC-word-td1 {
-          padding-left: 16px;
-          cursor: pointer;
-        }
-        &.NPC-word-tab-common {
-          padding-left: 8px;
-        }
-        &.NPC-word-tab-pinyin {
-          font-family: "GB-PINYINOK-B";
-          white-space: nowrap;
-        }
-        &.NPC-word-tab-word {
-          font-family: "sourceR";
-          white-space: nowrap;
-        }
-        &.NPC-word-tab-def {
-          font-family: "robot";
-          word-break: break-word;
+    > .NPC-word-tr {
+      padding: 8px 16px;
+      .NPC-word-row {
+        cursor: pointer;
+        display: flex;
+        justify-content: flex-start;
+        > span {
+          font-size: 16px;
+          line-height: 150%;
+          color: #000000;
         }
       }
+      .NPC-word-tab-common {
+        padding-left: 8px;
+      }
+      .NPC-word-tab-pinyin {
+        font-family: "GB-PINYINOK-B";
+        white-space: nowrap;
+      }
+      .NPC-word-tab-word {
+        font-family: "sourceR";
+        white-space: nowrap;
+      }
+      .NPC-word-tab-def {
+        font-family: "robot";
+        word-break: break-word;
+      }
     }
   }
   .NPC-play-btn {

src/components/Header.vue

@@ -250,7 +250,7 @@ export default {
     QuitLogin() {
       window.location.href = "/";
       removeSession("SysList");
-      removeToken();
+      //removeToken();
       this.userShow = false;
       this.userMessage = null;
     },
@@ -317,10 +317,10 @@ export default {
       _this.configInfor = JSON.parse(config);
     }
     _this.getLangList();
-    _this.headTimer = _this.getNotReadMessage();
-    setInterval(() => {
-      _this.getNotReadMessage();
-    }, 120000);
+    // _this.headTimer = _this.getNotReadMessage();
+    // setInterval(() => {
+    //   _this.getNotReadMessage();
+    // }, 120000);
   },
   beforeDestroy() {
     if (this.headTimer) {

src/components/common/Header.vue

@@ -1,649 +0,0 @@
-<template>
-  <!-- 顶部登录导航 -->
-  <div class="LoginNav">
-    <div class="logo">
-      <span class="logo-img"> logo </span>
-      <el-menu
-        :default-active="activeIndex"
-        class="el-menu-demo"
-        mode="horizontal"
-        @select="handleSelect"
-        text-color="#000"
-        active-text-color="#FF9900"
-      >
-        <el-menu-item index="1">主页</el-menu-item>
-        <el-menu-item index="2">
-          <template v-if="projectList.length > 1">
-            <el-dropdown trigger="click" @command="handleCommand">
-              <span
-                class="el-dropdown-link"
-                :style="{ color: activeIndex == '2' ? '#FF9900' : '#000' }"
-              >
-                {{ projectName }}
-                <!-- SYSTEM -->
-                <i class="el-icon-arrow-down el-icon--right"></i>
-              </span>
-              <el-dropdown-menu slot="dropdown" style="min-width: 278px">
-                <el-dropdown-item
-                  :class="i == LoginNavIndex ? 'menuActive' : ''"
-                  :command="i"
-                  :key="i"
-                  class="projectList"
-                  v-for="(item, i) in projectList"
-                >
-                  <img
-                    style="position: relative; width: 24px"
-                    :src="require('../../../assets/login/' + item.img + '.png')"
-                    alt=""
-                  />
-                  <span style="margin-left: 16px">
-                    {{ item.name }}
-                  </span>
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </template>
-          <template v-else>{{
-            projectList.length > 0 && projectList[0].name
-          }}</template>
-        </el-menu-item>
-      </el-menu>
-    </div>
-    <div class="userName">
-      <template v-if="1 == 2">
-        <el-dropdown
-          style="margin-right: 16px; cursor: pointer"
-          trigger="click"
-          @command="changeLang"
-        >
-          <span class="el-dropdown-link" style="color: #000">
-            {{ lang }}<i class="el-icon-arrow-down el-icon--right"></i>
-          </span>
-          <el-dropdown-menu slot="dropdown" style="width: 200px">
-            <el-dropdown-item
-              v-for="item in language_list"
-              :key="item.language_type"
-              :command="item"
-              >{{ item.language_name }}</el-dropdown-item
-            >
-          </el-dropdown-menu>
-        </el-dropdown>
-      </template>
-      <div v-if="!userMessage" class="selectLoginOrRegistration">
-        <span @click="cutLoginReg">登录</span>
-      </div>
-      <!-- 用户头像和用户名 -->
-      <div class="user" v-else>
-        <img
-          @click="userShow = !userShow"
-          class="headPhoto"
-          :src="
-            userMessage.image_url
-              ? userMessage.image_url
-              : require('../../../assets/login/Group3214.png')
-          "
-          alt=""
-        />
-        <span @click="userShow = !userShow">{{
-          userMessage.user_real_name
-        }}</span>
-        <div class="userShow" v-show="userShow">
-          <p @click="gopresonal">
-            <img src="../../../assets/login/project7.png" alt="" />
-            个人中心
-          </p>
-          <p @click="QuitLogin">
-            <img src="../../../assets/login/Frame77.png" alt="" />
-            退出登录
-          </p>
-        </div>
-      </div>
-      <!-- 消息 铃铛图片 -->
-      <div class="message" @click="gopresonal">
-        <img src="../../../assets/login/Vector.png" alt="" />
-        <span class="redDot" v-if="is_exist == 'true'"></span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from "vuex";
-import { getToken, removeToken } from "@/utils/auth";
-import Cookies from "js-cookie";
-import { getLearnWebContent, getStaticContent } from "@/api/ajax";
-//import { setI18nLang } from "@/utils/i18n";
-
-export default {
-  name: "LayoutHeader",
-  props: [],
-  data() {
-    return {
-      activeIndex: "2", // 主导航索引
-      LoginNavIndex: 0, //下拉框导航索引
-      projectName: "",
-      projectList: [],
-      teacherProList: [
-        //普通教师
-        {
-          id: 0,
-          name: "教学中心",
-          img: "project1",
-        },
-        {
-          id: 2,
-          name: "教培中心",
-          img: "project3",
-        },
-        {
-          id: 3,
-          name: "教研中心",
-          img: "project4",
-        },
-        {
-          id: 4,
-          name: "考试中心",
-          img: "project5",
-        },
-        {
-          id: 5,
-          name: "学习中心",
-          img: "project6",
-        },
-        {
-          id: 6,
-          name: "个人中心",
-          img: "project7",
-        },
-      ],
-      stuProList: [
-        {
-          id: 0,
-          name: "教学中心",
-          img: "project1",
-        },
-        {
-          id: 5,
-          name: "学习中心",
-          img: "project6",
-        },
-        {
-          id: 6,
-          name: "个人中心",
-          img: "project7",
-        },
-      ],
-      userMessage: null,
-      userShow: false,
-      language_list: [],
-      lang: "",
-      is_exist: "false",
-      headTimer: null,
-    };
-  },
-  watch: {},
-  computed: {
-    ...mapGetters(["language_type"]),
-  },
-  methods: {
-    // 切换导航
-    handleSelect(key, keyPath) {
-      this.activeIndex = key;
-      console.log(this.activeIndex);
-      if (this.activeIndex == "1") {
-        window.location.href = "/";
-      }
-    },
-    // 切换项目
-    handleCommand(command) {
-      let _this = this;
-      _this.LoginNavIndex = command;
-      if (!_this.userMessage) {
-        this.$message.warning("请重新登录");
-        window.location.href = "/";
-        return;
-      }
-
-      _this.projectName = this.projectList[command].name;
-      let id = this.projectList[command].id;
-
-      if (id == 0) {
-        // 教学管理系统
-        location.href = `/GCLS-Learn/#/EnterSys`;
-      } else if (id == 1) {
-        // 教材管理系统
-        location.href = `/GCLS-Book/#/EnterSys`;
-      } else if (id == 2) {
-        // 教培中心
-        location.href = `/GCLS-TRC/#/EnterSys`;
-      } else if (id == 3) {
-        // 教研中心
-        location.href = `/GCLS-TC/#/EnterSys`;
-      } else if (id == 4) {
-        // 考试中心
-        location.href = `/GCLS-Test/#/EnterSys`;
-      } else if (id == 5) {
-        // 学习中心
-        location.href = `/GCLS-LC/#/EnterSys`;
-      } else {
-        // 个人中心
-        location.href = `/GCLS-Personal/#/EnterSys`;
-      }
-    },
-    gopresonal() {
-      window.location.href = `/GCLS-Personal/#/EnterSys`;
-    },
-    // 切换登录的注册
-    cutLoginReg() {
-      window.location.href = "/";
-    },
-    QuitLogin() {
-      removeToken();
-      Cookies.remove("userMessage");
-      Cookies.remove("session_id");
-      Cookies.remove("user_code");
-      Cookies.remove("user_type");
-      this.userShow = false;
-      this.userMessage = null;
-      window.location.href = "/";
-    },
-    getLangList() {
-      let MethodName = "language_manager-GetLanguageList";
-      let data = {};
-      getStaticContent(MethodName, data).then((res) => {
-        this.language_list = res.language_list;
-        for (let i = 0; i < this.language_list.length; i++) {
-          let item = this.language_list[i];
-          if (item.language_type == this.language_type) {
-            this.lang = item.language_name;
-            break;
-          }
-        }
-      });
-    },
-    handleProList(list) {
-      let projectList = [];
-      if (list.length == 0) {
-        let arr = [
-          {
-            id: 2,
-            name: "教培中心",
-            img: "project3",
-          },
-          {
-            id: 3,
-            name: "教研中心",
-            img: "project4",
-          },
-          {
-            id: 5,
-            name: "学习中心",
-            img: "project6",
-          },
-          {
-            id: 6,
-            name: "个人中心",
-            img: "project7",
-          },
-        ];
-        projectList = arr;
-      } else {
-        if (list.includes(2000001)) {
-          projectList = JSON.parse(JSON.stringify(this.teacherProList));
-          for (let i = 0; i < list.length; i++) {
-            let code = list[i];
-            if (code == 2000003) {
-              projectList.push({
-                id: 1,
-                name: "教材管理系统",
-                img: "project2",
-              });
-            }
-          }
-        } else {
-          for (let i = 0; i < list.length; i++) {
-            let code = list[i];
-            if (code == 2000002) {
-              projectList.push({
-                id: 0,
-                name: "教学管理系统",
-                img: "project1",
-              });
-            } else if (code == 2000003) {
-              projectList.push({
-                id: 1,
-                name: "教材管理系统",
-                img: "project2",
-              });
-            } else if (code == 2000004) {
-              projectList.push({
-                id: 2,
-                name: "教师培训中心",
-                img: "project3",
-              });
-            } else if (code == 2000005) {
-              projectList.push({
-                id: 4,
-                name: "考试中心",
-                img: "project5",
-              });
-            } else if (code == 2000006) {
-              projectList.push({
-                id: 3,
-                name: "教研中心",
-                img: "project4",
-              });
-            }
-          }
-          projectList.push({
-            id: 6,
-            name: "个人中心",
-            img: "project7",
-          });
-        }
-      }
-      // 排序
-      for (var i = 0; i < projectList.length - 1; i++) {
-        for (var j = 0; j < projectList.length - 1 - i; j++) {
-          // 相邻元素两两对比，元素交换，大的元素交换到后面
-          if (projectList[j].id > projectList[j + 1].id) {
-            var temp = projectList[j];
-            projectList[j] = projectList[j + 1];
-            projectList[j + 1] = temp;
-          }
-        }
-      }
-      return projectList;
-    },
-    handleProList2(list) {
-      let projectList = [];
-
-      if (list.includes(2000001)) {
-        projectList = this.teacherProList;
-      } else {
-        for (let i = 0; i < list.length; i++) {
-          let code = list[i];
-
-          if (code == 2000002) {
-            projectList.push({
-              id: 0,
-              name: "教学管理系统",
-              img: "project1",
-            });
-          } else if (code == 2000003) {
-            projectList.push({
-              id: 1,
-              name: "教材管理系统",
-              img: "project2",
-            });
-          } else if (code == 2000004) {
-            projectList.push({
-              id: 2,
-              name: "教师培训中心",
-              img: "project3",
-            });
-          } else if (code == 2000005) {
-            projectList.push({
-              id: 4,
-              name: "考试中心",
-              img: "project5",
-            });
-          } else if (code == 2000006) {
-            projectList.push({
-              id: 3,
-              name: "教研中心",
-              img: "project4",
-            });
-          }
-        }
-      }
-      console.log(projectList);
-      return projectList;
-    },
-    //是否存在我未阅读的消息
-    getNotReadMessage() {
-      let MethodName = "message-message_manager-IsExistMyMessage_NotRead";
-      let data = {};
-      getLearnWebContent(MethodName, data).then((res) => {
-        this.is_exist = res.is_exist;
-      });
-    },
-  },
-  created() {},
-  mounted() {
-    let _this = this;
-    let user = getToken();
-    if (user) {
-      _this.userMessage = JSON.parse(user);
-      let popedom_code_list = _this.userMessage.popedom_code_list;
-      let id = 0;
-      if (popedom_code_list.indexOf(2000003) > -1) {
-        _this.projectName = "教材管理系统";
-        id = 1;
-      } else {
-        _this.projectName = "学习中心";
-        id = 5;
-      }
-
-      if (_this.userMessage.user_type == "TEACHER") {
-        _this.projectList = _this.handleProList(popedom_code_list);
-      } else if (_this.userMessage.user_type == "STUDENT") {
-        _this.projectList = _this.stuProList;
-      }
-      _this.projectList.forEach((item, index) => {
-        if (item.id == id) {
-          _this.LoginNavIndex = index;
-        }
-      });
-
-      _this.getNotReadMessage();
-      _this.headTimer = setInterval(() => {
-        _this.getNotReadMessage();
-      }, 120000);
-    }
-    //_this.getLangList();
-  },
-  beforeDestroy() {
-    if (this.headTimer) {
-      //如果定时器还在运行 或者直接关闭，不用判断
-      clearInterval(this.headTimer); //关闭
-    }
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.LoginNav {
-  height: 64px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  padding: 0px 24px;
-  z-index: 999;
-  background: #ffffff;
-  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
-  font-family: "sourceR";
-  .logo {
-    &-img {
-      font-style: normal;
-      font-weight: 600;
-      font-size: 30px;
-      font-variant: small-caps;
-      color: #000000;
-      margin-right: 29px;
-      line-height: 64px;
-    }
-    display: flex;
-    align-items: center;
-    .el-menu-demo {
-      background: rgba(0, 0, 0, 0);
-      // margin-left: 100px;
-      li:hover {
-        background: none;
-      }
-      li {
-        font-size: 16px;
-        background: none;
-      }
-    }
-    // 取消组件默认的样式
-    .el-menu.el-menu--horizontal {
-      border-bottom: none;
-    }
-  }
-  .userName {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    .seek {
-      margin-right: 100px;
-      position: relative;
-      img {
-        left: 10px;
-        top: 11px;
-        position: absolute;
-      }
-    }
-    .flag {
-      position: relative;
-      top: 5px;
-    }
-    .headPhoto {
-      width: 50px;
-      height: 50px;
-      // background: url("../assets/teacherTrain/image 4.png") no-repeat 100% 100%;
-      // background-size: 100%;
-      border-radius: 50%;
-      // margin-right: 10px;
-    }
-    .message {
-      height: 100%;
-      position: relative;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin-left: 23px;
-      cursor: pointer;
-      img {
-        width: 18px;
-        height: 24px;
-      }
-      .redDot {
-        position: absolute;
-        top: 2px;
-        right: -2px;
-        width: 6px;
-        height: 6px;
-        display: inline-block;
-        background: red;
-        border-radius: 50%;
-      }
-    }
-    .selectLoginOrRegistration {
-      display: flex;
-      height: 32px;
-      border: 1px solid #ffffff;
-      box-sizing: border-box;
-      border-radius: 4px;
-      justify-content: space-evenly;
-      align-items: center;
-      padding: 0 16px;
-      > span {
-        cursor: pointer;
-        font-size: 16px;
-        color: #fff;
-      }
-    }
-    .user {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-      position: relative;
-      > img {
-        width: 34px;
-        height: 34px;
-      }
-      > span {
-        font-size: 20px;
-        padding-left: 10px;
-      }
-      .userShow {
-        position: absolute;
-        width: 156px;
-        height: 96px;
-        background: #ffffff;
-        box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
-        border-radius: 8px;
-        bottom: -100px;
-        color: black;
-        img {
-          width: 24px;
-          height: 24px;
-          margin-right: 10px;
-        }
-        p {
-          font-size: 16px;
-          height: 40px;
-          display: flex;
-          align-items: center;
-          padding-left: 20px;
-          margin: 0;
-          margin-top: 5px;
-        }
-        > p:hover {
-          background: #f2f2f2;
-        }
-      }
-    }
-  }
-}
-</style>
-<style lang="scss">
-.LoginNav {
-  .el-dropdown-menu__item {
-    line-height: 40px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    > span {
-      font-family: "sourceR";
-      font-size: 16px;
-    }
-  }
-  .el-menu--horizontal > .el-menu-item {
-    height: 64px;
-    line-height: 68px;
-  }
-  .el-dropdown {
-    display: block;
-    > span {
-      font-family: "sourceR";
-      font-size: 16px;
-    }
-  }
-}
-.projectList {
-  &.el-dropdown-menu__item {
-    line-height: 40px;
-    display: flex;
-    align-items: center;
-    color: #000000;
-    > img {
-      top: 0;
-    }
-    > span {
-      line-height: 40px;
-      font-family: "sourceR";
-    }
-  }
-  &:hover {
-    background: rgba(255, 153, 0, 0.1) !important;
-    color: #000 !important;
-  }
-  &.menuActive {
-    background: #ff9900;
-  }
-}
-</style>

src/store/modules/user.js

@@ -70,7 +70,7 @@ const actions = {
   // remove token
   resetToken({ commit }) {
     return new Promise(resolve => {
-      removeToken() // must remove  token  first
+      // removeToken() // must remove  token  first
       commit('RESET_STATE')
       resolve()
     })

src/utils/request.js

@@ -10,94 +10,94 @@ axios.defaults.dataType = 'json'
 axios.defaults.headers['cache-control'] = 'no-cache'
 axios.defaults.headers['Content-Type'] = 'application/json'
 axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
-    // create an axios instance
+// create an axios instance
 const service = axios.create({
-    baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
-    // withCredentials: true, // send cookies when cross-domain requests
-    timeout: 60000 // request timeout
+  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
+  // withCredentials: true, // send cookies when cross-domain requests
+  timeout: 60000 // request timeout
 })
 
 // request interceptor
 service.interceptors.request.use(
-    config => {
-        // do something before request is sent
-        // let each request carry token
-        // ['X-Token'] is a custom headers key
-        // please modify it according to the actual situation
-        config.headers['Content-Type'] = 'application/json'
-        return config
-    },
-    error => {
-        // do something with request error
-        console.log(error) // for debug
-        return Promise.reject(error)
-    }
+  config => {
+    // do something before request is sent
+    // let each request carry token
+    // ['X-Token'] is a custom headers key
+    // please modify it according to the actual situation
+    config.headers['Content-Type'] = 'application/json'
+    return config
+  },
+  error => {
+    // do something with request error
+    console.log(error) // for debug
+    return Promise.reject(error)
+  }
 )
 
 // response interceptor
 service.interceptors.response.use(
-    /**
-     * If you want to get http information such as headers or status
-     * Please return  response => response
-     */
+  /**
+   * If you want to get http information such as headers or status
+   * Please return  response => response
+   */
 
-    /**
-     * Determine the request status by custom code
-     * Here is just an example
-     * You can also judge the status by HTTP Status Code
-     */
-    response => {
-        const res = response.data
-        console.log(res)
-        let msg = null
-            // if the custom code is not 20000, it is judged as an error.
-        if (res.status == 0 || res.status == -2) {
-            // 执行错误  JSON 数据格式错误
-            msg = Message({
-                message: res.msg || res.error || 'Error',
-                type: 'error',
-                showClose: true,
-                duration: 0
-            })
-            return Promise.reject(new Error(res.message || res.error || 'Error'))
-        } else if (res.status === -1) {
-            // 登录失效
-            Cookies.remove('session_id')
-            Cookies.remove('user_code')
-            Cookies.remove('user_real_name')
-            Cookies.remove('user_type')
-            removeToken();
-            msg = Message({
-                message: '登录会话失效，请重新登录',
-                type: 'error',
-                showClose: true,
-                duration: 0
-            })
-            if (process.env.NODE_ENV === 'development') {
-                router.push(`/login`)
-            } else {
-                window.location.href = '/';
-            }
-            return false
-        } else {
-            Message.closeAll()
-            return res
-        }
-    },
-    error => {
-        // || (error+1).indexOf('500') > -1
-        if ((error + 1).indexOf('401') > -1) {
-            // console.log(router)
-            // store.dispatch('user/postError')
-            // router.push(`/login`)
-        }
-        Message({
-            message: '网络错误，请稍后重试',
-            type: 'error',
-            duration: 2 * 1000
-        })
-        return Promise.reject(error)
+  /**
+   * Determine the request status by custom code
+   * Here is just an example
+   * You can also judge the status by HTTP Status Code
+   */
+  response => {
+    const res = response.data
+    console.log(res)
+    let msg = null
+    // if the custom code is not 20000, it is judged as an error.
+    if (res.status == 0 || res.status == -2) {
+      // 执行错误  JSON 数据格式错误
+      msg = Message({
+        message: res.msg || res.error || 'Error',
+        type: 'error',
+        showClose: true,
+        duration: 0
+      })
+      return Promise.reject(new Error(res.message || res.error || 'Error'))
+    } else if (res.status === -1) {
+      // 登录失效
+      Cookies.remove('session_id')
+      Cookies.remove('user_code')
+      Cookies.remove('user_real_name')
+      Cookies.remove('user_type')
+      //removeToken();
+      msg = Message({
+        message: '登录会话失效，请重新登录',
+        type: 'error',
+        showClose: true,
+        duration: 0
+      })
+      // if (process.env.NODE_ENV === 'development') {
+      //   router.push(`/login`)
+      // } else {
+      //   window.location.href = '/';
+      // }
+      return false
+    } else {
+      Message.closeAll()
+      return res
+    }
+  },
+  error => {
+    // || (error+1).indexOf('500') > -1
+    if ((error + 1).indexOf('401') > -1) {
+      // console.log(router)
+      // store.dispatch('user/postError')
+      // router.push(`/login`)
     }
+    Message({
+      message: '网络错误，请稍后重试',
+      type: 'error',
+      duration: 2 * 1000
+    })
+    return Promise.reject(error)
+  }
 )
 
 export default service