up

展示端/.vscode/file-note.json

@@ -1 +1 @@
-[{"text":"首页","path":"src/pages/A1home","time":"24/12/9 17:26:16"},{"text":"须知-总","path":"src/pages/A2notice","time":"24/12/9 17:26:31"},{"text":"选择日期","path":"src/pages/A3selectDay","time":"24/12/9 17:26:58"}]
+[{"text":"首页","path":"src/pages/A1home","time":"24/12/9 17:26:16"},{"text":"须知-总","path":"src/pages/A2notice","time":"24/12/9 17:26:31"},{"text":"日期选择","path":"src/pages/A3selectDay","time":"24/12/9 18:46:20"},{"text":"课程选择","path":"src/pages/A4selectCourse","time":"24/12/9 18:46:29"}]

展示端/src/pages/A3selectDay/index.tsx

@@ -90,7 +90,10 @@ function A3selectDay() {
             ))}
           </div>
         </div>
-        <ZFlooBtn txt='下一步' clickFu={() => history.push('/selectCourse')} />
+        <ZFlooBtn
+          txt={acObj.id ? '下一步' : '请选择日期'}
+          clickFu={() => history.push('/selectCourse')}
+        />
       </div>
     </div>
   )

展示端/src/pages/A4selectCourse/index.module.scss

@@ -2,10 +2,115 @@
   :global {
     .A4main {
       height: calc(100% - 60px);
-      // overflow-y: auto;
-      width: 100%;
+      overflow-y: auto;
       background-image: url('../../assets/img/selectCourse/bg.jpg');
       background-size: 100% 100%;
+      .A4row {
+        margin-top: 20px;
+        margin-bottom: 70px;
+        .A4row1 {
+          height: 54px;
+          line-height: 54px;
+          display: inline-block;
+          padding: 0 24px 0 50px;
+          border-radius: 0 30px 30px 0;
+          background-color: var(--themeColor2);
+          font-size: 20px;
+          color: #fff;
+          box-shadow: 0px 4px 5px 0px rgba(109, 170, 31, 0.5);
+          position: relative;
+          & > img {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            left: 24px;
+          }
+        }
+        .A4row2 {
+          width: 90%;
+          height: 550px;
+          background-image: url('../../assets/img/selectCourse/pop.png');
+          background-size: 100% 100%;
+          margin: 25px auto;
+          .A4row2_1 {
+            padding-left: 25px;
+            height: 60px;
+            line-height: 58px;
+            width: 70%;
+            font-weight: 700;
+            font-size: 20px;
+            color: #fff;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          .A4row2_2 {
+            height: 380px;
+            padding: 30px 30px 0;
+
+            & > div {
+              width: 100%;
+              height: 100%;
+              border-bottom: 2px dashed #bebebe;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              padding-bottom: 30px;
+              .A4row2_2tit {
+                font-weight: 700;
+                font-size: 16px;
+                color: var(--themeColor);
+                margin-bottom: 5px;
+              }
+              & > p {
+                min-height: 66px;
+                text-align: justify;
+                font-size: 16px;
+                display: -webkit-box;
+                overflow: hidden;
+                white-space: normal !important;
+                text-overflow: ellipsis;
+                word-wrap: break-word;
+                line-clamp: 3;
+                -webkit-line-clamp: 3;
+                -webkit-box-orient: vertical;
+                margin-bottom: 12px;
+              }
+              .A4row2_2No {
+                width: 100%;
+                text-align: center;
+                font-size: 30px;
+                color: var(--themeColor);
+              }
+            }
+          }
+          // 按钮
+          .A4row2_3 {
+            padding: 0 30px;
+            margin-top: 20px;
+            height: 50px;
+            display: flex;
+            justify-content: space-between;
+            & > div {
+              width: 46%;
+              height: 100%;
+              border-radius: 6px;
+              box-shadow: 3px 3px 4px 0px rgba(125, 190, 43, 0.25);
+              background-color: var(--themeColor2);
+              color: #fff;
+              font-weight: 700;
+              font-size: 18px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              &:nth-of-type(1) {
+                background-color: #f18101;
+                box-shadow: 3px 3px 4px 0px rgba(241, 129, 1, 0.25);
+              }
+            }
+          }
+        }
+      }
     }
   }
 }

