Skip to content

P
project-online-fi
提交 fb73a9e8 authored 作者: matian's avatar matian
浏览文件
操作

Merge remote-tracking branch 'origin/master'

上级 281729ee 6aced96c
显示空白字符变更
内嵌 并排
正在显示 包含 519 行增加 和 69 行删除
src/modules/home/components/Brand.vue
浏览文件 @ fb73a9e8
...@@ -3,12 +3,14 @@ import { Swiper, SwiperSlide } from 'swiper/vue' ...@@ -3,12 +3,14 @@ import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation } from 'swiper' import { Navigation } from 'swiper'
import 'swiper/css' import 'swiper/css'
import 'swiper/css/navigation' import 'swiper/css/navigation'
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
const list = [{ url: 'https://webapp-pub.ezijing.com/project_online/fi/brand.png' }] const list = [{ url: 'https://webapp-pub.ezijing.com/project_online/fi/brand.png' }]
</script> </script>
<template> <template>
<section class="section"> <section class="section" v-if="!mobile">
<div class="section-title"> <div class="section-title">
<div class="tit_img"> <div class="tit_img">
<img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" /> <img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" />
...@@ -24,6 +26,12 @@ const list = [{ url: 'https://webapp-pub.ezijing.com/project_online/fi/brand.png ...@@ -24,6 +26,12 @@ const list = [{ url: 'https://webapp-pub.ezijing.com/project_online/fi/brand.png
</SwiperSlide> </SwiperSlide>
</Swiper> </Swiper>
</section> </section>
<div class="h5-brand" v-else>
<h1>合作机构</h1>
<div class="content">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/cooperate.png" />
</div>
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -60,4 +68,23 @@ const list = [{ url: 'https://webapp-pub.ezijing.com/project_online/fi/brand.png ...@@ -60,4 +68,23 @@ const list = [{ url: 'https://webapp-pub.ezijing.com/project_online/fi/brand.png
margin: 0 auto; margin: 0 auto;
max-width: 1200px; max-width: 1200px;
} }
.h5-brand {
padding: 0 0.3rem;
h1 {
font-size: 0.32rem;
font-weight: bold;
line-height: 100%;
color: #333333;
padding: 0.3rem 0;
}
.content {
background: #ffffff;
border-radius: 0.12rem;
padding: 0.2rem;
img {
width: 100%;
display: block;
}
}
}
</style> </style>
src/modules/home/components/Contact.vue
浏览文件 @ fb73a9e8
<script lang="ts" setup>
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
</script>
<template> <template>
<div class="main" id="contact"> <div class="main" id="contact" v-if="!mobile">
<div class="con_tit"> <div class="con_tit">
<div class="tit_img"> <div class="tit_img">
<img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" /> <img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" />
...@@ -24,6 +28,27 @@ ...@@ -24,6 +28,27 @@
</div> </div>
</div> </div>
</div> </div>
<div class="h5-main" v-else>
<h1>预约报名</h1>
<div class="content">
<div class="item">
<div class="n">PRP秘书处：</div>
<div class="v">13263110117(同微信)</div>
</div>
<div class="item">
<div class="n">标准产品委员会: </div>
<div class="v">13269964629(同微信)</div>
</div>
<div class="item">
<div class="n">PAA秘书处：</div>
<div class="v">13263110169(同微信)</div>
</div>
<div class="item">
<div class="n">定制专属产品办公室：</div>
<div class="v">010_62799539</div>
</div>
</div>
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -62,4 +87,37 @@ ...@@ -62,4 +87,37 @@
} }
} }
} }
.h5-main {
padding: .3rem;
h1 {
font-size: 0.32rem;
font-weight: bold;
line-height: 100%;
color: #333333;
padding-bottom: .3rem;
}
.content {
padding: 0.56rem 0.48rem .26rem;
box-sizing: border-box;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/contact-bg.png);
background-size: cover;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
border-radius: 0.12rem;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.item{
margin-bottom: .3rem;
.n{
font-size: .24rem;
color: rgba(102, 102, 102, 1);
}
.v{
font-size: .24rem;
color: rgba(51, 51, 51, 1);
margin-top: .1rem;
}
}
}
}
</style> </style>
src/modules/home/components/Course.vue
浏览文件 @ fb73a9e8
<script setup> <script setup>
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
const list = [ const list = [
{ {
img: 'https://webapp-pub.ezijing.com/project_online/fi/course1.png', img: 'https://webapp-pub.ezijing.com/project_online/fi/course1.png',
...@@ -22,7 +25,7 @@ const list = [ ...@@ -22,7 +25,7 @@ const list = [
</script> </script>
<template> <template>
<section class="section"> <section class="section" v-if="!mobile">
<div class="section-title"> <div class="section-title">
<div class="tit_img"> <div class="tit_img">
<img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" /> <img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" />
...@@ -46,6 +49,40 @@ const list = [ ...@@ -46,6 +49,40 @@ const list = [
</div> </div>
<!-- <p class="more">查看更多案例</p> --> <!-- <p class="more">查看更多案例</p> -->
</section> </section>
<div class="h5-course" v-else>
<h1>定制专属类课程</h1>
<div class="content">
<div class="top">
针对不同人才类型的培养需求，采用“线上+线下”的教学模式，并提供定制化专业服务与个性化的在线学习解决方案，帮助从业者提升工作所需的业务技能，强化综合竞争力。
</div>
<div class="content-cards">
<div class="item">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/course-i1.png" />
<div class="line"></div>
<div class="t">教学与教务服务</div>
<div class="t">技术平台支持</div>
</div>
<div class="item">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/course-i2.png" />
<div class="line"></div>
<div class="t">提供业务人才培养性方案</div>
<div class="t">提供管理人才突破性培育</div>
</div>
<div class="item">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/course-i3.png" />
<div class="line"></div>
<div class="t">内部核心人才金融素养培育</div>
<div class="t">全套长期的解决服务方案</div>
</div>
<div class="item">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/course-i4.png" />
<div class="line"></div>
<div class="t">教学与教务服务</div>
<div class="t">技术平台支持</div>
</div>
</div>
</div>
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -125,4 +162,63 @@ const list = [ ...@@ -125,4 +162,63 @@ const list = [
color: #999; color: #999;
text-align: center; text-align: center;
} }
.h5-course {
padding: 0 0.3rem;
h1 {
font-size: 0.32rem;
font-weight: bold;
line-height: 100%;
color: #333333;
padding: 0.4rem 0;
}
.content {
background: rgba(255, 255, 255, 1);
border-radius: 12px;
padding: 0.2rem 0.2rem 0;
.top {
padding: 0.6rem;
box-sizing: border-box;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/course-t-bg.png) center;
background-size: cover;
font-size: 0.24rem;
line-height: 0.4rem;
color: #886426;
border-radius: 0.03rem;
}
.content-cards {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding-bottom: 0.2rem;
.item {
width: 3.15rem;
height: 2.5rem;
border: 1px solid #dddddd;
border-radius: 0.12rem;
padding-top: 0.36rem;
box-sizing: border-box;
margin-top: 0.2rem;
img {
width: 2.2rem;
height: 0.6rem;
display: block;
margin: 0 auto;
}
.line {
margin: 0.25rem auto 0.24rem;
width: 0.78rem;
height: 0.02rem;
background: rgba(170, 25, 65, 1);
}
.t {
font-size: 0.24rem;
line-height: 100%;
color: #414141;
text-align: center;
margin-bottom: 0.15rem;
}
}
}
}
}
</style> </style>
src/modules/home/components/Knowledge.vue
浏览文件 @ fb73a9e8
<script setup lang="ts"> <script setup lang="ts">
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
const knowList: Array<{ const knowList: Array<{
img: string img: string
desc: string desc: string
...@@ -15,13 +18,36 @@ const knowList: Array<{ ...@@ -15,13 +18,36 @@ const knowList: Array<{
href: 'https://mp.weixin.qq.com/s/hvJlV4BsnUhvJszlCQmIOQ' href: 'https://mp.weixin.qq.com/s/hvJlV4BsnUhvJszlCQmIOQ'
} }
] ]
const h5KnowList: Array<{
img: string
desc: string
href: string
}> = [
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/h-knowledge1.png',
desc: '世界读书日来临丨PRP紫荆学友会送福利',
href: 'https://mp.weixin.qq.com/s/5VCaj9j6ljd1FyVOSG08Cg'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/h-knowledge2.png',
desc: '保罗·蒂芙尼博士：当今世界经济—“全球化”是否已走向终结？',
href: 'https://mp.weixin.qq.com/s/VRJFcsleJy1S86dOvRfCsA '
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/h-knowledge3.png',
desc: '由一而千 星火散落将聚燃丨<br/>PRP紫荆学友会欢迎您的加入！',
href: 'https://mp.weixin.qq.com/s/hvJlV4BsnUhvJszlCQmIOQ'
}
]
const handleOpen = (item: any) => { const handleOpen = (item: any) => {
window.open(item.href) window.open(item.href)
} }
</script> </script>
<template> <template>
<div class="main"> <div class="main" v-if="!mobile">
<div class="main_con"> <div class="main_con">
<div class="con_top"> <div class="con_top">
<a href="https://mp.weixin.qq.com/s/5VCaj9j6ljd1FyVOSG08Cg"> <a href="https://mp.weixin.qq.com/s/5VCaj9j6ljd1FyVOSG08Cg">
...@@ -37,6 +63,12 @@ const handleOpen = (item: any) => { ...@@ -37,6 +63,12 @@ const handleOpen = (item: any) => {
<!-- <div class="con_more">查看更多</div> --> <!-- <div class="con_more">查看更多</div> -->
</div> </div>
</div> </div>
<div class="h5-main" v-else>
<div class="item" v-for="(item, index) in h5KnowList" :key="index" @click="handleOpen(item)">
<img :src="item.img" />
<div class="text" v-html="item.desc"></div>
</div>
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -104,4 +136,32 @@ const handleOpen = (item: any) => { ...@@ -104,4 +136,32 @@ const handleOpen = (item: any) => {
} }
} }
} }
.h5-main {
padding: 0.4rem 0 0 0.3rem;
display: flex;
overflow-x: scroll;
.item {
min-width: 3.57rem;
height: 4.31rem;
box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.16);
border-radius: 0.12rem;
margin-right: .2rem;
position: relative;
img {
width: 100%;
height: 100%;
display: block;
}
.text {
position: absolute;
top: 3.2rem;
left: 50%;
transform: translateX(-50%);
width: 3.2rem;
font-size: 0.24rem;
line-height: 0.34rem;
color: #ffffff;
}
}
}
</style> </style>
src/modules/home/components/ProjectSystem.vue
浏览文件 @ fb73a9e8
...@@ -2,9 +2,32 @@ ...@@ -2,9 +2,32 @@
import { useDevice } from '@/composables/useDevice' import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice() const { mobile } = useDevice()
const authList: Array<{ img: string; tit: string; list: any }> = [ interface List {
btnName: string
btnIcon: string
btnIconActive: string
h1: string
card: {
img: string
tit: string
h5Img: string
list: {
tit: string
desc: string
}[]
}[]
}
const list: List[] = [
{
btnName: '行业认证类',
btnIcon: 'https://webapp-pub.ezijing.com/project_online/fi/tab1.png',
btnIconActive: 'https://webapp-pub.ezijing.com/project_online/fi/tab1_hover.png',
h1: '联合业内领袖、资深专家学者，帮助相关从业者快速建立岗位相关的理论知识体系，加强实训教学，提高实训能力，协助从业者掌握、提升岗位所需的各种实务技能。',
card: [
{ {
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab1_1.png', img: 'https://webapp-pub.ezijing.com/project_online/fi/tab1_1.png',
h5Img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/system-1-1.png',
tit: '资产分析规划师(一级/二级)/ PAAP(I/II)', tit: '资产分析规划师(一级/二级)/ PAAP(I/II)',
list: [ list: [
{ {
...@@ -19,6 +42,7 @@ const authList: Array<{ img: string; tit: string; list: any }> = [ ...@@ -19,6 +42,7 @@ const authList: Array<{ img: string; tit: string; list: any }> = [
}, },
{ {
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab1_2.png', img: 'https://webapp-pub.ezijing.com/project_online/fi/tab1_2.png',
h5Img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/system-1-2.png',
tit: '高级资产分析管理师 / PAAM', tit: '高级资产分析管理师 / PAAM',
list: [ list: [
{ {
...@@ -33,6 +57,7 @@ const authList: Array<{ img: string; tit: string; list: any }> = [ ...@@ -33,6 +57,7 @@ const authList: Array<{ img: string; tit: string; list: any }> = [
}, },
{ {
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab1_3.png', img: 'https://webapp-pub.ezijing.com/project_online/fi/tab1_3.png',
h5Img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/system-1-3.png',
tit: '公司金融管理师（CFM）', tit: '公司金融管理师（CFM）',
list: [ list: [
{ {
...@@ -45,10 +70,17 @@ const authList: Array<{ img: string; tit: string; list: any }> = [ ...@@ -45,10 +70,17 @@ const authList: Array<{ img: string; tit: string; list: any }> = [
} }
] ]
} }
] ]
const standardList: Array<{ img: string; tit: string; list: any }> = [ },
{
btnName: '行业标准类',
btnIcon: 'https://webapp-pub.ezijing.com/project_online/fi/tab2.png',
btnIconActive: 'https://webapp-pub.ezijing.com/project_online/fi/tab2_hover.png',
h1: '联合业内专家、国内外权威产业研究机构，共同开发教学课程，为企业高层人士提供中国标准化的任职能力及领导力培训。',
card: [
{ {
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab2_1.png', img: 'https://webapp-pub.ezijing.com/project_online/fi/tab2_1.png',
h5Img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/system-2-1.png',
tit: '金融保险高级经理人班', tit: '金融保险高级经理人班',
list: [ list: [
{ {
...@@ -63,6 +95,7 @@ const standardList: Array<{ img: string; tit: string; list: any }> = [ ...@@ -63,6 +95,7 @@ const standardList: Array<{ img: string; tit: string; list: any }> = [
}, },
{ {
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab2_2.png', img: 'https://webapp-pub.ezijing.com/project_online/fi/tab2_2.png',
h5Img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/system-2-2.png',
tit: '金融保险董事长总裁班', tit: '金融保险董事长总裁班',
list: [ list: [
{ {
...@@ -75,10 +108,17 @@ const standardList: Array<{ img: string; tit: string; list: any }> = [ ...@@ -75,10 +108,17 @@ const standardList: Array<{ img: string; tit: string; list: any }> = [
} }
] ]
} }
] ]
const universalList: Array<{ img: string; tit: string; list: any }> = [ },
{
btnName: '行业普及类',
btnIcon: 'https://webapp-pub.ezijing.com/project_online/fi/tab3.png',
btnIconActive: 'https://webapp-pub.ezijing.com/project_online/fi/tab3_hover.png',
h1: '联合业内领袖、资深专家学者，帮助相关从业者快速建立岗位相关的理论知识体系，加强实训教学，提高实训能力，协助从业者掌握、提升岗位所需的各种实务技能。',
card: [
{ {
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab3_1.png', img: 'https://webapp-pub.ezijing.com/project_online/fi/tab3_1.png',
h5Img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/system-3-1.png',
tit: '私人财富风险管理顾问 / PRP', tit: '私人财富风险管理顾问 / PRP',
list: [ list: [
{ {
...@@ -93,6 +133,7 @@ const universalList: Array<{ img: string; tit: string; list: any }> = [ ...@@ -93,6 +133,7 @@ const universalList: Array<{ img: string; tit: string; list: any }> = [
}, },
{ {
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab3_2.png', img: 'https://webapp-pub.ezijing.com/project_online/fi/tab3_2.png',
h5Img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/system-3-2.png',
tit: '紫荆卓越保险理财规划师养成计划100天', tit: '紫荆卓越保险理财规划师养成计划100天',
list: [ list: [
{ {
...@@ -109,7 +150,14 @@ const universalList: Array<{ img: string; tit: string; list: any }> = [ ...@@ -109,7 +150,14 @@ const universalList: Array<{ img: string; tit: string; list: any }> = [
} }
] ]
} }
]
}
] ]
let tabIndex = $ref(0)
const tab = function (e: number) {
tabIndex = e
}
</script> </script>
<template> <template>
...@@ -125,17 +173,17 @@ const universalList: Array<{ img: string; tit: string; list: any }> = [ ...@@ -125,17 +173,17 @@ const universalList: Array<{ img: string; tit: string; list: any }> = [
</div> </div>
<div class="con_content"> <div class="con_content">
<el-tabs class="my-tabs"> <el-tabs class="my-tabs">
<el-tab-pane> <el-tab-pane v-for="fItem in list" :key="fItem.btnIcon">
<template #label> <template #label>
<img src="https://webapp-pub.ezijing.com/project_online/fi/tab1.png" class="icon" /> <img :src="fItem.btnIcon" class="icon" />
<img src="https://webapp-pub.ezijing.com/project_online/fi/tab1_hover.png" class="active-icon" /> <img :src="fItem.btnIconActive" class="active-icon" />
<p>行业认证类</p> <p>{{ fItem.btnName }}</p>
</template> </template>
<div class="content_tit"> <div class="content_tit">
联合业内领袖、资深专家学者，帮助相关从业者快速建立岗位相关的理论知识体系，加强实训教学，提高实训能力，协助从业者掌握、提升岗位所需的各种实务技能。 {{ fItem.h1 }}
</div> </div>
<div class="content_main"> <div class="content_main">
<div class="main_list" v-for="(item, index) in authList" :key="index"> <div class="main_list" v-for="(item, index) in fItem.card" :key="index">
<img :src="item.img" alt="" class="list_img1" /> <img :src="item.img" alt="" class="list_img1" />
<div class="list_tit">{{ item.tit }}</div> <div class="list_tit">{{ item.tit }}</div>
<ul> <ul>
...@@ -147,69 +195,48 @@ const universalList: Array<{ img: string; tit: string; list: any }> = [ ...@@ -147,69 +195,48 @@ const universalList: Array<{ img: string; tit: string; list: any }> = [
</div> </div>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane>
<template #label>
<img src="https://webapp-pub.ezijing.com/project_online/fi/tab2.png" class="icon" />
<img src="https://webapp-pub.ezijing.com/project_online/fi/tab2_hover.png" class="active-icon" />
<p>行业标准类</p>
</template>
<div class="content_tit">
联合业内专家、国内外权威产业研究机构，共同开发教学课程，为企业高层人士提供中国标准化的任职能力及领导力培训。
</div>
<div class="content_main">
<div class="main_list" v-for="(item, index) in standardList" :key="index">
<img :src="item.img" alt="" class="list_img2" />
<div class="list_tit">{{ item.tit }}</div>
<ul>
<li class="list_desc" v-for="(it, index) in item.list" :key="index">
<div class="desc_tit">{{ it.tit }}</div>
<div class="desc_con">{{ it.desc }}</div>
</li>
</ul>
</div>
</div>
</el-tab-pane>
<el-tab-pane>
<template #label>
<img src="https://webapp-pub.ezijing.com/project_online/fi/tab3.png" class="icon" />
<img src="https://webapp-pub.ezijing.com/project_online/fi/tab3_hover.png" class="active-icon" />
<p>行业普及类</p>
</template>
<div class="content_tit">
联合业内领袖、资深专家学者，帮助相关从业者快速建立岗位相关的理论知识体系，加强实训教学，提高实训能力，协助从业者掌握、提升岗位所需的各种实务技能。
</div>
<div class="content_main">
<div class="main_list" v-for="(item, index) in universalList" :key="index">
<img :src="item.img" alt="" />
<div class="list_tit">{{ item.tit }}</div>
<ul>
<li class="list_desc" v-for="(it, index) in item.list" :key="index">
<div class="desc_tit">{{ it.tit }}</div>
<div class="desc_con">{{ it.desc }}</div>
</li>
</ul>
</div>
</div>
</el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</div> </div>
<div class="h5-system" v-else> <div class="h5-system" v-else>
<h1>全系列产品体系</h1> <h1>全系列产品体系</h1>
<div class="tab-btn"> <div class="tab-btn">
<div class="item"> <div
:class="index === tabIndex ? 'item active' : 'item'"
v-for="(item, index) in list"
:key="index"
@click="tab(index)"
>
<div class="icon"></div> <div class="icon"></div>
<h2>行业认证类</h2> <h2>{{ item.btnName }}</h2>
</div>
</div>
<template v-for="(item, index) in list" :key="index">
<div class="tab-content" v-if="tabIndex === index">
<h3>
{{ item.h1 }}
</h3>
<div class="card" v-for="cItem in item.card" :key="cItem.img">
<img :src="cItem.h5Img" />
<div class="title">{{ cItem.tit }}</div>
<div class="item" v-for="(it, index) in cItem.list" :key="index">
<div class="i"></div>
<div class="r-txt">
<div class="name">{{ it.tit }}</div>
<div class="value">{{ it.desc }}</div>
</div> </div>
<div class="item">
<div class="icon"></div>
<h2>行业标准类</h2>
</div> </div>
<div class="item"> <div class="item">
<div class="icon"></div> <div class="i"></div>
<h2>行业普及类</h2> <div class="r-txt">
<div class="name">学员属性</div>
<div class="value">包括但并不仅限于金融保险企业绩优营包括但并不仅限于金融保险企业绩优营销员销员</div>
</div>
</div> </div>
</div> </div>
<!-- <div class="more">查看更多课程</div> -->
</div>
</template>
</div> </div>
</template> </template>
...@@ -358,7 +385,73 @@ const universalList: Array<{ img: string; tit: string; list: any }> = [ ...@@ -358,7 +385,73 @@ const universalList: Array<{ img: string; tit: string; list: any }> = [
} }
} }
.h5-system { .h5-system {
padding: 0 30px; padding: 0 .3rem;
.tab-content {
background: #fff;
border-radius: 0.12rem;
padding: 0 0.2rem 0.3rem;
margin-top: 0.4rem;
.more {
margin: 0 auto;
width: 2.07rem;
border: 1px solid #c1ab85;
border-radius: 0.06rem;
font-size: 0.24rem;
line-height: 0.5rem;
color: #b79c6d;
text-align: center;
}
h3 {
font-size: 0.24rem;
line-height: 0.42rem;
color: #333333;
padding: 0.4rem 0.1rem 0.1rem;
text-align: center;
font-weight: normal;
}
.card {
background: rgba(255, 255, 255, 1);
box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.1);
border-radius: 0.12rem;
padding: 0.2rem 0.2rem 0.4rem;
margin-bottom: 0.3rem;
img {
width: 100%;
display: block;
}
.title {
font-size: 0.28rem;
line-height: 0.34rem;
color: #aa1941;
margin: 0.26rem 0 0.15rem;
}
.item {
display: flex;
margin-bottom: 0.2rem;
.i {
min-width: 0.11rem;
height: 0.11rem;
background: rgba(193, 171, 133, 1);
margin-right: 8px;
transform: rotate(45deg);
margin-top: 0.1rem;
}
.r-txt {
.name {
font-size: 0.24rem;
line-height: 0.34rem;
color: #333333;
}
.value {
font-size: 0.24rem;
line-height: 0.34rem;
color: #666666;
margin-top: 0.1rem;
}
}
}
}
}
h1 { h1 {
font-size: 0.32rem; font-size: 0.32rem;
font-weight: bold; font-weight: bold;
...@@ -367,13 +460,36 @@ const universalList: Array<{ img: string; tit: string; list: any }> = [ ...@@ -367,13 +460,36 @@ const universalList: Array<{ img: string; tit: string; list: any }> = [
.tab-btn { .tab-btn {
padding-top: 0.4rem; padding-top: 0.4rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-around;
.item { .item {
.icon { .icon {
width: 0.68rem; width: 0.68rem;
height: 0.68rem; height: 0.68rem;
margin: 0 auto; margin: 0 auto;
} }
&.active {
&:nth-child(1) {
.icon {
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/h-product-i1-a.png);
background-size: 100% 100%;
}
}
&:nth-child(2) {
.icon {
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/h-product-i2-a.png);
background-size: 100% 100%;
}
}
&:nth-child(3) {
.icon {
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/h-product-i3-a.png);
background-size: 100% 100%;
}
}
h2 {
color: rgba(170, 25, 65, 1);
}
}
&:nth-child(1) { &:nth-child(1) {
.icon { .icon {
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/h-product-i1.png); background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/h-product-i1.png);
......
src/modules/home/components/Teacher.vue
浏览文件 @ fb73a9e8
...@@ -3,6 +3,8 @@ import { Swiper, SwiperSlide } from 'swiper/vue' ...@@ -3,6 +3,8 @@ import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation } from 'swiper' import { Navigation } from 'swiper'
import 'swiper/css' import 'swiper/css'
import 'swiper/css/navigation' import 'swiper/css/navigation'
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
const swiper1 = ref(null) const swiper1 = ref(null)
const list = [ const list = [
...@@ -116,7 +118,7 @@ function next(swiper) { ...@@ -116,7 +118,7 @@ function next(swiper) {
</script> </script>
<template> <template>
<section class="section" id="teacher"> <section class="section" id="teacher" v-if="!mobile">
<div class="section__inner"> <div class="section__inner">
<div class="section-title"> <div class="section-title">
<div class="tit_img"> <div class="tit_img">
...@@ -171,6 +173,32 @@ function next(swiper) { ...@@ -171,6 +173,32 @@ function next(swiper) {
</div> </div>
</div> </div>
</section> </section>
<section class="h5-teacher" v-else>
<h1>师资团队</h1>
<div class="content">
<h2>清华大学知名教授、博士生导师</h2>
<div class="group">
<div class="item" v-for="(item, index) in list" :key="index">
<img :src="item.avatar" />
<div class="name">{{ item.name }}</div>
<div class="desc" v-for="(cItem, index) in item.children" :key="index">
<div class="icon"></div>
<div class="t">{{ cItem }}</div>
</div>
</div>
</div>
<h2>清控紫荆教育专职名师暨高级实战专家</h2>
<div class="group">
<div class="item" v-for="(item, index) in list2" :key="index">
<div class="name">{{ item.name }}</div>
<div class="desc" v-for="(cItem, index) in item.children" :key="index">
<div class="icon"></div>
<div class="t">{{ cItem }}</div>
</div>
</div>
</div>
</div>
</section>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -305,4 +333,69 @@ function next(swiper) { ...@@ -305,4 +333,69 @@ function next(swiper) {
margin-top: 11px; margin-top: 11px;
} }
} }
.h5-teacher {
padding: 0 0.3rem;
h1 {
font-size: 0.32rem;
font-weight: bold;
line-height: 100%;
color: #333333;
margin: 0.3rem 0;
}
.content {
background: url('https://webapp-pub.ezijing.com/project_online/fi/teacher_bg.jpg');
background-size: cover;
height: 10.21rem;
overflow: hidden;
h2 {
font-size: 0.28rem;
font-weight: bold;
line-height: 100%;
color: #ffffff;
padding: 0.6rem 0 0.4rem;
text-align: center;
}
.group {
display: flex;
overflow-x: scroll;
padding-right: .2rem;
.item {
min-width: 4.1rem;
background: rgba(255, 255, 255, 1);
border-radius: 0.12rem;
padding: 0.43rem 0.22rem;
margin-left: 0.2rem;
img {
width: 1.2rem;
height: 1.2rem;
display: block;
margin: 0 auto;
}
.name {
font-size: 0.28rem;
line-height: 100%;
color: #333333;
padding: 0.1rem 0 0.32rem;
text-align: center;
}
.desc {
display: flex;
.icon {
min-width: 0.1rem;
height: 0.1rem;
background: rgba(193, 171, 133, 1);
margin-right: 8px;
transform: rotate(45deg);
margin-top: 0.1rem;
}
.t {
font-size: 0.24rem;
line-height: 0.34rem;
color: #535353;
}
}
}
}
}
}
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论