fix search header style
This commit is contained in:
@@ -5,7 +5,6 @@
|
||||
v-model.trim="keyword"
|
||||
class="search"
|
||||
placeholder="搜索编码、姓名、电话"
|
||||
clearable
|
||||
borderless
|
||||
/>
|
||||
<t-button
|
||||
@@ -245,7 +244,7 @@ async function doExport(): Promise<void> {
|
||||
|
||||
<style scoped lang="less">
|
||||
.customer-list {
|
||||
padding: calc(var(--app-nav-height)) 0 5.5rem 0;
|
||||
padding: var(--app-nav-height) 0 5.5rem 0;
|
||||
|
||||
.filter {
|
||||
gap: .5rem;
|
||||
@@ -261,7 +260,7 @@ async function doExport(): Promise<void> {
|
||||
|
||||
.search {
|
||||
width: 100%;
|
||||
border: 1px solid rgba(148, 163, 184, .28);
|
||||
border: 1px solid var(--td-component-border);
|
||||
padding: .5rem 1rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
+35
-29
@@ -1,12 +1,14 @@
|
||||
<template>
|
||||
<div v-can="corePermissionCodes.tag.read" class="tag-list">
|
||||
<t-input
|
||||
v-model.trim="keyword"
|
||||
class="search"
|
||||
type="search"
|
||||
borderless
|
||||
placeholder="搜索标签"
|
||||
/>
|
||||
<div class="header bg-white">
|
||||
<t-input
|
||||
v-model.trim="keyword"
|
||||
class="search"
|
||||
type="search"
|
||||
borderless
|
||||
placeholder="搜索标签"
|
||||
/>
|
||||
</div>
|
||||
<t-pull-down-refresh
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@@ -34,12 +36,6 @@
|
||||
<div v-if="!tagList.length" class="empty" v-text="emptyText" />
|
||||
<div v-if="tagList.length" class="load-state" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
|
||||
</t-pull-down-refresh>
|
||||
<t-button v-can="corePermissionCodes.tag.create" class="create" theme="primary" @click="openCreateDialog">
|
||||
<template #icon>
|
||||
<t-icon name="add" />
|
||||
</template>
|
||||
新增标签
|
||||
</t-button>
|
||||
</div>
|
||||
<t-dialog
|
||||
v-model:visible="editDialogVisible"
|
||||
@@ -65,6 +61,7 @@
|
||||
import { DialogPlugin } from "tdesign-mobile-vue";
|
||||
import { type Page, useUserStore } from "timi-web";
|
||||
import TagAPI from "@/api/TagAPI";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { Tag } from "@/types/Tag";
|
||||
import { corePermissionCodes } from "@/utils/permission";
|
||||
import { Message } from "@/utils/message.ts";
|
||||
@@ -74,6 +71,7 @@ defineOptions({
|
||||
});
|
||||
|
||||
const userStore = useUserStore();
|
||||
const navBarStore = useNavBarStore();
|
||||
|
||||
const pageSize = 100;
|
||||
const keyword = ref("");
|
||||
@@ -250,7 +248,13 @@ async function removeTag(id: string): Promise<void> {
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(reload);
|
||||
onMounted(async () => {
|
||||
navBarStore.clearRight();
|
||||
if (userStore.hasPermissions(corePermissionCodes.tag.create)) {
|
||||
navBarStore.setRightText("新增", "var(--td-brand-color)", openCreateDialog);
|
||||
}
|
||||
await reload();
|
||||
});
|
||||
|
||||
watch(keyword, () => {
|
||||
window.clearTimeout(keywordTimer);
|
||||
@@ -260,18 +264,33 @@ watch(keyword, () => {
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
navBarStore.clearRight();
|
||||
window.clearTimeout(keywordTimer);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.tag-list {
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 6rem 0;
|
||||
padding: var(--app-nav-height) 0 2rem 0;
|
||||
|
||||
.header {
|
||||
top: var(--app-nav-height);
|
||||
z-index: 10;
|
||||
padding: .5rem;
|
||||
position: sticky;
|
||||
box-shadow: var(--td-shadow-1);
|
||||
|
||||
.search {
|
||||
border: 1px solid var(--td-component-border);
|
||||
padding: .5rem 1rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-panel {
|
||||
gap: .75rem;
|
||||
display: flex;
|
||||
padding: 0 1rem;
|
||||
padding: 1rem;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
|
||||
@@ -311,13 +330,6 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
margin: 0 1rem 1rem;
|
||||
padding: .5rem 1rem;
|
||||
border: 1px solid var(--td-component-border);
|
||||
border-radius: .875rem;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: #52607a;
|
||||
padding: 2rem 1rem;
|
||||
@@ -330,12 +342,6 @@ onUnmounted(() => {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.create {
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-dialog {
|
||||
|
||||
Reference in New Issue
Block a user