eta_mobile_front/src/views/reportEn/List.vue

<script setup name="ReportEnList">
import {nextTick, reactive,ref} from 'vue'
import apiReportEn from '@/api/reportEn'
import moment from 'moment'
import ListClassify from './components/ListClassify.vue'
import { showToast,showDialog,Dialog } from 'vant';
import { useRouter } from 'vue-router';
import { OnLongPress  } from '@vueuse/components'
import { useWindowSize } from '@vueuse/core'
import {useCachedViewsStore} from '@/store/modules/cachedViews'
const cachedViewsStore=useCachedViewsStore()

const { width, height } = useWindowSize()

const router=useRouter()

// 分类弹窗
const showClassify=ref(false)


const listState = reactive({
    MsgIsSend:'',
    Frequency:'',
    ClassifyNameFirst:'',
    ClassifyNameSecond:'',
    StartDate:'',
    EndDate:'',
    list:[],
    page:0,
    pageSize:20,
    finished:false,
    loading:false
})
async function getList(){
    const res=await apiReportEn.getList({
        CurrentIndex:listState.page,
        PageSize:listState.pageSize,
        StartDate:listState.StartDate,
        EndDate:listState.EndDate,
        ClassifyNameFirst:listState.ClassifyNameFirst,
        ClassifyNameSecond:listState.ClassifyNameSecond,
        Frequency:listState.Frequency,
        EmailState:listState.MsgIsSend
    })
    if(res.Ret===200){
        listState.loading=false
        if(!res.Data){
            listState.finished=true
            return
        }
        
        listState.finished=res.Data.Paging.IsEnd
        const arr=res.Data.List||[]
        listState.list=[...listState.list,...arr]
    }
}
function onLoad(){
    listState.page++
    getList()
}

function refreshList(){
    listState.page=1
    listState.list=[]
    listState.finished=false
    getList()
}


// 删除报告
function handleReportDel(item){
    showDialog({
        title: '提示',
        message: '删除操作不可恢复，确认删除吗？',
        showCancelButton:true
    }).then(() => {
        // on close
        apiReportEn.reportDel({ReportIds:item.Id}).then(res=>{
            if(res.Ret===200){
                showToast('删除成功')
                refreshList()
                showReportItemOpt.value=false
            }
        })
    }).catch(()=>{})
}

// 发布报告
async function handleReportPublish(item){
    apiReportEn.reportPublish({
        ReportIds:item.Id.toString()
    }).then(res=>{
        if(res.Ret===200){
            showToast('发布成功')
            showReportItemOpt.value=false
            refreshList()
        }
    })
}


// 取消发布
function handleReportPublishCancle(item){
    showDialog({
        title: '提示',
        message: `是否确认取消发布？`,
        showCancelButton:true
    }).then(()=>{
        apiReportEn.reportPublishCancle({ReportIds:Number(item.Id)}).then(res=>{
            if(res.Ret===200){
                refreshList()
                showReportItemOpt.value=false
            }
        })
    })
}

// 日期筛选
const calendarMinDate=new Date(2010,0,1)
const showCalendar=ref(false)
function handleCalendarChange(e){
    listState.StartDate=moment(e[0]).format('YYYY-MM-DD')
    listState.EndDate=moment(e[1]).format('YYYY-MM-DD')
    refreshList()
    showCalendar.value=false
}

// 分类筛选
function handleConfirmClassify({firstClassify,secondClassify}){
    listState.ClassifyNameFirst=firstClassify
    listState.ClassifyNameSecond=secondClassify
    refreshList()
    showClassify.value=false
}

// 跳转详情
function goDetail(item){
    router.push({
        path:"/reportEn/detail",
        query:{
            id:item.Id
        }
    })
}

// 长按弹出操作
let activeItem=ref(null)
const showReportItemOpt=ref(false)
function onLongPressItem(e){
    activeItem.value=e
    showReportItemOpt.value=true
}

