excel

src/components/Excel.vue

@@ -1,7 +1,84 @@
 <template>
-  <div>excel</div>
+  <div class="excel_container">
+    <div class="common_grid" v-for="item in 14 * 14" :key="item">
+      <div v-if="isTableHeader(item)" class="table_header_box">
+        {{ getHeaderText(item) }}
+      </div>
+      <div class="box" v-else>
+        <p class="line1">T0DB</p>
+        <p class="line2">0T1U</p>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+const isTableHeader = index => {
+  return index <= 14 || index % 14 == 1
+}
+const getHeaderText = index => {
+  if (index <= 14 && index > 1) {
+    return index - 1
+  }
+  const arr = [
+    'A',
+    'B',
+    'C',
+    'D',
+    'E',
+    'F',
+    'G',
+    'H',
+    'I',
+    'J',
+    'K',
+    'L',
+    'M',
+    'N',
+  ]
+  if (index % 14 == 1) {
+    return arr[parseInt(index / 14) - 1]
+  }
+}
+</script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.excel_container {
+  display: grid;
+  grid-template-columns: repeat(14, 1fr);
+  grid-template-rows: repeat(14, 1fr);
+  border: 1px solid #ebebeb;
+  box-sizing: border-box;
+  border-radius: 6px;
+  overflow: hidden;
+  .common_grid {
+    border: 1px solid #ebebeb;
+    margin-left: -1px;
+    margin-top: -1px;
+    .box {
+      width: 100%;
+      height: 100%;
+      background: #ffffff;
+      font-size: 18px;
+      font-weight: 500;
+      color: #b3b3b3;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .table_header_box {
+      background: #f1f1f1;
+      box-sizing: border-box;
+      font-size: 26px;
+      font-weight: bold;
+      color: #3d3d3d;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+    }
+  }
+}
+</style>

src/components/Image.vue

@@ -36,6 +36,8 @@ import I1 from '@/static/img/login/back.png'
 .image_container {
   width: 100%;
   height: 100%;
+  border-radius: 6px;
+  overflow: hidden;
   position: relative;
   background: #ddd;
   .top_info {

src/pages/index.vue

@@ -175,7 +175,7 @@ const logout = () => {
   .main_content {
     flex: 1;
     padding: 30px;
-    background: #f5f4f9;
+    background: #f4f2f8;
     display: flex;
     flex-direction: column;
     .two_content_container {
@@ -188,7 +188,7 @@ const logout = () => {
       box-sizing: border-box;
     }
     .bottom_operation_container {
-      height: 155px;
+      min-height: 130px;
       width: 100%;
       margin-top: 30px;
     }