弹窗

src/views/newBI/components/dialog/index.vue

@@ -0,0 +1,198 @@
+
+<template>
+  <el-dialog
+    :visible="visible"
+    :width="width"
+    :title="title"
+    append-to-body
+    custom-class="bi_enterprise_dialog"
+    @close="$emit('update:visible',false)"
+  >
+    <!--    在这里引入组件-->
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">取 消</el-button>
+      <el-button type="primary" @click="visible = false">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+  components: {
+
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      required: true
+    },
+    value: {
+      type: Object,
+      default: () => ({})
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    width: {
+      type: String,
+      default: '600px'
+    }
+  }
+
+}
+
+</script>
+
+<style  lang="scss">
+.bi_enterprise_dialog {
+  background-color: #162b5c !important;
+  .el-dialog__header {
+   border-bottom: 1px solid #274589;
+  }
+  .el-dialog__title {
+    color: #fff !important;
+  }
+
+  .el-table {
+    background-color: transparent !important;
+  }
+
+  .el-table tr {
+    background-color: #202e89 !important;
+    color: #fff !important;
+  }
+
+  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+    background-color: #202e89 !important;
+  }
+
+  .el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
+    border-bottom: 1px solid rgba(36, 81, 192, 0.48) !important;
+  }
+
+  .el-table--border .el-table__cell {
+    border-right: 1px solid rgba(36, 81, 192, 0.48) !important;
+  }
+
+  .el-table--group, .el-table--border {
+    border-color: rgba(36, 81, 192, 0.48) !important;
+  }
+
+  .el-table::before, .el-table--group::after, .el-table--border::after {
+    background-color: rgba(36, 81, 192, 0.48) !important;
+  }
+
+  .el-table .el-table__header-wrapper tr th {
+    background-color: #1c2c96 !important;
+    color: #fff !important;
+  }
+
+  .pagination-container {
+    background-color: #202e89 !important;
+  }
+
+  .el-pagination {
+    color: #fff !important;
+  }
+
+  .el-pagination__total, .el-pagination__jump {
+    color: #fff !important;
+  }
+
+  .el-input__inner {
+    background: #202e89;
+    color: #FFFFFF;
+    border: 1px solid #ffffff60 !important;
+  }
+
+  .el-pagination.is-background .btn-prev, .el-pagination.is-background .btn-next, .el-pagination.is-background .el-pager li {
+    margin: 0 5px;
+    background-color: #4174d1 !important;
+    color: #ffffff !important;
+    min-width: 30px;
+    border-radius: 2px;
+  }
+
+  .ui-foot {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    height: 60px;
+    line-height: 60px;
+    background: none;
+    text-align: center;
+    z-index: 99;
+  }
+
+  .el-table--border th.el-table__cell {
+    border-bottom: 1px solid rgba(36, 81, 192, .48) !important;
+  }
+
+  .table-ui .tbg {
+    background: none;
+  }
+
+  .table-ui .tit {
+    background: none;
+    color: #FFFFFF;
+  }
+
+  .el-table__body tr.current-row > td.el-table__cell {
+    background: #1c2c96 !important;
+  }
+
+  .el-picker-panel {
+    color: #ffffff;
+    border: 1px solid #dfe4ed;
+    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+    background: #333aa8 !important;
+    border-radius: 4px;
+    line-height: 30px;
+    margin: 5px 0;
+  }
+
+  .el-card {
+    background: none !important;
+    color: #FFFFFF !important;
+  }
+
+  .el-card__header {
+    color: #FFFFFF !important;
+
+  }
+
+  .el-tree, .el-tree-node:focus > .el-tree-node__content, .el-tree-node__content:hover {
+    background-color: #202e89 !important;
+    color: #fff !important;
+  }
+
+  .bbg {
+    background: #202e89 !important;
+  }
+
+  .table-ui td{
+    font-size: 24px !important;
+  }
+
+  .app-container{
+    padding-bottom: 50px !important;
+  }
+
+  .el-scrollbar__wrap{
+    overflow-x: hidden !important;
+  }
+  .el-button--default{
+    background: none !important;
+    color: #FFFFFF;
+  }
+  .el-dialog__body{
+    color: #FFFFFF;
+  }
+
+}
+
+</style>

src/views/newBI/data_center.vue

@@ -228,12 +228,16 @@
         </div>
       </div>
     </div>
+
+    <dialog_demo/>
+
   </div>
 </template>
 
 <script>
 import autofit from 'autofit.js'
 import BlockTitle1 from './components/block_title1.vue'
+import Dialog_demo from './components/dialog/index.vue'
 import * as echarts from 'echarts'
 import vueSeamlessScroll from 'vue-seamless-scroll'
 import CountTo from 'vue-count-to'
@@ -246,7 +250,8 @@ export default {
   components: {
     BlockTitle1,
     vueSeamlessScroll,
-    CountTo
+    CountTo,
+    Dialog_demo
   },
   data() {
     return {