hula/HuLa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🌻 update(custom): 更新图标风格和主题颜色

Browse Source
This commit is contained in:
nongyehong
2024-01-30 01:06:18 +08:00
parent 60bc859ce2
commit db566cdacf
8 changed files with 124 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -7,7 +7,7 @@
<title>Tauri + Vue + TS</title>
<!--引入iconpark图标库-->
<script defer src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_30895_25.171b1e7d797ee2659aa4b7df365ad0de.js"></script>
<script defer src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_30895_34.42c00e1d87f7b6573b645cc11f1c7395.js"></script>
</head>
<body>

121
src/components/chatBox/ChatMain.vue
View File

@@ -2,35 +2,116 @@
<!-- 顶部操作栏和显示用户名 -->
<div class="flex-y-center justify-between pl-20px pr-20px pt-8px pb-12px select-none">
<div>宝贝🐶 ⛅</div>
<div class="options flex-y-center gap-20px">
<svg><use href="#phone-call"></use></svg>
<svg><use href="#video-one"></use></svg>
<svg><use href="#computer"></use></svg>
<svg><use href="#devices"></use></svg>
<svg><use href="#newlybuild"></use></svg>
<svg><use href="#more"></use></svg>
<div class="options flex-y-center">
<n-popover
trigger="hover"
:show-arrow="false"
placement="bottom"
class="ml-18px"
style="padding: 5px; border: 1px solid rgba(90, 90, 90, 0.3)">
<template #trigger>
<div>
<svg @click="handleClick" class="w-22px h-22px"><use href="#phone-telephone"></use></svg>
</div>
</template>
<span>语言通话</span>
</n-popover>
<n-popover
trigger="hover"
:show-arrow="false"
placement="bottom"
class="ml-18px"
style="padding: 5px; border: 1px solid rgba(90, 90, 90, 0.3)">
<template #trigger>
<div>
<svg class="w-22px h-22px"><use href="#video-one"></use></svg>
</div>
</template>
<span>视频通话</span>
</n-popover>
<n-popover
trigger="hover"
:show-arrow="false"
placement="bottom"
class="ml-18px"
style="padding: 5px; border: 1px solid rgba(90, 90, 90, 0.3)">
<template #trigger>
<div>
<svg class="w-22px h-22px"><use href="#screen-sharing"></use></svg>
</div>
</template>
<span>屏幕共享</span>
</n-popover>
<n-popover
trigger="hover"
:show-arrow="false"
placement="bottom"
class="ml-18px"
style="padding: 5px; border: 1px solid rgba(90, 90, 90, 0.3)">
<template #trigger>
<div>
<svg class="w-22px h-22px"><use href="#remote-control"></use></svg>
</div>
</template>
<span>远程协助</span>
</n-popover>
<n-popover
trigger="hover"
:show-arrow="false"
placement="bottom"
class="ml-18px"
style="padding: 5px; border: 1px solid rgba(90, 90, 90, 0.3)">
<template #trigger>
<div>
<svg class="w-22px h-22px"><use href="#launch"></use></svg>
</div>
</template>
<span>发起群聊</span>
</n-popover>
<svg class="w-28px h-28px" style="margin-left: 8px"><use href="#more"></use></svg>
</div>
</div>
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
<!-- 中间聊天内容 -->
<div class="h-400px">
<div class="user-box w-full h-75px mb-5px" v-for="n in 20" :key="n">
<div class="flex items-center h-full pl-6px pr-8px gap-10px">
<img class="w-44px h-44px rounded-50% bg-#fff" style="border: 1px solid #f1f1f1" src="/logo.png" alt="" />
<div class="w-full h-38px flex flex-col justify-between">
<div class="font-size-14px flex-y-center gap-4px">
<p>宝贝🍓</p>
<p>(快乐羊多多)</p>
</div>
<div
class="text w-155px h-14px font-size-12px flex-y-center gap-4px"
style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
<p class="font-size-12px">[⛅今日天气]</p>
<p>说的很经典哈萨克的哈萨克看到贺卡上</p>
</div>
</div>
</div>
</div>
</div>
<!-- 底部输入框 -->
<div class="wh-full bg-#f1f1f1">输入内容</div>
</template>
<script setup lang="ts"></script>
<script setup lang="ts">
const handleClick = () => {
console.log(111)
}
</script>
<style scoped lang="scss">
.options {
svg {
width: 22px;
height: 22px;
color: #303030;
color: #000;
margin-left: 20px;
cursor: pointer;
&:hover {
color: #189f57;
color: #059669;
}
}
}

4
src/components/common/NaiveProvider.vue
View File

@@ -50,8 +50,8 @@ const themeOverrides: GlobalThemeOverrides = {
},
Tabs: {
tabTextColorSegment: '#707070',
tabTextColorActiveSegment: '#189f57',
tabTextColorHoverSegment: '#189f57',
tabTextColorActiveSegment: '#059669',
tabTextColorHoverSegment: '#059669',
tabPaddingMediumSegment: '4px'
}
}

24
src/layout/left/index.vue
View File

