177 lines
2.9 KiB
CSS
177 lines
2.9 KiB
CSS
/* 全局样式重置 */
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 页面基础样式 */
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
}
|
||
|
||
/* 主容器样式 */
|
||
.container {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
/* 页面头部样式 */
|
||
header {
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
padding-bottom: 20px;
|
||
border-bottom: 1px solid #000;
|
||
}
|
||
|
||
/* 页面标题样式 */
|
||
header h1 {
|
||
font-size: 24px;
|
||
}
|
||
|
||
/* 通用区块样式 */
|
||
.section {
|
||
margin-bottom: 30px;
|
||
padding: 20px;
|
||
border: 1px solid #000;
|
||
}
|
||
|
||
/* 区块标题样式 */
|
||
.section h2 {
|
||
font-size: 18px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
/* 输入框通用样式 */
|
||
input {
|
||
display: block;
|
||
width: 100%;
|
||
padding: 10px;
|
||
margin-bottom: 10px;
|
||
border: 1px solid #000;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 按钮通用样式 */
|
||
button {
|
||
border: 1px solid #000;
|
||
padding: 10px 20px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
background-color: #fff;
|
||
transition: background-color 0.2s;
|
||
}
|
||
|
||
/* 按钮悬停效果 */
|
||
button:hover {
|
||
background-color: #f0f0f0;
|
||
}
|
||
|
||
/* 按钮点击效果 */
|
||
button:active {
|
||
background-color: #e0e0e0;
|
||
}
|
||
|
||
/* 段落通用样式 */
|
||
p {
|
||
margin-top: 10px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 文档项样式 */
|
||
.doc-item{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 5px;
|
||
margin-bottom: 5px;
|
||
border: 1px solid #000;
|
||
}
|
||
|
||
/* 文档项内段落样式 */
|
||
.doc-item p{
|
||
margin-top: 0;
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* App项样式 */
|
||
.app-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 15px;
|
||
margin-bottom: 10px;
|
||
border: 1px solid #000;
|
||
}
|
||
|
||
/* App信息区域样式 */
|
||
.app-info {
|
||
flex: 1;
|
||
}
|
||
|
||
/* App名称样式 */
|
||
.app-info h3 {
|
||
font-size: 16px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
/* App日期样式 */
|
||
.app-info p {
|
||
font-size: 12px;
|
||
margin: 0;
|
||
}
|
||
|
||
/* 下载按钮样式 */
|
||
.download-btn {
|
||
padding: 8px 15px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* 退出按钮样式 */
|
||
.logout-btn {
|
||
margin-top: 10px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* 加载指示器样式 */
|
||
#loadingIndicator {
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
|
||
/* 响应式设计 - 移动端适配 */
|
||
@media (max-width: 600px) {
|
||
/* 移动端主容器样式 */
|
||
.container {
|
||
margin: 10px;
|
||
padding: 15px;
|
||
}
|
||
|
||
/* 移动端区块样式 */
|
||
.section {
|
||
padding: 15px;
|
||
}
|
||
|
||
/* 移动端App项样式，改为垂直排列 */
|
||
.app-item {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
/* 移动端文档项样式，改为垂直排列 */
|
||
.doc-item {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
/* 移动端下载按钮样式，添加顶部间距 */
|
||
.download-btn {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
/* 刷新按钮和加载状态在移动端的适配 */
|
||
#downloadSection h2 {
|
||
margin-bottom: 10px;
|
||
}
|
||
} |