index.vue 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <template>
  2. <el-container class="flex-column">
  3. <div class="table-search" style="border-bottom: 0;">
  4. <search @success="handleSuccess"></search>
  5. <!-- <optionBtn @success="handleSuccess" :dataSelect="dataSelect" :dataSelectFull="dataSelectFull" type="3"></optionBtn> -->
  6. </div>
  7. <el-main class="nopadding">
  8. <div class="table-container">
  9. <tablePage ref="tablePage" @success="tableHandle" @successFull="tableHandleFull"></tablePage>
  10. </div>
  11. </el-main>
  12. </el-container>
  13. </template>
  14. <script>
  15. import search from './components/search';
  16. import optionBtn from './components/option';
  17. import tablePage from './components/table';
  18. export default {
  19. components: {
  20. search,tablePage,optionBtn
  21. },
  22. data() {
  23. return {
  24. }
  25. },
  26. methods: {
  27. tableHandle(data){
  28. this.dataSelect = data;
  29. },
  30. tableHandleFull(data){
  31. this.dataSelectFull = data;
  32. },
  33. handleSuccess(data){
  34. this.$refs.tablePage.upData(data)
  35. },
  36. handleClick(name){
  37. this.activeName = name;
  38. this.searchKey.type = name;
  39. this.$refs.tablePage.upData(this.searchKey)
  40. }
  41. }
  42. }
  43. </script>
  44. <style>
  45. .user-card-body{display: flex;align-items: center;justify-content: space-around;padding: 10px 0;}
  46. .user-card-body .card-item{text-align: center;}
  47. .user-card-body .card-item .card-num span{font-size: 12px;color: #666;font-weight: normal;}
  48. .user-card-body .card-tips{font-size: 12px;color: #666;display: flex;align-items: center;}
  49. .user-card-body .card-tips i{font-style: normal;margin-left: 5px;}
  50. .user-card-body .card-num{font-size: 20px;font-weight: bold;}
  51. .mb10{margin-bottom: 15px;}
  52. .news-title{
  53. font-size: 16px;
  54. color: #000;
  55. font-weight: bold;
  56. margin-bottom: 10px;
  57. display: flex;
  58. align-items: center;
  59. }
  60. .news-title::before{
  61. content: "";
  62. width: 4px;
  63. height: 16px;
  64. display: block;
  65. background-color: var(--el-color-primary);;
  66. margin-right: 8px;
  67. }
  68. </style>