// 更多操作
const frequencyDropMenuIns=ref(null)
const statusDropMenuIns=ref(null)
const showMoreFilter=ref(false)
const frequencyOpt=[
    {
        label:'年度',
        value:'年度'
    },
    {
        label:'半年度',
        value:'半年度'
    },
    {
        label:'季度',
        value:'季度'
    },
    {
        label:'月度',
        value:'月度'
    },
    {
        label:'双周度',
        value:'双周度'
    },
    {
        label:'周度',
        value:'周度'
    },
    {
        label:'日度',
        value:'日度'
    },
    {
        label:'不定时',
        value:'不定时'
    },
]//频度筛选项
const reportStatusOpt=[
    {
        label:'已群发邮件',
        value:2
    },
    {
        label:'未群发邮件',
        value:1
    }
]
function handleShowFilter(){
    showMoreFilter.value=true
    nextTick(()=>{
        setTimeout(() => {
            frequencyDropMenuIns.value?.toggle(true);
        }, 100);
    })
}
function handleConfirmFrequency(){
    refreshList()
    showMoreFilter.value=false
}
function handleConfirmStatus(){
    refreshList()
    showMoreFilter.value=false
}

function goSearch(){
    // 删除报告搜索页的缓存
    cachedViewsStore.removeCaches('ReportEnSearchList')
    router.push('/reportEn/search')
}
</script>

