body {
    font-family: Arial, sans-serif; /* 设置字体 */
    background-color: #f5f5f5; /* 设置背景颜色 */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100vh; /* 设置高度为视口高度 */
    margin: 0; /* 移除外边距 */
    padding: 0; /* 移除内边距 */
}

/* 登录 */
.login-container {
    background-color: white; /* 设置背景颜色 */
    border-radius: 10px; /* 设置圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 设置阴影 */
    padding: 20px; /* 设置内边距 */
    width: 400px; /* 设置宽度 */
    text-align: center; /* 设置文本居中 */
}
.logo {
	
    width: 100px; /* 设置宽度 */
    height: 100px; /* 设置高度 */
	
    margin: 0 auto 40px; /* 设置外边距 */
    position: relative; /* 设置相对定位 */
   
	  
}
.title {
    font-size: 18px; /* 设置字体大小 */
    margin-bottom: 50px; /* 设置下边距 */
}

.details {
    font-size: 18px; /* 设置字体大小 */
    margin-bottom: 50px; /* 设置下边距 */
}

.input-group {
    margin-bottom: 25px; /* 设置下边距 */
	margin-right:20px; /* 设置右边距 */
}

.input-group input {	
    width: 100%; /* 设置宽度 */
    padding: 10px; /* 设置内边距 */
    border: 1px solid #ddd; /* 设置边框 */
    border-radius: 30px; /* 设置圆角 */
    margin: 0 auto; /* 设置外边距 */
}
.login-button {
	margin-top: 20px; /* 根据需要调整上移的距离 */
    width: 100%; /* 设置宽度 */
    padding: 10px; /* 设置内边距 */
    background-color: #ff6600; /* 设置背景颜色 */
    border: none; /* 移除边框 */
    border-radius: 30px; /*圆 设置角 */
    font-size: 16px; /* 设置字体大小 */
    cursor: pointer; /* 设置鼠标样式 */
}

.footer {
    margin-top: 50px; /* 设置上边距 */
    font-size: 12px; /* 设置字体大小 */
    color: #888; /* 设置文字颜色 */
}

/* 我的 */
.container {
    max-width: 400px; /* 设置最大宽度 */
    margin: 0 auto; /* 设置外边距 */
    background-color: white; /* 设置背景颜色 */
    border-radius: 10px; /* 设置圆角 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 设置阴影 */
    overflow: hidden; /* 隐藏溢出内容 */
}
.header {
	display: flex; /* 使用flex布局 */
	align-items: center; /* 垂直居中 */
	background-color: #ffcc00; /* 设置背景颜色 */
	padding: 40px; /* 设置内边距 */
	text-align: center; /* 设置文本居中 */
}

.header img {
    width: 60px; /* 设置宽度 */
    height: 60px; /* 设置高度 */
    margin-left: 0; /* 设置左边距 */
    margin-right: 10px; /* 设置右边距 */
}

.header .info {
    margin-top: 10px; /* 设置上边距 */
    margin-left: 0; /* 设置左边距 */
}
.header .info span {
 display: block; /* 设置块级显示 */
	margin-top: -20px; /* 设置上边距 */
	margin-bottom: -40px; /* 调整名字的下边距 */
	font-size: 16px; /* 设置字体大小 */
	text-align: left;
}


.header .info .deposit {
    color: #ff6600; /* 设置文字颜色 */
    font-size: 16px; /* 设置字体大小 */
}
.content {
    padding: 10px; /* 设置内边距 */
}
.content .card {
	font-size: 14px; /* 设置字体大小 */
    background-color: #fff; /* 设置背景颜色 */
    padding: 10px; /* 设置内边距 */
    margin-bottom: 10px; /* 设置下边距 */
    border-radius: 5px; /* 设置圆角 */
}
.content .card .title {
	color: #ff6600; /* 设置文字颜色 */
    font-size: 14px; /* 设置字体大小 */
    font-weight: bold; /* 设置字体加粗 */
}



.content .menu {
    background-color: #fff; /* 设置背景颜色 */
    border-radius: 5px; /* 设置圆角 */
    overflow: hidden; /* 隐藏溢出内容 */
}
.content .menu ul {
    font-weight: bold; /* 设置字体加粗 */
    list-style: none; /* 移除列表样式 */
    padding: 0; /* 移除内边距 */
    margin: 0; /* 移除外边距 */
}
.content .menu ul li {
    padding: 10px; /* 设置内边距 */
    border-bottom: 1px solid #eee; /* 设置下边框 */
    font-size: 14px; /* 设置字体大小 */
    color: #333; /* 设置文字颜色 */
}
.content .menu ul li:last-child {
    border-bottom: none; /* 移除最后一个列表项的下边框 */
}
.footer {
    background-color: #ff6600; /* 设置背景颜色 */
    color: #fff; /* 设置文字颜色 */
    text-align: center; /* 设置文本居中 */
    padding: 10px; /* 设置内边距 */
    font-size: 16px; /* 设置字体大小 */
    border-radius: 5px; /* 设置圆角 */
}
.footer a {
    color: #fff; /* 设置文字颜色 */
    text-decoration: none; /* 移除下划线 */
    margin: 0 10px; /* 设置外边距 */
}
.nav {
    display: flex; /* 使用flex布局 */
    justify-content: space-around; /* 设置两端对齐 */ 
   
    padding: 10px 0; /* 设置内边距 */
    border-top: 1px solid #eee; /* 设置上边框 */
    border-bottom: 1px solid #eee; /* 设置下边框 */
}
.nav a {
    color: #333; /* 设置文字颜色 */
    text-decoration: none; /* 移除下划线 */
    font-size: 14px; /* 设置字体大小 */
}
/*图书*/
.book {
	width: 48%; /* 设置宽度 */
	background-color: white; /* 设置背景颜色 */
	margin-bottom: 10px; /* 设置下边距 */
	border-radius: 10px; /* 设置圆角 */
	overflow: hidden; /* 隐藏溢出内容 */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 设置阴影 */
}
.book img {
	width: 100%; /* 设置宽度 */
	height: auto; /* 设置自动高度 */
}
.book-title {
	padding: 10px; /* 设置内边距 */
	font-size: 16px; /* 设置字体大小 */
	text-align: center; /* 设置文本居中 */
}
.search-bar {
	display: flex; /* 使用flex布局 */
	justify-content: center; /* 水平居中 */
	padding: 10px; /* 设置内边距 */
	background-color: white; /* 设置背景颜色 */
	margin: 10px 0; /* 设置外边距 */
}
.search-bar input {
	width: 80%; /* 设置宽度 */
	padding: 10px; /* 设置内边距 */
	border: 1px solid #ddd; /* 设置边框 */
	border-radius: 30px; /* 设置圆角 */
}
.banner {
	background-color: #4a90e2; /* 设置背景颜色 */
	color: white; /* 设置文字颜色 */
	padding: 20px; /* 设置内边距 */
	text-align: center; /* 设置文本居中 */
	margin: 10px 0; /* 设置外边距 */
}
.banner-text img {
	width: 50px; /* 设置宽度 */
	height: auto; /* 设置自动高度 */
	margin-right: 10px; /* 设置右边距 */
}
.banner-text button {
	background-color: #ffcc00; /* 设置背景颜色 */
	color: white; /* 设置文字颜色 */
	border: none; /* 移除边框 */
	padding: 10px 20px; /* 设置内边距 */
	border-radius: 30