done 试试水温

src/components/yx-dark/widget/waterTemp/index.vue

@@ -0,0 +1,73 @@
+<!-- 
+    filename: WaterTemp.vue
+    author: liubin
+    date: 2023-09-08 10:00:10
+    description: 进出口水温
+-->
+
+<template>
+  <div class="water-temp">
+    <div class="in">
+      <span class="value"> {{ inValue }}<small>℃</small> </span>
+      <span class="title">进口实时水温</span>
+    </div>
+    <div class="out">
+      <span class="value"> {{ outValue }}<small>℃</small> </span>
+      <span class="title">出口实时水温</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "WaterTemp",
+  components: {},
+  props: {},
+  data() {
+    return {
+      inValue: 22.3,
+      outValue: 23.4,
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.water-temp {
+  margin-left: 12px;
+  margin-top: 24px;
+  width: 500px;
+  // height: 120px;
+//   background: #cccc;
+  display: flex;
+  justify-content: space-between;
+}
+
+.in,
+.out {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.title {
+  font-size: 24px;
+  line-height: 32px;
+  color: #eff0f5;
+  margin-top: 8px;
+  letter-spacing: .5px;
+}
+
+.value {
+  font-size: 54px;
+  line-height: 48px;
+  color: #eff0f5;
+  letter-spacing: 1px;
+}
+
+.value > small {
+    font-size: 32px;
+}
+</style>