feat5

front/src/assets/styles/base.css

@@ -179,9 +179,28 @@ textarea {
 }
 .ant-image-preview-operations-wrapper {
   z-index: 9999 !important;
+  & > .anticon {
+    display: none;
+  }
+}
+
+.ant-image-preview-switch-left {
+  height: 60px;
+  background: url('../img/left.png') no-repeat !important;
+  background-size: 100% 100% !important;
+  left: 20%;
+}
+.ant-image-preview-switch-left-disabled {
+  opacity: 0.5;
+}
+.ant-image-preview-switch-right {
+  height: 60px;
+  background: url('../img/right.png') no-repeat !important;
+  background-size: 100% 100% !important;
+  right: 20%;
 }
-.anticon {
-  color: #f4f3d0;
+.ant-image-preview-switch-right-disabled {
+  opacity: 0.5;
 }
 .ant-notification-notice {
   max-height: 500px !important;

front/src/components/ImageLazy/index.tsx

@@ -14,6 +14,7 @@ type Props = {
   srcBig?: string
   noLook?: boolean
   offline?: boolean
+  imgError?: string
 }
 
 function ImageLazy({
@@ -22,7 +23,8 @@ function ImageLazy({
   src,
   srcBig,
   noLook,
-  offline = false
+  offline = false,
+  imgError = imgErr
 }: Props) {
   // 默认不能预览图片，加载成功之后能预览
   const [lookImg, setLookImg] = useState(false)
@@ -51,7 +53,7 @@ function ImageLazy({
           onLoad={onLoad}
           src={src ? (offline ? src : baseURL + src) : ''}
           placeholder={<img src={imgLoding} alt='' />}
-          fallback={<img src={imgErr} alt='' />}
+          fallback={<img src={imgError ? imgError : imgErr} alt='' />}
           fit='cover'
         />
 

front/src/pages/A1home/index.tsx

@@ -137,8 +137,8 @@ function A1home() {
     }
   }, [])
 
-  // 添加tooltip到指定城市下方
-  const addTooltip = useCallback((cityId: string, tooltipText: string) => {
+  // 添加tooltip和’（数量）’到指定城市下方
+  const addTooltip = useCallback((cityId: string, tooltipText: string, count: number) => {
     if (svgRef.current) {
       const city = svgRef.current.querySelector(`#${cityId}`)?.querySelector('ellipse')!
 
@@ -148,6 +148,10 @@ function A1home() {
       const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
       const text = document.createElementNS('http://www.w3.org/2000/svg', 'text')
 
+      const countText = document.createElementNS('http://www.w3.org/2000/svg', 'text')
+      const countElement = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      countElement.id = `${cityId}Count`
+
       // 设置初始属性（修改以下部分）
       rect.setAttribute('fill', 'url(#jinanGradient)') // 使用渐变引用
       // rect.setAttribute('stroke', '#6d330fff')
@@ -161,6 +165,13 @@ function A1home() {
       text.setAttribute('font-weight', '600')
       text.textContent = tooltipText
 
+      countText.setAttribute('fill', '#ec5038ff')
+      countText.setAttribute('font-size', '10px')
+      countText.setAttribute('font-weight', '600')
+      countText.setAttribute('text-anchor', 'start')
+      countText.setAttribute('dominant-baseline', 'middle')
+      countText.textContent = `(${count})`
+
       // 坐标
       const cityCX = city?.cx.baseVal.value
       const cityCY = city?.cy.baseVal.value
@@ -170,13 +181,17 @@ function A1home() {
       rect.setAttribute('y', (cityCY + 20).toString()) // 下移20px
       text.setAttribute('x', cityCX.toString())
       text.setAttribute('y', (cityCY + 30).toString()) // 文字在矩形内居中
+      countText.setAttribute('x', (cityCX + 14).toString()) // 矩形中心
+      countText.setAttribute('y', (cityCY + 10).toString()) // 文字垂直居中
 
       tooltip.appendChild(rect)
       tooltip.appendChild(text)
+      countElement.appendChild(countText)
 
       // 添加到 SVG 的 viewport 中
       const viewport = svgRef.current.querySelector('.svg-pan-zoom_viewport')
       viewport?.appendChild(tooltip)
+      viewport?.appendChild(countElement)
 
       // 隐藏tooltip,待mouseEnter再显示
       tooltip.style.opacity = '0'
@@ -185,8 +200,7 @@ function A1home() {
     }
   }, [])
 
-  // 添加“（数量）”到城市末尾
-
+  // ... 已有代码 ...
   // 更改tooltip文本内容
   const changeTooltipText = useCallback((cityId: string, text: string) => {
     if (svgRef.current) {
@@ -229,7 +243,8 @@ function A1home() {
             `${martyrListByCity[item][0].cityId}`,
             `烈士 ${martyrListByCity[item].length} | 亲属 ${
               relativeList[item]?.length || 0
-            } | 线索 ${clueList[item]?.length || 0}`
+            } | 线索 ${clueList[item]?.length || 0}`,
+            martyrListByCity[item].length
           )
         })
       }

front/src/pages/components/BottomSearch/index.module.scss

@@ -56,6 +56,61 @@
             cursor: pointer;
           }
         }
+        .searchItem {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          border-bottom: 1px solid #9e7777;
+          height: 165px;
+          .mainInfo {
+            display: flex;
+            align-items: center;
+            width: 100%;
+            height: 135px;
+            gap: 30px;
+            .right {
+              width: 0;
+              flex: 1;
+              height: 100%;
+              display: flex;
+              flex-direction: column;
+              gap: 10px;
+              .name {
+                display: flex;
+                align-items: center;
+                gap: 10px;
+                .Name {
+                  font-weight: 600;
+                  font-size: 20px;
+                }
+                .other {
+                  align-self: end;
+                }
+              }
+              .home {
+                height: fit-content;
+                max-height: 35px;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                line-clamp: 2;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                line-height: 1.4em;
+              }
+            }
+            .left {
+              width: 16%;
+              height: 100%;
+              img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+                border-radius: 10px;
+              }
+            }
+          }
+        }
       }
     }
   }

front/src/pages/components/BottomSearch/index.tsx

@@ -7,6 +7,8 @@ import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
 import { MartyrItem } from '@/types/api/martyr'
 import { nameToCityId } from '../../A1home/util'
+import ImageLazy from '@/components/ImageLazy'
+import noImg from '@/assets/img/noImg.png'
 
 type BottomSearchProps = {
   classN: string
@@ -19,7 +21,6 @@ function BottomSearch({ classN, handleItemClick }: BottomSearchProps) {
 
   const { list: listAll } = useSelector((state: RootState) => state.Martyr.tableInfo)
 
-
   useEffect(() => {
     const martyrSearch = (name: string) => {
       return listAll.filter(item => item.name.includes(name))
@@ -35,22 +36,60 @@ function BottomSearch({ classN, handleItemClick }: BottomSearchProps) {
     e.stopPropagation()
   }
 
+  const MainInfo = ({ item }: { item: MartyrItem }) => {
+    return (
+      <div
+        className='searchItem'
+        onClick={e => handleContentClick(item, e)}
+        key={item.id}
+      >
+        <div className='mainInfo'>
+          <div className='left' onClick={e => e.stopPropagation()}>
+            <ImageLazy
+              width={'100%'}
+              height={'100%'}
+              src={item.thumb}
+              srcBig={item.thumbPc}
+              imgError={noImg}
+            />
+          </div>
+          <div className='right'>
+            <div className='name'>
+              <div className='Name'>{item.name}</div>
+              <div className='other'>{item.dictPanName}</div>
+            </div>
+            <div className='gender'>
+              {item.gender} | {item.nation}
+            </div>
+            <div className='birth'>
+              {item.dateStart} - {item.dateEnd}
+            </div>
+            <div className='home'>{`籍贯：${item.nativeProvince}-${item.nativeCity}-${item.nativeRegion}`}</div>
+          </div>
+        </div>
+      </div>
+    )
+  }
 
   const items: TabsProps['items'] = [
     {
       key: '1',
       label: '全部',
-      children: searchList.map(item => <div onClick={(e) => handleContentClick(item, e)} key={item.id} > {item.name}</div >)
+      children: searchList.map(item => <MainInfo item={item} />)
     },
     {
       key: '2',
       label: '山东',
-      children: searchList.filter(item => item.nativeProvince === '山东省').map(item => <div onClick={(e) => handleContentClick(item, e)} key={item.id}>{item.name}</div>)
+      children: searchList
+        .filter(item => item.nativeProvince === '山东省')
+        .map(item => <MainInfo item={item} />)
     },
     {
       key: '3',
       label: '陕西',
-      children: searchList.filter(item => item.nativeProvince === '陕西省').map(item => <div onClick={(e) => handleContentClick(item, e)} key={item.id}>{item.name}</div>)
+      children: searchList
+        .filter(item => item.nativeProvince === '陕西省')
+        .map(item => <MainInfo item={item} />)
     }
   ]
 
@@ -83,11 +122,7 @@ function BottomSearch({ classN, handleItemClick }: BottomSearchProps) {
         </div>
         {isShowResult && (
           <div className='searchResult'>
-            <Tabs
-              defaultActiveKey='1'
-              tabBarExtraContent={operations}
-              items={items}
-            />
+            <Tabs defaultActiveKey='1' tabBarExtraContent={operations} items={items} />
           </div>
         )}
       </div>

front/src/pages/components/Detail/index.module.scss

@@ -139,7 +139,6 @@
                   cursor: pointer;
                 }
                 .videoMask {
-                  opacity: 0;
                   width: 100%;
                   height: 100%;
                   top: 0;
@@ -157,7 +156,6 @@
                 }
                 &:hover {
                   .videoMask {
-                    opacity: 1;
                     background-color: rgba(0, 0, 0, 0.5);
                   }
                 }

front/src/pages/components/Detail/index.tsx

@@ -9,6 +9,7 @@ import { ClueItem } from '@/types/api/clue'
 import ImageLazy from '@/components/ImageLazy/index'
 // import ImageLazyList from '@/components/ImageLazyList/index'
 import imgErr from '@/assets/img/IMGerror.png'
+import noImg from '@/assets/img/noImg.png'
 import { baseURL } from '@/utils/http'
 
 type DetailProps = {
@@ -61,7 +62,7 @@ function Detail({ classN, relationList, martyrDetail }: DetailProps) {
               <div className='mainInfo'>
                 <div className='left'>
                   <img
-                    src={martyrDetail?.thumb ? baseURL + martyrDetail?.thumb : imgErr}
+                    src={martyrDetail?.thumb ? baseURL + martyrDetail?.thumb : noImg}
                     alt=''
                   />
                 </div>

front/src/pages/components/Left/index.module.scss

@@ -68,15 +68,18 @@
           width: 100%;
           height: 30px;
           margin-bottom: 20px;
-          font-size: 20px;
-          font-weight: 500;
+          font-size: 14px;
           & > div {
-            padding-bottom: 5px;
+            width: 95px;
+            height: 100%;
+            line-height: 30px;
+            text-align: center;
+            color: #f5eeed;
+            border-radius: 20px;
+            background: linear-gradient(to bottom, #fcaf80, #b15013);
           }
           .active {
             font-weight: 600;
-            padding-bottom: 1px;
-            border-bottom: 4px solid;
           }
         }
         .mainInfoListBox {
@@ -114,18 +117,15 @@
               .labelList {
                 display: flex;
                 gap: 10px;
-                height: 30px;
+                height: 35px;
                 .label {
                   width: 95px;
                   height: 100%;
                   font-size: 13px;
-                  color: #f5eeed;
-                  font-weight: 600;
                   display: flex;
                   align-items: center;
                   justify-content: center;
-                  border-radius: 20px;
-                  background: linear-gradient(to bottom, #fcaf80, #b15013);
+                  background: url('../../../assets/img/label.png');
                   background-size: cover;
                 }
               }

front/src/pages/components/Right/index.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames'
 import ImageLazy from '@/components/ImageLazy'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
-
+import noImg from '@/assets/img/noImg.png'
 import { MartyrItem } from '@/types/api/martyr'
 
 type RightProps = {
@@ -58,6 +58,7 @@ function Right(props: RightProps) {
                       height={'100%'}
                       src={item.thumb}
                       srcBig={item.thumbPc}
+                      imgError={noImg}
                     />
                   </div>
                 </div>