index.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <template>
  2. <div class="body">
  3. <div class="db_bg">
  4. <div class="db_header">
  5. <div class="db_header_title"></div>
  6. </div>
  7. <div class="db_body">
  8. <dataCenter :oid="oid" :org="org"/>
  9. </div>
  10. </div>
  11. </div>
  12. </template>
  13. <script>
  14. import dataCenter from './dataCenter'
  15. export default {
  16. components:{
  17. dataCenter
  18. },
  19. data() {
  20. return {
  21. type: 1,
  22. oid: this.$route.query.oid,
  23. org: this.$route.query.org,
  24. scourseLength: 0,
  25. };
  26. },
  27. methods: {
  28. setType(type) {
  29. this.type = type;
  30. },
  31. getData() {
  32. return console.log('获取数据')
  33. // this.isLoading = true;
  34. // let params = [
  35. // {
  36. // oid: this.oid,
  37. // org: this.org,
  38. // },
  39. // ];
  40. // this.ajax
  41. // .post(this.$store.state.api + "getCourseLength", params)
  42. // .then((res) => {
  43. // this.isLoading = false;
  44. // this.scourseLength = res.data[0][0].count;
  45. // this.$forceUpdate();
  46. // })
  47. // .catch((err) => {
  48. // this.isLoading = false;
  49. // console.error(err);
  50. // });
  51. },
  52. },
  53. mounted() {
  54. // this.getData();
  55. },
  56. }
  57. </script>
  58. <style scoped>
  59. .body {
  60. height: 100%;
  61. width: 100%;
  62. min-width: 1550px;
  63. min-height: 750px;
  64. background: #e7f3fe;
  65. display: flex;
  66. align-items: center;
  67. justify-content: center;
  68. }
  69. .db_bg {
  70. width: calc(100% - 30px);
  71. height: calc(100% - 30px);
  72. /* padding: 10px; */
  73. border-radius: 8px;
  74. box-sizing: border-box;
  75. border: 2px solid #3681FC3D;
  76. box-shadow: 20px 20px 80px 0px #3681FC3D inset;
  77. }
  78. .db_header {
  79. width: 100%;
  80. height: 50px;
  81. display: flex;
  82. justify-content: center;
  83. position: relative;
  84. /* background: #fff; */
  85. align-items: center;
  86. }
  87. .db_header:after {
  88. content: "";
  89. position: absolute;
  90. width: 50%;
  91. height: 2px;
  92. bottom: 0.5px;
  93. left: 50%;
  94. z-index: 1;
  95. background: linear-gradient(90deg, #9ac1fd 0%, rgba(134, 179, 253, 0) 91.13%);
  96. }
  97. .db_header_title {
  98. /* background-image: url("../../../assets/icon/test/data_title.png"); */
  99. background-image: url("../../../../assets/icon/test/data_title2.png");
  100. width: 290px;
  101. height: 100%;
  102. background-size: 100% 100%;
  103. }
  104. .db_body {
  105. height: calc(100% - 50px);
  106. width: 100%;
  107. overflow: auto;
  108. /* background: rgb(231, 242, 252); */
  109. }
  110. </style>