Skip to content

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

updates

上级 5d038661
显示空白字符变更
内嵌 并排
正在显示 包含 870 行增加 和 78 行删除
src/components/layout/ApplyForm.vue 0 → 100644
浏览文件 @ da6e909b
<template>
<div class="app-apply-form">
<h2 class="title">报名咨询</h2>
<div class="form">
<div class="form-item">
<input
type="text"
class="form-input"
placeholder="请输入您的名字"
v-model="ruleForm.name"
/>
</div>
<div class="form-item">
<input
type="number"
class="form-input"
placeholder="请输入您的电话"
maxlength="11"
v-model="ruleForm.phone"
/>
</div>
<div class="form-item">
<input
type="text"
class="form-input"
placeholder="请输入验证码"
maxlength="4"
v-model="phoneCode"
/>
<input
type="button"
class="form-button"
:disabled="codeButtonDisabled"
:value="buttonText"
@click="onSendCode"
/>
</div>
<div class="form-item">
<input
type="button"
value="立即报名"
class="form-button"
@click="onSbumit"
/>
</div>
</div>
</div>
</template>
<script>
import * as api from '@/api/base'
export default {
data() {
return {
ruleForm: {
name: '',
phone: '',
project_id: '5007',
channel: ''
},
phoneCode: '',
codeButtonDisabled: false,
timer: null,
disabledTime: 60
}
},
mounted() {
this.ruleForm.channel = window.localStorage.getItem('channel_num') || 19960
},
computed: {
buttonText() {
return this.codeButtonDisabled ? `${this.disabledTime}s` : '获取验证码'
}
},
methods: {
onSbumit() {
if (!this.ruleForm.name) {
this.$notify('请输入您的姓名')
return
}
if (!this.ruleForm.phone || !/^1[3-9]\d{9}$/.test(this.ruleForm.phone)) {
this.$notify('请输入正确的手机号')
return
}
if (!this.phoneCode) {
this.$notify('请输入短信验证码')
return
}
this.checkPhoneCode().then(this.handleSubmit)
},
handleSubmit() {
const params = { ...this.ruleForm }
api.submit(params).then((response) => {
// this.$notify({ type: 'success', message: response.message })
this.$dialog.alert({ message: response.message }).then(() => {
this.$emit('success')
})
})
},
// 校验短信验证码
checkPhoneCode() {
return api.checkCode({
account: this.ruleForm.phone,
code: this.phoneCode
})
},
onSendCode() {
if (!this.ruleForm.phone || !/^1[3-9]\d{9}$/.test(this.ruleForm.phone)) {
this.$notify('请输入正确的手机号')
return
}
this.sendCode()
},
// 发送验证码
sendCode() {
this.setTimer()
api
.sendCode({ account: this.ruleForm.phone })
.then(() => {
this.$notify({ type: 'success', message: '验证码发送成功，注意查收' })
})
.catch(() => {
this.clearTimer()
})
},
setTimer() {
this.codeButtonDisabled = true
this.disabledTime = 60
this.timer = setInterval(() => {
this.disabledTime--
if (this.disabledTime <= 0) {
this.clearTimer()
}
}, 1000)
},
clearTimer() {
this.codeButtonDisabled = false
this.timer && clearInterval(this.timer)
}
},
destroyed() {
this.clearTimer()
}
}
</script>
<style lang="scss" scoped>
.app-apply-form {
min-width: 290px;
position: relative;
z-index: 3000;
.title {
padding: 30px 0;
font-size: 20px;
color: #fff;
text-align: center;
}
}
.form-item {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.form-input {
padding: 0 10px;
width: 100%;
height: 38px;
background-color: #fff;
box-sizing: border-box;
border: none;
}
.form-select {
position: relative;
padding: 0 10px;
width: 100%;
height: 38px;
background: #fff
url('https://webapp-pub.ezijing.com/www/h5/images/icon_arrows.png')
no-repeat;
background-position: right 0.7em top 50%, 0 0;
background-size: 30px 30px;
box-sizing: border-box;
border: none;
}
.form-button {
padding: 0 10px;
width: 100%;
height: 38px;
font-size: 16px;
color: #aa1941;
background-color: #ffd61b;
box-sizing: border-box;
border: none;
cursor: pointer;
}
.form-input + .form-button {
margin-left: 10px;
}
</style>
\ No newline at end of file
src/components/layout/Footer.vue
浏览文件 @ da6e909b
...@@ -9,10 +9,14 @@ ...@@ -9,10 +9,14 @@
<!-- <p><a href="#product">课程介绍</a><a href="#teacher">师资团队</a><a href="#apply">认证流程</a></p> --> <!-- <p><a href="#product">课程介绍</a><a href="#teacher">师资团队</a><a href="#apply">认证流程</a></p> -->
</div> </div>
<div class="app-footer-left__bottom"> <div class="app-footer-left__bottom">
<div> <div class="h5_top">
<div class="top_left top_con">
<div class="tit">友情链接</div> <div class="tit">友情链接</div>
<div class="con"> <div class="con">
<a href="http://www.cbirc.gov.cn/cn/view/pages/index/index.html" target="_blank"> <a
href="http://www.cbirc.gov.cn/cn/view/pages/index/index.html"
target="_blank"
>
<div class="con_link">中国银行保险监督管理委员会</div> <div class="con_link">中国银行保险监督管理委员会</div>
</a> </a>
<a href="http://www.moe.gov.cn/" target="_blank"> <a href="http://www.moe.gov.cn/" target="_blank">
...@@ -24,12 +28,12 @@ ...@@ -24,12 +28,12 @@
<a href="https://www.ezijing.com/" target="_blank"> <a href="https://www.ezijing.com/" target="_blank">
<div class="con_link">清控紫荆教育</div> <div class="con_link">清控紫荆教育</div>
</a> </a>
<a href="https://paa.ezijing.com/" target="_blank"> <a href="https://fi.ezijing.com/" target="_blank">
<div class="con_link">清控紫荆金保</div> <div class="con_link">清控紫荆金保</div>
</a> </a>
</div> </div>
</div> </div>
<div> <div class="top_right top_con">
<div class="tit">项目产品</div> <div class="tit">项目产品</div>
<div class="con"> <div class="con">
<a href="https://prp.ezijing.com/" target="_blank"> <a href="https://prp.ezijing.com/" target="_blank">
...@@ -37,66 +41,65 @@ ...@@ -37,66 +41,65 @@
</a> </a>
</div> </div>
</div> </div>
</div>
<div class="h5_bottom">
<div> <div>
<div class="tit">联系我们</div> <div class="tit">联系我们</div>
<div class="con"> <div class="con">
<dl> <dl>
<dt>地址</dt> <dt>地址：</dt>
<dd> <dd>
北京市海淀区中关村东路1号院清华科技园7号楼威盛大厦5层<br />&nbsp;&nbsp;&nbsp;&nbsp;深圳市福田区博今商务广场A座22层 北京市海淀区中关村东路1号院清华科技园7号楼威盛大厦5层<br />深圳市福田区博今商务广场A座22层
</dd> </dd>
</dl> </dl>
<dl> <dl>
<dt>邮箱</dt> <dt>邮箱：</dt>
<dd><a href="mailto:PAA@ezijing.com" class="mail">PAA@ezijing.com</a></dd> <dd>
<a href="mailto:THHZJFI@ezijing.com" class="mail"
>THHZJFI@ezijing.com</a
>
</dd>
</dl> </dl>
<!-- <div class="con_link">
地 址：北京市海淀区中关村东路1号院清华科技园7号楼5层
<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;深圳市福田区博今商务广场A座22层
</div>
<div class="con_link">邮箱：THHZJFI@ezijing.com</div> -->
</div>
</div>
</div> </div>
<!-- pc -->
<!-- <div class="app-footer-link app-footer-link-pc">
<ul class="app-footer-link-item">
<li>清控紫荆金融保险学院</li>
<li>清控紫荆金融保险研究院</li>
</ul>
</div> -->
</div> </div>
<!-- <div class="app-footer-contact">
<h2>联系我们</h2>
<dl>
<dt>地址</dt>
<dd>北京市海淀区中关村东路1号院清华科技园7号楼威盛大厦5层</dd>
</dl>
<dl>
<dt>邮箱</dt>
<dd><a href="mailto:service@ezijing.com" class="mail">service@ezijing.com</a></dd>
</dl>
</div> -->
<div class="app-footer-qrcode"> <div class="app-footer-qrcode">
<img src="https://webapp-pub.ezijing.com/project_online/fi/qrcode.png" width="120" /> <img
src="https://webapp-pub.ezijing.com/project_online/fi/qrcode.png"
width="120"
class="code"
/>
<div class="app-footer-qrcode-content"> <div class="app-footer-qrcode-content">
<img src="https://zws-imgs-pub.ezijing.com/static/public/184235d9f6edbb39d52fc6f77339ff5b.png" width="20" /> <img
src="https://zws-imgs-pub.ezijing.com/static/public/184235d9f6edbb39d52fc6f77339ff5b.png"
width="20"
class="icon"
/>
<span>微信公众号</span> <span>微信公众号</span>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div>
</footer> </footer>
<div class="app-copyright"> <div class="app-copyright">
<div class="app-copyright-inner"> <div class="app-copyright-inner">
<span>Copyright © 2022 Zijing Education. All rights reserved. </span> <span
<a target="_blank" href="https://tsm.miit.gov.cn/dxxzsp/">京ICP证150431号 </a> >Copyright © 2022 Zijing Education. All rights reserved.
<a target="_blank" href="https://tsm.miit.gov.cn/dxxzsp/"
>京ICP证150431号
</a>
</span>
<a <a
target="_blank" target="_blank"
href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802023681" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802023681"
style="margin: 0 60px" style="margin: 0 60px"
> >
<img src="https://zws-imgs-pub.ezijing.com/e0a0ec47dfdfc1e0797b1d5254021d00.png" /> <img
京公网安备 11010802023681号 src="https://zws-imgs-pub.ezijing.com/e0a0ec47dfdfc1e0797b1d5254021d00.png"
/>
<span> 京公网安备 11010802023681号</span>
</a> </a>
<!-- <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">京ICP备15016866号-1</a> --> <!-- <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">京ICP备15016866号-1</a> -->
<span>清控紫荆（北京）教育科技股份有限公司</span> <span>清控紫荆（北京）教育科技股份有限公司</span>
...@@ -127,7 +130,8 @@ ...@@ -127,7 +130,8 @@
} }
} }
} }
.app-footer-left__top { .is-pc {
.app-footer-left__top {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 30px; margin-bottom: 30px;
...@@ -139,10 +143,16 @@ ...@@ -139,10 +143,16 @@
margin: 0 18px; margin: 0 18px;
} }
} }
} }
.app-footer-left__bottom { .app-footer-left__bottom {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.h5_top {
display: flex;
.top_right {
margin-left: 60px;
}
}
.tit { .tit {
font-size: 16px; font-size: 16px;
color: #ffffff; color: #ffffff;
...@@ -165,7 +175,7 @@ ...@@ -165,7 +175,7 @@
font-weight: 300; font-weight: 300;
} }
dt { dt {
width: 60px; width: 40px;
text-align-last: justify; text-align-last: justify;
white-space: nowrap; white-space: nowrap;
font-size: 14px; font-size: 14px;
...@@ -173,24 +183,23 @@ ...@@ -173,24 +183,23 @@
color: #ffffff; color: #ffffff;
font-weight: 300; font-weight: 300;
} }
dd {
&::before {
content: '：';
} }
.h5_bottom {
display: flex;
align-items: flex-start;
} }
} }
} .app-footer-link {
.app-footer-link {
display: flex; display: flex;
} }
.app-footer-link-item { .app-footer-link-item {
font-size: 20px; font-size: 20px;
line-height: 32px; line-height: 32px;
color: #fff; color: #fff;
letter-spacing: 3px; letter-spacing: 3px;
} }
.app-footer-contact { .app-footer-contact {
h2 { h2 {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
...@@ -212,12 +221,12 @@ ...@@ -212,12 +221,12 @@
content: '：'; content: '：';
} }
} }
} }
.app-footer-qrcode { .app-footer-qrcode {
margin-left: 99px; margin-left: 99px;
margin-top: 72px; // margin-top: 72px;
} }
.app-footer-qrcode-content { .app-footer-qrcode-content {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
...@@ -225,6 +234,7 @@ ...@@ -225,6 +234,7 @@
span { span {
margin-left: 10px; margin-left: 10px;
} }
}
} }
.app-copyright { .app-copyright {
background-color: #242424; background-color: #242424;
...@@ -237,37 +247,134 @@ ...@@ -237,37 +247,134 @@
color: #999; color: #999;
text-align: center; text-align: center;
} }
.app-footer-link-h5 {
display: none; // .app-footer-link-h5 {
} // display: none;
// }
.is-h5 { .is-h5 {
.app-footer-link-pc { .app-footer {
display: none; border-top: 1px solid #898989;
border-bottom: 1px solid #898989;
background-color: #242424;
padding-bottom: 0.5rem;
.app-footer-inner {
padding: 0.2rem;
} }
.app-footer-link-h5 {
.app-copyright-inner {
display: flex; display: flex;
}
.app-footer-inner {
padding: 0.5rem 0.45rem;
flex-direction: column; flex-direction: column;
} }
}
.app-footer-left { .app-footer-left {
.app-name { .app-footer-left__top {
font-size: 0.3rem; .app-footer-logo {
line-height: 0.3rem; img {
width: 1.92rem;
height: 0.48rem;
display: block;
} }
} }
.app-footer-link-item {
font-size: 0.22rem;
} }
.app-footer-contact { }
margin: 0.1rem 0; .app-footer-left__top {
h2 { .app-footer-logo {
img {
display: none; display: none;
} }
} }
}
.app-footer-left__bottom {
display: flex;
flex-direction: column;
margin-top: 0.3rem;
.h5_top {
display: flex;
justify-content: space-around;
.tit {
font-size: 0.22rem;
white-space: nowrap;
color: #ffffff;
font-weight: 500;
}
.con {
margin-top: 0.2rem;
.con_link {
font-size: 0.2rem;
line-height: 0.36rem;
white-space: nowrap;
color: #ffffff;
font-weight: 300;
}
}
.top_right {
margin-left: 0.8rem;
}
}
.h5_bottom {
display: flex;
align-items: center;
margin-top: 0.37rem;
.tit {
font-size: 0.22rem;
white-space: nowrap;
color: #ffffff;
font-weight: 500;
}
.con {
width: 5.12rem;
margin-top: 0.2rem;
dl {
display: flex;
line-height: 0.36rem;
font-size: 0.18rem;
color: #ffffff;
font-weight: 300;
}
dt {
text-align-last: justify;
white-space: nowrap;
font-size: 0.2rem;
color: #ffffff;
font-weight: 300;
line-height: 0.36rem;
}
}
.app-footer-qrcode { .app-footer-qrcode {
display: none; margin-left: 0.8rem;
.code {
width: 1.26rem;
height: 1.26rem;
}
.icon {
width: 0.21rem;
}
span {
font-size: 0.2rem;
white-space: nowrap;
color: #ffffff;
}
}
}
}
.app-copyright {
.app-copyright-inner {
line-height: 3;
font-size: 0.2rem;
font-weight: 300;
color: #999999;
text-align: center;
span {
display: inline-block;
white-space: nowrap;
}
}
}
.app-footer-qrcode {
display: block;
} }
} }
</style> </style>
src/components/layout/Index.vue
浏览文件 @ da6e909b
<script setup lang="ts"> <script setup lang="ts">
import AppHeader from './Header.vue' import AppHeader from './Header.vue'
import AppFooter from './Footer.vue' import AppFooter from './Footer.vue'
import RightAside from './RightAside.vue'
import RightAsideH5 from './RightAsideH5.vue'
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
const route = useRoute()
interface Props { interface Props {
fixed?: boolean fixed?: boolean
} }
...@@ -13,6 +18,16 @@ const props = defineProps<Props>() ...@@ -13,6 +18,16 @@ const props = defineProps<Props>()
<section class="app-layout-container"> <section class="app-layout-container">
<router-view :key="$route.fullPath"></router-view> <router-view :key="$route.fullPath"></router-view>
</section> </section>
<template
v-if="(!mobile && route.path !== '/shop/pay') || route.path !== '/shop'"
>
<AppFooter></AppFooter> <AppFooter></AppFooter>
</template>
<template v-if="!mobile">
<RightAside />
</template>
<template v-else>
<RightAsideH5 />
</template>
</div> </div>
</template> </template>
src/components/layout/RightAside.vue 0 → 100644
浏览文件 @ da6e909b
<script >
import { sendCode, checkCode, postNes } from '@/api/base'
const MOBILE_REG =
/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
export default {
data() {
return {
tabBtnActive: false,
tabBtnTarget: '',
projectName: '金融硕士保研项目',
sendCode: '',
isBtnDisabled: false,
formInfo: {
name: '',
phone: '',
projectId: '5007'
}
}
},
methods: {
handleMsOver(type) {
this.tabBtnActive = true
if (type !== '') {
this.tabBtnTarget = type
}
},
handleMsOut(type) {
this.tabBtnActive = false
},
submitEnroll() {
let flag = true
Object.keys(this.formInfo).map((item) => {
if (this.formInfo[item] === '') {
flag = false
}
})
if (!flag || !this.sendCode) {
this.$message('请完善信息')
} else if (!MOBILE_REG.test(this.formInfo.phone)) {
this.$message('手机号格式错误')
} else {
this.checkSendcode()
.then((res) => {
return this.enrollQuery()
})
.then((res) => {
this.$message({
type: 'success',
message: '报名成功',
duration: 5000
})
})
.catch((err) => {
if (err && err.type === 'checkcode') this.$message.error(err.msg)
else this.$message.error(err.msg || '报名提交失败')
})
}
},
enrollQuery() {
const params = {
channel: localStorage.getItem('channel_num') || 19962,
project_id: this.formInfo.projectId,
name: this.formInfo.name,
phone: this.formInfo.phone
}
return new Promise((resolve, reject) => {
postNes(params).then((res) => {
if (res && res.status === 200 && res.error === 0) {
resolve({
type: 'enroll',
state: 'success'
})
} else {
reject({
type: 'enroll',
state: 'fail',
msg: res.message || '报名提交失败'
})
}
})
})
},
getSendCode() {
if (!this.formInfo.phone) {
this.$message('手机号不能为空')
} else if (!MOBILE_REG.test(this.formInfo.phone)) {
this.$message('手机号格式错误')
} else {
const param = {
account: this.formInfo.phone,
service: 'ezijing.com'
}
sendCode(param)
.then((res) => {
this.btnDisabledTimer()
if (res && res.code === 0)
this.$message.success('验证码已发送，请注意查收')
else this.$message.error('获取验证码失败，请稍后再试')
})
.catch(() => {})
}
},
checkSendcode() {
const checkCodeParam = {
account: this.formInfo.phone,
code: this.sendCode,
countryCode: 86
}
return new Promise((resolve, reject) => {
checkCode(checkCodeParam).then((res) => {
if (res && res.code === 0) {
res.type = 'checkcode'
resolve({
type: 'checked',
state: 'success'
})
} else {
reject({
type: 'checked',
state: 'fail',
msg: res.msg || '验证码检测失败'
})
}
})
})
},
btnDisabledTimer() {
this.isBtnDisabled = true
let count = 60
document.querySelector('#checkedCode').innerHTML = count + 's'
const timer = setInterval(() => {
count--
if (count < 1) {
clearInterval(timer)
this.isBtnDisabled = false
document.querySelector('#checkedCode').innerHTML = '获取验证码'
} else {
document.querySelector('#checkedCode').innerHTML = count + 's'
}
}, 1000)
}
}
}
</script>
<template>
<div class="right_bar">
<ul class="tab_btns">
<li
:class="{
enroll: true,
active: tabBtnActive && tabBtnTarget === 'enroll'
}"
@mouseenter="handleMsOver('enroll')"
@mouseleave="handleMsOut"
>
<p>报名咨询</p>
</li>
</ul>
<div
id="show-enroll"
v-show="tabBtnActive"
class="tab_cont"
@mouseenter="handleMsOver('')"
@mouseleave="handleMsOut"
>
<div class="enroll_cont" id="show-enroll-content">
<h5>报名咨询</h5>
<div class="p">
<el-input
v-model="formInfo.name"
placeholder="请输入您的名字"
size="small"
></el-input>
</div>
<div class="p">
<el-input
v-model="formInfo.phone"
placeholder="请输入您的电话"
size="small"
></el-input>
</div>
<div class="p sendcode">
<el-input
v-model="sendCode"
placeholder="请输入验证码"
size="small"
></el-input
><el-button
class="btn"
:disabled="isBtnDisabled"
id="checkedCode"
@click="getSendCode"
>
获取验证码
</el-button>
</div>
<div class="p">
<el-button style="width: 100%" @click="submitEnroll"
>立即报名</el-button
>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.right_bar {
position: fixed;
top: 50%;
right: 10px;
z-index: 2000;
transform: translateY(-50%);
.tab_btns {
width: 100px;
font-size: 12px;
border-radius: 4px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
overflow: hidden;
li {
padding: 70px 0 18px;
color: #999;
background-position: center 18px;
background-repeat: no-repeat;
background-color: #fff;
text-align: center;
}
li.active {
background-color: #af1b40;
color: #fff;
opacity: 0.9;
transition: 0.3s;
}
li.enroll {
position: relative;
background-image: url(https://zws-imgs-pub.ezijing.com/static/public/d434fa0ffd77892273e63e6d694cff0a.png);
}
li.enroll:after {
content: '';
width: 100%;
height: 1px;
background: #b8bcbf;
position: absolute;
left: 0;
bottom: 0;
// transform: translateX(-50%) scale(0.5);
}
li.enroll.active {
background-image: url(https://zws-imgs-pub.ezijing.com/static/public/4cbef518113d24b392be80148e921abd.png);
}
li.wx {
background-image: url(https://zws-imgs-pub.ezijing.com/static/public/5526b83d7526b2742f6eba7151c367db.png);
}
li.wx.active {
background-image: url(https://zws-imgs-pub.ezijing.com/static/public/0831ea27fee535ab0ce9f730f467b2e1.png);
}
li > p {
font-size: 12px;
line-height: 14px;
text-align: center;
// transform: scale(0.9);
line-height: 100%;
cursor: default;
}
}
.tab_cont {
position: absolute;
left: -360px;
top: -120px;
width: 346px;
height: 390px;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/right_bg.png);
// display:none;
h5 {
font-size: 24px;
font-weight: 400;
line-height: 19px;
color: #ffffff;
text-align: center;
margin-bottom: 25px;
}
.enroll_cont {
padding: 46px 29px 69px 29px;
box-sizing: border-box;
.p {
margin-bottom: 20px;
position: relative;
:deep(.el-input__inner) {
line-height: 40px;
height: 40px;
}
:deep(.el-input__inner::placeholder) {
font-weight: 300;
font-size: 14px;
color: #999999;
line-height: 40px;
height: 40px;
}
:deep(.el-button) {
background-color: #c1ab85;
border: 1px solid #c1ab85;
color: #ffffff;
height: 40px;
font-size: 16px;
}
}
.sendcode {
display: flex;
justify-content: space-between;
:deep(.el-input) {
width: 170px;
height: 40px;
}
:deep(.el-button) {
height: 40px;
color: #ffffff;
font-size: 14px;
margin-left: 10px;
}
:deep(.is-disabled) {
color: #c0c4cc;
cursor: not-allowed;
background-image: none;
background-color: #fff;
border-color: #ebeef5;
}
}
}
}
}
</style>
src/components/layout/RightAsideH5.vue 0 → 100644
浏览文件 @ da6e909b
<template>
<div class="rigth-aside">
<ul class="right-aside-btns">
<li @click="showApplyForm">
<img
src="https://zws-imgs-pub.ezijing.com/static/public/d434fa0ffd77892273e63e6d694cff0a.png"
/>
<p>报名咨询</p>
</li>
</ul>
</div>
<!-- 我要报名 -->
<van-overlay :show="applyFormVisible" @click="hideApplyForm">
<div class="dialog-box" @click.stop>
<apply-form @success="hideApplyForm"></apply-form>
</div>
</van-overlay>
</template>
<script>
import ApplyForm from './ApplyForm.vue'
export default {
components: { ApplyForm },
data() {
return {
applyFormVisible: false
}
},
methods: {
// 我要报名
showApplyForm() {
this.applyFormVisible = true
},
hideApplyForm() {
this.applyFormVisible = false
}
}
}
</script>
<style lang="scss" scoped>
.van-overlay {
z-index: 1000 !important;
}
.rigth-aside {
position: fixed;
top: 40%;
right: 16px;
z-index: 1000;
transform: translateY(-50%);
.right-aside-btns {
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 1rem;
height: 1rem;
font-size: 0.1rem;
color: #999;
background-color: #fff;
cursor: pointer;
border-radius: 0.12rem;
img {
width: 0.46rem;
height: 0.46rem;
}
}
}
}
.dialog-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 6.9rem;
height: 7.5rem;
background: url('https://webapp-pub.ezijing.com/www/h5/images/dialog_bg.png')
no-repeat;
background-size: cover;
.title {
font-size: 0.4rem;
color: #fff;
text-align: center;
}
}
</style>
src/modules/shop/views/Index.vue
浏览文件 @ da6e909b
<script lang="ts" setup> <script lang="ts" setup>
import CourseList from '../components/CourseList.vue' import CourseList from '../components/CourseList.vue'
import { useShopStore } from '@/stores/shop' import { useShopStore } from '@/stores/shop'
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
const shopStore = useShopStore() const shopStore = useShopStore()
const handleTabClick = (tab: any) => { const handleTabClick = (tab: any) => {
if (tab.index === '4') { if (tab.index === '4') {
...@@ -12,7 +13,7 @@ const handleTabClick = (tab: any) => { ...@@ -12,7 +13,7 @@ const handleTabClick = (tab: any) => {
</script> </script>
<template> <template>
<div class="main_shop"> <div class="main_shop" v-if="!mobile">
<img <img
src="https://webapp-pub.ezijing.com/project_online/fi/shop_banner.jpg" src="https://webapp-pub.ezijing.com/project_online/fi/shop_banner.jpg"
class="shop_banner" class="shop_banner"
...@@ -38,6 +39,22 @@ const handleTabClick = (tab: any) => { ...@@ -38,6 +39,22 @@ const handleTabClick = (tab: any) => {
</div> </div>
</div> </div>
</div> </div>
<div v-else>
<van-tabs>
<van-tab
:title="item.label"
v-for="(item, index) in shopStore.filters.slice(0, 4)"
:key="index"
lazy
>
<CourseList
:type="item.value"
:courseList="shopStore.shopList"
:key="index"
/>
</van-tab>
</van-tabs>
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.is-pc { .is-pc {
...@@ -121,7 +138,7 @@ const handleTabClick = (tab: any) => { ...@@ -121,7 +138,7 @@ const handleTabClick = (tab: any) => {
font-weight: 500; font-weight: 500;
line-height: 34px; line-height: 34px;
color: #eda020; color: #eda020;
padding: 0 0.1rem !important; padding: 0 0.4rem !important;
box-sizing: border-box; box-sizing: border-box;
} }
:deep(.el-tabs__nav-scroll) { :deep(.el-tabs__nav-scroll) {
...@@ -152,4 +169,25 @@ const handleTabClick = (tab: any) => { ...@@ -152,4 +169,25 @@ const handleTabClick = (tab: any) => {
display: none; display: none;
} }
} }
:deep(.van-tab--active) {
.van-tab__text {
color: #eda020 !important;
font-size: 0.28rem;
}
}
:deep(.van-tab) {
.van-tab__text {
color: #333333;
font-size: 0.28rem;
}
.van-tabs__nav {
background: none;
}
}
:deep(.van-tabs__line) {
background: #eda023 !important;
}
:deep(.van-tab__panel) {
margin-top: 0.3rem;
}
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论