676 lines
17 KiB
Vue
676 lines
17 KiB
Vue
<template>
|
||
<div class="mobilePage">
|
||
<div
|
||
class="headerBox"
|
||
@click.stop="
|
||
getApkInfo(os.isPhone && switchData.iosStore ? 'shopIos' : true, $event)
|
||
"
|
||
>
|
||
<div class="header-bg">
|
||
<div class="bannerRibbon"></div>
|
||
<div class="ribbonText">全球最大的乱伦交流平台</div>
|
||
</div>
|
||
<!-- iOS：轻量版下载入口 -->
|
||
<div
|
||
v-if="os.isPhone"
|
||
class="liteEntry"
|
||
@click.stop="getApkInfo(true, $event)"
|
||
></div>
|
||
<div class="navBox">
|
||
<div class="navBrand">
|
||
<img class="logoBox" :src="logoHeader" alt="黄果漫剧" />
|
||
<div class="brandCopy">
|
||
<div class="brandName">黄果漫剧</div>
|
||
<div class="brandDesc">全球最大乱伦平台</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<van-tabs
|
||
v-model="tabActive"
|
||
title-active-color="#ffffff"
|
||
title-inactive-color="#ffffff"
|
||
:ellipsis="false"
|
||
animated
|
||
:lazy-render="false"
|
||
:before-change="onTabBeforeChange"
|
||
class="vantTabs"
|
||
:class="{ isIos: os.isPhone, hasShop: hasShopIos }"
|
||
>
|
||
<van-tab
|
||
:title="item.label"
|
||
:name="item.value"
|
||
v-for="item in tabs"
|
||
:key="item.value"
|
||
>
|
||
<div
|
||
class="main"
|
||
@click.stop="
|
||
getApkInfo(
|
||
os.isPhone && switchData.iosStore ? 'shopIos' : true,
|
||
$event
|
||
)
|
||
"
|
||
>
|
||
<div class="contentGrid">
|
||
<div class="gridItem" v-for="item in contentList" :key="item.id">
|
||
<img class="gridThumb" :src="item.thumb" alt="" />
|
||
<p class="gridText">{{ item.title }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</van-tab>
|
||
</van-tabs>
|
||
<!-- iOS 商店包浮层：无商店包链接时不显示 -->
|
||
<div
|
||
class="downloadIosAppStore"
|
||
@click.stop="getApkInfo('shopIos', $event)"
|
||
v-if="hasShopIos && showIosTip"
|
||
>
|
||
<div class="close-btn" @click.stop="showIosTip = false"></div>
|
||
</div>
|
||
<div class="bottomBar" :class="{ hasShop: hasShopIos }">
|
||
<!-- 安卓：普通下载条 -->
|
||
<div
|
||
v-if="!os.isPhone"
|
||
class="bottomBox android"
|
||
@click.stop="getApkInfo(true, $event)"
|
||
>
|
||
<div class="downloadBtn" @click.stop="getApkInfo(true, $event)"></div>
|
||
</div>
|
||
<!-- iOS：仅有商店包时展示底部商店包下载 -->
|
||
<div
|
||
v-else-if="hasShopIos"
|
||
class="bottomBox ios"
|
||
@click.stop="getApkInfo('shopIos', $event)"
|
||
>
|
||
<div class="shopBtn" @click.stop="getApkInfo('shopIos', $event)"></div>
|
||
</div>
|
||
</div>
|
||
<van-overlay :show="androidPromptShow" z-index="999" class="androidOverlay">
|
||
<div>
|
||
<div class="overlayContent" @click.stop>
|
||
<div class="confirmBtnBox" @click="androidPromptShow = false"></div>
|
||
</div>
|
||
</div>
|
||
</van-overlay>
|
||
<van-overlay :show="iosPromptShow" z-index="999" class="iosOverlay">
|
||
<div>
|
||
<div class="overlayContent" @click.stop>
|
||
<div class="confirmBtnBox" @click="iosPromptShow = false"></div>
|
||
</div>
|
||
</div>
|
||
</van-overlay>
|
||
<van-popup v-model="showTip" class="downTip">
|
||
<div class="downTipTitle">温馨提示</div>
|
||
<div class="downTipContent">请使用Safari浏览器进行下载</div>
|
||
<div class="url">{{ currUrl }}</div>
|
||
<div class="downTipConfirm" @click.stop="doCopy">复制链接</div>
|
||
</van-popup>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: ["os", "switchData"],
|
||
data() {
|
||
return {
|
||
androidPromptShow: false,
|
||
iosPromptShow: false,
|
||
showTip: false,
|
||
showIosTip: true,
|
||
currUrl: window.location.href,
|
||
tabActive: "hot",
|
||
tabs: [
|
||
{ label: "精选", value: "hot" },
|
||
{ label: "短剧", value: "short" },
|
||
{ label: "国产", value: "country" },
|
||
{ label: "乱伦", value: "incest" },
|
||
{ label: "学生", value: "student" },
|
||
{ label: "禁漫", value: "comic" }
|
||
],
|
||
contentList: [
|
||
{
|
||
id: 1,
|
||
thumb: require("@/assets/images/mobile2/figma-thumb01.webp"),
|
||
title:
|
||
"带着骚妈在电梯口后入，直接对着邻居大喊来一起操我，真的是太爽了。"
|
||
},
|
||
{
|
||
id: 2,
|
||
thumb: require("@/assets/images/mobile2/figma-thumb02.webp"),
|
||
title: "放假回家_当着妈妈面做爱超刺激_差点被发现兄妹乱伦"
|
||
},
|
||
{
|
||
id: 3,
|
||
thumb: require("@/assets/images/mobile2/figma-thumb03.webp"),
|
||
title: "兄妹乱伦-故意让妹妹看涩涩视频，强行扑倒狂插小穴哭喊不可以--"
|
||
},
|
||
{
|
||
id: 4,
|
||
thumb: require("@/assets/images/mobile2/figma-thumb04.webp"),
|
||
title: "广州兄妹乱伦门看见主播妹妹自慰视频_淫虫上脑强暴妹妹"
|
||
},
|
||
{
|
||
id: 5,
|
||
thumb: require("@/assets/images/mobile2/figma-thumb05.webp"),
|
||
title:
|
||
"无套内射风韵犹存的骚逼妈妈过程淫叫不断，妈妈被我操到高潮喷水喷尿"
|
||
},
|
||
{
|
||
id: 6,
|
||
thumb: require("@/assets/images/mobile2/figma-thumb06.webp"),
|
||
title: "【兄妹乱伦】网瘾少女为了买游戏皮肤帮哥哥解决生理需求"
|
||
},
|
||
{
|
||
id: 7,
|
||
thumb: require("@/assets/images/mobile2/figma-thumb07.webp"),
|
||
title: "【兄妹乱伦】性瘾妹妹蜜穴引诱被哥哥疯狂打桩，疯狂喷水抽搐"
|
||
},
|
||
{
|
||
id: 8,
|
||
thumb: require("@/assets/images/mobile2/figma-thumb08.webp"),
|
||
title: "爱我的漂亮姐姐-高颜值姐姐奶头粉嫩，给我大鸡巴温柔的口交"
|
||
},
|
||
{
|
||
id: 9,
|
||
thumb: require("@/assets/images/mobile2/figma-thumb09.webp"),
|
||
title: "兄妹乱伦-在学校大门口扒光开操“妹妹，哥哥实在忍不住了"
|
||
},
|
||
{
|
||
id: 10,
|
||
thumb: require("@/assets/images/mobile2/figma-thumb10.webp"),
|
||
title:
|
||
"【KTV强奸喝醉的性感嫂子】强奸以后嫂子竟然爱上我的大鸡巴，主动勾引我"
|
||
},
|
||
{
|
||
id: 11,
|
||
thumb: require("@/assets/images/mobile2/figma-thumb11.webp"),
|
||
title: "小姨子茶室桌上给姐夫足交口交姐夫拉小姨子到厕所"
|
||
},
|
||
{
|
||
id: 12,
|
||
thumb: require("@/assets/images/mobile2/figma-thumb12.webp"),
|
||
title:
|
||
"【妹妹不睡我不睡，我玩游戏操亲妹！】爸妈外出后，我带妹妹玩真心话大冒险，没想到妹妹居然还穿着透明蕾丝内裤！看的我鸡巴一柱擎天！脱下裤子狂操妹妹，要不是怕妹妹怀孕，我高低要试试内射亲妹的滋味！！"
|
||
}
|
||
],
|
||
version: "B",
|
||
logoHeader: require("@/assets/images/common/hgmj_logo.png")
|
||
};
|
||
},
|
||
computed: {
|
||
hasShopIos() {
|
||
return this.os && this.os.isPhone && this.switchData.iosStore;
|
||
}
|
||
},
|
||
mounted() {
|
||
let ua = this.os.userAgent.toLowerCase();
|
||
let isSafari =
|
||
ua.indexOf("safari") !== -1 &&
|
||
ua.indexOf("browser") === -1 &&
|
||
ua.indexOf("android") === -1;
|
||
if (!isSafari && this.os.isPhone) {
|
||
this.showTip = true;
|
||
}
|
||
},
|
||
methods: {
|
||
getTabName() {
|
||
const tab = this.tabs.find(item => item.value === this.tabActive);
|
||
return tab ? tab.label : "精选";
|
||
},
|
||
doCopy() {
|
||
this.$copyText(this.currUrl).then(
|
||
() => {
|
||
this.showTip = false;
|
||
},
|
||
() => {}
|
||
);
|
||
},
|
||
onTabBeforeChange() {
|
||
this.getApkInfo(
|
||
this.os.isPhone && this.switchData.iosStore ? "shopIos" : true
|
||
);
|
||
return false;
|
||
},
|
||
async showInstallTutorial(type) {
|
||
if (type === "ios") {
|
||
this.iosPromptShow = true;
|
||
} else {
|
||
this.androidPromptShow = true;
|
||
}
|
||
},
|
||
async getApkInfo(flag) {
|
||
let type = this.os.isPhone ? "ios" : "android";
|
||
if (flag === "shopIos") {
|
||
type = "shopIos";
|
||
}
|
||
if (flag === "androidSpare") {
|
||
type = "androidSpare";
|
||
}
|
||
if (flag && flag !== "shopIos") {
|
||
await this.showInstallTutorial(type);
|
||
}
|
||
setTimeout(() => {
|
||
this.$emit("getApkInfo", type);
|
||
}, 500);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.mobilePage {
|
||
height: 100%;
|
||
width: 100%;
|
||
background: linear-gradient(180deg, #0c0c0d 0%, #0b0a32 45%, #0d165f 100%);
|
||
overflow: hidden;
|
||
|
||
.headerBox {
|
||
position: fixed;
|
||
z-index: 100;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 250px;
|
||
background-color: #09053a;
|
||
|
||
.liteEntry {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 211px;
|
||
transform: translateX(-50%);
|
||
width: 375px;
|
||
height: 35px;
|
||
z-index: 3;
|
||
background: url("./../../../assets/images/mobile2/figma-lite-entry.gif")
|
||
no-repeat center center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.navBox {
|
||
width: 100%;
|
||
height: 67px;
|
||
background: #09053a;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
z-index: 2;
|
||
|
||
.navBrand {
|
||
position: absolute;
|
||
left: 17px;
|
||
top: 12px;
|
||
width: 190px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
|
||
.logoBox {
|
||
display: block;
|
||
width: 41px;
|
||
height: 41px;
|
||
border-radius: 7px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.brandCopy {
|
||
color: #fff;
|
||
line-height: 1.4;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.brandName {
|
||
font-size: 20px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.brandDesc {
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
.header-bg {
|
||
position: absolute;
|
||
top: 67px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
height: 173px;
|
||
width: 375px;
|
||
background: url("./../../../assets/images/mobile2/figma-banner.webp")
|
||
no-repeat center center;
|
||
background-size: 100% 100%;
|
||
z-index: 1;
|
||
|
||
.bannerRibbon {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 0;
|
||
transform: translateX(-50%);
|
||
width: 379px;
|
||
height: 49px;
|
||
background: url("./../../../assets/images/mobile2/figma-ribbon.png")
|
||
no-repeat;
|
||
background-size: 100% 100%;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.ribbonText {
|
||
position: absolute;
|
||
left: 82px;
|
||
top: 140px;
|
||
transform: translate(-50%, -100%);
|
||
z-index: 2;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
line-height: 1;
|
||
white-space: nowrap;
|
||
text-align: center;
|
||
pointer-events: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.vantTabs {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: transparent;
|
||
box-sizing: border-box;
|
||
|
||
&.isIos {
|
||
::v-deep .van-tabs__content {
|
||
bottom: calc(20px + env(safe-area-inset-bottom));
|
||
}
|
||
}
|
||
|
||
&.isIos.hasShop {
|
||
::v-deep .van-tabs__content {
|
||
bottom: calc(102px + env(safe-area-inset-bottom));
|
||
}
|
||
}
|
||
|
||
::v-deep .van-tabs__wrap {
|
||
height: auto;
|
||
width: 346px;
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 250px;
|
||
margin: 0 auto;
|
||
z-index: 50;
|
||
padding: 10px 4px 8px;
|
||
box-sizing: border-box;
|
||
background: #08042b;
|
||
border: 1px solid #1a3ac6;
|
||
border-bottom: 0;
|
||
border-radius: 21px 21px 0 0;
|
||
|
||
.van-tabs__nav {
|
||
height: 36px;
|
||
padding: 4px;
|
||
background: #296ff5;
|
||
border: 1px solid #4384ff;
|
||
border-radius: 999px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.van-tab {
|
||
flex: 1;
|
||
min-width: 0;
|
||
height: 28px;
|
||
line-height: 28px;
|
||
padding: 0;
|
||
margin: 0;
|
||
font-size: 12px;
|
||
color: #fff;
|
||
border-radius: 999px;
|
||
background: transparent;
|
||
}
|
||
|
||
.van-tab--active {
|
||
background: #fff;
|
||
color: #296ff5;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.van-tab--active .van-tab__text {
|
||
color: #296ff5;
|
||
}
|
||
|
||
.van-tab__text {
|
||
font-size: 12px;
|
||
line-height: 28px;
|
||
letter-spacing: 2px;
|
||
}
|
||
|
||
.van-tabs__line {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
::v-deep .van-tabs__content {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 304px;
|
||
bottom: calc(102px + env(safe-area-inset-bottom));
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
::v-deep .van-tabs__track,
|
||
::v-deep .van-tab__pane-wrapper,
|
||
::v-deep .van-tab__pane {
|
||
height: 100%;
|
||
}
|
||
|
||
.main {
|
||
width: 346px;
|
||
height: 100%;
|
||
margin: 0 auto;
|
||
padding: 2px 11px 13px;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
background: #08042b;
|
||
border: 1px solid #1a3ac6;
|
||
border-top: 0;
|
||
border-radius: 0 0 21px 21px;
|
||
box-sizing: border-box;
|
||
|
||
.contentGrid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
gap: 9px 7px;
|
||
|
||
.gridItem {
|
||
width: 157px;
|
||
|
||
.gridThumb {
|
||
width: 157px;
|
||
height: 90px;
|
||
display: block;
|
||
border-radius: 8px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.gridText {
|
||
margin-top: 8px;
|
||
color: #fff;
|
||
font-size: 10px;
|
||
line-height: 16px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&.hasShop .main {
|
||
padding-bottom: 56px;
|
||
}
|
||
}
|
||
|
||
.bottomBar {
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
z-index: 99;
|
||
background: transparent;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.bottomBox {
|
||
height: 102px;
|
||
width: 375px;
|
||
margin: 0 auto;
|
||
overflow: hidden;
|
||
border-radius: 17px 16px 0 0;
|
||
background: url("./../../../assets/images/mobile2/figma-bottom-android.webp")
|
||
no-repeat center center;
|
||
background-size: 100% auto;
|
||
position: relative;
|
||
|
||
&.ios {
|
||
background-image: url("./../../../assets/images/mobile2/figma-bottom-ios.webp");
|
||
}
|
||
|
||
.downloadBtn {
|
||
width: 156px;
|
||
height: 42px;
|
||
border-radius: 21px;
|
||
position: absolute;
|
||
left: 32px;
|
||
top: 40px;
|
||
}
|
||
|
||
.shopBtn {
|
||
width: 186px;
|
||
height: 40px;
|
||
position: absolute;
|
||
left: 14px;
|
||
top: 47px;
|
||
border-radius: 31px;
|
||
overflow: hidden;
|
||
background: url("./../../../assets/images/mobile2/figma-shop-btn.webp")
|
||
no-repeat center center;
|
||
background-size: 100% 157%;
|
||
}
|
||
}
|
||
|
||
.downloadIosAppStore {
|
||
height: 36px;
|
||
width: 284px;
|
||
background: url("./../../../assets/images/mobile2/figma-shop-float.gif")
|
||
no-repeat;
|
||
background-size: 100% 100%;
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 110px;
|
||
z-index: 998;
|
||
|
||
.close-btn {
|
||
height: 20px;
|
||
width: 20px;
|
||
background: url("./../../../assets/images/mobile2/figma-close.svg")
|
||
no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
right: -10px;
|
||
top: -10px;
|
||
}
|
||
}
|
||
|
||
.androidOverlay {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.overlayContent {
|
||
width: 297px;
|
||
height: 441px;
|
||
background: url("./../../../assets/images/mobile2/android_tip.webp")
|
||
no-repeat;
|
||
background-size: 100% 100%;
|
||
border-radius: 12px;
|
||
padding-top: 380px;
|
||
box-sizing: border-box;
|
||
|
||
.confirmBtnBox {
|
||
height: 36px;
|
||
width: 140px;
|
||
border-radius: 40px;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
}
|
||
|
||
.iosOverlay {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.overlayContent {
|
||
width: 297px;
|
||
height: 441px;
|
||
background: url("./../../../assets/images/mobile2/iosTip.webp") no-repeat;
|
||
background-size: 100% 100%;
|
||
border-radius: 12px;
|
||
padding-top: 380px;
|
||
box-sizing: border-box;
|
||
|
||
.confirmBtnBox {
|
||
height: 36px;
|
||
width: 140px;
|
||
border-radius: 40px;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.downTip {
|
||
width: 297px;
|
||
border-radius: 10px;
|
||
padding: 18px;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
|
||
.downTipTitle {
|
||
font-size: 18px;
|
||
margin-bottom: 34px;
|
||
}
|
||
|
||
.downTipContent {
|
||
white-space: nowrap;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.url {
|
||
font-size: 15px;
|
||
margin-top: 16px;
|
||
text-align: left;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.downTipConfirm {
|
||
font-size: 15px;
|
||
width: 160px;
|
||
height: 30px;
|
||
border-radius: 40px;
|
||
margin: 32px auto 0;
|
||
color: #fff;
|
||
background: #5b92ee;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
</style>
|