工作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.taskthis.task_status=res.data.task_status})}
};
</script>
<style scoped></style>

工作108:swiper使用相关推荐

2022-11-23 工作记录--Swiper/CSS-改变swiper滑动方向 + 修改文字的方向——解决 swiper反方向滑动时，超出一行省略号处理的文字也呈反方向
[1]Swiper-改变swiper滑动方向一.从左往右滑动(默认)⭐️ 在swiper-container的div上加dir="ltr",即 left to right. 但从 ...
工作108:精准的v-for和if
工作108:vue里面wangEdit编辑器使用
WangEdit使用 <template lang="html"><div class="editor"><!--定义的为表头的属 ...
[转]综述论文翻译：A Review on Deep Learning Techniques Applied to Semantic Segmentation
近期主要在学习语义分割相关方法,计划将arXiv上的这篇综述好好翻译下,目前已完成了一部分,但仅仅是尊重原文的直译,后续将继续完成剩余的部分,并对文中提及的多个方法给出自己的理解. _论文地址:htt ...
D3临摹作业_分词与词云可视化(西安交大国家艺术基金数据可视化培训第28天)
第十二章分词与词云可视化第一节词云图概念:一种富文本信息可视化技术,通过布局算法用文字大小表示词频,辅以多种颜色,直观的反映词组重要性差异,展示文本关键摘要信息.完整的词云分析包括:分词.词 ...
Image Segmentation Using Deep Learning: A Survery
图像分割综述–论文翻译论文地址:https://arxiv.org/pdf/2001.05566.pdf 图像分割综述论文图像分割综述--论文翻译摘要介绍深度神经网络的介绍 Convo ...
综述论文翻译：A Review on Deep Learning Techniques Applied to Semantic Segmentation
综述论文翻译:A Review on Deep Learning Techniques Applied to Semantic Segmentation 近期主要在学习语义分割相关方法,计划将arXi ...
应用于语义分割问题的深度学习技术综述（语义分割综述）
应用于语义分割问题的深度学习技术综述基本介绍摘要 1 .引言 2.术语及背景概念 2.1 常见的深度网络架构 2.1.1 AlexNet 2.1.2 VGG 2.1.3 GoogLeNet 2.1 ...
应用于语义分割问题的深度学习技术综述
论文地址:https://arxiv.org/abs/1704.06857 应用于语义分割问题的深度学习技术综述摘要计算机视觉与机器学习研究者对图像语义分割问题越来越感兴趣.越来越多的应用场景需要 ...

工作108:swiper使用

工作108:swiper使用相关推荐

最新文章

热门文章