refactor(layout): 调整布局样式并优化轮播卡片组件

云

10 小时以前 1c829f9177eab675b22be4d20ef2761ed1bbb423

 src/views/reportAnalysis/dataDashboard/components/DateTypeSwitch.vue

@@ -16,7 +16,7 @@
const props = defineProps({
  modelValue: {
    type: Number,
    default: 1, // 默认选中"周"
    default: 3, // 默认选中"季度"
  },
})

@@ -46,49 +46,49 @@

/* 未选中状态的样式 */
.date-type-switch :deep(.el-radio-button__inner) {
  background-color: rgba(26, 88, 176, 0.3);
  color: rgba(184, 200, 224, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
  background-color: rgba(20, 32, 66, 0.55);
  color: #8fa3c8;
  border-color: #1e3160;
  border-radius: 0;
  padding: 6px 20px;
  font-size: 14px;
  transition: all 0.3s;
  transition: color 0.2s ease, background-color 0.2s ease;
}

/* 第一个按钮左侧圆角 */
.date-type-switch :deep(.el-radio-button:first-child .el-radio-button__inner) {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

/* 最后一个按钮右侧圆角 */
.date-type-switch :deep(.el-radio-button:last-child .el-radio-button__inner) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* 按钮之间的分隔线 */
.date-type-switch :deep(.el-radio-button:not(:last-child) .el-radio-button__inner) {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid #1e3160;
}

/* 选中状态的样式 */
/* 选中状态的样式：品牌蓝实色 */
.date-type-switch :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  background: linear-gradient(180deg, #3378ff 0%, #00a4ed 100%);
  background: #2c51d9;
  color: #ffffff;
  border-color: rgba(51, 120, 255, 0.8);
  border-color: #2c51d9;
  box-shadow: none;
}

/* 悬停效果 */
.date-type-switch :deep(.el-radio-button__inner:hover) {
  color: rgba(184, 200, 224, 1);
  border-color: rgba(255, 255, 255, 0.3);
  color: #eaf1ff;
}

/* 选中状态悬停 */
.date-type-switch :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner:hover) {
  background: linear-gradient(180deg, #4e8aff 0%, #4ee4ff 100%);
  background: #4a6cf0;
  border-color: #4a6cf0;
  color: #ffffff;
}
</style>