Skip to content

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

页面修改

parent 1e137dd0
Hide 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" <q-img :src="item.CoverImg" class="itemImg" />
class="itemBox" </template>
@click="seeDetail(item.CourseId)" <template v-else>
> <q-img src="../../assets/images/banner.png" class="itemImg" />
<q-img :src="item.CoverImg" 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>
...@@ -219,388 +132,428 @@ ...@@ -219,388 +132,428 @@
<!-- 底部 --> <!-- 底部 -->
<Footer /> <Footer />
</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
getCourseCategoryList, } from "../../api/indexApi.js";
getCoursePageList, import {
getClassPlan, getCourseCategoryList,
getCourseList, getCoursePageList,
getWebTeacherList, getClassPlan,
addWebAdvisory, getCourseList,
} from "../../api/JapaneseTrainApi"; getWebTeacherList,
export default { addWebAdvisory,
components: { } from "../../api/JapaneseTrainApi";
Header, export default {
Footer, components: {
Banner, Header,
TeacherTeam, Footer,
NoData, Banner,
}, TeacherTeam,
data() { NoData,
return { },
menuList: [ data() {
{}, return {
{ menuList: [{},
Name: "", {
Name: "",
},
],
swiperData: [{
BgImg: "",
NavTitle: "",
SubTitle: "",
LinkUrl: ""
}],
selectCourseText: "", //课程系列选择框
classSelectSeries: "",
classSelectCourseName: "",
options: [],
courseNameOption: [],
coursemsg: {
pageIndex: 1,
pageSize: 6,
CourseName: "",
QCateIds: "",
},
classmsg: {
pageIndex: 1,
pageSize: 2,
ClassName: "",
CateId: "",
},
courseList: [],
classPlanList: [],
teacherList: [],
advisorymsg: {
LinkMan: "",
LinkTel: "",
Remark: "",
AdvType: 2,
SourceId: "",
}, },
], };
swiperData: [{ BgImg: "", NavTitle: "", SubTitle: "", LinkUrl: "" }], },
selectCourseText: "", //课程系列选择框 watch: {
classSelectSeries: "", selectCourseText(val) {
classSelectCourseName: "", if (val == null) {
options: [], this.coursemsg.QCateIds = "";
courseNameOption: [], } else {
coursemsg: { this.coursemsg.QCateIds = val.CateId;
pageIndex: 1, }
pageSize: 6, this.getCoursePageList();
CourseName: "",
QCateIds: "",
}, },
classmsg: { classSelectSeries(val) {
pageIndex: 1, if (val == null) {
pageSize: 2, this.classmsg.CateId = "";
ClassName: "", } else {
CateId: "", this.classmsg.CateId = val.CateId;
}
this.getClassPlan();
this.getCourseList();
}, },
courseList: [], classSelectCourseName(val) {
classPlanList: [], if (val == null) {
teacherList: [], this.classmsg.ClassName = "";
advisorymsg: { } else {
LinkMan: "", this.classmsg.ClassName = val.CourseName;
LinkTel: "", }
Remark: "", this.getClassPlan();
AdvType: 2,
SourceId: "",
}, },
};
},
watch: {
selectCourseText(val) {
if (val == null) {
this.coursemsg.QCateIds = "";
} else {
this.coursemsg.QCateIds = val.CateId;
}
this.getCoursePageList();
},
classSelectSeries(val) {
if (val == null) {
this.classmsg.CateId = "";
} else {
this.classmsg.CateId = val.CateId;
}
this.getClassPlan();
this.getCourseList();
}, },
classSelectCourseName(val) { methods: {
if (val == null) { // 课程搜索框
changeSearchCourse() {
this.getCoursePageList();
},
// 清空课程搜索框
clearSearchCourse() {
this.coursemsg.CourseName = "";
this.getCoursePageList();
},
// 开班计划搜索框
changeSearchClass() {
this.getClassPlan();
},
// 清空开班计划搜索框
clearSearchClass() {
this.classmsg.ClassName = ""; this.classmsg.ClassName = "";
} else { this.getClassPlan();
this.classmsg.ClassName = val.CourseName; },
} //去教育产品列表//课程查看更多
this.getClassPlan(); seeMore(url) {
}, this.$router.push(url);
}, },
methods: { //查看课程详情
// 课程搜索框 seeDetail(id) {
changeSearchCourse() { this.$router.push({
this.getCoursePageList(); path: "/eduProductDetail",
}, query: {
// 清空课程搜索框 CourseId: id
clearSearchCourse() { }
this.coursemsg.CourseName = ""; });
this.getCoursePageList(); },
}, //获取网站导航列表（swiper）
// 开班计划搜索框 async getWebNavList() {
changeSearchClass() { let res = await getWebNavList(2);
this.getClassPlan(); this.swiperData = res.Data;
}, },
// 清空开班计划搜索框 //获取课程系列列表
clearSearchClass() { async getCourseCategoryList() {
this.classmsg.ClassName = ""; let res = await getCourseCategoryList();
this.getClassPlan(); this.options = res.Data;
}, },
//去教育产品列表//课程查看更多 //获取课程列表
seeMore(url) { async getCoursePageList() {
this.$router.push(url); let res = await getCoursePageList(this.coursemsg);
}, this.courseList = res.Data.PageData;
//查看课程详情 },
seeDetail(id) { // 获取开班计划列表
this.$router.push({ path: "/eduProductDetail", query: { CourseId: id } }); async getClassPlan() {
}, let res = await getClassPlan(this.classmsg);
//获取网站导航列表（swiper） this.classPlanList = res.Data.PageData;
async getWebNavList() { },
let res = await getWebNavList(2); //根据系列编号获取课程列表
this.swiperData = res.Data; async getCourseList() {
}, let res = await getCourseList(this.classmsg.CateId);
//获取课程系列列表 this.courseNameOption = res.Data;
async getCourseCategoryList() { },
let res = await getCourseCategoryList(); //获取教师列表
this.options = res.Data; async getTeacherList() {
}, let res = await getWebTeacherList(1);
//获取课程列表 this.teacherList = res.Data.map((item) => {
async getCoursePageList() { item.showDetail = false;
let res = await getCoursePageList(this.coursemsg); return item;
this.courseList = res.Data.PageData; });
}, },
// 获取开班计划列表 //对话框
async getClassPlan() { show(id) {
let res = await getClassPlan(this.classmsg); this.$refs.dialog.show();
this.classPlanList = res.Data.PageData; this.advisorymsg.SourceId = id;
}, },
//根据系列编号获取课程列表
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;
});
},
//对话框
show(id) {
this.$refs.dialog.show();
this.advisorymsg.SourceId = id;
},
hide() { hide() {
this.$refs.dialog.hide(); this.$refs.dialog.hide();
}, },
onDialogHide() { onDialogHide() {
// QDialog发出“hide”事件时 // QDialog发出“hide”事件时
// 需要发出 // 需要发出
this.$emit("hide"); this.$emit("hide");
}, },
onCancelClick() { onCancelClick() {
// 我们只需要隐藏对话框 // 我们只需要隐藏对话框
this.hide();
},
//提交
onSubmit() {
this.$refs.name.validate();
this.$refs.phone.validate();
if (this.$refs.name.hasError || this.$refs.phone.hasError) {
this.formHasError = true;
} else {
this.advisory();
}
},
onReset() {
this.advisorymsg.LinkMan = "";
this.advisorymsg.LinkTel = "";
this.$refs.name.resetValidation();
this.$refs.phone.resetValidation();
},
//咨询
async advisory() {
let res = await addWebAdvisory(this.advisorymsg);
if (res.Code === 1) {
this.$q.notify({
type: "positive",
icon: "done",
position: "top",
color: "positive",
message: res.Message,
});
this.hide(); this.hide();
} },
//提交
onSubmit() {
this.$refs.name.validate();
this.$refs.phone.validate();
if (this.$refs.name.hasError || this.$refs.phone.hasError) {
this.formHasError = true;
} else {
this.advisory();
}
},
onReset() {
this.advisorymsg.LinkMan = "";
this.advisorymsg.LinkTel = "";
this.$refs.name.resetValidation();
this.$refs.phone.resetValidation();
},
//咨询
async advisory() {
let res = await addWebAdvisory(this.advisorymsg);
if (res.Code === 1) {
this.$q.notify({
type: "positive",
icon: "done",
position: "top",
color: "positive",
message: res.Message,
});
this.hide();
}
},
},
mounted() {
this.menuList = JSON.parse(localStorage.getItem("menuList"));
this.getWebNavList();
this.getCourseCategoryList();
this.getCoursePageList();
this.getClassPlan();
this.getCourseList();
this.getTeacherList();
}, },
}, };
mounted() {
this.menuList = JSON.parse(localStorage.getItem("menuList"));
this.getWebNavList();
this.getCourseCategoryList();
this.getCoursePageList();
this.getClassPlan();
this.getCourseList();
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 {
width: 62.5vw;
margin: 5.516vw auto 0;
margin-bottom: 5.156vw;
.edu_name {
text-align: center;
font-size: 1.562vw;
// font-family: Microsoft YaHei;
// font-weight: bold;
font-family: "pingfang-b" !important;
color: #111111;
}
.edu_subname {
text-align: center;
font-size: 0.833vw;
// font-family: Microsoft YaHei;
color: #888888;
} }
.inputBox {
width: 100%; .edu_con {
height: 2.916vw; width: 62.5vw;
margin: 2.083vw 0; margin: 5.516vw auto 0;
display: flex; margin-bottom: 5.156vw;
justify-content: space-between;
align-items: center; .edu_name {
.inputBorder { text-align: center;
width: 30.468vw; font-size: 1.562vw;
// height: 2.916vw; // font-family: Microsoft YaHei;
background-color: #e9e9e9; // font-weight: bold;
font-family: "pingfang-b" !important;
color: #111111;
} }
.inputBorder2 {
width: 19.791vw; .edu_subname {
// height: 2.916vw; text-align: center;
background-color: #e9e9e9; font-size: 0.833vw;
// font-family: Microsoft YaHei;
color: #888888;
} }
}
.eduConbox { .inputBox {
display: flex; width: 100%;
flex-wrap: wrap; height: 2.916vw;
margin-bottom: 2.604vw; margin: 2.083vw 0;
.itemBox { display: flex;
width: 20vw; justify-content: space-between;
height: 18.437vw; align-items: center;
background-color: #fff;
margin-right: 1.2vw; .inputBorder {
margin-bottom: 1.562vw; width: 30.468vw;
.itemImg { // height: 2.916vw;
width: 20vw; background-color: #e9e9e9;
height: 13.229vw;
} }
.infoBox {
padding: 1.406vw 0.937vw 0; .inputBorder2 {
.courseName { width: 19.791vw;
font-size: 0.833vw; // height: 2.916vw;
font-family: "pingfang-b" !important; background-color: #e9e9e9;
color: #000000; }
margin-bottom: 0.989vw; }
.eduConbox {
display: flex;
flex-wrap: wrap;
margin-bottom: 2.604vw;
.itemBox {
width: 20vw;
height: 18.437vw;
background-color: #fff;
margin-right: 1.2vw;
margin-bottom: 1.562vw;
.itemImg {
width: 20vw;
height: 13.229vw;
} }
.desc {
white-space: nowrap; .infoBox {
overflow: hidden; padding: 1.406vw 0.937vw 0;
text-overflow: ellipsis;
font-size: 0.625vw; .courseName {
font-family: Microsoft YaHei !important; font-size: 0.833vw;
color: #888888; font-family: "pingfang-b" !important;
color: #000000;
margin-bottom: 0.989vw;
}
.desc {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.625vw;
font-family: Microsoft YaHei !important;
color: #888888;
}
} }
} }
}
& .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; background: #45766d;
background: #45766d; display: flex;
display: flex; justify-content: center;
justify-content: center; align-items: center;
align-items: center; font-size: 1.25vw;
font-size: 1.25vw; font-family: PingFang SC;
font-family: PingFang SC; font-weight: 500;
font-weight: 500; color: #ffffff;
color: #ffffff; cursor: pointer;
cursor: pointer;
}
.classPlanItemBox {
width: 100%;
// height: 7.5vw;
background-color: #ffffff;
box-shadow: 0px 6px 10px 0px rgba(116, 116, 116, 0.1);
padding: 1.562vw 1.041vw;
margin-bottom: 2.604vw;
display: flex;
.title {
font-size: 0.729vw;
font-family: "pingfang-b" !important;
color: #2d2d2d;
margin-bottom: 1.145vw;
} }
.infoBox1 {
width: 18.75vw; .classPlanItemBox {
height: 100%; width: 100%;
.className { // height: 7.5vw;
font-size: 0.833vw; background-color: #ffffff;
// font-family: Microsoft YaHei; box-shadow: 0px 6px 10px 0px rgba(116, 116, 116, 0.1);
color: #111111; padding: 1.562vw 1.041vw;
margin-bottom: 2.604vw;
display: flex;
.title {
font-size: 0.729vw;
font-family: "pingfang-b" !important;
color: #2d2d2d;
margin-bottom: 1.145vw; margin-bottom: 1.145vw;
} }
.courseInfo {
display: flex; .infoBox1 {
align-items: center; width: 18.75vw;
font-size: 0.729vw; height: 100%;
color: #111111;
.itemIcon { .className {
width: 0.729vw; font-size: 0.833vw;
height: 0.729vw; // font-family: Microsoft YaHei;
margin-right: 0.312vw; color: #111111;
margin-bottom: 1.145vw;
} }
}
} .courseInfo {
.infoBox2 { display: flex;
width: 19.583vw; align-items: center;
height: 100%; font-size: 0.729vw;
.stuInfo { color: #111111;
font-size: 0.729vw;
color: #111111; .itemIcon {
.stuTime { width: 0.729vw;
color: #45766d; height: 0.729vw;
font-family: "pingfang-b" !important; margin-right: 0.312vw;
margin-left: 1vw; }
} }
} }
}
.infoBox3 { .infoBox2 {
width: 15.989vw; width: 19.583vw;
height: 100%; height: 100%;
.numInfo {
font-size: 0.729vw; .stuInfo {
color: #999999; font-size: 0.729vw;
.planNum {
color: #111111; color: #111111;
margin-left: 1vw;
.stuTime {
color: #45766d;
font-family: "pingfang-b" !important;
margin-left: 1vw;
}
} }
.surplusNum { }
margin-left: 1vw;
.infoBox3 {
width: 15.989vw;
height: 100%;
.numInfo {
font-size: 0.729vw;
color: #999999;
.planNum {
color: #111111;
margin-left: 1vw;
}
.surplusNum {
margin-left: 1vw;
}
} }
} }
}
.infoBox4 { .infoBox4 {
.consultBtn { .consultBtn {
width: 4.166vw; width: 4.166vw;
height: 1.562vw; height: 1.562vw;
background-color: #45766d; background-color: #45766d;
font-size: 0.625vw; font-size: 0.625vw;
font-family: Microsoft YaHei !important; font-family: Microsoft YaHei !important;
color: #ffffff; color: #ffffff;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-top: 0.52vw; margin-top: 0.52vw;
cursor: pointer; cursor: pointer;
}
} }
} }
}
</style> </style>
\ No newline at end of file
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">
<q-img :src="courseDetail.CoverImg" class="border_img" /> <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> </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" <q-img :src="item.CoverImg" class="itemImg" />
class="itemBox" </template>
@click="seeDetail(item.CourseId)" <template v-else>
> <q-img src="../../assets/images/banner.png" class="itemImg" />
<q-img :src="item.CoverImg" 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>
...@@ -84,243 +67,268 @@ ...@@ -84,243 +67,268 @@
<!-- 底部 --> <!-- 底部 -->
<Footer /> <Footer />
</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 { getCourseDetail, addWebAdvisory } from "../../api/JapaneseTrainApi"; import {
export default { getCourseDetail,
components: { addWebAdvisory
Header, } from "../../api/JapaneseTrainApi";
Footer, export default {
}, components: {
data() { Header,
return { Footer,
menuList: [ },
{}, data() {
{ return {
Name: "", menuList: [{},
{
Name: "",
},
],
courseId: 0,
courseDetail: {},
RandList: [],
advisorymsg: {
LinkMan: "",
LinkTel: "",
Remark: "",
AdvType: 1,
SourceId: "",
}, },
], };
courseId: 0,
courseDetail: {},
RandList: [],
advisorymsg: {
LinkMan: "",
LinkTel: "",
Remark: "",
AdvType: 1,
SourceId: "",
},
};
},
methods: {
async getCourseDetail() {
let res = await getCourseDetail(this.courseId);
this.courseDetail = res.Data.CourseObj;
this.RandList = res.Data.RandList;
}, },
//咨询
async advisory() { methods: {
this.advisorymsg.SourceId=this.$route.query.CourseId async getCourseDetail() {
let res = await addWebAdvisory(this.advisorymsg); let res = await getCourseDetail(this.courseId);
if (res.Code === 1) { this.courseDetail = res.Data.CourseObj;
this.$q.notify({ this.RandList = res.Data.RandList;
type: "positive", },
icon: "done", //咨询
position: "top", async advisory() {
color: "positive", this.advisorymsg.SourceId = this.$route.query.CourseId
message: res.Message, let res = await addWebAdvisory(this.advisorymsg);
if (res.Code === 1) {
this.$q.notify({
type: "positive",
icon: "done",
position: "top",
color: "positive",
message: res.Message,
});
this.hide()
}
},
//查看详情
seeDetail(id) {
this.$router.push({
path: "/eduProductDetail",
query: {
CourseId: id
}
}); });
this.hide() },
} //对话框
}, show() {
//查看详情 this.$refs.dialog.show();
seeDetail(id) { },
this.$router.push({ path: "/eduProductDetail", query: { CourseId: id } });
},
//对话框
show() {
this.$refs.dialog.show();
},
hide() { hide() {
this.$refs.dialog.hide(); this.$refs.dialog.hide();
}, },
onDialogHide() { onDialogHide() {
// QDialog发出“hide”事件时 // QDialog发出“hide”事件时
// 需要发出 // 需要发出
this.$emit("hide"); this.$emit("hide");
}, },
onCancelClick() { onCancelClick() {
// 我们只需要隐藏对话框 // 我们只需要隐藏对话框
this.hide(); this.hide();
}, },
//申请职位表单 //申请职位表单
onSubmit() { onSubmit() {
this.$refs.name.validate(); this.$refs.name.validate();
this.$refs.phone.validate(); this.$refs.phone.validate();
if (this.$refs.name.hasError || this.$refs.phone.hasError) { if (this.$refs.name.hasError || this.$refs.phone.hasError) {
this.formHasError = true; this.formHasError = true;
} else { } else {
this.advisory(); this.advisory();
} }
},
onReset() {
this.applymsg.LinkMan = "";
this.applymsg.LinkTel = "";
this.$refs.name.resetValidation();
this.$refs.phone.resetValidation();
},
}, },
onReset() { mounted() {
this.applymsg.LinkMan = ""; this.menuList = JSON.parse(localStorage.getItem("menuList"));
this.applymsg.LinkTel = ""; this.courseId = this.$route.query.CourseId;
this.$refs.name.resetValidation(); this.getCourseDetail();
this.$refs.phone.resetValidation();
}, },
}, };
mounted() {
this.menuList = JSON.parse(localStorage.getItem("menuList"));
this.courseId = this.$route.query.CourseId;
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;
justify-content: space-between;
.left {
width: 35.208vw;
height: 19.062vw;
border-bottom: 3px solid #e8e8e8;
border-radius: 9px;
display: flex; display: flex;
justify-content: center; justify-content: space-between;
align-content: space-between;
.border_out { .left {
width: 30.593vw; width: 35.208vw;
height: 18.75vw; height: 19.062vw;
background-color: #e4e4e4; border-bottom: 3px solid #e8e8e8;
border: 2px solid #ffffff; border-radius: 9px;
box-shadow: 0px 20px 36px 0px rgba(116, 116, 116, 0.35);
border-radius: 18px 18px 0px 0px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-content: space-between;
.border_img {
width: 29.01vw; .border_out {
height: 16.822vw; width: 30.593vw;
background-color: #000; height: 18.75vw;
background-color: #e4e4e4;
border: 2px solid #ffffff;
box-shadow: 0px 20px 36px 0px rgba(116, 116, 116, 0.35);
border-radius: 18px 18px 0px 0px;
display: flex;
justify-content: center;
align-items: center;
.border_img {
width: 29.01vw;
height: 16.822vw;
background-color: #000;
}
}
}
.right {
width: 23.802vw;
.name {
font-size: 1.562vw;
line-height: 1.562vw;
// font-family: Microsoft YaHei;
// font-weight: bold;
font-family: "pingfang-b" !important;
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%;
overflow: hidden;
font-size: 0.729vw;
// font-family: Microsoft YaHei;
// font-weight: 400;
color: #999999;
margin-bottom: 4.166vw;
overflow-y: auto;
}
.consult {
width: 100%;
height: 2.916vw;
background-color: #45766d;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.25vw;
font-weight: 500;
color: #ffffff;
} }
} }
} }
.right {
width: 23.802vw; .edu_con {
.name { width: 62.5vw;
margin: 0 auto;
.edu_name {
text-align: center;
font-size: 1.562vw; font-size: 1.562vw;
line-height: 1.562vw; // font-family: Microsoft YaHei;
// font-family: Microsoft YaHei; // font-weight: bold;
// font-weight: bold;
font-family: "pingfang-b" !important; font-family: "pingfang-b" !important;
color: #111111; color: #111111;
margin-bottom: 2.083vw; margin-bottom: 2.604vw;
}
.line {
width: 4.166vw;
height: 1px;
background-color: #111111;
margin-bottom: 2.083vw;
}
.desc {
// height: 10.26vw;
width: 100%;
overflow: hidden;
font-size: 0.729vw;
// font-family: Microsoft YaHei;
// font-weight: 400;
color: #999999;
margin-bottom: 4.166vw;
overflow-y: auto;
} }
.consult {
width: 100%;
height: 2.916vw;
background-color: #45766d;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.25vw;
font-weight: 500;
color: #ffffff;
}
}
}
.edu_con { .eduConbox {
width: 62.5vw; display: flex;
margin: 0 auto; flex-wrap: wrap;
.edu_name { margin-bottom: 3.385vw;
text-align: center;
font-size: 1.562vw;
// font-family: Microsoft YaHei;
// font-weight: bold;
font-family: "pingfang-b" !important;
color: #111111;
margin-bottom: 2.604vw;
}
.eduConbox { .itemBox {
display: flex;
flex-wrap: wrap;
margin-bottom: 3.385vw;
.itemBox {
width: 20vw;
height: 18.437vw;
background-color: #fff;
margin-right: 1.25vw;
margin-bottom: 1.562vw;
box-shadow: 0px 1px 6px 0px rgba(104, 104, 104, 0.1);
.itemImg {
width: 20vw; width: 20vw;
height: 13.229vw; height: 18.437vw;
} background-color: #fff;
.infoBox { margin-right: 1.25vw;
padding: 1.406vw 0.937vw 0; margin-bottom: 1.562vw;
.courseName { box-shadow: 0px 1px 6px 0px rgba(104, 104, 104, 0.1);
font-size: 0.833vw;
font-family: "pingfang-b" !important; .itemImg {
color: #000000; width: 20vw;
margin-bottom: 0.989vw; height: 13.229vw;
} }
.desc {
white-space: nowrap; .infoBox {
overflow: hidden; padding: 1.406vw 0.937vw 0;
text-overflow: ellipsis;
font-size: 0.625vw; .courseName {
font-family: Microsoft YaHei !important; font-size: 0.833vw;
color: #888888; font-family: "pingfang-b" !important;
color: #000000;
margin-bottom: 0.989vw;
}
.desc {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.625vw;
font-family: Microsoft YaHei !important;
color: #888888;
}
} }
} }
& .itemBox:nth-child(3n) {
margin-right: 0;
}
} }
& .itemBox:nth-child(3n) {
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>
\ No newline at end of file </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)">
<q-img :src="item.CoverImg" class="itemImg" /> <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="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>
<!-- 底部 --> <!-- 底部 -->
<Footer /> <Footer />
</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 NoData from "../../components/noData/noData"; import NoData from "../../components/noData/noData";
import { getCourseCategoryList , getCoursePageList} from "../../api/JapaneseTrainApi" import {
export default { getCourseCategoryList,
components: { getCoursePageList
Header, } from "../../api/JapaneseTrainApi"
Footer, export default {
NoData components: {
}, Header,
data() { Footer,
return { NoData
menuList:[ {},
{
Name: "",
},],
selectText:"",
options: [],
currentPage: 1,
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
}
this.getCoursePageList()
}
},
methods: {
//翻页
changePage(val){
this.currentPage=val
this.msg.pageIndex=val
this.getCoursePageList()
}, },
// 搜索框 data() {
changeSearchText(){ return {
this.getCoursePageList() menuList: [{},
}, {
// 清空搜索框 Name: "",
clearSearch(){ },
this.msg.CourseName="" ],
this.getCoursePageList()
selectText: "",
options: [],
currentPage: 1,
pageCount: 0,
msg: {
pageIndex: 1,
pageSize: 24,
CourseName: "",
QCateIds: ""
},
courseList: [],
};
}, },
//查看详情 watch: {
seeDetail(id){ selectText(val) {
this.$router.push({ path: '/eduProductDetail', query: { CourseId: id }}) this.currentPage = 1
this.msg.pageIndex = 1
if (val == null) {
this.msg.QCateIds = ""
} else {
this.msg.QCateIds = val.CateId
}
this.getCoursePageList()
}
}, },
//获取课程系列列表 methods: {
async getCourseCategoryList(){ //翻页
let res= await getCourseCategoryList() changePage(val) {
this.options=res.Data this.currentPage = val
this.msg.pageIndex = val
this.getCoursePageList()
},
// 搜索框
changeSearchText() {
this.getCoursePageList()
},
// 清空搜索框
clearSearch() {
this.msg.CourseName = ""
this.getCoursePageList()
},
//查看详情
seeDetail(id) {
this.$router.push({
path: '/eduProductDetail',
query: {
CourseId: id
}
})
},
//获取课程系列列表
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
}
}, },
//获取课程列表 mounted() {
async getCoursePageList(){ this.menuList = JSON.parse(localStorage.getItem("menuList"))
let res= await getCoursePageList(this.msg) this.getCourseCategoryList()
this.courseList=res.Data.PageData this.getCoursePageList()
this.pageCount=res.Data.PageCount
} }
},
mounted(){ };
this.menuList=JSON.parse(localStorage.getItem("menuList"))
this.getCourseCategoryList()
this.getCoursePageList()
}
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.jiahe { .jiahe {
background-color: #faf8f9; background-color: #faf8f9;
}
.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; .edu_con {
font-size: 0.833vw; width: 62.5vw;
color: #888888; margin: 0 auto;
} padding-top: 4.01vw;
.inputBox {
width: 100%; .edu_name {
height: 2.916vw; text-align: center;
margin: 2.083vw 0; font-size: 1.562vw;
display: flex; font-family: "pingfang-b" !important;
justify-content: space-between; color: #111111;
align-items: center;
.inputBorder {
width: 30.468vw;
// height: 2.916vw;
background-color: #e9e9e9;
} }
}
.eduConbox { .edu_subname {
display: flex; text-align: center;
flex-wrap: wrap; font-size: 0.833vw;
margin-bottom: 3.385vw; color: #888888;
.itemBox { }
width: 20vw;
height: 18.437vw; .inputBox {
background-color: #fff; width: 100%;
margin-right: 1.2vw; height: 2.916vw;
margin-bottom: 1.562vw; margin: 2.083vw 0;
box-shadow: 0px 1px 6px 0px rgba(104, 104, 104, 0.1); display: flex;
.itemImg { justify-content: space-between;
width: 20vw; align-items: center;
height: 13.229vw;
.inputBorder {
width: 30.468vw;
// height: 2.916vw;
background-color: #e9e9e9;
} }
.infoBox { }
padding: 1.406vw 0.937vw 0;
.courseName { .eduConbox {
font-size: 0.833vw; display: flex;
font-family: "pingfang-b" !important; flex-wrap: wrap;
color: #000000; margin-bottom: 3.385vw;
margin-bottom: 0.989vw;
.itemBox {
width: 20vw;
height: 18.437vw;
background-color: #fff;
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;
} }
.desc {
white-space: nowrap; .infoBox {
overflow: hidden; padding: 1.406vw 0.937vw 0;
text-overflow: ellipsis;
font-size: 0.625vw; .courseName {
font-family: Microsoft YaHei !important; font-size: 0.833vw;
color: #888888; font-family: "pingfang-b" !important;
color: #000000;
margin-bottom: 0.989vw;
}
.desc {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.625vw;
font-family: Microsoft YaHei !important;
color: #888888;
}
} }
} }
}
& .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{
text-align: center; .nodata {
} text-align: center;
</style> }
\ No newline at end of file
</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