Vue电商后台管理系统美化Welcome组件页面

最新推荐文章于 2024-08-08 18:15:31 发布

chnyi6_ya

最新推荐文章于 2024-08-08 18:15:31 发布

阅读量2.4k

点赞数 3

分类专栏： Vue实战--电商后台管理系统文章标签： vue.js css3 html

本文链接：https://blog.csdn.net/weixin_47505105/article/details/123928314

版权

Vue实战--电商后台管理系统专栏收录该内容

29 篇文章 22 订阅

订阅专栏

本文展示了电商后台管理系统的界面设计，包括今日订单总数、销售总额、商品总数量、注册用户人数、VIP用户数量等关键数据的美化展示，以及待处理事务的详细列表，如待付款、待发货、退款申请等。页面采用Element UI组件库，布局清晰，视觉效果良好。

摘要由CSDN通过智能技术生成

1. 效果如下：

在这里插入图片描述

ps：数据都是写死的，只是单纯地美化界面而已。

2. 代码如下：

Welcome.vue组件完整代码如下：

<template>
  <div>
    <!-- 卡片区域 -->
    <el-row :gutter="12" style="margin:50px 125px">
  <el-col :span="8">
   <el-card class="box-card">
      <i class="el-icon-s-order" style="color:rgb(69,171,255);font-size:100px"></i>
      <div class="box">
        <div class="title">今日订单总数</div>
        <div class="count"> 200</div>
      </div>
  </el-card>
  </el-col>
  <el-col :span="8">
    <el-card class="box-card">
      <i class="el-icon-money" style="color:rgb(69,171,255);font-size:100px"></i>
      <div class="box">
        <div class="title">今日销售总额</div>
        <div class="count">￥5000.0</div>
      </div>
  </el-card>
  </el-col>
  <el-col :span="8">
     <el-card class="box-card">
      <i class="el-icon-coin" style="color:rgb(69,171,255);font-size:100px"></i>
      <div class="box">
        <div class="title">昨日销售总额</div>
        <div class="count">￥5000.0</div>
      </div>
  </el-card>
  </el-col>
