Skip to content

M
ministers
Commit 4607f6f3 authored by 罗超's avatar 罗超 Committed by 罗超
Browse files
Options

1

parent a45ee0d4
Hide whitespace changes
Inline Side-by-side
Showing with 1249 additions and 63 deletions
package.json
View file @ 4607f6f3
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
"@quasar/extras": "^1.0.0", "@quasar/extras": "^1.0.0",
"@riophae/vue-treeselect": "^0.4.0", "@riophae/vue-treeselect": "^0.4.0",
"ali-oss": "^6.12.0", "ali-oss": "^6.12.0",
"animate.css": "^4.1.1",
"axios": "^0.18.1", "axios": "^0.18.1",
"co": "^4.6.0", "co": "^4.6.0",
"core-js": "^3.6.5", "core-js": "^3.6.5",
...@@ -25,6 +26,8 @@ ...@@ -25,6 +26,8 @@
"quasar": "^1.0.0", "quasar": "^1.0.0",
"relation-graph": "^1.0.8", "relation-graph": "^1.0.8",
"v-viewer": "^1.5.1", "v-viewer": "^1.5.1",
"vue-animate-number": "^0.4.2",
"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/App.vue
View file @ 4607f6f3
...@@ -23,4 +23,5 @@ body, ...@@ -23,4 +23,5 @@ body,
font-family: -apple-system,BlinkMacSystemFont,'pingfang','Microsoft YaHei',"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; font-family: -apple-system,BlinkMacSystemFont,'pingfang','Microsoft YaHei',"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
color: #3f4254; color: #3f4254;
} }
</style> </style>
src/boot/axios.js
View file @ 4607f6f3
...@@ -3,11 +3,15 @@ import ElementUI from 'element-ui' ...@@ -3,11 +3,15 @@ import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' import 'element-ui/lib/theme-chalk/index.css'
import Erpindex from '../utils/erpindex' import Erpindex from '../utils/erpindex'
import axios from 'axios' import axios from 'axios'
import 'vue-easytable/libs/themes-base/index.css' // import 'vue-easytable/libs/themes-base/index.css'
import {VTable,VPagination} from 'vue-easytable' // import 'vue-easytable/libs/theme-default/index.css'
// import {VeTable,VePagination} from 'vue-easytable'
import 'viewerjs/dist/viewer.css' import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer' //权限编码JS import Viewer from 'v-viewer' //权限编码JS
import animated from 'animate.css'
import VueAnimateNumber from 'vue-animate-number'
Vue.use(VueAnimateNumber)
Vue.http = Vue.prototype.$http = axios Vue.http = Vue.prototype.$http = axios
// 时间扩展格式化 // 时间扩展格式化
...@@ -30,7 +34,8 @@ Date.prototype.Format = function (fmt) { ...@@ -30,7 +34,8 @@ Date.prototype.Format = function (fmt) {
Vue.use(ElementUI) Vue.use(ElementUI)
Vue.use(Erpindex) Vue.use(Erpindex)
Vue.use(Viewer); Vue.use(Viewer);
Vue.component(VTable.name, VTable) Vue.use(animated)
Vue.component(VPagination.name, VPagination) // Vue.component(VTable.name, VTable)
// Vue.component(VPagination.name, VPagination)
Vue.prototype.$axios = axios Vue.prototype.$axios = axios
src/boot/i18n.js
View file @ 4607f6f3
import Vue from 'vue' import Vue from 'vue'
import VueI18n from 'vue-i18n' import VueI18n from 'vue-i18n'
import messages from 'src/i18n' import messages from 'src/i18n'
import '../../public/static/UE/ueditor.config.js'
import '../../public/static/UE/ueditor.all.js'
import '../../public/static/UE/lang/zh-cn/zh-cn.js'
import '../../public/static/UE/ueditor.parse.min.js'
Vue.use(VueI18n) Vue.use(VueI18n)
const i18n = new VueI18n({ const i18n = new VueI18n({
......
src/boot/permission.js
View file @ 4607f6f3
...@@ -13,7 +13,8 @@ router.beforeEach((to, from, next) => { ...@@ -13,7 +13,8 @@ router.beforeEach((to, from, next) => {
localStorage.setItem("routerBefore", from.path); localStorage.setItem("routerBefore", from.path);
LoadingBar.start(); LoadingBar.start();
/** 请求头包含授权信息 并且 页面必须授权 直接进入 */ /** 请求头包含授权信息 并且 页面必须授权 直接进入 */
if (getAuth()) { // if (getAuth()) {
if (true) {
//debugger; //debugger;
// if (to.path === "/login" || to.path === "/") { // if (to.path === "/login" || to.path === "/") {
// next({ // next({
......
src/components/footer/footer.vue 0 → 100644
View file @ 4607f6f3
<template>
<div class="footer">
<!-- <div class="absolute-top-left subFooter"> -->
<q-img
src="../../assets/images/index/logo_bottom.png"
spinner-color="white"
class="class_icon6"
/>
<div class="link">
<span @click="jumpPage('')">留学服务</span> | <span @click="jumpPage()">就业服务</span> | <span @click="jumpPage()">甲鹤团队</span> | <span @click="jumpPage()">关于甲鹤</span> | <span @click="jumpPage()">联系我们</span>
</div>
<div class="copyright">
CopyRight © 2018 www.023.cn. All Rights Reserved
</div>
<!-- </div> -->
</div>
</template>
<script>
export default {
data(){
return{
}
},
methods:{
jumpPage(url){
this.$router.push(url)
}
}
}
</script>
<style lang="scss" scoped>
.footer {
width: 100%;
height: 22.916vw;
background-color: #ededed;
position: relative;
.class_icon6 {
width: calc(201 / 1920 * 100%);
height: auto;
position: absolute;
top: 3.697vw;
left: 50%;
transform: translateX(-50%);
}
.link {
font-size: 0.729vw;
color: #111111;
position: absolute;
top: 16.822vw;
left: 50%;
transform: translateX(-50%);
}
.link span {
cursor: pointer;
}
.copyright {
text-align: center;
font-size: 0.729vw;
font-family: "pingfang-b" !important;
color: #111111;
position: absolute;
top: 20.729vw;
left: 50%;
transform: translateX(-50%);
}
}
</style>
\ No newline at end of file
src/components/footer/footerType2.vue 0 → 100644
View file @ 4607f6f3
<template>
<div class="footer">
<q-img
src="../../assets/images/index/logo_bottom.png"
spinner-color="white"
class="jh_icon"
/>
<div class="link">
<span @click="jumpPage('')">留学服务</span> |
<span @click="jumpPage()">就业服务</span> |
<span @click="jumpPage()">甲鹤团队</span> |
<span @click="jumpPage()">关于甲鹤</span> |
<span @click="jumpPage()">联系我们</span>
</div>
<div class="copyright">
CopyRight © 2018 www.023.cn. All Rights Reserved
</div>
<q-img
src="../../assets/images/index/logo_bottom.png"
spinner-color="white"
class="ewm_icon"
/>
<q-img
src="../../assets/images/index/logo_bottom.png"
spinner-color="white"
class="mini_icon"
/>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
jumpPage(url) {
this.$router.push(url);
},
},
};
</script>
<style lang="scss" scoped>
.footer {
width: 100%;
height: 14.062vw;
background-color: #faf8f9;
position: relative;
.jh_icon {
width: 5.781vw;
height: auto;
position: absolute;
top: 4.01vw;
left: 18.75vw;
}
.link {
font-size: 0.729vw;
color: #111111;
position: absolute;
top: 5.26vw;
left: 26.562vw;
}
.link span {
cursor: pointer;
}
.copyright {
text-align: center;
font-size: 0.729vw;
font-family: "pingfang-b" !important;
color: #111111;
position: absolute;
top: 7.916vw;
left: 26.562vw;
}
.ewm_icon {
width: 5.781vw;
height: auto;
position: absolute;
top: 4.01vw;
left: 66.354vw;
}
.mini_icon {
width: 5.781vw;
height: auto;
position: absolute;
top: 4.01vw;
left: 75.572vw;
}
}
</style>
\ No newline at end of file
src/components/header/header.vue 0 → 100644
View file @ 4607f6f3
<template>
<div :style="{ opacity: scorllNum < 300 ? '1' : scorllNum/1080 }">
<div
id="dowebok"
class="animated bounceOutLeft animate__animated animate__fadeInDown"
:class="{
'header_absolute': scorllNum < 300,
'header_fixed': scorllNum >= 300,
}"
>
<div class="row items-center full-height">
<div class="col">
<img style="height: 61px" src="../../assets/images/logo.png" />
</div>
<div class="col">
<q-tabs
v-model="tab"
class="text-dark"
active-color="dark"
align="justify"
narrow-indicator
dense
>
<!-- <q-route-tab to="/index" name="home" label="首页" content-class="items-nav" /> -->
<q-tab name="home" label="甲鹤教育" content-class="items-nav" />
<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="news" label="媒体中心" content-class="items-nav" />
<q-tab name="about" label="关于我们" content-class="items-nav" />
<q-tab name="join" label="加入我们" content-class="items-nav" />
</q-tabs>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
scorllNum: {
type: Number,
default: 0,
},
},
data() {
return {
tab: "home",
};
},
methods:{
JapaneseTrain(){
this.$router.push("/JapaneseTrain")
}
},
watch:{
}
};
</script>
<style lang="scss" scoped>
#dowebok {
// animation-duration:1s; //动画持续时间
// animation-delay:1s; //动画延迟时间
// animation-iteration-count: infinite; //动画执行次数
}
.header_absolute{
margin-top: 61px;
height: 61px;
z-index: 100;
left: 58px;
right: 58px;
position: absolute;
}
.header_fixed{
width: 100vw;
position: fixed;
top: 0;
left: 0;
z-index: 100;
padding: 0 3.124vw;
background-color:#f6f6f6;
}
.items-nav .q-tab__label {
font-size: 16px !important;
font-family: "pingfang-b" !important;
}
</style>
\ No newline at end of file
src/components/header/headerType2.vue 0 → 100644
View file @ 4607f6f3
<template>
<div>
<div
id="dowebok"
class="animated bounceOutLeft animate__animated animate__fadeInDown header_absolute"
>
<div class="row items-center full-height">
<div class="col">
<img style="height: 61px" src="../../assets/images/logo.png" />
</div>
<div class="col">
<q-tabs
v-model="tab"
class="text-dark"
active-color="dark"
align="justify"
narrow-indicator
dense
>
<!-- <q-route-tab to="/index" name="home" label="首页" content-class="items-nav" /> -->
<q-tab name="home" label="甲鹤教育" content-class="items-nav" />
<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="news" label="媒体中心" content-class="items-nav" />
<q-tab name="about" label="关于我们" content-class="items-nav" />
<q-tab name="join" label="加入我们" content-class="items-nav" />
</q-tabs>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
scorllNum: {
type: Number,
default: 0,
},
},
data() {
return {
tab: "home",
};
},
methods:{
JapaneseTrain(){
this.$router.push("/JapaneseTrain")
}
},
watch:{
}
};
</script>
<style lang="scss" scoped>
.header_absolute{
height: 61px;
// z-index: 100;
// position: absolute;
// top: 0;
// left: 0;
}
.items-nav .q-tab__label {
font-size: 16px !important;
font-family: "pingfang-b" !important;
}
</style>
\ No newline at end of file
src/i18n/index.js
View file @ 4607f6f3
import enUS from './en-us' import enUS from './en-us'
import zhCN from './zh-cn'
export default { export default {
'en-us': enUS 'en-us': zhCN
} }
src/pages/JapaneseTrain.vue 0 → 100644
View file @ 4607f6f3
<template>
<div class="jiahe">
<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_name">教育产品</div>
<div class="edu_subname">副标题</div>
<div class="inputBox"></div>
<div class="eduConbox">
<div v-for="item in eduList" :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 class="seemore">查看更多</div>
</div>
<!-- 开班计划 -->
<div class="edu_con">
<div class="edu_name">开班计划</div>
<div class="edu_subname">副标题</div>
<div class="inputBox"></div>
<div class="classPlanBox">
<div v-for="item in classPlanList" :key="item.id" class="classPlanItemBox">
<div class="">
</div>
</div>
</div>
<div class="seemore">查看更多</div>
</div>
<!-- 底部 -->
<Footer />
</div>
</template>
<script>
import Header from "../components/header/headerType2";
import Footer from "../components/footer/footerType2";
// import { QPagination} from 'quasar'
export default {
name: "PageIndex",
components: {
Header,
Footer,
// QPagination
},
data() {
return {
slide: "first",
pageScroll: 1080,
current: 4,
eduList: [
{
id: 1,
url: "",
courseName: "什么什么课程",
desc: "对课程的一些二级文字介绍内容，这里放一排位置。多的省略号...",
},
{
id: 2,
url: "",
courseName: "什么什么课程",
desc: "",
},
{
id: 3,
url: "",
courseName: "什么什么课程",
desc: "",
},
{
id: 4,
url: "",
courseName: "什么什么课程",
desc: "",
},
{
id: 5,
url: "",
courseName: "什么什么课程",
desc: "",
},
{
id: 6,
url: "",
courseName: "什么什么课程",
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: {
//滚动条高度
// handleScroll() {
// 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>
<style lang="scss" scoped>
.jiahe {
min-height: 100vh;
background-color: #f6f6f6;
}
.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 {
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;
background-color: #e9e9e9;
margin: 2.083vw 0;
}
.eduConbox {
display: flex;
flex-wrap: wrap;
margin-bottom: 2.604vw;
.itemBox {
width: 20vw;
height: 18.437vw;
background-color: #ff0;
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;
}
</style>
\ No newline at end of file
src/pages/index.vue
View file @ 4607f6f3
<template> <template>
<div class="jiahe"> <div class="jiahe">
<div class="jnavs absolute-top-left"> <Header :scorllNum="pageScroll" />
<div class="row items-center full-height"> <!-- 第一部分 -->
<div class="col"> <div class="relative-position banner-box" id="elone">
<img style="height:61px" src="../assets/images/logo.png" />
</div>
<div class="col">
<q-tabs
v-model="tab"
class="text-dark"
active-color="dark"
align="justify"
narrow-indicator
dense
>
<q-tab name="home" label="甲鹤教育" content-class="items-nav" />
<q-tab name="japan" label="日语培训" content-class="items-nav" />
<q-tab name="liuxue" 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="about" label="关于我们" content-class="items-nav" />
<q-tab name="join" label="加入我们" content-class="items-nav" />
</q-tabs>
</div>
</div>
</div>
<div class="relative-position banner-box">
<div class="absolute-top-left fit bg-dark"> <div class="absolute-top-left fit bg-dark">
<q-carousel <q-carousel
v-model="slide" v-model="slide"
swipeable swipeable
animated animated
navigation-position="right" navigation-position="right"
navigation navigation
height="100%" height="100%"
infinite autoplay
infinite
control-type="outline"
>
<q-carousel-slide
name="first"
img-src="../assets/images/index/banner_bg.png"
> >
<q-carousel-slide name="first" img-src="../assets/images/banner.png"/> <div class="con1"><span class="jh">甲鹤-</span>您身边的日语</div>
<div class="con2">
这里给一点小文字介绍什么的最好，这里给一点小文字介绍什么的最好，这里给一点
小文字介绍什么的最好。
</div>
<div class="con3"></div>
<div class="btn" @click="seeDetail">查看详情</div>
<q-img
src="../assets/images/index/female.png"
spinner-color="white"
class="female"
/>
</q-carousel-slide>
<!-- <q-carousel-slide name="first3" img-src="https://cdn.quasar.dev/img/mountains.jpg"/> -->
</q-carousel> </q-carousel>
</div> </div>
</div> </div>
<!-- 第二部分 日语培训-->
<div class="secondbox">
<div class="absolute-top-left subSecondbox">
<q-img
src="../assets/images/index/class_icon.png"
spinner-color="white"
class="class_icon"
/>
<div class="classiconBox">
<div class="classItem">
<q-img
src="../assets/images/index/class_icon1.png"
spinner-color="white"
class="class_icon2"
/>
<div class="class_title">日标基础课</div>
<div class="class_dec">
要是能有一些日标基础课程的小讲解就很好
了，能丰富我们的页面要是能有一些 日标基础课程的小讲解就
</div>
<q-img
src="../assets/images/index/class_icon6.png"
spinner-color="white"
class="class_icon2"
/>
</div>
<div class="classItem">
<q-img
src="../assets/images/index/class_icon2.png"
spinner-color="white"
class="class_icon2"
/>
<div class="class_title">日标基础课</div>
<div class="class_dec">
要是能有一些日标基础课程的小讲解就很好
了，能丰富我们的页面要是能有一些 日标基础课程的小讲解就
</div>
<q-img
src="../assets/images/index/class_icon7.png"
spinner-color="white"
class="class_icon2"
/>
</div>
<div class="classItem">
<q-img
src="../assets/images/index/class_icon3.png"
spinner-color="white"
class="class_icon2"
/>
<div class="class_title">日标基础课</div>
<div class="class_dec">
要是能有一些日标基础课程的小讲解就很好
了，能丰富我们的页面要是能有一些 日标基础课程的小讲解就
</div>
<q-img
src="../assets/images/index/class_icon8.png"
spinner-color="white"
class="class_icon2"
/>
</div>
<div class="classItem">
<q-img
src="../assets/images/index/class_icon4.png"
spinner-color="white"
class="class_icon2"
/>
<div class="class_title">日标基础课</div>
<div class="class_dec">
要是能有一些日标基础课程的小讲解就很好
了，能丰富我们的页面要是能有一些 日标基础课程的小讲解就
</div>
<q-img
src="../assets/images/index/class_icon9.png"
spinner-color="white"
class="class_icon2"
/>
</div>
<div class="classItem">
<q-img
src="../assets/images/index/class_icon5.png"
spinner-color="white"
class="class_icon2"
/>
<div class="class_title">日标基础课</div>
<div class="class_dec">
要是能有一些日标基础课程的小讲解就很好
了，能丰富我们的页面要是能有一些 日标基础课程的小讲解就
</div>
<q-img
src="../assets/images/index/class_icon10.png"
spinner-color="white"
class="class_icon2"
/>
</div>
</div>
</div>
</div>
<!-- 第三部分 留学服务-->
<div class="threebox">
<div class="absolute-top-left subThreeBox">
<q-img
src="../assets/images/index/study_serve.png"
spinner-color="white"
class="class_icon3"
/>
<div class="threeItem">
<div class="outside">
<div class="inner">
<animate-number
from="1"
:to="schoolResource"
duration="2000"
easing="easeOutQuad"
></animate-number>
+
</div>
</div>
<div class="itemName">本科院校资源</div>
</div>
<div class="threeItem threeItem1">
<div class="itemIconBox"></div>
<!-- <q-img
src="../assets/images/index/x.png"
spinner-color="white"
class="x_icon3"
/> -->
</div>
<div class="threeItem">
<div class="outside">
<div class="inner">
<animate-number
from="1"
:to="major"
duration="2000"
easing="easeOutQuad"
ref="myNum"
></animate-number>
+
</div>
</div>
<div class="itemName">可选专业</div>
</div>
<div class="threeItem threeItem1">
<div class="outside">
<div class="inner">
<animate-number
from="1"
:to="servePeopleNum"
duration="2000"
easing="easeOutQuad"
></animate-number>
+
</div>
</div>
<div class="itemName">服务人数</div>
</div>
</div>
</div>
<!-- 第四部分 就业服务-->
<div class="fourbox">
<div class="absolute-top-left subFourBox">
<q-img
src="../assets/images/index/work_serve1.png"
spinner-color="white"
class="class_icon4 class_icon4_1"
/>
<q-img
src="../assets/images/index/work_serve2.png"
spinner-color="white"
class="class_icon4 class_icon4_2"
/>
<div class="workItemBox workItemBox_1">
<q-img
src=""
class="class_icon4_all"
/>
<div class="workType">酒店</div>
</div>
<div class="workItemBox workItemBox_2">
<q-img
src=""
class="class_icon4_all"
/>
<div class="workType">餐厅</div>
</div>
<div class="workItemBox workItemBox_3">
<q-img
src=""
class="class_icon4_all"
/>
<div class="workType">IT</div>
</div>
<div class="workItemBox workItemBox_4">
<q-img
src=""
class="class_icon4_all"
/>
<div class="workType">康养</div>
</div>
</div>
</div>
<!-- 第五部分 董事长-->
<div class="fivebox">
<div class="absolute-top-left subFiveBox">
<q-img
src="../assets/images/index/chairman.png"
spinner-color="white"
class="class_icon5"
/>
<div class="chairman_img"></div>
<div class="chairman_des"></div>
</div>
</div>
<!-- 底部 -->
<Footer />
</div> </div>
</template> </template>
<script> <script>
import Header from "../components/header/header";
import Footer from "../components/footer/footer";
export default { export default {
name: 'PageIndex', name: "PageIndex",
components: {
Header,
Footer,
},
data() { data() {
return { return {
slide:"first", slide: "first",
tab:"home" pageScroll: 0,
activeIdx: 1,
schoolResource: 100, //本科院校资源
major: 300, //可选专业
servePeopleNum: 300, //服务人数
};
},
watch: {
},
methods: {
// 滚动条高度
handleScroll() {
this.pageScroll =
document.documentElement.scrollTop || document.body.scrollTop;
// console.log(this.pageScroll);
// var el = document.getElementById("elone");
// el.scrollIntoView();
},
//第三部分递增效果
startAnimate() {
// this.$refs.myNum.start()
},
seeDetail(){
this.$router.push("/secondClassroom")
} }
}, },
} mounted() {
// threeAdd(this.schoolResource,"schoolResource")
// threeAdd(this.major,"major")
// threeAdd(this.servePeopleNum,"servePeopleNum")
window.addEventListener("scroll", this.handleScroll);
},
//销毁,否则跳到别的路由还是会出现
beforeDestroy() {
window.removeEventListener("scroll", this.handleScroll);
this.pageScroll = 0;
},
};
</script> </script>
<style> <style lang="scss">
.jiahe{ // @mixin width ($width) {
height:100vh // width: calc(($width / 1920) * 100%);
// }
.jiahe {
height: 100vh;
position: relative;
}
.banner-box {
width: 100%;
padding-top: 57.39%;
}
.con1 {
width: calc(845 / 1920 * 100%);
white-space: nowrap;
// font-size: 100px;
font-size: 5.208vw;
color: #111111;
position: absolute;
left: calc(196 / 1920 * 100%);
top: calc(374 / 1080 * 100%);
.jh {
font-family: "pingfang-b" !important;
}
}
.con2 {
width: calc(739 / 1920 * 100%);
// font-size: 20px !important;
font-size: 1.041vw;
color: #111111;
position: absolute;
left: calc(196 / 1920 * 100%);
top: calc(527 / 1080 * 100%);
}
.con3 {
width: calc(596 / 1920 * 100%);
height: 1px;
background-color: #111111ff;
position: absolute;
left: calc(196 / 1920 * 100%);
top: calc(645 / 1080 * 100%);
}
.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;
position: absolute;
left: calc(196 / 1920 * 100%);
top: calc(726 / 1080 * 100%);
cursor: pointer;
}
.female {
width: calc(786 / 1920 * 100%);
// @include width(786);
height: auto;
position: absolute;
right: 0;
top: calc(263 / 1080 * 100%);
}
.secondbox {
width: 100%;
padding-top: calc(1080 / 1920 * 100%);
position: relative;
.subSecondbox {
width: 100%;
height: 100%;
padding-top: calc(101 / 1920 * 100%);
.class_icon {
width: calc(740 / 1920 * 100%);
// height: calc(302 / 1080 * 100%);
height: auto;
margin-left: calc(590 / 1920 * 100%);
}
.classiconBox {
width: 100%;
// height: calc(361 / 1080 * 100%);
padding: 0 calc(160 / 1920 * 100%);
margin-top: calc(123 / 1920 * 100%);
display: flex;
align-items: center;
justify-content: space-between;
overflow-x: auto;
overflow-y: hidden;
.classItem {
width: calc(266 / 1920 * 100%);
height: 100%;
// background-color: #000;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: space-between;
.class_icon2 {
width: 4.166vw;
height: auto;
cursor: pointer;
}
.class_title {
width: 100%;
text-align: center;
font-size: 0.937vw;
color: #111111;
margin-top: 1.77vw;
margin-bottom: 2.083vw;
}
.class_dec {
width: 100%;
height: 3.645vw;
overflow: hidden;
text-align: center;
font-size: 0.729vw;
color: #999999;
margin-bottom: 2.083vw;
}
}
}
}
} }
.jiahe .banner-box{ .threebox {
width:100%;padding-top:57.39% width: 100%;
padding-top: calc(1080 / 1920 * 100%);
position: relative;
z-index: 1 !important;
.subThreeBox {
width: 100%;
height: 100%;
display: flex;
.class_icon3 {
width: calc(459 / 1920 * 100%);
height: auto;
position: absolute;
top: calc(116 / 1080 * 100%);
left: calc(690 / 1920 * 100%);
// left: 50%;
// transform: translateX(-50%);
}
.threeItem {
width: 25%;
height: 100%;
background-color: #fff;
// background-color: #333;
color: #000;
.outside {
width: 12.656vw;
height: 13.333vw;
border: 4px solid #ffffff;
display: flex;
justify-content: center;
align-items: center;
margin: 19.531vw auto 3.75vw;
.inner {
width: 10.52vw;
height: 11.093vw;
background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
font-size: 3.125vw;
font-family: "pingfang-b" !important;
color: #888888;
}
}
.itemName {
text-align: center;
font-size: 1.458vw;
font-family: "pingfang-b" !important;
color: #ffffff;
}
.itemIconBox {
width: 23.679vw;
height: 34.114vw;
background-image: url("../assets/images/index/x.png");
background-repeat: no-repeat;
background-size: contain;
margin: 15.989vw auto 0;
}
}
.threeItem1 {
background-color: #222 !important;
}
}
} }
.jiahe .jnavs{ .fourbox {
margin-top:61px; width: 100%;
height: 61px; padding-top: calc(2377 / 1920 * 100%);
z-index: 1; position: relative;
left:58px; .subFourBox {
right: 58px; width: 100%;
height: 100%;
background-image: url("../assets/images/index/work_serve_bg.png");
background-repeat: no-repeat;
.class_icon4 {
width: calc(675 / 1920 * 100%);
height: auto;
}
.class_icon4_1 {
position: absolute;
top: 8.229vw;
right: 8.333vw;
}
.class_icon4_2 {
position: absolute;
bottom: 8.229vw;
left: 8.333vw;
}
.workItemBox {
width: 26.666vw;
height: 46.562vw;
position: absolute;
.class_icon4_all {
width: 26.666vw;
height: 39.062vw;
background-color: #eee;
}
.workType {
width: 26.666vw;
height: 7.343vw;
font-size: 2.083vw;
font-family: "pingfang-b" !important;
color: #111111;
display: flex;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
}
}
.workItemBox_1 {
top: 8.802vw;
left: 8.489vw;
z-index: 1;
}
.workItemBox_2 {
top: 19.635vw;
left: 27.083vw;
z-index: 4;
}
.workItemBox_3 {
top: 48.541vw;
left: 46.25vw;
z-index: 3;
}
.workItemBox_4 {
top: 65.572vw;
left: 64.843vw;
z-index: 2;
}
}
} }
.jiahe .jnavs .items-nav .q-tab__label{ .fivebox {
font-size: 16px !important; width: 100%;
font-family: 'pingfang-b' !important; padding-top: calc(1080 / 1920 * 100%);
position: relative;
.subFiveBox {
width: 100%;
height: 100%;
background-image: url("../assets/images/index/chairman_bg.png");
background-repeat: no-repeat;
.class_icon5 {
width: calc(350 / 1920 * 100%);
height: auto;
position: absolute;
top: 10.937vw;
left: 41.354vw;
}
.chairman_img {
width: calc(700 / 1920 * 100%);
height: 100%;
background-color: #eee;
}
// .chairman_des{
// width: calc(350 / 1920 * 100%);
// height: auto;
// position: absolute;
// top: 10.937vw;
// left: 41.354vw;
// }
}
} }
// 隐藏滚动条
// ::-webkit-scrollbar {
// width: 0 !important;
// }
// ::-webkit-scrollbar {
// width: 0 !important;height: 0;
// }
</style> </style>
\ No newline at end of file
src/router/routes.js
View file @ 4607f6f3
...@@ -2,9 +2,11 @@ ...@@ -2,9 +2,11 @@
const routes = [ const routes = [
{ {
path: '/', path: '/',
redirect: '/index',
component: () => import('layouts/MainLayout.vue'), component: () => import('layouts/MainLayout.vue'),
children: [ children: [
{ path: '', component: () => import('pages/Index.vue') } { path: '/index', component: () => import('pages/Index.vue') },
{ path: '/JapaneseTrain', component: () => import('src/pages/JapaneseTrain.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