@@ -23,7 +23,7 @@
<div class="flex-col-x-center gap-10px">
<div v-for="(item, index) in itemsBottom" :key="index" @click="openContent(item.label)" class="bottom-action">
<svg class="w-22px h-22px">
<use :href="`#${activeItem === item.url && item.iconAction ? item.iconAction : item.icon}`"></use>
<use :href="`#${item.icon}`"></use>
</svg>
</div>
@@ -65,12 +65,8 @@ const itemsTop = ref<TopActive>([
},
{
url: 'space',
icon: 'friends-circle',
iconAction: 'friends-circle-action'
},
{
url: 'more',
icon: 'application-menu'
icon: 'fire',
iconAction: 'fire-action'
}
])
const itemsBottom: BottomActive = [
@@ -78,19 +74,19 @@ const itemsBottom: BottomActive = [
url: '/mail',
label: 'mail',
icon: 'mail',
iconAction: 'mail-unpacking'
iconAction: 'mail-action'
},
{
url: '/folder',
label: 'mail',
icon: 'folder-close',
iconAction: 'folder-open'
icon: 'file',
iconAction: 'file-action'
},
{
url: '/collection',
label: 'mail',
icon: 'collection-files',
iconAction: 'collection-files-action'
icon: 'collect',
iconAction: 'collect-action'
}
]
@@ -146,7 +142,7 @@ onMounted(() => {
&:not(.active):hover {
background: rgba(193, 193, 193, 0.4);
border-radius: 8px;
color: #189f57;
color: #059669;
cursor: pointer;
animation: linearAnimation 3s linear forwards;
}
@@ -161,7 +157,7 @@ onMounted(() => {
.active {
background: rgba(193, 193, 193, 0.4);
border-radius: 8px;
color: #189f57;
color: #059669;
}
:deep(.n-badge .n-badge-sup) {

8
src/views/page/home-window/FriendsList.vue
View File

@@ -27,11 +27,7 @@
v-for="n in 20"
:key="n">
<div class="flex items-center h-full pl-6px pr-8px gap-10px">
<img
class="w-44px h-44px rounded-50% bg-#fff"
style="border: 1px solid #f1f1f1"
src="/logo.png"
alt="" />
<img class="w-44px h-44px rounded-50% bg-#fff border-[1px_solid_#f1f1f1]" src="/logo.png" alt="" />
<div class="w-full h-38px flex flex-col justify-between">
<div class="font-size-14px flex-y-center gap-4px">
@@ -116,7 +112,7 @@ onUnmounted(() => {
}
.active {
background: rgba(24, 159, 87, 0.6);
background: rgba(5, 150, 105, 0.8);
border-radius: 8px;
color: #fff;
.text {

2
src/views/page/home-window/Message.vue
View File

@@ -79,7 +79,7 @@ onMounted(() => {
}
.active {
background: rgba(24, 159, 87, 0.6);
background: rgba(5, 150, 105, 0.8);
border-radius: 8px;
color: #fff;
.text {

8
src/views/page/login-window/Login.vue
View File

@@ -67,9 +67,9 @@
<n-checkbox v-model:checked="protocol" />
<div class="font-size-12px color-#909090 cursor-default lh-14px">
<span>已阅读并同意</span>
<span class="color-#189f57 cursor-pointer">服务协议</span>
<span class="color-#059669 cursor-pointer">服务协议</span>
<span>和</span>
<span class="color-#189f57 cursor-pointer">HuLa隐私保护指引</span>
<span class="color-#059669 cursor-pointer">HuLa隐私保护指引</span>
</div>
</n-flex>
@@ -84,11 +84,11 @@
<!-- 顶部操作栏 -->
<n-flex justify="center" class="font-size-14px">
<div class="color-#189f57 cursor-pointer" @click="toQRCode">扫码登录</div>
<div class="color-#059669 cursor-pointer" @click="toQRCode">扫码登录</div>
<div class="w-1px h-14px bg-#ccc"></div>
<n-popover style="padding: 6px; border-radius: 8px" trigger="click" :show-checkmark="false" :show-arrow="false">
<template #trigger>
<div class="color-#189f57 cursor-pointer">更多选项</div>
<div class="color-#059669 cursor-pointer">更多选项</div>
</template>
<n-flex vertical :size="2">
<div class="font-size-14px cursor-pointer hover:bg-#f3f3f3 hover:rounded-6px p-8px font-size-12px">

6
src/views/page/login-window/QRCode.vue
View File

@@ -3,7 +3,7 @@
<!--顶部操作栏-->
<ActionBar :max-w="false" :shrink="false" />
<n-flex justify="center" class="font-size-28px color-#189f57 mt-25px">HuLA</n-flex>
<n-flex justify="center" class="font-size-28px color-#059669 mt-25px">HuLA</n-flex>
<!-- 二维码 -->
<n-flex justify="center" class="mt-35px">
@@ -21,9 +21,9 @@
<!-- 顶部操作栏 -->
<n-flex justify="center" class="font-size-14px mt-60px">
<div class="color-#189f57 cursor-pointer" @click="toLogin">账密登录</div>
<div class="color-#059669 cursor-pointer" @click="toLogin">账密登录</div>
<div class="w-1px h-14px bg-#ccc"></div>
<div class="color-#189f57 cursor-pointer">注册账号</div>
<div class="color-#059669 cursor-pointer">注册账号</div>
</n-flex>
</div>
</template>