|
@@ -5,6 +5,9 @@ import { useRef, useState } from "react";
|
|
|
import TitleImg1 from "./images/tab2@2x-min.png";
|
|
|
import TitleImg2 from "./images/tab1@2x-min.png";
|
|
|
import TitleImg3 from "./images/tab3@2x-min.png";
|
|
|
+import LabelImg1 from "./images/Group35@2x-min.png";
|
|
|
+import LabelImg2 from "./images/Group37@2x-min.png";
|
|
|
+import LabelImg3 from "./images/Group36@2x-min.png";
|
|
|
import LogoImg from "./images/LOGO@2x-min.png";
|
|
|
import FootPageImg from "./images/Group23@2x-min.png";
|
|
|
import baseStore from "../../store/base";
|
|
@@ -14,14 +17,24 @@ import { VideoWrap } from "../Video";
|
|
|
import { AtIcon } from "taro-ui";
|
|
|
import "./index.scss";
|
|
|
|
|
|
-const IMAGES = [
|
|
|
- "https://houseoss.4dkankan.com/project/wx-csbwg-public/images/pic-or%402x-min.jpg",
|
|
|
- "https://houseoss.4dkankan.com/project/wx-csbwg-public/images/pic-or-2%402x-min.jpg",
|
|
|
- "https://houseoss.4dkankan.com/project/wx-csbwg-public/images/pic-or-3%402x-min.jpg",
|
|
|
+const LIST = [
|
|
|
+ {
|
|
|
+ title: TitleImg1,
|
|
|
+ img: "https://houseoss.4dkankan.com/project/wx-csbwg-public/images/pic-or-2%402x-min.jpg",
|
|
|
+ label: LabelImg1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: TitleImg2,
|
|
|
+ img: "https://houseoss.4dkankan.com/project/wx-csbwg-public/images/pic-or%402x-min.jpg",
|
|
|
+ label: LabelImg2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: TitleImg3,
|
|
|
+ img: "https://houseoss.4dkankan.com/project/wx-csbwg-public/images/pic-or-3%402x-min.jpg",
|
|
|
+ label: LabelImg3,
|
|
|
+ },
|
|
|
];
|
|
|
|
|
|
-const TITLE_IMAGES = [TitleImg2, TitleImg1, TitleImg3];
|
|
|
-
|
|
|
const system = Taro.getSystemInfoSync();
|
|
|
const getPX = (num: number) => num / (750 / system.windowWidth);
|
|
|
const swipeOffsetX = getPX(390);
|
|
@@ -60,13 +73,13 @@ export const PageSwiper: FC = () => {
|
|
|
|
|
|
switch (idx) {
|
|
|
case 0:
|
|
|
- setXSZCVideoVisible(true);
|
|
|
- break;
|
|
|
- case 1:
|
|
|
Taro.navigateTo({
|
|
|
url: "/pages/home/index",
|
|
|
});
|
|
|
break;
|
|
|
+ case 1:
|
|
|
+ setXSZCVideoVisible(true);
|
|
|
+ break;
|
|
|
case 2:
|
|
|
setBWGVideoVisible(true);
|
|
|
break;
|
|
@@ -90,6 +103,10 @@ export const PageSwiper: FC = () => {
|
|
|
"/subModule/pages/iframe/index?url=" +
|
|
|
encodeURIComponent(getSceneUrl()),
|
|
|
});
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ setXSZCVideoVisible(false);
|
|
|
+ }, 1000);
|
|
|
};
|
|
|
|
|
|
const handleBgLoaded = () => {
|
|
@@ -115,7 +132,7 @@ export const PageSwiper: FC = () => {
|
|
|
|
|
|
<Image
|
|
|
className="page-swiper__title"
|
|
|
- src={TITLE_IMAGES[active]}
|
|
|
+ src={LIST[active].title}
|
|
|
mode="heightFix"
|
|
|
/>
|
|
|
|
|
@@ -137,7 +154,7 @@ export const PageSwiper: FC = () => {
|
|
|
setBgRotateY([...ROTATEY_MAP[current]]);
|
|
|
}}
|
|
|
>
|
|
|
- {IMAGES.map((url, idx) => {
|
|
|
+ {LIST.map((item, idx) => {
|
|
|
const isActive = active === idx;
|
|
|
const bgPosition = moving.current
|
|
|
? Math.min(Math.max(bgPos[idx] - moveX * damping, 0), 100)
|
|
@@ -160,10 +177,21 @@ export const PageSwiper: FC = () => {
|
|
|
}}
|
|
|
onClick={handleClick.bind(undefined, idx)}
|
|
|
>
|
|
|
+ {!isActive && (
|
|
|
+ <Image
|
|
|
+ className="banner-item__label"
|
|
|
+ src={item.label}
|
|
|
+ mode="widthFix"
|
|
|
+ style={{
|
|
|
+ right: idx <= active ? 0 : "unset",
|
|
|
+ left: idx > active ? 0 : "unset",
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ )}
|
|
|
<View
|
|
|
className="banner-item__img"
|
|
|
style={{
|
|
|
- backgroundImage: `url(${url})`,
|
|
|
+ backgroundImage: `url(${item.img})`,
|
|
|
backgroundPosition: `${bgPosition}%`,
|
|
|
}}
|
|
|
></View>
|
|
@@ -180,7 +208,7 @@ export const PageSwiper: FC = () => {
|
|
|
mode="heightFix"
|
|
|
/>
|
|
|
<View className="page-swiper-footer__text">
|
|
|
- 让我们一起创造温暖,传递心
|
|
|
+ 让慈善之光照进心灵,照亮生活,照耀社会
|
|
|
</View>
|
|
|
<Image
|
|
|
className="page-swiper-footer__tips"
|
|
@@ -218,10 +246,7 @@ export const PageSwiper: FC = () => {
|
|
|
controls={false}
|
|
|
objectFit="cover"
|
|
|
src="https://houseoss.4dkankan.com/project/wx-csbwg-public/videos/xszc.mp4"
|
|
|
- onEnded={() => {
|
|
|
- goUnityPage();
|
|
|
- setXSZCVideoVisible(false);
|
|
|
- }}
|
|
|
+ onEnded={goUnityPage}
|
|
|
/>
|
|
|
)}
|
|
|
|
|
@@ -235,7 +260,9 @@ export const PageSwiper: FC = () => {
|
|
|
Taro.navigateTo({
|
|
|
url: "/subModule/pages/museum/index",
|
|
|
});
|
|
|
- setBWGVideoVisible(false);
|
|
|
+ setTimeout(() => {
|
|
|
+ setBWGVideoVisible(false);
|
|
|
+ }, 1000);
|
|
|
}}
|
|
|
/>
|
|
|
)}
|