<!--<template>-->
<!--  <view class="main">-->
<!--      <view class="heard">-->
<!--          <image class="headerBg" src="/static/images/plan/blueBack.png"></image>-->
<!--          <view>-->
<!--            <image @click="handleBack" class="allowLeft" :style="{top: menu.top +((menu.height - 24) / 2) + 'px'}" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"/>-->
<!--          </view>-->
<!--          <view class="content">-->
<!--              <view class="block"></view>-->
<!--              <p class="title">年度经营计划</p>-->
<!--            &lt;!&ndash;  选择月份  &ndash;&gt;-->
<!--            <view class="monthTabs">-->
<!--              <scroll-view class="big" :show-scrollbar="false" scroll-with-animation  scroll-x="true" enable-flex :scrollIntoView="selectMonthId" >-->
<!--                <div :id="'item'+item.value" :class="selectMonth===item.value?'monthItem selectItem':'monthItem'" v-for="(item,index) in monthList" :key="index" @click="handleSelectMonth(item.value)">{{item.label}}</div>-->
<!--              </scroll-view>-->
<!--            </view>-->

<!--            <view class="monthDetailList">-->
<!--              <swiper class="swiper" previous-margin="40rpx" next-margin="40rpx" @change="handleDetailScroll" :current="selectDetail">-->
<!--                <block v-for="(item,index) in swiperList" :key="index">-->
<!--                  <swiper-item class="swiper-item" :item-id="index" :data-item-id="index" bindtap='clickChange'>-->
<!--                    <view class="box">-->
<!--                      <view :class="selectDetail===index?'detail':'detail noShow'">-->
<!--                        <view class="item" v-if="selectDetail===index">-->
<!--                          <view class="itemTop">-->
<!--                            <view class="left">-->
<!--                              <image class="logo" src="/static/images/plan/monthLogo.svg"></image>-->
<!--                              <view class="detailContent">-->
<!--                                <view class="top">-->
<!--                                  <span class="money">{{detail.Revenue_Amount || '-'}}</span>-->
<!--                                  <image v-if="detail.Budget_Degree>100" class="icon" src="/static/images/index/yearSuccess.svg"></image>-->
<!--                                </view>-->
<!--                                  <p class="text">本月已完成<text class="unit">/元</text></p>-->
<!--                              </view>-->
<!--                            </view>-->
<!--                            <view class="right">-->
<!--                              <p class="add" :style="{color:detail.Growth_Rate>0?'#E83944':'#049E77'}">{{detail.Growth_Rate>0?'+':'-'}}{{detail.Growth_Rate || '-'}}%</p>-->
<!--                              <text class="compare">比计划</text>-->
<!--                            </view>-->
<!--                          </view>-->
<!--                          <view class="itemBottom" :style="{marginTop: selectDetail===index?'24px':'4px'}">-->
<!--                            <view class="progress">-->
<!--                              <view class="have" :style="{width: detail.Budget_Degree + '%'}"></view>-->
<!--                            </view>-->
<!--                            <view class="text">-->
<!--                              <span class="success">计划完成<span class="unit">/元</span></span>-->
<!--                              <span class="target">{{ detail.Budget_Amount || '-' }}</span>-->
<!--                            </view>-->
<!--                          </view>-->
<!--                        </view>-->
<!--                        <view class="item" v-if="selectDetail!==index">-->
<!--                          <view class="itemTop">-->
<!--                            <view class="left">-->
<!--                              <image class="logo" src="/static/images/plan/monthLogo.svg"></image>-->
<!--                              <view class="detailContent">-->
<!--                                <view class="top">-->
<!--                                  <span class="money">{{'-'}}</span>-->
<!--                                  <image v-if="detail.Budget_Degree>100" class="icon" src="/static/images/index/yearSuccess.svg"></image>-->
<!--                                </view>-->
<!--                                <p class="text">本月已完成<text class="unit">/元</text></p>-->
<!--                              </view>-->
<!--                            </view>-->
<!--                            <view class="right">-->
<!--                              <p class="add" :style="{color:detail.Growth_Rate>0?'#E83944':'#049E77'}">{{detail.Growth_Rate>0?'+':'-'}}{{ '-'}}%</p>-->
<!--                              <text class="compare">比计划</text>-->
<!--                            </view>-->
<!--                          </view>-->
<!--                          <view class="itemBottom" :style="{marginTop: selectDetail===index?'24px':'4px'}">-->
<!--                            <view class="progress">-->
<!--                              <view class="have" :style="{width: detail.Budget_Degree + '%'}"></view>-->
<!--                            </view>-->
<!--                            <view class="text">-->
<!--                              <span class="success">计划完成<span class="unit">/元</span></span>-->
<!--                              <span class="target">{{ '-' }}</span>-->
<!--                            </view>-->
<!--                          </view>-->
<!--                        </view>-->
<!--                      </view>-->
<!--                    </view>-->
<!--                  </swiper-item>-->
<!--                </block>-->
<!--              </swiper>-->
<!--            </view>-->

