chenJinxu
/
HealthStudentWeb
Слідкувати 1
В обрані 0
Форк 0
Код Проблеми 0 Запити на злиття 0 Релізи 0 Вікі Активність
Переглянути джерело

新增“优化”静态页面

test
Dingei 1 рік тому
джерело
938c528852
коміт
59e6c89686
13 змінених файлів з 429 додано та 13 видалено
Розділений перегляд
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/optimize/icons/3_55.png
  2. BIN
      src/assets/optimize/icons/3_58.png
  3. BIN
      src/assets/optimize/icons/3_62.png
  4. BIN
      src/assets/optimize/icons/3_66.png
  5. BIN
      src/assets/optimize/icons/location.png
  6. BIN
      src/assets/optimize/images/3_08.png
  7. BIN
      src/assets/optimize/images/3_20.png
  8. BIN
      src/assets/optimize/images/3_22.png
  9. BIN
      src/assets/optimize/images/3_24.png
  10. BIN
      src/assets/optimize/images/3_48.png
  11. +159
    -12
      src/views/optimize/index.vue
  12. +269
    -0
      src/views/optimize/scss/index.scss
  13. +1
    -1
      src/views/today/scss/index.scss

BIN
src/assets/optimize/icons/3_55.png Переглянути файл

Before After
Width: 76  |  Height: 76  |  Size: 2.5KB

BIN
src/assets/optimize/icons/3_58.png Переглянути файл

Before After
Width: 111  |  Height: 110  |  Size: 3.2KB

BIN
src/assets/optimize/icons/3_62.png Переглянути файл

Before After
Width: 110  |  Height: 110  |  Size: 3.2KB

BIN
src/assets/optimize/icons/3_66.png Переглянути файл

Before After
Width: 110  |  Height: 110  |  Size: 2.9KB

BIN
src/assets/optimize/icons/location.png Переглянути файл

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

BIN
src/assets/optimize/images/3_08.png Переглянути файл

Before After
Width: 639  |  Height: 373  |  Size: 13KB

BIN
src/assets/optimize/images/3_20.png Переглянути файл

Before After
Width: 181  |  Height: 171  |  Size: 3.8KB

BIN
src/assets/optimize/images/3_22.png Переглянути файл

Before After
Width: 181  |  Height: 171  |  Size: 2.7KB

BIN
src/assets/optimize/images/3_24.png Переглянути файл

Before After
Width: 184  |  Height: 171  |  Size: 2.0KB

BIN
src/assets/optimize/images/3_48.png Переглянути файл

Before After
Width: 259  |  Height: 202  |  Size: 22KB

+ 159
- 12
src/views/optimize/index.vue Переглянути файл

@@ -1,22 +1,169 @@
<!-- -->
<template>
<div>
<div class="optimize">
<!-- 头部导航 -->
<TopNavBar />
<!-- 专家介绍 -->
<div class="expert-box">
<van-swipe indicator-color="white">
<van-swipe-item v-for="(image, index) in expertImages" :key="index">
<img v-lazy="image" />
<!-- <p>了解详情</p> -->
</van-swipe-item>
</van-swipe>
</div>
<!-- 养育话题 -->
<div class="parenting">
<div class="title">
<p>养育话题</p>
<a href="/">查看更多</a>
</div>
<ul>
<li>
<img src="@/assets/optimize/images/3_20.png" alt="拖延症" />
<p>拖延症</p>
<span>L1入门 12分钟</span>
</li>
<li>
<img src="@/assets/optimize/images/3_22.png" alt="沉迷网络" />
<p>沉迷网络</p>
<span>L1入门 40分钟</span>
</li>
<li>
<img src="@/assets/optimize/images/3_24.png" alt="不自信" />
<p>不自信</p>
<span>L1入门 25分钟</span>
</li>
</ul>
</div>
<!-- 训练营 -->
<div class="train">
<div class="title">
<p>训练营</p>
</div>
<div class="main">
<ul>
<li>
<div class="left">
<p>情绪管理控制</p>
<span>入门易学</span>
<div>
<h5>会员价 ¥998</h5>
<s>¥1288</s>
</div>
</div>
<img src="@/assets/today/images/2_42.png" />
</li>
<li>
<div class="left">
<p>情绪管理控制</p>
<span>入门易学</span>
<div>
<h5>会员价 ¥998</h5>
<s>¥1288</s>
</div>
</div>
<img src="@/assets/today/images/2_42.png" />
</li>
</ul>
</div>
</div>
<!-- 心理咨询 -->
<div class="psychology">
<div class="title">
<p>心理咨询</p>
</div>
<div class="select">
<ul>
<li>
<img src="@/assets/optimize/icons/3_55.png" alt="" />
</li>
<li>
<img src="@/assets/optimize/icons/3_58.png" alt="" />
</li>
<li>
<img src="@/assets/optimize/icons/3_62.png" alt="" />
</li>
<li>
<img src="@/assets/optimize/icons/3_66.png" alt="" />
</li>
<li>
<img src="@/assets/optimize/icons/3_55.png" alt="" />
</li>
<li>
<img src="@/assets/optimize/icons/3_58.png" alt="" />
</li>
<li>
<img src="@/assets/optimize/icons/3_62.png" alt="" />
</li>
<li>
<img src="@/assets/optimize/icons/3_66.png" alt="" />
</li>
</ul>
</div>
<div class="main">
<div class="top">
<p>黛建松</p>
<span>清华大学心理学教授</span>
<img src="@/assets/optimize/images/3_48.png" alt="" />
</div>
<div class="bottom">
<h4>700人次<span>咨询</span>，<span>从业</span>8年</h4>
<ul>
<li>焦虑</li>
<li>抑郁</li>
<li>儿童心理</li>
<li>亲子关系</li>
<li>青春期心理</li>
<li>家庭关系</li>
<li>压力管理</li>
</ul>
<div>
<h5>
<img src="@/assets/optimize/icons/location.png" alt="" />
<span>郴州市苏仙区</span>
</h5>
<p>¥2480</p>
</div>
</div>
</div>
</div>
<!-- 底部导航 -->
<TabBar />
</div>
</template>

