页面修改

src/pages/JapaneseTrain/eduProductDetail.vue

@@ -4,7 +4,12 @@
     <div class="detailBox">
       <div class="left">
         <div class="border_out">
+          <template v-if="courseDetail.CoverImg&&courseDetail.CoverImg!=''">
             <q-img :src="courseDetail.CoverImg" class="border_img" />
+          </template>
+          <template v-else>
+            <q-img src="../../assets/images/banner.png" class="border_img" />
+          </template>
         </div>
       </div>
       <div class="right">
@@ -12,7 +17,8 @@
         <div class="line"></div>
         <div class="desc" v-html="courseDetail.CourseIntro"></div>
         <div class="consult" @click="show">
-          <img src="../../assets/images/JapaneseTrain/kefu_icon.png" style="width:1.458vw;height:auto;marginRight:0.5vw" alt="">
+          <img src="../../assets/images/JapaneseTrain/kefu_icon.png" style="width:1.458vw;height:auto;marginRight:0.5vw"
+            alt="">
           立即咨询</div>
       </div>
     </div>
@@ -22,41 +28,18 @@
         <q-card class="q-dialog-plugin">
           <div class="q-pa-md" style="max-width: 400px">
             <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
-              <q-input
-                filled
-                ref="name"
-                v-model="advisorymsg.LinkMan"
-                label="联系人"
-                lazy-rules
-                :rules="[(val) => (val && val.length > 0) || '请输入联系人']"
-              />
-              <q-input
-                filled
-                ref="phone"
-                v-model="advisorymsg.LinkTel"
-                label="联系电话"
-                mask="###########"
-                lazy-rules
+              <q-input filled ref="name" v-model="advisorymsg.LinkMan" label="联系人" lazy-rules
+                :rules="[(val) => (val && val.length > 0) || '请输入联系人']" />
+              <q-input filled ref="phone" v-model="advisorymsg.LinkTel" label="联系电话" mask="###########" lazy-rules
                 :rules="[
                   (val) => (val && val.length === 11) || '请输入11位联系电话',
-                ]"
-              />
+                ]" />
               <div style="max-width: 400px">
-                <q-input
-                  label="备注"
-                  v-model="advisorymsg.Remark"
-                  filled
-                  type="textarea"
-                />
+                <q-input label="备注" v-model="advisorymsg.Remark" filled type="textarea" />
               </div>
               <div>
                 <q-btn label="提交" type="Submit" style="background-color: #45766D ;color:#ffffff" />
-                <q-btn
-                  label="重置"
-                  type="reset"
-                  flat
-                  class="q-ml-sm"
-                />
+                <q-btn label="重置" type="reset" flat class="q-ml-sm" />
               </div>
             </q-form>
           </div>
@@ -67,13 +50,13 @@
     <div class="edu_con">
       <div class="edu_name">教育相关产品</div>
       <div class="eduConbox">
-        <div
-          v-for="item in RandList"
-          :key="item.CourseId"
-          class="itemBox"
-          @click="seeDetail(item.CourseId)"
-        >
+        <div v-for="item in RandList" :key="item.CourseId" class="itemBox" @click="seeDetail(item.CourseId)">
+          <template v-if="item.CoverImg&&item.CoverImg!=''">
             <q-img :src="item.CoverImg" class="itemImg" />
+          </template>
+          <template v-else>
+            <q-img src="../../assets/images/banner.png" class="itemImg" />
+          </template>
           <div class="infoBox">
             <div class="courseName">{{ item.CourseName }}</div>
             <div class="desc">{{ item.CourseFeature }}</div>
@@ -87,18 +70,20 @@
 </template>
 
 <script>
