PC端样式更新

postcss.config.cjs

@@ -1,24 +1,6 @@
 const autoprefixer = require('autoprefixer');
-const px2viewport = require('postcss-px-to-viewport-8-plugin');
-
-const basePx2viewport = {
-  unitToConvert: 'px', // 需要转换的单位，默认为 px
-  unitPrecision: 3, // 单位转换后保留的精度（很多时候无法整除）
-  propList: ['*'], // 能转化为vw的属性列表,!font-size表示font-size后面的单位不会被转换
-  viewportUnit: 'vw', // 指定需要转换成的视口单位，建议使用 vw
-  fontViewportUnit: 'vw', // 字体使用的视口单位
-  selectorBlackList: ['.ignore', 'keep-px'],
-  minPixelValue: 1, // 设置最小的转换数值，这里小于或等于 1px 不转换为视口单位
-  mediaQuery: false, // 媒体查询里的单位是否需要转换单位
-  exclude: [/\/src\/views\/pc/], // 忽略某些文件夹下的文件或特定文件
-  // include: [/src/], // 如果设置了include，那将只有匹配到的文件才会被转换
-};
+// 不再把 px 转成 vw：PC 和手机共用一套页面，页面限制最大宽度居中显示（见 App.vue），
+// 如果按视口宽度缩放，PC 大屏上会被整体放大
 module.exports = {
-  plugins: [
-    autoprefixer(),
-    px2viewport({
-      ...basePx2viewport,
-      viewportWidth: 375,
-    }),
-  ],
+  plugins: [autoprefixer()],
 };

src/App.vue

@@ -4,4 +4,15 @@
   </div>
 </template>
 <script setup lang="ts"></script>
-<style scoped lang="scss"></style>
+<style lang="scss">
+// PC 和手机共用手机端页面：最大宽度居中，两边留空
+body {
+  background: #141414;
+}
+#appView {
+  max-width: 480px;
+  height: 100%;
+  margin: 0 auto;
+  background: #000;
+}
+</style>

src/components/DecryptImg/index.vue

