Skip to content

W
web
提交 e1c94534 作者: 18928357778
操作

合并代码

上级 835604bb b4a76471
正在显示 包含 823 行增加 和 495 行删除
components/NavHeader/index.module.scss
.navHeader {
width: 100%;
height: 68px;
height: 48px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(232,232,232,0.5);
}
.nav{
.nav {
width: 1200px;
display: flex;
align-items: center;
}
.logo {
width: 148px;
height: 68px;
width: 113px;
height: 35px;
background-image: url(./assets/logo.png);
background-size: 100% 100%;
margin-right: 40px;
}
.tabs {
width: 800px;
height: 100%;
margin-right: 58px;
:global .ant-tabs-nav {
height: 100%;
margin-bottom: 0;
&::before {
border: 0;
}
......@@ -40,16 +39,12 @@
}
.ant-tabs-tab-btn {
font-size: 16px;
color: #000;
font-size: 14px;
color: #424242;
width: 90px;
text-align: center;
font-family: MicrosoftYaHei;
}
}
:global .ant-tabs-tab-active {
.ant-tabs-tab-btn {
font-weight: bold;
}
}
......@@ -64,7 +59,7 @@
.btn1 {
width: 120px;
height: 40px;
height: 35px;
border-radius: 0px;
font-size: 16px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
......@@ -75,7 +70,7 @@
.btn2 {
box-sizing: border-box;
width: 120px;
height: 40px;
height: 35px;
border-radius: 0px;
border: 1px solid rgba(255, 85, 45, 1);
font-size: 16px;
......
components/NavHeader/index.tsx
......@@ -72,7 +72,7 @@ export default function NavHeader() {
<Button type="primary" className={styles.btn1}>
+ 发布需求
</Button>
<Button className={styles.btn2}>入驻加盟</Button>
<Button className={styles.btn2}>加盟入驻</Button>
</Space>
{user ? (
<div className={styles.haedImg}>
......
components/contentBox/index.tsx
import React from 'react';
import { Box } from './styled';
import Left from './left';
import Right from './right';
import {BoxProps} from './interface';
export default function ContentBox(props:BoxProps) {
console.log(props);
import React from "react";
import { Box } from "./styled";
import Left from "./left";
import Right from "./right";
import { BoxProps } from "./interface";
export default function ContentBox(props: BoxProps) {
return (
<Box>
<Left boxIndex={props.boxIndex} leftRenderDom={props.leftRenderDom} leftcontentstyle={props.leftcontentstyle}/>
<Right rightRenderDom={props.rightRenderDom}/>
<Left
boxIndex={props.boxIndex}
leftRenderDom={props.leftRenderDom}
leftcontentstyle={props.leftcontentstyle}
leftWaterfallDom={props.leftWaterfallDom}
/>
<Right rightRenderDom={props.rightRenderDom} />
</Box>
)
);
}
components/contentBox/interface.ts
export interface DomType {
columns:{noFor?:boolean,element:JSX.Element}[],
columns: {
noFor?: boolean;
element: JSX.Element;
}[];
pagination?: JSX.Element;
}
export interface WaterfallType {
columns: {
noFor?: boolean;
type?: string,
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;
leftWaterfallDom?: WaterfallType;
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
}
\ No newline at end of file
boxIndex: number;
leftRenderDom?: DomType;
leftWaterfallDom?: WaterfallType;
leftcontentstyle?: {
width?: string;
margin?: {
top: number | string;
right: number | string;
bottom: number | string;
left: number | string;
};
};
rightRenderDom: DomType;
}
components/contentBox/left/index.tsx
import React from "react";
import { Empty } from "antd";
import { Box } from "./styled";
import { Box , WaterfallBox } from "./styled";
import { leftBoxProps } from "../interface";
export default function Left(props: leftBoxProps) {
const { boxIndex, leftRenderDom, leftcontentstyle } = props;
const { boxIndex, leftRenderDom, leftcontentstyle, leftWaterfallDom } = props;
return (
<div>
{leftRenderDom.columns.map((item) => {
{leftRenderDom?.columns.map((item) => {
if (item.noFor) {
return item.element;
}
......@@ -16,7 +15,7 @@ export default function Left(props: leftBoxProps) {
})}
{
<Box index={boxIndex} leftcontentstyle={leftcontentstyle}>
{leftRenderDom.columns.map((item) => {
{leftRenderDom?.columns.map((item) => {
if (!item.noFor) {
return item.element;
}
......@@ -24,7 +23,29 @@ export default function Left(props: leftBoxProps) {
})}
</Box>
}
{!leftRenderDom.columns.length ? (
{
<WaterfallBox index={boxIndex} leftcontentstyle={leftcontentstyle}>
{ <div className="left-columns">
{leftWaterfallDom?.columns.map((item) => {
if (!item.noFor && item.type === "left") {
return item.element
}
return null
})}
</div>}
{ <div className="right-columns">
{leftWaterfallDom?.columns.map((item) => {
if (!item.noFor && item.type === "right") {
return item.element
}
return null
})}
</div>}
</WaterfallBox>
}
{leftRenderDom?.pagination ? leftRenderDom?.pagination : null}
{!leftRenderDom?.columns.length && !leftWaterfallDom?.columns.length? (
<Empty description={"暂无数据"} />
) : null}
</div>
......
components/contentBox/left/styled.tsx
......@@ -33,4 +33,31 @@ export const Box = styled.div<BoxProps>`
margin-right: 0;
}
}
`
export const WaterfallBox = styled.div<BoxProps>`
box-sizing: border-box;
display: flex;
width: ${props => props.leftcontentstyle?.width ? props.leftcontentstyle?.width : "790px"};
.item{
// 每个元素都要设置右边距margin-right（每个元素的左右间隙）
// 同时设置下边距margin-bottom（每个元素的上下间隙）
/* margin: 0 24px 15px 0; */
margin: ${props => props.leftcontentstyle?.margin ? (`${props.leftcontentstyle?.margin.top} ${props.leftcontentstyle?.margin.right} ${props.leftcontentstyle?.margin.bottom} ${props.leftcontentstyle?.margin.left}`) : "0 24px 15px 0"};;
width: calc(( 100% - ${props => props.index} * ${props => props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : "24px" }) / ${props => props.index});
// 这里一行显示index个，所以是/index，一行显示几个就除以几
// 这里的72px = (分布个数index-1)*间隙20px, 可以根据实际的分布个数和间隙区调整
min-width: calc(( 100% - ${props => props.index} * ${props => props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : "24px" }) / ${props => props.index});
max-width: calc(( 100% - ${props => props.index} * ${props => props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : "24px" }) / ${props => props.index});
// 每行最右侧的那个不设置右外边距
&:nth-child(${props => props.index}n + ${props => props.index}) {
margin-right: 0;
}
}
.left-columns{
}
.right-columns{
}
`
\ No newline at end of file
components/contentBox/right/styled.tsx
import styled from "styled-components"
import styled from "styled-components";
export const Box = styled.div`
box-sizing: border-box;
.right-box-item{
margin-bottom: 20px;
}
`
\ No newline at end of file
box-sizing: border-box;
.right-box-item {
margin-bottom: 10px;
}
`;
components/filter/index.tsx
......@@ -96,7 +96,7 @@ export default function Filter(props: Props) {
<div
className={styles.filterWrap}
style={{
marginBottom: 18,
marginBottom: 10,
}}
>
<RegionItem
......
components/footer/assets/logo.png
components/footer/assets/logo.png

4.4 KB | W: | H:

components/footer/assets/logo.png

15.5 KB | W: | H:

components/footer/assets/logo.png
components/footer/assets/logo.png
components/footer/assets/logo.png
components/footer/assets/logo.png
  • 2-up
  • Swipe
  • Onion skin
components/footer/assets/mmc.png
components/footer/assets/mmc.png

2.8 KB | W: | H:

components/footer/assets/mmc.png

3.8 KB | W: | H:

components/footer/assets/mmc.png
components/footer/assets/mmc.png
components/footer/assets/mmc.png
components/footer/assets/mmc.png
  • 2-up
  • Swipe
  • Onion skin
components/footer/index.module.scss
.footer {
height: 200px;
background: linear-gradient(360deg, #001c49 0%, #021741 100%);
box-shadow: 0px 2px 12px 0px rgba(146, 146, 146, 0.5);
height: 110px;
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
.footerBox {
width: 1200px;
display: flex;
justify-content: space-evenly;
}
.logo {
width: 125px;
height: 89px;
background: url('./assets/logo.png') no-repeat;
width: 150px;
height: 47px;
background: url("./assets/logo.png") no-repeat;
background-size: 100% 100%;
margin-right: 104px;
margin-right: 155px;
}
.qrcodeList {
flex: 1;
display: flex;
margin-right: 101px;
align-items: center;
justify-content: space-evenly;
height: 47px;
.qrcodeItem {
margin-right: 87px;
margin-right: 206px;
text-align: center;
&:nth-last-child(1) {
margin-right: 0;
}
.qrcodeImg {
width: 100px;
height: 100px;
width: 60px;
height: 60px;
border-radius: 8px;
overflow: hidden;
background-color: #fff;
}
.qrcodeTitle {
margin-top: 12px;
margin-top: 4px;
font-size: 12px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #ffffff;
font-weight: 100;
color: #959595;
text-align: center;
}
}
......
components/footer/index.tsx
import styles from './index.module.scss';
import Image from 'next/image';
import styles from "./index.module.scss";
import Image from "next/image";
const qrcodeList = [
{
img: require("./assets/mmc.png"),
title: '科比特官网',
url:"http://www.mmcuav.cn/"
title: "科比特官网",
url: "http://www.mmcuav.cn/",
},
{
img: require("./assets/fuwuhao.png"),
title: '云享飞服务号',
title: "云享飞服务号",
},
{
img: require("./assets/xiaochengxu.png"),
title: '云享飞小程序',
title: "云享飞小程序",
},
{
img: require("./assets/shequn.png"),
title: '官方社群',
title: "官方社群",
},
];
export default function Footer() {
return (
<div className={styles.footer}>
<div className={styles.logo}></div>
<div className={styles.qrcodeList}>
{
qrcodeList.map((item, i) => {
<div className={styles.footerBox}>
<div className={styles.logo}></div>
<div className={styles.qrcodeList}>
{qrcodeList.map((item, i) => {
return (
<div className={styles.qrcodeItem} key={i}>
<Image style={{cursor:item.title === "科比特官网" ? "pointer" : ''}} onClick={()=>{if(item.title === "科比特官网") window.location.href = item.url!}} alt="" className={styles.qrcodeImg} src={item.img}></Image>
<Image
style={{
cursor: item.title === "科比特官网" ? "pointer" : "",
}}
onClick={() => {
if (item.title === "科比特官网")
window.location.href = item.url!;
}}
alt=""
className={styles.qrcodeImg}
src={item.img}
></Image>
<div className={styles.qrcodeTitle}>{item.title}</div>
</div>
);
})
}
})}
</div>
</div>
<div className={styles.rightText}>
{/* <div className={styles.rightText}>
<div className={styles.number}>100W</div>
<div className={styles.text}>无人机新媒体矩阵等你来关注</div>
</div>
</div> */}
</div>
);
}
components/layout/index.tsx
......@@ -29,7 +29,7 @@ const footerStyle: React.CSSProperties = {
lineHeight: "1",
padding: 0,
position: "relative",
marginTop: 78,
marginTop: 60,
};
type Props = {
......@@ -40,7 +40,12 @@ type Props = {
export default function LayoutView(props: Props) {
return (
<Space direction="vertical" style={{ width: "100%" }} size={[0, 48]}>
<Layout style={Object.assign({ minHeight: "100vh" }, props.layoutStyle)}>
<Layout
style={Object.assign(
{ minHeight: "100vh", backgroundColor: "#F8F8F8" },
props.layoutStyle
)}
>
<Header style={headerStyle}>
<NavHeader />
</Header>
......
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,19 +146,25 @@ export default function EquipmentLeasing(props: Props) {
width: "916px",
margin: { top: 0, right: "12px", bottom: "12px", left: 0 },
}}
leftRenderDom={{ columns: productList }}
leftRenderDom={{
columns: productList,
pagination: (
<div className="pagination-page">
<Pagination
current={pageParams.pageNo}
pageSize={pageParams.pageSize}
showSizeChanger={false}
showQuickJumper
total={count}
onChange={onPageChange}
hideOnSinglePage={true}
style={{ marginTop: 20 }}
/>
</div>
),
}}
rightRenderDom={{ columns: rightProductList }}
/>
<Pagination
current={pageParams.pageNo}
pageSize={pageParams.pageSize}
showSizeChanger={false}
showQuickJumper
total={count}
onChange={onPageChange}
hideOnSinglePage={true}
style={{ marginTop: 20 }}
/>
</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{
width: 220px;
height: 205px;
background: #FFFFFF;
border-radius: 6px;
cursor: pointer;
transition: all .5s;
&-top{
height: 145px;
background: #FFFFFF;
border-radius: 6px 6px 0px 0px;
padding: 19px 52px 10px 52px;
&-image{
width: 116px;
height: 116px;
background: #EFEFEF;
}
box-sizing: border-box;
padding-top: 15px;
width: 1200px;
.item {
width: 220px;
height: 205px;
background: #ffffff;
border-radius: 6px;
cursor: pointer;
transition: all 0.5s;
&-top {
height: 145px;
background: #ffffff;
border-radius: 6px 6px 0px 0px;
padding: 19px 52px 10px 52px;
&-image {
width: 116px;
height: 116px;
background: #efefef;
}
}
&-bottom {
padding: 10px 13px 14px 18px;
&-title {
width: 189px;
height: 24px;
font-size: 14px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #333333;
line-height: 24px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&:hover {
color: #ff552d;
}
&-bottom{
padding: 10px 13px 14px 18px;
&-title{
width: 189px;
height: 24px;
font-size: 14px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #333333;
line-height: 24px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&-price{
.money{
width: 50px;
height: 26px;
font-size: 16px;
font-family: Arial-BoldMT, Arial;
font-weight: normal;
color: #FF552D;
line-height: 22px;
}
.unit{
width: 58px;
height: 22px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #FF552D;
line-height: 22px;
}
}
}
&-price {
.money {
width: 50px;
height: 26px;
font-size: 16px;
font-family: Arial-BoldMT, Arial;
font-weight: normal;
color: #ff552d;
line-height: 22px;
}
&:hover{
box-shadow: 20px 20px 10px 0px rgba(228,228,228,1);
.unit {
width: 58px;
height: 22px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #ff552d;
line-height: 22px;
}
}
}
.right-item{
width: 270px;
height: 422px;
background: #D8D8D8;
}
`
\ No newline at end of file
}
.right-item {
width: 270px;
height: 422px;
background: #d8d8d8;
border-radius: 6px;
overflow: hidden;
}
.pagination-page {
text-align: right;
}
`;
pages/flyingHandService/index.page.tsx
......@@ -229,21 +229,27 @@ 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,
pagination: (
<div className="pagination-page">
<Pagination
current={pageParams.pageNo}
pageSize={pageParams.pageSize}
showSizeChanger={false}
showQuickJumper
total={count}
onChange={onPageChange}
hideOnSinglePage={true}
style={{ marginTop: 20 }}
/>
</div>
),
}}
leftRenderDom={{ columns: productList }}
rightRenderDom={{ columns: rightDomList }}
/>
<Pagination
current={pageParams.pageNo}
pageSize={pageParams.pageSize}
showSizeChanger={false}
showQuickJumper
total={count}
onChange={onPageChange}
hideOnSinglePage={true}
style={{ marginTop: 20 }}
/>
</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/components/map/api/index.tsx
import request, { Response } from '~/api/request';
import request, { Response } from "~/api/request";
export interface PositioningInfoParams {
lat:number,
lon:number
lat: number;
lon: number;
}
export interface Entiy {
dizhi: string,
jd: number,
wd: number,
range: number
dizhi: string;
jd: number;
wd: number;
range: number;
}
export interface ListPageJobInfoResp {
id: number,
adCode: string,
province: string,
locationList: Array<Entiy>
id: number;
adCode: string;
province: string;
locationList: Array<Entiy>;
}
export default {
//web-作业服务-分页
listPositioningInfo: (params: PositioningInfoParams): Promise<Response<ListPageJobInfoResp>> => {
return request('/release/website/getWebsiteList', 'get', params )
listPositioningInfo: (
params: PositioningInfoParams
): Promise<Response<ListPageJobInfoResp[]>> => {
return request("/release/website/getWebsiteList", "get", params);
},
}
\ No newline at end of file
};
pages/home/waterfallFlowBody/components/map/index.tsx
import React, { Component, useEffect, useState } from "react";
import { Box } from "./styled";
import api from "./api";
let Map: any;
export default function MapComponent() {
const [mapItem, setMapItem] = useState(0);
let map: any;
const init = async () => {
try {
const AMapLoader = await import(
......@@ -15,14 +14,16 @@ export default function MapComponent() {
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then((AMap) => {
map = new AMap.Map("container", {
.then(async (AMap) => {
Map = new AMap.Map("container", {
// 设置地图容器id
viewMode: "3D", // 是否为3D地图模式
zoom: 11, // 初始化地图级别
zoom: 9, // 初始化地图级别
center: [113.93029, 22.53291], // 初始化地图中心点位置
});
mapEntiy(0, AMap);
console.log(Map, "MapMapMapMapMapMapMapMapMapMapMap");
await mapEntiy(0, AMap);
})
.catch((e) => {
console.log(e);
......@@ -35,55 +36,116 @@ export default function MapComponent() {
(async () => {
await init();
})();
console.log("渲染6666666666666666666666");
}, []);
const addEntiy = (AMap: any, lan: any, lon: any) => {
// let lngLat = new AMap.LngLat(lan.trim(), lon.trim())
// // 转高德坐标系
// AMap.convertFrom(lngLat, 'gps', function (info, result) {
// lngLat = result.locations[0]// 转换后的坐标位置
// var marker = new AMap.Marker({
// position: lngLat,
// map
// })
// AMap.event.addListener(marker, 'click', (e) => {
// map.AMapUI.loadUI(['overlay/SimpleInfoWindow'], function (SimpleInfoWindow) {
// var infoWindow = new SimpleInfoWindow({
// infoTitle: '<strong>这是标题</strong>',
// infoBody: '<p>这是信息</p>',
// offset: new AMap.Pixel(0, -20),
// autoMove: true
// })
// infoWindow.open(map, e.target.getPosition())
// // 最坑的就是这一步了，他的infowindow没有点击事件，所以infoWindow.get$Container()会返回这个infowindow（jquery）对象
// let infoEle = infoWindow.get$Container()
// //给infowindow添加点击事件，并在回调函数中处理业务或者跳转等
// infoEle.on('click', (e) => {
// // router.push({name: 'proinfo', params: pro})
// })
// })
// })
// })
};
const addEntiy = (AMap: any, lan: any, lon: any, dizhi: string) => {
if (!AMap) return;
const marker = new AMap.Marker({
map: Map,
position: [lan, lon],
title: dizhi,
});
// //鼠标点击marker弹出自定义的信息窗体
// AMap.Event.addListener(marker, "click", function () {
// infoWindow.open(map, marker.getPosition());
// });
const mapEntiy = (index: number, AMap?: any) => {
api
.listPositioningInfo({
lat: 113.944825,
lon: 22.573664,
})
.then((res) => {
// const list = res.result
// ?.map((item) => item.locationList)
// .flat()
// .filter((item: { dizhi: string }) => item.dizhi.includes("广东省"));
// console.log("ajksbhdkjasgdbjahks", list);
// //实例化信息窗体
// var title =
// '方恒假日酒店<span style="font-size:11px;color:#F00;">价格:318</span>',
// content = [];
// content.push(
// "<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里"
// );
// content.push("电话：010-64733333");
// content.push(
// "<a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>"
// );
// var infoWindow = new AMap.InfoWindow({
// isCustom: true, //使用自定义窗体
// content: createInfoWindow(title, content.join("<br/>")),
// offset: new AMap.Pixel(16, -15),
// anchor: "bottom-center",
// });
// //构建自定义信息窗体
// function createInfoWindow(title, content) {
// var info = document.createElement("div");
// info.className = "custom-info input-card content-window-card";
// //可以通过下面的方式修改自定义窗体的宽高
// //info.style.width = "400px";
// // 定义顶部标题
// var top = document.createElement("div");
// var titleD = document.createElement("div");
// var closeX = document.createElement("img");
// top.className = "info-top";
// titleD.innerHTML = title;
// closeX.src = "https://webapi.amap.com/images/close2.gif";
// closeX.onclick = closeInfoWindow;
// top.appendChild(titleD);
// top.appendChild(closeX);
// info.appendChild(top);
// list.map((item) => {
// addEntiy(AMap, item.jd, item.wd);
// });
setMapItem(index);
// // 定义中部内容
// var middle = document.createElement("div");
// middle.className = "info-middle";
// middle.style.backgroundColor = "white";
// middle.innerHTML = content;
// info.appendChild(middle);
// // 定义底部内容
// var bottom = document.createElement("div");
// bottom.className = "info-bottom";
// bottom.style.position = "relative";
// bottom.style.top = "0px";
// bottom.style.margin = "0 auto";
// var sharp = document.createElement("img");
// sharp.src = "https://webapi.amap.com/images/sharp.png";
// bottom.appendChild(sharp);
// info.appendChild(bottom);
// return info;
// }
// //关闭信息窗体
// function closeInfoWindow() {
// map.clearInfoWindow();
// }
return marker;
};
const mapEntiy = async (index: number, AMap?: any) => {
// api
// .listPositioningInfo({
// lat: 113.944825,
// lon: 22.573664,
// })
// .then((res) => {});
setMapItem(index);
const res = await api.listPositioningInfo({
lat: 113.944825,
lon: 22.573664,
});
const list = res.result
?.map((item) => item.locationList)
.flat()
.filter((item: { dizhi: string }) => item.dizhi.includes("广东省"));
const markerList: any = [];
if (list?.length) {
list?.map((item) => {
const EntiyValue = addEntiy(AMap, item.jd, item.wd, item.dizhi);
markerList.push(EntiyValue);
});
Map?.add(markerList);
}
console.log(Map, "地图实例++++++++++++++++++++++++++++++");
if (index && list?.length) {
Map?.panTo([list![index].jd, list![index].wd]);
}
};
return (
......@@ -91,25 +153,25 @@ export default function MapComponent() {
<div id="container" className="map"></div>
<div className="map-dosome">
<div
className={mapItem === 0 ? "active" : ""}
className={`itemBox ${mapItem === 0 ? "active" : ""}`}
onClick={() => mapEntiy(0)}
>
服务网点
</div>
<div
className={mapItem === 1 ? "active" : ""}
className={`itemBox ${mapItem === 1 ? "active" : ""}`}
onClick={() => mapEntiy(1)}
>
租赁网点
</div>
<div
className={mapItem === 2 ? "active" : ""}
className={`itemBox ${mapItem === 2 ? "active" : ""}`}
onClick={() => mapEntiy(2)}
>
培训网点
</div>
<div
className={mapItem === 3 ? "active" : ""}
className={`${mapItem === 3 ? "active" : ""}`}
onClick={() => mapEntiy(3)}
>
更多网点
......
pages/home/waterfallFlowBody/components/map/styled.tsx
......@@ -7,13 +7,13 @@ export default function Style() {
export const Box = styled.div`
box-sizing: border-box;
width: 384px;
height: 337px;
height: 266px;
#container {
position: relative;
padding: 0px;
margin: 0px;
width: 384px;
height: 285px;
height: 220px;
}
.amap-logo {
......@@ -32,12 +32,18 @@ export const Box = styled.div`
align-items: center;
justify-content: space-around;
width: 384px;
height: 52px;
height: 46px;
background: #ffffff;
border-radius: 0px 0px 6px 6px;
cursor: pointer;
.active{
color:#FF552D;
.itemBox {
height: 22px;
line-height: 22px;
padding-right: 22px;
border-right: 1px solid #e0e0e0;
}
.active {
color: #ff552d;
}
}
`;
pages/home/waterfallFlowBody/components/rotationChart/index.tsx
import React from 'react';
import { Carousel } from 'antd';
import { Box } from "./styled"
import Image from 'next/image';
import React from "react";
import { Carousel } from "antd";
import { Box } from "./styled";
import Image from "next/image";
export default function RotationChart() {
const list = ["https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/pc%E7%AB%AF%E8%BD%AE%E6%92%AD%E5%9B%BE1.png","https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/ebf4fd5d-f8da-45b7-b0b3-282a31e43929.png","https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/6b62ee5b-d929-4dee-b441-258c81c14403.png","https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/0dd9e0f6-c1cd-485a-bdf4-8aeb84b1c67a.png","https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/bcdabab5-f2f8-4c6d-85c6-4d304d8bfe4c.png"]
const list = [
"https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/pc%E7%AB%AF%E8%BD%AE%E6%92%AD%E5%9B%BE1.png",
"https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/ebf4fd5d-f8da-45b7-b0b3-282a31e43929.png",
"https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/6b62ee5b-d929-4dee-b441-258c81c14403.png",
"https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/0dd9e0f6-c1cd-485a-bdf4-8aeb84b1c67a.png",
"https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/bcdabab5-f2f8-4c6d-85c6-4d304d8bfe4c.png",
];
return (
<Box>
<Carousel className='rotationChart' autoplay dots={{className:"botsBotton"}}>
{
list.map(item=>(<div key={item}>
<Carousel
className="rotationChart"
autoplay
dots={{ className: "botsBotton" }}
>
{list.map((item) => (
<div key={item}>
<h3 className="contentStyle">
<Image src={item} alt="error" width={790} height={200}/>
<Image src={item} alt="error" width={806} height={200} />
</h3>
</div>))
}
</Carousel>
</div>
))}
</Carousel>
</Box>
)
);
}
pages/home/waterfallFlowBody/components/rotationChart/styled.tsx
......@@ -6,11 +6,13 @@ export default function Style() {
export const Box = styled.div`
box-sizing: border-box;
margin: 0 0 30px 0;
margin: 0 0 10px 0;
display: flex;
.rotationChart {
width: 790px;
margin-right: 24px;
width: 806px;
.slick-list {
border-radius: 6px;
}
}
.botsBotton {
position: absolute;
......@@ -20,8 +22,8 @@ export const Box = styled.div`
justify-content: center;
align-items: center;
&:not(.slick-active) > button {
width: 10px;
height: 10px;
width: 8px;
height: 8px;
border-radius: 50%;
}
& > button {
......@@ -31,10 +33,10 @@ export const Box = styled.div`
}
}
.contentStyle {
width: 790px;
height: 200px;
width: 806px;
height: 100px;
color: #fff;
line-height: 200px;
line-height: 100px;
text-align: center;
background: #364d79;
}
......
pages/home/waterfallFlowBody/styled.tsx
import styled from "styled-components";
import button from "./assets/button.png";
export default function Style() {
return <></>;
}
export const Box = styled.div`
box-sizing: border-box;
padding-top: 24px;
padding-top: 16px;
width: 1200px;
margin: 0 auto;
.item {
height: 343px;
transition: all 0.5s;
border-radius: 6px;
&-title {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 25px;
height: 75px;
padding: 0 20px;
height: 46px;
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;
......@@ -31,55 +32,94 @@ export const Box = styled.div`
}
&-label {
height: 32px;
font-size: 20px;
font-size: 16px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #000000;
line-height: 32px;
}
}
.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-left: 10px;
height: 268px;
padding: 5px 20px 10px 20px;
background: #ffffff;
box-shadow: 10px 10px 20px 0px rgba(228, 228, 228, 0.3);
border-radius: 0px 0px 6px 6px;
.item-bubble {
/* width: 80px; */
padding: 0 5px;
font-weight: 520;
height: 32px;
line-height: 32px;
background: #f4f6f9;
border-radius: 19px;
font-size: 14px;
text-align: center;
color: #4a4a4a;
cursor: pointer;
font-family: MicrosoftYaHei;
&.active {
color: #ff552d;
}
&:hover {
color: #ff552d;
}
}
.item-bottom {
width: 371px;
height: 30px;
line-height: 30px;
background: #f5f5f5;
border-radius: 2px;
text-align: center;
font-size: 13px;
font-family: MicrosoftYaHei;
color: #4a4a4a;
cursor: pointer;
margin: 5px auto 0 auto;
}
}
&:hover {
box-shadow: 20px 20px 10px 0px rgba(228, 228, 228, 1);
}
}
.right-item {
height: 344px;
background-color: #fff;
background: url("./assets/xwbg.png") no-repeat #fff;
border-radius: 6px;
.title {
display: flex;
align-items: center;
padding: 0 25px;
height: 60px;
font-size: 20px;
padding: 0 20px 0 20px;
height: 46px;
font-size: 16px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #000000;
line-height: 25px;
&-label {
margin-left: 10px;
cursor: pointer;
font-size: 16px;
font-weight: 400;
&:hover {
color: #ff552d;
}
}
}
.body {
/* .body {
height: 284px;
overflow-y: auto;
overflow-y: hidden;
&-item {
display: flex;
justify-content: space-between;
......@@ -93,7 +133,12 @@ export const Box = styled.div`
font-family: MicrosoftYaHei;
color: #323232;
line-height: 21px;
word-wrap: break-word;
overflow: hidden; //溢出内容隐藏
text-overflow: ellipsis; //文本溢出部分用省略号表示
display: -webkit-box; //特别显示模式
-webkit-line-clamp: 2; //行数
line-clamp: 2;
-webkit-box-orient: vertical; //盒子中内容竖直排列
}
.item-image {
width: 96px;
......@@ -102,25 +147,71 @@ export const Box = styled.div`
border-radius: 6px;
}
}
} */
.body {
border-radius: 0 0 6px 6px;
.body-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 23px 0 19px;
height: 32px;
.item-ranking {
color: #9295a3;
&.one {
color: #ff2c46;
}
&.two {
color: #ff6602;
}
&.san {
color: #faa910;
}
}
.item-label {
width: 325px;
height: 20px;
line-height: 19px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #323232;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
}
.right-item-second {
height: 510px;
border-radius: 6px;
background-color: #fff;
position: relative;
.item-box {
position: absolute;
top: 0;
}
.title {
display: flex;
align-items: center;
padding: 0 25px;
height: 62px;
font-size: 20px;
padding: 0 20px 0 20px;
height: 48px;
font-size: 16px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #000000;
line-height: 25px;
&-label {
margin-left: 10px;
cursor: pointer;
font-size: 16px;
font-weight: 400;
&:hover {
color: #ff552d;
}
}
}
.body {
height: 448px;
overflow-y: auto;
/* .body {
overflow-y: hidden;
&-item {
display: flex;
justify-content: space-between;
......@@ -137,12 +228,12 @@ export const Box = styled.div`
word-wrap: break-word;
.label-top {
text-overflow: -o-ellipsis-lastline;
overflow: hidden; //溢出内容隐藏
text-overflow: ellipsis; //文本溢出部分用省略号表示
display: -webkit-box; //特别显示模式
-webkit-line-clamp: 2; //行数
line-clamp: 2;
-webkit-box-orient: vertical; //盒子中内容竖直排列
overflow: hidden; //溢出内容隐藏
text-overflow: ellipsis; //文本溢出部分用省略号表示
display: -webkit-box; //特别显示模式
-webkit-line-clamp: 2; //行数
line-clamp: 2;
-webkit-box-orient: vertical; //盒子中内容竖直排列
}
.label-bottom {
font-size: 15px;
......@@ -162,6 +253,57 @@ export const Box = styled.div`
}
}
}
} */
.body {
.body-item {
display: flex;
justify-content: space-between;
width: 384px;
height: 32px;
padding: 0 20px 0 20px;
.item-label {
width: 239px;
height: 20px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #323232;
line-height: 19px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.item-right {
width: 103px;
height: 22px;
background: url(${button as unknown as string}) no-repeat;
position: relative;
.left {
width: 35px;
height: 22px;
line-height: 22px;
font-size: 11px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #ff4500;
position: absolute;
text-align: center;
left: 4px;
top: 0;
}
.right {
width: 48px;
height: 22px;
line-height: 22px;
font-size: 11px;
font-family: MicrosoftYaHei;
color: #ffffff;
position: absolute;
text-align: center;
right: 3px;
top: 0;
}
}
}
}
}
`;
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,26 +152,32 @@ export default function JobServices() {
showResultItem
onChange={onFilterChange}
></Filter>
<div style={{ marginTop: 18 }}>
<div style={{ marginTop: 10 }}>
<ContentBox
boxIndex={2}
leftRenderDom={{ columns: productList }}
leftRenderDom={{
columns: productList,
pagination: (
<div className="pagination-page">
<Pagination
current={pageParams.pageNo}
pageSize={pageParams.pageSize}
showSizeChanger={false}
showQuickJumper
total={count}
onChange={onPageChange}
hideOnSinglePage={true}
style={{ marginTop: 20 }}
/>
</div>
),
}}
rightRenderDom={{ columns: rightDomList }}
leftcontentstyle={{
width: "924px",
margin: { top: 0, right: "16px", bottom: "16px", left: 0 },
margin: { top: 0, right: "10px", bottom: "10px", left: 0 },
}}
/>
<Pagination
current={pageParams.pageNo}
pageSize={pageParams.pageSize}
showSizeChanger={false}
showQuickJumper
total={count}
onChange={onPageChange}
hideOnSinglePage={true}
style={{ marginTop: 20 }}
/>
</div>
</Box>
</Layout>
......
pages/jobServices/styled.tsx
import styled from "styled-components"
import styled from "styled-components";
export default function Style() {
return <></>;
}
export const Box = styled.div`
box-sizing: border-box;
padding-top: 15px;
width: 1200px;
.item {
width: 454px;
height: 180px;
background: #FFFFFF;
box-shadow: 10px 10px 20px 0px rgba(228,228,228,0.3);
border-radius: 6px;
padding: 24px;
cursor: pointer;
transition: all .5s;
&-top{
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
.value{
display: flex;
justify-content: space-between;
&-left{
.label{
width: 275px;
height: 48px;
font-size: 20px;
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{
width: 89px;
height: 22px;
font-size: 28px;
font-family: Arial-BoldMT, Arial;
font-weight: normal;
color: #FF552D;
line-height: 22px;
}
.unit{
width: 24px;
height: 22px;
font-size: 16px;
font-family: MicrosoftYaHei;
color: #FF552D;
line-height: 22px;
}
}
}
box-sizing: border-box;
padding-top: 10px;
width: 1200px;
.item {
width: 454px;
height: 90px;
background: #ffffff;
box-shadow: 10px 10px 20px 0px rgba(228, 228, 228, 0.3);
border-radius: 6px;
padding: 16px;
cursor: pointer;
transition: all 0.5s;
&-top {
padding-bottom: 10px;
border-bottom: 0.1px solid #dcdcdc;
.value {
display: flex;
justify-content: space-between;
&-left {
.label {
width: 295px;
height: 24px;
font-size: 16px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #333333;
line-height: 24px;
}
}
&-bottom{
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
&-right {
.money {
width: 89px;
height: 22px;
font-size: 20px;
font-family: Arial-BoldMT, Arial;
color: #ff552d;
line-height: 22px;
font-weight: bold;
}
.unit {
width: 24px;
height: 22px;
font-size: 16px;
font-family: MicrosoftYaHei;
color: #828B93;
color: #ff552d;
line-height: 22px;
-webkit-background-clip: text;
padding-top: 16px;
.bottom-left{
}
.bottom-right{
}
}
&:hover{
box-shadow: 20px 20px 10px 0px rgba(228,228,228,1);
}
}
}
}
.advertisement{
width: 260px;
height: 420px;
background: #FFFFFF;
border-radius: 6px;
&-bottom {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #828b93;
line-height: 22px;
-webkit-background-clip: text;
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;
}
}
`
\ No newline at end of file
}
.advertisement {
width: 260px;
height: 420px;
background: #ffffff;
border-radius: 6px;
}
.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;
......@@ -25,9 +20,12 @@
}
}
.listContent{
.listContent {
width: 100%;
.paginationPage {
text-align: right;
padding-right: 12px;
}
}
.listWrap {
......
pages/mall/index.page.tsx
......@@ -89,59 +89,55 @@ export default function Mall(props: Props) {
></Filter>
<div className={styles.productList}>
<div className={styles.title}>四旋翼无人机</div>
<div className={styles.main}>
<div style={{ flex: "auto"}}>
<Spin spinning={loading} delay={500}>
<div className={styles.listContent}>
<ul className={styles.listWrap}>
{productList.map((item, i) => {
return (
<li
key={i}
className={styles.item}
onClick={() => router.push("/mall/detail/" + item.id)}
>
<div className={styles.imgBox}>
<Image
alt=""
src={item.imgUrl}
className={styles.img}
width={116}
height={116}
preview={false}
></Image>
</div>
<div className={styles.title}>{item.goodsName}</div>
<div className={styles.sellCount}>
半年售
{(Math.floor(Math.random() * 901) + 100).toFixed(0)}
</div>
</li>
);
})}
{productList.length === 0 && (
<Empty
style={{
paddingTop: 20,
width: "100%",
textAlign: "center",
}}
></Empty>
)}
</ul>
<Pagination
current={pageParams.pageNo}
defaultPageSize={pageParams.pageSize}
showSizeChanger={false}
showQuickJumper
total={count}
onChange={onPageChange}
hideOnSinglePage={true}
style={{ marginTop: 20 }}
/>
</div>
</Spin>
<div className={styles.listContent}>
<ul className={styles.listWrap}>
{productList.map((item, i) => {
return (
<li
key={i}
className={styles.item}
onClick={() => router.push("/mall/detail/" + item.id)}
>
<div className={styles.imgBox}>
<Image
alt=""
src={item.imgUrl}
className={styles.img}
width={116}
height={116}
preview={false}
></Image>
</div>
<div className={styles.title}>{item.goodsName}</div>
<div className={styles.sellCount}>
半年售
{(Math.floor(Math.random() * 901) + 100).toFixed(0)}
</div>
</li>
);
})}
{productList.length === 0 && (
<Empty
style={{
paddingTop: 20,
width: "100%",
textAlign: "center",
}}
></Empty>
)}
</ul>
<div className={styles.paginationPage}>
<Pagination
current={pageParams.pageNo}
showSizeChanger={false}
showQuickJumper
total={count}
onChange={onPageChange}
hideOnSinglePage={true}
style={{ marginTop: 20 }}
/>
</div>
</div>
<div className={styles.adList}>
......
styles/index.scss
@import './reset.scss';
@import "./reset.scss";
body {
background-color: rgba(239, 241, 244, 1);
......@@ -20,10 +20,9 @@ body::-webkit-scrollbar {
background: #ffffff;
border-radius: 6px;
*{
* {
font-size: 14px !important;
}
.filter-item {
padding: 11px 0;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论