<template>
    <div class="report-list-page">
        <div class="sticky-box">
            <div class="top-box">
                <van-search
                    style="flex:1"
                    shape="round" 
                    readonly 
                    placeholder="请输入报告标题或作者"
                    @click="goSearch"
                />
                <div :class="['menu-icon',showClassify?'active':'']" @click="showClassify=true">
                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M33.75 5.25C38.7206 5.25 42.75 9.27944 42.75 14.25C42.75 19.2206 38.7206 23.25 33.75 23.25C28.7794 23.25 24.75 19.2206 24.75 14.25C24.75 9.27944 28.7794 5.25 33.75 5.25ZM27.75 14.25C27.75 17.5637 30.4363 20.25 33.75 20.25C37.0637 20.25 39.75 17.5637 39.75 14.25C39.75 10.9363 37.0637 8.25 33.75 8.25C30.4363 8.25 27.75 10.9363 27.75 14.25Z" fill="currentColor"/>
                        <path d="M6 9C6 7.34315 7.34315 6 9 6H19.5C21.1569 6 22.5 7.34315 22.5 9V19.5C22.5 21.1569 21.1569 22.5 19.5 22.5H9C7.34315 22.5 6 21.1569 6 19.5V9ZM9 9V19.5H19.5V9H9Z" fill="currentColor"/>
                        <path d="M6 28.5C6 26.8431 7.34315 25.5 9 25.5H19.5C21.1569 25.5 22.5 26.8431 22.5 28.5V39C22.5 40.6569 21.1569 42 19.5 42H9C7.34315 42 6 40.6569 6 39V28.5ZM9 28.5V39H19.5V28.5H9Z" fill="currentColor"/>
                        <path d="M25.5 28.5C25.5 26.8431 26.8431 25.5 28.5 25.5H39C40.6569 25.5 42 26.8431 42 28.5V39C42 40.6569 40.6569 42 39 42H28.5C26.8431 42 25.5 40.6569 25.5 39V28.5ZM28.5 39H39V28.5H28.5V39Z" fill="currentColor"/>
                    </svg>
                </div>
                <div :class="['menu-icon',showCalendar?'active':'']" @click="showCalendar=true">
                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M37.5718 42.5667H10.4282C9.52087 42.5605 8.65247 42.1973 8.01089 41.5558C7.36931 40.9142 7.00615 40.0458 7 39.1385V11.9948C7.00615 11.0875 7.36931 10.2191 8.01089 9.57754C8.65247 8.93596 9.52087 8.5728 10.4282 8.56665H37.5718C38.4791 8.5728 39.3475 8.93596 39.9891 9.57754C40.6307 10.2191 40.9939 11.0875 41 11.9948V39.1385C40.9939 40.0458 40.6307 40.9142 39.9891 41.5558C39.3475 42.1973 38.4791 42.5605 37.5718 42.5667ZM10.4282 10.7269C10.0919 10.7269 9.76938 10.8605 9.5316 11.0982C9.29381 11.336 9.16022 11.6585 9.16022 11.9948V39.1385C9.16022 39.4748 9.29381 39.7973 9.5316 40.0351C9.76938 40.2728 10.0919 40.4064 10.4282 40.4064H37.5718C37.9081 40.4064 38.2306 40.2728 38.4684 40.0351C38.7062 39.7973 38.8398 39.4748 38.8398 39.1385V11.9948C38.8398 11.6585 38.7062 11.336 38.4684 11.0982C38.2306 10.8605 37.9081 10.7269 37.5718 10.7269H10.4282Z" fill="currentColor" stroke="currentColor" stroke-width="0.5"/>
                        <path d="M39.4972 19.7435H8.50274C8.21628 19.7435 7.94155 19.6297 7.73899 19.4271C7.53643 19.2246 7.42263 18.9498 7.42263 18.6634C7.41942 18.5207 7.44517 18.3788 7.49831 18.2463C7.55146 18.1138 7.6309 17.9934 7.73184 17.8925C7.83279 17.7915 7.95314 17.7121 8.08563 17.6589C8.21813 17.6058 8.36002 17.5801 8.50274 17.5833H39.4972C39.6399 17.5801 39.7818 17.6058 39.9143 17.6589C40.0468 17.7121 40.1672 17.7915 40.2681 17.8925C40.3691 17.9934 40.4485 18.1138 40.5016 18.2463C40.5548 18.3788 40.5805 18.5207 40.5773 18.6634C40.5773 18.8052 40.5494 18.9457 40.4951 19.0767C40.4408 19.2078 40.3613 19.3268 40.261 19.4271C40.1607 19.5274 40.0416 19.607 39.9106 19.6613C39.7795 19.7155 39.6391 19.7435 39.4972 19.7435ZM17.7306 15.0473C17.4442 15.0473 17.1694 14.9336 16.9669 14.731C16.7643 14.5284 16.6505 14.2537 16.6505 13.9672V6.45342C16.6505 6.16696 16.7643 5.89223 16.9669 5.68967C17.1694 5.48711 17.4442 5.37331 17.7306 5.37331C17.8734 5.37011 18.0153 5.39585 18.1477 5.449C18.2802 5.50214 18.4006 5.58158 18.5015 5.68253C18.6025 5.78347 18.6819 5.90382 18.7351 6.03632C18.7882 6.16881 18.814 6.3107 18.8108 6.45342V13.9672C18.814 14.11 18.7882 14.2518 18.7351 14.3843C18.6819 14.5168 18.6025 14.6372 18.5015 14.7381C18.4006 14.8391 18.2802 14.9185 18.1477 14.9717C18.0153 15.0248 17.8734 15.0506 17.7306 15.0473ZM30.2458 15.0473C30.104 15.0473 29.9635 15.0194 29.8325 14.9651C29.7015 14.9108 29.5824 14.8313 29.4821 14.731C29.3818 14.6307 29.3022 14.5116 29.2479 14.3806C29.1937 14.2495 29.1657 14.1091 29.1657 13.9672V6.45342C29.1657 6.31158 29.1937 6.17113 29.2479 6.04008C29.3022 5.90904 29.3818 5.78997 29.4821 5.68967C29.5824 5.58937 29.7015 5.50981 29.8325 5.45553C29.9635 5.40125 30.104 5.37331 30.2458 5.37331C30.3886 5.37011 30.5304 5.39585 30.6629 5.449C30.7954 5.50214 30.9158 5.58158 31.0167 5.68253C31.1177 5.78347 31.1971 5.90382 31.2503 6.03632C31.3034 6.16881 31.3292 6.3107 31.3259 6.45342V13.9672C31.3292 14.11 31.3034 14.2518 31.2503 14.3843C31.1971 14.5168 31.1177 14.6372 31.0167 14.7381C30.9158 14.8391 30.7954 14.9185 30.6629 14.9717C30.5304 15.0248 30.3886 15.0506 30.2458 15.0473Z" fill="currentColor" stroke="currentColor" stroke-width="0.5"/>
                        <path d="M30.8799 26.0128C30.8799 26.2996 30.9364 26.5835 31.0461 26.8485C31.1558 27.1134 31.3167 27.3541 31.5195 27.5569C31.7222 27.7597 31.963 27.9205 32.2279 28.0303C32.4929 28.14 32.7768 28.1965 33.0636 28.1965C33.3504 28.1965 33.6343 28.14 33.8993 28.0303C34.1642 27.9205 34.4049 27.7597 34.6077 27.5569C34.8105 27.3541 34.9713 27.1134 35.0811 26.8485C35.1908 26.5835 35.2473 26.2996 35.2473 26.0128C35.2473 25.726 35.1908 25.4421 35.0811 25.1771C34.9713 24.9122 34.8105 24.6715 34.6077 24.4687C34.4049 24.2659 34.1642 24.1051 33.8993 23.9953C33.6343 23.8856 33.3504 23.8291 33.0636 23.8291C32.7768 23.8291 32.4929 23.8856 32.2279 23.9953C31.963 24.1051 31.7222 24.2659 31.5195 24.4687C31.3167 24.6715 31.1558 24.9122 31.0461 25.1771C30.9364 25.4421 30.8799 25.726 30.8799 26.0128Z" fill="currentColor" stroke="currentColor" stroke-width="0.5"/>
                        <path d="M21.8163 26.0128C21.8163 26.592 22.0464 27.1474 22.4559 27.5569C22.8654 27.9664 23.4208 28.1965 24 28.1965C24.5791 28.1965 25.1346 27.9664 25.5441 27.5569C25.9536 27.1474 26.1837 26.592 26.1837 26.0128C26.1837 25.4336 25.9536 24.8782 25.5441 24.4687C25.1346 24.0592 24.5791 23.8291 24 23.8291C23.4208 23.8291 22.8654 24.0592 22.4559 24.4687C22.0464 24.8782 21.8163 25.4336 21.8163 26.0128Z" fill="currentColor" stroke="currentColor" stroke-width="0.5"/>
                        <path d="M12.7528 26.0128C12.7528 26.2996 12.8093 26.5835 12.919 26.8485C13.0288 27.1134 13.1896 27.3541 13.3924 27.5569C13.5952 27.7597 13.8359 27.9205 14.1008 28.0303C14.3658 28.14 14.6497 28.1965 14.9365 28.1965C15.2233 28.1965 15.5072 28.14 15.7722 28.0303C16.0371 27.9205 16.2778 27.7597 16.4806 27.5569C16.6834 27.3541 16.8442 27.1134 16.954 26.8485C17.0637 26.5835 17.1202 26.2996 17.1202 26.0128C17.1202 25.726 17.0637 25.4421 16.954 25.1771C16.8442 24.9122 16.6834 24.6715 16.4806 24.4687C16.2778 24.2659 16.0371 24.1051 15.7722 23.9953C15.5072 23.8856 15.2233 23.8291 14.9365 23.8291C14.6497 23.8291 14.3658 23.8856 14.1008 23.9953C13.8359 24.1051 13.5952 24.2659 13.3924 24.4687C13.1896 24.6715 13.0288 24.9122 12.919 25.1771C12.8093 25.4421 12.7528 25.726 12.7528 26.0128Z" fill="currentColor" stroke="currentColor" stroke-width="0.5"/>
                        <path d="M21.8163 34.0668C21.8163 34.6459 22.0464 35.2013 22.4559 35.6109C22.8654 36.0204 23.4208 36.2505 24 36.2505C24.5791 36.2505 25.1346 36.0204 25.5441 35.6109C25.9536 35.2013 26.1837 34.6459 26.1837 34.0668C26.1837 33.4876 25.9536 32.9322 25.5441 32.5226C25.1346 32.1131 24.5791 31.8831 24 31.8831C23.4208 31.8831 22.8654 32.1131 22.4559 32.5226C22.0464 32.9322 21.8163 33.4876 21.8163 34.0668Z" fill="currentColor" stroke="currentColor" stroke-width="0.5"/>
                        <path d="M12.7528 34.0668C12.7528 34.3535 12.8093 34.6375 12.919 34.9024C13.0288 35.1674 13.1896 35.4081 13.3924 35.6109C13.5952 35.8136 13.8359 35.9745 14.1008 36.0842C14.3658 36.194 14.6497 36.2505 14.9365 36.2505C15.2233 36.2505 15.5072 36.194 15.7722 36.0842C16.0371 35.9745 16.2778 35.8136 16.4806 35.6109C16.6834 35.4081 16.8442 35.1674 16.954 34.9024C17.0637 34.6375 17.1202 34.3535 17.1202 34.0668C17.1202 33.78 17.0637 33.496 16.954 33.2311C16.8442 32.9662 16.6834 32.7254 16.4806 32.5226C16.2778 32.3199 16.0371 32.159 15.7722 32.0493C15.5072 31.9395 15.2233 31.8831 14.9365 31.8831C14.6497 31.8831 14.3658 31.9395 14.1008 32.0493C13.8359 32.159 13.5952 32.3199 13.3924 32.5226C13.1896 32.7254 13.0288 32.9662 12.919 33.2311C12.8093 33.496 12.7528 33.78 12.7528 34.0668Z" fill="currentColor" stroke="currentColor" stroke-width="0.5"/>
                    </svg>
                </div>
                <div :class="['menu-icon',showMoreFilter?'active':'']" @click="handleShowFilter">
                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M30.283 23.977L40.824 9.5685C41.3719 8.81954 41.6002 7.88381 41.459 6.96667C41.3177 6.04952 40.8184 5.22589 40.0705 4.6765C39.4715 4.23699 38.7479 4 38.005 4H9.995C8.065 4 6.5 5.567 6.5 7.5C6.5 8.244 6.7365 8.9685 7.1755 9.5685L17.717 23.977V42.5C17.717 43.3285 18.3875 44 19.215 44C19.6125 43.9996 19.9935 43.8414 20.2743 43.5601C20.5552 43.2788 20.7128 42.8975 20.7125 42.5V23.486C20.7125 23.1675 20.611 22.857 20.423 22.5995L9.592 7.7955C9.53761 7.72096 9.50489 7.63283 9.49745 7.54085C9.49001 7.44887 9.50814 7.35663 9.54984 7.27431C9.59155 7.192 9.65519 7.12281 9.73375 7.0744C9.81231 7.02599 9.90272 7.00024 9.995 7H38.005C38.0973 7.00015 38.1878 7.02586 38.2664 7.07427C38.345 7.12268 38.4086 7.1919 38.4503 7.27426C38.492 7.35663 38.51 7.44892 38.5025 7.54092C38.4949 7.63292 38.4621 7.72104 38.4075 7.7955L27.5765 22.5995C27.3884 22.8568 27.287 23.1673 27.287 23.486V38.271C27.287 39.0995 27.9575 39.771 28.785 39.771C28.9819 39.7709 29.1768 39.732 29.3586 39.6565C29.5404 39.5811 29.7056 39.4705 29.8447 39.3312C29.9838 39.192 30.0941 39.0266 30.1693 38.8447C30.2445 38.6628 30.2831 38.4678 30.283 38.271V23.977Z" fill="currentColor"/>
                    </svg>
                </div>
            </div>
            <template v-if="showMoreFilter">
            <van-dropdown-menu :close-on-click-overlay="false" :close-on-click-outside="false">
                <van-dropdown-item title="选择频度" ref="frequencyDropMenuIns">
                    <div class="frequency-opt-box">
                        <ul>
                            <li 
                                :class="['item',listState.Frequency==item.value?'item-active':'']" 
                                v-for="item in frequencyOpt" 
                                :key="item.value"
                                @click="listState.Frequency=item.value"
                            >{{item.label}}</li>
                            <li class="item" style="height:0"></li>
                        </ul>
                        <div class="bot-btn-box">
                            <div class="btn cancel-btn" @click="showMoreFilter=false">取消</div>
                            <div class="btn confirm-btn" @click="handleConfirmFrequency">确定</div>
                        </div>
                    </div>
                </van-dropdown-item>
                <van-dropdown-item title="报告状态" ref="statusDropMenuIns">
                    <div class="report-status-box">
                        <ul>
                            <li 
                                :class="['status-item',listState.MsgIsSend===item.value?'active':'']" 
                                v-for="item in reportStatusOpt" 
                                :key="item.value"
                                @click="listState.MsgIsSend=item.value"
                            >{{item.label}}</li>
                        </ul>
                        
                        <div class="bot-btn-box">
                            <div class="btn cancel-btn" @click="showMoreFilter=false">取消</div>
                            <div class="btn confirm-btn" @click="handleConfirmStatus">确定</div>
                        </div>
                    </div>
                </van-dropdown-item>
            </van-dropdown-menu>
            </template>
        </div>
        <van-list
            v-model:loading="listState.loading"
            :finished="listState.finished"
            :finished-text="listState.list.length>0?'没有更多了':'暂无相关报告'"
            @load="onLoad"
        >   
            <img v-if="listState.list.length==0&&listState.finished" class="list-empty-img" src="https://hzstatic.hzinsights.com/static/ETA_mobile/empty_img.png" alt="">
            <ul class="list-wrap">
                <OnLongPress
                    v-for="item in listState.list" 
                    :key="item.Id"
                    @trigger="onLongPressItem(item)"
                >
                <li 
                    class="item" 
                    @click="goDetail(item)"
                >
                    <h2 :class="['van-ellipsis title',item.Title.startsWith('【')?'inline-title':'']">{{item.Title}}</h2>
                    <p class="van-multi-ellipsis--l2 des">{{item.Abstract}}</p>
                    <div class="bot-info">
                        <div>
                            <span style="margin-right:10px">{{moment(item.ModifyTime).format('YYYY-MM-DD')}}</span>
                            <span>{{item.AdminRealName}}</span>
                        </div>
                        <div>
                            <span v-if="item.State===1">未发布</span>
                            <span v-if="item.State===2" class="active-status">已发布</span>
                        </div>
                    </div>
                </li>
                </OnLongPress>
            </ul>
        </van-list>
    </div>

    <!-- 报告item操作 -->
    <van-action-sheet 
        v-model:show="showReportItemOpt"
        :title="activeItem?.Title"
        cancel-text="取消"
    >
        <div class="report-item-action-box" v-if="activeItem">
            <template v-if="activeItem.State==1">
                <div class="item" style="color:#C54322" @click="handleReportDel(activeItem)">删除</div>
                <div class="item" style="color:#0052D9" @click="handleReportPublish(activeItem)">发布</div>
            </template>
            <template v-if="activeItem.State==2">
                <div class="item" @click="handleReportPublishCancle(activeItem)">取消发布</div>
            </template>
        </div>
    </van-action-sheet>

    <!-- 分类弹窗 -->
    <van-popup 
        v-model:show="showClassify"
        :position="width>650?'center':'bottom'"
        :style="width>650?{ width: '400px'}:''"
        round
    >
        <ListClassify @close="showClassify=false" @confirm="handleConfirmClassify"/>
    </van-popup>

    <!-- 日期筛选 -->
    <van-popup 
        v-model:show="showCalendar"
        :position="width>650?'center':'bottom'"
        :style="width>650?{ width: '400px'}:''"
        round
    >
        <van-calendar 
            :poppable="false"
            type="range"
            allow-same-day
            :min-date="calendarMinDate"
            @confirm="handleCalendarChange" 
            :style="{ height: '500px' }"
        />
    </van-popup>
