vue.js基础页面

一，走马灯 照片展示

首先来教大家做一个首页的商品展示  照片和数量可以根据自己需求换和添加

推荐大家用Element这个组件 链接为组件 | Element

里面有非常多的组件可以用，可根据自己的需求用，安装也非常简单

先创建一个新view

效果如图

代码展示

<template>

  <div class="about">

      <el-carousel :interval="4000" type="card" height="500px" class="banner">

    <el-carousel-item >

     <img src="../assets/yfs1.jpg" alt="">

    </el-carousel-item>

    <el-carousel-item >

     <img src="../assets/yfs2.jpg" alt="">

    </el-carousel-item>

    <el-carousel-item >

     <img src="../assets/yfs6.jpg" alt="">

    </el-carousel-item>

    <el-carousel-item >

     <img src="../assets/yfs7.jpg" alt="">

    </el-carousel-item>

  </el-carousel>

  </div>

</template>

<style>

.banner img{

  width: 80%;

  height: 100%;

}

</style>

另一个是后端订单金额单数汇总 用于方便商家 查看营业额

需要分为三个部分

上面三个小盒子为一个大盒子，待处理事务为一个盒子，下面六个小盒子为一个大盒子，再用一个大盒子把三个部分套一起方便整体的布局和调整

效果如图

代码如下

<template>

  <div class="home">

    <el-row :gutter="50" class="order-info">

      <el-col :span="8">

        <div>

          <i class="el-icon-date"></i>

          <div class="grid-content">

            <p>今日订单总数</p>

            <p>{{orderInfo.today_orders}}</p>

          </div>

        </div>

      </el-col>

      <el-col :span="8">

        <div>

          <i class="el-icon-money"></i>

          <div class="grid-content">

            <p>今日销售总额</p>

            <p>￥{{ orderInfo.today_total_amount }}</p>

          </div>

        </div>

      </el-col>

      <el-col :span="8">

        <div>

          <i class="el-icon-coin"></i>

          <div class="grid-content">

            <p>昨日销售总额</p>

            <p>￥{{orderInfo.yester_total_amount}}</p>

          </div>

        </div>

      </el-col>

    </el-row>

    <el-row :gutter="50" class="order-num">

      <div class="bt">待处理事务</div>

      <el-col :span="8">

        <div>

          <p>已取消订单</p>

          <p>(1)</p>

        </div>

      </el-col>

      <el-col :span="8">

        <div>

          <p>待付款订单</p>

          <p>(2)</p>

        </div>

      </el-col>

      <el-col :span="8">

        <div>

          <p>待发货订单</p>

          <p>(10)</p>

        </div>

      </el-col>

      <el-col :span="8">

        <div>

          <p>待确认收货订单</p>

          <p>(1)</p>

        </div>

      </el-col>

      <el-col :span="8">

        <div>

          <p>今待评价订单</p>

          <p>(2)</p>

        </div>

      </el-col>

      <el-col :span="8">

        <div>

          <p>已完成订单</p>

          <p>(10)</p>

        </div>

      </el-col>

    </el-row>

  </div>

</template>

<script>

// @ is an alias to /src

import HelloWorld from '@/components/HelloWorld.vue'

import axios from 'axios';

export default {

  name: 'HomeView',

  data(){

    return{

      value1:5,

      orderInfo:{}

    };

  },

  created(){

    this.getHomeData()

  },

  methods:{

    getHomeData(){

      axios.get("http://106.52.94.26:3001/home/home_data")

      .then(res=>{

        console.log(res)

        this.orderInfo=res.data.orderInfo

      })

    }

  }

}

</script>

//scoped定义样式作用域 局部作用域 只对当前页面显示

<style scoped lang="scss">

.home {

  max-width: 1000px;

    margin: 0 auto;

    padding:40px;

  .order-info {

    .el-col>div {

      border: 1px solid #999;

      display: flex;

      justify-content: center;

      align-items: center;

      height: 100px;

      i {

        font-size: 30px;

        color: rgba(49, 162, 255, 0.712);

        margin-right: 10px;

      }

    }

  }

  .order-num {

    margin-top: 40px;

    .bt {

      margin: 0;

      height: 40px;

      line-height: 40px;

      padding-left: 10px;

      border-bottom: 1px solid #dcdfe6;

      color: #606266;

      background: #f2f6fc;

      font-weight: 700;

    }

    .el-col {

      div {

        display: flex;

        justify-content: space-between;

        border-bottom: 1px solid #999;

        padding:25px 15px;

      }

    }

  }

}</style>