页面调整

src/views/home/components/homePage.vue

@@ -3,7 +3,11 @@
         <div class="chart-item weather-item">
             <chart-box name="气象预警">
                 <template #title-right>
-                    <div class="button" @click="gybg">溯源报告</div>
+                    <div class="button-group">
+                      <div class="button" style="width: auto;" @click="syxcx">溯源小程序</div>
+                      <div class="button" style="width: auto;" @click="sypt">溯源平台</div>
+                      <div class="button" style="width: auto;" @click="gybg">溯源报告</div>
+                    </div>
                 </template>
                 <div class="base-wrap">
                     <div class="base-item" v-for="(item, index) in baseData.labels" :key="index">
@@ -117,6 +121,7 @@
             </chart-box>
         </div>
       <ImageDialog></ImageDialog>
+      <PhoneIframe @close="phoneIframeShow=false" :h5PageUrl="'https://feiniao-mini-h5-dev.sysuimars.cn/youwei-mini/#/ecology_report?token=69bc8bc3-bf34-46ab-b2c4-420c65265895&farmId=80865&isNyt=1&&point=113.11703233506944%2C31.0088427734375'" v-if="phoneIframeShow"></PhoneIframe>
     </div>
 </template>
 
@@ -131,12 +136,14 @@ import eventBus from "@/api/eventBus";
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";
 import ImageDialog from "../../../components/ImageDialog";
+import PhoneIframe from "./phone_iframe/PhoneIframe.vue";
 const store = useStore();
 const router = useRouter();
 
 const baseData = ref({});
 const minData = ref([]);
 const lineYdata = ref([]);
+const phoneIframeShow = ref(false);
 
 const getBaseData = () => {
     const point = sessionStorage.getItem("point");
@@ -276,6 +283,12 @@ const gybg = () => {
       eventBus.emit("homePage:image", { filename: data.path, title: "溯源报告" });
     });
 };
+const sypt = () => {
+  window.open("https://foster-pc-vue.sysuimars.cn/#/auto_login");
+}
+const syxcx = () => {
+  phoneIframeShow.value = true;
+}
 </script>
 
 <style lang="scss" scoped>
@@ -326,10 +339,16 @@ const gybg = () => {
                 }
             }
         }
+        .button-group{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
         .button {
             border: 1px solid rgba(255, 255, 255, 0.4);
             border-radius: 4px;
-            padding: 2px 10px;
+            padding: 2px 2px;
+            margin-left: 2px;
             cursor: pointer;
         }
         &.chart-item:last-child {

src/views/home/components/phone_iframe/PhoneIframe.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="mobile-container">
+    <iframe class="mobile-iframe" :src="h5PageUrl"></iframe>
+    <button class="close-button" @click="handleClose">关闭</button>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'MobileH5Viewer',
+  props: {
+    h5PageUrl: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    handleClose() {
+      // 这里可以添加关闭逻辑，例如隐藏容器或触发某个事件
+      this.$emit('close');
+    }
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.mobile-container {
+  position: fixed; /* 使用绝对定位 */
+  top: 50%; /* 将顶部与父元素的中间对齐 */
+  left: 50%; /* 将左侧与父元素的中间对齐 */
+  transform: translate(-50%, -50%); /* 负的 50% 位移，使得元素真正的居中 */
+  width: 375px; /* 常用手机宽度 */
+  height: 812px; /* 常用手机高度 */
+  margin: 20px auto;
+  border: 16px black solid;
+  border-radius: 36px;
+  overflow: hidden;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+}
+
+.mobile-container::before {
+  content: "";
+  display: block;
+  width: 60px;
+  height: 5px;
+  background: black;
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 2px;
+}
+
+.mobile-iframe {
+  position: absolute; /* 使用绝对定位 */
+  top: 50%; /* 将顶部与父元素的中间对齐 */
+  left: 50%; /* 将左侧与父元素的中间对齐 */
+  transform: translate(-50%, -50%); /* 负的 50% 位移，使得元素真正的居中 */
+  width: 100%; /* 确保宽度占满父元素 */
+  height: 100%; /* 确保高度占满父元素 */
+  border: none;
+}
+
+.close-button {
+  position: absolute; /* 使用绝对定位 */
+  top: 10px; /* 距离顶部 10px */
+  right: 10px; /* 距离右侧 10px */
+  padding: 8px 16px; /* 按钮内边距 */
+  border: none; /* 去掉边框 */
+  border-radius: 4px; /* 圆角 */
+  background-color: red; /* 按钮背景颜色 */
+  color: white; /* 按钮文字颜色 */
+  font-size: 14px; /* 按钮字体大小 */
+  cursor: pointer; /* 鼠标悬停时显示为指针 */
+  z-index: 2; /* 确保关闭按钮在 iframe 之上 */
+}
+
+.close-button:hover {
+  background-color: darkred; /* 按钮悬停时的背景颜色 */
+}
+</style>