时间组件和搜索栏组件增加样式类型

This commit is contained in:
Sun 2024-01-24 20:55:05 +08:00
parent 6bab5a264f
commit 70c87c94c6
2 changed files with 8 additions and 8 deletions

View File

@ -67,15 +67,15 @@ onBeforeUnmount(() => {
</script>
<template>
<div class="w-full text-center">
<span class="text-2xl sm:text-2xl md:text-3xl font-[600]">
<div class="clock w-full text-center">
<span class="clock-time text-2xl sm:text-2xl md:text-3xl font-[600]">
{{ currentDate.time }}
</span>
<div class="hidden sm:hidden md:block">
<span class="mr-1">
<span class="clock-date mr-1">
{{ currentDate.date }}
</span>
<span>
<span class="clock-week">
{{ currentDate.week }}
</span>
</div>

View File

@ -120,18 +120,18 @@ onMounted(() => {
</script>
<template>
<div class="w-full" @keydown.enter="handleSearchClick">
<div class="search-box w-full" @keydown.enter="handleSearchClick" @keydown.esc="handleClearSearchTerm">
<div class="search-container flex rounded-2xl items-center justify-center text-white w-full" :style="{ background, color: textColor }" :class="{ focused: isFocused }">
<div class="w-[40px] flex justify-center cursor-pointer" @click="handleEngineClick">
<div class="search-box-btn-engine w-[40px] flex justify-center cursor-pointer" @click="handleEngineClick">
<NAvatar :src="state.currentSearchEngine.iconSrc" style="background-color: transparent;" :size="20" />
</div>
<input v-model="searchTerm" :placeholder="$t('deskModule.searchBox.inputPlaceholder')" @focus="onFocus" @blur="onBlur" @input="handleItemSearch">
<div v-if="searchTerm !== ''" class="w-[25px] mr-[10px] flex justify-center cursor-pointer" @click="handleClearSearchTerm">
<div v-if="searchTerm !== ''" class="search-box-btn-clear w-[25px] mr-[10px] flex justify-center cursor-pointer" @click="handleClearSearchTerm">
<SvgIcon style="width: 20px;height: 20px;" icon="line-md:close-small" />
</div>
<div class="w-[25px] flex justify-center cursor-pointer" @click="handleSearchClick">
<div class="search-box-btn-search w-[25px] flex justify-center cursor-pointer" @click="handleSearchClick">
<SvgIcon style="width: 20px;height: 20px;" icon="iconamoon:search-fill" />
</div>
</div>