前端工作总结260-参照原型调整首页

简介: 前端工作总结260-参照原型调整首页
<el-card   v-if="task1.length!=0" style="width: 100%;height: 300px;">
      <el-carousel :interval="3000" indicator-position="outside">
        <el-carousel-item v-for="(item,index) in task1" :key="index">
        <!--  <div style="display: flex;justify-content: space-between;">
            <span style="float:left;margin-top: 40px;width: 86px;font-size: 16px;margin-left: 10%">等待处理</span>
            <el-link type="primary" @click="ListClick" style="margin-right: 10%">查看更多>></el-link>
          </div>
          <div style="clear: both">
            <h1 style="margin-top:10px;float:left;margin-left:32px;width: 423px;height: 26px;;font-weight: bold;font-size: 20px;margin-left: 10%">订单名称:{{item.name}}</h1>
            <p style="margin-top: 20px;font-size: 21px;margin-left:32px;font-size: 16px;float: right;margin-right: 10%;">状态:{{item.status_name}}</p>
          </div>
          <div style="clear: both">
            <p style="float:left;width: 275px;height: 21px;font-size: 14px;color: #707070;margin-left: 10%;">创建时间:{{item.created_at}}</p>
          </div>
          <div style="clear: both;display: flex;justify-content: space-between;">
            <p style="float:left;width: 275px;height: 21px;font-size: 16px;margin-left:10%;">账号:{{item.accounts.name}}</p>
            <el-button v-if="item.status_name=='待审核'" type="primary" style="width: 98px;margin-right: 10%;" @click="ListClick" >去审核</el-button>
            <el-button v-if="item.status_name=='待接收'" type="primary" style="width: 98px;margin-right: 10%;" @click="ListClick" >去接收</el-button>
          </div >-->
          <div style="display: flex;flex-direction: column;">
            <div style="display: flex;justify-content: space-between">
              <p style="margin-top: 32px;width: 86px;font-size: 16px;margin-left: 10%;
color: #858585;">等待处理</p>
              <el-link type="primary" @click="ListClick" style="margin-right: 10%">查看更多>></el-link>
            </div>
            <div style="display: flex;justify-content: space-between">
              <h1 style="margin-top: 26px;width: 86px;font-size: 20px;margin-left: 10%;
color: #333333;">订单名称:{{item.name}}</h1>
              <p style="margin-top: 20px;font-size: 21px;margin-left:32px;font-size: 18px;float: right;margin-right: 10%;
color: #F80606;">状态:{{item.status_name}}</p>
            </div>
            <div style="display: flex;justify-content: space-between">
            <span style="margin-top: 14px;width: 86px;font-size: 20px;margin-left: 10%;
color: #707070;">创建时间:{{item.created_at}}</span>
              <el-button v-if="item.status_name=='待审核'" type="primary" style="width: 98px;margin-right: 10%;" @click="ListClick" >去审核</el-button>
              <el-button v-if="item.status_name=='待接收'" type="primary" style="width: 98px;margin-right: 10%;" @click="ListClick" >去接收</el-button>
            </div>
            <div style="display: flex;">
              <div v-for="(account,index) in item.accounts" style="margin-top: 24px;margin-left: 10%;">
                <i class="el-icon-user" style="width: 36px;height: 36px"><span style="font-size: 16px;color: #707070;">{{account.name}} </span></i>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </el-card>

image.png

相关文章
|
6月前
|
前端开发 JavaScript C++
详解链表在前端的应用,顺便再弄懂原型和原型链!
该文章深入解析了链表在前端开发中的应用,并详细阐述了JavaScript中的原型和原型链的概念及其工作原理。
|
7月前
|
前端开发 JavaScript
前端必修之一 彻底理解原型和原型链
【8月更文挑战第2天】理解原型和原型链
113 11
|
10月前
|
前端开发 JavaScript
前端 js 经典:原型对象和原型链
前端 js 经典:原型对象和原型链
60 1
|
10月前
|
JavaScript 前端开发
前端 JS 经典:原型和原型链
前端 JS 经典:原型和原型链
73 0
|
前端开发
前端原型和原型链构造函数的使用
前端原型和原型链构造函数的使用
100 0
|
前端开发
前端原型和原型链构造函数的使用
前端原型和原型链构造函数的使用
83 0
|
前端开发
前端学习笔记202306学习笔记第三十六天-js-隐式原型和显式原型1
前端学习笔记202306学习笔记第三十六天-js-隐式原型和显式原型1
75 0
前端学习笔记202306学习笔记第三十六天-js-隐式原型和显式原型1
|
XML SQL 缓存
Spring Boot + vue-element 开发个人博客项目实战教程(二十六、前端首页统计完善及完结)
Spring Boot + vue-element 开发个人博客项目实战教程(二十六、前端首页统计完善及完结)
151 1
|
前端开发
前端原型和原型链constructor
前端原型和原型链constructor
100 0
|
前端开发
前端原型和原型链构造函数的使用
前端原型和原型链构造函数的使用
58 0

热门文章

最新文章

  • 1
    从前端视角聊聊通义灵码使用经验,如何更好地提升研发效率
  • 2
    VSCode AI提效工具,通义灵码前端开发体验
  • 3
    前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
  • 4
    【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
  • 5
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 6
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
  • 7
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
  • 8
    无前端经验如何快速搭建游戏站:使用 windsurf 从零到上线的详细指南
  • 9
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布