<script>
import TabBar from '@/components/TabBar';
export default {
components: { TabBar },
data() {
return {};
},
created() {},
mounted() {},
methods: {}
};
import Vue from 'vue';
import TabBar from '@/components/TabBar';
import TopNavBar from '@/components/TopNavBar';
import expertImage from "@/assets/optimize/images/3_08.png";
import { Swipe, SwipeItem, Lazyload } from 'vant';
Vue.use(Lazyload);
Vue.use(Lazyload, {
lazyComponent: true,
});
export default {
components: {
TabBar,
TopNavBar,
[Swipe.name]: Swipe,
[SwipeItem.name]: SwipeItem,
[Lazyload.name]: Lazyload,
},
data() {
return {
expertImages: [
expertImage,
expertImage
],
};
},
created() {},
mounted() {},
methods: {}
};
</script>
<style scoped>
/* @import url(); 引入css类 */
@import url("./scss/index.scss");
</style>

+ 269
- 0
src/views/optimize/scss/index.scss Переглянути файл

@@ -0,0 +1,269 @@
.optimize {
padding: 100.06px 0;
background-color: #fff;
min-height: 100vh;
.expert-box {
padding: 40px 32px;
height: 400px;
.van-swipe {
height: 100%;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
.van-swipe-item {
position: relative;
p {
position: absolute;
right: 40px;
bottom: 40px;
font-size: 24px;
color: #fff;
padding: 10px 18px 10px 15px;
background-color: #000;
border-radius: 10px;
}
}
}
.title {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: space-between;
justify-content: space-between;
p {
font-size: 26px;
color: #fff;
padding: 10px 30px;
background-color: #000;
border-radius: 40px;
font-weight: bold;
}
a {
font-size: 20px;
color: #000;
padding: 10px 30px;
background-color: #dfdfdf;
border-radius: 40px;
font-weight: bold;
}
}
.parenting {
padding: 0 32px;
ul {
width: 100%;
margin-top: 24px;
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: space-between;
justify-content: space-between;
li {
width: 30%;
img {
width: 100%;
height: 200px;
object-fit: contain;
}
p {
text-align: center;
font-size: 30px;
color: #000;
font-weight: bold;
}
span {
text-align: center;
font-size: 20px;
color: grey;
display: block;
margin-top: 8px;
}
}
}
}
.train {
padding: 52px 32px;
.main {
width: 100%;
overflow-x: scroll;
ul {
width: max-content;
margin-top: 30px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
li {
width: 480px;
background-color: #2ea7e0;
padding: 40px;
border-radius: 50px;
display: flex;
align-items: center;
align-content: space-between;
justify-content: space-between;
& + li {
margin-left: 30px;
}
.left {
p {
font-size: 38px;
color: #000;
font-weight: bold;
}
span {
display: block;
font-size: 30px;
color: #000;
}
div {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
margin-top: 10px;
h5 {
padding: 8px 16px;
background-color: #000;
font-size: 20px;
color: #c2813f;
border-radius: 20px;
}
s {
font-style: normal;
font-size: 24px;
color: #fff;
display: block;
margin-left: 16px;
}
}
}
img {
height: 140px;
object-fit: contain;
}
}
}
}
}
.psychology {
padding-bottom: 40px;
.title {
padding: 0 32px;
}
.select {
margin: 30px 0 0 32px;
overflow-x: scroll;
ul {
width: max-content;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
li {
img {
width: 100px;
height: 100px;
object-fit: contain;
}
& + li {
margin-left: 25px;
}
}
}
}
.main {
padding: 0 32px;
margin-top: 30px;
.top {
background-color: #179b3b;
border-radius: 60px;
padding: 40px;
position: relative;
height: 280px;
p {
color: #fff;
font-size: 54px;
font-weight: bold;
}
span {
color: #fff;
font-size: 26px;
font-weight: normal;
}
img {
position: absolute;
bottom: 0;
right: 0;
object-fit: contain;
width: 55%;
}
}
.bottom {
padding: 40px 30px;
border-radius: 60px;
border: 5px solid #ecff9c;
margin-top: -40px;
z-index: 2;
position: relative;
background-color: #fff;
h4 {
padding: 0 20px;
font-size: 32px;
color: #000;
span {
color: #a3a3a3;
margin: 0 6px;
}
}
ul {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
margin-top: 20px;
li {
margin: 10px;
color: #000;
padding: 10px 20px;
border-radius: 40px;
background-color: #ecff9c;
font-size: 22px;
font-weight: bold;
}
}
div {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: space-between;
justify-content: space-between;
margin-top: 40px;
h5 {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: flex-start;
img {
width: 50px;
object-fit: contain;
}
span {
color: #000;
font-size: 28px;
margin-left: 10px;
}
}
p {
font-size: 54px;
color: #179b3b;
font-weight: bold;
}
}
}
}
}
}

+ 1
- 1
src/views/today/scss/index.scss Переглянути файл

@@ -412,7 +412,7 @@
align-content: space-between;
justify-content: space-between;
& + li {
margin-left: 40px;
margin-left: 30px;
}
p {
width: 55%;


Писати Попередній перегляд
Завантаження…
Відмінити
Зберегти