70 lines
2.3 KiB
Vue
70 lines
2.3 KiB
Vue
<template>
|
|
<div>
|
|
<header class="h-90px">
|
|
<div class="mx-a h-full flex items-center justify-center">
|
|
<!-- 搜索区域 -->
|
|
<div class="relative w-647px px4 p-r-0px!">
|
|
<div class="search-input relative w-100%">
|
|
<el-input
|
|
v-model="searchQuery"
|
|
type="text"
|
|
placeholder="搜一搜"
|
|
:prefix-icon="Search"
|
|
class="no-right-border box-border h40 w-100% rounded-bl-4px rounded-br-0px rounded-tl-4px rounded-tr-0px bg-[#F8F8F8] text-14px outline-#999"
|
|
@keyup.enter="search"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<!-- 按钮区域 -->
|
|
<div class="flex items-center">
|
|
<button
|
|
class="h-40px w-111px cursor-pointer border-width-1px border-color-#1A65FF rounded-bl-0px rounded-br-4px rounded-tl-0px rounded-tr-4px border-none border-solid text-center text-14px color-#fff bg-#1A65FF!"
|
|
@click="search"
|
|
>
|
|
搜索
|
|
</button>
|
|
<button
|
|
class="m-l-16px h-40px w-111px cursor-pointer border-width-1px border-color-#E7B03B rounded-bl-6px rounded-br-6px rounded-tl-4px rounded-tr-6px border-none border-solid text-14px color-#fff bg-#E7B03B!"
|
|
@click="handleUpload"
|
|
>
|
|
上传工具
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { Search } from '@element-plus/icons-vue'
|
|
import useUserStore from '~/store/user'
|
|
const userStore = useUserStore()
|
|
|
|
const emits = defineEmits(['search'])
|
|
|
|
const searchQuery = ref('')
|
|
|
|
const handleUpload = () => {
|
|
// 是否登录
|
|
if (!userStore.token) return ElMessage.error('请先登录')
|
|
// 新开窗口 用router跳转 新窗口打开
|
|
navigateTo('/toolbox-publish')
|
|
}
|
|
|
|
const search = () => {
|
|
emits('search', searchQuery.value)
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.no-right-border :deep(.el-input__wrapper) {
|
|
border-right: none !important;
|
|
/* box-shadow: -1px 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset !important; */
|
|
}
|
|
|
|
/* 如果需要调整右侧圆角，可以添加 */
|
|
.no-right-border :deep(.el-input__wrapper) {
|
|
border-top-right-radius: 0 !important;
|
|
border-bottom-right-radius: 0 !important;
|
|
}
|
|
</style>
|