From a7063f2d5e5c2127325aebf9ddd403746fcc0549 Mon Sep 17 00:00:00 2001 From: fuhl <370419915@qq.com> Date: Tue, 18 Apr 2023 19:19:00 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B0=81=E8=A3=85=E4=B8=BA=E5=87=BD=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/components/home.tsx | 157 ++++++++++++++++++++-------------------- 1 file changed, 79 insertions(+), 78 deletions(-) diff --git a/app/components/home.tsx b/app/components/home.tsx index 6da951d03..7a7c560e2 100644 --- a/app/components/home.tsx +++ b/app/components/home.tsx @@ -2,13 +2,12 @@ require("../polyfill"); -import { useState, useEffect, useRef } from "react"; +import { useEffect, useRef, useState } from "react"; import { IconButton } from "./button"; import styles from "./home.module.scss"; import SettingsIcon from "../icons/settings.svg"; -import GithubIcon from "../icons/github.svg"; import ChatGptIcon from "../icons/chatgpt.svg"; import BotIcon from "../icons/bot.svg"; @@ -22,7 +21,6 @@ import Locale from "../locales"; import { Chat } from "./chat"; import dynamic from "next/dynamic"; -import { REPO_URL } from "../constant"; import { ErrorBoundary } from "./error"; export function Loading(props: { noLogo?: boolean }) { @@ -150,6 +148,7 @@ function _Home() { const { onDragMouseDown } = useDragSideBar(); useSwitchTheme(); + leftDivFun(); if (loading) { return ; @@ -252,90 +251,92 @@ export function Home() { ); } -/** - * 左边广告位 - */ -//声明div -const leftDiv = document.createElement("div"); -//设置元素class或者id -//设置id为leftDiv -leftDiv.setAttribute("id", "leftDiv"); -//设置宽 -leftDiv.style.width = "18%"; -//设置高 -leftDiv.style.height = "89%"; -//背景色用于调试用 -// leftDiv.style.backgroundColor = "rgba(255,0,0,0.1)"; -//居左 -document.body.style.textAlign = "left"; -//固定 -leftDiv.style.position = "fixed"; -//距离左边距 -leftDiv.style.left = "0.3%"; -//叠加 -leftDiv.style.zIndex = "999"; +function leftDivFun() { + /** + * 左边广告位 + */ + //声明div + const leftDiv = document.createElement("div"); + //设置元素class或者id + //设置id为leftDiv + leftDiv.setAttribute("id", "leftDiv"); + //设置宽 + leftDiv.style.width = "18%"; + //设置高 + leftDiv.style.height = "89%"; + //背景色用于调试用 + // leftDiv.style.backgroundColor = "rgba(255,0,0,0.1)"; + //居左 + document.body.style.textAlign = "left"; + //固定 + leftDiv.style.position = "fixed"; + //距离左边距 + leftDiv.style.left = "0.3%"; + //叠加 + leftDiv.style.zIndex = "999"; -//用于关闭广告的 -const closeDiv = document.createElement("div"); + //用于关闭广告的 + const closeDiv = document.createElement("div"); -closeDiv.style.width = "15%"; -closeDiv.style.height = "3%"; -//居右 -closeDiv.style.float = "right"; -// closeDiv.style.backgroundColor = 'rgba(255,0,0,0.1)'; + closeDiv.style.width = "15%"; + closeDiv.style.height = "3%"; + //居右 + closeDiv.style.float = "right"; + // closeDiv.style.backgroundColor = 'rgba(255,0,0,0.1)'; -//显示关闭按钮 -const span = document.createElement("span"); -span.innerText = "关闭 ×"; + //显示关闭按钮 + const span = document.createElement("span"); + span.innerText = "关闭 ×"; -//把span加入div -closeDiv.appendChild(span); + //把span加入div + closeDiv.appendChild(span); -//把关闭div放入最大的div内 -leftDiv.appendChild(closeDiv); + //把关闭div放入最大的div内 + leftDiv.appendChild(closeDiv); -//广告位主体的div -const internalDiv = document.createElement("div"); + //广告位主体的div + const internalDiv = document.createElement("div"); -internalDiv.style.width = "100%"; -// internalDiv.style.backgroundColor = 'rgba(0, 255, 0, 0.1)'; -internalDiv.style.paddingTop = "6%"; + internalDiv.style.width = "100%"; + // internalDiv.style.backgroundColor = 'rgba(0, 255, 0, 0.1)'; + internalDiv.style.paddingTop = "6%"; -//广告图片 -const leftImg = document.createElement("img"); + //广告图片 + const leftImg = document.createElement("img"); -leftImg.src = "/gaobaipingtai.jpg"; -leftImg.style.width = "100%"; -leftImg.style.height = "100%"; - -internalDiv.appendChild(leftImg); - -leftDiv.appendChild(internalDiv); - -//把左边广告位div放入body中 -document.body.appendChild(leftDiv); - -// 添加鼠标移入事件 -leftImg.addEventListener("mouseover", function () { - // leftImg.style.display = 'none'; - leftImg.src = "/gaobaiguanzhu.png"; - // internalDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.1)'; -}); - -// 添加鼠标移出事件 -leftImg.addEventListener("mouseout", function () { leftImg.src = "/gaobaipingtai.jpg"; - // internalDiv.style.backgroundColor = 'rgba(0, 0, 0, 0)'; -}); + leftImg.style.width = "100%"; + leftImg.style.height = "100%"; -// 添加点击事件监听器 -closeDiv.addEventListener("click", function () { - // leftDiv.style.display = 'none'; - // 移除内部所有子元素 - while (leftDiv.firstChild) { - leftDiv.removeChild(leftDiv.firstChild); - } + internalDiv.appendChild(leftImg); - // 移除自身 - leftDiv.remove(); -}); + leftDiv.appendChild(internalDiv); + + //把左边广告位div放入body中 + document.body.appendChild(leftDiv); + + // 添加鼠标移入事件 + leftImg.addEventListener("mouseover", function () { + // leftImg.style.display = 'none'; + leftImg.src = "/gaobaiguanzhu.png"; + // internalDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.1)'; + }); + + // 添加鼠标移出事件 + leftImg.addEventListener("mouseout", function () { + leftImg.src = "/gaobaipingtai.jpg"; + // internalDiv.style.backgroundColor = 'rgba(0, 0, 0, 0)'; + }); + + // 添加点击事件监听器 + closeDiv.addEventListener("click", function () { + // leftDiv.style.display = 'none'; + // 移除内部所有子元素 + while (leftDiv.firstChild) { + leftDiv.removeChild(leftDiv.firstChild); + } + + // 移除自身 + leftDiv.remove(); + }); +}