mirror of https://gitee.com/godoos/godoos.git
11 changed files with 261 additions and 9 deletions
@ -1,12 +1,18 @@ |
|||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||
import { System } from "@/system/index.ts"; |
import { System } from "@/system/index.ts"; |
||||
import { onMounted} from "vue"; |
import { onMounted} from "vue"; |
||||
|
import { isMobileDevice } from "@/util/device"; |
||||
|
|
||||
onMounted(() => { |
onMounted(() => { |
||||
new System(); |
new System(); |
||||
|
isMobile.value = isMobileDevice(); |
||||
|
console.log(isMobile.value); |
||||
}); |
}); |
||||
|
const isMobile = ref<boolean>(false); |
||||
|
|
||||
</script> |
</script> |
||||
|
|
||||
<template> |
<template> |
||||
<screen /> |
<screen v-if="!isMobile"/> |
||||
|
<mobile v-else></Mobile> |
||||
</template> |
</template> |
||||
|
@ -0,0 +1,47 @@ |
|||||
|
<template> |
||||
|
<div class="bottom-bar"> |
||||
|
<MobileApp v-for="item in bottomBarList" :key="item.name" :item="item"></MobileApp> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref,watch } from 'vue'; |
||||
|
|
||||
|
const props = defineProps(['list']); |
||||
|
const bottomBarList = ref<any[]>([]); |
||||
|
|
||||
|
watch(props.list,() => { |
||||
|
console.log(props.list, '~~~~~~~'); |
||||
|
|
||||
|
if (Array.isArray(props.list) && props.list.length > 0) { |
||||
|
props.list.forEach((item: any) => { |
||||
|
console.log(item.name.includes('computer'), 'item.name======='); |
||||
|
if (item.name.includes('computer') || item.name.includes('localchat')) { |
||||
|
bottomBarList.value.push(item); |
||||
|
} |
||||
|
}); |
||||
|
console.log(bottomBarList.value, 'bottomBarList============================================'); |
||||
|
} else { |
||||
|
console.log('props.list is empty or not an array'); |
||||
|
} |
||||
|
},{ |
||||
|
immediate:true |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bottom-bar{ |
||||
|
display: flex; |
||||
|
justify-content: space-evenly; |
||||
|
position: absolute; |
||||
|
width: vw(340); |
||||
|
left:50%; |
||||
|
transform: translateX(-50%); |
||||
|
bottom: vh(15); |
||||
|
height: vh(80); |
||||
|
border-radius: vw(50); |
||||
|
color: #e5e3e3d5; |
||||
|
background-color: rgba(255,255,255,.2); |
||||
|
backdrop-filter: blur(15px); |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,104 @@ |
|||||
|
<template> |
||||
|
<div class="desktop" :style="{ backgroundColor: background }"> |
||||
|
<DesktopBackground class="userarea-upper"></DesktopBackground> |
||||
|
<template v-if="backgroundType == 'image'"> |
||||
|
</template> |
||||
|
<div class="dest-item userarea-upper"> |
||||
|
<!-- Swiper --> |
||||
|
<swiper :modules="modules" :loop="true" :slides-per-view="1" :space-between="20" |
||||
|
:pagination="{ type: 'bullets', clickable: true }" class="swiperBox" @swiper="onSwiper" |
||||
|
@slideChange="onSlideChange"> |
||||
|
<swiper-slide class="swiper-slide"> |
||||
|
<MobileApp v-for="item in appList" :key="item.name" :item="item" class="item"></MobileApp> |
||||
|
</swiper-slide> |
||||
|
<swiper-slide></swiper-slide> |
||||
|
<swiper-slide></swiper-slide> |
||||
|
</swiper> |
||||
|
</div> |
||||
|
<BottomBar :list="appList"></BottomBar> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import { Bios, System, useSystem } from '@/system'; |
||||
|
import { ref, onMounted } from 'vue'; |
||||
|
import { RootState } from '@/system/root.ts'; |
||||
|
import { Swiper, SwiperSlide } from 'swiper/vue' |
||||
|
// 引入swiper样式 |
||||
|
import 'swiper/swiper-bundle.css'; |
||||
|
// 引入swiper核心和所需模块 |
||||
|
import { Pagination } from 'swiper/modules' |
||||
|
|
||||
|
import { useAppOpen } from "@/hook/useAppOpen"; |
||||
|
const { openapp, appList } = useAppOpen("apps"); |
||||
|
console.log(appList,'appList======') |
||||
|
console.log(openapp,'openapp=======') |
||||
|
// 在modules加入要使用的模块 |
||||
|
const modules = [Pagination] |
||||
|
const onSwiper = (swiper: any) => { |
||||
|
console.log(swiper); |
||||
|
}; |
||||
|
// 更改当前活动swiper |
||||
|
const onSlideChange = (swiper: any) => { |
||||
|
// swiper是当前轮播的对象,里面可以获取到当前swiper的所有信息,当前索引是activeIndex |
||||
|
console.log(swiper.activeIndex) |
||||
|
} |
||||
|
const mobileref = ref(); |
||||
|
const rootState = ref<RootState | undefined>(useSystem()?._rootState); |
||||
|
const backgroundType = ref("color"); |
||||
|
const background: any = ref('#3A98CE'); |
||||
|
// const |
||||
|
onMounted(() => { |
||||
|
refershBack(rootState.value?.options.background); |
||||
|
}); |
||||
|
|
||||
|
function refershBack(val: string | undefined) { |
||||
|
background.value = val || "#3A98CE"; |
||||
|
if (background.value || background.value.startsWith("/image/")) { |
||||
|
backgroundType.value = "image"; |
||||
|
} else { |
||||
|
backgroundType.value = "color"; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
Bios.onOpen((system: System) => { |
||||
|
rootState.value = system._rootState; |
||||
|
system.rootRef = mobileref.value; |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
*{ |
||||
|
padding: 0; |
||||
|
margin: 0; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.desktop { |
||||
|
position: relative; |
||||
|
background-color: #3A98CE; |
||||
|
height: 100vh; |
||||
|
overflow: hidden; |
||||
|
.userarea-upper { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
.dest-item{ |
||||
|
z-index: 2; |
||||
|
.swiperBox { |
||||
|
width: 100vw; |
||||
|
padding:vw(20); |
||||
|
// position: absolute; |
||||
|
// top:0; |
||||
|
// left: 0; |
||||
|
height: vh(560); |
||||
|
.swiper-slide{ |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(4, 1fr); |
||||
|
grid-template-rows: repeat(4,vh(100)) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
@ -0,0 +1,43 @@ |
|||||
|
<template> |
||||
|
<div class="file-item"> |
||||
|
<FileIcon :file="item" class="icon"</FileIcon> |
||||
|
<span class="title">{{ getName(item) }}</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { |
||||
|
basename, |
||||
|
} from "@/system/index.ts"; |
||||
|
import { dealSystemName, t } from "@/i18n"; |
||||
|
defineProps(['item']) |
||||
|
function getName(item: any) { |
||||
|
const name = dealSystemName(basename(item.path)); |
||||
|
// console.log(name) |
||||
|
// console.log(item.path) |
||||
|
if (name.endsWith(".exe")) { |
||||
|
return t(name.replace(".exe", "")); |
||||
|
} else { |
||||
|
return name; |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.file-item{ |
||||
|
height: vh(70); |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
overflow: hidden; |
||||
|
.icon{ |
||||
|
width: vw(40); |
||||
|
height: vh(40); |
||||
|
} |
||||
|
.title{ |
||||
|
font-size: vw(12); |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,16 @@ |
|||||
|
@use "sass:math"; |
||||
|
|
||||
|
// 默认设计稿的宽度 |
||||
|
$designWidth: 375; |
||||
|
// 默认设计稿的高度 |
||||
|
$designHeight: 667; |
||||
|
|
||||
|
// px 转为 vw 的函数 |
||||
|
@function vw($px) { |
||||
|
@return math.div($px, $designWidth) * 100vw; |
||||
|
} |
||||
|
|
||||
|
// px 转为 vh 的函数 |
||||
|
@function vh($px) { |
||||
|
@return math.div($px, $designHeight) * 100vh; |
||||
|
} |
@ -0,0 +1,10 @@ |
|||||
|
export const isMobileDevice=() =>{ |
||||
|
const userAgent = navigator.userAgent.toLowerCase(); |
||||
|
const mobileKeywords = ['iphone', 'android', 'mobile', 'blackberry', 'iemobile', 'opera mini']; |
||||
|
for (const keyword of mobileKeywords) { |
||||
|
if (userAgent.includes(keyword)) { |
||||
|
return true; |
||||
|
} |
||||
|
} |
||||
|
return false; |
||||
|
} |
Loading…
Reference in new issue