<!--          </view>-->
<!--      </view>-->
<!--      <view class="serviceList">-->
<!--        <scroll-view class="list" scroll-y="true">-->
<!--          <view class="item" v-for="(item,index) in detail.RegionBudgetList" :key="index" @click="goPage(item.Serverpart_ID)">-->
<!--            <view class="top">-->
<!--              <p class="title">{{ item.Serverpart_Name || ''}}</p>-->
<!--              <image class="icon" src="/static/images/plan/blueArrow.svg"></image>-->
<!--            </view>-->
<!--            <view class="detail">-->
<!--              <view class="left">-->
<!--                <view class="money">-->
<!--                  <span class="num">{{ item.Revenue_Amount }}</span>-->
<!--                  <image class="icon" src="/static/images/index/yearSuccess.svg"></image>-->
<!--                </view>-->
<!--                <view class="text">本月已完成<span class="unit">/元</span></view>-->
<!--              </view>-->
<!--              <view class="right">-->
<!--                <p class="add" :style="{color:item.Growth_Rate>0?'#E83944':'#049E77'}"><span>{{item.Growth_Rate>0?'+':''}}</span>{{item.Growth_Rate || '-'}}%</p>-->
<!--                <p class="text">比计划</p>-->
<!--              </view>-->
<!--            </view>-->
<!--            <view class="progress">-->
<!--              <view class="box">-->
<!--                <view class="have" :style="{width:item.Budget_Degree + '%'}"></view>-->
<!--              </view>-->
<!--              <view class="other">-->
<!--                <view>-->
<!--                  <span class="unit">计划完成</span>-->
<!--                  <span class="type">/元</span>-->
<!--                </view>-->
<!--                <view class="money">{{item.Budget_Amount || ''}}</view>-->
<!--              </view>-->
<!--            </view>-->
<!--          </view>-->
<!--        </scroll-view>-->
<!--      </view>-->
<!--  </view>-->
<!--</template>-->