@@ -1,122 +0,0 @@
-<template>
-  <div class="img-decypt">
-    <van-image :src="decyImg" class="vanImage" fit="cover" :round="round" @load="emit('load')" @error="emit('error')">
-      <template v-slot:loading>
-        <div class="loading" v-if="!isSplash" />
-        <div class="splash-loading-img" v-else></div>
-      </template>
-      <template v-slot:error>
-        <div class="loading" v-if="!isSplash" />
-        <div class="splash-error-img" v-else></div>
-      </template>
-      <slot></slot>
-    </van-image>
-  </div>
-</template>
-<script setup lang="ts">
-import { Image as VanImage } from 'vant';
-import { ref } from 'vue';
-import { useConfigStore } from '@/stores/config';
-import AppApi from '@/service/app';
-const props = defineProps({
-  //图片地址
-  src: {
-    type: String,
-    required: true,
-    default() {
-      return '';
-    },
-  },
-  isNeedDecypt: {
-    //是否需要解密
-    type: Boolean,
-    required: false,
-    default() {
-      return true;
-    },
-  },
-  isSplash: {
-    //是否来自启动页
-    type: Boolean,
-    required: false,
-    default() {
-      return false;
-    },
-  },
-  round: {
-    //图片是否显示为圆形
-    type: Boolean,
-    required: false,
-    default() {
-      return false;
-    },
-  },
-});
-let decyImg = ref('');
-const configStore = useConfigStore();
-const emit = defineEmits(['load', 'error']);
-
-const init = () => {
-  if (!props.src) {
-    return;
-  }
-  if (!props.isNeedDecypt) {
-    decyImg.value = props.src;
-  } else {
-    try {
-      let imgSrc = '';
-      const isHttp = new RegExp('http').test(props.src);
-      isHttp == true ? (imgSrc = props.src) : (imgSrc = configStore.sourceInfo.IMAGE + '/' + props.src);
-      AppApi.imgDecypt(imgSrc)
-        .then((url: any) => {
-          decyImg.value = url;
-        })
-        .catch(() => {
-          emit('error');
-        });
-    } catch (error) {
-      emit('error');
-    }
-  }
-};
-
-init();
-</script>
-<style lang="scss" scoped>
-:deep(.van-image__loading) {
-  // background-color: #2d2d2d !important;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-}
-
-.splash-loading-img,
-.splash-error-img {
-  width: 100%;
-  height: 100%;
-  background: url('../../assets/images/png/splash.webp') no-repeat;
-  background-size: cover;
-  position: relative;
-}
-
-.img-decypt {
-  width: 100%;
-  height: 100%;
-
-  .vanImage {
-    width: 100%;
-    height: 100%;
-    // background-color: #2d2d2d !important;
-
-    .loading {
-      width: 100%;
-    }
-
-    :deep(.van-image__error) {
-      // background-color: #2d2d2d !important;
-      overflow: hidden;
-      width: 100%;
-    }
-  }
-}
-</style>

src/components/pcFooter/index.vue

@@ -1,89 +0,0 @@
-<template>
-  <div class="footer-wrap">
-  
-    <div class="footer">
-      <div class="img-list">
-        <DecryptImg v-for="(item, index) in getAdItem(11)" class="img" :src="item.cover" @click="jumpAdv(item)" :key="index"/>
-      </div>
-      <div class="text">
-        我们使用Cookies来改善您的使用体验。如您继续使用我们的网站，即表示你同意我们使用Cookies。阅读
-        <span @click="jumpPage('/privacy')">隐私政策</span>
-      </div>
-      <div class="copyright">
-        CopyCopyright ©
-        <span @click="openPage(configStore?.appConfig?.officialUrl)">{{ configStore?.appConfig?.officialUrl }}</span>
-        since 2021
-      </div>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { getAdItem } from '@/utils/getConfig'
-import { jumpAdv } from '@/utils/index';
-import { useRouter } from 'vue-router';
-import { useConfigStore } from '@/stores/config';
-
-const router = useRouter();
-const jumpPage = (path: string) => {
-  router.push(path);
-};
-
-const configStore = useConfigStore();
-const openPage = (url: string) => {
-  window.open(url);
-};
-</script>
-<style lang="scss" scoped>
-@media (min-width: 768px) {
-  .footer-wrap {
-    width: 100%;
-    height: 347px;
-    background: #0a0c0f;
-    margin-top: 200px;
-  }
-
-  .footer {
-    width: 1156px;
-    padding-top: 40px;
-    margin: auto;
-  }
-
-  .img-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 17px;
-    justify-content: center;
-    .img {
-      width: 100px;
-      height: 100px;
-      border-radius: 25px;
-      overflow: hidden;
-      cursor: pointer;
-    }
-  }
-  .text {
-    color: #9b9b9b;
-    text-align: center;
-    font-size: 12px;
-    font-weight: 300;
-    margin-top: 58px;
-    span {
-      text-decoration: underline;
-      color: #fff;
-      cursor: pointer;
-    }
-  }
-  .copyright {
-    color: #9b9b9b;
-    text-align: center;
-    font-size: 12px;
-    font-weight: 300;
-    margin-top: 11px;
-    span {
-      text-decoration: underline;
-      color: #3b8efc;
-      cursor: pointer;
-    }
-  }
-}
-</style>

src/router/index.ts

@@ -1,19 +1,19 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
 import Home from '@/views/home/index.vue';
