企微员工积分完成

src/components/AiItem.vue

@@ -0,0 +1,82 @@
+<template>
+  <section class="AiItem">
+    <div v-if="topLabel" class="topLabel">
+      <div class="labelPane" flex>
+        <div class="label" :class="{required}" v-text="label"/>
+        <slot name="sub" v-if="$slots.sub"/>
+      </div>
+      <div class="content">
+        <slot v-if="$slots.default"/>
+        <div v-else v-text="value"/>
+      </div>
+    </div>
+    <div v-else class="normal" flex>
+      <div class="fill" flex>
+        <div class="label" :class="{required}" v-text="label"/>
+        <slot name="sub" v-if="$slots.sub"/>
+      </div>
+      <slot v-if="$slots.default"/>
+      <div v-else v-text="value"/>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AiItem",
+  props: {
+    value: {default: ""},
+    label: {default: ""},
+    required: Boolean,
+    topLabel: Boolean
+  },
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiItem {
+  font-family: PingFangSC-Regular, PingFang SC;
+
+  .normal {
+    width: 100%;
+    border-bottom: 2px solid #ddd;
+    padding-right: 32px;
+    box-sizing: border-box;
+    height: 112px;
+  }
+
+  .label {
+    padding-left: 20px;
+    font-weight: 400;
+    color: #333333;
+    margin-right: 20px;
+    position: relative;
+
+    &.required:before {
+      position: absolute;
+      display: block;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      content: "*";
+      color: #f46;
+    }
+  }
+
+  .topLabel {
+    padding: 32px 32px 32px 0;
+    border-bottom: 2px solid #ddd;
+
+    .labelPane {
+      margin-bottom: 32px;
+    }
+
+    .content {
+      padding-left: 20px;
+    }
+  }
+}
+</style>