🎨 fit result style

This commit is contained in:
layyback 2023-03-26 19:34:18 +08:00
parent 77d3d00f7a
commit 958e20fef9

View File

@ -40,21 +40,21 @@ onMounted(() => {
const props = defineProps({ const props = defineProps({
searchValue: { searchValue: {
type: [String, Number], type: [String, Number],
default: "", default: ""
}, },
options: { options: {
type: Array, type: Array,
default: (() => [])(), default: (() => [])()
}, },
currentSelect: { currentSelect: {
type: Number, type: Number,
default: 0, default: 0
}, },
currentPlugin: {}, currentPlugin: {},
clipboardFile: (() => [])(), clipboardFile: (() => [])()
}); });
const renderTitle = (title) => { const renderTitle = title => {
if (typeof title !== "string") return; if (typeof title !== "string") return;
if (!props.searchValue) return title; if (!props.searchValue) return title;
const result = title.toLowerCase().split(props.searchValue.toLowerCase()); const result = title.toLowerCase().split(props.searchValue.toLowerCase());
@ -65,7 +65,7 @@ const renderTitle = (title) => {
} }
}; };
const renderDesc = (desc) => { const renderDesc = desc => {
if (desc.length > 80) { if (desc.length > 80) {
return `${desc.substr(0, 63)}...${desc.substr( return `${desc.substr(0, 63)}...${desc.substr(
desc.length - 14, desc.length - 14,
@ -75,7 +75,7 @@ const renderDesc = (desc) => {
return desc; return desc;
}; };
const sort = (options) => { const sort = options => {
for (let i = 0; i < options.length; i++) { for (let i = 0; i < options.length; i++) {
for (let j = i + 1; j < options.length; j++) { for (let j = i + 1; j < options.length; j++) {
if (options[j].zIndex > options[i].zIndex) { if (options[j].zIndex > options[i].zIndex) {
@ -98,15 +98,24 @@ const sort = (options) => {
z-index: 99; z-index: 99;
max-height: calc(~"100vh - 64px"); max-height: calc(~"100vh - 64px");
overflow: auto; overflow: auto;
background: var(--color-body-bg);
.op-item { .op-item {
padding: 0 10px; padding: 0 10px;
height: 60px; height: 60px;
line-height: 50px; line-height: 50px;
max-height: 500px; max-height: 500px;
overflow: auto; overflow: auto;
background: #fafafa; background: var(--color-body-bg);
color: var(--color-text-content);
border-color: var(--color-border-light);
&.active { &.active {
background: #dee2e8; background: var(--color-list-hover);
}
.ant-list-item-meta-title {
color: var(--color-text-content);
}
.ant-list-item-meta-description {
color: var(--color-text-desc);
} }
} }
} }