Skip to content

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

h5部分页面开发

上级 5ff8b740
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 674 行增加 和 122 行删除
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 {
...@@ -102,4 +110,54 @@ body { ...@@ -102,4 +110,54 @@ body {
} }
html{ html{
scroll-padding-top: 90px; scroll-padding-top: 90px;
} }
\ No newline at end of file /* 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="main_con"> <div class="main1">
<img src="https://webapp-pub.ezijing.com/project_online/fi/main1.png" alt="" /> <div class="main_con">
<div class="con_content"> <img src="https://webapp-pub.ezijing.com/project_online/fi/main1.png" alt="" />
清控紫荆金融保险研究院&清控紫荆金融保险学院，基于政策指导，通过汇聚清华等国内外高校、行业骨干企业、行业研究机构的科研资源与实践成果，打造国内顶尖、国际卓越的金融保险智库，达到“产学研”的深度融合。 <div class="con_content">
清控紫荆金融保险研究院&清控紫荆金融保险学院，基于政策指导，通过汇聚清华等国内外高校、行业骨干企业、行业研究机构的科研资源与实践成果，打造国内顶尖、国际卓越的金融保险智库，达到“产学研”的深度融合。
</div>
</div> </div>
</div> </div>
</div> <div class="main2">
<div class="main1"> <div class="main_con1">
<div class="main_con1"> <div class="con_content">
<div class="con_content"> 通过创立通晓金融保险理论与行业实务双方面的金融保险课题研发团队，针对金融保险不同领域、不同阶段的学习需求，为金融从业者提供专业学习契机、为金融机构培育高素质国际化人才。
通过创立通晓金融保险理论与行业实务双方面的金融保险课题研发团队，针对金融保险不同领域、不同阶段的学习需求，为金融从业者提供专业学习契机、为金融机构培育高素质国际化人才。 </div>
<img src="https://webapp-pub.ezijing.com/project_online/fi/main3.png" alt="" />
</div> </div>
<img src="https://webapp-pub.ezijing.com/project_online/fi/main3.png" alt="" />
</div> </div>
</div> </div>
<div class="main2"> <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 {
padding: 70px 0 75px 0; .main1 {
.main_con { padding: 70px 0 75px 0;
width: 1200px; .main_con {
margin: 0 auto; width: 1200px;
display: flex; margin: 0 auto;
justify-content: space-between; display: flex;
align-items: center; justify-content: space-between;
img { align-items: center;
height: 290px; img {
height: 290px;
}
.con_content {
background: #ffffff;
font-size: 20px;
font-weight: 400;
line-height: 40px;
color: #333333;
margin-left: 53px;
text-align: justify;
}
} }
.con_content { }
background: #ffffff; .main2 {
font-size: 20px; background: #f5f5f5;
font-weight: 400; padding: 70px 0 75px 0;
line-height: 40px;
color: #333333; .main_con1 {
margin-left: 53px; width: 1200px;
text-align: justify; margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
img {
height: 290px;
}
.con_content {
font-size: 20px;
font-weight: 400;
line-height: 40px;
color: #333333;
margin-right: 53px;
text-align: justify;
}
}
}
.main3 {
height: 308px;
background: url('https://webapp-pub.ezijing.com/project_online/fi/main2.png') no-repeat center;
background-size: 100% 100%;
font-size: 24px;
font-weight: 400;
line-height: 40px;
color: #ffffff;
text-align: center;
padding-top: 98px;
box-sizing: border-box;
span {
font-size: 30px;
font-weight: bold;
} }
} }
} }
.main1 {
background: #f5f5f5;
padding: 70px 0 75px 0;
.main_con1 { .is-h5 {
width: 1200px; overflow-x: auto;
margin: 0 auto; :deep(.swiper-slide) {
display: flex; width: 6.1rem;
justify-content: space-between; height: 6.44rem;
align-items: center; background: red;
img { border-radius: 12px;
height: 290px; }
.main_list {
padding: 0.1rem;
.list_img {
width: 5.7rem;
height: 3.4rem;
object-fit: cover;
} }
.list_con {
width: 5.7rem;
.con_content { font-size: 0.24rem;
font-size: 20px;
font-weight: 400; font-weight: 400;
line-height: 40px; line-height: 2;
color: #333333; color: #333333;
margin-right: 53px; margin-top: 0.37rem;
text-align: justify;
} }
} }
} .main3 {
.main2 { height: 3.97rem;
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%; font-size: 0.26rem;
font-size: 24px; font-weight: 400;
font-weight: 400; line-height: 2;
line-height: 40px; color: #ffffff;
color: #ffffff; text-align: justify;
text-align: center; box-sizing: border-box;
padding-top: 98px; padding: 0.4rem 0.4rem 0 0.4rem;
box-sizing: border-box; margin-top: 0.4rem;
span { span {
font-size: 30px; font-size: 0.15rem;
font-weight: bold; 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/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,68 +29,112 @@ const handleTabClick = (tab: any) => { ...@@ -29,68 +29,112 @@ const handleTabClick = (tab: any) => {
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.main_shop { .is-pc {
background: #f7f8fa; .main_shop {
margin: auto; background: #f7f8fa;
.shop_banner { margin: auto;
width: 100%; .shop_banner {
height: 537px; width: 100%;
object-fit: cover; height: 537px;
} object-fit: cover;
.shop_con { }
width: 1200px; .shop_con {
padding: 0 0 40px 0; width: 1200px;
margin: -36px auto; padding: 0 0 40px 0;
position: relative; margin: -36px auto;
z-index: 100; position: relative;
.con_tab { z-index: 100;
margin-bottom: 20px; box-sizing: border-box;
:deep(.my-tabs) { .con_tab {
text-align: center; margin-bottom: 20px;
box-sizing: border-box; :deep(.my-tabs) {
.el-tabs__active-bar, text-align: center;
.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; 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;
}
&.is-active { .el-tabs__item {
background-color: #e8c484; display: flex;
color: #ffffff; 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;
}
} }
} }
} }
} }
} }
} }
.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>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论