rcs5.0 commit

packages/rcs_5.0/src/components/labelBox/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="titiebox">
+    <div
+      v-if="label"
+      :style="{ width: width }"
+      class="titieboxlabel"
+    >
+      <span
+        v-if="needStar"
+        style="color: #f00"
+      >{{ "*" }}</span>{{ label }}
+      <!-- <span>{{ ':' }}</span> -->
+    </div>
+    <div class="titieboxvalue">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    needStar: {
+      type: Boolean,
+      default: false,
+    },
+    width: {
+      type: String,
+      default: '100px',
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.titiebox {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  font-size: 12px;
+  width: 100%;
+  .titieboxlabel {
+    padding-right: 12px;
+    height: 24px;
+    line-height: 24px;
+    text-align: right;
+  }
+  .titieboxvalue {
+    flex: 1;
+    box-sizing: border-box;
+  }
+}
+</style>