功能：样式优化

src/components/home-comp/home-product/index.tsx

 import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
 import styled from 'styled-components';
 import { HomeAPI } from '@/api';
 import { InterDataType } from '@/api/interface';
@@ -8,6 +9,8 @@ import { RecommendGoodsType } from '@/api/interface/home';
 type ListType = InterDataType<RecommendGoodsType>;
 
 const HomeProductView = () => {
+  // 路由钩子
+  const router = useRouter();
   // 推荐商品列表
   const [recommendGoodsList, setRecommendGoodsList] = useState<
     ListType[0]['mallGoodsList']
@@ -33,6 +36,10 @@ const HomeProductView = () => {
       ).salePrice || 0
     );
   };
+  // 跳转详情
+  const handleDetail = async (item: ListType[0]['mallGoodsList'][0]) => {
+    await router.push(`/mall/product/${item.id}`);
+  };
   // 组件挂载
   useEffect(() => {
     getRecommendGoodsList().then();
@@ -40,7 +47,11 @@ const HomeProductView = () => {
   return (
     <HomeProductWrap>
       {recommendGoodsList?.map((i, j) => (
-        <div className="product-item flex-start" key={j}>
+        <div
+          className="product-item flex-start"
+          key={j}
+          onClick={() => handleDetail(i)}
+        >
           <img
             className="item-image"
             src={`${i.resourcesList[0].url}?x-oss-process=image/quality,q_25`}

src/components/home-comp/home-title/index.tsx

 import React from 'react';
 import { RightOutlined } from '@ant-design/icons';
+import { useRouter } from 'next/router';
 import styled from 'styled-components';
 
-const HomeTitleView = ({ title }: { title: string }) => {
+const HomeTitleView: React.FC<{ title: string; path?: string }> = ({
+  title,
+  path,
+}) => {
+  // 路由钩子
+  const router = useRouter();
+  // 跳转详情
+  const handleDetail = async () => {
+    if (!path) return;
+    await router.push(path);
+  };
   return (
-    <HomeTitleWrap>
+    <HomeTitleWrap onClick={handleDetail}>
       <div className="title-text">{title}</div>
       <div className="title-more flex-start">
         <div className="more-text">更多</div>

src/components/product-comp/product-head/index.tsx

@@ -91,7 +91,7 @@ const ProductHeadView: React.FC<{ detail: DetailType }> = ({ detail }) => {
   useEffect(() => {
     if (!detail) return;
     getLowerSpec();
-    console.log('detail --->', detail);
+    // console.log('detail --->', detail);
   }, [detail]);
   return (
     <ProductHeadWrap>
@@ -190,9 +190,9 @@ const ProductHeadWrap = styled.div`
   box-sizing: border-box;
   margin-right: 0.83rem;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: flex-start;
-  padding: 0 1rem;
+  padding: 2rem 1rem 2rem 1rem;
   .product-swiper {
     position: relative;
     width: 22rem;
@@ -204,7 +204,7 @@ const ProductHeadWrap = styled.div`
     width: calc(100% - 22rem);
     height: 100%;
     box-sizing: border-box;
-    padding: 1rem 0 1rem 1rem;
+    padding: 0 0 0 1rem;
     //background: lightblue;
     .content-title {
       width: 100%;

src/components/product-comp/product-store/index.tsx

@@ -50,7 +50,7 @@ const ProductStoreView: React.FC<{ detail: DetailType; store: StoreType }> = ({
           <PhoneOutlined
             style={{ color: '#FF552D', transform: 'rotateY(180deg)' }}
           />
-          <div className="text">进店逛逛</div>
+          <div className="text">联系方式</div>
         </div>
       </div>
     </ProductStoreWrap>

src/pages/home/index.tsx

@@ -42,7 +42,7 @@ const HomeView = () => {
         {/* 品牌企业 */}
         <HomeBrandView />
         {/* 大家都在买 */}
-        <HomeTitleView title="大家都在买" />
+        <HomeTitleView title="大家都在买" path="/mall" />
         {/* 推荐商品 */}
         <HomeProductView />
         {/* 无人机服务 */}

src/pages/mall/product/[id].tsx

@@ -66,11 +66,13 @@ const MallProductView: React.FC<{
           <ProductStoreView detail={productDetail} store={storeDetail} />
         </div>
         <div className="product-title">商品详情</div>
-        <div className="product-content">
-          <div
-            className="content-html"
-            dangerouslySetInnerHTML={{ __html: productDetail?.goodsDetails }}
-          />
+        <div className="product-richText">
+          {productDetail?.goodsDetails && (
+            <div
+              className="content-html"
+              dangerouslySetInnerHTML={{ __html: productDetail?.goodsDetails }}
+            />
+          )}
         </div>
       </ProductWrap>
     </LayoutView>

src/pages/mall/product/styled.tsx

@@ -33,7 +33,7 @@ export const ProductWrap = styled.div`
       right: 40%;
     }
   }
-  .product-content {
+  .product-richText {
     position: relative;
     width: 100%;
     margin-bottom: 3.5rem;