Skip to content

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

1

parent 9bb1d4ad
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
<template>
<div class="jiahe">
<Header />
<!-- bannner部分 -->
<Banner/>
<!-- 教育产品 -->
<div class="edu_con">
<div class="edu_name">教育产品</div>
<div class="edu_subname">副标题</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 v-for="item in eduList" :key="item.id" class="itemBox">
<!-- <q-img src="../assets/images/JapaneseTrain/edu1.png" class="itemImg" /> -->
<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 class="seemore" @click="goEduProductList">查看更多</div>
</div>
<!-- 开班计划 -->
<div class="edu_con">
<div class="edu_name">开班计划</div>
<div class="edu_subname">副标题</div>
<div class="inputBox">
<q-input
v-model="search"
filled
type="search"
clearable
placeholder="可搜索课程系列/名称"
class="inputBorder2"
>
<template v-slot:prepend>
<q-icon name="search" />
</template>
</q-input>
<div class="inputBorder2">
<q-select
outlined
v-model="model"
:options="options"
clearable
placeholder="可查询课程系列/名称"
:dense="false"
:options-dense="false"
>
</q-select>
</div>
<div class="inputBorder2">
<q-select
outlined
v-model="model"
:options="options"
clearable
placeholder="可查询课程系列/名称"
:dense="false"
:options-dense="false"
>
</q-select>
</div>
</div>
<div class="classPlanBox">
<div
v-for="item in classPlanList"
:key="item.id"
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.courseInfo }}
</div>
<div class="courseInfo">
<q-img
src="../../assets/images/JapaneseTrain/icon2.png"
class="itemIcon"
/>{{ item.courseTime }}
</div>
</div>
<div class="infoBox2">
<div class="title">招生信息</div>
<div class="stuInfo" style="margin-bottom: 0.729vw">
截止报名时间<span class="stuTime">{{ item.joinEnd }}</span>
</div>
<div class="stuInfo">
开始上课时间<span class="stuTime">{{ item.joinStart }}</span>
</div>
</div>
<div class="infoBox3">
<div class="title">名额信息</div>
<div style="margin-bottom: 0.729vw" class="numInfo">
计划招生人数<span class="planNum">{{ item.planNum }}</span
>人
</div>
<div class="numInfo">
剩余招生名额<span class="surplusNum">{{ item.surplusNum }}</span
>人
</div>
</div>
<div class="infoBox4">
<div class="title">咨询客服</div>
<div class="consultBtn">去咨询</div>
</div>
</div>
</div>
<div class="seemore">查看更多</div>
</div>
<!-- 教师团队 -->
<TeacherTeam :viewNum="4"/>
<!-- 底部 -->
<Footer />
</div>
</template>
<script>
import Header from "../../components/header/headerType2";
import Footer from "../../components/footer/footerType2";
import Banner from "../../components/bnaner/banner";
import TeacherTeam from "../../components/teacherTeam/teacherTeam";
export default {
name: "PageIndex",
components: {
Header,
Footer,
Banner,
TeacherTeam,
},
data() {
return {
slide: "first",
pageScroll: 1080,
current: 4,
search: "",
model: "",
options: ["Google", "Facebook", "Twitter", "Apple", "Oracle"],
eduList: [
{
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: "",
},
],
classPlanList: [
{
id: 1,
className: "东野大木(五班)",
courseInfo: "日语 基础0-N3直通车课程系列",
courseTime: "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: {
//滚动条高度
// handleScroll() {
// this.pageScroll =
// document.documentElement.scrollTop || document.body.scrollTop;
// console.log(this.pageScroll);
// },
//去教育产品列表
goEduProductList() {
this.$router.push("/eduProductList");
},
},
mounted() {
// window.addEventListener("scroll", this.handleScroll);
},
};
</script>
<style lang="scss" scoped>
.jiahe {
height: 100%;
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;
// font-weight: 400;
color: #888888;
}
.inputBox {
width: 100%;
height: 2.916vw;
margin: 2.083vw 0;
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.25vw;
margin-bottom: 1.562vw;
.itemImg {
width: 20vw;
height: 13.229vw;
// background-color: rgb(99, 150, 104);
}
.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;
}
}
}
.seemore {
margin: 0 auto;
width: 12.5vw;
height: 2.916vw;
background: #45766d;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.25vw;
// font-family: PingFang SC;
// font-weight: 500;
color: #ffffff;
}
.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;
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;
margin-right: 0.312vw;
}
}
}
.infoBox2 {
width: 19.583vw;
height: 100%;
.stuInfo {
font-size: 0.729vw;
color: #111111;
.stuTime {
color: #45766d;
font-family: "pingfang-b" !important;
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 {
.consultBtn {
width: 4.166vw;
height: 1.562vw;
background-color: #45766d;
font-size: 0.625vw;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
margin-top: 0.52vw;
}
}
}
</style>
\ No newline at end of file
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
...@@ -11,10 +11,13 @@ ...@@ -11,10 +11,13 @@
navigation-position="right" navigation-position="right"
navigation navigation
height="100%" height="100%"
autoplay
infinite infinite
control-type="outline" 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 <q-carousel-slide
name="first" name="first"
img-src="../assets/images/index/banner_bg.png" img-src="../assets/images/index/banner_bg.png"
...@@ -25,7 +28,7 @@ ...@@ -25,7 +28,7 @@
小文字介绍什么的最好。 小文字介绍什么的最好。
</div> </div>
<div class="con3"></div> <div class="con3"></div>
<div class="btn" @click="seeDetail">查看详情</div> <div class="btn">查看详情</div>
<q-img <q-img
src="../assets/images/index/female.png" src="../assets/images/index/female.png"
...@@ -33,7 +36,8 @@ ...@@ -33,7 +36,8 @@
class="female" class="female"
/> />
</q-carousel-slide> </q-carousel-slide>
<!-- <q-carousel-slide name="first3" img-src="https://cdn.quasar.dev/img/mountains.jpg"/> --> <q-carousel-slide name="first3" img-src="https://cdn.quasar.dev/img/mountains.jpg"/>
<q-carousel-slide name="first4" img-src="https://cdn.quasar.dev/img/mountains.jpg"/>
</q-carousel> </q-carousel>
</div> </div>
</div> </div>
...@@ -135,14 +139,14 @@ ...@@ -135,14 +139,14 @@
</div> </div>
</div> </div>
<!-- 第三部分 留学服务--> <!-- 第三部分 留学服务-->
<div class="threebox"> <div class="threebox" @mouseleave="movemask(0)">
<div class="absolute-top-left subThreeBox"> <div class="absolute-top-left subThreeBox" >
<q-img <q-img
src="../assets/images/index/study_serve.png" src="../assets/images/index/study_serve.png"
spinner-color="white" spinner-color="white"
class="class_icon3" class="class_icon3"
/> />
<div class="threeItem"> <div class="threeItem" style="position: relative;" @mouseenter="movemask(1)" >
<div class="outside"> <div class="outside">
<div class="inner"> <div class="inner">
<animate-number <animate-number
...@@ -155,16 +159,40 @@ ...@@ -155,16 +159,40 @@
</div> </div>
</div> </div>
<div class="itemName">本科院校资源</div> <div class="itemName">本科院校资源</div>
<div class="mask" :class="{removeMask:currentMaskIndex==1}"></div>
</div> </div>
<div class="threeItem threeItem1"> <div class="threeItem" style="position: relative;" @mouseenter="movemask(2)" >
<div class="itemIconBox"></div> <div class="itemIconBox">
<!-- <q-img <div v-for="item in schoolIconList" :key="item.id">
src="../assets/images/index/x.png" <img
spinner-color="white" :src="item.url"
class="x_icon3" class="schoolIcon1"
/> --> :style="{ top: item.top + 'vw', left: item.left + 'vw' }"
v-if="item.type == 1"
/>
<img
:src="item.url"
class="schoolIcon2"
:style="{ top: item.top + 'vw', left: item.left + 'vw' }"
v-if="item.type == 2"
/>
<img
:src="item.url"
class="schoolIcon3"
:style="{ top: item.top + 'vw', left: item.left + 'vw' }"
v-if="item.type == 3"
/>
<img
:src="item.url"
class="schoolIcon4"
:style="{ top: item.top + 'vw', left: item.left + 'vw' }"
v-if="item.type == 4"
/>
</div>
</div>
<div class="mask" :class="{removeMask:currentMaskIndex==2}"></div>
</div> </div>
<div class="threeItem"> <div class="threeItem" style="position: relative;" @mouseenter="movemask(3)">
<div class="outside"> <div class="outside">
<div class="inner"> <div class="inner">
<animate-number <animate-number
...@@ -178,8 +206,9 @@ ...@@ -178,8 +206,9 @@
</div> </div>
</div> </div>
<div class="itemName">可选专业</div> <div class="itemName">可选专业</div>
<div class="mask" :class="{removeMask:currentMaskIndex==3}"></div>
</div> </div>
<div class="threeItem threeItem1"> <div class="threeItem" style="position: relative;" @mouseenter="movemask(4)">
<div class="outside"> <div class="outside">
<div class="inner"> <div class="inner">
<animate-number <animate-number
...@@ -192,6 +221,7 @@ ...@@ -192,6 +221,7 @@
</div> </div>
</div> </div>
<div class="itemName">服务人数</div> <div class="itemName">服务人数</div>
<div class="mask" :class="{removeMask:currentMaskIndex==4}"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -209,34 +239,21 @@ ...@@ -209,34 +239,21 @@
class="class_icon4 class_icon4_2" class="class_icon4 class_icon4_2"
/> />
<div class="workItemBox workItemBox_1"> <div class="workItemBox workItemBox_1">
<q-img <q-img src="" class="class_icon4_all" />
src=""
class="class_icon4_all"
/>
<div class="workType">酒店</div> <div class="workType">酒店</div>
</div> </div>
<div class="workItemBox workItemBox_2"> <div class="workItemBox workItemBox_2">
<q-img <q-img src="" class="class_icon4_all" />
src=""
class="class_icon4_all"
/>
<div class="workType">餐厅</div> <div class="workType">餐厅</div>
</div> </div>
<div class="workItemBox workItemBox_3"> <div class="workItemBox workItemBox_3">
<q-img <q-img src="" class="class_icon4_all" />
src=""
class="class_icon4_all"
/>
<div class="workType">IT</div> <div class="workType">IT</div>
</div> </div>
<div class="workItemBox workItemBox_4"> <div class="workItemBox workItemBox_4">
<q-img <q-img src="" class="class_icon4_all" />
src=""
class="class_icon4_all"
/>
<div class="workType">康养</div> <div class="workType">康养</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 第五部分 董事长--> <!-- 第五部分 董事长-->
...@@ -268,15 +285,303 @@ export default { ...@@ -268,15 +285,303 @@ export default {
data() { data() {
return { return {
slide: "first", slide: "first",
currentMaskIndex:0,
pageScroll: 0, pageScroll: 0,
activeIdx: 1, activeIdx: 1,
schoolResource: 100, //本科院校资源 schoolResource: 100, //本科院校资源
major: 300, //可选专业 major: 300, //可选专业
servePeopleNum: 300, //服务人数 servePeopleNum: 300, //服务人数
schoolIconList: [
// 第一排
{
url: require("../assets/images/index/x.png"),
top: 0,
left: 0,
type: 1,
color: "#fff",
},
{
url: require("../assets/images/index/x.png"),
top: 0,
left: 2.239,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 0,
left: 4.16,
type: 2,
},
{
url: require("../assets/images/index/x.png"),
top: 0,
left: 7.864,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 0,
left: 10.156,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 0,
left: 15,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 0,
left: 17.395,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 0,
left: 19.947,
type: 1,
},
// x粗轴
{
url: require("../assets/images/index/x.png"),
top: 3.333,
left: 4.27,
type: 2,
},
{
url: require("../assets/images/index/x.png"),
top: 2.656,
left: 7.565,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 6.822,
left: 5.416,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 5.52,
left: 7.708,
type: 2,
},
{
url: require("../assets/images/index/x.png"),
top: 9.166,
left: 6.562,
type: 2,
},
{
url: require("../assets/images/index/x.png"),
top: 8.593,
left: 10.104,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 12.552,
left: 7.708,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 12.552,
left: 7.708,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 11.25,
left: 9.895,
type: 2,
},
{
url: require("../assets/images/index/x.png"),
top: 15,
left: 8.906,
type: 2,
},
{
url: require("../assets/images/index/x.png"),
top: 14.375,
left: 12.395,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 16.875,
left: 12.187,
type: 2,
},
{
url: require("../assets/images/index/x.png"),
top: 20.625,
left: 11.093,
type: 2,
},
{
url: require("../assets/images/index/x.png"),
top: 20.052,
left: 14.687,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 24.166,
left: 12.291,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 22.5,
left: 14.375,
type: 2,
},
{
url: require("../assets/images/index/x.png"),
top: 26.197,
left: 13.281,
type: 2,
},
{
url: require("../assets/images/index/x.png"),
top: 25.572,
left: 16.875,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 29.635,
left: 14.479,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 28.177,
left: 16.614,
type: 2,
},
// x细轴
{
url: require("../assets/images/index/x.png"),
top: 2.656,
left: 16.666,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 4.687,
left: 15.729,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 6.77,
left: 14.791,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 8.802,
left: 13.906,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 10.729,
left: 13.02,
type: 1,
},
// ------
{
url: require("../assets/images/index/x.png"),
top: 18.385,
left: 9.114,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 20.52,
left: 8.333,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 22.447,
left: 7.5,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 24.375,
left: 6.666,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 26.302,
left: 5.833,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 28.072,
left: 5.052,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 30,
left: 4.218,
type: 1,
},
//最后一排
{
url: require("../assets/images/index/x.png"),
top: 32.343,
left: 0.364,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 31.822,
left: 3.02,
type: 3,
},
{
url: require("../assets/images/index/x.png"),
top: 32.343,
left: 5.937,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 32.343,
left: 12.239,
type: 1,
},
{
url: require("../assets/images/index/x.png"),
top: 31.5,
left: 15.5,
type: 4,
},
{
url: require("../assets/images/index/x.png"),
top: 31.5,
left: 18.35,
type: 4,
},
{
url: require("../assets/images/index/x.png"),
top: 32.343,
left: 21.666,
type: 1,
},
],
}; };
},
watch: {
}, },
methods: { methods: {
// 滚动条高度 // 滚动条高度
...@@ -291,9 +596,9 @@ export default { ...@@ -291,9 +596,9 @@ export default {
startAnimate() { startAnimate() {
// this.$refs.myNum.start() // this.$refs.myNum.start()
}, },
seeDetail(){ movemask(i){
this.$router.push("/secondClassroom") this.currentMaskIndex=i
} },
}, },
mounted() { mounted() {
// threeAdd(this.schoolResource,"schoolResource") // threeAdd(this.schoolResource,"schoolResource")
...@@ -402,6 +707,7 @@ export default { ...@@ -402,6 +707,7 @@ export default {
justify-content: space-between; justify-content: space-between;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
box-sizing: border-box;
.classItem { .classItem {
width: calc(266 / 1920 * 100%); width: calc(266 / 1920 * 100%);
height: 100%; height: 100%;
...@@ -451,15 +757,16 @@ export default { ...@@ -451,15 +757,16 @@ export default {
position: absolute; position: absolute;
top: calc(116 / 1080 * 100%); top: calc(116 / 1080 * 100%);
left: calc(690 / 1920 * 100%); left: calc(690 / 1920 * 100%);
// left: 50%; z-index: 99;
// transform: translateX(-50%);
} }
.threeItem { .threeItem {
width: 25%; width: 25vw;
height: 100%; height: 56.25vw;
background-color: #fff; // background-color: #eee;
// background-color: #333; background-color: #333;
color: #000; color: #000;
flex-grow: 5;
.outside { .outside {
width: 12.656vw; width: 12.656vw;
height: 13.333vw; height: 13.333vw;
...@@ -487,18 +794,32 @@ export default { ...@@ -487,18 +794,32 @@ export default {
color: #ffffff; color: #ffffff;
} }
.itemIconBox { .itemIconBox {
width: 23.679vw; width: 23.697vw;
height: 34.114vw; height: 34.114vw;
background-image: url("../assets/images/index/x.png"); background-image: url("../assets/images/index/x.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: 100% auto;
margin: 15.989vw auto 0; margin: 15.989vw auto 0;
position: relative;
} }
} }
.threeItem1 {
background-color: #222 !important;
}
} }
.mask{
width: 25vw;
height: 56.25vw;
background-color: #FFFFFF;
opacity: 0.5;
position: absolute;
top:0;
left: 0;
z-index: 10;
}
}
.removeMask{
transform:translateX(25vw);
transition: all 0.5s;
z-index: 0;
} }
.fourbox { .fourbox {
width: 100%; width: 100%;
...@@ -527,7 +848,7 @@ export default { ...@@ -527,7 +848,7 @@ export default {
width: 26.666vw; width: 26.666vw;
height: 46.562vw; height: 46.562vw;
position: absolute; position: absolute;
.class_icon4_all { .class_icon4_all {
width: 26.666vw; width: 26.666vw;
height: 39.062vw; height: 39.062vw;
...@@ -542,30 +863,29 @@ export default { ...@@ -542,30 +863,29 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: #FFFFFF; background-color: #ffffff;
} }
} }
.workItemBox_1 { .workItemBox_1 {
top: 8.802vw; top: 8.802vw;
left: 8.489vw; left: 8.489vw;
z-index: 1; z-index: 1;
} }
.workItemBox_2 { .workItemBox_2 {
top: 19.635vw; top: 19.635vw;
left: 27.083vw; left: 27.083vw;
z-index: 4; z-index: 4;
} }
.workItemBox_3 { .workItemBox_3 {
top: 48.541vw; top: 48.541vw;
left: 46.25vw; left: 46.25vw;
z-index: 3; z-index: 3;
} }
.workItemBox_4 { .workItemBox_4 {
top: 65.572vw; top: 65.572vw;
left: 64.843vw; left: 64.843vw;
z-index: 2; z-index: 2;
} }
} }
} }
.fivebox { .fivebox {
...@@ -589,13 +909,6 @@ export default { ...@@ -589,13 +909,6 @@ export default {
height: 100%; height: 100%;
background-color: #eee; background-color: #eee;
} }
// .chairman_des{
// width: calc(350 / 1920 * 100%);
// height: auto;
// position: absolute;
// top: 10.937vw;
// left: 41.354vw;
// }
} }
} }
// 隐藏滚动条 // 隐藏滚动条
...@@ -605,4 +918,63 @@ export default { ...@@ -605,4 +918,63 @@ export default {
// ::-webkit-scrollbar { // ::-webkit-scrollbar {
// width: 0 !important;height: 0; // width: 0 !important;height: 0;
// } // }
.schoolIcon1 {
width: 1.2vw;
height: 1.2vw;
border-radius: 50%;
position: absolute;
z-index: 10;
background-color: #f00;
}
.schoolIcon1:hover {
background-color: #fff;
}
.schoolIcon2 {
width: 2.864vw;
height: 2.864vw;
border-radius: 50%;
position: absolute;
z-index: 10;
background-color: #f00;
}
.schoolIcon2:hover {
background-color: #fff;
}
.schoolIcon3 {
width: 1.7vw;
height: 1.7vw;
border-radius: 50%;
position: absolute;
z-index: 10;
background-color: #f00;
}
.schoolIcon3:hover {
background-color: #fff;
}
.schoolIcon4 {
width: 2vw;
height: 2vw;
border-radius: 50%;
position: absolute;
z-index: 10;
background-color: #f00;
}
.schoolIcon4:hover {
background-color: #fff;
}
// 修改轮播图导航样式
.activeBtn {
width: 0.729vw;
height: 0.729vw;
background-color: #ffffff;
border-radius: 50%;
margin: 0.78vw 0;
}
.parmaryBtn {
width: 0.52vw;
height: 0.52vw;
border: 2px solid #ffffff;
border-radius: 50%;
margin: 0.78vw 0;
}
</style> </style>
\ No newline at end of file
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