@@ -277,6 +277,18 @@ export const constantRouterMap = [ | |||
name: 'report', | |||
component: () => import('@/views/today/report'), | |||
meta: { title: '心理监测周报', keepAlive: false } | |||
}, | |||
{ | |||
path: '/experts', | |||
name: 'experts', | |||
component: () => import('@/views/optimize/experts'), | |||
meta: { title: '专家介绍', keepAlive: false } | |||
}, | |||
{ | |||
path: '/trainingcamp', | |||
name: 'trainingcamp', | |||
component: () => import('@/views/optimize/trainingcamp'), | |||
meta: { title: '训练营', keepAlive: false } | |||
} | |||
] | |||
} | |||
@@ -0,0 +1,69 @@ | |||
<!-- 专家介绍 --> | |||
<template> | |||
<div class="experts"> | |||
<!-- 专家介绍 --> | |||
<van-nav-bar title="专家介绍" :border="true" :left-arrow="true" @click-left="onNavBack" left-text="返回"> | |||
<template #left> | |||
<van-icon name="arrow-left" size="24" style="padding: 0" /> | |||
<span>返回</span> | |||
</template> | |||
</van-nav-bar> | |||
<div class="main"> | |||
<div class="introduce"> | |||
<h3>黛建松</h3> | |||
<span>清华大学心理学教授儿童心理问题咨询治疗经验。</span> | |||
<p><i>700人次</i>咨询<br />从业<i>30年</i></p> | |||
<img src="@/assets/optimize/images/3_48.png" alt="" /> | |||
</div> | |||
<div class="title"> | |||
<van-checkbox-group v-model="result"> | |||
<van-checkbox name="1">北京协和医学院专家</van-checkbox> | |||
<van-checkbox name="1">儿童青少年心理权威专家</van-checkbox> | |||
<van-checkbox name="1">北京云帆启迪心理咨询中心主任</van-checkbox> | |||
</van-checkbox-group> | |||
</div> | |||
<div class="summary"> | |||
<p>她提倡“适应力教育和能力训练”,训练孩子的学习能力、良好 | |||
的情绪、人际关系以及强大的适应力。30年来帮助数万个家庭 | |||
走出孩子成长中的困境,引领家长成为孩子成长的好教练。她 | |||
著有《让孩子学习上瘾的十大法则》、《不抢跑也能超越》等多本 | |||
畅销书。在《人民日报》、《北京青年报》等主流媒体发表上百篇科 | |||
普文章。担任中央电视台多档节目特邀专家。</p> | |||
</div> | |||
</div> | |||
<!-- 底部导航 --> | |||
<TabBar /> | |||
</div> | |||
</template> | |||
<script> | |||
import TabBar from '@/components/TabBar'; | |||
import { Checkbox, CheckboxGroup } from 'vant'; | |||
export default { | |||
components: { | |||
TabBar, | |||
[Checkbox.name]: Checkbox, | |||
[CheckboxGroup.name]: CheckboxGroup | |||
}, | |||
data() { | |||
return { | |||
result: ['1'] | |||
}; | |||
}, | |||
created() { | |||
console.log(this.$route.query) | |||
}, | |||
mounted() {}, | |||
methods: { | |||
// 返回 | |||
onNavBack() { | |||
this.$router.push({ | |||
name: 'Optimize' | |||
}); | |||
}, | |||
} | |||
}; | |||
</script> | |||
<style scoped> | |||
@import url("./scss/experts.scss"); | |||
</style> |
@@ -4,8 +4,8 @@ | |||
<!-- 专家介绍 --> | |||
<div class="expert-box"> | |||
<van-swipe indicator-color="white"> | |||
<van-swipe-item v-for="(image, index) in expertImages" :key="index"> | |||
<img v-lazy="image" /> | |||
<van-swipe-item v-for="(item, index) in expertImages" :key="index" @click="goExperts(item.id)"> | |||
<img v-lazy="item.image" /> | |||
<!-- <p>了解详情</p> --> | |||
</van-swipe-item> | |||
</van-swipe> | |||
@@ -41,7 +41,7 @@ | |||
</div> | |||
<div class="main"> | |||
<ul> | |||
<li> | |||
<li @click="goTrainingcamp(1)"> | |||
<div class="left"> | |||
<p>情绪管理控制</p> | |||
<span>入门易学</span> | |||
@@ -52,7 +52,7 @@ | |||
</div> | |||
<img src="@/assets/today/images/2_42.png" /> | |||
</li> | |||
<li> | |||
<li @click="goTrainingcamp(2)"> | |||
<div class="left"> | |||
<p>情绪管理控制</p> | |||
<span>入门易学</span> | |||
@@ -150,14 +150,37 @@ | |||
data() { | |||
return { | |||
expertImages: [ | |||
expertImage, | |||
expertImage | |||
{ | |||
'id': 1, | |||
'image': expertImage | |||
}, | |||
{ | |||
'id': 2, | |||
'image': expertImage | |||
} | |||
], | |||
}; | |||
}, | |||
created() {}, | |||
mounted() {}, | |||
methods: {} | |||
methods: { | |||
goExperts(id) { | |||
this.$router.push({ | |||
name: 'experts', | |||
query: { | |||
'id': id | |||
} | |||
}); | |||
}, | |||
goTrainingcamp(id) { | |||
this.$router.push({ | |||
name: 'trainingcamp', | |||
query: { | |||
'id': id | |||
} | |||
}); | |||
} | |||
} | |||
}; | |||
</script> | |||
<style scoped> | |||
@@ -0,0 +1,74 @@ | |||
.experts { | |||
padding-bottom:100.06px; | |||
.main { | |||
padding: 40px 32px; | |||
.introduce { | |||
background-color: #179b3b; | |||
border-radius: 60px; | |||
padding: 40px; | |||
position: relative; | |||
height: 340px; | |||
h3 { | |||
color: #fff; | |||
font-size: 46px; | |||
font-weight: bold; | |||
letter-spacing: 6px; | |||
} | |||
span { | |||
display: block; | |||
color: #fff; | |||
font-size: 26px; | |||
font-weight: normal; | |||
margin-top: 20px; | |||
width: 220px; | |||
} | |||
p { | |||
margin-top: 40px; | |||
color: #fff; | |||
font-size: 30px; | |||
width: 220px; | |||
letter-spacing: 6px; | |||
i { | |||
font-style: normal; | |||
font-weight: bold; | |||
letter-spacing: 6px; | |||
} | |||
} | |||
img { | |||
position: absolute; | |||
bottom: 0; | |||
right: 0; | |||
object-fit: contain; | |||
width: 55%; | |||
} | |||
} | |||
.title { | |||
margin-top: 40px; | |||
border-radius: 60px; | |||
padding: 40px; | |||
background-color: #ff5f8b; | |||
.van-checkbox-group { | |||
.van-checkbox { | |||
pointer-events: none; | |||
span { | |||
color: #fff; | |||
font-size: 32px; | |||
} | |||
& + .van-checkbox { | |||
margin-top: 10px; | |||
} | |||
} | |||
} | |||
} | |||
.summary { | |||
margin-top: 40px; | |||
border-radius: 60px; | |||
padding: 40px; | |||
border: 2px solid #179b3b; | |||
p { | |||
color: #434144; | |||
font-size: 28px; | |||
} | |||
} | |||
} | |||
} |
@@ -1,5 +1,4 @@ | |||
.optimize { | |||
background-color: #fff; | |||
min-height: 100vh; | |||
.expert-box { | |||
padding: 40px 32px; | |||
@@ -0,0 +1,166 @@ | |||
.trainingcamp { | |||
padding-bottom:100.06px; | |||
background-color: #fff; | |||
min-height: 100vh; | |||
.main { | |||
padding: 40px 32px; | |||
>ul { | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-items: center; | |||
align-content: space-between; | |||
justify-content: space-between; | |||
margin-bottom: 40px; | |||
li { | |||
background-color: #f1f1f1; | |||
color: #434144; | |||
border-radius: 20px; | |||
width: 23%; | |||
padding: 10px 0; | |||
font-size: 22px; | |||
text-align: center; | |||
font-weight: bold; | |||
transition: .4s all; | |||
&.active { | |||
background-color: #179b3b; | |||
} | |||
} | |||
} | |||
.brief-box { | |||
img{ | |||
width: 100%; | |||
object-fit: contain; | |||
} | |||
} | |||
.content-box { | |||
background-color: #f1f1f1; | |||
padding: 30px; | |||
border-radius: 20px; | |||
ul { | |||
li { | |||
padding: 24px 0; | |||
border-bottom: 1px solid #8a8a8a; | |||
&:first-child { | |||
padding-top: 0; | |||
} | |||
p { | |||
color: #333; | |||
font-size: 30px; | |||
} | |||
div { | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-items: center; | |||
align-content: space-between; | |||
justify-content: space-between; | |||
margin-top: 4px; | |||
span { | |||
color: grey; | |||
font-size: 26px; | |||
margin-top: 10px; | |||
i { | |||
display: inline-block; | |||
font-style: normal; | |||
border-radius: 15px; | |||
padding: 5px 15px; | |||
color: #cbae46; | |||
background-color: #fcf4ce; | |||
margin-right: 10px; | |||
font-size: 20px; | |||
} | |||
} | |||
img { | |||
width: 35px; | |||
height: 35px; | |||
object-fit: contain; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
.recommend-box { | |||
ul { | |||
li { | |||
border-radius: 40px; | |||
background-color: #179b3b; | |||
padding: 60px 40px; | |||
position: relative; | |||
& + li { | |||
margin-top: 30px; | |||
} | |||
h4 { | |||
color: #000; | |||
width: 40%; | |||
font-size: 40px; | |||
font-weight: bold; | |||
} | |||
p { | |||
font-size: 40px; | |||
color: #000; | |||
margin-top: 20px; | |||
} | |||
span { | |||
display: inline-block; | |||
color: #fff; | |||
font-size: 28px; | |||
font-weight: bold; | |||
padding: 10px 60px; | |||
background-color: #000; | |||
border-radius: 40px; | |||
margin-top: 20px; | |||
} | |||
img { | |||
position: absolute; | |||
bottom: 0; | |||
right: 0; | |||
max-height: 80%; | |||
} | |||
} | |||
} | |||
} | |||
.evaluate-box { | |||
li { | |||
.top { | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-items: center; | |||
justify-content: flex-start; | |||
img { | |||
width: 80px; | |||
height: 80px; | |||
object-fit: contain; | |||
} | |||
div { | |||
margin-left: 20px; | |||
p { | |||
font-size: 28px; | |||
color: #000; | |||
font-weight: bold; | |||
} | |||
span { | |||
display: block; | |||
font-size: 28px; | |||
color: grey; | |||
} | |||
} | |||
} | |||
> p{ | |||
font-size: 30px; | |||
color: #000; | |||
margin: 20px 0; | |||
} | |||
> span { | |||
display: block; | |||
font-size: 30px; | |||
color: grey; | |||
margin: 20px 0; | |||
padding-bottom: 20px; | |||
border-bottom: 1px solid grey; | |||
} | |||
& + li { | |||
margin-top: 40px; | |||
} | |||
} | |||
} | |||
} | |||
} |
@@ -0,0 +1,158 @@ | |||
<!-- 训练营 --> | |||
<template> | |||
<div class="trainingcamp"> | |||
<!-- 训练营 --> | |||
<van-nav-bar title="情绪管理控制" :border="true" :left-arrow="true" @click-left="onNavBack" left-text="返回"> | |||
<template #left> | |||
<van-icon name="arrow-left" size="24" style="padding: 0" /> | |||
<span>返回</span> | |||
</template> | |||
</van-nav-bar> | |||
<div class="main"> | |||
<ul> | |||
<li :class="active == 'brief' ? 'active' : ''" @click="switchNav('brief')">简介</li> | |||
<li :class="active == 'content' ? 'active' : ''" @click="switchNav('content')">内容</li> | |||
<li :class="active == 'evaluate' ? 'active' : ''" @click="switchNav('evaluate')">评价</li> | |||
<li :class="active == 'recommend' ? 'active' : ''" @click="switchNav('recommend')">推荐</li> | |||
</ul> | |||
<div class="brief-box" v-show="active == 'brief'"> | |||
<img src="@/assets/optimize/images/55_06.png" alt="" /> | |||
</div> | |||
<div class="content-box" v-show="active == 'content'"> | |||
<ul> | |||
<li> | |||
<p>001 小学生学习能力发展的特点</p> | |||
<div> | |||
<span><i>免费</i>09:26 | 11034次播放</span> | |||
<img src="@/assets/optimize/icons/play.png" alt="" /> | |||
</div> | |||
</li> | |||
<li> | |||
<p>002 小学生学习能力发展的特点</p> | |||
<div> | |||
<span>09:26 | 11034次播放</span> | |||
<img src="@/assets/optimize/icons/lock.png" alt="" /> | |||
</div> | |||
</li> | |||
<li> | |||
<p>003 小学生学习能力发展的特点</p> | |||
<div> | |||
<span><i>免费</i>09:26 | 11034次播放</span> | |||
<img src="@/assets/optimize/icons/play.png" alt="" /> | |||
</div> | |||
</li> | |||
<li> | |||
<p>004 小学生学习能力发展的特点</p> | |||
<div> | |||
<span>09:26 | 11034次播放</span> | |||
<img src="@/assets/optimize/icons/play.png" alt="" /> | |||
</div> | |||
</li> | |||
</ul> | |||
</div> | |||
<div class="evaluate-box" v-show="active == 'evaluate'"> | |||
<ul> | |||
<li> | |||
<div class="top"> | |||
<img src="@/assets/optimize/icons/3_55.png" alt="" /> | |||
<div> | |||
<p>张杰妈妈</p> | |||
<span>12.18 51:13 广州</span> | |||
</div> | |||
</div> | |||
<p>买了好多课,这个是最值得的,真的实用,思路清晰</p> | |||
<span>21.孩子的适应能力怎么训练?</span> | |||
</li> | |||
<li> | |||
<div class="top"> | |||
<img src="@/assets/optimize/icons/3_55.png" alt="" /> | |||
<div> | |||
<p>张杰妈妈</p> | |||
<span>12.18 51:13 广州</span> | |||
</div> | |||
</div> | |||
<p>买了好多课,这个是最值得的,真的实用,思路清晰</p> | |||
<span>21.孩子的适应能力怎么训练?</span> | |||
</li> | |||
<li> | |||
<div class="top"> | |||
<img src="@/assets/optimize/icons/3_55.png" alt="" /> | |||
<div> | |||
<p>张杰妈妈</p> | |||
<span>12.18 51:13 广州</span> | |||
</div> | |||
</div> | |||
<p>买了好多课,这个是最值得的,真的实用,思路清晰</p> | |||
<span>21.孩子的适应能力怎么训练?</span> | |||
</li> | |||
<li> | |||
<div class="top"> | |||
<img src="@/assets/optimize/icons/3_55.png" alt="" /> | |||
<div> | |||
<p>张杰妈妈</p> | |||
<span>12.18 51:13 广州</span> | |||
</div> | |||
</div> | |||
<p>买了好多课,这个是最值得的,真的实用,思路清晰</p> | |||
<span>21.孩子的适应能力怎么训练?</span> | |||
</li> | |||
</ul> | |||
</div> | |||
<div class="recommend-box" v-show="active == 'recommend'"> | |||
<ul> | |||
<li> | |||
<h4>孩子自主学习力提升实操课</h4> | |||
<p>入门易学</p> | |||
<span>播放</span> | |||
<img src="@/assets/optimize/images/3_48.png" alt="" /> | |||
</li> | |||
<li> | |||
<h4>给孩子的文学课</h4> | |||
<span>播放</span> | |||
<img src="@/assets/optimize/images/3_48.png" alt="" /> | |||
</li> | |||
<li> | |||
<h4>孩子自主学习力提升实操课</h4> | |||
<span>播放</span> | |||
<img src="@/assets/optimize/images/3_48.png" alt="" /> | |||
</li> | |||
</ul> | |||
</div> | |||
</div> | |||
<!-- 底部导航 --> | |||
<TabBar /> | |||
</div> | |||
</template> | |||
<script> | |||
import TabBar from '@/components/TabBar'; | |||
export default { | |||
components: { | |||
TabBar | |||
}, | |||
data() { | |||
return { | |||
active: 'brief' | |||
}; | |||
}, | |||
created() { | |||
console.log(this.$route.query) | |||
}, | |||
mounted() {}, | |||
methods: { | |||
// 返回 | |||
onNavBack() { | |||
this.$router.push({ | |||
name: 'Optimize' | |||
}); | |||
}, | |||
// 切换 | |||
switchNav(e) { | |||
this.active = e | |||
} | |||
} | |||
}; | |||
</script> | |||
<style scoped> | |||
@import url("./scss/trainingcamp.scss"); | |||
</style> |
@@ -1,5 +1,4 @@ | |||
.today { | |||
background-color: #fff; | |||
min-height: 100vh; | |||
.today-status { | |||
display: flex; | |||