完成英文研报

src/api/reportEn.js

@@ -54,4 +54,40 @@ export default {
     getReportDetail:params=>{
         return get('/english_report/detail',params)
     },
+    /**
+     * 客户邮箱列表
+     * @param CurrentIndex
+     * @param PageSize
+     * @param ListParam
+     */
+    getCustomEmailList:params=>{
+        return get('/english_report/email/list',params)
+    },
+    /**
+     * 批量群发邮件
+     * @param ReportId
+     * @param EmailIds
+     * @param Theme
+     */
+    sendEmail:params=>{
+        return post('/english_report/email/send',params)
+    },
+    /**
+     * 邮件群发日志
+     * @param ReportId
+     * @param SendStatus -1-已发送；0-发送失败；1-发送成功
+     * @param CurrentIndex
+     * @param PageSize
+     */
+    sendEmailLogList:params=>{
+        return get('/english_report/email/log_list',params)
+    },
+    /**
+     * 邮件重新推送
+     * @param ReportId
+     * @param SendId 0则重发所有失败的
+     */
+    emailResend:params=>{
+        return post('/english_report/email/resend',params)
+    }
 }

src/assets/styles/common.scss

@@ -81,23 +81,23 @@ img {
 .report-html-wrap{
     line-height: 1.8;
     font-size: 36px;
-    :deep(img){
+    img{
         width: 100% !important;
     }
-    :deep(span){
+    span{
         font-size: 36px !important;
         line-height: 1.8 !important;
         background-color: rgba(255, 255, 255, 0) !important;
     }
-    :deep(p){
+    p{
         font-size: 36px !important;
         line-height: 1.8 !important;
         background-color: rgba(255, 255, 255, 0) !important;
     }
-    :deep(iframe){
+    iframe{
         width: 100% !important;
     }
-    :deep(li) {
+    li{
         list-style: inherit !important;
         list-style-position: inside !important;
     }   
@@ -105,10 +105,10 @@ img {
 @media screen and (min-width:650px){
     .report-html-wrap{
         font-size: 18px;
-        :deep(span){
+        span{
             font-size: 18px;
         }
-        :deep(p){
+        p{
             font-size: 18px;
         }
     }

src/router/reportEn.js

@@ -36,4 +36,14 @@
             keepAlive:false
         },
     },
+    {
+        path:"/reportEn/sendemaillog",
+        name:"ReportEnSendEmailLog",
+        component: () => import("@/views/reportEn/SendEmailLog.vue"),
+        meta: { 
+            title: "群发日志",
+            hasBackHome:true,
+            keepAlive:false
+        },
+    },
 ]

src/views/reportEn/Detail.vue

@@ -1,10 +1,14 @@
 <script setup name="reportEnDetail">
 import {ref} from 'vue'
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import apiReportEn from '@/api/reportEn'
 import { showToast,showDialog } from 'vant';
+import SendEmail from './components/SendEmail.vue';
 
 const route=useRoute()
+const router=useRouter()
+
+const showSendEmail=ref(false)
 
 // 获取报告详情
 let reportInfo=ref(null)
@@ -17,14 +21,249 @@ async function getReportDetail(){
 }
 getReportDetail()
 
+// 发布报告
+async function handleReportPublish(){
+    showDialog({
+        title: '发布提示',
+        message: `是否发布报告?`,
+        showCancelButton:true
+    }).then(()=>{
+        apiReportEn.reportPublish({
+            ReportIds:route.query.id
+        }).then(res=>{
+            if(res.Ret===200){
+                showToast('发布成功')
+                getReportDetail()
+            }
+        })
+    })
+}
+
+// 取消发布
+function handleReportPublishCancle(){
+    showDialog({
+        title: '提示',
+        message: `是否确认取消发布？`,
+        showCancelButton:true
+    }).then(()=>{
+        apiReportEn.reportPublishCancle({ReportIds:Number(route.query.id)}).then(res=>{
+            if(res.Ret===200){
+                showToast('取消发布成功')
+                getReportDetail()
+            }
+        })
+    })
+}
+
+// 删除报告
+function handleDelReport(){
+    showDialog({
+        title: '提示',
+        message: '删除操作不可恢复，确认删除吗？',
+        showCancelButton:true
+    }).then(() => {
+        // on close
+        apiReportEn.reportDel({ReportIds:Number(route.query.id)}).then(res=>{
+            if(res.Ret===200){
+                showToast('删除成功')
+                window.close()
+            }
+        })
+    }).catch(()=>{})
+}
+
+// 查看群发邮件日志
+function handleGoEmailLog(){
+    router.push({
+        path:'/reportEn/sendemaillog',
+        query:{
+            id:route.query.id,
+            hasFail:reportInfo.value.EmailHasFail
+        }
+    })
+}
 </script>
 
 <template>
-    <div class="report-detail-page">
+    <div class="report-detail-page" v-if="reportInfo">
+        <div class="top-stage-box">
+            <span class="stage">第{{reportInfo.Stage}}期 / {{reportInfo.Frequency}}</span>
+            <template v-if="reportInfo.State===1">
+                <!-- 删除 -->
+                <div class="btn-item red-bg" @click="handleDelReport">
+                    <img src="@/assets/imgs/icon_del.png" alt="">
+                </div>
+                <!-- 发布 -->
+                <div class="btn-item" @click="handleReportPublish">
+                    <img src="@/assets/imgs/report/icon_publish.png" alt="">
+                </div>
+            </template>
+            <template v-if="reportInfo.State===2">
+                <!-- 群发邮件 -->
+                <div class="btn-item"  @click="showSendEmail=true" v-if="reportInfo.EmailState===0&&reportInfo.EmailAuth">
+                    <img src="@/assets/imgs/report/icon_sendemail.png" alt="">
+                </div>
+                <!-- 群发日志 -->
+                <div class="btn-item"  @click="handleGoEmailLog" v-if="reportInfo.EmailState===1&&reportInfo.EmailAuth">
+                    <img src="@/assets/imgs/report/icon_sendemaillog.png" alt="">
+                </div>
+
+                <!-- 取消发布 -->
+                <div class="btn-item red-bg" @click="handleReportPublishCancle">
+                    <img src="@/assets/imgs/report/icon_publish_cancel2.png" alt="">
+                </div>
+            </template>
+        </div>
+        <h1 class="report-title">{{reportInfo.Title}}</h1>
+        <div class="auth-box">
+            <span>{{reportInfo.Author}}</span>
+            <span>{{reportInfo.PublishTime}}</span>
+        </div>
+        <div class="report-abstract">Abstract：{{reportInfo.Abstract}}</div>
+        <div class="overview-box" v-html="'Overview：'+reportInfo.Overview"></div>
         
+        <div class="report-html-wrap" v-html="reportInfo.Content"></div>
     </div>
+
+    <!-- 群发邮件弹窗 -->
+    <van-popup 
+        v-model:show="showSendEmail"
+        position="bottom"
+        :style="{ height: '100%' }"
+        closeable
+    >
+        <SendEmail :reportId="reportInfo.Id" :defaultThemeVal="reportInfo.Abstract" @close="showSendEmail=false;getReportDetail()"/>
+    </van-popup>
 </template>
 
 <style lang="scss" scoped>
+.report-detail-page{
+    padding: 30px 34px;
+    .report-title{
+        margin: 30px 0;
+        font-weight: 600;
+        font-size: 42px;
+        line-height: 56px;
+    }
+    .auth-box{
+        font-size: $font-grey;
+        font-size: 36px;
+        padding-bottom: 40px;
+        border-bottom: 1px solid $border-color;
+        margin-bottom: 20px;
+        span{
+            display: block;
+            margin-bottom: 20px;
+        }
+    }
+    .report-abstract{
+        font-size: 34px;
+        line-height: 54px;
+        font-weight: bold;
+        &::before{
+            content: '';
+            display: inline-block;
+            position: relative;
+            top: 8px;
+            margin-right: 10px;
+            width: 6px;
+            height: 40px;
+            background-color: $theme-color;
+        }
+    }
+    .overview-box{
+        margin-top: 20px;
+        margin-bottom: 40px;
+        background: #F2F3FF;
+        border-radius: 24px;
+        padding: 30px 20px;
+        line-height: 1.8;
+        font-size: 34px;
+    }
+}
+.top-stage-box{
+    .stage{
+        display: inline-block;
+        background-color: #F2F3FF;
+        border-radius: 8px;
+        height: 72px;
+        line-height: 72px;
+        padding: 0 20px;
+        font-size: 28px;
+    }
+    .btn-item{
+        float: right;
+        width: 70px;
+        height: 70px;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #F2F3FF;
+        margin-left: 40px;
+        img{
+            width: 48px;
+            height: 48px;
+        }
+    }
+    .red-bg{
+        background-color: #FFF2F2;
+    }
+}
 
+@media screen and (min-width:$media-width){
+    .report-detail-page{
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 30px;
+        .report-title{
+            margin: 15px 0;
+            font-size: 21px;
+            line-height: 28px;
+        }
+        .auth-box{
+            font-size: 18px;
+            padding-bottom: 20px;
+            margin-bottom: 20px;
+            span{
+                margin-bottom: 10px;
+            }
+        }
+        .report-abstract{
+            font-size: 17px;
+            line-height: 27px;
+            &::before{
+                margin-right: 5px;
+                width: 3px;
+                height: 20px;
+                top: 4px;
+            }
+        }
+        .overview-box{
+            margin-top: 10px;
+            margin-bottom: 20px;
+            border-radius: 12px;
+            padding: 15px 10px;
+            font-size: 17px;
+        }
+    }
+    .top-stage-box{
+        .stage{
+            border-radius: 4px;
+            height: 36px;
+            line-height: 36px;
+            padding: 0 10px;
+            font-size: 14px;
+        }
+        .btn-item{
+            width: 35px;
+            height: 35px;
+            margin-left: 20px;
+            img{
+                width: 24px;
+                height: 24px;
+            }
+        }
+    }
+}
 </style>

src/views/reportEn/List.vue

@@ -6,6 +6,9 @@ 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'
+
+const { width, height } = useWindowSize()
 
 const router=useRouter()
 
@@ -86,6 +89,7 @@ async function handleReportPublish(item){
         ReportIds:item.Id.toString()
     }).then(res=>{
         if(res.Ret===200){
+            showToast('发布成功')
             showReportItemOpt.value=false
             refreshList()
         }
@@ -345,20 +349,29 @@ function handleConfirmStatus(){
     <!-- 分类弹窗 -->
     <van-popup 
         v-model:show="showClassify"
-        position="bottom"
+        :position="width>650?'center':'bottom'"
+        :style="width>650?{ width: '400px'}:''"
         round
     >
         <ListClassify @close="showClassify=false" @confirm="handleConfirmClassify"/>
     </van-popup>
 
     <!-- 日期筛选 -->
-    <van-calendar 
-        v-model:show="showCalendar" 
-        type="range"
-        allow-same-day
-        :min-date="calendarMinDate"
-        @confirm="handleCalendarChange" 
-    />
+    <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>
@@ -537,4 +550,86 @@ function handleConfirmStatus(){
         }
     }
 }
+
+@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>

src/views/reportEn/Search.vue

@@ -143,4 +143,35 @@ function goDetail(item){
         background-color: #fff;
     }
 }
+@media screen and (min-width:$media-width){
+    .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-search-page{
+        .search-box{
+            top: 60px;
+        }
+    }
+}
 </style>

src/views/reportEn/SendEmailLog.vue

@@ -0,0 +1,126 @@
+<script setup name="SendEmailLog">
+import {ref,reactive} from 'vue'
+import apiReportEn from '@/api/reportEn'
+import { useRoute } from 'vue-router'
+import { showToast } from 'vant'
+
+const route=useRoute()
+
+const listState = reactive({
+    list:[],
+    page:0,
+    pageSize:20,
+    finished:false,
+    loading:false
+})
+
+async function getLogList(){
+    const res=await apiReportEn.sendEmailLogList({
+        ReportId:Number(route.query.id),
+        CurrentIndex:listState.page,
+        PageSize:listState.pageSize,
+    })
+    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++
+    getLogList()
+}
+
+function handleConfirmResendEmail(){
+    apiReportEn.emailResend({
+        SendId:0,
+        ReportId: Number(route.query.id)
+    }).then(res=>{
+        if(res.Ret===200){
+            showToast(res.Msg)
+            listState.page=1
+            listState.finished=false
+            listState.list=[]
+            getLogList()
+        }
+    })
+}
+</script>
+
+<template>
+    <div class="send-email-log-page">
+        <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">
+                <li 
+                    class="item" 
+                    v-for="item in listState.list" 
+                    :key="item.SendId"
+                >   
+                    <!-- 成功 -->
+                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" v-if="item.SendStatus===1">
+                        <path d="M24 45C35.598 45 45 35.598 45 24C45 12.402 35.598 3 24 3C12.402 3 3 12.402 3 24C3 35.598 12.402 45 24 45ZM13.5 24.6195L15.6195 22.5L21 27.879L32.3775 16.5L34.5 18.6225L21 32.121L13.5 24.6195Z" fill="#2BA471"/>
+                    </svg>
+                    <!-- 错误 -->
+                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" v-if="item.SendStatus===0">
+                        <path d="M45 24C45 35.598 35.598 45 24 45C12.402 45 2.99999 35.598 3 24C3 12.402 12.402 2.99999 24 3C35.598 3 45 12.402 45 24ZM17.0127 14.8426L14.885 16.9575L21.8851 24L14.885 31.0425L17.0127 33.1574L24 26.1278L30.9873 33.1574L33.115 31.0425L26.115 24L33.1151 16.9575L30.9874 14.8426L24 21.8723L17.0127 14.8426Z" fill="#C54322"/>
+                    </svg>
+                    <!-- 已发送 -->
+                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" v-if="item.SendStatus===-1">
+                        <path d="M24 45C12.402 45 3 35.598 3 24C3 12.402 12.402 3 24 3C35.598 3 45 12.402 45 24C45 35.598 35.598 45 24 45ZM22.5 15V25.1668L31.9401 34.6068L34.0614 32.4855L25.5 23.9241V15H22.5Z" fill="#0052D9"/>
+                    </svg>
+                    <span>{{item.Email}}</span>
+                </li>
+            </ul>
+        </van-list>
+        <div class="fix-bot" v-if="$route.query.hasFail=='true'">
+            <van-button 
+                class="submit-btn" 
+                block 
+                type="primary"
+                @click="handleConfirmResendEmail"
+            >重发邮件</van-button>
+        </div>
+        
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.send-email-log-page{
+    padding: 0 35px;
+    padding-bottom: 180px;
+    .list-wrap{
+        .item{
+            display: flex;
+            align-items: center;
+            border-bottom: 1px solid $border-color;
+            padding: 32px 0;
+            color: rgba(0, 0, 0, 0.9);
+            svg{
+                width: 48px;
+                height: 48px;
+                margin-right: 24px;
+            }
+        }
+    }
+    .fix-bot{
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 99;
+        padding: 40px 60px;
+    }
+}
+</style>

src/views/reportEn/components/ListClassify.vue

@@ -70,4 +70,12 @@ function handleConfirm(){
         padding: 0 34px;
     }
 }
+@media screen and (min-width:$media-width){
+    .report-list-classify-wrap{
+        .top-box{
+            height: 50px;
+            padding: 0 16px;
+        }
+    }
+}
 </style>

src/views/reportEn/components/SendEmail.vue

@@ -0,0 +1,290 @@
+<script setup>
+import {computed, ref, watch} from 'vue'
+import apiReportEn from '@/api/reportEn'
+import { showToast } from 'vant'
+
+const props=defineProps({
+    defaultThemeVal:{
+        type:String,
+        default:''
+    },
+    reportId:{
+        type:Number,
+        default:0
+    }
+})
+const emits=defineEmits(['close'])
+
+
+const emailOpt=ref([])
+// 获取用户邮箱数据
+function getEmailList(){
+    apiReportEn.getCustomEmailList({
+        CurrentIndex:1,
+        PageSize:10000,
+        ListParam:4
+    }).then(res=>{
+        if(res.Ret===200){
+            emailOpt.value=res.Data?.List||[]
+            handleCheckAllChange()
+        }
+    })
+}
+getEmailList()
+
+const btnDisabled=computed(()=>{
+    if(themeVal.value&&checked.value.length>0) return false
+    return true
+})
+
+// 前五名
+const topList=computed(()=>{
+    const arr=checked.value.slice(0,5)
+    return emailOpt.value.filter(item=>arr.includes(item.Id))
+})
+
+
+
+const themeVal=ref(props.defaultThemeVal||'')
+
+const disabledNum=computed(()=>{
+    return emailOpt.value.filter(item=>item.Enabled===0).length
+})
+const checked=ref([])
+const checkedAll=ref(false)
+
+function handleCheckAllChange(){
+    if(checkedAll.value){
+        checked.value=[]
+    }else{
+        checked.value=emailOpt.value.filter(item=>item.Enabled!==0).map(e=>e.Id)
+    }
+}
+
+watch(
+    ()=>checked.value,
+    (n)=>{
+        if(n.length===(emailOpt.value.length-disabledNum.value)){
+            checkedAll.value=true
+        }else{
+            checkedAll.value=false
+        }
+    }
+)
+
+
+const showSearch=ref(false)
+const searchVal=ref('')
+const searchFilterOpt=ref([])
+const checkedFilter=ref([])
+function handleShowSearch(){
+    checkedFilter.value=checked.value
+    searchVal.value=''
+    searchFilterOpt.value=[]
+    showSearch.value=true
+}
+function handleSearchFilter(){
+    searchFilterOpt.value=emailOpt.value.filter(item=>item.Name.indexOf(searchVal.value)>-1)
+}
+function handleConfirmSearch(){
+    checked.value=checkedFilter.value
+    showSearch.value=false
+}
+
+
+
+// 发送邮件
+function handleConfirmSendEmail(){
+    let ids=[]
+    if(!checkedAll.value){
+        ids=checked.value
+    }
+    if(!themeVal.value){
+        showToast('请填写邮件主题')
+        return
+    }
+    if(themeVal.value.length>100){
+        showToast('邮件主题请控制在100个字符以内')
+        return
+    }
+    apiReportEn.sendEmail({
+        ReportId:props.reportId,
+        EmailIds:ids.join(','),
+        Theme:themeVal.value
+    }).then(res=>{
+        if(res.Ret===200){
+            showToast('发送成功')
+            emits('close')
+        }
+    })
+
+}
+
+</script>
+
+<template>
+    <div class="send-email-wrap">
+        <div class="top-box">
+            <ul class="left-user-box">
+                <li v-for="item in topList" :key="item.Id">{{item.Name.charAt(0)}}</li>
+                <li class="num" v-if="checked.length>5">+{{checked.length-5}}</li>
+            </ul>
+            <van-search readonly placeholder="搜索" @click="handleShowSearch" />
+        </div>
+        <div class="theme-text-box">
+            <van-field 
+                v-model="themeVal" 
+                label="主题" 
+                type="textarea"
+                placeholder="请输入主题"
+                rows="3"
+                maxlength="100"
+                show-word-limit
+                label-width="40px"
+            />
+        </div>
+
+        <div class="list-wrap">
+            <div class="check-all-btn">
+                <van-checkbox :modelValue="checkedAll" @click="handleCheckAllChange">全选</van-checkbox>
+            </div>
+            <van-checkbox-group v-model="checked">
+                <van-checkbox
+                    v-for="item in emailOpt" 
+                    :key="item.Id"
+                    :name="item.Id" 
+                    :disabled="item.Enabled===0"
+                >{{item.Name}}&lt;{{item.Email}}&gt;</van-checkbox>
+            </van-checkbox-group>
+        </div>
+        <van-button 
+            class="submit-btn" 
+            block 
+            type="primary"
+            :disabled="btnDisabled"
+            @click="handleConfirmSendEmail"
+        >发送</van-button>
+    </div>
+    <van-popup 
+        v-model:show="showSearch"
+        position="bottom"
+    >
+        <div class="send-email-wrap search-wrap">
+            <div class="top-box">
+                <van-search v-model="searchVal" placeholder="搜索" @search="handleSearchFilter" />
+            </div>
+            <div class="list-wrap">
+                <van-checkbox-group v-model="checkedFilter">
+                    <van-checkbox
+                        v-for="item in searchFilterOpt" 
+                        :key="item.Id"
+                        :name="item.Id" 
+                        :disabled="item.Enabled===0"
+                    >{{item.Name}}&lt;{{item.Email}}&gt;</van-checkbox>
+                </van-checkbox-group>
+            </div>
+            <van-button 
+                class="submit-btn" 
+                block 
+                type="primary"
+                @click="handleConfirmSearch"
+            >完成</van-button>
+        </div>
+    </van-popup>
+</template>
+
+<style lang="scss" scoped>
+.send-email-wrap{
+    padding-top: 30px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .top-box{
+        padding: 0 30px;
+        height: 128px;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid $border-color;
+        .left-user-box{
+            display: flex;
+            align-items: center;
+            li{
+                width: 80px;
+                height: 80px;
+                border-radius: 50%;
+                overflow: hidden;
+                text-align: center;
+                line-height: 80px;
+                color: #fff;
+                border: 2px solid #fff;
+                position: relative;
+            }
+            li:first-child{
+                background-color: #0052D9;
+                z-index: 6;
+            }
+            li:nth-child(2){
+                background-color: #2BA471;
+                margin-left: -20px;
+                z-index: 5;
+            }
+            li:nth-child(3){
+                background-color: #0052D9;
+                margin-left: -20px;
+                z-index: 4;
+            }
+            li:nth-child(4){
+                background-color: #D54941;
+                margin-left: -20px;
+                z-index: 3;
+            }
+            li:nth-child(5){
+                background-color: #E37318;
+                margin-left: -20px;
+                z-index: 2;
+            }
+            .num{
+                background-color: #D9E1FF !important;
+                margin-left: -20px;
+                z-index: 1 !important;
+                color: $theme-color;
+            }
+        }
+        :deep(.van-search__content){
+            border: none;
+            padding-left: 0;
+        }
+        .van-search{
+            padding: 0;
+            flex: 1;
+        }
+    }
+    .theme-text-box{
+        border-bottom: 1px solid $border-color;
+    }
+    .list-wrap{
+        flex: 1;
+        overflow-y: auto;
+        padding-left: 35px;
+        &::-webkit-scrollbar{
+            display: none;
+        }
+        :deep(.van-checkbox__label){
+            padding: 32px 32px 32px 0;
+            border-bottom: 1px solid $border-color;
+            flex: 1;
+        }
+    }
+
+    .submit-btn{
+        width: 90%;
+        margin: 20px auto;
+    }
+}
+.search-wrap{
+    .list-wrap{
+        height: 50vh;
+        flex: none;
+    }
+}
+</style>