1

quasar.conf.js

@@ -34,7 +34,7 @@ module.exports = function (ctx) {
     extras: [
       // 'ionicons-v4',
       // 'mdi-v5',
-      // 'fontawesome-v5',
+      'fontawesome-v5',
       // 'eva-icons',
       // 'themify',
       // 'line-awesome',

src/api/JapaneseTrainApi.js

@@ -71,3 +71,16 @@ export function getClassPlan(msg) {
         }
     });
 }
+
+// 根据类型获取教师列表，类型(1-日语培训老师，2-留学服务老师)
+export function getWebTeacherList(type) {
+    return request({
+        url: '/Web/GetWebTeacherList',
+        method: "post",
+        data: {
+            Group_Id: groupId,
+            Domain: curDomain,
+            Type:type
+        }
+    });
+}
\ No newline at end of file

src/api/mediaCenterApi.js

@@ -28,3 +28,29 @@ export function getNewsList(msg) {
         }
     });
 }
+//获取品牌动漫分页列表
+export function getWebCartoonPage(msg) {
+    return request({
+        url: '/Web/GetWebCartoonPage',
+        method: "post",
+        data: {
+            Group_Id: groupId,
+            Domain: curDomain,
+            pageIndex:msg.pageIndex,
+            pageSize:msg.pageSize,
+        }
+    });
+}
+//获取品牌月刊(周刊)分页列表
+export function getWebMonthlyPage(msg) {
+    return request({
+        url: '/Web/GetWebMonthlyPage',
+        method: "post",
+        data: {
+            Group_Id: groupId,
+            Domain: curDomain,
+            pageIndex:msg.pageIndex,
+            pageSize:msg.pageSize,
+        }
+    });
+}
\ No newline at end of file

src/assets/font/iconfont/iconfont.css

+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1618216149374'); /* IE9 */
+  src: url('iconfont.eot?t=1618216149374#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALUAAsAAAAABrAAAAKHAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBGIEXATYCJAMMCwgABCAFhG0HNhvdBcgekiQlAol5QBEVAIA5Hr72+527u1+1QRJNf+g+nSSaGBIlUElQaYmhdLJn8vu/tfYRkcY8SGZeV//s7Z7PDe5dq0oTC0U8QqKSgOb/PnHv9E+gQObDKJc5xvmnLsA4oED3wGgLF0oC3jB2wQs8T6BtWQq347qWHvBV2NMC8aBrEvgWkorCKk2h3rC2iBc1zfSUnoDn6PvxJyt8SWqZPffkvlaFis+01vNUxXVASBHg5hoydoBC3DYWz3kIxvPQNnp2N9YVIS2VqSZSGvq684dHEkSd3d4FG6iU+EzzlJlpHaqfupzh6SRZBRbs9K0hxpNRNfJgKhEPVx+nk6h2PP2wMnq8nUSPVu5iNxNRPYDX+9XkJIWen8fXFtVdXmDRcVHt+IQtK/yU2yLIfG/ticl7vb4rvwoJOl6bXZvpiQu52lNBBKjmc0IeBaimck6eEggmi68/IaTk3zeggI+t1e9oTTVVID+iKTFY9ctUA7uKobFduWhKT2mFs8kAfwLKeUQFdnTsd7p1dlv+0CxoJoQblnRkTStkYXdQ07GLuqY9tG2r39wxwXiI0sKWeYAwdI6k7w3Z0DNZ2B/UzP2jbhgeaDuNiD071kL3r2YocVSJPEx0xW6jrof7x51dqPVbJJbXRPw+ZC49QzLTMsqVerQhW2KBa0DL4pwSyuxWUgcuQ4vFThzMbqDC00ycO4rS02nTjdIUuxX8HWGQhEMqQjaM0CnsbGjQn/OvfL4L0vSzkLAOTl26D2Jc9OGJTGkyBpD1RtsgzqNc4zJAk4XjKIJi7KyIOjAKWVjYEY7mUQak4NKYJuQdiqQ7vehQY9r2Zuv/HYA2+7gcKXIU5QEp92K6ZuIAAA==') format('woff2'),
+  url('iconfont.woff?t=1618216149374') format('woff'),
+  url('iconfont.ttf?t=1618216149374') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1618216149374#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-left:before {
+  content: "\e697";
+}
+
+.icon-right:before {
+  content: "\e62e";
+}
+

src/components/teacherTeam/teacherTeam.vue

@@ -7,25 +7,30 @@
     </div>
     <div class="tea_swiper">
       <Swiper :options="swiperOption">
