<template>
  <div class="login_container">
    <!-- 光明设备系统 -->

    <div class="dashboard"  >
      <el-row :gutter="20">
        <img  class="tit-img"  src="@/assets/tit-img.png" ></img>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
          <div class="card-bx">
             <div class="card-title">
                <span><i class="el-icon-d-arrow-right icon-title"></i></span>
                <span>犊牛数量</span>
             </div>
             <div class="card-cont">
                <div id="chartPie1"  style="width: 100%;height:180px;"></div>
             </div>
             
          </div>

          <div class="card-bx">
             <div class="card-title">
                <span><i class="el-icon-d-arrow-right icon-title"></i></span>
                <span>犊牛体重</span>
             </div>
             <div class="card-cont">
               
                <el-row :gutter="10" style ="margin-top: 20px;padding:0px 20px">
                  <el-col :span="24" style ="margin-bottom: 10px;">出生时犊牛平均体重（KG）</el-col>
                  <el-col :span="24">
                    <el-progress :text-inside="true" :stroke-width="20" color = "#0a88f3" :percentage="chartProgress_data.num1" :format="formatpro"></el-progress>
                  </el-col>
                </el-row>

                <el-row :gutter="10" style ="margin-top: 20px;padding:0px 20px">
                  <el-col :span="24" style ="margin-bottom: 10px;">断奶时犊牛平均体重（KG）</el-col>
                  <el-col :span="24">
                    <el-progress :text-inside="true" :stroke-width="20" color = "#fd6c46" :percentage="chartProgress_data.num2"  :format="formatpro"></el-progress>
                  </el-col>
                </el-row>
 
             </div>
             
          </div>

          
          <div class="card-bx" style=" ">
             <div class="card-title">
                <span><i class="el-icon-d-arrow-right icon-title"></i></span>
                <span>饲喂成本占比</span>
             </div>
             <div class="card-cont">
                <div class = "siwei-bx-t">
                   <div class = "siwei-item">
                      <div  class = "siwei-span siwei-color1">
                         <div class = "siwei-span-m">
                           <div class = "siwei-span-s">
                              <span class = "siwei-num">31%</span>
                              <span class = "siwei-tit">奶</span>
                           </div>
                         </div>
                      </div>
                   </div>
                   <!-- <div class = "siwei-item">
                      <div  class = "siwei-span siwei-color2">
                         <div class = "siwei-span-m">
                           <div class = "siwei-span-s">
                              <span class = "siwei-num">46%</span>
                              <span class = "siwei-tit">水</span>
                           </div>
                         </div>
                      </div>
                   </div> -->
                   <div class = "siwei-item">
                      <div  class = "siwei-span siwei-color3">
                         <div class = "siwei-span-m">
                           <div class = "siwei-span-s">
                              <span class = "siwei-num">23%</span>
                              <span class = "siwei-tit">乳粉</span>
                           </div>
                         </div>
                      </div>
                   </div>
                </div>

                <div class = "siwei-bx-b">
                  <div>
                    <span class = "siwei-squre squre1"></span>
                    <span class = "siwei-b-tt">日均用奶：</span>
                    <span class = "siwei-b-num">895L</span>
                  </div>
                  <!-- <div>
                    <span class = "siwei-squre squre2"></span>
                    <span class = "siwei-b-tt">日均用水：</span>
                    <span class = "siwei-b-num">332L</span>
                  </div> -->
                  <div>
                    <span class = "siwei-squre squre3"></span>
                    <span class = "siwei-b-tt">日均代乳粉：</span>
                    <span class = "siwei-b-num">613KG</span>
                  </div>
                </div>
                
             </div>
          </div> 

        </el-col>

        <el-col :span="12">

          <div class = "color-bx">
            <div  class="color-bx-item color-block1">
              <span class = "color-circle1 circle-c1"></span>
              <span class = "color-num">0.84</span>
              <span class = "color-tt">日均增重(KG)</span>
            </div>
            <div  class=" color-bx-item color-block2">
              <span class = "color-circle1 circle-c2"></span>
              <span class = "color-num">2357.23</span>
              <span class = "color-tt">日均饲喂成本(元)</span>
            </div>
            <div  class="color-bx-item color-block3">
              <span class = "color-circle1 circle-c3"></span>
              <span class = "color-num">93.43</span>
              <span class = "color-tt">增重达标率(%)</span>
            </div>
            <div  class="color-bx-item color-block4">
              <span class = "color-circle1 circle-c4"></span>
              <span class = "color-num">99.6</span>
              <span class = "color-tt">饲喂准确率(%)</span>
            </div>
            <div  class="color-bx-item color-block5">
              <span class = "color-circle1 circle-c5"></span>
              <span class = "color-num">93.02</span>
              <span class = "color-tt">疾病治愈率(%)</span>
            </div>
          </div> 

          <div class="card-cont2">

            <!-- <el-col :span="12">
              <div id="chartPie2"  style="width: 100%;height:360px;"></div>
            </el-col> -->

            <el-col :span="8">
                <div class = "gmu-bx-b">
                    <div>
                      <span class = "gmu-squre gmu1"></span>
                      <span class = "gmu-b-tt">公犊：828</span>
                    </div>
                    <div>
                      <span class = "gmu-squre gmu2"></span>
                      <span class = "gmu-b-tt">增重达标：863</span>
                    </div>
                    <div>
                      <span class = "gmu-squre gmu3"></span>
                      <span class = "gmu-b-tt">不达标：65</span>
                    </div>    
                    <div>
                      <span class = "gmu-squre gmu4"></span>
                      <span class = "gmu-b-tt">达标率：92.47</span>
                    </div>   
                </div>
            </el-col>

            <el-col :span="8">
              <div id="chartPie3"  style="width: 100%;height:340px;"></div>
            </el-col>

            <el-col :span="8">
                <div class = "gmu-bx-b2">
                    <div> 
                      <span class = "gmu-b-tt">母犊：1372</span>
                      <span class = "gmu-squre gmu5"></span>
                    </div>
                    <div>
                      <span class = "gmu-b-tt">增重达标：1286</span>
                      <span class = "gmu-squre gmu6"></span>
                    </div>
                    <div>
                      <span class = "gmu-b-tt">不达标：86</span>
                      <span class = "gmu-squre gmu7"></span>
                    </div>    
                    <div>
                      <span class = "gmu-b-tt">达标率：93.31</span>
                      <span class = "gmu-squre gmu8"></span>
                    </div>   
                  </div>
            </el-col>    
            
          </div>   


          <div class="card-bx">

            <div class="card-title" style = "position: relative;">
                <span  style = "position: absolute;left: 10px;"><i class="el-icon-d-arrow-right icon-title"></i></span>
                <span  style = "position: absolute;left: 40px;"> 月均增重</span>
            </div>
            <div class="card-cont">
                <div id="chartLine4"  style="width: 100%;height:360px;"></div>
            </div>
          </div>

          
        </el-col> 

        <el-col :span="6">
          <div class="card-bx">
            <div class="card-title">
                <span><i class="el-icon-d-arrow-right icon-title"></i></span>
                <span>栏舍概况</span>
            </div>
            <div class="card-cont" style="padding:10px 20px;width:88%">
                <div class="lan-item lan1">
                  <span class="lan-tit">栏舍概况</span><span class="lan-num lann1">2000</span>
                </div>
                <div class="lan-item lan2">
                  <span class="lan-tit">正常</span><span class="lan-num lann2">1753</span>
                </div>
                <div class="lan-item lan3">
                  <span class="lan-tit">发病</span><span class="lan-num lann3">28</span>
                </div>
                <div class="lan-item lan4">
                  <span class="lan-tit">治疗中</span><span class="lan-num lann4">9</span>
                </div>
                <div class="lan-item lan5">
                  <span class="lan-tit">断奶提醒</span><span class="lan-num lann5">161</span>
                </div>
                <div class="lan-item lan6">
                  <span class="lan-tit">空栏</span><span class="lan-num lann6">247</span>
                </div>

            </div>
          </div>

          <div class="card-bx">
            <div class="card-title">
                <span><i class="el-icon-d-arrow-right icon-title"></i></span>
                <span>近半年建档断奶牛只</span>
            </div>
            <div class="card-cont">
                <div id="chartLine5"  style="width: 100%;height:320px;"></div>
            </div>
          </div>
        </el-col>
      </el-row>
     
    </div>
      
  </div>
