第一排样式完成

project/biaopin/dv/weiyang/comps/iconSmallPanel.vue

@@ -0,0 +1,35 @@
+<script>
+import ValueUnit from "./valueUnit.vue";
+
+export default {
+  name: "iconSmallPanel",
+  components: {ValueUnit},
+  props: ["icon", "label", "value", "unit"]
+}
+</script>
+
+<template>
+  <section class="iconSmallPanel">
+    <img v-if="icon" class="icon" :src="icon">
+    <div class="fill" v-text="label"/>
+    <value-unit :value="value" :unit="unit"/>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.iconSmallPanel {
+  font-weight: 400;
+  font-size: 15px;
+  color: #FFFFFF;
+  display: flex;
+  align-items: center;
+  gap: 13px;
+
+  .icon {
+    width: 34px;
+    height: 34px;
+    flex-shrink: 0;
+  }
+
+}
+</style>

project/biaopin/dv/weiyang/comps/iconStaPanel.vue

@@ -0,0 +1,40 @@
+<script>
+import ValueUnit from "./valueUnit.vue";
+
+export default {
+  name: "iconStaPanel",
+  components: {ValueUnit},
+  props: ["icon", "label", "value", "unit"]
+}
+</script>
+
+<template>
+  <section class="iconStaPanel">
+    <div class="block">
+      <img class="icon" :src="icon">
+      <div v-text="label"/>
+      <value-unit :value="value" :unit="unit" size="large"/>
+    </div>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.iconStaPanel {
+  font-weight: 400;
+  font-size: 18px;
+  color: #FFFFFF;
+
+
+  .block {
+    padding-left: 96px;
+    position: relative;
+
+    .icon {
+      position: absolute;
+      top: -16px;
+      left: -32px;
+      width: 144px;
+    }
+  }
+}
+</style>

project/biaopin/dv/weiyang/comps/valueUnit.vue

@@ -0,0 +1,43 @@
+<script>
+export default {
+  name: "valueUnit",
+  props: ["value", "unit"]
+}
+</script>
+
+<template>
+  <section class="valueUnit" :class="[$attrs.size]" :style="{color:$attrs.color}">
+    {{ value }}<p v-text="unit"/>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.valueUnit {
+  font-family: DINAlternate-Bold;
+  font-weight: 700;
+  font-size: 22px;
+  color: #02FEFF;
+  display: flex;
+  letter-spacing: 0;
+  line-height: 36px;
+  align-items: baseline;
+
+  & > p {
+    margin-left: 2px;
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  &.mini {
+    font-size: 16px;
+
+    & > p {
+      font-size: 12px;
+    }
+  }
+
+  &.large {
+    font-size: 32px;
+  }
+}
+</style>