Skip to content

W
web
提交 994f35f6 作者: 18928357778
操作

改-首页，作业服务，设备租赁，飞手培训，产品商城样式修改

上级 151747b2
正在显示 包含 186 行增加 和 133 行删除
components/contentBox/interface.ts
export interface DomType { export interface DomType {
columns:{noFor?:boolean,element:JSX.Element}[], columns: {
noFor?: boolean;
element: JSX.Element;
}[];
pagination?: JSX.Element;
} }
export interface leftBoxProps { export interface leftBoxProps {
boxIndex: number, boxIndex: number;
leftRenderDom: DomType, leftRenderDom: DomType;
leftcontentstyle?:{ leftcontentstyle?: {
width?:string, width?: string;
margin?:{ margin?: {
top:number | string, top: number | string;
right:number | string, right: number | string;
bottom:number | string, bottom: number | string;
left:number | string left: number | string;
} };
} };
} }
export interface rightBoxProps { export interface rightBoxProps {
rightRenderDom: DomType rightRenderDom: DomType;
} }
export interface BoxProps { export interface BoxProps {
boxIndex: number, boxIndex: number;
leftRenderDom: DomType, leftRenderDom: DomType;
leftcontentstyle?:{ leftcontentstyle?: {
width?:string, width?: string;
margin?:{ margin?: {
top:number | string, top: number | string;
right:number | string, right: number | string;
bottom:number | string, bottom: number | string;
left:number | string left: number | string;
} };
}, };
rightRenderDom: DomType
rightRenderDom: DomType;
} }
components/contentBox/left/index.tsx
...@@ -24,6 +24,7 @@ export default function Left(props: leftBoxProps) { ...@@ -24,6 +24,7 @@ export default function Left(props: leftBoxProps) {
})} })}
</Box> </Box>
} }
{leftRenderDom.pagination ? leftRenderDom.pagination : null}
{!leftRenderDom.columns.length ? ( {!leftRenderDom.columns.length ? (
<Empty description={"暂无数据"} /> <Empty description={"暂无数据"} />
) : null} ) : null}
......
components/filter/index.tsx
...@@ -96,7 +96,7 @@ export default function Filter(props: Props) { ...@@ -96,7 +96,7 @@ export default function Filter(props: Props) {
<div <div
className={styles.filterWrap} className={styles.filterWrap}
style={{ style={{
marginBottom: 18, marginBottom: 10,
}} }}
> >
<RegionItem <RegionItem
......
pages/equipmentLeasing/index.page.tsx
...@@ -35,13 +35,12 @@ export default function EquipmentLeasing(props: Props) { ...@@ -35,13 +35,12 @@ export default function EquipmentLeasing(props: Props) {
> >
<div className="item-top"> <div className="item-top">
<div className="item-top-image"> <div className="item-top-image">
{" "}
<Image <Image
src={item.wareImgs[0].imgUrl} src={item.wareImgs[0].imgUrl}
alt="error" alt="error"
width={116} width={116}
height={116} height={116}
/>{" "} />
</div> </div>
</div> </div>
<div className="item-bottom"> <div className="item-bottom">
...@@ -147,9 +146,10 @@ export default function EquipmentLeasing(props: Props) { ...@@ -147,9 +146,10 @@ export default function EquipmentLeasing(props: Props) {
width: "916px", width: "916px",
margin: { top: 0, right: "12px", bottom: "12px", left: 0 }, margin: { top: 0, right: "12px", bottom: "12px", left: 0 },
}} }}
leftRenderDom={{ columns: productList }} leftRenderDom={{
rightRenderDom={{ columns: rightProductList }} columns: productList,
/> pagination: (
<div className="pagination-page">
<Pagination <Pagination
current={pageParams.pageNo} current={pageParams.pageNo}
pageSize={pageParams.pageSize} pageSize={pageParams.pageSize}
...@@ -161,6 +161,11 @@ export default function EquipmentLeasing(props: Props) { ...@@ -161,6 +161,11 @@ export default function EquipmentLeasing(props: Props) {
style={{ marginTop: 20 }} style={{ marginTop: 20 }}
/> />
</div> </div>
),
}}
rightRenderDom={{ columns: rightProductList }}
/>
</div>
</Box> </Box>
</Layout> </Layout>
); );
......
pages/equipmentLeasing/styled.tsx
import styled from "styled-components" import styled from "styled-components";
export default function Style(){ return <></>} export default function Style() {
return <></>;
}
export const Box = styled.div` export const Box = styled.div`
box-sizing: border-box; box-sizing: border-box;
padding-top: 15px; padding-top: 15px;
width: 1200px; width: 1200px;
.item{ .item {
width: 220px; width: 220px;
height: 205px; height: 205px;
background: #FFFFFF; background: #ffffff;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
transition: all .5s; transition: all 0.5s;
&-top{ &-top {
height: 145px; height: 145px;
background: #FFFFFF; background: #ffffff;
border-radius: 6px 6px 0px 0px; border-radius: 6px 6px 0px 0px;
padding: 19px 52px 10px 52px; padding: 19px 52px 10px 52px;
&-image{ &-image {
width: 116px; width: 116px;
height: 116px; height: 116px;
background: #EFEFEF; background: #efefef;
} }
} }
&-bottom{ &-bottom {
padding: 10px 13px 14px 18px; padding: 10px 13px 14px 18px;
&-title{ &-title {
width: 189px; width: 189px;
height: 24px; height: 24px;
font-size: 14px; font-size: 14px;
...@@ -37,34 +39,39 @@ export const Box = styled.div` ...@@ -37,34 +39,39 @@ export const Box = styled.div`
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
&:hover {
color: #ff552d;
} }
&-price{ }
.money{ &-price {
.money {
width: 50px; width: 50px;
height: 26px; height: 26px;
font-size: 16px; font-size: 16px;
font-family: Arial-BoldMT, Arial; font-family: Arial-BoldMT, Arial;
font-weight: normal; font-weight: normal;
color: #FF552D; color: #ff552d;
line-height: 22px; line-height: 22px;
} }
.unit{ .unit {
width: 58px; width: 58px;
height: 22px; height: 22px;
font-size: 14px; font-size: 14px;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #FF552D; color: #ff552d;
line-height: 22px; line-height: 22px;
} }
} }
} }
&:hover{
box-shadow: 20px 20px 10px 0px rgba(228,228,228,1);
}
} }
.right-item{ .right-item {
width: 270px; width: 270px;
height: 422px; height: 422px;
background: #D8D8D8; background: #d8d8d8;
border-radius: 6px;
overflow: hidden;
}
.pagination-page {
text-align: right;
} }
` `;
\ No newline at end of file
pages/flyingHandService/index.page.tsx
...@@ -229,11 +229,12 @@ export default function FlyingHandService() { ...@@ -229,11 +229,12 @@ export default function FlyingHandService() {
boxIndex={4} boxIndex={4}
leftcontentstyle={{ leftcontentstyle={{
width: "925px", width: "925px",
margin: { top: 0, right: "15px", bottom: "15px", left: 0 }, margin: { top: 0, right: "10px", bottom: "10px", left: 0 },
}} }}
leftRenderDom={{ columns: productList }} leftRenderDom={{
rightRenderDom={{ columns: rightDomList }} columns: productList,
/> pagination: (
<div className="pagination-page">
<Pagination <Pagination
current={pageParams.pageNo} current={pageParams.pageNo}
pageSize={pageParams.pageSize} pageSize={pageParams.pageSize}
...@@ -244,6 +245,11 @@ export default function FlyingHandService() { ...@@ -244,6 +245,11 @@ export default function FlyingHandService() {
hideOnSinglePage={true} hideOnSinglePage={true}
style={{ marginTop: 20 }} style={{ marginTop: 20 }}
/> />
</div>
),
}}
rightRenderDom={{ columns: rightDomList }}
/>
</Box> </Box>
</Layout> </Layout>
); );
......
pages/flyingHandService/styled.tsx
...@@ -18,11 +18,15 @@ export const Box = styled.div` ...@@ -18,11 +18,15 @@ export const Box = styled.div`
width: 120px; width: 120px;
background-color: #fff; background-color: #fff;
border-radius: 5px; border-radius: 5px;
color: red;
.ant-select-selection-placeholder {
color: #000;
}
} }
} }
.btn { .btn {
width: 220px; width: 220px;
height: 60px; height: 44px;
background: linear-gradient(90deg, #278eff 0%, #0052da 100%); background: linear-gradient(90deg, #278eff 0%, #0052da 100%);
border-radius: 6px; border-radius: 6px;
border: 0; border: 0;
...@@ -37,7 +41,6 @@ export const Box = styled.div` ...@@ -37,7 +41,6 @@ export const Box = styled.div`
} }
.item { .item {
width: 220px; width: 220px;
height: 320px;
cursor: pointer; cursor: pointer;
transition: all 0.5s; transition: all 0.5s;
background-color: #fff; background-color: #fff;
...@@ -47,15 +50,15 @@ export const Box = styled.div` ...@@ -47,15 +50,15 @@ export const Box = styled.div`
height: 160px; height: 160px;
background-color: #e6e6e6; background-color: #e6e6e6;
border-radius: 6px 6px 0px 0px; border-radius: 6px 6px 0px 0px;
overflow: hidden;
} }
&-bottom { &-bottom {
height: 160px; padding: 9px 12px 12px;
padding: 9px 12px 20px;
border-radius: 0px 0px 6px 6px; border-radius: 0px 0px 6px 6px;
background-color: #fff; background-color: #fff;
.bottom-title { .bottom-title {
width: 196px; width: 196px;
height: 44px; height: 25px;
font-size: 15px; font-size: 15px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI; font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold; font-weight: bold;
...@@ -81,7 +84,7 @@ export const Box = styled.div` ...@@ -81,7 +84,7 @@ export const Box = styled.div`
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: 14px; margin-top: 10px;
&-left { &-left {
width: 100px; width: 100px;
height: 26px; height: 26px;
...@@ -121,14 +124,15 @@ export const Box = styled.div` ...@@ -121,14 +124,15 @@ export const Box = styled.div`
} }
} }
} }
&:hover {
box-shadow: 20px 20px 10px 0px rgba(228, 228, 228, 1);
}
} }
.right-item { .right-item {
width: 260px; width: 260px;
height: 420px; height: 420px;
background: #ffffff; background: #ffffff;
border-radius: 6px; border-radius: 6px;
overflow: hidden;
}
.pagination-page {
text-align: right;
} }
`; `;
pages/home/waterfallFlowBody/styled.tsx
...@@ -21,6 +21,7 @@ export const Box = styled.div` ...@@ -21,6 +21,7 @@ export const Box = styled.div`
background: #ffffff; background: #ffffff;
box-shadow: 10px 10px 20px 0px rgba(228, 228, 228, 0.3); box-shadow: 10px 10px 20px 0px rgba(228, 228, 228, 0.3);
border-radius: 6px 6px 0px 0px; border-radius: 6px 6px 0px 0px;
border-bottom: 1px solid #f1f1f1;
.item-left { .item-left {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
...@@ -39,10 +40,27 @@ export const Box = styled.div` ...@@ -39,10 +40,27 @@ export const Box = styled.div`
} }
} }
.select-box { .select-box {
background: #e0eeff;
border-radius: 2px;
border: 1px solid #aad0ff;
font-size: 12px;
width: 49px;
.ant-select-selection-placeholder {
color: #297ce0;
-webkit-padding-end: 0;
padding-inline-end: 0;
}
.ant-select-selector {
font-size: 13px;
padding: 0 0 0 5px;
}
.ant-select-arrow {
right: 2px;
}
} }
} }
&-body { &-body {
padding: 0 20px 10px 20px; padding: 5px 20px 10px 20px;
background: #ffffff; background: #ffffff;
border-radius: 0px 0px 6px 6px; border-radius: 0px 0px 6px 6px;
.item-bubble { .item-bubble {
......
pages/jobServices/index.page.tsx
...@@ -20,7 +20,7 @@ export default function JobServices() { ...@@ -20,7 +20,7 @@ export default function JobServices() {
const router = useRouter(); const router = useRouter();
const [list, setList] = useState([ const [list, setList] = useState([
"https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/90a52d3e-1ffa-4347-886e-a1c4535cf8b3.jpg", "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/90a52d3e-1ffa-4347-886e-a1c4535cf8b3.jpg",
"https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/665512fd-12e6-49a9-93c1-f9dcd0e82083.jpg", // "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/665512fd-12e6-49a9-93c1-f9dcd0e82083.jpg",
]); ]);
const [productList, setProductList] = useState( const [productList, setProductList] = useState(
Array<{ element: JSX.Element }> Array<{ element: JSX.Element }>
...@@ -39,10 +39,10 @@ export default function JobServices() { ...@@ -39,10 +39,10 @@ export default function JobServices() {
<div className="value"> <div className="value">
<div className="value-left"> <div className="value-left">
<div className="label">{item.serviceName}</div> <div className="label">{item.serviceName}</div>
<div className="com">{item.teamName}</div> {/* <div className="com">{item.teamName}</div> */}
</div> </div>
<div className="value-right"> <div className="value-right">
<span className="money">{item.price}</span>{" "} <span className="money">¥{item.price}</span>{" "}
<span className="unit">/平</span> <span className="unit">/平</span>
</div> </div>
</div> </div>
...@@ -51,7 +51,8 @@ export default function JobServices() { ...@@ -51,7 +51,8 @@ export default function JobServices() {
<div className="bottom-left"> <div className="bottom-left">
{Math.round(Math.random() * (150 - 100) + 100)}条评价 {Math.round(Math.random() * (150 - 100) + 100)}条评价
</div> </div>
<div className="bottom-right">专业飞手团队，精通巡航业务</div> {/* <div className="bottom-right">专业飞手团队，精通巡航业务</div> */}
<div className="com">{item.teamName}</div>
</div> </div>
</div> </div>
); );
...@@ -69,7 +70,7 @@ export default function JobServices() { ...@@ -69,7 +70,7 @@ export default function JobServices() {
const [pageParams, setPageParams] = useState({ const [pageParams, setPageParams] = useState({
pageNo: 1, pageNo: 1,
pageSize: 16, pageSize: 14,
}); //分页器对象 }); //分页器对象
const [count, setCount] = useState(0); //商品总数 const [count, setCount] = useState(0); //商品总数
...@@ -151,16 +152,13 @@ export default function JobServices() { ...@@ -151,16 +152,13 @@ export default function JobServices() {
showResultItem showResultItem
onChange={onFilterChange} onChange={onFilterChange}
></Filter> ></Filter>
<div style={{ marginTop: 18 }}> <div style={{ marginTop: 10 }}>
<ContentBox <ContentBox
boxIndex={2} boxIndex={2}
leftRenderDom={{ columns: productList }} leftRenderDom={{
rightRenderDom={{ columns: rightDomList }} columns: productList,
leftcontentstyle={{ pagination: (
width: "924px", <div className="pagination-page">
margin: { top: 0, right: "16px", bottom: "16px", left: 0 },
}}
/>
<Pagination <Pagination
current={pageParams.pageNo} current={pageParams.pageNo}
pageSize={pageParams.pageSize} pageSize={pageParams.pageSize}
...@@ -172,6 +170,15 @@ export default function JobServices() { ...@@ -172,6 +170,15 @@ export default function JobServices() {
style={{ marginTop: 20 }} style={{ marginTop: 20 }}
/> />
</div> </div>
),
}}
rightRenderDom={{ columns: rightDomList }}
leftcontentstyle={{
width: "924px",
margin: { top: 0, right: "10px", bottom: "10px", left: 0 },
}}
/>
</div>
</Box> </Box>
</Layout> </Layout>
); );
......
pages/jobServices/styled.tsx
import styled from "styled-components" import styled from "styled-components";
export default function Style() { export default function Style() {
return <></>; return <></>;
...@@ -6,88 +6,90 @@ export default function Style() { ...@@ -6,88 +6,90 @@ export default function Style() {
export const Box = styled.div` export const Box = styled.div`
box-sizing: border-box; box-sizing: border-box;
padding-top: 15px; padding-top: 10px;
width: 1200px; width: 1200px;
.item { .item {
width: 454px; width: 454px;
height: 180px; height: 90px;
background: #FFFFFF; background: #ffffff;
box-shadow: 10px 10px 20px 0px rgba(228,228,228,0.3); box-shadow: 10px 10px 20px 0px rgba(228, 228, 228, 0.3);
border-radius: 6px; border-radius: 6px;
padding: 24px; padding: 16px;
cursor: pointer; cursor: pointer;
transition: all .5s; transition: all 0.5s;
&-top{ &-top {
padding-bottom: 10px; padding-bottom: 10px;
border-bottom: 1px solid #ccc; border-bottom: 0.1px solid #dcdcdc;
.value{ .value {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
&-left{ &-left {
.label{ .label {
width: 275px; width: 295px;
height: 48px; height: 24px;
font-size: 20px; font-size: 16px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI; font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold; font-weight: bold;
color: #333333; color: #333333;
line-height: 24px; line-height: 24px;
letter-spacing: 1px;
word-wrap: break-word;
}
.com{
width: 216px;
height: 22px;
font-size: 16px;
font-family: MicrosoftYaHei;
color: #828A92;
line-height: 22px;
} }
} }
&-right{ &-right {
.money{ .money {
width: 89px; width: 89px;
height: 22px; height: 22px;
font-size: 28px; font-size: 20px;
font-family: Arial-BoldMT, Arial; font-family: Arial-BoldMT, Arial;
font-weight: normal; color: #ff552d;
color: #FF552D;
line-height: 22px; line-height: 22px;
font-weight: bold;
} }
.unit{ .unit {
width: 24px; width: 24px;
height: 22px; height: 22px;
font-size: 16px; font-size: 16px;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #FF552D; color: #ff552d;
line-height: 22px; line-height: 22px;
} }
} }
} }
} }
&-bottom{ &-bottom {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-size: 14px; font-size: 14px;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #828B93; color: #828b93;
line-height: 22px; line-height: 22px;
-webkit-background-clip: text; -webkit-background-clip: text;
padding-top: 16px; padding-top: 5px;
.bottom-left{ .bottom-left {
} width: 116px;
.bottom-right{ height: 22px;
font-size: 13px;
font-family: MicrosoftYaHei;
color: #c88430;
line-height: 22px;
} }
.bottom-right {
width: 216px;
height: 22px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #828a92;
line-height: 22px;
} }
&:hover{
box-shadow: 20px 20px 10px 0px rgba(228,228,228,1);
} }
} }
.advertisement{ .advertisement {
width: 260px; width: 260px;
height: 420px; height: 420px;
background: #FFFFFF; background: #ffffff;
border-radius: 6px; border-radius: 6px;
} }
` .pagination-page {
\ No newline at end of file text-align: right;
}
`;
pages/mall/index.module.scss
@import "~/styles/mixins.scss"; @import "~/styles/mixins.scss";
.productList { .productList {
.title {
padding: 20px 10px 18px;
text-align: left;
}
.main { .main {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-top: 20px;
.adList { .adList {
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
...@@ -24,8 +19,12 @@ ...@@ -24,8 +19,12 @@
} }
} }
.listContent{ .listContent {
width: 100%; width: 100%;
.paginationPage {
text-align: right;
padding-right: 12px;
}
} }
.listWrap { .listWrap {
......
pages/mall/index.page.tsx
...@@ -84,7 +84,6 @@ export default function Mall(props: Props) { ...@@ -84,7 +84,6 @@ export default function Mall(props: Props) {
onChange={onFilterChange} onChange={onFilterChange}
></Filter> ></Filter>
<div className={styles.productList}> <div className={styles.productList}>
<div className={styles.title}>四旋翼无人机</div>
<div className={styles.main}> <div className={styles.main}>
<div className={styles.listContent}> <div className={styles.listContent}>
<ul className={styles.listWrap}> <ul className={styles.listWrap}>
...@@ -123,6 +122,7 @@ export default function Mall(props: Props) { ...@@ -123,6 +122,7 @@ export default function Mall(props: Props) {
></Empty> ></Empty>
)} )}
</ul> </ul>
<div className={styles.paginationPage}>
<Pagination <Pagination
current={pageParams.pageNo} current={pageParams.pageNo}
showSizeChanger={false} showSizeChanger={false}
...@@ -133,6 +133,7 @@ export default function Mall(props: Props) { ...@@ -133,6 +133,7 @@ export default function Mall(props: Props) {
style={{ marginTop: 20 }} style={{ marginTop: 20 }}
/> />
</div> </div>
</div>
<div className={styles.adList}> <div className={styles.adList}>
{adList.map((item) => { {adList.map((item) => {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论