添加鼠标放上去变化的样式:<el-row :gutter="20"> <el-col :span="6" v-for="(item, index) in storeupList" :key="index" @click.native="toDetail(item)"> <el-card :body-style="{ padding: '0px', cursor: 'pointer' }"> <el-image v-if="item.picture && item.picture.substr(0, 4) == 'http'" :src="item.picture" fit="fill" class="image"></el-image> <el-image v-else :src="baseUrl + item.picture" fit="fill" class="image"></el-image> <div style="padding: 14px;"> <span v-if="item.remark">{{ item.name }}</span> <span v-if="!item.remark">{{ item.name }}</span> </div> </el-card> </el-col> </el-row>
时间: 2023-07-02 19:17:09 浏览: 49
你可以在 `el-card` 的样式中添加 `:hover` 伪类,来实现鼠标放上去变化的样式,例如:
```html
<el-card :body-style="{ padding: '0px', cursor: 'pointer' }" class="card">
<!-- card 的内容 -->
</el-card>
```
在样式中添加:
```css
.card:hover {
transform: scale(1.05);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
```
这样当鼠标放在 `el-card` 上时,它的大小会稍微放大,同时也会有一些阴影效果。你可以根据自己的需要,调整 `transform` 和 `box-shadow` 的值。
相关问题
<el-row :gutter="20"> <el-col :span="2">
这是一个基于 Element UI 组件库的 Vue 组件代码片段,其中 el-row 表示一个行组件,gutter 属性表示行组件中列组件之间的间隔距离,el-col 表示列组件,span 属性表示该列组件占据的列数。在这个代码片段中,el-row 包含了一个 el-col 组件,该组件占据了 2 列。
<div style="width: 1200px"> <el-row :gutter="20"> <el-col :span="12">
<div style="width: 1200px">
<el-row :gutter="20">
<el-col :span="12">
这段代码展示了一个基础布局,其中使用了Element UI的栅格系统。el-row表示一行,el-col表示一个列,:span属性表示该列占据的格数。在这个例子中,:span="12"表示该列占据12个格子的宽度。通过组合不同的:span值,可以实现不同的布局效果。