-        <Swiper-slide v-for="(item, index) in teacherList" :key="index">
+        <Swiper-slide v-for="(item, index) in teacherList" :key="index" :class="{'slideWidth':teacherList.length<3}">
           <div
             v-if="!item.showDetail"
             class="slideItem"
             @mouseenter="enter(item)"
             @mouseleave="leave(item)"
           >
-            <img :src="item.src" alt="" class="headImg" />
-            <div class="tea_name">{{ item.name }}</div>
-            <div class="tea_desc">{{ item.desc }}</div>
+            <div class="headImg">
+              <img :src="item.Icon" alt="" class="headImg" v-if="item.Icon"/>
+              <img src="../../assets/images/JapaneseTrain/male.png" alt="" class="headImg" v-if="!item.Icon&&item.Sex===0"/>
+              <img src="../../assets/images/JapaneseTrain/female.png" alt="" class="headImg" v-if="!item.Icon&&item.Sex===1"/>
+              <div class="firstName">{{ item.Name.slice(0, 1) }}</div>
+            </div>
+            <div class="tea_name">{{ item.Name }}</div>
+            <div class="tea_desc">{{ item.Intro }}</div>
           </div>
           <div
-            v-else
+            v-if="item.showDetail"
             class="slideItem2"
             @mouseenter="enter(item)"
             @mouseleave="leave(item)"
           >
-            <div class="tea_name">{{ item.name }}</div>
-            <div class="tea_desc">{{ item.desc }}</div>
+            <div class="tea_name">{{ item.Name }}</div>
+            <div class="tea_desc">{{ item.Intro }}</div>
           </div>
         </Swiper-slide>
       </Swiper>
@@ -49,6 +54,10 @@ export default {
       type: Number,
       default: 20,
     },
+    teacherList: {
+      type: Array,
+      default: [],
+    },
   },
   data() {
     return {
@@ -60,48 +69,7 @@ export default {
         // loop: true,
         slidesPerView: this.viewNum,
         slideSpaceBetween: this.slideSpaceBetween,
-        navigation: {
-          //   nextEl: ".swiper-button-next",
-          //   prevEl: ".swiper-button-prev",
-        },
-      },
-      teacherList: [
-        {
-          name: "黄群",
-          url: "",
-          showDetail: false,
-          desc:
-            "都中医药大学英语学士，拥有八年日本旅游出境线路操作经验，8年的经验累积熟悉各类日本企业运作模式和企业文化。一直和日本企业保持密...联系，现在主要负责人才就业输送。",
-        },
-        {
-          name: "唐雪梅",
-          url: "",
-          showDetail: false,
-          desc:
-            "都中医药大学英语学士，拥有八年日本旅游出境线路操作经验，8年的经验累积熟悉各类日本企业运作模式和企业文化。一直和日本企业保持密...联系，现在主要负责人才就业输送。",
       },
-        {
-          name: "唐雪梅",
-          url: "",
-          showDetail: false,
-          desc:
-            "都中医药大学英语学士，拥有八年日本旅游出境线路操作经验，8年的经验累积熟悉各类日本企业运作模式和企业文化。一直和日本企业保持密...联系，现在主要负责人才就业输送。",
-        },
-        {
-          name: "唐雪梅",
-          url: "",
-          showDetail: false,
-          desc:
-            "都中医药大学英语学士，拥有八年日本旅游出境线路操作经验，8年的经验累积熟悉各类日本企业运作模式和企业文化。一直和日本企业保持密...联系，现在主要负责人才就业输送。",
-        },
-        {
-          name: "唐雪梅",
-          url: "",
-          showDetail: false,
-          desc:
-            "都中医药大学英语学士，拥有八年日本旅游出境线路操作经验，8年的经验累积熟悉各类日本企业运作模式和企业文化。一直和日本企业保持密...联系，现在主要负责人才就业输送。",
-        },
-      ],
     };
   },
   methods: {
@@ -112,7 +80,6 @@ export default {
       i.showDetail = false;
     },
   },
-  mounted() {},
 };
 </script>
 <style lang="scss" scoped>