</template>

<style lang="scss" scoped>
.sticky-box{
    position: sticky;
    top: 0;
    z-index: 99;
    :deep(.van-dropdown-menu__bar){
        box-shadow: none;
        border-bottom: 1px solid $border-color;
    }
    .bot-btn-box{
        border-top: 1px solid $border-color;
        padding: 32px;
        display: flex;
        justify-content: space-between;
        .btn{
            width: 327px;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 12px;
            font-size: 32px;
            font-weight: 600;
        }
        .cancel-btn{
            background-color: #F2F3FF;
            color: $theme-color;
        }
        .confirm-btn{
            background-color: $theme-color;
            color: #fff;
        }
    }
    .frequency-opt-box{
        ul{
            display: flex;
            flex-wrap: wrap;
            padding: 32px;
        }
        .item{
            width: 200px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(0, 0, 0, 0.9);
            margin-left: 12px;
            margin-right: 12px;
            margin-bottom: 24px;
            background-color: #F3F3F3;
            border-radius: 12px;
        }
        .item-active{
            background-color: #F2F3FF;
            color: $theme-color;
        }
    }
    .report-status-box{
        ul{
           padding: 32px; 
        }
        
        .status-item{
            line-height: 80px;
            border-radius: 12px;
            background-color: #F3F3F3;
            text-align: center;
            margin-bottom: 24px;
            &.active{
                background-color: #F2F3FF;
                color: $theme-color;
            }
        }
    }

}
.top-box{
    padding: 30px 34px;
    background-color: #fff;
    display: flex;
    align-items: center;
    .menu-icon{
        width: 70px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #F2F6FA;
        margin-left: 20px;
        border-radius: 50%;
        &.active{
            color: $theme-color;
        }
        svg{
            width: 48px;
            height: 48px;
        }
    }
    :deep(.van-search){
        padding: 0;
    }
}


