添-设备租赁-详情页面

pages/equipmentLeasing/detail/[pid].tsx

+import React from 'react'
+import Layout from "~/components/layout";
+import {Box} from './styled';
+import ImagePreview from './components/picture-preview';
+
+export default function EquipmentLeasingDetail() {
+  return (
+    <Layout>
+      <Box>
+        <ImagePreview />
+      </Box>
+    </Layout>
+  )
+}

pages/equipmentLeasing/detail/components/picture-preview/index.tsx

+import React , {useState,useRef} from 'react'
+import {Box} from './styled';
+import { LeftOutlined , RightOutlined } from '@ant-design/icons';
+export default function index() {
+    const mask =useRef<HTMLDivElement>(null!)
+    const moveBox =useRef<HTMLDivElement>(null!)
+    const big =useRef<HTMLImageElement>(null!)
+    
+    const [moveLeft,setMoveLeft] = useState(0) // 根据这个值设置图片列表向左偏移
+    const imgList = [
+        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
+      ]
+
+      const [activeImgIndex,setActiveImgIndex] = useState(0)
+
+    // 改变预览图
+   const handleChangeImg = (index:number) => {
+        setActiveImgIndex(index)
+      }
+      // 移动缩略图
+    const handleSlide = (direction:string) => {
+        //左侧按钮
+        if (direction == 'left') {
+          moveLeft == 0 ? setMoveLeft(0) : setMoveLeft((props)=>props - 1)
+        } else { // 右侧按钮
+          if (imgList.length > 4) {
+            moveLeft >= imgList.length - 4 ? setMoveLeft(imgList.length - 4) : setMoveLeft((props)=>props + 1)
+          }
+        }
+      }
+      // 图片放大镜
+     const handleMouseMove = (event:React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        let left = event.nativeEvent.offsetX - mask.current.offsetWidth / 2;
+        let top = event.nativeEvent.offsetY - mask.current.offsetHeight / 2;
+        // 最右侧和最下侧的临界值
+        const maxLeft = moveBox.current.offsetWidth - mask.current.offsetWidth
+        const maxTop = moveBox.current.offsetHeight - mask.current.offsetHeight
+        //约束范围
+        if (left <= 0) left = 0;
+        if (left >= maxLeft) left = maxLeft
+        if (top <= 0) top = 0;
+        if (top >= maxTop) top = maxTop
+        // 设置放大范围遮罩层位置
+        console.log(event,left,maxLeft);
+        mask.current.style.left = left + "px";
+        mask.current.style.top = top + "px";
+        // 设置大图图片位置，可以用background代替这个方案，有兴趣可以尝试
+        big.current.style.left = -2.57 * left + "px"; // 2.57这个值是 大图除以小图算出来的比例 这里大图是900px 小图是350px
+        big.current.style.top = -2.57 * top + "px";
+      }
+  return (
+    <Box>
+        <div className="img_wrapper">
+        <div className="img_content">
+        {/* <!--    蒙层，绑定鼠标事件   --> */}
+        <div className="movebox"
+            onMouseMove={(e)=>handleMouseMove(e)}
+            ref={moveBox}>
+        </div>
+        {/* <!--    主图   --> */}
+        <img src={imgList[activeImgIndex]}
+            className="img_small"
+            alt=""/>
+        {/* <!--  放大区域 --> */}
+        <div className="mask"
+            ref={mask}></div>
+        {/* <!-- 大图预览图 --> */}
+        <div className="img_big">
+            <img src={imgList[activeImgIndex]}
+                ref={big}
+                alt=""/>
+        </div>
+        </div>
+        {/* <!--    缩略图列表     --> */}
+        <div className="img_list_wrapper">
+            <LeftOutlined className="el-icon-arrow-left" onClick={()=>handleSlide('left')}/>
+        <div className="img_list_content">
+            <div className="img_list"
+                style={{marginLeft: - moveLeft * 25  + '%'}}>
+                  {
+                    imgList.map((item,index)=>(
+                        <img
+                        onMouseOver={()=>handleChangeImg(index)}
+                        key={index}
+                        // className={`${{activeImgIndex === index ? "activeImg" : ''}}`}
+                        src={item}
+                        alt="" />
+                    ))
+                  } 
+             </div>
+             </div>
+                 <RightOutlined className="el-icon-arrow-right" onClick={()=>handleSlide('right')}/>
+             </div>
+         </div>
+    </Box>
+  )
+}

