YB_APP第一次提交

package-lock.json

@@ -6397,7 +6397,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -6812,7 +6813,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -6868,6 +6870,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -6911,12 +6914,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -9519,7 +9524,7 @@
     },
     "js-sha256": {
       "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.9.0.tgz",
+      "resolved": "https://registry.npmmirror.com/js-sha256/-/js-sha256-0.9.0.tgz",
       "integrity": "sha512-sga3MHh9sgQN2+pJ9VYZ+1LPwXOxuBJBA5nrR5/ofPfuiJBE2hnjsaN8se8JznOmGLN2p49Pe5U/ttafcs/apA=="
     },
     "js-tokens": {
@@ -12809,7 +12814,8 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
       "integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "rx-lite-aggregates": {
       "version": "4.0.8",

src/api/YB_APP/index.js

@@ -0,0 +1,11 @@
+import request from '@/assets/js/utils/request'
+import getUrl from '@/assets/js/utils/get-url'
+
+export function homeConfigYB(data) {
+  return request({
+    url: getUrl('/app/homeConfigYB', 1,3),
+    method: 'get',
+    data
+  })
+}
+

src/assets/js/utils/get-url.js

@@ -9,6 +9,8 @@ export default function getUrl(url, api = 1, domainType = 1) {
     domain = config.apiDomain
   } else if (domainType == 2) {
     domain = config.imgDomain
+  } else if (domainType == 3) {
+    domain = config.YB_APP
   }
 
   return api === 0 ? urlMap[url] : domain + url

src/config/index.js

@@ -13,7 +13,7 @@
  *
  */
 
-let apiDomain, imgDomain, assetsUrl, mainUrl, payUrl, zssqUrl, REQ_PWD, CACHE_ENCRYP, API_VERSION, assetsUpUrl // 保融支付的收银台服务地址
+let apiDomain, imgDomain, assetsUrl, mainUrl, payUrl, zssqUrl, REQ_PWD, CACHE_ENCRYP, API_VERSION, assetsUpUrl, YB_APP // 保融支付的收银台服务地址
 function getSearchString(key) {
   var str = window.location.href.split('?')[1]
   str = str.substring(1, str.length) // 获取URL中?之后的字符（去掉第一位的问号）
@@ -64,6 +64,7 @@ switch (process.env.VUE_APP_FLAG) {
     zssqUrl = 'https://iagentsales-test2.e-guofu.com:5100/html/test/index.html#/'
     REQ_PWD = '41424344454631323334353637383930'
     CACHE_ENCRYP = '41424344454631323334353637383930'
+    YB_APP = 'http://10.10.100.98:7001'
     API_VERSION = apiVersion
     break
   case 'uat':
@@ -128,5 +129,6 @@ export default {
   zssqUrl, //知识社区地址
   REQ_PWD, //报文加密密码
   CACHE_ENCRYP, //缓存加密密码
-  API_VERSION //渠道版本
+  API_VERSION,//渠道版本
+  YB_APP
 }

src/router/YB_APP/index.js

@@ -0,0 +1,34 @@
+//数据报表 定义相关组件
+const YB_APP_home = () => import('@/views/YB_APP/home')
+const YB_APP_service = () => import('@/views/YB_APP/service')
+const YB_APP_mine = () => import('@/views/YB_APP/mine')
+
+export default [
+  {
+    path: '/YB_APP/home',
+    name: 'YB_APP_home',
+    component: YB_APP_home,
+    meta: {
+      title: '首页',
+      index: 1
+    }
+  },
+  {
+    path: '/YB_APP/service',
+    name: 'YB_APP_service',
+    component: YB_APP_service,
+    meta: {
+      title: '服务',
+      index: 1
+    }
+  },
+  {
+    path: '/YB_APP/mine',
+    name: 'YB_APP_mine',
+    component: YB_APP_mine,
+    meta: {
+      title: '我的',
+      index: 1
+    }
+  }
+]

src/router/ebiz/index.js

@@ -46,6 +46,8 @@ import laurelClub from './laurelClub'
 import allowance from './allowance'
 //协同单位投保
 import cooperativeUnit from './cooperativeUnit'
+// YB_APP
+import YB_APP from '../YB_APP/index'
 export default [
   ...proposal,
   ...sale,
@@ -81,5 +83,6 @@ export default [
   ...customerService,
   ...laurelClub,
   ...allowance,
-  ...cooperativeUnit
+  ...cooperativeUnit,
+  ...YB_APP
 ] //根据需要进行删减

src/views/YB_APP/home.vue

@@ -0,0 +1,603 @@
+<template>
+  <div class="public_container">
+    <div class="head" style="margin: 10px;border-radius: 5px;">
+      <van-swipe :autoplay="3000" style="width: 100%; height: 200px">
+        <van-swipe-item v-for="(item, index) in activity" :key="index">
+          <!-- <img :src="config.assetsUrl + item.img + '?v=' + thisGetTime" /> -->
+          <img :src="item.img">
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div style="margin: 10px;border-radius: 5px;">
+      <van-notice-bar
+        :left-icon="png8"
+        :text='getCodeValue'
+      />
+    </div>
+    <div class="top" style="display:flex;justify-content: space-between;margin: 10px;background: #fff;border-radius: 5px;align-items: center;padding: 15px;">
+      <div class="menu" v-for="(item, ind) in homePageIcon" :key="ind" @click="goDetail(item)">
+        <div class="menuImg" style="width:100%;display: flex;justify-content: center;margin-bottom: 5px;">
+          <img :src="item.img">
+        </div>
+        <span class="menuName">{{ item.title }}</span>
+      </div>
+    </div>
+
+    <div style="margin: 10px;background: #fff;border-radius: 5px;padding: 15px;">
+      <div style="display:flex;justify-content: space-between;align-items: center;">
+        <span style="display:flex;align-items: center;">
+          <img src="@/assets/YB_APP/images/1.png">
+          <span style="margin-left: 10px;font-size: 16px;font-weight: bold;">个人保费排行榜</span>
+        </span>
+        <span @click="clickCalendar" style="color: #2a409d;border:lpx solid #eee;padding: 6px 12px;border-radius: 15px;background: #f4f6ff;cursor: pointer;font-weight: bold;">
+          {{calendarValue}}
+        </span>
+        <!-- <van-calendar v-model:show="calendarShow" @confirm="calendarOnConfirm" :min-date="minDate"/> -->
+      </div>
+      
+      <div style="margin:15px 0px;">
+        <span @click="changePersonalType('1')" v-if="activePersonalType == '1'" style="padding: 8px;border-radius: 5px;background: #f6f6f6;font-weight: bold;cursor: pointer;">期交保费</span>
+        <span @click="changePersonalType('1')" v-if="activePersonalType == '2'" style="padding: 8px;border-radius: 5px;color: #8e8e8e;cursor: pointer;">期交保费</span>  
+        <span @click="changePersonalType('2')" v-if="activePersonalType == '2'" style="padding: 8px;border-radius: 5px;background: #f6f6f6;margin-left: 10px;font-weight: bold;cursor: pointer;">总保费</span>
+        <span @click="changePersonalType('2')" v-if="activePersonalType == '1'" style="padding: 8px;border-radius: 5px;color: #8e8e8e;margin-left: 10px;cursor: pointer;">总保费</span>  
+      </div>
+      
+      <div v-if="activePersonalType == '1'">
+        <div style="display: flex;align-items: center;font-size:12px;">
+          <div style="width: 100px;">
+            <span style="background: #ffc71f;color: #fff;padding: 3px 8px;border-radius: 10px;">柳州</span>
+            <span style="margin-left:8px;font-weight: bold;color: #333;">吴秋平</span>
+          </div>
+          <div style="width:calc(100% - 150px);
+              margin: 10px 0px;
+              display: flex;
+              background:#f4f6ff;
+              border-top-left-radius: 2px;
+              border-bottom-left-radius: 2px;
+              border-top-right-radius: 8px;
+              border-bottom-right-radius: 8px;">
+            <div class="imageup1"  ref="imageup1"></div>       
+          </div>
+          <div v-bind:class="{ 'colorOne': colorOne, 'colorTwo': colorTwo, 'colorThree': colorThree }" style="width: 60px;text-align: right;font-weight: bold;">12.9万</div>
+        </div>
+
+        <div style="display: flex;align-items: center;font-size:12px;">
+          <div style="width: 100px;">
+            <span style="background: #c0d4f4;color: #fff;padding: 3px 8px;border-radius: 10px;">南宁</span>
+            <span style="margin-left:8px;font-weight: bold;color: #333;">贾思梦</span>
+          </div>
+          <div style="width:calc(100% - 150px);
+              margin: 10px 0px;
+              display: flex;
+              background:#f4f6ff;
+              border-top-left-radius: 2px;
+              border-bottom-left-radius: 2px;
+              border-top-right-radius: 8px;
+              border-bottom-right-radius: 8px;">
+            <div class="imageup2"></div>       
+          </div>
+          <div style="width: 60px;text-align: right;color: #e1801d;font-weight: bold;">10.3万</div>
+        </div>
+
+        <div style="display: flex;align-items: center;font-size:12px;">
+          <div style="width: 100px;">
+            <span style="background: #c9b394;color: #fff;padding: 3px 8px;border-radius: 10px;">贵阳</span>
+            <span style="margin-left:8px;font-weight: bold;color: #333;">李爽</span>
+          </div>
+          <div style="width:calc(100% - 150px);
+              margin: 10px 0px;
+              display: flex;
+              background:#f4f6ff;
+              border-top-left-radius: 2px;
+              border-bottom-left-radius: 2px;
+              border-top-right-radius: 8px;
+              border-bottom-right-radius: 8px;">
+            <div class="imageup3"></div>       
+          </div>
+          <div style="width: 60px;text-align: right;color: #e1801d;font-weight: bold;">9.8万</div>
+        </div>
+
+        <div style="display: flex;align-items: center;font-size:12px;">
+          <div style="width: 100px;">
+            <span style="background: #f6f6f6;color: #959595;padding: 3px 8px;border-radius: 10px;">贵港</span>
+            <span style="margin-left:8px;font-weight: bold;color: #333;">张强</span>
+          </div>
+          <div style="width:calc(100% - 150px);
+              margin: 10px 0px;
+              display: flex;
+              background:#f4f6ff;
+              border-top-left-radius: 2px;
+              border-bottom-left-radius: 2px;
+              border-top-right-radius: 8px;
+              border-bottom-right-radius: 8px;">
+            <div class="imageup4"></div>       
+          </div>
+          <div style="width: 60px;text-align: right;color: #e1801d;font-weight: bold;">5.7万</div>
+        </div>
+
+        <div style="display: flex;align-items: center;font-size:12px;">
+          <div style="font-size:12px;width: 100px;">
+            <span style="background: #f6f6f6;color: #959595;padding: 3px 8px;border-radius: 10px;">南宁</span>
+            <span style="margin-left:8px;font-weight: bold;color: #333;">欧阳锋</span>
+          </div>
+          <div style="width:calc(100% - 150px);
+              margin: 10px 0px;
+              display: flex;
+              background:#f4f6ff;
+              border-top-left-radius: 2px;
+              border-bottom-left-radius: 2px;
+              border-top-right-radius: 8px;
+              border-bottom-right-radius: 8px;">
+            <div class="imageup5"></div>       
+          </div>
+          <div style="width: 60px;text-align: right;font-weight: bold;color: #333;">2.3万</div>
+        </div>
+      </div>
+
+      <div v-if="activePersonalType == '2'">
+        <div style="display: flex;align-items: center;font-size:12px;">
+          <div style="width: 100px;">
+            <span style="background: #ffc71f;color: #fff;padding: 3px 8px;border-radius: 10px;">Lennon</span>
+            <span style="margin-left:8px;font-weight: bold;color: #333;">Mark</span>
+          </div>
+          <div style="width:calc(100% - 150px);
+              margin: 10px 0px;
+              display: flex;
+              background:#f4f6ff;
+              border-top-left-radius: 2px;
+              border-bottom-left-radius: 2px;
+              border-top-right-radius: 8px;
+              border-bottom-right-radius: 8px;">
+            <div class="imageup6"  ref="imageup6"></div>       
+          </div>
+          <div style="width: 60px;text-align: right;color: #e51f14;font-weight: bold;">50万</div>
+        </div>
+
+        <div style="display: flex;align-items: center;font-size:12px;">
+          <div style="width: 100px;">
+            <span style="background: #c0d4f4;color: #fff;padding: 3px 8px;border-radius: 10px;">otto</span>
+            <span style="margin-left:8px;font-weight: bold;color: #333;">lvor</span>
+          </div>
+          <div style="width:calc(100% - 150px);
+              margin: 10px 0px;
+              display: flex;
+              background:#f4f6ff;
+              border-top-left-radius: 2px;
+              border-bottom-left-radius: 2px;
+              border-top-right-radius: 8px;
+              border-bottom-right-radius: 8px;">
+            <div class="imageup7"  ref="imageup7"></div>       
+          </div>
+          <div style="width: 60px;text-align: right;color: #e1801d;font-weight: bold;">40万</div>
+        </div>
+
+        <div style="display: flex;align-items: center;font-size:12px;">
+          <div style="width: 100px;">
+            <span style="background: #c9b394;color: #fff;padding: 3px 8px;border-radius: 10px;">mortimer</span>
+            <span style="margin-left:8px;font-weight: bold;color: #333;">leo</span>
+          </div>
+          <div style="width:calc(100% - 150px);
+              margin: 10px 0px;
+              display: flex;
+              background:#f4f6ff;
+              border-top-left-radius: 2px;
+              border-bottom-left-radius: 2px;
+              border-top-right-radius: 8px;
+              border-bottom-right-radius: 8px;">
+            <div class="imageup8"  ref="imageup8"></div>       
+          </div>
+          <div style="width: 60px;text-align: right;color: #e1801d;font-weight: bold;">30万</div>
+        </div>
+
+        <div style="display: flex;align-items: center;font-size:12px;">
+          <div style="width: 100px;">
+            <span style="background: #f6f6f6;color: #959595;padding: 3px 8px;border-radius: 10px;">haley</span>
+            <span style="margin-left:8px;font-weight: bold;color: #333;">william</span>
+          </div>
+          <div style="width:calc(100% - 150px);
+              margin: 10px 0px;
+              display: flex;
+              background:#f4f6ff;
+              border-top-left-radius: 2px;
+              border-bottom-left-radius: 2px;
+              border-top-right-radius: 8px;
+              border-bottom-right-radius: 8px;">
+            <div class="imageup9"  ref="imageup9"></div>       
+          </div>
+          <div style="width: 60px;text-align: right;color: #e1801d;font-weight: bold;">20万</div>
+        </div>
+
+        <div style="display: flex;align-items: center;font-size:12px;">
+          <div style="font-size:12px;width: 100px;">
+            <span style="background: #f6f6f6;color: #959595;padding: 3px 8px;border-radius: 10px;">marley</span>
+            <span style="margin-left:8px;font-weight: bold;color: #333;">gene</span>
+          </div>
+          <div style="width:calc(100% - 150px);
+              margin: 10px 0px;
+              display: flex;
+              background:#f4f6ff;
+              border-top-left-radius: 2px;
+              border-bottom-left-radius: 2px;
+              border-top-right-radius: 8px;
+              border-bottom-right-radius: 8px;">
+            <div class="imageup10"  ref="imageup10"></div>       
+          </div>
+          <div style="width: 60px;text-align: right;font-weight: bold;color: #333;">10万</div>
+        </div>
+      </div>
+    </div>
+
+    <div style="margin: 10px;background: #fff;border-radius: 5px;padding: 15px;margin-bottom: 20px;">
+      <div style="display:flex;justify-content: space-between;align-items: center;">
+        <span style="display:flex;align-items: center;">
+          <img src="@/assets/YB_APP/images/6.png">
+          <span style="margin-left: 10px;font-size: 16px;font-weight: bold;">实时出单榜</span>
+        </span>
+        <span style="color: #959595;">
+          数据截止时间 2022-09-19 17:30
+        </span>
+      </div>
+      <div style="margin-top: 15px;border-radius: 10px;overflow: hidden;">
+        <table border="1" class="issueTable">
+          <tr style="background:#4d6cc4;">
+            <th width="13%">时间</th>
+            <th width="13%">分公司</th>
+            <th width="13%">机构</th>
+            <th width="13%">营业部</th>
+            <th width="13%">姓名</th>
+            <th width="22%">产品名称</th>
+            <th width="13%">保费</th>
+          </tr>
+          <tbody>
+            <tr v-for="item in tableData">
+              <td>{{item.time}}</td>
+              <td>{{item.branchOffice}}</td>
+              <td>{{item.mechanism}}</td>
+              <td>{{item.businessDepartment}}</td>
+              <td>{{item.name}}</td>
+              <td>{{item.productName}}</td>
+              <td v-if="item.prem <= 5" style="color: #2c3e50;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.prem}}{{item.unit}}</td>
+              <td v-if="item.prem > 5 && item.prem <= 20" style="color: #e1801d;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.prem}}{{item.unit}}</td>
+                <td v-if="item.prem > 20" style="color: #e51f14;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.prem}}{{item.unit}}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div></div>
+  </div>
+</template>
+
+<script>
+import { homeConfigYB } from '@/api/YB_APP/index'
+import { Swipe, SwipeItem, NoticeBar, Icon } from 'vant'
+import config from '@/config'
+import png8 from '@/assets/YB_APP/images/8.png';
+export default {
+  name: 'Home',
+  components: {
+    [Swipe.name]: Swipe,
+    [SwipeItem.name]: SwipeItem,
+    [NoticeBar.name]: NoticeBar,
+    [Icon.name]: Icon,
+    // [Calendar.name]: Calendar,
+  },
+  data() {
+    return {
+      config,
+      getCodeValue:'',
+      png8,
+      activity: [],
+      homePageIcon:[],
+      tableData:[
+        {
+          time:'17:24',branchOffice:'广西',mechanism:'河池',businessDepartment:'申旺部',name:'张强',productName:'年年丰',prem:'100.3',unit:'万'
+        },
+        {
+          time:'17:10',branchOffice:'广西',mechanism:'桂林',businessDepartment:'申旺部',name:'王逗逗',productName:'福享年华',prem:'3.2',unit:'万'
+        },
+        {
+          time:'16:25',branchOffice:'广西',mechanism:'贺州',businessDepartment:'申旺部',name:'赵倩',productName:'鸿利两全',prem:'50',unit:'万'
+        },
+        {
+          time:'16:24',branchOffice:'广西',mechanism:'南宁',businessDepartment:'申旺部',name:'王超',productName:'节节高',prem:'15.4',unit:'万'
+        },
+        {
+          time:'15:32',branchOffice:'广西',mechanism:'钦州',businessDepartment:'申旺部',name:'李涛',productName:'节节高B款',prem:'101.5',unit:'万'
+        },
+        {
+          time:'15:04',branchOffice:'广西',mechanism:'玉林',businessDepartment:'申旺部',name:'李坤',productName:'年年丰',prem:'54.3',unit:'万'
+        },
+        {
+          time:'14:21',branchOffice:'广西',mechanism:'南宁',businessDepartment:'申旺部',name:'张策',productName:'福享年华',prem:'100.3',unit:'万'
+        },
+        {
+          time:'13:23',branchOffice:'广西',mechanism:'崇左',businessDepartment:'申旺部',name:'何景',productName:'年年丰',prem:'24.1',unit:'万'
+        },
+      ],
+      activePersonalType:'1',
+      calendarShow:false,
+      minDate: new Date(2010, 0, 1),
+      calendarValue:'9月27日',
+      colorOne:false,
+      colorTwo:false,
+      colorThree:false,
+      thisValue:'12.9',
+    }
+  },
+  mounted(){
+    this.getHomeConfigYB()
+    this.setAnimation()
+    if(this.thisValue >= 10){
+      this.colorOne = true
+    }
+    else if(this.thisValue >= 5 && this.thisValue < 10){
+      this.colorTwo = true
+    }
+    else if(this.thisValue < 5){
+      this.colorThree = true
+    }
+  },
+  methods:{
+    getHomeConfigYB(){
+      let params = {
+
+      }
+      homeConfigYB(params).then(res=>{
+        if(res.result == 0){
+          this.activity = res.content.activity
+          if(res.content.getCodeValue.length!=0){
+            res.content.getCodeValue.forEach(item=>{
+              this.getCodeValue += item + '         '
+            })
+          }
+          this.homePageIcon = res.content.icon.homePageIcon
+        }else{
+          this.$toast(res.resultMessage)
+        }
+      })
+    },
+    changePersonalType(type){
+      this.activePersonalType = type
+    },
+    calendarOnConfirm(value){
+      this.calendarShow = false
+      this.calendarValue = `${value.getMonth() + 1}月${value.getDate()}日`
+    },
+    clickCalendar(){
+      this.calendarShow = true
+    },
+    setAnimation(){
+      let ruleTrue = ` @keyframes changeWidth3 {
+        0% {width: 0px;}
+        100% {width: 170px;}
+      }`
+   
+      let sheet = document.styleSheets[0]
+      sheet.insertRule(ruleTrue, 0)
+      this.$refs.imageup1.style.animation = "changeWidth3  1s  forwards"
+    },
+    goDetail(data){
+      console.log(data)
+      if(data.route != null){
+        window.location.href = 'http://www.baidu.com'
+      }else{
+        this.$toast('暂未开放')
+      }
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.public_container{
+  font-size: 12px;
+}
+.head {
+  height: 200px;
+  position: relative;
+  box-shadow: 0px 5px 8px 0px #7a6fc1;
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 5px;
+  }
+}
+/deep/ .van-notice-bar{
+  border-radius: 5px;
+}
+.menuImg{
+  /deep/ img{
+    width: 30px;
+    height: 30px;
+  }
+}
+.imageup1,.imageup2,.imageup3,.imageup4,.imageup5,.imageup6,.imageup7,.imageup8,.imageup9,.imageup10{
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  height: 14px;
+  background-image: linear-gradient(-90deg, #abbcff, #768bfe);
+  transition-timing-function: ease-out;
+}
+.imageup1 {
+  width: 170px;
+  animation: animation1 2s 1;
+}
+.imageup2 {
+  width: 100px;
+  animation: animation2 2s 1;
+}
+.imageup3 {
+  width: 80px;
+  animation: animation3 2s 1;
+}
+.imageup4 {
+  width: 60px;
+  animation: animation4 2s 1;
+}
+.imageup5 {
+  width: 40px;
+  animation: animation5 2s 1;
+}
+
+.imageup6 {
+  width: 170px;
+  animation: animation6 2s 1;
+}
+.imageup7 {
+  width: 140px;
+  animation: animation7 2s 1;
+}
+.imageup8 {
+  width: 110px;
+  animation: animation8 2s 1;
+}
+.imageup9 {
+  width: 80px;
+  animation: animation9 2s 1;
+}
+.imageup10 {
+  width: 50px;
+  animation: animation10 2s 1;
+}
+  
+
+@keyframes animation1 {
+  0% {
+    width: 0px;
+  }
+  100% {
+    width: 170px;
+
+  }
+}
+@keyframes animation2 {
+  0% {
+    width: 0px;
+  }
+  100% {
+    width: 100px;
+
+  }
+}
+@keyframes animation3 {
+  0% {
+    width: 0px;
+  }
+  100% {
+    width: 80px;
+
+  }
+}
+@keyframes animation4 {
+  0% {
+    width: 0px;
+  }
+  100% {
+    width: 60px;
+
+  }
+}
+@keyframes animation5 {
+  0% {
+    width: 0px;
+  }
+  100% {
+    width: 40px;
+
+  }
+}
+@keyframes animation6 {
+  0% {
+    width: 0px;
+  }
+  100% {
+    width: 170px;
+
+  }
+}
+@keyframes animation7 {
+  0% {
+    width: 0px;
+  }
+  100% {
+    width: 140px;
+
+  }
+}
+@keyframes animation8 {
+  0% {
+    width: 0px;
+  }
+  100% {
+    width: 110px;
+
+  }
+}
+@keyframes animation9 {
+  0% {
+    width: 0px;
+  }
+  100% {
+    width: 80px;
+
+  }
+}
+@keyframes animation10 {
+  0% {
+    width: 0px;
+  }
+  100% {
+    width: 50px;
+
+  }
+}
+
+th{
+  height: 45px;
+  color: #fff;
+}
+
+table tbody tr:nth-child(odd){
+  background: #fff;
+}
+table tbody tr:nth-child(even){
+  background: #f9faff;
+}
+.issueTable{
+  border: 1px solid #ebedff;
+  border-collapse:collapse;
+}
+td{
+  text-align: center;
+  padding: 5px 0px;
+  line-height: 25px;
+  color: #7183b3;
+  border: 1px solid #ebedff;
+  border-collapse:collapse;
+}
+.colorOne{
+  color: #e51f14;
+}
+.colorTwo{
+  color: #e1801d;
+}
+.colorThree{
+  color: #333;
+}
+/deep/ .van-notice-bar{
+  background: linear-gradient(#f4f6ff,#fff);
+  color: #333;
+  letter-spacing: 1px;
+}
+/deep/ .van-icon__image{
+  width: 100%;
+}
+/deep/ .van-notice-bar__left-icon{
+  width: 50px;
+}
+/deep/ .van-notice-bar__wrap{
+  margin-left: 10px;
+}
+</style>

src/views/YB_APP/mine.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="public_container" style="position: relative;">
+    <p style="color: #fff;font-size: 20px;position: absolute;top: 50px;right: 10px;padding: 5px;background: #698ad9;border-radius: 20px;">
+      <van-icon v-if="messages" name="chat-o" />
+      <van-icon v-if="!messages" name="chat-o" dot/>
+    </p>
+    
+    <div style="display:flex;justify-content: flex-start;padding: 65px 15px 15px 20px;align-items: center;">
+      <div style="width:60px;">
+        <img style="width:100%;" src="@/assets/YB_APP/images/25.png">
+      </div>
+      <div style="margin-left:15px;">
+        <p style="color:#fff;padding: 3px;display: flex;align-items: center;">
+          <span style="font-size:20px;margin-right: 15px;font-weight: bold;">*萌</span>
+          <img style="width:70px;" src="@/assets/YB_APP/images/31.png">
+        </p>
+        <p style="color:#e9e9e9;padding: 3px;">
+          <span>工号</span>
+          <span style="margin:0px 5px;">|</span>
+          <span>Y5000065</span>
+        </p>
+      </div>
+    </div>
+
+    <div class="menu1" style="margin: 15px;background: linear-gradient(#dce2fb 10%, #fff 70%);border-radius: 5px;padding: 10px;margin-top: 5px;">
+      <div style="display: flex;justify-content: space-around;align-items: center;height: 100%;">
+        <div style="text-align:center;position: relative;width: 33.3%;">
+          <p style="line-height: 40px;font-size: 18px;font-weight: bold;">广西</p>
+          <p style="line-height:30px;">分公司</p>
+          <div style="position:absolute;right: 0px;width: 1px;background: #eee;top: calc(50% - 10px);height: 20px;"></div>
+        </div>
+        <div style="text-align:center;position: relative;width: 33.3%;">
+          <p style="line-height: 40px;font-size: 18px;font-weight: bold;">河池</p>
+          <p style="line-height:30px;">机构</p>
+          <div style="position:absolute;right: 0px;width: 1px;background: #eee;top: calc(50% - 10px);height: 20px;"></div>
+        </div>
+        <div style="text-align:center;position: relative;width: 33.3%;">
+          <p style="line-height: 40px;font-size: 18px;font-weight: bold;">申旺部</p>
+          <p style="line-height:30px;">营业部</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="menu1" style="margin: 15px;background: #fff;border-radius: 5px;padding: 8px;margin-top: 5px;">
+      <van-cell v-for="(item,index) in menu1" is-link>
+        <template #title>
+          <div style="display:flex;align-items: center;">
+            <img style="width:20px;" :src="item.img">
+            <span class="custom-title" style="margin-left:10px;">{{item.name}}</span>
+          </div>
+        </template>
+      </van-cell>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { Icon, Cell } from 'vant'
+import { homeConfigYB } from '@/api/YB_APP/index'
+export default {
+  name: 'mine',
+  components: {
+    [Icon.name]: Icon,
+    [Cell.name]: Cell,
+  },
+  data() {
+    return {
+      messages:false,
+      menu1:[]
+    }
+  },
+  mounted(){
+    this.getHomeConfigYB()
+  },
+  methods:{
+    getHomeConfigYB(){
+      let params = {
+
+      }
+      homeConfigYB(params).then(res=>{
+        if(res.result == 0){
+          if(res.content.icon){
+            res.content.icon.myPageIcon.forEach(item=>{
+              this.menu1.push({
+                name:item.title,
+                img:item.img
+              })
+            })
+          }
+        }else{
+          this.$toast(res.resultMessage)
+        }
+      })
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+  .public_container{
+    font-size: 12px;
+    height: 100vh;
+    width: 100vw;
+    background-image: url("../../assets/YB_APP/images/26.png");
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+</style>

src/views/YB_APP/service.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="public_container" style="position: relative;">
+    <p style="color: #fff;font-size: 20px;position: absolute;top: 50px;right: 10px;padding: 5px;background: #698ad9;border-radius: 20px;">
+      <van-icon v-if="messages" name="chat-o" />
+      <van-icon v-if="!messages" name="chat-o" dot/>
+    </p>
+    
+    <div class="head" style="color: #fff;font-size: 20px;padding-top: 50px;text-align: center;">
+      <span>服务</span>
+    </div>
+    
+    <div class="menu1" style="margin: 15px;background: #fff;border-radius: 5px;padding: 15px;margin-top: 25px;">
+      <p style="display:flex;align-items: center;margin-bottom: 15px;">
+        <img style="width:14px;" src="@/assets/YB_APP/images/15.png">
+        <span style="font-size: 16px;font-weight: bold;margin-left: 15px;">投保相关</span>
+      </p>
+      <div style="display:flex;justify-content: space-around;align-items: center;">
+        <div v-for="(item, ind) in menu1" :key="ind" style="text-align: center;width: 25%;">
+          <div>
+            <img style="width: 34px;" :src="item.img">
+          </div>
+          <p style="margin-top:5px;">{{ item.title }}</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="menu2" style="margin: 15px;background: #fff;border-radius: 5px;padding: 15px;margin-top: 25px;">
+      <p style="display:flex;align-items: center;margin-bottom: 15px;">
+        <img style="width:14px;" src="@/assets/YB_APP/images/16.png">
+        <span style="font-size: 16px;font-weight: bold;margin-left: 15px;">活动管理</span>
+      </p>
+      <div style="display:flex;justify-content: space-around;align-items: center;">
+        <div v-for="(item, ind) in menu2" :key="ind" style="text-align: center;width: 25%;">
+          <div>
+            <img style="width: 34px;" :src="item.img">
+          </div>
+          <p style="margin-top:5px;">{{ item.title }}</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="menu3" style="margin: 15px;background: #fff;border-radius: 5px;padding: 15px;margin-top: 25px;">
+      <p style="display:flex;align-items: center;margin-bottom: 15px;">
+        <img style="width:14px;" src="@/assets/YB_APP/images/21.png">
+        <span style="font-size: 16px;font-weight: bold;margin-left: 15px;">扩展服务</span>
+      </p>
+      <div style="display:flex;justify-content: flex-start;align-items: center;">
+        <div v-for="(item, ind) in menu3" :key="ind" style="text-align: center;width: 25%;">
+          <div>
+            <img style="width: 34px;" :src="item.img">
+          </div>
+          <p style="margin-top:5px;">{{ item.title }}</p>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { Icon } from 'vant'
+import { homeConfigYB } from '@/api/YB_APP/index'
+export default {
+  name: 'service',
+  components: {
+    [Icon.name]: Icon,
+  },
+  data() {
+    return {
+      messages:false,
+      menu1:[],
+      menu2:[],
+      menu3:[],
+    }
+  },
+  mounted(){
+    this.getHomeConfigYB()
+  },
+  methods:{
+    getHomeConfigYB(){
+      let params = {
+
+      }
+      homeConfigYB(params).then(res=>{
+        if(res.result == 0){
+          if(res.content.icon){
+            res.content.icon.servicePageIcon.forEach(item=>{
+              if(item.type == 'insure'){
+                this.menu1.push({
+                  title:item.title,
+                  img:item.img
+                })
+              }
+              if(item.type == 'activity'){
+                this.menu2.push({
+                  title:item.title,
+                  img:item.img
+                })
+              }
+              if(item.type == 'extend'){
+                this.menu3.push({
+                  title:item.title,
+                  img:item.img
+                })
+              }
+            })
+          }
+          
+        }else{
+          this.$toast(res.resultMessage)
+        }
+      })
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+  .public_container{
+    font-size: 12px;
+    height: 100vh;
+    width: 100vw;
+    background-image: url("../../assets/YB_APP/images/10.png");
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+</style>