Skip to content

W
web
提交 da7b8352 作者: 翁进城
操作

项目资讯开发

上级 88757264
正在显示 包含 378 行增加 和 132 行删除
pages/projectInfo/components/bids/index.module.scss 0 → 100644
@import "~/styles/mixins.scss";
//项目需求
.bids {
padding-top: 20px;
.item {
padding: 24px 14px 24px 16px;
display: flex;
border-bottom: 1px dashed RGBA(222, 222, 222, 1);
.info {
.title {
font-size: 16px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #3c3e42;
width: 649px;
@include ellipsis(1);
}
.desc {
font-size: 16px;
font-family: MicrosoftYaHei;
color: #ff552d;
margin-top: 9px;
}
}
.btn {
width: 120px;
height: 40px;
background: #ff552d;
border-radius: 6px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #ffffff;
}
.btnDisabled {
width: 120px;
height: 40px;
background: #c7cacf;
border-radius: 6px;
border: none;
color: #fff;
}
}
}
pages/projectInfo/components/bids/index.tsx 0 → 100644
import { Button } from 'antd';
import styles from './index.module.scss';
const list = [
{
isApply: false
},
{
isApply: true
}
]
export default function requirements(){
return (
<div className={styles.bids}>
{list.map((item, i) => {
return (
<div className={styles.item} key={i}>
<div className={styles.logo}></div>
<div className={styles.info}>
<div className={styles.title}>项目需求：电力巡检需要5名飞手</div>
<div className={styles.desc}>155万元</div>
</div>
{item.isApply ? (
<Button type="primary" disabled className={styles.btnDisabled}>
已申请
</Button>
) : (
<Button type="primary" className={styles.btn}>
申请合作
</Button>
)}
</div>
);
})}
</div>
);
}
\ No newline at end of file
pages/projectInfo/components/cases/index.module.scss 0 → 100644
@import "~/styles/mixins.scss";
//项目需求
.casas {
padding-top: 20px;
.item {
padding: 39px 14px 39px 16px;
display: flex;
border-bottom: 1px dashed RGBA(222, 222, 222, 1);
.info {
.title {
font-size: 16px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #3c3e42;
width: 649px;
@include ellipsis(1);
}
.desc {
font-size: 16px;
font-family: MicrosoftYaHei;
color: #ff552d;
margin-top: 9px;
}
}
.btn {
width: 120px;
height: 40px;
border-radius: 6px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #ff552d;
border: 1px solid #ff552d;
}
.btnDisabled {
width: 120px;
height: 40px;
border-radius: 6px;
color: #c7cacf;
border: 1px solid #c7cacf;
}
}
}
pages/projectInfo/components/cases/index.tsx 0 → 100644
import { Button } from "antd";
import styles from "./index.module.scss";
const list = [
{
isApply: false,
},
{
isApply: true,
},
];
export default function requirements() {
return (
<div className={styles.casas}>
{list.map((item, i) => {
return (
<div className={styles.item} key={i}>
<div className={styles.logo}></div>
<div className={styles.info}>
<div className={styles.title}>项目需求：电力巡检需要5名飞手</div>
</div>
{item.isApply ? (
<Button disabled className={styles.btnDisabled}>
已申请
</Button>
) : (
<Button className={styles.btn}>
申请合作
</Button>
)}
</div>
);
})}
</div>
);
}
pages/projectInfo/components/news/index.module.scss 0 → 100644
@import "~/styles/mixins.scss";
//项目需求
.requirements {
padding-top: 20px;
.item {
cursor: pointer;
padding: 10px 12px;
display: flex;
border-bottom: 1px dashed RGBA(222, 222, 222, 1);
align-items: center;
.logo {
width: 120px;
height: 80px;
background: #d8d8d8;
border-radius: 6px;
margin-right: 22px;
@include ellipsis(1);
}
.info {
padding: 3px 0 2px;
.title {
font-size: 16px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #000000;
}
}
}
}
pages/projectInfo/components/news/index.tsx 0 → 100644
import styles from './index.module.scss';
export default function requirements(){
return (
<div className={styles.requirements}>
<div className={styles.item}>
<div className={styles.logo}></div>
<div className={styles.info}>
<div className={styles.title}>项目需求：电力巡检需要5名飞手</div>
</div>
</div>
</div>
);
}
\ No newline at end of file
pages/projectInfo/components/requirements/index.module.scss 0 → 100644
//项目需求
.requirements {
padding-top: 20px;
.item {
cursor: pointer;
padding: 20px 19px;
display: flex;
border-bottom: 1px dashed RGBA(222, 222, 222, 1);
.logo {
width: 60px;
height: 60px;
margin-right: 24px;
background: url('./assets/resolved.png') no-repeat;
background-size: 100% 100%;
}
.info {
padding: 3px 0 2px;
.title {
white-space: nowrap; /* 防止换行 */
overflow: hidden; /* 隐藏溢出部分 */
text-overflow: ellipsis; /* 使用省略号代替溢出部分 */
font-size: 18px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
margin-bottom: 11px;
color: RGBA(127, 127, 127, 1);
}
.desc {
white-space: nowrap; /* 防止换行 */
overflow: hidden; /* 隐藏溢出部分 */
text-overflow: ellipsis; /* 使用省略号代替溢出部分 */
font-size: 16px;
font-family: MicrosoftYaHei;
color: RGBA(169, 170, 171, 1);
line-height: 22px;
}
}
&.noResolve {
.logo {
background-image: url('./assets//noResolve.png');
}
.info {
.title{
color: #000;
}
.desc {
color: #3C3E42;
}
}
}
}
}
\ No newline at end of file
pages/projectInfo/components/requirements/index.tsx 0 → 100644
import styles from './index.module.scss';
export default function requirements(){
return (
<div className={styles.requirements}>
<div className={styles.item}>
<div className={styles.logo}></div>
<div className={styles.info}>
<div className={styles.title}>项目需求：电力巡检需要5名飞手</div>
<div className={styles.desc}>
具体需求：电力巡检需要5名飞手，山东临沂
</div>
</div>
</div>
<div className={`${styles.item} ${styles.noResolve}`}>
<div className={styles.logo}></div>
<div className={styles.info}>
<div className={styles.title}>项目需求：电力巡检需要5名飞手</div>
<div className={styles.desc}>
具体需求：电力巡检需要5名飞手，山东临沂
</div>
</div>
</div>
</div>
);
}
\ No newline at end of file
pages/projectInfo/index.module.scss
......@@ -4,7 +4,7 @@
position: absolute;
top: 0;
left: 0;
background: url('./assets/banner.png') no-repeat;
background: url("./assets/banner.png") no-repeat;
background-size: 100% 100%;
}
......@@ -35,69 +35,8 @@
.ant-tabs-ink-bar {
width: 40px !important;
height: 4px;
background: #0060ff;
border-radius: 2px;
transform: translateX(30px);
}
}
}
//项目需求
.requirements {
padding-top: 20px;
.item {
padding: 20px 19px;
display: flex;
border-bottom: 1px dashed RGBA(222, 222, 222, 1);
.logo {
width: 60px;
height: 60px;
margin-right: 24px;
background: url('./assets/resolved.png') no-repeat;
background-size: 100% 100%;
}
.info {
padding: 3px 0 2px;
.title {
white-space: nowrap; /* 防止换行 */
overflow: hidden; /* 隐藏溢出部分 */
text-overflow: ellipsis; /* 使用省略号代替溢出部分 */
font-size: 18px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
margin-bottom: 11px;
color: RGBA(127, 127, 127, 1);
}
.desc {
white-space: nowrap; /* 防止换行 */
overflow: hidden; /* 隐藏溢出部分 */
text-overflow: ellipsis; /* 使用省略号代替溢出部分 */
font-size: 16px;
font-family: MicrosoftYaHei;
color: RGBA(169, 170, 171, 1);
line-height: 22px;
}
}
&.noResolve {
.logo {
background-image: url('./assets//noResolve.png');
}
.info {
.title{
color: #000;
}
.desc {
color: #3C3E42;
}
}
}
}
}
pages/projectInfo/index.tsx
import React, { useEffect, useState } from 'react';
import { Tabs, Button, Cascader, Space, DatePicker, DatePickerProps } from 'antd';
import styles from './index.module.scss';
import Layout from '~/components/layout';
import React, { useEffect, useState } from "react";
import {
Tabs,
Button,
Cascader,
Space,
DatePicker,
DatePickerProps,
} from "antd";
import styles from "./index.module.scss";
import Layout from "~/components/layout";
import requirements from "./components/requirements"; //项目需求
import bids from "./components/bids"; //招投标项目
import cases from "./components/cases"; //业务案例
import news from "./components/news"; //行业新闻
interface Option {
value: string | number;
......@@ -11,32 +22,32 @@ interface Option {
const options: Option[] = [
{
value: 'zhejiang',
label: 'Zhejiang',
value: "zhejiang",
label: "Zhejiang",
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
value: "hangzhou",
label: "Hangzhou",
children: [
{
value: 'xihu',
label: 'West Lake',
value: "xihu",
label: "West Lake",
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
value: "jiangsu",
label: "Jiangsu",
children: [
{
value: 'nanjing',
label: 'Nanjing',
value: "nanjing",
label: "Nanjing",
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
value: "zhonghuamen",
label: "Zhong Hua Men",
},
],
},
......@@ -48,76 +59,65 @@ const onChange = (value: string[]) => {
console.log(value);
};
const onDateChange: DatePickerProps['onChange'] = (date, dateString) => {
const onDateChange: DatePickerProps["onChange"] = (date, dateString) => {
console.log(date, dateString);
};
const operations = (
<Space size={8}>
<Cascader options={options} onChange={onChange} placeholder='Please select' />
<Cascader
options={options}
onChange={onChange}
placeholder="Please select"
borderRadiusSM={6}
/>
<DatePicker onChange={onDateChange} />
</Space>
);
//项目需求
const requirements = function () {
return (
<Layout>
<div className={styles.requirements}>
<div className={styles.item}>
<div className={styles.logo}></div>
<div className={styles.info}>
<div className={styles.title}>项目需求：电力巡检需要5名飞手</div>
<div className={styles.desc}>
具体需求：电力巡检需要5名飞手，山东临沂
</div>
</div>
</div>
<div className={`${styles.item} ${styles.noResolve}`}>
<div className={styles.logo}></div>
<div className={styles.info}>
<div className={styles.title}>项目需求：电力巡检需要5名飞手</div>
<div className={styles.desc}>
具体需求：电力巡检需要5名飞手，山东临沂
</div>
</div>
</div>
</div>
</Layout>
);
};
const items = ["项目需求", "招投标项目", "业务案例", "行业新闻"].map(
(value) => {
let children: JSX.Element | string = <></>;
switch (value) {
case "项目需求":
children = requirements();
break;
const items = ['项目需求', '招投标项目', '业务案例', '行业新闻'].map((value) => {
let children: JSX.Element | string = <></>;
case "招投标项目":
children = bids();
break;
switch(value){
case '项目需求':
children = requirements();
break;
case "业务案例":
children = cases();
break;
default:
children = `Content of tab ${value}`;
case "行业新闻":
children = news();
break;
}
return {
label: `${value}`,
key: value,
children: children,
};
}
return {
label: `${value}`,
key: value,
children: children,
};
});
);
export default function Mall() {
return (
<div style={{ paddingTop: 180, backgroundColor: '#fff', minHeight: 820 }}>
<div className='page'>
<div className={styles.banner}></div>
<Tabs
className={styles.tabs}
tabBarExtraContent={operations}
items={items}
tabBarGutter={41}
/>
<Layout>
<div style={{ paddingTop: 180, backgroundColor: "#fff", minHeight: 820 }}>
<div className="page">
<div className={styles.banner}></div>
<Tabs
className={styles.tabs}
tabBarExtraContent={operations}
items={items}
tabBarGutter={41}
/>
</div>
</div>
</div>
</Layout>
);
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论