fix style
This commit is contained in:
@@ -1,11 +1,14 @@
|
||||
<template>
|
||||
<t-popup v-model="popupVisible" placement="bottom">
|
||||
<div class="tag-selector bg-white">
|
||||
<div class="title-bar">
|
||||
<t-button variant="text" size="small" @click="cancelSelection">取消</t-button>
|
||||
<h3 class="title">选择标签</h3>
|
||||
<t-button theme="primary" variant="text" size="small" @click="confirmSelection">确定</t-button>
|
||||
</div>
|
||||
<bottom-popup
|
||||
v-model="popupVisible"
|
||||
title="选择标签"
|
||||
height="78vh"
|
||||
left-button-text="取消"
|
||||
right-button-text="确定"
|
||||
@left-button-click="cancelSelection"
|
||||
@right-button-click="confirmSelection"
|
||||
>
|
||||
<div class="tag-selector">
|
||||
<div class="search-row">
|
||||
<t-input
|
||||
class="input"
|
||||
@@ -46,13 +49,14 @@
|
||||
>
|
||||
<span v-text="getTagName(item)" />
|
||||
</t-tag>
|
||||
<div v-if="!visibleTagList.length" class="empty" v-text="emptyText" />
|
||||
<div v-if="!visibleTagList.length" class="center-tips" v-text="emptyText" />
|
||||
</div>
|
||||
</div>
|
||||
</t-popup>
|
||||
</bottom-popup>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { BottomPopup } from "timi-tdesign-mobile";
|
||||
import { Message } from "@/utils/message";
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import TagAPI from "@/api/TagAPI";
|
||||
@@ -199,24 +203,10 @@ watch(() => props.visible, async (value) => {
|
||||
<style scoped lang="less">
|
||||
.tag-selector {
|
||||
display: flex;
|
||||
height: 78vh;
|
||||
padding-top: 1rem;
|
||||
border-radius: 1.25rem 1.25rem 0 0;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
|
||||
.title-bar {
|
||||
padding: 0 1rem;
|
||||
display: grid;
|
||||
grid-template-columns: 4rem 1fr 4rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.search-row {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
@@ -224,7 +214,7 @@ watch(() => props.visible, async (value) => {
|
||||
align-items: center;
|
||||
|
||||
.input {
|
||||
--td-input-vertical-padding: 6px;
|
||||
--td-input-vertical-padding: .5rem 1rem;
|
||||
|
||||
border: 1px solid var(--td-component-border);
|
||||
border-radius: .875rem;
|
||||
@@ -239,7 +229,7 @@ watch(() => props.visible, async (value) => {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
padding: 0 1rem calc(1rem + env(safe-area-inset-bottom, 0)) 1rem;
|
||||
padding: 0 1rem 1rem;
|
||||
|
||||
.item {
|
||||
flex: 1 1 auto;
|
||||
@@ -248,22 +238,10 @@ watch(() => props.visible, async (value) => {
|
||||
max-width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: #52607a;
|
||||
padding: 2rem 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.tag-selector {
|
||||
background: rgba(15, 23, 42, .96);
|
||||
|
||||
.empty {
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
:global(.bottom-popup:has(.tag-selector) .body) {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -21,18 +21,18 @@
|
||||
</template>
|
||||
</t-input>
|
||||
<t-dropdown-menu ref="dropdownMenuRef" class="menus">
|
||||
<t-dropdown-item
|
||||
v-model="statusFilter"
|
||||
:label="statusFilterLabel"
|
||||
:options="statusOptions"
|
||||
@change="handleStatusChange"
|
||||
/>
|
||||
<t-dropdown-item
|
||||
v-model="dateFilterType"
|
||||
:label="dateFilterLabel"
|
||||
:options="dateOptions"
|
||||
@change="handleDateFilterChange"
|
||||
/>
|
||||
<t-dropdown-item
|
||||
v-model="statusFilter"
|
||||
:label="statusFilterLabel"
|
||||
:options="statusOptions"
|
||||
@change="handleStatusChange"
|
||||
/>
|
||||
<t-dropdown-item
|
||||
:label="selectedResponsibleName"
|
||||
:options="[]"
|
||||
|
||||
@@ -305,7 +305,7 @@ onMounted(async () => {
|
||||
|
||||
.search {
|
||||
--td-button-border-radius: .75rem;
|
||||
--td-input-vertical-padding: .25rem 1rem;
|
||||
--td-input-vertical-padding: .5rem 1rem;
|
||||
|
||||
flex: 1;
|
||||
border: 1px solid var(--td-component-border);
|
||||
|
||||
@@ -97,7 +97,7 @@ const menuGroupList = computed<MenuGroup[]>(() => [
|
||||
{
|
||||
icon: "undertake-delivery",
|
||||
path: "/management/order-fulfillments",
|
||||
title: "统一履约",
|
||||
title: "履约记录",
|
||||
visible: userStore.hasPermissions(permissionCodes.orderFulfillment.read)
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user