chenJinxu
/
HealthStudentWeb
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

新增 优化（专家介绍、训练营）静态页面

test
Dingei 1 year ago
parent
be76b929e0
commit
8298bdc2f8
11 changed files with 509 additions and 9 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/optimize/icons/lock.png
  2. BIN
      src/assets/optimize/icons/play.png
  3. BIN
      src/assets/optimize/images/55_06.png
  4. +12
    -0
      src/router/router.config.js
  5. +69
    -0
      src/views/optimize/experts.vue
  6. +30
    -7
      src/views/optimize/index.vue
  7. +74
    -0
      src/views/optimize/scss/experts.scss
  8. +0
    -1
      src/views/optimize/scss/index.scss
  9. +166
    -0
      src/views/optimize/scss/trainingcamp.scss
  10. +158
    -0
      src/views/optimize/trainingcamp.vue
  11. +0
    -1
      src/views/today/scss/index.scss

BIN
src/assets/optimize/icons/lock.png View File

Before After
Width: 200  |  Height: 200  |  Size: 5.8KB

BIN
src/assets/optimize/icons/play.png View File

Before After
Width: 200  |  Height: 200  |  Size: 9.1KB

BIN
src/assets/optimize/images/55_06.png View File

Before After
Width: 440  |  Height: 768  |  Size: 14KB

+ 12
- 0
src/router/router.config.js View File

@@ -277,6 +277,18 @@ export const constantRouterMap = [
name: 'report', name: 'report',
component: () => import('@/views/today/report'), component: () => import('@/views/today/report'),
meta: { title: '心理监测周报', keepAlive: false } 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 }
} }
] ]
} }


+ 69
- 0
src/views/optimize/experts.vue View File

@@ -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>

+ 30
- 7
src/views/optimize/index.vue View File

@@ -4,8 +4,8 @@
<!-- 专家介绍 --> <!-- 专家介绍 -->
<div class="expert-box"> <div class="expert-box">
<van-swipe indicator-color="white"> <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> --> <!-- <p>了解详情</p> -->
</van-swipe-item> </van-swipe-item>
</van-swipe> </van-swipe>
@@ -41,7 +41,7 @@
</div> </div>
<div class="main"> <div class="main">
<ul> <ul>
<li>
<li @click="goTrainingcamp(1)">
<div class="left"> <div class="left">
<p>情绪管理控制</p> <p>情绪管理控制</p>
<span>入门易学</span> <span>入门易学</span>
@@ -52,7 +52,7 @@
</div> </div>
<img src="@/assets/today/images/2_42.png" /> <img src="@/assets/today/images/2_42.png" />
</li> </li>
<li>
<li @click="goTrainingcamp(2)">
<div class="left"> <div class="left">
<p>情绪管理控制</p> <p>情绪管理控制</p>
<span>入门易学</span> <span>入门易学</span>
@@ -150,14 +150,37 @@
data() { data() {
return { return {
expertImages: [ expertImages: [
expertImage,
expertImage
{
'id': 1,
'image': expertImage
},
{
'id': 2,
'image': expertImage
}
], ],
}; };
}, },
created() {}, created() {},
mounted() {}, mounted() {},
methods: {}
methods: {
goExperts(id) {
this.$router.push({
name: 'experts',
query: {
'id': id
}
});
},
goTrainingcamp(id) {
this.$router.push({
name: 'trainingcamp',
query: {
'id': id
}
});
}
}
}; };
</script> </script>
<style scoped> <style scoped>


+ 74
- 0
src/views/optimize/scss/experts.scss View File

@@ -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;
}
}
}
}

+ 0
- 1
src/views/optimize/scss/index.scss View File

@@ -1,5 +1,4 @@
.optimize { .optimize {
background-color: #fff;
min-height: 100vh; min-height: 100vh;
.expert-box { .expert-box {
padding: 40px 32px; padding: 40px 32px;


+ 166
- 0
src/views/optimize/scss/trainingcamp.scss View File

@@ -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;
}
}
}
}
}

+ 158
- 0
src/views/optimize/trainingcamp.vue View File

@@ -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>

+ 0
- 1
src/views/today/scss/index.scss View File

@@ -1,5 +1,4 @@
.today { .today {
background-color: #fff;
min-height: 100vh; min-height: 100vh;
.today-status { .today-status {
display: flex; display: flex;


Write Preview
Loading…
Cancel
Save