From 7be1dfd2359950746de22eafc38757f0e3017fcc Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Wed, 11 Oct 2023 16:32:13 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=87=AA=E9=80=82=E5=BA=94?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/packages/layout/AiFitView.vue | 60 ++++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 ui/packages/layout/AiFitView.vue

diff --git a/ui/packages/layout/AiFitView.vue b/ui/packages/layout/AiFitView.vue
new file mode 100644
index 00000000..5d67c62e
--- /dev/null
+++ b/ui/packages/layout/AiFitView.vue
@@ -0,0 +1,60 @@
+<template>
+  <section class="AiFitView">
+    <div class="view" :style="viewStyle">
+      <slot/>
+    </div>
+  </section>
+</template>
+<script>
+export default {
+  name: "AiFitView",
+  data() {
+    return {
+      origin: {
+        width: 1920,
+        height: 1080
+      },
+      width: 0,
+      height: 0
+    }
+  },
+  computed: {
+    scale: v => `scale(${Math.min(v.width / v.origin.width, v.height / v.origin.height) || 1})`,
+    viewStyle: v => {
+      let {width, height} = v.origin
+      width += 'px'
+      height += 'px'
+      return {
+        width, height, transform: v.scale
+      }
+    }
+  },
+  methods: {
+    initSize() {
+      this.width = this.$el.offsetWidth
+      this.height = this.$el.offsetHeight
+    }
+  },
+  mounted() {
+    this.$nextTick(this.initSize)
+    window.onresize = () => this.$nextTick(this.initSize)
+  }
+}
+</script>
+<style scoped lang="scss">
+.AiFitView {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #f3f6f9;
+  background-image: linear-gradient(90deg, #eee 10%, transparent 0),
+  linear-gradient(#eee 10%, transparent 0);
+  background-size: 10px 10px;
+
+  .view {
+    background-color: #fff;
+  }
+}
+</style>