style: 店铺信息积分样式修改

src/pages/lxMall/commodityDetail/components/ShopInfo/index.less

@@ -4,18 +4,16 @@
   padding-bottom: 15px;
   margin-bottom: 20px;
   border: 1px solid rgba(245, 245, 245, 1);
-  background: #FFF8E6;
+  background: #FFFFFF;
 
   &_body {
-    padding: 0 10px;
+    padding: 0 12px;
   }
 
   .shop_info_title {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 47px;
-    background: linear-gradient(180deg, #FAE4AC 0%, #FFF8E6 100%);
+    padding: 0 12px;
+    background: linear-gradient(180deg, #FAE4AC 0%, rgba(250, 228, 172, 0) 100%);
+    margin-bottom: 15px;
 
     &_split {
       width: 40px;
@@ -24,15 +22,37 @@
     }
 
     &_text {
+      height: 24px;
+      display: flex;
+      font-weight: 600;
+      align-items: center;
       color: #EA8000;
-      margin: 0 15px;
+      font-size: 12px;
+      margin-bottom: 14px;
+      padding-top: 6px;
+
+      &>img {
+        width: 24px;
+        height: 24px;
+      }
+
+      &>span {
+        flex: 1;
+      }
+
+
+    }
+
+    &_body {
+      height: 96px;
+      border-bottom: 1px dashed #F4F5F7;
     }
   }
 
   .shop_name {
     font-size: 12px;
     color: #303133;
-    margin-bottom: 10px;
+    margin-bottom: 8px;
     font-weight: bold;
   }
 
@@ -92,15 +112,13 @@
   }
 
   .dashed_split {
-
     margin: 15px 0;
     width: 100%;
-    border-top: 1px dashed #F2C17C;
+    border-top: 1px dashed #F4F5F7;
     height: 0;
   }
 
   .shop_info_list {
-    margin-top: 10px;
 
     &_item {
       display: flex;
@@ -182,7 +200,7 @@
     margin-top: 15px;
     width: 100%;
     height: 32px;
-    background-color: #DB9040;
+    background-color: var(--mall_main_color);
     color: #FFF;
     border: none;
     outline: none;

src/pages/lxMall/commodityDetail/components/ShopInfo/index.tsx

@@ -2,8 +2,9 @@ import React, { useState, useEffect } from 'react'
 import { Rate, Button, message } from 'antd'
 import { Link } from 'umi'
 import { PublicApi } from '@/services/api'
-import shop_icon from '@/assets/imgs/shop_icon.png'
-import credit_icon from '@/assets/imgs/credit_icon.png'
+import YearBox from '../../../components/ShopCredit/year'
+import ShopCredit from '../../../components/ShopCredit'
+import shopCreditTagImg from '@/assets/imgs/shop_credit_tag.png'
 import cx from 'classnames'
 import styles from './index.less'
 
@@ -70,23 +71,25 @@ const ShopInfo: React.FC<ShopInfoPropsType> = (props) => {
   return (
     <div className={styles.shop_info}>
       <div className={styles.shop_info_title}>
-        <div className={styles.shop_info_title_split}></div>
-        <div className={styles.shop_info_title_text}>会员认证</div>
-        <div className={styles.shop_info_title_split}></div>
+        <div className={styles.shop_info_title_body}>
+          <div className={styles.shop_info_title_text}>
+            <span>会员认证</span>
+            <img src={shopCreditTagImg} />
           </div>
-      <div className={styles.shop_info_body}>
           <div className={styles.shop_name}>{shopInfo?.memberName}</div>
           <div className={styles.shop_about}>
             <div className={styles.shop_about_year}>
-            <div className={styles.shop_about_year_count}>{shopInfo?.registerYears || 0}</div>
-            <div className={styles.shop_about_year_text}>平台{shopInfo?.registerYears || 0}年店</div>
+              <YearBox year={shopInfo?.registerYears || 0} />
             </div>
           </div>
-        <div className={styles.dashed_split}></div>
+        </div>
+      </div>
+      <div className={styles.shop_info_body}>
+
         <div className={styles.shop_info_list}>
           <div className={styles.shop_info_list_item}>
             <div className={styles.label}>信用积分：</div>
-            <div className={styles.breif}>{shopInfo?.creditPoint || 0}</div>
+            <div className={styles.breif}><ShopCredit creditPoint={shopInfo?.creditPoint || 0} /></div>
           </div>
           <div className={styles.shop_info_list_item}>
             <div className={styles.label}>注册资本：</div>

src/pages/lxMall/components/ShopCredit/index.less

+.shopCredit {
+  position: relative;
+
+  .shopCreditIcon {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 18px;
+    height: 16px;
+  }
+
+  .pointWrap {
+    background-color: #FFE6C8;
+    border-radius: 1px;
+    height: 16px;
+    line-height: 16px;
+    font-size: 12px;
+    color: #773100;
+    padding-right: 4px;
+    padding-left: 12px;
+    margin-left: 9px;
+  }
+}
+
+
+.yearbox {
+  height: 16px;
+  display: flex;
+  align-items: center;
+  border-radius: 1px;
+  border: 1px solid #6A8DDA;
+  padding: 0 4px;
+  font-size: 12px;
+  color: #6A8DDA;
+}

src/pages/lxMall/components/ShopCredit/index.tsx

+import React from 'react'
+import creditIcon from './credit.png'
+import styles from './index.less'
+
+interface ShopCreditType {
+  creditPoint: number,
+}
+
+const ShopCredit: React.FC<ShopCreditType> = (props) => {
+  const { creditPoint } = props
+
+  return (
+    <div className={styles.shopCredit}>
+      <img className={styles.shopCreditIcon} src={creditIcon} />
+      <div className={styles.pointWrap}>
+        <span>{creditPoint}</span>
+      </div>
+    </div>
+  )
+}
+
+export default ShopCredit

src/pages/lxMall/components/ShopCredit/year.tsx

+import React from 'react'
+import styles from './index.less'
+
+interface YearBoxProps {
+  year: number;
+}
+
+const YearBox: React.FC<YearBoxProps> = (props) => {
+  const { year } = props
+
+  return (
+    <div className={styles.yearbox}>
+      <span>入驻{year}年</span>
+    </div>
+  )
+}
+
+export default YearBox

src/pages/lxMall/components/ShopHeader/index.tsx

@@ -6,6 +6,7 @@ import isEmpty from 'lodash/isEmpty'
 import shop_icon from '@/assets/imgs/shop_icon.png'
 import credit_icon from '@/assets/imgs/credit_icon.png'
 import ImageBox from '@/components/ImageBox'
+import ShopCredit from '../ShopCredit'
 import styles from './index.less'
 import cx from 'classnames'
 import { PublicApi } from '@/services/api'
@@ -105,15 +106,16 @@ const ShopHeader: React.FC<ShopHeaderPropsType> = (props) => {
                     <CaretDownOutlined className={styles.shop_header_info_content_icon} />
                   </div>
                   <div className={styles.shop_header_info_content_about}>
+                    <ShopCredit creditPoint={shopInfo?.creditPoint || 0 } />
                     {/* <div className={styles.shop_header_info_content_about_item}>
                       <i className={styles.icon}><img src={shop_icon} /></i>
                       <span className={styles.red}>{shopInfo?.registerYears}</span>
                       <span>年</span>
                     </div> */}
-                    <div className={styles.shop_header_info_content_about_item}>
+                    {/* <div className={styles.shop_header_info_content_about_item}>
                       <i className={styles.icon}><img src={credit_icon} /></i>
                       <span>{shopInfo?.creditPoint || 0}</span>
-                    </div>
+                    </div> */}
                   </div>
                 </div>
                 <div className={styles.shop_info}>