-
+
-
+ ++
情绪管理控制
+ 入门易学 +++会员价 ¥998
+¥1288+
+
+ -
+ ++
情绪管理控制
+ 入门易学 +++会员价 ¥998
+¥1288+
+
+
+
+
diff --git a/src/views/optimize/scss/index.scss b/src/views/optimize/scss/index.scss
new file mode 100644
index 0000000..a404080
--- /dev/null
+++ b/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;
+ }
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/views/today/index.vue b/src/views/today/index.vue
index abb73ca..5ca5aa4 100644
--- a/src/views/today/index.vue
+++ b/src/views/today/index.vue
@@ -1,19 +1,250 @@
-
+
-
+
+
+ ![]()
+
+
+
+
+
+
+
+
+
+
+ 养育话题
+ 查看更多 +-
+
-
+
+ 拖延症
+ L1入门 12分钟 +
+ -
+
+ 沉迷网络
+ L1入门 40分钟 +
+ -
+
+ 不自信
+ L1入门 25分钟 +
+
+
+
+
+
+ 训练营
+
+
+
+
+
+
+
+ 心理咨询
+
+
+ -
+
-
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+
-
+
+
+
-
+
+
+
-
+
+
+
+
+
+ 
+
+ 黛建松
+ 清华大学心理学教授 +
+
+
+ 700人次咨询，从业8年
+-
+
- 焦虑 +
- 抑郁 +
- 儿童心理 +
- 亲子关系 +
- 青春期心理 +
- 家庭关系 +
- 压力管理 +
+
+
+
+
+ 
+ 郴州市苏仙区
+
+ ¥2480
+
+
+
+
diff --git a/src/views/today/scss/index.scss b/src/views/today/scss/index.scss
new file mode 100644
index 0000000..5595967
--- /dev/null
+++ b/src/views/today/scss/index.scss
@@ -0,0 +1,431 @@
+.today {
+ padding: 100.06px 0;
+ background-color: #fff;
+ min-height: 100vh;
+ .today-status {
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ position: relative;
+ padding:0 40px;
+ .img {
+ width: 40%;
+ object-fit: contain;
+ margin-top: 20px;
+ }
+ .icon{
+ width: 60px;
+ height: 60px;
+ object-fit: contain;
+ position: absolute;
+ top: 40px;
+ right: 40px;
+ }
+ .status {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ align-content: space-between;
+ justify-content: space-between;
+ width: 100%;
+ margin: 40px 0;
+ p {
+ font-size: 30px;
+ color: #434144;
+ font-weight: bold;
+ }
+ ul {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: flex-start;
+ li {
+ width: 40px;
+ height: 20px;
+ border-radius: 20px;
+ position: relative;
+ & + li {
+ margin-left: 10px;
+ }
+ &.toobad {
+ background-color: #ff5f8b;
+ &:after{
+ background-color: #ff5f8b;
+ }
+ }
+ &.ordinary {
+ background-color: #2ea7e0;
+ &:after{
+ background-color: #2ea7e0;
+ }
+ }
+ &.sameas {
+ background-color: #8dc21f;
+ &:after{
+ background-color: #8dc21f;
+ }
+ }
+ &.excellent {
+ background-color: #179b3b;
+ &:after{
+ background-color: #179b3b;
+ }
+ }
+ &.active {
+ width: 120px;
+ &:after {
+ opacity: 1;
+ }
+ &:before {
+ opacity: 1;
+ }
+ }
+ &:after {
+ content: '';
+ display: block;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translateX(-50%) translateY(-50%);
+ width: 40px;
+ height: 40px;
+ opacity: 0;
+ border-radius: 50%;
+ }
+ &:before {
+ content: '';
+ display: block;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translateX(-50%) translateY(-50%);
+ width: 25px;
+ height: 25px;
+ opacity: 0;
+ border-radius: 50%;
+ background-color:#fff;
+ z-index: 2;
+ }
+ }
+ }
+ }
+ .interpret {
+ padding: 50px 60px;
+ border-radius: 40px;
+ border: 1px solid bisque;
+ p{
+ font-size: 28px;
+ color: #434144;
+ white-space: pre-line;
+ line-height: 1.8em;
+ }
+ .bottom {
+ width: 100%;
+ position: relative;
+ p {
+ text-align: center;
+ color: #35a556;
+ }
+ div{
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translatey(-50%);
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: flex-start;
+ span{
+ color: #35a556;
+ font-size: 24px;
+ }
+ img {
+ width: 40px;
+ height: 40px;
+ object-fit: contain;
+ margin-left: 10px;
+ }
+ }
+ }
+ }
+ }
+ .title {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ align-content: space-between;
+ justify-content: space-between;
+ p {
+ font-size: 30px;
+ color: #434144;
+ font-weight: bold;
+ }
+ >div {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: flex-start;
+ p {
+ margin-right: 10px;
+ }
+ >div {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: flex-start;
+ p {
+ font-size: 26px;
+ color: #fff;
+ background-color: #179b3b;
+ border-radius: 20px;
+ padding: 8px 20px;
+ margin-right: 10px;
+ font-weight: normal;
+ }
+ }
+ }
+ }
+ .emotion {
+ padding:0 40px;
+ margin-top: 60px;
+ ul {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ align-content: space-between;
+ justify-content: space-between;
+ margin-top: 30px;
+ li {
+ width: 25%;
+ border-radius: 40px;
+ padding: 20px;
+ &:nth-of-type(1) {
+ background-color: #179b3b;
+ }
+ &:nth-of-type(2) {
+ background-color: #ff5f8b;
+ }
+ &:nth-of-type(3) {
+ background-color: #8dc21f;
+ }
+ h4 {
+ color: #fff;
+ font-size: 50px;
+ font-weight: normal;
+ }
+ p {
+ color: #fff;
+ font-size: 32px;
+ margin-top: 0px;
+ }
+ span {
+ color: #fff;
+ font-size: 24px;
+ border-top: 1px solid #fff;
+ padding-top: 12px;
+ }
+ time {
+ color: #fff;
+ font-size: 24px;
+ display: block;
+ }
+ }
+ }
+ }
+ .perception {
+ padding:0 40px;
+ margin-top: 60px;
+ ul {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ align-content: space-between;
+ justify-content: space-between;
+ margin-top: 30px;
+ li {
+ width: 25%;
+ border-radius: 40px;
+ padding: 20px;
+ padding-bottom: 80px;
+ &:nth-of-type(1) {
+ background-color: #179b3b;
+ }
+ &:nth-of-type(2) {
+ background-color: #ff5f8b;
+ }
+ &:nth-of-type(3) {
+ background-color: #8dc21f;
+ }
+ h4 {
+ color: #fff;
+ font-size: 46px;
+ font-weight: normal;
+ }
+ p {
+ color: #fff;
+ font-size: 30px;
+ margin-top: 0px;
+ }
+ }
+ }
+ .tip {
+ margin-top: 30px;
+ display: flex;
+ justify-content: flex-start;
+ border-bottom: 1px solid #dfdfdf;
+ padding-bottom: 40px;
+ img {
+ width: 29px;
+ height: 47px;
+ object-fit: contain;
+ margin-right: 30px;
+ }
+ p {
+ font-size: 28px;
+ color: #434144;
+ line-height: 1.5em;
+ span {
+ color: #edb21d;
+ }
+ }
+ }
+ }
+ .step {
+ padding:0 40px;
+ margin-top: 50px;
+ .main {
+ border-radius: 30px;
+ border: 1px solid #179b3b;
+ padding: 40px 30px;
+ display: flex;
+ align-items: center;
+ align-content: space-between;
+ justify-content: space-between;
+ ul {
+ li {
+ .specific {
+ font-size: 40px;
+ color: #434144;
+ span {
+ font-weight: bold;
+ }
+ }
+ .category {
+ font-size: 28px;
+ color: #434144;
+ font-weight: bold;
+ margin-top: 6px;
+ span {
+ font-weight: normal;
+ padding: 5px 15px;
+ background-color: #434144;
+ color: #fff;
+ font-size: 24px;
+ border-radius: 20px;
+ margin-left: 10px;
+ }
+ }
+ & + li {
+ margin-top: 40px;
+ }
+ }
+ }
+ .annular {
+ width: 50%;
+ position: relative;
+ transform: rotate(180deg);
+ .van-circle {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translateX(-50%) translateY(-50%);
+ }
+ p {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translateX(-50%) translateY(-50%) rotate(180deg);
+ font-size: 28px;
+ color: #434144;
+ font-weight: bold;
+ }
+ }
+ }
+ }
+ .diary {
+ padding:0 40px;
+ margin: 50px 0;
+ .main {
+ width: 100%;
+ .van-checkbox-group {
+ width: 100%;
+ margin-top: 50px;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ align-content: space-between;
+ justify-content: space-between;
+ }
+ .van-checkbox {
+ width: 26%;
+ min-width: 88px;
+ &:nth-of-type(n+4) {
+ margin-top: 40px;
+ }
+ .van-checkbox__label img {
+ width: 50px;
+ }
+ }
+ .textarea {
+ border-radius: 40px;
+ border: 1px solid #179b3b;
+ margin-top: 30px;
+ overflow: hidden;
+ textarea {
+ width: 100%;
+ padding: 30px;
+ font-size: 28px;
+ }
+ }
+ }
+ }
+ .knowledge {
+ padding: 0 0 40px 40px;
+ .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: #179b3b;
+ padding: 40px;
+ border-radius: 50px;
+ display: flex;
+ align-items: center;
+ align-content: space-between;
+ justify-content: space-between;
+ & + li {
+ margin-left: 30px;
+ }
+ p {
+ width: 55%;
+ font-size: 28px;
+ color: #fff;
+ white-space: pre-line;
+ }
+ img {
+ height: 140px;
+ object-fit: contain;
+ }
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
+ 
+ 
+
+
+
+
+
+
+ 状态优秀
+-
+
+
+
+
+
+
+
+ 工作学习要有度，适当摸鱼也很好，不用太卷哟！保持张弛 +有度的节奏，是应对压力的有效方法。 +综合今日的HRV(MSSD)和静息心率情况看，你今天整体状 +态优秀，身体压力状态较小，能很好应对今日工作生活中的 +挑战，请继续保持优秀状态。 +相信自己，你一定可以实现你的目标！
++
+
+ 详细解读
+
+ 日记
+ 
+
+
+
+
+
+
+
+ 今日情绪感知
+
+
+ 4.28
+-
+
-
+
40
+抑郁倾向
+ 无抑郁倾向 + +
+ -
+
55
+抑郁倾向
+ 无抑郁倾向 + +
+ -
+
75
+抑郁倾向
+ 无抑郁倾向 + +
+
+
+
+
+
+ 今体征感知
+
+
+ 4.28
+-
+
-
+
36.8
+体温
+
+ -
+
92
+心率
+
+ -
+
6000
+步数
+
+
+ 
+
+
+ 温馨提示：检测数据仅供参考，不可做医疗诊断和治疗依据，在运动、工作等场景会影响健康检测。
+
+
+
+
+
+ -
+
-
+
10567/6000步
+步数达标
+
+ -
+
4/5千米
+行程未达标
+
+ -
+
588/600里卡
+消耗达标
+
+
+
+ 多走4567步
+
+
+
+
+
+ 情绪日记
+
+
+
+
+ 保存
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 情绪知识库
+
+
+ -
+
-
+
+ 健康同学 测量的 + 什么压力？ + 测量原理是什么？ +
+
+
+ -
+
+ 健康同学 测量的 + 什么压力？ + 测量原理是什么？ +
+
+
+