提交 1c0dbaf0 作者: 翁进城
import React from "react";
import React, { useEffect } from "react";
import { Empty } from "antd";
import { Box , WaterfallBox } from "./styled";
import { LeftBox , Box , WaterfallBox } from "./styled";
import { leftBoxProps } from "../interface";
export default function Left(props: leftBoxProps) {
const { boxIndex, leftRenderDom, leftcontentstyle, leftWaterfallDom } = props;
const { boxIndex, leftRenderDom, leftcontentstyle, leftWaterfallDom } = props;
return (
<div>
<LeftBox>
{leftRenderDom?.columns.map((item) => {
if (item.noFor) {
return item.element;
......@@ -30,7 +30,7 @@ export default function Left(props: leftBoxProps) {
return null;
})}
{
<WaterfallBox index={boxIndex} leftcontentstyle={leftcontentstyle}>
leftWaterfallDom?.columns.length ? <WaterfallBox index={boxIndex} leftcontentstyle={leftcontentstyle}>
{ <div className="left-columns">
{leftWaterfallDom?.columns.map((item) => {
if (!item.noFor && item.type === "left") {
......@@ -47,12 +47,12 @@ export default function Left(props: leftBoxProps) {
return null
})}
</div>}
</WaterfallBox>
</WaterfallBox> : null
}
{leftRenderDom?.pagination ? leftRenderDom?.pagination : null}
{!leftRenderDom?.columns.length && !leftWaterfallDom?.columns.length? (
<Empty description={"暂无数据"} />
) : null}
</div>
</LeftBox>
);
}
......@@ -12,6 +12,9 @@ export interface BoxProps {
}
}
export const LeftBox = styled.div`
box-sizing: border-box;
`
export const Box = styled.div<BoxProps>`
box-sizing: border-box;
......@@ -39,7 +42,7 @@ export const WaterfallBox = styled.div<BoxProps>`
box-sizing: border-box;
display: flex;
width: ${props => props.leftcontentstyle?.width ? props.leftcontentstyle?.width : "790px"};
.item{
.item{
// 每个元素都要设置右边距margin-right(每个元素的左右间隙)
// 同时设置下边距margin-bottom(每个元素的上下间隙)
/* margin: 0 24px 15px 0; */
......@@ -49,15 +52,13 @@ export const WaterfallBox = styled.div<BoxProps>`
// 这里的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{
.item{
margin-right: 0;
}
}
`
\ No newline at end of file
`
components/footer/assets/mmc.png

3.8 KB | W: | H:

components/footer/assets/mmc.png

11.7 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/assets/shequn.png

14.8 KB | W: | H:

components/footer/assets/shequn.png

16.6 KB | W: | H:

components/footer/assets/shequn.png
components/footer/assets/shequn.png
components/footer/assets/shequn.png
components/footer/assets/shequn.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -8,7 +8,7 @@ const qrcodeList = [
url: "http://www.mmcuav.cn/",
},
{
img: require("./assets/fuwuhao.jpg"),
img: require("./assets/fuwuhao.png"),
title: "云享飞服务号",
},
{
......
......@@ -59,7 +59,7 @@ export default function EquipmentLeasing(props: Props) {
const rightDom = (item: Advertisement) => {
return (
<div key={item.id} className="right-box-item right-item">
<Image src={item.imageUrl} alt="error" width={270} height={422} />
<Image src={item.imageUrl} alt="error" width={180} height={295} />
</div>
);
};
......@@ -143,7 +143,7 @@ export default function EquipmentLeasing(props: Props) {
<ContentBox
boxIndex={5}
leftcontentstyle={{
width: "916px",
width: "1020px",
margin: { top: 0, right: "12px", bottom: "12px", left: 0 },
}}
leftRenderDom={{
......
......@@ -10,7 +10,6 @@ export const Box = styled.div`
width: 1200px;
.item {
width: 220px;
height: 205px;
background: #ffffff;
border-radius: 6px;
cursor: pointer;
......@@ -29,7 +28,7 @@ export const Box = styled.div`
}
}
&-bottom {
padding: 10px 13px 14px 18px;
padding: 0px 13px 0px 18px;
&-title {
height: 24px;
font-size: 14px;
......@@ -66,14 +65,13 @@ export const Box = styled.div`
}
}
.right-item {
width: 270px;
height: 422px;
width: 180px;
height: 295px;
background: #d8d8d8;
border-radius: 6px;
overflow: hidden;
}
.pagination-page {
text-align: right;
margin-top: 50px;
}
`;
import React from "react";
import React, { useEffect, useState } from "react";
import Layout from "~/components/layout";
import { Box } from "./styled";
import { Button } from "antd";
import { useRouter } from "next/router";
import { ParsedUrlQuery } from "querystring";
interface RouterDetail {
videoUrl:string | '',
curriculumName:string
}
export default function FlyingDetail() {
const router = useRouter();
const [detail,setDetail] =useState<ParsedUrlQuery | RouterDetail>()
useEffect(()=>{
setDetail(router.query)
},[router])
return (
<Layout>
<Box>
<div className="box-top">
<div className="left">科比特行业课程1111</div>
<div className="left">{detail?.curriculumName}</div>
<div className="right">
<Button
type="primary"
......@@ -24,7 +35,7 @@ export default function FlyingDetail() {
</div>
</div>
<div className="box-body">
<video className="body-video" src="" />
<video className="body-video" controls src={detail?.videoUrl as string} />
</div>
</Box>
</Layout>
......
......@@ -39,7 +39,15 @@ export default function FlyingHandService() {
<div
className="item"
key={item.id}
onClick={() => router.push(`/flyingHandService/detail/${item.id}`)}
onClick={() => {
router.push({
pathname: `/flyingHandService/detail/${item.id}`,
query: {
videoUrl: item.videoUrl ,
curriculumName: item.curriculumName
},
})
} }
>
<div className="item-top">
<Image
......
......@@ -267,26 +267,28 @@ export default function WaterfallFlowBody() {
};
const handleTenderApply = async (item:NewsTenderType)=>{
console.log(item);
let res = await listNewsApi.tenderApply({
tenderInfoId: item.id,
tenderNewsId: item.tenderNewsId,
userAccountId: 0,
})
try{
if (res.code==="200") {
message.success("申请成功")
let res8 = await listNewsApi.listNewTenderInfo({
pageNo: 1,
pageSize: 6,
});
setRightBottomDomList(rightDom2(res8.result?.list!));
}else{
message.error(res.message)
}
}catch(e){
console.log(e);
}
if (item.apply) return;
message.success("申请成功")
item.apply = 1
// let res = await listNewsApi.tenderApply({
// tenderInfoId: item.id,
// tenderNewsId: item.tenderNewsId,
// userAccountId: 0,
// })
// try{
// if (res.code==="200") {
// message.success("申请成功")
// let res8 = await listNewsApi.listNewTenderInfo({
// pageNo: 1,
// pageSize: 6,
// });
// setRightBottomDomList(rightDom2(res8.result?.list!));
// }else{
// message.error(res.message)
// }
// }catch(e){
// console.log(e);
// }
}
const leftDom = (
......@@ -296,7 +298,7 @@ export default function WaterfallFlowBody() {
option: []
) => {
return (
<div key={item.title} className="item">
<div key={item.title} className={`item ${index>=3?'right-box':''}`}>
<div className="item-title">
<div className="item-left">
<div className="item-left-label" onClick={() => routerPath(index)}>
......@@ -397,7 +399,7 @@ export default function WaterfallFlowBody() {
};
const rightDom2 = (list: Array<NewsTenderType>) => {
if(!list.length) return;
if(!list?.length) return;
return (
<div key={1008} className="right-box-item right-item-second">
<div className="item-box">
......@@ -416,9 +418,10 @@ export default function WaterfallFlowBody() {
{item.tenderContent}
<div className="label-bottom">{item.tenderPrice}</div>
</div>
<div className="item-right" onClick={()=>handleTenderApply(item)}>
<div className={`item-right ${item.apply ? 'apply' : ''}`} onClick={()=>handleTenderApply(item)}>
<div className="left">{`${item.tenderPrice}W`}</div>
{
item.apply ? <div>已申请</div> : <><div className="left">{`${item.tenderPrice}W`}</div>
item.apply ? <div className="right">已申请</div> : <>
<div className="right">申请合作</div></>
}
</div>
......
......@@ -13,7 +13,7 @@ export const Box = styled.div`
margin: 0 auto;
.item {
transition: all 0.5s;
border-radius: 6px;
border-radius: 6px;
&-title {
display: flex;
justify-content: space-between;
......@@ -117,7 +117,7 @@ export const Box = styled.div`
&-label {
cursor: pointer;
font-size: 16px;
font-weight: 100;
font-weight: bold;
&:hover {
color: #ff552d;
}
......@@ -204,13 +204,12 @@ export const Box = styled.div`
height: 48px;
font-size: 16px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #000000;
line-height: 25px;
&-label {
cursor: pointer;
font-size: 16px;
font-weight: 100;
font-weight: bold;
&:hover {
color: #ff552d;
}
......@@ -287,6 +286,10 @@ export const Box = styled.div`
background: url(${button.src}) no-repeat;
background-size: contain;
cursor: pointer;
&.apply{
opacity: 0.5;
cursor: not-allowed;
}
.left {
width: 35px;
height: 22px;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论