294 lines
7.4 KiB
Vue
294 lines
7.4 KiB
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>
|