mirror of https://gitee.com/godoos/godoos.git
11 changed files with 262 additions and 9 deletions
@ -1,12 +1,18 @@ |
|||
<script setup lang="ts"> |
|||
import { System } from "@/system/index.ts"; |
|||
import { onMounted } from "vue"; |
|||
import { onMounted} from "vue"; |
|||
import { isMobileDevice } from "@/util/device"; |
|||
|
|||
onMounted(() => { |
|||
new System(); |
|||
isMobile.value = isMobileDevice(); |
|||
console.log(isMobile.value); |
|||
}); |
|||
const isMobile = ref<boolean>(false); |
|||
|
|||
</script> |
|||
|
|||
<template> |
|||
<screen /> |
|||
<screen v-if="!isMobile"/> |
|||
<mobile v-else></Mobile> |
|||
</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,105 @@ |
|||
<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; |
|||
background: url('@/pubic/image/bg/bg6.jpg'); |
|||
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