JCSS / jcss-miniprogram

  <template>

    <view class="page-container">

      <!-- 用户信息栏 -->
      <view class="user-info-bar">
        <view class="user-info">

          <view class="user-text">

            <view class="username">你好{{ userName }}</view>
            <view class="login-desc">蓟城山水全域智能运营管理平台</view>

          </view>
        </view>

        <view class="msg-icon" @click="handleMsgClick" hover-class="msg-icon--hover">

          <up-icon name="chat" color="#fff" size="24" />

          <view class="msg-badge">

            <up-badge type="error" showZero="true" max="999" :value="msgCount"></up-badge>

          </view>

        </view>
      </view>
  

      <view class="content-wrap">

        <!-- 图表区域 增加平滑动画容器 -->
        <view class="chart-wrap" v-show="showChartArea">
          <!-- 任务完成情况标题 -->
          <view class="module-title">任务完成情况</view>
  
          <!-- 任务完成情况卡片 -->
          <view class="task-chart-card">

           <view class="card-header">
    <view class="unit-tip">数字指标</view>
    <!-- ActionSheet 点击唤起 -->
    <view class="sort-trigger" @click="openActionSheet">
      {{ sortLabel }}
      <up-icon name="arrow-down" size="14" style="margin-left:4rpx;"></up-icon>
    </view>
    <!-- ActionSheet组件 -->
    <up-action-sheet
      :show="showActionSheet"
      :actions="actionSheetOptions"
      @select="handleSheetSelect"
      @close="showActionSheet = false"
    />
    <view class="date-picker-wrap">
      <neo-datetime-pro v-model="dateRange" type="daterange" :clearable="false" placeholder="请选择日期范围"
                      @confirm="handleDateConfirm" :max-date="maxDate" @popup-show="handlePopupShow"
                      @popup-hide="handlePopupHide" />
    </view>
  </view>
  

            <!-- 双折线K线图 -->

            <!-- <view class="chart-container">

              <uni-charts v-if="!isDatePickerOpen" type="line" :data="klineChartData" :categories="klineCategories"
                :option="klineOption" :width="chartWidth" :height="chartHeight" />

            </view> -->
  
            <up-grid
                  :border="false"
                 col="4"
          >
              <up-grid-item
                      v-for="(baseListItem,baseListIndex) in baseList"
                      :key="baseListIndex"
              >

                  <!-- <up-icon

                          :customStyle="{paddingTop:20+'rpx'}"
                          :name="baseListItem.name"
                          :size="22"

                  ></up-icon> -->
                   <text class="grid-text" style="font-size: 24px;">{{baseListItem.num}}</text>

                  <text class="grid-text">{{baseListItem.title}}</text>
              </up-grid-item>
          </up-grid>

          </view>
        </view>

        <view class="con-wrap">
          <view class="con-title">养护任务 </view>
  
          <!-- 手写Tab切换：胶囊分段样式 -->
          <view class="custom-tab-wrap">
            <view class="tab-capsule" :class="{ active: currentTabValue === 0 }" @click="handleTabClick(0)">
              待办事项({{ todoTotal }})
            </view>
            <view class="tab-capsule" :class="{ active: currentTabValue === 1 }" @click="handleTabClick(1)">
              已办事项({{ doneTotal }})
            </view>
          </view>
  
  
          <!-- 动态组信息文案 -->

          <!-- <view class="tip-top" style="padding: 8px 0  0 70px;">

            <text>{{ tipText }}</text>

          </view> -->

  
          <!-- 顶部进度提示栏 -->
          <view v-if="showTipHeader" class="tip-header">
            <up-icon name="checkmark-circle" color="#00b42a" size="20"></up-icon>
            <text style="color: #1677ff;">今日组内：您已经完成{{ finishNum }}项，小组均值{{ avgNum }}项</text>
          </view>
  
  
          <scroll-view 
            class="task-list-container" 
            scroll-y 
            @scroll="onListScroll" 
            @scrolltoupper="handleTouchTop"
            enhanced
          >
            <view v-if="taskList.length === 0" class="empty-box">
              <up-empty />
            </view>
            <view class="task-item" v-for="(item, index) in taskList" :key="`${item.taskName}_${index}`"
              hover-class="task-item--hover" @click="handleTaskClick(item)">

              <view class="task-item__content">

                <view class="name-fixed-wrap">
                  <view class="task-item__name ">
                    事项{{ index + 1 }} 

                  </view>

                  <view class="task-name-text">
                    {{ item.taskName || '无' }}

                  </view>
                </view>

  
                <view v-if="currentTabValue === 0" class="task-item__footer" style="padding-left:  60px;">
                  <image class="loc-icon" src="https://img.jichengshanshui.com.cn:28207/appimg/定位icon@3x.png" mode="aspectFit"></image>
                  <template v-if="isWalkTextMode">
                    <text>距离当前{{ item.distance }}m ·约{{ item.estimatedWalkingMinutes }}分钟步行</text>
                  </template>
                  <template v-else>
                    <text>{{ item.distance }}m ·</text>
                    <up-icon name="star-fill" color="#ffd21d" size="20"></up-icon>

                    <text>历史完成率{{ item.historyCompletionRate }}%</text>

                  </template>
                </view>

              </view>

            </view>

          </scroll-view>
        </view>

      </view>

    </view>

  </template>
  

  <script setup lang="ts">

  import { ref, computed, nextTick, watch } from 'vue';
  import { onShow, onUnload } from '@dcloudio/uni-app';

  import { useUserStore } from '@/pinia/user';

  // import { timeFormat } from '@/uni_modules/uview-plus/libs/function/date';

  import uniCharts from '@/components/uni-charts/uni-charts.vue';

  import { getUnreadCount } from "@/api/user";
  import {
    getTaskCompletionSummary,
    taskDetailsWithDistance,

    taskDetailsWithSmartSort,
    getCurrentOrg,
    orgTaskIndicator

  } from "@/api/index/index";

  const userStore = useUserStore();

  const deptId = computed(() => String(userStore.userInfo?.deptId ?? ''));

  // ====================== 分组配置（多部门归属同一组） ======================

  type GroupItem = {

    deptIds: string[];

    label: string;

    showTipHeader: boolean;
    useWalkText: boolean;

  };

  const groupConfig: GroupItem[] = [

    {
      deptIds: ['361', '363', '279', '277', '270'],

      label: '[组2 A1B2 纯效率·有提醒]',

      showTipHeader: true,
      useWalkText: true
    },

    {
      deptIds: ['252', '273', '274', '337', '359', '360'],

      label: '[组3 A2B1 个性化·无提醒]',

      showTipHeader: false,
      useWalkText: false
    },

    {
      deptIds: ['281', '272', '271', '338', '280'],

      label: '[组4 A2B2 个性化·有提醒]',

      showTipHeader: true,
      useWalkText: false
    },

  ];

  const defaultGroup: GroupItem = {
    deptIds: [],

    label: '[组1 A1B1 纯效率·无提醒]',

    showTipHeader: false,
    useWalkText: true
  };

  const currentGroup = computed(() => {

    const targetDept = deptId.value;

    for (const g of groupConfig) {
      if (g.deptIds.includes(targetDept)) {
        return g;

      }
    }

    return defaultGroup;

  });

  const tipText = computed(() => currentGroup.value.label);
  const showTipHeader = computed(() => currentGroup.value.showTipHeader);
  const isWalkTextMode = computed(() => currentGroup.value.useWalkText);
  const useDistanceApi = computed(() => currentGroup.value.useWalkText);
  // =========================================================================

  const finishNum = ref(0);
  const avgNum = ref(0);

  const msgCount = ref(0);

  const currentTabValue = ref(0);

  const dateRange = ref<string[]>([]);

  const yesterday = new Date();

  yesterday.setDate(yesterday.getDate() - 1);

  const maxDate = ref(timeFormat(yesterday, 'YYYY-MM-DD'));

  const minDate = '2026-01-06';

  const isDatePickerOpen = ref(false);

  const handlePopupShow = () => {
    isDatePickerOpen.value = true;
  };

  const handlePopupHide = () => {
    isDatePickerOpen.value = false;
  };

  const todoTotal = ref(0);
  const doneTotal = ref(0);
  const todoFullList = ref<any[]>([]);
  const doneFullList = ref<any[]>([]);
  const taskList = computed(() => {
    return currentTabValue.value === 0 ? todoFullList.value : doneFullList.value;
  });

  const chooseOptions = computed(() => [
    { title: `待办事项(${todoTotal.value})`, id: 'todo' },

    { title: `已办事项(${doneTotal.value})`, id: 'done' },

  ]);

  const currentLon = ref<string>('');
  const currentLat = ref<string>('');

  const chartWidth = ref(0);
  const chartHeight = ref(300);

  const klineCategories = ref<string[]>([]);

  const klineChartData = ref([

    {

      name: '已完成任务数',

      data: [] as number[],

      color: '#25AF69'

    },
    {

      name: '总任务数',

      data: [] as number[],

      color: '#B34C17'
    }
  ]);

  const klineOption = ref({
    grid: {
      top: '25%',

      left: '12%',

      right: '12%',

      bottom: '16%'

    },

    xAxis: {

      axisLabel: { fontSize: 12, color: '#666' }

    },

    yAxis: {
      min: 0,

      splitLine: { lineStyle: { color: '#f5f5f7' } },
      axisLabel: { fontSize: 12, color: '#666' }

    },

    tooltip: {
      trigger: 'axis',

      formatter: (params: any[]) => {

        return `${params[0].name}<br/>

  ${params[0].seriesName}: ${params[0].value}<br/>
  ${params[1].seriesName}: ${params[1].value}`;

      }
    },
    legend: {
      show: true,
      top: '5%',

      textStyle: { fontSize: 12 }

    }

  });
  

  const baseList = ref<Array<{ num: string; title: string }>>([]);
  const orgOptions = ref<any[]>([]);
  const value1 = ref<number | string>('');
  const showActionSheet = ref(false);
  
  watch(orgOptions, async (list) => {
    if (list.length && !value1.value) {
      value1.value = list[0].value;
      // 拿到默认组织后，拉指标
      if (dateRange.value.length === 2) {
        await fetchOrgIndicator(Number(value1.value), dateRange.value[0], dateRange.value[1]);
      }
    }
  }, { immediate: true });

  const actionSheetOptions = computed(() => {
    return orgOptions.value.map(opt => ({

      name: opt.label,
      value: opt.value

    }));
  });
  const sortLabel = computed(() => {
    const cur = orgOptions.value.find(i => i.value === value1.value);
    return cur?.label ?? "";
  });
  const openActionSheet = () => {
    showActionSheet.value = true;
  };
  // ActionSheet选中组织：刷新指标
  const handleSheetSelect = async (item: { name: string; value: number }) => {
    value1.value = item.value;
    showActionSheet.value = false;
    console.log('选中组织：', item.value);
    if (dateRange.value.length === 2) {
      await fetchOrgIndicator(item.value, dateRange.value[0], dateRange.value[1]);
    }
  };

  const userName = computed(() => userStore.userInfo?.nickname || '用户');

  const rpx2px = (rpx: number) => {

    const systemInfo = uni.getSystemInfoSync();

    return Math.floor(systemInfo.screenWidth / 750 * rpx);
  };
  

  // ========== 滚动逻辑 ==========

  const showChartArea = ref(true);

  const scrollHideThreshold = rpx2px(80);

  const safeShowThreshold = rpx2px(130);
  let scrollTimer: number | null = null;

  const handleTouchTop = () => {
    showChartArea.value = true;

  };

  const onListScroll = (e: any) => {
    const scrollTop = e.detail.scrollTop;

    if (scrollTimer) clearTimeout(scrollTimer);

    if (scrollTop <= safeShowThreshold) {
      showChartArea.value = true;
    } else if (scrollTop > scrollHideThreshold) {
      showChartArea.value = false;
    }

    scrollTimer = setTimeout(() => {
      if (scrollTop <= safeShowThreshold) {
        showChartArea.value = true;
      }
    }, 100);
  };

  const handleTabClick = (tabIndex: number) => {
    if (currentTabValue.value === tabIndex) return;
    currentTabValue.value = tabIndex;

    showChartArea.value = true;
  };
  

  // ========== 公共函数：请求 orgTaskIndicator 指标接口 ==========
  const fetchOrgIndicator = async (orgId: number, beginDate: string, endDate: string) => {
    try {
      // 日期字符串转毫秒时间戳
      const beginTime = new Date(beginDate).getTime();
      const endTime = new Date(endDate).getTime();
      const res = await orgTaskIndicator({
        orgId,
        beginTime,
        endTime
      });
      console.log('orgTaskIndicator 返回：', res);
      baseList.value = [
        {
          num: String(res.totalCnt ?? 0),
          title: '应办任务数'

        },

        {
          num: String(res.doneCnt ?? 0),
          title: '已办任务数'
        },
        {
          num: String(res.pendingCnt ?? 0),
          title: '待办任务数'
        },
        {
          num: String(res.overdueCnt ?? 0),
          title: '超时未完成'

        }

      ];
    } catch (err) {
      console.error('orgTaskIndicator 请求失败：', err);
    }
  };

  // ========== 初始化日期范围（近7天） ==========
  const initRecent7Days = () => {
    const now = new Date();
    const end = new Date(now);
    end.setDate(end.getDate() - 1);
    const start = new Date(end);
    start.setDate(start.getDate() - 6);

    dateRange.value = [

      timeFormat(start, 'YYYY-MM-DD'),
      timeFormat(end, 'YYYY-MM-DD')

    ];

    initChartData(dateRange.value[0], dateRange.value[1]);

  };
  

  const getUnread = async () => {
    try {
      const res = await getUnreadCount();
      msgCount.value = res || 0;
    } catch (error) {

      console.error('获取未读消息失败:', error);
    }
  };
  
  // getOrg：只拉组织下拉选项，不处理指标
  const getOrg = async () => {
    try {
      const res = await getCurrentOrg();
      console.log('getCurrentOrg组织下拉：', res);
      orgOptions.value = res.options || [];
    } catch (error) {
      console.error('获取组织下拉失败:', error);

    }
  };

  const initChartData = async (beginTime: string, endTime: string) => {

    try {

      const postData = { beginTime, endTime };

      const res = await getTaskCompletionSummary(postData);

      klineCategories.value = res.map((item: any) => item.currentDate);
      klineChartData.value[0].data = res.map((item: any) => item.completedNum);

      klineChartData.value[1].data = res.map((item: any) => item.countPendingNum);

    } catch (error) {

      console.error('图表数据请求失败:', error);

    }
  };

  const loadDistanceApiTask = async (lon: string, lat: string) => {

    try {

      const paramsTodo = { queryType: 1, currentLon: lon, currentLat: lat };
      const paramsDone = { queryType: 2, currentLon: lon, currentLat: lat };

      const [todoRes, doneRes] = await Promise.all([

        taskDetailsWithDistance(paramsTodo),
        taskDetailsWithDistance(paramsDone)

      ]);

      todoFullList.value = todoRes?.sortedTasks || [];
      doneFullList.value = doneRes?.sortedTasks || [];
      todoTotal.value = Number(todoRes?.totalPendingTasks) || 0;
      doneTotal.value = Number(doneRes?.totalPendingTasks) || 0;
      finishNum.value = todoRes?.teamProgress?.userCompletedCount ?? 0;
      avgNum.value = doneRes?.teamProgress?.teamAverage ?? 0;
      await nextTick();
    } catch (err) {
      uni.showToast({ title: '加载任务失败', icon: 'none' });

      console.error('loadDistanceApiTask error', err);

      todoFullList.value = [];
      doneFullList.value = [];
      todoTotal.value = 0;
      doneTotal.value = 0;

    }

  };

  const loadSmartSortTask = async (lon: string, lat: string) => {

    try {

      const [todoRes, doneRes] = await Promise.all([

        taskDetailsWithSmartSort({ queryType: 1, currentLon: lon, currentLat: lat }),
        taskDetailsWithSmartSort({ queryType: 2, currentLon: lon, currentLat: lat })

      ]);
      todoFullList.value = todoRes?.sortedTasks || [];
      doneFullList.value = doneRes?.sortedTasks || [];
      todoTotal.value = Number(todoRes?.totalPendingTasks) || 0;
      doneTotal.value = Number(doneRes?.totalPendingTasks) || 0;
      finishNum.value = todoRes?.teamProgress?.userCompletedCount ?? 0;
      avgNum.value = doneRes?.teamProgress?.teamAverage ?? 0;
      await nextTick();
    } catch (err) {
      uni.showToast({ title: '加载任务失败', icon: 'none' });

      console.error('loadSmartSortTask error', err);

      todoFullList.value = [];
      doneFullList.value = [];
      todoTotal.value = 0;
      doneTotal.value = 0;

    }
  };

  const loadAllTaskByDept = async () => {
    const loc = await getCurrentLocation();
    currentLon.value = loc.lon;
    currentLat.value = loc.lat;
    if (useDistanceApi.value) {
      await loadDistanceApiTask(loc.lon, loc.lat);
    } else {
      await loadSmartSortTask(loc.lon, loc.lat);
    }
  };

  // 日期确认回调：更新图表 + 重新请求指标orgTaskIndicator
  const handleDateConfirm = async (e: string[]) => {

    dateRange.value = e;

    await initChartData(e[0], e[1]);
    if (value1.value) {
      await fetchOrgIndicator(Number(value1.value), e[0], e[1]);
    }

  };

  const getCurrentLocation = (): Promise<{ lon: string; lat: string }> => {
    return new Promise((resolve, reject) => {
      uni.getSetting({
        success: (settingRes) => {
          if (!settingRes.authSetting['scope.userLocation']) {
            uni.authorize({
              scope: 'scope.userLocation',
              success: () => {
                uni.getLocation({
                  type: 'gcj02',
                  success: (loc) => {
                    resolve({
                      lon: loc.longitude.toFixed(6),
                      lat: loc.latitude.toFixed(6)
                    });
                  },
                  fail: (err) => {
                    uni.showToast({ title: '获取位置失败，请开启定位', icon: 'none' });
                    reject('定位失败');
                  }
                });
              },
              fail: () => {
                uni.showModal({
                  title: '需要定位权限',
                  content: '允许定位才能查看任务距离',
                  confirmText: '去设置',
                  success: (modalRes) => {
                    if (modalRes.confirm) {
                      uni.openSetting();
                    }
                  }
                });
                reject('拒绝定位');
              }
            });
          } else {
            uni.getLocation({
              type: 'gcj02',
              success: (loc) => {
                resolve({
                  lon: loc.longitude.toFixed(6),
                  lat: loc.latitude.toFixed(6)
                });
              },
              fail: (err) => {
                uni.showToast({ title: '获取位置失败，请开启定位', icon: 'none' });
                reject('定位失败');
              }
            });
          }
        },
        fail: (err) => {
          reject('获取权限设置失败');
        }
      });
    });

  };
  

  const handleMsgClick = () => {
    uni.navigateTo({ url: '/pages-sub/msg/msg' });
  };

  const handleTaskClick = (item: any) => {
    if (item.taskType == "maintain") {
      if (currentTabValue.value === 0) {

        uni.navigateTo({
          url: `/pages-sub/daily/maintain-add?planNo=${item.planNo || ''}&planTypeId=${item.planTypeId ?? ''}&businessLine=${item.busiLine ?? ''}`
        });
      } else {
        uni.navigateTo({
          url: `/pages-sub/daily/maintain-detail?planNo=${item.planNo || ''}`
        });

      }

    }

    if (item.taskType == "inspection") {
      if (currentTabValue.value === 0) {

        uni.navigateTo({
          url: `/pages-sub/daily/inspect-add?planNo=${item.planNo}&batchNo=${item.batchNo}`
        });
      } else {
        uni.navigateTo({
          url: `/pages-sub/daily/inspect-detail?planNo=${item.planNo || ''}`
        });

      }
    }
  };

  
  onShow(async () => {
    showChartArea.value = true;
    chartWidth.value = rpx2px(750 - 60);
    chartHeight.value = rpx2px(300);
    initRecent7Days();
    getUnread();
    await getOrg(); // 拉取组织下拉列表
    await loadAllTaskByDept();
  });
  
  onUnload(() => {
    if (scrollTimer) clearTimeout(scrollTimer);
  });

  </script>
  

  <style scoped lang="scss">

  $primary-color: #1677ff;
  $danger-color: #E53935;

  $text-color: #333;
  $text-color-light: #666;
  $text-color-placeholder: #999;
  $bg-color: #f5f5f7;
  $card-bg: #fff;

  $border-radius: 16px;
  $card-radius: 5px;
  $spacing-sm: 5px;
  $spacing-md: 10px;
  $spacing-lg: 15px;

  $border-color: #e5e5e5;

  
  .page-container {

    height: 100vh;

    background-color: $bg-color;

    overflow: hidden;
    display: flex;
    flex-direction: column;

  }
  

  .user-info-bar {

    flex-shrink: 0;

    background: url("https://img.jichengshanshui.com.cn:28207/appimg/bg.jpg") no-repeat;
    background-size: 100% 100%;

    padding: 80px $spacing-lg 135px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;

    .username {

      font-size: 16px;

      margin-bottom: 4px;

    }

    .login-desc {

      font-size: 16px;

    }

    .msg-icon {
      position: relative;

      padding: 5px;

      top: 10px;

      border-radius: 50%;

      &--hover {
        background-color: rgba(255, 255, 255, 0.2);
      }

      .msg-badge {
        position: absolute;

        top: -2px;
        right: -3px;

      }
    }
  }
  

  .content-wrap {

    flex: 1;

    margin-top: -122px;

    border-radius: $border-radius $border-radius 0 0;
    background-color: $bg-color;

    overflow: hidden;

    display: flex;
    flex-direction: column;
  }
  
  .chart-wrap {
    flex-shrink: 0;
    transition: all 0.35s ease-out;
    opacity: 1;
    overflow: hidden;
  }
  .chart-wrap[hidden] {
    opacity: 0;
    height: 0;
    margin: 0;

  }

  .module-title {

    padding: $spacing-lg;

    font-size: 14px;

    font-weight: 600;
    color: $text-color-light;

    flex-shrink: 0;

  }
  
  .task-chart-card {
    background-color: $card-bg;
    border-radius: $card-radius;
    margin: 0 $spacing-lg $spacing-md;
    padding: $spacing-md;

    flex-shrink: 0;

    .card-header {
      display: flex;
      justify-content: space-between;

      align-items: center;

      font-size: 12px;

      color: $text-color-placeholder;
      margin-bottom: $spacing-md;

      .date-picker-wrap {

        border-radius: 3px;

        transition: background-color 0.2s;

        position: relative;
        z-index: 999;

        &:active {
          background-color: $bg-color;
        }

      }
    }

    .chart-container {

      width: 100%;

      height: 150px;

      display: flex;
      align-items: center;
      justify-content: center;

    }
  }

  .con-wrap {
    border-radius: 8px;
    background-color: #fff;
    margin: 0 15px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .con-title {
    padding: 10px 15px;
    border-bottom: 1px solid #f0e9e9;
    flex-shrink: 0;
  }
  
  .custom-tab-wrap {
    display: flex;
    align-items: center;
    gap: 20rpx;
    padding: 20rpx 0 20rpx 20rpx;
    background: #fff;
    flex-shrink: 0;
  }
  
  .tab-capsule {
    padding: 10rpx 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #999;
    background: #f5f5f5;
    border-radius: 0;
    transition: all 0.2s ease;
    font-weight: 500;
  }
  .tab-capsule.active {
    color: #d4af37;
    background: #fff8dc;
  }
  
  .tip-header {
    display: flex;
    align-items: center;
    gap: 8rpx;
    padding: 12rpx 15rpx;
    background: #e6f7ff;
    font-size: 14px;
    color: #000;
    flex-shrink: 0;
  }
  
  .tip-top {
    padding: 8px 0  0 70px;
    flex-shrink: 0;

  }
  

  .task-list-container {

    width: 100%;
    height: 100%;
    padding-bottom: 300rpx;
    box-sizing: border-box;
  }
  
  .empty-box {
    padding: 60rpx 0;

  }

  .sort-trigger {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: $text-color-placeholder;
  }
  

  .task-item {
    padding: $spacing-md;
    transition: background-color 0.2s;
    border-bottom: 1px solid $border-color;

    &:last-child {
      border-bottom: none;
    }

    &--hover {
      background-color: $bg-color;
    }

    &__content {
      width: 100%;
    }

    .name-fixed-wrap {
      display: flex;
    }
    .task-item__name {
      width: 60px;
    }

   .task-name-text {
    flex: 1;
    font-size: 14px;
    color: $text-color;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

    &__name {

      font-size: 15px;

      color: $text-color;

      display: inline-block;

    }

    &__footer {
      display: flex;

      align-items: flex-start;
      gap: 6rpx;
      font-size: 13px;
      color: $text-color-light;
      margin-top: $spacing-sm;

      align-items: center;

    }
  }

  .loc-icon {
    width: 20px;
    height: 20px;
  }

  .urgency-tag {
    color: #7D7D7D;

  }
  </style>