工作108:swiper使用

<!--首页管理-->
<template>
  <div>

    <el-card>
      <h1>等待处理</h1>
      <div style="width: 100%;height: 200px">
      <swiper  ref="mySwiper" >
        <swiper-slide v-for="(item,index) in task">
          <el-button style="float: right" type="primary" @click="ListClick">查看更多</el-button>
          <h1>订单名称:{{item.name}}</h1>
          <p>创建时间:{{item.created_at}}</p>
          <p>账号:{{item.name}}</p>
          <p>状态:{{item.status_name}}</p>
          <el-button type="primary" style="float: right" @click="ListClick">审核</el-button>
          <!-- Add Pagination -->
        </swiper-slide>
        <hr>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      </div>

    </el-card>
    <el-card>
      <h1 style="float: left">我的订单</h1>
      <el-button style="float: right" type="primary" @click="ListClick" >订单列表</el-button>
       <ul  style="display: flex;justify-content: center">
         <li style="float: left;list-style: none"><p>待审核:</p><h1>{{task_status.completed}}</h1></li>
         <li style="float: left;list-style: none"><p>待修改:</p><h1>{{task_status.release}}</h1></li>
         <li style="float: left;list-style: none"><p>进行中:</p><h1>{{task_status.returned}}</h1></li>
         <li style="float: left;list-style: none"><p>待结算:</p><h1>{{task_status.underway}}</h1></li>
         <li style="float: left;list-style: none"><p>已完成:</p><h1>{{task_status.wait_confirm}}</h1></li>
         <li style="float: left;list-style: none"><p>已取消:</p><h1>{{task_status.wait_relevance}}</h1></li>
       </ul>
      <!--  <div style="float: left">
          <img src="./geyao.png" style="width: 40px;height: 40px" alt="">
          <p>hi暖视频</p>
        </div>
        <div style="float: left">
          <img src="./geyao.png" style="width: 40px;height: 40px" alt="">
          <p>hi暖视频</p>
        </div>
        <div style="float: left;">
          <img src="./geyao.png" style="width: 40px;height: 40px" alt="">
          <p>hi暖视频</p>
        </div>-->

    </el-card>
    <el-card>
      <h1 style="float: left">我的订单</h1>
      <el-button style="float: right" type="primary" @click="TaskClick">任务列表</el-button>
      <ul  style="display: flex;justify-content: center">
        <li style="float: left;list-style: none"><p>待审核:</p><h1>{{task_status.completed}}</h1></li>
        <li style="float: left;list-style: none"><p>待修改:</p><h1>{{task_status.release}}</h1></li>
        <li style="float: left;list-style: none"><p>进行中:</p><h1>{{task_status.returned}}</h1></li>
        <li style="float: left;list-style: none"><p>待结算:</p><h1>{{task_status.underway}}</h1></li>
        <li style="float: left;list-style: none"><p>已完成:</p><h1>{{task_status.wait_confirm}}</h1></li>
        <li style="float: left;list-style: none"><p>已取消:</p><h1>{{task_status.wait_relevance}}</h1></li>
      </ul>
      <!--  <div style="float: left">
          <img src="./geyao.png" style="width: 40px;height: 40px" alt="">
          <p>hi暖视频</p>
        </div>
        <div style="float: left">
          <img src="./geyao.png" style="width: 40px;height: 40px" alt="">
          <p>hi暖视频</p>
        </div>
        <div style="float: left;">
          <img src="./geyao.png" style="width: 40px;height: 40px" alt="">
          <p>hi暖视频</p>
        </div>-->

    </el-card>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'
// import style (<= Swiper 5.x)
import 'swiper/swiper.scss'
import {getAction} from "@/api";

export default {
  name: "Home",
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
  data(){
    return{
      task:[],
      task_status:{}
    }
  },
  methods:{
    ListClick(){
      this.$router.push('/order')
    },
    TaskClick(){
      this.$router.push('/task')
    }
  },
  created() {
    getAction("/home/business").then(res=>{
        console.log(res)
      this.task=res.data.task
      this.task_status=res.data.task_status
    })
  }
};
</script>
<style scoped>

</style>