00

src/views/content/components/dire_data.vue

@@ -0,0 +1,109 @@
+<template>
+<div class="dire_data">
+
+  <el-row v-for="(dire,index) in value" :key="index">
+    <!--正文内容-->
+    <el-col class="context">
+      <el-row class="context_el-row">
+        <el-col :span="2" :offset="1">
+          <img class="context_img" src="@/assets/teaching_staff/eji_icon_ys.png" alt="">
+        </el-col>
+        <el-col :span="3" class="context_name">{{ dire.name }}</el-col>
+        <el-col :span="16">
+          <hr class="context_hr">
+        </el-col>
+        <el-row v-for="(chile,index) in dire.children" :key="index">
+          <el-col class="name" :offset="1" :span="23">
+            {{ chile.name }}<span v-if="chile.children.length>1">({{chile.children.length}}人)</span>
+          </el-col>
+          <el-row>
+            <el-col class="text" :offset="1" :span="23">
+              <div v-for="(item,index) in chile.children" :key="index">{{ item.name }}</div>
+            </el-col>
+          </el-row>
+        </el-row>
+      </el-row>
+    </el-col>
+  </el-row>
+</div>
+</template>
+
+<script>
+export default {
+  name: "dire_data",
+  data() {
+    return {
+      width: document.documentElement.clientWidth
+    }
+  },
+  props:{
+    value: {
+      type: Array,
+      default: [{
+        name: "学院",
+        children: [
+          {
+            name: "办公室",
+            children: [
+              {
+                children: [],
+                name: "人员1"
+              },
+            ],
+          }
+        ],
+      }],
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+
+.context {
+  margin: 3rem 2rem;
+  padding-bottom: 3rem;
+  //width: 84.3rem;
+  background: #FFFFFF;
+
+  .context_el-row {
+    margin-top: 2rem;
+
+    .context_img {
+      width: 2.2rem;
+    }
+
+    .context_name {
+      font-size: 1.6rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #1956BC;
+      line-height: 2.2rem;
+    }
+
+    .context_hr {
+      line-height: 2.2rem;
+      margin-top: 1.1rem;
+      border: #1956BC solid 0.1rem;
+    }
+  }
+
+  .name {
+    margin-top: 2rem;
+    font-size: 1.4rem;
+    font-weight: 600;
+    color: #1956BC;
+  }
+  .text {
+    font-size: 1.2rem;
+    color: #3C3C3C;
+    clear: left;
+    div {
+      float: left;
+      margin-top: .4rem;
+      width: 7.4%;
+    }
+  }
+}
+
+</style>