Skip to content

W
web
提交 0a5ead3b 作者: ZhangLingKun
操作

测试：测试推送部署

上级 a86e16e0
流水线 #7234 已通过 于阶段
in 4 分 39 秒
正在显示 包含 234 行增加 和 64 行删除
src/components/layout/index.tsx
......@@ -12,7 +12,11 @@ const LayoutView = ({ children }: { children?: React.ReactNode }) => {
return (
<div className={'animate__animated animate__faster animate__fadeIn'}>
<LayoutWrap>
<div onClick={() => setQrcodeShow(!qrcodeShow)}>
<div
onClick={() => {
setQrcodeShow(!qrcodeShow);
}}
>
<HeaderView></HeaderView>
<ContentView>{children}</ContentView>
<FooterView></FooterView>
......
src/pages/home/comp/home-service/index.tsx 0 → 100644
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { HomeAPI } from '@/api';
import { InterListType } from '@/api/interface';
import { IndustryListPagesType } from '@/api/interface/home';
// 列表类型
type ListType = InterListType<IndustryListPagesType>;
const HomeServiceView = () => {
// 刷新子组件
const [refresh, setRefresh] = useState<boolean>(true);
// 服务列表
const [industryList, setIndustryList] = useState<ListType>([]);
// 当前服务列表索引
const [currentIndex, setCurrentIndex] = useState<number>(0);
// 获取分类列表
const getIndustryListPages = async () => {
const res = await HomeAPI.IndustryListPages({
pageNo: 1,
pageSize: 999,
});
if (res && res.code === '200') {
setIndustryList(res.result?.list || []);
// console.log('获取分类列表 --->', res.result?.list || []);
}
};
// 列表筛选事件
const handleSelect = (index: number) => {
setRefresh(false);
setCurrentIndex(index);
setTimeout(() => {
setRefresh(true);
}, 0);
};
// componentDidMount
useEffect(() => {
getIndustryListPages().then();
}, []);
return (
<HomeServiceWrap>
<div className="service-tab flex-start">
{industryList?.map((i, j) => (
<div
className={`tab-item ${j === currentIndex && 'item-active'}`}
key={j}
onClick={() => handleSelect(j)}
>
{i?.typeName}
</div>
))}
</div>
<div className="service-list flex-start scroll-view">
{refresh &&
industryList?.[currentIndex]?.inspectionDTOS?.map((i, j) => (
<div
className="service-item animate__animated animate__fast animate__fadeIn"
key={j}
>
<img
className="item-image"
src={`${i?.inspectionImg}?x-oss-process=image/quality,q_25`}
alt={i.inspectionName}
/>
<div className="item-shadow">{i.inspectionName}</div>
</div>
))}
</div>
</HomeServiceWrap>
);
};
const HomeServiceWrap = styled.div`
position: relative;
width: 100%;
min-height: 16.75rem;
box-sizing: border-box;
//padding-bottom: 2rem;
.service-tab {
position: relative;
width: 100%;
height: 3.38rem;
flex-wrap: wrap;
.tab-item {
font-size: 13px;
font-weight: 500;
color: #333333;
margin-right: 0.83rem;
cursor: pointer;
&:active,
&:hover {
color: #ff0000;
}
}
.item-active {
color: #ff0000;
box-sizing: border-box;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
border: 0.04rem solid #ff552d;
text-align: center;
}
}
.service-list {
position: relative;
width: 100%;
height: 22rem;
flex-direction: column;
align-items: flex-start;
align-content: flex-start;
overflow: hidden;
overflow-x: scroll;
.service-item {
position: relative;
width: calc((100% - 0.83rem * 2) / 4);
height: 10rem;
//background: lightblue;
.item-shadow {
position: absolute;
width: 100%;
height: 2.88rem;
bottom: 0;
left: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.68) 100%
);
text-align: center;
font-weight: 500;
color: #ffffff;
font-size: 13px;
line-height: 2.88rem;
}
.item-image {
width: 100%;
height: 100%;
object-fit: cover;
}
&:first-child {
height: calc(100% - 0.83rem);
margin-right: 0.83rem;
}
&:nth-child(2n) {
margin-bottom: 0.83rem;
margin-right: 0.83rem;
}
&:hover,
&:active {
filter: brightness(0.9);
}
}
}
`;
export default HomeServiceView;
src/pages/home/comp/home-tab/comp/tabView02.tsx
......@@ -19,7 +19,7 @@ const TabView02 = () => {
});
if (res && res.code === '200') {
setTabList(res.result?.list?.filter((i) => i.inspectionDTOS?.length));
console.log('获取分类列表 --->', res.result);
// console.log('获取分类列表 --->', res.result);
}
};
// 组件挂载
......
src/pages/home/index.tsx
......@@ -6,6 +6,7 @@ import HomeMapView from '@/pages/home/comp/home-map';
import HomeNewsView from '@/pages/home/comp/home-news';
import HomeProductView from '@/pages/home/comp/home-product';
import HomeSearchView from '@/pages/home/comp/home-search';
import HomeServiceView from '@/pages/home/comp/home-service';
import HomeTabView from '@/pages/home/comp/home-tab';
import HomeTaskView from '@/pages/home/comp/home-task';
import HomeTitleView from '@/pages/home/comp/home-title';
......@@ -47,6 +48,8 @@ const HomeView = () => {
<HomeProductView />
{/* 无人机服务 */}
<HomeTitleView title="无人机服务" />
{/* 服务列表 */}
<HomeServiceView />
{/* 底部标签 */}
<HomeBottomView />
</div>
......
src/styles/animate.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/styles/globals.css
......@@ -86,7 +86,13 @@ body {
max-width: 100vw;
min-width: 1200px;
/*overflow-x: hidden;*/
font-family: PingFangSC-Regular, Microsoft YaHei, Hiragino Sans GB, Helvetica, serif, sans-serif;
font-family:
PingFangSC-Regular,
Microsoft YaHei,
Hiragino Sans GB,
Helvetica,
serif,
sans-serif;
}
body {
......@@ -123,11 +129,11 @@ a {
justify-content: flex-start;
align-items: center;
}
.flex-baseline{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: baseline;
.flex-baseline {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: baseline;
}
.flex-end {
display: flex;
......@@ -147,23 +153,23 @@ a {
justify-content: space-around;
align-items: center;
}
.text-ellipsis{
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*::-webkit-scrollbar {*/
/* background-color: transparent;*/
/* -webkit-border-radius: 2em;*/
/* -moz-border-radius: 2em;*/
/* border-radius: 2em;*/
/* width: 7px;*/
/* height: 7px;*/
/*}*/
.scroll-view::-webkit-scrollbar {
background-color: transparent;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
width: 7px;
height: 7px;
}
/*::-webkit-scrollbar-thumb {*/
/* background: #D9D9D9;;*/
/* -webkit-border-radius: 2em;*/
/* -moz-border-radius: 2em;*/
/* border-radius: 2em;*/
/*}*/
.scroll-view::-webkit-scrollbar-thumb {
background: #D9D9D9;;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
src/utils/money.ts
......@@ -2,49 +2,49 @@
/* eslint-disable */
import Big from "big.js";
import {isNone} from "@/utils/index";
import { isNone } from "@/utils/index";
export const formatCurrency = (s, n) => {
n = n > 0 && n <= 20 ? n : 2
s = `${parseFloat(`${s}`.replace(/[^\d\.-]/g, '')).toFixed(n)}`
const l = s.split('.')[0].split('').reverse()
const r = s.split('.')[1]
let t = ''
n = n > 0 && n <= 20 ? n : 2;
s = `${parseFloat(`${s}`.replace(/[^\d\.-]/g, "")).toFixed(n)}`;
const l = s.split(".")[0].split("").reverse();
const r = s.split(".")[1];
let t = "";
for (let i = 0; i < l.length; i++) {
t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length ? ',' : '')
t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length ? "," : "");
}
return t.split('').reverse().join('')
}
return t.split("").reverse().join("");
};
// 格式化千分位并补零
export const moneyFormat = (num) => {
if (Number(num).toString() !== 'NaN') {
if (Number(num).toString() !== "NaN") {
// 添加千分符
let _n = Number(num).toLocaleString()
if (_n.indexOf('.') !== -1) {
_n = `${_n}00`
let _n = Number(num).toLocaleString();
if (_n.indexOf(".") !== -1) {
_n = `${_n}00`;
} else {
_n = `${_n}.00`
_n = `${_n}.00`;
}
// 因为有千分符所以，返回数据为字符串格式，无法做运算操作，适合做直接显示使用
return _n.substring(0, _n.indexOf('.') + 3)
return _n.substring(0, _n.indexOf(".") + 3);
}
// console.log('参数格式有误')
}
};
// 金额大数字转换
export const bigNumberTransform = (value, type) => {
const newValue = ['', '', ''];
const newValue = ["", "", ""];
let fr = new Big(1000);
let num = 3;
let text1 = '';
let text2 = '';
let text1 = "";
let text2 = "";
let fm = new Big(1);
if (value === '' || value === null || isNaN(value)) {
return !type ? newValue : '';
if (value === "" || value === null || isNaN(value)) {
return !type ? newValue : "";
}
value = new Big(value);
if (value.lt(0)) {
value = value.abs();
text2 = '-';
text2 = "-";
}
while (value.div(fr).gte(1)) {
fr = fr.times(10);
......@@ -53,11 +53,11 @@ export const bigNumberTransform = (value, type) => {
if (num <= 4) {
// 千
newValue[0] = value.toString();
newValue[1] = '';
newValue[1] = "";
} else if (num <= 8) {
// 万
text1 = '万';
fm = text1 === '万' ? new Big(10000) : new Big(10000000);
text1 = "万";
fm = text1 === "万" ? new Big(10000) : new Big(10000000);
if (value.mod(fm).eq(0)) {
newValue[0] = `${value.div(fm).round()}`;
} else {
......@@ -66,20 +66,20 @@ export const bigNumberTransform = (value, type) => {
newValue[1] = text1;
} else {
// 亿
text1 = '亿';
text1 = (num - 8) / 4 > 1 ? '万亿' : text1;
text1 = (num - 8) / 7 > 1 ? '千万亿' : text1;
text1 = (num - 8) / 10 > 1 ? '亿亿' : text1;
text1 = "亿";
text1 = (num - 8) / 4 > 1 ? "万亿" : text1;
text1 = (num - 8) / 7 > 1 ? "千万亿" : text1;
text1 = (num - 8) / 10 > 1 ? "亿亿" : text1;
fm =
text1 === '亿'
text1 === "亿"
? new Big(100000000)
: text1 === '千亿'
? new Big(100000000000)
: text1 === '万亿'
? new Big(1000000000000)
: text1 === '千万亿'
? new Big(1000000000000000)
: new Big(1000000000000000000);
: text1 === "千亿"
? new Big(100000000000)
: text1 === "万亿"
? new Big(1000000000000)
: text1 === "千万亿"
? new Big(1000000000000000)
: new Big(1000000000000000000);
if (value.mod(fm).eq(0)) {
newValue[0] = `${value.div(fm).round()}`;
} else {
......@@ -89,13 +89,15 @@ export const bigNumberTransform = (value, type) => {
}
if (value.lt(1000)) {
newValue[0] = `${value}`;
newValue[1] = '';
newValue[1] = "";
}
newValue[0] = text2 ? text2 + newValue[0] : newValue[0];
return !type ? Number(newValue).toFixed(2).toLocaleString() : Number(newValue[0]).toFixed(2).toLocaleString() + newValue[1];
return !type
? Number(newValue).toFixed(2).toLocaleString()
: Number(newValue[0]).toFixed(2).toLocaleString() + newValue[1];
};
// 格式化金额
export const formatMoney = (money) => {
return !isNone(money) ? Big(money)?.toFixed(2)?.toLocaleString() : ''
}
return !isNone(money) ? Big(money)?.toFixed(2)?.toLocaleString() : "";
};
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论