|
|
@@ -0,0 +1,662 @@
|
|
|
+<script setup name="ReportList">
|
|
|
+import {computed, nextTick, onMounted, reactive,ref} from 'vue'
|
|
|
+import apiReport from '@/api/report'
|
|
|
+import {getSystemInfo} from '@/api/common'
|
|
|
+import moment from 'moment'
|
|
|
+// import ListClassify from '../recomponents/ListClassify.vue'
|
|
|
+import { showToast,showDialog,Dialog } from 'vant';
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
+import {useCachedViewsStore} from '@/store/modules/cachedViews'
|
|
|
+import {reportManageBtn,useAuthBtn} from '@/hooks/useAuthBtn'
|
|
|
+
|
|
|
+const cachedViewsStore=useCachedViewsStore()
|
|
|
+
|
|
|
+const {checkAuthBtn} = useAuthBtn()
|
|
|
+
|
|
|
+
|
|
|
+const router=useRouter()
|
|
|
+//是否显示一键清空选项
|
|
|
+const showCleanFilterBox=computed(()=>{
|
|
|
+ if(isClickClose.value) return false
|
|
|
+ if(
|
|
|
+ listState.ClassifyNameFirst||
|
|
|
+ listState.ClassifyNameFirst||
|
|
|
+ listState.EndDate||
|
|
|
+ listState.MsgIsSend||
|
|
|
+ listState.publishStatus
|
|
|
+ ) return true
|
|
|
+})
|
|
|
+const isClickClose=ref(false)//是否点击过关闭一键清空模块
|
|
|
+function handleCleanFilter(){
|
|
|
+ listState.ClassifyNameFirst=''
|
|
|
+ listState.ClassifyNameSecond=''
|
|
|
+ listState.ClassifyNameThird=''
|
|
|
+ listState.classifyIds=[]
|
|
|
+
|
|
|
+ listState.MsgIsSend=''
|
|
|
+ listState.StartDate=''
|
|
|
+ listState.EndDate=''
|
|
|
+ listState.timeType='publish_time'
|
|
|
+ listState.publishStatus=''
|
|
|
+ refreshList()
|
|
|
+}
|
|
|
+
|
|
|
+const statusMap = new Map([
|
|
|
+ [1,{ bg:'#EEEEEE', color:'#333', msg:'未发布'}],
|
|
|
+ [2,{ bg:'rgba(0, 82, 217, 0.1)', color:'#0052D9', msg:'已发布'}],
|
|
|
+ [3,{ bg:'#FFF1E9', color:'#BE5A00', msg:'待提交'}],
|
|
|
+ [4,{ bg:'#FFF1E9', color:'#BE5A00', msg:'待审批'}],
|
|
|
+ [5,{ bg:'#FFF0ED', color:'#AD352F', msg:'已驳回'}],
|
|
|
+ [6,{ bg:'#E3F9E9', color:'#006C45', msg:'已通过'}]
|
|
|
+])
|
|
|
+
|
|
|
+
|
|
|
+const listState = reactive({
|
|
|
+ listType: '3',
|
|
|
+ publishStatus:'',
|
|
|
+ MsgIsSend:'',
|
|
|
+ timeType: 'publish_time',
|
|
|
+ classifyIds: [],
|
|
|
+ ClassifyNameFirst:'',
|
|
|
+ ClassifyNameSecond:'',
|
|
|
+ ClassifyNameThird:'',
|
|
|
+ StartDate:'',
|
|
|
+ EndDate:'',
|
|
|
+ list:[],
|
|
|
+ page:0,
|
|
|
+ pageSize:20,
|
|
|
+ finished:false,
|
|
|
+ loading:false
|
|
|
+})
|
|
|
+async function getList(){
|
|
|
+ const res=await apiReport.getList({
|
|
|
+ CurrentIndex:listState.page,
|
|
|
+ PageSize:listState.pageSize,
|
|
|
+ StartDate:listState.StartDate,
|
|
|
+ EndDate:listState.EndDate,
|
|
|
+ // ClassifyNameFirst:listState.ClassifyNameFirst,
|
|
|
+ // ClassifyNameSecond:listState.ClassifyNameSecond,
|
|
|
+ ClassifyIdFirst: listState.classifyIds
|
|
|
+ ? listState.classifyIds[0]
|
|
|
+ : "",
|
|
|
+ ClassifyIdSecond:
|
|
|
+ listState.classifyIds &&
|
|
|
+ listState.classifyIds.length > 1
|
|
|
+ ? listState.classifyIds[1]
|
|
|
+ : "",
|
|
|
+ ClassifyIdThird:
|
|
|
+ listState.classifyIds &&
|
|
|
+ listState.classifyIds.length > 2
|
|
|
+ ? listState.classifyIds[2]
|
|
|
+ : "",
|
|
|
+ MsgIsSend:listState.MsgIsSend,
|
|
|
+ TimeType:listState.timeType,
|
|
|
+ State:listState.publishStatus,
|
|
|
+ FilterReportType: listState.listType
|
|
|
+ })
|
|
|
+ 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.page < 2 ? arr : [...listState.list,...arr]
|
|
|
+ }
|
|
|
+}
|
|
|
+function onLoad(){
|
|
|
+ listState.page++
|
|
|
+ getList()
|
|
|
+}
|
|
|
+function refreshList(){
|
|
|
+ document.documentElement.scrollTop=0
|
|
|
+ listState.page=1
|
|
|
+ // listState.list=[]
|
|
|
+ listState.finished=false
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+const selectClassifyName = computed(() => {
|
|
|
+ return `${listState.ClassifyNameFirst}${listState.ClassifyNameSecond?('/'+listState.ClassifyNameSecond):''}${listState.ClassifyNameThird?('/'+listState.ClassifyNameThird):''}`
|
|
|
+})
|
|
|
+// 分类弹窗
|
|
|
+const showClassify=ref(false)
|
|
|
+// 分类筛选
|
|
|
+function handleConfirmClassify(arr){
|
|
|
+ console.log(arr)
|
|
|
+ listState.ClassifyNameFirst=arr[0]?.text;
|
|
|
+ listState.ClassifyNameSecond=arr[1]?.text;
|
|
|
+ listState.ClassifyNameThird=arr[2]?.text;
|
|
|
+ listState.classifyIds = arr.map(_=>_.id);
|
|
|
+ refreshList()
|
|
|
+ showClassify.value=false
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// 跳转详情
|
|
|
+function goDetail(item){
|
|
|
+ console.log(item);
|
|
|
+ //若没有预览权限，则不跳转
|
|
|
+ if(!checkAuthBtn(reportManageBtn.reportManage_reportView)) return
|
|
|
+ router.push({
|
|
|
+ path:"/report/preview",
|
|
|
+ query:{
|
|
|
+ id:item.Id
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+async function goSearch(){
|
|
|
+ // 删除报告搜索页的缓存
|
|
|
+ await cachedViewsStore.removeCaches('ReportSearch')
|
|
|
+ router.push('/report/search')
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+onMounted(async ()=>{
|
|
|
+ getEtaConfig()
|
|
|
+ getSystemInfoFun()
|
|
|
+})
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="report-list-page">
|
|
|
+ <div class="sticky-box">
|
|
|
+ <div class="clear-filter-box" v-if="showCleanFilterBox">
|
|
|
+ <span>想要清空所有筛选项？试试</span>
|
|
|
+ <span @click="handleCleanFilter" style="display:flex;align-items:center">
|
|
|
+ <span style="color:#0052D9">一键清空</span>
|
|
|
+ <img class="rocket" src="@/assets/imgs/icon_rocket.png" alt="">
|
|
|
+ </span>
|
|
|
+ <van-icon name="cross" class="close-icon" @click="isClickClose=true"/>
|
|
|
+ </div>
|
|
|
+ <div class="top-box">
|
|
|
+ <van-search
|
|
|
+ style="flex:1"
|
|
|
+ shape="round"
|
|
|
+ readonly
|
|
|
+ placeholder="请输入报告标题或创建人"
|
|
|
+ @click-input="goSearch"
|
|
|
+ />
|
|
|
+ <div :class="['menu-icon',showClassify||listState.ClassifyNameSecond?'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',{
|
|
|
+ 'active': listState.MsgIsSend||listState.publishStatus
|
|
|
+ }]"
|
|
|
+ @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>
|
|
|
+
|
|
|
+ <div class="classify-name" v-if="listState.classifyIds&&listState.classifyIds.length">{{ selectClassifyName }}</div>
|
|
|
+ </div>
|
|
|
+ <van-list
|
|
|
+ v-model:loading="listState.loading"
|
|
|
+ :finished="listState.finished"
|
|
|
+ :offset="100"
|
|
|
+ :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">
|
|
|
+ <li
|
|
|
+ v-for="item in listState.list"
|
|
|
+ :key="item.Id"
|
|
|
+ class="select-text-disabled item"
|
|
|
+ @click="goDetail(item)"
|
|
|
+ >
|
|
|
+ <div class="list-top">
|
|
|
+ <h2 class="van-ellipsis title">
|
|
|
+ <span :class="['tag',item.ChapterType]">{{['周报','晨报'].includes(item.ClassifyNameFirst)?item.ClassifyNameFirst:'研报'}}</span>
|
|
|
+ {{item.Title}}
|
|
|
+ <span v-if="item.CreateTime">({{item.CreateTime.substring(5,7)}}{{item.CreateTime.substring(8,10)}})</span>
|
|
|
+ </h2>
|
|
|
+ <div class="status">
|
|
|
+ <van-tag
|
|
|
+ type="primary"
|
|
|
+ size="large"
|
|
|
+ :color="statusMap.get(item.State).bg"
|
|
|
+ :text-color="statusMap.get(item.State).color"
|
|
|
+ >{{statusMap.get(item.State).msg}}</van-tag>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p class="van-multi-ellipsis--l2 des">{{item.Abstract}}</p>
|
|
|
+ <div class="bot-info">
|
|
|
+ <div class="time">
|
|
|
+ <span style="margin-right:2px">{{moment(item.ModifyTime).format('YYYY-MM-DD')}}</span>
|
|
|
+ <svg v-if="item.PrePublishTime&&item.State==1" style="width:14px;height:14px;position: relative;top:2px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="none">
|
|
|
+ <path d="M13.0357 6.28571V14.7501L17.8576 19.7857L19.2213 18.422L14.9643 13.9512V6.28571H13.0357Z" fill="#0052D9"/>
|
|
|
+ <path d="M27.5 14C27.5 21.4558 21.4558 27.5 14 27.5C6.54416 27.5 0.5 21.4558 0.5 14C0.5 6.54416 6.54416 0.5 14 0.5C21.4558 0.5 27.5 6.54416 27.5 14ZM25.5714 14C25.5714 7.60928 20.3907 2.42857 14 2.42857C7.60928 2.42857 2.42857 7.60928 2.42857 14C2.42857 20.3907 7.60928 25.5714 14 25.5714C20.3907 25.5714 25.5714 20.3907 25.5714 14Z" fill="#0052D9"/>
|
|
|
+ </svg>
|
|
|
+ <span style="margin-left:10px">{{item.AdminRealName}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="read-count">
|
|
|
+ <span>PV:{{item.Pv}}</span>
|
|
|
+ <span v-permission="reportManageBtn.reportManage_reportList_uv">UV:{{item.Uv}}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="handle-icon" @click.stop="handleOptReportItem(item)">
|
|
|
+ <svg width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
+ <path d="M16 8C17.1045 8 18 7.10455 18 6C18 4.89545 17.1045 4 16 4C14.8955 4 14 4.89545 14 6C14 7.10455 14.8955 8 16 8Z" fill="black" fill-opacity="0.9"/>
|
|
|
+ <path d="M16 18C17.1045 18 18 17.1046 18 16C18 14.8954 17.1045 14 16 14C14.8955 14 14 14.8954 14 16C14 17.1046 14.8955 18 16 18Z" fill="black" fill-opacity="0.9"/>
|
|
|
+ <path d="M18 26C18 24.8954 17.1045 24 16 24C14.8955 24 14 24.8954 14 26C14 27.1046 14.8955 28 16 28C17.1045 28 18 27.1046 18 26Z" fill="black" fill-opacity="0.9"/>
|
|
|
+ </svg>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </van-list>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 添加报告按钮 -->
|
|
|
+ <div class="add-report-btn" @click="handeAddReport" v-if="isAddReportBtnShow">
|
|
|
+ <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
+ <path d="M12.0499 15.9499V27.5H15.9499V15.9499H27.5V12.0499H15.9499V0.5H12.0499V12.0499H0.5V15.9499H12.0499Z" fill="white"/>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.sticky-box{
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ z-index: 99;
|
|
|
+ border-bottom: 1px solid #E7E7E7;
|
|
|
+ background: #fff;
|
|
|
+ :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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .clear-filter-box{
|
|
|
+ padding: 0 34px;
|
|
|
+ height: 84px;
|
|
|
+ background-color: #F2F3FF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 28px;
|
|
|
+ position: relative;
|
|
|
+ .rocket{
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ }
|
|
|
+ .close-icon{
|
|
|
+ position: absolute;
|
|
|
+ right: 34px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+.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;
|
|
|
+ .list-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .status {
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ .tag{
|
|
|
+ display: inline-block;
|
|
|
+ width: 100px;
|
|
|
+ height: 44px;
|
|
|
+ line-height: 44px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28px;
|
|
|
+ background: rgba(0, 82, 217, 0.1);
|
|
|
+ border-radius: 4px;
|
|
|
+ color: $theme-color;
|
|
|
+ }
|
|
|
+ .week{
|
|
|
+ color: $font-success;
|
|
|
+ background: rgba(43, 164, 113, 0.1);
|
|
|
+ }
|
|
|
+ .day{
|
|
|
+ color: $theme-warning;
|
|
|
+ background: rgba(227, 115, 24, 0.1);
|
|
|
+ }
|
|
|
+ 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;
|
|
|
+ align-items: center;
|
|
|
+ color: $font-grey;
|
|
|
+ font-size: 28px;
|
|
|
+ .time{
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .active-status{
|
|
|
+ color: $font-success;
|
|
|
+ }
|
|
|
+ .read-count{
|
|
|
+ color: $theme-warning;
|
|
|
+ margin-right: 30px;
|
|
|
+ span{
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.classify-name {
|
|
|
+ padding: 30px 34px;
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
+
|
|
|
+.report-item-action-box{
|
|
|
+ .title{
|
|
|
+ padding: 30px 32px;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+ background: #eee;
|
|
|
+ }
|
|
|
+ .item{
|
|
|
+ text-align: center;
|
|
|
+ line-height: 48PX;
|
|
|
+ font-size: 32px;
|
|
|
+ border-top: 1px solid $border-color;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.calendar-box{
|
|
|
+ :deep(.van-calendar__header-title){
|
|
|
+ height: auto;
|
|
|
+ min-height: var(--van-calendar-header-title-height);
|
|
|
+ }
|
|
|
+ :deep(.van-calendar__header){
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
+ .time-type-box{
|
|
|
+ font-weight: normal;
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 32px;
|
|
|
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
|
|
|
+ .item{
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 40px;
|
|
|
+ color: $font-grey;
|
|
|
+ position: relative;
|
|
|
+ &.active{
|
|
|
+ color: #333;
|
|
|
+ &::after{
|
|
|
+ content: '';
|
|
|
+ width: 30PX;
|
|
|
+ height: 4PX;
|
|
|
+ background-color: $theme-color;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 50%;
|
|
|
+ border-radius: 2px;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.upload-audio-wrap{
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: $page-padding;
|
|
|
+ p{
|
|
|
+ color: rgba(0, 0, 0, 0.6);
|
|
|
+ padding-bottom: 32px;
|
|
|
+ border-bottom: 1px solid $border-color;
|
|
|
+ margin-bottom: 32px;
|
|
|
+ word-wrap: break-word;
|
|
|
+ }
|
|
|
+ .bot-btns{
|
|
|
+ // width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ padding: 20px 0;
|
|
|
+ text-align: center;
|
|
|
+ .bot-btn{
|
|
|
+ width: 315px;
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+@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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .clear-filter-box{
|
|
|
+ padding: 0 17px;
|
|
|
+ height: 42px;
|
|
|
+ font-size: 14px;
|
|
|
+ .rocket{
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+ .close-icon{
|
|
|
+ right: 17px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .top-box{
|
|
|
+ padding: 15px;
|
|
|
+ .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;
|
|
|
+ .tag{
|
|
|
+ width: 50px;
|
|
|
+ height: 22px;
|
|
|
+ line-height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .inline-title{
|
|
|
+ margin-left: -14px;
|
|
|
+ }
|
|
|
+ .des{
|
|
|
+ margin-top: 5px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ min-height: 30px;
|
|
|
+ }
|
|
|
+ .bot-info{
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bot-btns{
|
|
|
+ bottom: 24px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
