MyToDo.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758
  1. <template>
  2. <div id="home">
  3. <!-- 第一行 -->
  4. <a-row type="flex" class="topRow">
  5. <!-- 用户信息 -->
  6. <a-col :span="4" :order="1" class="user colItem">
  7. <a-tabs default-active-key="1">
  8. <a-tab-pane key="1" tab="我的" class="clearfix">
  9. <div class="userImg fl">
  10. <img src="../../assets/user.jpg" alt="" />
  11. </div>
  12. <div class="userInfo fr">
  13. <span class="department">{{ userInfo.realname }}</span>
  14. <span>账号:{{ userInfo.username }}</span>
  15. <span class="telphone">Tel:{{ userInfo.telphone }}</span>
  16. </div>
  17. </a-tab-pane>
  18. </a-tabs>
  19. </a-col>
  20. <!-- 消息 -->
  21. <a-col :span="4" :order="2" class="messages colItem">
  22. <a-tabs default-active-key="1">
  23. <a-tab-pane key="1" tab="消息" class="msgBox clearfix">
  24. <div class="wait fl">
  25. <span> {{ todoList.length }}</span>
  26. <p>我的待办</p>
  27. </div>
  28. <div class="sysMsg fr">
  29. <span>{{ msgTotal }}</span>
  30. <p>系统消息</p>
  31. </div>
  32. </a-tab-pane>
  33. </a-tabs>
  34. </a-col>
  35. <!-- OA工作台按钮 -->
  36. <a-col :span="8" :order="3" class="oaBtn colItem">
  37. <a-tabs default-active-key="1">
  38. <a-tab-pane key="1" tab="OA工作台">
  39. <div class="oaButton">
  40. <a class="oaItem" v-for="(item, index) in activeKeyAll" :key="index.id" @click.prevent="aClick(item)">
  41. <span>
  42. <img :src="item.iconAddress" />
  43. </span>
  44. <p>{{ item.name }}</p>
  45. </a>
  46. </div>
  47. </a-tab-pane>
  48. </a-tabs>
  49. </a-col>
  50. <!-- 日历 -->
  51. <a-col :span="7" :order="4" class="date colItem">
  52. <div>
  53. <a-calendar :fullscreen="false" />
  54. </div>
  55. </a-col>
  56. </a-row>
  57. <a-row class="oaTable" :guatter="24">
  58. </a-row>
  59. <!-- 新闻类 -->
  60. <a-row type="flex" class="news">
  61. <!-- 企业公告 -->
  62. <a-col :span="9" :order="1" class="notice">
  63. <a-tabs default-active-key="1">
  64. <a-tab-pane key="1" tab="企业公告">
  65. <div class="contain">
  66. <ul class="clearfix">
  67. <li class="fl">
  68. <a href="https://m.thepaper.cn/baijiahao_14855630" class="clearfix">
  69. <span class="department fl">[人事]</span>
  70. <span class="info fl">王健林称万达高管全部换乘红旗汽车</span>
  71. <span class="time fr">2021-10-11</span>
  72. <span class="person fr">王健林</span>
  73. </a>
  74. </li>
  75. <li class="fl">
  76. <a href="https://baijiahao.baidu.com/s?id=1713375072968520817&wfr=spider&for=pc" class="clearfix">
  77. <span class="department fl">[运动]</span>
  78. <span class="info fl">德国成为首支晋级卡塔尔世界杯球队</span>
  79. <span class="time fr">2021-10-12</span>
  80. <span class="person fr">卡塔尔</span>
  81. </a>
  82. </li>
  83. <li class="fl">
  84. <a href="https://news.sina.cn/kx/2021-10-12/detail-iktzscyx9169344.d.html" class="clearfix">
  85. <span class="department fl">[财务]</span>
  86. <span class="info fl">浙江女子围观宰鸭后确诊鹦鹉热</span>
  87. <span class="time fr">2021-10-11</span>
  88. <span class="person fr">鹦鹉</span>
  89. </a>
  90. </li>
  91. <li class="fl">
  92. <a href="https://baijiahao.baidu.com/s?id=1713366904170468936&wfr=spider&for=pc" class="clearfix">
  93. <span class="department fl">[人事]</span>
  94. <span class="info fl">李铁:有没有自己的球迷是巨大区别</span>
  95. <span class="time fr">2021-10-11</span>
  96. <span class="person fr">李铁</span>
  97. </a>
  98. </li>
  99. <li class="fl">
  100. <a href="https://haokan.baidu.com/v?pd=wisenatural&vid=15789314381003157969" class="clearfix">
  101. <span class="department fl">[人事]</span>
  102. <span class="info fl">今年为什么会出现南旱北涝</span>
  103. <span class="time fr">2021-10-11</span>
  104. <span class="person fr">某某</span>
  105. </a>
  106. </li>
  107. </ul>
  108. </div>
  109. </a-tab-pane>
  110. </a-tabs>
  111. </a-col>
  112. <!-- 我的计划 -->
  113. <a-col :span="7" :order="2" class="plan">
  114. <a-tabs default-active-key="1">
  115. <a-tab-pane key="1" tab="我的计划">
  116. <!-- 数据显示 -->
  117. <div class="total clearfix">
  118. <div class="left fl">
  119. <span>上月我的计划:<strong>0</strong>份</span>
  120. <span>我的计划:<strong>1</strong>份</span>
  121. <span>已阅计划:<strong>1</strong>份</span>
  122. </div>
  123. <div class="right fr">
  124. <span>上月他人计划:<strong>0</strong>份</span>
  125. <span>他人计划:<strong>2</strong>份</span>
  126. <span>已回计划:<strong>0</strong>份</span>
  127. </div>
  128. </div>
  129. <div class="tabsLinks">
  130. <a href="">我的计划</a>
  131. <a-divider type="vertical" />
  132. <a href="">计划管理</a>
  133. <a-divider type="vertical" />
  134. <a href="">计划模块</a>
  135. </div>
  136. </a-tab-pane>
  137. </a-tabs>
  138. </a-col>
  139. <!-- 友情链接 -->
  140. <a-col :span="7" :order="3" class="link">
  141. <a-tabs default-active-key="1">
  142. <a-tab-pane key="1" tab="友情链接">
  143. <div class="linkBtn">
  144. <button><a href="https://www.yonyou.com/">用友</a></button>
  145. <button><a href="https://hc.yonyou.com/product.php?id=5">U8</a></button>
  146. <button><a href="http://www.dakabg.com/">哒咔办公</a></button>
  147. <button><a href="https://www.dingtalk.com/?lwfrom=2017120202091367000000111&source=1001">钉钉</a></button>
  148. <button><a href="https://www.11467.com/qiye/38026153.htm">品医</a></button>
  149. <button><a href="https://www.antgroup.com/">蚂蚁集团</a></button>
  150. </div>
  151. </a-tab-pane>
  152. </a-tabs>
  153. </a-col>
  154. </a-row>
  155. <!-- 我的待办表 -->
  156. <a-row :gutter="24" class="todoTable">
  157. <a-col :sm="24" :md="24" :xl="24" :style="{ marginBottom: '24px' }" class="tableInfo">
  158. <a-tabs default-active-key="1">
  159. <a-tab-pane key="1" tab="我的待办">
  160. <a-table
  161. :scroll="scroll"
  162. bordered
  163. :loading="loading"
  164. rowKey="id"
  165. :dataSource="todoList"
  166. :pagination="ipagination"
  167. @change="handleTableChange"
  168. ref="table"
  169. size="small"
  170. >
  171. <a-table-column title="#" :width="50">
  172. <template slot-scope="t, r, i">
  173. <span>{{ i + 1 }}</span>
  174. </template>
  175. </a-table-column>
  176. <a-table-column title="任务名称" data-index="name" :width="150" align="center">
  177. <template slot-scope="t">
  178. <span>{{ t }}</span>
  179. </template>
  180. </a-table-column>
  181. <a-table-column title="所属流程" data-index="processName" :width="150" align="center">
  182. <template slot-scope="t">
  183. <span>{{ t }}</span>
  184. </template>
  185. </a-table-column>
  186. <a-table-column title="委托代办人" data-index="owner" align="center" :width="150">
  187. <template slot-scope="t">
  188. <span>{{ t }}</span>
  189. </template>
  190. </a-table-column>
  191. <a-table-column title="流程发起人" data-index="applyer" :width="150" align="center">
  192. <template slot-scope="t">
  193. <span>{{ t }}</span>
  194. </template>
  195. </a-table-column>
  196. <a-table-column
  197. title="优先级"
  198. data-index="priority"
  199. :width="110"
  200. align="center"
  201. key="so"
  202. :sorter="(a, b) => a.priority - b.priority"
  203. >
  204. <template slot-scope="t">
  205. <span v-if="t == 0" style="color: green;">普通</span>
  206. <span v-else-if="t == 1" style="color: orange;">重要</span>
  207. <span v-else-if="t == 2" style="color: red;">紧急</span>
  208. <span v-else style="color: #999;">无</span>
  209. </template>
  210. </a-table-column>
  211. <a-table-column
  212. title="状态"
  213. data-index="isSuspended"
  214. :width="100"
  215. align="center"
  216. key="z"
  217. :sorter="(a, b) => (Boolean(a.isSuspended) ? 0 : 1 - Boolean(b.isSuspended) ? 0 : 1)"
  218. >
  219. <template slot-scope="t">
  220. <span v-if="!Boolean(t)" style="color: green;">已激活</span>
  221. <span v-if="Boolean(t)" style="color: orange;">已挂起</span>
  222. </template>
  223. </a-table-column>
  224. <a-table-column title="创建时间" data-index="createTime" :width="200" align="center">
  225. <template slot-scope="t">
  226. <span>{{ t }}</span>
  227. </template>
  228. </a-table-column>
  229. <a-table-column title="操作" data-index align="center" :width="100">
  230. <template slot-scope="t, r, i">
  231. <a href="javascript:void(0);" @click="toDealWith()" style="color: blue">去处理</a>
  232. </template>
  233. </a-table-column>
  234. </a-table>
  235. </a-tab-pane>
  236. </a-tabs>
  237. </a-col>
  238. </a-row>
  239. <!-- 按钮弹框 -->
  240. <a-modal v-model="lcModal.visible" :title="lcModal.Title" :footer="null" :maskClosable="false" width="100%">
  241. <component
  242. :disabled="lcModal.disabled"
  243. v-if="lcModal.visible"
  244. :is="lcModal.formComponent"
  245. :processData="lcModal.processData"
  246. :isNew="lcModal.isNew"
  247. @afterSubmit="afterSub"
  248. @close=";(lcModal.visible = false), (lcModal.disabled = false)"
  249. >
  250. </component>
  251. </a-modal>
  252. </div>
  253. </template>
  254. <script>
  255. import { mapGetters } from 'vuex'
  256. import { getAction } from '@/api/manage'
  257. export default {
  258. name: 'Home',
  259. data() {
  260. return {
  261. userInfo: this.$store.getters.userInfo,
  262. todoList: [],
  263. activeKeyAll: [],
  264. msg1Count: '0',
  265. msg2Count: '0',
  266. url: {
  267. listCementByUser: '/sys/annountCement/listByUser'
  268. },
  269. //按钮弹框
  270. lcModal: {
  271. title: '',
  272. visible: false,
  273. disabled: false,
  274. formComponent: null,
  275. isNew: false
  276. },
  277. //
  278. data: [], // 表单数据
  279. total: 0, // 表单数据总数
  280. ipagination: {
  281. current: 1,
  282. pageSize: 3,
  283. pageSizeOptions: ['10', '20', '30'],
  284. showTotal: (total, range) => {
  285. return range[0] + '-' + range[1] + ' 共' + total + '条'
  286. },
  287. showQuickJumper: true,
  288. showSizeChanger: true,
  289. total: 0
  290. }
  291. }
  292. },
  293. created() {
  294. this.getDataList()
  295. this.getActiveKeyAll()
  296. },
  297. computed: {
  298. // 系统消息计算
  299. msgTotal() {
  300. return parseInt(this.msg1Count) + parseInt(this.msg2Count)
  301. },
  302. scroll: function() {
  303. var width = window.innerWidth
  304. // ant-table
  305. let $antTable = window.document.getElementsByClassName('ant-table')
  306. if ($antTable[0]) {
  307. width = $antTable[0].clientWidth
  308. }
  309. console.log('$antTable', $antTable)
  310. return {
  311. // x:'max-content',
  312. x: 1160,
  313. y: window.innerHeight / 2
  314. }
  315. },
  316. innerHeight: function() {
  317. var innerHeight = window.innerHeight
  318. return innerHeight
  319. }
  320. },
  321. mounted() {
  322. this.loadData()
  323. },
  324. methods: {
  325. loadData() {
  326. try {
  327. // 获取系统消息
  328. getAction(this.url.listCementByUser)
  329. .then(res => {
  330. if (res.success) {
  331. this.msg1Count = res.result.anntMsgTotal
  332. this.msg2Count = res.result.sysMsgTotal
  333. console.log(this.msg2Count)
  334. }
  335. })
  336. .catch(error => {
  337. console.log('系统消息通知异常', error) // 这行打印permissionName is undefined
  338. this.stopTimer = true
  339. console.log('清理timer')
  340. })
  341. } catch (err) {
  342. this.stopTimer = true
  343. console.log('通知异常', err)
  344. }
  345. },
  346. ...mapGetters(['nickname', 'avatar']),
  347. // 代办数据
  348. getDataList() {
  349. this.loading = true
  350. this.postFormAction('/actTask/todoList', {}).then(res => {
  351. this.loading = false
  352. if (res.success) {
  353. this.todoList = res.result || []
  354. console.log('首页 我的待办数字:', this.todoList.length)
  355. this.total = this.data.leading
  356. console.log(this.data)
  357. }
  358. })
  359. },
  360. // 获取 OA 按钮
  361. getActiveKeyAll() {
  362. this.postFormAction('/activiti_process/listData', { status: 1, roles: true }).then(res => {
  363. this.activeKeyAll = []
  364. if (res.success) {
  365. var result = res.result || []
  366. if (result.length > 0) {
  367. this.activeKeyAll = result
  368. // this.activeKeyAll.push.apply(this.activeKeyAll,result);
  369. // console.log(this.activeKeyAll)
  370. console.log('OA 4个按钮被渲染')
  371. }
  372. }
  373. })
  374. },
  375. //OA图标点击事件
  376. aClick(v) {
  377. //点击的该项按钮
  378. console.log(v)
  379. // this.$refs.modal.add("1")
  380. if (!v.routeName) {
  381. this.$message.warning('该流程信息未配置表单,请联系开发人员!')
  382. return
  383. }
  384. if (v.routeName.indexOf('外部表单') != -1) {
  385. alert('调用其他项目页面')
  386. } else if (v.routeName.indexOf('自定义') != -1) {
  387. this.lcModal.disabled = false
  388. let com = { component: () => import(`@/views/activiti/form/demoForm2`) }
  389. this.lcModal.formComponent = com.component
  390. this.lcModal.title = '发起流程:' + v.name
  391. this.lcModal.isNew = true
  392. this.lcModal.processData = v
  393. this.lcModal.visible = true
  394. } else {
  395. this.lcModal.disabled = false
  396. this.lcModal.formComponent = this.getFormComponent(v.routeName).component
  397. this.lcModal.title = '发起流程:' + v.name
  398. this.lcModal.isNew = true
  399. this.lcModal.processData = v
  400. this.lcModal.visible = true
  401. }
  402. console.log('发起', v)
  403. // this.getDataList()
  404. },
  405. //提交后
  406. afterSub(formData) {
  407. this.lcModal.visible = false
  408. },
  409. // 分页、排序、筛选变化时触发
  410. handleTableChange(pagination, filters, sorter) {
  411. if (Object.keys(sorter).length > 0) {
  412. this.isorter.column = sorter.field
  413. this.isorter.order = sorter.order == 'ascend' ? 'asc' : 'desc'
  414. }
  415. this.ipagination = pagination
  416. // this.loadData();
  417. },
  418. // 去处理按钮
  419. toDealWith() {
  420. this.$router.push({ path: '/activiti/todoManage' })
  421. }
  422. }
  423. }
  424. </script>
  425. <style lang="less" scoped>
  426. ul {
  427. list-style: none;
  428. }
  429. a {
  430. text-decoration: none;
  431. }
  432. .fl {
  433. float: left;
  434. }
  435. .fr {
  436. float: right;
  437. }
  438. /*清除浮动*/
  439. .clearfix:before,
  440. .clearfix:after {
  441. content: '';
  442. display: table;
  443. }
  444. .clearfix:after {
  445. clear: both;
  446. overflow: hidden;
  447. }
  448. .clearfix {
  449. *zoom: 1;
  450. }
  451. /deep/ .ant-row-flex {
  452. background-color: white;
  453. }
  454. // 年月选择消失
  455. /deep/ .ant-fullcalendar-header {
  456. display: none;
  457. }
  458. // 线消息
  459. /deep/ .ant-fullcalendar {
  460. border-top: none;
  461. }
  462. /deep/ .ant-fullcalendar-calendar-body {
  463. border-radius: 8px;
  464. background-size: cover;
  465. background-position: center;
  466. opacity: 0.8;
  467. -webkit-font-smoothing: antialiased;
  468. }
  469. /deep/ .ant-fullcalendar-calendar-body {
  470. padding: 0;
  471. }
  472. /deep/ .ant-fullcalendar {
  473. font-weight: 700;
  474. }
  475. /deep/ .ant-fullcalendar-column-header {
  476. padding-top: 10px;
  477. }
  478. /deep/ .ant-fullcalendar table {
  479. height: 237px;
  480. }
  481. /deep/ .ant-card-head {
  482. padding: 0;
  483. }
  484. /deep/ .ant-card-head-title {
  485. padding: 0;
  486. }
  487. /deep/ .ant-tabs-nav .ant-tabs-tab-active {
  488. font-size: 16px;
  489. }
  490. /deep/ .ant-tabs-ink-bar {
  491. height: 4px;
  492. padding: 0 4px;
  493. }
  494. /deep/ .ant-tabs-bar {
  495. margin-bottom: 30px;
  496. }
  497. #home {
  498. .topRow {
  499. width: 100%;
  500. background-color: #f0f2f5;
  501. .user {
  502. padding: 10px;
  503. background-color: white;
  504. margin-right: 1%;
  505. .userImg {
  506. width: 80px;
  507. height: 80px;
  508. img {
  509. border-radius: 6px;
  510. width: 100%;
  511. }
  512. }
  513. // 用户信息
  514. .userInfo {
  515. font-size: 14px;
  516. background-color: white;
  517. // 用户
  518. span {
  519. display: block;
  520. line-height: 32px;
  521. }
  522. .department {
  523. font-size: 14px;
  524. color: rgb(71, 70, 70);
  525. }
  526. }
  527. }
  528. // 消息
  529. .messages {
  530. padding: 20px;
  531. background-color: white;
  532. margin-right: 1%;
  533. .msgBox {
  534. padding: 0 20px;
  535. span {
  536. font-size: 38px;
  537. color: #fa6b5c;
  538. text-shadow: 2px 2px 1px rgb(94, 94, 94);
  539. }
  540. p {
  541. margin-top: 10px;
  542. font-size: 16px;
  543. }
  544. }
  545. }
  546. // 工作台按钮
  547. .oaBtn {
  548. background-color: white;
  549. padding: 20px;
  550. margin-right: 1%;
  551. .oaButton {
  552. display: flex;
  553. flex-flow: row wrap;
  554. text-align: center;
  555. .oaItem {
  556. line-height: 0px;
  557. // width: 25%;
  558. width: calc((100% - 100px) / 3);
  559. justify-content: space-around;
  560. flex-direction: column;
  561. align-items: center;
  562. margin-bottom: 10px;
  563. margin-right: 1px;
  564. // 图
  565. span {
  566. margin: 0 aotu;
  567. border: transparent;
  568. display: flex;
  569. align-items: center;
  570. justify-content: center;
  571. position: relative;
  572. img {
  573. width: 34px;
  574. height: 34px;
  575. }
  576. }
  577. // 文字
  578. p {
  579. margin-top: 14px;
  580. font-size: 14px;
  581. color: rgb(128, 127, 127);
  582. font-weight: 400;
  583. letter-spacing: 1px;
  584. }
  585. }
  586. }
  587. }
  588. .date {
  589. padding: 20px;
  590. background-color: white;
  591. }
  592. // 右分割线
  593. /deep/ .ant-divider {
  594. height: 240px;
  595. width: 2px;
  596. background-color: #eaeaea;
  597. float: right;
  598. }
  599. }
  600. .news {
  601. background-color: #f0f2f5;
  602. margin: 20px 0;
  603. .notice {
  604. background-color: white;
  605. padding: 20px;
  606. margin-right: 1.22%;
  607. .contain {
  608. ul {
  609. margin: 0;
  610. padding: 0;
  611. padding-left: 20px;
  612. width: 100%;
  613. li {
  614. width: 100%;
  615. display: inline-block;
  616. // background-color: #fa6b5c;
  617. line-height: 40px;
  618. a {
  619. font-size: 14px;
  620. color: #444;
  621. .department {
  622. margin-right: 12px;
  623. }
  624. .info {
  625. // margin-right:12px;
  626. }
  627. .person {
  628. color: #333;
  629. }
  630. .time {
  631. color: rgb(164, 164, 164);
  632. margin: 0 12px 0 20px;
  633. }
  634. }
  635. a:hover {
  636. color: #1890ff;
  637. }
  638. }
  639. }
  640. }
  641. }
  642. // 我的计划
  643. .plan {
  644. padding: 20px;
  645. background-color: white;
  646. margin-right: 1.22%;
  647. .total {
  648. // height: 160px;
  649. // background-color: #e7c1bd;
  650. border-bottom: 1px dashed #ccc;
  651. span {
  652. display: block;
  653. line-height: 40px;
  654. strong {
  655. text-decoration: underline;
  656. margin-right: 6px;
  657. }
  658. }
  659. .left {
  660. margin: 0 0 0 30px;
  661. }
  662. .right {
  663. margin: 0 30px 0 0;
  664. }
  665. }
  666. .tabsLinks {
  667. // height: 50px;
  668. margin: 30px 0 0 20px;
  669. // background-color: rgb(138, 191, 226);
  670. a {
  671. color: rgb(23, 119, 184);
  672. margin: 0 6px;
  673. }
  674. a:hover {
  675. color: #fa6b5c;
  676. }
  677. /deep/ .ant-divider,
  678. .ant-divider-vertical {
  679. width: 2px;
  680. background-color: rgb(200, 200, 200);
  681. }
  682. }
  683. }
  684. // 友情链接
  685. .link {
  686. padding: 20px;
  687. background-color: white;
  688. .linkBtn {
  689. padding: 10px 30px;
  690. display: flex;
  691. flex-flow: row wrap;
  692. text-align: center;
  693. button {
  694. width: calc((100% - 2px) / 4);
  695. border-radius: 4px;
  696. border: none;
  697. display: flex;
  698. margin: 10px 8px;
  699. justify-content: space-around;
  700. align-items: center;
  701. background-color: rgba(102, 155, 188, 0.8);
  702. letter-spacing: 1px;
  703. padding: 6px 10px;
  704. a {
  705. color: white;
  706. font-size: 12px;
  707. }
  708. }
  709. button:hover {
  710. background-color: #003049;
  711. color: white;
  712. box-shadow: 1px 1px 3px #333;
  713. }
  714. }
  715. }
  716. }
  717. .todoTable {
  718. background-color: #f0f2f5;
  719. padding: 20px;
  720. .tableInfo {
  721. background-color: white;
  722. }
  723. }
  724. }
  725. </style>