Skip to content

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

Merge remote-tracking branch 'origin/master'

上级 281729ee 6aced96c
隐藏空白字符变更
内嵌 并排
正在显示 包含 601 行增加 和 151 行删除
src/modules/home/components/Brand.vue
浏览文件 @ fb73a9e8
......@@ -3,12 +3,14 @@ import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation } from 'swiper'
import 'swiper/css'
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' }]
</script>
<template>
<section class="section">
<section class="section" v-if="!mobile">
<div class="section-title">
<div class="tit_img">
<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
</SwiperSlide>
</Swiper>
</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>
<style lang="scss" scoped>
......@@ -60,4 +68,23 @@ const list = [{ url: 'https://webapp-pub.ezijing.com/project_online/fi/brand.png
margin: 0 auto;
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>
src/modules/home/components/Contact.vue
浏览文件 @ fb73a9e8
<script lang="ts" setup>
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
</script>
<template>
<div class="main" id="contact">
<div class="main" id="contact" v-if="!mobile">
<div class="con_tit">
<div class="tit_img">
<img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" />
......@@ -24,6 +28,27 @@
</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>
<style lang="scss" scoped>
......@@ -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>
src/modules/home/components/Course.vue
浏览文件 @ fb73a9e8
<script setup>
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
const list = [
{
img: 'https://webapp-pub.ezijing.com/project_online/fi/course1.png',
......@@ -22,7 +25,7 @@ const list = [
</script>
<template>
<section class="section">
<section class="section" v-if="!mobile">
<div class="section-title">
<div class="tit_img">
<img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" />
......@@ -46,6 +49,40 @@ const list = [
</div>
<!-- <p class="more">查看更多案例</p> -->
</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>
<style lang="scss" scoped>
......@@ -125,4 +162,63 @@ const list = [
color: #999;
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>
src/modules/home/components/Knowledge.vue
浏览文件 @ fb73a9e8
<script setup lang="ts">
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
const knowList: Array<{
img: string
desc: string
......@@ -15,13 +18,36 @@ const knowList: Array<{
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) => {
window.open(item.href)
}
</script>
<template>
<div class="main">
<div class="main" v-if="!mobile">
<div class="main_con">
<div class="con_top">
<a href="https://mp.weixin.qq.com/s/5VCaj9j6ljd1FyVOSG08Cg">
......@@ -37,6 +63,12 @@ const handleOpen = (item: any) => {
<!-- <div class="con_more">查看更多</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>
<style lang="scss" scoped>
......@@ -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>
src/modules/home/components/ProjectSystem.vue
浏览文件 @ fb73a9e8
......@@ -2,114 +2,162 @@
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
const authList: Array<{ img: string; tit: string; list: any }> = [
{
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab1_1.png',
tit: '资产分析规划师(一级/二级)/ PAAP(I/II)',
list: [
{
tit: '学员属性',
desc: '包括但并不仅限于金融保险企业绩优营销员'
},
{
tit: '入学模式',
desc: '基于金融保险企业专属激励方案招生。'
}
]
},
{
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab1_2.png',
tit: '高级资产分析管理师 / PAAM',
list: [
{
tit: '学员属性',
desc: '金融保险企业精英代理人、团队管理者'
},
{
tit: '入学模式',
desc: '基于金融保险企业特别奖励、专属激励方案招生。'
}
]
},
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[] = [
{
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab1_3.png',
tit: '公司金融管理师（CFM）',
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: [
{
tit: '学员属性',
desc: '公司金融管理师（CFM）'
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)',
list: [
{
tit: '学员属性',
desc: '包括但并不仅限于金融保险企业绩优营销员'
},
{
tit: '入学模式',
desc: '基于金融保险企业专属激励方案招生。'
}
]
},
{
tit: '入学模式',
desc: 'CFM报名系统提交，自动审核通过，即可报名。'
}
]
}
]
const standardList: Array<{ img: string; tit: string; list: any }> = [
{
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab2_1.png',
tit: '金融保险高级经理人班',
list: [
{
tit: '学员属性',
desc: '金融企业及保险公司各层级内勤管理者、外勤总监及区域总经理'
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',
list: [
{
tit: '学员属性',
desc: '金融保险企业精英代理人、团队管理者'
},
{
tit: '入学模式',
desc: '基于金融保险企业特别奖励、专属激励方案招生。'
}
]
},
{
tit: '入学模式',
desc: '基于金融保险企业经理人特别奖励方案招生。'
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）',
list: [
{
tit: '学员属性',
desc: '公司金融管理师（CFM）'
},
{
tit: '入学模式',
desc: 'CFM报名系统提交，自动审核通过，即可报名。'
}
]
}
]
},
{
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab2_2.png',
tit: '金融保险董事长总裁班',
list: [
{
tit: '学员属性',
desc: '社会企业、保险中介企业、保险门店和独立代理人工作室董监高人士'
},
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: [
{
tit: '入学模式',
desc: '以高管进修班形式讲授“版权课程”。向社会和企业高管教授与传承“格与质”、“道”与“术”、“欲与渔”的经营管理品格与能力。后期通过教学深度，逐步演变为制式任职资格岗位进修班。'
}
]
}
]
const universalList: Array<{ img: string; tit: string; list: any }> = [
{
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab3_1.png',
tit: '私人财富风险管理顾问 / PRP',
list: [
{
tit: '学员属性',
desc: '金融保险内外勤所有从业人员及服务于行业的相关人员'
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: '金融保险高级经理人班',
list: [
{
tit: '学员属性',
desc: '金融企业及保险公司各层级内勤管理者、外勤总监及区域总经理'
},
{
tit: '入学模式',
desc: '基于金融保险企业经理人特别奖励方案招生。'
}
]
},
{
tit: '入学模式',
desc: 'PRP报名系统提交，自动审核通过，即可报名。'
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: '金融保险董事长总裁班',
list: [
{
tit: '学员属性',
desc: '社会企业、保险中介企业、保险门店和独立代理人工作室董监高人士'
},
{
tit: '入学模式',
desc: '以高管进修班形式讲授“版权课程”。向社会和企业高管教授与传承“格与质”、“道”与“术”、“欲与渔”的经营管理品格与能力。后期通过教学深度，逐步演变为制式任职资格岗位进修班。'
}
]
}
]
},
{
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab3_2.png',
tit: '紫荆卓越保险理财规划师养成计划100天',
list: [
{
tit: '学员属性',
desc: '国内在职保险营销员'
},
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: [
{
tit: '入学模式',
desc: '面向紫荆教育合作保险企业的新职员，组建特别组训团队授课。依照学员职位层级，具体分为：大中型保险企业新人班（学制：100天）、中小型寿险公司新人班、主管班、经理班。'
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',
list: [
{
tit: '学员属性',
desc: '金融保险内外勤所有从业人员及服务于行业的相关人员'
},
{
tit: '入学模式',
desc: 'PRP报名系统提交，自动审核通过，即可报名。'
}
]
},
{
tit: '学习内容',
desc: '行业必备的专业知识、经营管理、服务技能、可持续发展理念，以及终身学习思维。'
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天',
list: [
{
tit: '学员属性',
desc: '国内在职保险营销员'
},
{
tit: '入学模式',
desc: '面向紫荆教育合作保险企业的新职员，组建特别组训团队授课。依照学员职位层级，具体分为：大中型保险企业新人班（学制：100天）、中小型寿险公司新人班、主管班、经理班。'
},
{
tit: '学习内容',
desc: '行业必备的专业知识、经营管理、服务技能、可持续发展理念，以及终身学习思维。'
}
]
}
]
}
]
let tabIndex = $ref(0)
const tab = function (e: number) {
tabIndex = e
}
</script>
<template>
......@@ -125,17 +173,17 @@ const universalList: Array<{ img: string; tit: string; list: any }> = [
</div>
<div class="con_content">
<el-tabs class="my-tabs">
<el-tab-pane>
<el-tab-pane v-for="fItem in list" :key="fItem.btnIcon">
<template #label>
<img src="https://webapp-pub.ezijing.com/project_online/fi/tab1.png" class="icon" />
<img src="https://webapp-pub.ezijing.com/project_online/fi/tab1_hover.png" class="active-icon" />
<p>行业认证类</p>
<img :src="fItem.btnIcon" class="icon" />
<img :src="fItem.btnIconActive" class="active-icon" />
<p>{{ fItem.btnName }}</p>
</template>
<div class="content_tit">
联合业内领袖、资深专家学者，帮助相关从业者快速建立岗位相关的理论知识体系，加强实训教学，提高实训能力，协助从业者掌握、提升岗位所需的各种实务技能。
{{ fItem.h1 }}
</div>
<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" />
<div class="list_tit">{{ item.tit }}</div>
<ul>
......@@ -147,69 +195,48 @@ const universalList: Array<{ img: string; tit: string; list: any }> = [
</div>
</div>
</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>
</div>
</div>
<div class="h5-system" v-else>
<h1>全系列产品体系</h1>
<div class="tab-btn">
<div class="item">
<div class="icon"></div>
<h2>行业认证类</h2>
</div>
<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>
<h2>行业标准类</h2>
</div>
<div class="item">
<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="i"></div>
<div class="r-txt">
<div class="name">学员属性</div>
<div class="value">包括但并不仅限于金融保险企业绩优营包括但并不仅限于金融保险企业绩优营销员销员</div>
</div>
</div>
</div>
<!-- <div class="more">查看更多课程</div> -->
</div>
</template>
</div>
</template>
......@@ -358,7 +385,73 @@ const universalList: Array<{ img: string; tit: string; list: any }> = [
}
}
.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 {
font-size: 0.32rem;
font-weight: bold;
......@@ -367,13 +460,36 @@ const universalList: Array<{ img: string; tit: string; list: any }> = [
.tab-btn {
padding-top: 0.4rem;
display: flex;
justify-content: space-between;
justify-content: space-around;
.item {
.icon {
width: 0.68rem;
height: 0.68rem;
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) {
.icon {
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'
import { Navigation } from 'swiper'
import 'swiper/css'
import 'swiper/css/navigation'
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
const swiper1 = ref(null)
const list = [
......@@ -116,7 +118,7 @@ function next(swiper) {
</script>
<template>
<section class="section" id="teacher">
<section class="section" id="teacher" v-if="!mobile">
<div class="section__inner">
<div class="section-title">
<div class="tit_img">
......@@ -171,6 +173,32 @@ function next(swiper) {
</div>
</div>
</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>
<style lang="scss" scoped>
......@@ -305,4 +333,69 @@ function next(swiper) {
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>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论