</el-row>

  <!-- 卡片区域 -->
    <el-row :gutter="12" style="margin:50px 125px">
  <el-col :span="8">
   <el-card class="box-card">
      <i class="el-icon-s-goods" style="color:rgb(69,171,255);font-size:100px"></i>
      <div class="box">
        <div class="title">商品总数量</div>
        <div class="count"> 100000+</div>
      </div>
  </el-card>
  </el-col>
  <el-col :span="8">
    <el-card class="box-card">
      <i class="el-icon-s-custom" style="color:rgb(69,171,255);font-size:100px"></i>
      <div class="box">
        <div class="title">注册用户人数</div>
        <div class="count">100000+</div>
      </div>
  </el-card>
  </el-col>
  <el-col :span="8">
     <el-card class="box-card">
      <i class="el-icon-present" style="color:rgb(69,171,255);font-size:100px"></i>
      <div class="box">
        <div class="title">VIP用户数量</div>
        <div class="count">88888+</div>
      </div>
  </el-card>
  </el-col>
    </el-row>

    <el-card style="margin:50px 125px">
  <div slot="header">
    <div class="head">待处理事务</div>
  </div>
  <div class="footer">
    <ul>
      <li>
        <span style="font-size:18px; margin-left:10px;">待付款订单</span>
        <span style="color:rgb(245,108,108); margin-left:210px; font-size:18px;">(10)</span>
        <hr>
      </li>
      <li>
        <span style="font-size:18px; margin-left:10px;">已完成订单</span>
        <span style="color:rgb(245,108,108); margin-left:210px; font-size:18px;">(10)</span>
        <hr>
      </li>
      <li>
        <span style="font-size:18px; margin-left:10px;">待确认收货订单</span>
        <span style="color:rgb(245,108,108); margin-left:175px; font-size:18px;">(10)</span>
        <hr>
      </li>
    </ul>
    <ul>
      <li>
        <span style="font-size:18px; margin-left:10px;">待发货订单</span>
        <span style="color:rgb(245,108,108); margin-left:210px; font-size:18px;">(10)</span>
        <hr>
      </li>
      <li>
        <span style="font-size:18px; margin-left:10px;">新缺货登记</span>
        <span style="color:rgb(245,108,108); margin-left:210px; font-size:18px;">(10)</span>
        <hr>
      </li>
      <li>
        <span style="font-size:18px; margin-left:10px;">待处理退款申请</span>
        <span style="color:rgb(245,108,108); margin-left:175px; font-size:18px;">(10)</span>
        <hr>
      </li>
    </ul>
    <ul>
      <li>
        <span style="font-size:18px; margin-left:10px;">已发货订单</span>
        <span style="color:rgb(245,108,108); margin-left:210px; font-size:18px;">(10)</span>
        <hr>
      </li>
      <li>
        <span style="font-size:18px; margin-left:10px;">待处理退货订单</span>
        <span style="color:rgb(245,108,108); margin-left:175px; font-size:18px;">(10)</span>
        <hr>
      </li>
      <li>
        <span style="font-size:18px; margin-left:10px;">广告位即将到期</span>
        <span style="color:rgb(245,108,108); margin-left:175px; font-size:18px;">(10)</span>
        <hr>
      </li>
    </ul>
  </div>
    </el-card>

     <!-- 卡片区域 -->
    <el-row :gutter="12" style="margin:50px 125px">
  <el-col :span="12">
   <el-card >
      <div slot="header">
    <div class="head">商品总览</div>
  </div>
  <div class="footer">
    <ul>
      <li>
        <div style="color:rgb(245,108,108); font-size:25px">1000</div>
        <div style="padding-top:10px;font-size:20px;">已下架</div>
      </li>
      <li>
        <div style="color:rgb(245,108,108);font-size:25px">1000</div>
        <div style="padding-top:10px;font-size:20px;">已上架</div>
      </li>
      <li>
        <div style="color:rgb(245,108,108);font-size:25px">500</div>
        <div style="padding-top:10px;font-size:20px;margin-left:-10px">库存紧张</div>
      </li>
      <li>
        <div style="color:rgb(245,108,108);font-size:25px">5000</div>
        <div style="padding-top:10px;font-size:20px;margin-left:-10px">全部商品</div>
      </li>
    </ul>
  </div>
  </el-card>
  </el-col>
      <el-col :span="12">
   <el-card >
      <div slot="header">
    <div class="head">用户总览</div>
  </div>
  <div class="footer">
    <ul>
      <li>
        <div style="color:rgb(245,108,108); font-size:25px">100</div>
        <div style="padding-top:10px;font-size:20px;margin-left:-10px">今日新增</div>
      </li>
      <li>
        <div style="color:rgb(245,108,108);font-size:25px">200</div>
        <div style="padding-top:10px;font-size:20px;margin-left:-10px">昨日新增</div>
      </li>
      <li>
        <div style="color:rgb(245,108,108);font-size:25px">1000</div>
        <div style="padding-top:10px;font-size:20px;margin-left:-10px">本月新增</div>
      </li>
      <li>
        <div style="color:rgb(245,108,108);font-size:25px">8900</div>
        <div style="padding-top:10px;font-size:20px;margin-left:-10px">会员总数</div>
      </li>
    </ul>
  </div>
  </el-card>
  </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods: {
  },
  created () {
  }
}
</script>

<style lang="less" scoped>
  .box-card{
  padding-left:20px
  }
  .box{
    display: inline-block;
    vertical-align: top;
    padding-top:20px;
    padding-left: 30px;
  }
  .title{
    font-size: 20px;
    color: rgb(144,147,153);
  }
  .count{
    font-size: 20px;
    margin-top:20px
  }

  /deep/ .el-card__header{
    background-color: rgb(242,246,252)!important;
  }

  .head{
    font-size: 20px;
    font-weight: 700;
    color: rgb(96,98,102);
  }

  .footer ul {
    list-style: none;
    display: flex;
  }

  .footer ul li {
    flex:1;
    padding:5px 10px;
  }
</style>