<template>
<el-container>
<div style="width: 70%;height: 100%;margin: 0 auto">
<el-header>
<p class="header" style="margin: 0 auto;align-items: center;display: flex;">常用业务</p>
</el-header>
<el-main>
<div class="blog-grid">
<el-card
class="blog-detail"
:class="{ 'is-highlighted': currentHighlight === index }"
v-for="(blog, index) in blogList"
:key="blog.id"
@mouseenter="currentHighlight = index"
@mouseleave="currentHighlight = null"
>
<div class="blog-title">{{ blog.title }}</div>
<div class="blog-content">{{ blog.content }}</div>
</el-card>
</div>
</el-main>
</div>
</el-container>
</template>
<script>
export default {
name: "test.vue",
data() {
return {
currentHighlight: null, // 用于存储当前高亮的项的索引
blogList: [
{ title: '博客1', content: '这是博客1的内容。' },
{ title: '博客2', content: '这是博客2的内容。' },
{ title: '博客3', content: '这是博客3的内容。' },
{ title: '博客4', content: '这是博客4的内容。' },
{ title: '博客5', content: '这是博客5的内容。' },
{ title: '博客6', content: '这是博客6的内容。' },
{ title: '博客7', content: '这是博客7的内容。'},
{ title: '博客8', content: '这是博客8的内容。' },
{ title: '博客9', content: '这是博客9的内容。' },
]
}
},
}
</script>
<style scoped>
.blog-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 固定为4列 */
grid-auto-rows: minmax(100px, auto); /* 根据内容自动调整每行的高度 */
grid-gap: 20px; /* 网格项之间的间隙 */
width: 70%; /* 网格容器的宽度 */
margin: 0 auto; /* 居中显示 */
cursor: pointer;
}
.blog-detail {
background: #fff;
border-radius: 6px;
box-shadow: 0 2px 10px 0 rgba(70, 130, 242, .2);
cursor: pointer;
padding: 10px; /* 内边距 */
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.header{
text-align: center; /* 水平居中文本 */
width: 100%; /* 使<p>标签宽度占满其父容器 */
display: flex; /* 使用Flexbox布局 */
justify-content: center; /* 水平居中Flex子项 */
align-items: center; /* 垂直居中Flex子项 */
height: 100%; /* 使Flex容器高度占满其父容器 */
color: #333;
font-size: 24px;
line-height: 30px;
margin: 48px 0 20px;
font-weight: 700;
text-align: center;
}
.blog-detail:hover {
background-color: #48A6F3; /* 鼠标悬浮时的背景颜色 */
box-shadow: 0 4px 12px 0 rgba(70, 130, 242, .3); /* 更明显的阴影效果 */
transform: scale(1.05) translateY(-10px); /* 鼠标悬浮时放大并向上移动 */
box-shadow: 0 4px 12px 0 rgba(70, 130, 242, .3); /* 更明显的阴影效果 */
}
</style>
01-30
596
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
08-13
264
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
05-26