style: --

src/app.config.ts

@@ -1,5 +1,5 @@
 export default defineAppConfig({
-  pages: ["pages/login/index", "pages/home/index", "pages/temp/index"],
+  pages: ["pages/home/index", "pages/temp/index"],
   subpackages: [
     {
       root: "subModule",

src/pages/home/components/Menu/index.tsx

@@ -7,7 +7,7 @@ import { observer } from "mobx-react";
 import { getSceneUrl } from "../../../../utils";
 import baseStore from "../../../../store/base";
 import CloseIcon from "../../../../images/icon_back_menu@2x.png";
-import SearchIcon from "../../../../images/icon_search_black@2x-min.png";
+// import SearchIcon from "../../../../images/icon_search_black@2x-min.png";
 
 import MapIcon from "../../../../images/icon_map_normal@2x-min.png";
 import ActMapIcon from "../../../../images/icon_map_active@2x-min.png";
@@ -33,7 +33,7 @@ export const Menu: FC<MenuProps> = observer((props) => {
         children: [
           {
             label: "全部遗存",
-            link: "",
+            method: props.openSearch,
           },
         ],
       },
@@ -110,11 +110,11 @@ export const Menu: FC<MenuProps> = observer((props) => {
         className="menu__close"
         onClick={() => props.onClose?.()}
       />
-      <Image
+      {/* <Image
         src={SearchIcon}
         className="menu__search"
         onClick={() => props.openSearch()}
-      />
+      /> */}
 
       <ScrollView scrollY style={{ height: "100%" }}>
         {LIST.map((item, idx) => {
@@ -151,12 +151,16 @@ export const Menu: FC<MenuProps> = observer((props) => {
                 <View
                   className="menu-item__sub"
                   onClick={() => {
-                    Taro.navigateTo({
-                      url:
-                        subItem.needAuth && !baseStore.isLogin
-                          ? "/pages/login/index"
-                          : subItem.link,
-                    });
+                    if (subItem.method) {
+                      subItem.method();
+                    } else {
+                      Taro.navigateTo({
+                        url:
+                          subItem.needAuth && !baseStore.isLogin
+                            ? "/pages/login/index"
+                            : subItem.link,
+                      });
+                    }
                   }}
                 >
                   {subItem.label}

src/pages/home/components/Swiper/index.tsx

@@ -10,6 +10,7 @@ import {
 } from "react";
 import { useInterval } from "../../../../hooks/useInterval";
 import "./index.scss";
+import { SORT_MAP_ID } from "../../constants";
 
 export interface SwiperProps {
   curSwiperItem: number;
@@ -148,6 +149,7 @@ export const Swiper = forwardRef<SwiperMethods, SwiperProps>(
         />
 
         {itemStack.map((id, idx) => {
+          const realId = SORT_MAP_ID[id + 1 > 25 ? 0 : id + 1];
           const show =
             [...nexts, ...prevs].includes(id) || id === curSwiperItem;
           const isActive = activeId === id;
@@ -156,7 +158,7 @@ export const Swiper = forwardRef<SwiperMethods, SwiperProps>(
             show && (
               <RoundItem
                 key={id}
-                id={id + 1}
+                id={realId}
                 angle={(360 / 12) * idx}
                 bigR={Big_R}
                 minR={MIN_R}

src/pages/home/components/VisitCard/index.scss

@@ -0,0 +1,96 @@
+.visit-card {
+  .at-curtain__container {
+    width: 646px;
+  }
+  .at-curtain__body {
+    padding: 0 75px 75px;
+    display: flex;
+    flex-direction: column;
+    height: 1174px;
+    box-sizing: border-box;
+    background: url("./pop_bg@2x-min.png") no-repeat center / contain;
+  }
+  // .at-curtain__btn-close {
+  //   display: none;
+  // }
+
+  &__title {
+    font-size: 38px;
+    color: #ffe794;
+    font-family: "Source Han Serif CN Heavy";
+    text-align: center;
+    height: 114px;
+    line-height: 134px;
+    text-align: center;
+  }
+  &__inner {
+    margin-top: 60px;
+    color: #a59e88;
+    font-size: 28px;
+    line-height: 46px;
+    flex: 1;
+    height: 0;
+
+    .first {
+      margin-bottom: 10px;
+    }
+    .right {
+      margin-top: 10px;
+      text-align: right;
+    }
+  }
+  &__bd {
+    margin: 48px 0;
+    width: 100%;
+  }
+  &__input {
+    display: flex;
+    gap: 10px;
+    height: 70px;
+
+    &__input {
+      flex: 1;
+      padding: 0 0 0 42px;
+      margin: 0;
+      border-radius: 50px;
+
+      .at-input__container {
+        height: 100%;
+      }
+      .at-input__input {
+        height: 100%;
+        font-size: 23px;
+        color: #424a4a;
+      }
+    }
+    &__visit {
+      min-width: 154px;
+      height: inherit;
+      line-height: 70px;
+      font-size: 23px;
+      color: #5a503c;
+      background: #e4d8a7;
+      border: none;
+    }
+  }
+  &__wechat {
+    margin-top: 23px;
+    width: 100%;
+    height: 80px;
+    color: white;
+    font-size: 23px;
+    border: 2px solid #e4d8a7;
+    background: #589498;
+    border-radius: 50px;
+
+    &__icon {
+      width: 57px;
+      height: 57px;
+    }
+    .at-button__text {
+      display: flex;
+      align-items: center;
+      gap: 24px;
+    }
+  }
+}

src/pages/home/components/VisitCard/index.tsx

@@ -0,0 +1,172 @@
+import { ScrollView, View, Image } from "@tarojs/components";
+import { FC } from "@tarojs/taro";
+import { AtButton, AtCurtain, AtInput } from "taro-ui";
+import { AtCurtainProps } from "taro-ui/types/curtain";
+import BorderImg from "./line@2x-min.png";
+import { useState } from "react";
+import {
+  createRandomString,
+  getSceneUrl,
+  NICKNAME_key,
+  onValidateField,
+  TOKEN_KEY,
+} from "../../../../utils";
+import WechatIcon from "../../../../images/icon_wechat@2x-min.png";
+import {
+  setUserInfoApi,
+  setVistorName,
+  validateNickName,
+  wechatLoginApi,
+} from "../../../../api";
+import baseStore from "../../../../store/base";
+import Taro from "@tarojs/taro";
+import "./index.scss";
+
+export interface VisitCardProps extends AtCurtainProps {}
+
+const formRules = {
+  name: [{ required: true, message: "请输入昵称" }],
+};
+
+export const VisitCard: FC<VisitCardProps> = (props) => {
+  const [loading, setLoading] = useState(false);
+  const [wechatLoading, setWechatLoading] = useState(false);
+  const [name, setName] = useState(`云城居民${createRandomString()}`);
+
+  const handleValidate = async () => {
+    const errors = await onValidateField(
+      {
+        name,
+      },
+      formRules
+    );
+    let valid = !errors || errors.filter((error) => error.message).length <= 0;
+
+    if (!valid) {
+      Taro.showToast({
+        icon: "none",
+        title: errors[0].message,
+      });
+      return false;
+    }
+
+    await validateNickName(name);
+
+    return true;
+  };
+
+  const handleUserInfo = async () => {
+    // console.log(e);
+    if (!(await handleValidate())) return;
+
+    Taro.login({
+      async success({ code }) {
+        try {
+          setWechatLoading(true);
+          Taro.showLoading({
+            title: "登陆中...",
+          });
+
+          const data = await wechatLoginApi(code);
+          Taro.setStorageSync(TOKEN_KEY, data.token);
+
+          await setUserInfoApi({
+            id: data.user.id,
+            nickName: name,
+          });
+
+          Taro.setStorageSync(NICKNAME_key, name);
+          baseStore.name = name;
+          baseStore.isLogin = true;
+          goHomePage();
+        } finally {
+          setWechatLoading(false);
+          Taro.hideLoading();
+        }
+      },
+    });
+  };
+
+  const handleVisitor = async () => {
+    try {
+      if (!(await handleValidate())) return;
+
+      setLoading(true);
+      Taro.showLoading({
+        title: "登陆中...",
+      });
+
+      await setVistorName(name);
+
+      Taro.setStorageSync(NICKNAME_key, name);
+      baseStore.name = name;
+      goHomePage();
+    } finally {
+      setLoading(false);
+      Taro.hideLoading();
+    }
+  };
+
+  const goHomePage = () => {
+    Taro.navigateTo({
+      url:
+        "/subModule/pages/iframe/index?url=" +
+        encodeURIComponent(getSceneUrl()),
+    });
+    // @ts-ignore
+    props.onClose();
+  };
+
+  return (
+    <AtCurtain {...props} className="visit-card">
+      <View className="visit-card__title">邀请函</View>
+
+      <ScrollView scrollY className="visit-card__inner">
+        <View className="first">致：</View>
+        <View>
+          在这座梦幻的游戏主城中，我们不仅追逐冒险和快乐，更致力于传递爱与温暖。每一次的探索，都是为了点亮他人的心灵，每一步的冒险，都是为了温暖他人的生活。我们欢迎你加入我们的行列，成为这座城市的一员，与我们一起行善，传递爱意。在这里，每一个人都是慈善的使者，每一次游戏都是一次美好的奉献。加入我们，让我们共同创造更美好的世界！
+        </View>
+        <View>期待你的加入！</View>
+        <View className="right">陶乐乐</View>
+      </ScrollView>
+
+      <Image className="visit-card__bd" src={BorderImg} mode="widthFix" />
+
+      <View className="visit-card__input">
+        {props.isOpened && (
+          <AtInput
+            value={name}
+            className="visit-card__input__input"
+            name="name"
+            maxLength={6}
+            // @ts-ignore
+            type="nickname"
+            placeholder="请输入6个字以内昵称"
+            onChange={(val) => {
+              setName(val as string);
+            }}
+          />
+        )}
+
+        <AtButton
+          className="visit-card__input__visit"
+          circle
+          loading={loading}
+          onClick={handleVisitor}
+        >
+          我是游客
+        </AtButton>
+      </View>
+
+      <AtButton
+        loading={wechatLoading}
+        className="visit-card__wechat"
+        openType="getUserInfo"
+        onGetUserInfo={handleUserInfo}
+      >
+        <Image className="visit-card__wechat__icon" src={WechatIcon} />
+        成为云城居民
+      </AtButton>
+    </AtCurtain>
+  );
+};

src/pages/home/index.scss

@@ -1,5 +1,6 @@
 .home {
   position: relative;
+  height: inherit;
 
   &-loading {
     position: fixed;
@@ -22,9 +23,20 @@
       z-index: -1;
     }
   }
+  &__cloud {
+    position: absolute;
+    left: -100%;
+    bottom: 0;
+    height: 148px;
+    animation: cloudMove linear 8s infinite;
+
+    &.cloud2 {
+      animation-delay: 4s;
+    }
+  }
   &-container {
     position: relative;
-    min-height: 100vh;
+    height: 100vh;
     overflow: hidden;
     background: linear-gradient(180deg, #99b6b4 0%, #fffaea 100%);
     z-index: 1;
@@ -37,10 +49,12 @@
     height: 76px;
     background: url("../../images/icon_menu@2x-min.png") no-repeat center /
       cover;
-    z-index: 2;
+    z-index: 9;
   }
   &__bg {
+    position: relative;
     width: 100%;
+    z-index: -1;
   }
   &__btm-bg {
     position: absolute;
@@ -56,19 +70,53 @@
     right: 0;
     bottom: 0;
     overflow: hidden;
+    z-index: 2;
 
     &__btn {
-      margin: 200px 0 0 50%;
+      position: absolute;
+      left: 50%;
+      bottom: 180px;
       width: 460px;
+      text-align: center;
+      font-size: 31px;
+      color: #589498;
+      font-family: "Source Han Serif CN-Bold";
       transform: translateX(-50%);
+      z-index: 9;
 
-      &__btn {
-        width: inherit;
+      .flashing {
+        animation: flashing linear 2s infinite;
+      }
+      .reflect {
+        position: absolute;
+        bottom: -4px;
+        left: 0;
+        right: 0;
+        transform: rotatex(180deg) translatey(15px);
+        transform-origin: 50% 100%;
+        mask: linear-gradient(
+          transparent 0%,
+          transparent 20%,
+          rgba(0, 0, 0, 0.5) 100%
+        );
+      }
+      &::before {
+        content: "";
+        position: absolute;
+        top: -38px;
+        left: 50%;
+        width: 664px;
+        height: 20px;
+        transform: translateX(-50%);
+        background: url("../../images/line@2x-min.png") no-repeat center /
+          contain;
       }
       &::after {
         content: "";
-        display: block;
-        margin: 0 auto;
+        position: absolute;
+        left: 50%;
+        bottom: -76px;
+        transform: translateX(-50%);
         width: 56px;
         height: 56px;
         background: url("../../images/img_slide@2x.png") no-repeat center /
@@ -110,14 +158,10 @@
     &__detail {
       position: absolute;
       left: 50%;
-      bottom: -78px;
-      width: 192px;
-      height: 68px;
-      line-height: 62px;
-      text-align: center;
-      color: #589498;
-      font-size: 24px;
-      background: url("../../images/btn_s_blue@2x-min.png") no-repeat center /
+      bottom: -108px;
+      width: 296px;
+      height: 88px;
+      background: url("../../images/btn_more@2x-min.png") no-repeat center /
         contain;
       transform: translateX(-50%);
     }
@@ -142,9 +186,9 @@
       width: 50px;
       height: 70px;
 
-      &.red::after {
-        background: #c59797;
-      }
+      // &.red::after {
+      //   background: #c59797;
+      // }
       &::after {
         content: "";
         position: absolute;
@@ -161,6 +205,22 @@
   }
 }
 
+.home2 {
+  position: relative;
+  height: 100vh;
+  overflow: hidden;
+  background: url("https://houseoss.4dkankan.com/project/wx-csbwg-public/images/bg_loading%402x-min.png")
+    no-repeat center / cover;
+
+  &__btn {
+    position: absolute;
+    left: 50%;
+    bottom: 150px;
+    width: 496px;
+    transform: translateX(-50%);
+  }
+}
+
 .ld-page {
   position: fixed;
   top: 0;
@@ -194,3 +254,21 @@
     transform: rotate(360deg);
   }
 }
+
+@keyframes flashing {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes cloudMove {
+  100% {
+    left: 100%;
+  }
+}

src/pages/home/index.tsx

@@ -1,5 +1,12 @@
 import { memo, useMemo, useRef, useState } from "react";
-import { Image, View, Text, Video } from "@tarojs/components";
+import {
+  Image,
+  View,
+  Text,
+  Video,
+  Swiper,
+  SwiperItem,
+} from "@tarojs/components";
 import classNames from "classnames";
 import Taro, {
   FC,
@@ -9,17 +16,20 @@ import Taro, {
   useDidShow,
 } from "@tarojs/taro";
 import { Menu } from "./components/Menu";
-import BtmBgImg from "../../images/img_map2@2x-min.png";
+import BtmBgImg from "../../images/img_city-min.png";
 import BgImg from "../../images/img_map@2x-min.jpg";
+import CloudImg from "../../images/img_cloud-min.png";
 import LeftIcon from "../../images/icon_blue_left@2x-min.png";
 import RightIcon from "../../images/icon_blue_right@2x-min.png";
 import ButtonImg from "../../images/btn_start@2x-min.png";
-import { Swiper, SwiperMethods } from "./components/Swiper";
+import { Swiper as SightSwiper, SwiperMethods } from "./components/Swiper";
 import { SearchLayout } from "./components/SearchLayout";
 import { SightDetailLayout } from "./components/SightDetailLayout";
-import { SIGHT_LIST } from "./constants";
-import { getSignListApi } from "../../api";
-import { getSceneUrl } from "../../utils";
+import { SIGHT_LIST, SORT_MAP_ID } from "./constants";
+import { checkLoginApi, getSignListApi } from "../../api";
+import { VisitCard } from "./components/VisitCard";
+import { getSceneUrl, NICKNAME_key, TOKEN_KEY } from "../../utils";
+import baseStore from "../../store/base";
 import "./index.scss";
 
 const PointIcon = memo(() => {
@@ -41,8 +51,16 @@ const PointIcon = memo(() => {
   );
 });
 
+const bgScale = Math.round(1558 / 778);
+const system = Taro.getSystemInfoSync();
+const imgHeight = bgScale * system.windowWidth;
+const offsetHeight =
+  imgHeight > system.screenHeight ? imgHeight - system.screenHeight : 0;
+
 const HomePage: FC = () => {
+  const [curSwiper, setCurSwiper] = useState(0);
   const [loaded, setLoaded] = useState(false);
+  const [visitVisible, setVisitVisible] = useState(false);
   const [hideLoading, setHideLoading] = useState(false);
   const [showMenu, setShowMenu] = useState(false);
   const [showSearch, setShowSearch] = useState(false);
@@ -50,11 +68,11 @@ const HomePage: FC = () => {
   const swiperRef = useRef<SwiperMethods>(null);
   const [curSwiperItem, setCurSwiperItem] = useState(10);
   const [item, setItem] = useState(
-    SIGHT_LIST.find((i) => i.id === curSwiperItem)
+    SIGHT_LIST.find((i) => i.id === SORT_MAP_ID[curSwiperItem])
   );
 
   const realItem = useMemo(
-    () => SIGHT_LIST.find((i) => i.id === curSwiperItem),
+    () => SIGHT_LIST.find((i) => i.id === SORT_MAP_ID[curSwiperItem]),
     [curSwiperItem]
   );
 
@@ -65,7 +83,7 @@ const HomePage: FC = () => {
 
   const handleDetail = async () => {
     swiperRef.current?.setIsRunning(false);
-    const target = SIGHT_LIST.find((i) => i.id === curSwiperItem);
+    const target = SIGHT_LIST.find((i) => i.id === SORT_MAP_ID[curSwiperItem]);
     const data = await getSignListApi({
       searchKey: target?.title,
       type: "scene",
@@ -76,12 +94,12 @@ const HomePage: FC = () => {
 
   const closeDetail = () => {
     setShowSight(false);
-    swiperRef.current?.setIsRunning(true);
+    curSwiper === 0 && swiperRef.current?.setIsRunning(true);
   };
 
   const closeMenu = () => {
     setShowMenu(false);
-    swiperRef.current?.setIsRunning(true);
+    curSwiper === 0 && swiperRef.current?.setIsRunning(true);
   };
 
   const handleLoaded = () => {
@@ -95,6 +113,29 @@ const HomePage: FC = () => {
     });
   };
 
+  const checkLogin = async () => {
+    try {
+      Taro.showLoading({
+        title: "登录中...",
+      });
+      const data = await checkLoginApi();
+
+      if (data) {
+        baseStore.isLogin = true;
+        Taro.navigateTo({
+          url:
+            "/subModule/pages/iframe/index?url=" +
+            encodeURIComponent(getSceneUrl()),
+        });
+      } else {
+        Taro.removeStorageSync(TOKEN_KEY);
+        Taro.removeStorageSync(NICKNAME_key);
+      }
+    } finally {
+      Taro.hideLoading();
+    }
+  };
+
   useDidShow(() => {
     loaded && swiperRef.current?.setIsRunning(true);
   });
@@ -104,124 +145,164 @@ const HomePage: FC = () => {
 
   return (
     <>
-      <View className="home-container">
-        {/* <View className={classNames("ld-page", { hide: loaded })}>
-        <AtIcon
-          className="ld-page__icon"
-          value="loading"
-          color="#589498"
-          size={40}
-        />
-      </View> */}
+      <View
+        className="home__menu-btn"
+        onClick={() => {
+          setShowMenu(true);
+          swiperRef.current?.setIsRunning(false);
+        }}
+      />
 
-        <View className="home">
-          <View
-            className="home__menu-btn"
-            onClick={() => {
-              setShowMenu(true);
-              swiperRef.current?.setIsRunning(false);
-            }}
-          />
+      <Menu show={showMenu} onClose={closeMenu} openSearch={openSearch} />
 
-          {realItem && (
+      <Swiper
+        vertical
+        current={curSwiper}
+        style={{ height: "100vh" }}
+        onChange={(v) => {
+          setCurSwiper(v.detail.current);
+          swiperRef.current?.setIsRunning(v.detail.current === 0);
+        }}
+      >
+        <SwiperItem className="home-container">
+          <View className="home">
             <View
-              className="home__point"
+              className="home-main"
               style={{
-                top: pxTransform(realItem.pos.y),
-                left: pxTransform(realItem.pos.x),
+                top: `${-offsetHeight}px`,
               }}
-            />
-          )}
+            >
+              {realItem && (
+                <View
+                  className="home__point"
+                  style={{
+                    top: pxTransform(realItem.pos.y),
+                    left: pxTransform(realItem.pos.x),
+                  }}
+                />
+              )}
 
-          <PointIcon />
+              <PointIcon />
 
-          <Menu show={showMenu} onClose={closeMenu} openSearch={openSearch} />
+              <SightSwiper
+                ref={swiperRef}
+                curSwiperItem={curSwiperItem}
+                setCurSwiperItem={setCurSwiperItem}
+              />
 
-          <View className="home-main">
-            <Swiper
-              ref={swiperRef}
-              curSwiperItem={curSwiperItem}
-              setCurSwiperItem={setCurSwiperItem}
-            />
+              <View className="home-toggle">
+                <Image
+                  className="home-toggle__icon"
+                  src={LeftIcon}
+                  onClick={() => swiperRef.current?.toPrev()}
+                />
 
-            <View className="home-toggle">
-              <Image
-                className="home-toggle__icon"
-                src={LeftIcon}
-                onClick={() => swiperRef.current?.toPrev()}
-              />
+                <View className="home-toggle-inner">
+                  <View className="home-toggle-label">
+                    <Text className="home-toggle-label__title limit-line">
+                      {realItem?.title}
+                    </Text>
+                    <Text>{realItem?.address}</Text>
+                  </View>
 
-              <View className="home-toggle-inner">
-                <View className="home-toggle-label">
-                  <Text className="home-toggle-label__title limit-line">
-                    {realItem?.title}
-                  </Text>
-                  <Text>{realItem?.address}</Text>
+                  <View
+                    className="home-toggle__detail"
+                    onClick={handleDetail}
+                  />
                 </View>
 
-                <View className="home-toggle__detail" onClick={handleDetail}>
-                  遗存详情
-                </View>
+                <Image
+                  className="home-toggle__icon"
+                  src={RightIcon}
+                  onClick={() => swiperRef.current?.toNext()}
+                />
               </View>
-
-              <Image
-                className="home-toggle__icon"
-                src={RightIcon}
-                onClick={() => swiperRef.current?.toNext()}
-              />
             </View>
 
-            <View className="home-main__btn">
-              <Image
-                mode="widthFix"
-                className="home-main__btn__btn"
-                src={ButtonImg}
-                onClick={() => {
-                  Taro.navigateTo({
-                    url:
-                      "/subModule/pages/iframe/index?url=" +
-                      encodeURIComponent(getSceneUrl()),
-                  });
-                }}
-              />
+            <View className="home-main__btn" onClick={() => setCurSwiper(1)}>
+              <View className="flashing">
+                <View>探索锡善云城</View>
+                <View className="reflect">探索锡善云城</View>
+              </View>
             </View>
+
+            <Image
+              className="home__bg"
+              src={BgImg}
+              mode="widthFix"
+              style={{
+                top: `${-offsetHeight}px`,
+              }}
+            />
+            <Image className="home__btm-bg" src={BtmBgImg} mode="widthFix" />
+            <Image
+              className="home__cloud cloud1"
+              src={CloudImg}
+              mode="heightFix"
+            />
+            <Image
+              className="home__cloud cloud2"
+              src={CloudImg}
+              mode="heightFix"
+            />
           </View>
+        </SwiperItem>
 
-          <Image className="home__bg" src={BgImg} mode="widthFix" />
-          <Image className="home__btm-bg" src={BtmBgImg} mode="widthFix" />
-        </View>
-
-        <SearchLayout
-          isOpened={showSearch}
-          onClose={() => setShowSearch(false)}
-          openDetail={(item) => {
-            swiperRef.current?.setIsRunning(false);
-            setItem(item);
-            setShowSight(true);
-          }}
-        />
+        <SwiperItem className="home2">
+          <Image
+            className="home2__btn"
+            src={ButtonImg}
+            mode="widthFix"
+            onClick={() => {
+              const token = Taro.getStorageSync(TOKEN_KEY);
 
-        {item && (
-          <SightDetailLayout
-            item={item}
-            isOpened={showSight}
-            onClose={closeDetail}
+              if (token) {
+                checkLogin();
+              } else {
+                setVisitVisible(true);
+              }
+            }}
           />
-        )}
-      </View>
-
-      <Video
-        className={classNames("home-loading", {
-          hide: loaded,
-          close: hideLoading,
-        })}
-        src="https://houseoss.4dkankan.com/project/wx-csbwg-public/videos/loading.mp4"
-        autoplay
-        muted
-        controls={false}
-        objectFit="cover"
-        onEnded={handleLoaded}
-        onError={handleLoaded}
+        </SwiperItem>
+      </Swiper>
+
+      {!loaded && (
+        <Video
+          className={classNames("home-loading", {
+            hide: loaded,
+            close: hideLoading,
+          })}
+          src="https://houseoss.4dkankan.com/project/wx-csbwg-public/videos/loading.mp4"
+          autoplay
+          muted
+          controls={false}
+          objectFit="cover"
+          onEnded={handleLoaded}
+          onError={handleLoaded}
+        />
+      )}
+
+      <SearchLayout
+        isOpened={showSearch}
+        onClose={() => setShowSearch(false)}
+        openDetail={(item) => {
+          swiperRef.current?.setIsRunning(false);
+          setItem(item);
+          setShowSight(true);
+        }}
+      />
+
+      {item && (
+        <SightDetailLayout
+          item={item}
+          isOpened={showSight}
+          onClose={closeDetail}
+        />
+      )}
+
+      <VisitCard
+        isOpened={visitVisible}
+        onClose={() => setVisitVisible(false)}
       />
     </>
   );

src/utils/index.ts

@@ -8,7 +8,7 @@ export const getSceneUrl = (scene?: number) => {
   const name = getStorageSync(NICKNAME_key);
   const token = getStorageSync(TOKEN_KEY);
 
-  return `http://app.4dage.com/projects/wxcs/web/index.html?platform=wx&name=${name}&token=${token}${
+  return `https://app.4dage.com/projects/wxcs/web/index.html?platform=wx&name=${name}&token=${token}${
     typeof scene === "number" ? `&scene=${scene}` : ""
   }`;
 };