增加首页样式优化
This commit is contained in:
BianLzhaoMin
parent
e996528fa0
commit
4f753cd8dc
|
|
@ -60,3 +60,189 @@ export default {
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// 科技感卡片通用样式
|
||||||
|
|
||||||
|
// 为首页的所有 el-card 添加科技感样式
|
||||||
|
::v-deep .el-card {
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
rgba(255, 255, 255, 0.95) 0%,
|
||||||
|
rgba(248, 250, 252, 0.95) 100%
|
||||||
|
);
|
||||||
|
border: 1px solid rgba(59, 130, 246, 0.1);
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
|
||||||
|
// 添加科技感边框光效
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 1px;
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
rgba(59, 130, 246, 0.3) 0%,
|
||||||
|
rgba(147, 51, 234, 0.3) 25%,
|
||||||
|
rgba(236, 72, 153, 0.3) 50%,
|
||||||
|
rgba(59, 130, 246, 0.3) 75%,
|
||||||
|
rgba(147, 51, 234, 0.3) 100%
|
||||||
|
);
|
||||||
|
background-size: 200% 200%;
|
||||||
|
animation: gradientShift 3s ease infinite;
|
||||||
|
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||||
|
mask-composite: xor;
|
||||||
|
-webkit-mask: linear-gradient(#fff 0 0) content-box,
|
||||||
|
linear-gradient(#fff 0 0);
|
||||||
|
-webkit-mask-composite: xor;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加内部光效
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -50%;
|
||||||
|
left: -50%;
|
||||||
|
width: 200%;
|
||||||
|
height: 200%;
|
||||||
|
background: radial-gradient(
|
||||||
|
circle,
|
||||||
|
rgba(59, 130, 246, 0.1) 0%,
|
||||||
|
transparent 70%
|
||||||
|
);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.4s ease;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 鼠标悬停效果
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-4px) scale(1.01);
|
||||||
|
box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15),
|
||||||
|
0 8px 16px rgba(0, 0, 0, 0.1),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||||
|
border-color: rgba(59, 130, 246, 0.3);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 卡片头部样式优化
|
||||||
|
.el-card__header {
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
rgba(59, 130, 246, 0.05) 0%,
|
||||||
|
rgba(147, 51, 234, 0.05) 100%
|
||||||
|
);
|
||||||
|
border-bottom: 1px solid rgba(59, 130, 246, 0.1);
|
||||||
|
border-radius: 16px 16px 0 0;
|
||||||
|
padding: 20px 24px;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -4px;
|
||||||
|
left: 0;
|
||||||
|
width: 30px;
|
||||||
|
height: 2px;
|
||||||
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 卡片内容区域样式
|
||||||
|
.el-card__body {
|
||||||
|
padding: 24px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 渐变动画
|
||||||
|
@keyframes gradientShift {
|
||||||
|
0% {
|
||||||
|
background-position: 0% 50%;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position: 100% 50%;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-position: 0% 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式设计
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.app-container {
|
||||||
|
:deep(.el-card) {
|
||||||
|
border-radius: 12px;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-4px) scale(1.01);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-card__header {
|
||||||
|
border-radius: 12px 12px 0 0;
|
||||||
|
padding: 16px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-card__body {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 暗色主题适配
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.app-container {
|
||||||
|
:deep(.el-card) {
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
rgba(30, 41, 59, 0.95) 0%,
|
||||||
|
rgba(51, 65, 85, 0.95) 100%
|
||||||
|
);
|
||||||
|
border-color: rgba(59, 130, 246, 0.2);
|
||||||
|
|
||||||
|
.el-card__header {
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
rgba(59, 130, 246, 0.1) 0%,
|
||||||
|
rgba(147, 51, 234, 0.1) 100%
|
||||||
|
);
|
||||||
|
border-bottom-color: rgba(59, 130, 246, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue