1. 样式如下:
2. HTML代码如下:
<!--我这里需要根据不同角色切换显示不同的应用,所以引入了element中的标签页-->
<el-tabs
v-model="editableTabsValue"
type="card"
class="demo-tabs"
@tab-click="handleClick"
>
<el-tab-pane
v-for="item in editableTabs"
:key="item.name"
:label="item.title"
:name="item.name"
>
<div class="app-item-mod">
<ul class="app-item-list">
<!--布局这里我使用element中的layout布局,更简单一些 gutter属性用来指定列之间的间距 -->
<el-row :gutter="20">
<el-col
:span="12"
v-for="i in result?.QueryAlgConfigMarket?.data"
:key="i"
>
<li class="app-item">
<dl>
<dt class="app-icon" @click="goDetail(i.id)">
<div class="icon-box">
<img
:src="getIconUrl(i.id)"
:alt="i.name"
class="icon-img"
/>
</div>
</dt>
<dd>
<div class="intro" @click="goDetail(i.id)">
<h3 class="name">
<a class="link-blue">{
{ i.name }}</a>
</h3>
<div class="app-label">
<el-icon><PriceTag /></el-icon>
<div class="label-item-box">
<span
class="label-item"
v-for="item in i.labelInfos"
:key="item"
>{
{ item.note + "," }}
</span>
</div>
</div>
<p class="desc">
<span class="color-gold">
<span v-if="i.tenant.name == 'medipath'">
<el-icon><IconCup /></el-icon> </span
>{
{ i.tenant.name }}
</span>
</p>
</div>
<div class="opt">
<p class="optBtn">
<a class="light-blue-btn" @click="onSaveFavorite(i.id)">
<el-icon><StarFilled /></el-icon>收藏
</a>
</p>
<p class="optBtn">
<a class="light-blue-btn" @click="onTest(i.id)">
<el-icon><SetUp /></el-icon>测试
</a>
</p>
</div>
</dd>
</dl>
</li>
</el-col>
</el-row>
</ul>
</div>
<!--数据较多,所以我这里引入了分页-->
<div class="example-pagination-block">
<el-pagination
background
layout="prev, pager, next"
:page-size="20"
:total="countData"
v-model:currentPage="currentPage"
/>
</div>
</el-tab-pane>
</el-tabs>
我的数据是通过接口动态获取的,当然模拟数据也是一样的。
2. scss代码
* {
margin: 0;
padding: 0;
}
.app-item-mod {
.app-item-list {
.app-item:hover {
background-color: #f5f5f5;
transition: 0.5s all;
}
.app-item {
border-radius: 8px;
margin-bottom: 20px;
dl {
cursor: pointer;
padding: 8px;
display: flex;
margin: 0;
dt {
flex-shrink: 0;
width: 80px;
height: 80px;
border-radius: 5px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
img {
width: 80px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
}
.text-icon {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
width: 84px;
height: 84px;
text-align: center;
background-image: linear-gradient(#6cbcf9, #b1d7ff, #bddcfc);
background-size: contain;
font-size: 14px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
overflow: hidden;
text-overflow: ellipsis;
}
}
dd {
flex: 1;
display: flex;
justify-content: space-between;
.intro {
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
.name {
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-label {
display: flex;
align-items: center;
.ep-icon {
margin-right: 5px;
}
.label-item-box {
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.desc {
color: #666;
}
}
.opt {
flex-shrink: 0;
flex-direction: column;
text-align: center;
margin-bottom: 10px;
.optBtn {
margin-top: 8px;
}
}
}
}
}
.ep-col-12 {
max-width: none !important;
}
}
}
.demo-tabs {
.ep-tabs__content {
overflow: auto !important;
}
}
.color-gold {
display: flex;
align-items: center;
color: #999;
cursor: pointer;
.ep-icon {
margin-right: 5px;
}
}
.light-blue-btn {
cursor: pointer;
border: 1px solid #167ee7;
padding: 2px 5px;
background-color: #fff;
border-radius: 4px;
color: #167ee7;
display: flex;
justify-content: center;
align-items: center;
}
.light-blue-btn:hover {
cursor: pointer;
border-color: #0d68c3;
color: #0d68c3;
}
a {
text-decoration: none;
}