liumin
/
zkPCproject
0
0
Derivar 0
Código Questões 0 Pedidos de integração 0 Lançamentos 0 Wiki Trabalho
Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
342 Cometimentos
4 Ramos
45 MiB
 
 
 
Árvore: 81399303ac
Ramos Etiquetas
${ item.name }
Criar ramo ${ searchTerm }
de '81399303ac'
${ noResults }
zkPCproject/src/views/Statistics/BuildingContrast.vue

732 linhas
19 KiB
Em bruto Responsabilidade Histórico 

  1. <template>

  2.   <div class="box-center">

  3.     <!-- 头 -->

  4.     <div class="app-titel">

  5.         <div style="text-indent: 30px;">接待时间:</div>

  6.       <div class="toptimeqhuan">

  7.         <div :class="{ tophove: TimetoAhoose == 4 }" @click="tabtimetap(4)">

  8.           近7天

  9.         </div>

  10.         <div :class="{ tophove: TimetoAhoose == 5 }" @click="tabtimetap(5)">

  11.           近15天

  12.         </div>

  13.         <div :class="{ tophove: TimetoAhoose == 6 }" @click="tabtimetap(6)">

  14.           近30天

  15.         </div>

  16.       </div>

  17.       <div style="margin-left: 26px">

  18.         <el-date-picker

  19.           v-model="customtime"

  20.            @change="confirmtime()"

  21.           type="daterange"

  22.           :clearable='false'

  23.           range-separator="-"

  24.           :default-time="['00:00:00', '23:59:59']"

  25.             value-format="yyyy-MM-dd"

  26.           start-placeholder="开始日期"

  27.           end-placeholder="结束日期"

  28.         >

  29.         </el-date-picker>

  30.       </div>

  31.       <el-select

  32.           v-model="houseTypes"

  33.           @change="sysChange"

  34.           style="width: 100px; margin-left: 10px"

  35.           placeholder="请选择"

  36.         >

  37.           <el-option

  38.             v-for="item in options2"

  39.             :key="item.value"

  40.             :label="item.label"

  41.             :value="item.value"

  42.           >

  43.           </el-option>

  44.       </el-select>

  45.           <div style="margin-left: auto;margin-right:10px;" v-if="sta_bui_downLoad">

  46.           <el-button @click="downLoad">导出</el-button>

  47.         </div>

  48.     </div>

  49. 

  50.        <!-- 表格 -->

  51.     <div class="cen-tab">

  52.         <el-table

  53.           :data="tableData"

  54.           stripe

  55.           style="width: 100%">

  56.           <el-table-column

  57.             prop="batchId"

  58.             label="序号"

  59.             align="center"

  60.           >

  61.         <template slot-scope="scope">

  62.           <span v-if="scope.$index+1==tableData.length"> 合计/平均</span>

  63.           <span v-else> {{scope.$index+1}}</span>

  64.         </template>

  65.           </el-table-column>

  66.           <el-table-column

  67.             prop="houseName"

  68.             label="楼盘"

  69.              align="center"

  70.            >

  71.           </el-table-column>

  72.           <el-table-column

  73.             prop="accountNum"

  74.             label="顾问数"

  75.              align="center">

  76.           </el-table-column>

  77.           <el-table-column

  78.             prop="receptionCount"

  79.             label="接待量"

  80.              align="center">

  81.           </el-table-column>

  82.           <el-table-column

  83.             prop="activeCustomer"

  84.             label="有效接待"

  85.             align="center"

  86.           >

  87.           </el-table-column>

  88.           <el-table-column

  89.             prop="prohibitedCustomer"

  90.             label="违禁接待次数"

  91.              align="center"

  92.            >

  93.           </el-table-column>

  94.           <el-table-column

  95.             prop="sumDuration"

  96.             label="接待时长(分钟)"

  97.             align="center"

  98.           >

  99.           <template slot-scope="scope">

  100.             {{Math.floor(scope.row.sumDuration/60) || 0}}

  101.           </template>

  102.           </el-table-column>

  103.            <el-table-column

  104.             prop="fraction"

  105.             label="平均执行率"

  106.             align="center"

  107.           >

  108.            <template slot-scope="{row}">

  109.             {{row.fraction}}%

  110.           </template>

  111.           </el-table-column>

  112.            <el-table-column

  113.             prop="prohibitedZb"

  114.             label="违禁接待占比"

  115.             align="center"

  116.           >

  117.            <template slot-scope="{row}">

  118.             {{row.prohibitedZb}}%

  119.           </template>

  120.           </el-table-column>

  121.         </el-table>

  122.         <div style="display: flex;justify-content:flex-end;margin-top: 10px;">

  123.             <el-pagination

  124.               @size-change="handleSizeChange"

  125.               @current-change="handleCurrentChange"

  126.               :current-page="page"

  127.               :page-sizes="[10, 30, 50]"

  128.               :page-size="pagesize"

  129.               layout="total, sizes, prev, pager, next, jumper"

  130.               :total="total">

  131.             </el-pagination>

  132.         </div>

  133.     </div>

  134. 

  135.      <div class="app-box-san">

  136.         <div class="zuo">

  137.           <div class="title">

  138.             <div class="text1">接待量（TOP10）</div>

  139.           </div>

  140.          	<div class="hejisan">

  141.             <div class="sanbox1" style="width: 35%;">

  142.               <div class="text1-1">接待合计</div>

  143.               <div class="text1-2">{{objList1.sum}}次</div>

  144.             </div>

  145.             <div  class="sanbox1" style="width: 40%;">

  146.               <div class="text1-1">楼盘总数</div>

  147.               <div class="text1-2">{{objList1.num}}个</div>

  148.             </div>

  149.             <div  class="sanbox1" style="width: 25%;">

  150.               <div class="text1-1">平均接待</div>

  151.               <div class="text1-2">{{objList1.avg}}次</div>

  152.             </div>

  153.          </div>

  154.          <div style="overflow-y:auto;height: 250px;width: 94%;margin: 0 auto;">

  155.               <div  class="jinbox" v-for="(item,i) in objList1.list" :key='i'>

  156.                   <div class="jinboxtit">{{item.name}}</div>

  157.                   <div class="jinbox-box">

  158.                       <div class="boxbaifenbi" :style="'width:'+(item.zxl1)+'%;'"></div>

  159.                   </div>

  160.                   <div class="jinboxbott">{{item.zxl}}</div>

  161.               </div>

  162.          </div>

  163.         </div>

  164.         <div class="you">

  165.           <div class="title">

  166.             <div class="text1">平均执行率（TOP10）</div>

  167.           </div>

  168.           	<div class="hejisan">

  169.             <div class="sanbox1" style="width: 50%;">

  170.               <div class="text1-1">楼盘总数</div>

  171.               <div class="text1-2">{{objList2.num}}个</div>

  172.             </div>

  173.             <div  class="sanbox1" style="width: 50%;">

  174.               <div class="text1-1">平均执行率</div>

  175.               <div class="text1-2">{{objList2.avg}}%</div>

  176.             </div>

  177.          </div>

  178.           <div style="overflow-y:auto;height: 250px;width: 94%;margin: 0 auto;">

  179.               <div  class="jinbox" v-for="(item,i) in objList2.list" :key='i'>

  180.                   <div class="jinboxtit">{{item.name}}</div>

  181.                   <div class="jinbox-box">

  182.                       <div class="boxbaifenbi" :style="'width:'+(item.zxl)+'%;'"></div>

  183.                   </div>

  184.                   <div class="jinboxbott">{{item.zxl}}%</div>

  185.               </div>

  186.          </div>

  187.         </div>

  188.     </div>

  189. 

  190.      <div class="app-box-san">

  191.         <div class="zuo">

  192.           <div class="title">

  193.             <div class="text1">违禁接待次数（TOP10）</div>

  194.           </div>

  195.          	<div class="hejisan">

  196.             <div class="sanbox1" style="width: 35%;">

  197.               <div class="text1-1">合计</div>

  198.               <div class="text1-2">{{objList3.sum}}次</div>

  199.             </div>

  200.             <div  class="sanbox1" style="width: 40%;">

  201.               <div class="text1-1">顾问</div>

  202.               <div class="text1-2">{{objList3.num}}个</div>

  203.             </div>

  204.             <div  class="sanbox1" style="width: 25%;">

  205.               <div class="text1-1">人均接待量</div>

  206.               <div class="text1-2">{{objList3.avg}}次</div>

  207.             </div>

  208.          </div>

  209.          <div style="overflow-y:auto;height: 250px;width: 94%;margin: 0 auto;">

  210.               <div  class="jinbox" v-for="(item,i) in objList3.list" :key='i'>

  211.                   <div class="jinboxtit">{{item.name}}</div>

  212.                   <div class="jinbox-box">

  213.                       <div class="boxbaifenbi" :style="'width:'+(item.zxl1)+'%;'"></div>

  214.                   </div>

  215.                   <div class="jinboxbott">{{item.zxl}}</div>

  216.               </div>

  217.          </div>

  218.         </div>

  219.         <div class="you">

  220.           <div class="title">

  221.             <div class="text1">接待时长（分钟）（TOP10）</div>

  222.           </div>

  223.           	<div class="hejisan">

  224.             <div class="sanbox1" style="width: 35%;">

  225.               <div class="text1-1">时长合计</div>

  226.               <div class="text1-2">{{objList4.sum}}分钟</div>

  227.             </div>

  228.             <div  class="sanbox1" style="width: 40%;">

  229.               <div class="text1-1">楼盘总数</div>

  230.               <div class="text1-2">{{objList4.num}}个</div>

  231.             </div>

  232.              <div  class="sanbox1" style="width: 25%;">

  233.               <div class="text1-1">平均时长</div>

  234.               <div class="text1-2">{{objList4.avg}}分钟</div>

  235.             </div>

  236.          </div>

  237.           <div style="overflow-y:auto;height: 250px;width: 94%;margin: 0 auto;">

  238.               <div  class="jinbox" v-for="(item,i) in objList4.list" :key='i'>

  239.                   <div class="jinboxtit">{{item.name}}</div>

  240.                   <div class="jinbox-box">

  241.                       <div class="boxbaifenbi" :style="'width:'+(item.zxl1)+'%;'"></div>

  242.                   </div>

  243.                   <div class="jinboxbott">{{item.zxl}}</div>

  244.               </div>

  245.          </div>

  246.         </div>

  247.     </div>

  248. 

  249.   </div>

  250. </template>

  251. 

  252. <script>

  253. import { mapGetters } from "vuex";

  254. import { exportMethodPost} from "@/util/util";

  255. export default {

  256.   data() {

  257.     return {

  258.       role:'',

  259.       houseId: "",

  260.       orgCode:'',

  261.       page:1,

  262.       pagesize:10,

  263.       buildingoptions:[],

  264.       TimetoAhoose: 4,

  265.       customtime: [],

  266.       currentPage4:1,

  267.       total:0,

  268.       ceratelist:[

  269.             {name:'还是得',avgZxl:80},

  270.              {name:'大大奥德赛',avgZxl:90},

  271.               {name:'沙发和',avgZxl:20},

  272.                {name:'还是得',avgZxl:10},

  273.                 {name:'还客户家客户是得',avgZxl:80},

  274.       ],

  275.       tableData:[],

  276.       objList1:{

  277.         avg:'',

  278.         list:[],

  279.         num:'',

  280.         sum:''

  281.       },

  282.        objList2:{

  283.         avg:'',

  284.         list:[],

  285.         num:'',

  286.       },

  287.        objList3:{

  288.         avg:'',

  289.         list:[],

  290.         num:'',

  291.         sum:''

  292.       },

  293.        objList4:{

  294.         avg:'',

  295.         list:[],

  296.         num:'',

  297.         sum:''

  298.       },

  299.       houseTypes: "0,1",

  300.       options2: [

  301.         {

  302.           label: "正式数据",

  303.           value: "0,1",

  304.         },

  305.         {

  306.           label: "测试数据",

  307.           value: "2,3",

  308.         },

  309.       ],

  310. 

  311.     };

  312.   },

  313.   computed: {

  314.     ...mapGetters(["permissions"]),

  315.   },

  316.   created() {

  317.     this.sta_bui_downLoad = this.permissions["sta_bui_downLoad"];

  318.   },

  319.   mounted() {

  320.        this.role=localStorage.getItem("orgType");

  321.        this.houseId = localStorage.getItem("houseId");

  322.        this.orgCode= localStorage.getItem("orgCode");

  323.        this.gethouseData()

  324.   },

  325.   methods: {

  326.     downLoad(){

  327.       let pamaet={

  328.         orgType:this.role,

  329.         dateType:0,

  330.         statDateStart:this.statDateStart,

  331.         statDateEnd:this.statDateEnd,

  332.         houseTypes: this.houseTypes,

  333.       }

  334.       if(this.role==3){

  335.         pamaet.houseId=this.houseId

  336.       }else{

  337.         pamaet.orgCode=this.orgCode

  338.       }

  339.       if(this.TimetoAhoose==7){

  340.         pamaet.dateType=null

  341.       }else{

  342.         pamaet.dateType=this.TimetoAhoose

  343.       }

  344.      exportMethodPost('autoSR/cusStageStatistics/houseTableExport','楼盘对比',pamaet)

  345.     },

  346.     sysChange() {

  347.       this.gethouseData()

  348.     },

  349.     gethouseData(){

  350.         this.houseTable()

  351.         this.houseData1()

  352.         this.houseData2()

  353.         this.houseData3()

  354.         this.houseData4()

  355.     },

  356.     houseData1(){

  357.       let pamaet={

  358.         orgType:this.role,

  359.         dateType:0,

  360.         statDateStart:this.statDateStart,

  361.         statDateEnd:this.statDateEnd,

  362.         type:1,

  363.         houseTypes: this.houseTypes,

  364.       }

  365.       if(this.role==3){

  366.         pamaet.houseId=this.houseId

  367.       }else{

  368.         pamaet.orgCode=this.orgCode

  369.       }

  370.       if(this.TimetoAhoose==7){

  371.         pamaet.dateType=null

  372.       }else{

  373.         pamaet.dateType=this.TimetoAhoose

  374.       }

  375.       this.$api.http.houseData(pamaet).then((res) => {

  376.           let arr=[]

  377.           res.data.list.map(item=>{

  378.             let obj={}

  379.             obj.name=item.houseName

  380.             obj.zxl=item.activeCustomer

  381.             arr.push(obj)

  382.           })

  383.           arr=this.dealData(arr)

  384.           this.objList1={

  385.             avg: res.data.avg || 0,

  386.             num: res.data.num || 0,

  387.             sum:res.data.sum || 0,

  388.             list:arr || []

  389.           }

  390.       })

  391.     },

  392.     houseData2(){

  393.       let pamaet={

  394.         orgType:this.role,

  395.         dateType:0,

  396.         statDateStart:this.statDateStart,

  397.         statDateEnd:this.statDateEnd,

  398.         type:2,

  399.         houseTypes: this.houseTypes,

  400.       }

  401.       if(this.role==3){

  402.         pamaet.houseId=this.houseId

  403.       }else{

  404.         pamaet.orgCode=this.orgCode

  405.       }

  406.       if(this.TimetoAhoose==7){

  407.         pamaet.dateType=null

  408.       }else{

  409.         pamaet.dateType=this.TimetoAhoose

  410.       }

  411.       this.$api.http.houseData(pamaet).then((res) => {

  412.           let arr=[]

  413.           res.data.list.map(item=>{

  414.             let obj={}

  415.             obj.name=item.houseName;

  416.             obj.zxl=item.fraction;

  417.             arr.push(obj)

  418.           })

  419.           this.objList2={

  420.             avg: res.data.avg || 0,

  421.             num: res.data.num || 0,

  422.             list:arr || []

  423.           }

  424.       })

  425.     },

  426.     houseData3(){

  427.       let pamaet={

  428.         orgType:this.role,

  429.         dateType:0,

  430.         statDateStart:this.statDateStart,

  431.         statDateEnd:this.statDateEnd,

  432.         type:3,

  433.         houseTypes: this.houseTypes,

  434.       }

  435.       if(this.role==3){

  436.         pamaet.houseId=this.houseId

  437.       }else{

  438.         pamaet.orgCode=this.orgCode

  439.       }

  440.       if(this.TimetoAhoose==7){

  441.         pamaet.dateType=null

  442.       }else{

  443.         pamaet.dateType=this.TimetoAhoose

  444.       }

  445.       this.$api.http.houseData(pamaet).then((res) => {

  446.         console.log(res)

  447.           let arr=[]

  448.           res.data.list.map(item=>{

  449.             let obj={}

  450.             obj.name=item.houseName

  451.             obj.zxl=item.prohibitedCustomer

  452.             arr.push(obj)

  453.           })

  454.           console.log(arr)

  455.           arr=this.dealData(arr)

  456.           this.objList3={

  457.             avg: res.data.avg || 0,

  458.             num: res.data.num || 0,

  459.             sum:res.data.sum || 0,

  460.             list:arr || []

  461.           }

  462.           console.log(this.objList3)

  463.       })

  464.     },

  465.     houseData4(){

  466.       let pamaet={

  467.         orgType:this.role,

  468.         dateType:0,

  469.         statDateStart:this.statDateStart,

  470.         statDateEnd:this.statDateEnd,

  471.         type:4,

  472.         houseTypes: this.houseTypes,

  473.       }

  474.       if(this.role==3){

  475.         pamaet.houseId=this.houseId

  476.       }else{

  477.         pamaet.orgCode=this.orgCode

  478.       }

  479.       if(this.TimetoAhoose==7){

  480.         pamaet.dateType=null

  481.       }else{

  482.         pamaet.dateType=this.TimetoAhoose

  483.       }

  484.       this.$api.http.houseData(pamaet).then((res) => {

  485.           let arr=[]

  486.           res.data.list.map(item=>{

  487.             let obj={}

  488.             obj.name=item.houseName;

  489.             obj.zxl=Math.floor(item.sumDuration/60) || 0;

  490.             arr.push(obj)

  491.           })

  492.           arr=this.dealData(arr)

  493.           this.objList4={

  494.             avg: Math.floor(res.data.avg/60) || 0,

  495.             num: res.data.num || 0,

  496.             sum:Math.floor(res.data.sum/60) || 0,

  497.             list:arr || []

  498.           }

  499.       })

  500.     },

  501. 

  502. 

  503.     houseTable(){

  504.       let pamaet={

  505.         orgType:this.role,

  506.         dateType:0,

  507.         statDateStart:this.statDateStart,

  508.         statDateEnd:this.statDateEnd,

  509.         current:this.page,

  510.         size:this.pagesize,

  511.         houseTypes: this.houseTypes,

  512.       }

  513.       if(this.role==3){

  514.         pamaet.houseId=this.houseId

  515.       }else{

  516.         pamaet.orgCode=this.orgCode

  517.       }

  518.       if(this.TimetoAhoose==7){

  519.         pamaet.dateType=null

  520.       }else{

  521.         pamaet.dateType=this.TimetoAhoose

  522.       }

  523.       this.$api.http.houseTable(pamaet).then((res) => {

  524.           this.tableData=res.data.records || [];

  525.           this.total=res.data.total || 0;

  526.       })

  527.     },

  528. 

  529.       handleSizeChange(val) {

  530.       this.pagesize=val;

  531.       this.houseTable()

  532.     },

  533.     handleCurrentChange(val) {

  534.       this.page=val;

  535.       this.houseTable()

  536.     },

  537.     confirmtime(){

  538.       this.TimetoAhoose=7

  539.       this.statDateStart=this.customtime[0];

  540.       this.statDateEnd=this.customtime[1];

  541.       this.page=1;

  542.       this.gethouseData()

  543.     },

  544.     //切换时间

  545.     tabtimetap(index) {

  546.       this.TimetoAhoose = index;

  547.       this.statDateStart='';

  548.       this.statDateEnd='';

  549.       this.page=1;

  550.       this.gethouseData()

  551.     },

  552.       dealData(arr){

  553.       let num=Math.max.apply(Math, arr.map(function (o) { return o.zxl })) //结果：3

  554. 			arr.map(item=>{

  555. 					item.zxl1=Math.floor(item.zxl/num*100)  || 0;

  556. 				})

  557. 				return arr

  558. 		},

  559. 

  560.   },

  561. };

  562. </script>

  563. 

  564. <style scoped="scoped" lang="scss" >

  565. .box-center {

  566.   width: 100%;

  567.   padding: 15px;

  568.   min-width: 1000px;

  569.   padding-bottom: 100px;

  570. }

  571. .cen-tab{

  572.   width: 100%;

  573.   padding: 15px;

  574.   background: #FFFFFF;

  575.   margin-top: 15px;

  576. }

  577. .tophove {

  578.   color: #ffffff;

  579.   background: #2671e2;

  580. }

  581. .app-titel {

  582.   width: 100%;

  583.   height: 70px;

  584.   background: #ffffff;

  585.   box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);

  586.   border-radius: 4px;

  587.   display: flex;

  588.   align-items: center;

  589.   .titel-text {

  590.     height: 100%;

  591.     font-size: 18px;

  592.     font-weight: 600;

  593.     color: #32363d;

  594.     line-height: 70px;

  595.     margin-left: 30px;

  596.   }

  597.   .toptimeqhuan {

  598.     width: 190px;

  599.     height: 32px;

  600.     background: #ffffff;

  601.     border-radius: 4px;

  602.     border: 1px solid #e0e0e0;

  603.     display: flex;

  604.     align-items: center;

  605.     overflow: hidden;

  606.     margin-left: 20px;

  607.     cursor: pointer;

  608.   }

  609.   .toptimeqhuan div {

  610.     flex: 1;

  611.     text-align: center;

  612.     line-height: 32px;

  613.     font-size: 16px;

  614.   }

  615. }

  616. 

  617. .app-box-san{

  618.   width: 100%;

  619.   height: 400px;

  620.   display: flex;

  621.   margin-top: 15px;

  622.   .zuo{

  623.     flex: 1;

  624.     height: 100%;

  625.     margin-right: 15px;

  626.     background: #FFFFFF;

  627.     border-radius: 4px;

  628.     .title{

  629.       width: 100%;

  630.       height: 55px;

  631.       border-bottom: 1px solid #E0E0E0;

  632.       display: flex;

  633.       align-content: center;

  634.       .text1{

  635.           flex: 2;

  636.           line-height: 55px;

  637.           text-indent: 20px;

  638.           font-weight: 500;

  639.           font-size: 16px;

  640.           color: #333333;

  641.       }

  642.       .text2{

  643.         flex: 1;

  644.         height: 55px;

  645.         display: flex;

  646.         align-items: center;

  647.       }

  648.     }

  649.   }

  650.   .you{

  651.     height: 100%;

  652.     flex: 1;

  653.     background: #FFFFFF;

  654.     border-radius: 4px;

  655.     .title{

  656.       width: 100%;

  657.       height: 55px;

  658.       border-bottom: 1px solid #E0E0E0;

  659.       display: flex;

  660.       align-content: center;

  661.       .text1{

  662.           flex: 2;

  663.           line-height: 55px;

  664.           text-indent: 20px;

  665.           font-weight: 500;

  666.           font-size: 16px;

  667.           color: #333333;

  668.       }

  669.       .text2{

  670.         flex: 1;

  671.         height: 55px;

  672.         display: flex;

  673.         align-items: center;

  674.       }

  675.     }

  676.   }

  677. }

  678. 

  679. 	.hejisan{

  680. 		width: 92%;

  681. 		margin: 0 auto;

  682. 		display: flex;

  683. 		padding-top: 10px;

  684. 		padding-bottom:10px;

  685. 		.text1-1{

  686. 			color: #666666;

  687. 		}

  688. 		.text1-2{

  689. 			color: #333333;

  690. 			margin-top: 10px;

  691. 		}

  692. 	}

  693. 

  694. // 进度条

  695.  .jinbox {

  696.       width: 100%;

  697.       height: 18px;

  698.       line-height: 18px;

  699.       display: flex;

  700.       font-size: 16px;

  701.       color: #2C3542;

  702.       margin-top: 10px;

  703.       .jinboxtit {

  704.             width: 14%;

  705.             height: 18px;

  706.             padding-right: 6px;

  707.             white-space: nowrap;

  708.             text-overflow:ellipsis;

  709.             overflow: hidden;

  710.         }

  711.         .jinbox-box {

  712.             width: 75%;

  713.             height: 100%;

  714.             border-radius: 8px;

  715.             background: #F2F2F2;

  716.         }

  717.         .boxbaifenbi {

  718.             height: 100%;

  719.             background:#60D7A0;

  720.             border-radius: 8px;

  721.         }

  722.         .boxbaifenbi2 {

  723.             height: 100%;

  724.             background: #5B8FF9;

  725.         }

  726.         .jinboxbott {

  727.             width: 16%;

  728.             text-indent: 16px;

  729.         }

  730.   }

  731. </style>