develop:开发独立页面

src/App.vue

@@ -1,17 +1,21 @@
 <template>
 	<!-- html -->
-	<content></content>
+	<!-- <content></content> -->
+	  <router-view />
 </template>
 
 <script lang="ts">
 	// JS或TS
-	import Content from './components/Content.vue'
+	import Content from './components/Content.vue';
+	import SinglePage from './SinglePage.vue';
+
 	export default{
 		//组件名
 		name:'App',
 		// 注册组件
 		components:{
-			Content
+			Content,
+			SinglePage
 		}
 	}
 </script>

src/SinglePage.vue

@@ -0,0 +1,59 @@
+<template>
+	<div class="common-layout">
+		<el-container>
+			<el-main style="padding: 0;" :style="{ zoom: scaleva }">
+				<RouterView></RouterView>
+			</el-main>
+		</el-container>
+	</div>
+</template>
+
+<script lang="ts" setup name="Content">
+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 = () => {
+		const devicewidth = document.documentElement.clientWidth// 获取当前分辨率下的可是区域宽度
+		const scale = devicewidth / 1920 // 分母——设计稿的尺寸
+		scaleva.value = scale
+	
+
+}
+onMounted(() => {
+	if (isPC()) {
+		bodyScale()
+	window.onresize = () => {
+		return (() => {
+			bodyScale()
+		})()
+	}
+	}
+	
+})
+</script>
+
+<style lang="scss" scoped>
+.headerCss {
+	background-color: $title-background-color;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+</style>

src/components/NavContainer.vue

@@ -126,7 +126,7 @@
 		},
 		{
 			name: "recruitment",
-			type: '/joblist'
+			type: '/job/joblist'
 		},
 		{
 			name: "problem",

src/index.ts

@@ -1,6 +1,6 @@
 import en from './en.json';
 import zh from './zh.json';
-import th from './th.json';
+// import th from './th.json';
 export interface Messages {
   [key: string]: any;
 }
@@ -8,7 +8,7 @@ export interface Messages {
 const messages: Messages = {
   en,
   zh,
-	th
+	// th
 };
 
 export default messages;

src/router/index.ts

@@ -1,7 +1,7 @@
 //创建路由器，并暴露出去
 
 // 第一步 引入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';
@@ -9,44 +9,47 @@ 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 SinglePage from "@/SinglePage.vue";
+import Content from "@/components/Content.vue";
 import JobList from "@/pages/H5/Join/JobList.vue";
 import JobDetail from "@/pages/H5/Join/JobDetail.vue";
 
 // 第二步 创建路由器
 const router = createRouter({
-	history:createWebHistory(),
+	history: createWebHistory(),
-	routes:[
+	routes: [
 		{
-			path:'/',
+			path: '/',
-			component:Home
+			component: Content,
+			children: [
+				{
+					path: '/',
+					component: Home
+				},
+			]
 		},
 		{
-			path:'/NavContainer',
+			path: '/job',
-			component:NavContainer
+			component: SinglePage,
-		},
+			children: [
 				{
-			path:'/Preson',
+					path: '/job/joblist',
-			component:Preson
+					component: JobList,
-		},
+					meta: {
-		{
+						h5: true
-			path:'/Service',
+					}
-			component:Service
-		},
-		{
-			path:'/Contact',
-			component:Contact
-		},
-		{
-			path:'/Problem',
-			component:Problem
 				}, {
-			path:'/joblist',
+					path: '/jobdetail',
-			component: JobList
+					component: JobDetail,
-		},{
+					meta: {
-			path:'/jobdetail',
+						h5: true
-			component: JobDetail
+					}
 				},
+			]
+		},
+
 
 	]
 })
+
 export default router