区块链商品溯源系统左侧导航栏+右侧加载页面ajax html

最新推荐文章于 2024-05-18 23:52:33 发布

ACkook

最新推荐文章于 2024-05-18 23:52:33 发布

阅读量718

点赞数 1

分类专栏：其他文章标签： html jquery javascript

本文链接：https://blog.csdn.net/zxk_hi/article/details/105543223

版权

其他专栏收录该内容

3 篇文章 0 订阅

订阅专栏

纯前端页面，项目应该部署到服务器上，ajax跨域问题得到解决，无聊的毕业前实习。

网页是参考网上的原型设计

效果：

代码：

html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>商品溯源平台</title>
	<link rel="stylesheet" href="./css/tool.css">
	<link rel="stylesheet" href="./css/style.css">
</head>

<body>
	<div class="wrap">

		<div class="header">
			<div class="logo">
				商品溯源平台
			</div>
			<div class="user-box">
				<div class="userIcon f1"></div>
				<div class="f1">ACkook</div>
				<div class="dropIcon f1" name="userDrop"></div>
			</div>
			<div class="select-box">
				<div><ImageButton  action="">修改密码</ImageButton></div>
				<div><ImageButton  action="">退出</ImageButton></div>
			</div>
		</div>

		<div class="main">

			<!-- 导航 -->
			<div class="nav-box">
				<div class="nav">
					<div class="nav-header">
						<div class="title">企业管理</div>
						<div class="dropIcon2"></div>
					</div>
					<ul>
						<li onclick="openPage('./html/qiyexinxi')">企业信息</li>
						<li onclick="openPage('./html/shebeiguanli')">设备列表</li>
						<li onclick="openPage('./html/shanglianxinxi')">上链信息</li>
					</ul>
				</div>
				<div class="nav">
					<div class="nav-header">
						<div class="title">产品管理</div>
						<div class="dropIcon2"></div>
					</div>
					<ul>
						<li onclick="openPage('./html/chanpingxilie')">产品系列</li>
						<li onclick="openPage('./html/chanpingpici')">产品批次</li>
						<li onclick="openPage('./html/shouhuoren')">收货人管理</li>
					</ul>
				</div>
				<div class="nav">
					<div class="nav-header">
						<div class="title">溯源管理</div>
						<div class="dropIcon2"></div>
					</div>
					<ul>
						<li onclick="openPage('./html/company_manage')">溯源查询</li>
						<li onclick="openPage('./html/suyuanjilu')">溯源记录</li>
						<li onclick="openPage('./html/erweima')">二维码管理</li>
					</ul>
				</div>
			</div>

			<div class="content-box f1" id="content">
				
			</div>
		</div>

	</div>

	<script src="./js/jquery-3.4.1.min.js"></script>
	<script>
		var flag = true
		$(".dropIcon").bind('click', function () {
			if (flag) {
				flag = false
				$(this).css("animation", "userClick .5s ease-out forwards")
				$(this).css("background", "url(./img/down.png) center no-repeat")
				$(".select-box").fadeIn()
			} else {
				flag = true
				$(this).css("animation", "userClick2 .5s ease-out forwards")
				$(this).css("background", "url(./img/top.png) center no-repeat")
				$(".select-box").fadeOut()
			}
		})

		$(".nav-header").bind('click', function () {
			if ($(this).next().is(':hidden')) {　
				$(this).children(".dropIcon2").css("background", "url(./img/top-white.png) center no-repeat")
				$(this).next().fadeIn()
			} else {　
				$(this).children(".dropIcon2").css("background", "url(./img/down-white.png) center no-repeat")
				$(this).next().fadeOut()
			}
		})

		/**
		 *  ajax动态加载页面到右下方
		 *  @param  url:加载的页面地址
		*/
		var openPage = function(url){
			$("#content").load(url+".html");
		}

	</script>
</body>

</html>

css:

style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    font-size: 16px;
}

.f1{
    flex: 1;
}

a{
    text-decoration: none;
}

li{
    list-style: none;
}

.wrap{
    background: #D7D7D7;
    margin: 0 6rem;
}

.header{
    padding: 1rem 2rem;
    position: relative;
}

.logo{
    font-size: 1.7rem;
    float: left;
}

.user-box{
    width: 9rem;
    height: 3.2rem;
    background: #fff;
    border: 1px solid;
    border-radius: 5px;
    padding: .1rem .3rem;
    display: flex;
    align-items: center;
    float: right;
}

.userIcon{
    height: 1.5rem;
    background: url(../img/user.png) center no-repeat;
    background-size: contain;
}

.dropIcon{
    height: 1.3rem;
    background: url(../img/down.png) center no-repeat;
    background-size: contain !important;
    cursor: pointer;
    /* animation: userClick 1s ease forwards; */
}

.select-box{
    position: absolute;
    width: 7.5rem;
    height: 6rem;
    background: #fff;
    border: 1px solid rgba(220, 223, 230, 1);
    border-radius: 5px;
    bottom: -5.5rem;
    right: 0;
    display: flex;
    flex-flow: column;
    padding: .5rem 0;
    display: none;
}

