Skip to content

M
ministers
Commit 6f0447c0 authored by 罗超's avatar 罗超
Browse files
Options

1

parent 9bb1d4ad
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1832 additions and 98 deletions
package.json
View file @ 6f0447c0
...@@ -25,8 +25,10 @@ ...@@ -25,8 +25,10 @@
"mavon-editor": "^2.9.1", "mavon-editor": "^2.9.1",
"quasar": "^1.0.0", "quasar": "^1.0.0",
"relation-graph": "^1.0.8", "relation-graph": "^1.0.8",
"swiper": "^6.5.4",
"v-viewer": "^1.5.1", "v-viewer": "^1.5.1",
"vue-animate-number": "^0.4.2", "vue-animate-number": "^0.4.2",
"vue-awesome-swiper": "^4.1.1",
"vue-easytable": "^2.4.1", "vue-easytable": "^2.4.1",
"vue-i18n": "^8.0.0", "vue-i18n": "^8.0.0",
"vue-inline-svg": "^2.0.0" "vue-inline-svg": "^2.0.0"
......
src/components/bnaner/banner.vue 0 → 100644
View file @ 6f0447c0
<template>
<div class="bannerBox">
<q-carousel
v-model="slide"
swipeable
animated
navigation
height="100%"
autoplay
infinite
control-type="outline"
>
<template v-slot:navigation-icon="{ active, onClick }">
<div v-if="active" @click="onClick" class="activeBtn"></div>
<div v-else @click="onClick" class="parmaryBtn"></div>
</template>
<q-carousel-slide
v-for="item in bannerList"
:key="item.id"
:name="item.name"
:img-src="item.url"
>
<div class="conbox">
<div class="con1"><span class="jh">甲鹤-</span>特色教室</div>
<div class="con2">
这里给一点小文字介绍什么的最好，这里给一点小文字介绍什么的最好，这里给一点
小文字介绍什么的最好。
</div>
<div class="con3"></div>
<div class="btn">查看更多</div>
</div>
</q-carousel-slide>
</q-carousel>
</div>
</template>
<script>
export default {
data() {
return {
slide: "first",
bannerList: [
{
id: 1,
name: "first",
url: require("../../assets/images/index/banner_bg.png"),
},
{
id: 2,
name: "second",
url: require("../../assets/images/index/banner_bg.png"),
},
],
};
},
};
</script>
<style lang="scss" scoped>
.bannerBox {
width: 100%;
height: 39.0625vw;
position: relative;
}
.conbox {
position: absolute;
top: 9.635vw;
left: 10.208vw;
}
.con1 {
width: calc(845 / 1920 * 100%);
white-space: nowrap;
// font-size: 100px;
font-size: 5.208vw;
color: #111111;
margin-bottom: 3.125vw;
.jh {
font-family: "pingfang-b" !important;
}
}
.con2 {
width: 38.489vw;
font-size: 20px !important;
font-size: 1.041vw;
color: #111111;
padding-bottom: 3.593vw;
}
.con3 {
width: 31.041vw;
height: 1px;
background-color: #111111;
margin-bottom: 4.01vw;
}
.btn {
width: 9.375vw;
height: 2.916vw;
background-color: #45766dff;
// font-size: 24px !important;
font-size: 1.249vw;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;
cursor: pointer;
}
.activeBtn {
width: 2.083vw;
height: 0.52vw;
background-color: #111111;
border-radius: 5px;
margin: 0 0.26vw;
}
.parmaryBtn {
width: 1.041vw;
height: 0.52vw;
background-color: #cccccc;
border-radius: 5px;
margin: 0 0.26vw;
}
</style>
\ No newline at end of file
src/components/footer/footerType2.vue
View file @ 6f0447c0
...@@ -43,7 +43,7 @@ export default { ...@@ -43,7 +43,7 @@ export default {
.footer { .footer {
width: 100%; width: 100%;
height: 14.062vw; height: 14.062vw;
background-color: #faf8f9; background-color: #EDEDED;
position: relative; position: relative;
.jh_icon { .jh_icon {
...@@ -54,7 +54,7 @@ export default { ...@@ -54,7 +54,7 @@ export default {
left: 18.75vw; left: 18.75vw;
} }
.link { .link {
font-size: 0.729vw; font-size: 1.041vw;
color: #111111; color: #111111;
position: absolute; position: absolute;
top: 5.26vw; top: 5.26vw;
...@@ -65,9 +65,9 @@ export default { ...@@ -65,9 +65,9 @@ export default {
} }
.copyright { .copyright {
text-align: center; text-align: center;
font-size: 0.729vw; font-size: 0.833vw;
font-family: "pingfang-b" !important; font-family: "pingfang-b" !important;
color: #111111; color: #666666;
position: absolute; position: absolute;
top: 7.916vw; top: 7.916vw;
left: 26.562vw; left: 26.562vw;
......
src/components/header/header.vue
View file @ 6f0447c0
...@@ -24,12 +24,12 @@ ...@@ -24,12 +24,12 @@
> >
<!-- <q-route-tab to="/index" name="home" label="首页" content-class="items-nav" /> --> <!-- <q-route-tab to="/index" name="home" label="首页" content-class="items-nav" /> -->
<q-tab name="home" label="甲鹤教育" content-class="items-nav" /> <q-tab name="home" label="甲鹤教育" content-class="items-nav" @click="jumpPage('/index')"/>
<q-tab name="japan" label="日语培训" content-class="items-nav" @click="JapaneseTrain"/> <q-tab name="japan" label="日语培训" content-class="items-nav" @click="jumpPage('/JapaneseTrain')"/>
<q-tab name="liuxue" label="留学服务" content-class="items-nav" /> <q-tab name="liuxue" label="留学服务" content-class="items-nav" @click="jumpPage('/studyServe')"/>
<q-tab name="jiuye" label="就业服务" content-class="items-nav" /> <q-tab name="jiuye" label="就业服务" content-class="items-nav" />
<q-tab name="news" label="媒体中心" content-class="items-nav" /> <q-tab name="news" label="媒体中心" content-class="items-nav" />
<q-tab name="about" label="关于我们" content-class="items-nav" /> <q-tab name="about" label="关于我们" content-class="items-nav" @click="jumpPage('/aboutUs')"/>
<q-tab name="join" label="加入我们" content-class="items-nav" /> <q-tab name="join" label="加入我们" content-class="items-nav" />
</q-tabs> </q-tabs>
</div> </div>
...@@ -51,21 +51,19 @@ export default { ...@@ -51,21 +51,19 @@ export default {
}; };
}, },
methods:{ methods:{
JapaneseTrain(){ jumpPage(url){
this.$router.push("/JapaneseTrain") this.$router.push(url)
} }
}, },
watch:{
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
#dowebok { // #dowebok {
// animation-duration:1s; //动画持续时间 // animation-duration:1s; //动画持续时间
// animation-delay:1s; //动画延迟时间 // animation-delay:1s; //动画延迟时间
// animation-iteration-count: infinite; //动画执行次数 // animation-iteration-count: infinite; //动画执行次数
} // }
.header_absolute{ .header_absolute{
margin-top: 61px; margin-top: 61px;
......
src/components/header/headerType2.vue
View file @ 6f0447c0
...@@ -16,12 +16,10 @@ ...@@ -16,12 +16,10 @@
align="justify" align="justify"
narrow-indicator narrow-indicator
dense dense
> >
<!-- <q-route-tab to="/index" name="home" label="首页" content-class="items-nav" /> --> <q-tab name="home" label="甲鹤教育" content-class="items-nav" @click="jumpPage('/index')"/>
<q-tab name="japan" label="日语培训" content-class="items-nav" @click="jumpPage('/JapaneseTrain')"/>
<q-tab name="home" label="甲鹤教育" content-class="items-nav" /> <q-tab name="liuxue" label="留学服务" content-class="items-nav" @click="jumpPage('/studyServe')"/>
<q-tab name="japan" label="日语培训" content-class="items-nav" @click="JapaneseTrain"/>
<q-tab name="liuxue" label="留学服务" content-class="items-nav" />
<q-tab name="jiuye" label="就业服务" content-class="items-nav" /> <q-tab name="jiuye" label="就业服务" content-class="items-nav" />
<q-tab name="news" label="媒体中心" content-class="items-nav" /> <q-tab name="news" label="媒体中心" content-class="items-nav" />
<q-tab name="about" label="关于我们" content-class="items-nav" /> <q-tab name="about" label="关于我们" content-class="items-nav" />
...@@ -46,8 +44,8 @@ export default { ...@@ -46,8 +44,8 @@ export default {
}; };
}, },
methods:{ methods:{
JapaneseTrain(){ jumpPage(url){
this.$router.push("/JapaneseTrain") this.$router.push(url)
} }
}, },
watch:{ watch:{
......
src/components/teacherTeam/teacherTeam.vue 0 → 100644
View file @ 6f0447c0
<template>
<!-- 教师团队 -->
<div class="teacherTeam">
<div class="bg">
<div class="tea_name">教师团队</div>
<div class="tea_subname">副标题</div>
</div>
<div class="tea_swiper">
<Swiper :options="swiperOption">
<Swiper-slide v-for="(item, index) in teacherList" :key="index">
<div
v-if="!item.showDetail"
class="slideItem"
@mouseenter="enter(item)"
@mouseleave="leave(item)"
>
<img :src="item.src" alt="" class="headImg" />
<div class="tea_name">{{ item.name }}</div>
<div class="tea_desc">{{ item.desc }}</div>
</div>
<div
v-else
class="slideItem2"
@mouseenter="enter(item)"
@mouseleave="leave(item)"
>
<div class="tea_name">{{ item.name }}</div>
<div class="tea_desc">{{ item.desc }}</div>
</div>
</Swiper-slide>
</Swiper>
</div>
</div>
</template>
<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/swiper.scss";
export default {
components: {
Swiper,
SwiperSlide,
},
props: {
viewNum: {
type: Number,
default: 1,
},
slideSpaceBetween: {
type: Number,
default: 20,
},
},
data() {
return {
// 轮播图
swiperOption: {
observer: true,
observeParents: true,
freeMode: true,
// loop: true,
slidesPerView: this.viewNum,
slideSpaceBetween: this.slideSpaceBetween,
navigation: {
// nextEl: ".swiper-button-next",
// prevEl: ".swiper-button-prev",
},
},
teacherList: [
{
name: "黄群",
url: "",
showDetail: false,
desc:
"都中医药大学英语学士，拥有八年日本旅游出境线路操作经验，8年的经验累积熟悉各类日本企业运作模式和企业文化。一直和日本企业保持密...联系，现在主要负责人才就业输送。",
},
{
name: "唐雪梅",
url: "",
showDetail: false,
desc:
"都中医药大学英语学士，拥有八年日本旅游出境线路操作经验，8年的经验累积熟悉各类日本企业运作模式和企业文化。一直和日本企业保持密...联系，现在主要负责人才就业输送。",
},
{
name: "唐雪梅",
url: "",
showDetail: false,
desc:
"都中医药大学英语学士，拥有八年日本旅游出境线路操作经验，8年的经验累积熟悉各类日本企业运作模式和企业文化。一直和日本企业保持密...联系，现在主要负责人才就业输送。",
},
{
name: "唐雪梅",
url: "",
showDetail: false,
desc:
"都中医药大学英语学士，拥有八年日本旅游出境线路操作经验，8年的经验累积熟悉各类日本企业运作模式和企业文化。一直和日本企业保持密...联系，现在主要负责人才就业输送。",
},
{
name: "唐雪梅",
url: "",
showDetail: false,
desc:
"都中医药大学英语学士，拥有八年日本旅游出境线路操作经验，8年的经验累积熟悉各类日本企业运作模式和企业文化。一直和日本企业保持密...联系，现在主要负责人才就业输送。",
},
],
};
},
methods: {
enter(i) {
i.showDetail = true;
},
leave(i) {
i.showDetail = false;
},
},
mounted() {},
};
</script>
<style lang="scss" scoped>
.teacherTeam {
width: 100%;
height: 45.3125vw;
position: relative;
.bg {
width: 100%;
height: 27.604vw;
position: absolute;
top: 0;
left: 0;
padding-top: 12.5vw;
background-color: #eee;
.tea_name {
text-align: center;
font-size: 1.562vw;
// font-family: Microsoft YaHei;
// font-weight: bold;
font-family: "pingfang-b" !important;
color: #000000;
z-index: 5;
}
.tea_subname {
text-align: center;
font-size: 0.833vw;
color: #000000;
z-index: 5;
}
}
.tea_swiper {
width: 62.5vw;
height: 21.875vw;
box-sizing: border-box;
background-color: #fff;
position: absolute;
top: 17.968vw;
left: 50%;
transform: translateX(-50%);
z-index: 5;
display: flex;
align-items: center;
position: relative;
padding: 0 2.604vw;
}
}
.slideItem {
width: 13.541vw !important;
height: 18.333vw;
box-shadow: 0px 6px 10px 0px rgba(116, 116, 116, 0.1);
background-color: #ffffff;
padding: 0 1.458vw;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-right: 20px;
.headImg {
width: 52px;
height: 56px;
}
.tea_name {
width: 100%;
text-align: center;
font-size: 1.145vw;
// font-family: Microsoft YaHei;
// font-weight: bold;
font-family: "pingfang-b" !important;
color: #000000;
}
.tea_desc {
width: 11.666vw;
height: 4.843vw;
font-size: 0.729vw;
// overflow-x: hidden;
// overflow-y: auto;
overflow: hidden;
// font-family: Microsoft YaHei;
// font-weight: 400;
color: #999999;
line-height: 1.354vw;
}
}
.slideItem2 {
width: 13.541vw;
height: 18.333vw;
background-color: #45766d;
overflow-x: hidden;
overflow-y: auto;
cursor: pointer;
box-sizing: border-box;
padding: 2vw 1vw;
box-shadow: 0px 6px 10px 0px rgba(116, 116, 116, 0.1);
.tea_name {
font-size: 1.145vw;
// font-family: Microsoft YaHei;
// font-weight: bold;
font-family: "pingfang-b" !important;
color: #ffffff;
line-height: 1.5625vw;
margin-bottom: 1.145vw;
}
}
.swiper-button-prev,
.swiper-button-next {
width: 200px;
height: 28px;
color: #45766d;
}
</style>
\ No newline at end of file
src/pages/JapaneseTrain/JapaneseTrain.vue 0 → 100644
View file @ 6f0447c0
This diff is collapsed.
src/pages/JapaneseTrain/eduProductDetail.vue 0 → 100644
View file @ 6f0447c0
<template>
<div class="jiahe">
<Header />
<div class="detailBox">
<div class="left">
<div class="border_out">
<q-img src="" class="border_img" />
</div>
</div>
<div class="right">
<div class="name">标日基础课程</div>
<div class="line"></div>
<div class="desc">
全新教学模式：母语式教学，让你先学会开口再去理解。先听懂然后会说再去了解如何书写，全面了解日式思维，然后熟练应用日语专业知识学习；能够更全面阅读和理解有关各类话题的。教学特色：免费测试 新学员入学安排水平鉴定考试，根据学生水平进行分班；线上课程 实现教学“零距离”，线下全程监督跟踪；即时答疑 遇到问题随时提，获得专业解答；免费重修 出勤率达到90%的学员，学不会免费重修；免费补课 缺勤课程可跟班补习或录播视频补习；课后巩固 专业配套课后练习巩固知识，老师处一对一过关；会话练习 与外教一起练习口语会话，拒绝“哑巴”日语。
</div>
<div class="consult">立即咨询</div>
</div>
</div>
<!-- 教育相关产品 -->
<div class="edu_con">
<div class="edu_name">教育相关产品</div>
<div class="eduConbox">
<div v-for="item in eduProductList" :key="item.id" class="itemBox">
<q-img :src="item.url" class="itemImg" />
<div class="infoBox">
<div class="courseName">{{ item.courseName }}</div>
<div class="desc">{{ item.desc }}</div>
</div>
</div>
</div>
</div>
<!-- 底部 -->
<Footer />
</div>
</template>
<script>
import Header from "../../components/header/headerType2";
import Footer from "../../components/footer/footerType2";
export default {
name: "PageIndex",
components: {
Header,
Footer,
},
data() {
return {
eduProductList: [
{
id: 1,
url: require("../../assets/images/JapaneseTrain/edu1.png"),
courseName: "什么什么课程",
desc: "对课程的一些二级文字介绍内容，这里放一排位置。多的省略号...",
},
{
id: 2,
url: require("../../assets/images/JapaneseTrain/edu2.png"),
courseName: "什么什么课程",
desc: "",
},
{
id: 3,
url: require("../../assets/images/JapaneseTrain/edu3.png"),
courseName: "什么什么课程",
desc: "",
},
{
id: 4,
url: require("../../assets/images/JapaneseTrain/edu4.png"),
courseName: "什么什么课程",
desc: "",
},
{
id: 5,
url: require("../../assets/images/JapaneseTrain/edu5.png"),
courseName: "什么什么课程",
desc: "",
},
{
id: 6,
url: require("../../assets/images/JapaneseTrain/edu6.png"),
courseName: "什么什么课程",
desc: "",
},
],
};
},
methods: {},
mounted() {},
};
</script>
<style lang="scss" scoped>
.jiahe {
min-height: 100vh;
background-color: #faf8f9;
}
.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;
border-bottom: 3px solid #e8e8e8;
border-radius: 9px;
display: flex;
justify-content: center;
align-content: space-between;
.border_out {
width: 30.593vw;
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;
}
}
}
.edu_con {
width: 62.5vw;
margin: 0 auto;
.edu_name {
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 {
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;
height: 13.229vw;
}
.infoBox {
padding: 1.406vw 0.937vw 0;
.courseName {
font-size: 0.833vw;
// font-family: Microsoft YaHei;
// font-weight: bold;
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;
// font-weight: 400;
color: #888888;
}
}
}
& .itemBox:nth-child(3n) {
margin-right: 0;
}
}
}
.pageBox {
width: 100%;
margin-bottom: 5.2vw;
display: flex;
justify-content: center;
align-items: center;
}
.q-btn {
border: 1px solid #d2d7dd;
}
</style>
\ No newline at end of file
src/pages/JapaneseTrain.vue → src/pages/JapaneseTrain/eduProductList.vue
View file @ 6f0447c0
<template> <template>
<div class="jiahe"> <div class="jiahe">
<Header :scorllNum="pageScroll" /> <Header :scorllNum="pageScroll" />
<!-- 第一部分 -->
<div class="banner-box">
<q-carousel
v-model="slide"
swipeable
animated
navigation-position="right"
navigation
height="100%"
autoplay
infinite
control-type="outline"
>
<q-carousel-slide
name="first"
img-src="../assets/images/index/banner_bg.png"
>
<div class="conbox">
<div class="con1"><span class="jh">甲鹤-</span>特色教室</div>
<div class="con2">
这里给一点小文字介绍什么的最好，这里给一点小文字介绍什么的最好，这里给一点
小文字介绍什么的最好。
</div>
<div class="con3"></div>
<div class="btn">查看更多</div>
</div>
</q-carousel-slide>
<!-- <q-carousel-slide name="first3" img-src="https://cdn.quasar.dev/img/mountains.jpg"/> -->
</q-carousel>
<!-- </div> -->
<!-- <q-pagination
ref="pag"
v-model="current"
:max="5"
:direction-links="true"
icon-prev
>
</q-pagination>-->
</div>
<!-- 教育产品 --> <!-- 教育产品 -->
<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> <div class="inputBox">
<q-input
v-model="search"
filled
type="search"
clearable
placeholder="可搜索课程系列/名称"
class="inputBorder"
>
<template v-slot:prepend>
<q-icon name="search" />
</template>
</q-input>
<q-select
outlined
v-model="model"
:options="options"
clearable
class="inputBorder"
placeholder="可查询课程系列/名称"
:dense="false"
:options-dense="false"
>
</q-select>
</div>
<div class="eduConbox"> <div class="eduConbox">
<div v-for="item in eduList" :key="item.id" class="itemBox"> <div v-for="item in eduProductList" :key="item.id" class="itemBox" @click="seeDetail">
<q-img :src="item.url" class="itemImg" /> <q-img :src="item.url" class="itemImg" />
<div class="infoBox"> <div class="infoBox">
<div class="courseName">{{ item.courseName }}</div> <div class="courseName">{{ item.courseName }}</div>
...@@ -56,30 +40,26 @@ ...@@ -56,30 +40,26 @@
</div> </div>
</div> </div>
</div> </div>
<div class="seemore">查看更多</div>
</div> </div>
<!-- 开班计划 --> <div class="pageBox">
<div class="edu_con"> <q-pagination
<div class="edu_name">开班计划</div> v-model="current"
<div class="edu_subname">副标题</div> color="light-green-10"
<div class="inputBox"></div> :max="10"
<div class="classPlanBox"> :max-pages="6"
<div v-for="item in classPlanList" :key="item.id" class="classPlanItemBox"> :boundary-numbers="true"
<div class=""> >
</q-pagination>
</div>
</div>
</div>
<div class="seemore">查看更多</div>
</div> </div>
<!-- 底部 --> <!-- 底部 -->
<Footer /> <Footer />
</div> </div>
</template> </template>
<script> <script>
import Header from "../components/header/headerType2"; import Header from "../../components/header/headerType2";
import Footer from "../components/footer/footerType2"; import Footer from "../../components/footer/footerType2";
// import { QPagination} from 'quasar' // import { QPagination} from 'quasar'
export default { export default {
name: "PageIndex", name: "PageIndex",
...@@ -91,150 +71,67 @@ export default { ...@@ -91,150 +71,67 @@ export default {
data() { data() {
return { return {
slide: "first", slide: "first",
pageScroll: 1080, current: 1,
current: 4, eduProductList: [
eduList: [
{ {
id: 1, id: 1,
url: "", url: require("../../assets/images/JapaneseTrain/edu1.png"),
courseName: "什么什么课程", courseName: "什么什么课程",
desc: "对课程的一些二级文字介绍内容，这里放一排位置。多的省略号...", desc: "对课程的一些二级文字介绍内容，这里放一排位置。多的省略号...",
}, },
{ {
id: 2, id: 2,
url: "", url: require("../../assets/images/JapaneseTrain/edu2.png"),
courseName: "什么什么课程", courseName: "什么什么课程",
desc: "", desc: "",
}, },
{ {
id: 3, id: 3,
url: "", url: require("../../assets/images/JapaneseTrain/edu3.png"),
courseName: "什么什么课程", courseName: "什么什么课程",
desc: "", desc: "",
}, },
{ {
id: 4, id: 4,
url: "", url: require("../../assets/images/JapaneseTrain/edu4.png"),
courseName: "什么什么课程", courseName: "什么什么课程",
desc: "", desc: "",
}, },
{ {
id: 5, id: 5,
url: "", url: require("../../assets/images/JapaneseTrain/edu5.png"),
courseName: "什么什么课程", courseName: "什么什么课程",
desc: "", desc: "",
}, },
{ {
id: 6, id: 6,
url: "", url: require("../../assets/images/JapaneseTrain/edu6.png"),
courseName: "什么什么课程", courseName: "什么什么课程",
desc: "", desc: "",
}, },
], ],
classPlanList:[{
id:1,
className:"东野大木(五班)",
courseInfo:"日语 基础0-N3直通车课程系列",
course:"156课时",
joinStart:"2020年10月30日",
joinEnd:"2020年10月30日",
planNum:10,
surplusNum:1
},{
id:2,
className:"",
courseInfo:"",
courseHour:"",
joinStart:"",
joinEnd:"",
planNum:10,
surplusNum:10,
}]
}; };
}, },
methods: { methods: {
//滚动条高度 seeDetail(){
// handleScroll() { this.$router.push("/eduProductDetail")
// this.pageScroll = }
// document.documentElement.scrollTop || document.body.scrollTop;
// console.log(this.pageScroll);
// },
// pag(){
// let dom= this.$refs.pag
// dom.set(1)
// console.log(dom)
// }
},
mounted() {
// window.addEventListener("scroll", this.handleScroll);
},
//销毁,否则跳到别的路由还是会出现
beforeDestroy() {
// window.removeEventListener("scroll", this.handleScroll);
// this.pageScroll = 0;
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.jiahe { .jiahe {
min-height: 100vh; // min-height: 100vh;
background-color: #f6f6f6; background-color: #faf8f9;
}
.banner-box {
width: 100vw;
height: 38.02vw;
position: relative;
z-index: 5;
} }
.conbox {
position: absolute;
top: 9.635vw;
left: 10.208vw;
}
.con1 {
width: calc(845 / 1920 * 100%);
white-space: nowrap;
// font-size: 100px;
font-size: 5.208vw;
color: #111111;
margin-bottom: 3.125vw;
.jh {
font-family: "pingfang-b" !important;
}
}
.con2 {
// width: calc(739 / 1920 * 100%);
// font-size: 20px !important;
font-size: 1.041vw;
color: #111111;
}
.con3 {
width: calc(596 / 1920 * 100%);
height: 1px;
background-color: #111111ff;
}
.btn {
width: calc(180 / 1920 * 100%);
height: calc(56 / 1080 * 100%);
background-color: #45766dff;
// font-size: 24px !important;
font-size: 1.249vw;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;
cursor: pointer;
}
.edu_con { .edu_con {
width: 62.5vw; width: 62.5vw;
margin: 5.516vw auto 0; margin: 0 auto;
margin-bottom: 5.156vw; padding-top: 4.01vw;
// margin-bottom: 4.974vw;
.edu_name { .edu_name {
text-align: center; text-align: center;
font-size: 1.562vw; font-size: 1.562vw;
...@@ -253,23 +150,30 @@ export default { ...@@ -253,23 +150,30 @@ export default {
.inputBox { .inputBox {
width: 100%; width: 100%;
height: 2.916vw; height: 2.916vw;
background-color: #e9e9e9;
margin: 2.083vw 0; margin: 2.083vw 0;
display: flex;
justify-content: space-between;
align-items: center;
.inputBorder {
width: 30.468vw;
height: 2.916vw;
background-color: #e9e9e9;
}
} }
.eduConbox { .eduConbox {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 2.604vw; margin-bottom: 3.385vw;
.itemBox { .itemBox {
width: 20vw; width: 20vw;
height: 18.437vw; height: 18.437vw;
background-color: #ff0; background-color: #fff;
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);
.itemImg { .itemImg {
width: 20vw; width: 20vw;
height: 13.229vw; height: 13.229vw;
background-color: rgb(99, 150, 104);
} }
.infoBox { .infoBox {
padding: 1.406vw 0.937vw 0; padding: 1.406vw 0.937vw 0;
...@@ -297,26 +201,14 @@ export default { ...@@ -297,26 +201,14 @@ export default {
} }
} }
} }
.pageBox{
.seemore { width: 100%;
margin: 0 auto; margin-bottom: 5.2vw;
width: 12.5vw; display: flex;
height: 2.916vw; justify-content: center;
background: #45766d; align-items: center;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.25vw;
// font-family: PingFang SC;
// font-weight: 500;
color: #ffffff;
} }
.classPlanItemBox{ .q-btn{
width: 100%; border: 1px solid #D2D7DD;
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;
} }
</style> </style>
\ No newline at end of file
src/pages/index.vue
View file @ 6f0447c0
This diff is collapsed.
src/pages/studyServe/studyServe.vue 0 → 100644
View file @ 6f0447c0
<template>
<div class="jiahe">
<Header />
<Banner />
<!-- 留学产品 -->
<div class="studyProduct">
<div class="title">留学产品</div>
<div class="subTitle">副标题</div>
<div v-for="item in studyProductList" :key="item.id">
<div class="studyProductBox" v-if="item.type == 1">
<div class="left">
<div class="name">{{ item.name }}</div>
<div class="line"></div>
<div class="desc">{{ item.desc }}</div>
</div>
<div class="right">
<img :src="item.url" alt="" />
</div>
</div>
<div class="studyProductBox" v-if="item.type == 2">
<div class="right">
<img :src="item.url" alt="" />
</div>
<div class="left">
<div class="name">{{ item.name }}</div>
<div class="line"></div>
<div class="desc">{{ item.desc }}</div>
</div>
</div>
</div>
</div>
<TeacherTeam :viewNum="3"/>
<Footer />
</div>
</template>
<script>
import Header from "../../components/header/headerType2";
import Banner from "../../components/bnaner/banner";
import TeacherTeam from "../../components/teacherTeam/teacherTeam";
import Footer from "../../components/footer/footerType2";
export default {
components: {
Banner,
Header,
TeacherTeam,
Footer,
},
data() {
return {
studyProductList: [
{
// url:require(''),
id: 1,
url: "",
name: "学部直考",
desc:
"日本，作为中国一衣带水的邻邦，同时因为其一流的教育水平、与中国相近的文化风俗、保持完好的传统礼仪以及良好的社会治安，一直以来深受中国留学生的喜爱",
type: 1,
},
{
id: 2,
url: "",
name: "学部直通车",
desc:
"学生12年教育经历，日语到N2水平，经我校推荐，即能直通日本本科：日本，作为中国一衣带水的邻邦，同时因为其一流的教育水平、与中国相近的文化风俗、保持完好的传统礼仪以及良好的社会治安，一直以来深受中国留学生的喜爱。",
type: 2,
},
],
};
},
};
</script>
<style lang="scss" scoped>
.jiahe{
background-color: #F6F6F6;
}
.studyProduct {
width: 62.5vw;
margin: 0 auto;
.title {
font-size: 1.5625vw;
// font-family: Microsoft YaHei;
// font-weight: bold;
font-family: "pingfang-b" !important;
color: #111111;
line-height: 1.5625vw;
text-align: center;
margin-top: 5.208vw;
margin-bottom: 1.041vw;
}
.subTitle {
text-align: center;
font-size: 0.833vw;
font-family: Microsoft YaHei;
font-weight: 400;
color: #888888;
line-height: 1.5625vw;
margin-bottom: 2.833vw;
}
.studyProductBox {
display: flex;
justify-content: space-between;
height: 27.395vw;
margin-bottom: 5.208vw;
.left {
width: 18.125vw;
height: 100%;
.name {
font-size: 1.25vw;
font-family: "pingfang-b" !important;
color: #111111;
line-height: 1.5625vw;
}
.line {
width: 5.208vw;
height: 1px;
background-color: #45766d;
margin: 1.5625vw 0;
}
.desc {
width: 100%;
max-height: 20.104vw;
overflow-y: auto;
font-size: 0.625vw;
color: #111111;
line-height: 1.875vw;
}
}
.right {
width: 41.145vw;
height: 100%;
background-color: #333;
}
}
}
</style>
\ No newline at end of file
src/router/routes.js
View file @ 6f0447c0
...@@ -6,7 +6,11 @@ const routes = [ ...@@ -6,7 +6,11 @@ const routes = [
component: () => import('layouts/MainLayout.vue'), component: () => import('layouts/MainLayout.vue'),
children: [ children: [
{ path: '/index', component: () => import('pages/Index.vue') }, { path: '/index', component: () => import('pages/Index.vue') },
{ path: '/JapaneseTrain', component: () => import('src/pages/JapaneseTrain.vue') }, { path: '/JapaneseTrain', component: () => import('src/pages/JapaneseTrain/JapaneseTrain.vue') },
{ path: '/eduProductList', component: () => import('src/pages/JapaneseTrain/eduProductList.vue') },
{ path: '/eduProductDetail', component: () => import('src/pages/JapaneseTrain/eduProductDetail.vue') },
{ path: '/studyServe', component: () => import('src/pages/studyServe/studyServe.vue') },
{ path: '/aboutUs', component: () => import('src/pages/aboutUs/aboutUs.vue') },
] ]
}, },
// Always leave this as last one, // Always leave this as last one,
......
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