@@ -162,18 +129,36 @@ export default {
   }
 }
 .slideItem {
+  box-sizing: border-box;
   width: 13.541vw !important;
   height: 18.333vw;
+  // border: 1px solid #eee;
   box-shadow: 0px 6px 10px 0px rgba(116, 116, 116, 0.1);
   background-color: #ffffff;
-  padding: 0 1.458vw;
+  padding: 2.86vw 1.458vw;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   margin-right: 20px;
   .headImg {
-    width: 52px;
-    height: 56px;
+    width: 2.7vw;
+    height: 2.9vw;
+    position: relative;
+    .firstName {
+      width: 22px;
+      height: 22px;
+      background-color: #45766d;
+      border-radius: 50%;
+      position: absolute;
+      right: -2px;
+      bottom: -2px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 12px;
+      font-family: Microsoft YaHei;
+      color: #ffffff;
+    }
   }
   .tea_name {
     width: 100%;
@@ -217,10 +202,7 @@ export default {
     margin-bottom: 1.145vw;
   }
 }
-.swiper-button-prev,
-.swiper-button-next {
-  width: 200px;
-  height: 28px;
-  color: #45766d;
+.slideWidth {
+  width: 13.541vw !important;
 }
 </style>
\ No newline at end of file

src/pages/JapaneseTrain/JapaneseTrain.vue

@@ -13,7 +13,7 @@
           filled
           type="search"
           clearable
-          placeholder="可搜索课程系列/名称"
+          label="可搜索课程系列/名称"
           class="inputBorder"
           @change="changeSearchCourse"
           @clear="clearSearchCourse"
@@ -29,13 +29,13 @@
           option-label="CateName"
           clearable
           class="inputBorder"
-          placeholder="可查询课程系列/名称"
+          label="可查询课程系列/名称"
           :dense="false"
           :options-dense="false"
         >
         </q-select>
       </div>
-      <div class="eduConbox" v-if="courseList.length>0">
+      <div class="eduConbox" v-if="courseList.length > 0">
         <div
           v-for="item in courseList"
           :key="item.CourseId"
@@ -49,31 +49,30 @@
           </div>
         </div>
       </div>
-      <div class="seemore" @click="goEduProductList" v-if="courseList.length>0">查看更多</div>
-      <div v-if="courseList.length==0" class="nodata" style="textAlign:center">暂无数据</div>
+      <div
+        class="seemore"
+        @click="goEduProductList"
+        v-if="courseList.length > 0"
+      >
+        查看更多
+      </div>
+      <div
+        v-if="courseList.length == 0"
+        class="nodata"
+        style="textalign: center"
+      >
+        暂无数据
+      </div>
     </div>
     <!-- 开班计划 -->
     <div class="edu_con">
       <div class="edu_name">开班计划</div>
       <div class="edu_subname">副标题</div>
       <div class="inputBox">
-        <q-input
-          v-model="classmsg.ClassName"
-          filled
-          type="search"
-          clearable
-          placeholder="可搜索课程系列/名称"
-          class="inputBorder2"
-          @change="changeSearchClass"
-          @clear="clearSearchClass"
-        >
-          <template v-slot:prepend>
-            <q-icon name="search" />
-          </template>
-        </q-input>
         <!-- 选择系列 -->
         <div class="inputBorder2">
           <q-select
+            label="可查询课程系列"
             outlined
             v-model="classSelectSeries"
             :options="options"
@@ -87,18 +86,33 @@
         <!-- 根据系列选课程 -->
         <div class="inputBorder2">
           <q-select
+            label="可查询课程名称"
             outlined
             v-model="classSelectCourseName"
             :options="courseNameOption"
-            option-label="CateName"
+            option-label="CourseName"
             clearable
             :dense="false"
             :options-dense="false"
           >
           </q-select>
         </div>
+        <q-input
+          v-model="classmsg.ClassName"
+          filled
+          type="search"
+          clearable
+          label="可搜索课程系列/名称"
+          class="inputBorder2"
+          @change="changeSearchClass"
+          @clear="clearSearchClass"
+        >
+          <template v-slot:prepend>
+            <q-icon name="search" />
+          </template>
+        </q-input>
       </div>
-      <div class="classPlanBox" v-if="classPlanList.length>0">
+      <div class="classPlanBox" v-if="classPlanList.length > 0">
         <div
           v-for="item in classPlanList"
           :key="item.ClassId"
@@ -145,11 +159,17 @@
           </div>
         </div>
       </div>
-      <div class="seemore" v-if="classPlanList.length>0">查看更多</div>
-      <div v-if="classPlanList.length==0" class="nodata" style="textAlign:center">暂无数据</div>
+      <div class="seemore" v-if="classPlanList.length > 0">查看更多</div>
+      <div
+        v-if="classPlanList.length == 0"
+        class="nodata"
+        style="textalign: center"
+      >
+        暂无数据
+      </div>
     </div>
     <!-- 教师团队 -->
-    <TeacherTeam :viewNum="4" />
+    <TeacherTeam :viewNum="4" :teacherList="teacherList" />
     <!-- 底部 -->
     <Footer />
   </div>
@@ -157,7 +177,7 @@
 <script>
 import Header from "../../components/header/header";
 import Footer from "../../components/footer/footerType2";
-import Banner from "../../components/bnaner/banner";
+import Banner from "../../components/banner/banner";
 import TeacherTeam from "../../components/teacherTeam/teacherTeam";
 import { getWebNavList } from "../../api/indexApi.js";
 import {
@@ -165,6 +185,7 @@ import {
   getCoursePageList,
   getClassPlan,
   getCourseList,
+  getWebTeacherList,
 } from "../../api/JapaneseTrainApi";
 export default {
   components: {
@@ -182,12 +203,12 @@ export default {
         },
       ],
       swiperData: [],
-      selectCourseText: "",//课程系列选择框
+      selectCourseText: "", //课程系列选择框
 
       classSelectSeries: "",
       classSelectCourseName: "",
       options: [],
-      courseNameOption:[],
+      courseNameOption: [],
       coursemsg: {
         pageIndex: 1,
         pageSize: 6,
@@ -202,46 +223,54 @@ export default {
       },
       courseList: [],
       classPlanList: [],
+      teacherList: [],
     };
   },
   watch: {
     selectCourseText(val) {
       if (val == null) {
         this.coursemsg.QCateIds = "";
-        // this.coursemsg.CourseName=""
       } else {
         this.coursemsg.QCateIds = val.CateId;
-        // this.coursemsg.CourseName=val.CateName
       }
       this.getCoursePageList();
     },
-    classSelectSeries(val){
+    classSelectSeries(val) {
       if (val == null) {
         this.classmsg.CateId = "";
       } else {
         this.classmsg.CateId = val.CateId;
       }
       this.getClassPlan();
+      this.getCourseList();
+    },
+    classSelectCourseName(val) {
+      if (val == null) {
+        this.classmsg.ClassName = "";
+      } else {
+        this.classmsg.ClassName = val.CourseName;
       }
+      this.getClassPlan();
+    },
   },
   methods: {
     // 课程搜索框
-    changeSearchCourse(){
-      this.getCoursePageList()
+    changeSearchCourse() {
+      this.getCoursePageList();
     },
     // 清空课程搜索框
-    clearSearchCourse(){
-      this.coursemsg.CourseName=""
-      this.getCoursePageList()
+    clearSearchCourse() {
+      this.coursemsg.CourseName = "";
+      this.getCoursePageList();
     },
     // 开班计划搜索框
-    changeSearchClass(){
-      this.getClassPlan()
+    changeSearchClass() {
+      this.getClassPlan();
     },
     // 清空开班计划搜索框
-    clearSearchClass(){
-      this.classmsg.ClassName=""
-      this.getClassPlan()
+    clearSearchClass() {
+      this.classmsg.ClassName = "";
+      this.getClassPlan();
     },
     //去教育产品列表//课程查看更多
     goEduProductList() {
@@ -272,10 +301,18 @@ export default {
       this.classPlanList = res.Data.PageData;
     },
     //根据系列编号获取课程列表
-    async getCourseList(){
-      let res= await getCourseList(this.classmsg.CateId)
-      // this.courseNameOption=res.Data
-    }
+    async getCourseList() {
+      let res = await getCourseList(this.classmsg.CateId);
+      this.courseNameOption = res.Data;
+    },
+    //获取教师列表
+    async getTeacherList() {
+      let res = await getWebTeacherList(1);
+      this.teacherList = res.Data.map((item) => {
+        item.showDetail = false;
+        return item
+      });
+    },
   },
   mounted() {
     this.menuList = JSON.parse(localStorage.getItem("menuList"));
@@ -283,6 +320,8 @@ export default {
     this.getCourseCategoryList();
     this.getCoursePageList();
     this.getClassPlan();
+    this.getCourseList();
+    this.getTeacherList();
   },
 };
 </script>

src/pages/JapaneseTrain/eduProductList.vue

@@ -11,7 +11,7 @@
           filled
           type="search"
           clearable
-          placeholder="可搜索课程系列/名称"
+          label="可搜索课程系列/名称"
           class="inputBorder"
           @change="changeSearchText"
           @clear="clearSearch"
@@ -27,7 +27,7 @@
           option-label ="CateName"
           clearable
           class="inputBorder"
-          placeholder="可查询课程系列/名称"
+          label="可查询课程系列/名称"
           :dense="false"
           :options-dense="false"
         >
@@ -49,15 +49,13 @@
         v-model="currentPage"
         color="light-green-10"
         :max="pageCount"
-        :max-pages="6"
-        :boundary-numbers="true"
+        :max-pages="5"
+        boundary-numbers
         @input="changePage"
         v-if="pageCount>1"
       >
       </q-pagination>
-      
     </div>
-
     <!-- 底部 -->
     <Footer />
   </div>
@@ -88,9 +86,7 @@ export default {
         CourseName:"",
         QCateIds:""
       },
-      courseList: [
-        
-      ],
+      courseList: [],
     };
   },
   watch:{
@@ -174,7 +170,7 @@ export default {
     align-items: center;
     .inputBorder {
       width: 30.468vw;
-      height: 2.916vw;
+      // height: 2.916vw;
       background-color: #e9e9e9;
     }
   }

src/pages/aboutUs/aboutUs.vue

@@ -36,7 +36,7 @@
 </template>
 <script>
 import Header from "../../components/header/header";
-import Banner from "../../components/bnaner/banner";
+import Banner from "../../components/banner/banner";
 import Footer from "../../components/footer/footerType2";
 import { getWebNavList } from "../../api/indexApi.js";
 export default {

src/pages/index.vue

 <template>
   <div class="jiahe">
-    <Header :scorllNum="pageScroll" :menuList="menuList"/>
+    <Header :scorllNum="pageScroll" :menuList="menuList" />
     <!-- 第一部分 -->
     <div class="relative-position banner-box" id="elone">
       <div class="absolute-top-left fit bg-dark">
@@ -20,29 +20,30 @@
             <div v-else @click="onClick" class="parmaryBtn"></div>
           </template>
           <q-carousel-slide
-            v-for="(item,index) in swiperList" :key="index"
+            v-for="(item, index) in swiperList"
+            :key="index"
             :name="item.NavTypeName"
             :img-src="item.BgImg"
           >
-            <div class="con1"><span class="jh">{{item.NavTitle}}</span><!--您身边的日语--></div>
-            <div class="con2">
-             {{item.SubTitle}}
+              <div class="con1">
+                <span class="jh">{{ item.NavTitle }}</span><!--您身边的日语-->
+              </div>
+              <div class="con2">{{ item.SubTitle }}
               </div>
               <div class="con3"></div>
               <div class="btn" @click="goDetail(item.LinkUrl)">查看详情</div>
-
             <q-img
               src="../assets/images/index/female.png"
               spinner-color="white"
               class="female"
-              v-if="item.NavTypeName=='首页'"
+              v-if="item.NavTypeName == '首页'"
             />
           </q-carousel-slide>
         </q-carousel>
       </div>
     </div>
     <!-- 第二部分 日语培训-->
-    <div class="secondbox" @click="jumppppp">
+    <div class="secondbox">
       <div class="absolute-top-left subSecondbox">
         <q-img
           src="../assets/images/index/class_icon.png"
@@ -140,13 +141,17 @@
     </div>
     <!-- 第三部分 留学服务-->
     <div class="threebox" @mouseleave="movemask(0)">
-      <div class="absolute-top-left subThreeBox" >
+      <div class="absolute-top-left subThreeBox">
         <q-img
           src="../assets/images/index/study_serve.png"
           spinner-color="white"
           class="class_icon3"
         />
-        <div class="threeItem"  style="position: relative;" @mouseenter="movemask(1)" >
+        <div
+          class="threeItem"
+          style="position: relative"
+          @mouseenter="movemask(1)"
+        >
           <div class="outside">
             <div class="inner">
               <animate-number
@@ -159,9 +164,16 @@
             </div>
           </div>
           <div class="itemName">本科院校资源</div>
-          <div class="mask"  :class="{removeMask:currentMaskIndex==1}"></div>
+          <div
+            class="mask"
+            :class="{ removeMask: currentMaskIndex == 1 }"
+          ></div>
         </div>
-        <div class="threeItem" style="position: relative;" @mouseenter="movemask(2)" >
+        <div
+          class="threeItem"
+          style="position: relative"
+          @mouseenter="movemask(2)"
+        >
           <div class="itemIconBox">
             <div v-for="item in schoolIconList" :key="item.id">
               <img
@@ -190,9 +202,16 @@
               />
             </div>
           </div>
-          <div class="mask" :class="{removeMask:currentMaskIndex==2}"></div>
+          <div
+            class="mask"
+            :class="{ removeMask: currentMaskIndex == 2 }"
+          ></div>
         </div>
-        <div class="threeItem" style="position: relative;" @mouseenter="movemask(3)">
+        <div
+          class="threeItem"
+          style="position: relative"
+          @mouseenter="movemask(3)"
+        >
           <div class="outside">
             <div class="inner">
               <animate-number
@@ -206,9 +225,16 @@
             </div>
           </div>
           <div class="itemName">可选专业</div>
-          <div class="mask" :class="{removeMask:currentMaskIndex==3}"></div>
+          <div
+            class="mask"
+            :class="{ removeMask: currentMaskIndex == 3 }"
+          ></div>
         </div>
-        <div class="threeItem" style="position: relative;" @mouseenter="movemask(4)">
+        <div
+          class="threeItem"
+          style="position: relative"
+          @mouseenter="movemask(4)"
+        >
           <div class="outside">
             <div class="inner">
               <animate-number
@@ -221,7 +247,10 @@
             </div>
           </div>
           <div class="itemName">服务人数</div>
-          <div class="mask" :class="{removeMask:currentMaskIndex==4}"></div>
+          <div
+            class="mask"
+            :class="{ removeMask: currentMaskIndex == 4 }"
+          ></div>
         </div>
       </div>
     </div>
@@ -276,7 +305,7 @@
 <script>
 import Header from "../components/header/header";
 import Footer from "../components/footer/footer";
-import { getWebConfig ,getWebNavList} from "../api/indexApi.js";
+import { getWebConfig, getWebNavList } from "../api/indexApi.js";
 export default {
   components: {
     Header,
@@ -285,7 +314,7 @@ export default {
   data() {
     return {
       slide: "首页",
-      currentMaskIndex:0,
+      currentMaskIndex: 0,
       pageScroll: 0,
       activeIdx: 1,
       schoolResource: 100, //本科院校资源
@@ -581,15 +610,12 @@ export default {
           type: 1,
         },
       ],
-      menuList:[],
-      swiperList:[]
+      menuList: [],
+      swiperList: [],
     };
   },
 
   methods: {
-    jumppppp(){
-      this.$router.push("/mediaCenter")
-    },
     // 滚动条高度
     handleScroll() {
       this.pageScroll =
@@ -599,26 +625,25 @@ export default {
     startAnimate() {
       // this.$refs.myNum.start()
     },
-    movemask(i){
-      this.currentMaskIndex=i
+    movemask(i) {
+      this.currentMaskIndex = i;
     },
     // 查看详情
-    goDetail(url){
-      this.$router.push(url)
+    goDetail(url) {
+      this.$router.push(url);
     },
     //获取网站配置
-    async getWebConfig(){
-     let res=await getWebConfig()
-     localStorage.setItem("groupID",res.Data.groupId)
-     localStorage.setItem("menuList",JSON.stringify(res.Data.menuList))
-     this.menuList=res.Data.menuList
+    async getWebConfig() {
+      let res = await getWebConfig();
+      localStorage.setItem("groupID", res.Data.groupId);
+      localStorage.setItem("menuList", JSON.stringify(res.Data.menuList));
+      this.menuList = res.Data.menuList;
     },
     //获取网站导航列表
-    async getWebNavList(){
-      let res=await getWebNavList(1)
-      this.swiperList=res.Data
+    async getWebNavList() {
+      let res = await getWebNavList(1);
+      this.swiperList = res.Data;
     },
-    
   },
   mounted() {
     this.getWebConfig();
@@ -633,10 +658,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-// @mixin width ($width) {
-//     width: calc(($width / 1920) * 100%);
-//   }
-
 .jiahe {
   height: 100vh;
   position: relative;
@@ -647,7 +668,8 @@ export default {
 }
 
 .con1 {
-  width: calc(845 / 1920 * 100%);
+  // width: calc(845 / 1920 * 100%);
+  width: 44vw;
   white-space: nowrap;
   // font-size: 100px;
   font-size: 5.208vw;
@@ -660,7 +682,11 @@ export default {
   }
 }
 .con2 {
-  width: calc(739 / 1920 * 100%);
+  // width: calc(739 / 1920 * 100%);
+  width: 38.541vw;
+  max-height: 6.25vw;
+  word-wrap: break-word;
+  overflow: hidden;
   // font-size: 20px !important;
   font-size: 1.041vw;
   color: #111111;
@@ -823,20 +849,20 @@ export default {
       }
     }
   }
-  .mask{
+  .mask {
     width: 25vw;
     height: 56.25vw;
-     background-color: #FFFFFF;
+    background-color: #ffffff;
     opacity: 0.5;
     position: absolute;
-     top:0;
+    top: 0;
     left: 0;
     z-index: 10;
   }
 }
 
-.removeMask{
-  transform:translateX(25vw);
+.removeMask {
+  transform: translateX(25vw);
   transition: all 0.5s;
   z-index: 0;
 }

src/pages/joinUs/joinUs.vue

+<template>
+  <div class="jiahe">
+    <Header :menuList="menuList" :curMenu="menuList[6].Name" :type="2" />
+    <!-- <Banner :swiperList="swiperData" /> -->
+    <div class="bannerBox">
+      <div class="banner_title"><span class="jh">甲鹤</span>-加入我们</div>
+    </div>
+    <div class="main">
+      <div class="imgBox">
+        <div class="imgItem">
+          <div class="main_title">社会招聘</div>
+          <img src="imgItem" alt="" />
+        </div>
+        <div class="imgItem">
+          <div class="main_title">校园招聘</div>
+          <img src="imgItem" alt="" />
+        </div>
+        <div class="imgItem">
+          <div class="main_title">实习生招聘</div>
+          <img src="imgItem" alt="" />
+        </div>
+      </div>
+      <div class="conBox">
+        <div v-for="item in jobList" :key="item.id" class="jobItem">
+          <div class="job_info1">
+            <div class="job_title">{{ item.name }}</div>
+            <div class="job_info1_sub">
+              <div class="job_price">{{ item.price }}</div>
+              <div class="job_other">{{ item.jy }} |{{ item.xueli }}</div>
+            </div>
+          </div>
+          <div class="job_info2">
+            <div class="job_title">{{ item.addr }}</div>
+            <div class="job_other">{{ item.time }}</div>
+          </div>
+          <div class="job_info3">
+            <div class="apply_job">申请职位</div>
+          </div>
+        </div>
+      </div>
+      <div class="pageBox">
+        <q-pagination
+          v-model="currentPage"
+          color="light-green-10"
+          :max="pageCount"
+          :max-pages="5"
+          boundary-numbers
+          @input="changePage"
+          v-if="pageCount > 0"
+        >
+        </q-pagination>
+      </div>
+    </div>
+    <Footer />
+  </div>
+</template>
+<script>
+import Header from "../../components/header/header";
+import Footer from "../../components/footer/footerType2";
+export default {
+  components: {
+    Header,
+    Footer,
+  },
+  data() {
+    return {
+      currentPage: 1,
+      pageCount: 1,
+      menuList: [
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {
+          Name: "",
+        },
+      ],
+      //   swiperData: [],
+      workProductList: [],
+      jobList: [
+        {
+          name: "后端开发工程师（Java、C#，Python)",
+          price: "12-24K·14薪",
+          jy: "经验不限",
+          xueli: "本科",
+          addr: "成都·武侯区·新会展中心",
+          time: "2021年4月09日",
+        },
+        {
+          name: "后端开发工程师（Java、C#，Python)",
+          price: "12-24K·14薪",
+          jy: "经验不限",
+          xueli: "本科",
+          addr: "成都·武侯区·新会展中心",
+          time: "2021年4月09日",
+        },
+      ],
+    };
+  },
+  methods: {
+    //翻页
+    changePage(val) {
+      //   this.currentPage=val
+      //   this.msg.pageIndex=val
+      //   this.getCoursePageList()
+    },
+  },
+  mounted() {
+    this.menuList = JSON.parse(localStorage.getItem("menuList"));
+  },
+};
+</script>
+<style lang="scss" scoped>
+.jiahe {
+  background-color: #f6f6f6;
+}
+.bannerBox {
+  width: 100%;
+  height: 16.666vw;
+  background-image: url("../../assets/images/joinUs/joinUsBanner.png");
+  background-repeat: no-repeat;
+  background-size: contain;
+  display: flex;
+  align-items: center;
+  .banner_title {
+    margin-left: 10.208vw;
+    font-size: 5.208vw;
+    color: #111111;
+    .jh {
+      font-family: "pingfang-b" !important;
+    }
+  }
+}
+.main {
+  width: 62.5vw;
+  margin: 5.729vw auto 0;
+  .imgBox {
+    width: 100%;
+    height: 13.229vw;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 3.125vw;
+    .imgItem {
+      width: 20vw;
+      height: 100%;
+      background-color: #eee;
+      position: relative;
+      .main_title {
+        font-size: 1.354vw;
+        font-family: Microsoft YaHei;
+        color: #000000;
+        position: absolute;
+        top: 1.5vw;
+        left: 1vw;
+      }
+    }
+  }
+  .conBox {
+    & > .jobItem:last-child {
+      margin-bottom: 0 !important;
+    }
+    .jobItem {
+      width: 100%;
+      height: 5.208vw;
+      background-color: #fff;
+      box-sizing: border-box;
+      padding: 1vw 1.5vw;
+      display: flex;
+      align-items: center;
+      margin-bottom: 1.041vw;
+      .job_info1 {
+        width: 16.25vw;
+        height: 100%;
+        margin-right: 8.333vw;
+        display: flex;
+        flex-wrap: wrap;
+        align-content: space-between;
+        .job_title {
+          font-size: 0.9375vw;
+          font-family: Microsoft YaHei;
+          color: #45766d;
+        }
+        .job_info1_sub {
+          display: flex;
+          .job_price {
+            width: 7vw;
+            font-size: 0.729vw;
+            font-family: "pingfang-b" !important;
+            color: #111111;
+          }
+          .job_other {
+            font-size: 0.729vw;
+            font-family: Microsoft YaHei;
+            // font-weight: 400;
+            color: #999999;
+          }
+        }
+      }
+      .job_info2 {
+        width: 10vw;
+        height: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-content: space-between;
+        .job_title {
+          font-size: 0.9375vw;
+          font-family: Microsoft YaHei;
+          color: #45766d;
+        }
+        .job_other {
+          font-size: 0.729vw;
+          font-family: Microsoft YaHei;
+          color: #999999;
+        }
+      }
+      .job_info3 {
+        flex-grow: 5;
+        display: flex;
+        justify-content: flex-end;
+        .apply_job {
+          width: 100px;
+          height: 30px;
+          background-color: #45766d;
+          font-size: 0.625vw;
+          font-family: PingFang SC;
+          font-weight: 500;
+          color: #ffffff;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+    }
+  }
+}
+.pageBox {
+  width: 100%;
+  height: 8.333vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>
\ No newline at end of file

src/pages/studyServe/studyServe.vue

@@ -43,17 +43,18 @@
         </div>
       </div>
     </div>
-    <TeacherTeam :viewNum="3" />
+    <TeacherTeam :viewNum="3" :teacherList="teacherList"/>
     <Footer />
   </div>
 </template>
 <script>
 import Header from "../../components/header/header";
-import Banner from "../../components/bnaner/banner";
+import Banner from "../../components/banner/banner";
 import TeacherTeam from "../../components/teacherTeam/teacherTeam";
 import Footer from "../../components/footer/footerType2";
 import { getWebNavList } from "../../api/indexApi.js";
 import { getStudyAbroadList } from "../../api/studyServeApi.js";
+import { getWebTeacherList } from "../../api/JapaneseTrainApi";
 export default {
   components: {
     Banner,
@@ -72,6 +73,7 @@ export default {
       ],
       swiperData: [],
       studyProductList: [],
+      teacherList:[]
     };
   },
   methods: {
@@ -84,11 +86,20 @@ export default {
       let res = await getStudyAbroadList(1);
       this.studyProductList = res.Data;
     },
+     //获取教师列表
+    async getTeacherList() {
+      let res = await getWebTeacherList(2);
+      this.teacherList = res.Data.map((item) => {
+        item.showDetail = false;
+        return item
+      });
+    },
   },
   mounted() {
     this.menuList = JSON.parse(localStorage.getItem("menuList"));
     this.getWebNavList();
     this.getStudyAbroadList();
+    this.getTeacherList();
   },
 };
 </script>

src/pages/workServe/workServe.vue

@@ -52,7 +52,7 @@
 </template>
 <script>
 import Header from "../../components/header/header";
-import Banner from "../../components/bnaner/banner";
+import Banner from "../../components/banner/banner";
 import TeacherTeam from "../../components/teacherTeam/teacherTeam";
 import Footer from "../../components/footer/footerType2";
 // import { getWebNavList } from "../../api/indexApi.js";

src/router/routes.js

@@ -13,6 +13,7 @@ const routes = [
       { path: '/workServe', component: () => import('src/pages/workServe/workServe.vue') },
       { path: '/mediaCenter', component: () => import('src/pages/mediaCenter/mediaCenter.vue') },
       { path: '/aboutUs', component: () => import('src/pages/aboutUs/aboutUs.vue') },
+      { path: '/joinUs', component: () => import('src/pages/joinUs/joinUs.vue') },
     ]
   },
   // Always leave this as last one,