fix:判断pc

2025-09-26 17:56:09 +08:00
parent 4e03ba571c
commit 800819ce8b
7 changed files with 139 additions and 87 deletions
--- a/index.html
+++ b/index.html
@@ -6,10 +6,11 @@
 		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
 		<meta http-equiv="Pragma" content="no-cache">
 		<meta http-equiv="Expires" content="0">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
 		<meta name="description" content="เช่าทุกอย่างบนOctopRental">
 		<meta name="keywords" content="Octopus,Octop,OctopRental,Octop Rental,Octopus Rent,Rent iPhone,Zero deposit,OctopusTech,ปลาหมึกเร้นทอล,ปลาหมึก,เช่าไอโฟน,ให้เช่า,การผ่อนชำระค่โทรศัพท์มือถือ,章鱼租,章鱼租机">
-		<link rel="apple-touch-icon-precomposed" href="https://static.octoprental.com/20250424/43471633-0064-4024-9106-b3f4017a5aed"/>
+		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+    <link rel="apple-touch-icon-precomposed" href="https://static.octoprental.com/20250424/43471633-0064-4024-9106-b3f4017a5aed"/>
 		<title>Octop Rental</title>
  </head>
  <body>
--- a/src/components/Carousel.vue
+++ b/src/components/Carousel.vue
@@ -1,5 +1,5 @@
-<template>
-	<!-- html -->
+<template>
+	<!-- html -->
 	<div>
 		<div class="carousel-box">
 			<el-carousel height="auto" trigger="click">
@@ -50,44 +50,44 @@
 				</div>
 				<div class="f-20" style="font-weight: 600;">{{$t("octopContact.subtitle")}}</div>
 			</div>
-		</el-dialog>
-	</div>
-
-</template>
-
+		</el-dialog>
+	</div>
+
+</template>
+
 <script lang="ts" setup name="Carousel">
-	import Contact from './Contact.vue'
-	import { ref } from 'vue'
-	const list = ref([
-		{
-			name: "carousel.name0",
-			title: 'carousel.title0',
-			url: new URL(`@/assets/images/1.png`, import.meta.url).href,
-			link: '',
-			btn_text: 'carousel.text0',
-		},
-		{
-			name: "carousel.name1",
-			title: 'carousel.title1',
-			url: new URL(`@/assets/images/2.png`, import.meta.url).href,
-			link: '',
-			btn_text: 'carousel.text1',
-		},
-		{
-			name: "carousel.name2",
-			title: 'carousel.title2',
-			url: new URL(`@/assets/images/3.png`, import.meta.url).href,
-			link: '',
-			btn_text: 'carousel.text2',
-		}
-	])
-	const dialogVisible = ref(false)
-	const itemClick = (item : object) => {
+	import Contact from './Contact.vue'
+	import { ref } from 'vue'
+	const list = ref([
+		{
+			name: "carousel.name0",
+			title: 'carousel.title0',
+			url: new URL(`@/assets/images/1.png`, import.meta.url).href,
+			link: '',
+			btn_text: 'carousel.text0',
+		},
+		{
+			name: "carousel.name1",
+			title: 'carousel.title1',
+			url: new URL(`@/assets/images/2.png`, import.meta.url).href,
+			link: '',
+			btn_text: 'carousel.text1',
+		},
+		{
+			name: "carousel.name2",
+			title: 'carousel.title2',
+			url: new URL(`@/assets/images/3.png`, import.meta.url).href,
+			link: '',
+			btn_text: 'carousel.text2',
+		}
+	])
+	const dialogVisible = ref(false)
+	const itemClick = (item : object) => {
 		dialogVisible.value = true
-		console.log(item)
-	}
-</script>
-
+		console.log(item)
+	}
+</script>
+
 <style scoped lang="scss">
 	.carousel-box {
 	  width: 1440px;
@@ -135,6 +135,6 @@
 				color: #ed0000;
 			}
 		}
-	}
-	
+	}
+	
 </style>
--- a/src/components/Content.vue
+++ b/src/components/Content.vue
@@ -15,31 +15,50 @@
 </template>

 <script lang="ts" setup name="Content">
