Skip to content

W
web
提交 b9ff9be8 作者: 曹云
操作

改-设备租赁-详情-样式

上级 6a0e0f9b
正在显示 包含 180 行增加 和 27 行删除
components/NavHeader/index.tsx
......@@ -21,7 +21,7 @@ const items: TabsProps["items"] = [
},
{
key: "/flyingHandService",
label: `飞手服务`,
label: `飞手培训`,
},
{
key: "/mall",
......
pages/equipmentLeasing/detail/[pid].page.tsx 0 → 100644
import React from 'react'
import Layout from "~/components/layout";
import {Box} from './styled';
import ImagePreview from './components/picture-preview';
import { Button , Image as AImage , Divider } from 'antd';
import Image from 'next/image';
import errImg from "~/assets/errImg";
export default function EquipmentLeasingDetail() {
return (
<Layout>
<Box>
<div className='item'>
<ImagePreview />
<div className='item-right'>
<div className='title'>入云龙1550</div>
<div className='function'>
<div className='function-item'>官方质检</div>
<div className='function-item'>1天起租</div>
<div className='function-item'>极速发货</div>
<div className='function-item'>渠道商免押</div>
</div>
<div className='menoy'>
<span className='menoy-left'>¥200</span>
<span className='menoy-right'>/天起</span>
</div>
<div className='classification'></div>
<div className='botton-btn'>
<Button className='btn-left' size='small' type="primary">成为渠道商</Button>
<Button className='btn-right' size='small' type="primary">立即租赁</Button>
</div>
</div>
</div>
<div className='flow-path'>
<Image className='image' src={require("./assets/flow-path.png")} alt="" />
</div>
<div className='prompt'>
更多租金规则请前往【云享飞】微信小程序查
</div>
<Divider className='divider'>商品详情</Divider>
<div style={{ textAlign: "center" }}>
<AImage fallback={errImg} width={1080}></AImage>
</div>
</Box>
</Layout>
)
}
pages/equipmentLeasing/detail/[pid].tsx deleted 100644 → 0
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
......@@ -21,7 +21,7 @@ export default function index() {
// 改变预览图
const handleChangeImg = (index:number) => {
setActiveImgIndex(index)
if (index <= moveLeft + 3) setActiveImgIndex(index)
}
// 移动缩略图
const handleSlide = (direction:string) => {
......@@ -47,12 +47,11 @@ export default function index() {
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";
big.current.style.left = -3 * left + "px"; // 3这个值是 大图除以小图算出来的比例 这里大图是900px 小图是300px
big.current.style.top = -3 * top + "px";
}
return (
<Box>
......@@ -88,7 +87,7 @@ export default function index() {
<img
onMouseOver={()=>handleChangeImg(index)}
key={index}
// className={`${{activeImgIndex === index ? "activeImg" : ''}}`}
className={`${activeImgIndex === index ? 'activeImg' : ''}`}
src={item}
alt="" />
))
......
pages/equipmentLeasing/detail/components/picture-preview/styled.tsx
......@@ -3,13 +3,13 @@ import styled from "styled-components"
export const Box = styled.div`
box-sizing: border-box;
.img_wrapper {
width: 350px;
width: 300px;
.img_content {
position: relative;
border: 1px solid #f2f2f2;
box-sizing: border-box;
width: 350px;
height: 350px;
width: 300px;
height: 300px;
&:hover{
cursor: move;
}
......@@ -68,11 +68,12 @@ export const Box = styled.div`
}
.img_list_wrapper {
padding-top: 20px;
width: 350px;
width: 300px;
display: flex;
align-items: center;
justify-content: space-between;
.img_list_content {
width: 280px;
width: 240px;
overflow: hidden;
.img_list {
display: flex;
......@@ -82,8 +83,8 @@ export const Box = styled.div`
cursor: pointer;
border: 1px solid #fff;
box-sizing: border-box;
width: 70px;
height: 70px;
width: 60px;
height: 60px;
}
.activeImg {
border: 1px solid rgb(214, 70, 70);
......
pages/equipmentLeasing/detail/styled.tsx
......@@ -4,4 +4,121 @@ export const Box = styled.div`
box-sizing: border-box;
width: 1200px;
background-color: #fff;
padding: 42px 0 24px 24px;
.item{
display: flex;
&-right{
height: 300px;
margin-left: 30px;
.title{
width: 283px;
height: 26px;
font-size: 28px;
margin-top: 5px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #090909;
line-height: 26px;
}
.function{
display: flex;
align-items: center;
justify-content: space-evenly;
width: 375px;
height: 45px;
margin-top: 17px;
background: linear-gradient(90deg, #D7F7F5 0%, #EEFDE9 100%);
&-item{
}
}
.menoy{
margin-top: 17px;
&-left{
width: 79px;
height: 41px;
font-size: 32px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #EF2E00;
line-height: 41px;
}
&-right{
width: 40px;
height: 20px;
font-size: 16px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #EF2E00;
line-height: 20px;
}
}
.classification{
margin-top: 28px;
width: 300px;
height: 50px;
background-color: pink;
}
.botton-btn{
margin-top: 30px;
.btn-left{
width: 207px;
height: 40px;
background-color: #FFE4D1;
border: 1px solid #EBBAAF;
font-family: MicrosoftYaHei;
color: #FF552D;
letter-spacing: 1px;
margin-right: 12px;
}
.btn-right{
width: 207px;
height: 40px;
background: #FF552D;
font-family: MicrosoftYaHei;
color: #FFFFFF;
letter-spacing: 1px;
}
}
}
}
.flow-path{
width: 100%;
height: 192px;
text-align: center;
margin-top: 72px;
.image{
margin: 0 auto;
}
}
.prompt{
width: 420px;
height: 25px;
font-size: 20px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #2B2B2B;
line-height: 25px;
margin: 30px auto 58px auto;
}
.divider {
display: flex;
justify-content: center;
margin: 46px 0 30px !important;
&::before {
width: 65px !important;
}
&::after {
width: 65px !important;
}
.ant-divider-inner-text {
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #989898;
}
}
`
\ No newline at end of file
pages/equipmentLeasing/index.page.tsx
......@@ -74,7 +74,9 @@ export default function EquipmentLeasing(props:Props) {
qualityData={props.qualityData}
onChange={onFilterChange}
></Filter>
<div style={{paddingTop:13}}>
<ContentBox boxIndex={4} leftContentStyle={{width:"916px",margin:{top:0,right:"12px",bottom:"12px",left:0}}} leftRenderDom={{columns:[{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom}]}} rightRenderDom={{columns:[{element:rightDom},{element:rightDom}]}}/>
</div>
</Box>
</Layout>
)
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论