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 @@
<div class="jiahe">
<Header :menuList="menuList" :curMenu="menuList[1].Name" :type="2" />
<!-- bannner部分 -->
<Banner :swiperList="swiperData"/>
<Banner :swiperList="swiperData" />
<!-- 教育产品 -->
<div class="edu_con">
<div class="edu_name">教育产品</div>
<!-- <div class="edu_subname">副标题</div> -->
<div class="inputBox">
<q-input
v-model="coursemsg.CourseName"
filled
type="search"
clearable
label="可搜索课程系列/名称"
class="inputBorder"
@change="changeSearchCourse"
@clear="clearSearchCourse"
>
<q-input v-model="coursemsg.CourseName" filled type="search" clearable label="可搜索课程系列/名称" class="inputBorder"
@change="changeSearchCourse" @clear="clearSearchCourse">
<template v-slot:prepend>
<q-icon name="search" />
</template>
</q-input>
<q-select
outlined
v-model="selectCourseText"
:options="options"
option-label="CateName"
clearable
class="inputBorder"
label="可查询课程系列/名称"
:dense="false"
:options-dense="false"
>
<q-select outlined v-model="selectCourseText" :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
class="seemore"
@click="seeMore('/eduProductList')"
v-if="courseList.length > 0"
>
<div class="seemore" @click="seeMore('/eduProductList')" v-if="courseList.length > 0">
查看更多
</div>
<NoData v-if="courseList.length == 0"></NoData>
......@@ -65,66 +44,32 @@
<div class="inputBox">
<!-- 选择系列 -->
<div class="inputBorder2">
<q-select
label="可查询课程系列"
outlined
v-model="classSelectSeries"
:options="options"
option-label="CateName"
clearable
:dense="false"
:options-dense="false"
>
<q-select label="可查询课程系列" outlined v-model="classSelectSeries" :options="options" option-label="CateName"
clearable :dense="false" :options-dense="false">
</q-select>
</div>
<!-- 根据系列选课程 -->
<div class="inputBorder2">
<q-select
label="可查询班级名称"
outlined
v-model="classSelectCourseName"
:options="courseNameOption"
option-label="CourseName"
clearable
:dense="false"
:options-dense="false"
>
<q-select label="可查询班级名称" outlined v-model="classSelectCourseName" :options="courseNameOption"
option-label="CourseName" clearable :dense="false" :options-dense="false">
</q-select>
</div>
<q-input
v-model="classmsg.ClassName"
filled
type="search"
clearable
label="可搜索课程系列/名称"
class="inputBorder2"
@change="changeSearchClass"
@clear="clearSearchClass"
>
<q-input v-model="classmsg.ClassName" filled type="search" clearable label="可搜索课程系列/名称" class="inputBorder2"
@change="changeSearchClass" @clear="clearSearchClass">
<template v-slot:prepend>
<q-icon name="search" />
</template>
</q-input>
</div>
<div class="classPlanBox" v-if="classPlanList.length > 0">
<div
v-for="item in classPlanList"
:key="item.ClassId"
class="classPlanItemBox"
>
<div v-for="item in classPlanList" :key="item.ClassId" class="classPlanItemBox">
<div class="infoBox1">
<div class="className">{{ item.ClassName }}</div>
<div class="courseInfo" style="margin-bottom: 0.625vw">
<q-img
src="../../assets/images/JapaneseTrain/icon1.png"
class="itemIcon"
/>{{ item.CourseName }}
<q-img src="../../assets/images/JapaneseTrain/icon1.png" class="itemIcon" />{{ item.CourseName }}
</div>
<div class="courseInfo">
<q-img
src="../../assets/images/JapaneseTrain/icon2.png"
class="itemIcon"
/>{{ item.ClassHours }}课时
<q-img src="../../assets/images/JapaneseTrain/icon2.png" class="itemIcon" />{{ item.ClassHours }}课时
</div>
</div>
<div class="infoBox2">
......@@ -139,32 +84,22 @@
<div class="infoBox3">
<div class="title">名额信息</div>
<div style="margin-bottom: 0.729vw" class="numInfo">
计划招生人数<span class="planNum">{{ item.ClassPersion }}</span
>人
计划招生人数<span class="planNum">{{ item.ClassPersion }}</span>人
</div>
<div class="numInfo">
剩余招生名额<span class="surplusNum">{{ item.SurplusNum }}</span
>人
剩余招生名额<span class="surplusNum">{{ item.SurplusNum }}</span>人
</div>
</div>
<div class="infoBox4">
<div class="title">咨询客服</div>
<div class="consultBtn" @click="show(item.ClassId)">
<img
src="../../assets/images/JapaneseTrain/kefu_icon.png"
style="width: 0.833vw; height: auto"
alt=""
/>
<img src="../../assets/images/JapaneseTrain/kefu_icon.png" style="width: 0.833vw; height: auto" alt="" />
去咨询
</div>
</div>
</div>
</div>
<div
class="seemore"
v-if="classPlanList.length > 0"
@click="seeMore('/classPlanList')"
>
<div class="seemore" v-if="classPlanList.length > 0" @click="seeMore('/classPlanList')">
查看更多
</div>
<NoData v-if="classPlanList.length == 0"></NoData>
......@@ -174,39 +109,17 @@
<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="Submit" style="background-color: #45766d; color: #ffffff" />
<q-btn label="重置" type="reset" flat class="q-ml-sm" />
</div>
</q-form>
......@@ -221,21 +134,23 @@
</div>
</template>
<script>
import Header from "../../components/header/header";
import Footer from "../../components/footer/footerType2";
import Banner from "../../components/banner/banner";
import TeacherTeam from "../../components/teacherTeam/teacherTeam";
import NoData from "../../components/noData/noData";
import { getWebNavList } from "../../api/indexApi.js";
import {
import Header from "../../components/header/header";
import Footer from "../../components/footer/footerType2";
import Banner from "../../components/banner/banner";
import TeacherTeam from "../../components/teacherTeam/teacherTeam";
import NoData from "../../components/noData/noData";
import {
getWebNavList
} from "../../api/indexApi.js";
import {
getCourseCategoryList,
getCoursePageList,
getClassPlan,
getCourseList,
getWebTeacherList,
addWebAdvisory,
} from "../../api/JapaneseTrainApi";
export default {
} from "../../api/JapaneseTrainApi";
export default {
components: {
Header,
Footer,
......@@ -245,13 +160,17 @@ export default {
},
data() {
return {
menuList: [
{},
menuList: [{},
{
Name: "",
},
],
swiperData: [{ BgImg: "", NavTitle: "", SubTitle: "", LinkUrl: "" }],
swiperData: [{
BgImg: "",
NavTitle: "",
SubTitle: "",
LinkUrl: ""
}],
selectCourseText: "", //课程系列选择框
classSelectSeries: "",
classSelectCourseName: "",
......@@ -333,7 +252,12 @@ export default {
},
//查看课程详情
seeDetail(id) {
this.$router.push({ path: "/eduProductDetail", query: { CourseId: id } });
this.$router.push({
path: "/eduProductDetail",
query: {
CourseId: id
}
});
},
//获取网站导航列表（swiper）
async getWebNavList() {
......@@ -429,17 +353,20 @@ export default {
this.getCourseList();
this.getTeacherList();
},
};
};
</script>
<style lang="scss" scoped>
.jiahe {
.jiahe {
height: 100%;
background-color: #f6f6f6;
}
.edu_con {
}
.edu_con {
width: 62.5vw;
margin: 5.516vw auto 0;
margin-bottom: 5.156vw;
.edu_name {
text-align: center;
font-size: 1.562vw;
......@@ -448,12 +375,14 @@ export default {
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%;
height: 2.916vw;
......@@ -461,39 +390,47 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
.inputBorder {
width: 30.468vw;
// height: 2.916vw;
background-color: #e9e9e9;
}
.inputBorder2 {
width: 19.791vw;
// height: 2.916vw;
background-color: #e9e9e9;
}
}
.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;
}
.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;
......@@ -504,13 +441,14 @@ export default {
}
}
}
& .itemBox:nth-child(3n) {
margin-right: 0;
}
}
}
}
.seemore {
.seemore {
margin: 0 auto;
width: 12.5vw;
height: 2.916vw;
......@@ -523,8 +461,9 @@ export default {
font-weight: 500;
color: #ffffff;
cursor: pointer;
}
.classPlanItemBox {
}
.classPlanItemBox {
width: 100%;
// height: 7.5vw;
background-color: #ffffff;
......@@ -532,26 +471,31 @@ export default {
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;
height: 100%;
.className {
font-size: 0.833vw;
// font-family: Microsoft YaHei;
color: #111111;
margin-bottom: 1.145vw;
}
.courseInfo {
display: flex;
align-items: center;
font-size: 0.729vw;
color: #111111;
.itemIcon {
width: 0.729vw;
height: 0.729vw;
......@@ -559,12 +503,15 @@ export default {
}
}
}
.infoBox2 {
width: 19.583vw;
height: 100%;
.stuInfo {
font-size: 0.729vw;
color: #111111;
.stuTime {
color: #45766d;
font-family: "pingfang-b" !important;
......@@ -572,21 +519,26 @@ export default {
}
}
}
.infoBox3 {
width: 15.989vw;
height: 100%;
.numInfo {
font-size: 0.729vw;
color: #999999;
.planNum {
color: #111111;
margin-left: 1vw;
}
.surplusNum {
margin-left: 1vw;
}
}
}
.infoBox4 {
.consultBtn {
width: 4.166vw;
......@@ -602,5 +554,6 @@ export default {
cursor: pointer;
}
}
}
}
</style>
src/pages/JapaneseTrain/eduProductDetail.vue
View file @ 370d9238
......@@ -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
View file @ 370d9238
<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
View file @ 370d9238
......@@ -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"
......
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