将图片资源调整到/tab目录下
This commit is contained in:
expdsn
parent
fe0b9edf01
commit
bcd9534a34
|
|
@ -22,10 +22,10 @@ const stageStrList = [
|
|||
]
|
||||
|
||||
const load = async (stageStr: string) => {
|
||||
await Assets.load({ alias: stageStr, src: `/fox/xiaohuli_${stageStr}.json` })
|
||||
await Assets.load({ alias: stageStr, src: `/tab/fox/xiaohuli_${stageStr}.json` })
|
||||
await Assets.load({
|
||||
alias: stageStr + '_atlas',
|
||||
src: `/fox/xiaohuli_${stageStr}.atlas`
|
||||
src: `/tab/fox/xiaohuli_${stageStr}.atlas`
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,4 @@
|
|||
import {
|
||||
computed,
|
||||
defineComponent,
|
||||
provide,
|
||||
ref,
|
||||
type InjectionKey,
|
||||
type Ref
|
||||
} from 'vue'
|
||||
import { computed, defineComponent, provide, ref, type InjectionKey, type Ref } from 'vue'
|
||||
import useLayoutStore from '../useLayoutStore'
|
||||
import { OhVueIcon, addIcons } from 'oh-vue-icons'
|
||||
import {
|
||||
|
|
@ -21,6 +14,7 @@ import WidgetAdder from './WidgetAdder'
|
|||
import { Form, Input, Select } from 'ant-design-vue'
|
||||
import HotAdder from './HotAdder'
|
||||
import GameAdder from './GameAdder'
|
||||
import work_add_main_checked from '/tab/icons/work_add_main_checked.png'
|
||||
addIcons(MdKeyboardcommandkey, FaCompass, FaPencilRuler, IoGameController)
|
||||
|
||||
const ItemButton = defineComponent({
|
||||
|
|
@ -60,7 +54,7 @@ const ItemButton = defineComponent({
|
|||
>
|
||||
{props.active && (
|
||||
<img
|
||||
src="/icons/work_add_main_checked.png"
|
||||
src={work_add_main_checked}
|
||||
class={'absolute h left-0 top-1/2 -translate-y-1/2 w-[8px] h-[34px]'}
|
||||
></img>
|
||||
)}
|
||||
|
|
@ -87,7 +81,7 @@ export default defineComponent(() => {
|
|||
isGame.value ? 'bg-[#2C2E3D]' : 'bg-[#fffc] backdrop-blur'
|
||||
)}
|
||||
// style={{
|
||||
// backgroundImage: `url('/bg/gameModel.png')`,
|
||||
// backgroundImage: `url('/tab/bg/gameModel.png')`,
|
||||
// backgroundSize: '100% 100%'
|
||||
// }}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ export const LinkItem = defineComponent({
|
|||
const addTo = inject(AddToToken)
|
||||
return () => (
|
||||
<div
|
||||
class={clsx(' w-full h-full rounded-lg relative flex flex-col justify-between shadow p-4', {
|
||||
class={clsx(' w-full h-full rounded-lg relative flex flex-col justify-between overflow-hidden shadow p-4', {
|
||||
'bg-white/20': isGame.value,
|
||||
'bg-white/80': !isGame.value
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@ export const WidgetItem = defineComponent({
|
|||
const isGame = computed(() => layout.state.current === 0)
|
||||
const addTo = inject(AddToToken)
|
||||
const isExist = computed(() => {
|
||||
|
||||
return (
|
||||
layout.state.content[layout.state.current].pages[layout.state.currentPage].list.findIndex(
|
||||
(el) => el?.name === props.content.name
|
||||
|
|
@ -33,7 +32,10 @@ export const WidgetItem = defineComponent({
|
|||
key={props.content.name}
|
||||
>
|
||||
<div class="flex">
|
||||
<img src={props.content.icon} class="w-[58px] h-[58px] bg-cover rounded-lg shadow-lg" />
|
||||
<img
|
||||
src={ props.content.icon}
|
||||
class="w-[58px] h-[58px] bg-cover rounded-lg shadow-lg"
|
||||
/>
|
||||
<div class="px-2 w-0 flex-grow ">
|
||||
<div
|
||||
class={clsx('text text-sm mb-[2px]', {
|
||||
|
|
@ -119,10 +121,7 @@ export const WidgetItem = defineComponent({
|
|||
export default defineComponent(() => {
|
||||
return () => (
|
||||
<div class="absolute left-0 top-0 w-full h-full overflow-y-auto scrollbar-hide gap-4">
|
||||
<div
|
||||
class="w-full grid grid-cols-3 grid-flow-row-dense gap-4"
|
||||
style="grid-auto-rows: 120px"
|
||||
>
|
||||
<div class="w-full grid grid-cols-3 grid-flow-row-dense gap-4" style="grid-auto-rows: 120px">
|
||||
{widgetList.map((el) => (
|
||||
<WidgetItem content={el} key={el.name} />
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,9 @@
|
|||
import { Button, Select, Slider } from 'ant-design-vue'
|
||||
import { computed, defineComponent, ref, Transition, watch } from 'vue'
|
||||
import { defineComponent, ref, Transition, watch } from 'vue'
|
||||
import useLayoutStore from '../useLayoutStore'
|
||||
import Rect from '@/utils/Rect'
|
||||
import useResource from './useResource'
|
||||
import { DownloadOutlined, EyeInvisibleOutlined, SwapOutlined } from '@ant-design/icons-vue'
|
||||
import SettingItem from '@/settings/SettingItem'
|
||||
import useSettingsStore from '@/settings/useSettingsStore'
|
||||
import { v4 as uuid } from 'uuid'
|
||||
import useRouterStore from '@/useRouterStore'
|
||||
|
||||
export default defineComponent(() => {
|
||||
|
|
@ -24,7 +21,7 @@ export default defineComponent(() => {
|
|||
|
||||
const settings = useSettingsStore()
|
||||
return () => (
|
||||
<div class="absolute left-0 top-0 w-full h-full p-4 overflow-y-auto">
|
||||
<div class="absolute left-0 top-0 w-full h-full p-4 overflow-y-auto scrollbar-hide">
|
||||
<SettingItem
|
||||
noBg
|
||||
v-slots={{
|
||||
|
|
@ -81,13 +78,15 @@ export default defineComponent(() => {
|
|||
label: () => <div>遮罩浓度</div>
|
||||
}}
|
||||
>
|
||||
<Slider
|
||||
v-model:value={settings.state.maskOpacity}
|
||||
step={0.01}
|
||||
tooltipOpen={false}
|
||||
min={0}
|
||||
max={0.7}
|
||||
/>
|
||||
<div class={'w-[200px]'}>
|
||||
<Slider
|
||||
v-model:value={settings.state.maskOpacity}
|
||||
step={0.01}
|
||||
tooltipOpen={false}
|
||||
min={0}
|
||||
max={0.7}
|
||||
/>
|
||||
</div>
|
||||
</SettingItem>
|
||||
<SettingItem
|
||||
noRoundedT
|
||||
|
|
@ -95,13 +94,15 @@ export default defineComponent(() => {
|
|||
label: () => <div>遮罩模糊</div>
|
||||
}}
|
||||
>
|
||||
<Slider
|
||||
v-model:value={settings.state.maskFilter}
|
||||
step={0.1}
|
||||
tooltipOpen={false}
|
||||
min={0}
|
||||
max={20}
|
||||
/>
|
||||
<div class={'w-[200px]'}>
|
||||
<Slider
|
||||
v-model:value={settings.state.maskFilter}
|
||||
step={0.1}
|
||||
tooltipOpen={false}
|
||||
min={0}
|
||||
max={20}
|
||||
/>
|
||||
</div>
|
||||
</SettingItem>
|
||||
<Transition>
|
||||
{(settings.state.maskFilter > 0 || settings.state.maskOpacity > 0) && (
|
||||
|
|
|
|||
|
|
@ -9,28 +9,11 @@ import request from '@/utils/request'
|
|||
import useUserStore from '@/user/useUserStore'
|
||||
import useRouterStore from '@/useRouterStore'
|
||||
import useBackgroundStore from './useBackgroundStore'
|
||||
import { Button } from 'ant-design-vue'
|
||||
import CustomWallpaper from './CustomWallpaper'
|
||||
|
||||
addIcons(BiChevronLeft, BiChevronDown)
|
||||
|
||||
const typeList = [
|
||||
'热门',
|
||||
'COSPALY',
|
||||
'二次元',
|
||||
'风景',
|
||||
'插画',
|
||||
'热门',
|
||||
'COSPALY',
|
||||
'二次元',
|
||||
'风景',
|
||||
'插画',
|
||||
'热门',
|
||||
'COSPALY',
|
||||
'二次元',
|
||||
'风景',
|
||||
'插画'
|
||||
]
|
||||
|
||||
const wallpaperAttrList = ['动态壁纸', '静态壁纸', '自定义壁纸']
|
||||
export type BackgroundType = {
|
||||
id: string
|
||||
|
|
@ -90,7 +73,7 @@ export default defineComponent(() => {
|
|||
style={
|
||||
isGame.value
|
||||
? {
|
||||
backgroundImage: `url('/bg/gameModel.png')`,
|
||||
backgroundImage: `url('/tab/bg/gameModel.png')`,
|
||||
backgroundSize: '100% 100%'
|
||||
}
|
||||
: null
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ export default defineComponent(() => {
|
|||
tempBackground.value ? 'bg-black/50 hidden group-hover:flex' : 'flex'
|
||||
)}
|
||||
>
|
||||
<img alt="123" src="/icons/uploadImg.png"></img>
|
||||
<img alt="123" src={new URL('/tab/icons/uploadImg.png', import.meta.url).href}></img>
|
||||
<span
|
||||
class={clsx('text-[15px] ', tempBackground.value ? 'text-[#fff]' : 'text-[#333]')}
|
||||
>
|
||||
|
|
@ -95,7 +95,6 @@ export default defineComponent(() => {
|
|||
onClick={() => {
|
||||
if (tempFile.value) {
|
||||
uploadLocal(tempFile.value).then((res) => {
|
||||
|
||||
useLayoutStore().changeBackground(res)
|
||||
|
||||
tempFile.value = null
|
||||
|
|
|
|||
|
|
@ -44,10 +44,10 @@ export default defineComponent(() => {
|
|||
<div class={'w-[180px]'}>
|
||||
<Slider
|
||||
v-model:value={settings.state.mainWidth}
|
||||
step={0.01}
|
||||
step={2}
|
||||
tooltipOpen={false}
|
||||
min={0}
|
||||
max={1}
|
||||
min={50}
|
||||
max={90}
|
||||
/>
|
||||
</div>
|
||||
</SettingItem>
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ export default defineComponent({
|
|||
window.open(props.block.link, '_blank')
|
||||
}}
|
||||
style={{
|
||||
backgroundImage: `url('/bg/game.webp')`
|
||||
backgroundImage: `url('/tab/bg/game.webp')`
|
||||
}}
|
||||
>
|
||||
<img src={props.block.icon} class={'w-[50px] h-[50px] rounded-lg'} alt="game icon" />
|
||||
|
|
@ -61,7 +61,7 @@ export default defineComponent({
|
|||
{props.block.label}
|
||||
</span>
|
||||
</div>
|
||||
<img src="/icons/gameicon.webp" alt="game_icon" class={'absolute right-0 bottom-0 w-[36px]'} />
|
||||
<img src="/tab/icons/gameicon.webp" alt="game_icon" class={'absolute right-0 bottom-0 w-[36px]'} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import SettingItem from '@/settings/SettingItem'
|
||||
import useSettingsStore from '@/settings/useSettingsStore'
|
||||
import { Select, Switch, type SelectProps } from 'ant-design-vue'
|
||||
import { Select, Slider, Switch, type SelectProps } from 'ant-design-vue'
|
||||
import { defineComponent, ref } from 'vue'
|
||||
import useSearchConfigStore from '../header/search/useSearchConfigStore'
|
||||
|
||||
|
|
@ -24,7 +24,20 @@ export default defineComponent({
|
|||
label: () => <div>搜索栏圆角</div>
|
||||
}}
|
||||
>
|
||||
<Switch v-model:checked={settings.state.showBlockLabel} />
|
||||
<div class={' flex items-center gap-x-2'}>
|
||||
<div class={'w-[180px]'}>
|
||||
<Slider
|
||||
v-model:value={settings.state.searchRadius}
|
||||
tooltipOpen={false}
|
||||
step={1}
|
||||
min={0}
|
||||
max={22}
|
||||
/>
|
||||
</div>
|
||||
<span class={'text-[#999] w-[30px] flex-0 text-[14px]'}>
|
||||
{settings.state.searchRadius}px
|
||||
</span>
|
||||
</div>
|
||||
</SettingItem>
|
||||
<SettingItem
|
||||
noRoundedT
|
||||
|
|
@ -32,7 +45,18 @@ export default defineComponent({
|
|||
label: () => <div>搜索栏透明</div>
|
||||
}}
|
||||
>
|
||||
<Switch v-model:checked={settings.state.showHistory} />
|
||||
<div class={' flex items-center gap-x-2'}>
|
||||
<div class={'w-[180px]'}>
|
||||
<Slider
|
||||
v-model:value={settings.state.searchOpacity}
|
||||
step={0.01}
|
||||
min={0.1}
|
||||
tooltipOpen={false}
|
||||
max={0.75}
|
||||
/>
|
||||
</div>
|
||||
<span class={'text-[#999] w-[30px] text-[14px]'}>{settings.state.searchOpacity}</span>
|
||||
</div>
|
||||
</SettingItem>
|
||||
<SettingItem
|
||||
v-slots={{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,82 @@
|
|||
import SettingItem from '@/settings/SettingItem'
|
||||
import useSettingsStore, { type TimeUnit } from '@/settings/useSettingsStore'
|
||||
import { Select, Slider, Switch, type SelectProps } from 'ant-design-vue'
|
||||
import { defineComponent, ref } from 'vue'
|
||||
import useSearchConfigStore from '../header/search/useSearchConfigStore'
|
||||
import clsx from 'clsx'
|
||||
const list: {
|
||||
label: string
|
||||
value: TimeUnit
|
||||
}[] = [
|
||||
{
|
||||
label: '日&月',
|
||||
value: 'date'
|
||||
},
|
||||
{
|
||||
label: '周',
|
||||
value: 'week'
|
||||
},
|
||||
{
|
||||
label: '秒',
|
||||
value: 'second'
|
||||
},
|
||||
{
|
||||
label: '农历',
|
||||
value: 'lunal'
|
||||
},
|
||||
{
|
||||
label: '12小时制',
|
||||
value: '12hour'
|
||||
}
|
||||
]
|
||||
export default defineComponent({
|
||||
name: 'SearchSetting',
|
||||
props: {},
|
||||
setup() {
|
||||
const settings = useSettingsStore()
|
||||
const searchStore = useSearchConfigStore()
|
||||
const options1 = ref<SelectProps['options']>(
|
||||
[...searchStore.defaultList, ...searchStore.customList].map((item) => ({
|
||||
value: item.name,
|
||||
label: item.name
|
||||
}))
|
||||
)
|
||||
return () => (
|
||||
<div class="p-4">
|
||||
<SettingItem
|
||||
v-slots={{
|
||||
label: () => <div>显示时间</div>
|
||||
}}
|
||||
>
|
||||
<Switch v-model:checked={settings.state.showTime} />
|
||||
</SettingItem>{' '}
|
||||
<div class={'flex flex-col gap-y-1'}>
|
||||
<span class={'text-[14px] font-bold text-[#333]'}>时间的样式</span>
|
||||
<div class={'p-3 bg-[#000000]/[.05] rounded-lg grid gap-2 grid-rows-2 grid-cols-4'}>
|
||||
{list.map((item) => (
|
||||
<div
|
||||
onClick={() => {
|
||||
if (settings.state.timeOptions.includes(item.value)) {
|
||||
settings.state.timeOptions = settings.state.timeOptions.filter(
|
||||
(el) => el !== item.value
|
||||
)
|
||||
} else {
|
||||
settings.state.timeOptions.push(item.value)
|
||||
}
|
||||
}}
|
||||
class={clsx(
|
||||
' items-center justify-center flex rounded py-1 cursor-pointer',
|
||||
settings.state.timeOptions.includes(item.value)
|
||||
? 'bg-[#ffa93d] text-white'
|
||||
: 'bg-black/[0.05] text-[#999] '
|
||||
)}
|
||||
>
|
||||
{item.label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
|
@ -8,6 +8,12 @@ export default defineComponent({
|
|||
setup() {
|
||||
const time = useTimeStore()
|
||||
const text = computed(() => {
|
||||
if (!useSettingsStore().state.timeOptions.includes('12hour')) {
|
||||
return {
|
||||
timeStr: `${time.date.getHours()}:${time.date.getMinutes()}:${time.date.getSeconds()}`,
|
||||
dateStr: `${time.date.getMonth() + 1}月${time.date.getDate()}日`
|
||||
}
|
||||
}
|
||||
const h = time.date.getHours()
|
||||
const hour = h < 10 ? '0' + h : h
|
||||
const m = time.date.getMinutes()
|
||||
|
|
@ -43,7 +49,7 @@ export default defineComponent({
|
|||
}}
|
||||
>
|
||||
<Transition>
|
||||
{settings.state.showDate && (
|
||||
{settings.state.showTime && (
|
||||
<div
|
||||
class={
|
||||
'transition-all ' +
|
||||
|
|
@ -59,9 +65,17 @@ export default defineComponent({
|
|||
<div
|
||||
class={'flex items-center gap-4 mt-4 ' + (layout.isCompact ? '' : 'justify-center')}
|
||||
>
|
||||
<div>{text.value.dateStr}</div>
|
||||
<Transition>{!layout.isCompact && <div>星期{info.value.dayWeek}</div>}</Transition>
|
||||
<Transition>{!layout.isCompact && <div>{info.value.day}</div>}</Transition>
|
||||
{settings.state.timeOptions.includes('date') && <div>{text.value.dateStr}</div>}
|
||||
<Transition>
|
||||
{!layout.isCompact && settings.state.timeOptions.includes('week') && (
|
||||
<div>星期{info.value.dayWeek}</div>
|
||||
)}
|
||||
</Transition>
|
||||
<Transition>
|
||||
{!layout.isCompact && settings.state.timeOptions.includes('lunal') && (
|
||||
<div>{info.value.day}</div>
|
||||
)}
|
||||
</Transition>
|
||||
</div>
|
||||
)}
|
||||
</Transition>
|
||||
|
|
|
|||
|
|
@ -12,25 +12,25 @@ const defaultSearchList: SearchInfo[] = [
|
|||
{
|
||||
name: '百度',
|
||||
url: 'https://www.baidu.com/s?wd=',
|
||||
icon: 'searchIcons/baidu.png',
|
||||
icon: 'tab/searchIcons/baidu.png',
|
||||
show: true
|
||||
},
|
||||
{
|
||||
name: '必应',
|
||||
url: 'https://cn.bing.com/search?q=',
|
||||
icon: 'searchIcons/bing.png',
|
||||
icon: 'tab/searchIcons/bing.png',
|
||||
show: true
|
||||
},
|
||||
{
|
||||
name: '谷歌',
|
||||
url: 'https://www.google.com/search?q=',
|
||||
icon: 'searchIcons/google.png',
|
||||
icon: 'tab/searchIcons/google.png',
|
||||
show: true
|
||||
},
|
||||
{
|
||||
name: '360',
|
||||
url: 'https://www.so.com/s?q=',
|
||||
icon: 'searchIcons/360.png',
|
||||
icon: 'tab/searchIcons/360.png',
|
||||
show: true
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -30,6 +30,13 @@ body {
|
|||
/* ! 全局禁用鼠标选择，需要在其他位置放开 */
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.ant-slider-rail {
|
||||
background-color: #0000001a !important;
|
||||
}
|
||||
.ant-slider-track {
|
||||
background-color: #ffa94d !important;
|
||||
}
|
||||
@keyframes loading {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
|
|
|
|||
|
|
@ -50,8 +50,8 @@ export default defineComponent(() => {
|
|||
{/* 弹框主体 */}
|
||||
<Transition name="settings">
|
||||
{show.value && (
|
||||
<div class="absolute left-6 bottom-20 w-[600px] h-[480px] rounded-lg overflow-hidden shadow-2xl flex">
|
||||
<div class="w-[200px] p-4 h-full bg-white/60 backdrop-blur flex flex-col">
|
||||
<div class="absolute left-6 bottom-20 bg-white w-[600px] h-[480px] rounded-lg overflow-hidden shadow-2xl flex">
|
||||
<div class="w-[200px] p-4 h-full bg-[#ebebeb] backdrop-blur flex flex-col">
|
||||
<div
|
||||
class={
|
||||
'w-full h-0 flex-grow mb-4 rounded-lg hover:bg-white/70 transition-all cursor-pointer flex justify-center items-center ' +
|
||||
|
|
@ -65,6 +65,7 @@ export default defineComponent(() => {
|
|||
<AvatarCircle />
|
||||
</div>
|
||||
</div>
|
||||
<div class={'w-full mb-5 h-[1px] bg-[#000000] opacity-10'}></div>
|
||||
<SettingsTab label="壁纸" path="settings-background" />
|
||||
<SettingsTab label="图标" path="settings-block" />
|
||||
<SettingsTab label="搜索" path="settings-search" />
|
||||
|
|
|
|||
|
|
@ -5,12 +5,13 @@ import BackgroundPage from '@/layout/background/BackgroundPage'
|
|||
import ThemeProvider from '@/utils/ThemeProvider'
|
||||
import BlockSettings from '@/layout/grid/BlockSettings'
|
||||
import SearchSetting from '@/layout/grid/SearchSetting'
|
||||
import TimeSetting from '@/layout/grid/TimeSetting'
|
||||
|
||||
export default defineComponent(() => {
|
||||
const router = useRouterStore()
|
||||
|
||||
return () => (
|
||||
<div class="w-0 h-full flex-grow bg-white/80 backdrop-blur">
|
||||
<div class="w-0 h-full flex-grow backdrop-blur">
|
||||
<ThemeProvider>
|
||||
{router.path === 'settings-user' ? (
|
||||
<UserPage />
|
||||
|
|
@ -20,6 +21,8 @@ export default defineComponent(() => {
|
|||
<BlockSettings />
|
||||
) : router.path === 'settings-search' ? (
|
||||
<SearchSetting />
|
||||
) : router.path === 'settings-time' ? (
|
||||
<TimeSetting />
|
||||
) : null}
|
||||
</ThemeProvider>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
|
|||
import { computed, reactive } from 'vue'
|
||||
|
||||
export type VisibleState = 'show' | 'auto' | ''
|
||||
|
||||
export type TimeUnit = 'date' | 'week' | '12hour' | 'lunal' | 'second';
|
||||
export default defineStore(
|
||||
'settings',
|
||||
() => {
|
||||
|
|
@ -15,8 +15,8 @@ export default defineStore(
|
|||
showSider: 'show' as VisibleState,
|
||||
showDock: 'show' as VisibleState,
|
||||
showPet: 'show' as VisibleState,
|
||||
showDate: true,
|
||||
showTime: true,
|
||||
timeOptions: ['date', 'week', '12hour', 'lunal', 'second'] as TimeUnit[],
|
||||
showAdder: true,
|
||||
showHistory: true,
|
||||
// 尺寸
|
||||
|
|
@ -27,7 +27,8 @@ export default defineStore(
|
|||
showBlockLabel: true,
|
||||
// 搜索
|
||||
searchWidth: 30,
|
||||
searchRadius: 12
|
||||
searchRadius: 12,
|
||||
searchOpacity: 0.75
|
||||
|
||||
})
|
||||
return { state, blockInner: computed(() => state.blockSize - 2 * state.blockPadding) }
|
||||
|
|
|
|||
|
|
@ -19,10 +19,10 @@ export default defineComponent({
|
|||
colorBgBase: props.dark ? '#393a41' : '#fff',
|
||||
colorBorder: 'transparent'
|
||||
},
|
||||
|
||||
|
||||
components: {
|
||||
Slider: {
|
||||
|
||||
railSize: 6
|
||||
},
|
||||
Button: {
|
||||
colorPrimary: '#f88e14'
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ export default {
|
|||
name: 'calendar',
|
||||
label: '日历',
|
||||
description: '日历信息',
|
||||
icon: '/icons/calendarIcon.png',
|
||||
icon: '/tab/icons/calendarIcon.png',
|
||||
modal: asyncLoader(() => import('./Modal')),
|
||||
list: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export default defineComponent(() => {
|
|||
<div
|
||||
class="w-full h-full flex flex-col p-2"
|
||||
style={{
|
||||
backgroundImage: 'url(/icons/constellation/constellation_icon_bg_large.webp)',
|
||||
backgroundImage: 'url(/tab/icons/constellation/constellation_icon_bg_large.webp)',
|
||||
backgroundSize: '100% 100%',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center'
|
||||
|
|
@ -33,7 +33,7 @@ export default defineComponent(() => {
|
|||
<div class={'w-full pt-2 pl-5 relative'}>
|
||||
<img
|
||||
class={'w-[25px] h-[25px] top-0 left-2 absolute '}
|
||||
src={`/icons/constellation/${zodiacMap.get(store.state.selectCode)}_big.png`}
|
||||
src={`/tab/icons/constellation/${zodiacMap.get(store.state.selectCode)}_big.png`}
|
||||
></img>
|
||||
|
||||
<span
|
||||
|
|
@ -41,7 +41,7 @@ export default defineComponent(() => {
|
|||
>
|
||||
{zodiacMap.get(store.state.selectCode)}
|
||||
<img
|
||||
src="/icons/change_constellation.png"
|
||||
src="/tab/icons/change_constellation.png"
|
||||
class={'w-[14px] h-[14px] cursor-pointer'}
|
||||
></img>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export default defineComponent(() => {
|
|||
<div
|
||||
class="w-full h-full flex flex-col p-2"
|
||||
style={{
|
||||
backgroundImage: 'url(/icons/constellation/constellation_icon_bg_medium.webp)',
|
||||
backgroundImage: 'url(/tab/icons/constellation/constellation_icon_bg_medium.webp)',
|
||||
backgroundSize: '100% 100%',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center'
|
||||
|
|
@ -27,7 +27,7 @@ export default defineComponent(() => {
|
|||
<div class={'w-full pt-4 pl-5 relative'}>
|
||||
<img
|
||||
class={'w-[25px] h-[25px] top-1 left-2 absolute '}
|
||||
src={`/icons/constellation/${zodiacMap.get(store.state.selectCode)}_big.png`}
|
||||
src={`/tab/icons/constellation/${zodiacMap.get(store.state.selectCode)}_big.png`}
|
||||
></img>
|
||||
<span class={'absolute right-1 top-1 text-[12px] text-[#666] scale-75'}>
|
||||
{dayjs().format('YYYY.MM.DD')}
|
||||
|
|
@ -35,7 +35,7 @@ export default defineComponent(() => {
|
|||
<span class={'relative z-10 flex items-center gap-x-1 font-bold text-[16px] text-[#333]'}>
|
||||
{zodiacMap.get(store.state.selectCode)}
|
||||
<img
|
||||
src="/icons/change_constellation.png"
|
||||
src="/tab/icons/change_constellation.png"
|
||||
class={'w-[14px] h-[14px] cursor-pointer'}
|
||||
></img>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export default defineComponent(() => {
|
|||
<div
|
||||
class="w-full h-full p-2 overflow-hidden"
|
||||
style={{
|
||||
background: `url('/bg/xingzuo_bg.png')`,
|
||||
background: `url('/tab/bg/xingzuo_bg.png')`,
|
||||
backgroundSize: '100% 100%'
|
||||
}}
|
||||
onClick={() => {
|
||||
|
|
@ -22,27 +22,27 @@ export default defineComponent(() => {
|
|||
<div
|
||||
class={'w-full h-full flex'}
|
||||
style={{
|
||||
background: `url('/bg/xingzuo_bg_main.png')`,
|
||||
background: `url('/tab/bg/xingzuo_bg_main.png')`,
|
||||
backgroundSize: '100% 100%'
|
||||
}}
|
||||
>
|
||||
<div class={'w-[358px] h-full flex flex-col py-2 pl-5'}>
|
||||
<div
|
||||
style={{
|
||||
background: `url('/icons/xingzuo_icon_bg.png')`,
|
||||
background: `url('/tab/icons/xingzuo_icon_bg.png')`,
|
||||
backgroundSize: '100% 100%'
|
||||
}}
|
||||
class={'w-[168px] h-[168px] flex items-center justify-center '}
|
||||
>
|
||||
<img
|
||||
class={'w-[48px] h-[48px]'}
|
||||
src={`/icons/constellation/${zodiacMap.get(store.state.selectCode)}_big.png`}
|
||||
src={`/tab/icons/constellation/${zodiacMap.get(store.state.selectCode)}_big.png`}
|
||||
></img>
|
||||
</div>
|
||||
<div class={'pl-8 mt-4 flex items-center gap-x-2 relative'}>
|
||||
<span class={'text-[16px] font-bold'}>{zodiacMap.get(store.state.selectCode)}</span>
|
||||
<img
|
||||
src="/icons/change_constellation.png"
|
||||
src="/tab/icons/change_constellation.png"
|
||||
class={'w-[14px] h-[14px] cursor-pointer'}
|
||||
onClick={(e) => {
|
||||
open.value = true
|
||||
|
|
@ -64,7 +64,7 @@ export default defineComponent(() => {
|
|||
'absolute top-1/2 -translate-y-1/2 hover:scale-110 duration-150 w-10 cursor-pointer',
|
||||
page.value === 1 ? 'right-5' : 'left-5 rotate-180 '
|
||||
)}
|
||||
src="/icons/constellation/xingzuo_right.png"
|
||||
src="/tab/icons/constellation/xingzuo_right.png"
|
||||
></img>
|
||||
<div class={'w-full h-full grid grid-cols-6 grid-rows-1'}>
|
||||
{Array.from(zodiacMap)
|
||||
|
|
@ -82,7 +82,7 @@ export default defineComponent(() => {
|
|||
>
|
||||
<img
|
||||
class={'w-[48px] h-[48px] '}
|
||||
src={`/icons/constellation/${value}_big.png`}
|
||||
src={`/tab/icons/constellation/${value}_big.png`}
|
||||
></img>
|
||||
</div>
|
||||
<span class={'text-[16px] font-bold text-[#333] leading-[16px]'}>
|
||||
|
|
@ -111,8 +111,8 @@ export default defineComponent(() => {
|
|||
<img
|
||||
src={
|
||||
(store.data?.today.exponents.caiyun.star || 0) > index
|
||||
? '/icons/stared.png'
|
||||
: '/icons/starun.png'
|
||||
? '/tab/icons/stared.png'
|
||||
: '/tab/icons/starun.png'
|
||||
}
|
||||
class={'w-[20px] h-[20px]'}
|
||||
></img>
|
||||
|
|
@ -126,8 +126,8 @@ export default defineComponent(() => {
|
|||
<img
|
||||
src={
|
||||
(store.data?.today.exponents.aiqing.star || 0) > index
|
||||
? '/icons/stared.png'
|
||||
: '/icons/starun.png'
|
||||
? '/tab/icons/stared.png'
|
||||
: '/tab/icons/starun.png'
|
||||
}
|
||||
class={'w-[20px] h-[20px]'}
|
||||
></img>
|
||||
|
|
@ -141,8 +141,8 @@ export default defineComponent(() => {
|
|||
<img
|
||||
src={
|
||||
(store.data?.today.exponents.zonghe.star || 0) > index
|
||||
? '/icons/stared.png'
|
||||
: '/icons/starun.png'
|
||||
? '/tab/icons/stared.png'
|
||||
: '/tab/icons/starun.png'
|
||||
}
|
||||
class={'w-[20px] h-[20px]'}
|
||||
></img>
|
||||
|
|
|
|||
|
|
@ -5,18 +5,18 @@ export default defineComponent(() => {
|
|||
<div
|
||||
class="w-full h-full flex items-center px-3"
|
||||
style={{
|
||||
background: `url('/icons/constellation/starSign__back.png')`,
|
||||
background: `url(${'/tab/icons/constellation/starSign__back.png'})`,
|
||||
backgroundSize: 'cover'
|
||||
}}
|
||||
>
|
||||
<img class={'w-[48px] h-[48px]'} src={'/icons/constellation/starSign__icon.png'}></img>
|
||||
<img class={'w-[48px] h-[48px]'} src={'/tab/icons/constellation/starSign__icon.png'}></img>
|
||||
<div class={'flex-1 flex justify-center'}>
|
||||
<div class="flex-col flex">
|
||||
<span class={'text-[16px] text-white'}>游戏折扣</span>
|
||||
<div class={'flex items-center text-[#fffc] text-[12px] '}>
|
||||
立即查看
|
||||
<div>
|
||||
<img src="/icons/gt.png"></img>
|
||||
<img src="/tab/icons/gt.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ export default {
|
|||
name: 'constellation',
|
||||
label: '星座运势',
|
||||
description: '你可查看星座运势',
|
||||
icon: '/icons/constellation_icon.png',
|
||||
icon: '/tab/icons/constellation_icon.png',
|
||||
modal: asyncLoader(() => import('./Modal')),
|
||||
list: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ export default defineComponent({
|
|||
backgroundPosition: 'center'
|
||||
}}
|
||||
>
|
||||
<img class={'absolute top-0 '} src="/icons/constellation/constellation_un.png"></img>
|
||||
<img class={'absolute top-0 '} src="/tab/icons/constellation/constellation_un.png"></img>
|
||||
<Progress
|
||||
percent={20 * props.star}
|
||||
type="dashboard"
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ export default {
|
|||
name: 'gameNews',
|
||||
label: '游戏资讯',
|
||||
description: '游戏资讯',
|
||||
icon: '/icons/game_news_icon.png',
|
||||
icon: '/tab/icons/game_news_icon.png',
|
||||
modal: asyncLoader(() => import('./Modal')),
|
||||
list: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -6,18 +6,18 @@ export default defineComponent(() => {
|
|||
<div
|
||||
class="w-full h-full flex items-center px-3"
|
||||
style={{
|
||||
background: `url('/bg/gameDiscount__back.png')`,
|
||||
background: `url('/tab/bg/gameDiscount__back.png')`,
|
||||
backgroundSize: 'cover'
|
||||
}}
|
||||
>
|
||||
<img class={'w-[48px] h-[48px]'} src={'/icons/gameDiscount__icon.png'}></img>
|
||||
<img class={'w-[48px] h-[48px]'} src={'/tab/icons/gameDiscount__icon.png'}></img>
|
||||
<div class={'flex-1 flex justify-center'}>
|
||||
<div class="flex-col flex">
|
||||
<span class={'text-[16px] text-white'}>游戏折扣</span>
|
||||
<div class={'flex items-center text-[#fffc] text-[12px] '}>
|
||||
立即查看
|
||||
<div>
|
||||
<img src="/icons/gt.png"></img>
|
||||
<img src="/tab/icons/gt.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ export default {
|
|||
name: 'discount',
|
||||
label: '游戏折扣',
|
||||
description: '游戏折扣',
|
||||
icon: '/icons/discounts_icon.png',
|
||||
icon: '/tab/icons/discounts_icon.png',
|
||||
modal: asyncLoader(() => import('./Modal')),
|
||||
list: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ export default defineComponent(() => {
|
|||
<div
|
||||
class="w-full h-full flex flex-col px-[14px] pt-[23px]"
|
||||
style={{
|
||||
backgroundImage: `url('/bg/eat_bg@2x.webp')`,
|
||||
backgroundImage: `url('/tab/bg/eat_bg@2x.webp')`,
|
||||
backgroundSize: '100% 100%'
|
||||
}}
|
||||
onClick={() => {
|
||||
|
|
@ -89,7 +89,7 @@ export default defineComponent(() => {
|
|||
}}
|
||||
>
|
||||
<div class={'w-full flex justify-center'}>
|
||||
<img src="/bg/eat_top_bg.webp" alt="eat_bg"></img>
|
||||
<img src="/tab/bg/eat_top_bg.webp" alt="eat_bg"></img>
|
||||
</div>
|
||||
<div class={'flex flex-col w-full justify-center items-center'}>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ export default {
|
|||
name: 'todayEat',
|
||||
label: '今天吃什么',
|
||||
description: '今天吃什么呢？',
|
||||
icon: '/icons/today_eat.png',
|
||||
icon: '/tab/icons/today_eat.png',
|
||||
modal: null,
|
||||
list: [
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export default defineComponent(() => {
|
|||
}}
|
||||
>
|
||||
<div class={'flex w-full justify-center pb-5'}>
|
||||
<img class={'h-[20px]'} src="/icons/游戏资讯@2x.png"></img>
|
||||
<img class={'h-[20px]'} src="/tab/icons/游戏资讯@2x.png"></img>
|
||||
</div>
|
||||
<div class={'h-0 w-full flex-1'}>
|
||||
<div class={'w-full h-full overflow-y-scroll'} onWheel={handleScroll} ref={containerRef}>
|
||||
|
|
|
|||
|
|
@ -7,18 +7,18 @@ export default defineComponent(() => {
|
|||
<div
|
||||
class="w-full h-full flex items-center px-3"
|
||||
style={{
|
||||
background: `url('/bg/gamenews__back.png')`,
|
||||
background: `url('/tab/bg/gamenews__back.png')`,
|
||||
backgroundSize: 'cover'
|
||||
}}
|
||||
>
|
||||
<img class={'w-[48px] h-[48px]'} src={'/icons/gamenews__icon.png'}></img>
|
||||
<img class={'w-[48px] h-[48px]'} src={'/tab/icons/gamenews__icon.png'}></img>
|
||||
<div class={'flex-1 flex justify-center'}>
|
||||
<div class="flex-col flex">
|
||||
<span class={'text-[16px] text-white'}>游戏资讯</span>
|
||||
<div class={'flex items-center text-[#fffc] text-[12px] '}>
|
||||
立即查看
|
||||
<div>
|
||||
<img src="/icons/gt.png"></img>
|
||||
<img src="/tab/icons/gt.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ export default {
|
|||
name: 'gameNews',
|
||||
label: '游戏资讯',
|
||||
description: '游戏资讯',
|
||||
icon: '/icons/game_news_icon.png',
|
||||
icon: '/tab/icons/game_news_icon.png',
|
||||
modal: asyncLoader(() => import('./Modal')),
|
||||
list: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ export default {
|
|||
name: 'gameVideo',
|
||||
label: 'gameVideo',
|
||||
description: 'gameVideoDesc',
|
||||
icon: '/icons/game_video.png',
|
||||
icon: '/tab/icons/game_video.png',
|
||||
modal: null,
|
||||
list: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export default defineComponent(() => {
|
|||
<span class={'z-10'}>{value}</span>
|
||||
{store.type === key && (
|
||||
<img
|
||||
src="/icons/hotspot/hot_tab_bg.png"
|
||||
src="/tab/icons/hotspot/hot_tab_bg.png"
|
||||
class={'w-[26px] h-[11px] object-cover absolute -right-3 bottom-2'}
|
||||
alt="bg"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export default defineComponent(() => {
|
|||
<span class={'z-10'}>{value}</span>
|
||||
{store.type === key && (
|
||||
<img
|
||||
src="/icons/hotspot/hot_tab_bg.png"
|
||||
src="/tab/icons/hotspot/hot_tab_bg.png"
|
||||
class={'w-[26px] h-[11px] object-cover absolute -right-3 bottom-2'}
|
||||
alt="bg"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export default defineComponent(() => {
|
|||
return () => (
|
||||
<div class="w-full h-full bg-[#e4eaff] flex flex-col">
|
||||
<div class={'w-full h-[47px] flex items-center justify-center'}>
|
||||
<img src="/icons/热搜榜@2x.png" class={'w-[65px] object-cover'}></img>
|
||||
<img src="/tab/icons/热搜榜@2x.png" class={'w-[65px] object-cover'}></img>
|
||||
</div>
|
||||
<div class={'flex-1 h-0'}>
|
||||
<div class={'flex w-full h-full bg-white'}>
|
||||
|
|
@ -28,7 +28,7 @@ export default defineComponent(() => {
|
|||
)}
|
||||
>
|
||||
<img
|
||||
src={`/icons/hotspot/${key}_info.png`}
|
||||
src={`/tab/icons/hotspot/${key}_info.png`}
|
||||
class={'w-[24px] h-[24px] object-cover'}
|
||||
></img>
|
||||
<span>{value}热点</span>
|
||||
|
|
|
|||
|
|
@ -7,14 +7,14 @@ export default defineComponent(() => {
|
|||
class="w-full h-full flex items-center px-3 bg-[#405fd2]"
|
||||
|
||||
>
|
||||
<img class={'w-[48px] h-[48px]'} src={'/icons/hot_information_icon.png'}></img>
|
||||
<img class={'w-[48px] h-[48px]'} src={'/tab/icons/hot_information_icon.png'}></img>
|
||||
<div class={'flex-1 flex justify-center'}>
|
||||
<div class="flex-col flex">
|
||||
<span class={'text-[16px] text-white'}>热点折扣</span>
|
||||
<div class={'flex items-center text-[#fffc] text-[12px] '}>
|
||||
立即查看
|
||||
<div>
|
||||
<img src="/icons/gt.png"></img>
|
||||
<img src="/tab/icons/gt.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ export default {
|
|||
name: 'hotspot',
|
||||
label: '热点资讯',
|
||||
description: '热点信息尽在此处',
|
||||
icon: '/icons/hot_information_icon.png',
|
||||
icon: '/tab/icons/hot_information_icon.png',
|
||||
modal: asyncLoader(() => import('./Modal')),
|
||||
list: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ export default {
|
|||
name: 'weApply',
|
||||
label: '大家都在用',
|
||||
description: '盘点近期大热的应用软件和热门游戏',
|
||||
icon: '/icons/recommendedIcon.png',
|
||||
icon: '/tab/icons/recommendedIcon.png',
|
||||
modal: null,
|
||||
list: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ export default defineComponent(() => {
|
|||
<div
|
||||
class={'w-full h-[100px] absolute left-0 top-0 '}
|
||||
style={{
|
||||
backgroundImage: `url('/weather_img/img/weather_bg_large.webp')`,
|
||||
backgroundImage: `url('/tab/weather_img/img/weather_bg_large.webp')`,
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: 'contain'
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ export default defineComponent(() => {
|
|||
<div
|
||||
class={'w-full h-[100px] absolute left-0 top-0 '}
|
||||
style={{
|
||||
backgroundImage: `url('/weather_img/img/weather_bg_mdeium.webp')`,
|
||||
backgroundImage: `url('/tab/weather_img/img/weather_bg_mdeium.webp')`,
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: 'contain'
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -215,7 +215,7 @@ export default defineComponent(() => {
|
|||
<div class={'w-full h-full px-7 py-4 flex flex-col gap-y-3'}>
|
||||
<div class="flex">
|
||||
<div class={'flex flex-col text-[#333]'}>
|
||||
<span class="text-[#666]">{store.weatherData?.city.name}</span>
|
||||
<span class="text-[#666]">{nowWeather.value?.city.name}</span>
|
||||
<span class={'text-[57px] font-bold'}>{nowWeather.value?.base.stemp}°</span>
|
||||
<span class="text-[14px] flex gap-x-1">
|
||||
{nowWeather.value?.base.weather}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ export default {
|
|||
name: 'weather',
|
||||
label: '天气',
|
||||
description: '天气资讯',
|
||||
icon: '/icons/weatherIcon.png',
|
||||
icon: '/tab/icons/weatherIcon.png',
|
||||
modal: asyncLoader(() => import('./Modal')),
|
||||
list: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ export default defineComponent({
|
|||
const idx = computed(() => list.indexOf(props.weather || '未知天气'))
|
||||
|
||||
const url = computed(() => {
|
||||
return idx.value < 0 ? '/weather_img/38.png' : `/weather_img/${idx.value}.png`
|
||||
return idx.value < 0 ? '/tab/weather_img/38.png' : `/tab/weather_img/${idx.value}.png`
|
||||
})
|
||||
return () => (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ export default defineConfig({
|
|||
host: '0.0.0.0',
|
||||
port: 8200
|
||||
},
|
||||
base: '/tab',
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
|
|
|
|||
Loading…
Reference in New Issue