ElementUI卡片完成用户资料页面

Posted houzhicongone

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ElementUI卡片完成用户资料页面相关的知识，希望对你有一定的参考价值。

文章目录

效果图

1.使用搜索框居中的效果

<div>
 <div style="display:flex;justify-content:center">
<el-input prefix-icon="el-icon-search" style="width:600px;margin-right:9px" placeholder="输入你的用户名" size="small">     </el-input>
<el-button type="primary" icon="el-icon-search" size="small"></el-button>

 </div>

2.卡片居中，且展示用户的相关的信息，可以进行编辑和其他的操作和。


 <!-- 卡片 -->
 <div class="admin-card">

     <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>卡片名称</span>
    <el-button style="float: right; padding: 3px 0;color:red" type="text"  icon="el-icon-delete"></el-button>
  </div>
  <div v-for="o in 4" :key="o" class="text item">
    '列表内容 ' + o 
  </div>
</el-card>

<!-- 2 -->
<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>卡片名称</span>
    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
  </div>
  <div v-for="o in 4" :key="o" class="text item">
    '列表内容 ' + o 
  </div>
</el-card>
<!-- 3 -->
<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>卡片名称</span>
    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
  </div>
  <div v-for="o in 4" :key="o" class="text item">
    '列表内容 ' + o 
  </div>
</el-card>
<!-- 4 -->
<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>卡片名称</span>
    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
  </div>
  <div v-for="o in 4" :key="o" class="text item">
    '列表内容 ' + o 
  </div>
</el-card>
<!-- 5 -->
<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>卡片名称</span>
    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
  </div>
  <div v-for="o in 4" :key="o" class="text item">
    '列表内容 ' + o 
  </div>
</el-card>
<!-- 6-->
<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>卡片名称</span>
    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
  </div>
  <div v-for="o in 4" :key="o" class="text item">
    '列表内容 ' + o 
  </div>
</el-card>

<!-- 6-->
<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>卡片名称</span>
    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
  </div>
  <div v-for="o in 4" :key="o" class="text item">
    '列表内容 ' + o 
  </div>
</el-card>
<!-- 6-->
<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>卡片名称</span>
    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
  </div>
  <div class="img-container">
   <!-- <img :src="admin.userFace" :alt="admin.id" :title="admin.name"> -->
   <img src="../img/good.jpg" alt="" style="width:72px;height:72px;border-radius:36px">   
  </div>

  <div class="userInfo-container">
      <div>用户名：侯治聪</div>
      <div>邮箱：</div>
      <div>地址</div>
      <div>
          用户状态：
          <el-switch
  v-model="value1"
  active-color="#13ce66"
  inactive-color="#ff4949"
  active-text="启用"
  inactive-text="禁用">
</el-switch>
      </div>
      <div>
          <el-tag type="success">用户角色：经理 java架构师，董事长</el-tag>
          <el-button type="text" icon="el-icon-more"></el-button>
      </div>
      
  </div>
</el-card>



 </div>

3.用户头像居中显示

<!-- 6-->
<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>卡片名称</span>
    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
  </div>
  <div class="img-container">
   <!-- <img :src="admin.userFace" :alt="admin.id" :title="admin.name"> -->
   <img src="../img/good.jpg" alt="" style="width:72px;height:72px;border-radius:36px">   
  </div>

  <div class="userInfo-container">
      <div>用户名：侯治聪</div>
      <div>邮箱：</div>
      <div>地址</div>
      <div>
          用户状态：
          <el-switch
  v-model="value1"
  active-color="#13ce66"
  inactive-color="#ff4949"
  active-text="启用"
  inactive-text="禁用">
</el-switch>
      </div>
      <div>
          <el-tag type="success">用户角色：经理 java架构师，董事长</el-tag>
          <el-button type="text" icon="el-icon-more"></el-button>
      </div>
      
  </div>
</el-card>

头像的样式：

/* 图片在卡片的里面进行居中 */
.img-container
    display: flex;
    justify-content: center;

4. display:flex实现卡片布局的相关样式 flex-wrap: wrap

.admin-card
    /* 
    加上display:flex可以显示在一行，

    加上flex-wrap: wrap;可以进行换行显示比较好看
    */
    display: flex;
    flex-wrap: wrap;
    /* 这个属性可以加大卡片之间的间隔距离 */
    justify-content: space-around;
    margin-top: 10px;

5.全部代码：

<template>
<div>
 <div style="display:flex;justify-content:center">
<el-input prefix-icon="el-icon-search" style="width:600px;margin-right:9px" placeholder="输入你的用户名" size="small">     </el-input>
<el-button type="primary" icon="el-icon-search" size="small"></el-button>

 </div>

 <!-- 卡片 -->
 <div class="admin-card">

     <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>卡片名称</span>
    <el-button style="float: right; padding: 3px 0;color:red" type="text"  icon="el-icon-delete"></el-button>
  </div>
  <div v-for="o in 4" :key="o" class="text item">
    '列表内容 ' + o 
  </div>
</el-card>

<!-- 2 -->
<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>卡片名称</span>
    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
  </div>
  <div v-for="o in 4"以上是关于ElementUI卡片完成用户资料页面的主要内容，如果未能解决你的问题，请参考以下文章
 

 选项卡片段内的卡片视图


 交换卡片时无法更新片段文本


 防止android tv行片段/浏览片段保存列表行中卡片的旧位置？


 回收站视图未在 android studio 中显示一张卡片视图


 qq上如何发送xml代码？


 CardView 在我的片段上不能完全滚动