Commit eb5e0982 authored by GuanHua's avatar GuanHua

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

parent 8df1e773
......@@ -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;
......
......@@ -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>
......
.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;
}
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
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
......@@ -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}>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment