[银保app] 上头条前三名头像判断,后端有则显示后端返回的地址.后端没有显示本地图片.图片改为圆形.

src/views/YB_APP/hitTheHeadlines.vue

@@ -8,7 +8,7 @@
         <span class="GMactive" v-if="premType == 'GM'" @click="changePremType('GM')">总规模保费</span>
       </div>
       <div>
-        <span @click="clickCalendar" class="headDate">{{calendarValue}} ▼</span>
+        <span @click="clickCalendar" class="headDate">{{ calendarValue }} ▼</span>
       </div>
     </div>
 
@@ -19,134 +19,137 @@
         <span class="dataType2Active" v-if="dataType == 1" @click="changeDataType('2')">营业部</span>
         <span class="dataType2UnActive" v-if="dataType == 2" @click="changeDataType('2')">营业部</span>
       </div>
-      
+
       <div v-if="dataType == 1 && top3Data.length != 0" class="imgContainer1">
         <div class="imgContainer1_main">
           <div class="imgContainer1_main_second">
             <div class="imgContainer1_main_part_top">
-              <img src="@/assets/YB_APP/images/17.png" style="width:40%;">
+              <img src="@/assets/YB_APP/images/17.png" style="width: 40%" />
               <div class="imgContainer1_main_second_top_div">
-                <img src="@/assets/YB_APP/images/logo.png" style="width:75%;">
+                <!-- <img src="@/assets/YB_APP/images/logo.png" style="width:75%;"> -->
+                <img :src="this.top3Data[1].agentHeadImgUrl == null ? url1 : this.top3Data[1].agentHeadImgUrl" style="width: 85%; border-radius: 50%" />
               </div>
               <div class="personal_second">
-                <p class="personal_second_p">{{top3Data[1].agentName}}</p>
+                <p class="personal_second_p">{{ top3Data[1].agentName }}</p>
               </div>
             </div>
             <div class="imgContainer1_main_second_bottom">
-              <p class="imgContainer1_main_part_bottom_p">{{top3Data[1].managecom2}}{{top3Data[1].managecom3}}</p>
+              <p class="imgContainer1_main_part_bottom_p">{{ top3Data[1].managecom2 }}{{ top3Data[1].managecom3 }}</p>
-              <p class="imgContainer1_main_part_bottom_p">{{top3Data[1].prem}}万元</p>
+              <p class="imgContainer1_main_part_bottom_p">{{ top3Data[1].prem }}万元</p>
             </div>
           </div>
           <div class="imgContainer1_main_first">
             <div class="imgContainer1_main_part_top">
-              <img src="@/assets/YB_APP/images/18.png" style="width:65%;">
+              <img src="@/assets/YB_APP/images/18.png" style="width: 65%" />
               <div class="imgContainer1_main_first_top_div">
-                <img src="@/assets/YB_APP/images/logo.png" style="width:75%;">
+                <!-- <img src="https://iagentsales-test2.e-guofu.com:443/opt/ebiz/static/images/2022/12/26/7c5fe5b7e14e4682a802516210f4aa83.jpeg" style="width: 85%;border-radius: 50%" /> -->
+                <img :src="this.top3Data[0].agentHeadImgUrl == null ? url1 : this.top3Data[0].agentHeadImgUrl" style="width: 85%; border-radius: 50%" />
               </div>
               <div class="personal_first">
-                <p class="personal_first_p">{{top3Data[0].agentName}}</p>
+                <p class="personal_first_p">{{ top3Data[0].agentName }}</p>
               </div>
             </div>
             <div class="imgContainer1_main_first_bottom">
-              <p class="imgContainer1_main_part_bottom_p">{{top3Data[0].managecom2}}{{top3Data[0].managecom3}}</p>
+              <p class="imgContainer1_main_part_bottom_p">{{ top3Data[0].managecom2 }}{{ top3Data[0].managecom3 }}</p>
-              <p class="imgContainer1_main_part_bottom_p">{{top3Data[0].prem}}万元</p>
+              <p class="imgContainer1_main_part_bottom_p">{{ top3Data[0].prem }}万元</p>
             </div>
           </div>
           <div class="imgContainer1_main_third">
             <div class="imgContainer1_main_part_top">
-              <img src="@/assets/YB_APP/images/19.png" style="width:40%;">
+              <img src="@/assets/YB_APP/images/19.png" style="width: 40%" />
               <div class="imgContainer1_main_third_top_div">
-                <img src="@/assets/YB_APP/images/logo.png" style="width:75%;">
+                <!-- <img src="@/assets/YB_APP/images/logo.png" style="width: 75%" /> -->
+                <img :src="this.top3Data[2].agentHeadImgUrl == null ? url1 : this.top3Data[2].agentHeadImgUrl" style="width: 85%; border-radius: 50%" />
               </div>
               <div class="personal_third">
-                <p class="personal_third_p">{{top3Data[2].agentName}}</p>
+                <p class="personal_third_p">{{ top3Data[2].agentName }}</p>
               </div>
             </div>
             <div class="imgContainer1_main_third_bottom">
-              <p class="imgContainer1_main_part_bottom_p">{{top3Data[2].managecom2}}{{top3Data[2].managecom3}}</p>
+              <p class="imgContainer1_main_part_bottom_p">{{ top3Data[2].managecom2 }}{{ top3Data[2].managecom3 }}</p>
-              <p class="imgContainer1_main_part_bottom_p">{{top3Data[2].prem}}万元</p>
+              <p class="imgContainer1_main_part_bottom_p">{{ top3Data[2].prem }}万元</p>
             </div>
           </div>
         </div>
       </div>
-      <div style="height:48vw;" v-if="dataType == 1 && top3Data.length == 0"></div>
+      <div style="height: 48vw" v-if="dataType == 1 && top3Data.length == 0"></div>
       <div v-if="dataType == 2 && top3Data.length != 0" class="imgContainer2">
         <div class="imgContainer2_main">
           <div class="imgContainer2_main_second">
             <div class="imgContainer2_main_second_content">
-              <p class="imgContainer2_main_part_bottom_p">{{top3Data[1].managecom2}}{{top3Data[1].managecom3}}</p>
+              <p class="imgContainer2_main_part_bottom_p">{{ top3Data[1].managecom2 }}{{ top3Data[1].managecom3 }}</p>
-              <p class="imgContainer2_main_part_bottom_p">{{top3Data[1].managecom4}}</p>
+              <p class="imgContainer2_main_part_bottom_p">{{ top3Data[1].managecom4 }}</p>
-              <p class="imgContainer2_main_part_bottom_p">{{top3Data[1].prem}}万元</p>
+              <p class="imgContainer2_main_part_bottom_p">{{ top3Data[1].prem }}万元</p>
             </div>
           </div>
           <div class="imgContainer2_main_first">
             <div class="imgContainer2_main_first_content">
-              <p class="imgContainer2_main_part_bottom_p">{{top3Data[0].managecom2}}{{top3Data[0].managecom3}}</p>
+              <p class="imgContainer2_main_part_bottom_p">{{ top3Data[0].managecom2 }}{{ top3Data[0].managecom3 }}</p>
-              <p class="imgContainer2_main_part_bottom_p">{{top3Data[0].managecom4}}</p>
+              <p class="imgContainer2_main_part_bottom_p">{{ top3Data[0].managecom4 }}</p>
-              <p class="imgContainer2_main_part_bottom_p">{{top3Data[0].prem}}万元</p>
+              <p class="imgContainer2_main_part_bottom_p">{{ top3Data[0].prem }}万元</p>
             </div>
           </div>
           <div class="imgContainer2_main_third">
-            <div  class="imgContainer2_main_third_content">
+            <div class="imgContainer2_main_third_content">
-              <p class="imgContainer2_main_part_bottom_p">{{top3Data[2].managecom2}}{{top3Data[2].managecom3}}</p>
+              <p class="imgContainer2_main_part_bottom_p">{{ top3Data[2].managecom2 }}{{ top3Data[2].managecom3 }}</p>
-              <p class="imgContainer2_main_part_bottom_p">{{top3Data[2].managecom4}}</p>
+              <p class="imgContainer2_main_part_bottom_p">{{ top3Data[2].managecom4 }}</p>
-              <p class="imgContainer2_main_part_bottom_p">{{top3Data[2].prem}}万元</p>
+              <p class="imgContainer2_main_part_bottom_p">{{ top3Data[2].prem }}万元</p>
             </div>
           </div>
         </div>
       </div>
-      <div style="height:48vw;" v-if="dataType == 2 && top3Data.length == 0"></div>
+      <div style="height: 48vw" v-if="dataType == 2 && top3Data.length == 0"></div>
       <div v-if="dataType == 1" class="tableContent">
-        <div class="tableContent_main" >
+        <div class="tableContent_main">
           <table class="issueTable">
             <tr class="issueTable_tr">
-              <th style="width: 16%;">排名</th>
+              <th style="width: 16%">排名</th>
-              <th style="width: 16%;">分公司</th>
+              <th style="width: 16%">分公司</th>
-              <th style="width: 16%;">机构</th>
+              <th style="width: 16%">机构</th>
-              <th style="width: 20%;">营业部</th>
+              <th style="width: 20%">营业部</th>
-              <th style="width: 16%;">姓名</th>
+              <th style="width: 16%">姓名</th>
-              <th style="width: 16%;">保费</th>
+              <th style="width: 16%">保费</th>
             </tr>
             <tbody>
               <tr v-for="item in tableData">
-                <td>TOP{{item.bfpm}}</td>
+                <td>TOP{{ item.bfpm }}</td>
-                <td>{{item.managecom2}}</td>
+                <td>{{ item.managecom2 }}</td>
-                <td>{{item.managecom3}}</td>
+                <td>{{ item.managecom3 }}</td>
-                <td>{{item.managecom4}}</td>
+                <td>{{ item.managecom4 }}</td>
-                <td>{{item.agentName}}</td>
+                <td>{{ item.agentName }}</td>
-                <td>{{item.prem}}万</td>
+                <td>{{ item.prem }}万</td>
               </tr>
             </tbody>
           </table>
           <div v-if="tableData.length == 0" class="noneDataDiv">
-            <img style="width:60%" src="@/assets/YB_APP/images/43.png">
+            <img style="width: 60%" src="@/assets/YB_APP/images/43.png" />
             <span class="noneDataDiv_span">暂无业绩</span>
           </div>
         </div>
       </div>
 
-      <div v-if="dataType == 2"  class="tableContent">
+      <div v-if="dataType == 2" class="tableContent">
         <div class="tableContent_main">
           <table class="issueTable">
-            <tr  class="issueTable_tr">
+            <tr class="issueTable_tr">
-              <th style="width: 19%;">排名</th>
+              <th style="width: 19%">排名</th>
-              <th style="width: 19%;">分公司</th>
+              <th style="width: 19%">分公司</th>
-              <th style="width: 19%;">机构</th>
+              <th style="width: 19%">机构</th>
-              <th style="width: 24%;">营业部</th>
+              <th style="width: 24%">营业部</th>
-              <th style="width: 19%;">保费</th>
+              <th style="width: 19%">保费</th>
             </tr>
             <tbody>
-              <tr v-if="tableData.length!=0" v-for="item in tableData">
+              <tr v-if="tableData.length != 0" v-for="item in tableData">
-                <td>TOP{{item.bfpm}}</td>
+                <td>TOP{{ item.bfpm }}</td>
-                <td>{{item.managecom2}}</td>
+                <td>{{ item.managecom2 }}</td>
-                <td>{{item.managecom3}}</td>
+                <td>{{ item.managecom3 }}</td>
-                <td>{{item.managecom4}}</td>
+                <td>{{ item.managecom4 }}</td>
-                <td>{{item.prem}}万</td>
+                <td>{{ item.prem }}万</td>
               </tr>
             </tbody>
           </table>
           <div v-if="tableData.length == 0" class="noneDataDiv">
-            <img style="width:60%" src="@/assets/YB_APP/images/43.png">
+            <img style="width: 60%" src="@/assets/YB_APP/images/43.png" />
             <span class="noneDataDiv_span">暂无业绩</span>
           </div>
         </div>
@@ -167,296 +170,462 @@
 </template>
 
 <script>
-  import { Button } from 'vant'
+import { Button } from 'vant'
-  import { getPersonPremYB, getDeptPremYB } from '@/api/YB_APP/index'
+import { getPersonPremYB, getDeptPremYB } from '@/api/YB_APP/index'
-  import utils from '@/assets/js/utils/date-utils'
+import utils from '@/assets/js/utils/date-utils'
-  export default {
+export default {
-    name: 'hitTheHeadlines',
+  name: 'hitTheHeadlines',
-    components: {
+  components: {
-      [Button.name]: Button,
+    [Button.name]: Button
-    },
+  },
-    data() {
+  data() {
-      return {
+    return {
-        premType:'QJ',
+      premType: 'QJ',
-        dataType:1,
+      dataType: 1,
-        calendarValue:'',
+      calendarValue: '',
-        calendarShow:false,
+      calendarShow: false,
-        currentDate:new Date(),
+      currentDate: new Date(),
-        minDate: new Date(2019, 1, 1),
+      minDate: new Date(2019, 1, 1),
-        maxDate: new Date(2030, 12, 31),
+      maxDate: new Date(2030, 12, 31),
-        top3Data:[],
+      top3Data: [],
-        tableData:[],
+      tableData: [],
-      }
+      url1: require('@/assets/YB_APP/images/logo.png')
-    },
-    mounted(){
-      
-      let yearNum = new Date().getFullYear()
-      let monthNum = new Date().getMonth()+1
-      if(monthNum < 10){
-            monthNum = '0' + monthNum
     }
-      this.calendarValue = yearNum+'-'+monthNum
+  },
+  mounted() {
+    let yearNum = new Date().getFullYear()
+    let monthNum = new Date().getMonth() + 1
+    if (monthNum < 10) {
+      monthNum = '0' + monthNum
+    }
+    this.calendarValue = yearNum + '-' + monthNum
 
-      if(this.dataType == 1){
+    if (this.dataType == 1) {
+      this.getPersonPremYB()
+    } else {
+      this.getDeptPremYB()
+    }
+  },
+  methods: {
+    clickCalendar() {
+      this.calendarShow = true
+    },
+    handleCurrentDateCancel() {
+      this.calendarShow = false
+    },
+    handleCurrentDateConfirm(e) {
+      this.calendarShow = false
+      // let titleTime = utils.formatDate(e, 'yyyy-MM')
+      // this.calendarValue = utils.formatDate(e, 'MM-dd')
+      let yearNum = utils.formatDate(e, 'yyyy')
+      let monthNum = utils.formatDate(e, 'MM')
+      this.calendarValue = yearNum + '-' + monthNum
+      if (this.dataType == 1) {
         this.getPersonPremYB()
-      }else{
+      } else {
         this.getDeptPremYB()
       }
     },
-    methods:{
+    getPersonPremYB() {
-      clickCalendar(){
+      let params = {
-        this.calendarShow = true
+        currentMonth: this.calendarValue,
-      },
+        premType: this.premType
-      handleCurrentDateCancel() {
+      }
-        this.calendarShow = false
+      getPersonPremYB(params).then((res) => {
-      },
+        if (res.result == 0) {
-      handleCurrentDateConfirm(e) {
+          if (res.content && res.content.length != 0) {
-        this.calendarShow = false
+            this.top3Data = []
-        // let titleTime = utils.formatDate(e, 'yyyy-MM')
+            this.tableData = []
-        // this.calendarValue = utils.formatDate(e, 'MM-dd')
+            res.content.forEach((item, index) => {
-        let yearNum = utils.formatDate(e, 'yyyy')
+              if (index < 3) {
-        let monthNum = utils.formatDate(e, 'MM')
+                this.top3Data.push(item)
-        this.calendarValue = yearNum+'-'+monthNum
+              } else {
-        if(this.dataType == 1){
+                this.tableData.push(item)
+              }
+            })
+          }
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      })
+    },
+    getDeptPremYB() {
+      let params = {
+        currentMonth: this.calendarValue,
+        premType: this.premType
+      }
+      getDeptPremYB(params).then((res) => {
+        if (res.result == 0) {
+          if (res.content && res.content.length != 0) {
+            this.top3Data = []
+            this.tableData = []
+            res.content.forEach((item, index) => {
+              if (index < 3) {
+                this.top3Data.push(item)
+              } else {
+                this.tableData.push(item)
+              }
+            })
+          }
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      })
+    },
+    changePremType(type) {
+      console.log(this.top3Data, 'this.tableData')
+      if (this.premType != type) {
+        this.premType = type
+        if (this.dataType == 1) {
           this.getPersonPremYB()
-        }else{
+        } else {
           this.getDeptPremYB()
         }
-      },
+      }
-      getPersonPremYB(){
-        let params = {
-          currentMonth:this.calendarValue,
-          premType:this.premType,
-        }
-        getPersonPremYB(params).then(res=>{
-          if(res.result == 0){
-            if(res.content && res.content.length != 0){
-              this.top3Data = []
-              this.tableData = []
-              res.content.forEach((item,index)=>{
-                if(index < 3){
-                  this.top3Data.push(item)
-                }else{
-                  this.tableData.push(item)
-                }
-              })
-            }
-          }else{
-            this.$toast(res.resultMessage)
-          }
-        })
-      },
-      getDeptPremYB(){
-        let params = {
-          currentMonth:this.calendarValue,
-          premType:this.premType,
-        }
-        getDeptPremYB(params).then(res=>{
-          if(res.result == 0){
-            if(res.content && res.content.length != 0){
-              this.top3Data = []
-              this.tableData = []
-              res.content.forEach((item,index)=>{
-                if(index < 3){
-                  this.top3Data.push(item)
-                }else{
-                  this.tableData.push(item)
-                }
-              })
-            }
-          }else{
-            this.$toast(res.resultMessage)
-          }
-        })
-      },
-      changePremType(type){
-        if(this.premType != type){
-          this.premType = type
-          if(this.dataType == 1){
-            this.getPersonPremYB()
-          }else{
-            this.getDeptPremYB()
-          }
-        }
-      },
-      changeDataType(type){
-        if(this.dataType != type){
-          this.dataType = type
-          if(this.dataType == 1){
-            this.getPersonPremYB()
-          }else{
-            this.getDeptPremYB()
-          }
-        }
-      },
     },
+    changeDataType(type) {
+      if (this.dataType != type) {
+        this.dataType = type
+        if (this.dataType == 1) {
+          this.getPersonPremYB()
+        } else {
+          this.getDeptPremYB()
+        }
+      }
+    }
   }
+}
 </script>
 <style lang="scss" scoped>
-  .mainContainer{
+.mainContainer {
-    background-image: url("../../assets/YB_APP/images/9.png");
+  background-image: url('../../assets/YB_APP/images/9.png');
-    background-repeat: no-repeat;
+  background-repeat: no-repeat;
-    background-size: contain;
+  background-size: contain;
-    margin: 10px;width: calc(100% - 20px);background-color:#fff;
+  margin: 10px;
-  }
+  width: calc(100% - 20px);
-  .imgContainer1{
+  background-color: #fff;
-    background-image: url("../../assets/YB_APP/images/11.png");
+}
-    background-repeat: no-repeat;
+.imgContainer1 {
-    background-size: contain;
+  background-image: url('../../assets/YB_APP/images/11.png');
-    height:48vw;width: 100%;margin-top: 10.7vw;display: flex;align-items: flex-end;
+  background-repeat: no-repeat;
-  }
+  background-size: contain;
-  .imgContainer2{
+  height: 48vw;
-    background-image: url("../../assets/YB_APP/images/32.png");
+  width: 100%;
-    background-repeat: no-repeat;
+  margin-top: 10.7vw;
-    background-size: contain;
+  display: flex;
-    height:48vw;width: 100%;margin-top: 10.7vw;display: flex;align-items: flex-end;
+  align-items: flex-end;
-  }
+}
-  .personal_second{
+.imgContainer2 {
-    background-image: url("../../assets/YB_APP/images/22.png");
+  background-image: url('../../assets/YB_APP/images/32.png');
-    background-repeat: no-repeat;
+  background-repeat: no-repeat;
-    background-size: cover;
+  background-size: contain;
-    position:absolute;bottom: -5px;height: 19px;width: 60%;left: 20%;display: flex;justify-content: center;align-items: center;
+  height: 48vw;
-  }
+  width: 100%;
-  .personal_first{
+  margin-top: 10.7vw;
-    background-image: url("../../assets/YB_APP/images/23.png");
+  display: flex;
-    background-repeat: no-repeat;
+  align-items: flex-end;
-    background-size: cover;
+}
-    position:absolute;bottom: -5px;height: 19px;width: 70%;left: 15%;display: flex;justify-content: center;align-items: center;
+.personal_second {
-  }
+  background-image: url('../../assets/YB_APP/images/22.png');
-  .personal_third{
+  background-repeat: no-repeat;
-    background-image: url("../../assets/YB_APP/images/24.png");
+  background-size: cover;
-    background-repeat: no-repeat;
+  position: absolute;
-    background-size: cover;
+  bottom: -5px;
-    position:absolute;bottom: -5px;height: 19px;width: 60%;left: 20%;display: flex;justify-content: center;align-items: center;
+  height: 19px;
-  }
+  width: 60%;
-  th{
+  left: 20%;
-    height: 45px;
+  display: flex;
-    color: #fff;
+  justify-content: center;
-  }
+  align-items: center;
+}
+.personal_first {
+  background-image: url('../../assets/YB_APP/images/23.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  position: absolute;
+  bottom: -5px;
+  height: 19px;
+  width: 70%;
+  left: 15%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.personal_third {
+  background-image: url('../../assets/YB_APP/images/24.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  position: absolute;
+  bottom: -5px;
+  height: 19px;
+  width: 60%;
+  left: 20%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+th {
+  height: 45px;
+  color: #fff;
+}
 
-  table tbody tr:nth-child(odd){
+table tbody tr:nth-child(odd) {
-    background: #fff;
+  background: #fff;
-  }
+}
-  table tbody tr:nth-child(even){
+table tbody tr:nth-child(even) {
-    background: #f9faff;
+  background: #f9faff;
-    border-top:1px solid #eee;
+  border-top: 1px solid #eee;
-    border-bottom:1px solid #eee;
+  border-bottom: 1px solid #eee;
-  }
+}
-  .issueTable{
+.issueTable {
-    border: 1px solid #ebedff;
+  border: 1px solid #ebedff;
-    border-collapse:collapse;
+  border-collapse: collapse;
-    width:100%;
+  width: 100%;
-  }
+}
-  td{
+td {
-    text-align: center;
+  text-align: center;
-    padding: 5px 0px;
+  padding: 5px 0px;
-    line-height: 25px;
+  line-height: 25px;
-    color: #7183b3;
+  color: #7183b3;
-    border-collapse:collapse;
+  border-collapse: collapse;
-  }
+}
-  .myhead{
+.myhead {
-    display:flex;justify-content: space-between;padding: 25px 15px;background: #fff;
+  display: flex;
-  }
+  justify-content: space-between;
-  .QJactive{
+  padding: 25px 15px;
-    background:#3949ac;color: #fff;font-weight: bold;font-size: 12px;padding: 10px 15px;border-top-left-radius: 5px;border-bottom-left-radius: 5px;border: 1px solid #3949ac;border-right: none;letter-spacing: 1px;
+  background: #fff;
-  }
+}
-  .GMunActice{
+.QJactive {
-    background:#fff;color: #c1bfce;font-weight: bold;font-size: 12px;padding: 10px 15px;border-top-left-radius: 5px;border-bottom-left-radius: 5px;border: 1px solid #3949ac;border-right: none;letter-spacing: 1px;border-left: 1px solid #3949ac;
+  background: #3949ac;
-  }
+  color: #fff;
-  .QJunActice{
+  font-weight: bold;
-    background:#fff;color: #c1bfce;font-weight: bold;font-size: 12px;padding: 10px 15px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border: 1px solid #3949ac;border-left: none;letter-spacing: 1px;border-right: 1px solid #3949ac;
+  font-size: 12px;
-  }
+  padding: 10px 15px;
-  .GMactive{
+  border-top-left-radius: 5px;
-    background:#3949ac;color: #fff;font-weight: bold;font-size: 12px;padding: 10px 15px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border: 1px solid #3949ac;border-left: none;letter-spacing: 1px;
+  border-bottom-left-radius: 5px;
-  }
+  border: 1px solid #3949ac;
-  .headDate{
+  border-right: none;
-    background:#f2f2f2;font-weight: bold;padding: 8px 15px;border-radius: 15px;font-size: 12px;
+  letter-spacing: 1px;
-  }
+}
-  .mainContainer_content{
+.GMunActice {
-    padding-top:100px;margin-left: 10px;
+  background: #fff;
-  }
+  color: #c1bfce;
-  .dataType1Active{
+  font-weight: bold;
-    background:#fff;color: #3949ac;font-weight: bold;font-size: 12px;padding: 10px 15px;border-top-left-radius: 5px;border-bottom-left-radius: 5px;border-right: none;letter-spacing: 1px;
+  font-size: 12px;
-  }
+  padding: 10px 15px;
-  .dataType1UnActive{
+  border-top-left-radius: 5px;
-    background:#6990d0;color: #fff;font-weight: bold;font-size: 12px;padding: 10px 15px;border-top-left-radius: 5px;border-bottom-left-radius: 5px;border-right: none;letter-spacing: 1px;
+  border-bottom-left-radius: 5px;
-  }
+  border: 1px solid #3949ac;
-  .dataType2Active{
+  border-right: none;
-    background:#6990d0;color: #fff;font-weight: bold;font-size: 12px;padding: 10px 15px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-left: none;letter-spacing: 1px;
+  letter-spacing: 1px;
-  }
+  border-left: 1px solid #3949ac;
-  .dataType2UnActive{
+}
-    background:#fff;color: #3949ac;font-weight: bold;font-size: 12px;padding: 10px 15px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-left: none;letter-spacing: 1px;
+.QJunActice {
-  }
+  background: #fff;
-  .imgContainer1_main,.imgContainer2_main{
+  color: #c1bfce;
-    display:flex;justify-content: center;align-items: flex-end;height:100%;padding-bottom:20px;width:100%;
+  font-weight: bold;
-  }
+  font-size: 12px;
-  .imgContainer1_main_second,.imgContainer2_main_second{
+  padding: 10px 15px;
-    width:35%;text-align: center;
+  border-top-right-radius: 5px;
-  }
+  border-bottom-right-radius: 5px;
-  .imgContainer1_main_first,.imgContainer2_main_first{
+  border: 1px solid #3949ac;
-    width:30%;text-align: center;
+  border-left: none;
-  }
+  letter-spacing: 1px;
-  .imgContainer1_main_third,.imgContainer2_main_third{
+  border-right: 1px solid #3949ac;
-    width:35%;text-align: center;
+}
-  }
+.GMactive {
-  .imgContainer1_main_part_top{
+  background: #3949ac;
-    width:100%;position: relative;
+  color: #fff;
-  }
+  font-weight: bold;
-  .imgContainer1_main_second_bottom{
+  font-size: 12px;
-    margin:10px;font-size: 12px;margin-bottom: 5px;color:#777ca4;
+  padding: 10px 15px;
-  }
+  border-top-right-radius: 5px;
-  .imgContainer1_main_first_bottom{
+  border-bottom-right-radius: 5px;
-    margin:10px;font-size: 14px;margin-bottom: 5px;color:#9a4904;
+  border: 1px solid #3949ac;
-  }
+  border-left: none;
-  .imgContainer1_main_third_bottom{
+  letter-spacing: 1px;
-    margin:10px;font-size: 12px;margin-bottom: 5px;color:#aa7853;
+}
-  }
+.headDate {
-  .imgContainer1_main_part_bottom_p{
+  background: #f2f2f2;
-    line-height:18px;
+  font-weight: bold;
-  }
+  padding: 8px 15px;
-  .imgContainer2_main_second_content{
+  border-radius: 15px;
-    margin:10px 0px 0px;font-size: 12px;color:#777ca4;
+  font-size: 12px;
-  }
+}
-  .imgContainer2_main_first_content{
+.mainContainer_content {
-    margin:10px 0px 0px;font-size: 14px;color:#9a4904;
+  padding-top: 100px;
-  }
+  margin-left: 10px;
-  .imgContainer2_main_third_content{
+}
-    margin:10px 0px 0px;font-size: 12px;color:#aa7853;
+.dataType1Active {
-  }
+  background: #fff;
-  .imgContainer2_main_part_bottom_p{
+  color: #3949ac;
-    line-height:16px;
+  font-weight: bold;
-  }
+  font-size: 12px;
-  .imgContainer1_main_second_top_div{
+  padding: 10px 15px;
-    width:40%;position:absolute;top:calc(50% - 15px);left:calc(50% - 24px);
+  border-top-left-radius: 5px;
-  }
+  border-bottom-left-radius: 5px;
-  .personal_second_p{
+  border-right: none;
-    font-size:12px;color:#4a5688;font-weight:bold;
+  letter-spacing: 1px;
-  }
+}
-  .personal_first_p{
+.dataType1UnActive {
-    font-size:14px;color:#8e5528;font-weight:bold;
+  background: #6990d0;
-  }
+  color: #fff;
-  .personal_third_p{
+  font-weight: bold;
-    font-size:12px;color:#58320b;font-weight:bold;
+  font-size: 12px;
-  }
+  padding: 10px 15px;
-  .imgContainer1_main_first_top_div{
+  border-top-left-radius: 5px;
-    width:65%;position:absolute;top:calc(50% - 23px);left:calc(50% - 35px);
+  border-bottom-left-radius: 5px;
-  }
+  border-right: none;
-  .imgContainer1_main_third_top_div{
+  letter-spacing: 1px;
-    width:40%;position:absolute;top:calc(50% - 15px);left:calc(50% - 24px);
+}
-  }
+.dataType2Active {
-  .tableContent{
+  background: #6990d0;
-    border-radius: 5px;font-size:14px;padding-bottom:20px;
+  color: #fff;
-  }
+  font-weight: bold;
-  .tableContent_main{
+  font-size: 12px;
-    margin-top: 15px;border-radius: 10px;overflow: hidden;width: 100%;
+  padding: 10px 15px;
-  }
+  border-top-right-radius: 5px;
-  .issueTable_tr{
+  border-bottom-right-radius: 5px;
-    background:#4d6cc4;width: 100%;
+  border-left: none;
-  }
+  letter-spacing: 1px;
-  .noneDataDiv{
+}
-    display:flex;justify-content:center;align-items:center;height:300px;position:relative;width:100%;
+.dataType2UnActive {
-  }
+  background: #fff;
-  .noneDataDiv_span{
+  color: #3949ac;
-    position:absolute;bottom:80px;left:calc(50% - 33px);
+  font-weight: bold;
-  }
+  font-size: 12px;
+  padding: 10px 15px;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+  border-left: none;
+  letter-spacing: 1px;
+}
+.imgContainer1_main,
+.imgContainer2_main {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  height: 100%;
+  padding-bottom: 20px;
+  width: 100%;
+}
+.imgContainer1_main_second,
+.imgContainer2_main_second {
+  width: 35%;
+  text-align: center;
+}
+.imgContainer1_main_first,
+.imgContainer2_main_first {
+  width: 30%;
+  text-align: center;
+}
+.imgContainer1_main_third,
+.imgContainer2_main_third {
+  width: 35%;
+  text-align: center;
+}
+.imgContainer1_main_part_top {
+  width: 100%;
+  position: relative;
+}
+.imgContainer1_main_second_bottom {
+  margin: 10px;
+  font-size: 12px;
+  margin-bottom: 5px;
+  color: #777ca4;
+}
+.imgContainer1_main_first_bottom {
+  margin: 10px;
+  font-size: 14px;
+  margin-bottom: 5px;
+  color: #9a4904;
+}
+.imgContainer1_main_third_bottom {
+  margin: 10px;
+  font-size: 12px;
+  margin-bottom: 5px;
+  color: #aa7853;
+}
+.imgContainer1_main_part_bottom_p {
+  line-height: 18px;
+}
+.imgContainer2_main_second_content {
+  margin: 10px 0px 0px;
+  font-size: 12px;
+  color: #777ca4;
+}
+.imgContainer2_main_first_content {
+  margin: 10px 0px 0px;
+  font-size: 14px;
+  color: #9a4904;
+}
+.imgContainer2_main_third_content {
+  margin: 10px 0px 0px;
+  font-size: 12px;
+  color: #aa7853;
+}
+.imgContainer2_main_part_bottom_p {
+  line-height: 16px;
+}
+.imgContainer1_main_second_top_div {
+  width: 40%;
+  position: absolute;
+  top: calc(50% - 15px);
+  left: calc(50% - 24px);
+}
+.personal_second_p {
+  font-size: 12px;
+  color: #4a5688;
+  font-weight: bold;
+}
+.personal_first_p {
+  font-size: 14px;
+  color: #8e5528;
+  font-weight: bold;
+}
+.personal_third_p {
+  font-size: 12px;
+  color: #58320b;
+  font-weight: bold;
+}
+.imgContainer1_main_first_top_div {
+  width: 65%;
+  position: absolute;
+  top: calc(50% - 23px);
+  left: calc(50% - 35px);
+}
+.imgContainer1_main_third_top_div {
+  width: 40%;
+  position: absolute;
+  top: calc(50% - 15px);
+  left: calc(50% - 24px);
+}
+.tableContent {
+  border-radius: 5px;
+  font-size: 14px;
+  padding-bottom: 20px;
+}
+.tableContent_main {
+  margin-top: 15px;
+  border-radius: 10px;
+  overflow: hidden;
+  width: 100%;
+}
+.issueTable_tr {
+  background: #4d6cc4;
+  width: 100%;
+}
+.noneDataDiv {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 300px;
+  position: relative;
+  width: 100%;
+}
+.noneDataDiv_span {
+  position: absolute;
+  bottom: 80px;
+  left: calc(50% - 33px);
+}
 </style>