首页

src/views/system/index/page.vue

@@ -1,65 +1,186 @@
 <template>
   <d2-container class="page">
-    <d2-page-cover>
-      <d2-icon-svg class="logo" name="d2-admin"/>
-      <template slot="footer">
-        <div class="btn-group">
-          <span class="btn-group__btn" @click="$open('https://github.com/d2-projects')">开源组织</span> |
-          <span class="btn-group__btn" @click="$open('https://d2.pub/zh/doc/d2-admin')">文档</span> |
-          <span class="btn-group__btn" @click="$open('https://github.com/d2-projects/d2-admin-start-kit')">简化版</span> |
-          <span class="btn-group__btn" @click="$open('https://juejin.im/user/57a48b632e958a006691b946/posts')">掘金</span> |
-          <el-popover :width="172" trigger="hover">
-            <p class="d2-mt-0 d2-mb-10">今日前端</p>
-            <img src="./image/qr@2x.png" style="width: 172px;">
-            <span slot="reference" class="btn-group__btn btn-group__btn--link">
-              <d2-icon name="weixin"/>
-              微信公众号
-            </span>
-            <p style="font-size: 12px; margin-top: 0px; margin-bottom: 0px;">
-              官方公众号，主要推送前端技术类文章、框架资源、学习教程，以及 D2 系列项目更新信息
-            </p>
-          </el-popover>
-        </div>
-        <d2-badge/>
-        <d2-help/>
-      </template>
-    </d2-page-cover>
+    <el-row class="content">
+      <div class="page-content left-content">
+        <span class="content-title">报警待处理</span>
+        <el-table
+          :data="tableData"
+          class="table-content"
+          @row-click="jumpDetails"
+          :row-class-name="tableRowClassName"
+        >
+          <el-table-column
+            prop="name"
+            align="center"
+            label="仓库名称"
+          ></el-table-column>
+          <el-table-column
+            prop="itemName"
+            label="仓房名称"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            prop="submitter"
+            label="报警时间"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            prop="reportDate"
+            align="center"
+            label="已处理等待时常"
+          ></el-table-column>
+          <el-table-column align="center" label="操作">
+            <el-button type="text" size="small" icon="el-icon-edit"
+              >编辑</el-button
+            >
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="page-content right-content">
+        <span class="content-title">通知公告</span>
+        <ul class="tzggList">
+          <li v-for="(item, index) in tzggListData" :key="index">
+            <span>{{ item.name }}</span>
+            <span class="tzggListLi">2011-10-19 11:11:11</span>
+          </li>
+        </ul>
+      </div>
+    </el-row>
+    <el-row class="content contentX">
+      <div class="page-content left-content">
+        <span class="content-title">出入库数量趋势</span>
+      </div>
+      <div class="page-content right-content">
+        <span class="content-title">库区报警排名</span>
+      </div>
+    </el-row>
   </d2-container>
 </template>
 
 <script>
-import D2Badge from './components/d2-badge'
-import D2Help from './components/d2-help'
-import D2PageCover from './components/d2-page-cover'
 export default {
-  components: {
-    D2Badge,
-    D2Help,
-    D2PageCover
-  }
-}
+  data() {
+    return {
+      tableData: [{ name: "哈哈哈" }, { name: "哈哈哈" }],
+      tzggListData: [{ name: "哈哈哈" }, { name: "哈哈哈" }],
+    };
+  },
+  methods: {
+    jumpDetails() {},
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "one-row";
+      } else {
+        return "two-row";
+      }
+    },
+  },
+  created() {},
+};
 </script>
 
 <style lang="scss" scoped>
 .page {
-  .logo {
-    width: 120px;
-  }
-  .btn-group {
-    color: $color-text-placehoder;
-    font-size: 12px;
-    line-height: 12px;
-    margin-top: 0px;
-    margin-bottom: 20px;
-    .btn-group__btn {
-      color: $color-text-sub;
-      &:hover {
-        color: $color-text-main;
-      }
-      &.btn-group__btn--link {
-        color: $color-primary;
-      }
-    }
+  width: 100%;
+  height: 100%;
+  color: #dafaff;
+  background-image: url("./image/bg.png") no-repeat;
+  ::v-deep.el-table::before {
+    background-color: #042c59 !important;
+  }
+  ::v-deep.el-table td.el-table__cell,
+  ::v-deep.el-table th.el-table__cell.is-leaf {
+    border: 0px !important;
+  }
+  ::v-deep.el-table th.el-table__cell {
+    background-color: #042c59;
+  }
+  ::v-deep.el-table--enable-row-hover
+    .el-table__body
+    tr:hover
+    > td.el-table__cell {
+    background-color: #1460b0;
+  }
+  ::v-deep.el-table thead {
+    color: #dafaff;
+  }
+  ::v-deep.d2-container-full__body {
+    background: none !important;
+  }
+  ::v-deep.el-table .one-row {
+    background-color: #042c59 !important;
+    color: #dafaff;
+  }
+  ::v-deep.el-table .two-row {
+    background-color: #063c67 !important;
+    color: #dafaff;
+  }
+  .table-content {
+    width: 98%;
+    margin-left: 6px;
+    background: #042c59;
+  }
+  .content-title {
+    padding-left: 43px;
+    display: inline-block;
+    height: 50px;
+    line-height: 50px;
+    background: url("./image/xjt.png") no-repeat;
+    background-position: 20px center;
+  }
+  .content {
+    width: 100%;
+    height: 45%;
+    min-height: 300px;
+  }
+  .contentX {
+    margin-top: 4%;
+  }
+  .page-content {
+    width: 35%;
+    min-width: 350px;
+    height: 100%;
+    background: url("./image/kuang-bg_1.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .right-content {
+    margin-right: -20px;
+    float: right;
+  }
+  .left-content {
+    float: left;
+  }
+  .tzggList {
+    margin: 10px 0;
+    padding: 0;
+  }
+  .tzggList li {
+    margin: 5px;
+    padding-left: 10px;
+    list-style: none;
+    padding-right: 10px;
+    height: 40px;
+    line-height: 40px;
+    border-bottom: 1px solid #1460b0;
+  }
+  .tzggListLi {
+    float: right;
   }
+  // .btn-group {
+  //   color: $color-text-placehoder;
+  //   font-size: 12px;
+  //   line-height: 12px;
+  //   margin-top: 0px;
+  //   margin-bottom: 20px;
+  //   .btn-group__btn {
+  //     color: $color-text-sub;
+  //     &:hover {
+  //       color: $color-text-main;
+  //     }
+  //     &.btn-group__btn--link {
+  //       color: $color-primary;
+  //     }
+  //   }
+  // }
 }
 </style>