优化

src/api/sunVillage_info/fixedAssets.js

@@ -352,3 +352,19 @@ export function bookInfo(bookId) {
     method: 'get',
   })
 }
+
+// 查询科目余额表 可分页 需授权
+export function trailBalanceList(query) {
+  return request({
+    url: '/finance/balance/list',
+    method: 'get',
+    params: query // ?startDate=<开始年月 yyyy-MM>&startSubjectId=<起始科目ID>&endSubjectId=<结束科目ID 如果需要查询单个科目 则设置为和startSubjectId一样即可>&filterZero=<bool 是否过滤掉余额为0结果>&showSubSubject=<bool 是否显示下级科目>&分页参数...
+  })
+}
+
+export function getLoginBook() {
+  return request({
+    url: '/finance/book/getLoginBook',
+    method: 'get'
+  })
+}

src/assets/css/base.scss

@@ -44,7 +44,7 @@ figcaption {
     }
 }
 
-* { touch-action: pan-y; }
+//* { touch-action: pan-y; }
 body {
     color: #323233;
 }
@@ -128,4 +128,4 @@ body {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-}
+}

src/router/index.js

@@ -3142,6 +3142,15 @@ export const constantRoutes = [
       hidden: true,
     },
     component: (resolve) => require(['@/views/sunVillage_info/passWord'], resolve)
+  },
+  { ////阳光村务（新）-- 合同信息
+    path: '/sunVillage_info/list_balance_ranking',
+    name: 'sunVillageInfoListBalanceRanking',
+    meta: {
+      title: '科目余额',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage_info/list_balance_ranking'], resolve)
   }
 ];
 

src/views/sunVillage_info/index.vue

@@ -52,6 +52,7 @@
                 <router-link :to="{name:'sunVillageInfoListIssues'}" class="nav_item n_3">重大事项</router-link>
                 <router-link :to="{name:'sunVillageInfoFixedAssets'}" class="nav_item n_4">固定资产</router-link>
                 <router-link :to="{name:'sunVillageInfoInformation'}" class="nav_item n_5">合同登记</router-link>
+                <router-link :to="{name:'sunVillageInfoListBalanceRanking'}" class="nav_item n_7">科目余额</router-link>
             </div>
         </div>
         <div class="footer">
@@ -239,7 +240,7 @@
             .icon{
                 width: 100%;
                 height: 100%;
-                background: url('../../assets/images/sunVillage_info/login_head_t.png') no-repeat;
+                background: url('../../assets/images/sunVillage_info/login_head_h.png') no-repeat;
                 background-size: 100% 100%;
             }
         }
@@ -300,6 +301,10 @@
                     background: url('../../assets/images/sunVillage_info/index_block_6.png') no-repeat;
                     background-size: 100% 100%;
                 }
+                &.n_7 {
+                    background: url('../../assets/images/sunVillage_info/index_block_7.png') no-repeat;
+                    background-size: 100% 100%;
+                }
             }
         }
     }

src/views/sunVillage_info/index_code.vue

@@ -135,7 +135,7 @@
             .icon{
                 width: 100%;
                 height: 100%;
-                background: url('../../assets/images/sunVillage_info/login_head_t.png') no-repeat;
+                background: url('../../assets/images/sunVillage_info/login_head_h.png') no-repeat;
                 background-size: 100% 100%;
             }
         }

src/views/sunVillage_info/list_balance_ranking.vue

