Skip to content

M
ministers
Commit 370d9238 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 1e137dd0
Show whitespace changes
Inline Side-by-side
Showing with 860 additions and 917 deletions
src/pages/JapaneseTrain/JapaneseTrain.vue
View file @ 370d9238
...@@ -2,58 +2,37 @@ ...@@ -2,58 +2,37 @@
<div class="jiahe"> <div class="jiahe">
<Header :menuList="menuList" :curMenu="menuList[1].Name" :type="2" /> <Header :menuList="menuList" :curMenu="menuList[1].Name" :type="2" />
<!-- bannner部分 --> <!-- bannner部分 -->
<Banner :swiperList="swiperData"/> <Banner :swiperList="swiperData" />
<!-- 教育产品 --> <!-- 教育产品 -->
<div class="edu_con"> <div class="edu_con">
<div class="edu_name">教育产品</div> <div class="edu_name">教育产品</div>
<!-- <div class="edu_subname">副标题</div> --> <!-- <div class="edu_subname">副标题</div> -->
<div class="inputBox"> <div class="inputBox">
<q-input <q-input v-model="coursemsg.CourseName" filled type="search" clearable label="可搜索课程系列/名称" class="inputBorder"
v-model="coursemsg.CourseName" @change="changeSearchCourse" @clear="clearSearchCourse">
filled
type="search"
clearable
label="可搜索课程系列/名称"
class="inputBorder"
@change="changeSearchCourse"
@clear="clearSearchCourse"
>
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="search" /> <q-icon name="search" />
</template> </template>
</q-input> </q-input>
<q-select <q-select outlined v-model="selectCourseText" :options="options" option-label="CateName" clearable
outlined class="inputBorder" label="可查询课程系列/名称" :dense="false" :options-dense="false">
v-model="selectCourseText"
:options="options"
option-label="CateName"
clearable
class="inputBorder"
label="可查询课程系列/名称"
:dense="false"
:options-dense="false"
>
</q-select> </q-select>
</div> </div>
<div class="eduConbox" v-if="courseList.length > 0"> <div class="eduConbox" v-if="courseList.length > 0">
<div <div v-for="item in courseList" :key="item.CourseId" class="itemBox" @click="seeDetail(item.CourseId)">
v-for="item in courseList" <template v-if="item.CoverImg&&item.CoverImg!=''">
:key="item.CourseId"
class="itemBox"
@click="seeDetail(item.CourseId)"
>
<q-img :src="item.CoverImg" class="itemImg" /> <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="infoBox">
<div class="courseName">{{ item.CourseName }}</div> <div class="courseName">{{ item.CourseName }}</div>
<div class="desc">{{ item.CourseFeature }}</div> <div class="desc">{{ item.CourseFeature }}</div>
</div> </div>
</div> </div>
</div> </div>
<div <div class="seemore" @click="seeMore('/eduProductList')" v-if="courseList.length > 0">
class="seemore"
@click="seeMore('/eduProductList')"
v-if="courseList.length > 0"
>
查看更多 查看更多
</div> </div>
<NoData v-if="courseList.length == 0"></NoData> <NoData v-if="courseList.length == 0"></NoData>
...@@ -65,66 +44,32 @@ ...@@ -65,66 +44,32 @@
<div class="inputBox"> <div class="inputBox">
<!-- 选择系列 --> <!-- 选择系列 -->
<div class="inputBorder2"> <div class="inputBorder2">
<q-select <q-select label="可查询课程系列" outlined v-model="classSelectSeries" :options="options" option-label="CateName"
label="可查询课程系列" clearable :dense="false" :options-dense="false">
outlined
v-model="classSelectSeries"
:options="options"
option-label="CateName"
clearable
:dense="false"
:options-dense="false"
>
</q-select> </q-select>
</div> </div>
<!-- 根据系列选课程 --> <!-- 根据系列选课程 -->
<div class="inputBorder2"> <div class="inputBorder2">
<q-select <q-select label="可查询班级名称" outlined v-model="classSelectCourseName" :options="courseNameOption"
label="可查询班级名称" option-label="CourseName" clearable :dense="false" :options-dense="false">
outlined
v-model="classSelectCourseName"
:options="courseNameOption"
option-label="CourseName"
clearable
:dense="false"
:options-dense="false"
>
</q-select> </q-select>
</div> </div>
<q-input <q-input v-model="classmsg.ClassName" filled type="search" clearable label="可搜索课程系列/名称" class="inputBorder2"
v-model="classmsg.ClassName" @change="changeSearchClass" @clear="clearSearchClass">
filled
type="search"
clearable
label="可搜索课程系列/名称"
class="inputBorder2"
@change="changeSearchClass"
@clear="clearSearchClass"
>
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="search" /> <q-icon name="search" />
</template> </template>
</q-input> </q-input>
</div> </div>
<div class="classPlanBox" v-if="classPlanList.length > 0"> <div class="classPlanBox" v-if="classPlanList.length > 0">
<div <div v-for="item in classPlanList" :key="item.ClassId" class="classPlanItemBox">
v-for="item in classPlanList"
:key="item.ClassId"
class="classPlanItemBox"
>
<div class="infoBox1"> <div class="infoBox1">
<div class="className">{{ item.ClassName }}</div> <div class="className">{{ item.ClassName }}</div>
<div class="courseInfo" style="margin-bottom: 0.625vw"> <div class="courseInfo" style="margin-bottom: 0.625vw">
<q-img <q-img src="../../assets/images/JapaneseTrain/icon1.png" class="itemIcon" />{{ item.CourseName }}
src="../../assets/images/JapaneseTrain/icon1.png"
class="itemIcon"
/>{{ item.CourseName }}
</div> </div>
<div class="courseInfo"> <div class="courseInfo">
<q-img <q-img src="../../assets/images/JapaneseTrain/icon2.png" class="itemIcon" />{{ item.ClassHours }}课时
src="../../assets/images/JapaneseTrain/icon2.png"
class="itemIcon"
/>{{ item.ClassHours }}课时
</div> </div>
</div> </div>
<div class="infoBox2"> <div class="infoBox2">
...@@ -139,32 +84,22 @@ ...@@ -139,32 +84,22 @@
<div class="infoBox3"> <div class="infoBox3">
<div class="title">名额信息</div> <div class="title">名额信息</div>
<div style="margin-bottom: 0.729vw" class="numInfo"> <div style="margin-bottom: 0.729vw" class="numInfo">
计划招生人数<span class="planNum">{{ item.ClassPersion }}</span 计划招生人数<span class="planNum">{{ item.ClassPersion }}</span>人
>人
</div> </div>
<div class="numInfo"> <div class="numInfo">
剩余招生名额<span class="surplusNum">{{ item.SurplusNum }}</span 剩余招生名额<span class="surplusNum">{{ item.SurplusNum }}</span>人
>人
</div> </div>
</div> </div>
<div class="infoBox4"> <div class="infoBox4">
<div class="title">咨询客服</div> <div class="title">咨询客服</div>
<div class="consultBtn" @click="show(item.ClassId)"> <div class="consultBtn" @click="show(item.ClassId)">
<img <img src="../../assets/images/JapaneseTrain/kefu_icon.png" style="width: 0.833vw; height: auto" alt="" />
src="../../assets/images/JapaneseTrain/kefu_icon.png"
style="width: 0.833vw; height: auto"
alt=""
/>
去咨询 去咨询
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div <div class="seemore" v-if="classPlanList.length > 0" @click="seeMore('/classPlanList')">
class="seemore"
v-if="classPlanList.length > 0"
@click="seeMore('/classPlanList')"
>
查看更多 查看更多
</div> </div>
<NoData v-if="classPlanList.length == 0"></NoData> <NoData v-if="classPlanList.length == 0"></NoData>
...@@ -174,39 +109,17 @@ ...@@ -174,39 +109,17 @@
<q-card class="q-dialog-plugin"> <q-card class="q-dialog-plugin">
<div class="q-pa-md" style="max-width: 400px"> <div class="q-pa-md" style="max-width: 400px">
<q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md"> <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
<q-input <q-input filled ref="name" v-model="advisorymsg.LinkMan" label="联系人" lazy-rules
filled :rules="[(val) => (val && val.length > 0) || '请输入联系人']" />
ref="name" <q-input filled ref="phone" v-model="advisorymsg.LinkTel" label="联系电话" mask="###########" lazy-rules
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="[ :rules="[
(val) => (val && val.length === 11) || '请输入11位联系电话', (val) => (val && val.length === 11) || '请输入11位联系电话',
]" ]" />
/>
<div style="max-width: 400px"> <div style="max-width: 400px">
<q-input <q-input label="备注" v-model="advisorymsg.Remark" filled type="textarea" />
label="备注"
v-model="advisorymsg.Remark"
filled
type="textarea"
/>
</div> </div>
<div> <div>
<q-btn <q-btn label="提交" type="Submit" style="background-color: #45766d; color: #ffffff" />
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> </div>
</q-form> </q-form>
...@@ -221,21 +134,23 @@ ...@@ -221,21 +134,23 @@
</div> </div>
</template> </template>
<script> <script>
import Header from "../../components/header/header"; import Header from "../../components/header/header";
import Footer from "../../components/footer/footerType2"; import Footer from "../../components/footer/footerType2";
import Banner from "../../components/banner/banner"; import Banner from "../../components/banner/banner";
import TeacherTeam from "../../components/teacherTeam/teacherTeam"; import TeacherTeam from "../../components/teacherTeam/teacherTeam";
import NoData from "../../components/noData/noData"; import NoData from "../../components/noData/noData";
import { getWebNavList } from "../../api/indexApi.js"; import {
import { getWebNavList
} from "../../api/indexApi.js";
import {
getCourseCategoryList, getCourseCategoryList,
getCoursePageList, getCoursePageList,
getClassPlan, getClassPlan,
getCourseList, getCourseList,
getWebTeacherList, getWebTeacherList,
addWebAdvisory, addWebAdvisory,
} from "../../api/JapaneseTrainApi"; } from "../../api/JapaneseTrainApi";
export default { export default {
components: { components: {
Header, Header,
Footer, Footer,
...@@ -245,13 +160,17 @@ export default { ...@@ -245,13 +160,17 @@ export default {
}, },
data() { data() {
return { return {
menuList: [ menuList: [{},
{},
{ {
Name: "", Name: "",
}, },
], ],
swiperData: [{ BgImg: "", NavTitle: "", SubTitle: "", LinkUrl: "" }], swiperData: [{
BgImg: "",
NavTitle: "",
SubTitle: "",
LinkUrl: ""
}],
selectCourseText: "", //课程系列选择框 selectCourseText: "", //课程系列选择框
classSelectSeries: "", classSelectSeries: "",
classSelectCourseName: "", classSelectCourseName: "",
...@@ -333,7 +252,12 @@ export default { ...@@ -333,7 +252,12 @@ export default {
}, },
//查看课程详情 //查看课程详情
seeDetail(id) { seeDetail(id) {
this.$router.push({ path: "/eduProductDetail", query: { CourseId: id } }); this.$router.push({
path: "/eduProductDetail",
query: {
CourseId: id
}
});
}, },
//获取网站导航列表（swiper） //获取网站导航列表（swiper）
async getWebNavList() { async getWebNavList() {
...@@ -429,17 +353,20 @@ export default { ...@@ -429,17 +353,20 @@ export default {
this.getCourseList(); this.getCourseList();
this.getTeacherList(); this.getTeacherList();
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.jiahe { .jiahe {
height: 100%; height: 100%;
background-color: #f6f6f6; background-color: #f6f6f6;
} }
.edu_con {
.edu_con {
width: 62.5vw; width: 62.5vw;
margin: 5.516vw auto 0; margin: 5.516vw auto 0;
margin-bottom: 5.156vw; margin-bottom: 5.156vw;
.edu_name { .edu_name {
text-align: center; text-align: center;
font-size: 1.562vw; font-size: 1.562vw;
...@@ -448,12 +375,14 @@ export default { ...@@ -448,12 +375,14 @@ export default {
font-family: "pingfang-b" !important; font-family: "pingfang-b" !important;
color: #111111; color: #111111;
} }
.edu_subname { .edu_subname {
text-align: center; text-align: center;
font-size: 0.833vw; font-size: 0.833vw;
// font-family: Microsoft YaHei; // font-family: Microsoft YaHei;
color: #888888; color: #888888;
} }
.inputBox { .inputBox {
width: 100%; width: 100%;
height: 2.916vw; height: 2.916vw;
...@@ -461,39 +390,47 @@ export default { ...@@ -461,39 +390,47 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.inputBorder { .inputBorder {
width: 30.468vw; width: 30.468vw;
// height: 2.916vw; // height: 2.916vw;
background-color: #e9e9e9; background-color: #e9e9e9;
} }
.inputBorder2 { .inputBorder2 {
width: 19.791vw; width: 19.791vw;
// height: 2.916vw; // height: 2.916vw;
background-color: #e9e9e9; background-color: #e9e9e9;
} }
} }
.eduConbox { .eduConbox {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 2.604vw; margin-bottom: 2.604vw;
.itemBox { .itemBox {
width: 20vw; width: 20vw;
height: 18.437vw; height: 18.437vw;
background-color: #fff; background-color: #fff;
margin-right: 1.2vw; margin-right: 1.2vw;
margin-bottom: 1.562vw; margin-bottom: 1.562vw;
.itemImg { .itemImg {
width: 20vw; width: 20vw;
height: 13.229vw; height: 13.229vw;
} }
.infoBox { .infoBox {
padding: 1.406vw 0.937vw 0; padding: 1.406vw 0.937vw 0;
.courseName { .courseName {
font-size: 0.833vw; font-size: 0.833vw;
font-family: "pingfang-b" !important; font-family: "pingfang-b" !important;
color: #000000; color: #000000;
margin-bottom: 0.989vw; margin-bottom: 0.989vw;
} }
.desc { .desc {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
...@@ -504,13 +441,14 @@ export default { ...@@ -504,13 +441,14 @@ export default {
} }
} }
} }
& .itemBox:nth-child(3n) { & .itemBox:nth-child(3n) {
margin-right: 0; margin-right: 0;
} }
} }
} }
.seemore { .seemore {
margin: 0 auto; margin: 0 auto;
width: 12.5vw; width: 12.5vw;
height: 2.916vw; height: 2.916vw;
...@@ -523,8 +461,9 @@ export default { ...@@ -523,8 +461,9 @@ export default {
font-weight: 500; font-weight: 500;
color: #ffffff; color: #ffffff;
cursor: pointer; cursor: pointer;
} }
.classPlanItemBox {
.classPlanItemBox {
width: 100%; width: 100%;
// height: 7.5vw; // height: 7.5vw;
background-color: #ffffff; background-color: #ffffff;
...@@ -532,26 +471,31 @@ export default { ...@@ -532,26 +471,31 @@ export default {
padding: 1.562vw 1.041vw; padding: 1.562vw 1.041vw;
margin-bottom: 2.604vw; margin-bottom: 2.604vw;
display: flex; display: flex;
.title { .title {
font-size: 0.729vw; font-size: 0.729vw;
font-family: "pingfang-b" !important; font-family: "pingfang-b" !important;
color: #2d2d2d; color: #2d2d2d;
margin-bottom: 1.145vw; margin-bottom: 1.145vw;
} }
.infoBox1 { .infoBox1 {
width: 18.75vw; width: 18.75vw;
height: 100%; height: 100%;
.className { .className {
font-size: 0.833vw; font-size: 0.833vw;
// font-family: Microsoft YaHei; // font-family: Microsoft YaHei;
color: #111111; color: #111111;
margin-bottom: 1.145vw; margin-bottom: 1.145vw;
} }
.courseInfo { .courseInfo {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 0.729vw; font-size: 0.729vw;
color: #111111; color: #111111;
.itemIcon { .itemIcon {
width: 0.729vw; width: 0.729vw;
height: 0.729vw; height: 0.729vw;
...@@ -559,12 +503,15 @@ export default { ...@@ -559,12 +503,15 @@ export default {
} }
} }
} }
.infoBox2 { .infoBox2 {
width: 19.583vw; width: 19.583vw;
height: 100%; height: 100%;
.stuInfo { .stuInfo {
font-size: 0.729vw; font-size: 0.729vw;
color: #111111; color: #111111;
.stuTime { .stuTime {
color: #45766d; color: #45766d;
font-family: "pingfang-b" !important; font-family: "pingfang-b" !important;
...@@ -572,21 +519,26 @@ export default { ...@@ -572,21 +519,26 @@ export default {
} }
} }
} }
.infoBox3 { .infoBox3 {
width: 15.989vw; width: 15.989vw;
height: 100%; height: 100%;
.numInfo { .numInfo {
font-size: 0.729vw; font-size: 0.729vw;
color: #999999; color: #999999;
.planNum { .planNum {
color: #111111; color: #111111;
margin-left: 1vw; margin-left: 1vw;
} }
.surplusNum { .surplusNum {
margin-left: 1vw; margin-left: 1vw;
} }
} }
} }
.infoBox4 { .infoBox4 {
.consultBtn { .consultBtn {
width: 4.166vw; width: 4.166vw;
...@@ -602,5 +554,6 @@ export default { ...@@ -602,5 +554,6 @@ export default {
cursor: pointer; cursor: pointer;
} }
} }
} }
</style> </style>
src/pages/JapaneseTrain/eduProductDetail.vue
View file @ 370d9238
...@@ -4,7 +4,12 @@ ...@@ -4,7 +4,12 @@
<div class="detailBox"> <div class="detailBox">
<div class="left"> <div class="left">
<div class="border_out"> <div class="border_out">
<template v-if="courseDetail.CoverImg&&courseDetail.CoverImg!=''">
<q-img :src="courseDetail.CoverImg" class="border_img" /> <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> </div>
<div class="right"> <div class="right">
...@@ -12,7 +17,8 @@ ...@@ -12,7 +17,8 @@
<div class="line"></div> <div class="line"></div>
<div class="desc" v-html="courseDetail.CourseIntro"></div> <div class="desc" v-html="courseDetail.CourseIntro"></div>
<div class="consult" @click="show"> <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> </div>
</div> </div>
...@@ -22,41 +28,18 @@ ...@@ -22,41 +28,18 @@
<q-card class="q-dialog-plugin"> <q-card class="q-dialog-plugin">
<div class="q-pa-md" style="max-width: 400px"> <div class="q-pa-md" style="max-width: 400px">
<q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md"> <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
<q-input <q-input filled ref="name" v-model="advisorymsg.LinkMan" label="联系人" lazy-rules
filled :rules="[(val) => (val && val.length > 0) || '请输入联系人']" />
ref="name" <q-input filled ref="phone" v-model="advisorymsg.LinkTel" label="联系电话" mask="###########" lazy-rules
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="[ :rules="[
(val) => (val && val.length === 11) || '请输入11位联系电话', (val) => (val && val.length === 11) || '请输入11位联系电话',
]" ]" />
/>
<div style="max-width: 400px"> <div style="max-width: 400px">
<q-input <q-input label="备注" v-model="advisorymsg.Remark" filled type="textarea" />
label="备注"
v-model="advisorymsg.Remark"
filled
type="textarea"
/>
</div> </div>
<div> <div>
<q-btn label="提交" type="Submit" style="background-color: #45766D ;color:#ffffff" /> <q-btn label="提交" type="Submit" style="background-color: #45766D ;color:#ffffff" />
<q-btn <q-btn label="重置" type="reset" flat class="q-ml-sm" />
label="重置"
type="reset"
flat
class="q-ml-sm"
/>
</div> </div>
</q-form> </q-form>
</div> </div>
...@@ -67,13 +50,13 @@ ...@@ -67,13 +50,13 @@
<div class="edu_con"> <div class="edu_con">
<div class="edu_name">教育相关产品</div> <div class="edu_name">教育相关产品</div>
<div class="eduConbox"> <div class="eduConbox">
<div <div v-for="item in RandList" :key="item.CourseId" class="itemBox" @click="seeDetail(item.CourseId)">
v-for="item in RandList" <template v-if="item.CoverImg&&item.CoverImg!=''">
:key="item.CourseId"
class="itemBox"
@click="seeDetail(item.CourseId)"
>
<q-img :src="item.CoverImg" class="itemImg" /> <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="infoBox">
<div class="courseName">{{ item.CourseName }}</div> <div class="courseName">{{ item.CourseName }}</div>
<div class="desc">{{ item.CourseFeature }}</div> <div class="desc">{{ item.CourseFeature }}</div>
...@@ -87,18 +70,20 @@ ...@@ -87,18 +70,20 @@
</template> </template>
<script> <script>
import Header from "../../components/header/header"; import Header from "../../components/header/header";
import Footer from "../../components/footer/footerType2"; import Footer from "../../components/footer/footerType2";
import { getCourseDetail, addWebAdvisory } from "../../api/JapaneseTrainApi"; import {
export default { getCourseDetail,
addWebAdvisory
} from "../../api/JapaneseTrainApi";
export default {
components: { components: {
Header, Header,
Footer, Footer,
}, },
data() { data() {
return { return {
menuList: [ menuList: [{},
{},
{ {
Name: "", Name: "",
}, },
...@@ -124,7 +109,7 @@ export default { ...@@ -124,7 +109,7 @@ export default {
}, },
//咨询 //咨询
async advisory() { async advisory() {
this.advisorymsg.SourceId=this.$route.query.CourseId this.advisorymsg.SourceId = this.$route.query.CourseId
let res = await addWebAdvisory(this.advisorymsg); let res = await addWebAdvisory(this.advisorymsg);
if (res.Code === 1) { if (res.Code === 1) {
this.$q.notify({ this.$q.notify({
...@@ -139,7 +124,12 @@ export default { ...@@ -139,7 +124,12 @@ export default {
}, },
//查看详情 //查看详情
seeDetail(id) { seeDetail(id) {
this.$router.push({ path: "/eduProductDetail", query: { CourseId: id } }); this.$router.push({
path: "/eduProductDetail",
query: {
CourseId: id
}
});
}, },
//对话框 //对话框
show() { show() {
...@@ -183,21 +173,23 @@ export default { ...@@ -183,21 +173,23 @@ export default {
this.courseId = this.$route.query.CourseId; this.courseId = this.$route.query.CourseId;
this.getCourseDetail(); this.getCourseDetail();
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.jiahe { .jiahe {
min-height: 100vh; min-height: 100vh;
background-color: #faf8f9; background-color: #faf8f9;
} }
.detailBox { .detailBox {
width: 62.5vw; width: 62.5vw;
height: 34.583vw; height: 34.583vw;
margin: 0 auto; margin: 0 auto;
padding-top: 5.202vw; padding-top: 5.202vw;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.left { .left {
width: 35.208vw; width: 35.208vw;
height: 19.062vw; height: 19.062vw;
...@@ -206,6 +198,7 @@ export default { ...@@ -206,6 +198,7 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-content: space-between; align-content: space-between;
.border_out { .border_out {
width: 30.593vw; width: 30.593vw;
height: 18.75vw; height: 18.75vw;
...@@ -216,6 +209,7 @@ export default { ...@@ -216,6 +209,7 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.border_img { .border_img {
width: 29.01vw; width: 29.01vw;
height: 16.822vw; height: 16.822vw;
...@@ -223,8 +217,10 @@ export default { ...@@ -223,8 +217,10 @@ export default {
} }
} }
} }
.right { .right {
width: 23.802vw; width: 23.802vw;
.name { .name {
font-size: 1.562vw; font-size: 1.562vw;
line-height: 1.562vw; line-height: 1.562vw;
...@@ -234,12 +230,14 @@ export default { ...@@ -234,12 +230,14 @@ export default {
color: #111111; color: #111111;
margin-bottom: 2.083vw; margin-bottom: 2.083vw;
} }
.line { .line {
width: 4.166vw; width: 4.166vw;
height: 1px; height: 1px;
background-color: #111111; background-color: #111111;
margin-bottom: 2.083vw; margin-bottom: 2.083vw;
} }
.desc { .desc {
// height: 10.26vw; // height: 10.26vw;
width: 100%; width: 100%;
...@@ -251,6 +249,7 @@ export default { ...@@ -251,6 +249,7 @@ export default {
margin-bottom: 4.166vw; margin-bottom: 4.166vw;
overflow-y: auto; overflow-y: auto;
} }
.consult { .consult {
width: 100%; width: 100%;
height: 2.916vw; height: 2.916vw;
...@@ -263,11 +262,12 @@ export default { ...@@ -263,11 +262,12 @@ export default {
color: #ffffff; color: #ffffff;
} }
} }
} }
.edu_con { .edu_con {
width: 62.5vw; width: 62.5vw;
margin: 0 auto; margin: 0 auto;
.edu_name { .edu_name {
text-align: center; text-align: center;
font-size: 1.562vw; font-size: 1.562vw;
...@@ -282,6 +282,7 @@ export default { ...@@ -282,6 +282,7 @@ export default {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 3.385vw; margin-bottom: 3.385vw;
.itemBox { .itemBox {
width: 20vw; width: 20vw;
height: 18.437vw; height: 18.437vw;
...@@ -289,18 +290,22 @@ export default { ...@@ -289,18 +290,22 @@ export default {
margin-right: 1.25vw; margin-right: 1.25vw;
margin-bottom: 1.562vw; margin-bottom: 1.562vw;
box-shadow: 0px 1px 6px 0px rgba(104, 104, 104, 0.1); box-shadow: 0px 1px 6px 0px rgba(104, 104, 104, 0.1);
.itemImg { .itemImg {
width: 20vw; width: 20vw;
height: 13.229vw; height: 13.229vw;
} }
.infoBox { .infoBox {
padding: 1.406vw 0.937vw 0; padding: 1.406vw 0.937vw 0;
.courseName { .courseName {
font-size: 0.833vw; font-size: 0.833vw;
font-family: "pingfang-b" !important; font-family: "pingfang-b" !important;
color: #000000; color: #000000;
margin-bottom: 0.989vw; margin-bottom: 0.989vw;
} }
.desc { .desc {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
...@@ -311,16 +316,19 @@ export default { ...@@ -311,16 +316,19 @@ export default {
} }
} }
} }
& .itemBox:nth-child(3n) { & .itemBox:nth-child(3n) {
margin-right: 0; margin-right: 0;
} }
} }
} }
.pageBox {
.pageBox {
width: 100%; width: 100%;
margin-bottom: 5.2vw; margin-bottom: 5.2vw;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
</style> </style>
src/pages/JapaneseTrain/eduProductList.vue
View file @ 370d9238
<template> <template>
<div class="jiahe"> <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_con">
<div class="edu_name">教育产品</div> <div class="edu_name">教育产品</div>
<div class="edu_subname"></div> <div class="edu_subname"></div>
<div class="inputBox"> <div class="inputBox">
<q-input <q-input v-model="msg.CourseName" filled type="search" clearable label="可搜索课程系列/名称" class="inputBorder"
v-model="msg.CourseName" @change="changeSearchText" @clear="clearSearch">
filled
type="search"
clearable
label="可搜索课程系列/名称"
class="inputBorder"
@change="changeSearchText"
@clear="clearSearch"
>
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="search" /> <q-icon name="search" />
</template> </template>
</q-input> </q-input>
<q-select <q-select outlined v-model="selectText" :options="options" option-label="CateName" clearable class="inputBorder"
outlined label="可查询课程系列/名称" :dense="false" :options-dense="false">
v-model="selectText"
:options="options"
option-label ="CateName"
clearable
class="inputBorder"
label="可查询课程系列/名称"
:dense="false"
:options-dense="false"
>
</q-select> </q-select>
</div> </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" 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" /> <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="infoBox">
<div class="courseName">{{ item.CourseName }}</div> <div class="courseName">{{ item.CourseName }}</div>
<div class="desc">{{ item.CourseFeature }}</div> <div class="desc">{{ item.CourseFeature }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- <div v-if="courseList.length==0" class="nodata">暂无数据</div> -->
<NoData v-if="courseList.length==0"></NoData> <NoData v-if="courseList.length==0"></NoData>
</div> </div>
<div class="pageBox"> <div class="pageBox">
<q-pagination <q-pagination v-model="currentPage" color="brand" :max="pageCount" :max-pages="5" boundary-numbers
v-model="currentPage" @input="changePage" v-if="pageCount>1">
color="brand"
:max="pageCount"
:max-pages="5"
boundary-numbers
@input="changePage"
v-if="pageCount>1"
>
</q-pagination> </q-pagination>
</div> </div>
<!-- 底部 --> <!-- 底部 -->
...@@ -63,11 +43,14 @@ ...@@ -63,11 +43,14 @@
</template> </template>
<script> <script>
import Header from "../../components/header/header"; import Header from "../../components/header/header";
import Footer from "../../components/footer/footerType2"; import Footer from "../../components/footer/footerType2";
import NoData from "../../components/noData/noData"; import NoData from "../../components/noData/noData";
import { getCourseCategoryList , getCoursePageList} from "../../api/JapaneseTrainApi" import {
export default { getCourseCategoryList,
getCoursePageList
} from "../../api/JapaneseTrainApi"
export default {
components: { components: {
Header, Header,
Footer, Footer,
...@@ -75,96 +58,106 @@ export default { ...@@ -75,96 +58,106 @@ export default {
}, },
data() { data() {
return { return {
menuList:[ {}, menuList: [{},
{ {
Name: "", Name: "",
},], },
],
selectText:"", selectText: "",
options: [], options: [],
currentPage: 1, currentPage: 1,
pageCount:0, pageCount: 0,
msg:{ msg: {
pageIndex:1, pageIndex: 1,
pageSize:24, pageSize: 24,
CourseName:"", CourseName: "",
QCateIds:"" QCateIds: ""
}, },
courseList: [], courseList: [],
}; };
}, },
watch:{ watch: {
selectText(val){ selectText(val) {
this.currentPage=1 this.currentPage = 1
this.msg.pageIndex=1 this.msg.pageIndex = 1
if(val==null){ if (val == null) {
this.msg.QCateIds="" this.msg.QCateIds = ""
}else{ } else {
this.msg.QCateIds=val.CateId this.msg.QCateIds = val.CateId
} }
this.getCoursePageList() this.getCoursePageList()
} }
}, },
methods: { methods: {
//翻页 //翻页
changePage(val){ changePage(val) {
this.currentPage=val this.currentPage = val
this.msg.pageIndex=val this.msg.pageIndex = val
this.getCoursePageList() this.getCoursePageList()
}, },
// 搜索框 // 搜索框
changeSearchText(){ changeSearchText() {
this.getCoursePageList() this.getCoursePageList()
}, },
// 清空搜索框 // 清空搜索框
clearSearch(){ clearSearch() {
this.msg.CourseName="" this.msg.CourseName = ""
this.getCoursePageList() this.getCoursePageList()
}, },
//查看详情 //查看详情
seeDetail(id){ seeDetail(id) {
this.$router.push({ path: '/eduProductDetail', query: { CourseId: id }}) this.$router.push({
path: '/eduProductDetail',
query: {
CourseId: id
}
})
}, },
//获取课程系列列表 //获取课程系列列表
async getCourseCategoryList(){ async getCourseCategoryList() {
let res= await getCourseCategoryList() let res = await getCourseCategoryList()
this.options=res.Data this.options = res.Data
}, },
//获取课程列表 //获取课程列表
async getCoursePageList(){ async getCoursePageList() {
let res= await getCoursePageList(this.msg) let res = await getCoursePageList(this.msg)
this.courseList=res.Data.PageData this.courseList = res.Data.PageData
this.pageCount=res.Data.PageCount this.pageCount = res.Data.PageCount
} }
}, },
mounted(){ mounted() {
this.menuList=JSON.parse(localStorage.getItem("menuList")) this.menuList = JSON.parse(localStorage.getItem("menuList"))
this.getCourseCategoryList() this.getCourseCategoryList()
this.getCoursePageList() this.getCoursePageList()
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.jiahe { .jiahe {
background-color: #faf8f9; background-color: #faf8f9;
} }
.edu_con { .edu_con {
width: 62.5vw; width: 62.5vw;
margin: 0 auto; margin: 0 auto;
padding-top: 4.01vw; padding-top: 4.01vw;
.edu_name { .edu_name {
text-align: center; text-align: center;
font-size: 1.562vw; font-size: 1.562vw;
font-family: "pingfang-b" !important; font-family: "pingfang-b" !important;
color: #111111; color: #111111;
} }
.edu_subname { .edu_subname {
text-align: center; text-align: center;
font-size: 0.833vw; font-size: 0.833vw;
color: #888888; color: #888888;
} }
.inputBox { .inputBox {
width: 100%; width: 100%;
height: 2.916vw; height: 2.916vw;
...@@ -172,16 +165,19 @@ export default { ...@@ -172,16 +165,19 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.inputBorder { .inputBorder {
width: 30.468vw; width: 30.468vw;
// height: 2.916vw; // height: 2.916vw;
background-color: #e9e9e9; background-color: #e9e9e9;
} }
} }
.eduConbox { .eduConbox {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 3.385vw; margin-bottom: 3.385vw;
.itemBox { .itemBox {
width: 20vw; width: 20vw;
height: 18.437vw; height: 18.437vw;
...@@ -189,18 +185,22 @@ export default { ...@@ -189,18 +185,22 @@ export default {
margin-right: 1.2vw; margin-right: 1.2vw;
margin-bottom: 1.562vw; margin-bottom: 1.562vw;
box-shadow: 0px 1px 6px 0px rgba(104, 104, 104, 0.1); box-shadow: 0px 1px 6px 0px rgba(104, 104, 104, 0.1);
.itemImg { .itemImg {
width: 20vw; width: 20vw;
height: 13.229vw; height: 13.229vw;
} }
.infoBox { .infoBox {
padding: 1.406vw 0.937vw 0; padding: 1.406vw 0.937vw 0;
.courseName { .courseName {
font-size: 0.833vw; font-size: 0.833vw;
font-family: "pingfang-b" !important; font-family: "pingfang-b" !important;
color: #000000; color: #000000;
margin-bottom: 0.989vw; margin-bottom: 0.989vw;
} }
.desc { .desc {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
...@@ -211,19 +211,23 @@ export default { ...@@ -211,19 +211,23 @@ export default {
} }
} }
} }
& .itemBox:nth-child(3n) { & .itemBox:nth-child(3n) {
margin-right: 0; margin-right: 0;
} }
} }
} }
.pageBox{
.pageBox {
width: 100%; width: 100%;
margin-bottom: 5.2vw; margin-bottom: 5.2vw;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.nodata{
.nodata {
text-align: center; text-align: center;
} }
</style> </style>
src/pages/index.vue
View file @ 370d9238
...@@ -182,29 +182,7 @@ ...@@ -182,29 +182,7 @@
<q-carousel-slide name="2"> <q-carousel-slide name="2">
<div class="conbox"> <div class="conbox">
<div class="classiconBox"> <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')"> <div class="classItem" @click="goDetail('/courseIntroduce')">
<q-img <q-img
src="../assets/images/index/course_icon/class_icon7.png" src="../assets/images/index/course_icon/class_icon7.png"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment