diff --git a/src/api/ebiz/congratulation/congratulation.js b/src/api/ebiz/congratulation/congratulation.js
new file mode 100644
index 000000000..b5a72db76
--- /dev/null
+++ b/src/api/ebiz/congratulation/congratulation.js
@@ -0,0 +1,10 @@
+import request from '@/assets/js/utils/request'
+import getUrl from '@/assets/js/utils/get-url'
+
+export function getCongratulationList(data) {
+  return request({
+    url: getUrl('/data/performance/getAgentTop', 1),
+    method: 'post',
+    data
+  })
+}
diff --git a/src/router/ebiz/congratulation.js b/src/router/ebiz/congratulation.js
new file mode 100644
index 000000000..8de62ea8c
--- /dev/null
+++ b/src/router/ebiz/congratulation.js
@@ -0,0 +1,34 @@
+//保全 定义相关组件
+const congratulationTop = () => import('@/views/ebiz/congratulation/CongratulationTop')
+const congratulationList = () => import('@/views/ebiz/congratulation/CongratulationList')
+const congratulationPreview = () => import('@/views/ebiz/congratulation/CongratulationPreview')
+
+export default [
+  {
+    path: '/congratulation/congratulationTop',
+    name: 'congratulationTop',
+    component: congratulationTop,
+    meta: {
+      title: '上头条',
+      index: 1
+    }
+  },
+  {
+    path: '/congratulation/congratulationList',
+    name: 'congratulationList',
+    component: congratulationList,
+    meta: {
+      title: '大单榜',
+      index: 2
+    }
+  },
+  {
+    path: '/congratulation/congratulationPreview',
+    name: 'congratulationPreview',
+    component: congratulationPreview,
+    meta: {
+      title: '大单榜',
+      index: 3
+    }
+  }
+]
diff --git a/src/router/ebiz/index.js b/src/router/ebiz/index.js
index adc9d989f..ebc9411ea 100644
--- a/src/router/ebiz/index.js
+++ b/src/router/ebiz/index.js
@@ -9,6 +9,7 @@ import product from './product'
 import agentEenter from './agentEenter.js'
 import milestone from './milestone'
 import poster from './poster'
+import congratulation from './congratulation'
 import report from './report'
 import survey from './survey'
 import nbs from './nbs'
@@ -43,5 +44,6 @@ export default [
   ...claims,
   ...productStore,
   ...performance,
-  ...attendance
+  ...attendance,
+  ...congratulation
 ] //根据需要进行删减
diff --git a/src/views/ebiz/congratulation/CongratulationList.vue b/src/views/ebiz/congratulation/CongratulationList.vue
new file mode 100644
index 000000000..ff725cfe4
--- /dev/null
+++ b/src/views/ebiz/congratulation/CongratulationList.vue
@@ -0,0 +1,141 @@
+<template>
+  <div class="wrapper">
+    <div v-if="posterList.length !== 0">
+      <van-grid :column-num="3" :gutter="5">
+        <van-grid-item v-for="(item, index) in posterList" :key="index" @click="previewImg(index)">
+          <van-image class="fill" :src="item.narrowUrl" />
+        </van-grid-item>
+      </van-grid>
+      <div class="pageWrapper">
+        <van-pagination class="bottom-btn" v-model="pageNum" :page-count="totalPage" @change="pageChange" />
+      </div>
+    </div>
+    <div v-if="posterList.length === 0" class="text-center">
+      <img class="mt40 w250" src="@/assets/images/pic_page-non.png" />
+      <div class="fs17 c-gray-dark mt40">暂无数据</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Sticky, Grid, GridItem, Pagination, ImagePreview, List, Image } from 'vant'
+import { getPosterList } from '@/api/ebiz/poster/poster'
+import config from '@/config'
+export default {
+  name: 'posterList',
+  components: {
+    [Sticky.name]: Sticky,
+    [Grid.name]: Grid,
+    [GridItem.name]: GridItem,
+    [Pagination.name]: Pagination,
+    [List.name]: List,
+    [Image.name]: Image
+  },
+  data() {
+    return {
+      posterType: 'hb',
+      srcUrl: '@/images/u10199.png',
+      pageNum: 1,
+      pageSize: 9,
+      posterList: [], // 贺报列表
+      realImgUrls: [],
+      index: 0,
+      totalPage: 0
+    }
+  },
+  created() {
+    this.getPostList()
+  },
+  methods: {
+    onChange(index) {
+      this.index = index
+    },
+    // 贺报列表查询
+    async getPostList() {
+      let param = {
+        posterInfoDTO: {
+          posterType: this.posterType
+        },
+        pageNum: this.pageNum,
+        pageSize: this.pageSize
+      }
+      this.$toast.loading({
+        message: '加载中...',
+        forbidClick: true,
+        loadingType: 'spinner'
+      })
+      let res = await getPosterList(param)
+      if (res.result == 0) {
+        this.realImgUrls.splice(0)
+        this.totalPage = res.pageInfo.pages
+        this.posterList = res.pageInfo.list
+        for (let item of this.posterList) {
+          let narrowUrl = (config.imgDomain + `/returnImageStream?a=b.jpg&imgPath=${item.posterNarrowUrl}`).replace(/\+/g, '%2B')
+          let url = (config.imgDomain + `/returnImageStream?a=b.jpg&imgPath=${item.posterUrl}`).replace(/\+/g, '%2B')
+          item.narrowUrl = narrowUrl
+          this.realImgUrls.push(url)
+        }
+      } else {
+        this.$toast(res.resultMessage)
+      }
+    },
+    previewImg(index) {
+      ImagePreview({
+        images: this.realImgUrls,
+        startPosition: index
+      })
+    },
+    pageChange(pageNum) {
+      this.pageNum = pageNum
+      this.getPostList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+/deep/ .van-grid-item {
+  height: 30vh;
+}
+
+/deep/ .fill {
+  height: 100%;
+}
+
+.wrapper {
+  padding-top: 12px;
+  padding-bottom: 50px;
+}
+
+.post-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: start;
+}
+
+.post {
+  width: 28vw;
+  padding: 3px;
+  background: #fff;
+  margin: 5px;
+}
+
+img {
+  max-width: 100%;
+}
+
+/deep/ .van-list__loading,
+/deep/ .van-list__finished-text {
+  width: 100%;
+}
+
+/deep/ .van-pagination__item {
+  color: #ff4040;
+}
+
+/deep/.van-pagination__item:active,
+/deep/.van-pagination__item--active {
+  background-color: #ff4040;
+  color: #fff;
+}
+</style>
diff --git a/src/views/ebiz/congratulation/CongratulationPreview.vue b/src/views/ebiz/congratulation/CongratulationPreview.vue
new file mode 100644
index 000000000..d4c2d634e
--- /dev/null
+++ b/src/views/ebiz/congratulation/CongratulationPreview.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="poster-preview-container">
+    <div class="flex align-items-c justify-content-c top30 relative">
+      <img class="w300" :src="imgPath | urlFormat" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { getPosterInfo } from '@/api/ebiz/poster/poster'
+// import { getAgentInfo } from '@/api/ebiz/my/my'
+import config from '@/config'
+export default {
+  name: 'congratulationPreview',
+  data() {
+    let isWeixin = this.$utils.device().isWeixin //判断环境
+    return {
+      srcUrl: '',
+      isWeixin,
+      id: '',
+      posterType: 'congratulation',
+      posterInfo: {},
+      userName: '', // 代理人姓名
+      userMobile: '', // 用户手机号
+      manageComName: '', // 公司名称
+      imgUrl: '', // 分享的图片
+      base64: '', // 分享的base64
+      imgPath: '',
+      isShow: false
+    }
+  },
+  async created() {
+    debugger
+    this.id = this.$route.query.id
+    if (this.isWeixin) {
+      localStorage.token = this.$route.query.token
+    }
+    // await this.getPosterDetail()
+  },
+  methods: {
+    async getPosterDetail() {
+      return new Promise((resolve, reject) => {
+        this.$toast.loading({
+          duration: 0, // 持续展示 toast
+          forbidClick: true, // 禁用背景点击
+          loadingType: 'spinner',
+          message: '加载中……'
+        })
+        getPosterInfo({
+          posterInfoDTO: {
+            posterId: this.id
+          }
+        }).then(res => {
+          if (res.result == 0) {
+            this.posterInfo = res.infoDTOList[0]
+            this.imgPath = this.posterInfo.posterUrl
+            resolve()
+          } else {
+            reject()
+          }
+        })
+      })
+    }
+  },
+  filters: {
+    urlFormat(url) {
+      return (config.imgDomain + `/returnImageStream?a=b.jpg&imgPath=${url}`).replace(/\+/g, '%2B')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/ebiz/congratulation/CongratulationTop.vue b/src/views/ebiz/congratulation/CongratulationTop.vue
new file mode 100644
index 000000000..0e729732b
--- /dev/null
+++ b/src/views/ebiz/congratulation/CongratulationTop.vue
@@ -0,0 +1,210 @@
+<!-- 上头条 -->
+<template>
+  <div style="min-height: 100vh;" class="bg-white">
+    <div class="congratulationTop text-center bg-white" v-show="showData.topList.length !== 0">
+      <van-row><van-col class="congratulationTitle" span="24">全国TOP30本月业绩排名</van-col></van-row>
+      <div class="rankWrapper">
+        <van-row class="rankTitle">
+          <van-col span="3">排名</van-col>
+          <van-col span="4">姓名</van-col>
+          <van-col span="7">分公司</van-col>
+          <van-col span="5">预收规保</van-col>
+          <van-col span="5">承保标保</van-col>
+        </van-row>
+        <template>
+          <van-row v-for="(item, index) in showData.topList" :key="item.code" class="rankLine" :class="{ top3: index <= 2 }">
+            <van-col class="rankCell bl" span="3">{{ index + 1 }}</van-col>
+            <van-col class="rankCell" span="4">{{ item.name }}</van-col>
+            <van-col class="rankCell" span="7">{{ item.comName }}</van-col>
+            <van-col class="rankCell" span="5">{{ item.ysbb }}</van-col>
+            <van-col class="rankCell" span="5">{{ item.bzbf }}</van-col>
+          </van-row>
+        </template>
+      </div>
+
+      <div class="deadline">
+        <span>数据截止时间:{{ deadline }}</span>
+        <span>单位:万元</span>
+      </div>
+      <van-row>
+        <van-col span="24" class="detail score">您的业绩</van-col>
+        <van-col span="20" offset="2" style="border-bottom: 1px solid #ff4040;"></van-col>
+        <van-col span="24" class="detail">您本月预收规保{{ showData.achievement.selfAdvanceStand }}万元</van-col>
+        <van-col span="24" class="detail">您本月承保标保{{ showData.achievement.selfAcceptStand }}万元</van-col>
+        <van-col span="24" class="detail">预收规保全系统排名第{{ showData.achievement.ranking }}名</van-col>
+        <van-col span="24" class="detail">距上一名差距{{ showData.achievement.previousGap }}元</van-col>
+        <van-col span="24" class="detail">承保标保排名第{{ showData.achievement.rankingBb }}名</van-col>
+        <van-col span="24" class="detail">距上一名承保标保差距{{ showData.achievement.previousCbbbGap }}元</van-col>
+      </van-row>
+      <van-button color="#ff4d4d" class="bottom-btn" @click="nextStep" v-no-more-click="1000">大单榜</van-button>
+    </div>
+    <div v-if="showData.topList.length === 0" class="text-center">
+      <img class="mt40 w250" src="@/assets/images/pic_page-non.png" />
+      <div class="fs17 c-gray-dark mt40">暂无数据</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Col, Row, Loading } from 'vant'
+import { getCongratulationList } from '@/api/ebiz/congratulation/congratulation.js'
+import dateUtil from '@/assets/js/utils/date-utils.js'
+
+export default {
+  name: 'congratulationTop',
+  filters: {},
+  data() {
+    return {
+      showData: {
+        achievement: {
+          selfAdvanceStand: '',
+          selfAcceptStand: '',
+          ranking: '',
+          rankingBb: '',
+          previousGap: '',
+          previousCbbbGap: ''
+        },
+        topList: []
+      }
+    }
+  },
+  computed: {
+    deadline() {
+      let now = new Date()
+      let deadlineTime = now.getTime() - 1000 * 3600
+      return dateUtil.formatDate(new Date(deadlineTime), 'yyyy-MM-dd HH:mm:ss')
+    }
+  },
+  created() {
+    this.$toast.loading({
+      message: '加载中...',
+      duration: 0,
+      forbidClick: true,
+      loadingType: 'spinner'
+    })
+    this.init()
+  },
+  methods: {
+    async init() {
+      let currMonth = dateUtil.formatDate(new Date(), 'yyyy-MM-dd')
+      let data = await getCongratulationList({ date: currMonth, queryType: 'm' })
+      let result = data.content
+      let topList = result.list.splice(0, 30)
+      topList.map(value => {
+        value.comName = value.comName.substr(12)
+        return value
+      })
+      this.showData.topList.push(...topList)
+      this.showData.achievement.selfAdvanceStand = result.ysbb
+      this.showData.achievement.selfAcceptStand = result.bzbf
+      this.showData.achievement.ranking = result.top
+      this.showData.achievement.previousGap = result.xcbf
+      this.showData.achievement.rankingBb = result.topBB
+      // 后端精度处理有问题, 让前端先直接截取处理
+      if (result.xccbbb.includes('.')) {
+        let nums = result.xccbbb.split('.')
+        this.showData.achievement.previousCbbbGap = `${nums[0]}.${nums[1].substring(0, 2)}`
+      } else {
+        this.showData.achievement.previousCbbbGap = result.xccbbb
+      }
+      this.$toast.clear()
+    },
+    nextStep() {
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + `/#/congratulation/congratulationList`,
+          forbidSwipeBack: '1'
+        },
+        routerInfo: {
+          path: `/congratulation/congratulationList`
+        }
+      })
+    }
+  },
+  components: {
+    [Col.name]: Col,
+    [Row.name]: Row,
+    [Loading.name]: Loading
+  }
+}
+</script>
+
+<style scoped="scoped" lang="scss">
+$border: 1px solid #ff4040;
+
+.congratulationTop {
+  min-height: 100vh;
+}
+
+.congratulationTitle {
+  height: 60px;
+  font-size: 30px;
+  text-shadow: 1px 1px 5px #333;
+}
+
+.rankTitle {
+  font-size: 14px;
+  position: sticky;
+  top: 0;
+}
+
+.rankTitle,
+.congratulationTitle {
+  background-color: #ff4040;
+  color: #ffffff;
+  line-height: 2em;
+}
+
+.rankLine {
+  font-size: 14px;
+  line-height: 2em;
+  border-top: $border;
+}
+
+.rankWrapper {
+  max-height: 300px;
+  overflow: auto;
+  margin-top: 3px;
+  border-bottom: $border;
+}
+
+.rankTable {
+  border-collapse: collapse;
+}
+
+.rankCell {
+  border-right: $border;
+}
+
+.deadline {
+  font-size: 14px;
+  display: flex;
+  justify-content: space-between;
+  line-height: 2em;
+}
+
+.detail {
+  color: #ff4040;
+  line-height: 2em;
+}
+
+.score {
+  font-weight: bold;
+}
+
+.loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.bl {
+  border-left: $border;
+}
+
+.top3 {
+  color: #ff9900;
+}
+</style>