Skip to content

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

Auto stash before merge of "master" and "origin/master"

上级 7e66f9cb
隐藏空白字符变更
内嵌 并排
正在显示 包含 1165 行增加 和 10 行删除
src/components/layout/Nav.vue
浏览文件 @ fedf8a3f
......@@ -4,6 +4,7 @@ import TreeItem from './TreeItem.vue'
const navList = [
{ name: '首页', path: '/' },
{ name: '产品体系', path: '/#product' },
{ name: '精品课程', path: '/shop' },
{ name: '师资展示', path: '/#teacher' },
{ name: '预约报名', path: '/#contact' }
]
......
src/components/layout/TreeItem.vue
浏览文件 @ fedf8a3f
......@@ -12,7 +12,6 @@ const props = defineProps<{ item: IMenu }>()
const route = useRoute()
const isOpen = ref(false)
const isFolder = computed(() => !!props.item.children?.length)
const isActive = computed(
() => route.path.includes(props.item.path) || props.item.children?.find(child => route.path.includes(child.path))
......
src/modules/home/components/Teacher.vue
浏览文件 @ fedf8a3f
......@@ -221,7 +221,7 @@ function next(swiper) {
}
</style>
<style lang="scss">
<style lang="scss" scoped>
.teacher-item {
width: 268px;
height: 322px;
......
src/modules/shop/components/CourseIntroduceCard.vue 0 → 100644
浏览文件 @ fedf8a3f
<script lang="ts" setup>
defineProps({
shopItem: {
type: Object
}
})
const defaultProps = {
children: 'children',
label: 'label'
}
</script>
<template>
<div>
<div class="con_course">
<div class="course_info">
<div class="info_tit">课程介绍</div>
<div class="info_line"></div>
<div class="info_con">
{{ shopItem?.desc }}
</div>
</div>
<div class="course_info course_info1">
<div class="info_tit">适用人群</div>
<div class="info_line"></div>
<div class="info_con">{{ shopItem?.for_people }}</div>
</div>
<div class="course_info course_info1">
<div class="info_tit">课程目录</div>
<div class="info_line"></div>
<div class="info_con1" v-if="shopItem?.type === '课程包'">
<div class="course_list" v-for="(item, index) in shopItem?.course_list" :key="index">
<img
src="https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
alt=""
/>
<div class="list_info">
<div class="tit">{{ item.title }}</div>
<div class="hour">{{ item.course_hour }}</div>
</div>
</div>
</div>
<div class="info_con1" v-else>
<el-tree :data="shopItem?.content_list" :props="defaultProps" />
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.con_course {
margin-top: 20px;
padding: 28px 45px 53px 45px;
background: #ffffff;
box-shadow: 0px 1px 18px rgba(0, 0, 0, 0.1);
border-radius: 15px;
.course_info1 {
margin-top: 40px;
}
.course_info {
.info_tit {
font-size: 18px;
font-weight: 500;
color: #333333;
}
.info_line {
width: 31px;
height: 2px;
background: #c1ab85;
margin: 9px 0 0 21px;
}
.info_con {
padding: 32px 22px 30px 28px;
background-color: #f5f8fb;
margin-top: 20px;
border-radius: 16px;
font-size: 16px;
font-weight: 400;
line-height: 32px;
color: #666666;
}
.info_con1 {
margin-top: 20px;
padding: 32px 19px;
border-top: 6px solid #fff5e1 !important;
border: 1px solid #fff5e1;
border-radius: 15px;
font-size: 16px;
font-weight: 400;
line-height: 32px;
color: #333333;
.course_list:last-child {
border: none;
}
.course_list {
display: flex;
border-bottom: 1px solid #e8e8e8;
padding: 20px 0;
box-sizing: border-box;
img {
width: 140px;
height: 80px;
}
.list_info {
height: 80px;
margin-left: 14px;
padding: 14px 0 6px 0;
.tit {
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #666666;
}
.hour {
font-size: 14px;
font-weight: 400;
line-height: 22px;
color: #999999;
margin-top: 22px;
}
}
}
}
}
}
:deep(.el-tree-node__content) {
height: 50px;
margin-bottom: 16px;
border-radius: 10px;
background: #f5f8fb;
}
:deep(.el-icon svg) {
display: none;
}
:deep(.el-tree-node__label) {
font-size: 16px;
font-weight: 400;
line-height: 32px;
color: #333333;
}
:deep(.el-tree-node__children) {
background: #ffffff !important ;
border-bottom: 1px solid #f4f4f4;
.el-tree-node__label {
font-size: 14px;
font-weight: 400;
line-height: 32px;
color: #666666;
}
}
</style>
src/modules/shop/components/CourseList.vue 0 → 100644
浏览文件 @ fedf8a3f
<script setup lang="ts">
import CourseListItem from './CourseListItem.vue'
const props = defineProps({
courseList: {
type: Array
},
type: {
type: String
}
})
const courseListAll: any = ref([])
if (props.type === '') {
courseListAll.value = JSON.parse(JSON.stringify(props.courseList))
} else {
courseListAll.value = props.courseList?.filter((item: any) => item.category === props.type)
}
</script>
<template>
<div v-for="(item, id) in courseListAll" :key="id">
<CourseListItem :courseItem="item" :key="id"></CourseListItem>
</div>
</template>
<style lang="scss" scoped>
.pagination {
margin: 46px 204px 40px 0;
display: flex;
justify-content: flex-end;
}
</style>
src/modules/shop/components/CourseListItem.vue 0 → 100644
浏览文件 @ fedf8a3f
<script setup lang="ts">
const router = useRouter()
defineProps({
courseItem: {
type: Object
}
})
// 查看详情
const handleDatail = (item: any) => {
console.log(item)
router.push({
path: `/shop/detail/${item}`
})
}
</script>
<template>
<div class="main_tab">
<div class="tab_con">
<div
class="con_left"
style="
background: url(https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500)
no-repeat center / 100% 100%;
"
>
<div class="left_type">{{ courseItem?.type }}</div>
</div>
<div class="con_right">
<div class="right_use">
<div class="use_icon">适用人群</div>
<div class="use_tips">{{ courseItem?.for_people }}</div>
</div>
<div class="right_tit">{{ courseItem?.title }}</div>
<div class="right_desc">
{{ courseItem?.desc }}
</div>
<div class="right_bottom">
<div class="bottom_price">
<div class="price_icon">¥</div>
<div class="price_num">{{ courseItem?.price }}</div>
</div>
<div class="bottom_btn">
<div class="btn_detail" @click="handleDatail(courseItem?.id)">查看详情</div>
<div class="btn_buy">立即购买</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.main_tab {
width: 1200px;
.tab_con {
display: flex;
padding: 40px 45px;
background: #ffffff;
border-radius: 10px;
margin-top: 20px;
.con_left {
width: 446px;
height: 250px;
// object-fit: cover;
position: relative;
border-radius: 5px;
box-sizing: border-box;
.left_type {
width: 59px;
height: 27px;
background: rgba(255, 255, 255, 0.32);
opacity: 1;
border-radius: 3px;
font-size: 16px;
font-weight: 400;
line-height: 27px;
color: #333333;
position: absolute;
top: 10px;
right: 10px;
}
}
.con_right {
margin-left: 32px;
width: 632px;
.right_use {
display: flex;
align-items: center;
.use_icon {
width: 67px;
height: 21px;
background: rgba(244, 234, 219, 0.39);
border-radius: 2px;
font-size: 14px;
font-weight: 400;
line-height: 21px;
color: #886426;
}
.use_tips {
font-size: 14px;
font-weight: 400;
line-height: 30px;
color: #999999;
margin-left: 10px;
}
}
.right_tit {
font-size: 24px;
font-weight: 500;
line-height: 34px;
color: #333333;
margin-top: 18px;
text-align: left;
}
.right_desc {
font-size: 16px;
font-weight: 400;
line-height: 30px;
color: #666666;
text-align: left;
margin-top: 22px;
}
.right_bottom {
margin-top: 53px;
display: flex;
justify-content: space-between;
.bottom_price {
display: flex;
.price_icon {
font-size: 24px;
font-weight: 500;
line-height: 34px;
color: #aa1941;
}
.price_num {
font-size: 40px;
font-weight: normal;
line-height: 34px;
color: #aa1941;
margin-left: 3px;
}
}
.bottom_btn {
display: flex;
.btn_detail {
width: 96px;
height: 32px;
background: rgba(255, 255, 255, 0.39);
border: 1px solid #e79e23;
border-radius: 16px;
font-size: 16px;
font-weight: 400;
line-height: 32px;
color: #e2971d;
cursor: pointer;
}
.btn_buy {
width: 96px;
height: 32px;
background: linear-gradient(180deg, #ffe9c6 0%, #e69b1c 100%);
border-radius: 24px;
font-size: 16px;
font-weight: 400;
line-height: 32px;
color: #ffffff;
margin-left: 20px;
cursor: pointer;
}
}
}
}
}
}
</style>
src/modules/shop/components/IncludeCourseCard.vue 0 → 100644
浏览文件 @ fedf8a3f
<script setup lang="ts">
defineProps({
courseItem: {
type: Object
}
})
</script>
<template>
<div>
<div class="include_course">
<div class="course_tit">包含该课程的系列课</div>
<div class="course_card">
<div class="card_course" v-for="(item, index) in courseItem" :key="index">
<img
:src="
item.image_url ||
'https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
"
/>
<div class="course_info">
<div class="info_tit">{{ item.title }}</div>
<div class="info_price">
<div class="price_icon">¥</div>
<div class="price_price">{{ item.price }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.include_course {
background: #ffffff;
box-shadow: 0px 1px 18px rgba(0, 0, 0, 0.1);
border-radius: 15px;
.course_tit {
padding: 20px 0 17px 20px;
font-size: 18px;
font-weight: 500;
line-height: 34px;
color: #333333;
}
.course_card {
background: #f7f8fa;
border-radius: 6px;
box-sizing: border-box;
border-radius: 15px;
padding: 36px 200px 36px 36px;
box-sizing: border-box;
.card_course {
display: flex;
background: #ffffff;
padding: 19px;
box-sizing: border-box;
border-radius: 6px;
img {
width: 160px;
height: 90px;
border-radius: 5px;
}
.course_info {
padding-top: 10px;
margin-left: 14px;
.info_tit {
font-size: 16px;
font-weight: 400;
// line-height: 20px;
color: #666666;
}
.info_price {
display: flex;
align-items: flex-end;
margin-top: 8px;
.price_icon {
font-size: 12px;
font-weight: 500;
line-height: 34px;
color: #c1ab85;
}
.price_price {
font-size: 20px;
font-weight: normal;
line-height: 34px;
color: #c1ab85;
margin-left: 1px;
}
}
}
}
}
}
</style>
src/modules/shop/components/RecommendCourse.vue 0 → 100644
浏览文件 @ fedf8a3f
<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Grid, Navigation } from 'swiper'
import 'swiper/css'
import 'swiper/css/grid'
import 'swiper/css/navigation'
defineProps({
shopRelatedList: {
type: Array
}
})
const swiper1 = ref(null)
function prev(swiper) {
console.log(swiper, '111')
swiper?.slidePrev()
}
function next(swiper) {
swiper?.slideNext()
}
</script>
<template>
<div class="teacher_list">
<div class="list_con">
<div class="con_tit">相关课程推荐</div>
<div class="con_line"></div>
<div class="con_course">
<div>
<Swiper
class="my-swiper"
:grid="{ rows: 3, fill: 'column' }"
:spaceBetween="20"
:slidePreview="1"
:modules="[Navigation, Grid]"
@swiper="swiper => (swiper1 = swiper)"
>
<SwiperSlide v-for="(item, index) in shopRelatedList" :key="index" class="course-item">
<img
:src="
item.avatar ||
'https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
"
class="img"
/>
<div class="item_right">
<div class="right_name">{{ item.title }}</div>
<div class="right_price">
<div class="price_icon">¥</div>
<div class="price_num">{{ item.price }}</div>
</div>
</div>
</SwiperSlide>
</Swiper>
<template v-if="shopRelatedList.length > 3">
<div class="swiper-button-prev" @click="prev(swiper1)"></div>
<div class="swiper-button-next" @click="next(swiper1)"></div>
</template>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.teacher_list {
margin-top: 20px;
.list_con {
width: 396px;
height: 433px;
background: #ffffff;
box-shadow: 0px 1px 18px rgba(0, 0, 0, 0.1);
border-radius: 15px;
border-top: 6px solid #fde6c1;
padding-top: 27px;
.con_tit {
font-size: 18px;
font-weight: 500;
line-height: 34px;
color: #333333;
text-align: center;
}
.con_line {
width: 31px;
height: 2px;
background: #c1ab85;
margin: 9px 0 0 183px;
}
.con_course {
padding: 0 33px;
position: relative;
margin-top: 35px;
.course-item {
padding: 29px 27px 23px 0;
box-sizing: border-box;
display: flex;
align-items: center;
.img {
width: 140px;
height: 80px;
}
.item_right {
margin-left: 14px;
.right_name {
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #666666;
width: 183px;
white-space: wrap;
}
.right_price {
display: flex;
.price_icon {
font-size: 12px;
font-weight: 500;
line-height: 34px;
color: #c1ab85;
margin-top: 2px;
}
.price_num {
font-size: 16px;
font-weight: normal;
line-height: 34px;
color: #c1ab85;
}
}
}
}
}
}
}
.my-swiper {
--swiper-navigation-size: 14px;
--swiper-navigation-color: #333333;
position: relative;
height: 400px;
:deep(.swiper-slide) {
height: 25%;
}
}
:deep(.swiper-button-prev) {
left: 5px;
top: -15%;
color: #333333;
}
:deep(.swiper-button-next) {
right: 5px;
top: -15%;
color: #333333;
}
:deep(.swiper-button-next:after) {
font-size: 12px;
}
:deep(.swiper-button-prev:after) {
font-size: 12px;
}
</style>
src/modules/shop/components/TeacherCard.vue 0 → 100644
浏览文件 @ fedf8a3f
<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Grid, Navigation } from 'swiper'
import 'swiper/css'
import 'swiper/css/grid'
import 'swiper/css/navigation'
defineProps({
lecturerList: {
type: Array
}
})
const swiper1 = ref(null)
const list = [
{
avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_01.png',
name: '张伟张伟张伟张伟张伟张伟张伟张伟张伟张伟张伟张伟',
children: ['清华大学国家金融研究院副院长、副研究员']
},
{
avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_02.png',
name: '高皓',
children: ['清华大学五道口金融学院全球家族企业研究中心主任']
},
{
avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_03.png',
name: '肇越',
children: ['清华大学五道口金融学院硕士生导师首席经济学家']
},
{
avatar: 'https://webapp-pub.ezijing.com/project_online/fi/teacher_04.png',
name: '陈秉正',
children: ['清华大学经济管理学院金融系教授', '中国保险与风险管理研究中心主任']
}
]
function prev(swiper) {
console.log(swiper, '111')
swiper?.slidePrev()
}
function next(swiper) {
swiper?.slideNext()
}
</script>
<template>
<div class="teacher_list">
<div class="list_con">
<div class="con_tit">讲师介绍</div>
<div class="con_line"></div>
<div class="con_teacher">
<div>
<Swiper
class="my-swiper"
:grid="{ rows: 2, fill: 'column' }"
:spaceBetween="20"
:slidePreview="1"
:modules="[Navigation, Grid]"
@swiper="swiper => (swiper1 = swiper)"
>
<SwiperSlide v-for="(item, index) in lecturerList" :key="index" class="teacher-item">
<div class="item_top">
<img
:src="item.avatar || 'https://webapp-pub.ezijing.com/project_online/fi/teacher_04.png'"
class="top_img"
/>
<div class="top_name">{{ item.name }}</div>
</div>
<ol v-if="item.title_list?.length">
<li v-for="it in item.title_list" :key="it">
<p>
{{ it }}
</p>
</li>
</ol>
</SwiperSlide>
</Swiper>
<template v-if="lecturerList.length > 2">
<div class="swiper-button-prev" @click="prev(swiper1)"></div>
<div class="swiper-button-next" @click="next(swiper1)"></div>
</template>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.teacher_list {
.list_con {
width: 396px;
height: 433px;
background: #ffffff;
box-shadow: 0px 1px 18px rgba(0, 0, 0, 0.1);
border-radius: 15px;
border-top: 6px solid #fde6c1;
padding-top: 27px;
.con_tit {
font-size: 18px;
font-weight: 500;
line-height: 34px;
color: #333333;
text-align: center;
}
.con_line {
width: 31px;
height: 2px;
background: #c1ab85;
margin: 9px 0 0 183px;
}
.con_teacher {
padding: 0 33px;
position: relative;
.teacher-item:nth-child(even) {
border-bottom: none;
}
.teacher-item:last-child {
border-bottom: none;
}
.teacher-item {
padding: 29px 27px 33px 0;
border-bottom: 1px dashed #d5d5d5;
box-sizing: border-box;
.item_top {
display: flex;
align-items: center;
.top_img {
width: 60px;
height: 60px;
}
.top_name {
font-size: 18px;
font-weight: 500;
line-height: 34px;
color: #333333;
margin-left: 13px;
}
}
ol {
margin-top: 15px;
li {
list-style-type: disc;
color: #c1ab85 !important;
margin-left: 20px;
p {
font-size: 14px;
font-weight: 400;
line-height: 22px;
color: #666666;
width: 295px;
white-space: wrap;
}
}
}
}
}
}
}
.my-swiper {
--swiper-navigation-size: 14px;
--swiper-navigation-color: #333333;
position: relative;
height: 473px;
:deep(.swiper-slide) {
height: 33%;
}
}
:deep(.swiper-button-prev) {
left: 5px;
top: -6%;
color: #333333;
}
:deep(.swiper-button-next) {
right: 5px;
top: -6%;
color: #333333;
}
:deep(.swiper-button-next:after) {
font-size: 12px;
}
:deep(.swiper-button-prev:after) {
font-size: 12px;
}
</style>
src/modules/shop/index.ts
浏览文件 @ fedf8a3f
......@@ -7,7 +7,7 @@ export const routes: Array<RouteRecordRaw> = [
component: AppLayout,
children: [
{ path: '', component: () => import('./views/Index.vue') },
{ path: ':id', component: () => import('./views/View.vue'), props: true }
{ path: '/shop/detail/:id', component: () => import('./views/View.vue'), props: true }
]
}
]
src/modules/shop/views/Index.vue
浏览文件 @ fedf8a3f
<script setup>
<script lang="ts" setup>
import CourseList from '../components/CourseList.vue'
import { useShopStore } from '@/stores/shop'
const { filters, list } = useShopStore()
console.log(filters, list)
const handleTabClick = (tab: any) => {
if (tab.index === '4') {
window.open('https://prp.ezijing.com')
}
}
</script>
<template>
<div></div>
<div class="main_shop">
<img src="https://webapp-pub.ezijing.com/project_online/fi/shop_banner.jpg" class="shop_banner" />
<div class="shop_con">
<div class="con_tab">
<el-tabs class="my-tabs" @tab-click="handleTabClick">
<el-tab-pane v-for="(item, index) in filters" :key="index" lazy>
<template #label>
{{ item.label }}
</template>
<CourseList :type="item.value" :courseList="list" :key="index" />
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.main_shop {
background: #f7f8fa;
margin: auto;
.shop_banner {
width: 100%;
height: 537px;
object-fit: cover;
}
.shop_con {
width: 1200px;
padding: 0 0 40px 0;
margin: -36px auto;
position: relative;
z-index: 100;
.con_tab {
margin-bottom: 20px;
:deep(.my-tabs) {
text-align: center;
box-sizing: border-box;
.el-tabs__active-bar,
.el-tabs__nav-wrap::after {
display: none;
}
.el-tabs__nav {
background: #ffffff;
box-shadow: 0px 3px 18px rgba(0, 0, 0, 0.1);
border-radius: 10px;
width: 1200px;
height: 76px;
display: flex;
justify-content: space-around;
align-items: center;
border-radius: 6px;
}
.el-tabs__content {
overflow: inherit;
}
.el-tabs__nav-scroll {
display: flex;
align-items: center;
justify-content: space-around;
}
.el-tabs__item {
display: flex;
align-items: center;
justify-content: space-around;
padding: 9px 31px 10px 26px;
border-radius: 6px;
border-bottom: none;
font-size: 18px;
font-weight: 400;
color: #535353;
box-sizing: border-box;
&.is-active {
background-color: #e8c484;
color: #ffffff;
}
}
}
}
}
}
</style>
src/modules/shop/views/View.vue
浏览文件 @ fedf8a3f
<script setup>
<script lang="ts" setup>
import IncludeCourseCard from '../components/IncludeCourseCard.vue'
import CourseIntroduceCard from '../components/CourseIntroduceCard.vue'
import TeacherCard from '../components/TeacherCard.vue'
import RecommendCourse from '../components/RecommendCourse.vue'
import { useShopStore } from '@/stores/shop'
const { shopItem } = useShopStore()
console.log(shopItem)
const { shopItem, shopRelatedList, list, shopRelatedListOther } = useShopStore()
console.log(shopItem, '------', shopRelatedList, '---111', shopRelatedListOther)
const courseItem: any = ref([])
courseItem.value = list.filter((item: any) => item.type === '课程包' && item.child_ids.includes(shopItem?.id))
const recommendCourse = computed(() => {
if (shopItem?.type === '课程包') {
return shopRelatedList
} else {
return shopRelatedListOther
}
})
</script>
<template>
<div></div>
<div class="course_detail">
<div class="detail_banner">
<div class="banner_con">
<img
class="con_img"
src="https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
/>
<div class="con_info">
<div class="info_tit">{{ shopItem?.title }}</div>
<div class="info_indentify">{{ shopItem?.course_card }}</div>
<div class="info_tips">
<div class="tips_card">{{ shopItem?.course_chapter }}</div>
<div class="tips_card">{{ shopItem?.course_total_hour }}</div>
</div>
</div>
<div class="con_share">
<div class="share_btn">
<img src="https://webapp-pub.ezijing.com/project_online/fi/icon_share.png" alt="" />
分享
</div>
</div>
</div>
</div>
<div class="detail_buy">
<div class="buy_left">
<div class="left_icon">¥</div>
<div class="left_price">{{ shopItem.price }}</div>
<div class="left_tip tip1">支付安全</div>
<div class="left_tip tip2">课程回放</div>
</div>
<div class="buy_right">立即购买</div>
</div>
<div class="detail_con">
<div class="con_left">
<IncludeCourseCard v-if="shopItem?.type !== '课程包'" :courseItem="courseItem" />
<CourseIntroduceCard :shopItem="shopItem" />
</div>
<div class="con_right">
<TeacherCard :lecturerList="shopItem?.lecturer_list" />
<RecommendCourse :shopRelatedList="recommendCourse" />
</div>
</div>
<div class="detail_footer">
<div class="footer_left">
<div class="left_tit">全部课程价格</div>
<div class="left_desc">根据课程价格累积计算</div>
</div>
<div class="footer_price">
<div class="price_icon">¥</div>
<div class="price_price">{{ shopItem?.price }}</div>
</div>
<div class="footer_btn">立即购买</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.course_detail {
background: #f7f8fa;
padding-bottom: 30px;
.detail_banner {
width: 100%;
height: 370px;
background: url('https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/course_detail_banner.jpg')
no-repeat center / 100% 100%;
.banner_con {
width: 1200px;
margin: auto;
display: flex;
padding: 60px 0 85px 0;
.con_img {
width: 400px;
height: 225px;
}
.con_info {
margin-left: 41px;
width: 596px;
.info_tit {
padding-top: 29px;
font-size: 24px;
font-weight: 500;
color: #333333;
}
.info_indentify {
font-size: 16px;
font-weight: 400;
color: #666666;
margin-top: 23px;
}
.info_tips {
display: flex;
margin-top: 21px;
gap: 9px;
.tips_card {
padding: 6px 9px 6px 9px;
background: #f8d394;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
color: #886426;
}
}
}
.con_share {
padding-top: 29px;
.share_btn {
padding: 0 17px;
height: 30px;
background: #ffffff;
border-radius: 16px;
font-size: 14px;
font-weight: 400;
line-height: 30px;
color: #666666;
}
}
}
}
.detail_buy {
width: 1200px;
height: 97px;
background: #ffffff;
box-shadow: 0px 1px 18px rgba(0, 0, 0, 0.11);
border-radius: 15px;
margin: -44px auto;
border-top: 5px solid #f4b242;
padding: 0 40px 0 90px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
.buy_left {
display: flex;
align-items: center;
.left_icon {
font-size: 24px;
font-weight: 500;
line-height: 34px;
color: #aa1941;
margin-top: 6px;
}
.left_price {
font-size: 40px;
font-weight: normal;
line-height: 34px;
color: #aa1941;
margin-left: 3px;
}
.left_tip {
padding: 4px 6px 3px 7px;
background: #f4eadb;
border-radius: 2px;
font-size: 14px;
font-weight: 400;
color: #886426;
}
.tip1 {
margin-left: 23px;
}
.tip2 {
margin-left: 10px;
}
}
.buy_right {
width: 144px;
height: 48px;
background: linear-gradient(180deg, #ffe9c6 0%, #e69b1c 100%);
border-radius: 24px;
font-size: 18px;
font-weight: bold;
line-height: 48px;
text-align: center;
color: #ffffff;
cursor: pointer;
}
}
.detail_con {
width: 1200px;
margin: 77px auto;
display: flex;
justify-content: space-between;
.con_left {
width: 784px;
}
.con_right {
width: 396px;
}
}
.detail_footer {
width: 1200px;
height: 100px;
background: #ffffff;
box-shadow: 0px 1px 18px rgba(0, 0, 0, 0.1);
border-radius: 15px;
margin: 30px auto;
display: flex;
align-items: center;
padding: 0 46px 0 60px;
box-sizing: border-box;
.footer_left {
.left_tit {
font-size: 16px;
font-weight: 400;
line-height: 34px;
color: #333333;
}
.left_desc {
font-size: 14px;
font-weight: 400;
line-height: 34px;
color: #999999;
}
}
.footer_price {
display: flex;
margin-left: 605px;
.price_icon {
font-size: 24px;
font-weight: 500;
line-height: 34px;
color: #aa1941;
}
.price_price {
font-size: 40px;
font-weight: normal;
line-height: 34px;
color: #aa1941;
}
}
.footer_btn {
width: 144px;
height: 48px;
line-height: 48px;
background: linear-gradient(180deg, #ffe9c6 0%, #e69b1c 100%);
border-radius: 24px;
font-size: 18px;
font-weight: bold;
color: #ffffff;
text-align: center;
margin-left: 43px;
cursor: pointer;
}
}
}
</style>
src/stores/shop.ts
浏览文件 @ fedf8a3f
......@@ -3,6 +3,7 @@ import { defineStore } from 'pinia'
interface ShopFilter {
label: string
value: string
courseList: any
}
type ShopListItem = Record<string, any>
......@@ -21,6 +22,7 @@ export const useShopStore = defineStore({
shopItem({ list }) {
const route = useRoute()
const found = list.find(item => item.id === route.params.id)
console.log(found)
if (found) {
found.course_list =
found.child_ids && found.child_ids.length
......@@ -29,8 +31,13 @@ export const useShopStore = defineStore({
}
return found
},
relatedShopList({ list }): ShopListItem[] {
shopRelatedList({ list }): ShopListItem[] {
return list.filter((item: ShopListItem) => item.category !== this.shopItem?.category)
},
shopRelatedListOther({ list }): ShopListItem[] {
return list.filter(
(item: ShopListItem) => item.category === this.shopItem?.category && item.id !== this.shopItem?.id
)
}
},
actions: {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论