-import Header from "../../components/header/header";
-import Footer from "../../components/footer/footerType2";
-import { getCourseDetail, addWebAdvisory } from "../../api/JapaneseTrainApi";
-export default {
+  import Header from "../../components/header/header";
+  import Footer from "../../components/footer/footerType2";
+  import {
+    getCourseDetail,
+    addWebAdvisory
+  } from "../../api/JapaneseTrainApi";
+  export default {
     components: {
       Header,
       Footer,
     },
     data() {
       return {
-      menuList: [
-        {},
+        menuList: [{},
           {
             Name: "",
           },
@@ -124,7 +109,7 @@ export default {
       },
       //咨询
       async advisory() {
-      this.advisorymsg.SourceId=this.$route.query.CourseId
+        this.advisorymsg.SourceId = this.$route.query.CourseId
         let res = await addWebAdvisory(this.advisorymsg);
         if (res.Code === 1) {
           this.$q.notify({
@@ -139,7 +124,12 @@ export default {
       },
       //查看详情
       seeDetail(id) {
-      this.$router.push({ path: "/eduProductDetail", query: { CourseId: id } });
+        this.$router.push({
+          path: "/eduProductDetail",
+          query: {
+            CourseId: id
+          }
+        });
       },
       //对话框
       show() {
@@ -183,21 +173,23 @@ export default {
       this.courseId = this.$route.query.CourseId;
       this.getCourseDetail();
     },
-};
+  };
+
 </script>
 <style lang="scss" scoped>
-.jiahe {
+  .jiahe {
     min-height: 100vh;
     background-color: #faf8f9;
-}
+  }
 
-.detailBox {
+  .detailBox {
     width: 62.5vw;
     height: 34.583vw;
     margin: 0 auto;
     padding-top: 5.202vw;
     display: flex;
     justify-content: space-between;
+
     .left {
       width: 35.208vw;
       height: 19.062vw;
@@ -206,6 +198,7 @@ export default {
       display: flex;
       justify-content: center;
       align-content: space-between;
+
       .border_out {
         width: 30.593vw;
         height: 18.75vw;
@@ -216,6 +209,7 @@ export default {
         display: flex;
         justify-content: center;
         align-items: center;
+
         .border_img {
           width: 29.01vw;
           height: 16.822vw;
@@ -223,8 +217,10 @@ export default {
         }
       }
     }
+
     .right {
       width: 23.802vw;
+
       .name {
         font-size: 1.562vw;
         line-height: 1.562vw;
@@ -234,12 +230,14 @@ export default {
         color: #111111;
         margin-bottom: 2.083vw;
       }
+
       .line {
         width: 4.166vw;
         height: 1px;
         background-color: #111111;
         margin-bottom: 2.083vw;
       }
+
       .desc {
         // height: 10.26vw;
         width: 100%;
@@ -251,6 +249,7 @@ export default {
         margin-bottom: 4.166vw;
         overflow-y: auto;
       }
+
       .consult {
         width: 100%;
         height: 2.916vw;
@@ -263,11 +262,12 @@ export default {
         color: #ffffff;
       }
     }
-}
+  }
 
-.edu_con {
+  .edu_con {
     width: 62.5vw;
     margin: 0 auto;
+
     .edu_name {
       text-align: center;
       font-size: 1.562vw;
@@ -282,6 +282,7 @@ export default {
       display: flex;
       flex-wrap: wrap;
       margin-bottom: 3.385vw;
+
       .itemBox {
         width: 20vw;
         height: 18.437vw;
@@ -289,18 +290,22 @@ export default {
         margin-right: 1.25vw;
         margin-bottom: 1.562vw;
         box-shadow: 0px 1px 6px 0px rgba(104, 104, 104, 0.1);
+
         .itemImg {
           width: 20vw;
           height: 13.229vw;
         }
+
         .infoBox {
           padding: 1.406vw 0.937vw 0;
+
           .courseName {
             font-size: 0.833vw;
             font-family: "pingfang-b" !important;
             color: #000000;
             margin-bottom: 0.989vw;
           }
+
           .desc {
             white-space: nowrap;
             overflow: hidden;
@@ -311,16 +316,19 @@ export default {
           }
         }
       }
+
       & .itemBox:nth-child(3n) {
         margin-right: 0;
       }
     }
-}
-.pageBox {
+  }
+
+  .pageBox {
     width: 100%;
     margin-bottom: 5.2vw;
     display: flex;
     justify-content: center;
     align-items: center;
-}
+  }
+
 </style>

src/pages/JapaneseTrain/eduProductList.vue

 <template>
   <div class="jiahe">
-    <Header :menuList="menuList" :curMenu="menuList[1].Name" :type="2"/>
+    <Header :menuList="menuList" :curMenu="menuList[1].Name" :type="2" />
     <!-- 教育产品 -->
     <div class="edu_con">
       <div class="edu_name">教育产品</div>
       <div class="edu_subname"></div>
       <div class="inputBox">
-        <q-input
-          v-model="msg.CourseName"
-          filled
-          type="search"
-          clearable
-          label="可搜索课程系列/名称"
-          class="inputBorder"
-          @change="changeSearchText"
-          @clear="clearSearch"
-        >
+        <q-input v-model="msg.CourseName" filled type="search" clearable label="可搜索课程系列/名称" class="inputBorder"
+          @change="changeSearchText" @clear="clearSearch">
           <template v-slot:prepend>
             <q-icon name="search" />
           </template>
         </q-input>
-        <q-select
-          outlined
-          v-model="selectText"
-          :options="options"
-          option-label ="CateName"
-          clearable
-          class="inputBorder"
-          label="可查询课程系列/名称"
-          :dense="false"
-          :options-dense="false"
-        >
+        <q-select outlined v-model="selectText" :options="options" option-label="CateName" clearable class="inputBorder"
+          label="可查询课程系列/名称" :dense="false" :options-dense="false">
         </q-select>
       </div>
       <div class="eduConbox" v-if="courseList.length>0">
-        <div v-for="item in courseList" :key="item.CourseId" class="itemBox" @click="seeDetail(item.CourseId)" >
+        <div v-for="item in courseList" :key="item.CourseId" class="itemBox" @click="seeDetail(item.CourseId)">
+          <template v-if="item.CoverImg&&item.CoverImg!=''">
             <q-img :src="item.CoverImg" class="itemImg" />
+          </template>
+          <template v-else>
+            <q-img src="../../assets/images/banner.png" class="itemImg" />
+          </template>
           <div class="infoBox">
             <div class="courseName">{{ item.CourseName }}</div>
             <div class="desc">{{ item.CourseFeature }}</div>
           </div>
         </div>
       </div>
-      <!-- <div v-if="courseList.length==0" class="nodata">暂无数据</div> -->
       <NoData v-if="courseList.length==0"></NoData>
     </div>
     <div class="pageBox">
-      <q-pagination
-        v-model="currentPage"
-        color="brand"
-        :max="pageCount"
-        :max-pages="5"
-        boundary-numbers
-        @input="changePage"
-        v-if="pageCount>1"
-      >
+      <q-pagination v-model="currentPage" color="brand" :max="pageCount" :max-pages="5" boundary-numbers
+        @input="changePage" v-if="pageCount>1">
       </q-pagination>
     </div>
     <!-- 底部 -->
@@ -63,11 +43,14 @@
 </template>
 
 <script>
-import Header from "../../components/header/header";
-import Footer from "../../components/footer/footerType2";
-import NoData from "../../components/noData/noData";
-import { getCourseCategoryList , getCoursePageList} from "../../api/JapaneseTrainApi"
-export default {
+  import Header from "../../components/header/header";
+  import Footer from "../../components/footer/footerType2";
+  import NoData from "../../components/noData/noData";
+  import {
+    getCourseCategoryList,
+    getCoursePageList
+  } from "../../api/JapaneseTrainApi"
+  export default {
     components: {
       Header,
       Footer,
@@ -75,96 +58,106 @@ export default {
     },
     data() {
       return {
-      menuList:[ {},
+        menuList: [{},
           {
             Name: "",
-        },],
+          },
+        ],
 
-      selectText:"",
+        selectText: "",
         options: [],
         currentPage: 1,
-      pageCount:0,
-      msg:{
-        pageIndex:1,
-        pageSize:24,
-        CourseName:"",
-        QCateIds:""
+        pageCount: 0,
+        msg: {
+          pageIndex: 1,
+          pageSize: 24,
+          CourseName: "",
+          QCateIds: ""
         },
         courseList: [],
       };
     },
-  watch:{
-    selectText(val){
-      this.currentPage=1
-      this.msg.pageIndex=1
-      if(val==null){
-        this.msg.QCateIds=""
-      }else{
-        this.msg.QCateIds=val.CateId
+    watch: {
+      selectText(val) {
+        this.currentPage = 1
+        this.msg.pageIndex = 1
+        if (val == null) {
+          this.msg.QCateIds = ""
+        } else {
+          this.msg.QCateIds = val.CateId
         }
         this.getCoursePageList()
       }
     },
     methods: {
       //翻页
-    changePage(val){
-      this.currentPage=val
-      this.msg.pageIndex=val
+      changePage(val) {
+        this.currentPage = val
+        this.msg.pageIndex = val
         this.getCoursePageList()
       },
       // 搜索框
-    changeSearchText(){
+      changeSearchText() {
         this.getCoursePageList()
       },
       // 清空搜索框
-    clearSearch(){
-      this.msg.CourseName=""
+      clearSearch() {
+        this.msg.CourseName = ""
         this.getCoursePageList()
       },
       //查看详情
-    seeDetail(id){
-        this.$router.push({ path: '/eduProductDetail', query: { CourseId: id }})
+      seeDetail(id) {
+        this.$router.push({
+          path: '/eduProductDetail',
+          query: {
+            CourseId: id
+          }
+        })
       },
       //获取课程系列列表
-    async getCourseCategoryList(){
-      let res= await getCourseCategoryList()
-      this.options=res.Data
+      async getCourseCategoryList() {
+        let res = await getCourseCategoryList()
+        this.options = res.Data
       },
       //获取课程列表
-     async getCoursePageList(){
-        let res= await getCoursePageList(this.msg)
-        this.courseList=res.Data.PageData
-        this.pageCount=res.Data.PageCount
+      async getCoursePageList() {
+        let res = await getCoursePageList(this.msg)
+        this.courseList = res.Data.PageData
+        this.pageCount = res.Data.PageCount
       }
     },
-  mounted(){
-    this.menuList=JSON.parse(localStorage.getItem("menuList"))
+    mounted() {
+      this.menuList = JSON.parse(localStorage.getItem("menuList"))
       this.getCourseCategoryList()
       this.getCoursePageList()
     }
 
-};
+  };
+
 </script>
 <style lang="scss" scoped>
-.jiahe {
+  .jiahe {
     background-color: #faf8f9;
-}
+  }
 
-.edu_con {
+  .edu_con {
     width: 62.5vw;
     margin: 0 auto;
     padding-top: 4.01vw;
+
     .edu_name {
       text-align: center;
       font-size: 1.562vw;
       font-family: "pingfang-b" !important;
       color: #111111;
     }
+
     .edu_subname {
       text-align: center;
       font-size: 0.833vw;
       color: #888888;
     }
+
     .inputBox {
       width: 100%;
       height: 2.916vw;
@@ -172,16 +165,19 @@ export default {
       display: flex;
       justify-content: space-between;
       align-items: center;
+
       .inputBorder {
         width: 30.468vw;
         // height: 2.916vw;
         background-color: #e9e9e9;
       }
     }
+
     .eduConbox {
       display: flex;
       flex-wrap: wrap;
       margin-bottom: 3.385vw;
+
       .itemBox {
         width: 20vw;
         height: 18.437vw;
@@ -189,18 +185,22 @@ export default {
         margin-right: 1.2vw;
         margin-bottom: 1.562vw;
         box-shadow: 0px 1px 6px 0px rgba(104, 104, 104, 0.1);
+
         .itemImg {
           width: 20vw;
           height: 13.229vw;
         }
+
         .infoBox {
           padding: 1.406vw 0.937vw 0;
+
           .courseName {
             font-size: 0.833vw;
             font-family: "pingfang-b" !important;
             color: #000000;
             margin-bottom: 0.989vw;
           }
+
           .desc {
             white-space: nowrap;
             overflow: hidden;
@@ -211,19 +211,23 @@ export default {
           }
         }
       }
+
       & .itemBox:nth-child(3n) {
         margin-right: 0;
       }
     }
-}
-.pageBox{
+  }
+
+  .pageBox {
     width: 100%;
     margin-bottom: 5.2vw;
     display: flex;
     justify-content: center;
     align-items: center;
-}
-.nodata{
+  }
+
+  .nodata {
     text-align: center;
-}
+  }
+
 </style>

src/pages/index.vue

@@ -182,29 +182,7 @@
         <q-carousel-slide name="2">
           <div class="conbox">
             <div class="classiconBox">
-              <!-- <div class="classItem" @click="goDetail('/courseIntroduce')">
-                <q-img
-                  src="../assets/images/index/course_icon/class_icon6.png"
-                  spinner-color="white"
-                  class="class_icon2"
-                  v-if="!class_icon1"
-                  @mouseenter="class_icon1 = true"
-                />
-                <q-img
-                  src="../assets/images/index/course_icon/class_icon6_6.png"
-                  spinner-color="white"
-                  class="class_icon2"
-                  v-if="class_icon1"
-                  @mouseleave="class_icon1 = false"
-                />
-                <div class="class_title">少儿日语课程</div>
-                <div class="class_dec">
-                  学习日语儿童绘本故事，日语发音趣味学习，日语填字涂画，日语儿歌，剪纸贴画学日语，迷宫，日语纸上冒险小游戏等。学完后小朋友：能够说简单的日语、日常生活词汇，能够用简单的日语讲绘本故事 ，开发小朋友大脑语言思维能力
-                  学习日本文字的构成、五十音等语音部分、寒暄语、日语基本五大句型~~学习日本文字的构成、五十音等语音部分、寒暄语、日语基本五大句型学成后：
-                  掌握五十音
-                  掌握日本寒暄用语、掌握日语五大基本句型、打开日语学习新世界
-                </div>
-              </div> -->
+          
               <div class="classItem" @click="goDetail('/courseIntroduce')">
                 <q-img
                   src="../assets/images/index/course_icon/class_icon7.png"