Commit 99f0e40f authored by 陶晶晶's avatar 陶晶晶

fix:五粮液集成登录添加动态特效

parent ea2c697c
Pipeline #96225 passed with stages
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
...@@ -26,6 +26,10 @@ import useFullScreen from '../../demonstration/components/useFullScreen'; ...@@ -26,6 +26,10 @@ import useFullScreen from '../../demonstration/components/useFullScreen';
import styles from './index.less'; import styles from './index.less';
import titleIcon from "@/assets/images/integration/wuliangye/标题.png"; import titleIcon from "@/assets/images/integration/wuliangye/标题.png";
import Icon10 from "@/assets/images/integration/wuliangye/酒瓶.png"; import Icon10 from "@/assets/images/integration/wuliangye/酒瓶.png";
import tipIcon from "@/assets/images/integration/wuliangye/tip框.png";
import BGIcon from "@/assets/images/integration/wuliangye/五粮液背景.png";
import dxIcon from "@/assets/images/integration/wuliangye/动效1.gif";
import dxIcon2 from "@/assets/images/integration/wuliangye/动效2.gif";
import pageConfig from "./config"; import pageConfig from "./config";
const { modalConfig, BIConfig } = pageConfig const { modalConfig, BIConfig } = pageConfig
...@@ -45,9 +49,6 @@ const IntegrationQinzhou = props => { ...@@ -45,9 +49,6 @@ const IntegrationQinzhou = props => {
const loadingTime = integratedConfig?.loadingTime || 5; const loadingTime = integratedConfig?.loadingTime || 5;
const clientInfo = useRef({}); // 跳转子站信息 const clientInfo = useRef({}); // 跳转子站信息
console.log('integrationData:', integrationData);
const history = useHistory(); const history = useHistory();
const { clear } = useAliveController(); const { clear } = useAliveController();
...@@ -111,8 +112,6 @@ const IntegrationQinzhou = props => { ...@@ -111,8 +112,6 @@ const IntegrationQinzhou = props => {
}) })
.then(res1 => { .then(res1 => {
const list = res1.data || []; const list = res1.data || [];
console.log('res1.data:', res1.data);
list.length && localStorage.setItem('integrationData', JSON.stringify(list)); list.length && localStorage.setItem('integrationData', JSON.stringify(list));
const obj = {}; const obj = {};
list.forEach(i => { list.forEach(i => {
...@@ -327,7 +326,14 @@ const IntegrationQinzhou = props => { ...@@ -327,7 +326,14 @@ const IntegrationQinzhou = props => {
}, [loginAction.events, props]); }, [loginAction.events, props]);
return ( return (
<div className={classNames(styles.integrationQinzhou, 'integrationQinzhou')} ref={ref}> <div className={classNames(styles.integrationQinzhou, 'integrationQinzhou')} style={{ background: `url(${BGIcon}) center/100% 100% no-repeat` }} ref={ref}>
{/* 动态特效 */}
<div className={styles.DX1} style={{ background: `url(${dxIcon}) no-repeat center center` }} />
<div className={styles.DX2} style={{ background: `url(${dxIcon}) no-repeat center center` }} />
<div className={styles.DX3} style={{ background: `url(${dxIcon2}) no-repeat center center` }} />
<div className={styles.DX4} style={{ background: `url(${dxIcon2}) no-repeat center center` }} />
{jumpLoading ? ( {jumpLoading ? (
<div className={styles.integrationJumpLoad} key="jumpLoading"> <div className={styles.integrationJumpLoad} key="jumpLoading">
<div style={{ width: '285px' }}> <div style={{ width: '285px' }}>
...@@ -376,14 +382,15 @@ const IntegrationQinzhou = props => { ...@@ -376,14 +382,15 @@ const IntegrationQinzhou = props => {
</div> </div>
</div> </div>
<div className={styles.showCenter} > <div className={styles.showCenter} >
{/* 动效1 */}
<img src={Icon10} <img src={Icon10}
className={ className={
integrationData['主页'] ? integrationData['平台总览'] ?
styles.integration_row_col_link styles.integration_row_col_link
: styles.integration_row_col_no : styles.integration_row_col_no
} }
title={`点击主页跳转`} title='点击平台总览跳转'
onClick={() => { onLink(integrationData['主页'], loginAction) }} /> onClick={() => { onLink(integrationData['平台总览'], loginAction) }} />
</div> </div>
<div className={styles.integrationTips}> <div className={styles.integrationTips}>
{ {
...@@ -396,7 +403,8 @@ const IntegrationQinzhou = props => { ...@@ -396,7 +403,8 @@ const IntegrationQinzhou = props => {
name={item.name} name={item.name}
onClick={() => { item.name ? onLink(integrationData[item.name], loginAction) : null }} onClick={() => { item.name ? onLink(integrationData[item.name], loginAction) : null }}
> >
<div className={styles.integration_TitBG} >{item.name}</div> {/* tipIcon */}
<div className={styles.integration_TitBG} style={{ background: `url(${tipIcon}) center/100% 100% no-repeat` }} >{item.name}</div>
<img src={item.icon} /> <img src={item.icon} />
</div> </div>
}) })
......
@imgSrc: '@/assets/images/integration/qinzhou/';
.integrationQinzhou { .integrationQinzhou {
width: 100%; width: 100%;
position: relative; position: relative;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
// ('@/assets/images/integration2/right.png')
background: url('@/assets/images/integration/wuliangye/五粮液背景.png') center/100% 100% no-repeat; background: url('@/assets/images/integration/wuliangye/五粮液背景.png') center/100% 100% no-repeat;
.DX1 {
width: 256px;
height: 256px;
background-size: cover;
mix-blend-mode: screen;
position: absolute;
left: calc(30vw + 40px);
bottom: 130px;
}
.DX2 {
width: 256px;
height: 256px;
background-size: cover;
mix-blend-mode: screen;
position: absolute;
left: calc(50vw + 70px);
bottom: 200px;
}
.DX3 {
width: 243px;
height: 449px;
background-size: cover;
mix-blend-mode: screen;
position: absolute;
right: 0px;
bottom: 0px;
}
.DX4 {
width: 243px;
height: 449px;
background-size: cover;
mix-blend-mode: screen;
position: absolute;
left: 0px;
bottom: 0px;
}
.iframeExitIcon { .iframeExitIcon {
position: absolute; position: absolute;
top: 0; top: 0;
......
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