【web前端期末大作业】基于HTML+CSS+JavaScript实现代理商销售管理系统后台(8页)

news2025/1/11 20:40:38

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

📂文章目录

  • 一、👨‍🎓网站题目
  • 二、✍️网站描述
  • 三、📚网站介绍
  • 四、💠网站演示
  • 五、⚙️ 网站代码
    • 🧱HTML结构代码
    • 💒CSS样式代码
  • 六、🥇 如何让学习不再盲目
  • 七、🎁更多干货

一、👨‍🎓网站题目

🧑‍🎓 学生管理系统网页设计 、OA管理系统、后台管理模板、智能停车系统、等网站的设计与制作。

二、✍️网站描述

🏷️HTML网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
  2. 所有页面相互超链接，可到二三级页面，有多页面组成。
  3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
  4. 菜单美观、醒目，二级菜单可正常弹出与跳转。
  5. 可选有JS特效，如定时切换和手动切换图片轮播。
  6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
  7. 页面清爽、美观、大方，不雷同。 。
  8. 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

四、💠网站演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

五、⚙️ 网站代码

🧱HTML结构代码



<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <!-- Google Chrome Frame也可以让IE用上Chrome的引擎: -->
    <meta name="renderer" content="webkit">
    <!--国产浏览器高速模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 定义页面的最新版本 -->
    <meta name="description" content="网站简介"/>
    <!-- 网站简介 -->
    <meta name="keywords" content="搜索关键字，以半角英文逗号隔开"/>
    <title>穷在闹市</title>


    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/frame_sys.css">
    <link rel="stylesheet" type="text/css" href="css/iconfont.css">
    <script type="text/javascript" src="framework/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/frame.js"></script>
    <!--分页插件-->
    <link rel="stylesheet" type="text/css" href="css/jquery.page.css">
    <script type="text/javascript" src="framework/jquery.page.js"></script>

    <!--自定义滚动条-->
    <script type="text/javascript" src="framework/jquery-ui-1.10.4.min.js"></script>
    <script type="text/javascript" src="framework/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="framework/jquery.mCustomScrollbar.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css">


</head>
<body>

<div class="top">
    <p>穷在闹市</p>
    <div>
	    <span>
	    	<a class="a1" href="javascript:void(0)"><img src="images/system.png"/><font>cc</font></a>
	    	<ul style="display: none;">
	    		<li><a href="javascript:menu_ajax('tgls/agent/agent_list.html', '个人中心')"><i class="iconfont icon-yonghu1"></i>个人中心</a></li>
	    		<li><a href="javascript:menu_ajax('tgls/agent/agent_list.html', '修改密码')"><i class="iconfont icon-xiugaimima"></i>修改密码</a></li>
	    		<li><a href=""><i class="iconfont icon-zhuxiaologout11"></i>退出登录</a></li>
	    	</ul>
	    </span>
    </div>
</div>

<div class="main">

    <div class="menu">
    	<div class="user">
    		<img src="images/system.png"/>
    		<div>
    			<h1>cc</h1>
    			<span>
	    			<i class="yd"></i>在线
	    			<a href=""><i class="iconfont icon-zhuxiaologout11"></i><font>注销</font></a>
    			</span>
    		</div>
    	</div>
        <div class="menuList">
            <ul class="menu1">
                <li class="menuli1">
                    <a class="menua1" href="javascript:menu_ajax('tgls/index.html', '后台主页')"><i class="iconfont icon-shouye left"></i>
                        <p>后台主页</p></a>
                </li>
                <li class="menuli1">
                    <a class="menua1" href="javascript:void(0)"><i class="iconfont icon-wodeyewuyuan left"></i>
                        <p>代理商管理</p><i
                                class="iconfont icon-jiantou_zuo right"></i></a>
                    <ul class="menu2">
                        <li class="menuli2"><a class="menua2" href="javascript:menu_ajax('tgls/agent/agent_list.html', '代理商管理,代理商列表')"><i
                                class="menua2_ico"><span></span></i>代理商列表</a></li>
                        <li class="menuli2"><a class="menua2" href="javascript:menu_ajax('tgls/agent/agent_add.html', '代理商管理,添加代理商')"><i
                                class="menua2_ico"><span></span></i>添加代理商</a></li>
                    </ul>
                </li>
                <li class="menuli1">
                    <a class="menua1" href="javascript:void(0)"><i class="iconfont icon-shangpin left"></i>
                        <p>商品管理</p><i
                                class="iconfont icon-jiantou_zuo right"></i></a>
                    <ul class="menu2">
                        <li class="menuli2"><a class="menua2" href="javascript:menu_ajax('tgls/agent/agent_list.html', '商品管理,基本商品库')"><i
                                class="menua2_ico"><span></span></i>基本商品库</a></li>
                        <li class="menuli2"><a class="menua2" href="javascript:menu_ajax('tgls/agent/agent_add.html', '商品管理,添加商品')"><i
                                class="menua2_ico"><span></span></i>添加商品</a></li>
                    </ul>
                </li>
                <li class="menuli1">
                    <a class="menua1" href="javascript:menu_ajax('tgls/reportForm/reportForm1.html', '统计报表')"><i class="iconfont icon-icon left"></i>
                        <p>统计报表</p></a>
                </li>
                <li class="menuli1">
                    <a class="menua1" href="javascript:menu_ajax('tgls/customer_card.html', '用户和权限管理')"><i class="iconfont icon-yingyongzhongxin left"></i>
                        <p>用户和权限管理</p></a>
                </li>
                <li class="menuli1">
                    <a class="menua1" href="javascript:menu_ajax('tgls/customer_card.html', '知识管理')"><i class="iconfont icon-zhishi left"></i>
                        <p>知识管理</p></a>
                </li>
            </ul>
        </div>
    </div>

    <div class="main_body">
        <div class="main_body_title"><font>后台主页</font></div>
        <div class="main_body_con">
        	<iframe id="mainIframe" src="tgls/index.html" scrolling="no"></iframe>
        </div>
		<div class="copyright">
		    Copyright©2011-2018 穷在闹市
		</div>
    </div>