.list-wrap{
    padding: 30px 34px;
    .item{
        padding: 20px;
        margin-bottom: 20px;
        border: 1px solid $border-color;
        box-shadow: 0px 3px 12px rgba(52, 75, 120, 0.08);
        border-radius: 8px;
        .title{
            font-size: 32px;
            line-height: 44px;
            margin: 0;
        }
        .inline-title{
            margin-left: -14px;
        }
        .des{
            margin-top: 10px;
            margin-bottom: 20px;
            font-size: 28px;
            color: $font-grey;
            min-height: 60px;
        }
        .bot-info{
            display: flex;
            justify-content: space-between;
            color: $font-grey;
            font-size: 28px;
            .active-status{
                color: $font-success;
            }
        }
    }
}

.report-item-action-box{
    .item{
        text-align: center;
        line-height: 48PX;
        font-size: 32px;
        border-top: 1px solid $border-color;
    }
}

.publish-report-pop-box{
    padding: 48px;
    .title{
        font-size: 36px;
        text-align: center;
        margin-bottom: 32px;
    }
    .tips{
        color: $font-grey;
        margin-bottom: 48px;
    }
    .btns{
        .btn{
            line-height: 96px;
            border-radius: 12px;
            text-align: center;
            font-size: 32px;
            font-weight: 600;
            margin-bottom: 24px;
            background-color: #F2F3FF;
            color: $theme-color;
        }
        .blue{
            background-color: $theme-color;
            color: #fff;
        }
    }
}

