🎈 perf(页面优化完成):
This commit is contained in:
@@ -1,16 +1,35 @@
|
||||
.labAndImg_main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
// border: 1px #eee solid;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.boxColor {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #818181;
|
||||
// border: 1px solid #818181;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.labAndImg_image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20px !important;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.labAndImg_name {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
border-radius: 50px;
|
||||
padding: 7px;
|
||||
background-color: #fff;
|
||||
@include common_ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,8 +15,10 @@ type Param = {
|
||||
}
|
||||
showStatus?: true | false
|
||||
onClick?: (val: Param['value']) => void
|
||||
round?: boolean
|
||||
name?: string
|
||||
}
|
||||
export default memo(({ value, onClick, showStatus = false }: Param) => {
|
||||
export default memo(({ value, onClick, showStatus = false, round = false, name = '' }: Param) => {
|
||||
const [imgs, setImgs] = useState<string[]>([])
|
||||
|
||||
//lab是否都是0
|
||||
@@ -50,10 +52,13 @@ export default memo(({ value, onClick, showStatus = false }: Param) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<View className={styles.labAndImg_main} onClick={() => onShowLabAndImg()}>
|
||||
{value.texture_url && <Image mode='aspectFill' src={imgs[0]} className={styles.labAndImg_image}></Image>}
|
||||
{!value.texture_url && rgbStyle && <View className={styles.boxColor} style={{ ...rgbStyle }}></View>}
|
||||
{!value.texture_url && !rgbStyle && <Image mode='aspectFill' src={formatImgUrl('')} className={styles.labAndImg_image}></Image>}
|
||||
<View className={styles.labAndImg_main} style={{ borderRadius: round ? '50%' : '' }} onClick={() => onShowLabAndImg()}>
|
||||
{value.texture_url && <Image mode='aspectFill' src={imgs[0]} className={styles.labAndImg_image} style={{ borderRadius: round ? '50%' : '' }}></Image>}
|
||||
{!value.texture_url && rgbStyle && <View className={styles.boxColor} style={{ ...rgbStyle, borderRadius: round ? '50%' : '' }}></View>}
|
||||
{!value.texture_url && !rgbStyle && (
|
||||
<Image mode='aspectFill' src={formatImgUrl('')} className={styles.labAndImg_image} style={{ borderRadius: round ? '50%' : '' }}></Image>
|
||||
)}
|
||||
{name && <View className={styles.labAndImg_name}>{name}</View>}
|
||||
</View>
|
||||
<LabAndImgShow value={value} show={labAndImgShow} onClose={closeLabAndImgShow} />
|
||||
</>
|
||||
|
||||
@@ -1,83 +1,83 @@
|
||||
|
||||
.products_list{
|
||||
padding: 0 20px 20px 20px;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
.products_list {
|
||||
padding: 0 20px 20px 20px;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
.products_item{
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&:nth-child(n+2){
|
||||
margin-top: 16px;
|
||||
.products_item {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&:nth-child(n + 2) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.item_img {
|
||||
width: 198px;
|
||||
height: 198px;
|
||||
position: relative;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.item_img{
|
||||
width: 198px;
|
||||
height: 198px;
|
||||
position: relative;
|
||||
image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.num{
|
||||
padding: 5px 10px 5px 20px;
|
||||
font-size: $font_size_min;
|
||||
position: absolute;
|
||||
right:0;
|
||||
bottom: 0;
|
||||
background: rgba($color: #000, $alpha: 0.3);
|
||||
border-radius: 36px 0px 20px 0px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.num {
|
||||
padding: 5px 10px 5px 20px;
|
||||
font-size: $font_size_min;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba($color: #000, $alpha: 0.3);
|
||||
border-radius: 36px 0px 20px 0px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.item_con{
|
||||
padding-left: 20px;
|
||||
font-size: $font_size;
|
||||
flex:1;
|
||||
.title{
|
||||
font-size: $font_size;
|
||||
color: #707070;
|
||||
@include common_ellipsis(2);
|
||||
text{
|
||||
color: $color_font_one;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.tag_list{
|
||||
display: flex;
|
||||
margin-top: 16px;
|
||||
flex-wrap: wrap;
|
||||
.tag, .tag_g{
|
||||
max-width: 260rpx;
|
||||
padding: 3px 10px;
|
||||
background-color: #CDE5FF;
|
||||
font-size: $font_size_min;
|
||||
border-radius: 5px;
|
||||
color: $color_main;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.tag_g{
|
||||
background-color: #FFE6CE;
|
||||
color: #EE7500;
|
||||
}
|
||||
}
|
||||
.introduce{
|
||||
font-size: $font_size_medium;
|
||||
color: $color_font_two;
|
||||
|
||||
}
|
||||
.des{
|
||||
font-size:$font_size_medium;
|
||||
color: #707070;
|
||||
margin-top: 16px;
|
||||
@include common_ellipsis($params:2);
|
||||
}
|
||||
}
|
||||
.item_con {
|
||||
padding-left: 20px;
|
||||
font-size: $font_size;
|
||||
flex: 1;
|
||||
.title {
|
||||
font-size: $font_size;
|
||||
color: #707070;
|
||||
@include common_ellipsis(2);
|
||||
text {
|
||||
color: $color_font_one;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.tag_list {
|
||||
display: flex;
|
||||
margin-top: 16px;
|
||||
flex-wrap: wrap;
|
||||
.tag,
|
||||
.tag_g {
|
||||
max-width: 260rpx;
|
||||
padding: 3px 10px;
|
||||
background-color: #cde5ff;
|
||||
font-size: $font_size_min;
|
||||
border-radius: 5px;
|
||||
color: $color_main;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.tag_g {
|
||||
background-color: #ffe6ce;
|
||||
color: #ee7500;
|
||||
}
|
||||
}
|
||||
.introduce {
|
||||
font-size: $font_size_medium;
|
||||
color: $color_font_two;
|
||||
@include common_ellipsis;
|
||||
}
|
||||
.des {
|
||||
font-size: $font_size_medium;
|
||||
color: #707070;
|
||||
margin-top: 16px;
|
||||
@include common_ellipsis($params: 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,39 +1,46 @@
|
||||
import { Image, View } from "@tarojs/components"
|
||||
import Taro from "@tarojs/taro"
|
||||
import { goLink } from "@/common/common"
|
||||
import styles from './index.module.scss'
|
||||
import { formatHashTag, formatImgUrl } from "@/common/fotmat"
|
||||
import LabAndImg from "../LabAndImg"
|
||||
import { useCallback, useMemo } from "react"
|
||||
import { Image, View } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { goLink } from '@/common/common'
|
||||
import styles from './index.module.scss'
|
||||
import { formatHashTag, formatImgUrl } from '@/common/fotmat'
|
||||
import LabAndImg from '../LabAndImg'
|
||||
import { useCallback, useMemo } from 'react'
|
||||
|
||||
type Params = {
|
||||
desStatus?: true|false,
|
||||
productList?: any[]
|
||||
desStatus?: true | false
|
||||
productList?: any[]
|
||||
}
|
||||
export default ({desStatus = true, productList = []}:Params) => {
|
||||
|
||||
const labAndImgObj = useCallback((item) => {
|
||||
return {lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}
|
||||
}, [productList])
|
||||
return (
|
||||
<View className={styles.products_list}>
|
||||
{productList?.map(item => {
|
||||
return <View className={styles.products_item} onClick={() => goLink(`/pages/details/index?id=${item.id}`)}>
|
||||
<View className={styles.item_img}>
|
||||
<LabAndImg value={labAndImgObj(item)}/>
|
||||
<View className={styles.num}>{item.product_color_count}色</View>
|
||||
</View>
|
||||
<View className={styles.item_con}>
|
||||
<View className={styles.title}><text>{formatHashTag(item.code, '')} </text>{item.name}</View>
|
||||
<View className={styles.tag_list}>
|
||||
<View className={styles.tag}>{item.width}</View>
|
||||
<View className={styles.tag_g}>{item.weight_density}</View>
|
||||
</View>
|
||||
<View className={styles.introduce}>{item.component}</View>
|
||||
{desStatus&&<View className={styles.des}>{item.describe}</View>}
|
||||
</View>
|
||||
</View>
|
||||
})}
|
||||
</View>
|
||||
)
|
||||
export default ({ desStatus = true, productList = [] }: Params) => {
|
||||
const labAndImgObj = useCallback(
|
||||
(item) => {
|
||||
return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
|
||||
},
|
||||
[productList],
|
||||
)
|
||||
return (
|
||||
<View className={styles.products_list}>
|
||||
{productList?.map((item) => {
|
||||
return (
|
||||
<View className={styles.products_item} onClick={() => goLink(`/pages/details/index?id=${item.id}`)}>
|
||||
<View className={styles.item_img}>
|
||||
<LabAndImg value={labAndImgObj(item)} />
|
||||
<View className={styles.num}>{item.product_color_count}色</View>
|
||||
</View>
|
||||
<View className={styles.item_con}>
|
||||
<View className={styles.title}>
|
||||
<text>{formatHashTag(item.code, '')} </text>
|
||||
{item.name}
|
||||
</View>
|
||||
<View className={styles.tag_list}>
|
||||
<View className={styles.tag}>{item.width}</View>
|
||||
<View className={styles.tag_g}>{item.weight_density}</View>
|
||||
</View>
|
||||
<View className={styles.introduce}>{item.craft + '；' + item.component}</View>
|
||||
{desStatus && <View className={styles.des}>{item.describe}</View>}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user