@@ -0,0 +1,591 @@
+<template>
+    <div class="home_wrapper">
+      <div class="header_main">
+          科目余额
+          <div class="return_btn" @click="onClickLeft"></div>
+<!--            <div class="add_btn" v-show="showBtn" @click="goAdd"></div>-->
+      </div>
+
+
+      <div class="search_info">
+        <div class="date_box" @click="showPickerTime = true">
+          <img src="../../assets/images/sunVillage_info/date_icon.png">
+          <p>{{date}}</p>
+        </div>
+        <van-popup v-model="showPickerTime" position="bottom">
+          <van-datetime-picker
+            v-model="currentDate"
+            type="year-month"
+            title="选择年月"
+            :min-date="minDate"
+            :max-date="maxDate"
+            @confirm="onConfirm"
+            @cancel="showPicker = false"
+            :formatter="formatter"
+          />
+        </van-popup>
+        <div class="search_block">
+          <i class="icon"></i>
+          <input type="text" class="ipt" v-model="queryParams.startSubjectId" placeholder="请输入科目编码查询" @input="getSearch">
+        </div>
+<!--        <div class="total">共{{listLength}}个资产</div>-->
+      </div>
+
+      <div class="radio_box">
+        <van-radio-group v-model="radio">
+          <van-radio name="1" checked-color="#2facfe">显示明细</van-radio>
+        </van-radio-group>
+        <div class="total">共{{listLength}}条</div>
+      </div>
+
+      <div class="center_box">
+        <div class="name_box">
+          <van-row>
+            <van-col :span="24">科目编码/科目名称</van-col>
+          </van-row>
+          <van-row v-for="(item,index) in applicationList" :key="index">
+            <van-col :span="24">{{item.subjectId}}{{item.subjectName}}</van-col>
+          </van-row>
+          <div class="name_bg"></div>
+          <img src="../../assets/images/sunVillage_info/name_icon.png" class="name_icon"/>
+        </div>
+
+        <div class="right_box">
+          <div class="right_box_box">
+            <van-row>
+              <van-col :span="8">
+                <p>本期发生</p>
+                <div class="yue_type">
+                  <p>借方</p>
+                  <p>贷方</p>
+                </div>
+              </van-col>
+              <van-col :span="8">
+                <p>期初余额</p>
+                <div class="yue_type">
+                  <p>借方</p>
+                  <p>贷方</p>
+                </div>
+              </van-col>
+              <van-col :span="8">
+                <p>期末余额</p>
+                <div class="yue_type">
+                  <p>借方</p>
+                  <p>贷方</p>
+                </div>
+              </van-col>
+            </van-row>
+            <van-row v-for="(item,index) in applicationList" :key="index">
+              <van-col :span="4">{{item.bqjffs}}</van-col>
+              <van-col :span="4">{{item.bqdffs}}</van-col>
+              <van-col :span="4">{{item.qcjfye}}</van-col>
+              <van-col :span="4">{{item.qcdfye}}</van-col>
+              <van-col :span="4">{{item.qmjffs}}</van-col>
+              <van-col :span="4">{{item.qmdffs}}</van-col>
+            </van-row>
+          </div>
+        </div>
+
+        <div class="clear"></div>
+      </div>
+
+
+    </div>
+</template>
+
+<script>
+  import { trailBalanceList , getLoginBook } from "@/api/sunVillage_info/fixedAssets";
+  import Cookies from "js-cookie";
+  import request from '@/utils/request'
+  export default {
+    name: "certificateList",
+    data() {
+      return {
+        radio:'1',
+        applicationList:[],
+        applicationListSecond:[],
+        assetStatusOptions:[],
+        auditStatus:[],
+        loading: false,
+        finished: false,
+        show: false,
+        showTab: false,
+        showPickerTime: false,
+        fileList:[],
+        listLength:'0',
+        searchInput:'',
+        queryParams:{
+          pageNum:1,
+          pageSize:999,
+          startDate:'',
+          startSubjectId:'',
+          endSubjectId:'',
+        },
+        uploadFiles1:[],
+        projectId:'',
+        projectIndex:'',
+        showBtn:true,
+        yearMonth:[],
+        deptName:'',
+        minDate: new Date(2020, 0, 1),
+        maxDate: new Date(2025, 10, 1),
+        currentDate: new Date(),
+        date:''
+      };
+    },
+    created() {
+      getLoginBook().then((res) => {
+        if (res.code == 200) {
+          if (res.data.currentDay != null || res.data.startDay != null){
+            let resDate = res.data.currentDay != null ? res.data.currentDay : res.data.startDay != null ? res.data.startDay : this.format(new Date(),'yyyy-MM')
+            this.queryParams.startDate = resDate;
+            let date = resDate.split('-');
+            this.date = date[0] + '年' + date[1] + '月';
+            this.currentDate = new Date(date[0], date[1]-1, 1)
+          }
+        }
+      });
+      this.getList();
+    },
+    methods: {
+      getList(){
+        var _this = this;
+        setTimeout(() => {
+          console.log(_this.queryParams)
+          trailBalanceList(_this.queryParams).then(response => {
+            _this.listLength = response.total;
+            _this.applicationList = response.rows;
+
+            if(_this.applicationList.length >= response.total){
+              _this.finished = true;
+              return;
+            }else{
+              _this.loading = false;
+              _this.queryParams.pageNum += 1 ;
+            }
+          });
+        }, 1000);
+      },
+      onConfirm(time) {
+        this.date = this.format(time,'yyyy年MM月');
+        this.queryParams.startDate = this.format(time,'yyyy-MM');
+        this.getList();
+        this.showPickerTime = false;
+      },
+      formatter(type, val) {
+        if (type === 'year') {
+          return `${val}年`;
+        } else if (type === 'month') {
+          return `${val}月`;
+        }
+        return val;
+      },
+      getSearch(){
+        this.queryParams.endSubjectId = this.queryParams.startSubjectId;
+        this.getList();
+      }
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  /deep/ .van-radio__label{
+    font-size: 14PX;
+    color: #2facfe;
+  }
+  .radio_box{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding:20px 23px;
+  }
+  .date_box{
+    display: flex;
+    align-items: center;
+    img{
+      width: 30PX;
+      border-radius: 100%;
+      box-shadow: 0px 6px 10px rgba(63,68,75,0.5);
+    }
+    p{
+      font-size: 14PX;
+      margin-left: 5PX;
+      color: #2facfe;
+    }
+  }
+  .search_info{
+    padding:20px 23px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .search_block{
+      height: 59px;
+      width: 450px;
+      border-radius: 59px;
+      background: #fff;
+      display: flex;
+      padding-right: 35px;
+      align-items: center;
+      box-shadow: 0px 6px 5px rgba(63,68,75,0.2);
+      .icon{
+        width: 30px;
+        height: 30px;
+        background: url('../../assets/images/sunVillage_info/fixedAssets_icon_1.png') no-repeat;
+        background-size: 100% 100%;
+        display: block;
+        margin:0 8px 0 26px;
+      }
+      .ipt{
+        flex: 1;
+        font-size: 26px;
+        background: none;
+        border:0 none;
+        line-height: 59px;
+      }
+    }
+  }
+  .total{
+    font-size: 14PX;
+    color: #858585;
+  }
+.home_wrapper{
+    background: #e9e9e9;
+    min-height: 100vh;
+    width: 100vw;
+    .header_main{
+        height: 116px;
+        background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;
+        background-size: 100% 100%;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        font-size: 36px;
+        line-height: 116px;
+        text-align: center;
+        color: #fff;
+        position: relative;
+        .return_btn{
+            width: 24px;
+            height: 43.2px;
+            background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
+            background-size: 20px 36px;
+            position: absolute;
+            left: 38px;
+            top: 36px;
+        }
+        .add_btn{
+            width: 56.4px;
+            height: 40.8px;
+            background: url('../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
+            background-size: 47px 34px;
+            position: absolute;
+            right: 38px;
+            top: 36px;
+        }
+    }
+    .record_main{
+        padding:30px 22px;
+        .record_det{
+            height: 38px;
+            line-height: 38px;
+            display: flex;
+            justify-content:space-between;
+            .year_l{
+                font-size: 30px;
+                display: flex;
+                align-items: center;
+                color: #858585;
+
+                .unit{
+                    padding-left: 5px;
+                }
+                .icon{
+                    width: 23px;
+                    height: 12px;
+                    display: block;
+                    background: url('../../assets/images/sunVillage_info/list_icon_1.png') no-repeat;
+                    background-size: 100% 100%;
+                    margin-bottom: 4px;
+                    margin-right: 8px;
+                    &.zk {
+                        transform: rotate(0deg)
+                    }
+                    &.ss{
+                        transform: rotate(180deg)
+                    }
+
+                }
+            }
+            .total_r{
+                font-size: 26px;
+                letter-spacing: 2px;
+            }
+        }
+        .record_list{
+            display: flex;
+            flex-flow: wrap;
+            margin-top: 12PX;
+            .flex_block{
+                font-size: 30px;
+                color: #878787;
+                padding-right: 30px;
+                &.current{
+                    color: #4199fe;
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+    .list_main{
+        padding:0 22px;
+        .item{
+            height: 100px;
+            border-radius: 30px;
+            background: #fff;
+            box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
+            padding:15px 32px;
+            display: flex;
+            margin-bottom: 20px;
+            .info{
+                flex:1;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                .title{
+                    display: flex;
+                    font-size: 32px;
+                    align-items: center;
+                    height: 58px;
+                    .icon_box{
+                        width: 34px;
+                        display: block;
+                        height: 30px;
+                        background: url('../../assets/images/sunVillage_info/list_icon_2.png') no-repeat;
+                        background-size: 100% 100%;
+                        margin-right: 10px;
+                    }
+                    .news_title{
+                        max-width:416px;
+                        overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                        -o-text-overflow: ellipsis;
+                    }
+                    .tips_mark{
+                        width: 34px;
+                        height: 34px;
+                        background: #fa0c0c;
+                        border-radius: 8px;
+                        font-size: 24px;
+                        color: #fff;
+                        text-align: center;
+                        line-height: 34px;
+                        margin-left: 10px;
+                    }
+                }
+                .red{
+                  color: #fa0c0c;
+                }
+                .green{
+                  color: #4caf50;
+                }
+                .time{
+                    font-size: 32px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: right;
+                    height: 30px;
+                    margin-top: 6px;
+                    .icon_time{
+                        width: 25px;
+                        height: 25px;
+                        background: url('../../assets/images/sunVillage_info/list_icon_4.png') no-repeat;
+                        background-size: 100% 100%;
+                        margin-right: 10px;
+                    }
+                }
+            }
+            .operation{
+                flex: 1;
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+                text-align: right;
+                .opera_btn{
+                    width: 52px;
+                    height: 52px;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content:center;
+
+                    &.delete{
+                        background:#df0707;
+                        margin-left: 28px;
+                        .icon{
+                            width: 22px;
+                            height: 29px;
+                            background: url('../../assets/images/sunVillage_info/list_icon_7.png') no-repeat;
+                            background-size: 100% 100%;
+                            display: block;
+                        }
+                    }
+                    &.edit{
+                        background: #79cf13;
+                        .icon {
+                            width: 26px;
+                            height: 25px;
+                            background: url('../../assets/images/sunVillage_info/list_icon_6.png') no-repeat;
+                            background-size: 100% 100%;
+                            display: block;
+                        }
+                    }
+                     &.view{
+                        background: #3494ff;
+                        .icon {
+                            width: 29px;
+                            height: 21px;
+                            background: url('../../assets/images/sunVillage_info/list_icon_3.png') no-repeat;
+                            background-size: 100% 100%;
+                            display: block;
+                        }
+                    }
+                }
+            }
+        }
+
+    }
+    .bottom_tips{
+        font-size: 24px;
+         color: #a7a6a6;
+         text-align: center;
+         margin-top: 32px;
+         background: url('../../assets/images/sunVillage_info/list_icon_8.png') center center no-repeat;
+         background-size: 260px 2px;
+         .xs{
+            padding:0 8px;
+            background: #e9e9e9;
+         }
+    }
+    .banner {
+      display: flex;
+      background:#3494ff;
+      color:#fff;
+      text-align: center;
+      margin:3%;
+      border-radius: 10PX;
+    }
+    .banner_tabs{
+      flex:1;
+      padding:10PX 0;
+      font-size: 16PX;
+      div:nth-child(2){
+        font-size: 14PX;
+        margin-top: 5PX;
+      }
+    }
+}
+.top_head_title{
+  font-size: 16PX;
+  text-align: center;
+  padding: 15PX 0;
+}
+  .name_box{
+    float: left;
+    width: 180PX;
+    position: relative;
+    .name_bg{
+      background-color: rgba(47,172,254,0.2);
+      width: 180PX;
+      height: 100%;
+      position: absolute;
+      top: 0;
+    }
+    .name_icon{
+      position: absolute;
+      top: 60PX;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    .van-row:nth-child(odd){
+      .van-col {
+        background-color: #ffffff;
+      }
+    }
+    .van-row:nth-child(1){
+      border-top-left-radius: 10PX;
+      border-bottom-left-radius: 10PX;
+      background-color: #ffffff;
+      .van-col {
+        background-color: #2facfe;
+        color: #ffffff;
+        border-radius: 10PX;
+        line-height: 60PX;
+        text-align: center;
+      }
+    }
+    .van-col{
+      font-size: 16PX;
+      padding: 0PX 15PX;
+      text-align: left;
+      line-height: 40PX;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      word-break: break-all;
+      overflow: hidden;
+    }
+  }
+  .center_box{
+    padding-left: 3%;
+  }
+  .right_box{
+    float: left;
+    width: calc(100% - 180PX);
+    overflow:hidden;
+    overflow-x: scroll;
+    white-space:nowrap;
+    display: -webkit-box;
+    -webkit-overflow-scrolling: touch;
+    .right_box_box{
+      width: 600PX;
+    }
+    .van-row:nth-child(odd){
+      .van-col{
+        background-color: #ffffff;
+      }
+    }
+    .van-row:nth-child(1){
+      .van-col{
+        color: #2facfe;
+        height: 60PX;
+        line-height: 30PX;
+        border-right: 1px solid #ccc;
+      }
+    }
+    .van-col{
+      font-size: 16PX;
+      text-align: center;
+      height: 40PX;
+      line-height: 40PX;
+      &:nth-child(2n){
+        border-right: 1px solid #ccc;
+      }
+    }
+
+    .yue_type{
+      display: flex;
+      border-top: 1px solid #2facfe;
+      p{
+        width: 50%;
+        line-height: 30PX;
+        color: #333333;
+      }
+    }
+
+  }
+  .clear{
+    clear: both;
+  }
+</style>

src/views/sunVillage_info/list_register.vue

@@ -10,15 +10,20 @@
         <div class="year_l" @click="tabShow"><i :class="{'icon':true , 'zk':!showTab ,  'ss':showTab } "></i>{{year == '' ? '全部': year}}<span class="unit">{{year == '' ? '': '年'}}</span>{{month}}<span class="unit">{{month == '' ? '': '月'}}</span></div>
         <div class="total_r">共{{listLength}}条公告</div>
       </div>
-      <div class="record_list" v-if="showTab">
-        <div :class="{'flex_block':true , 'current':year == ''}" @click="tabClick('')">全部</div>
-        <div :class="{'flex_block':true , 'current':year == '2022'}" @click="tabClick('2022')">2022</div>
-        <div :class="{'flex_block':true , 'current':year == '2021'}" @click="tabClick('2021')">2021</div>
-        <div :class="{'flex_block':true , 'current':year == '2020'}" @click="tabClick('2020')">2020</div>
-      </div>
-      <div class="record_list month_list" v-if="showTab&&year != ''">
-        <div v-for="(item,index) in 12" :key="index" :class="{'flex_block':true , 'current':month == item}" @click="tabClickMonth(item)">
-          {{item}}月</div>
+
+      <div class="date_box" v-if="showTab">
+        <div class="record_list">
+          <div :class="{'flex_block':true , 'current':year == ''}" @click="tabClick('')">全部</div>
+          <div :class="{'flex_block':true , 'current':year == '2022'}" @click="tabClick('2022')">2022</div>
+          <div :class="{'flex_block':true , 'current':year == '2021'}" @click="tabClick('2021')">2021</div>
+          <div :class="{'flex_block':true , 'current':year == '2020'}" @click="tabClick('2020')">2020</div>
+          <div :class="{'flex_block':true , 'current':year == '2019'}" @click="tabClick('2019')">2019</div>
+          <div :class="{'flex_block':true , 'current':year == '2018'}" @click="tabClick('2018')">2018</div>
+        </div>
+        <div class="record_list month_list">
+          <div v-for="(item,index) in 12" :key="index" :class="{'flex_block':true , 'current':month == item}" @click="tabClickMonth(item)">
+            {{item}}</div>
+        </div>
       </div>
     </div>
     <div class="list_main">
@@ -224,6 +229,20 @@
 </script>
 
 <style scoped lang="scss">
+  .date_box{
+    background: url('../../assets/images/sunVillage_info/date_bg.png') no-repeat;
+    background-size: 100% 100%;
+    height: 90PX;
+    padding: 0 15PX;
+    margin-top: 15PX;
+    .record_list{
+      height: 45PX;
+      align-items: center;
+    }
+    .month_list{
+      border-top: 2PX dashed #e2e2e2;
+    }
+  }
   .home_wrapper{
     background: #e9e9e9;
     min-height: 100vh;
@@ -301,25 +320,26 @@
       .record_list{
         display: flex;
         flex-flow: wrap;
-        margin-top: 12PX;
+        align-items: center;
+        justify-content: space-between;
         .flex_block{
           font-size: 30px;
-          color: #878787;
-          padding-right: 30px;
+          color: #aaaaaa;
           &.current{
-            color: #4199fe;
+            color: #2facfe;
             font-weight: bold;
           }
         }
       }
       .month_list{
+        align-items: center;
+        justify-content: space-between;
         .flex_block{
           font-size: 30px;
-          color: #878787;
-          width: 12.5%;
+          color: #aaaaaa;
           padding-right: 0px;
           &.current{
-            color: #4199fe;
+            color: #2facfe;
             font-weight: bold;
           }
         }

src/views/sunVillage_info/list_tourists_ranking.vue

@@ -35,16 +35,18 @@
         <div class="right_box">
           <div class="right_box_box">
             <van-row>
-              <van-col :span="8">出工事由</van-col>
-              <van-col :span="8">记工员</van-col>
-              <van-col :span="8">出工数</van-col>
-              <van-col :span="8">出工日期</van-col>
-              <van-col :span="8">金额(元)</van-col>
+              <van-col :span="5">出工事由</van-col>
+              <van-col :span="5">记工员</van-col>
+              <van-col :span="5">出工数</van-col>
+              <van-col :span="5">出工日期</van-col>
+              <van-col :span="4">金额(元)</van-col>
             </van-row>
             <van-row v-for="(item,index) in applicationList" :key="index">
-              <van-col :span="8">{{item.workReason}}</van-col>
-              <van-col :span="8">{{item.workerNote}}</van-col>
-              <van-col :span="8">{{item.workNum}}</van-col>
+              <van-col :span="5">{{item.workReason}}</van-col>
+              <van-col :span="5">{{item.workerNote}}</van-col>
+              <van-col :span="5">{{item.workNum}}</van-col>
+              <van-col :span="5">{{item.jobTime}}</van-col>
+              <van-col :span="4">{{item.totalMoney}}</van-col>
             </van-row>
           </div>
         </div>
@@ -416,10 +418,12 @@
     display: -webkit-box;
     -webkit-overflow-scrolling: touch;
     .right_box_box{
-      width: 430PX;
+      width: 600PX;
     }
     .van-row:nth-child(odd){
-      background-color: #ffffff;
+      .van-col{
+        background-color: #ffffff;
+      }
     }
     .van-row:nth-child(1){
       .van-col{
@@ -430,8 +434,6 @@
       font-size: 16PX;
       padding: 10PX 15PX;
       text-align: center;
-      float: none;
-      display: inline-block;
     }
   }
   .clear{

src/views/sunVillage_info/user.vue

@@ -110,7 +110,7 @@
         width: 56.4px;
         height: 40.8px;
         font-size: 14PX;
-        position: absolutze;
+        position: absolute;
         right: 38px;
         top: 36px;
         line-height: 40.8px;