修改多语音及多语音影响的样式修改

src/App.vue

@@ -1,12 +1,28 @@
 <template>
-  <div id="app">
+  <div id="app" :dir="dir">
     <keep-alive>
       <router-view v-if="$route.meta.keepAlive" />
     </keep-alive>
     <router-view v-if="!$route.meta.keepAlive" />
   </div>
 </template>
-
+<script>
+export default {
+  name: "App",
+  data() {
+    return {
+      dir: "ltr",
+    };
+  },
+  created() {
+    let lang_type = localStorage.getItem("language_type");
+    if (lang_type == "AR") {
+      this.dir = "rtl";
+    }
+  },
+};
+</script>
+</script>
 <style>
 * {
   margin: 0;

src/components/Upload.vue

@@ -6,7 +6,6 @@
      -->
     <el-upload
       :accept="targetAccept"
-      style="width: 500px"
       class="upload-demo"
       :show-file-list="type == '批量上传' ? false : true"
       :action="url"

src/components/teacher-dev/HeaderOne.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="HeaderOne">
     <div>
-      <span class="befor" @click="backHome">
+      <span
+        :class="[language_type == 'AR' ? 'albbefor' : 'befor']"
+        @click="backHome"
+      >
         <img src="../../assets/teacherdev/Frame3.png" alt="" />
       </span>
       <template v-if="allList">
@@ -17,12 +20,14 @@
     </div>
     <div>
       <div class="seek" @keyup="keyDownSeekData">
-        <el-input
+        <input
+          type="text"
+          name=""
+          id=""
+          placeholder="搜索课程"
           v-model="SeekName"
-          style="width: 300px"
-          placeholder="请输入内容"
-        >
-        </el-input>
+          @change="SeekName = SeekName.trim()"
+        />
         <img
           @click="gotoSeekResult"
           src="../../assets/teacherdev/Group2149.png"
@@ -36,10 +41,12 @@
 <script>
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
+import { mapGetters } from "vuex";
+
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {},
-  props: ["type", "text", "changeKeycode", "keycode","allList"],
+  props: ["type", "text", "changeKeycode", "keycode", "allList"],
   data() {
     //这里存放数据
     return {
@@ -48,7 +55,9 @@ export default {
     };
   },
   //计算属性 类似于data概念
-  computed: {},
+  computed: {
+    ...mapGetters(["language_type"]),
+  },
   //监控data中数据变化
   watch: {},
   //方法集合
@@ -92,7 +101,7 @@ export default {
           } else {
             this.$router.push({
               path: "/Viewmore",
-              query: { keyWord: this.SeekName },
+              query: { keyWord: this.SeekName, id: this.$route.query.id },
             });
           }
         } else {
@@ -144,7 +153,8 @@ export default {
         width: 24px;
       }
     }
-    .befor {
+    .befor,
+    .albbefor {
       img {
         width: 24px;
       }
@@ -158,6 +168,15 @@ export default {
       position: relative;
       right: 10px;
     }
+    .albbefor::before {
+      content: "|";
+      width: 6px;
+      height: 24px;
+      color: #ff9900;
+      background: #ff9900;
+      position: relative;
+      left: 10px;
+    }
     .text {
       font-weight: bold;
       font-size: 16px;
@@ -165,13 +184,25 @@ export default {
     }
   }
   .seek {
-    position: relative;
+    width: 300px;
+    height: 40px;
+    background: #ffffff;
+    border: 1px solid #d9d9d9;
+    box-sizing: border-box;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 16px;
+    input {
+      width: 90%;
+      border: none;
+      outline: none;
+      margin-left: 5px;
+    }
     img {
-      width: 24px;
-      position: absolute;
-      right: 19px;
-      top: 7px;
-      cursor: pointer;
+      width: 18px;
+      height: 18px;
     }
   }
 }

src/components/teacher-dev/Teaching.vue

@@ -3,7 +3,7 @@
   <div class="Teaching">
     <div class="top" v-if="!type">
       <div class="title">
-        <span class="text"> 教研资料 </span>
+        <span class="text"> 教辅资料 </span>
         <div class="more" @click="goMore">
           <span> 查看更多 </span>
           <img src="../../assets/teacherdev/moreImage.png" alt="" />

src/components/teacher-dev/Textbook.vue

@@ -3,7 +3,7 @@
   <div class="Textbook">
     <div class="top">
       <div class="title">
-        <span class="text"> 教师用书 </span>
+        <span class="text"> 教研资料 </span>
         <div class="more" @click="goMore">
           <span> 查看更多 </span>
           <img src="../../assets/teacherdev/moreImage.png" alt="" />

src/components/teacher-dev/ToolBook.vue

@@ -0,0 +1,244 @@
+<template>
+  <!-- 教科书 -->
+  <div class="Textbook">
+    <div class="top">
+      <div class="title">
+        <span class="text"> 工具书 </span>
+        <div class="more" @click="goMore">
+          <span> 查看更多 </span>
+          <img src="../../assets/teacherdev/moreImage.png" alt="" />
+        </div>
+      </div>
+    </div>
+    <div class="class_list">
+      <div v-for="(item, i) in classList" :key="i" @click="gopreview(item)">
+        <div class="listImage">
+          <img
+            :src="
+              require('../../assets/teacherdev/' + getimgurl(item) + '.png')
+            "
+            alt=""
+          />
+          <!-- <span v-else>加载失败</span> -->
+        </div>
+        <!-- <el-image
+          lazy
+          :src="require('../../assets/teacherdev/' + getimgurl(item) + '.png')"
+          alt=""
+        ></el-image> -->
+        <p class="one_name">{{ item.name }}</p>
+        <p class="price">
+          ￥
+          <span class="price_1" v-text="changePrice('1', item.price)"></span>
+          <span class="price_2" v-text="changePrice('2', item.price)"></span>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["classList", "type"],
+  data() {
+    return {};
+  },
+  methods: {
+    // 前往更多
+    goMore() {
+      this.$router.push({
+        path: "/Viewmore",
+        query: {
+          classify: "TEXTBOOK",
+        },
+      });
+    },
+    gopreview(item) {
+      this.$router.push({
+        path: "/Preview",
+        query: {
+          id: item.id,
+        },
+      });
+    },
+    //   根据不同的文件类型展示不同图片
+    getimgurl(item) {
+      let index = item.tag.indexOf("downloadable");
+      let type = "";
+      if (index != -1) {
+        type = item.tag[2];
+      } else {
+        type = item.tag[1];
+      }
+      switch (type) {
+        case "ppt":
+          return "ppt";
+        case "pptx":
+          return "ppt";
+        case "pdf":
+          return "pdf";
+        case "xlsx":
+          return "exceil";
+        case "xls":
+          return "exceil";
+        case "doc":
+          return "word";
+        case "docx":
+          return "word";
+        case "word":
+          return "word";
+        default:
+          return "word";
+      }
+    },
+    // 处理价格
+    changePrice(type, item) {
+      if (item.indexOf(".") != -1) {
+        if (type == 1) {
+          return item.split(".")[0];
+        } else if (type == 2) {
+          if (item.split(".")[1] * 1 >= 10) {
+            return "." + item.split(".")[1];
+          } else {
+            return "." + item.split(".")[1] + "0";
+          }
+        }
+      } else {
+        if (type == 1) {
+          return item;
+        }
+        if (type == 2) {
+          return ".00";
+        }
+      }
+    },
+  },
+  created() {},
+};
+</script>
+
+<style lang="scss"  scoped>
+.Textbook {
+  .top {
+    width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    .title {
+      width: 100%;
+      height: 90px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .text {
+        position: relative;
+        font-size: 24px;
+        font-weight: bold;
+      }
+      .more {
+        cursor: pointer;
+        font-size: 16px;
+        display: flex;
+        align-items: center;
+        span {
+          opacity: 0.4;
+        }
+        img {
+          width: 25px;
+          height: 19px;
+        }
+      }
+    }
+  }
+  .class_list {
+    width: 1200px;
+    box-sizing: border-box;
+    margin: 0 auto;
+    background: #fff;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    padding: 50px 20px 8px 20px;
+    > div {
+      width: 192px;
+      margin-left: 20px;
+      margin-right: 20px;
+      transition: all 1s;
+      cursor: pointer;
+      .one_name {
+        height: 48px;
+        margin-top: 16px;
+        line-height: 150%;
+        word-break: break-all;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        font-size: 16px;
+        color: #2c2c2c;
+        cursor: pointer;
+        padding-left: 4px;
+      }
+      .price {
+        font-weight: bold;
+        color: #2c2c2c;
+        font-size: 24px;
+        margin-bottom: 32px;
+
+        .price_2 {
+          font-size: 16px;
+        }
+      }
+      p {
+        font-size: 16px;
+      }
+      .listImage {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 256px;
+        // border: 1px solid rgba(0, 0, 0, 0.15);
+        img {
+          max-width: 100%;
+          max-height: 100%;
+        }
+        color: #c0c4cc;
+      }
+      .gray {
+        color: #a3a3a3;
+      }
+      .origin {
+        color: #ff9900;
+      }
+    }
+    .more {
+      background: url("../../assets/teacherdev/image 13.png") center;
+      position: relative;
+      .shade {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: #000000;
+        opacity: 0.6;
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        > div {
+          img {
+            width: 58px;
+            height: 58px;
+          }
+          span {
+            position: relative;
+            color: white;
+            top: -20px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/components/teacher-devEntering/Nav.vue

@@ -25,7 +25,7 @@ export default {
   height: 60px;
   background: #f3f7fa;
   line-height: 60px;
-  padding-left: 40px;
+  padding: 40px;
   span {
     cursor: pointer;
   }

src/main.js

@@ -16,8 +16,7 @@ import "@/common/font/font.css"
 import "@/permission"
 import i18n from "@/utils/i18n"
 
-Vue.use(i18n)
-    // element 下拉框下拉加载
+// element 下拉框下拉加载
 Vue.directive('loadmore', {
     bind(el, binding) {
         // 获取element-ui定义好的scroll盒子
@@ -35,5 +34,6 @@ Vue.directive('loadmore', {
 new Vue({
     router,
     store,
+    i18n,
     render: h => h(App)
 }).$mount('#app')

src/store/modules/lang.js

@@ -27,7 +27,7 @@ const actions = {
                 UserType = userInfor.user_type;
                 SessionID = userInfor.session_id;
             }
-            getContent(MethodName, UserCode, UserType, SessionID, { language_type })
+            getContent(MethodName, { language_type })
                 .then(() => {
                     commit('SET_UPDATE_LANGUAGE_TYPE', language_type);
                     reslove();

src/views/teacher-dev/Preview.vue

@@ -375,9 +375,11 @@ export default {
     border-radius: 8px;
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    // align-items: center;
     padding: 0 30px;
     .text {
+      height: 100%;
+      padding-top: 24px;
       .p1 {
         font-weight: bold;
         font-size: 30px;
@@ -391,11 +393,13 @@ export default {
       }
     }
     .pay_collect {
-      position: absolute;
-      right: 30px;
-      bottom: 24px;
+      // position: absolute;
+      // right: 30px;
+      // bottom: 24px;
+      height: 100%;
+      padding-top: 90px;
       display: flex;
-      align-items: center;
+      align-content: center;
       .price {
         font-weight: bold;
         font-size: 24px;
@@ -420,6 +424,8 @@ export default {
       .collect {
         display: flex;
         align-items: center;
+        height: 40px;
+
         font-weight: bold;
         font-size: 24px;
         color: #1f2127;

src/views/teacher-dev/index.vue

@@ -12,16 +12,20 @@
           text-color="#000"
           active-text-color="#FF9900"
         >
-          <el-menu-item index="TEXTBOOK">教师用书</el-menu-item>
+          <el-menu-item index="TEXTBOOK">教辅资料</el-menu-item>
           <el-menu-item index="TEACHING">教研资料</el-menu-item>
+          <el-menu-item index="ToolBook">工具书</el-menu-item>
+
         </el-menu>
         <div class="seek" @keyup="keyDownSeekData">
-          <el-input
+          <input
+            type="text"
+            name=""
+            id=""
+            placeholder="搜索课程"
             v-model="SeekName"
-            style="width: 300px"
-            placeholder="请输入内容"
-          >
-          </el-input>
+            @change="SeekName = SeekName.trim()"
+          />
           <img
             @click="gotoSeekResult"
             src="../../assets/teacherdev/Group2149.png"
@@ -38,6 +42,9 @@
       <div id="TEACHING" v-if="teachingList">
         <Teaching v-if="teachingList.data" :classList="teachingList.data" />
       </div>
+      <div id="ToolBook" v-if="toolBookList">
+        <ToolBook v-if="toolBookList.data" :classList="toolBookList.data" />
+      </div>
     </div>
   </div>
 </template>
@@ -50,6 +57,8 @@ import Pdf from "@/components/teacher-dev/Pdf";
 import Excel from "@/components/teacher-dev/Excel";
 import Textbook from "@/components/teacher-dev/Textbook";
 import Teaching from "@/components/teacher-dev/Teaching";
+import ToolBook from "@/components/teacher-dev/ToolBook";
+
 import Cookies from "js-cookie";
 import { VerifyLogin, materiallist } from "@/api/api";
 import { getToken } from "../../utils/auth";
@@ -63,61 +72,19 @@ export default {
     Excel,
     Teaching,
     Textbook,
+    ToolBook,
   },
 
   data() {
     return {
       activeIndex: "TEXTBOOK",
       navName: "CLASSICAL COURSE",
-      classList: [
-        {
-          name: "Learn Chinese with Ease-Learn Chinese with",
-          price: "19.99",
-          coverUrl: "",
-          file_name: "123123.ppt",
-        },
-        {
-          name: "Learn Chinese with Ease-Learn Chinese with",
-          price: "19.99",
-          coverUrl: "",
-          file_name: "123123.pdf",
-        },
-        {
-          name: "Learn Chinese with Ease-Learn Chinese with",
-          price: "19.99",
-          coverUrl: "",
-          file_name: "123123.pdf",
-        },
-        {
-          name: "Learn Chinese with Ease-Learn Chinese with",
-          price: "19.99",
-          coverUrl: "",
-          file_name: "123123.word",
-        },
-        {
-          name: "Learn Chinese with Ease-Learn Chinese with",
-          price: "19.99",
-          coverUrl: "",
-          file_name: "123123.exceil",
-        },
-        {
-          name: "Learn Chinese with Ease-Learn Chinese with",
-          price: "19.99",
-          coverUrl: "",
-          file_name: "123123.exceil",
-        },
-        {
-          name: "Learn Chinese with Ease-Learn Chinese with",
-          price: "19.99",
-          coverUrl: "",
-          file_name: "123123.ppt",
-        },
-      ],
       SeekName: "",
       loading: false,
       dataList: null,
       textBookList: null, //book数据
       teachingList: null, // tea数据
+      toolBookList: null, //工具书
     };
   },
   computed: {},
@@ -159,7 +126,7 @@ export default {
       materiallist({
         pageNum: 1,
         pageSize: 10,
-        tagList: ["TEXTBOOK"],
+        tagList: ["教辅资料"],
         keyWord: this.keyWord,
       })
         .then((res) => {
@@ -171,7 +138,7 @@ export default {
       materiallist({
         pageNum: 1,
         pageSize: 10,
-        tagList: ["TEACHING"],
+        tagList: ["教研资料"],
         keyWord: this.keyWord,
       })
         .then((res) => {
@@ -181,6 +148,19 @@ export default {
         .catch((res) => {
           this.loading = false;
         });
+      materiallist({
+        pageNum: 1,
+        pageSize: 10,
+        tagList: ["工具书"],
+        keyWord: this.keyWord,
+      })
+        .then((res) => {
+          this.toolBookList = res.data;
+          this.loading = false;
+        })
+        .catch((res) => {
+          this.loading = false;
+        });
     },
   },
   created() {
@@ -215,13 +195,25 @@ export default {
   min-height: 100vh;
   background: #f6f6f6;
   .seek {
-    position: relative;
+    width: 300px;
+    height: 40px;
+    background: #ffffff;
+    border: 1px solid #d9d9d9;
+    box-sizing: border-box;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 16px;
+    input {
+      width: 90%;
+      border: none;
+      outline: none;
+      margin-left: 5px;
+    }
     img {
-      width: 24px;
-      position: absolute;
-      right: 19px;
-      top: 7px;
-      cursor: pointer;
+      width: 18px;
+      height: 18px;
     }
   }
   .nav_title {

src/views/teacher-devEntering/creadDocument.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="creadDocument" v-loading="loading">
+  <div
+    :class="['creadDocument', language_type == 'AR' ? 'text_right' : '']"
+    v-loading="loading"
+  >
     <Header />
     <Nav title="创建文档" />
     <div class="title">
@@ -73,8 +76,9 @@
           </el-form-item>
           <el-form-item label="分类" prop="classify">
             <el-radio-group v-model="form.classify">
-              <el-radio label="TEXTBOOK">TEXTBOOK</el-radio>
-              <el-radio label="TEACHING">TEACHING</el-radio>
+              <el-radio label="教辅资料">教辅资料</el-radio>
+              <el-radio label="教研资料">教研资料</el-radio>
+              <el-radio label="工具书">工具书</el-radio>
             </el-radio-group>
           </el-form-item>
           <el-form-item label="文档" prop="file">
@@ -96,6 +100,8 @@
 import Header from "@/components/Header";
 import Nav from "@/components/teacher-devEntering/Nav";
 import Upload from "@/components/Upload";
+import { mapGetters } from "vuex";
+
 import {
   materialdetail,
   attachmentinsert,
@@ -136,7 +142,9 @@ export default {
       institutionList: null, //机构列表
     };
   },
-  computed: {},
+  computed: {
+    ...mapGetters(["language_type"]),
+  },
   methods: {
     priceInput(e) {
       this.form.price = this.form.price.match(/^\d*(\.?\d{0,2})/g)[0] || "";
@@ -402,8 +410,8 @@ export default {
     display: flex;
     .from {
       width: 100%;
-      padding-top: 50px;
-      padding-left: 70px;
+      padding: 50px 70px;
+      max-width: 700px;
     }
 
     .addclass {
@@ -432,4 +440,12 @@ export default {
     margin-left: 50px;
   }
 }
+.text_right {
+  .el-form-item {
+    display: flex;
+    .el-form-item__label {
+      float: none;
+    }
+  }
+}
 </style>

src/views/teacher-devEntering/index.vue

@@ -1,16 +1,15 @@
 <template>
   <!-- 教研中心录入 -->
   <div class="teacher-devEntering">
-      <Header />
+    <Header />
     <Nav />
     <div class="top">
       <div class="seek" @keydown="downSeekdata">
-        <el-input
+        <input
           v-model="keyWord"
           @change="keyWord = keyWord.trim()"
-          style="width: 400px"
           placeholder="请输入内容"
-        ></el-input>
+        />
         <img
           @click="seekData"
           src="../../assets/teacherdev/Group2149.png"
@@ -19,7 +18,7 @@
       </div>
       <div class="btn">
         <!-- <el-button type="primary">批量上传</el-button> -->
-        <div style="margin-right: 23px">
+        <div style="margin: 0 23px">
           <!-- 
             :fileList="fileList"
            -->
@@ -376,7 +375,6 @@ export default {
 
 <style lang="scss" scoped>
 .teacher-devEntering {
-
   .top {
     width: 1200px;
     margin: 0 auto;
@@ -385,13 +383,25 @@ export default {
     justify-content: space-between;
     padding: 0 90px;
     .seek {
-      position: relative;
+      width: 400px;
+      height: 40px;
+      background: #ffffff;
+      border: 1px solid #d9d9d9;
+      box-sizing: border-box;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 16px;
+      input {
+        width: 90%;
+        border: none;
+        outline: none;
+        margin-left: 5px;
+      }
       img {
-        cursor: pointer;
-        width: 19px;
-        position: absolute;
-        right: 10px;
-        top: 10px;
+        width: 18px;
+        height: 18px;
       }
     }
     .btn {