70 lines
2.4 KiB
Vue
70 lines
2.4 KiB
Vue
<template>
|
|
<div>
|
|
<header class="h-[90px]">
|
|
<div class="mx-a h-full flex items-center justify-center">
|
|
<!-- 搜索区域 -->
|
|
<div class="relative w-[647px] px-4 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 h-[40px] 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 '~/stores/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>
|