课程详情

展示端/src/assets/styles/base.css

@@ -43,6 +43,7 @@ textarea {
 :root {
   --themeColor: #0d79d9;
   --themeColor2: #7dbe2b;
+  --themeColor3: #f18001;
 }
 /* 找不到页面 */
 .noFindPage {
@@ -164,3 +165,14 @@ textarea {
 .ant-image-preview-close {
   display: none !important;
 }
+#openDom {
+  animation: openDom 0.5s linear forwards;
+}
+@keyframes openDom {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

展示端/src/assets/styles/base.less

@@ -53,6 +53,7 @@ textarea {
 :root {
   --themeColor: #0d79d9;
   --themeColor2: #7dbe2b;
+  --themeColor3: #f18001;
 }
 
 /* 找不到页面 */
@@ -197,3 +198,17 @@ textarea {
 .ant-image-preview-close {
   display: none !important;
 }
+
+// 详情打开 透明的动画
+#openDom {
+  animation: openDom 0.5s linear forwards;
+}
+@keyframes openDom {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,49 @@
+.A4look {
+  position: absolute;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  :global {
+    .A4Lmain {
+      padding-top: 6%;
+      background-image: url('../../../assets/img/notice/bg03.jpg');
+      background-size: cover;
+      height: calc(100% - 60px);
+
+      .A4Ltop {
+        display: flex;
+        justify-content: space-around;
+        margin-bottom: 30px;
+        .A4Ltrow {
+          color: #9e968d;
+          font-weight: 700;
+          font-size: 20px;
+          padding-bottom: 5px;
+          border-bottom: 4px solid transparent;
+        }
+        .A4LtrowAc {
+          color: var(--themeColor3);
+          border-color: var(--themeColor3);
+        }
+      }
+
+      .A4Ltxt {
+        padding-left: 24px;
+        height: calc(100% - 70px);
+        & > div {
+          padding-right: 24px;
+          width: 100%;
+          height: 100%;
+          overflow-y: auto;
+          color: #303030;
+          font-size: 16px;
+          letter-spacing: 3px;
+          line-height: 24px;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,72 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import { SonType } from '..'
+import TopCom from '@/components/TopCom'
+import classNames from 'classnames'
+
+type Props = {
+  info: SonType
+  closeFu: () => void
+}
+
+function A4look({ info, closeFu }: Props) {
+  const [topArr, setTopArr] = useState<string[]>([])
+  const [topAc, setTopAc] = useState('')
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (sollrRef.current) sollrRef.current.scrollTo({ top: 0, behavior: 'smooth' })
+    }, 100)
+  }, [topAc])
+
+  useEffect(() => {
+    const { txt1, txt2, txt3 } = info
+    let arr: string[] = []
+    if (txt1) arr.push('课程简介')
+    if (txt2) arr.push('教师简介')
+    if (txt3) arr.push('预约须知')
+    setTopArr(arr)
+
+    if (txt1) setTopAc('课程简介')
+    else if (txt2) setTopAc('教师简介')
+    else if (txt3) setTopAc('预约须知')
+  }, [info])
+
+  const sollrRef = useRef<HTMLDivElement>(null)
+
+  const txtRes = useMemo(() => {
+    const obj = {
+      课程简介: info.txt1,
+      教师简介: info.txt2,
+      预约须知: info.txt3
+    }
+    return Reflect.get(obj, topAc)
+  }, [info, topAc])
+
+  return (
+    <div id='openDom' className={styles.A4look}>
+      <TopCom txt='课程详情' backFu={closeFu} />
+      <div className='A4Lmain'>
+        <div className='A4Ltop'>
+          {topArr.map(item => (
+            <div
+              onClick={() => setTopAc(item)}
+              className={classNames('A4Ltrow', topAc === item ? 'A4LtrowAc' : '')}
+              key={item}
+            >
+              {item}
+            </div>
+          ))}
+        </div>
+
+        <div className='A4Ltxt'>
+          {txtRes ? <div dangerouslySetInnerHTML={{ __html: txtRes }} ref={sollrRef}></div> : null}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const MemoA4look = React.memo(A4look)
+
+export default MemoA4look

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

@@ -1,4 +1,5 @@
 .A4selectCourse {
+  position: relative;
   :global {
     .A4main {
       height: calc(100% - 60px);
@@ -108,6 +109,11 @@
                 box-shadow: 3px 3px 4px 0px rgba(241, 129, 1, 0.25);
               }
             }
+            .A4row2_3No {
+              background-color: #d9d9d9 !important;
+              pointer-events: none;
+              color: #aeaeae;
+            }
           }
         }
       }

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

@@ -1,8 +1,17 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useState } from 'react'
 import styles from './index.module.scss'
 import TopCom from '@/components/TopCom'
 
 import xingImg from '@/assets/img/selectCourse/xing.png'
+import A4look from './A4look'
+
+export type SonType = {
+  id: number
+  name: string
+  txt1: string
+  txt2: string
+  txt3: string
+}
 
 const list = [
   {
@@ -53,10 +62,13 @@ function A4selectCourse() {
     if (1 + 1 === 2) {
       // 跳预约页面
     } else {
-      // 去团队
+      // 去团队认证
     }
   }, [])
 
+  // 点击查看详情
+  const [info, setInfo] = useState({} as SonType)
+
   return (
     <div className={styles.A4selectCourse}>
       <TopCom txt='选择课程' />
@@ -100,14 +112,21 @@ function A4selectCourse() {
                 </div>
                 {/* 按钮 */}
                 <div className='A4row2_3'>
-                  <div>查看详情</div>
-                  <div>预约课程</div>
+                  <div
+                    onClick={() => setInfo(item2)}
+                    className={!item2.txt1 && !item2.txt2 && !item2.txt3 ? 'A4row2_3No' : ''}
+                  >
+                    查看详情
+                  </div>
+                  <div onClick={arrangeFu}>预约课程</div>
                 </div>
               </div>
             ))}
           </div>
         ))}
       </div>
+      {/* 查看详情 */}
+      {info.id ? <A4look info={info} closeFu={() => setInfo({} as SonType)} /> : null}
     </div>
   )
 }