Merge branch 'feature/GFRS-818【0410】人力发展-DISC性格分析' into release/0407

# Conflicts:
#	src/views/app/Home.vue

src/api/ebiz/manpower/manpower.js

@@ -106,3 +106,30 @@ export function getShareKey(data) {
     data
   })
 }
+
+// 根据问卷编码获取问卷详细信息
+export function answerDetail(data = {}) {
+  return request({
+    url: getUrl('/customer/answer/detailByQnCode', 1),
+    method: 'post',
+        data
+      })
+    }
+    
+//DISC性格分析列表
+export function discAnalysisList(data) {
+  return request({
+    url: getUrl('/customer/answer/queryList', 1),
+    method: 'post',
+    data
+  })
+}
+
+// 答卷提交接口
+export function answerSubmit(data) {
+  return request({
+    url: getUrl('/customer/answer/submit', 1),
+    method: 'post',
+    data
+  })
+}

src/assets/js/utils/request.js

@@ -62,7 +62,10 @@ let survey = [
   //'/customer/question/getTableId', // id 查询 -- ok
   '/customer/question/getAgentInfo' // 代理人详情
 ]
-let whiteList = ['/customer/agent/getCustomersList', ...proposal, ...sale, ...agentEnter, ...claims, ...survey]
+let manpower = [
+  '/customer/answer/queryList' //DISC性格分析
+]
+let whiteList = ['/customer/agent/getCustomersList', ...proposal, ...sale, ...agentEnter, ...claims, ...survey, ...manpower]
 
 // 创建axios实例
 const service = axios.create({

src/components/ebiz/manpower/TalentPoolItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <van-cell :title="talentPoolInfo.name" title-class="ml10" is-link value-class="text-left" @click="edit(talentPoolInfo.personnelCode)" >
+  <van-cell :title="talentPoolInfo.name" title-class="ml10" is-link value-class="text-left" @click="edit(talentPoolInfo.personnelCode)">
     <van-icon slot="icon" :name="talentPoolInfo.avatarUrl || defaultAcatarUrl" style="line-height: inherit;" size="24" />
     <span>{{ talentPoolInfo.sameCompany }}</span>
     <van-icon slot="right-icon" name="edit" style="line-height: inherit;" color="#ee0a24" size="24" />

src/router/ebiz/manpower.js

@@ -19,7 +19,13 @@ const TalentPoolEdit = () => import('@/views/ebiz/manpower/talentPool/Edit')
 const ActivityLogList = () => import('@/views/ebiz/manpower/activityLog/List')
 const ActivityLogEdit = () => import('@/views/ebiz/manpower/activityLog/Edit')
 
-export default [{
+const DiscAnalysisList = () => import('@/views/ebiz/manpower/discAnalysis/List')
+const DiscAnalysisQuestion = () => import('@/views/ebiz/manpower/discAnalysis/Question')
+const DiscAnalysisResult = () => import('@/views/ebiz/manpower/discAnalysis/Result')
+const DiscAnalysisShare = () => import('@/views/ebiz/manpower/discAnalysis/Share')
+
+export default [
+  {
     // 人力发展
     path: '/manpower/Navigation',
     name: 'Navigation',
@@ -148,5 +154,45 @@ export default [{
       title: '日志详情',
       index: 100
     }
+  },
+  {
+    // DISC性格分析
+    path: '/manpower/DiscAnalysis/List',
+    name: 'DiscAnalysisList',
+    component: DiscAnalysisList,
+    meta: {
+      title: 'DISC性格分析',
+      index: 200
+    }
+  },
+  {
+    // DISC性格分析结果
+    path: '/manpower/DiscAnalysis/Result',
+    name: 'DiscAnalysisResult',
+    component: DiscAnalysisResult,
+    meta: {
+      title: 'DISC性格分析结果',
+      index: 201
+    }
+  },
+  {
+    // DISC性格分析 分享
+    path: '/manpower/DiscAnalysis/Share',
+    name: 'DiscAnalysisShare',
+    component: DiscAnalysisShare,
+    meta: {
+      title: 'DISC性格分析',
+      index: 202
+    }
+  },
+  {
+    // DISC性格分析结果 -做题
+    path: '/manpower/DiscAnalysis/Question',
+    name: 'DiscAnalysisQuestion',
+    component: DiscAnalysisQuestion,
+    meta: {
+      title: 'DISC性格分析',
+      index: 203
+    }
   }
 ]

src/views/app/Home.vue

@@ -29,6 +29,7 @@
           <li><router-link to="/agentEenter/approve/ApproveList">入司审批列表</router-link></li>
           <li><router-link to="/survey/surveyList">问卷调查</router-link></li>
           <li><router-link to="/nbs/list">nbs列表</router-link></li>
+          <li><router-link to="/manpower/DiscAnalysis/List">DISC性格分析</router-link></li>
         </ul>
       </li>
     </ul>

src/views/ebiz/manpower/IncreaseStaffTools.vue

@@ -33,12 +33,16 @@ export default {
           title: '政策方案',
           icon: 'orders-o',
           path: '/manpower/increaseStaffTools/PolicyOptions'
-        }
-        ,
+        },
         {
           title: '产品信息',
           icon: 'bookmark-o',
           path: '/product/productList'
+        },
+        {
+          title: 'DISC性格分析',
+          icon: 'newspaper-o',
+          path: '/manpower/DiscAnalysis/List'
         }
         // {
         //   title: '培训体系',

src/views/ebiz/manpower/activityLog/Edit.vue

@@ -106,7 +106,12 @@ export default {
           value: '1'
         }
       ],
-      resultArr: [{ id: '0', text: '不加盟' }, { id: '1', text: '考虑中' }, { id: '2', text: '进班了解' }, { id: '3', text: '同意加盟' }],
+      resultArr: [
+        { id: '0', text: '不加盟' },
+        { id: '1', text: '考虑中' },
+        { id: '2', text: '进班了解' },
+        { id: '3', text: '同意加盟' }
+      ],
       occupationArr: [
         { id: '001', text: '一般内勤职员' },
         { id: '002', text: '其他金融行业' },

src/views/ebiz/manpower/discAnalysis/List.vue

@@ -0,0 +1,201 @@
+<!-- DISC性格分析 - 统计列表 -->
+<template>
+  <div class="discAnalysis-list">
+    <van-sticky>
+      <div class="top-table" sticky style="background:#fff">
+        <van-row type="flex" align="center">
+          <van-col class="order" span="2">序号</van-col>
+          <van-col class="subTime" span="6">提交时间</van-col>
+          <van-col class="name" span="6">手机号</van-col>
+          <van-col class="name" span="5">客户姓名</van-col>
+          <van-col class="button" span="5"></van-col>
+        </van-row>
+      </div>
+    </van-sticky>
+    <van-list
+      v-model="loading"
+      :immediate-check="false"
+      :finished="finished"
+      :finished-text="finishedText"
+      error-text="请求失败，点击重新加载"
+      :error.sync="error"
+      @load="loadMore"
+    >
+      <div v-if="isSuccess">
+        <div v-if="answerList.length > 0" class="pb80">
+          <div class="main-table" v-for="(item, index) in answerList" :key="index">
+            <van-row type="flex" align="center">
+              <van-col class="order" span="2">{{ index + 1 }}</van-col>
+              <van-col class="subTime" span="6">{{ item.answerDate }}</van-col>
+              <van-col class="name" span="6">{{ item.mobile }}</van-col>
+              <van-col class="name" span="5">{{ item.customerName }}</van-col>
+              <van-col class="button" span="5">
+                <van-button type="danger" round size="small" class="mr5" @click="result(item)" v-no-more-click="1000">查看结果</van-button>
+              </van-col>
+            </van-row>
+          </div>
+        </div>
+        <div v-else class="text-center">
+          <img class="mt40" src="@/assets/images/pic_page-non.png" />
+          <div class="fs17 mt40">暂无数据</div>
+        </div>
+        <div class=" pb20 pr20 pl20 bottom-div">
+          <van-button type="danger" @click="share" style="width:90%" v-no-more-click="1000">分享给客户</van-button>
+        </div>
+      </div>
+    </van-list>
+  </div>
+</template>
+
+<script>
+import { Sticky, Row, Col, List } from 'vant'
+import { discAnalysisList } from '@/api/ebiz/manpower/manpower'
+import { weixinShare } from '@/assets/js/utils/wxShare.js'
+
+export default {
+  name: '',
+  filters: {},
+  data() {
+    return {
+      loading: false,
+      finished: false,
+      currentPage: 1, //当前页数
+      error: false,
+      finishedText: '',
+      pageSize: 15, //每页数据条数
+      isSuccess: false,
+      answerList: [] //答卷列表
+    }
+  },
+  watch: {},
+  created() {},
+  mounted() {
+    document.body.style.backgroundColor = '#fff'
+    localStorage.setItem('DISC-answerList', '')
+    this.loadMore()
+    weixinShare({
+      title: `“客观的认识自己，正确的规划自己”`,
+      imgUrl: this.$assetsUrl + 'images/logo.png',
+      desc: '国富为您量身定制的保险产品，请查收'
+    })
+  },
+  beforeRouteLeave(to, from, next) {
+    document.body.style.backgroundColor = ''
+    next()
+  },
+  methods: {
+    //分页用
+    loadMore() {
+      let pageInfo = {
+        pageNum: this.currentPage,
+        pageSize: this.pageSize
+      }
+      this.getDiscAnalysisList(pageInfo)
+    },
+    //获取DISC统计列表数据
+    getDiscAnalysisList(pageInfo) {
+      let params = {
+        ...pageInfo,
+        ...{
+          agentCode: '',
+          tableCode: 'GFRS-DISC'
+        }
+      }
+      discAnalysisList(params).then(res => {
+        if (res.result == '0') {
+          this.isSuccess = true
+          this.currentPage++
+          this.loading = false
+          if (res.content == null) {
+            this.finished = true
+            this.loading = false
+            this.finishedText = ''
+            return
+          }
+          let answerList = res.content.answerList.list
+          this.answerList = this.answerList.concat(answerList)
+          if (answerList.length == 0) {
+            this.finishedText = ''
+          } else {
+            this.finishedText = '已经全部加载'
+          }
+          if (this.answerList.length == 0) {
+            this.isSuccess = false
+          }
+          this.loading = false
+          if (res.content.nextPage == 0) {
+            //当下一页为0时  表示全部数据加载完毕
+            this.finished = true
+          }
+        } else {
+          this.finished = true
+          this.loading = false
+          this.finishedText = res.resultMessage
+        }
+      })
+    },
+    //微信分享
+    share() {
+      let url = location.origin + '/#/manpower/DiscAnalysis/Share?token=' + localStorage.getItem('token') + '&shareTime=' + new Date().getTime()
+      // console.log(url)
+      // eslint-disable-next-line no-undef
+      EWebBridge.webCallAppInJs('bridge', {
+        flag: 'share',
+        extra: {
+          title: `“客观的认识自己，正确的规划自己”`,
+          content: `您有一份DISC性格测试表待完成`,
+          url: url,
+          img: this.$assetsUrl + 'images/logo.png'
+        }
+      })
+    },
+    result(detail) {
+      localStorage.setItem('DISC-answerList', JSON.stringify(detail.answerDetail))
+      let url = `/manpower/DiscAnalysis/Result`
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + `/#${url}`
+        },
+        routerInfo: { path: url }
+      })
+    }
+  },
+  components: {
+    [Sticky.name]: Sticky,
+    [Row.name]: Row,
+    [List.name]: List,
+    [Col.name]: Col
+  }
+}
+</script>
+
+<style scoped="scoped" lang="scss">
+.top-table,
+.main-table {
+  // margin: 10px 0;
+  padding: 0 10px;
+}
+.van-col {
+  height: 51px;
+  font-size: 13px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 1);
+  line-height: 51px;
+  text-align: center;
+}
+.top-table .van-col {
+  font-size: 14px;
+}
+.main-table .van-col {
+  border-bottom: 1px solid #e7e7e7;
+}
+.bottom-div {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  z-index: 999;
+  background: #fff;
+}
+</style>

