🌻 update(custom): 更新主页的样式
This commit is contained in:
nongyehong
@@ -7,7 +7,7 @@
|
||||
<title>Tauri + Vue + TS</title>
|
||||
|
||||
<!--引入iconpark图标库-->
|
||||
<script defer src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_30895_3.4ce1f367a35de9cc7cfda67d19c58bf6.js"></script>
|
||||
<script defer src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_30895_12.68e463a5019ac3f084549f2b9b4696a2.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
BIN
src/assets/img/hula_bg.png
Normal file
BIN
src/assets/img/hula_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
@@ -1 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1705372642705" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7402" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M143.616 47.104l830.08 830.08c26.24 26.24 26.24 69.888 0 96.128-26.24 26.24-69.888 26.24-96.128 0L47.488 143.232c-17.536-26.24-17.536-69.888 0-96.128 26.24-26.24 69.888-26.24 96.128 0z m0 0" fill="#707070" p-id="7403"></path><path d="M982.528 143.232L152.32 973.312c-26.24 26.24-69.888 26.24-96.128 0-26.24-26.24-26.24-69.888 0-96.128L886.4 47.104c26.24-26.24 69.888-26.24 96.128 0 17.408 26.24 17.408 69.888 0 96.128z m0 0" fill="#707070" p-id="7404"></path></svg>
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1705372642705" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7402" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M143.616 47.104l830.08 830.08c26.24 26.24 26.24 69.888 0 96.128-26.24 26.24-69.888 26.24-96.128 0L47.488 143.232c-17.536-26.24-17.536-69.888 0-96.128 26.24-26.24 69.888-26.24 96.128 0z m0 0" fill="#404040" p-id="7403"></path><path d="M982.528 143.232L152.32 973.312c-26.24 26.24-69.888 26.24-96.128 0-26.24-26.24-26.24-69.888 0-96.128L886.4 47.104c26.24-26.24 69.888-26.24 96.128 0 17.408 26.24 17.408 69.888 0 96.128z m0 0" fill="#404040" p-id="7404"></path></svg>
|
||||
|
Before Width: | Height: | Size: 796 B After Width: | Height: | Size: 796 B |
@@ -1 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1705372525309" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4104" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M812.3 959.4H213.7c-81.6 0-148-66.4-148-148V212.9c0-81.6 66.4-148 148-148h598.5c81.6 0 148 66.4 148 148v598.5C960.3 893 893.9 959.4 812.3 959.4zM213.7 120.9c-50.7 0-92 41.3-92 92v598.5c0 50.7 41.3 92 92 92h598.5c50.7 0 92-41.3 92-92V212.9c0-50.7-41.3-92-92-92H213.7z" fill="#707070" p-id="4105"></path></svg>
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1705372525309" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4104" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M812.3 959.4H213.7c-81.6 0-148-66.4-148-148V212.9c0-81.6 66.4-148 148-148h598.5c81.6 0 148 66.4 148 148v598.5C960.3 893 893.9 959.4 812.3 959.4zM213.7 120.9c-50.7 0-92 41.3-92 92v598.5c0 50.7 41.3 92 92 92h598.5c50.7 0 92-41.3 92-92V212.9c0-50.7-41.3-92-92-92H213.7z" fill="#404040" p-id="4105"></path></svg>
|
||||
|
Before Width: | Height: | Size: 639 B After Width: | Height: | Size: 639 B |
@@ -1 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1705372596720" class="icon" viewBox="0 0 7168 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6186" width="336" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4441.95120779 617.62257531h-1760.37625529c-56.33204017 0-105.62257531-49.29053514-105.62257532-105.62257531s49.29053514-105.62257531 105.62257532-105.62257531h1760.37625529c56.33204017 0 105.62257531 49.29053514 105.62257533 105.62257531s-49.29053514 105.62257531-105.62257533 105.62257531z" p-id="6187" fill="#707070"></path></svg>
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1705372596720" class="icon" viewBox="0 0 7168 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6186" width="336" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4441.95120779 617.62257531h-1760.37625529c-56.33204017 0-105.62257531-49.29053514-105.62257532-105.62257531s49.29053514-105.62257531 105.62257532-105.62257531h1760.37625529c56.33204017 0 105.62257531 49.29053514 105.62257533 105.62257531s-49.29053514 105.62257531-105.62257533 105.62257531z" p-id="6187" fill="#404040"></path></svg>
|
||||
|
Before Width: | Height: | Size: 665 B After Width: | Height: | Size: 665 B |
@@ -1 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1705375072061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10477" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M959.720175 0H294.216115a63.960025 63.960025 0 0 0-63.960025 63.960025v127.92005H64.279825a63.960025 63.960025 0 0 0-63.960025 63.960025v703.560275a63.960025 63.960025 0 0 0 63.960025 63.960025h703.560275a63.960025 63.960025 0 0 0 63.960025-63.960025v-166.935665h127.92005a63.960025 63.960025 0 0 0 63.960025-63.960025V63.960025a63.960025 63.960025 0 0 0-63.960025-63.960025z m-191.880075 728.504685V959.400375H64.279825V255.8401h703.560275z m189.321674 0H831.800125V255.8401a63.960025 63.960025 0 0 0-63.960025-63.960025H294.216115V63.960025H959.720175z" fill="#707070" p-id="10478"></path></svg>
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1705375072061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10477" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M959.720175 0H294.216115a63.960025 63.960025 0 0 0-63.960025 63.960025v127.92005H64.279825a63.960025 63.960025 0 0 0-63.960025 63.960025v703.560275a63.960025 63.960025 0 0 0 63.960025 63.960025h703.560275a63.960025 63.960025 0 0 0 63.960025-63.960025v-166.935665h127.92005a63.960025 63.960025 0 0 0 63.960025-63.960025V63.960025a63.960025 63.960025 0 0 0-63.960025-63.960025z m-191.880075 728.504685V959.400375H64.279825V255.8401h703.560275z m189.321674 0H831.800125V255.8401a63.960025 63.960025 0 0 0-63.960025-63.960025H294.216115V63.960025H959.720175z" fill="#404040" p-id="10478"></path></svg>
|
||||
|
Before Width: | Height: | Size: 929 B After Width: | Height: | Size: 929 B |
@@ -3,7 +3,7 @@
|
||||
<div data-tauri-drag-region class="flex justify-end select-none">
|
||||
<!-- 收缩页面 -->
|
||||
<div v-if="shrink" @click="shrinkWindow" class="w-28px h24px flex-center hover:bg-#e7e7e7">
|
||||
<svg class="w-16px h-16px color-#707070 cursor-pointer"><use href="#left-bar"></use></svg>
|
||||
<svg class="w-16px h-16px color-#404040 cursor-pointer"><use href="#left-bar"></use></svg>
|
||||
</div>
|
||||
<!-- 最小化 -->
|
||||
<div v-if="minW" @click="minimizeWindow" class="w-28px h24px flex-center hover:bg-#e7e7e7">
|
||||
|
||||
@@ -9,8 +9,17 @@ export const useWindow = () => {
|
||||
* @param wantCloseWindow 创建后需要关闭的窗口
|
||||
* @param width 窗口宽度
|
||||
* @param height 窗口高度
|
||||
* @param minW 窗口最小宽度
|
||||
* @param minH 窗口最小高度
|
||||
* */
|
||||
const createWebviewWindow = async (label: string, width: number, height: number, wantCloseWindow?: string) => {
|
||||
const createWebviewWindow = async (
|
||||
label: string,
|
||||
width: number,
|
||||
height: number,
|
||||
wantCloseWindow?: string,
|
||||
minW?: 310,
|
||||
minH?: 540
|
||||
) => {
|
||||
const webview = new WebviewWindow(label, {
|
||||
url: `/${label}`,
|
||||
fullscreen: false,
|
||||
@@ -18,6 +27,8 @@ export const useWindow = () => {
|
||||
center: true,
|
||||
width: width,
|
||||
height: height,
|
||||
minHeight: minH,
|
||||
minWidth: minW,
|
||||
skipTaskbar: false,
|
||||
decorations: false,
|
||||
transparent: true
|
||||
|
||||
@@ -1,15 +1,32 @@
|
||||
<template>
|
||||
<div class="resizable bg-#fdfdfd select-none" :style="{ width: width + 'px' }">
|
||||
<ActionBar v-if="shrinkStatus" :shrink-status="!shrinkStatus" :max-w="false" />
|
||||
中间区域
|
||||
<ActionBar class="absolute right-0" v-if="shrinkStatus" :shrink-status="!shrinkStatus" :max-w="false" />
|
||||
|
||||
<div class="resize-handle" @mousedown="initDrag"></div>
|
||||
|
||||
<!-- 顶部搜索栏 -->
|
||||
<div class="mt-30px w-full h-50px flex flex-col items-center">
|
||||
<div class="flex-center gap-5px w-full pr-16px pl-16px box-border">
|
||||
<n-input class="rounded-4px w-full" style="background-color: #f3f3f3" size="small" placeholder="搜索" />
|
||||
<n-button size="small" style="padding: 0 5px; background-color: #f3f3f3">
|
||||
<template #icon>
|
||||
<svg class="w-24px h-24px"><use href="#plus"></use></svg>
|
||||
</template>
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 消息列表 -->
|
||||
<div class="wh-full">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Mitt from '@/utils/Bus.ts'
|
||||
|
||||
const minWidth = 250 // 设置最小宽度
|
||||
const minWidth = 160 // 设置最小宽度
|
||||
const maxWidth = 320 // 设置最大宽度
|
||||
const width = ref(250) // 初始化宽度
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex wh-full">
|
||||
<div class="flex wh-full min-h-540px min-w-310px" style="background: rgba(255, 255, 255, 0.6)">
|
||||
<Left />
|
||||
<Center />
|
||||
<Right v-if="!shrinkStatus" />
|
||||
|
||||
@@ -1,25 +1,109 @@
|
||||
<template>
|
||||
<div
|
||||
class="w-60px h-full pt-10px pl-8px pr-8px pb-10px box-border flex-x-center rounded-tl-8px rounded-bl-8px select-none">
|
||||
<img
|
||||
@click="toLogin"
|
||||
class="border-rounded-50% w-34px h-34px bg-#f1f1f1 cursor-pointer"
|
||||
style="border: 1px solid #fff"
|
||||
src="/logo.png"
|
||||
alt="" />
|
||||
<div class="w-60px h-full pt-30px pl-6px pr-6px pb-15px box-border flex-col-center select-none">
|
||||
<img @click="toLogin" class="border-rounded-50% w-36px h-36px bg-#fff cursor-pointer" src="/logo.png" alt="" />
|
||||
|
||||
<div class="wh-full mt-20px flex-col-x-center justify-between">
|
||||
<!-- 上部分操作栏 -->
|
||||
<div class="flex-col-x-center gap-10px">
|
||||
<div
|
||||
v-for="(item, index) in items"
|
||||
:key="index"
|
||||
@click="pageJumps(item.url)"
|
||||
class="top-action"
|
||||
:class="{ active: activeItem === item.url }">
|
||||
<svg class="w-22px h-22px"><use :href="`#${item.icon}`"></use></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 下部分操作栏 -->
|
||||
<div class="bottom-action flex-col-x-center gap-18px">
|
||||
<svg><use href="#mail"></use></svg>
|
||||
<svg><use href="#folder-close"></use></svg>
|
||||
<svg><use href="#collection-files"></use></svg>
|
||||
<svg><use href="#hamburger-button"></use></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { delay } from 'lodash-es'
|
||||
import { useWindow } from '@/hooks/useWindow.ts'
|
||||
import router from '@/router'
|
||||
|
||||
const items = [
|
||||
{
|
||||
url: 'message',
|
||||
icon: 'message'
|
||||
},
|
||||
{
|
||||
url: 'friendsList',
|
||||
icon: 'avatar'
|
||||
},
|
||||
{
|
||||
url: 'space',
|
||||
icon: 'star-one'
|
||||
},
|
||||
{
|
||||
url: 'more',
|
||||
icon: 'application-menu'
|
||||
}
|
||||
]
|
||||
|
||||
/*当前选中的元素 默认选中items的第一项*/
|
||||
const activeItem = ref<string>(items[0].url)
|
||||
const { createWebviewWindow } = useWindow()
|
||||
|
||||
/**
|
||||
* 统一跳转路由方法
|
||||
* @param url 跳转的路由
|
||||
* */
|
||||
const pageJumps = (url: string) => {
|
||||
activeItem.value = url
|
||||
router.push(`/${url}`)
|
||||
}
|
||||
|
||||
const toLogin = () => {
|
||||
// todo 暂时使用创建新窗口来跳转到登录页面，生产环境一般不会跳转到登录页面
|
||||
delay(async () => {
|
||||
await createWebviewWindow('login', 320, 448, 'home')
|
||||
}, 800)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
/* 页面加载的时候默认显示消息列表 */
|
||||
pageJumps(activeItem.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped lang="scss">
|
||||
@mixin wh($w: 22px, $h: 22px) {
|
||||
width: $w;
|
||||
height: $h;
|
||||
}
|
||||
.top-action {
|
||||
padding: 6px 8px 6px 8px;
|
||||
&:not(.active):hover {
|
||||
background: rgba(193, 193, 193, 0.4);
|
||||
border-radius: 8px;
|
||||
color: #189f57;
|
||||
cursor: pointer;
|
||||
animation: linearAnimation 5s linear forwards;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-action {
|
||||
svg {
|
||||
@include wh;
|
||||
&:hover {
|
||||
color: #189f57;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background: rgba(193, 193, 193, 0.4);
|
||||
border-radius: 8px;
|
||||
color: #189f57;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
<template>
|
||||
<div class="flex-1 bg-#f1f1f1 h-full rounded-tr-8px rounded-br-8px w-100vw">
|
||||
<div class="flex-1 bg-#f1f1f1 h-full w-100vw">
|
||||
<ActionBar />
|
||||
|
||||
<!-- 聊天界面背景图标 -->
|
||||
<div class="flex-center wh-full">
|
||||
<img class="w-130px h-100px" src="@/assets/img/hula_bg.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
@@ -6,17 +6,39 @@ const routes: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: () => import('@/views/page/Login.vue')
|
||||
component: () => import('@/views/page/login-window/Login.vue')
|
||||
},
|
||||
{
|
||||
path: '/QRCode',
|
||||
name: 'QRCode',
|
||||
component: () => import('@/views/page/QRCode.vue')
|
||||
component: () => import('@/views/page/login-window/QRCode.vue')
|
||||
},
|
||||
{
|
||||
path: '/home',
|
||||
name: 'page',
|
||||
component: () => import('@/layout/index.vue')
|
||||
name: 'home',
|
||||
component: () => import('@/layout/index.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '/message',
|
||||
name: 'message',
|
||||
component: () => import('@/views/page/home-window/Message.vue')
|
||||
},
|
||||
{
|
||||
path: '/friendsList',
|
||||
name: 'friendsList',
|
||||
component: () => import('@/views/page/home-window/FriendsList.vue')
|
||||
},
|
||||
{
|
||||
path: '/space',
|
||||
name: 'space',
|
||||
component: () => import('@/views/page/home-window/Space.vue')
|
||||
},
|
||||
{
|
||||
path: '/more',
|
||||
name: 'more',
|
||||
component: () => import('@/views/page/home-window/More.vue')
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
45
src/styles/scss/global/variable.scss
Normal file
45
src/styles/scss/global/variable.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
/*!项目提供scss全局变量*/
|
||||
$border-radius: 8px;
|
||||
// 横部滚动条宽，纵向滚动条高
|
||||
$webkit-scrollbar-width: 8px;
|
||||
$webkit-scrollbar-height: 6px;
|
||||
// 滚动条颜色
|
||||
$webkit-scrollbar-color: #bfbfbf;
|
||||
// 滚动条的轨道颜色
|
||||
$webkit-scrollbar-track-color: #efefef;
|
||||
// 滚动条的悬停选中滑块颜色
|
||||
$webkit-scrollbar-hover: #999;
|
||||
// 线性动画
|
||||
@keyframes linearAnimation {
|
||||
0% {
|
||||
stroke-dasharray: 800;
|
||||
stroke-dashoffset: 800;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 800;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
// 懒加载默认动画
|
||||
@keyframes come-in {
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
/*!修改naive-ui的遮罩层样式*/
|
||||
@mixin mask-style($blur: 4px) {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur($blur);
|
||||
}
|
||||
.n-modal-mask {
|
||||
@include mask-style;
|
||||
}
|
||||
.n-drawer-mask {
|
||||
@include mask-style(2px);
|
||||
}
|
||||
/*!end*/
|
||||
6
src/views/page/home-window/FriendsList.vue
Normal file
6
src/views/page/home-window/FriendsList.vue
Normal file
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<div>好友列表</div>
|
||||
</template>
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped></style>
|
||||
6
src/views/page/home-window/Message.vue
Normal file
6
src/views/page/home-window/Message.vue
Normal file
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<div>消息页面</div>
|
||||
</template>
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped></style>
|
||||
6
src/views/page/home-window/More.vue
Normal file
6
src/views/page/home-window/More.vue
Normal file
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<div>更多</div>
|
||||
</template>
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped></style>
|
||||
6
src/views/page/home-window/Space.vue
Normal file
6
src/views/page/home-window/Space.vue
Normal file
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<div>空间</div>
|
||||
</template>
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -49,7 +49,7 @@
|
||||
<div class="flex-between-center">
|
||||
<div class="w-28px h-28px bg-#ccc rounded-50%"></div>
|
||||
<p class="font-size-14px color-#505050">{{ item.account }}</p>
|
||||
<img @click.stop="delAccount(index)" src="@/assets/svg/close.svg" class="w-10px h-10px" alt="" />
|
||||
<img @click.stop="delAccount(index)" src="../../../assets/svg/close.svg" class="w-10px h-10px" alt="" />
|
||||
</div>
|
||||
</n-flex>
|
||||
</n-scrollbar>
|
||||
@@ -109,7 +109,7 @@
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import router from '@/router'
|
||||
import { useWindow } from '@/hooks/useWindow'
|
||||
import { useWindow } from '@/hooks/useWindow.ts'
|
||||
import { delay } from 'lodash-es'
|
||||
|
||||
type Account = {
|
||||
@@ -22,6 +22,8 @@ export default defineConfig({
|
||||
'flex-between-center': 'flex justify-between items-center',
|
||||
'flex-around-center': 'flex justify-around items-center',
|
||||
'flex-col-center': 'flex-center flex-col',
|
||||
'flex-col-x-center': 'flex flex-col items-center',
|
||||
'flex-col-y-center': 'flex flex-col justify-center',
|
||||
'flex-x-center': 'flex justify-center',
|
||||
'flex-y-center': 'flex items-center',
|
||||
'absolute-lt': 'absolute left-0 top-0',
|
||||
|
||||
@@ -21,6 +21,13 @@ export default defineConfig(({ mode }: ConfigEnv) => {
|
||||
'~': getRootPath()
|
||||
}
|
||||
},
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
additionalData: '@import "./src/styles/scss/global/variable.scss";' // 加载全局样式，使用scss特性
|
||||
}
|
||||
}
|
||||
},
|
||||
define: {
|
||||
// enable hydration mismatch details in production build 3.4新增水化不匹配的警告
|
||||
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true'
|
||||
|
||||
Reference in New Issue
Block a user