<!--<script>-->
<!--import request from '@/util/index.js'-->
<!--export default{-->
<!--    name: "yearPlan",-->
<!--    data(){-->
<!--        return {-->
<!--          monthList:[{label:'1月',value:1},{label:'2月',value:2},{label:'3月',value:3},{label:'4月',value:4},{label:'5月',value:5},{label:'6月',value:6},{label:'7月',value:7}, {label:'8月',value:8},{label:'9月',value:9},{label:'10月',value:10},{label:'11月',value:11},{label:'12月',value:12}],-->
<!--          selectMonth:0,// 选中的月份-->
<!--          selectMonthId:'',// 选中月份的id-->
<!--          swiperList:[{label:1111},{label:2222},{label:3333},{label:4444},{label:5555},{label:6666},{label:7777},{label:8888},{label:9999},{label:1010}, {label:11111111},{label:1212}],-->
<!--          selectDetail:0,// 选中的月份详情卡片-->
<!--          serviceList:[{},{},{},{},{},{}],-->
<!--          menu:{},-->
<!--          detail:{},// 页面请求到的数据-->
<!--        }-->
<!--    },-->
<!--    onLoad(){-->
<!--      //  获取手机参数对页面进行适配-->
<!--      this.menu = uni.getMenuButtonBoundingClientRect()-->
<!--      // 先拿到首页的时间 作为调用接口的统一时间  存的lastDay存当前月份的具体日期切换回本月的日期判断有用-->
<!--      this.searchTime = uni.getStorageSync('lastDay')-->
<!--      this.lastDay = uni.getStorageSync('lastDay')-->
<!--      // 拿到当前时间-->
<!--      const date = new Date(this.searchTime)-->
<!--      let month = date.getMonth() + 1-->
<!--      // 滚动的月份列表-->
<!--      this.monthList = this.monthList.filter(item=>item.value<=month)-->
<!--      // 详情卡片的滑动列表-->
<!--      this.swiperList = this.swiperList.filter((item,index)=>index<month)-->
<!--      // 根据月份显示的详情卡片-->
<!--      this.selectDetail = month - 1-->
<!--      // // 拿到片区详情完成列表-->
<!--      // this.handleAreaDetailList()-->
<!--    },-->
<!--    onReady(){-->
<!--      this.getThisMonth()-->
<!--    },-->
<!--    methods:{-->
<!--      // 横向月份选择器的初始值-->
<!--      getThisMonth(){-->
<!--        const date = new Date()-->
<!--        const month = date.getMonth() + 1-->
<!--        this.selectMonth = month-->
<!--        this.selectMonthId = `item${month}`-->
<!--      },-->
<!--      // 点击月份切换月份-->
<!--      handleSelectMonth(value){-->
<!--        this.selectMonth = value-->
<!--        this.selectMonthId = `item${value}`-->
<!--        this.selectDetail = value - 1-->
<!--      },-->
<!--      // 月份信息详情的滚动-->
<!--      handleDetailScroll(e){-->
<!--        const date = new Date(this.lastDay)-->
<!--        let year = date.getFullYear()-->
<!--        let month = date.getMonth() + 1-->
<!--        let day = date.getDate()-->
<!--        this.selectDetail = e.detail.current-->
<!--        this.selectMonth = this.selectDetail + 1-->
<!--        this.selectMonthId = `item${this.selectDetail<5?1:this.selectDetail}`-->
<!--        if (month === this.selectMonth){-->
<!--          this.searchTime = `${year}-${month}-${day}`-->
<!--        }else{-->
<!--          let m = this.selectMonth-->
<!--          if (m<10){-->
<!--            m = '0' + m-->
<!--          }-->
<!--          let d = this.$util.getThisMonthDay(`${year}-${m}`)-->
<!--          this.searchTime = `${year}-${m}-${d}`-->
<!--        }-->

<!--        this.handleAreaDetailList()-->
<!--      },-->
<!--      async handleAreaDetailList(){-->
<!--        uni.showLoading({title:'正在加载'})-->
<!--        console.log('this.searchTime',this.searchTime)-->
<!--        const req = {-->
<!--          StatisticsDate: this.searchTime,-->
<!--          ProvinceCode:'340000',-->
<!--          StatisticsType:1-->
<!--        }-->
<!--        const data = await request.$webGet('CommercialApi/Revenue/GetProvinceRevenueBudget',req)-->
<!--        for (let key in data.Result_Data){-->
<!--          if (key==='Budget_Amount' || key==='Revenue_Amount'){-->
<!--            data.Result_Data[key] = this.$util.fmoney(data.Result_Data[key])-->
<!--          }-->
<!--        }-->
<!--        data.Result_Data.RegionBudgetList.forEach(item=>{-->
<!--          for (let key in item){-->
<!--            if (key==='Budget_Amount' || key==='Revenue_Amount'){-->
<!--              item[key] = this.$util.fmoney(item[key])-->
<!--            }-->
<!--          }-->
<!--        })-->
<!--        this.detail = data.Result_Data-->
<!--        uni.hideLoading()-->
<!--        console.log('this.detail',this.detail)-->
<!--      },-->
<!--      goPage(id){-->
<!--        this.$util.toNextRoute('navigateTo', '/pages/commercialBI/areaPlanMonth?id='+id+'&search='+this.se)-->
<!--      }-->
<!--    }-->
<!--}-->
<!--</script>-->

<!--<style scoped lang="scss">-->
<!--@import '/static/public/font/stylesheet.css';-->

