yuan-ui
/
index.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="layui/css/layui.css">
		<title></title>
	</head>
	<style>
		::-webkit-scrollbar {width:8px;height:8px;position:absolute}
		::-webkit-scrollbar-thumb {background-color:#cfd2d2;border-radius: 20px;}
		::-webkit-scrollbar-track {background-color:#efeeee}
		.lay-header {
			background-color: #fff;
			position: fixed;
			left: 0;
			right: 0;
			width: 100%;
			height: 60px;
			box-shadow: 0 1px 3px rgb(0 0 0 / 3%);
			border-bottom: 1px solid #eee;
		}

		.layui-header .layui-nav {
			background: 0 0;
		}

		.layui-header .lay-logo {
			position: absolute;
			left: 0;
			top: 0;
			line-height: 60px;
		}

		.layui-header .lay-logo img {
			width: 35px;
			height: 35px;
			border-radius: 50%;
			margin-left: 10px;
		}

		.layui-header .layui-nav-item>a,
		.layui-header .layui-nav-item>a cite {
			color: #444;
		}

		.layui-header .layui-nav .layui-nav-item {
			margin-left: 16px;
		}

		.layui-header .layui-nav-item>a:hover,
		.layui-header .layui-nav-item>a cite:hover {
			color: #333;
		}

		@media screen and (max-width: 600px){
			.lay-logo img{
				display: none;
			}
		    .layui-header .layui-nav .layui-nav-item {
				margin-left: 0px;
			}
		}

		.layui-nav-child-r {
			left: auto;
			right: 0;
		}

		.layui-nav .layui-this:after,
		.layui-nav-bar {
			background-color: #679ffd;
		}

		.layui-nav .layui-this:after,
		.layui-nav-bar {
			height: 4px;
		}

		.lay-item:after {
			display: none;
		}

		.layui-layout-right {
			right: 20px;
		}

		.lay-right-ul {
			position: absolute!important;
			right: 5px;
			top: 0;
			line-height: 60px;
		}

		.lay-right-ul li{
			cursor: pointer;
		}

		.lay-head-gitee {
			width: 25px;
			/*height: 25px;*/
		}

		.lay-center-box {
			text-align: center;
			padding: 50px 0;
		}

		.lay-btn-bg {
			height: 44px;
			line-height: 44px;
			padding: 0 25px;
			font-size: 16px;
			background-color: #367eff;
			/*background: linear-gradient( 295deg, #367eff 12.41%, #367eff 52.55%, #6b9ffd 89.95%);
			border: none;*/
		}

		.lay-color {
			color: #367eff;
		}

		.lay-agreement {
			font-size: 14px;
			padding-top: 50px;
		}

		.lay-agreement>span {
			padding: 0 8px;
		}

		.lay-agreement a {
			cursor: pointer;
			color: #999;
		}

		.lay-agreement a:hover {
			color: #367eff;
		}

		.lay-bottom-box {
			padding: 15px;
		}

		.lay-bottom-content {
			padding: 15px;
			background: #fff;
			border: 1px solid #f3f3f3;
		}

		.lay-bottom-content>div {
			color: #999;
			line-height: 25px;
		}

		.lay-license {
			padding: 20px 0;
			text-align: center;
			line-height: 28px;
			color: #999;
		}

		.lay-license a {
			cursor: pointer;
			margin-right: 10px;
		}

		.lay-license a:hover {
			opacity: 0.8;
		}
	</style>

	<body>
		<div class="layui-header lay-header">
			<div class="layui-container">
				<div class="lay-logo">
					<img src="img/logo.jpg" />
					<span style="font-size: 16px;color: #367eff;font-weight: bold;margin-left: 10px;">YuanUI</span>
				</div>
				<ul class="layui-nav layui-layout-right">
					<li class="layui-nav-item layui-this">
						<a href="javascript:;">
							首页
						</a>
					</li>
					<li class="layui-nav-item">
						<a href="javascript:;">
							生态预览
						</a>
					</li>
					<li class="layui-nav-item">
						<a href="javascript:;" style="position: relative;right: 10px;">
							组件下载
						</a>
						<dl class="layui-nav-child layui-nav-child-r">
							<dd>
								<a href="javascript:;" onclick="window.open('https://gitee.com/yuanyongqiang/lay-menu')">
									首页框架
								</a>
							</dd>
							<dd>
								<a href="javascript:;" onclick="window.open('https://gitee.com/yuanyongqiang/lay-min')">
									提示框/弹框
								</a>
							</dd>
							<dd>
								<a href="javascript:;" onclick="window.open('https://gitee.com/yuanyongqiang/lay-picker')">
									移动端选择器
								</a>
							</dd>
						</dl>
					</li>
				</ul>
				<ul class="lay-right-ul">
					<li title="码云gitee">
						<img class="lay-head-gitee" src="img/gitee.png" onclick="window.open('https://gitee.com/')" />
					</li>
				</ul>
			</div>
		</div>
		<div class="layui-container" style="padding-top: 60px;">
			<div class="lay-center-box">
				<div class="lay-color" style="font-size: 55px;padding: 30px 0;">YuanUI</div>
				<div class="lay-color" style="font-size: 28px;padding: 5px 0;">个人<span style="padding: 0px 10px;">·</span>开源</div>
				<div class="lay-color" style="font-size: 28px;padding: 5px 0;">前端简单 Web UI 小组件</div>
				<div style="margin-top: 40px;">
					<button class="layui-btn lay-btn-bg">开始使用</button>
				</div>
				<div class="lay-agreement">
					<span>
						更新时间：<span class="lay-color">2023-11-20</span>
					</span>
					<span>
						<a onclick="">开源协议</a>
					</span>
					<span>
						<a onclick="">免责声明</a>
					</span>
				</div>
			</div>
		</div>
		<div class="layui-container">
			<div class="layui-row layui-col-space5">
				<div class="layui-col-md4">
					<div class="lay-bottom-box">
						<div class="lay-bottom-content">
							<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;text-align: center;">
								<legend style="margin-left: 0;">layMenu首页框架</legend>
							</fieldset>
							<div>
								基于layui实现的一个主体后台架构，使用方式简单明了。直接通过调用已封装好的config.js文件中的方法即可使用；支持自定义多种主题效果，支持iframe页面和非iframe页面，兼容移动端模式...
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-md4">
					<div class="lay-bottom-box">
						<div class="lay-bottom-content">
							<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;text-align: center;">
								<legend style="margin-left: 0;">layMin提示框/弹框</legend>
							</fieldset>
							<div>
								基于jquery实现一个提示框、弹窗、加载中的一个小组件，可单独引入使用，也可作为layui组件使用。提示框分为默认三种提示（成功、疑问、错误），可自定义颜色图标；弹窗可设置script内容标签显示，也可以直接对某个标签元素进行弹窗显示，及跳转页面显示等...
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-md4">
					<div class="lay-bottom-box">
						<div class="lay-bottom-content">
							<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;text-align: center;">
								<legend style="margin-left: 0;">layPicker移动端选择器</legend>
							</fieldset>
							<div>
								一个使用jquery实现的H5移动端选择器，简单上手。默认自动日期选择器，可设置选择年、年月、年月日、时间、年月日时间，可回显赋值，自定义选择器内容，如：省/市/区选择、底部弹出内容等...
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="layui-container" style="padding-top: 30px;">
			<div class="lay-license">
				<div class="copyright"></div>
				<div style="font-weight: bold;">
					<a style="color: #c71d23;" onclick="window.open('https://gitee.com/yuanyongqiang/lay-menu')">Gitee</a>
					<a style="color: #15dbe5;" onclick="window.open('https://www.iconfont.cn/')">阿里图标库</a>
					<a style="color: #ff5200;" onclick="window.open('https://blog.csdn.net/weixin_43992507?type=blog')">CSDN</a>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="layui/layui.js"></script>
	<script>
		// layui 组件引入
		var $, element, util, form;
		layui.use(['element', 'util', 'form'], function() {
			$ = layui.$;
			element = layui.element;
			util = layui.util;
			form = layui.form;

			// 回到顶部
			util.fixbar({
				bar1: false,
				click: function(type) {
					console.log(type);
				}
			});

			var date = new Date();
			$(".copyright").text("Copyright © " + date.getFullYear() + " All Rights Reserved")
		})
	</script>

</html>