Enhance questionnaire creation and management UI
- Updated styles for the question creation page, including margin adjustments and new question type buttons (single choice, multiple choice, text). - Refactored the myQuestion page to use a table layout for better organization of questionnaire data, including new styles for table rows and hover effects. - Improved padding and positioning for various elements to enhance overall user experience.
This commit is contained in:
parent
c968860633
commit
c60975acc7
1
img/checkbox.svg
Normal file
1
img/checkbox.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1672931273400" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4343" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M816 96a128 128 0 0 1 128 128v592a128 128 0 0 1-128 128H224a128 128 0 0 1-128-128V224a128 128 0 0 1 128-128h592z m-69.632 182.464l-333.152 333.12-146.24-146.24-66.624 66.624 212.896 212.896 399.744-399.776-66.624-66.624z" fill="#4B4B4B" p-id="4344"></path></svg>
|
||||
|
After Width: | Height: | Size: 595 B |
1
img/favicon.svg
Normal file
1
img/favicon.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g stroke="#fff"><path d="m12 2.84952c5.0536 0 9.1504 4.09681 9.1504 9.15048 0 5.0537-4.0968 9.1505-9.1504 9.1505-5.0537 0-9.15051-4.0968-9.15051-9.1505 0-5.05367 4.09681-9.15048 9.15051-9.15048z" stroke-width="1.69904"/><path d="m10.183 13.0449.5112.5112c.2823.2823.7401.2823 1.0224 0l2.5561-2.5561" stroke-linecap="round" stroke-width="1.7"/></g></svg>
|
||||
|
After Width: | Height: | Size: 449 B |
1
img/radio.svg
Normal file
1
img/radio.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1672931233263" class="icon" viewBox="0 0 1040 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3428" xmlns:xlink="http://www.w3.org/1999/xlink" width="203.125" height="200"><path d="M509.92 843.84C325.504 843.84 176 694.32 176 509.92 176 325.504 325.504 176 509.92 176c184.416 0 333.92 149.504 333.92 333.92 0 184.416-149.504 333.92-333.92 333.92z m0-48c157.904 0 285.92-128.016 285.92-285.92C795.84 352 667.808 224 509.92 224 352 224 224 352 224 509.92c0 157.904 128 285.92 285.92 285.92z" fill="#5A626A" p-id="3429"></path></svg>
|
||||
|
After Width: | Height: | Size: 686 B |
1
img/text.svg
Normal file
1
img/text.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1672931310029" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5325" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M736 128H288c-52.9 0-96 43.1-96 96v576c0 52.9 43.1 96 96 96h448c52.9 0 96-43.1 96-96V224c0-52.9-43.1-96-96-96z m32 672c0 17.6-14.4 32-32 32H288c-17.6 0-32-14.4-32-32V224c0-17.6 14.4-32 32-32h448c17.6 0 32 14.4 32 32v576z" p-id="5326"></path><path d="M672 320H352c-17.7 0-32 14.3-32 32s14.3 32 32 32h320c17.7 0 32-14.3 32-32s-14.3-32-32-32zM672 480H352c-17.7 0-32 14.3-32 32s14.3 32 32 32h320c17.7 0 32-14.3 32-32s-14.3-32-32-32zM672 640H352c-17.7 0-32 14.3-32 32s14.3 32 32 32h320c17.7 0 32-14.3 32-32s-14.3-32-32-32z" p-id="5327"></path></svg>
|
||||
|
After Width: | Height: | Size: 877 B |
@ -91,7 +91,7 @@
|
||||
width: 99%;
|
||||
height: 40px;
|
||||
background-color: #D3D3D3;
|
||||
margin: 25px 0;
|
||||
margin-bottom: 25px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-size: 20px;
|
||||
@ -121,6 +121,19 @@
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.quetype{
|
||||
margin-top: 20px;
|
||||
padding: 20px 20%;
|
||||
width: 99%;
|
||||
border: 1px solid #b3b3b3;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
button {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
padding: 1px 25px;
|
||||
};
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -134,6 +147,11 @@
|
||||
<main>
|
||||
<div class="box">
|
||||
<input class="question-title" type="text" value="请在这里输入问卷的标题">
|
||||
<div class="quetype">
|
||||
<button><img style="width: 16px; height: 16px;" src="/img/radio.svg" alt="">单选题</button>
|
||||
<button><img style="width: 16px; height: 16px;" src="/img/checkbox.svg" alt="">多选题</button>
|
||||
<button><img style="width: 16px; height: 16px;" src="/img/text.svg" alt="">文本题</button>
|
||||
</div>
|
||||
<a href="" class="but">+ 添加问题</a>
|
||||
<hr>
|
||||
<div class="ctrl-bar">
|
||||
|
||||
@ -29,12 +29,10 @@
|
||||
}
|
||||
.box {
|
||||
width: 90%;
|
||||
padding: 40px 20px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
background-color: #EBEBEB;
|
||||
box-shadow: 1px 2px 2px rgba(0,0,0,0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
@ -82,6 +80,7 @@
|
||||
span{
|
||||
margin: 0 8px;
|
||||
}
|
||||
padding-right: 20px;
|
||||
}
|
||||
.grid-item-add{
|
||||
color: #EEE8E4;
|
||||
@ -90,6 +89,10 @@
|
||||
padding: 0 5px;
|
||||
border: 2px solid #c78501;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
top: 20px;
|
||||
z-index: 1;
|
||||
}
|
||||
.list-item{
|
||||
width: 100%;
|
||||
@ -105,13 +108,115 @@
|
||||
width: 33%;
|
||||
float: right;
|
||||
}
|
||||
.item-date{
|
||||
/* width: 33%; */
|
||||
}
|
||||
.item-title{
|
||||
/* width: 33%; */
|
||||
float: left;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.thtitle, .data-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.thadd, .data-item {
|
||||
flex: 0.8;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.btn-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.btn-row button {
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
.thtitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.thadd {
|
||||
flex: 0.4;
|
||||
padding: 0 5px;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
color: #2E276D;
|
||||
}
|
||||
|
||||
.thadd:last-child {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.data-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.data-item {
|
||||
flex: 0.4;
|
||||
padding: 0 5px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.data-item:last-child {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
table th:first-child {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
table th:last-child {
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
tr:not(:first-child) {
|
||||
background-color: #EBEBEB;
|
||||
box-shadow: 1px 2px 2px rgba(0,0,0,0.4);
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
tr:not(:first-child) td {
|
||||
padding: 15px 10px;
|
||||
border-bottom: 1px solid #C3C3C3;
|
||||
}
|
||||
|
||||
table {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.box {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* 添加行悬停效果 */
|
||||
tr:not(:first-child):hover {
|
||||
background-color: #e0e0e0; /* 稍微深一点的灰色 */
|
||||
transition: background-color 0.3s ease; /* 添加过渡效果 */
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -123,40 +228,84 @@
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="grid-bar">
|
||||
<div class="grid-item-title">问卷标题</div>
|
||||
<div class="grid-item-title" style="margin: auto;">
|
||||
<span>创建日期</span>
|
||||
<span>发布日期</span>
|
||||
<span>截止日期</span>
|
||||
<span>问卷状态</span>
|
||||
<span>操作区域</span>
|
||||
</div>
|
||||
<div class="grid-item-add">+ 新建问卷</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<ul class="quelist">
|
||||
<li class="list-item">
|
||||
<div class="item-title">
|
||||
<input type="checkbox">
|
||||
<span>问卷标题</span>
|
||||
</div>
|
||||
<div class="item-date">
|
||||
<span>2021-01-01</span>
|
||||
<span>2021-01-01</span>
|
||||
<span>2021-01-01</span>
|
||||
<span>已发布</span>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button>发布问卷</button>
|
||||
<button>编辑问卷</button>
|
||||
<button>删除问卷</button>
|
||||
<button>查看问卷</button>
|
||||
<button>填写问卷</button>
|
||||
<button>分析问卷</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="grid-item-add">+ 新建问卷</div>
|
||||
<table>
|
||||
<tr>
|
||||
<th style="width: 30%;">
|
||||
<div class="grid-item-title" style="margin-left: 20px;">问卷标题</div>
|
||||
</th>
|
||||
<th style="width: 60%;">
|
||||
<div class="thtitle">
|
||||
<span class="thadd">创建日期</span>
|
||||
<span class="thadd">发布日期</span>
|
||||
<span class="thadd">截止日期</span>
|
||||
<span class="thadd">问卷状态</span>
|
||||
<span class="thadd">操作区域</span>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<div class="item-title">
|
||||
<input type="checkbox">
|
||||
<span>问卷标题</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="data-row">
|
||||
<span class="data-item">2021-01-01</span>
|
||||
<span class="data-item">2021-01-01</span>
|
||||
<span class="data-item">2021-01-01</span>
|
||||
<span class="data-item">已发布</span>
|
||||
<div class="data-item">
|
||||
<button>发布问卷</button>
|
||||
<button>编辑问卷</button>
|
||||
<button>删除问卷</button>
|
||||
<button>查看问卷</button>
|
||||
<button>填写问卷</button>
|
||||
<button>分析问卷</button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<div class="item-title">
|
||||
<input type="checkbox">
|
||||
<span>问卷标题</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="data-row">
|
||||
<span class="data-item">2021-01-01</span>
|
||||
<span class="data-item">2021-01-01</span>
|
||||
<span class="data-item">2021-01-01</span>
|
||||
<span class="data-item">已发布</span>
|
||||
<div class="data-item">
|
||||
<button>发布问卷</button>
|
||||
<button>编辑问卷</button>
|
||||
<button>删除问卷</button>
|
||||
<button>查看问卷</button>
|
||||
<button>填写问卷</button>
|
||||
<button>分析问卷</button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="ctrl-all box" style="
|
||||
background-color: #EBEBEB;
|
||||
box-shadow: 1px 2px 2px rgba(0,0,0,0.4);
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
">
|
||||
<input type="checkbox">
|
||||
<span>全选</span>
|
||||
<button>删除问卷</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user