Skip to content

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

Merge remote-tracking branch 'origin/master'

上级 281729ee 6aced96c
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 339 行增加 和 5 行删除
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/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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论