diff --git a/src/assets/optimize/icons/3_55.png b/src/assets/optimize/icons/3_55.png
new file mode 100644
index 0000000..dc21641
Binary files /dev/null and b/src/assets/optimize/icons/3_55.png differ
diff --git a/src/assets/optimize/icons/3_58.png b/src/assets/optimize/icons/3_58.png
new file mode 100644
index 0000000..9d8dc5e
Binary files /dev/null and b/src/assets/optimize/icons/3_58.png differ
diff --git a/src/assets/optimize/icons/3_62.png b/src/assets/optimize/icons/3_62.png
new file mode 100644
index 0000000..d395596
Binary files /dev/null and b/src/assets/optimize/icons/3_62.png differ
diff --git a/src/assets/optimize/icons/3_66.png b/src/assets/optimize/icons/3_66.png
new file mode 100644
index 0000000..86cc6c2
Binary files /dev/null and b/src/assets/optimize/icons/3_66.png differ
diff --git a/src/assets/optimize/icons/location.png b/src/assets/optimize/icons/location.png
new file mode 100644
index 0000000..0d300cf
Binary files /dev/null and b/src/assets/optimize/icons/location.png differ
diff --git a/src/assets/optimize/images/3_08.png b/src/assets/optimize/images/3_08.png
new file mode 100644
index 0000000..2178532
Binary files /dev/null and b/src/assets/optimize/images/3_08.png differ
diff --git a/src/assets/optimize/images/3_20.png b/src/assets/optimize/images/3_20.png
new file mode 100644
index 0000000..c5ac3f9
Binary files /dev/null and b/src/assets/optimize/images/3_20.png differ
diff --git a/src/assets/optimize/images/3_22.png b/src/assets/optimize/images/3_22.png
new file mode 100644
index 0000000..a96e0ee
Binary files /dev/null and b/src/assets/optimize/images/3_22.png differ
diff --git a/src/assets/optimize/images/3_24.png b/src/assets/optimize/images/3_24.png
new file mode 100644
index 0000000..5b517a9
Binary files /dev/null and b/src/assets/optimize/images/3_24.png differ
diff --git a/src/assets/optimize/images/3_48.png b/src/assets/optimize/images/3_48.png
new file mode 100644
index 0000000..9475189
Binary files /dev/null and b/src/assets/optimize/images/3_48.png differ
diff --git a/src/views/optimize/index.vue b/src/views/optimize/index.vue
index 4f139b0..a60238a 100644
--- a/src/views/optimize/index.vue
+++ b/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>
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/scss/index.scss b/src/views/today/scss/index.scss
index af6af31..5595967 100644
--- a/src/views/today/scss/index.scss
+++ b/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%;