-import pcRouter from './pcRouter';
-import mobileRouter from './mobileRouter';
 import MobilePrivacyPolicy from '@/views/mobile/privacyPolicy/index.vue';
 
 const routes: RouteRecordRaw[] = [
   {
     path: '/',
+    redirect: '/home',
+  },
+  {
+    path: '/home',
     name: 'home',
     component: Home,
-    redirect: '/home',
     meta: {
       title: '首页',
     },
-    children: [...pcRouter, ...mobileRouter],
   },
   {
     path: '/mobilePrivacyPolicy',

src/router/mobileRouter.ts

@@ -1,15 +0,0 @@
-import { RouteRecordRaw } from 'vue-router';
-// import MobilePrivacyPolicy from '@/views/mobile/privacyPolicy/index.vue';
-// 手机端路由
-const mobileRouter: RouteRecordRaw[] = [
-  // {
-  //   path: '/mobilePrivacyPolicy',
-  //   name: 'mobilePrivacyPolicy',
-  //   component: MobilePrivacyPolicy,
-  //   meta: {
-  //     title: '隐私政策',
-  //   },
-  // },
-];
-
-export default mobileRouter;

src/router/pcRouter.ts

@@ -1,25 +0,0 @@
-import { RouteRecordRaw } from 'vue-router';
-import Home from '@/views/pc/home/index.vue'
-import Privacy from '@/views/pc/privacy/index.vue'
-
-// pc端路由
-const pcRouter: RouteRecordRaw[] = [
-  {
-    path: '/home',
-    name: 'home',
-    component: Home,
-    meta: {
-      title: "首页"
-    },
-  },
-  {
-    path: '/privacy',
-    name: 'privacy',
-    component: Privacy,
-    meta: {
-      title: "隐私"
-    },
-  },
-];
-
-export default pcRouter;

src/utils/insertAdv.ts

@@ -1,39 +0,0 @@
-import { getAdItem } from '@/utils/getConfig';
-interface Advparams {
-  originArray: Array<any>; // 原数据数组
-  insertNum: number; // 每隔insertNum个元素插入一次
-  pageSize: number; // 当前页码
-  pageNumber: number; // 当前页
-  advNum: number; // 当前广告下标
-}
-export default function insertAdv(obj: Advparams) {
-  const { originArray, insertNum, pageSize, pageNumber, advNum } = obj;
-  if (!originArray || originArray.length === 0) {
-    return [];
-  }
-  let newArr = originArray;
-  const updateArray = [];
-  let advIndex = 0;
-
-  for (let i = 0; i < originArray.length; i++) {
-    let index = pageSize * (pageNumber - 1) + i;
-    // 默认数据
-    updateArray.push(originArray[i]);
-    // // 每隔insertNum个元素插入一次
-    if (getAdItem(advNum) && getAdItem(advNum).length> 0 && (index + 1) % insertNum === 0) {
-      // 如果当前位置没有广告，重置0
-      if (!getAdItem(advNum)[advIndex]) {
-        advIndex = 0;
-      }
-      const advList = getAdItem(advNum) || [];
-      // 当前页广告条数
-      const currentPageAdvCout = Math.floor((index + 1) / insertNum);
-      const advIdx = (currentPageAdvCout - 1) % advList.length;
-      // 插入广告
-      // isAdv 字段表示是广告
-      updateArray.push(Object.assign({}, getAdItem(advNum)[advIdx], { isAdv: true }));
-      advIndex++;
-    }
-  }
-  return updateArray;
-}

src/views/home/index.vue

@@ -3,14 +3,11 @@
     <div class="loadingBox" v-if="state.dataloading">
       <van-loading class="loading" color="#fff" vertical>加载中...</van-loading>
     </div>
-    <div v-else>
-      <mobile v-if="isMobile" />
-      <pc v-else />
-    </div>
+    <mobile v-else />
   </div>
 </template>
 <script setup lang="ts">
-import { ref, onUnmounted, reactive } from 'vue';
+import { reactive } from 'vue';
 import { useAppStore } from '@/stores/app';
 import { useConfigStore } from '@/stores/config';
 import { useUserStore } from '@/stores/user';
@@ -22,9 +19,7 @@ import { AdType, SourceType } from '@/enums/app';
 import axios from 'axios';
 import AppApi from '@/service/app';
 import mobile from './../mobile/index.vue';
-import pc from './../pc/index.vue';
 
-const isMobile = ref(false);
 const route = useRoute();
 const router = useRouter();
 const appStore = useAppStore();
@@ -42,25 +37,6 @@ const state = reactive({
   dataloading: true,
 });
 
-const setDeviceType = () => {
-  isMobile.value = window.innerWidth <= 768;
-  // if (isMobile.value) {
-  //   router.push('/home')
-  // } else {
-  //   router.push('/welfare')
-  // }
-};
-
-setDeviceType();
-// 监听屏幕大小变化
-window.addEventListener('resize', () => {
-  setDeviceType();
-});
-
-onUnmounted(() => {
-  window.removeEventListener('resize', setDeviceType);
-});
-
 /**
  * @description 如果没有用户ID就生成一个
  */

src/views/pc/home/content.vue

@@ -1,74 +0,0 @@
-<template>
-  <div class="content">
-    <div class="thematic" v-for="section in advSections" :key="section.position">
-      <div class="title">{{ section.name }}</div>
-      <div class="adv-icon-list">
-        <div class="adv-icon-item" v-for="adv in section.list" :key="adv.id" @click="openAdv(adv)">
-          <DecryptImg class="adv-icon" :src="adv.cover" />
-          <div class="adv-name">{{ adv.title }}</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref } from 'vue';
-import { getHomeAdSections, HomeAdItem, HomeAdSection } from '@/utils/getConfig';
-import { jumpAdv } from '@/utils/index';
-const advSections = ref<HomeAdSection[]>([]);
-getHomeAdSections().then((list) => {
-  advSections.value = list;
-});
-// 导航站广告只跳转，不走旧接口的点击上报
-const openAdv = (adv: HomeAdItem) => {
-  jumpAdv({ link: adv.link });
-};
-</script>
-<style lang="scss" scoped>
-@media (min-width: 768px) {
-  .content {
-    width: 1516px;
-    margin: auto;
-
-    .thematic {
-      .title {
-        width: 100%;
-        height: 56px;
-        color: #FFF;
-        font-size: 36px;
-        font-weight: 600;
-        padding-bottom: 28px;
-        padding-top: 50px;
-        box-sizing: content-box;
-      }
-      .adv-icon-list {
-        display: grid;
-        grid-template-columns: repeat(10, 120px);
-        justify-content: space-between;
-        row-gap: 32px;
-        .adv-icon-item {
-          width: 120px;
-          cursor: pointer;
-          .adv-icon {
-            position: relative;
-            width: 120px;
-            height: 120px;
-            border-radius: 24px;
-            overflow: hidden;
-          }
-          .adv-name {
-            margin-top: 10px;
-            color: #fff;
-            font-size: 18px;
-            line-height: 24px;
-            text-align: center;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-          }
-        }
-      }
-    }
-  }
-}
-</style>

src/views/pc/home/index.vue

@@ -1,6 +0,0 @@
-<template>
-  <content />
-</template>
-<script setup lang="ts" name="home">
-import content from './content.vue';
-</script>

src/views/pc/index.vue

@@ -1,152 +0,0 @@
-<template>
-  <div id="home">
-    <div class="header-wrap-box">
-      <div class="header-wrap">
-        <div class="flex-vcenter left-wrap">
-          <div class="logo-box" @click="jumpPage('/home')">
-            <img class="logo" src="@/assets/images/logo.png" />
-            <span class="site-name">黄果导航站</span>
-          </div>
-        </div>
-        <div class="right-list">
-          <div class="item" @click="openTg">
-            <img class="search" src="@/assets/images/pc/business.png" />
-            <p>商务合作</p>
-          </div>
-          <div class="official" @click="openTg">联系官方</div>
-        </div>
-      </div>
-    </div>
-    <router-view></router-view>
-    <pc-footer></pc-footer>
-    <!-- <Mask @closeMaskPop="setAdvPopup"/> -->
-    <!-- 弹窗广告 -->
-    <!-- v-if="isShowAdvPopup" -->
-    <HomePopupAdv v-if="isShowAdvPopup" :advList="getAdItem(9).reverse()" @close="closeHomePopupAdv" />
-  </div>
-</template>
-<script setup lang="ts">
-import { computed } from 'vue'
-import { getAdItem } from '@/utils/getConfig'
-import { useRouter } from 'vue-router';
-import { OFFICIAL_TG_URL } from '@/utils/index';
-import { useGlobalStore } from '@/stores/global';
-
-const globalStore = useGlobalStore();
-const router = useRouter();
-
-// const isShowAdvPopup = ref(false)
-
-// const setAdvPopup = () => {
-//   isShowAdvPopup.value = !globalStore.homeAdvFirst && getAdItem(9)?.length > 0 && !!sessionStorage.getItem('maskPop');
-// }
-// 首页弹窗广告
-const isShowAdvPopup = computed(() => {
-  return getAdItem(9)?.length > 0;
-});
-const closeHomePopupAdv = () => {
-  globalStore.setHomeAdvFirst();
-};
-const openTg = () => {
-  window.open(OFFICIAL_TG_URL)
-}
-const jumpPage = (path: string) => {
-  router.push(path)
-}
-
-</script>
-<style lang="scss" scoped>
-@media (min-width: 768px) {
-  #home {
-    min-width: 1280px;
-    height: 100vh;
-    overflow: auto;
-    background-color: #000;
-  }
-  .header-wrap-box {
-    position: sticky;
-    top: 0;
-    z-index: 100;
-  }
-  .header-wrap {
-    width: 100%;
-    height: 72px;
-    background: #1A1C22;
-    @include flexCenter;
-    .left-wrap {
-      min-width: 900px;
-      margin-right: 3vw;
-    }
-    .logo-box {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-      .logo {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-        margin-right: 12px;
-      }
-      .site-name {
-        color: #fff;
-        font-size: 22px;
-        font-weight: 600;
-        white-space: nowrap;
-      }
-    }
-    .logo-box:hover {
-      transform: scale(1.02);
-    }
-    .right-list {
-      display: flex;
-      align-items: center;
-
-      .item {
-        color: rgba(255, 255, 255, 0.8);
-        font-size: 12px;
-        font-weight: 400;
-        text-align: center;
-        padding-left: 30px;
-        cursor: pointer;
-        white-space: nowrap;
-        img {
-          width: 32px;
-          height: 32px;
-        }
-      }
-      .item:hover {
-        color: #fff;
-      }
-
-      .official {
-        width: 87px;
-        height: 36px;
-        border-radius: 4px;
-        border: 1px solid #fff;
-        color: #fff;
-        font-size: 12px;
-        font-weight: 500;
-        @include flexCenter;
-        cursor: pointer;
-      }
-      .official:hover {
-        color: #FFC303;
-      }
-    }
-  }
-
-  :deep() {
-    .imgBox {
-      width: 474px !important;
-      height: 664px !important;
-      .closeIcon {
-        top: 23px !important;
-        right: 29px !important;
-        width: 52px !important;
-        height: 52px !important;
-        cursor: pointer;
-      }
-    }
-  }
-}
-</style>