pages/equipmentLeasing/detail/components/picture-preview/styled.tsx

+import styled from "styled-components"
+
+export const Box = styled.div`
+    box-sizing: border-box;
+    .img_wrapper {
+  width: 350px;
+  .img_content {
+    position: relative;
+    border: 1px solid #f2f2f2;
+    box-sizing: border-box;
+    width: 350px;
+    height: 350px;
+    &:hover{
+        cursor: move;
+    }
+    .movebox {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 1;
+      &:hover ~ .img_big {
+        display: block;
+      }
+    }
+    .mask {
+      width: 50%;
+      height: 50%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      display: none;
+      background-color: #fedef4;
+      box-sizing: border-box;
+      opacity: 0.5;
+      border: 1px solid #aaa;
+      cursor: move;
+    }
+    .img_small {
+      width: 100%;
+      height: 100%;
+      //object-fit: contain;
+    }
+    &:hover .mask {
+      display: block;
+    }
+    .img_big {
+      background-color: #fff;
+      z-index: 10;
+      display: none;
+      position: absolute;
+      top: 0;
+      left: 349px;
+      box-sizing: border-box;
+      border: 1px solid #f2f2f2;
+      width: 450px;
+      height: 450px;
+      overflow: hidden;
+      img {
+        width: 200%;
+        height: 200%;
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+    }
+  }
+  .img_list_wrapper {
+    padding-top: 20px;
+    width: 350px;
+    display: flex;
+    justify-content: space-between;
+    .img_list_content {
+      width: 280px;
+      overflow: hidden;
+      .img_list {
+        display: flex;
+        flex-wrap: nowrap;
+        transition: all 0.3s linear;
+        img {
+          cursor: pointer;
+          border: 1px solid #fff;
+          box-sizing: border-box;
+          width: 70px;
+          height: 70px;
+        }
+        .activeImg {
+          border: 1px solid rgb(214, 70, 70);
+        }
+      }
+    }
+    &::v-deep .el-icon-arrow-left {
+      cursor: pointer;
+      font-size: 30px;
+      width: 30px;
+      height: 70px;
+      line-height: 70px;
+    }
+    &::v-deep .el-icon-arrow-right {
+      cursor: pointer;
+      font-size: 30px;
+      width: 30px;
+      height: 70px;
+      line-height: 70px;
+    }
+  }
+}
+`
\ No newline at end of file

pages/equipmentLeasing/detail/styled.tsx

+import styled from "styled-components"
+
+export const Box = styled.div`
+    box-sizing: border-box;
+    width: 1200px;
+    background-color: #fff;
+`
\ No newline at end of file

pages/equipmentLeasing/index.tsx

@@ -3,14 +3,17 @@ import {Box} from './styled';
 import { Button, Select, Space, Tag } from "antd";
 import Layout from "~/components/layout";
 import ContentBox from '~/components/contentBox';
+import { useRouter } from "next/router";
 
 export default function EquipmentLeasing() {
-  const leftDom = <div className='item'>
+  const router = useRouter();
+
+  const leftDom = <div className='item' onClick={() => router.push('/equipmentLeasing/detail/1')}>
     <div className="item-top">
         <div className="item-top-image"></div>
     </div>
     <div className="item-bottom">
-      <div className="item-bottom-title">asdasd</div>
+      <div className="item-bottom-title">入云龙ll 1550入云龙ll入</div>
       <div className="item-bottom-price">
         <span className="money">¥23</span>
         <span className="unit">/天起</span>

pages/jobServices/detail/[pid].tsx

@@ -5,7 +5,7 @@ import { Tabs , Button } from 'antd';
 import type { TabsProps } from 'antd';
 import Evaluate from './components/evaluate';
 
-export default function index() {
+export default function JobServicesDetail() {
   const onChange = (key: string) => {
     console.log(key);
   };

pages/jobServices/detail/components/evaluate/index.tsx

@@ -3,8 +3,8 @@ import {Box} from './styled';
 import { Rate } from 'antd';
 import Image from 'next/image';
 
-export default function index() {
-    
+export default function Evaluate() {
+
     const list = [{},{},{},{}]
 
   return (