-	import NavContainer from './NavContainer.vue'
-	import Footer from './Footer.vue'
-	import { RouterView } from 'vue-router'
-	import { ref, onMounted } from 'vue';
-	const scaleva = ref()
-	const bodyScale = () => {
+import NavContainer from './NavContainer.vue'
+import Footer from './Footer.vue'
+import { RouterView } from 'vue-router'
+import { ref, onMounted } from 'vue';
+const scaleva = ref();
+
+const isPC = (userAgent = navigator.userAgent) => {
+	const ua = userAgent.toLowerCase();
+	// 移动设备关键词（优先排除）
+	const mobilePattern = /android|iphone|ipad|ipod|windows phone|blackberry|symbian|mobile|tablet|touch|fennec|ucbrowser mini|opera mobi/i;
+	// 若包含移动设备特征，直接返回false
+	if (mobilePattern.test(ua)) {
+		return false;
+	}
+	// PC设备操作系统关键词
+	const pcPattern = /windows nt|macintosh|linux x86_64|freebsd|openbsd/i;
+	// 验证是否包含PC特征
+	return pcPattern.test(ua);
+}
+
+
+const bodyScale = () => {
+	if (isPC()) {
 		const devicewidth = document.documentElement.clientWidth// 获取当前分辨率下的可是区域宽度
 		const scale = devicewidth / 1920 // 分母——设计稿的尺寸
 		scaleva.value = scale
 	}
-	onMounted(() => {
-		bodyScale()
-		window.onresize = () => {
-			return (() => {
-				bodyScale()
-			})()
-		}
-	})
+
+}
+onMounted(() => {
+	bodyScale()
+	window.onresize = () => {
+		return (() => {
+			bodyScale()
+		})()
+	}
+})
 </script>

 <style lang="scss" scoped>
-	.headerCss {
-		background-color: $title-background-color;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
+.headerCss {
+	background-color: $title-background-color;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
 </style>
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -1,32 +1,32 @@
 <template>
 	<!-- html -->
-	<div>
-		<Carousel></Carousel>
-		<ConsumerBusiness></ConsumerBusiness>
-		<CoreProduct></CoreProduct>
+	<div>
+		<Carousel></Carousel>
+		<ConsumerBusiness></ConsumerBusiness>
+		<CoreProduct></CoreProduct>
 		<Guarantee></Guarantee>
 	</div>

 </template>

-<script lang="ts" setup name="Home">
-	import Carousel from './Carousel.vue'
-	import ConsumerBusiness from './ConsumerBusiness.vue'
-	import CoreProduct from './CoreProduct.vue'
-	import Guarantee from './Guarantee.vue'
+<script lang="ts" setup name="Home">
+	import Carousel from './Carousel.vue'
+	import ConsumerBusiness from './ConsumerBusiness.vue'
+	import CoreProduct from './CoreProduct.vue'
+	import Guarantee from './Guarantee.vue'
 	
 </script>

-<style scoped lang="scss">
-	.carousel-box {
-	  width: 1440px;
-	  margin: 0 auto;
+<style scoped lang="scss">
+	.carousel-box {
+	  width: 1440px;
+	  margin: 0 auto;
 	}
 	.boxCarousel {
 		height: 423px;
 		border: 1px solid red;

-		.absolutetxt {
+		.absolutetxt {
 			left: 160px;
 			bottom: 130px;
 			.carousel-name {
@@ -34,10 +34,10 @@
 				color: #333;
 				line-height: 49px;
 			}
-			.carousel-title {
-			  font-weight: 400;
-			  color: #666;
-			  line-height: 22px;
+			.carousel-title {
+			  font-weight: 400;
+			  color: #666;
+			  line-height: 22px;
 			}
 			.header-btn {
 				font-weight: 400;
--- a/src/pages/H5/Join/JobDetail.vue
+++ b/src/pages/H5/Join/JobDetail.vue
@@ -0,0 +1,11 @@
+<template>
+    <div>111</div>
+</template>
+
+<script lang="ts" setup name="join">
+    	import { ref } from 'vue';
+        
+</script>
+<style scoped lang="scss">
+
+</style>
--- a/src/pages/H5/Join/JobList.vue
+++ b/src/pages/H5/Join/JobList.vue
@@ -0,0 +1,13 @@
+<template>
+    <div class="content">111</div>
+</template>
+
+<script lang="ts" setup name="join">
+    	import { ref } from 'vue';
+
+</script>
+<style scoped lang="scss">
+    .content {
+        // font-size: 1rem;
+    }
+</style>
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,14 +1,16 @@
 //创建路由器，并暴露出去

 // 第一步 引入createRouter
-import {createRouter,createWebHistory} from "vue-router"
+import {createRouter,createWebHistory} from "vue-router";
 //引入可能呈现的组件
-import NavContainer from '@/components/NavContainer.vue'
-import Preson from '@/components/Preson.vue'
-import Home from '@/components/Home.vue'
-import Service from '@/components/Service.vue'
-import Contact from '@/components/Contact.vue'
-import Problem from '@/components/Problem.vue'
+import NavContainer from '@/components/NavContainer.vue';
+import Preson from '@/components/Preson.vue';
+import Home from '@/components/Home.vue';
+import Service from '@/components/Service.vue';
+import Contact from '@/components/Contact.vue';
+import Problem from '@/components/Problem.vue';
+import JobList from "@/pages/H5/Join/JobList.vue";
+import JobDetail from "@/pages/H5/Join/JobDetail.vue";

 // 第二步 创建路由器
 const router = createRouter({
@@ -37,6 +39,12 @@ const router = createRouter({
 		{
 			path:'/Problem',
 			component:Problem
+		},	{
+			path:'/joblist',
+			component: JobList
+		},{
+			path:'/jobdetail',
+			component: JobDetail
 		},
 		
 	]