.select-box::before{
    content: '';
    width: 0;
    border-top: .8rem solid transparent;
    border-bottom: .6rem solid #fff;
    border-left: .5rem solid transparent;
    border-right: .5rem solid transparent;
    position: absolute;
    top: -1.4rem;
    left: 3.2rem;
}

.select-box div{
    padding: .5rem 1rem;
}

.select-box div:hover{
    background: #D7D7D7;
}

.header:after{
    content:"";				/*设置内容为空*/
    height:0;				/*高度为0*/
    line-height:0;			/*行高为0*/
    display:block;			/*将文本转为块级元素*/
    visibility:hidden;		/*将元素隐藏*/
    clear:both;				/*清除浮动*/
}


/* 用户点击 > 符号 的动画 */
@keyframes userClick
{
    100%{
        transform:rotate(180deg);
    }
}
@keyframes userClick2
{
    100%{
        transform:rotate(-180deg);
    }
}

/* header下的大盒子 */
.main{
    display: flex;
    min-height: 39.9rem;
}

/* 左侧导航栏 */
.nav-box{
    display: flex;
    flex-flow: column;
    width: 13rem;
    min-width: 13rem;
    border-top: 1px solid #ecf0f1;
}

.nav{
    padding: 1rem;
    cursor: pointer;
}

.nav .dropIcon2{
    height: 1.3rem;
    width: 1rem;
    background: url(../img/down-white.png) center no-repeat;
    background-size: contain !important;
    position: absolute;
    top: 1.4rem;
    right: 1rem;
    margin-top: -0.45rem;
}

.nav{
    position: relative;
}

.nav>ul{
    display: none;
    margin-left: 1rem;
    top: 2rem;
}

.nav>ul>li{
    padding: 1rem;
}

.nav>ul>li:first-child{
    margin-top: .5rem;
}

/* 右侧内容显示区 */
.content-box{
    background: #fff;
}

.tab-box{
    display: flex;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1.5px solid #d7d7d7;
}

.tab-box div:first-child{
    font-size: 1.2rem;
}

.tab-box div{
    position: relative;
    margin-left: 2rem;
}

.tab-box div:first-child::after{
    content: '';
    width: 1rem;
    height: 1rem;
    background: url(../img/right.png) center no-repeat;
    background-size: contain;
    position: absolute;
    top: 0.3rem;
    right: -1.5rem;
}

.tab-box div::after{
    content: '';
    width: 1rem;
    height: 1rem;
    background: url(../img/right.png) center no-repeat;
    background-size: contain;
    position: absolute;
    top: 0.2rem;
}

.tab-box div:last-child::after{
    content: '';
    width: 1rem;
    height: 1rem;
    background: none;
}

.input-wrap{
    display: flex;
    align-items: center;
    padding: 1rem 2rem;
}

.input-wrap input{
    padding: .8rem;
    outline: none;
    border-radius: 5px;
    border: 1px solid rgba(220, 223, 230, 1);
}

.input-wrap button{
    padding: .8rem 1.5rem;
    outline: none;
    border: none;
    border-radius: 5px;
    color: #fff;
    background: #0099FF;
}

.input-wrap button:last-child{
    background: #E6F5FF;
    color: #0099FF;
}

.table-box{
    padding: 1rem 2rem;
}

table{
    border: 1px solid #D7D7D7;
    min-width: 65rem;
    max-width: 65rem;
}

table tr{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #D7D7D7;
    justify-content: space-around;
}

table tr:last-child{
    border: none;
}

table th, table td{
    padding: 1rem;
    display: flex;
    flex-flow: row wrap;
    flex: 1;
    justify-content: center;
}
table td{
    font-size: .8rem;
    display: flex;
}

.btn-edit,.btn-del{
    padding: .2rem .5rem;
    outline: none;
    border: none;
    border-radius: 5px;
}

.btn-edit{
    color: #E6A23C;
    background: #FDF6EC;
}

.btn-del{
    color: #F590B5;
    background: #FEF1F1;
}

tool.css:

/* flex */
.flex{
    display: flex;
}
.f1{
    flex:1
}
.flex-center{
    align-items: center;
    justify-content: center;
}
.ai-center{
    align-items: center;
}
.ai-start{
    align-items: flex-start;
}
.ai-end{
    align-items: flex-end;
}
.jc-center{
    justify-content: center;
}
.js-start{
    justify-content: start;
}
.js-end{
    justify-content: start;
}

/* font center  */
.font-ct{
    text-align: center;
}