</template> 

<script>
import {  ajaxDataGet, ajaxDataPost, ajaxDataPut, ajaxDataDelete, checkButtons} from '@/api/common'
import { parseTime, json2excel } from '@/utils/index.js'
import * as echarts from 'echarts';

//  require('echarts/theme/macarons')
export default {
  data() {
    return {
       //图表请求参数
       date: parseTime(new Date(), '{y}-{m}-{d}'),
      
      

      //图表请求参数
      chart1: {
        getdataListParm: {
          name: 'getChart1ByHomepage',
          page: 1,
          offset: 1,
          pagecount: '',
          returntype: 'Map',
          parammaps: {
            inputDatetime: '',
            beginDate: '',
            endDate: '',
        
          }
        }
      },
      //图表实例
      chartPie1: null,
      //图表数据
      chartPie1_data: {
        monthdate:['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
        arr1:[22, 22, 22, 2, 22, 22, 55],
        arr2:[33, 11, 44, 55, 90, 230, 55],
       
      },
      chartProgress_data: { num1: 40.18, num2: 77.23 },

      chart2: {
        getdataListParm: {
          name: 'getChart1ByHomepage',
          page: 1,
          offset: 1,
          pagecount: '',
          returntype: 'Map',
          parammaps: {
            inputDatetime: '',
            beginDate: '',
            endDate: '',
        
          }
        }
      },
      //图表实例
      chartPie2: null,
      //图表数据
      chartPie2_data: {num1: 11, num2: 11, num3: 11, num4: 11, num5: 11, num6: 11, num7: 11, num8: 11},

      chart3: {
        getdataListParm: {
          name: 'getChart1ByHomepage',
          page: 1,
          offset: 1,
          pagecount: '',
          returntype: 'Map',
          parammaps: {
            inputDatetime: '',
            beginDate: '',
            endDate: '',
        
          }
        }
      },
      //图表实例
      chartPie3: null,
      //图表数据
      chartPie3_data: {num1: 828, num2: 1372, num3: 863, num4: 1286, num5: 65, num6: 86, num7: 11, num8: 11},

      chart4: {
        getdataListParm: {
          name: 'cowSumOfFarm',
          page: 1,offset: 1,pagecount: '',returntype: 'Map',
          parammaps: {  cityName: 'ALL'  }
        }
      },
      //图表实例
      chartLine4: null,
      //图表数据
      chartLine4_data: {
        month:  ['2022-1','2022-2','2022-3','2022-4','2022-5','2022-6','2022-7','2022-8','2022-9','2022-10','2022-11','2022-12'],
        num1: [42, 61, 66, 67, 61, 58, 59, 68, 79, 80, 79.5, 78],
        num2: [24, 34, 39, 38, 32, 30, 32, 38, 42, 44, 43, 41],
      },

      chart5: {
        getdataListParm: {
          name: 'cowSumOfFarm',
          page: 1,offset: 1,pagecount: '',returntype: 'Map',
          parammaps: {  cityName: 'ALL'  }
        }
      },
      //图表实例
      chartLine5: null,
      //图表数据
      chartLine5_data: {
        month:  ['2022年11月','2022年10月','2022年9月','2022年8月','2022年7月','2022年6月'],
        num1: [12, 65, 12, 50, 71, 20 ],
        num2: [23, 41, 62, 53, 36, 38]
      }
    }
  },

  created(){
  
  },
  mounted() {
    //加载 - 图表假数据，如果是图表需要放mounted里测试假数据
       this.roadchartPie1(this.chartPie1_data)

       this.roadchartPie3(this.chartPie3_data)

      this.roadchartLine4(this.chartLine4_data)

      this.roadchartLine5(this.chartLine5_data)

  },
  methods:{
     

    formatpro(percentage){
      return `${ percentage }`;
       
    },
    //图表数据加载
    roadchartPie1(chartPie1_data) {

      
      if (this.chartPie1 != null) {
        this.chartPie1.dispose()
      }

      console.log(echarts)
      this.chartPie1 = echarts.init(document.getElementById('chartPie1'))
      var option = {
        title: [
          { subtext: '犊牛总数', left: '16.67%',  top: '75%', textAlign: 'center' },
          { subtext: '公犊牛', left: '50%', top: '75%',  textAlign: 'center' },
          { subtext: '母犊牛', left: '83.33%', top: '75%', textAlign: 'center' }
        ],
        series: [
          {
            type: 'pie',radius: '25%',radius: ['50%', '70%'],
            data: [
              { name: '犊牛总数', value: 2300},
            ],
            itemStyle: { color: '#fac229'},
            label: {formatter: '{c}',position: 'center', fontSize: 20, textStyle: {   color: '#fac229'  } },
            left: 0,right: '66.6667%',top: 0, bottom: 0
          },
          {
            type: 'pie', radius: '25%', radius: ['50%', '70%'],
            data: [
              //这里formatter数字太小显示不出来，不能用{c},必须传实际数字
              { name: '公犊牛', value: 372,  itemStyle: { color: '#6af7a4'},label: {formatter: '372',position: 'center', fontSize: 20  , textStyle: {   color: '#6af7a4'  }}},
              { name: '', value: 400, itemStyle: { color: '#104658'},label: {formatter: '372',position: 'center', fontSize: 20 , textStyle: {   color: '#6af7a4'  }}},
            ],
            left: '33.3333%',right: '33.3333%', top: 0,bottom: 0
          },
          {
            type: 'pie',radius: '25%',radius: ['50%', '70%'],
            data: [
              { name: '母犊牛', value: 1372,itemStyle: { color: '#6cd6fc'},label: {formatter: '{c}',position: 'center', fontSize: 20 , textStyle: {   color: '#6cd6fc'  } }},
              { name: '', value: 400,itemStyle: { color: '#093580'},label: {formatter: ' ',position: 'center', fontSize: 20, textStyle: {   color: '#6cd6fc'  } } },
            ],    
            left: '66.6667%', right: 0,  top: 0, bottom: 0
          }
        ]
      }
   
      
      this.chartPie1.setOption(option)
      window.onresize = function () {
        this.chartPie1.resize()
      }
    },

    //图表数据加载
    roadchartPie2(chartPie2_data) {
      if (this.chartPie2 != null) {
        this.chartPie2.dispose()
      }
      this.chartPie2 = echarts.init(document.getElementById('chartPie2'))
      var option = {
        title: { text: '', left: 'center'},
        tooltip: {  trigger: 'item' },
        legend: { 
           orient: 'vertical',  left: 'left',top: '40',textStyle:{color:'#fff'},
           icon:'circle',
           formatter: function (name) {  //图例后添加数值
          
            var  data = option.series[0].data;
         
            let tarValue;
            for (let i = 0; i < data.length; i++) {
              if (data[i].name === name) {
                tarValue = data[i].value;
              }
            }

        
            return  name+": "+ tarValue;
          }
           
        },
        color:['#4b07fa', '#0f96fc'],
 
        series: [
           
          {
            name: '',
            type: 'pie',
            radius: ['25%', '65%'],
           center: ['60%', '40%'],
            labelLine: {
              length: 30
            },
            label: {
              position:'inside',fontSize: 14,
              formatter: '   {d}%   ',
              color:'#fff'
            },
            data: [
              { value: chartPie2_data.num1, name: '公犊' },
              { value: chartPie2_data.num2, name: '母犊' }, 
            ]
          }
        ]
      }
   
      
      this.chartPie2.setOption(option)
      window.onresize = function () {
        this.chartPie2.resize()
      }
    },

    //图表数据加载
    roadchartPie3(chartPie3_data) {
      if (this.chartPie3 != null) {
        this.chartPie3.dispose()
      }
      this.chartPie3 = echarts.init(document.getElementById('chartPie3'))
      var option = {
        title: { text: '', left: 'center'},
        tooltip: {  trigger: 'item' },
        // legend: { 
        //    orient: 'vertical',  left: 'left',top: '40',textStyle:{color:'#fff'},
        //    icon:'circle',
        //    formatter: function (name) {  //图例后添加数值
          
        //     var  data = option.series[0].data;
         
        //     let tarValue;
        //     for (let i = 0; i < data.length; i++) {
        //       if (data[i].name === name) {
        //         tarValue = data[i].value;
        //       }
        //     }

        
        //     return  name+": "+ tarValue;
        //   }
           
        // },
        color:[ '#074898', '#7e5428' ,  '#027ff2', '#59d571', '#f19610', '#8805e2'],
 
        series: [


        {
            name: '',
            type: 'pie',
            selectedMode: 'single',
            radius: ['50%', '70%'],
             center: ['50%', '40%'],
            label: {
              show:false,
              // position:'inside',fontSize: 14,
              // formatter: '    {d}%   ',
              // color:'#fff'
            },
            data: [
              { value: chartPie3_data.num1, name: '公犊' },
              { value: chartPie3_data.num2, name: '母犊' } 
            ]
          },
          {
            name: '',
            type: 'pie',
            radius: ['70%', '90%'],
           center: ['50%', '40%'],
            labelLine: {
              length: 30
            },
            label: {
              show:false,
              // position:'inside',fontSize: 14,
              // formatter: '   {d}%   ',
              // color:'#fff'
            },
            data: [
              { value: chartPie3_data.num3, name: '公犊增重达标' },
              { value: chartPie3_data.num4, name: '母犊增重达标' },
              { value: chartPie3_data.num5, name: '公犊不达标' },
              { value: chartPie3_data.num6, name: '母犊不达标' }
            ]
          }
           
         
        ]
      }
   
      
      this.chartPie3.setOption(option)
      window.onresize = function () {
        this.chartPie3.resize()
      }
    },


    //图表数据加载
    roadchartLine4(chartLine4_data) {
      if (this.chartLine4 != null) {
        this.chartLine4.dispose()
      }
      this.chartLine4 = echarts.init(document.getElementById('chartLine4'))
      var option = {
        title: { text: '', left: 'center'},
        tooltip: {  trigger: 'item' },
        grid: {  show:true,left: "10%", top:'23%', right:'10%', },
        color:['#f19610', '#1bff7b' ],
        legend: {   top: '40',textStyle:{color:'#fff'},   icon:'square'},
        xAxis: [
          { 
            type: 'category', 
            axisTick: { show: true  },  
            axisLabel: {  color:'#fff',   interval: 0  ,rotate:0},
            axisLine: { LineStyle: {color:'#fff'}  },
            data: chartLine4_data.month
            
          } 
        ],
        yAxis: [
          { 
            type: 'value',  
            axisTick: { show: false  },  
            axisLabel: {  color:'#fff'  },
            axisLine: { LineStyle: {color:'#fff'}  },
            axisLabel: {  color:'#fff'  },
            
          }
        ],
        series: [
          {
            name: '公犊牛',type: 'line',
            label: {show: false,position: 'inside' },
            data: chartLine4_data.num1
          },
          {
            name: '母犊牛',type: 'line',
            label: {show: false,position: 'inside' },
            data: chartLine4_data.num2
          },
        ]
  
      }
      
      this.chartLine4.setOption(option)
      window.onresize = function () {
        this.chartLine4.resize()
      }
    },


    //图表数据加载
    roadchartLine5(chartLine5_data) {
      if (this.chartLine5 != null) {
        this.chartLine5.dispose()
      }
      this.chartLine5 = echarts.init(document.getElementById('chartLine5'))
      var option = {
        title: { text: '', left: 'center'},
        tooltip: {  trigger: 'axis' },
        grid: {  show:true,left: "30%", top:'23%', right:'0%', },
        color:['#0070da', '#0ad1df' ],
        legend: {   top: '40',textStyle:{color:'#fff'},   },
        xAxis: [ 
          { 
            type: 'value', 
         
            
          } 
        ],
        yAxis: [
          { 
            type: 'category',  
            axisTick: { show: false  },  
            axisLabel: {  color:'#fff'  },
          
        
            data: chartLine5_data.month
            
          }
        ],
        series: [
          {
            name: '出生建档', type: 'bar',  stack: 'total',
            label: {show: true,position: 'inside' },
            data: chartLine5_data.num1
          },
          {
            name: '断奶出栏',type: 'bar',  stack: 'total',
            label: {show: true,position: 'inside' },
            data: chartLine5_data.num2
          },
        ]
  
      }
      
      this.chartLine5.setOption(option)
      window.onresize = function () {
        this.chartLine5.resize()
      }
    },
    
   
  }
}
</script>
<!-- 加了scoped，则是仅在此组件里生效 -->
<style scoped> 


.dashboard{padding: 0px 20px;background-color:#030542;color:#fff}


.tit-img{width:1400px}
.card-bx{width:100%;margin-bottom: 20px;}

.card-title{width:100%;height:30px;text-align:left;padding-top:10px;background-color: #042a88}
.icon-title{color:#00a7ff;font-size:18px;font-weight: bold ;padding-right: 6px;}
.card-cont{width:100%;;background-color: #0090ff1c;min-height:200px;height:auto;}
.card-cont2{width:100%;;background-color: #0090ff1c;min-height:340px;height:auto;border: 1px solid #1a97d7;box-shadow: 0px 0 18px rgb(118 167 255);margin-bottom:20px;padding-top:40px}
 
.color-bx{display:flex;justify-content:space-between;margin-bottom:20px}
.color-bx-item{display:inline-block;height:80px;min-width:110px;width:16%;border-radius:10px; text-align: center;position: relative;}
.color-block1{background:repeating-linear-gradient(to right,#0285f3,#00c4fe);}
.color-block2{background:repeating-linear-gradient(to right,#8805e3,#6152fe);}
.color-block3{background:repeating-linear-gradient(to right,#fe6a46,#fab32f);}
.color-block4{background:repeating-linear-gradient(to right,#0eaf3e,#41d585);}
.color-block5{background:repeating-linear-gradient(to right,#0d38d0,#3395f9);}
.color-num{display:block;font-size:26px;font-weight:bold;padding-top:10px; }
.color-tt{display:block; }
.color-circle1{display:inline-block;width:20px;height:20px;position:absolute;top:0px;left:0px;border-radius:50%}
.circle-c1{background-color:#29a3f7;}
.circle-c2{background-color:#8d32ec;}
.circle-c3{background-color:#fd805b;}
.circle-c4{background-color:#28be57;}
.circle-c5{background-color:#2653d8;}

.siwei-bx-t{display:flex;justify-content:space-between;padding-top:40px}
.siwei-item{display:inline-block;width:33%;text-align: center;margin:0 auto;}
.siwei-span{width:100px;height:100px;border-radius:50%;position: relative;}
.siwei-span-m{width:85px;height:85px; border-radius:50%;position: absolute;top:8%;right:7%;}
.siwei-span-s{width:75px;height:75px; border-radius:50%;position: absolute;top:7%;right:6%;}
.siwei-num{display: block;font-size:20px;font-weight:bold;color:#fff;margin-top:12px}
.siwei-tit{display: block;font-size:14px;font-weight:bold;color:#fff}
.siwei-color1{ background-color:#027ff24f;}
.siwei-color1 div{ background-color:#027ff294;}
.siwei-color1 div div{ background-color:#027ff2d9;}
.siwei-color2{ background-color:#6054ff4f;}
.siwei-color2 div{ background-color:#6054ff94;}
.siwei-color2 div div{ background-color:#6054ffd9;}
.siwei-color3{ background-color:#34d1604f;}
.siwei-color3 div{ background-color:#34d16094;}
.siwei-color3 div div{ background-color:#34d160d9;}
 
.siwei-bx-b{margin-top:20px;color:#fff}
.siwei-bx-b div{padding-bottom:12px}
.siwei-b-tt{font-size:16px;margin-right:10px;}
.siwei-b-num{font-size:20px; }
.siwei-squre{display: inline-block;width:14px;height:14px;margin-right:20px; }
.squre1{background-color:#027ff2;}
.squre2{background-color:#6054ff;}
.squre3{background-color:#34d160;}


.lan-item{min-width: 100px;width:88%;height:48px;background-color: #054077;line-height:2;padding-left: 50px;margin-bottom:20px;vertical-align:baseline;border-right : 5px solid #0ce0ef;border-left : 5px solid #0ce0ef}
.lan-tit{display: inline-block;width:52%;color:#fff;font-size:16px}
.lan-num{display: inline-block;width:45%;color:#fff;font-size:24px}
.lan1{background-color: #054077;border-right : 5px solid #0ce0ef;border-left : 5px solid #0ce0ef}
.lan2{background-color: #17217a;border-right : 5px solid #6054ff;border-left : 5px solid #6054ff}
.lan3{background-color: #373046;border-right : 5px solid #f19610;border-left : 5px solid #f19610}
.lan4{background-color: #210f75;border-right : 5px solid #8a00e1;border-left : 5px solid #8a00e1}
.lan5{background-color: #032b78;border-right : 5px solid #027ff2;border-left : 5px solid #027ff2}
.lan6{background-color: #0e3d57;border-right : 5px solid #34d160;border-left : 5px solid #34d160}
.lann1{color:#0ce0ef}
.lann2{color:#6054ff}
.lann3{color:#f19610}
.lann4{color:#8a00e1}
.lann5{color:#027ff2}
.lann6{color:#34d160}



.gmu-bx-b{margin-top:38px;color:#fff;padding-left:20px}
.gmu-bx-b div{padding-bottom:22px;text-align:left}
.gmu-b-tt{font-size:20px;margin-right:10px;margin-left:20px; }
.gmu-squre{display: inline-block;width:18px;height:18px;}
.gmu1{background-color:#074898;}
.gmu2{background-color:#027ff2;}
.gmu3{background-color:#f19610;}
.gmu4{background-color:#6054ff;}
.gmu5{background-color:#7e5428;}
.gmu6{background-color:#59d571;}
.gmu7{background-color:#8805e2;}
.gmu8{background-color:#6054ff;}

.gmu-bx-b2{margin-top:38px;color:#fff;padding-right:20px}
.gmu-bx-b2 div{padding-bottom:22px;text-align:right}

 
</style>
