Wed Nov 22 14:02:00 CST 2023 inscode

src/App.vue

@@ -6,6 +6,7 @@ import announcementType from './component/enterpriseAnnouncement/announcementTyp
 import departments from './component/humanResources/department.vue'
 import jobTitle from './component/humanResources/jobTitle.vue';
 import empss from './component/humanResources/emp.vue';
+import verticalTable from './component/main/verticalTable/verticalTable.vue';
 </script>
 
 <template>
@@ -15,6 +16,7 @@ import empss from './component/humanResources/emp.vue';
   <departments></departments> -->
   <empss></empss>
   <!-- <job-title></job-title> -->
+  <verticalTable></verticalTable>
   <el-row>
     <el-col>后台管理平台</el-col>
   </el-row>

src/component/main/verticalTable/verticalTable.vue

+<script setup>
+import { ref } from 'vue'
+const tableArr = ref([
+    {
+        key: "姓名",
+        value: "孙悟空",
+    },
+    {
+        key: "年龄",
+        value: 500,
+    },
+    {
+        key: "身高",
+        value: "山一样高",
+    },
+    {
+        key: "性别",
+        value: "男",
+    },
+    {
+        key: "住址",
+        value: "花果山水帘洞",
+    },
+    {
+        key: "学历",
+        value: "天庭弼马温学历",
+    },
+    {
+        key: "能力",
+        value: "强",
+    },
+    {
+        key: "外号",
+        value: "齐天大圣",
+    },
+])
+
+const howWidth = ref(8)
+
+</script>
+
+<template>
+    <el-col :span="howWidth" v-for="(item, index) in tableArr" :key="index">
+        <div class="box">
+            <div class="content1">{{ item.key }}</div>
+            <el-row>
+                <div class="content2">{{ item.value == "" ? "待完善" : item.value }}</div>
+            </el-row>
+        </div>
+    </el-col>
+</template>
+
+
+<style scoped>
+.box {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    border-left: 1px solid #e9e9e9;
+    border-top: 1px solid #e9e9e9;
+}
+
+.box .content1 {
+    width: 40%;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    background-color: #fafafa;
+    border-right: 1px solid #e9e9e9;
+    border-bottom: 1px solid #e9e9e9;
+    color: #333;
+    font-size: 14px;
+}
+
+
+.box .content2 {
+    width: 60%;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    background-color: #fff;
+    border-right: 1px solid #e9e9e9;
+    border-bottom: 1px solid #e9e9e9;
+    color: #b0b0b2;
+    font-size: 14px;
+}
+</style>
\ No newline at end of file