Commit 5e4d29e9 authored by 周宏民's avatar 周宏民

style: 演示功能去掉跳转tip提示,项目案例添加悬浮动效

parent fb0a6cb7
Pipeline #85392 waiting for manual action with stages
......@@ -36,38 +36,36 @@ const BottomItem = props => {
return (
<div className={styles.list_item_col}>
{row.map((col, cIndex) => (
<Tooltip title={col['项目环境'] && isJump ? '点击体验' : ''} color="#1685FF">
<div
key={`${rindex}-${cIndex}`}
type={col['项目环境'] && isJump ? 'jump' : 'none'}
onClick={() => toPage(col['项目环境'])}
alt="点击体验"
className={styles.list_item}
>
<div className={styles.list_item_img_wrap}>
<div className={classNames(styles.list_item_img, 'list_item_img')}>
<Image
src={`${onLineUrl}CityInterface/rest/services/filedownload.svc/download/${col['项目图片']}`}
style={{ height: '100px', width: '100%', overflow: 'hidden' }}
preview={false}
/>
</div>
<div
key={`${rindex}-${cIndex}`}
type={col['项目环境'] && isJump ? 'jump' : 'none'}
onClick={() => toPage(col['项目环境'])}
alt="点击体验"
className={styles.list_item}
>
<div className={styles.list_item_img_wrap}>
<div className={classNames(styles.list_item_img, 'list_item_img')}>
<Image
src={`${onLineUrl}CityInterface/rest/services/filedownload.svc/download/${col['项目图片']}`}
style={{ height: '100px', width: '100%', overflow: 'hidden' }}
preview={false}
/>
</div>
{col['重要程度'] === '样板' ? <div className={styles.list_item_img_tip} /> : null}
{col['重要程度'] === '样板' ? <div className={styles.list_item_img_tip} /> : null}
</div>
<div className={styles.list_item_info_wrap}>
<div className={styles.list_item_info_tip} type={col['所属行业']}>
{col['所属行业'] === '能源' ? '节水' : col['所属行业']}
</div>
<div className={styles.list_item_info_wrap}>
<div className={styles.list_item_info_tip} type={col['所属行业']}>
{col['所属行业'] === '能源' ? '节水' : col['所属行业']}
</div>
<div className={styles.list_item_info_name}>
<Tooltip title={col['客户名称']} color="#1685FF">
{col['客户名称']}
</Tooltip>
</div>
<div className={styles.list_item_info_address}>{col['城市']}</div>
<div className={styles.list_item_info_name}>
<Tooltip title={col['客户名称']} color="#1685FF">
{col['客户名称']}
</Tooltip>
</div>
<div className={styles.list_item_info_address}>{col['城市']}</div>
</div>
</Tooltip>
</div>
))}
</div>
);
......
......@@ -134,6 +134,11 @@
cursor: pointer;
}
.list_item[type='jump']:hover {
border: 1px solid #1685FF;
transform: scale(1.05);
}
.list_item[type='jump']:active {
opacity: 0.8;
}
......@@ -146,6 +151,8 @@
overflow: hidden;
margin-right: 8px;
margin-bottom: 8px;
transform-origin: center top;
transition: transform 0.3s;
.list_item_img_wrap {
width: 100%;
......
......@@ -33,20 +33,18 @@ const LeftItem = props => {
</div>
<div className={styles.l_list}>
{schemeData.map((item, index) => (
<Tooltip title={industries.includes(item.type) ? '点击体验' : ''} color="#1685FF">
<div
className={styles.l_list_item}
key={item.title}
type={item.title}
selectType={selectKey === item.title ? 'select' : ''}
onClick={event => handlePage(event, item.type, item)}
onMouseEnter={() => onMouseEnter(item, index)}
onMouseLeave={() => onMouseLeave(item, index)}
>
<div className={styles.l_list_item_title}>- {item.title} -</div>
<div className={styles.l_list_item_tip} />
</div>
</Tooltip>
<div
className={styles.l_list_item}
key={item.title}
type={item.title}
selectType={selectKey === item.title ? 'select' : ''}
onClick={event => handlePage(event, item.type, item)}
onMouseEnter={() => onMouseEnter(item, index)}
onMouseLeave={() => onMouseLeave(item, index)}
>
<div className={styles.l_list_item_title}>- {item.title} -</div>
<div className={styles.l_list_item_tip} />
</div>
))}
</div>
</div>
......
......@@ -20,23 +20,16 @@ const RightItem = props => {
const renderRow = (row, index) => {
const rIndex = `r_${index % 7}`;
return (
<Tooltip
placement="left"
title={row['产品地址'] || row.site ? '点击体验' : ''}
mouseEnterDelay={0.5}
color="#1685FF"
<div
className={styles.r_list_item}
key={row['产品名称']}
rIndex={rIndex}
type={row['产品地址'] || row.site ? 'jump' : 'none'}
onClick={() => toPage(row)}
>
<div
className={styles.r_list_item}
key={row['产品名称']}
rIndex={rIndex}
type={row['产品地址'] || row.site ? 'jump' : 'none'}
onClick={() => toPage(row)}
>
<div className={styles.r_list_item_title}>{row['产品名称']}</div>
<div className={styles.r_list_item_tip} />
</div>
</Tooltip>
<div className={styles.r_list_item_title}>{row['产品名称']}</div>
<div className={styles.r_list_item_tip} />
</div>
);
};
......
......@@ -194,19 +194,17 @@ const Demonstration = props => {
}
const isJump = col.site || (col['数值'] && col['数值'].includes('http'));
return (
<Tooltip title={isJump ? '点击体验' : ''} color="#1685FF">
<div
onClick={() => handToPlatform(col)}
className={styles.center_col}
style={{ flex: col.flex }}
type={col.title}
isJump={isJump ? 'yes' : 'no'}
>
<img src={require(`@/assets/images/demonstration/${col.icon}`)} alt="" />
{col.title}
<RightOutlined />
</div>
</Tooltip>
<div
onClick={() => handToPlatform(col)}
className={styles.center_col}
style={{ flex: col.flex }}
type={col.title}
isJump={isJump ? 'yes' : 'no'}
>
<img src={require(`@/assets/images/demonstration/${col.icon}`)} alt="" />
{col.title}
<RightOutlined />
</div>
);
});
}, [configData]);
......
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