Skip to content

W
web
提交 b2963dad 作者: 18928357778
操作

改-首页样式模块调整

上级 e4ed0084
正在显示 包含 305 行增加 和 168 行删除
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%;
}
......@@ -24,11 +23,9 @@
.tabs {
height: 100%;
margin-right: 58px;
:global .ant-tabs-nav {
height: 100%;
margin-bottom: 0;
&::before {
border: 0;
}
......@@ -40,16 +37,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 +57,7 @@
.btn1 {
width: 120px;
height: 40px;
height: 35px;
border-radius: 0px;
font-size: 16px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
......@@ -75,7 +68,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/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;
&: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
......@@ -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/home/waterfallFlowBody/components/map/index.tsx
......@@ -3,7 +3,7 @@ import { Box } from "./styled";
import api from "./api";
export default function MapComponent() {
const [mapItem, setMapItem] = useState(0);
let map: any;
const [Map, setMap] = useState<any>(null!);
const init = async () => {
try {
const AMapLoader = await import(
......@@ -15,13 +15,16 @@ export default function MapComponent() {
plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then(async (AMap) => {
map = new AMap.Map("container", {
const Map = new AMap.Map("container", {
// 设置地图容器id
viewMode: "3D", // 是否为3D地图模式
zoom: 9, // 初始化地图级别
center: [113.93029, 22.53291], // 初始化地图中心点位置
});
// await mapEntiy(0, AMap);
console.log(Map, "MapMapMapMapMapMapMapMapMapMapMap");
setMap(Map);
await mapEntiy(0, AMap);
})
.catch((e) => {
console.log(e);
......@@ -40,7 +43,7 @@ export default function MapComponent() {
const addEntiy = (AMap: any, lan: any, lon: any, dizhi: string) => {
if (!AMap) return;
const marker = new AMap.Marker({
map: map,
map: Map,
position: [lan, lon],
title: dizhi,
});
......@@ -122,6 +125,7 @@ export default function MapComponent() {
// lon: 22.573664,
// })
// .then((res) => {});
setMapItem(index);
const res = await api.listPositioningInfo({
lat: 113.944825,
lon: 22.573664,
......@@ -136,15 +140,13 @@ export default function MapComponent() {
const EntiyValue = addEntiy(AMap, item.jd, item.wd, item.dizhi);
markerList.push(EntiyValue);
});
map?.add(markerList);
Map?.add(markerList);
}
console.log(map, "地图实例++++++++++++++++++++++++++++++");
console.log(Map, "地图实例++++++++++++++++++++++++++++++");
if (index) {
map?.panTo([list![index].jd, list![index].wd]);
if (index && list?.length) {
Map?.panTo([list![index].jd, list![index].wd]);
}
setMapItem(index);
};
return (
......@@ -152,25 +154,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 #b2b2b2;
}
.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,14 @@ 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;
width: 806px;
margin-right: 24px;
.slick-list {
border-radius: 6px;
}
}
.botsBotton {
position: absolute;
......@@ -20,8 +23,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 +34,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/index.tsx
......@@ -91,22 +91,22 @@ export default function WaterfallFlowBody() {
router: "/equipmentLeasing",
},
{
title: "无人机服务",
router: "/jobServices",
},
{
title: "无人机销售",
router: "/mall",
},
{
title: "无人机保险",
router: "",
title: "无人机服务",
router: "/jobServices",
},
{
title: "无人机培训",
router: "flyingHandService",
},
{
title: "无人机保险",
router: "",
},
{
title: "无人机工具软件",
router: "",
},
......@@ -121,9 +121,6 @@ export default function WaterfallFlowBody() {
const { deviceCategory, deviceBrand, deviceModel } = equipmentLeasingApi;
const eqApiTypeList = ["categoryId", "brandId", "modelId"];
const { listAllIndustry, listAllAppType } = jobServicesApi;
const jobApiTypeList = ["industryId", "appTypeId"];
const { listAllCategory, listAllParts, listAllQuality } = mallApi;
const mallApiTypeList = [
"brandId",
......@@ -132,32 +129,34 @@ export default function WaterfallFlowBody() {
"modelId",
"qualityId",
];
const { listAllIndustry, listAllAppType } = jobServicesApi;
const jobApiTypeList = ["industryId", "appTypeId"];
const { IndustryFlightSkills } = flightSkillsApi;
const flightApiTypeList = ["licenseId", "flightSkillsId"];
useEffect(() => {
(async () => {
listNewsApi.listNewsPage({ pageNo: 1, pageSize: 10 }).then((res) => {
setRightTopDomList(rightDom(res.result?.list!));
});
listNewsApi.listNewTenderInfo({ pageNo: 1, pageSize: 10 }).then((res) => {
setRightBottomDomList(rightDom2(res.result?.list!));
});
// listNewsApi.listNewsPage({ pageNo: 1, pageSize: 5 }).then((res) => {
// setRightTopDomList(rightDom(res.result?.list!));
// });
// listNewsApi.listNewTenderInfo({ pageNo: 1, pageSize: 6 }).then((res) => {
// setRightBottomDomList(rightDom2(res.result?.list!));
// });
let res1 = await Promise.all([
deviceCategory(),
deviceBrand(),
deviceModel(),
]);
let res2 = await Promise.all([listAllIndustry(), listAllAppType()]);
let res3 = await Promise.all([
let res2 = await Promise.all([
listAllCategory(),
listAllParts(),
listAllQuality(),
]);
let res3 = await Promise.all([listAllIndustry(), listAllAppType()]);
let res4 = await Promise.all([IndustryFlightSkills()]);
// let res4 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()])
let res5 = await Promise.all([IndustryFlightSkills()]);
// let res6 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()])
const resValuelist1 = res1
......@@ -184,7 +183,7 @@ export default function WaterfallFlowBody() {
});
})
.flat();
const resValuelist5 = res5
const resValuelist4 = res4
.map((item, index) => {
return item.result?.map((it) => {
it.type = flightApiTypeList[index];
......@@ -193,17 +192,17 @@ export default function WaterfallFlowBody() {
})
.flat();
let res7 = await listNewsApi.listNewsPage({ pageNo: 1, pageSize: 10 });
let res7 = await listNewsApi.listNewsPage({ pageNo: 1, pageSize: 5 });
let res8 = await listNewsApi.listNewTenderInfo({
pageNo: 1,
pageSize: 10,
pageSize: 6,
});
const listValue: any = [
resValuelist1,
resValuelist2,
resValuelist3,
resValuelist4.flat(),
[],
resValuelist5.flat(),
[],
];
......@@ -219,11 +218,17 @@ export default function WaterfallFlowBody() {
})();
}, []);
const routerPath = (item: AllType, index: number) => {
router.push({
pathname: columns[index].router,
query: { [item?.type!]: item?.id! },
});
const routerPath = (index: number, item?: AllType) => {
if (item) {
router.push({
pathname: columns[index].router,
query: { [item?.type!]: item?.id! },
});
} else {
router.push({
pathname: columns[index].router,
});
}
};
const leftDom = (
......@@ -235,14 +240,15 @@ export default function WaterfallFlowBody() {
<div key={item.title} className="item">
<div className="item-title">
<div className="item-left">
<div className="item-left-icon">
{/* <div className="item-left-icon">
<Image src={icon[index]} alt="#" />
</div>
</div> */}
<div className="item-left-label">{item.title}</div>
</div>
<div>
<Select
placeholder="更多"
className="select-box"
placeholder="筛选"
onChange={onMoreChange}
bordered={false}
dropdownMatchSelectWidth={false}
......@@ -252,8 +258,8 @@ export default function WaterfallFlowBody() {
</div>
</div>
<div className="item-body">
<Space size={[10, 8]} wrap>
{index === 3
<Space size={[15, 0]} wrap>
{index === 4
? list.map((item) => (
<div key={item} className="item-bubble">
{item}
......@@ -270,13 +276,16 @@ export default function WaterfallFlowBody() {
<div
key={item?.name || item?.appName || item?.skillsName}
className="item-bubble"
onClick={() => routerPath(item, index)}
onClick={() => routerPath(index, item)}
>
{item?.name || item?.appName || item?.skillsName}
</div>
);
})}
</Space>
<div className="item-bottom" onClick={() => routerPath(index)}>
全部
</div>
</div>
</div>
);
......@@ -295,24 +304,18 @@ export default function WaterfallFlowBody() {
</div>
</div>
<div className="body">
{list?.map((item) => (
{list?.map((item, index) => (
<div key={item.id} className="body-item">
<div
className={`item-ranking ${index === 0 ? "one" : ""} ${
index === 1 ? "two" : ""
} ${index === 2 ? "san" : ""}`}
>
{index + 1}
</div>
<div className="item-label" title={item.newsTitle}>
{item.newsTitle}
</div>
<div className="item-image">
<Image
className="item-image"
src={
item.surfaceImg
? item.surfaceImg
: require("./assets/xw.jpg")
}
alt="#"
width={40}
height={40}
/>
</div>
</div>
))}
</div>
......@@ -335,16 +338,19 @@ export default function WaterfallFlowBody() {
<div className="body">
{list?.map((item) => (
<div key={item.id} className="body-item">
<div className="item-label">
<div className="label-top" title={item.tenderContent}>
{item.tenderContent}
</div>
<div className="item-label" title={item.tenderContent}>
{item.tenderContent}
<div className="label-bottom">{item.tenderPrice}</div>
</div>
<div className="item-right">
<Button className="btn" size="small" type="primary">
申请合作
</Button>
<Image
src={require("./assets/button.png")}
alt="#"
width={103}
height={22}
/>
<div className="left">{item.tenderPrice}W</div>
<div className="right">申请合作</div>
</div>
</div>
))}
......@@ -357,6 +363,10 @@ export default function WaterfallFlowBody() {
<Box>
<ContentBox
boxIndex={2}
leftcontentstyle={{
width: "806px",
margin: { top: 0, right: "10px", bottom: "10px", left: 0 },
}}
leftRenderDom={{
columns: [
{ noFor: true, element: <RotationChart key={45645645} /> },
......
pages/home/waterfallFlowBody/styled.tsx
import styled from "styled-components";
import button from "./assets/button.png";
export default function Style() {
return <></>;
}
......@@ -10,14 +10,14 @@ export const Box = styled.div`
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;
......@@ -31,47 +31,56 @@ 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 {
}
}
&-body {
padding-left: 10px;
height: 268px;
padding: 0 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;
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 {
box-shadow: 20px 20px 10px 0px rgba(228, 228, 228, 1);
.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;
}
}
}
.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;
font-size: 16px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #000000;
......@@ -83,7 +92,7 @@ export const Box = styled.div`
font-weight: 400;
}
}
.body {
/* .body {
height: 284px;
overflow-y: hidden;
&-item {
......@@ -113,17 +122,50 @@ 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;
.title {
display: flex;
align-items: center;
padding: 0 25px;
height: 62px;
font-size: 20px;
font-size: 16px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #000000;
......@@ -135,8 +177,7 @@ export const Box = styled.div`
font-weight: 400;
}
}
.body {
height: 448px;
/* .body {
overflow-y: hidden;
&-item {
display: flex;
......@@ -179,6 +220,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;
}
}
}
}
}
`;
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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论