功能：商品详情页面

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>
@@ -136,8 +136,10 @@ const ProductHeadView: React.FC<{ detail: DetailType }> = ({ detail }) => {
           </div>
         </div>
         {detail?.specAttrList?.map((i, j) => (
-          <div className="content-item flex-start" key={j}>
-            <div className="item-label">{i.specName}</div>
+          <div className="content-item flex-start align-start" key={j}>
+            <div className="item-label two-line-ellipsis" title={i.specName}>
+              {i.specName}
+            </div>
             <div className="item-content flex-start ">
               {i.specValuesList?.map((n, m) => (
                 <div
@@ -146,6 +148,7 @@ const ProductHeadView: React.FC<{ detail: DetailType }> = ({ detail }) => {
                   }`}
                   key={m}
                   onClick={() => handleSelect(j, m)}
+                  title={n.specName}
                 >
                   {n.specName}
                 </div>
@@ -229,7 +232,7 @@ const ProductHeadWrap = styled.div`
       margin-bottom: 1rem;
       align-items: baseline;
       .price-label {
-        width: 2rem;
+        width: 2.5rem;
         color: #999999;
         text-align: justify;
         text-align-last: justify;
@@ -248,14 +251,16 @@ const ProductHeadWrap = styled.div`
     .content-item {
       margin-bottom: 1rem;
       padding: 0 0.8rem;
+      //flex-wrap: nowrap;
       .item-label {
-        width: 2rem;
+        width: 2.5rem;
         color: #999999;
         text-align: justify;
         text-align-last: justify;
         margin-right: 1rem;
       }
       .item-content {
+        width: calc(100% - 3.5rem);
         .content-address {
           font-size: 12px;
           &:first-child {
@@ -270,7 +275,7 @@ const ProductHeadWrap = styled.div`
           }
         }
         .content-spec {
-          //min-width: 4rem;
+          //min-width: max-content;
           height: 2rem;
           background: #f2f2f2;
           border-radius: 0.08rem;
@@ -280,8 +285,9 @@ const ProductHeadWrap = styled.div`
           box-sizing: border-box;
           padding: 0 1rem;
           border: 0.04rem solid #f2f2f2;
-          &:not(:last-child) {
-            margin-right: 0.5rem;
+          margin: 0 0.5rem 0.5rem 0;
+          &:last-child {
+            margin-right: 0;
           }
         }
         .spec-active {

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

-import React, { useEffect } from 'react';
+import React from 'react';
 import { PhoneOutlined, ShopOutlined } from '@ant-design/icons';
 import { Rate } from 'antd';
 import styled from 'styled-components';
@@ -14,9 +14,6 @@ type StoreType = InterDataType<GetCompanyInfoByBUId>;
 const ProductStoreView: React.FC<{ detail: DetailType; store: StoreType }> = ({
   store,
 }) => {
-  useEffect(() => {
-    console.log('store --->', store);
-  }, []);
   return (
     <ProductStoreWrap>
       <div className="store-card flex-start">
@@ -42,7 +39,7 @@ const ProductStoreView: React.FC<{ detail: DetailType; store: StoreType }> = ({
       </div>
       <div className="store-item flex-start">
         <div className="item-label">电话：</div>
-        <div className="item-value">{store?.phoneNum}</div>
+        <div className="item-value">{store?.phoneNum || '18626051369'}</div>
       </div>
       <div className="store-action flex-start">
         <div className="action-item flex-start">
@@ -66,7 +63,8 @@ export default ProductStoreView;
 const ProductStoreWrap = styled.div`
   position: relative;
   width: calc((100% - 0.83rem) / 10 * 2.5);
-  min-height: 28rem;
+  min-height: 18rem;
+  //height: 100%;
   background: #ffffff;
   border: 0.04rem solid #e3e3e3;
   box-sizing: border-box;

src/components/product-swiper/index.tsx

@@ -85,7 +85,8 @@ const ProductSwiperView: React.FC<{
         onSwiper={setThumbsSwiper}
         loop={true}
         spaceBetween={10}
-        slidesPerView={5}
+        slidesPerView={list?.length > 5 ? 5 : list?.length}
+        slidesPerGroupAuto={true}
         freeMode={true}
         watchSlidesProgress={true}
         modules={[FreeMode, Navigation, Thumbs]}

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

@@ -61,7 +61,7 @@ const MallProductView: React.FC<{
       <ProductWrap>
         {/* 面包屑 */}
         <BreadcrumbView />
-        <div className="flex-start">
+        <div className="flex-start align-start">
           <ProductHeadView detail={productDetail} />
           <ProductStoreView detail={productDetail} store={storeDetail} />
         </div>

src/pages/mall/product/styled.tsx

@@ -36,6 +36,7 @@ export const ProductWrap = styled.div`
   .product-content {
     position: relative;
     width: 100%;
+    margin-bottom: 3.5rem;
     .content-html {
       width: 100%;
       img {