<%@ Language=VBScript %>
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>在线评分系统 - 评分页面</title>
<style>
* {
margin
: 0;
padding
: 0;
box-sizing
: border-box;
}
body {
font-family
: 'Microsoft YaHei', Arial, sans-serif;
background
: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height
: 100vh;
padding
: 20px;
}
.container {
max-width
: 1200px;
margin
: 0 auto;
}
.header {
background
: white;
border-radius
: 10px;
padding
: 20px 30px;
margin-bottom
: 20px;
box-shadow
: 0 5px 15px rgba(0,0,0,0.1);
display
: flex;
justify-content
: space-between;
align-items
: center;
}
.header h1 {
color
: #333;
font-size
: 24px;
}
.user-info {
display
: flex;
align-items
: center;
gap
: 15px;
}
.user-name {
color
: #667eea;
font-weight
: 500;
}
.logout-btn {
background
: #e74c3c;
color
: white;
padding
: 8px 16px;
border
: none;
border-radius
: 5px;
cursor
: pointer;
text-decoration
: none;
font-size
: 14px;
transition
: background 0.3s;
}
.logout-btn
:hover {
background
: #c0392b;
}
.content {
/* display
: grid; */
grid-template-columns
: 1fr 1fr;
gap
: 20px;
}
.card {
background
: white;
border-radius
: 10px;
padding
: 25px;
box-shadow
: 0 5px 15px rgba(0,0,0,0.1);
}
.card h2 {
color
: #333;
margin-bottom
: 20px;
font-size
: 20px;
border-bottom
: 2px solid #f1f2f6;
padding-bottom
: 10px;
}
.form-group {
margin-bottom
: 15px;
}
.form-group
label {
display
: block;
margin-bottom
: 5px;
color
: #333;
font-weight
: 500;
}
.form-group input, .form-group textarea, .form-group select {
width
: 100%;
padding
: 10px;
border
: 2px solid #ddd;
border-radius
: 5px;
font-size
: 14px;
font-family
: inherit;
}
.form-group input
:focus, .form-group textarea
:focus, .form-group select
:focus {
outline
: none;
border-color
: #667eea;
}
.rating-stars {
display
: flex;
gap
: 5px;
margin-top
: 5px;
}
.star {
font-size
: 24px;
color
: #ddd;
cursor
: pointer;
transition
: color 0.2s;
}
.star.active {
color
: #ffd700;
}
.submit-btn {
width
: 100%;
padding
: 12px;
background
: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color
: white;
border
: none;
border-radius
: 5px;
font-size
: 16px;
cursor
: pointer;
transition
: transform 0.3s;
}
.submit-btn
:hover {
transform
: translateY(-2px);
}
.stats {
display
: flex;
justify-content
: space-around;
margin-bottom
: 20px;
}
.stat-item {
text-align
: center;
}
.stat-value {
font-size
: 24px;
font-weight
: bold;
color
: #667eea;
}
.stat-
label {
font-size
: 14px;
color
: #666;
margin-top
: 5px;
}
.message {
background
: #d4edda;
color
: #155724;
padding
: 10px;
border-radius
: 5px;
margin-bottom
: 15px;
text-align
: center;
}
.error-msg {
background
: #f8d7da;
color
: #721c24;
padding
: 10px;
border-radius
: 5px;
margin-bottom
: 15px;
text-align
: center;
}
.ratings-list {
max-height
: 400px;
overflow-y
: auto;
}
.rating-item {
border
: 1px solid #f1f2f6;
border-radius
: 8px;
padding
: 15px;
margin-bottom
: 10px;
background
: #f8f9fa;
}
.rating-header {
display
: flex;
justify-content
: space-between;
align-items
: center;
margin-bottom
: 8px;
}
.rating-item-name {
font-weight
: 500;
color
: #333;
}
.rating-score {
background
: #667eea;
color
: white;
padding
: 2px 8px;
border-radius
: 12px;
font-size
: 12px;
}
.rating-comment {
color
: #666;
font-size
: 14px;
margin-bottom
: 5px;
}
.rating-time {
font-size
: 12px;
color
: #999;
}
.no-data {
text-align
: center;
color
: #999;
padding
: 40px;
}
@media (max-width
: 768px) {
.content {
grid-template-columns
: 1fr;
}
.header {
flex-direction
: column;
gap
: 15px;
text-align
: center;
}
}
/* ===== */
.score-cell {
text-align
: center;
padding
: 10px;
}
.score-row {
display
: flex;
justify-content
: center;
align-items
: center;
gap
: 8px; /* 控制每个选项之间的间距 */
white-space
: nowrap; /* 禁止
换行 */
font-weight
: bold;
color
: #1a5fb4;
}
.score-option {
display
: inline-flex;
align-items
: center;
gap
: 4px;
font-size
: 14px;
margin
: 0;
white-space
: nowrap;
padding-right
: 10px;
}
.score-option input[type="radio"] {
margin
: 0;
transform
: scale(1.1);
}
th ,td{
border
: 1px solid #000; /* 设置单元格边框的粗细、样式和颜色 */
padding
: 8px; /* 设置内容与边框的距离 */
/* text-align
: left; */
}
table {
border-collapse
: collapse; /* 合并边框为单线 */
width
: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>在线评分系统</h1>
<div class="user-info">
<span class="user-name">欢迎，<%= username %></span>
<a href="Ratinglogin.
asp" class="logout-btn">退出登录</a>
</div>
</div>
<div class="content">
<!-- 左侧：评分表单 -->
<div class="card">
<h2>提交评分</h2>
<% If message <> "" Then %>
<div class="message">
<%= message %>
</div>
<% End If %>
<% If errorMsg <> "" Then %>
<div class="error-msg">
<%= errorMsg %>
</div>
<% End If %>
<form method="post" action="">
<input type="hidden" name="action" value="submit_rating">
<div class="form-group">
<
label for="item_name">评分项目</
label>
<input type="text" id="item_name" name="item_name" placeholder="请输入要评分的项目名称" required>
</div>
<div class="form-group">
<
label>评分分数</
label>
<div class="rating-stars" id="ratingStars">
<span class="star" data-score="1">★</span>
<span class="star" data-score="2">★</span>
<span class="star" data-score="3">★</span>
<span class="star" data-score="4">★</span>
<span class="star" data-score="5">★</span>
</div>
<input type="hidden" id="score" name="score" required>
</div>
<div class="form-group">
<
label for="comment">评分备注（可选）</
label>
<textarea id="comment" name="comment" rows="3" placeholder="请输入您的评分备注"></textarea>
<table>
<tr>
<th width="65%">评分项目</th>
<th width="35%" class="score-cell">得分（请选择一项）</th>
</tr>
<%
'
定义10个评分项
Dim items(10)
items(1) = "工程部相关联络电话是否知道？安全注意事项，逃生路线及冲身洗眼器…etc…是否了解"
items(2) = "是否通读ECP Item 的相关 OI/TECN/PN?"
items(3) = "机台操作是否熟练？"
items(4) = "异常状况处理程序是否了解？"
items(5) = "控挡片使用程序是否了解？"
items(6) = "量测流程、Spec，及操作是否熟练？"
items(7) = "相关之量测机台是否会操作？"
items(8) = "PM后复机程序是否熟料？"
items(9) = "热机程序及条件状况之了解？"
items(10) = "Daily Check 项目是否明确？"
Dim i, j
For i = 1 To 10
%>
<tr>
<td><strong>[<%= i %>]</strong> <%= items(i) %></td>
<td class="score-cell">
<div class="score-row">
<% For j = 1 To 10 %>
<
label class="score-option">
<%= j %> <!-- 数字在前 -->
<input type="radio" name="score_<%= i %>" value="<%= j %>"
<% If j = 5 Then Response.Write "checked" End If %>>
</
label>
<% Next %>
</div>
</td>
</tr>
<%
Next
%>
</table>
</div>
<button type="submit" class="submit-btn">提交评分</button>
</form>
</div>
</div>
</div>
<script>
// 星级评分交互
const stars = document.querySelectorAll('.star');
const scoreInput = document.getElementById('score');
stars.forEach((star, index) => {
star.addEventListener('click', () => {
const score = index + 1;
scoreInput.value = score;
stars.forEach((s, i) => {
if (i < score) {
s.classList.add('active');
} else {
s.classList.remove('active');
}
});
});
star.addEventListener('mouseenter', () => {
const hoverScore = index + 1;
stars.forEach((s, i) => {
if (i < hoverScore) {
s.style.color = '#ffd700';
} else {
s.style.color = '#ddd';
}
});
});
});
// 重置鼠标悬停效果
document.getElementById('ratingStars').addEventListener('mouseleave', () => {
const currentScore = parseInt(scoreInput.value);
stars.forEach((s, i) => {
if (i < currentScore) {
s.style.color = '#ffd700';
} else {
s.style.color = '#ddd';
}
});
});
</script>
</body>
</html>
<%
' 关闭数据库连接
conn.Close
Set conn = Nothing
%> 看看这个代码 ，这是一个在线评分的，但是我希望你能在这个代码的基础上新增一个列表区域，也就是一个代办界面，里面是可供选择的带评分列表 ，点击具体数据后，在切出这个页面 ，我希望只在一个页面中现实这个功能、
ASP.NET Label换行问题
本文解决了ASP.NET中Label控件无法自动换行的问题。通过调整CSS样式设置word-break属性为break-all，使得过长的文本能够正常换行，改善了用户界面。
扫一扫
783
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
