测试：测试推送部署

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

+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/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() : "";
+};