<!--.main{-->
<!--  width: 100%;-->
<!--  .heard{-->
<!--    width: 100%;-->
<!--    height: 366px;-->
<!--    position: relative;-->
<!--    .content{-->
<!--      width: 100%;-->
<!--      height: 100%;-->
<!--      position: absolute;-->
<!--      box-sizing: border-box;-->
<!--      top: 0;left: 0;-->
<!--      z-index: 2;-->
<!--      .block{-->
<!--        width: 100%;-->
<!--        height: 83px;-->
<!--      }-->
<!--      .title{-->
<!--        font-size: 28px;-->
<!--        font-family: "Alimama ShuHeiTi";-->
<!--        color: #160002;-->
<!--        line-height: 39px;-->
<!--        font-weight: 600;-->
<!--        text-shadow: 0 4px 8px rgba(2,32,202,0.2);-->
<!--        background: linear-gradient(180deg, #fff 50%, #B0BBFF 100%);-->
<!--        -webkit-background-clip: text;-->
<!--        -webkit-text-fill-color: transparent;-->
<!--        margin: 14px 24px;-->
<!--      }-->
<!--      .monthTabs{-->
<!--        width: calc(100% - 32px);-->
<!--        height: 34px;-->
<!--        border-radius: 17px;-->
<!--        box-sizing: border-box;-->
<!--        border: 1px solid #798DFF;-->
<!--        background: linear-gradient(180deg, #4762FF 0%, #778EFF 100%);-->
<!--        overflow: hidden;-->
<!--        padding: 2px 0;-->
<!--        margin-top: 16px;-->
<!--        margin-left: 16px;-->
<!--        .big{-->
<!--          width: 100%;-->
<!--          height: 100%;-->
<!--          white-space: nowrap;-->
<!--          .monthItem{-->
<!--            display: inline-block;-->
<!--            font-size: 14px;-->
<!--            padding: 2px 16px;-->
<!--            font-family: PingFangSC-Semibold, PingFang SC;-->
<!--            font-weight: 600;-->
<!--            color: #B8C2FF;-->
<!--            line-height: 24px;-->
<!--            margin-right: 4px;-->
<!--            text-align: center;-->
<!--            border-radius: 12px;-->
<!--          }-->
<!--          .selectItem{-->
<!--            background: #fff;-->
<!--          }-->
<!--          .monthItem:first-child{-->
<!--            margin-left: 4px;-->
<!--          }-->
<!--        }-->
<!--      }-->
<!--      .monthDetailList{-->
<!--        width: 100%;-->
<!--        height: 140px;-->
<!--        margin-top: 12px;-->
<!--        .swiper{-->
<!--          width: 100%;-->
<!--          height: 100%;-->
<!--            .swiper-item{-->
<!--              .box{-->
<!--                width: 100%;-->
<!--                height: 100%;-->
<!--                .detail{-->
<!--                  width: calc(100% - 20px);-->
<!--                  height: 100%;-->
<!--                  background: linear-gradient(314deg, #D8EAFF 0%, #F3F5FF 32%, #F5FCFF 54%, #F0F7FF 70%, #D3D9FF 100%);-->
<!--                  margin-left: 10px;-->
<!--                  border-radius: 8px;-->
<!--                  box-sizing: border-box;-->
<!--                  padding: 16px;-->
<!--                  .item{-->
<!--                    .itemTop{-->
<!--                      width: 100%;-->
<!--                      display: flex;-->
<!--                      justify-content: space-between;-->
<!--                      .left{-->
<!--                        display: flex;-->
<!--                        .logo{-->
<!--                          width: 44px;-->
<!--                          height: 44px;-->
<!--                          margin-right: 8px;-->
<!--                        }-->
<!--                        .detailContent{-->
<!--                          .top{-->
<!--                            display: flex;-->
<!--                            align-items: center;-->
<!--                            margin-bottom: 2px;-->
<!--                            .money{-->
<!--                              font-size: 18px;-->
<!--                              font-family: DINAlternate-Bold, DINAlternate;-->
<!--                              font-weight: bold;-->
<!--                              color: #160002;-->
<!--                              line-height: 24px;-->
<!--                            }-->
<!--                            .icon{-->
<!--                              width: 15px;-->
<!--                              height: 15px;-->
<!--                              margin-left: 6px;-->
<!--                            }-->
<!--                          }-->
<!--                          .text{-->
<!--                            font-size: 14px;-->
<!--                            font-family: PingFangSC-Regular, PingFang SC;-->
<!--                            font-weight: 400;-->
<!--                            color: #786B6C;-->
<!--                            line-height: 20px;-->
<!--                            .unit{-->
<!--                              font-size: 14px;-->
<!--                              font-family: PingFangSC-Regular, PingFang SC;-->
<!--                              font-weight: 400;-->
<!--                              color: #A69E9F;-->
<!--                              line-height: 20px;-->
<!--                              margin-left: 2px;-->
<!--                            }-->
<!--                          }-->
<!--                        }-->
<!--                      }-->
<!--                      .right{-->
<!--                        text-align: right;-->
<!--                        .add{-->
<!--                          font-size: 18px;-->
<!--                          font-family: DINAlternate-Bold, DINAlternate;-->
<!--                          font-weight: bold;-->
<!--                          line-height: 24px;-->
<!--                        }-->
<!--                        .compare{-->
<!--                          font-size: 14px;-->
<!--                          font-family: PingFangSC-Regular, PingFang SC;-->
<!--                          font-weight: 400;-->
<!--                          color: #A69E9F;-->
<!--                          line-height: 18px;-->
<!--                        }-->
<!--                      }-->
<!--                    }-->
<!--                    .itemBottom{-->
<!--                      margin-top: 24px;-->
<!--                      .progress{-->
<!--                        width: 100%;-->
<!--                        height: 10px;-->
<!--                        background: #ccc;-->
<!--                        border-radius: 5px;-->
<!--                        position: relative;-->
<!--                        overflow: hidden;-->
<!--                        .have{-->
<!--                          height: 100%;-->
<!--                          position: absolute;-->
<!--                          left: 0;-->
<!--                          top: 0;-->
<!--                          background: #576EFF;-->
<!--                          border-radius: 5px;-->
<!--                        }-->
<!--                      }-->
<!--                      .text{-->
<!--                        margin-top: 4px;-->
<!--                        width: 100%;-->
<!--                        display: flex;-->
<!--                        justify-content: space-between;-->
<!--                        align-items: center;-->
<!--                        .success{-->
<!--                          font-size: 14px;-->
<!--                          font-family: PingFangSC-Regular, PingFang SC;-->
<!--                          font-weight: 400;-->
<!--                          color: #786B6C;-->
<!--                          line-height: 20px;-->
<!--                          .unit{-->
<!--                            font-size: 14px;-->
<!--                            font-family: PingFangSC-Regular, PingFang SC;-->
<!--                            font-weight: 400;-->
<!--                            color: #A69E9F;-->
<!--                            line-height: 20px;-->
<!--                            margin-left: 2px;-->
<!--                          }-->
<!--                        }-->
<!--                        .target{-->
<!--                          font-size: 14px;-->
<!--                          font-family: PingFangSC-Regular, PingFang SC;-->
<!--                          font-weight: 400;-->
<!--                          color: #160002;-->
<!--                          line-height: 20px;-->
<!--                        }-->
<!--                      }-->
<!--                    }-->
<!--                  }-->
<!--                }-->
<!--                .noShow{-->
<!--                  height: 112px;-->
<!--                  margin-top: 14px;-->
<!--                }-->
<!--              }-->
<!--            }-->
<!--        }-->
<!--      }-->

<!--    }-->
<!--    .headerBg{-->
<!--      position: absolute;-->
<!--      top: 0;-->
<!--      left: 0;-->
<!--      width: 100%;-->
<!--      height: 100%;-->
<!--      z-index: 1;-->
<!--    }-->
<!--    .allowLeft{-->
<!--      position: absolute;-->
<!--      width: 24px;-->
<!--      height: 24px;-->
<!--      left: 16px;-->
<!--    }-->
<!--  }-->

<!--  .serviceList{-->
<!--    width: 100%;-->
<!--    height: calc(100vh - 366px);-->
<!--    transform: translateY(-16px);-->
<!--    border-radius: 8px;-->
<!--    z-index: 6;-->
<!--    position: relative;-->
<!--    background: #fff;-->
<!--    box-sizing: border-box;-->
<!--    padding:16px 16px 0;-->
<!--    .list{-->
<!--      width: 100%;-->
<!--      height: 100%;-->
<!--      ::-webkit-scrollbar {width: 0;height: 0;background-color: transparent;}-->
<!--      .item{-->
<!--        width: 100%;-->
<!--        height: 178px;-->
<!--        background: linear-gradient(314deg, #EDF7FF 0%, #F3F5FF 32%, #F5FCFF 54%, #F0F7FF 70%, #D7DDFF 100%);-->
<!--        border-radius: 8px;-->
<!--        margin-bottom: 12px;-->
<!--        box-sizing: border-box;-->
<!--        padding: 16px;-->
<!--        .top{-->
<!--          display: flex;-->
<!--          align-items: center;-->
<!--          .title{-->
<!--            font-size: 18px;-->
<!--            font-family: Alimama ShuHeiTi;-->
<!--            color: #1A33BC;-->
<!--            line-height: 26px;-->
<!--          }-->
<!--          .icon{-->
<!--            width: 15px;-->
<!--            height: 15px;-->
<!--            opacity: 0.8;-->
<!--            margin-left: 7px;-->
<!--          }-->
<!--        }-->
<!--        .detail{-->
<!--          margin-top: 16px;-->
<!--          width: 100%;-->
<!--          display: flex;-->
<!--          justify-content: space-between;-->
<!--          .left{-->
<!--            .money{-->
<!--              display: flex;-->
<!--              align-items: center;-->
<!--              margin-bottom: 2px;-->
<!--              .num{-->
<!--                font-size: 20px;-->
<!--                font-family: DINAlternate-Bold, DINAlternate;-->
<!--                font-weight: bold;-->
<!--                color: #160002;-->
<!--                line-height: 24px;-->
<!--                margin-right: 4px;-->
<!--              }-->
<!--              .icon{-->
<!--                width: 16px;-->
<!--                height: 16px;-->
<!--              }-->
<!--            }-->
<!--            .text{-->
<!--              font-size: 14px;-->
<!--              font-family: PingFangSC-Regular, PingFang SC;-->
<!--              font-weight: 400;-->
<!--              color: #786B6C;-->
<!--              line-height: 20px;-->
<!--              .unit{-->
<!--                color: #A69E9F;-->
<!--                margin-left: 2px;-->
<!--              }-->
<!--            }-->
<!--          }-->
<!--          .right{-->
<!--            display: flex;-->
<!--            flex-direction: column;-->
<!--            align-items: flex-end;-->
<!--            .add{-->
<!--              font-size: 24px;-->
<!--              font-family: DINAlternate-Bold, DINAlternate;-->
<!--              font-weight: bold;-->
<!--              line-height: 24px;-->
<!--              margin-bottom: 2px;-->
<!--            }-->
<!--            .text{-->
<!--              font-size: 12px;-->
<!--              font-family: PingFangSC-Regular, PingFang SC;-->
<!--              font-weight: 400;-->
<!--              color: #A69E9F;-->
<!--              line-height: 18px;-->
<!--            }-->
<!--          }-->
<!--        }-->
<!--        .progress{-->
<!--          margin-top: 16px;-->
<!--          .box{-->
<!--            width: 100%;-->
<!--            height: 10px;-->
<!--            border-radius: 5px;-->
<!--            background: #ccc;-->
<!--            overflow: hidden;-->
<!--            position: relative;-->
<!--            .have{-->
<!--              position: absolute;-->
<!--              height: 100%;-->
<!--              background: rgba(87, 110, 255, 1);-->
<!--              border-radius: 5px;-->
<!--              left: 0;top: 0;-->
<!--            }-->
<!--          }-->
<!--          .other{-->
<!--            width: 100%;-->
<!--            margin-top: 4px;-->
<!--            display: flex;-->
<!--            justify-content: space-between;-->
<!--            align-items: center;-->
<!--            .unit{-->
<!--              font-size: 14px;-->
<!--              font-family: PingFangSC-Regular, PingFang SC;-->
<!--              font-weight: 400;-->
<!--              color: #786B6C;-->
<!--              line-height: 20px;-->
<!--            }-->
<!--            .type{-->
<!--              font-size: 14px;-->
<!--              font-family: PingFangSC-Regular, PingFang SC;-->
<!--              font-weight: 400;-->
<!--              color: #A69E9F;-->
<!--              line-height: 20px;-->
<!--              margin-left: 2px;-->
<!--            }-->
<!--            .money{-->
<!--              font-size: 14px;-->
<!--              font-family: PingFangSC-Regular, PingFang SC;-->
<!--              font-weight: 400;-->
<!--              color: #160002;-->
<!--              line-height: 20px;-->
<!--            }-->
<!--          }-->
<!--        }-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</style>-->