src/views/ebiz/manpower/discAnalysis/Question.vue

@@ -0,0 +1,210 @@
+<!-- DISC性格分析 - 问卷答题页面 -->
+<template>
+  <div class="container pb50">
+    <van-field v-model="formData.customerName" class="mt10" required clearable label="姓名" name="姓名" placeholder="请输入" v-validate="'required|manpowerName'" />
+    <van-field
+      v-model="formData.mobile"
+      clearable
+      required
+      label="手机号码"
+      name="手机号码"
+      placeholder="请输入"
+      maxlength="11"
+      type="tel"
+      v-validate="'required|mobile'"
+    />
+    <div :class="index>0?'mt10':''" v-for="(qesObj, index) of questions" :key="index">
+      <van-cell-group>
+        <van-cell class="noline">
+          <template slot="title">
+            <span class="qTitle fs15">{{qesObj.title}}</span>
+            <van-button class="ml10 prt-3" round plain size="mini" type="info">{{qesObj.tag}}</van-button>
+          </template>
+        </van-cell>
+      </van-cell-group>
+      <template v-if="index ===0">
+        <van-radio-group v-model="answerList[qItem.quCode]" v-for="(qItem, qIndex) of qesObj.questions" :class="qIndex>0?'mt10':''" :key="qIndex">
+          <van-cell-group>
+            <van-cell class="noline" title-class="qTitle fs15" :title="(qIndex+1)+'. '+ qItem.quTitle"></van-cell>
+            <van-cell v-for="(qAns, qAIndex) of qItem.qaAnswerInfoResponseDTOList" :key="qAIndex" title-class="ml10 c-gray-dark fs14" :title="qAns.anContent" clickable @click="changeAns(qItem.quCode,qAns.anMessage)">
+              <template #icon>
+                <van-radio :name="qAns.anMessage" />
+              </template>
+            </van-cell>
+          </van-cell-group>
+        </van-radio-group>
+      </template>
+      <template v-else>
+          <van-row type="flex" v-for="(qItem, qIndex) of qesObj.questions" :class="qIndex>0?'mt10':''" :key="qIndex">
+            <van-col class="bg-white">
+              <van-cell class="noline pr0" title-class="qTitle fs15" :title="(qIndex+11)+'. '+ qItem.quTitle"></van-cell>
+            </van-col>
+            <van-col>
+              <van-radio-group v-model="answerList[qItem.quCode]" >
+                <van-cell-group>
+                  <van-cell v-for="(qAns, qAIndex) of qItem.qaAnswerInfoResponseDTOList" :key="qAIndex" title-class="ml10 c-gray-dark fs14" :title="qAns.anContent" clickable @click="changeAns(qItem.quCode,qAns.anMessage)">
+                    <template #icon>
+                      <van-radio :name="qAns.anMessage" />
+                    </template>
+                  </van-cell>
+                </van-cell-group>
+              </van-radio-group>
+            </van-col>
+          </van-row>
+      </template>
+      
+      
+      <van-button type="danger" class="bottom-btn" size="large" @click="save" v-no-more-click="1000">提交</van-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Field, Radio, RadioGroup, Cell, CellGroup, Col, Row } from 'vant'
+import formatDate from '@/assets/js/utils/date-utils'
+// import {  } from '@/api/ebiz/manpower/manpower'
+import { answerDetail, answerSubmit } from '@/api/ebiz/manpower/manpower'
+
+export default {
+  name: '',
+  filters: {},
+  data() {
+    return {
+      formData: {
+        customerName: '',
+        mobile: '',
+        tableCode: '',
+        shareTime: '',
+        tableCode: 'GFRS-DISC',
+        answerList:[]
+      },
+      answerList:{},
+      questions: [],
+      data4res: {}
+    }
+  },
+  watch: {},
+  created() {
+    this.init()
+  },
+  mounted() {},
+  methods: {
+    init() {
+      let shareTimeStamp = this.$route.query.shareTime -0;
+      if(this.$route.query.token){
+        localStorage.token = this.$route.query.token;
+      }
+      console.log(shareTimeStamp);
+      this.formData.shareTime = formatDate.formatDate(new Date(shareTimeStamp));
+      answerDetail({
+        qnCode: 'GFRS-DISC'
+      })
+        .then(res => {
+          if (res.result == 0) {
+            res.content.questions.forEach(item => {
+              this.answerList[item.quCode] = ""
+            })
+            this.questions = [
+              {
+                title: '第一部分：请就您在“生活中”的状态选择最接近自己的一个描述',
+                tag: '单选',
+                type: 'radio',
+                questions: res.content.questions.slice(0, 10)
+              },
+              {
+                title: '第二部分：请就您在“工作中”的状态选择最接近自己的一个描述',
+                tag: '单选',
+                type: 'radio',
+                questions: res.content.questions.slice(10, 20)
+              }
+            ]
+          } else {
+            this.$toast(res.resultMessage)
+          }
+        })
+        .catch(err => {})
+    },
+    changeAns(ans, value){
+      this.answerList[ans] = value;
+      this.$forceUpdate()
+    },
+    save(){
+      this.$validator.validateAll()
+      .then(result => {
+        if (result) {
+          this.formData.answerList = []
+          this.data4res = {}
+          for(let key in this.answerList){
+            let tempQuContent= this.answerList[key]
+            if(!tempQuContent){
+              return this.$toast("请完成问卷后提交")
+            }
+            this.formData.answerList.push({
+              quCode : key,
+              quContent : tempQuContent
+            })
+            if(this.data4res[tempQuContent]){
+              this.data4res[tempQuContent] = this.data4res[tempQuContent]+1
+            }else{
+              this.data4res[tempQuContent] = 1
+            }
+          }
+          answerSubmit(this.formData)
+          .then(res => {
+            if (res.result == 0) {
+              localStorage["DISC-answerList"] = JSON.stringify(this.data4res)
+              this.$jump({
+                flag: 'h5',
+                extra: {
+                  url: location.origin + `/#/manpower/DiscAnalysis/Result`,
+                  forbidSwipeBack: '1',
+                  needRefresh: '1'
+                },
+                routerInfo: { path: `/manpower/DiscAnalysis/Result` }
+              })
+            } else {
+              this.$toast(res.resultMessage)
+            }
+          })
+          .catch(err => err)
+        } else {
+          this.$toast(this.errors.all()[0])
+        }
+      })
+    }
+  },
+  components: {
+    [Field.name]: Field,
+    [Radio.name]: Radio,
+    [RadioGroup.name]: RadioGroup,
+    [Cell.name]: Cell,
+    [CellGroup.name]: CellGroup,
+    [Col.name]: Col,
+    [Row.name]: Row
+  }
+}
+</script>
+
+<style scoped="scoped" lang="scss">
+.container {
+  
+  .van-cell:not(:last-child)::after {
+    margin-left: 30px;
+  }
+
+  .noline:not(:last-child)::after {
+    border: none !important;
+  }
+
+  .qTitle {
+    color: #333440;
+    font-weight: 500;
+    line-height: 22px;
+  }
+  
+  .prt-3 {
+    position: relative;
+    top: -3px;
+  }
+}
+</style>

src/views/ebiz/manpower/discAnalysis/Result.vue

@@ -0,0 +1,112 @@
+<!-- DISC性格分析 - DISC性格分析结果 -->
+<template>
+  <div class="container">
+    <div class="box mt66vw ml10 mr10 p30 fs16 c-gray-darker">
+      <van-row class="h40">
+        <van-col span="24" class="text-center">DISC性格分析结果</van-col>
+      </van-row>
+      <template v-for="(value,key,index) in answerList">
+        <van-row class="h40" :key="key">
+          <van-col span="12"> 
+            <span class="circular mr10" :class="'circular'+index%4" ></span>
+            {{key}}
+          </van-col>
+          <van-col span="12" class="text-right">{{value}}</van-col>
+        </van-row> 
+        <van-divider :key="key" />
+      </template>
+      <!-- <van-row class="h40">
+        <van-col span="12"> <span class="circular mr10"></span> title</van-col>
+        <van-col span="12" class="text-right">value</van-col>
+      </van-row> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import { Row, Col, Divider } from 'vant'
+
+export default {
+  name: '',
+  filters: {},
+  data() {
+    return {
+      answerList: {}
+    }
+  },
+  watch: {},
+  created() {
+    this.init()
+  },
+  mounted() {},
+  methods: {
+    init() {
+      let answerList = {
+        "D" : 0,
+        "I" : 0,
+        "S" : 0,
+        "C" : 0,
+      }
+      Object.assign(answerList,JSON.parse(localStorage["DISC-answerList"]))
+      // localStorage.answerList = JSON.stringify(tmp)
+      if(this.$route.query.token){
+        localStorage.token = this.$route.query.token;
+      }
+      this.answerList = answerList
+    }
+  },
+  components: {
+    [Row.name]: Row,
+    [Col.name]: Col,
+    [Divider.name]: Divider
+  }
+}
+</script>
+
+<style scoped="scoped" lang="scss">
+.container {
+  position: absolute;
+  width: 100%;
+  height: inherit;
+  background-image: url('../../../../assets/images/discBg.png');
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+  background-color: #0827a9;
+
+  .mt66vw {
+    margin-top: 66vw;
+  }
+
+  .box {
+    width: auto;
+    // height: 300px;
+    background-image: url('../../../../assets/images/discResBorder.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+
+  .circular {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background: #FF651A;
+    border-radius: 50%;
+  }
+  .circular0{
+    background: #FF651A;
+  }
+  .circular1{
+    background: #FACE01;
+  }
+  .circular2{
+    background: #46D591;
+  }
+  .circular3{
+    background: #12DAEC;
+  }
+  .h40 {
+    line-height: 40px;
+    height: 40px;
+  }
+}
+</style>

src/views/ebiz/manpower/discAnalysis/Share.vue

@@ -0,0 +1,43 @@
+<!-- DISC性格分析 - 分享后打开图片展示页 -->
+<template>
+  <div style="position:relative">
+    <img style="width: 100%;" src="@/assets/images/DISCtop.png" />
+    <img style="width: 52%;position: absolute;bottom: 3.6%;left: 24%;" src="@/assets/images/DISCbtn.png" @click="toTest" />
+  </div>
+</template>
+
+<script>
+// import {  } from 'vant'
+// import {  } from '@/api/ebiz/manpower/manpower'
+
+export default {
+  name: '',
+  filters: {},
+  data() {
+    return {}
+  },
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    //去做测试，跳转到测试答题页面
+    toTest() {
+      let token = this.$route.query.token
+      let shareTime = this.$route.query.shareTime
+      let url = `/manpower/DiscAnalysis/Question?token=${token}&shareTime=${shareTime}`
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + `/#${url}`
+        },
+        routerInfo: { path: url }
+      })
+    }
+  },
+  components: {
+    // [Field.name]: Field,
+  }
+}
+</script>
+
+<style scoped="scoped" lang="scss"></style>

src/views/ebiz/manpower/increaseStaffTools/PolicyOptions.vue

@@ -27,6 +27,6 @@ export default {
         routerInfo: { path: `/manpower/increaseStaffTools/PdfShare?pdf=${num}` }
       })
     }
-  },
+  }
 }
 </script>

src/views/ebiz/manpower/increaseStaffTools/ProductInformation.vue

@@ -1 +1 @@
-<!-- 产品信息 -->
+<!-- 产品信息 -->

src/views/ebiz/manpower/increaseStaffTools/TrainingSystem.vue

@@ -1 +1 @@
-<!-- 培训体系 -->
+<!-- 培训体系 -->

src/views/ebiz/manpower/js/verification.js

@@ -1,5 +1,2 @@
-
 //验证
-export function demo(par) {
-  
-}
+export function demo(par) {}

src/views/ebiz/manpower/talentPool/List.vue

@@ -1,7 +1,7 @@
 <!-- 人才库-人才列表 -->
 <template>
   <div class="container">
-    <van-search placeholder="请输入要查询人的姓名" v-model="searchName" @change="searchList" @keyup.enter="searchList"/>
+    <van-search placeholder="请输入要查询人的姓名" v-model="searchName" @change="searchList" @keyup.enter="searchList" />
     <div v-if="hasTalentPoolList" class="mb60">
       <van-index-bar :index-list="indexList">
         <div v-for="(item, key) in talentPoolList" :key="key" class="bg-white mb10 mr20">