|
|
|
@ -5,11 +5,15 @@ |
|
|
|
import { |
|
|
|
showSidebar, |
|
|
|
} from '$lib/stores'; |
|
|
|
import { t } from 'i18next'; |
|
|
|
// 判断是否为移动设备 |
|
|
|
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); |
|
|
|
let list = [ |
|
|
|
{ |
|
|
|
title: '工作', |
|
|
|
bg: '/img/work.png', |
|
|
|
bg: `/img${isMobile?'/phone':''}/work.png`, |
|
|
|
id: '3', |
|
|
|
title_color:'#40b0bb', |
|
|
|
buttons: [ |
|
|
|
{ |
|
|
|
label: '工作总结', |
|
|
|
@ -34,8 +38,9 @@ |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '知识库', |
|
|
|
bg: '/img/knowledge.png', |
|
|
|
bg: `/img${isMobile?'/phone':''}/knowledge.png`, |
|
|
|
id: '2', |
|
|
|
title_color:'#4ea2eb', |
|
|
|
buttons: [ |
|
|
|
{ |
|
|
|
label: '检索知识库', |
|
|
|
@ -52,8 +57,9 @@ |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '使用记录', |
|
|
|
bg: '/img/record.png', |
|
|
|
bg:`/img${isMobile?'/phone':''}/record.png`, |
|
|
|
id: '1', |
|
|
|
title_color:'#696ed0', |
|
|
|
buttons: [ |
|
|
|
{ |
|
|
|
label: '历史消息', |
|
|
|
@ -70,7 +76,6 @@ |
|
|
|
} |
|
|
|
]; |
|
|
|
</script> |
|
|
|
|
|
|
|
<div class="flex flex-col border-box header_box"> |
|
|
|
<div class="top flex"> |
|
|
|
<img src={'favicon.png'} alt="" class="w-16 h-16 mr-5" /> |
|
|
|
@ -79,24 +84,24 @@ |
|
|
|
<p class="text-gray-800 text-left text-base">需要我帮您做点什么？</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="flex justify-around w-full mt-10"> |
|
|
|
<div class="flex main_box w-full {!isMobile?'mt-10':''}"> |
|
|
|
{#each list as item, itemIndex (item.id)} |
|
|
|
<div |
|
|
|
class="flex flex-col flex-1 mr-3 rounded-2xl p-6 box-border bg-cover" |
|
|
|
class="flex flex-col flex-1 rounded-2xl {!isMobile?'p-6 mr-3 ':'p-2 mr-1.5 flex-1'} box-border bg-cover " |
|
|
|
style="background-image: url('{item.bg}')" |
|
|
|
> |
|
|
|
<h2 class="text-gray-800 text-left text-2xl">{item.title}</h2> |
|
|
|
<h2 class="text-gray-800 text-left {isMobile?'text-base':'text-2xl'}" style="color:{item.title_color};">{item.title}</h2> |
|
|
|
{#if !isMobile} |
|
|
|
<div> |
|
|
|
{#each item.introduce as itemP, index (index)} |
|
|
|
<p class="text-gray-500 text-left text-sm mt-1.5">{itemP.label}</p> |
|
|
|
{/each} |
|
|
|
</div> |
|
|
|
<div class="flex mt-5.5"> |
|
|
|
{/if} |
|
|
|
<div class="flex {!isMobile?'mt-5.5':'mt-12'}"> |
|
|
|
{#each item.buttons as but, index (index)} |
|
|
|
<button |
|
|
|
class="font-medium text-black text-base mr-4 bg-white rounded-2xl px-6 py-1 box-border flex items-center border {but.label === '历史消息'||but.label === '工作总结'?'mt-4.5':''} {but.active |
|
|
|
? 'border-blue-500 text-blue-500' |
|
|
|
: ''}" |
|
|
|
class="font-medium text-black {!isMobile?' text-base px-6 py-1 mr-4':'text-xs px-1.5 py-0.5'} bg-white rounded-2xl box-border flex items-center border {(but.label === '历史消息'|| but.label === '工作总结') && !isMobile?'mt-4.5':''} " style="color:{but.active? item.title_color: ''},border-color:{but.active? item.title_color: ''}" |
|
|
|
on:click={() => { |
|
|
|
list.forEach((item) => { |
|
|
|
item.buttons.forEach((c) => { |
|
|
|
@ -107,7 +112,6 @@ |
|
|
|
c.active = !c.active |
|
|
|
}else { |
|
|
|
c.active = true; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
@ -121,7 +125,7 @@ |
|
|
|
dispatch('savePlaceholder',but.placeholder || null) |
|
|
|
}} |
|
|
|
> |
|
|
|
<img src={but.active ? but.imgActive : but.img} alt="" class="w-5 h-5 mr-1" /> |
|
|
|
<img src={but.active ? but.imgActive : but.img} alt="" class="{!isMobile?'w-5 h-5 mr-1':'w-3 h-3'}" /> |
|
|
|
{but.label} |
|
|
|
</button> |
|
|
|
{/each} |
|
|
|
@ -144,4 +148,38 @@ |
|
|
|
position: relative; |
|
|
|
bottom: 122px; |
|
|
|
} |
|
|
|
.main_box{ |
|
|
|
justify-content: space-around; |
|
|
|
} |
|
|
|
@media (max-width: 768px) { |
|
|
|
.main_box{ |
|
|
|
justify-content: space-around; |
|
|
|
} |
|
|
|
.header_box { |
|
|
|
height: auto; |
|
|
|
padding: 20px; |
|
|
|
width: 100%; |
|
|
|
bottom: 0; |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.top { |
|
|
|
display: none; |
|
|
|
h1{ |
|
|
|
font-size: 25px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.top img { |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.flex.justify-around { |
|
|
|
flex-direction: column; |
|
|
|
} |
|
|
|
|
|
|
|
.flex.justify-around > div { |
|
|
|
margin-bottom: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