src/views/pc/privacy/index.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="privacy">
-    <div class="title">USC 2257</div>
-    <div class="text">
-      DHP.Video 不是网站 (DHP.Video) 上任何和所有内容的制作者（主要或次要）。关于根据 18 USC 2257 记录本网站上的任何和所有内容，请将您的请求直接发送给制作内容的网站。<br/>
-      DHP.Video 是一个视频共享网站，允许上传、共享和观看各种类型的成人内容。虽然 DHP.Video 尽最大努力验证合规性，但它可能不是 100% 准确。<br/>
-      DHP.Video 遵守以下程序以确保合规：<br/>
-      要求所有用户必须年满 18 岁才能观看和上传视频。<br/>
-      上传时，用户必须核实内容；保证自己已年满 18 岁；证明自己保留了内容中模特的记录并且这些模特已年满 18 岁。<br/>
-      如需进一步帮助和/或信息以查找内容的原始站点，请通过支持表格联系 DHP.Video 合规部门。<br/>
-      DHP.Video 允许将内容标记为不当内容。如果任何内容被标记为非法、违法、骚扰、有害、冒犯或其他各种原因，DHP.Video 应立即将其从网站上删除。
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-
-</script>
-<style lang="scss" scoped>
-@media (min-width: 768px) {
-  .privacy {
-    width: 1150px;
-    margin: 100px auto;
-    .title {
-      color: #FFF;
-      font-size: 30px;
-      font-weight: 600;
-      line-height: 41px;
-      padding-bottom: 41px;
-    }
-    .text {
-      color: #FFF;
-      font-family: "PingFang SC";
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 24px;
-    }
-  }
-}
-</style>