<view> <el-row justify="center" :gutter="10" style="margin-bottom: 100px"> <el-col class="hvr-grow-shadow" v-for="item in books" :key="item.id" :span="5"> <div class="bookBox " shadow="always" @click="nowBook=item;drawer = true"> <img :src="`http://onlinebookstore.qylh.xyz/bookImg/${item.src}`" class="image" /> <div style="padding: 14px"> <span>{{item.name}}</span> <div class="bottom"> <el-button type="danger" style="padding:10px" class="button" >￥{{item.price}} </el-button> </div> </div> </div> </el-col> </el-row>

这是一个使用了Element UI组件库的Vue.js页面代码，其中包含一个栅格布局（el-row和el-col），用于展示一组书籍。v-for指令用于循环遍历books数组中的数据，每个元素都对应一个el-col列组件，通过:span属性设置每个列的宽度为5份之一。在每个列中，使用了一个div包裹的img和span元素，展示了书籍的封面和名称，同时还有一个底部div显示了书籍的价格。点击书籍后会触发nowBook和drawer这两个变量的改变，控制抽屉组件的显示。

相关问题

<template> <view> <el-row justify="center" :gutter="10" style="margin-bottom: 100px"> <el-col class="hvr-grow-shadow" v-for="item in books" :key="item.id" :span="5"> <div class="bookBox " shadow="always" @click="nowBook=item;drawer = true"> <img :src="`http://onlinebookstore.qylh.xyz/bookImg/${item.src}`" class="image" /> <div style="padding: 14px"> <span>{{item.name}}</span> <div class="bottom"> <el-button type="danger" style="padding:10px" class="button" >￥{{item.price}} </el-button> </div> </div> </div> </el-col> </el-row>

这是一个基于Vue.js框架的书店网页的组件模板。其中，使用了element-ui组件库中的el-row、el-col、el-button组件，用于实现响应式布局和样式。在el-row组件中，通过justify属性指定了子元素的水平对齐方式，并通过:gutter属性设置了子元素之间的间距。在el-col组件中，使用了v-for指令遍历books数组中的元素，生成多个bookBox组件，每个组件代表一本书。在bookBox组件中，使用了@click事件监听器，当用户点击该组件时，将会触发nowBook变量的更新，并打开一个drawer组件，用于显示书的详细信息。在img元素中，使用了绑定语法(:src)将每本书的封面图片加载到该元素中。在span元素中，使用了双花括号{{}}语法将每本书的名称显示出来，并在el-button组件中显示了每本书的价格。

<el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>能力发布驳回数</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>人工告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>自动告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>钉钉告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>BOMC告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> </el-row>如何让这五个卡片大小统一展示在一条线上

你可以尝试在每个 `<el-col>` 元素中添加 `align="center"` 属性，同时在最外层的 `<el-row>` 元素中添加 `justify="center"` 属性，代码如下：

<el-row justify="center">
  <el-col :span="5" align="center">
    <el-card style="color:#409EFF">
      <div style="color:#409EFF"><i class="el-icon-s-shop"/>能力发布驳回数</div>
      <div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
    </el-card>
  </el-col>
  <el-col :span="5" align="center">
    <el-card style="color:#409EFF">
      <div style="color:#409EFF"><i class="el-icon-s-shop"/>人工告警数量</div>
      <div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
    </el-card>
  </el-col>
  <el-col :span="5" align="center">
    <el-card style="color:#409EFF">
      <div style="color:#409EFF"><i class="el-icon-s-shop"/>自动告警数量</div>
      <div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
    </el-card>
  </el-col>
  <el-col :span="5" align="center">
    <el-card style="color:#409EFF">
      <div style="color:#409EFF"><i class="el-icon-s-shop"/>钉钉告警数量</div>
      <div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
    </el-card>
  </el-col>
  <el-col :span="5" align="center">
    <el-card style="color:#409EFF">
      <div style="color:#409EFF"><i class="el-icon-s-shop"/>BOMC告警数量</div>
      <div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
    </el-card>
  </el-col>
</el-row>

这样设置后，每个卡片的宽度会被限定在 `<el-col>` 元素的宽度内，同时 `<el-row>` 元素的 `justify` 属性可以让所有的元素在水平方向上居中对齐。