Skip to content

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

updates

上级 3a2a3e17
隐藏空白字符变更
内嵌 并排
正在显示 包含 284 行增加 和 105 行删除
data/src/goods/1.js
浏览文件 @ 25bfee40
......@@ -17,8 +17,8 @@ export default [
],
child_ids: ['1-1', '1-2', '1-3', '1-4', '1-5', '1-6', '1-7', '1-8'],
course_card: '知名导师专家',
course_chapter: '56 节课程',
course_total_hour: '80 小时',
course_chapter: '56 ',
course_total_hour: '80',
course_hour: '20课时',
course_id: '7000659282773409792',
class_id: '6998519782265847808'
......@@ -71,8 +71,8 @@ export default [
}
],
course_card: '知名导师专家1',
course_chapter: '56 节课程',
course_total_hour: '80 小时',
course_chapter: '56 ',
course_total_hour: '80',
course_hour: '20课时',
course_id: '7000659282773409792',
class_id: '6998519782265847808'
......@@ -111,8 +111,8 @@ export default [
}
],
course_card: '知名导师专家2',
course_chapter: '56 节课程',
course_total_hour: '80 小时',
course_chapter: '56 ',
course_total_hour: '80',
course_hour: '20课时',
course_id: '6998547457529348096',
class_id: '6998519782265847808'
......@@ -151,8 +151,8 @@ export default [
}
],
course_card: '知名导师专家2',
course_chapter: '56 节课程',
course_total_hour: '80 小时',
course_chapter: '56 ',
course_total_hour: '80',
course_hour: '20课时',
course_id: '6998547457529348096',
class_id: '6998519782265847808'
......@@ -191,8 +191,8 @@ export default [
}
],
course_card: '知名导师专家2',
course_chapter: '56 节课程',
course_total_hour: '80 小时',
course_chapter: '56 ',
course_total_hour: '80',
course_hour: '20课时',
course_id: '6998547457529348096',
class_id: '6998519782265847808'
......@@ -231,8 +231,8 @@ export default [
}
],
course_card: '知名导师专家2',
course_chapter: '56 节课程',
course_total_hour: '80 小时',
course_chapter: '56 ',
course_total_hour: '80',
course_hour: '20课时',
course_id: '6998547457529348096',
class_id: '6998519782265847808'
......@@ -271,8 +271,8 @@ export default [
}
],
course_card: '知名导师专家2',
course_chapter: '56 节课程',
course_total_hour: '80 小时',
course_chapter: '56 ',
course_total_hour: '80',
course_hour: '20课时',
course_id: '6998547457529348096',
class_id: '6998519782265847808'
......@@ -311,8 +311,8 @@ export default [
}
],
course_card: '知名导师专家2',
course_chapter: '56 节课程',
course_total_hour: '80 小时',
course_chapter: '56 ',
course_total_hour: '80',
course_hour: '20课时',
course_id: '6998547457529348096',
class_id: '6998519782265847808'
......@@ -351,8 +351,8 @@ export default [
}
],
course_card: '知名导师专家2',
course_chapter: '56 节课程',
course_total_hour: '80 小时',
course_chapter: '56 ',
course_total_hour: '80',
course_hour: '20课时',
course_id: '6998547457529348096',
class_id: '6998519782265847808'
......
src/main.ts
浏览文件 @ 25bfee40
......@@ -6,7 +6,7 @@ import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { Overlay } from 'vant'
import { Overlay,Tab,Tabs } from 'vant'
// 2. 引入组件样式
import 'vant/lib/index.css';
// 公共css
......@@ -26,6 +26,8 @@ modules({ router })
app.use(createPinia())
app.use(Overlay)
app.use(Tab)
app.use(Tabs)
app.use(router)
app.use(ElementPlus)
......
src/modules/home/components/ProjectSystem.vue
浏览文件 @ 25bfee40
<script lang="ts" setup>
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
const active = ref(0)
const list: Array<{ tit: string; desc: string; img: string }> = [
{
tit: '专业权威',
......@@ -24,7 +27,7 @@ const list: Array<{ tit: string; desc: string; img: string }> = [
</script>
<template>
<div class="main">
<div class="main" v-if="!mobile">
<div class="main_con">
<div class="con_list" v-for="(item, index) in list" :key="index">
<div class="list_left">
......@@ -36,67 +39,119 @@ const list: Array<{ tit: string; desc: string; img: string }> = [
</div>
</div>
</div>
<div class="main" v-else>
<van-tabs>
<van-tab :title="item.tit" v-for="(item, index) in list" :key="index">
<img :src="item.img" alt="" />
<div class="desc">{{ item.desc }}</div>
</van-tab>
</van-tabs>
</div>
</template>
<style lang="scss" scoped>
.main {
background: #f5f5f5;
.main_con {
width: 1200px;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding: 128px 0 109px 0;
.con_list {
width: 585px;
height: 274px;
background: #ffffff;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);
border-radius: 6px;
display: flex;
padding: 0 20px 26px 40px;
box-sizing: border-box;
.is-pc {
.main {
background: #f5f5f5;
.main_con {
width: 1200px;
margin: auto;
display: flex;
.list_left {
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding: 128px 0 109px 0;
.con_list {
width: 585px;
height: 274px;
background: #ffffff;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);
border-radius: 6px;
display: flex;
flex-direction: column;
align-items: flex-start;
.left_index {
font-size: 60px;
font-weight: normal;
line-height: 24px;
color: #eaeaea;
padding-top: 29px;
}
.left_tit {
font-size: 20px;
font-weight: 500;
line-height: 34px;
color: #333333;
margin-top: -13px;
padding: 0 20px 26px 40px;
box-sizing: border-box;
display: flex;
.list_left {
display: flex;
flex-direction: column;
align-items: flex-start;
.left_index {
font-size: 60px;
font-weight: normal;
line-height: 24px;
color: #eaeaea;
padding-top: 29px;
}
.left_tit {
font-size: 20px;
font-weight: 500;
line-height: 34px;
color: #333333;
margin-top: -13px;
}
.left_desc {
width: 260px;
font-size: 16px;
font-weight: 400;
line-height: 28px;
color: #666666;
margin-top: 20px;
}
}
.left_desc {
width: 260px;
font-size: 16px;
font-weight: 400;
line-height: 28px;
color: #666666;
margin-top: 20px;
.item_img {
width: 240px;
height: 150px;
padding: 62px 0 0 24px;
}
}
.item_img {
width: 240px;
height: 150px;
padding: 62px 0 0 24px;
.con_list:nth-child(3),
.con_list:nth-child(4) {
margin-top: 35px;
}
}
.con_list:nth-child(3),
.con_list:nth-child(4) {
margin-top: 35px;
}
}
.is-h5 {
.main {
margin: 0.3rem;
background: #ffffff;
padding: 0.2rem 0.2rem 0.54rem 0.2rem;
border-radius: 0.12rem;
.van-tab__panel {
border: 1px solid #e8e8e8;
padding: 0.2rem;
border-radius: 0.12rem;
margin-top: 0.3rem;
img {
width: 6.1rem;
height: 1.91rem;
object-fit: cover;
}
.desc {
font-size: 0.24rem;
line-height: 0.4rem;
color: #666666;
margin-top: 0.39rem;
}
}
}
}
:deep(.van-tab--active) {
.van-tab__text {
color: #c1ab85 !important;
font-size: 0.28rem;
}
}
:deep(.van-tab) {
.van-tab__text {
color: #333333;
font-size: 0.28rem;
}
}
:deep(.van-tabs__line) {
background: #c1ab85 !important;
}
</style>
src/modules/home/components/Teacher.vue
浏览文件 @ 25bfee40
......@@ -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 = [
......@@ -24,7 +26,10 @@ const list = [
{
avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_04.png',
name: '陈秉正',
children: ['清华大学经济管理学院金融系教授', '中国保险与风险管理研究中心主任']
children: [
'清华大学经济管理学院金融系教授',
'中国保险与风险管理研究中心主任'
]
},
{
avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_05.png',
......@@ -34,7 +39,11 @@ const list = [
{
avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_06.png',
name: '刘鹏',
children: ['北大金融经济学硕士', '哈斯商学院金融与地产联合博士', '康奈尔大学终身教授']
children: [
'北大金融经济学硕士',
'哈斯商学院金融与地产联合博士',
'康奈尔大学终身教授'
]
}
]
......@@ -58,7 +67,10 @@ const list2 = [
{
avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_01.png',
name: '邹志英',
children: ['清控紫荆金融保险研究院特聘专家', '中国企业财务管理协会商学院客座教授']
children: [
'清控紫荆金融保险研究院特聘专家',
'中国企业财务管理协会商学院客座教授'
]
},
{
avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_01.png',
......@@ -73,7 +85,10 @@ const list2 = [
{
avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_01.png',
name: '王昊',
children: ['清控紫荆金融保险专职讲师', '清华大学五道口金融学院家族信托课程特聘专家']
children: [
'清控紫荆金融保险专职讲师',
'清华大学五道口金融学院家族信托课程特聘专家'
]
},
{
avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_01.png',
......@@ -116,15 +131,21 @@ function next(swiper) {
</script>
<template>
<section class="section" id="teacher">
<section class="section" id="teacher" v-if="!mobile">
<div class="section__inner">
<div class="con_tit">
<div class="section-title">
<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"
/>
</div>
<div class="tit_txt">师资团队</div>
<h2>师资团队</h2>
<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"
/>
</div>
</div>
<h3 class="subtitle">清华大学知名教授、博士生导师</h3>
......@@ -135,9 +156,13 @@ function next(swiper) {
:slidesPerView="4"
:spaceBetween="20"
:modules="[Navigation]"
@swiper="swiper => (swiper1 = swiper)"
@swiper="(swiper) => (swiper1 = swiper)"
>
<SwiperSlide v-for="(item, index) in list" :key="index" class="teacher-item">
<SwiperSlide
v-for="(item, index) in list"
:key="index"
class="teacher-item"
>
<img :src="item.avatar" />
<h3>{{ item.name }}</h3>
<ol v-if="item.children?.length">
......@@ -156,9 +181,14 @@ function next(swiper) {
:slidesPerView="4"
:spaceBetween="20"
:modules="[Navigation]"
@swiper="swiper => (swiper2 = swiper)"
@swiper="(swiper) => (swiper2 = swiper)"
>
<SwiperSlide v-for="(item, index) in list2" :key="index" class="teacher-item1">
<SwiperSlide
v-for="(item, index) in list2"
:key="index"
class="teacher-item1"
>
<!-- <img :src="item.avatar" /> -->
<h3>{{ item.name }}</h3>
<ol v-if="item.children?.length">
<li v-for="item in item.children" :key="item">{{ item }}</li>
......@@ -170,35 +200,54 @@ 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>
.section {
width: 100%;
--section-title-color: #fff;
--section-title-dot-bgcolor: #fff;
--section-title-dot-border-color: #fff;
background: url('https://webapp-pub.ezijing.com/project_online/paa/teacher_bg.jpg') no-repeat center;
background-size: 100% 100%;
background: url('https://webapp-pub.ezijing.com/project_online/fi/teacher_bg.jpg')
no-repeat center / 100% 100%;
height: 906px;
}
.section-title {
padding-bottom: 0;
}
.section__inner {
position: relative;
max-width: 1180px;
min-height: 906px;
margin: 0 auto;
box-sizing: border-box;
}
.con_tit {
display: flex;
justify-content: center;
align-items: center;
padding-top: 67px;
.tit_txt {
h2 {
font-size: 32px;
font-weight: 500;
line-height: 34px;
......@@ -206,10 +255,17 @@ function next(swiper) {
margin: 0 10px;
}
}
.section__inner {
position: relative;
max-width: 1180px;
min-height: 1080px;
margin: 0 auto;
}
.subtitle {
margin: 50px 0 30px;
margin: 60px 0 30px;
font-size: 24px;
font-weight: 500;
line-height: 34px;
color: #ffffff;
text-align: center;
}
......@@ -217,6 +273,8 @@ function next(swiper) {
--swiper-navigation-size: 34px;
--swiper-navigation-color: #fff;
position: relative;
margin-top: 20px;
margin-bottom: 60px;
:deep(.swiper-button-prev) {
left: -40px;
......@@ -227,7 +285,7 @@ function next(swiper) {
}
</style>
<style lang="scss">
<style lang="scss" scoped>
.teacher-item {
width: 268px;
height: 322px;
......@@ -282,7 +340,6 @@ function next(swiper) {
padding-top: 32px;
box-sizing: border-box;
h3 {
// margin-top: 12px;
font-size: 18px;
font-weight: 500;
line-height: 1;
......@@ -312,4 +369,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: 0.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>
src/modules/shop/components/TeacherCard.vue
浏览文件 @ 25bfee40
<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Grid, Navigation } from 'swiper'
import { useDevice } from '@/composables/useDevice'
import 'swiper/css'
import 'swiper/css/grid'
import 'swiper/css/navigation'
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
defineProps({
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论