提交 3a2a3e17 authored 作者: matian's avatar matian

updates

上级 3f86da90
...@@ -20,7 +20,7 @@ export default [ ...@@ -20,7 +20,7 @@ export default [
course_chapter: '56 节课程', course_chapter: '56 节课程',
course_total_hour: '80 小时', course_total_hour: '80 小时',
course_hour: '20课时', course_hour: '20课时',
course_id: '6998547457529348096', course_id: '7000659282773409792',
class_id: '6998519782265847808' class_id: '6998519782265847808'
}, },
{ {
...@@ -74,7 +74,7 @@ export default [ ...@@ -74,7 +74,7 @@ export default [
course_chapter: '56 节课程', course_chapter: '56 节课程',
course_total_hour: '80 小时', course_total_hour: '80 小时',
course_hour: '20课时', course_hour: '20课时',
course_id: '6998547457529348096', course_id: '7000659282773409792',
class_id: '6998519782265847808' class_id: '6998519782265847808'
}, },
{ {
......
...@@ -78,7 +78,7 @@ textarea:focus { ...@@ -78,7 +78,7 @@ textarea:focus {
body { body {
min-width: 375px; min-width: 375px;
font-size: 14px; font-size: 14px;
background-color: #fff; /* background-color: #fff; */
font-family: 'Source Han Sans CN', 'PingFang SC', -apple-system, 'Microsoft YaHei', 'Helvetica', 'Arial', Verdana, font-family: 'Source Han Sans CN', 'PingFang SC', -apple-system, 'Microsoft YaHei', 'Helvetica', 'Arial', Verdana,
'Hiragino Sans GB', 'Wenquanyi Micro Hei', sans-serif; 'Hiragino Sans GB', 'Wenquanyi Micro Hei', sans-serif;
padding: 0; padding: 0;
...@@ -88,12 +88,16 @@ body { ...@@ -88,12 +88,16 @@ body {
@media (min-width: 768px) { @media (min-width: 768px) {
html { html {
font-size: 100px; font-size: 100px;
background-color: #F8F8F8;
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
html { html {
font-size: 50px; font-size: 50px;
background-color: #F8F8F8;
} }
} }
......
...@@ -4,7 +4,8 @@ import { useUserStore } from '@/stores/user' ...@@ -4,7 +4,8 @@ import { useUserStore } from '@/stores/user'
import AppNav from './Nav.vue' import AppNav from './Nav.vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { useDevice } from '@/composables/useDevice' import { useDevice } from '@/composables/useDevice'
const userStore = useUserStore() // const userStore = useUserStore()
const { mobile } = useDevice()
interface Props { interface Props {
fixed?: boolean fixed?: boolean
...@@ -12,8 +13,12 @@ interface Props { ...@@ -12,8 +13,12 @@ interface Props {
const props = defineProps<Props>() const props = defineProps<Props>()
const user = useUserStore() const user = useUserStore()
const LOGIN_URL = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(location.href)}` const LOGIN_URL = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(
const REGISTER_URL = `${import.meta.env.VITE_REGISTER_URL}?rd=${encodeURIComponent(location.href)}` location.href
)}`
const REGISTER_URL = `${
import.meta.env.VITE_REGISTER_URL
}?rd=${encodeURIComponent(location.href)}`
user.getUser() user.getUser()
const classNames = computed(() => { const classNames = computed(() => {
...@@ -35,17 +40,16 @@ const isScrolled = computed(() => { ...@@ -35,17 +40,16 @@ const isScrolled = computed(() => {
return y.value > 0 return y.value > 0
}) })
const handleStudy = () => { const handleStudy = () => {
if (userStore.courses.length > 0) { // if (userStore.courses.length > 0) {
window.open('https://paa-learning.ezijing.com') window.open('https://paa-learning.ezijing.com')
} else { // } else {
ElMessage.warning('请先购买课程,才能开始学习') // ElMessage.warning('请先购买课程,才能开始学习')
} // }
} }
const handleOrder = () => { const handleOrder = () => {
window.open('https://account-show.ezijing.com/payment') window.open('https://account-show.ezijing.com/payment')
} }
const { mobile } = useDevice()
function handleUser() { function handleUser() {
if (user.isLogin) { if (user.isLogin) {
window.open('https://account-show.ezijing.com/payment') window.open('https://account-show.ezijing.com/payment')
...@@ -63,14 +67,24 @@ function handleUser() { ...@@ -63,14 +67,24 @@ function handleUser() {
</div> </div>
<AppNav></AppNav> <AppNav></AppNav>
<div class="app-header-right" v-if="!mobile"> <div class="app-header-right" v-if="!mobile">
<div class="study" @click="handleStudy" v-if="user.isLogin">立即学习</div> <div
class="study"
@click="handleStudy"
v-if="user.isLogin && user.courses.length > 0"
>
立即学习
</div>
<template v-if="user.isLogin"> <template v-if="user.isLogin">
<div @click="handleOrder" style="cursor: pointer">你好,{{ user.userName }}</div> <div @click="handleOrder" style="cursor: pointer">
你好,{{ user.userName }}
</div>
<div class="app-header-logout" @click="handleLogout">退出</div> <div class="app-header-logout" @click="handleLogout">退出</div>
</template> </template>
<template v-else> <template v-else>
<a :href="LOGIN_URL" class="button-default">登录</a> <a :href="LOGIN_URL" class="button-default">登录</a>
<a class="button-primary" :href="REGISTER_URL" target="_blank">注册</a> <a class="button-primary" :href="REGISTER_URL" target="_blank"
>注册</a
>
</template> </template>
</div> </div>
<div class="app-header-right" v-else> <div class="app-header-right" v-else>
...@@ -95,13 +109,18 @@ function handleUser() { ...@@ -95,13 +109,18 @@ function handleUser() {
left: 0; left: 0;
right: 0; right: 0;
color: #fff; color: #fff;
background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%); background: linear-gradient(
0deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.5) 100%
);
.logo { .logo {
background: url('@/assets/images/logo_white.png') no-repeat; background: url('@/assets/images/logo_white.png') no-repeat;
background-size: contain; background-size: contain;
} }
.app-header-logout { .app-header-logout {
background: url('https://webapp-pub.ezijing.com/project_online/fi/logout_white.png') no-repeat left center; background: url('https://webapp-pub.ezijing.com/project_online/fi/logout_white.png')
no-repeat left center;
background-size: 18px; background-size: 18px;
} }
.button-default { .button-default {
...@@ -145,7 +164,8 @@ function handleUser() { ...@@ -145,7 +164,8 @@ function handleUser() {
} }
.app-header-logout { .app-header-logout {
background: url('https://webapp-pub.ezijing.com/project/saas/logout.png') no-repeat left center; background: url('https://webapp-pub.ezijing.com/project/saas/logout.png')
no-repeat left center;
background-size: 18px; background-size: 18px;
padding-left: 32px; padding-left: 32px;
margin-left: 40px; margin-left: 40px;
......
<script lang="ts" setup> <script lang="ts" setup>
// import { Swiper, SwiperSlide } from 'swiper/vue' import { useDevice } from '@/composables/useDevice'
// import 'swiper/css' const { mobile } = useDevice()
// const list = [{ url: 'https://webapp-pub.ezijing.com/project_online/paa/banner.jpg' }]
</script> </script>
<template> <template>
<div class="banner"> <div class="banner" v-if="!mobile">
<!-- <Swiper autoplay> <div class="banner_con">
<SwiperSlide v-for="(item, index) in list" :key="index"> --> <div class="banner_tit">PAA资产分析师</div>
<div class="banner_line"></div>
<div class="banner_desc">
PAA,即资产分析师(Private Assets
Analyst)认证体系是由隶属于清控紫荆教育(以清华大学五道口金融学院相关知识产权创设而成)的清控紫荆金融保险研究院和清控紫荆金融保险学院,针对金融保险企业绩优营销员、保险公司TOP
AGENT、TEAM-LEADER等受众研发设计的教学培训认证体系。
</div>
</div>
</div>
<div class="banner" v-else>
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/paa/banner_h5.png"
alt=""
/>
<div class="banner_con"> <div class="banner_con">
<div class="banner_tit">PAA资产分析师</div> <div class="banner_tit">PAA资产分析师</div>
<div class="banner_line"></div> <div class="banner_line"></div>
...@@ -16,43 +28,78 @@ ...@@ -16,43 +28,78 @@
AGENT、TEAM-LEADER等受众研发设计的教学培训认证体系。 AGENT、TEAM-LEADER等受众研发设计的教学培训认证体系。
</div> </div>
</div> </div>
<!-- </SwiperSlide>
</Swiper> -->
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss">
.banner { .is-pc {
width: 100%; .banner {
background: url('https://webapp-pub.ezijing.com/project_online/paa/banner.jpg') no-repeat center; width: 100%;
background-size: 100% 100%; background: url('https://webapp-pub.ezijing.com/project_online/paa/banner.jpg')
height: 700px; no-repeat center;
.banner_con { background-size: 100% 100%;
width: 1200px; height: 700px;
margin: auto; .banner_con {
text-align: left; width: 1200px;
padding-top: 253px; margin: auto;
box-sizing: border-box; text-align: left;
.banner_tit { padding-top: 253px;
font-size: 56px; box-sizing: border-box;
font-weight: bold; .banner_tit {
line-height: 50px; font-size: 56px;
color: #886426; font-weight: bold;
line-height: 50px;
color: #886426;
}
.banner_line {
width: 67px;
height: 2px;
background: #886426;
margin-top: 33px;
}
.banner_desc {
margin-top: 40px;
width: 650px;
font-size: 18px;
font-weight: 400;
line-height: 36px;
color: #886426;
text-align: justify;
}
} }
.banner_line { }
width: 67px; }
height: 2px; .is-h5 {
background: #886426; .banner {
margin-top: 33px; margin: 0.3rem;
height: 7.4rem;
position: relative;
img {
width: 100%;
height: 100%;
position: absolute;
} }
.banner_desc { .banner_con {
margin-top: 40px; position: absolute;
width: 650px; padding: 0.86rem 1.2rem 0 0.4rem;
font-size: 18px;
font-weight: 400;
line-height: 36px;
color: #886426; color: #886426;
text-align: justify; .banner_tit {
font-size: 0.56rem;
font-weight: 800;
}
.banner_line {
width: 0.67rem;
height: 0.02rem;
background: #886426;
margin-top: 0.33rem;
}
.banner_desc {
font-size: 0.24rem;
line-height: 0.46rem;
font-weight: 400;
margin-top: 0.4rem;
text-align: justify;
}
} }
} }
} }
......
...@@ -14,7 +14,12 @@ const mainList: Array<{ img: string; tit: string }> = [ ...@@ -14,7 +14,12 @@ const mainList: Array<{ img: string; tit: string }> = [
tit: '灵活的学习模式' tit: '灵活的学习模式'
} }
] ]
const mainList1: Array<{ img: string; img1: string; tit: string; desc: string }> = [ const mainList1: Array<{
img: string
img1: string
tit: string
desc: string
}> = [
{ {
img: 'https://webapp-pub.ezijing.com/project_online/paa/main4_1.png', img: 'https://webapp-pub.ezijing.com/project_online/paa/main4_1.png',
img1: 'https://webapp-pub.ezijing.com/project_online/paa/main4_2.png', img1: 'https://webapp-pub.ezijing.com/project_online/paa/main4_2.png',
...@@ -60,102 +65,189 @@ const mainList1: Array<{ img: string; img1: string; tit: string; desc: string }> ...@@ -60,102 +65,189 @@ const mainList1: Array<{ img: string; img1: string; tit: string; desc: string }>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.main { .is-pc {
.main_con { .main {
width: 1200px; .main_con {
margin: -70px auto; width: 1200px;
background: #ffffff; margin: -70px auto;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15); background: #ffffff;
border-radius: 16px; box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
padding: 33px 0 26px 0; border-radius: 16px;
padding: 33px 0 26px 0;
.con_tit { .con_tit {
text-align: center; text-align: center;
font-size: 22px; font-size: 22px;
font-weight: bold; font-weight: bold;
color: #333333; color: #333333;
} }
.con_list { .con_list {
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 19px;
.list_item {
display: flex; display: flex;
justify-content: space-around;
align-items: center; align-items: center;
.item_tit { margin-top: 19px;
margin-left: 15px; .list_item {
font-size: 20px; display: flex;
font-weight: 400; align-items: center;
line-height: 50px; .item_tit {
color: #333333; margin-left: 15px;
font-size: 20px;
font-weight: 400;
line-height: 50px;
color: #333333;
}
}
}
}
.main_con1 {
width: 1200px;
margin: auto;
padding: 144px 10px 50px 0;
box-sizing: border-box;
.con1_list {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 85px;
.list_item {
width: 310px;
height: 367px;
background: #ffffff;
border-radius: 4px;
border: 1px solid #dadada;
padding-top: 104px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
.item_img1 {
display: none;
}
.item_line {
width: 50px;
height: 2px;
background: #aa1941;
margin: 41px auto;
text-align: center;
}
.item_tit {
font-size: 24px;
font-weight: 500;
line-height: 34px;
color: #333333;
}
.item_desc {
display: none;
font-size: 20px;
font-weight: 400;
line-height: 50px;
color: #ffffff;
}
&:hover {
background: #c1ab85;
padding-top: 84px;
.item_img {
display: none;
}
.item_img1 {
display: block;
}
.item_line {
background: #ffffff;
}
.item_tit {
color: #ffffff;
}
.item_desc {
display: block;
}
}
} }
} }
} }
} }
.main_con1 { }
width: 1200px; .is-h5 {
margin: auto; .main {
padding: 144px 10px 50px 0; .main_con {
box-sizing: border-box; margin: -1.37rem 0.6rem;
.con1_list { padding: 0.4rem 0 0.56rem;
display: grid; background: #ffffff;
grid-template-columns: repeat(3, 1fr); box-shadow: 0px 3px 18px rgba(0, 0, 0, 0.15);
grid-column-gap: 85px; border-radius: 0.16rem;
.list_item { text-align: center;
width: 310px; position: relative;
height: 367px; z-index: 1000;
background: #ffffff; .con_tit {
border-radius: 4px; color: #333333;
border: 1px solid #dadada; font-size: 0.32rem;
padding-top: 104px; font-weight: bold;
box-sizing: border-box; }
.con_list {
display: flex; display: flex;
flex-direction: column; justify-content: space-around;
align-items: center; margin-top: 0.45rem;
cursor: pointer; .list_item {
.item_img1 { .item_img {
display: none; width: 1rem;
height: 1rem;
}
.img_tit {
font-size: 0.24rem;
margin-top: 0.2rem;
}
} }
.item_line { }
width: 50px; }
height: 2px; .main_con1 {
background: #aa1941; margin: 2rem 0 0 0.3rem;
margin: 41px auto; .con1_list {
text-align: center; display: flex;
overflow-x: scroll;
.list_item:nth-child(2) {
.item_tit {
margin-top: 0.45rem !important;
}
} }
.item_tit { .list_item:nth-child(1) {
font-size: 24px; .item_tit {
font-weight: 500; margin-top: 0.55rem !important;
line-height: 34px; }
color: #333333;
} }
.item_desc { .list_item:nth-child(3) {
display: none; .item_tit {
font-size: 20px; margin-top: 0.5rem !important;
font-weight: 400; }
line-height: 50px;
color: #ffffff;
} }
&:hover { .list_item {
background: #c1ab85; width: 3.1rem;
padding-top: 84px; background: #ffffff;
text-align: center;
margin-right: 0.2rem;
padding: 0.79rem 0.59rem 0.88rem;
border-radius: 0.12rem;
.item_img { .item_img {
display: none; width: 0.8rem;
} }
.item_img1 { .item_img1 {
display: block; display: none;
} }
.item_line { .item_line {
background: #ffffff; display: none;
} }
.item_tit { .item_tit {
color: #ffffff; font-size: 0.28rem;
color: #333333;
font-weight: 500;
} }
.item_desc { .item_desc {
display: block; white-space: nowrap;
color: #666666;
font-size: 0.24rem;
margin-top: 0.25rem;
} }
} }
} }
......
...@@ -4,11 +4,7 @@ import Main from '../components/Main.vue' ...@@ -4,11 +4,7 @@ import Main from '../components/Main.vue'
import ProjectSystem from '../components/ProjectSystem.vue' import ProjectSystem from '../components/ProjectSystem.vue'
import Course from '../components/Course.vue' import Course from '../components/Course.vue'
import ExamProcess from '../components/ExamProcess.vue' import ExamProcess from '../components/ExamProcess.vue'
import Teacher from '../components/Teacher.vue' import Teacher from '../components/Teacher.vue'
// import Knowledge from '../components/Knowledge.vue'
// import Brand from '../components/Brand.vue'
// import Contact from '../components/Contact.vue'
</script> </script>
<template> <template>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论