前端工作小结75-修改表头按钮样式

简介: 前端工作小结75-修改表头按钮样式
<el-card>
      <div style="display: flex;justify-content: space-between">
      <h1 style="float: left;margin-top: 34px;margin-left: 32px;">我的任务</h1>
      <el-button   style="float: right;margin-top: 14px;margin-right: 10px;" type="primary" @click="TaskClick" >任务列表</el-button>
      </div>
      <div  style="width: 100%;clear: both;display: flex;justify-content: center">
        <ul  style="float:left;width: 100%;">
          <li style="float:left;list-style: none;width: 16%;border-right:1px solid  #000000;text-align: center"><h1  style="font-size:30px;text-align: center">{{task_status.completed}}</h1><h1 style="font-size:20px;text-align: center;">待审核</h1></li>
          <li style="float:left;list-style: none;width: 16%;border-right:1px solid  #000000;text-align: center"><h1 style="font-size:30px;text-align: center">{{task_status.release}}</h1><h1 style="font-size:20px;text-align: center;">待修改</h1></h1></li>
          <li style="float:left;list-style: none;width: 16%;border-right:1px solid  #000000;text-align: center"><h1 style="font-size:30px;text-align: center">{{task_status.returned}}</h1><h1 style="font-size:20px;text-align: center;">进行中</h1></h1></li>
          <li style="float:left;list-style: none;width: 16%;border-right:1px solid  #000000;text-align: center"><h1 style="font-size:30px;text-align: center">{{task_status.underway}}</h1><h1 style="font-size:20px;text-align: center;">待结算</h1></h1></li>
          <li style="float:left;list-style: none;width: 16%;border-right:1px solid  #000000;text-align: center"><h1 style="font-size:30px;text-align: center">{{task_status.wait_confirm}}</h1><h1 style="font-size:20px;text-align: center;">已完成</h1></li>
          <li style="float:left;list-style: none;width: 16%;border-right:none;;text-align: center"><h1 style="font-size:30px;text-align: center">{{task_status.wait_relevance}}</h1><h1 style="font-size:20px;text-align: center;">已取消</h1></li>
        </ul>
      </div>
    </el-card>

image.png

相关文章
|
1天前
|
JavaScript 前端开发
vue前端下载,实现点击按钮弹出本地窗口,选择自定义保存路径
这个不用代码实现(网上也找不到方法可以调出另存为窗口),更改浏览器设置就可以,否则,现在的浏览器都是默认直接保存到下载路径中
83 3
|
1天前
|
前端开发
【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
【1月更文挑战第17天】【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
|
1天前
|
前端开发 JavaScript API
前端 excelex 包可将数据保存为 xls、xlsx、csv、txt 文件(支持单元格样式、合并单元格等)
前端 excelex 包可将数据保存为 xls、xlsx、csv、txt 文件(支持单元格样式、合并单元格等)
65 1
|
7月前
|
前端开发 数据可视化 网络协议
GIS前端-图形样式编辑
GIS前端-图形样式编辑
36 0
|
7月前
|
前端开发 JavaScript
前端基础 - JavaScript修改标签样式的属性值
前端基础 - JavaScript修改标签样式的属性值
36 0
|
1天前
|
开发框架 前端开发 数据安全/隐私保护
【Flutter 前端技术开发专栏】Flutter 中的布局与样式设计
【4月更文挑战第30天】本文探讨了Flutter的布局和样式设计,关键点包括:1) 布局基础如Column、Row和Stack用于创建复杂结构;2) Container、Center和Expanded等常用组件的作用;3) Theme和Decoration实现全局样式和组件装饰;4) 实战应用如登录界面和列表页面的构建;5) 响应式布局利用MediaQuery和弹性组件适应不同屏幕;6) 性能优化,避免过度复杂设计。了解并掌握这些,有助于开发者创建高效美观的Flutter应用。
【Flutter 前端技术开发专栏】Flutter 中的布局与样式设计
|
1天前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
|
1天前
|
前端开发 开发者 UED
【Flutter前端技术开发专栏】Flutter中的图标、字体与样式管理
【4月更文挑战第30天】本文介绍了在Flutter中管理图标、字体和样式的做法。Flutter提供`Icons`类用于内置矢量图标,支持第三方图标库如FontAwesome。自定义字体可通过添加字体文件至`assets`目录并配置`pubspec.yaml`,然后使用`TextStyle`设置。借助`ThemeData`,开发者能统一管理应用主题样式,局部样式可覆盖全局。通过集中管理样式,提升代码复用性和应用一致性。
【Flutter前端技术开发专栏】Flutter中的图标、字体与样式管理
|
1天前
|
前端开发 UED 开发者
【Flutter前端技术开发专栏】Flutter中的主题与样式主题化
【4月更文挑战第30天】Flutter是一款由谷歌开发的开源移动应用框架,因其高性能和跨平台能力受到开发者青睐。本文聚焦Flutter中的主题与样式主题化,阐述如何通过`ThemeData`定义和设置全局主题,以及如何利用`TextStyle`、`AppBarTheme`和`ButtonTheme`定制文本、AppBar和按钮样式。了解并运用这些知识,能提升应用的统一风格和用户体验,助力Flutter开发。
【Flutter前端技术开发专栏】Flutter中的主题与样式主题化
|
1天前
|
JSON JavaScript 前端开发
前端框架vue的样式操作,以及vue提供的属性功能应用实战
前端框架vue的样式操作,以及vue提供的属性功能应用实战