raylinx/layouts/default.vue

<template>
  <el-container>
    <div
      v-if="this.showHomeAndroid === true"
      :class="['topNavMenu', { shrink: isShrunk, active: globalData.showMenu.value }]"
    >
      <TopNavbar/>
    </div>
    <div
      v-if="this.showHomeAndroid === false"
      :class="['topNavMenu', { shrink: isShrunk }]"
    >
      <TopNavbar/>
    </div>
    <div class="content-wrapper " ref="homeView">
      <el-main>
        <div class="topMargin"></div>

        <nuxt/> <!-- 页面内容在这里渲染 -->
        <div class="right-bottom-widget">
          <div
            v-if="us_widget_list && us_widget_list.length > 0"
            class="us-widget"
            v-for="i in us_widget_list"
            :key="i.index"
            :style="{ '--shadow-color': 'rgba(100, 100, 100, 0.3)' }"
          >
            <a :href="i.url" target="_blank" rel="nofollow">
              <div
                @mouseenter="ShowWidget(i.title)"
                @mouseleave="IsShowWidget(i.title)"
              >
                <img :src="i.img" :alt="i.title"/>
              </div>
            </a>
            <div v-if="i.showImg == true" class="widget-img">
              <div><img :src="i.ImgDiv" alt="i.title"/></div>
            </div>
          </div>
        </div>
      </el-main>
    </div>
    <el-footer>
      <Footerbar/>
    </el-footer>
    <!-- <div
      v-if="$showMenu.value && this.showHomeAndroid == true"
      class="overlay"
      @click="closeMenu"
    ></div> -->
  </el-container>
</template>

<script>
import TopNavbar from "@/components/TopNavbar.vue";
import Footerbar from "@/components/Footerbar.vue";

export default {
  name: "App",
  components: {
    TopNavbar,
    Footerbar,
  },
  data() {
    return {
      isShrunk: false, // 控制header是否变小
      // us_widget_list: [
      //   {
      //     index: "1",
      //     title: "telegram",
      //     img: require("@/assets/widgetApp/telegram.svg"),
      //     url: "https://t.me/linkaws1",
      //   },
      //   {
      //     index: "2",
      //     title: "whatsapp",
      //     img: require("@/assets/widgetApp/WHATSAPP.svg"),
      //     url: "https://api.whatsapp.com/send/?phone=%2B37376033725&text&type=phone_number&app_absent=0",
      //   },
      //   {
      //     index: "3",
      //     title: "微信",
      //     img: require("@/assets/widgetApp/weixin.svg"),
      //     // url: "",
      //     ImgDiv: require("@/assets/widgetApp/link_weixi.jpg"),
      //     showImg: false,
      //   },
      //   {
      //     index: "4",
      //     title: "facebook",
      //     img: require("@/assets/widgetApp/facebook_facebook52.svg"),
      //     url: "https://www.facebook.com/61559995532824/",
      //   },
      // ],
      showHomeAndroid: false,
      screenWidth: null,
      us_widget_list: [
        {
          index: "1",
          title: "telegram",
          img: require("@/assets/widgetApp/telegram.svg"),
          url: "https://t.me/raylinxjim",
        },
        {
          index: "2",
          title: "微信",
          img: require("@/assets/widgetApp/weixin.svg"),
          // url: "",
          ImgDiv: require("@/assets/widgetApp/weixi.png"),
          showImg: false,
        },
        {
          index: "3",
          title: "whatsapp",
          img: require("@/assets/widgetApp/WHATSAPP.svg"),
          url: "https://api.whatsapp.com/send/?phone=12125188846&text&type=phone_number&app_absent=0",
        },
        {
          index: "4",
          title: "facebook",
          img: require("@/assets/widgetApp/facebook_facebook52.svg"),
          url: "https://www.facebook.com/profile.php?id=61565734855142",
        },
      ],
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll); // 添加滚动事件监听器
    this.screenWidth = document.body.clientWidth;
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth;
      })();
    };
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll); // 组件销毁前移除监听器
  },
  methods: {
    closeMenu() {
      if (this.globalData.showMenu.value) {
        this.globalData.showMenu.value = false;
      }
    },
    handleScroll() {
      this.isShrunk = window.scrollY > 50; // 滚动超过50px时触发
    },
    ShowWidget(title) {
      for (let i = 0; i < this.us_widget_list.length; i++) {
        if (this.us_widget_list[i].title === title && this.us_widget_list[i].ImgDiv != null) {
          this.us_widget_list[i].showImg = true;
        } else if (this.us_widget_list[i].title === title) {
          this.us_widget_list[i].showImg = false;
        }
      }
    },

    IsShowWidget(title) {
      for (let i = 0; i < this.us_widget_list.length; i++) {
        if (this.us_widget_list[i].title === title && this.us_widget_list[i].ImgDiv != null) {
          this.us_widget_list[i].showImg = false;
          break;  // Stop the loop once the correct item is found and processed
        }
      }
    },
    bodyScale() {
      var devicewidth = document.documentElement.clientWidth; //获取当前分辨率下的可是区域宽度
      var scale = devicewidth / 1980; // 分母——设计稿的尺寸
      document.body.style.zoom = scale;
    },
  },
  watch: {
    screenWidth: {
      handler: function (val) {
        if (val >= 1100) {
          // this.bodyScale();
          this.showHomeAndroid = false;
          // console.log( this.showHomeAndroid);
        } else if (val < 1100) {
          // this.bodyScale();
          this.showHomeAndroid = true;
          // console.log( this.showHomeAndroid);
        }
        // this.$forceUpdate();
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style scoped>
.right-bottom-widget {
  position: fixed;
  right: 10px;
  bottom: 15%;
  padding: 10px;
  z-index: 1000;

  .us-widget {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    margin-bottom: 10px;
    position: relative;
  }

  .us-widget img {
    width: 50px;
    height: 50px;
  }

  .widget-img {
    position: absolute;
    top: -120px;
    right: 80px;
    box-shadow: 0px 4px 10px;
    transition: 0.3s;

    img {
      width: 250px;
      height: 250px;
    }
  }
}

.content-wrapper {
  position: relative;
}

.topNavMenu.active {
  background-color: white; /* 当菜单显示时背景变为白色 */
}

/* .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
} */

.topNavMenu {
  position: fixed;
  width: 100%;
  height: 80px;
  line-height: 80px;
  text-align: center;
  transition: padding 0.3s, height 0.3s; /* 添加平滑过渡 */
  z-index: 1000; /* 保证导航栏在其他内容之上 */
  transition: all 150ms linear;
  background-color: white;
}

#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  /* margin-top: 60px; */
}

.shrink {
  background-color: #fff;
  box-shadow: 0 2px 3px rgba(0, 64, 11, 0.08);
}

.el-main {
  padding: 0 0 0 0;
}

.el-footer {
  margin: 0 !important;
  padding: 0 !important;
}

@font-face {
  font-family: AliMedium;
  src: url("@/assets/font/Ali-ttf/AlibabaPuHuiTi-2-65-Medium.ttf");
}

@font-face {
  font-family: AliHeavy;
  src: url("@/assets/font/Ali-ttf/AlibabaPuHuiTi-2-105-Heavy.ttf");
}

@font-face {
  font-family: alimama_agile;
  src: url("@/assets/font/Ali-ttf/VF_Thin-subset/Whl5Kx5F2lRy/uGLql5LftImb.woff");
}
</style>