Skip to content

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

h5部分页面开发

上级 5ff8b740
显示空白字符变更
内嵌 并排
正在显示 包含 699 行增加 和 211 行删除
src/assets/css/base.css
浏览文件 @ 7dcfee18
...@@ -86,6 +86,10 @@ body { ...@@ -86,6 +86,10 @@ body {
} }
@media (min-width: 768px) { @media (min-width: 768px) {
body{
background-color: #F8F8F8;
}
html { html {
font-size: 100px; font-size: 100px;
} }
...@@ -95,6 +99,10 @@ body { ...@@ -95,6 +99,10 @@ body {
html { html {
font-size: 50px; font-size: 50px;
} }
body{
background-color: #F8F8F8;
}
} }
:root { :root {
...@@ -103,3 +111,53 @@ body { ...@@ -103,3 +111,53 @@ body {
html{ html{
scroll-padding-top: 90px; scroll-padding-top: 90px;
} }
/* Extra small devices (portrait phones, less than 576px) */
/* @media (max-width: 575px) {
html {
font-size: 80px;
}
.con-box {
margin: 0.2rem 0;
padding: 0.2rem;
}
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767px) {
html {
font-size: 80px;
}
.step3 {
width: 80%;
}
.con-box {
margin: 0.2rem 0;
padding: 0.2rem;
}
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
html {
font-size: 80px;
}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {
html {
font-size: 90px;
}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
html {
font-size: 100px;
}
}
a {
color: currentColor;
} */
\ No newline at end of file
src/modules/home/components/Banner.vue
浏览文件 @ 7dcfee18
...@@ -21,4 +21,9 @@ const list = [{ url: 'https://webapp-pub.ezijing.com/project_online/fi/banner.jp ...@@ -21,4 +21,9 @@ const list = [{ url: 'https://webapp-pub.ezijing.com/project_online/fi/banner.jp
object-position: center; object-position: center;
} }
} }
.is-h5 {
.banner {
padding: 0 0.15rem;
}
}
</style> </style>
src/modules/home/components/Main.vue
浏览文件 @ 7dcfee18
<script lang="ts" setup> <script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation } from 'swiper'
import 'swiper/css' import 'swiper/css'
import 'swiper/css/navigation'
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
const swiper1 = ref(null)
const list = [
{
img: 'https://webapp-pub.ezijing.com/project_online/fi/main4.png',
desc: '清控紫荆金融保险研究院&清控紫荆金融保险学院，基于政策指导，通过汇聚清华等国内外高校、行业骨干企业、行业研究机构的科研资源与实践成果，打造国内顶尖、国际卓越的金融保险智库，达到“产学研”的深度融合。'
},
{
img: 'https://webapp-pub.ezijing.com/project_online/fi/main5.png',
desc: '通过创立通晓金融保险理论与行业实务双方面的金融保险课题研发团队，针对金融保险不同领域、不同阶段的学习需求，为金融从业者提供专业学习契机、为金融机构培育高素质国际化人才。'
}
]
</script> </script>
<template> <template>
<div class="main"> <div v-if="!mobile">
<div class="main1">
<div class="main_con"> <div class="main_con">
<img src="https://webapp-pub.ezijing.com/project_online/fi/main1.png" alt="" /> <img src="https://webapp-pub.ezijing.com/project_online/fi/main1.png" alt="" />
<div class="con_content"> <div class="con_content">
...@@ -10,7 +27,7 @@ import 'swiper/css' ...@@ -10,7 +27,7 @@ import 'swiper/css'
</div> </div>
</div> </div>
</div> </div>
<div class="main1"> <div class="main2">
<div class="main_con1"> <div class="main_con1">
<div class="con_content"> <div class="con_content">
通过创立通晓金融保险理论与行业实务双方面的金融保险课题研发团队，针对金融保险不同领域、不同阶段的学习需求，为金融从业者提供专业学习契机、为金融机构培育高素质国际化人才。 通过创立通晓金融保险理论与行业实务双方面的金融保险课题研发团队，针对金融保险不同领域、不同阶段的学习需求，为金融从业者提供专业学习契机、为金融机构培育高素质国际化人才。
...@@ -18,12 +35,22 @@ import 'swiper/css' ...@@ -18,12 +35,22 @@ import 'swiper/css'
<img src="https://webapp-pub.ezijing.com/project_online/fi/main3.png" alt="" /> <img src="https://webapp-pub.ezijing.com/project_online/fi/main3.png" alt="" />
</div> </div>
</div> </div>
<div class="main2"> </div>
<div v-else>
<Swiper loop :slidesPerView="1" :spaceBetween="10" :modules="[Navigation]" @swiper="swiper => (swiper1 = swiper)">
<SwiperSlide v-for="(item, index) in list" :key="index" class="main_list">
<img :src="item.img" alt="" class="list_img" />
<div class="list_con">{{ item.desc }}</div>
</SwiperSlide>
</Swiper>
</div>
<div class="main3">
核心产品为紫荆教育专属版权产品，站在高起点、高站位、高规格的“三高”教育标准平台上，向社会和企业精<br />英人士教授与传承“<span>格与质</span>”、“<span>道与术</span>”、“<span>欲与渔</span>”的经营管理品格和能力，主打行业认证类、行业标<br />准类和定制专属类等三类金融职业类培育体系。 核心产品为紫荆教育专属版权产品，站在高起点、高站位、高规格的“三高”教育标准平台上，向社会和企业精<br />英人士教授与传承“<span>格与质</span>”、“<span>道与术</span>”、“<span>欲与渔</span>”的经营管理品格和能力，主打行业认证类、行业标<br />准类和定制专属类等三类金融职业类培育体系。
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.main { .is-pc {
.main1 {
padding: 70px 0 75px 0; padding: 70px 0 75px 0;
.main_con { .main_con {
width: 1200px; width: 1200px;
...@@ -44,8 +71,8 @@ import 'swiper/css' ...@@ -44,8 +71,8 @@ import 'swiper/css'
text-align: justify; text-align: justify;
} }
} }
} }
.main1 { .main2 {
background: #f5f5f5; background: #f5f5f5;
padding: 70px 0 75px 0; padding: 70px 0 75px 0;
...@@ -68,8 +95,8 @@ import 'swiper/css' ...@@ -68,8 +95,8 @@ import 'swiper/css'
text-align: justify; text-align: justify;
} }
} }
} }
.main2 { .main3 {
height: 308px; height: 308px;
background: url('https://webapp-pub.ezijing.com/project_online/fi/main2.png') no-repeat center; background: url('https://webapp-pub.ezijing.com/project_online/fi/main2.png') no-repeat center;
background-size: 100% 100%; background-size: 100% 100%;
...@@ -84,5 +111,52 @@ import 'swiper/css' ...@@ -84,5 +111,52 @@ import 'swiper/css'
font-size: 30px; font-size: 30px;
font-weight: bold; font-weight: bold;
} }
}
}
.is-h5 {
overflow-x: auto;
:deep(.swiper-slide) {
width: 6.1rem;
height: 6.44rem;
background: red;
border-radius: 12px;
}
.main_list {
padding: 0.1rem;
.list_img {
width: 5.7rem;
height: 3.4rem;
object-fit: cover;
}
.list_con {
width: 5.7rem;
font-size: 0.24rem;
font-weight: 400;
line-height: 2;
color: #333333;
margin-top: 0.37rem;
}
}
.main3 {
height: 3.97rem;
background: url('https://webapp-pub.ezijing.com/project_online/fi/main2.png') no-repeat center;
background-size: 100% 100%;
font-size: 0.26rem;
font-weight: 400;
line-height: 2;
color: #ffffff;
text-align: justify;
box-sizing: border-box;
padding: 0.4rem 0.4rem 0 0.4rem;
margin-top: 0.4rem;
span {
font-size: 0.15rem;
font-weight: bold;
}
}
} }
</style> </style>
src/modules/shop/components/CourseList.vue
浏览文件 @ 7dcfee18
<script setup lang="ts"> <script setup lang="ts">
import CourseListItem from './CourseListItem.vue' import CourseListItem from './CourseListItem.vue'
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
const props = defineProps({ const props = defineProps({
courseList: { courseList: {
type: Array type: Array
...@@ -9,7 +11,7 @@ const props = defineProps({ ...@@ -9,7 +11,7 @@ const props = defineProps({
} }
}) })
const page = reactive({ const page = reactive({
size: 3, size: 10,
currentPage: 1 currentPage: 1
}) })
const courseListAll = $computed<any>(() => { const courseListAll = $computed<any>(() => {
...@@ -55,7 +57,7 @@ const handleCurrentChange = (val: number) => { ...@@ -55,7 +57,7 @@ const handleCurrentChange = (val: number) => {
</script> </script>
<template> <template>
<div v-for="(item, index) in courseListAllNew" :key="index"> <div class="course_list" v-for="(item, index) in courseListAllNew" :key="index">
<CourseListItem :courseItem="item" :key="type"></CourseListItem> <CourseListItem :courseItem="item" :key="type"></CourseListItem>
</div> </div>
<el-pagination <el-pagination
...@@ -67,7 +69,7 @@ const handleCurrentChange = (val: number) => { ...@@ -67,7 +69,7 @@ const handleCurrentChange = (val: number) => {
v-model:currentPage="page.currentPage" v-model:currentPage="page.currentPage"
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
v-if="courseListAll.length > 3" v-if="courseListAll.length > 10 && !mobile"
> >
</el-pagination> </el-pagination>
</template> </template>
...@@ -78,4 +80,11 @@ const handleCurrentChange = (val: number) => { ...@@ -78,4 +80,11 @@ const handleCurrentChange = (val: number) => {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
.is-h5 {
.course_list {
padding: 0 0.3rem;
margin-bottom: 0.45rem;
box-sizing: border-box;
}
}
</style> </style>
src/modules/shop/components/CourseListItem.vue
浏览文件 @ 7dcfee18
<script setup lang="ts"> <script setup lang="ts">
import ContactDialog from '../components/ContactDialog.vue' import ContactDialog from '../components/ContactDialog.vue'
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
const router = useRouter() const router = useRouter()
const buyDialogVisible = ref(false) const buyDialogVisible = ref(false)
...@@ -32,33 +33,38 @@ const handleBuy = (courseItem: any) => { ...@@ -32,33 +33,38 @@ const handleBuy = (courseItem: any) => {
</script> </script>
<template> <template>
<div class="main_tab"> <div class="main_tab" @click="handleDatail(courseItem?.id)">
<div class="tab_con"> <div class="tab_con">
<div <div class="con_left">
class="con_left" <div class="left_img">
style=" <img
background: url(https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500) :src="
no-repeat center / 100% 100%; courseItem?.image_url ||
'https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
" "
> class="left_img"
/>
</div>
<div class="left_type">{{ courseItem?.type }}</div> <div class="left_type">{{ courseItem?.type }}</div>
</div> </div>
<div class="con_right"> <div class="con_right">
<div class="right_use"> <div class="right_top">
<div class="top_use">
<div class="use_icon">适用人群</div> <div class="use_icon">适用人群</div>
<div class="use_tips">{{ courseItem?.for_people }}</div> <div class="use_tips">{{ courseItem?.for_people }}</div>
</div> </div>
<div class="right_tit">{{ courseItem?.title }}</div> <div class="top_tit">{{ courseItem?.title }}</div>
<div class="right_desc"> <div class="top_desc">
{{ courseItem?.desc }} {{ courseItem?.desc }}
</div> </div>
</div>
<div class="right_bottom"> <div class="right_bottom">
<div class="bottom_price"> <div class="bottom_price" v-if="!mobile">
<div class="price_icon">¥</div> <div class="price_icon">¥</div>
<div class="price_num">{{ courseItem?.price }}</div> <div class="price_num">{{ courseItem?.price }}</div>
</div> </div>
<div class="bottom_btn"> <div class="bottom_btn">
<div class="btn_detail" @click="handleDatail(courseItem?.id)">查看详情</div> <div class="btn_detail" v-if="!mobile" @click="handleDatail(courseItem?.id)">查看详情</div>
<div class="btn_buy" @click="handleBuy(courseItem)"> <div class="btn_buy" @click="handleBuy(courseItem)">
{{ courseItem?.isBuy === true ? '立即学习' : '立即购买' }} {{ courseItem?.isBuy === true ? '立即学习' : '立即购买' }}
</div> </div>
...@@ -71,21 +77,31 @@ const handleBuy = (courseItem: any) => { ...@@ -71,21 +77,31 @@ const handleBuy = (courseItem: any) => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.main_tab { .is-pc {
.main_tab {
width: 1200px; width: 1200px;
cursor: pointer;
.tab_con { .tab_con {
display: flex; display: flex;
padding: 40px 45px; padding: 40px 45px;
background: #ffffff; background: #ffffff;
border-radius: 10px; border-radius: 10px;
margin-top: 20px; margin-top: 20px;
box-sizing: border-box;
.con_left { .con_left {
width: 446px; // width: 446px;
height: 250px; // height: 250px;
// object-fit: cover; // object-fit: cover;
position: relative; position: relative;
border-radius: 5px; border-radius: 5px;
box-sizing: border-box; box-sizing: border-box;
.left_img {
width: 446px;
height: 250px;
object-fit: cover;
border-radius: 5px;
}
.left_type { .left_type {
width: 59px; width: 59px;
height: 27px; height: 27px;
...@@ -104,7 +120,8 @@ const handleBuy = (courseItem: any) => { ...@@ -104,7 +120,8 @@ const handleBuy = (courseItem: any) => {
.con_right { .con_right {
margin-left: 32px; margin-left: 32px;
width: 632px; width: 632px;
.right_use { .right_top {
.top_use {
display: flex; display: flex;
align-items: center; align-items: center;
.use_icon { .use_icon {
...@@ -125,7 +142,7 @@ const handleBuy = (courseItem: any) => { ...@@ -125,7 +142,7 @@ const handleBuy = (courseItem: any) => {
margin-left: 10px; margin-left: 10px;
} }
} }
.right_tit { .top_tit {
font-size: 24px; font-size: 24px;
font-weight: 500; font-weight: 500;
line-height: 34px; line-height: 34px;
...@@ -133,7 +150,7 @@ const handleBuy = (courseItem: any) => { ...@@ -133,7 +150,7 @@ const handleBuy = (courseItem: any) => {
margin-top: 18px; margin-top: 18px;
text-align: left; text-align: left;
} }
.right_desc { .top_desc {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 30px; line-height: 30px;
...@@ -141,6 +158,7 @@ const handleBuy = (courseItem: any) => { ...@@ -141,6 +158,7 @@ const handleBuy = (courseItem: any) => {
text-align: left; text-align: left;
margin-top: 22px; margin-top: 22px;
} }
}
.right_bottom { .right_bottom {
margin-top: 53px; margin-top: 53px;
display: flex; display: flex;
...@@ -192,5 +210,93 @@ const handleBuy = (courseItem: any) => { ...@@ -192,5 +210,93 @@ const handleBuy = (courseItem: any) => {
} }
} }
} }
}
}
.is-h5 {
padding: 0 0.25rem;
.main_tab {
.tab_con {
background: #ffffff;
opacity: 1;
border-radius: 16px;
display: flex;
margin-bottom: 0.2rem;
padding: 0.2rem;
box-sizing: border-box;
.con_left {
width: 2.2rem;
height: 1.6rem;
position: relative;
.left_img {
width: 100%;
height: 1.6rem;
border-radius: 6px;
}
.left_type {
padding: 0.03rem;
background: rgba(255, 255, 255, 0.32);
border-radius: 3px;
font-size: 0.2rem;
font-weight: 400;
color: #333333;
position: absolute;
top: 10px;
right: 10px;
}
}
.con_right {
margin-left: 0.2rem;
width: 4rem;
.right_top {
display: flex;
flex-direction: column-reverse;
.top_tit {
font-size: 0.28rem;
font-family: Source Han Sans CN;
font-weight: 500;
color: #333333;
}
.top_desc {
display: none;
}
.top_use {
.use_icon {
width: 1.2rem;
font-size: 0.2rem;
font-weight: 400;
color: #e29a21;
background: #fff3e0;
white-space: nowrap;
border-radius: 3px;
text-align: center;
}
.use_tips {
font-size: 0.2rem;
font-weight: 400;
color: #999999;
}
}
}
.right_bottom {
display: flex;
justify-content: flex-end;
.bottom_btn {
.btn_buy {
width: 1.3rem;
height: 0.46rem;
background: linear-gradient(102deg, #f2ca8c 0%, #e69b1c 100%);
border-radius: 40px;
font-size: 0.24rem;
font-weight: 400;
line-height: 0.46rem;
color: #ffffff;
text-align: center;
}
}
}
}
}
}
} }
</style> </style>
src/modules/shop/components/DetailBanner.vue 0 → 100644
浏览文件 @ 7dcfee18
<script setup lang="ts">
import ShareDialog from './ShareDialog.vue'
import ContactDialog from '../components/ContactDialog.vue'
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
const props = defineProps({
shopItem: {
type: Object
},
payStatus: {
type: String
}
})
const router = useRouter()
const shareDialogVisible = ref(false)
const buyDialogVisible = ref(false)
const handleShare = () => {
shareDialogVisible.value = true
}
const handleBuyCourse = () => {
if (props.payStatus === '4' || props.shopItem?.isBuy === true) {
window.open('https://paa-learning.ezijing.com')
} else {
if (props.shopItem?.type === '课程包') {
buyDialogVisible.value = true
} else {
router.push(`/shop/pay/${props.shopItem?.id}`)
}
}
}
</script>
<template>
<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"
/>
<template v-if="!mobile">
<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" @click="handleShare">
<img src="https://webapp-pub.ezijing.com/project_online/fi/icon_share.png" alt="" />
分享
</div>
</div>
</template>
</div>
</div>
<div class="detail_buy">
<div class="buy_left">
<!-- <div class="left_status" v-if="payStatus === '4' || shopItem?.isBuy === true">已购买</div> -->
<div class="left_price">
<div class="price_icon">¥</div>
<div class="price_num">{{ shopItem?.price }}</div>
</div>
<div class="left_tip">
<div class="tip1 tip">支付安全</div>
<div class="tip2 tip">课程回放</div>
</div>
</div>
<div class="buy_right" @click="handleBuyCourse" v-if="!mobile">
{{ payStatus === '4' || shopItem?.isBuy === true ? '立即学习' : '立即购买' }}
</div>
</div>
<div class="detail_info" v-if="mobile">
<div class="info_top">
<div class="top_icon">适用人群</div>
<div class="top_for">包括但并不仅限于金融保险企业绩优营销员</div>
</div>
<div class="info_tit">资产分析规划师（一级）/PAAP（Ⅰ）</div>
<div class="info_tips">知名导师专家</div>
<div class="info_time">
<div class="time_left">
<div class="left_tit">课程节数</div>
<div class="left_con"><span class="con_num">56</span> <span class="con_txt">节</span></div>
</div>
<div class="time_line"></div>
<div class="time_left">
<div class="left_tit">总课时</div>
<div class="left_con"><span class="con_num">80</span> <span class="con_txt">小时</span></div>
</div>
</div>
</div>
<ShareDialog v-model:shareDialogVisible="shareDialogVisible" />
<ContactDialog v-model:buyDialogVisible="buyDialogVisible" />
</template>
<style lang="scss" scoped>
.is-pc {
.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;
border-radius: 6px;
}
.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;
cursor: pointer;
.share_btn {
padding: 0 17px;
height: 30px;
background: #ffffff;
border-radius: 16px;
font-size: 14px;
font-weight: 400;
line-height: 30px;
color: #666666;
cursor: pointer;
}
}
}
}
.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_price {
display: flex;
.price_icon {
font-size: 24px;
font-weight: 500;
line-height: 34px;
color: #aa1941;
margin-top: 6px;
}
.price_num {
font-size: 40px;
font-weight: normal;
line-height: 34px;
color: #aa1941;
margin-left: 3px;
}
}
.left_status {
font-size: 24px;
font-weight: normal;
line-height: 34px;
color: #666666;
}
.left_tip {
display: flex;
}
.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;
}
}
}
.is-h5 {
.detail_banner {
.banner_con {
background: none;
.con_img {
width: 100%;
height: 3.2rem;
}
}
}
.detail_buy {
height: 0.98rem;
background: linear-gradient(270deg, #efb046 0%, #f7cb78 100%);
display: flex;
padding: 0 0.45rem;
.buy_left {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.left_tip {
display: flex;
.tip {
background: rgba(247, 203, 119, 0.39);
font-size: 0.2rem;
font-weight: 400;
color: #b97604;
padding: 0.04rem 0.06rem;
border-radius: 4px;
}
.tip1 {
margin-right: 0.07rem;
}
}
.left_status {
font-size: 0.3rem;
color: #ffffff;
}
.left_price {
display: flex;
align-items: center;
color: #ffffff;
.price_icon {
font-size: 0.24rem;
margin: 0.1rem 0.03rem 0 0;
}
.price_num {
font-size: 0.4rem;
}
}
}
}
.detail_info {
background: #ffffff;
margin: 0 0.2rem;
position: relative;
z-index: 100;
.info_top {
display: flex;
.top_icon {
width: 1rem;
background: #fff3e0;
font-size: 0.2rem;
font-weight: 400;
color: #e5a12f;
}
.top_for {
font-size: 0.2rem;
font-weight: 400;
color: #999999;
margin-left: 0.2rem;
}
}
.info_tit {
font-size: 0.28rem;
color: #333333;
margin-top: 0.12rem;
}
.info_tips {
font-size: 0.24rem;
font-weight: 400;
color: #666666;
margin-top: 0.2rem;
}
.info_time {
height: 1rem;
background: #f4f8fb;
margin-top: 0.2rem;
padding: 0.15rem 1.2rem;
display: flex;
align-items: center;
.time_left {
display: flex;
flex-direction: column;
align-items: center;
width: 0.96rem;
.left_tit {
font-size: 0.24rem;
font-weight: 400;
line-height: 30px;
color: #898989;
}
.left_con {
.con_num {
font-size: 0.28rem;
color: #333333;
}
.con_txt {
font-size: 0.2rem;
color: #898989;
}
}
}
.time_line {
width: 0px;
height: 0.48rem;
border: 1px solid #dddddd;
opacity: 1;
margin: 0 1.1rem;
}
}
}
}
</style>
src/modules/shop/views/Index.vue
浏览文件 @ 7dcfee18
...@@ -29,7 +29,8 @@ const handleTabClick = (tab: any) => { ...@@ -29,7 +29,8 @@ const handleTabClick = (tab: any) => {
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.main_shop { .is-pc {
.main_shop {
background: #f7f8fa; background: #f7f8fa;
margin: auto; margin: auto;
.shop_banner { .shop_banner {
...@@ -43,6 +44,7 @@ const handleTabClick = (tab: any) => { ...@@ -43,6 +44,7 @@ const handleTabClick = (tab: any) => {
margin: -36px auto; margin: -36px auto;
position: relative; position: relative;
z-index: 100; z-index: 100;
box-sizing: border-box;
.con_tab { .con_tab {
margin-bottom: 20px; margin-bottom: 20px;
:deep(.my-tabs) { :deep(.my-tabs) {
...@@ -92,5 +94,47 @@ const handleTabClick = (tab: any) => { ...@@ -92,5 +94,47 @@ const handleTabClick = (tab: any) => {
} }
} }
} }
}
}
.is-h5 {
padding: 0 0.3rem;
box-sizing: border-box;
.main_shop {
.shop_banner {
width: 100%;
}
}
:deep(.el-tabs__item) {
font-size: 0.28rem;
font-weight: 500;
line-height: 34px;
color: #eda020;
padding: 0 0.2rem;
box-sizing: border-box;
}
:deep(.el-tabs__nav-scroll) {
padding: 0 0.5rem;
}
}
:deep(.el-tabs__item.is-active) {
color: #eda020;
}
:deep(.el-tabs__active-bar) {
background: #eda020;
}
:deep(.el-tabs__nav-wrap::after) {
display: none;
} }
// :deep(.el-tabs__nav-next) {
// .el-icon {
// display: none;
// }
// }
// :deep(.el-tabs__nav-prev) {
// .el-icon {
// display: none;
// }
// }
</style> </style>
src/modules/shop/views/View.vue
浏览文件 @ 7dcfee18
<script lang="ts" setup> <script lang="ts" setup>
import DetailBanner from '../components/DetailBanner.vue'
import IncludeCourseCard from '../components/IncludeCourseCard.vue' import IncludeCourseCard from '../components/IncludeCourseCard.vue'
import CourseIntroduceCard from '../components/CourseIntroduceCard.vue' import CourseIntroduceCard from '../components/CourseIntroduceCard.vue'
import TeacherCard from '../components/TeacherCard.vue' import TeacherCard from '../components/TeacherCard.vue'
import RecommendCourse from '../components/RecommendCourse.vue' import RecommendCourse from '../components/RecommendCourse.vue'
import ShareDialog from '../components/ShareDialog.vue'
import ContactDialog from '../components/ContactDialog.vue'
import { useShopStore } from '@/stores/shop' import { useShopStore } from '@/stores/shop'
const shopStore = useShopStore() const shopStore = useShopStore()
const router = useRouter() const router = useRouter()
const route = useRoute() const route = useRoute()
...@@ -24,9 +22,9 @@ const recommendCourse = computed(() => { ...@@ -24,9 +22,9 @@ const recommendCourse = computed(() => {
} }
}) })
const buyDialogVisible = ref(false) const buyDialogVisible = ref(false)
const shareDialogVisible = ref(false) const payStatus: any = ref(route.query.payStatus)
const handleBuyCourse = () => { const handleBuyCourse = () => {
if (route.query.payStatus === '4' || shopStore.shopItem?.isBuy === true) { if (payStatus === '4' || shopStore.shopItem?.isBuy === true) {
window.open('https://paa-learning.ezijing.com') window.open('https://paa-learning.ezijing.com')
} else { } else {
if (shopStore.shopItem?.type === '课程包') { if (shopStore.shopItem?.type === '课程包') {
...@@ -36,50 +34,11 @@ const handleBuyCourse = () => { ...@@ -36,50 +34,11 @@ const handleBuyCourse = () => {
} }
} }
} }
// 分享
const handleShare = () => {
shareDialogVisible.value = true
}
</script> </script>
<template> <template>
<div class="course_detail"> <div class="course_detail">
<div class="detail_banner"> <DetailBanner :shopItem="shopStore.shopItem" :payStatus="payStatus" />
<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">{{ shopStore.shopItem?.title }}</div>
<div class="info_indentify">{{ shopStore.shopItem?.course_card }}</div>
<div class="info_tips">
<div class="tips_card">{{ shopStore.shopItem?.course_chapter }}</div>
<div class="tips_card">{{ shopStore.shopItem?.course_total_hour }}</div>
</div>
</div>
<div class="con_share">
<div class="share_btn" @click="handleShare">
<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_status" v-if="route.query.payStatus === '4' || shopStore.shopItem?.isBuy === true">已购买</div>
<div class="left_price" v-else>
<div class="price_icon">¥</div>
<div class="price_num">{{ shopStore.shopItem?.price }}</div>
</div>
<div class="left_tip tip1">支付安全</div>
<div class="left_tip tip2">课程回放</div>
</div>
<div class="buy_right" @click="handleBuyCourse">
{{ route.query.payStatus === '4' || shopStore.shopItem?.isBuy === true ? '立即学习' : '立即购买' }}
</div>
</div>
<div class="detail_con"> <div class="detail_con">
<div class="con_left"> <div class="con_left">
<div> <div>
...@@ -95,7 +54,7 @@ const handleShare = () => { ...@@ -95,7 +54,7 @@ const handleShare = () => {
</div> </div>
</div> </div>
<div class="detail_footer"> <div class="detail_footer">
<div class="left_status" v-if="route.query.payStatus === '4' || shopStore.shopItem?.isBuy === true">已购买</div> <div class="left_status" v-if="payStatus === '4' || shopStore.shopItem?.isBuy === true">已购买</div>
<template v-else> <template v-else>
<div class="footer_left"> <div class="footer_left">
<div class="left_tit">全部课程价格</div> <div class="left_tit">全部课程价格</div>
...@@ -107,148 +66,17 @@ const handleShare = () => { ...@@ -107,148 +66,17 @@ const handleShare = () => {
</div> </div>
</template> </template>
<div class="footer_btn" @click="handleBuyCourse"> <div class="footer_btn" @click="handleBuyCourse">
{{ route.query.payStatus === '4' || shopStore.shopItem?.isBuy === true ? '立即学习' : '立即购买' }} {{ payStatus === '4' || shopStore.shopItem?.isBuy === true ? '立即学习' : '立即购买' }}
</div> </div>
</div> </div>
<ShareDialog v-model:shareDialogVisible="shareDialogVisible" />
<ContactDialog v-model:buyDialogVisible="buyDialogVisible" />
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.course_detail { .is-pc {
.course_detail {
background: #f7f8fa; background: #f7f8fa;
padding-bottom: 30px; 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;
border-radius: 6px;
}
.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;
cursor: pointer;
.share_btn {
padding: 0 17px;
height: 30px;
background: #ffffff;
border-radius: 16px;
font-size: 14px;
font-weight: 400;
line-height: 30px;
color: #666666;
cursor: pointer;
}
}
}
}
.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_price {
display: flex;
.price_icon {
font-size: 24px;
font-weight: 500;
line-height: 34px;
color: #aa1941;
margin-top: 6px;
}
.price_num {
font-size: 40px;
font-weight: normal;
line-height: 34px;
color: #aa1941;
margin-left: 3px;
}
}
.left_status {
font-size: 24px;
font-weight: normal;
line-height: 34px;
color: #666666;
}
.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 { .detail_con {
width: 1200px; width: 1200px;
margin: 77px auto; margin: 77px auto;
...@@ -324,5 +152,6 @@ const handleShare = () => { ...@@ -324,5 +152,6 @@ const handleShare = () => {
cursor: pointer; cursor: pointer;
} }
} }
}
} }
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论