添加了CSS样式
This commit is contained in:
mxr612
parent
f0440a21a2
commit
1566a795eb
1
app.py
1
app.py
@ -9,6 +9,7 @@ import uvicorn
|
||||
|
||||
app = FastAPI()
|
||||
templates = Jinja2Templates(directory="templates")
|
||||
app.mount("/static", StaticFiles(directory="static"), name="static")
|
||||
|
||||
# 加载所有问卷数据
|
||||
def load_all_scales():
|
||||
|
||||
102
static/styles.css
Normal file
102
static/styles.css
Normal file
@ -0,0 +1,102 @@
|
||||
/* 全局样式 */
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
width: 40%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
/* 可选：添加一些内边距，让内容不紧贴容器边缘 */
|
||||
padding: 20px;
|
||||
|
||||
/* 设置背景颜色为纯白色 */
|
||||
background-color: #ffffff;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
width: 100%;
|
||||
/* 全屏展示 */
|
||||
padding: 10px;
|
||||
/* 适当调整内边距 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 容器样式 */
|
||||
.container {
|
||||
width: 40%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
/* 可选：添加一些内边距，让内容不紧贴容器边缘 */
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 标题样式 */
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
/* 链接样式 */
|
||||
a {
|
||||
color: #007BFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
form {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
button {
|
||||
background-color: #007BFF;
|
||||
color: #fff;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* 定义单选按钮容器样式 */
|
||||
.radio-button-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
/* 按钮之间的间距 */
|
||||
}
|
||||
|
||||
/* 定义单选按钮隐藏样式 */
|
||||
.radio-button-group input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 定义单选按钮标签样式 */
|
||||
.radio-button-group label {
|
||||
padding: 10px 20px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 定义单选按钮选中时标签样式 */
|
||||
.radio-button-group input[type="radio"]:checked+label {
|
||||
background-color: #007BFF;
|
||||
color: white;
|
||||
}
|
||||
@ -1,10 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>心尺 PsychoScales</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='styles.css') }}">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{% if readme_content %}
|
||||
<div class="readme-section">
|
||||
@ -13,8 +16,9 @@
|
||||
{% endif %}
|
||||
<ul>
|
||||
{% for scale_id, scale in scales.items() %}
|
||||
<li><a href="{{ url_for('scale', scale_id=scale_id) }}">{{ scale.get('title', '未命名问卷') }}</a></li>
|
||||
<li><a href="{{ url_for('scale', scale_id=scale_id) }}">{{ scale.get('title', '未命名问卷') }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Result</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='styles.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<h1>{{ scale_title }} </h1>
|
||||
|
||||
@ -1,48 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ scale.title }}</title>
|
||||
<style>
|
||||
/* 定义单选按钮容器样式 */
|
||||
.radio-button-group {
|
||||
display: flex;
|
||||
gap: 10px; /* 按钮之间的间距 */
|
||||
}
|
||||
/* 定义单选按钮隐藏样式 */
|
||||
.radio-button-group input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
/* 定义单选按钮标签样式 */
|
||||
.radio-button-group label {
|
||||
padding: 10px 20px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 定义单选按钮选中时标签样式 */
|
||||
.radio-button-group input[type="radio"]:checked + label {
|
||||
background-color: #007BFF;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='styles.css') }}">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>{{ scale.title }}</h1>
|
||||
<p>{{ scale.instructions }}</p>
|
||||
<form action="{{ url_for('result', scale_id=scale_id) }}" method="post">
|
||||
{% for question in scale.questions %}
|
||||
<label for="{{ question.id }}">{{ question.text }}</label>
|
||||
<div class="radio-button-group">
|
||||
<!-- 将下拉菜单替换为单选按钮 -->
|
||||
{% for option in range(question.range[0], question.range[1]+1) %}
|
||||
<input type="radio" id="{{ question.id }}_{{ option }}" name="{{ question.id }}" value="{{ option }}" {% if not ( 'optional' in question and question.optional) %}required{% endif %}>
|
||||
<label for="{{ question.id }}_{{ option }}">{{ option }}</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<label for="{{ question.id }}">{{ question.text }}</label>
|
||||
<div class="radio-button-group">
|
||||
<!-- 将下拉菜单替换为单选按钮 -->
|
||||
{% for option in range(question.range[0], question.range[1]+1) %}
|
||||
<input type="radio" id="{{ question.id }}_{{ option }}" name="{{ question.id }}" value="{{ option }}" {% if
|
||||
not ( 'optional' in question and question.optional) %}required{% endif %}>
|
||||
<label for="{{ question.id }}_{{ option }}">{{ option }}</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
<input type="submit" value="提交">
|
||||
</form>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user