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