@media screen and (min-width:$media-width){
    .sticky-box{
        top: 60px;
        .bot-btn-box{
            padding: 32px;
            justify-content: flex-end;
            .btn{
                width: 120px;
                height: 40px;
                border-radius: 6px;
                font-size: 16px;
                margin-left: 20px;
            }
        }
        .frequency-opt-box{
            ul{
                padding: 32px;
            }
            .item{
                width: 100px;
                height: 40px;
                margin-left: 6px;
                margin-right: 6px;
                margin-bottom: 12px;
                border-radius: 6px;
            }
        }
        .report-status-box{
            ul{
                padding: 32px;
            }
            .status-item{
                line-height: 40px;
                border-radius: 6px;
                margin-bottom: 12px;
            }
        }
    }
    .top-box{
        padding: 30px;
        .menu-icon{
            width: 40px;
            height: 40px;
            svg{
                width: 28px;
                height: 28px;
            }
        }
    }

    .list-wrap{
        padding: 30px;
        .item{
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 4px;
            .title{
                font-size: 16px;
                line-height: 22px;
            }
            .inline-title{
                margin-left: -14px;
            }
            .des{
                margin-top: 5px;
                margin-bottom: 10px;
                font-size: 14px;
                min-height: 30px;
            }
            .bot-info{
                font-size: 14px;
            }
        }
    }

    .report-item-action-box{
        .item{
            font-size: 16px;
        }
    }
}
</style>