</div>



<script>
    $(".menu").mCustomScrollbar({
        scrollButtons:{
            enable:false,
            scrollType:"continuous",
            scrollSpeed:20,
            scrollAmount:40
        },
        horizontalScroll:false
    });
    $(".main_body_con").mCustomScrollbar({
        scrollButtons:{
            enable:false,
            scrollType:"continuous",
            scrollSpeed:20,
            scrollAmount:40
        },
        horizontalScroll:false
    });
</script>
</body>
</html>

💒CSS样式代码

@charset "utf-8";
/* 公共样式 更多精品模板请访问：http://www.bootstrapmb.com*/
body {font-size: 14px; font-family: "Microsoft YaHei","微软雅黑";	color: #333333;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
input,select,textarea{font-size:100%}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
abbr,acronym{border:0;font-variant:normal}
del{text-decoration:line-through}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
button{outline:0;border:none;}
a:hover{text-decoration:none}
ins,a{text-decoration:none}
textarea {resize: none;}
iframe,img {border:0;}
ul,ol {list-style:none;}
a{color: #333333;text-decoration: none;}
a:link {color: #333333;text-decoration: none;}		/* 未访问的链接 */
a:visited {text-decoration: none;}	/* 已访问的链接 */
a:hover {color: #4189c8;text-decoration: none;}	/* 鼠标移动到链接上 */
a:active {color: #4189c8;text-decoration: none;}	/* 选定的链接 */
input[type="text"],[type="password"],[type="button"], input[type="submit"], input[type="reset"] {
	-webkit-appearance: none;
	outline: none;
}
select{
	/*-webkit-appearance: none;去掉select的下箭头*/
	outline: none;
}
textarea {  -webkit-appearance: none;}
/***全局公共样式 - 开始***/
.no_mr{
	margin-right: 0px !important;
}
.no_mb{
	margin-bottom: 0px !important;
}
.no_bb{
	border-bottom: 0px !important;
}
iframe{
	display: block;
    border: 0px;
}
img{
	display: block;
}
.form_check_box{
	line-height: 40px;
	position: absolute;
	top: 0;
	right: 10px;
	font-size: 12px;
	color: #dd0322;
}
.cBody{
	padding: 10px;
	display: block;
}
/***全局公共样式 - 结束***/

/**mainIframe**/
#mainIframe{
	width: 100%;
	overflow: hidden;
}

六、🥇 如何让学习不再盲目

21年程序员总结给编程菜鸟的16条忠告

  1. 入门期间不要盲目看太多书，找一本网上或身边有经验程序员推荐的教材，先系统的学习。
  2. 多看帮助文档，帮助文档就像一个游戏的玩法说明通关秘籍，该看就看别太自信。
  3. 菜鸟容易被对象、属性、方法等词汇迷惑？那是你连最基础知识都还没掌握。
  4. 不要忽视没一个看起来不起眼的问题，经常总结做到举一反三。
  5. 没积累足够知识和经验前，你是开发不出一个完整项目的。
  6. 把最新技术挂在嘴边，还不如把过时技术牢记心中。
  7. 活到老学到老，只有一招半式是闯不了江湖的。
  8. 看得懂的书，仔细看；看不懂的书，硬着头皮也要看完。
  9. 书读百遍其义自见，别指望读一遍就能掌握。
  10. 请把教程里的例子亲手实践下，即使案例中有完整源码。
  11. 把在教程中看到的有意义的例子扩充；并将其切实的运用到自己的工作中。
  12. 不要漏掉教程中任何一个习题——请全部做完并做好笔记。
  13. 水平是在不断的实践中完善和发展的，你与大牛差的只是经验的积累。
  14. 每学到一个难点的时候，尝试对朋友或网上分享你的心得,让别人都能看得懂说明你真的掌握。
  15. 做好保存源文件的习惯，这些都是你的知识积累。
  16. 遇到问题不要张口就问，要学会自己找答案，比如google、百度和w3cschool上都有很多编程相关资料，你只要输入关键字就能找到你的答案。

七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/42673.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

mathtype在word内的简单使用

mathtype在word内的简单使用

一、简单使用 1、快捷键 快捷键说明ctrlaltQ行内公式altshiftQ右编号&#xff08;行间公式&#xff09;\ ;{空格、大括号都需要转义ALTF4关闭mathtype窗口 2、小技巧 \left与\right 一定要配对使用&#xff0c;且对于对称的符号&#xff08;如(), {}等&#xff09;来说&…
阅读更多...
【Linux】---进程控制（创建、终止、等待、替换）

【Linux】---进程控制（创建、终止、等待、替换）

文章目录进程创建fork()进程退出进程退出场景进程退出方法退出码exit、_exit进程等待进程等待的方法waitwaitpid阻塞和非阻塞进程替换替换的原理替换所用到的函数execlexeclpexecle简易的shell进程创建 fork() fork函数在之前的文章中也已经提到过了。其主要作用是从已存在的…
阅读更多...
excel提示stdole32.tlb的解决方法

excel提示stdole32.tlb的解决方法

大家在使用excel时有遇到stdole32.tlb错误提示吗&#xff1f;出现这个问题直接导致excel无法启动&#xff0c;非常影响用户的工作效率。为了顺利解决问题&#xff0c;小编给大家带来了详细的解决办法&#xff0c;希望可以帮到你。 win7系统打开excel提示stdole32.tlb的解决方法…
阅读更多...
Nosql inject注入

Nosql inject注入

0x00 Nosql inject 最近主要在看那个 YApi 的注入漏洞&#xff0c;也是一个 mongodb的注入 所以来写一下这个东西&#xff0c;其实现在越来越常见的Nosql注入 感觉很多分布式和一些新的系统已经大量使用这种nosql数据库&#xff0c;这个注入和传统的关系型数据库有一点点不同…
阅读更多...
【Hack The Box】linux练习-- Meta

【Hack The Box】linux练习-- Meta

HTB 学习笔记 【Hack The Box】linux练习-- Meta &#x1f525;系列专栏&#xff1a;Hack The Box &#x1f389;欢迎关注&#x1f50e;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; &#x1f4c6;首发时间&#xff1a;&#x1f334;2022年11月27日&#x1f334; &#x1f36d…
阅读更多...
[附源码]计算机毕业设计springboot“科教兴国”支教门户网站

[附源码]计算机毕业设计springboot“科教兴国”支教门户网站

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
复旦MBA项目GNW海外课程|连线全球顶尖商学院，跨时空学习精彩无限！

复旦MBA项目GNW海外课程|连线全球顶尖商学院，跨时空学习精彩无限！

10月下旬&#xff0c;复旦MBA为期一周的GNW海外课程落下帷幕&#xff0c;复旦在职MBA的同学们通过云端连线&#xff0c;走进全球多所顶级商学院&#xff0c;与深谙商道、学术造诣深厚的教授学者&#xff0c;以及来自不同地域不同文化背景的精英学生取经论道。 　　 　　复旦MBA…
阅读更多...
深入理解死锁问题

深入理解死锁问题

死锁问题&#x1f3de;️1. 死锁概念&#x1f301;2. 为什么发生死锁&#x1f320;3. 产生死锁的条件&#x1f301;4. 如何避免死锁&#x1f4d6;4.1 循环等待&#x1f4d6;4.2 持有并等待&#x1f4d6;4.3 非抢占&#x1f4d6;4.4 互斥&#x1f33f;5. 通过调度避免死锁&#…
阅读更多...
【Python开发】一文详解Flask-Login

【Python开发】一文详解Flask-Login

一文详解Flask-LoginFlask-Login 为 Flask 提供用户会话管理。它处理登录、注销和长时间记住用户会话等常见任务。 Flask-Login 不绑定到任何特定的数据库系统或权限模型。唯一的要求是您的 用户对象实现一些方法&#xff0c;并且您向能够 从用户 ID 加载用户 的扩展提供回调。…
阅读更多...
Kotlin 开发Android app(十二)：Android布局FrameLayout和ViewPager2控件实现滚动广告栏

Kotlin 开发Android app(十二)：Android布局FrameLayout和ViewPager2控件实现滚动广告栏

在上一节中我们简单的介绍了RecyclerView 的使用&#xff0c;他是整个开发的重点控件&#xff0c;这一节我们来看看FrameLayout 布局结合ViewPager2&#xff0c;开发一个广告控件。 新模块banner 先创建一个新的模块&#xff0c;取名为banner&#xff0c;用来创建我们的滚动广…
阅读更多...
Spring Boot自定义Namespace

Spring Boot自定义Namespace

Spring Boot 自定义Namespace 在学些Spring Boot 自定义Namespace之前&#xff0c;先来看一个简单的案例。在Spring Boot出现之前&#xff0c;所有的bean都是在XML文件的格式 中定义。为了管理方便&#xff0c;一些大型复杂的应用系统&#xff0c;通常定个多个xml文件来共同满…
阅读更多...
【笑小枫的按步照搬系列】JDK8下载安装配置

【笑小枫的按步照搬系列】JDK8下载安装配置

笑小枫&#x1f495; 欢迎来到笑小枫的世界&#xff0c;喜欢的朋友关注一下我呦&#xff0c;大伙的支持&#xff0c;就是我坚持写下去的动力。 微信公众号&#xff1a;笑小枫 笑小枫个人博客&#xff1a;https://www.xiaoxiaofeng.com 一、安装 1、方式一&#xff1a;进入官网…
阅读更多...
Apifox：成熟的测试工具要学会自己写接口文档

Apifox：成熟的测试工具要学会自己写接口文档

好家伙&#xff0c; 在开发过程中&#xff0c;我们总是避免不了进行接口的测试&#xff0c; 而相比手动敲测试代码&#xff0c;使用测试工具进行测试更为便捷&#xff0c;高效 今天发现了一个非常好用的接口测试工具Apifox 相比于Postman&#xff0c;他还拥有一个非常nb的功…
阅读更多...
读《基于深度学习的跨视角步态识别算法研究》

读《基于深度学习的跨视角步态识别算法研究》

2020 背景&#xff1a; 作为一种新兴的识别技术&#xff0c;步态识别具有在非受控、远距离、低分辨率的场景下进行身份识别的优点&#xff0c;并且步态不易改变和伪装&#xff0c;所以近年来得到的关注逐渐增多。 步态识别作为一种新兴的身份识别技术&#xff0c;可以根据人…
阅读更多...
jsp美食管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

jsp美食管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 JSP 美食管理系统 是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统采用serlvet dao bean mvc模式开发&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式 开发。开发环境为TOMCAT7.0,Myeclipse8…
阅读更多...
ZYNQ之FPGA学习----UART串口实验

ZYNQ之FPGA学习----UART串口实验

1 UART串口简介 UART串口基础知识学习&#xff1a;硬件设计基础----通信协议UART 2 实验任务 上位机通过串口调试助手发送数据给 Zynq&#xff0c;Zynq PL 端通过 RS232 串口接收数据并将接收到的数据发送给上位机&#xff0c;完成串口数据环回&#xff0c;管脚分配如下&…
阅读更多...
软件测试的分类

软件测试的分类

这里先讲一些概念&#xff0c;改日从这里边挑几个细讲。&#xff08;给小白看的&#xff09; 按测试对象划分&#xff1a; 界面测试&#xff1a; 软件只是一种工具&#xff0c;软件与人的信息交流是通过界面来进行的&#xff0c;界面是软件与用户交流的最直接的一层&#xff…
阅读更多...
基于二次近似（BLEAQ）的双层优化进化算法_matlab程序

基于二次近似（BLEAQ）的双层优化进化算法_matlab程序

参考文献如上。 双层优化问题是一类具有挑战性的优化问题&#xff0c;包含两个层次的优化任务。在这些问题中&#xff0c;下层问题的最优解成为上层问题的可能可行候选。这样的要求使得优化问题难以解决&#xff0c;并使研究人员忙于设计能够有效处理该问题的方法。尽管付出了…
阅读更多...
Redis常见面试问题总结

Redis常见面试问题总结

文章目录Redis 基础面试说说你对Redis的了解?说说Redis中的数据类型&#xff1f;说说Redis数据类型对应的数据结构&#xff1f;说说Redis对应的Java客户端有哪些&#xff1f;说说Redis 中持久化发生了什么&#xff1f;说说Redis中持久化以及方式&#xff1f;如何理解Redis中RD…
阅读更多...
2022年超实用的推特营销策略

2022年超实用的推特营销策略

Twitter推广需知的13条基础知识&#xff1a; 1、Twitter日活用户达1亿 2、Twitter月活用户3.25亿 3、Twitter广告价格比其他渠道便宜33% 4、每天产生5亿条推文 5、Twitter推广能够提高29%的线下交易 6、37%的Twitter用户在18到29岁之间 7、86%的带链接推文会比普通推文效…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023