vue3.0 + element Plus项目中flex布局样式

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;
}