zhangzl
/
nsgk_mobile
2
0
포크 0
코드 이슈 0 풀 리퀘스트 0 릴리즈 0 위키 활동
移动端
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1763 커밋
7 브랜치
80 MiB
 
 
트리: e2c9b114b6
브랜치 태그
${ item.name }
${ searchTerm } 브랜치 생성
from 'e2c9b114b6'
${ noResults }
nsgk_mobile/src/views/sunVillage_info/detailed_incomeDistribution...

770 lines
21 KiB
Raw Blame 히스토리 

  1. <template>

  2.     <div class="home_wrapper">

  3.       <div class="header_main">

  4.         收益分配表

  5.         <div class="return_btn" @click="onClickLeft"></div>

  6. <!--            <div class="add_btn" v-show="showBtn" @click="goAdd"></div>-->

  7.       </div>

  8. 

  9. 

  10.       <div class="search_info">

  11.         <div class="date_box" @click="showPickerTime = true">

  12.           <img src="../../assets/images/sunVillage_info/date_icon.png">

  13.           <p>{{date}}</p>

  14.         </div>

  15.         <van-popup v-model="showPickerTime" position="bottom">

  16.           <van-datetime-picker

  17.             v-model="currentDate"

  18.             type="year-month"

  19.             title="选择年月"

  20.             :min-date="minDate"

  21.             :max-date="maxDate"

  22.             @confirm="onConfirm"

  23.             @cancel="showPicker = false"

  24.             :formatter="formatter"

  25.           />

  26.         </van-popup>

  27.         <div class="search_block">

  28.           <i class="icon"></i>

  29.           <input readonly type="text" class="ipt" v-model="searchDate.templateName" placeholder="请选择科目查询" @click="visible=true">

  30.         </div>

  31.         <van-popup v-model="visible" position="bottom">

  32.           <van-picker

  33.             show-toolbar

  34.             :columns="expressionOptions"

  35.             value-key="name"

  36.             @confirm="onConfirmExpression"

  37.             @cancel="visible = false"

  38.           />

  39.         </van-popup>

  40. <!--        <div class="total">共{{listLength}}个资产</div> @input="getSearch"-->

  41.       </div>

  42. 

  43. <!--      <div class="radio_box">-->

  44. <!--        <van-checkbox v-model="queryParams.showSubSubject" @change="showSub" checked-color="#2facfe">显示明细</van-checkbox>-->

  45. <!--        <div class="total">共{{listLength}}条</div>-->

  46. <!--      </div>-->

  47. 

  48.       <div class="balance-main">

  49.         <div class="main-title">

  50.           <div class="company">单位:{{ this.$store.getters.bookName }}</div>

  51.           <div class="nper">{{ accountingYear }}年{{ accountingMonth }}期</div>

  52.           <div class="amountOf">金额:元</div>

  53.         </div>

  54.         <div class="main-center">

  55.           <div class="datagrid">

  56.             <div class="block" >

  57.               <ul class="list">

  58.                 <li class="header">

  59.                   <div class="xmmc" v-for="(item, index) in headers" :style="{width: item.width + '%', 'text-align': 'center',}" :key="index">{{item.name}}</div>

  60.                 </li>

  61.               </ul>

  62.               <div class="list_block">

  63.                 <ul class="list">

  64.                   <li v-for="(item, index) in list" :key="index">

  65.                     <div class="xmmc" v-for="(header, hindex) in headers" :style="{width: header.width + '%', 'text-align': header.align, padding: '0 10px',}" :key="hindex">{{ item[header.prop] }}</div>

  66.                   </li>

  67.                 </ul>

  68.               </div>

  69.             </div>

  70.           </div>

  71.         </div>

  72.       </div>

  73. 

  74.     </div>

  75. </template>

  76. 

  77. <script>

  78.   import { trailBalanceList , expressionReportByCategory,getLoginBook,incomeDistributionReportByExpTpl } from "@/api/sunVillage_info/fixedAssets";

  79.   import SubjectTreeChooser from "@/components/form/SubjectTreeChooser";

  80.   import Cookies from "js-cookie";

  81.   import request from '@/utils/request'

  82.   import {FINANCE} from "@/utils/finance";

  83.   export default {

  84.     name: "certificateList",

  85.     components: { SubjectTreeChooser },

  86.     data() {

  87.       return {

  88.         expressionOptions:[],

  89.         searchDate: {

  90.           bookDate: "",

  91.           templateName: '收益分配表',

  92.           signature: false, // 添加底部落款

  93.         },

  94.         headers: [],

  95.         list: [],

  96.         accountingYear: "",

  97.         accountingMonth: "",

  98.         // 显示搜索条件

  99.         visible: false,

  100.         showPickerTime: false,

  101. 

  102.         minDate: new Date(2020, 0, 1),

  103.         maxDate: new Date(2025, 10, 1),

  104.         currentDate: new Date(),

  105.         date:''

  106.       };

  107.     },

  108.     created() {

  109.       getLoginBook().then((res) => {

  110.         if (res.code == 200) {

  111.           let currentDays = res.data.currentDay;

  112.           if (currentDays == null) {

  113.             this.$message.error("当前账套未开启!");

  114.             return false;

  115.           }

  116. 

  117.           let dealDays = currentDays.split("-");

  118.           this.accountingYear = dealDays[0]; //当前帐套年

  119.           this.accountingMonth = dealDays[1]; //当前帐套月

  120. 

  121.           this.date = dealDays[0]+'年'+dealDays[1]+'月';

  122. 

  123.           this.$set(this.searchDate, "bookDate", currentDays);

  124.           this.initPage();

  125.         }

  126.       });

  127.       expressionReportByCategory('收益分配表').then((resp) => {

  128.         this.expressionOptions = resp.data;

  129.       });

  130.     },

  131.     methods: {

  132.       initPage() {

  133.         incomeDistributionReportByExpTpl(this.searchDate).then((res) => {

  134.           if (res.code == 200) {

  135.             this.loading = false;

  136.             let content = res.data;

  137.             this.list = content.list.map((x) => {

  138.               if(x.hasOwnProperty('amountLeft')) x.amountLeft = FINANCE.formatNum(x.amountLeft);

  139.               if(x.hasOwnProperty('amountRight')) x.amountRight = FINANCE.formatNum(x.amountRight);

  140.               if(x.hasOwnProperty('lastYearAmountLeft')) x.lastYearAmountLeft = FINANCE.formatNum(x.lastYearAmountLeft);

  141.               return x;

  142.             });

  143.             const sectionPercent = content.headers.length;

  144.             this.headers = content.headers.map((x) => {

  145.               let align;

  146.               if(x.name.indexOf('金') >= 0 || x.name.indexOf('额') >= 0)

  147.               {

  148.                 align = 'right';

  149.               }

  150.               else if(x.name.indexOf('目') >= 0)

  151.               {

  152.                 align = 'left';

  153.               }

  154.               else

  155.               {

  156.                 align = 'center';

  157.               }

  158.               x.align = align;

  159.               x.width = 100 / sectionPercent;

  160.               return x;

  161.             });

  162.           }

  163.         });

  164.       },

  165.       searchFrom() {

  166.         this.voucherFormShow = false;

  167.         let dealDays = this.searchDate.bookDate.split("-");

  168.         this.accountingYear = dealDays[0]; //当前帐套年

  169.         this.accountingMonth = dealDays[1]; //当前帐套月

  170.         this.initPage();

  171.       },

  172.       onConfirm(time) {

  173.         console.log(this.format(time,'yyyy-MM'))

  174.         this.date = this.format(time,'yyyy年MM月');

  175.         this.searchDate.bookDate = this.format(time,'yyyy-MM');

  176.         this.initPage();

  177.         this.showPickerTime = false;

  178.         let dealDays = this.searchDate.bookDate.split("-");

  179.         this.accountingYear = dealDays[0]; //当前帐套年

  180.         this.accountingMonth = dealDays[1]; //当前帐套月

  181.       },

  182.       onConfirmExpression(data){

  183.         this.searchDate.templateName = data.name;

  184.         this.visible = false;

  185.         this.initPage();

  186.       },

  187.       formatter(type, val) {

  188.         if (type === 'year') {

  189.           return `${val}年`;

  190.         } else if (type === 'month') {

  191.           return `${val}月`;

  192.         }

  193.         return val;

  194.       },

  195.       getSearch(val){

  196.         console.log(val)

  197.         this.subjectName = val.subjectId + " " + val.subjectName;

  198.         this.queryParams.endSubjectId = this.queryParams.startSubjectId;

  199.         this.getList();

  200.       }

  201.     },

  202.   }

  203. </script>

  204. 

  205. <style scoped lang="scss">

  206. 

  207.   .balance-main {

  208.     background: #fff;

  209.     .main-title {

  210.       margin-bottom: 5PX;

  211.       padding: 0 10PX;

  212.       height: 33PX;

  213.       line-height: 33PX;

  214.       color: #333;

  215.       font-size: 13PX;

  216.       display: flex;

  217.       justify-content: space-between;

  218.       .company {

  219.       }

  220.       .nper {

  221.         text-align: center;

  222.       }

  223.       .amountOf {

  224.         text-align: right;

  225.       }

  226.     }

  227.     .main-center {

  228.       // min-height: 404PX;

  229.       border: 1PX solid #CACBCC;

  230.       border-bottom: 0;

  231.       overflow-x: scroll;

  232.       .datagrid {

  233.         min-height: 100PX;

  234.         width: 250%;

  235.         .header {

  236.           background: #f8f8f9;

  237.           font-weight: bold;

  238.           display: flex;

  239.         }

  240.         .kmbm,

  241.         .xmmc,

  242.         .qj,

  243.         .zy,

  244.         .jfje,

  245.         .dfje,

  246.         .fx,

  247.         .ye {

  248.           height: 29PX;

  249.           line-height: 29PX;

  250.           font-size: 13PX;

  251.           border-bottom: 1PX solid #CACBCC;

  252.           border-right: 1PX solid #CACBCC;

  253.           text-align: center;

  254.         }

  255.         .xmmc {

  256.           width: 26%;

  257.           text-align: left;

  258.           padding-left: 10PX;

  259.         }

  260.         .qj {

  261.           width: 12%;

  262.           text-align: right;

  263.           padding-right: 10PX;

  264.         }

  265.         .zy {

  266.           width: 12%;

  267.           text-align: right;

  268.           padding-right: 10PX;

  269.         }

  270. 

  271.         .dfje {

  272.           width: 26%;

  273.           text-align: left;

  274.           padding-left: 10PX;

  275.         }

  276.         .fx {

  277.           width: 12%;

  278.           text-align: right;

  279.           padding-right: 10PX;

  280.         }

  281.         .ye {

  282.           width: 12%;

  283.           text-align: right;

  284.           padding-right: 10PX;

  285.           border-right: 0;

  286.         }

  287.         .mok_list {

  288.           display: block;

  289.           overflow-y: scroll;

  290.           height: calc(100vh - 200PX);

  291.           //background: url("~@/assets/images/report_line.png") repeat;

  292.         }

  293.         .list {

  294.           width: 100%;

  295.         }

  296.         ul {

  297.           margin: 0;

  298.           padding: 0;

  299.           li {

  300.             display: block;

  301.             overflow: hidden;

  302.             list-style: none;

  303.             &.header {

  304.               background: #f8f8f9;

  305.               font-weight: bold;

  306.             }

  307.             .kmbm,

  308.             .xmmc,

  309.             .qj,

  310.             .zy,

  311.             .jfje,

  312.             .dfje,

  313.             .fx,

  314.             .ye {

  315.               height: 29PX;

  316.               line-height: 29PX;

  317.               float: left;

  318.               font-size: 13PX;

  319.               border-bottom: 1PX solid #CACBCC;

  320.               border-right: 1PX solid #CACBCC;

  321.               text-align: center;

  322.             }

  323.             .xmmc {

  324.               width: 26%;

  325.               text-align: left;

  326.               padding-left: 10PX;

  327.             }

  328.             .qj {

  329.               width: 12%;

  330.               text-align: right;

  331.               padding-right: 10PX;

  332.             }

  333.             .zy {

  334.               width: 12%;

  335.               text-align: right;

  336.               padding-right: 10PX;

  337.             }

  338. 

  339.             .dfje {

  340.               width: 26%;

  341.               text-align: left;

  342.               padding-left: 10PX;

  343.             }

  344.             .fx {

  345.               width: 12%;

  346.               text-align: right;

  347.               padding-right: 10PX;

  348.             }

  349.             .ye {

  350.               width: 12%;

  351.               text-align: right;

  352.               padding-right: 10PX;

  353.               border-right: 0;

  354.             }

  355.           }

  356.         }

  357.       }

  358.     }

  359.   }

  360. 

  361.   /deep/ .van-radio__label{

  362.     font-size: 14PX;

  363.     color: #2facfe;

  364.   }

  365.   .radio_box{

  366.     display: flex;

  367.     justify-content: space-between;

  368.     align-items: center;

  369.     padding:20px 23px;

  370.   }

  371.   .date_box{

  372.     display: flex;

  373.     align-items: center;

  374.     img{

  375.       width: 30PX;

  376.       border-radius: 100%;

  377.       box-shadow: 0px 6px 10px rgba(63,68,75,0.5);

  378.     }

  379.     p{

  380.       font-size: 14PX;

  381.       margin-left: 5PX;

  382.       color: #2facfe;

  383.     }

  384.   }

  385.   .search_info{

  386.     padding:20px 23px;

  387.     display: flex;

  388.     justify-content: space-between;

  389.     align-items: center;

  390.     .search_block{

  391.       height: 59px;

  392.       width: 450px;

  393.       border-radius: 59px;

  394.       background: #fff;

  395.       display: flex;

  396.       padding-right: 35px;

  397.       align-items: center;

  398.       box-shadow: 0px 6px 5px rgba(63,68,75,0.2);

  399.       .icon{

  400.         width: 30px;

  401.         height: 30px;

  402.         background: url('../../assets/images/sunVillage_info/fixedAssets_icon_1.png') no-repeat;

  403.         background-size: 100% 100%;

  404.         display: block;

  405.         margin:0 8px 0 26px;

  406.       }

  407.       .delete_icon{

  408.         width: 15PX;

  409.         height: 15PX;

  410.         background: url('../../assets/images/sunVillage_info/delete_icon_input.png') no-repeat;

  411.         background-size: 100% 100%;

  412.         display: block;

  413.         margin:0 8px 0 26px;

  414.       }

  415.       .ipt{

  416.         flex: 1;

  417.         font-size: 26px;

  418.         background: none;

  419.         border:0 none;

  420.         line-height: 59px;

  421.       }

  422.     }

  423.   }

  424.   .total{

  425.     font-size: 14PX;

  426.     color: #858585;

  427.   }

  428. .home_wrapper{

  429.     background: #e9e9e9;

  430.     min-height: 100vh;

  431.     width: 100vw;

  432.     .header_main{

  433.         height: 116px;

  434.         background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;

  435.         background-size: 100% 100%;

  436.         position: fixed;

  437.         top: 0;

  438.         left: 0;

  439.         width: 100%;

  440.         font-size: 36px;

  441.         line-height: 116px;

  442.         text-align: center;

  443.         color: #fff;

  444.         position: relative;

  445.         .return_btn{

  446.             width: 24px;

  447.             height: 43.2px;

  448.             background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;

  449.             background-size: 20px 36px;

  450.             position: absolute;

  451.             left: 38px;

  452.             top: 36px;

  453.         }

  454.         .add_btn{

  455.             width: 56.4px;

  456.             height: 40.8px;

  457.             background: url('../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;

  458.             background-size: 47px 34px;

  459.             position: absolute;

  460.             right: 38px;

  461.             top: 36px;

  462.         }

  463.     }

  464.     .record_main{

  465.         padding:30px 22px;

  466.         .record_det{

  467.             height: 38px;

  468.             line-height: 38px;

  469.             display: flex;

  470.             justify-content:space-between;

  471.             .year_l{

  472.                 font-size: 30px;

  473.                 display: flex;

  474.                 align-items: center;

  475.                 color: #858585;

  476. 

  477.                 .unit{

  478.                     padding-left: 5px;

  479.                 }

  480.                 .icon{

  481.                     width: 23px;

  482.                     height: 12px;

  483.                     display: block;

  484.                     background: url('../../assets/images/sunVillage_info/list_icon_1.png') no-repeat;

  485.                     background-size: 100% 100%;

  486.                     margin-bottom: 4px;

  487.                     margin-right: 8px;

  488.                     &.zk {

  489.                         transform: rotate(0deg)

  490.                     }

  491.                     &.ss{

  492.                         transform: rotate(180deg)

  493.                     }

  494. 

  495.                 }

  496.             }

  497.             .total_r{

  498.                 font-size: 26px;

  499.                 letter-spacing: 2px;

  500.             }

  501.         }

  502.         .record_list{

  503.             display: flex;

  504.             flex-flow: wrap;

  505.             margin-top: 12PX;

  506.             .flex_block{

  507.                 font-size: 30px;

  508.                 color: #878787;

  509.                 padding-right: 30px;

  510.                 &.current{

  511.                     color: #4199fe;

  512.                     font-weight: bold;

  513.                 }

  514.             }

  515.         }

  516.     }

  517.     .list_main{

  518.         padding:0 22px;

  519.         .item{

  520.             height: 100px;

  521.             border-radius: 30px;

  522.             background: #fff;

  523.             box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);

  524.             padding:15px 32px;

  525.             display: flex;

  526.             margin-bottom: 20px;

  527.             .info{

  528.                 flex:1;

  529.                 display: flex;

  530.                 align-items: center;

  531.                 justify-content: space-between;

  532.                 .title{

  533.                     display: flex;

  534.                     font-size: 32px;

  535.                     align-items: center;

  536.                     height: 58px;

  537.                     .icon_box{

  538.                         width: 34px;

  539.                         display: block;

  540.                         height: 30px;

  541.                         background: url('../../assets/images/sunVillage_info/list_icon_2.png') no-repeat;

  542.                         background-size: 100% 100%;

  543.                         margin-right: 10px;

  544.                     }

  545.                     .news_title{

  546.                         max-width:416px;

  547.                         overflow: hidden;

  548.                         white-space: nowrap;

  549.                         text-overflow: ellipsis;

  550.                         -o-text-overflow: ellipsis;

  551.                     }

  552.                     .tips_mark{

  553.                         width: 34px;

  554.                         height: 34px;

  555.                         background: #fa0c0c;

  556.                         border-radius: 8px;

  557.                         font-size: 24px;

  558.                         color: #fff;

  559.                         text-align: center;

  560.                         line-height: 34px;

  561.                         margin-left: 10px;

  562.                     }

  563.                 }

  564.                 .red{

  565.                   color: #fa0c0c;

  566.                 }

  567.                 .green{

  568.                   color: #4caf50;

  569.                 }

  570.                 .time{

  571.                     font-size: 32px;

  572.                     display: flex;

  573.                     align-items: center;

  574.                     justify-content: right;

  575.                     height: 30px;

  576.                     margin-top: 6px;

  577.                     .icon_time{

  578.                         width: 25px;

  579.                         height: 25px;

  580.                         background: url('../../assets/images/sunVillage_info/list_icon_4.png') no-repeat;

  581.                         background-size: 100% 100%;

  582.                         margin-right: 10px;

  583.                     }

  584.                 }

  585.             }

  586.             .operation{

  587.                 flex: 1;

  588.                 display: flex;

  589.                 align-items: center;

  590.                 justify-content: flex-end;

  591.                 text-align: right;

  592.                 .opera_btn{

  593.                     width: 52px;

  594.                     height: 52px;

  595.                     border-radius: 50%;

  596.                     display: flex;

  597.                     align-items: center;

  598.                     justify-content:center;

  599. 

  600.                     &.delete{

  601.                         background:#df0707;

  602.                         margin-left: 28px;

  603.                         .icon{

  604.                             width: 22px;

  605.                             height: 29px;

  606.                             background: url('../../assets/images/sunVillage_info/list_icon_7.png') no-repeat;

  607.                             background-size: 100% 100%;

  608.                             display: block;

  609.                         }

  610.                     }

  611.                     &.edit{

  612.                         background: #79cf13;

  613.                         .icon {

  614.                             width: 26px;

  615.                             height: 25px;

  616.                             background: url('../../assets/images/sunVillage_info/list_icon_6.png') no-repeat;

  617.                             background-size: 100% 100%;

  618.                             display: block;

  619.                         }

  620.                     }

  621.                      &.view{

  622.                         background: #3494ff;

  623.                         .icon {

  624.                             width: 29px;

  625.                             height: 21px;

  626.                             background: url('../../assets/images/sunVillage_info/list_icon_3.png') no-repeat;

  627.                             background-size: 100% 100%;

  628.                             display: block;

  629.                         }

  630.                     }

  631.                 }

  632.             }

  633.         }

  634. 

  635.     }

  636.     .bottom_tips{

  637.         font-size: 24px;

  638.          color: #a7a6a6;

  639.          text-align: center;

  640.          margin-top: 32px;

  641.          background: url('../../assets/images/sunVillage_info/list_icon_8.png') center center no-repeat;

  642.          background-size: 260px 2px;

  643.          .xs{

  644.             padding:0 8px;

  645.             background: #e9e9e9;

  646.          }

  647.     }

  648.     .banner {

  649.       display: flex;

  650.       background:#3494ff;

  651.       color:#fff;

  652.       text-align: center;

  653.       margin:3%;

  654.       border-radius: 10PX;

  655.     }

  656.     .banner_tabs{

  657.       flex:1;

  658.       padding:10PX 0;

  659.       font-size: 16PX;

  660.       div:nth-child(2){

  661.         font-size: 14PX;

  662.         margin-top: 5PX;

  663.       }

  664.     }

  665. }

  666. .top_head_title{

  667.   font-size: 16PX;

  668.   text-align: center;

  669.   padding: 15PX 0;

  670. }

  671.   .name_box{

  672.     float: left;

  673.     width: 180PX;

  674.     position: relative;

  675.     .name_bg{

  676.       background-color: rgba(47,172,254,0.2);

  677.       width: 180PX;

  678.       height: 100%;

  679.       position: absolute;

  680.       top: 0;

  681.     }

  682.     .name_icon{

  683.       position: absolute;

  684.       top: 60PX;

  685.       left: 50%;

  686.       transform: translateX(-50%);

  687.     }

  688.     .van-row:nth-child(odd){

  689.       .van-col {

  690.         background-color: #ffffff;

  691.       }

  692.     }

  693.     .van-row:nth-child(1){

  694.       border-top-left-radius: 10PX;

  695.       border-bottom-left-radius: 10PX;

  696.       background-color: #ffffff;

  697.       .van-col {

  698.         background-color: #2facfe;

  699.         color: #ffffff;

  700.         border-radius: 10PX;

  701.         line-height: 60PX;

  702.         text-align: center;

  703.       }

  704.     }

  705.     .van-col{

  706.       font-size: 16PX;

  707.       padding: 0PX 5PX;

  708.       text-align: left;

  709.       line-height: 40PX;

  710.       display: -webkit-box;

  711.       -webkit-box-orient: vertical;

  712.       -webkit-line-clamp: 1;

  713.       word-break: break-all;

  714.       overflow: hidden;

  715.     }

  716.   }

  717.   .center_box{

  718.     padding: 0 3%;

  719.   }

  720.   .right_box{

  721.     float: left;

  722.     width: calc(100%);

  723.     overflow:hidden;

  724.     overflow-x: scroll;

  725.     white-space:nowrap;

  726.     display: -webkit-box;

  727.     -webkit-overflow-scrolling: touch;

  728.     .right_box_box{

  729.       width: 600PX;

  730.     }

  731.     .van-row:nth-child(odd){

  732.       .van-col{

  733.         background-color: #ffffff;

  734.       }

  735.     }

  736.     .van-row:nth-child(1){

  737.       .van-col{

  738.         color: #2facfe;

  739.         height: 60PX;

  740.         text-align: center;

  741.         line-height: 30PX;

  742.         border-right: 1px solid #ccc;

  743.       }

  744.     }

  745.     .van-col{

  746.       font-size: 16PX;

  747.       text-align: right;

  748.       height: 40PX;

  749.       line-height: 40PX;

  750.       &:nth-child(2n){

  751.         border-right: 1px solid #ccc;

  752.       }

  753.     }

  754. 

  755.     .yue_type{

  756.       display: flex;

  757.       border-top: 1px solid #2facfe;

  758.       p{

  759.         width: 50%;

  760.         line-height: 30PX;

  761.         color: #333333;

  762.       }

  763.     }

  764. 

  765.   }

  766.   .clear{

  767.     clear: both;

  768.   }

  769. </style>