Skip to content

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

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

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