liuhanhua/leasepal-home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:判断pc

Browse Source
This commit is contained in:
liuhanhua
2025-09-26 17:56:09 +08:00
parent 4e03ba571c
commit 800819ce8b
7 changed files with 139 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@@ -6,10 +6,11 @@
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0"> <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="description" content="เช่าทุกอย่างบนOctopRental">
<meta name="keywords" content="Octopus,Octop,OctopRental,Octop Rental,Octopus Rent,Rent iPhone,Zero deposit,OctopusTech,ปลาหมึกเร้นทอล,ปลาหมึก,เช่าไอโฟน,ให้เช่า,การผ่อนชำระค่โทรศัพท์มือถือ,章鱼租,章鱼租机"> <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> <title>Octop Rental</title>
</head> </head>
<body> <body>

80
src/components/Carousel.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<!-- html --> <!-- html -->
<div> <div>
<div class="carousel-box"> <div class="carousel-box">
<el-carousel height="auto" trigger="click"> <el-carousel height="auto" trigger="click">
@@ -50,44 +50,44 @@
</div> </div>
<div class="f-20" style="font-weight: 600;">{{$t("octopContact.subtitle")}}</div> <div class="f-20" style="font-weight: 600;">{{$t("octopContact.subtitle")}}</div>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script lang="ts" setup name="Carousel"> <script lang="ts" setup name="Carousel">
import Contact from './Contact.vue' import Contact from './Contact.vue'
import { ref } from 'vue' import { ref } from 'vue'
const list = ref([ const list = ref([
{ {
name: "carousel.name0", name: "carousel.name0",
title: 'carousel.title0', title: 'carousel.title0',
url: new URL(`@/assets/images/1.png`, import.meta.url).href, url: new URL(`@/assets/images/1.png`, import.meta.url).href,
link: '', link: '',
btn_text: 'carousel.text0', btn_text: 'carousel.text0',
}, },
{ {
name: "carousel.name1", name: "carousel.name1",
title: 'carousel.title1', title: 'carousel.title1',
url: new URL(`@/assets/images/2.png`, import.meta.url).href, url: new URL(`@/assets/images/2.png`, import.meta.url).href,
link: '', link: '',
btn_text: 'carousel.text1', btn_text: 'carousel.text1',
}, },
{ {
name: "carousel.name2", name: "carousel.name2",
title: 'carousel.title2', title: 'carousel.title2',
url: new URL(`@/assets/images/3.png`, import.meta.url).href, url: new URL(`@/assets/images/3.png`, import.meta.url).href,
link: '', link: '',
btn_text: 'carousel.text2', btn_text: 'carousel.text2',
} }
]) ])
const dialogVisible = ref(false) const dialogVisible = ref(false)
const itemClick = (item : object) => { const itemClick = (item : object) => {
dialogVisible.value = true dialogVisible.value = true
console.log(item) console.log(item)
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.carousel-box { .carousel-box {
width: 1440px; width: 1440px;
@@ -135,6 +135,6 @@
color: #ed0000; color: #ed0000;
} }
} }
} }
</style> </style>

59
src/components/Content.vue
View File

@@ -15,31 +15,50 @@
</template> </template>
<script lang="ts" setup name="Content"> <script lang="ts" setup name="Content">
import NavContainer from './NavContainer.vue' import NavContainer from './NavContainer.vue'
import Footer from './Footer.vue' import Footer from './Footer.vue'
import { RouterView } from 'vue-router' import { RouterView } from 'vue-router'
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
const scaleva = ref() const scaleva = ref();
const bodyScale = () => {
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 devicewidth = document.documentElement.clientWidth// 获取当前分辨率下的可是区域宽度
const scale = devicewidth / 1920 // 分母——设计稿的尺寸 const scale = devicewidth / 1920 // 分母——设计稿的尺寸
scaleva.value = scale scaleva.value = scale
} }
onMounted(() => {
bodyScale() }
window.onresize = () => { onMounted(() => {
return (() => { bodyScale()
bodyScale() window.onresize = () => {
})() return (() => {
} bodyScale()
}) })()
}
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.headerCss { .headerCss {
background-color: $title-background-color; background-color: $title-background-color;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
</style> </style>

36
src/components/Home.vue
View File

@@ -1,32 +1,32 @@
<template> <template>
<!-- html --> <!-- html -->
<div> <div>
<Carousel></Carousel> <Carousel></Carousel>
<ConsumerBusiness></ConsumerBusiness> <ConsumerBusiness></ConsumerBusiness>
<CoreProduct></CoreProduct> <CoreProduct></CoreProduct>
<Guarantee></Guarantee> <Guarantee></Guarantee>
</div> </div>
</template> </template>
<script lang="ts" setup name="Home"> <script lang="ts" setup name="Home">
import Carousel from './Carousel.vue' import Carousel from './Carousel.vue'
import ConsumerBusiness from './ConsumerBusiness.vue' import ConsumerBusiness from './ConsumerBusiness.vue'
import CoreProduct from './CoreProduct.vue' import CoreProduct from './CoreProduct.vue'
import Guarantee from './Guarantee.vue' import Guarantee from './Guarantee.vue'
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.carousel-box { .carousel-box {
width: 1440px; width: 1440px;
margin: 0 auto; margin: 0 auto;
} }
.boxCarousel { .boxCarousel {
height: 423px; height: 423px;
border: 1px solid red; border: 1px solid red;
.absolutetxt { .absolutetxt {
left: 160px; left: 160px;
bottom: 130px; bottom: 130px;
.carousel-name { .carousel-name {
@@ -34,10 +34,10 @@
color: #333; color: #333;
line-height: 49px; line-height: 49px;
} }
.carousel-title { .carousel-title {
font-weight: 400; font-weight: 400;
color: #666; color: #666;
line-height: 22px; line-height: 22px;
} }
.header-btn { .header-btn {
font-weight: 400; font-weight: 400;

11
src/pages/H5/Join/JobDetail.vue
View File

@@ -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>

13
src/pages/H5/Join/JobList.vue
View File

@@ -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>

22
src/router/index.ts
View File

@@ -1,14 +1,16 @@
//创建路由器，并暴露出去 //创建路由器，并暴露出去
// 第一步 引入createRouter // 第一步 引入createRouter
import {createRouter,createWebHistory} from "vue-router" import {createRouter,createWebHistory} from "vue-router";
//引入可能呈现的组件 //引入可能呈现的组件
import NavContainer from '@/components/NavContainer.vue' import NavContainer from '@/components/NavContainer.vue';
import Preson from '@/components/Preson.vue' import Preson from '@/components/Preson.vue';
import Home from '@/components/Home.vue' import Home from '@/components/Home.vue';
import Service from '@/components/Service.vue' import Service from '@/components/Service.vue';
import Contact from '@/components/Contact.vue' import Contact from '@/components/Contact.vue';
import Problem from '@/components/Problem.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({ const router = createRouter({
@@ -37,6 +39,12 @@ const router = createRouter({
{ {
path:'/Problem', path:'/Problem',
component:Problem component:Problem
}, {
path:'/joblist',
component: JobList
},{
path:'/jobdetail',
component: JobDetail
}, },
] ]