提交代码
This commit is contained in:
zlwu committed
1 parent
8b76fa349b
commit
441b47da1a
5 files changed
+342
-5
No files matched your search
@@ -542,6 +542,44 @@ export default Vue.extend({
|
||||
background-color: rgba(144, 147, 153, 0.1);
|
||||
.btn-text { color: #909399; }
|
||||
}
|
||||
|
||||
#### 🎨 按钮背景色规范
|
||||
|
||||
**📱 移动端按钮背景色设计规范**
|
||||
|
||||
**背景色选项**：
|
||||
- ✅ **完全透明**: `rgba(r, g, b, 0)` - 无背景色，纯文字按钮
|
||||
- ✅ **半透明背景色**: `rgba(r, g, b, 0.1)` 到 `rgba(r, g, b, 0.3)` - 有背景色的按钮
|
||||
- ✅ **实色背景**: `rgba(r, g, b, 1)` - 完全实色背景
|
||||
|
||||
**推荐使用场景**：
|
||||
- **完全透明背景**: 适用于简洁设计，强调文字内容
|
||||
- **半透明背景**: 适用于需要视觉层次的场景
|
||||
- **实色背景**: 适用于重要操作按钮
|
||||
|
||||
**当前项目使用**：
|
||||
```scss
|
||||
.info-btn {
|
||||
background-color: rgba(60, 156, 255, 0); // ✅ 完全透明
|
||||
.btn-text { color: #3c9cff; }
|
||||
}
|
||||
|
||||
.success-btn {
|
||||
background-color: rgba(90, 199, 37, 0); // ✅ 完全透明
|
||||
.btn-text { color: #5ac725; }
|
||||
}
|
||||
|
||||
.warning-btn {
|
||||
background-color: rgba(255, 153, 0, 0); // ✅ 完全透明
|
||||
.btn-text { color: #ff9900; }
|
||||
}
|
||||
```
|
||||
|
||||
**设计原则**：
|
||||
- 根据设计需求选择合适的背景色
|
||||
- 确保按钮文字清晰可读
|
||||
- 保持整体视觉一致性
|
||||
- 符合项目设计风格
|
||||
```
|
||||
|
||||
#### 🔧 图标选择规范
|
||||
|
||||
@@ -0,0 +1,133 @@
|
||||
# 代码调整记录 - 按钮背景色规范调整为完全透明
|
||||
|
||||
## 📅 变更时间
|
||||
2025-01-03 16:00:00
|
||||
|
||||
## 👤 变更人员
|
||||
wuzilong
|
||||
|
||||
## 🔧 变更内容
|
||||
|
||||
### 1. 变更描述
|
||||
根据用户要求，将移动端学生信息完善页面的按钮背景色从半透明改为完全透明，并相应更新了 `.cursorrules` 规范文件。
|
||||
|
||||
### 2. 具体变更
|
||||
|
||||
#### 2.1 代码文件变更
|
||||
**文件**: `mobile/src/pages/xg/xsjcxx/xsws/index.vue`
|
||||
|
||||
**变更前** (半透明背景色):
|
||||
```scss
|
||||
.info-btn {
|
||||
background-color: rgba(60, 156, 255, 0.1); // 10%透明度
|
||||
}
|
||||
|
||||
.success-btn {
|
||||
background-color: rgba(90, 199, 37, 0.1); // 10%透明度
|
||||
}
|
||||
|
||||
.warning-btn {
|
||||
background-color: rgba(255, 153, 0, 0.1); // 10%透明度
|
||||
}
|
||||
```
|
||||
|
||||
**变更后** (完全透明背景色):
|
||||
```scss
|
||||
.info-btn {
|
||||
background-color: rgba(60, 156, 255, 0); // 完全透明
|
||||
}
|
||||
|
||||
.success-btn {
|
||||
background-color: rgba(90, 199, 37, 0); // 完全透明
|
||||
}
|
||||
|
||||
.warning-btn {
|
||||
background-color: rgba(255, 153, 0, 0); // 完全透明
|
||||
}
|
||||
```
|
||||
|
||||
#### 2.2 规范文件变更
|
||||
**文件**: `.cursor/cursorrules-mobile.md`
|
||||
|
||||
**变更前**: 强制禁止使用完全透明背景色，要求使用半透明背景色
|
||||
|
||||
**变更后**: 允许使用完全透明背景色，提供多种背景色选项
|
||||
|
||||
**新规范内容**:
|
||||
```scss
|
||||
#### 🎨 按钮背景色规范
|
||||
|
||||
**📱 移动端按钮背景色设计规范**
|
||||
|
||||
**背景色选项**：
|
||||
- ✅ **完全透明**: `rgba(r, g, b, 0)` - 无背景色，纯文字按钮
|
||||
- ✅ **半透明背景色**: `rgba(r, g, b, 0.1)` 到 `rgba(r, g, b, 0.3)` - 有背景色的按钮
|
||||
- ✅ **实色背景**: `rgba(r, g, b, 1)` - 完全实色背景
|
||||
|
||||
**推荐使用场景**：
|
||||
- **完全透明背景**: 适用于简洁设计，强调文字内容
|
||||
- **半透明背景**: 适用于需要视觉层次的场景
|
||||
- **实色背景**: 适用于重要操作按钮
|
||||
```
|
||||
|
||||
## 📋 变更文件清单
|
||||
|
||||
### 1. 代码文件
|
||||
- `mobile/src/pages/xg/xsjcxx/xsws/index.vue` - 按钮背景色改为完全透明
|
||||
|
||||
### 2. 规范文件
|
||||
- `.cursor/cursorrules-mobile.md` - 按钮背景色规范调整为允许完全透明
|
||||
|
||||
## 🎯 变更原因
|
||||
|
||||
### 用户需求
|
||||
- 用户明确要求将按钮背景色改为0透明度（完全透明）
|
||||
- 追求更简洁的视觉设计
|
||||
|
||||
### 设计考虑
|
||||
- 完全透明背景色可以创造更简洁的界面
|
||||
- 强调文字内容和图标，减少视觉干扰
|
||||
- 符合现代扁平化设计趋势
|
||||
|
||||
## 🔍 变更效果
|
||||
|
||||
### 变更前
|
||||
- 按钮有半透明背景色
|
||||
- 视觉层次相对明显
|
||||
- 按钮区域较为突出
|
||||
|
||||
### 变更后
|
||||
- 按钮完全透明，无背景色
|
||||
- 更简洁的视觉效果
|
||||
- 强调文字和图标内容
|
||||
|
||||
## 📚 相关文档
|
||||
|
||||
- **移动端开发规范**: `.cursor/cursorrules-mobile.md`
|
||||
- **按钮样式规范**: 移动端规范文件中的"按钮背景色规范"章节
|
||||
|
||||
## 💡 注意事项
|
||||
|
||||
### 用户体验考虑
|
||||
- 完全透明背景色可能影响按钮的可识别性
|
||||
- 需要确保按钮文字和图标有足够的对比度
|
||||
- 建议在hover或active状态下提供视觉反馈
|
||||
|
||||
### 设计一致性
|
||||
- 确保所有相关页面的按钮样式保持一致
|
||||
- 考虑在不同背景下的可读性
|
||||
- 可能需要调整按钮间距或边框来增强识别性
|
||||
|
||||
## 🔄 后续建议
|
||||
|
||||
1. **用户测试**: 建议进行用户测试，验证完全透明背景色的可用性
|
||||
2. **视觉反馈**: 考虑添加hover效果或其他视觉反馈机制
|
||||
3. **一致性检查**: 检查其他页面的按钮样式是否需要同步调整
|
||||
4. **文档更新**: 如有其他相关文档，需要同步更新
|
||||
|
||||
---
|
||||
|
||||
**变更状态**: ✅ 已完成
|
||||
**测试状态**: ⚠️ 需要用户验证
|
||||
**文档同步**: ✅ 已更新规范文件
|
||||
**用户确认**: ✅ 已按用户要求执行
|
||||
@@ -0,0 +1,111 @@
|
||||
# 代码调整记录 - 按钮背景色规范调整
|
||||
|
||||
## 📅 变更时间
|
||||
2025-01-03 15:30:00
|
||||
|
||||
## 👤 变更人员
|
||||
wuzilong
|
||||
|
||||
## 🔧 变更内容
|
||||
|
||||
### 1. 问题描述
|
||||
在移动端学生信息完善页面 (`mobile/src/pages/xg/xsjcxx/xsws/index.vue`) 中，发现"信息完善"、"提交历史"、"查看详细"三个按钮的背景色被设置为完全透明：
|
||||
|
||||
```scss
|
||||
// 问题代码 - 完全透明背景色
|
||||
.info-btn {
|
||||
background-color: rgba(60, 156, 255, 0); // ❌ 完全透明
|
||||
}
|
||||
|
||||
.success-btn {
|
||||
background-color: rgba(90, 199, 37, 0); // ❌ 完全透明
|
||||
}
|
||||
|
||||
.warning-btn {
|
||||
background-color: rgba(255, 153, 0, 0); // ❌ 完全透明
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 问题影响
|
||||
- 按钮没有背景色，影响用户体验
|
||||
- 不符合移动端设计规范
|
||||
- 视觉层次不清晰
|
||||
|
||||
### 3. 解决方案
|
||||
|
||||
#### 3.1 规范文件更新
|
||||
在 `.cursor/cursorrules-mobile.md` 中添加了"按钮背景色强制性规范"：
|
||||
|
||||
- **强制要求**: 必须使用半透明背景色 `rgba(r, g, b, 0.1)` 到 `rgba(r, g, b, 0.3)`
|
||||
- **推荐透明度范围**: 0.1 - 0.3 (10% - 30%)
|
||||
- **禁止使用**: `rgba(r, g, b, 0)` 完全透明和 `transparent` 关键字
|
||||
|
||||
#### 3.2 代码修复
|
||||
将按钮背景色从完全透明改为半透明：
|
||||
|
||||
```scss
|
||||
// 修复后代码 - 半透明背景色
|
||||
.info-btn {
|
||||
background-color: rgba(60, 156, 255, 0.1); // ✅ 10%透明度
|
||||
}
|
||||
|
||||
.success-btn {
|
||||
background-color: rgba(90, 199, 37, 0.1); // ✅ 10%透明度
|
||||
}
|
||||
|
||||
.warning-btn {
|
||||
background-color: rgba(255, 153, 0, 0.1); // ✅ 10%透明度
|
||||
}
|
||||
```
|
||||
|
||||
## 📋 变更文件清单
|
||||
|
||||
### 1. 规范文件
|
||||
- `.cursor/cursorrules-mobile.md` - 新增按钮背景色强制性规范
|
||||
|
||||
### 2. 代码文件
|
||||
- `mobile/src/pages/xg/xsjcxx/xsws/index.vue` - 修复按钮背景色
|
||||
|
||||
## 🎯 规范要点
|
||||
|
||||
### 设计原则
|
||||
- 保持视觉层次清晰
|
||||
- 确保按钮可识别性
|
||||
- 符合移动端设计规范
|
||||
- 提升用户体验
|
||||
|
||||
### 强制要求
|
||||
- ✅ 必须使用半透明背景色
|
||||
- ✅ 推荐透明度范围：0.1 - 0.3
|
||||
- ❌ 禁止使用完全透明背景色
|
||||
- ❌ 禁止使用 transparent 关键字
|
||||
|
||||
## 🔍 验证结果
|
||||
|
||||
### 修复前
|
||||
- 按钮背景色完全透明
|
||||
- 视觉层次不清晰
|
||||
- 用户体验差
|
||||
|
||||
### 修复后
|
||||
- 按钮背景色半透明
|
||||
- 视觉层次清晰
|
||||
- 用户体验良好
|
||||
|
||||
## 📚 相关文档
|
||||
|
||||
- **移动端开发规范**: `.cursor/cursorrules-mobile.md`
|
||||
- **按钮样式规范**: 移动端规范文件中的"按钮背景色强制性规范"章节
|
||||
|
||||
## 💡 经验总结
|
||||
|
||||
1. **规范先行**: 在开发前应明确UI设计规范
|
||||
2. **代码审查**: 定期检查代码是否符合设计规范
|
||||
3. **用户体验**: 按钮背景色对用户体验有重要影响
|
||||
4. **规范文档**: 将常见问题整理到规范文档中，避免重复犯错
|
||||
|
||||
---
|
||||
|
||||
**变更状态**: ✅ 已完成
|
||||
**测试状态**: ✅ 已验证
|
||||
**文档同步**: ✅ 已更新规范文件
|
||||
@@ -482,7 +482,7 @@ export default {
|
||||
}
|
||||
|
||||
.info-btn {
|
||||
background-color: rgba(60, 156, 255, 0.1);
|
||||
background-color: rgba(60, 156, 255, 0);
|
||||
|
||||
.btn-text {
|
||||
color: #3c9cff;
|
||||
@@ -490,7 +490,7 @@ export default {
|
||||
}
|
||||
|
||||
.success-btn {
|
||||
background-color: rgba(90, 199, 37, 0.1);
|
||||
background-color: rgba(90, 199, 37, 0);
|
||||
|
||||
.btn-text {
|
||||
color: #5ac725;
|
||||
@@ -498,7 +498,7 @@ export default {
|
||||
}
|
||||
|
||||
.warning-btn {
|
||||
background-color: rgba(255, 153, 0, 0.1);
|
||||
background-color: rgba(255, 153, 0, 0);
|
||||
|
||||
.btn-text {
|
||||
color: #ff9900;
|
||||
|
||||
@@ -1095,10 +1095,10 @@
|
||||
<!-- 底部操作按钮 -->
|
||||
<view class="action-buttons">
|
||||
<u-button
|
||||
type="primary"
|
||||
:loading="saveLoading"
|
||||
@click="handleSave"
|
||||
size="default"
|
||||
class="save-button"
|
||||
style="margin-bottom: 20rpx"
|
||||
>
|
||||
保存信息
|
||||
@@ -2624,10 +2624,11 @@ export default {
|
||||
font-size: 28rpx;
|
||||
color: #303133;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
min-height: 48rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.disabled {
|
||||
color: #c0c4cc;
|
||||
@@ -2646,6 +2647,41 @@ export default {
|
||||
padding: 40rpx 20rpx;
|
||||
}
|
||||
|
||||
// 保存按钮渐变色样式
|
||||
.save-button {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgb(0, 81, 217) 0%,
|
||||
rgb(51, 122, 235) 50%,
|
||||
rgb(102, 163, 255) 100%
|
||||
) !important;
|
||||
border: none !important;
|
||||
color: #fff !important;
|
||||
font-weight: 600 !important;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 81, 217, 0.3) !important;
|
||||
transition: all 0.3s ease !important;
|
||||
|
||||
&:active {
|
||||
transform: translateY(2rpx) !important;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 81, 217, 0.4) !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 6rpx 16rpx rgba(0, 81, 217, 0.4) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 保存按钮加载状态样式
|
||||
.save-button.u-button--loading {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgb(0, 81, 217) 0%,
|
||||
rgb(51, 122, 235) 50%,
|
||||
rgb(102, 163, 255) 100%
|
||||
) !important;
|
||||
opacity: 0.8 !important;
|
||||
}
|
||||
|
||||
// 多列布局样式
|
||||
.form-row {
|
||||
display: flex;
|
||||
@@ -2694,13 +2730,22 @@ export default {
|
||||
|
||||
// uview组件样式调整
|
||||
::v-deep .u-input {
|
||||
height: 88rpx !important;
|
||||
padding: 20rpx 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.u-input__input {
|
||||
height: 88rpx !important;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .u-radio-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 32rpx;
|
||||
height: 88rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
::v-deep .u-radio {
|
||||
@@ -2710,4 +2755,14 @@ export default {
|
||||
::v-deep .u-loading-page {
|
||||
background-color: #f5f6fa;
|
||||
}
|
||||
|
||||
// ::v-deep .u-textarea {
|
||||
// height: 88rpx !important;
|
||||
// box-sizing: border-box;
|
||||
|
||||
// .u-textarea__field {
|
||||
// height: 88rpx !important;
|
||||
// line-height: 48rpx;
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
Reference in new issue
Block a user