This commit is contained in:
parent
2aa592e48e
commit
842aed244f
|
@ -1,6 +1,7 @@
|
|||
import {
|
||||
computed,
|
||||
defineComponent,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
provide,
|
||||
ref,
|
||||
|
@ -24,6 +25,7 @@ import HotAdder from './HotAdder'
|
|||
import GameAdder from './GameAdder'
|
||||
import work_add_main_checked from '/icons/work_add_main_checked.png'
|
||||
import useAdderPageStore from './useAdderPageStore'
|
||||
import search from '../header/search'
|
||||
addIcons(MdKeyboardcommandkey, FaCompass, FaPencilRuler, IoGameController)
|
||||
|
||||
const ItemButton = defineComponent({
|
||||
|
@ -83,9 +85,11 @@ export default defineComponent(() => {
|
|||
const addTo = ref(layout.state.currentPage)
|
||||
|
||||
provide(AddToToken, addTo)
|
||||
// onUnmounted(() => {
|
||||
// store.type = 1
|
||||
// })
|
||||
onUnmounted(() => {
|
||||
store.isSearch = false
|
||||
|
||||
})
|
||||
|
||||
return () => (
|
||||
<div
|
||||
class={clsx(
|
||||
|
|
|
@ -292,6 +292,7 @@ export default defineComponent(() => {
|
|||
label: form.name
|
||||
}
|
||||
layout.addBlock(data, addTo?.value)
|
||||
globalToast.success('添加成功')
|
||||
}
|
||||
}}
|
||||
>
|
||||
|
|
|
@ -50,6 +50,12 @@ export default defineStore('adderPage', () => {
|
|||
watch(selectType, (val) => {
|
||||
getApps(val)
|
||||
})
|
||||
watch(isSearch, () => {
|
||||
if (!isSearch.value) {
|
||||
getApps(selectType.value)
|
||||
|
||||
}
|
||||
})
|
||||
const getApps = (_selectType: string) => {
|
||||
loading.value = true
|
||||
request<HotAppType[]>('GET', `/api/app/hotApps?hotAppsId=${_selectType}`)
|
||||
|
|
|
@ -14,6 +14,7 @@ export default defineComponent(() => {
|
|||
const tempFile = ref<File | null>(null)
|
||||
const layout = useLayoutStore()
|
||||
const tempBackground = ref('')
|
||||
const type = ref('img')
|
||||
const handleDrop = (e: DragEvent) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
|
@ -22,14 +23,26 @@ export default defineComponent(() => {
|
|||
if (!file) return
|
||||
tempBackground.value = URL.createObjectURL(file)
|
||||
tempFile.value = file
|
||||
|
||||
if (file.type.includes('image')) {
|
||||
type.value = 'img'
|
||||
} else {
|
||||
type.value = 'video'
|
||||
}
|
||||
}
|
||||
const showImg = computed(() => {
|
||||
if (tempBackground.value) {
|
||||
return tempBackground.value
|
||||
}
|
||||
if (backgroundStore.state.isCustom) {
|
||||
return layout.background.video? layout.background.video: layout.background.image
|
||||
if (layout.background.video) {
|
||||
type.value = 'video'
|
||||
return layout.background.video
|
||||
} else {
|
||||
return layout.background.image
|
||||
}
|
||||
}
|
||||
|
||||
return ''
|
||||
})
|
||||
return () => (
|
||||
|
@ -77,7 +90,7 @@ export default defineComponent(() => {
|
|||
<div class={'absolute top-0 left-0 w-full h-full'}>
|
||||
<BgContent
|
||||
image={showImg.value}
|
||||
video={showImg.value.split('.').pop() === 'mp4' ? tempBackground.value : undefined}
|
||||
video={type.value === 'video' ? showImg.value : undefined}
|
||||
></BgContent>
|
||||
</div>
|
||||
<div class={'w-full h-full absolute left-0 top-0 bottom-0 right-0 group'}>
|
||||
|
@ -98,12 +111,18 @@ export default defineComponent(() => {
|
|||
</span>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/svg + xml,image/gif,video/mp4"
|
||||
ref={fileInput}
|
||||
hidden
|
||||
onChange={(e: any) => {
|
||||
const file = e.target?.files?.[0]
|
||||
if (!file) return
|
||||
tempFile.value = file
|
||||
if (file.type.includes('image')) {
|
||||
type.value = 'img'
|
||||
} else {
|
||||
type.value = 'video'
|
||||
}
|
||||
tempBackground.value = URL.createObjectURL(file)
|
||||
}}
|
||||
/>
|
||||
|
@ -121,7 +140,6 @@ export default defineComponent(() => {
|
|||
useLayoutStore().changeBackground(res)
|
||||
backgroundStore.state.isCustom = true
|
||||
tempFile.value = null
|
||||
tempBackground.value = ''
|
||||
message.success('应用成功')
|
||||
})
|
||||
}
|
||||
|
|
|
@ -29,12 +29,14 @@ export const BgContent = defineComponent({
|
|||
}}
|
||||
>
|
||||
{props.video ? (
|
||||
<video autoplay src={props.video} class="w-full h-full" muted />
|
||||
<video autoplay src={props.video} loop class="w-full h-full object-cover" muted />
|
||||
) : (
|
||||
<div
|
||||
class="w-full h-full bg-center bg-cover bg-no-repeat"
|
||||
style={{
|
||||
backgroundImage: `url('${props.image}')`
|
||||
backgroundImage: `url('${props.image}')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center center',
|
||||
}}
|
||||
></div>
|
||||
)}
|
||||
|
|
|
@ -15,25 +15,25 @@ export const DefaultPageSetting = [
|
|||
{
|
||||
name: '游戏',
|
||||
backgroundUrl:
|
||||
'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/831a4d4c-61ff-4bae-ad31-9c0f4fa2db1c.webp',
|
||||
'https://oss.goosetab.com/000/user_upload/1/resource/831a4d4c-61ff-4bae-ad31-9c0f4fa2db1c.webp',
|
||||
contentUrl:
|
||||
'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/b2f3ed2f-f550-499b-8ea1-dfd192cfd388.webp',
|
||||
'https://oss.goosetab.com/000/user_upload/1/resource/b2f3ed2f-f550-499b-8ea1-dfd192cfd388.webp',
|
||||
desct: '聚合多类游戏工具,以及 资讯、排行榜等'
|
||||
},
|
||||
{
|
||||
name: '工作',
|
||||
backgroundUrl:
|
||||
'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/b82fd47c-24c1-4f58-b0db-51414b3bdda4.webp',
|
||||
'https://oss.goosetab.com/000/user_upload/1/resource/b82fd47c-24c1-4f58-b0db-51414b3bdda4.webp',
|
||||
contentUrl:
|
||||
'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/7e4cf74a-85cb-4e39-9e61-385b222ac8c4.webp',
|
||||
'https://oss.goosetab.com/000/user_upload/1/resource/7e4cf74a-85cb-4e39-9e61-385b222ac8c4.webp',
|
||||
desct: '结合番茄计时法等效率工具,让您可以高效学习'
|
||||
},
|
||||
{
|
||||
name: '轻娱',
|
||||
backgroundUrl:
|
||||
'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/73164094-cb0d-4366-8d1a-afc84ac119cc.webp',
|
||||
'https://oss.goosetab.com/000/user_upload/1/resource/73164094-cb0d-4366-8d1a-afc84ac119cc.webp',
|
||||
contentUrl:
|
||||
'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/bcbbffc6-c8a4-4c8e-8ba5-36fa1fbad4f9.webp',
|
||||
'https://oss.goosetab.com/000/user_upload/1/resource/bcbbffc6-c8a4-4c8e-8ba5-36fa1fbad4f9.webp',
|
||||
desct: '综合办公、学习、游戏等 属性,功能较为均勺'
|
||||
}
|
||||
]
|
||||
|
@ -193,15 +193,13 @@ export default defineComponent(() => {
|
|||
if (res) {
|
||||
const affix = val.background.split('.').pop()
|
||||
if (!affix) return
|
||||
|
||||
console.log(`background${uuid()}.${affix}`)
|
||||
console.log(`${res.type}`)
|
||||
|
||||
const file = new File([res], `${uuid()}.${affix}`, {
|
||||
type: `${res.type}`
|
||||
})
|
||||
uploadLocal(file).then((res2) => {
|
||||
val.background = res2
|
||||
console.log(res2);
|
||||
|
||||
})
|
||||
}
|
||||
})
|
||||
|
|
|
@ -46,6 +46,10 @@ export default defineComponent({
|
|||
? 'text-[13px] flex z-20 items-center pointer-events-none gap-x-2'
|
||||
: 'h-[110px]'
|
||||
)}
|
||||
onDblclick={(e) => {
|
||||
e.stopPropagation()
|
||||
layout.state.simple = !layout.state.simple
|
||||
}}
|
||||
style={{
|
||||
color: 'white',
|
||||
transitionDuration: '.4s',
|
||||
|
|
|
@ -77,7 +77,6 @@ export default defineStore('layout', () => {
|
|||
}
|
||||
const pageList = state.content[state.current].pages[page].list
|
||||
pageList.push(block)
|
||||
globalToast.success('添加成功')
|
||||
}
|
||||
const changeBlock = (item: EditBlockItemType, target: string) => {
|
||||
const idx = currentPage.value.list.findIndex((el) => el.id === target)
|
||||
|
|
27
src/main.css
27
src/main.css
|
@ -265,8 +265,7 @@ body {
|
|||
.background-enter-active,
|
||||
.background-leave-active {
|
||||
transform: scale(1);
|
||||
transition:
|
||||
transform 0.6s cubic-bezier(0.47, 1.64, 0.41, 0.8),
|
||||
transition: transform 0.6s cubic-bezier(0.47, 1.64, 0.41, 0.8);
|
||||
}
|
||||
|
||||
.background-enter-from {
|
||||
|
@ -275,3 +274,27 @@ body {
|
|||
.background-leave-to {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.eat-enter-active,
|
||||
.eat-leave-active {
|
||||
transition: transform 0.25s ease-in;
|
||||
}
|
||||
|
||||
.eat-enter-from {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.eat-leave-to {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
.neweat-enter-active,
|
||||
.neweat-leave-active {
|
||||
transition: transform 0.25s ease-out ;
|
||||
|
||||
}
|
||||
|
||||
.neweat-enter-from {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.neweat-leave-to {
|
||||
transform: translateY(107%);
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import clsx from 'clsx'
|
||||
import dayjs from 'dayjs'
|
||||
import { defineComponent, ref } from 'vue'
|
||||
import { defineComponent, reactive, ref, Transition, watch } from 'vue'
|
||||
|
||||
export default defineComponent(() => {
|
||||
const list = [
|
||||
|
@ -77,6 +77,11 @@ export default defineComponent(() => {
|
|||
'炒年糕'
|
||||
]
|
||||
const text = ref('')
|
||||
const open = ref(false)
|
||||
const pair = reactive({ front: true, back: true })
|
||||
watch(open, (val) => {
|
||||
if (!val) text.value = ''
|
||||
})
|
||||
return () => (
|
||||
<div
|
||||
class="w-full h-full flex flex-col px-[14px] pt-[23px]"
|
||||
|
@ -85,7 +90,7 @@ export default defineComponent(() => {
|
|||
backgroundSize: '100% 100%'
|
||||
}}
|
||||
onClick={() => {
|
||||
text.value = ''
|
||||
open.value = false
|
||||
}}
|
||||
>
|
||||
<div class={'w-full flex justify-center'}>
|
||||
|
@ -95,12 +100,12 @@ export default defineComponent(() => {
|
|||
<div
|
||||
class={clsx(
|
||||
'w-[130px] duration-150 bg-white relative',
|
||||
text.value ? 'h-[120px]' : 'h-[17px]'
|
||||
open.value ? 'h-[120px]' : 'h-[17px]'
|
||||
)}
|
||||
>
|
||||
<button
|
||||
class={
|
||||
'w-[48px] h-[19px] text-[12px] rounded left-1/2 bottom-[-10px] absolute -translate-x-1/2 rounded-br-[6px] rounded-bl-[6px] text-white'
|
||||
'w-[48px] z-20 h-[19px] text-[12px] rounded left-1/2 bottom-[-10px] absolute -translate-x-1/2 rounded-br-[6px] rounded-bl-[6px] text-white'
|
||||
}
|
||||
style={{
|
||||
background: 'linear-gradient(180deg,#ffa061 0%,#ffb62f 100%)',
|
||||
|
@ -110,26 +115,60 @@ export default defineComponent(() => {
|
|||
e.stopPropagation()
|
||||
const index = Math.floor(Math.random() * list.length)
|
||||
if (text.value) {
|
||||
text.value = ''
|
||||
setTimeout(() => {
|
||||
text.value = list[index]
|
||||
}, 400)
|
||||
}else {
|
||||
pair.front = false
|
||||
text.value = list[index]
|
||||
|
||||
setTimeout(() => {
|
||||
text.value = list[index]
|
||||
pair.back = false
|
||||
setTimeout(() => {
|
||||
pair.front = true
|
||||
pair.back = true
|
||||
}, 250)
|
||||
}, 250)
|
||||
} else {
|
||||
open.value = true
|
||||
text.value = list[index]
|
||||
}
|
||||
}}
|
||||
>
|
||||
{text.value ? '换' : '开始'}
|
||||
{open.value ? '换' : '开始'}
|
||||
</button>
|
||||
<span
|
||||
class={
|
||||
'text-[12px] text-[#333] absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'
|
||||
}
|
||||
>
|
||||
{text.value}
|
||||
</span>
|
||||
|
||||
<div class={'w-full h-full absolute left-0 top-0 overflow-hidden'}>
|
||||
<Transition name="eat">
|
||||
{pair.front && (
|
||||
<div class={'flex items-center justify-center w-full h-full'}>
|
||||
<span
|
||||
class={
|
||||
'text-[12px] text-[#333] absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'
|
||||
}
|
||||
>
|
||||
{text.value}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</Transition>
|
||||
<Transition name="neweat">
|
||||
{pair.back && (
|
||||
<div
|
||||
class={
|
||||
'flex items-center justify-center w-full h-full left-0 top-[-130px] absolute '
|
||||
}
|
||||
>
|
||||
<span
|
||||
class={
|
||||
'text-[12px] text-[#333] absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'
|
||||
}
|
||||
>
|
||||
{text.value}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!text.value && (
|
||||
<>
|
||||
<span class={'text-[24px] mt-[24px] text-[#333]'}>今天吃什么</span>
|
||||
|
|
|
@ -26,7 +26,7 @@ export default defineComponent(() => {
|
|||
'w-full bg-white/20 text-center rounded text-[14px] overflow-hidden text-ellipsis whitespace-nowrap'
|
||||
}
|
||||
>
|
||||
{store.state.list ? store.state.list.filter((val) => !val.isCompleted).shift()?.title : '无目标'}
|
||||
{store.state.list ? store.state.list.filter((val) => !val.isCompleted).pop()?.title : '无目标'}
|
||||
</div>
|
||||
<span class={'text-[42px] mb-1'}>
|
||||
{store.state.beginTime < 0 ? '15:00' : formatSeconds(store.remainingTime)}
|
||||
|
|
Loading…
Reference in New Issue