公告列表
This commit is contained in:
WindowBird
parent
811fd2c859
commit
b873f72e41
|
|
@ -54,6 +54,12 @@ export const getCustomerStatistics = (params = {}) => {
|
|||
* @param {Object} params 请求参数
|
||||
* @param {number} params.pageNum 页码
|
||||
* @param {number} params.pageSize 每页数量
|
||||
* @param {string} params.title 标题（搜索）
|
||||
* @param {string} params.userName 创建人（搜索）
|
||||
* @param {string} params.level 重要程度（筛选）
|
||||
* @param {boolean} params.top 是否置顶（筛选）
|
||||
* @param {string} params.orderByColumn 排序字段
|
||||
* @param {string} params.isAsc 排序方式（ascending/descending）
|
||||
* @returns {Promise} 返回公告列表
|
||||
*/
|
||||
export const getNoticeList = (params = {}) => {
|
||||
|
|
@ -65,6 +71,24 @@ export const getNoticeList = (params = {}) => {
|
|||
if (params.pageSize !== undefined) {
|
||||
queryParams.push(`pageSize=${params.pageSize}`);
|
||||
}
|
||||
if (params.title) {
|
||||
queryParams.push(`title=${encodeURIComponent(params.title)}`);
|
||||
}
|
||||
if (params.userName) {
|
||||
queryParams.push(`userName=${encodeURIComponent(params.userName)}`);
|
||||
}
|
||||
if (params.level) {
|
||||
queryParams.push(`level=${encodeURIComponent(params.level)}`);
|
||||
}
|
||||
if (params.top !== undefined && params.top !== null && params.top !== '') {
|
||||
queryParams.push(`top=${params.top}`);
|
||||
}
|
||||
if (params.orderByColumn) {
|
||||
queryParams.push(`orderByColumn=${encodeURIComponent(params.orderByColumn)}`);
|
||||
}
|
||||
if (params.isAsc) {
|
||||
queryParams.push(`isAsc=${encodeURIComponent(params.isAsc)}`);
|
||||
}
|
||||
|
||||
const queryString = queryParams.length > 0 ? `?${queryParams.join('&')}` : '';
|
||||
|
||||
|
|
|
|||
|
|
@ -460,10 +460,8 @@ const viewAnnouncement = (announcement) => {
|
|||
|
||||
// 查看全部公告
|
||||
const viewAllAnnouncements = () => {
|
||||
// TODO: 跳转到公告列表页
|
||||
uni.showToast({
|
||||
title: '查看全部公告',
|
||||
icon: 'none'
|
||||
uni.navigateTo({
|
||||
url: '/pages/notice/list/index'
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -150,6 +150,12 @@
|
|||
"style": {
|
||||
"navigationBarTitleText": "项目管理"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/notice/list/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "公告列表"
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
|
|
|
|||
738
pages/notice/list/index.vue
Normal file
738
pages/notice/list/index.vue
Normal file
|
|
@ -0,0 +1,738 @@
|
|||
<template>
|
||||
<view class="notice-list-page">
|
||||
<!-- 搜索筛选区域 -->
|
||||
<view class="search-filter-section">
|
||||
<view class="search-row">
|
||||
<view class="search-item">
|
||||
<text class="search-label">标题</text>
|
||||
<uv-input
|
||||
v-model="searchForm.title"
|
||||
placeholder="请输入标题"
|
||||
border="none"
|
||||
:custom-style="{ backgroundColor: '#f5f5f5', borderRadius: '8px', padding: '8px 12px' }"
|
||||
/>
|
||||
</view>
|
||||
<view class="search-item">
|
||||
<text class="search-label">创建人</text>
|
||||
<uv-input
|
||||
v-model="searchForm.userName"
|
||||
placeholder="请输入创建人"
|
||||
border="none"
|
||||
:custom-style="{ backgroundColor: '#f5f5f5', borderRadius: '8px', padding: '8px 12px' }"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="filter-row">
|
||||
<view class="filter-item">
|
||||
<text class="filter-label">重要程度</text>
|
||||
<view class="picker-trigger" @click="showLevelPicker = true">
|
||||
<text :class="['picker-text', !searchForm.level && 'placeholder']">
|
||||
{{ getLevelText(searchForm.level) || '请选择重要程度' }}
|
||||
</text>
|
||||
<text class="picker-arrow">▼</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 重要程度选择弹窗 -->
|
||||
<view v-if="showLevelPicker" class="modal-mask" @click="showLevelPicker = false">
|
||||
<view class="modal-content" @click.stop>
|
||||
<view class="modal-title">选择重要程度</view>
|
||||
<view class="picker-options">
|
||||
<view
|
||||
v-for="item in levelOptions"
|
||||
:key="item.value"
|
||||
class="picker-option"
|
||||
:class="{ active: searchForm.level === item.value }"
|
||||
@click="selectLevel(item.value)"
|
||||
>
|
||||
<text>{{ item.label }}</text>
|
||||
<text v-if="searchForm.level === item.value" class="check">✓</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="modal-buttons">
|
||||
<button class="modal-btn" @click="showLevelPicker = false">取消</button>
|
||||
<button class="modal-btn primary" @click="showLevelPicker = false">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="filter-item">
|
||||
<text class="filter-label">是否置顶</text>
|
||||
<view class="radio-group">
|
||||
<view
|
||||
class="radio-item"
|
||||
:class="{ active: searchForm.top === '' }"
|
||||
@click="searchForm.top = ''"
|
||||
>
|
||||
<text class="radio-text">全部</text>
|
||||
</view>
|
||||
<view
|
||||
class="radio-item"
|
||||
:class="{ active: searchForm.top === true }"
|
||||
@click="searchForm.top = true"
|
||||
>
|
||||
<text class="radio-text">是</text>
|
||||
</view>
|
||||
<view
|
||||
class="radio-item"
|
||||
:class="{ active: searchForm.top === false }"
|
||||
@click="searchForm.top = false"
|
||||
>
|
||||
<text class="radio-text">否</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="action-buttons">
|
||||
<uv-button type="primary" size="small" @click="handleSearch">搜索</uv-button>
|
||||
<uv-button type="default" size="small" @click="handleReset">重置</uv-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 列表区域 -->
|
||||
<scroll-view
|
||||
class="notice-scroll"
|
||||
scroll-y
|
||||
@scrolltolower="handleScrollToLower"
|
||||
>
|
||||
<view class="notice-container">
|
||||
<!-- 公告卡片列表 -->
|
||||
<view
|
||||
class="notice-card"
|
||||
v-for="notice in notices"
|
||||
:key="notice.id"
|
||||
@click="goToNoticeDetail(notice)"
|
||||
>
|
||||
<!-- 标题和标签行 -->
|
||||
<view class="notice-header">
|
||||
<view class="notice-title-row">
|
||||
<text class="notice-title" :class="{ 'pinned': notice.top }">
|
||||
{{ notice.title }}
|
||||
</text>
|
||||
<view class="notice-tags">
|
||||
<view v-if="notice.top" class="notice-tag tag-pinned">置顶</view>
|
||||
<view v-if="notice.level === '2'" class="notice-tag tag-important">重要</view>
|
||||
<view v-if="notice.level === '3'" class="notice-tag tag-urgent">紧急</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 内容预览 -->
|
||||
<view class="notice-content">
|
||||
<text class="notice-content-text">{{ truncateText(notice.content, 50) }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 元信息 -->
|
||||
<view class="notice-meta">
|
||||
<view class="meta-item">
|
||||
<text class="meta-icon">👤</text>
|
||||
<text class="meta-text">{{ notice.userName || '未知' }}</text>
|
||||
</view>
|
||||
<view class="meta-item">
|
||||
<text class="meta-icon">🕐</text>
|
||||
<text class="meta-text">{{ formatTime(notice.createTime) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 接收信息 -->
|
||||
<view class="notice-receive" v-if="notice.receiveUserList?.length > 0 || notice.receiveDeptList?.length > 0">
|
||||
<view class="receive-item" v-if="notice.receiveUserList?.length > 0">
|
||||
<text class="receive-label">接收用户:</text>
|
||||
<view class="receive-users">
|
||||
<view
|
||||
class="user-avatar"
|
||||
v-for="(user, index) in notice.receiveUserList.slice(0, 3)"
|
||||
:key="user.userId"
|
||||
>
|
||||
<image
|
||||
v-if="user.avatar"
|
||||
:src="user.avatar"
|
||||
class="avatar-img"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<text v-else class="avatar-text">{{ user.nickName?.charAt(0) || '?' }}</text>
|
||||
</view>
|
||||
<text v-if="notice.receiveUserList.length > 3" class="more-text">
|
||||
等{{ notice.receiveUserList.length }}项
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="receive-item" v-if="notice.receiveDeptList?.length > 0">
|
||||
<text class="receive-label">接收部门:</text>
|
||||
<view class="receive-depts">
|
||||
<view
|
||||
class="dept-tag"
|
||||
v-for="dept in notice.receiveDeptList"
|
||||
:key="dept.deptId"
|
||||
>
|
||||
{{ dept.deptName }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view class="empty-state" v-if="loading">
|
||||
<text class="empty-text">加载中...</text>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" v-else-if="isEmpty">
|
||||
<text class="empty-text">暂无公告</text>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多提示 -->
|
||||
<view class="load-more-tip" v-if="!isEmpty && !loading && !noMore">
|
||||
<text class="load-more-text">上拉加载更多</text>
|
||||
</view>
|
||||
<view class="load-more-tip" v-if="!isEmpty && noMore">
|
||||
<text class="load-more-text">没有更多数据了</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { getNoticeList } from '@/api';
|
||||
import { usePagination } from '@/composables';
|
||||
import { truncateText } from '@/utils/textSolve/truncateText';
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = ref({
|
||||
title: '',
|
||||
userName: '',
|
||||
level: '',
|
||||
top: ''
|
||||
});
|
||||
|
||||
// 重要程度选项
|
||||
const levelOptions = [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '重要', value: '2' },
|
||||
{ label: '紧急', value: '3' }
|
||||
];
|
||||
|
||||
const showLevelPicker = ref(false);
|
||||
|
||||
// 获取重要程度文本
|
||||
const getLevelText = (level) => {
|
||||
const option = levelOptions.find(opt => opt.value === level);
|
||||
return option ? option.label : '';
|
||||
};
|
||||
|
||||
// 使用分页组合式函数
|
||||
const {
|
||||
list,
|
||||
loading,
|
||||
noMore,
|
||||
isEmpty,
|
||||
getList,
|
||||
loadMore,
|
||||
updateParams,
|
||||
reset
|
||||
} = usePagination({
|
||||
fetchData: async (params) => {
|
||||
// 构建请求参数
|
||||
const requestParams = {
|
||||
...params,
|
||||
orderByColumn: 'top',
|
||||
isAsc: 'descending'
|
||||
};
|
||||
|
||||
// 添加搜索和筛选参数
|
||||
if (searchForm.value.title) {
|
||||
requestParams.title = searchForm.value.title;
|
||||
}
|
||||
if (searchForm.value.userName) {
|
||||
requestParams.userName = searchForm.value.userName;
|
||||
}
|
||||
if (searchForm.value.level) {
|
||||
requestParams.level = searchForm.value.level;
|
||||
}
|
||||
if (searchForm.value.top !== '') {
|
||||
requestParams.top = searchForm.value.top;
|
||||
}
|
||||
|
||||
const res = await getNoticeList(requestParams);
|
||||
return res;
|
||||
},
|
||||
mode: 'loadMore',
|
||||
pageSize: 20,
|
||||
defaultParams: {}
|
||||
});
|
||||
|
||||
// 公告列表
|
||||
const notices = computed(() => list.value);
|
||||
|
||||
// 选择重要程度
|
||||
const selectLevel = (value) => {
|
||||
searchForm.value.level = value;
|
||||
};
|
||||
|
||||
// 搜索
|
||||
const handleSearch = () => {
|
||||
reset();
|
||||
getList();
|
||||
};
|
||||
|
||||
// 重置
|
||||
const handleReset = () => {
|
||||
searchForm.value = {
|
||||
title: '',
|
||||
userName: '',
|
||||
level: '',
|
||||
top: ''
|
||||
};
|
||||
reset();
|
||||
getList();
|
||||
};
|
||||
|
||||
// 处理滚动到底部
|
||||
const handleScrollToLower = () => {
|
||||
if (!noMore.value && !loading.value) {
|
||||
loadMore();
|
||||
}
|
||||
};
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (timeStr) => {
|
||||
if (!timeStr) return '';
|
||||
return timeStr;
|
||||
};
|
||||
|
||||
// 跳转到公告详情
|
||||
const goToNoticeDetail = (notice) => {
|
||||
// TODO: 跳转到详情页
|
||||
console.log('查看公告详情:', notice);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.notice-list-page {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.search-filter-section {
|
||||
background: #fff;
|
||||
padding: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.search-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.search-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.search-label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.picker-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
|
||||
&.placeholder {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.picker-arrow {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
border: 2px solid transparent;
|
||||
|
||||
&.active {
|
||||
background: #e3f2fd;
|
||||
border-color: #2885ff;
|
||||
}
|
||||
}
|
||||
|
||||
.radio-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.radio-item.active .radio-text {
|
||||
color: #2885ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.notice-scroll {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.notice-container {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.notice-card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.notice-card:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.notice-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.notice-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.notice-title {
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
|
||||
&.pinned {
|
||||
color: #f56c6c;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-tags {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.notice-tag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tag-pinned {
|
||||
background-color: #f56c6c;
|
||||
}
|
||||
|
||||
.tag-important {
|
||||
background-color: #ff9800;
|
||||
}
|
||||
|
||||
.tag-urgent {
|
||||
background-color: #f56c6c;
|
||||
}
|
||||
|
||||
.notice-content {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.notice-content-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.notice-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.meta-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.meta-text {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.notice-receive {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.receive-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.receive-label {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.receive-users {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: #e3f2fd;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.avatar-text {
|
||||
font-size: 12px;
|
||||
color: #2885ff;
|
||||
}
|
||||
|
||||
.more-text {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.receive-depts {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dept-tag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
background: #f0f0f0;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.load-more-tip {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.load-more-text {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
// 选择器弹窗样式
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 16px 16px 0 0;
|
||||
padding: 20px;
|
||||
max-height: 60vh;
|
||||
animation: slideUp 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.picker-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.picker-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:active {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #e3f2fd;
|
||||
}
|
||||
}
|
||||
|
||||
.picker-option text:first-child {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.picker-option.active text:first-child {
|
||||
color: #2885ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.check {
|
||||
font-size: 18px;
|
||||
color: #2885ff;
|
||||
}
|
||||
|
||||
.modal-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
flex: 1;
|
||||
padding: 12px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
background: #f5f5f5;
|
||||
color: #333;
|
||||
|
||||
&.primary {
|
||||
background: #2885ff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user