/* dom */
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}
/* margin and padding */
.m-0 {
    margin: 0 !important;
  }
  
  .mt-0,
  .my-0 {
    margin-top: 0 !important;
  }
  
  .mr-0,
  .mx-0 {
    margin-right: 0 !important;
  }
  
  .mb-0,
  .my-0 {
    margin-bottom: 0 !important;
  }
  
  .ml-0,
  .mx-0 {
    margin-left: 0 !important;
  }
  
  .m-1 {
    margin: 0.25rem !important;
  }
  
  .mt-1,
  .my-1 {
    margin-top: 0.25rem !important;
  }
  
  .mr-1,
  .mx-1 {
    margin-right: 0.25rem !important;
  }
  
  .mb-1,
  .my-1 {
    margin-bottom: 0.25rem !important;
  }
  
  .ml-1,
  .mx-1 {
    margin-left: 0.25rem !important;
  }
  
  .m-2 {
    margin: 0.5rem !important;
  }
  
  .mt-2,
  .my-2 {
    margin-top: 0.5rem !important;
  }
  
  .mr-2,
  .mx-2 {
    margin-right: 0.5rem !important;
  }
  
  .mb-2,
  .my-2 {
    margin-bottom: 0.5rem !important;
  }
  
  .ml-2,
  .mx-2 {
    margin-left: 0.5rem !important;
  }
  
  .m-3 {
    margin: 1rem !important;
  }
  
  .mt-3,
  .my-3 {
    margin-top: 1rem !important;
  }
  
  .mr-3,
  .mx-3 {
    margin-right: 1rem !important;
  }
  
  .mb-3,
  .my-3 {
    margin-bottom: 1rem !important;
  }
  
  .ml-3,
  .mx-3 {
    margin-left: 1rem !important;
  }
  
  .m-4 {
    margin: 1.5rem !important;
  }
  
  .mt-4,
  .my-4 {
    margin-top: 1.5rem !important;
  }
  
  .mr-4,
  .mx-4 {
    margin-right: 1.5rem !important;
  }
  
  .mb-4,
  .my-4 {
    margin-bottom: 1.5rem !important;
  }
  
  .ml-4,
  .mx-4 {
    margin-left: 1.5rem !important;
  }
  
  .m-5 {
    margin: 3rem !important;
  }
  
  .mt-5,
  .my-5 {
    margin-top: 3rem !important;
  }
  
  .mr-5,
  .mx-5 {
    margin-right: 3rem !important;
  }
  
  .mb-5,
  .my-5 {
    margin-bottom: 3rem !important;
  }
  
  .ml-5,
  .mx-5 {
    margin-left: 3rem !important;
  }
  
  .p-0 {
    padding: 0 !important;
  }
  
  .pt-0,
  .py-0 {
    padding-top: 0 !important;
  }
  
  .pr-0,
  .px-0 {
    padding-right: 0 !important;
  }
  
  .pb-0,
  .py-0 {
    padding-bottom: 0 !important;
  }
  
  .pl-0,
  .px-0 {
    padding-left: 0 !important;
  }
  
  .p-1 {
    padding: 0.25rem !important;
  }
  
  .pt-1,
  .py-1 {
    padding-top: 0.25rem !important;
  }
  
  .pr-1,
  .px-1 {
    padding-right: 0.25rem !important;
  }
  
  .pb-1,
  .py-1 {
    padding-bottom: 0.25rem !important;
  }
  
  .pl-1,
  .px-1 {
    padding-left: 0.25rem !important;
  }
  
  .p-2 {
    padding: 0.5rem !important;
  }
  
  .pt-2,
  .py-2 {
    padding-top: 0.5rem !important;
  }
  
  .pr-2,
  .px-2 {
    padding-right: 0.5rem !important;
  }
  
  .pb-2,
  .py-2 {
    padding-bottom: 0.5rem !important;
  }
  
  .pl-2,
  .px-2 {
    padding-left: 0.5rem !important;
  }
  
  .p-3 {
    padding: 1rem !important;
  }
  
  .pt-3,
  .py-3 {
    padding-top: 1rem !important;
  }
  
  .pr-3,
  .px-3 {
    padding-right: 1rem !important;
  }
  
  .pb-3,
  .py-3 {
    padding-bottom: 1rem !important;
  }
  
  .pl-3,
  .px-3 {
    padding-left: 1rem !important;
  }
  
  .p-4 {
    padding: 1.5rem !important;
  }
  
  .pt-4,
  .py-4 {
    padding-top: 1.5rem !important;
  }
  
  .pr-4,
  .px-4 {
    padding-right: 1.5rem !important;
  }
  
  .pb-4,
  .py-4 {
    padding-bottom: 1.5rem !important;
  }
  
  .pl-4,
  .px-4 {
    padding-left: 1.5rem !important;
  }
  
  .p-5 {
    padding: 3rem !important;
  }
  
  .pt-5,
  .py-5 {
    padding-top: 3rem !important;
  }
  
  .pr-5,
  .px-5 {
    padding-right: 3rem !important;
  }
  
  .pb-5,
  .py-5 {
    padding-bottom: 3rem !important;
  }
  
  .pl-5,
  .px-5 {
    padding-left: 3rem !important;
  }
  /* --- end --- margin and padding  */