upp

web/src/assets/styles/base.css

@@ -42,7 +42,7 @@ textarea {
 /* 主题色 */
 :root {
   --themeColor: #caab7a;
-  --themeColor2: #f4945a;
+  --themeColor2: #f58543;
 }
 /* 找不到页面 */
 .noFindPage {
@@ -116,7 +116,7 @@ textarea {
   /*滚动条里面小方块*/
   border-radius: 10px;
   -webkit-box-shadow: inset 0 0 5px transparent;
-  background: #f4945a;
+  background: var(--themeColor2);
 }
 .mySorrl::-webkit-scrollbar-track {
   /*滚动条里面轨道*/

web/src/assets/styles/base.less

@@ -52,7 +52,7 @@ textarea {
 /* 主题色 */
 :root {
   --themeColor: #caab7a;
-  --themeColor2: #f4945a;
+  --themeColor2: #f58543;
 }
 
 /* 找不到页面 */
@@ -142,7 +142,7 @@ textarea {
   /*滚动条里面小方块*/
   border-radius: 10px;
   -webkit-box-shadow: inset 0 0 5px transparent;
-  background: #f4945a;
+  background: var(--themeColor2);
 }
 
 .mySorrl::-webkit-scrollbar-track {

web/src/components/LeftTopLogo/index.module.scss

@@ -1,5 +1,5 @@
 .LeftTopLogo {
-  position: fixed;
+  position: absolute;
   z-index: 9998;
   top: 20px;
   left: 20px;

web/src/components/RouterOrder.tsx

@@ -12,6 +12,9 @@ const A2scene = React.lazy(() => import('@/pages/A2scene'))
 const A3goods = React.lazy(() => import('@/pages/A3goods'))
 const A3goodsM = React.lazy(() => import('@/pages/A3goodsM'))
 
+const A4expert = React.lazy(() => import('@/pages/A4expert'))
+const A4expertM = React.lazy(() => import('@/pages/A4expertM'))
+
 const routerArr = [
   {
     id: 1,
@@ -34,6 +37,13 @@ const routerArr = [
     exact: false,
     Com: isMobileFu() ? A3goodsM : A3goods
   },
+  {
+    id: 3,
+    name: '专家风采',
+    path: '/expert',
+    exact: false,
+    Com: isMobileFu() ? A4expertM : A4expert
+  },
 
   {
     id: 9,

web/src/pages/A1home/index.module.scss

@@ -13,7 +13,7 @@
     }
     .leftTopLogo {
       pointer-events: none;
-      position: fixed;
+      position: absolute;
       // z-index: 9998;
       top: 20px;
       left: 20px;

web/src/pages/A3goods/index.module.scss

@@ -45,7 +45,7 @@
             }
             .active {
               border-radius: 15px;
-              background-color: #f58543;
+              background-color: var(--themeColor2);
             }
           }
         }

web/src/pages/A3goods/index.tsx

@@ -98,8 +98,6 @@ function A3goods() {
       if (val === '') resData = dataAll
       else resData = dataAll.filter(v => v.name.includes(val))
 
-      console.log(123, val, resData, acTxt)
-
       index === 1 ? setData1(resData) : index === 2 ? setData2(resData) : setData3(resData)
 
       sollrTop(classKey)

web/src/pages/A4expert/A4look/index.module.scss

@@ -0,0 +1,81 @@
+.A4look {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  background-size: 100% 100%;
+  padding: 7% 10% 9%;
+  :global {
+    .Lcolse {
+      z-index: 10;
+      cursor: pointer;
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      width: 50px;
+    }
+
+    .A4Lmani {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: space-between;
+      .A4Lll {
+        margin-right: 80px;
+        width: 380px;
+        height: 100%;
+        object-fit: cover !important;
+        pointer-events: none;
+        display: inline-block;
+        border-radius: 30px;
+      }
+      .A4Lrr {
+        width: calc(100% - 460px);
+        height: 100%;
+        .A4Lrr1 {
+          display: flex;
+          padding-bottom: 15px;
+          border-bottom: 2px solid var(--themeColor2);
+          margin-bottom: 30px;
+          & > h1 {
+            color: var(--themeColor2);
+            font-weight: 700;
+            font-size: 34px;
+            margin-right: 20px;
+          }
+          & > p {
+            position: relative;
+            top: 18px;
+            color: #999;
+            font-size: 18px;
+          }
+        }
+        .A4Lrr2 {
+          display: flex;
+          align-items: center;
+          margin-bottom: 20px;
+          font-size: 16px;
+          & > img {
+            width: 26px;
+          }
+          & > span {
+            font-weight: 700;
+            color: var(--themeColor2);
+          }
+        }
+        .A4Lrr3 {
+          padding-right: 15px;
+          height: calc(100% - 235px);
+          overflow-y: auto;
+          p {
+            line-height: 30px;
+            font-size: 16px;
+            letter-spacing: 4px;
+          }
+        }
+      }
+    }
+  }
+}

web/src/pages/A4expert/A4look/index.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import styles from './index.module.scss'
+import { baseURL, myData } from '@/utils/history'
+import { ZhuanObj } from '@/types'
+
+type Props = {
+  info: ZhuanObj
+  closeFu: () => void
+}
+
+function A4look({ info, closeFu }: Props) {
+  return (
+    <div
+      id='LookGood'
+      className={styles.A4look}
+      style={{ backgroundImage: `url(${baseURL + myData.expert.bg})` }}
+    >
+      {/* 关闭按钮 */}
+      <img onClick={closeFu} className='Lcolse' src={baseURL + 'goods/close.png'} alt='' />
+
+      <div className='A4Lmani'>
+        <img className='A4Lll' src={baseURL + info.lookSrc} alt='' />
+        <div className='A4Lrr'>
+          <div className='A4Lrr1'>
+            <h1>{info.name}</h1>
+            <p>{info.name2}</p>
+          </div>
+
+          <div className='A4Lrr2'>
+            <img src={baseURL + 'expert/li1.png'} alt='' />
+            <span>职称：</span>
+            {info.zhi}
+          </div>
+
+          <div className='A4Lrr2'>
+            <img src={baseURL + 'expert/li2.png'} alt='' />
+            <span>专长：</span>
+            {info.zhuan}
+          </div>
+
+          <div className='A4Lrr2'>
+            <img src={baseURL + 'expert/li3.png'} alt='' />
+            <span>简介：</span>
+          </div>
+
+          <div className='A4Lrr3 mySorrl'>
+            <div dangerouslySetInnerHTML={{ __html: info.txt }}></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const MemoA4look = React.memo(A4look)
+
+export default MemoA4look

web/src/pages/A4expert/index.module.scss

@@ -0,0 +1,210 @@
+.A4expert {
+  background-size: 100% 100%;
+  padding: 5% 5% 4% 5%;
+  position: relative;
+  :global {
+    .A4top {
+      height: 90px;
+      display: flex;
+      justify-content: space-between;
+
+      .A4topll {
+        height: 100%;
+        pointer-events: none;
+      }
+      .A4toprr {
+        font-size: 16px;
+        display: flex;
+        height: 100%;
+        align-items: center;
+        .A4trRow {
+          cursor: pointer;
+          padding: 0 14px;
+          height: 30px;
+          line-height: 30px;
+        }
+        .A4trRowAc {
+          pointer-events: none;
+          color: #fcda99;
+          background-color: var(--themeColor2);
+          border-radius: 15px;
+        }
+
+        .A4trInp {
+          margin-left: 24px;
+          display: flex;
+          height: 32px;
+          border-radius: 16px;
+          overflow: hidden;
+          width: 230px;
+          background-color: #fff;
+          input {
+            width: 190px;
+            padding: 0 15px;
+            border: none;
+            outline: none;
+            outline: 0;
+            font-size: 16px;
+          }
+          input::-webkit-input-placeholder {
+            /* WebKit browsers */
+            color: rgba(0, 0, 0, 0.4);
+          }
+
+          input:-moz-placeholder {
+            /* Mozilla Firefox 4 to 18 */
+            color: rgba(0, 0, 0, 0.4);
+          }
+
+          input::-moz-placeholder {
+            /* Mozilla Firefox 19+ */
+            color: rgba(0, 0, 0, 0.4);
+          }
+
+          input:-ms-input-placeholder {
+            /* Internet Explorer 10+ */
+            color: rgba(0, 0, 0, 0.4);
+          }
+          .A4trInpInco {
+            width: 40px;
+            background-color: var(--themeColor2);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            font-size: 24px;
+            color: #fff;
+          }
+        }
+      }
+    }
+
+    .A4main {
+      margin-top: 40px;
+      width: 100%;
+      height: calc(100% - 130px);
+      padding-bottom: 80px;
+      overflow-x: auto;
+
+      .A4mBox {
+        display: flex;
+        height: 100%;
+        .A4mRow {
+          width: 310px;
+          height: 100%;
+          margin-right: 30px;
+          padding-bottom: 50px;
+
+          & > div {
+            cursor: pointer;
+            width: 100%;
+            height: 100%;
+            border: 4px solid #c8a063;
+            border-radius: 30px;
+            overflow: hidden;
+            position: relative;
+
+            .A4mRtitle {
+              width: 100%;
+              margin: 30px 0 10px;
+              color: var(--themeColor2);
+              font-weight: 700;
+              font-size: 24px;
+              background-size: 100% 100%;
+            }
+            .A4mRtitle2 {
+              margin-bottom: 24px;
+              color: #999;
+            }
+            .A4mRtxt {
+              line-height: 20px;
+              letter-spacing: 2px;
+              color: #333;
+            }
+
+            .A4mRowShow {
+              position: relative;
+              z-index: 2;
+              padding: 50px;
+              text-align: center;
+              background-color: #faf3e6;
+              width: 100%;
+              height: 100%;
+              opacity: 1;
+              pointer-events: auto;
+              transition: opacity 0.5s;
+              & > img {
+                pointer-events: none;
+                width: 90%;
+                height: 220px;
+                object-fit: cover !important;
+                display: inline-block;
+              }
+            }
+            .A4mRowMoveShow {
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+              background-size: 100% 100%;
+              padding: 50px;
+              text-align: center;
+              .A4mRowMoveShowInco {
+                position: absolute;
+                bottom: 80px;
+                left: 50%;
+                transform: translateX(-50%);
+                width: 50px;
+                pointer-events: none;
+              }
+            }
+            &:hover {
+              .A4mRowShow {
+                opacity: 0;
+                pointer-events: none;
+              }
+            }
+          }
+        }
+        .A4mRowOu {
+          padding: 50px 0 0;
+        }
+      }
+
+      .A4mNull {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        text-align: center;
+        & > img {
+          width: 240px;
+        }
+        & > p {
+          font-size: 24px;
+          margin: 10px 0;
+        }
+      }
+
+      // 左右箭头
+      .A4mIcon {
+        position: absolute;
+        z-index: 10;
+        bottom: 8%;
+        left: 50%;
+        transform: translateX(-50%);
+        height: 36px;
+        & > img {
+          height: 100%;
+          cursor: pointer;
+          &:nth-of-type(1) {
+            margin-right: 150px;
+          }
+        }
+      }
+    }
+  }
+}

web/src/pages/A4expert/index.tsx

@@ -0,0 +1,187 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import { baseURL, myData } from '@/utils/history'
+import LeftTopLogo from '@/components/LeftTopLogo'
+import { SearchOutline } from 'antd-mobile-icons'
+import { Input } from 'antd-mobile'
+import classNames from 'classnames'
+import { ZhuanObj } from '@/types'
+import A4look from './A4look'
+
+function A4expert() {
+  const [txt, setTxt] = useState('')
+
+  const [topArr, setTopArr] = useState<string[]>([])
+
+  const [topAc, setTopAc] = useState('全部')
+
+  useEffect(() => {
+    const types = myData.expert.infoArr.map(v => v.type)
+    setTopArr(['全部', ...Array.from(new Set(types))])
+  }, [])
+
+  const [data, setData] = useState(myData.expert.infoArr)
+
+  const sroolRef = useRef<HTMLDivElement>(null)
+
+  const sroolRefFu = useCallback(() => {
+    if (sroolRef.current) {
+      sroolRef.current.scrollTo({ left: 0, behavior: 'smooth' })
+    }
+  }, [])
+
+  // 点击切换顶部
+  const cutTopFu = useCallback(
+    (val: string) => {
+      setTopAc(val)
+      setTxt('')
+      if (val === '全部') setData(myData.expert.infoArr)
+      else setData(myData.expert.infoArr.filter(v => v.type === val))
+      sroolRefFu()
+    },
+    [sroolRefFu]
+  )
+
+  // 点击搜索
+  const btnSearchFu = useCallback(() => {
+    const dataAll =
+      topAc === '全部' ? myData.expert.infoArr : myData.expert.infoArr.filter(v => v.type === topAc)
+
+    setData(
+      dataAll.filter(
+        v =>
+          v.name.includes(txt) ||
+          v.name2.includes(txt) ||
+          v.zhi.includes(txt) ||
+          v.zhuan.includes(txt)
+      )
+    )
+    sroolRefFu()
+  }, [sroolRefFu, topAc, txt])
+
+  // 滚轮
+  const mousemoveFu = useCallback((ev: any) => {
+    if (sroolRef.current) {
+      const nowMove = sroolRef.current.scrollLeft
+      // 滚轮
+      let num = 50
+      if (ev.deltaY < 0) num = -num
+      sroolRef.current.scrollLeft = nowMove + num
+    }
+  }, [])
+
+  // 点击左右箭头
+  const clickIncoFu = useCallback((flag: 1 | -1) => {
+    if (sroolRef.current) {
+      const numNow = sroolRef.current.scrollLeft
+      const moveNum = 500 * flag
+      let resNum = numNow + moveNum
+      sroolRef.current.scrollTo({ left: resNum, behavior: 'smooth' })
+    }
+  }, [])
+
+  // 平时展示 和 鼠标移入的相同dom
+  const rowTongDom = useCallback((info: ZhuanObj) => {
+    return (
+      <>
+        <div
+          className='A4mRtitle'
+          style={{ backgroundImage: `url(${baseURL + 'expert/mjfc.png'})` }}
+        >
+          {info.name}
+        </div>
+        <div className='A4mRtitle2'>{info.name2}</div>
+        <div className='A4mRtxt'>{info.zhi}</div>
+      </>
+    )
+  }, [])
+
+  const [opInfo, setOpInfo] = useState({} as ZhuanObj)
+
+  return (
+    <div
+      className={styles.A4expert}
+      style={{ backgroundImage: `url(${baseURL + myData.expert.bg})` }}
+    >
+      <LeftTopLogo />
+
+      <div className='A4top'>
+        <img className='A4topll' src={baseURL + 'expert/topBg.png'} alt='' />
+        <div className='A4toprr'>
+          类型：&nbsp;&nbsp;
+          {topArr.map(v => (
+            <div
+              onClick={() => cutTopFu(v)}
+              className={classNames('A4trRow', topAc === v ? 'A4trRowAc' : '')}
+              key={v}
+            >
+              {v}
+            </div>
+          ))}
+          <div className='A4trInp'>
+            <Input
+              placeholder='请输入搜索内容'
+              value={txt}
+              onChange={val => setTxt(val.replace(/\s+/g, ''))}
+              onEnterPress={btnSearchFu}
+            />
+            <div className='A4trInpInco' onClick={btnSearchFu}>
+              <SearchOutline />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className='A4main mySorrlNo' ref={sroolRef} onWheel={e => mousemoveFu(e)}>
+        {data.length ? (
+          <div className='A4mBox' style={{ width: 310 * data.length + 'px' }}>
+            {data.map((v, i) => (
+              <div className={classNames('A4mRow', i % 2 === 0 ? 'A4mRowOu' : '')} key={v.name}>
+                <div>
+                  <div className='A4mRowShow'>
+                    <img src={baseURL + v.coveImg} alt='' />
+                    {rowTongDom(v)}
+                  </div>
+
+                  <div
+                    onClick={() => setOpInfo(v)}
+                    className='A4mRowMoveShow'
+                    style={{ backgroundImage: `url(${baseURL + 'expert/moveBg.png'})` }}
+                  >
+                    {rowTongDom(v)}
+
+                    {/* 底部箭头 */}
+                    <img
+                      className='A4mRowMoveShowInco'
+                      src={baseURL + 'expert/moveInco.png'}
+                      alt=''
+                    />
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className='A4mNull'>
+            <img src={baseURL + 'goods/null.png'} alt='' />
+            <p>暂时没有数据</p>
+            <p>请试一下其他关键字</p>
+          </div>
+        )}
+
+        {/* 左右箭头 */}
+        <div className='A4mIcon' hidden={data.length <= 4}>
+          <img onClick={() => clickIncoFu(-1)} src={baseURL + 'expert/left.png'} alt='' />
+          <img onClick={() => clickIncoFu(1)} src={baseURL + 'expert/right.png'} alt='' />
+        </div>
+      </div>
+
+      {/* 查看详情 */}
+      {opInfo.name ? <A4look info={opInfo} closeFu={() => setOpInfo({} as ZhuanObj)} /> : null}
+    </div>
+  )
+}
+
+const MemoA4expert = React.memo(A4expert)
+
+export default MemoA4expert

web/src/pages/A4expertM/index.module.scss

@@ -0,0 +1,4 @@
+.A4expertM {
+  :global {
+  }
+}

web/src/pages/A4expertM/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import styles from './index.module.scss'
+function A4expertM() {
+  return (
+    <div className={styles.A4expertM}>
+      <h1>中山大学附属肿瘤医院线上院史馆132</h1>
+      <h2>移动端开发中,敬请期待.</h2>
+    </div>
+  )
+}
+
+const MemoA4expertM = React.memo(A4expertM)
+
+export default MemoA4expertM

web/src/types/api/layot.d.ts

@@ -16,8 +16,13 @@ export type MyDataType = {
     model: GoodsInfo
     video: GoodsInfo
   }
+  expert: {
+    bg: string
+    infoArr: ZhuanObj[]
+  }
 }
 
+// 馆藏
 export type GoodsRow = {
   type: string
   name: string
@@ -30,3 +35,16 @@ export type GoodsInfo = {
   name2: string
   rowArr: GoodsRow[]
 }
+
+// 专家
+
+export type ZhuanObj = {
+  type: string
+  name: string
+  name2: string
+  coveImg: string
+  lookSrc: string
+  zhi: string
+  zhuan: string
+  txt: string
+}