展示端/src/pages/A4selectCourse/index.tsx

@@ -1,11 +1,113 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import styles from './index.module.scss'
 import TopCom from '@/components/TopCom'
+
+import xingImg from '@/assets/img/selectCourse/xing.png'
+
+const list = [
+  {
+    id: 1,
+    tyle: '幼儿课程',
+    son: [
+      {
+        id: 1.1,
+        name: '1课程课程课程课程课程课程课程课程课程课程课程课程',
+        txt1: '本园特设健康科普常识课程，旨在通过趣味互动的方式，向孩子们介绍食物金字塔、人体结构等基础科学知识。我们相信，从小培养科学素养，能激发孩子们的好奇心和探索欲。',
+        txt2: '我们的授课团队由经验丰富的幼教专家和专业科普讲师组成，他们热情、耐心，擅长以孩子们喜闻乐见的形式传授知识，确保每个孩子都能在轻松愉快的氛围中学习成长。',
+        txt3: '为确保教学质量，我们的课程实行预约制。家长可通过电话或网站预约，选择孩子感兴趣的课程和时间。请至少提前一周预约，并在预约成功后按时参加，如有变动，请及时通知我们，以便安排其他家庭。'
+      },
+      {
+        id: 1.2,
+        name: '课程222',
+        txt1: '',
+        txt2: '',
+        txt3: ''
+      }
+    ]
+  },
+  {
+    id: 2,
+    tyle: '英语课程英语课程英语',
+    son: [
+      {
+        id: 2.1,
+        name: '啊沙发上',
+        txt1: '本园特设健康科普常识课程。',
+        txt2: '',
+        txt3: '为确保教学质量，我们的课程实行预约制'
+      },
+      {
+        id: 2.2,
+        name: '课程2阿三大苏打22',
+        txt1: '',
+        txt2: '啊实打实大苏打啊实打实大苏打啊实打实大苏打啊实打实大苏打啊实打实大苏打啊实打实大苏打啊实打实大苏打啊实打实大苏打啊实打实大苏打啊实打实大苏打啊实打实大苏打啊实打实大苏打',
+        txt3: ''
+      }
+    ]
+  }
+]
+
 function A4selectCourse() {
+  // 点击预约课程
+  const arrangeFu = useCallback(() => {
+    if (1 + 1 === 2) {
+      // 跳预约页面
+    } else {
+      // 去团队
+    }
+  }, [])
+
   return (
     <div className={styles.A4selectCourse}>
       <TopCom txt='选择课程' />
-      <div className='A4main'></div>
+      <div className='A4main'>
+        {list.map(item1 => (
+          <div className='A4row' key={item1.id}>
+            {/* 1级标题 */}
+            <div className='A4row1'>
+              <img src={xingImg} alt='' />
+              {item1.tyle}
+            </div>
+            {/* 2级信息 */}
+            {item1.son.map(item2 => (
+              <div className='A4row2' key={item2.id}>
+                <div className='A4row2_1'>{item2.name}</div>
+                <div className='A4row2_2'>
+                  <div>
+                    {item2.txt1 ? (
+                      <>
+                        <div className='A4row2_2tit'>课程简介：</div>
+                        <p>{item2.txt1}</p>
+                      </>
+                    ) : null}
+                    {item2.txt2 ? (
+                      <>
+                        <div className='A4row2_2tit'>授课团队：</div>
+                        <p>{item2.txt2}</p>
+                      </>
+                    ) : null}
+                    {item2.txt3 ? (
+                      <>
+                        <div className='A4row2_2tit'>预约须知：</div>
+                        <p>{item2.txt3}</p>
+                      </>
+                    ) : null}
+
+                    {!item2.txt1 && !item2.txt2 && !item2.txt3 ? (
+                      <div className='A4row2_2No'>暂无信息</div>
+                    ) : null}
+                  </div>
+                </div>
+                {/* 按钮 */}
+                <div className='A4row2_3'>
+                  <div>查看详情</div>
+                  <div>预约课程</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
     </div>
   )
 }