master

分支 (1)

管理

管理

master

trend
/
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="icon" type="image/png" sizes="32x32" href="./img/logo.png">
		<link rel="icon" type="image/png" sizes="16x16" href="./img/logo.png">
		<title>科技潮流官网</title>
		<!-- 引入外部样式 -->
		<link rel="stylesheet" href="css/home.css">
	</head>
	<body>
		<!-- 内容区域 -->
		<div id="home">
			<!--标题 -->
			<div id ="header">
				<span id="ttf1">Technological Trends</span>
				<!-- <span id="ttf2">Technological trends</span> -->
			</div>
			<!--导航 -->
			<div id="nav">
				<ul class="daohang">
					<li id="ttf3"><a href="#">科技潮流</a></li>
					<li ><a onclick="showPage('main')" >首页</a></li>
					<li ><a href="#">热点</a>
						<ul class="chuizhi">
							<li ><a class="daohang2" onclick="showPage('phone')">手机</a></li>
							<li ><a class="daohang2" href="#">电脑</a></li>
							<li ><a class="daohang2" onclick="showPage('ceping')">测评</a></li>
							<li ><a class="daohang2" onclick="showPage('harmony')">鸿蒙</a></li>
						</ul>
					</li>
					<li ><a onclick="showPage('about')" >关于</a></li>
					<li ><a href="#">登录</a>
						<ul class="chuizhi">
							<li ><a class="daohang2" a href="#" onclick="openLoginPopup()">登录账号</a></li>
							<li ><a class="daohang2"class="daohang2"href="#">注册账号</a></li>
						</ul>
					</li>
				</ul>
			</div>

			<div id="main"  class="page current">
				<div id="lunbotu">
					<!-- 轮播图 -->
					<div class="banner-container">
							<!-- 创建图片存储容器 -->
							<div class="banner-img-container">
								<img src="./img/12.png" alt="">
								<img src="./img/1harmony.png" alt="">
								<img src="./img/computer.png" alt="">
								<img src="./img/iphone4.jpg" alt="">
								<img src="./img/xiaomi06.jpg" alt="">
							</div>
					</div>
				</div>
				<div id="main02">
					<div id="mainleft">
						<div class="mainleft">
							<!-- 第一条 -->
							<div class="messbox">
								<div class="mainleft01">
									<img class="mainleftimg" src="center/center001.png"/>
								</div>
								<div class="mainleft02">
									<div class="mainleft03">
										<a class="title" href="https://mp.weixin.qq.com/s/GWmYpLuE9tUFnQ6WK1P6TQ" >轻松掌握Markdown，让你的排版不再困扰（一）</a>
										<p class="message">欢迎来到Markdown的神奇世界！Markdown是一种轻量级标记语言，它能够帮助你用简单的语法实现美观的排版效果。 Markdown不需要你花费数小时学习，只需要掌握几个基本的语法规则，你就能够在写作的同时轻松实现排版。下面就让我来为你介绍一下Markdown的使用教程吧！</p>
									</div>
								</div>
							</div>
							<!-- 第二条 -->
							<div class="messbox">
								<div class="mainleft01">
									<img class="mainleftimg" src="center/center002.png"/>
								</div>
								<div class="mainleft02">
									<div class="mainleft03">
										<a class="title" href="https://mp.weixin.qq.com/s/gFs20N3LyNUOMCMknknW5Q" >使用【Proteus 8 Professional】和【Keil uVision5】完成点灯操作</a>
										<p class="message">欢迎来到Markdown的神奇世界！Markdown是一种轻量级标记语言，它能够帮助你用简单的语法实现美观的排版效果。 Markdown不需要你花费数小时学习，只需要掌握几个基本的语法规则，你就能够在写作的同时轻松实现排版。下面就让我来为你介绍一下Markdown的使用教程吧！</p>
									</div>
								</div>
							</div>
							<!-- 第三条 -->
							<div class="messbox">
								<div class="mainleft01">
									<img class="mainleftimg" src="center/center003.png"/>
								</div>
								<div class="mainleft02">
									<div class="mainleft03">
										<a class="title" href="https://mp.weixin.qq.com/s/oSEf8an7FIRsg3KuZ46fWw" >Android安装Debian可以做什么</a>
										<p class="message">早在几年前，我就在手机上安装了Debian、Ubuntu、Centos等Linux发行版，随后在Linux中部署了青龙面板，执行一些定时任务，比如京东的京豆获取、网易云自动签到等。</p>
									</div>
								</div>
							</div>
							<!-- 第四条 -->
							<div class="messbox">
								<div class="mainleft01">
									<img class="mainleftimg" src="center/center004.png"/>
								</div>
								<div class="mainleft02">
									<div class="mainleft03">
										<a class="title" href="https://mp.weixin.qq.com/s/KoGJIubsBDqtBu9y7S14iw" >ChatGPT：超级学长，你值得拥有！！！</a>
										<p class="message">ChatGPT是什么？ChatGPT是由开放人工智能（OpenAI）开发的一款自然语言处理模型。无论您是在寻找解答，查找相关问题的答案，还是需要一个对话交流的伴侣，ChatGPT都是您的最佳选择。</p>
									</div>
								</div>
							</div>
							<!-- 第五条 -->
							<div class="messbox">
								<div class="mainleft01">
									<img class="mainleftimg" src="center/center005.png"/>
								</div>
								<div class="mainleft02">
									<div class="mainleft03">
										<a class="title" href="https://mp.weixin.qq.com/s/oOTf_MyM1h34Edl27A3oyw" >刷题无门？代码无家？LeetCode携手Gitee来了！</a>
										<p class="message">一个神奇的地方，让人们迷失在算法和数据结构的迷宫中。在这里，你可以体验到人生中最有趣的挑战，比如让你解决从天而降的算法难题，还可以跟全球的LeetCoders来一场精彩刺激的切比试磋。</p>
									</div>
								</div>
							</div>
							<!-- 第n条 -->
							<div class="messbox">
								<div class="mainleft01">
									<img class="mainleftimg" src="img/logo.png"/>
								</div>
								<div class="mainleft02">
									<div class="mainleft03">
										<a class="title" href="https://baidu.com" >示例标题</a>
										<p class="message">基本介绍</p>
									</div>
								</div>
							</div>
							<!-- 第n条 -->
							<div class="messbox">
								<div class="mainleft01">
									<img class="mainleftimg" src="img/logo.png"/>
								</div>
								<div class="mainleft02">
									<div class="mainleft03">
										<a class="title" href="https://baidu.com" >示例标题</a>
										<p class="message">基本介绍</p>
									</div>
								</div>
							</div>
							<!-- 第n条 -->
							<div class="messbox">
								<div class="mainleft01">
									<img class="mainleftimg" src="img/logo.png"/>
								</div>
								<div class="mainleft02">
									<div class="mainleft03">
										<a class="title" href="https://baidu.com" >示例标题</a>
										<p class="message">基本介绍</p>
									</div>
								</div>
							</div>
							<!-- 第n条 -->
							<div class="messbox">
								<div class="mainleft01">
									<img class="mainleftimg" src="img/logo.png"/>
								</div>
								<div class="mainleft02">
									<div class="mainleft03">
										<a class="title" href="https://baidu.com" >示例标题</a>
										<p class="message">基本介绍</p>
									</div>
								</div>
							</div>
							<!-- 第n条 -->
							<div class="messbox">
								<div class="mainleft01">
									<img class="mainleftimg" src="img/logo.png"/>
								</div>
								<div class="mainleft02">
									<div class="mainleft03">
										<a class="title" href="https://baidu.com" >示例标题</a>
										<p class="message">基本介绍</p>
									</div>
								</div>
							</div>
							<!-- 第n条 -->
							<div class="messbox">
								<div class="mainleft01">
									<img class="mainleftimg" src="img/logo.png"/>
								</div>
								<div class="mainleft02">
									<div class="mainleft03">
										<a class="title" href="https://baidu.com" >示例标题</a>
										<p class="message">基本介绍</p>
									</div>
								</div>
							</div>
							<!-- 第n条 -->
							<div class="messbox">
								<div class="mainleft01">
									<img class="mainleftimg" src="img/logo.png"/>
								</div>
								<div class="mainleft02">
									<div class="mainleft03">
										<a class="title" href="https://baidu.com" >示例标题</a>
										<p class="message">基本介绍</p>
									</div>
								</div>
							</div>
							<!-- 第n条 -->
							<div class="messbox">
								<div class="mainleft01">
									<img class="mainleftimg" src="img/logo.png"/>
								</div>
								<div class="mainleft02">
									<div class="mainleft03">
										<a class="title" href="https://baidu.com" >示例标题</a>
										<p class="message">基本介绍</p>
									</div>
								</div>
							</div>
							<!-- 第n条 -->
							<div class="messbox">
								<div class="mainleft01">
									<img class="mainleftimg" src="img/logo.png"/>
								</div>
								<div class="mainleft02">
									<div class="mainleft03">
										<a class="title" href="https://baidu.com" >示例标题</a>
										<p class="message">基本介绍</p>
									</div>
								</div>
							</div>
							<!-- 第n条 -->
							<div class="messbox">
								<div class="mainleft01">
									<img class="mainleftimg" src="img/logo.png"/>
								</div>
								<div class="mainleft02">
									<div class="mainleft03">
										<a class="title" href="https://baidu.com" >示例标题</a>
										<p class="message">基本介绍</p>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div id="mainright">
						<!-- <span>IT资讯</span> -->
						<span id="itfont">Technological</span><span ><b>资讯</b></span>
						<span class="news">2024 北京国际汽车展览会专题</span>

						    <span class="news">广汽首个海外 CKD（全散件组装）工厂竣工量产：位于马来西亚，首批车型为 GS3 影速</span>
						    <span class="news">海盗船 CORSAIR ONE i500 紧凑游戏整机配置“抢跑”：RTX 4080 Super + 液冷散热</span>
						    <span class="news">Dynabook 推出新款 Satellite Pro C 系列笔记本：酷睿处理器，730.99 美元起</span>
						    <span class="news">继印尼之后，微软宣布将在马来西亚投资 22 亿美元用于云计算和 AI</span>
						    <span class="news">海盗船推出 RS MAX 系列散热风扇：玻纤增强 LCP 扇叶，34.99 美元起</span>
						    <span class="news">门店约 400 元：361° 运动鞋 / 板鞋等 89 元官方断码清仓（赠运费险）</span>
						    <span class="news">“新时代来临”，出门问问预热新款 TicWatch 智能手表</span>
						    <span class="news">极星 Polestar Phone 手机成功刷入魅族 Flyme 系统，功能运行正常</span>
						    <span class="news">国产文字冒险游戏《饿殍：明末千里行》首周销量近十万，好评率 94%</span>
						    <span class="news">一汽丰田交付汽车 56536 辆，含 6647 辆 bZ3 纯电轿车</span>
						    <span class="news">PCI-SIG 发布 CopperLink 线缆规范：适用于 PCIe 5.0 及 6.0 标准</span>
						    <span class="news">AMD R7 8700F / R5 8400F 处理器上架亚马逊：5 月 14 日发售，零售价 299.99/189.99 美元</span>
						    <span class="news">集成 ChatGPT，Nothing Phone（2a）手机获最新版本系统 OTA 更新</span>
					</div>
				</div>
				<!-- 底部 -->
				<div id="footer" >
				</div>
				<script src="js/load-footer.js"></script>
			</div>

			<div class="login-popup" id="loginPopup">
				<span class="close-button" onclick="closeLoginPopup()">×</span>
			  <div id="denglu">
				  <span id="itfont">Technological Trends</span>
				  <!-- <span id="denglufont"><b>登录</b></span> -->
			  </div>
			  <div id="loginmain">
				<div id="loginmain01">
					<input type="text" id="username" placeholder="用户名">
					<input type="password" id="password" placeholder="密码">
					<button onclick="login()">登录</button>
				</div>
				<div>
					<img src="img/wechat.jpg" alt="QR Code" width="150">
				</div>
			  </div>
			</div>

			<!-- 关于 -->
			<div id="about" class="page">

			</div>
			<script src="js/load-about.js"></script>

			<!-- harmony界面 -->
			<div id="harmony" class="page">
				<script>
				// load-harmony.js加载harmony样式
				document.addEventListener("DOMContentLoaded", function() {
				    fetch('harmony.html')
				        .then(response => response.text())
				        .then(data => {
				            document.getElementById('harmony').innerHTML = data;
				        })
				        .catch(error => console.error('Error loading harmony:', error));
				});
				</script>
			</div>

			<div id="ceping" class="page">
				<div id="bili">
					<div id="bilivideo">
						<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=906849926&bvid=BV1EM4y1S7gD&cid=1006319733&p=1"  border-radius="10px" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="600px" height="450px"  ></iframe>
						<div id="bilivideo_introduce">
							<p class="video-introduction">小米平板5刷win11日用体验报告
							日常使用毫无压力，开启多个后台仍然可以流畅运行，在打开应用时会出现cpu跑满的情况，打开后恢复正常。微信 QQ wps 网易云音乐 浏览器可以同时运行，由于一些原因，原神pc版不能正常运行，有大佬可以尝试使用特殊操作运行，但大部分人是没办法的，云原神无压力</p>
						</div>
					</div>
					<div id="comments">
						<div class="user">
							<div >
								<img class="userimage" src="./img/user.png">
							</div>
							<div>
								<div  class="username" >
									<span >用户1</span >
								</div>
								<div class="usercomments">
									<p>
										怪不得开应用时会很卡，原来是CPU跑满了
									</p>
								</div>
							</div>
						</div>
						<div class="user">
							<div >
								<img class="userimage" src="./img/user.png">
							</div>
							<div>
								<div  class="username">
									<span>用户2</span>
								</div>
								<div class="usercomments">
									<p>
										win的续航如何？一直不关机的状态下
									</p>
								</div>
							</div>
						</div>
						<div class="user">
							<div >
								<img class="userimage" src="./img/user.png">
							</div>
							<div>
								<div  class="username">
									<span>用户3</span>
								</div>
								<div class="usercomments">
									<p>
										测个python 装个pycharm 或者vscode？
									</p>
								</div>
							</div>
						</div>
						<div class="user">
							<div >
								<img class="userimage" src="./img/user.png">
							</div>
							<div>
								<div  class="username">
									<span>用户4</span>
								</div>
								<div class="usercomments">
									<p>
										看着貌似没有显卡驱动[吃瓜]
									</p>
								</div>
							</div>
						</div>
						<div class="user">
							<div >
								<img class="userimage" src="./img/user.png">
							</div>
							<div>
								<div  class="username">
									<span>用户5</span>
								</div>
								<div class="usercomments">
									<p>
										如果uwp生态还在的话，平板的体验肯定会非常不错吧！毕竟配置要求不高。
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>


			<!-- 二级导航手机 -->
			<div id="phone" class="page">
				<div id="phone_box">
						<div id="phone_text">
							<h3 align="center">2024年主流的手机介绍</h3>
						</div>
						<div>
							<ul>
								<li><a href="#phone_hw">HUAWEI mate60[同页]</a></li>
								<li><a href="#phone_xm">Xiaomi 14 Ultra[同页]</a></li>
								<li><a href="#phone_ip">iPhone 15[同页]</a></li>
							</ul>
						</div>

						<h2 id="phone_biaoti"><a name="phone_hw">HUAWEI mate60</a></h2>
						<div id="phone_text_01">
							<p id="phone_title_01"><b><font size="4">
								一直是经典，一向有新意。<br>
								极致中轴对称，一脉相承。<br>
								同心设计，突破边界，探索美学新⁠生。</font></b>
							</p>
						</div>
						<h4 align="center"><a href="#phone_hw">查看HUAWEI mate60详情</a></h4>
						<h2 id="phone_biaoti"><a name="phone_xm">Xiaomi 14 Ultra</a></h2>
						<div id="phone_box_02">
							<div id="phone_xiaomiimg_01">
								<img id="phone_xiaomiimg_01_1" src="./img/xiaomi06.jpg"/img/xiaomi14.jpg"/>
							</div>
							<div id="phone_text_02">
								<p align="center" ><b><font size="4">新一代专业影像旗舰<br>以光为始，不断向前探索时代审美<br>融合先进技术，让移动影像进入全新层次<br></font></b></p>
								<p align="center"><font size="2">更有强大科技力加持，实力全维跃升，体验更进一步<br>全等深微曲屏，小米龙铠架构，双向卫星通信<br>给你非同一般的Ultra级感受</font></p>

							</div>
							<div id="phone_xiaomiimg_02">
								<div id="phone_xiaomiimg_02_1">
									<img id="phone_img_04" src="./img/xiaomi01.png"/>
									<img id="phone_img_04" src="img/xiaomi02.png"/>
								</div>
								<div id="phone_xiaomiimg_02_2">
									<img id="phone_img_04" src="img/xiaomi8.png"/>
								</div>

							</div>
						</div>
						<h4 align="center"><a href="#phone_xm">查看Xiaomi 14 Ultra详情</a></h4>

						<h2 id="phone_biaoti"><a name="phone_ip">iPhone 15</a></h2>
						<div id="phone_box_03">
							<div>
								<img id="img_03" src="img/iphone4.jpg"/>
							</div>
							<div id="phone_text_03">
								<p id="phone_text_03_1"><b>灵动岛，<br>有事立马来冒泡。</b></p>
								<p id="phone_text_03_2">灵动岛会<a id="text_03_21"><b>以醒目方式弹出提醒和实时活动</b></a>，让你忙起来也不会错过重要消息。<br>
								叫的车还有多久到，谁打电话来了，航班现在什么状态，都能一眼明了。</p>
								<img id="phone_img_02" src="./img/iphone3.png"/>
							</div>
						<h4 align="center"><a href="#phone_ip">查看iPhone 15详情</a></h4>
						</div>
					</div>
				</div>
			</div>
		</body>
		<script>
		let Head = document.getElementById('nav');
		let Right = document.getElementById('mainright');

		window.onscroll = () => {
			// 获取滚动距离
			let top = document.documentElement.scrollTop || document.body.scrollTop;
			if (top > 80) {
				Head.style.position = "fixed";
				Head.style.top = "0";
			} else {
				Head.style.position = "static";
			}

			// 控制右侧窗口的位置和大小
			if (top > 525) {
				Right.style.position = "fixed";
				Right.style.top = "50px"; // 与导航栏高度相同
				Right.style.left = "65%"; // 保持靠右
				Right.style.width = "26%"; // 设置宽度
			} else {
				Right.style.position = "static";
				Right.style.top = "525px";
			}
		}
		function showPage(pageId) {
					// 隐藏所有页面
					var pages = document.querySelectorAll('.page');
					pages.forEach(function(page) {
						page.classList.remove('current');
					});

					// 显示当前页面
					var currentPage = document.getElementById(pageId);
					currentPage.classList.add('current');
				}
		  function openLoginPopup() {
			document.getElementById("loginPopup").style.display = "block";
		  }

		  function closeLoginPopup() {
			document.getElementById("loginPopup").style.display = "none";
		  }

		//登录框
		function login() {
			 event.preventDefault(); // 阻止按钮的默认行为
			var username = document.getElementById("username").value;
			var password = document.getElementById("password").value;

			// 这里可以添加登录逻辑，比如向服务器发送请求进行验证
			if (username === "admin" && password === "123456") {
				alert("登录成功");
				  closeLoginPopup();
				setTimeout(function() {

				}, 3000); // 3秒后关闭登录界面
			} else {
				alert("登录失败");
			}
		}

		// // load-footer.js加载底部样式
		// document.addEventListener("DOMContentLoaded", function() {
		//     fetch('footer.html')
		//         .then(response => response.text())
		//         .then(data => {
		//             document.getElementById('footer').innerHTML = data;
		//         })
		//         .catch(error => console.error('Error loading footer:', error));
		// });

		// // load-about.js加载about样式
		// document.addEventListener("DOMContentLoaded", function() {
		//     fetch('about.html')
		//         .then(response => response.text())
		//         .then(data => {
		//             document.getElementById('about').innerHTML = data;
		//         })
		//         .catch(error => console.error('Error loading about:', error));
		// });

		//导航栏切换
		function showPage(pageId) {
		    // 隐藏所有页面
		    var pages = document.querySelectorAll('.page');
		    pages.forEach(function(page) {
		        page.classList.remove('current');
		    });

		    // 显示当前页面
		    var currentPage = document.getElementById(pageId);
		    currentPage.classList.add('current');
		}
		</script>
	</body>
</html>