<!--左边、上边固定，内容自适应-->
<template>
  <div class="left_top_main">

    <div class="left">
      左边、
    </div>

    <div class="top">
      上边
    </div>

    <div class="main">
      <h1>中间</h1>
      <div>
        <table>
          <tr v-for="(list,listIndex) in numList">
            <td v-for="item in list">{{item | three}}</td>
          </tr>
        </table>
      </div>
      <div class="test">
        <h1>社戏</h1>
        <p>我在倒数上去的二十年中，只看过两回中国戏，前十年是绝不看，因为没有看戏的意思和机会，那两回全在后十年，然而都没有看出什么来就走了。</p>
        <p>
          第一回是民国元年我初到北京的时候，当时一个朋友对我说，北京戏最好，你不去见见世面么？我想，看戏是有味的，而况在北京呢。于是都兴致勃勃的跑到什么园，戏文已经开场了，在外面也早听到冬冬地响。我们挨进门，几个红的绿的在我的眼前一闪烁，便又看见戏台下满是许多头，再定神四面看，却见中间也还有几个空座，，挤过去要坐时，又有人对我发议论，我因为耳朵已经喤的响着了，用了心，才听到他是说“有人，不行！”</p>
        <p>
          我们退到后面，一个辫子很光的却来领我们到了侧面，指出一个地位来。这所谓地位者，原来是一条长凳，然而他那坐板比我的上腿要狭到四分之三，他的脚比我的下腿要长过三分之二。我先是没有爬上去的勇气，接着便联想到私刑拷打的刑具，不由的毛骨悚然的走出了。</p>
        <p>走了许多路，忽听得我的朋友的声音道，“究竟怎的？”我回过脸去，原来他也被我带出来了。他很诧异的说，“怎么总是走，不答应？”我说，“朋友，对不起，我耳朵只在冬冬喤喤的响，并没有听到你的话。”</p>
        <p>后来我每一想到，便很以为奇怪，似乎这戏太不好，否则便是我近来在戏台下不适于生存了。</p>
        <p>
          第二回忘记了那一年，总之是募集湖北水灾捐而谭叫天⑵还没有死。捐法是两元钱买一张戏票，可以到第一舞台去看戏，扮演的多是名角，其一就是小叫天。我买了一张票，本是对于劝募人聊以塞责的，然而似乎又有好事家乘机对我说了些叫天不可不看的大法要了。我于是忘了前几年的冬冬喤喤之灾，竟到第一舞台去了，但大约一半也因为重价购来的宝票，总得使用了才舒服。我打听得叫天出台是迟的，而第一舞台却是新式构造，用不着争座位，便放了心，延宕到九点钟才去，谁料照例，人都满了，连立足也难，我只得挤在远处的人丛中看一个老旦在台上唱。那老旦嘴边插着两个点火的纸捻子，旁边有一个鬼卒，我费尽思量，才疑心他或者是目连⑶的母亲，因为后来又出来了一个和尚。然而我又不知道那名角是谁，就去问挤小在我的左边的一位胖绅士。他很看不起似的斜瞥了我一眼，说道，“龚云甫⑷！”我深愧浅陋而且粗疏，脸上一热，同时脑里也制出了决不再问的定章，于是看小旦唱，看花旦唱，看老生唱，看不知什么角色唱，看一大班人乱打，看两三个人互打，从九点多到十点，从十点到十一点，从十一点到十一点半，从十一点半到十二点，然而叫天竟还没有来。</p>
        <p>
          我向来没有这样忍耐的等待过什么事物，而况这身边的胖绅士的吁吁的喘气，这台上的冬冬喤喤的敲打，红红绿绿的晃荡，加之以十二点，忽而使我省误到在这里不适于生存了。我同时便机械的拧转身子，用力往外只一挤，觉得背后便已满满的，大约那弹性的胖绅士早在我的空处胖开了他的右半身了。我后无回路，自然挤而又挤2，终于出了大门。街上除了专等看客的车辆之外，几乎没有什么行人了，大门口却还有十几个人昂着头看戏目，别有一堆人站着并不看什么，我想：他们大概是看散戏之后出来的女人们的，而叫天却还没有来……</p>
        <p>然而夜气很清爽，真所谓“沁人心脾”，我在北京遇着这样的好空气，仿佛这是第一遭了。</p>
        <p>这一夜，就是我对于中国戏告了别的一夜，此后再没有想到他，即使偶而经过戏园，我们也漠不相关，精神上早已一在天之南一在地之北了。</p>
        <p>
          但是前几天，我忽在无意之中看到一本日本文的书，可惜忘记了书名和著者，总之是关于中国戏的。其中有一篇，大意仿佛说，中国戏是大敲，大叫，大跳，使看客头昏脑眩，很不适于剧场，但若在野外散漫的所在，远远的看起来，也自有他的风致。我当时觉着这正是说了在我意中而未曾想到的话，因为我确记得在野外看过很好的戏，到北京以后的连进两回戏园去，也许还是受了那时的影响哩。可惜我不知道怎么一来，竟将书名忘却了。</p>
        <p>
          至于我看好戏的时候，却实在已经是“远哉遥遥”的了，其时恐怕我还不过十一二岁。我们鲁镇的习惯，本来是凡有出嫁的女儿，倘自己还未当家，夏间便大抵回到母家去消夏。那时我的祖母虽然还康建，但母亲也已分担了些家务，所以夏期便不能多日的归省了，只得在扫墓完毕之后，抽空去住几天，这时我便每年跟了我的母亲住在外祖母的家里。那地方叫平桥村，是一个离海边不远，极偏僻的，临河的小村庄；住户不满三十家，都种田，打鱼，只有一家很小的杂货店。但在我是乐土：因为我在这里不但得到优待，又可以免念“秩秩斯干幽幽南山”⑸了。</p>
        <p>
          和我一同玩的是许多小朋友，因为有了远客，他们也都从父母那里得了减少工作的许可，伴我来游戏。在小村里，一家的客，几乎也就是公共的。我们年纪都相仿，但论起行辈来，却至少是叔子，有几个还是太公，因为他们合村都同姓，是本家。然而我们是朋友，即使偶而吵闹起来，打了太公，一村的老老少少，也决没有一个会想出“犯上”这两个字来，而他们也百分之九十九不识字。</p>
        <p>
          我们每天的事情大概是掘蚯蚓，掘来穿在铜丝做的小钩上，伏在河沿上去钓虾。虾是水世界里的呆子，决不惮用了自己的两个钳捧着钩尖送到嘴里去的，所以不半天便可以钓到一大碗。这虾照例是归我吃的。其次便是一同去放牛，但或者因为高等动物了的缘故罢，黄牛水牛都欺生，敢于欺侮我，因此我也总不敢走近身，只好远远地跟着，站着。这时候，小朋友们便不再原谅我会读“秩秩斯干”，却全都嘲笑起来了。</p>
        <p>至于我在那里所第一盼望的，却在到赵庄去看戏。赵庄是离平桥村五里的较大的村庄；平桥村太小，自己演不起戏，每年总付给赵庄多少钱，算作合做的。当时我并不想到他们为什么年年要演戏。现在想，那或者是春赛，是社戏⑹了。</p>
        <p>
          就在我十一二岁时候的这一年，这日期也看看等到了。不料这一年真可惜，在早上就叫不到船。平桥村只有一只早出晚归的航船是大船，决没有留用的道理。其余的都是小船，不合用；央人到邻村去问，也没有，早都给别人定下了。外祖母很气恼，怪家里的人不早定，絮叨起来。母亲便宽慰伊，说我们鲁镇的戏比小村里的好得多，一年看几回，今天就算了。只有我急得要哭，母亲却竭力的嘱咐我，说万不能装模装样，怕又招外祖母生气，又不准和别人一同去，说是怕外祖母要担心。</p>
        <p>总之，是完了。到下午，我的朋友都去了，戏已经开场了，我似乎听到锣鼓的声音，而且知道他们在戏台下买豆浆喝。</p>
        <p>
          这一天我不钓虾，东西也少吃。母亲很为难，没有法子想。到晚饭时候，外祖母也终于觉察了，并且说我应当不高兴，他们太怠慢，是待客的礼数里从来没有的。吃饭之后，看过戏的少年们也都聚拢来了，高高兴兴的来讲戏。只有我不开口；他们都叹息而且表同情。忽然间，一个最聪明的双喜大悟似的提议了，他说，“大船？八叔的航船不是回来了么？”十几个别的少年也大悟，立刻撺掇起来，说可以坐了这航船和我一同去。我高兴了。然而外祖母又怕都是孩子，不可靠；母亲又说是若叫大人一同去，他们白天全有工作，要他熬夜，是不合情理的。在这迟疑之中，双喜可又看出底细来了，便又大声的说道，“我写包票！船又大；迅哥儿向来不乱跑；我们又都是识水性的！”</p>
        <p>诚然！这十多个少年，委实没有一个不会凫水的，而且两三个还是弄潮的好手。</p>
        <p>外祖母和母亲也相信，便不再驳回，都微笑了。我们立刻一哄的出了门。</p>
        <p>
          我的很重的心忽而轻松了，身体也似乎舒展到说不出的大。一出门，便望见月下的平桥内泊着一只白篷的航船，大家跳下船，双喜拔前篙，阿发拔后篙，年幼的都陪我坐在舱中，较大的聚在船尾。母亲送出来吩咐“要小心”的时候，我们已经点开船，在桥石上一磕，退后几尺，即又上前出了桥。于是架起两支橹，一支两人，一里一换，有说笑的，有嚷的，夹着潺潺的船头激水的声音，在左右都是碧绿的豆麦田地的河流中，飞一般径向赵庄前进了。</p>
        <p>
          两岸的豆麦和河底的水草所发散出来的清香，夹杂在水气中扑面的吹来；月色便朦胧在这水气里。淡黑的起伏的连山，仿佛是踊跃的铁的兽脊似的，都远远的向船尾跑去了，但我却还以为船慢。他们换了四回手，渐望见依稀的赵庄，而且似乎听到歌吹了，还有几点火，料想便是戏台，但或者也许是渔火。</p>
        <p>那声音大概是横笛，宛转，悠扬，使我的心也沉静，然而又自失起来，觉得要和他弥散在含着豆麦蕴藻之香的夜气里。</p>
        <p>那火接近了，果然是渔火；我才记得先前望见的也不是赵庄。那是正对船头的一丛松柏林，我去年也曾经去游玩过，还看见破的石马倒在地下，一个石羊蹲在草里呢。过了那林，船便弯进了叉港，于是赵庄便真在眼前了。</p>
        <p>
          最惹眼的是屹立在庄外临河的空地上的一座戏台，模胡在远处的月夜中，和空间几乎分不出界限，我疑心画上见过的仙境，就在这里出现了。这时船走得更快，不多时，在台上显出人物来，红红绿绿的动，近台的河里一望乌黑的是看戏的人家的船篷。</p>
        <p>“近台没有什么空了，我们远远的看罢。”阿发说。</p>
        <p>这时船慢了，不久就到，果然近不得台旁，大家只能下了篙，比那正对戏台的神棚还要远。其实我们这白篷的航船，本也不愿意和乌篷的船在一处，而况没有空地呢……</p>
        <p>在停船的匆忙中，看见台上有一个黑的长胡子的背上插着四张旗，捏着长枪，和一群赤膊的人正打仗。双喜说，那就是有名的铁头老生，能连翻八十四个筋斗，他日里亲自数过的。</p>
        <p>
          我们便都挤在船头上看打仗，但那铁头老生却又并不翻筋斗，只有几个赤膊的人翻，翻了一阵，都进去了，接着走出一个小旦来，咿咿呀呀的唱。双喜说，“晚上看客少，铁头老生也懈了，谁肯显本领给白地看呢？”我相信这话对，因为其时台下已经不很有人，乡下人为了明天的工作，熬不得夜，早都睡觉去了，疏疏朗朗的站着的不过是几十个本村和邻村的闲汉。乌篷船里的那些土财主的家眷固然在，然而他们也不在乎看戏，多半是专到戏台下来吃糕饼水果和瓜子的。所以简直可以算白地。</p>
        <p>
          然而我的意思却也并不在乎看翻筋斗。我最愿意看的是一个人蒙了白布，两手在头上捧着一支棒似的蛇头的蛇精，其次是套了黄布衣跳老虎。但是等了许多时都不见，小旦虽然进去了，立刻又出来了一个很老的小生。我有些疲倦了，托桂生买豆浆去。他去了一刻，回来说，“没有。卖豆浆的聋子也回去了。日里倒有，我还喝了两碗呢。现在去舀一瓢水来给你喝罢。”</p>
        <p>
          我不喝水，支撑着仍然看，也说不出见了些什么，只觉得戏子的脸都渐渐的有些稀奇了，那五官渐不明显，似乎融成一片的再没有什么高低。年纪小的几个多打呵欠了，大的也各管自己谈话。忽而一个红衫的小丑被绑在台柱子上，给一个花白胡子的用马鞭打起来了，大家才又振作精神的笑着看。在这一夜里，我以为这实在要算是最好的一折。</p>
        <p>
          然而老旦终于出台了。老旦本来是我所最怕的东西，尤其是怕他坐下了唱。这时候，看见大家也都很扫兴，才知道他们的意见是和我一致的。那老旦当初还只是踱来踱去的唱，后来竟在中间的一把交椅上坐下了。我很担心；双喜他们却就破口喃喃的骂。我忍耐的等着，许多工夫，只见那老旦将手一抬，我以为就要站起来了，不料他却又慢慢的放下在原地方，仍旧唱。全船里几个人不住的吁气，其余的也打起哈欠来。双喜终于熬不住了，说道，怕他会唱到天明还不完，还是我们走的好罢。大家立刻都赞成，和开船时候一样踊跃，三四人径奔船尾，拔了篙，点退几丈，回转船头，驾起橹，骂着老旦，又向那松柏林前进了。</p>
        <p>
          月还没有落，仿佛看戏也并不很久似的，而一离赵庄，月光又显得格外的皎洁。回望戏台在灯火光中，却又如初来未到时候一般，又漂渺得像一座仙山楼阁，满被红霞罩着了。吹到耳边来的又是横笛，很悠扬；我疑心老旦已经进去了，但也不好意思说再回去看。</p>
        <p>
          不多久，松柏林早在船后了，船行也并不慢，但周围的黑暗只是浓，可知已经到了深夜。他们一面议论着戏子，或骂，或笑，一面加紧的摇船。这一次船头的激水声更其响亮了，那航船，就像一条大白鱼背着一群孩子在浪花里蹿，连夜渔的几个老渔父，也停了艇子看着喝采起来。</p>
        <p>
          离平桥村还有一里模样，船行却慢了，摇船的都说很疲乏，因为太用力，而且许久没有东西吃。这回想出来的是桂生，说是罗汉豆⑺正旺相，柴火又现成，我们可以偷一点来煮吃。大家都赞成，立刻近岸停了船；岸上的田里，乌油油的都是结实的罗汉豆。</p>
        <p>“阿阿，阿发，这边是你家的，这边是老六一家的，我们偷那一边的呢？”双喜先跳下去了，在岸上说。</p>
        <p>
          我们也都跳上岸。阿发一面跳，一面说道，“且慢，让我来看一看罢，”他于是往来的摸了一回，直起身来说道，“偷我们的罢，我们的大得多呢。”一声答应，大家便散开在阿发家的豆田里，各摘了一大捧，抛入船舱中。双喜以为再多偷，倘给阿发的娘知道是要哭骂的，于是各人便到六一公公的田里又各偷了一大捧。</p>
        <p>
          我们中间几个年长的仍然慢慢的摇着船，几个到后舱去生火，年幼的和我都剥豆。不久豆熟了，便任凭航船浮在水面上，都围起来用手撮着吃。吃完豆，又开船，一面洗器具，豆荚豆壳全抛在河水里，什么痕迹也没有了。双喜所虑的是用了八公公船上的盐和柴，这老头子很细心，一定要知道，会骂的。然而大家议论之后，归结是不怕。他如果骂，我们便要他归还去年在岸边拾去的一枝枯桕树，而且当面叫他“八癞子”。</p>
        <p>“都回来了！那里会错。我原说过写包票的！”双喜在船头上忽而大声的说。</p>
        <p>
          我向船头一望，前面已经是平桥。桥脚上站着一个人，却是我的母亲，双喜便是对伊说着话。我走出前舱去，船也就进了平桥了，停了船，我们纷纷都上岸。母亲颇有些生气，说是过了三更了，怎么回来得这样迟，但也就高兴了，笑着邀大家去吃炒米。</p>
        <p>大家都说已经吃了点心，又渴睡，不如及早睡的好，各自回去了。</p>
        <p>第二天，我向午才起来，并没有听到什么关系八公公盐柴事件的纠葛，下午仍然去钓虾。</p>
        <p>“双喜，你们这班小鬼，昨天偷了我的豆了罢？又不肯好好的摘，蹋坏了不少。”我抬头看时，是六一公公棹着小船，卖了豆回来了，船肚里还有剩下的一堆豆。</p>
        <p>“是的。我们请客。我们当初还不要你的呢。你看，你把我的虾吓跑了！”双喜说。</p>
        <p>六一公公看见我，便停了楫，笑道，“请客？这是应该的。”于是对我说，“迅哥儿，昨天的戏可好么？”</p>
        <p>我点一点头，说道，“好。”</p>
        <p>“豆可中吃呢？”</p>
        <p>我又点一点头，说道，“很好。”</p>
        <p>
          不料六一公公竟非常感激起来，将大拇指一翘，得意的说道，“这真是大市镇里出来的读过书的人才识货！我的豆种是粒粒挑选过的，乡下人不识好歹，还说我的豆比不上别人的呢。我今天也要送些给我们的姑奶奶尝尝去……”他于是打着楫子过去了。</p>
        <p>
          待到母亲叫我回去吃晚饭的时候，桌上便有一大碗煮熟了的罗汉豆，就是六一公公送给母亲和我吃的。听说他还对母亲极口夸奖我，说“小小年纪便有见识，将来一定要中状元。姑奶奶，你的福气是可以写包票的了。”但我吃了豆，却并没有昨夜的豆那么好。</p>
        <p>真的，一直到现在，我实在再没有吃到那夜似的好豆，也不再看到那夜似的好戏了。</p>
        <p>一九二二年十月。</p>
        <p>注释</p>
        <p>⑴本篇最初发表于一九二二年十二月上海《小说月报》第十三卷第十二号。</p>
        <p>⑵谭叫天（18471917）：即谭鑫培，又称小叫天，当时的京剧演员，擅长老生戏。</p>
        <p>⑶目连：释迦牟尼的弟子。据《盂兰盆经》说，目连的母亲因生前违犯佛教戒律，堕入地狱，他曾入地狱救母。《目连救母》一剧，旧时在民间很流行。</p>
        <p>⑷龚云甫（18621932）：当时的京剧演员，擅长老旦戏。</p>
        <p>⑸“秩秩斯干幽幽南山”：语见《诗经·小雅·斯干》。据汉代郑玄注：“秩秩，流行也；干，涧也；幽幽，深远也。”</p>
        <p>⑹社戏：“社”原指土地神或土地庙。在绍兴，社是一种区域名称，社戏就是社中每年所演的“年规戏”。</p>
        <p>⑺罗汉豆：即蚕豆。</p>
        <p>〔《呐喊》〕</p>
        <p>打字：反正不是本人</p>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "left_top_main",
    data(){
      return {
        numList: [],
      }
    },
    methods: {
      // 随机数
      getRandomNum(){
        let randomNum = Math.round(Math.random() * 900000000000);  //基本均衡获取0到 xxx 的随机整数，其中获取最小值0和最大值10的几率少一半。
        return randomNum;
      },
      repeat(){
        let arr = [];
        for (let i = 0; i < 100; i++) { // 一维数组转二维数组
          if (i < 20) {
            arr[i] = [];
          }
          arr[i % 20].push(this.getRandomNum());
        }
        this.numList = arr;
      }
    },
    created(){

    },
    mounted(){
      this.repeat();
    },
    filters: {
      three(num){
        var num = (num || 0).toString(), result = '';
        while (num.length > 3) {
          result = ',' + num.slice(-3) + result;
          num = num.slice(0, num.length - 3);
        }
        if (num) {
          result = num + result;
        }
        return result;
      }
    },

  }
</script>

<style scoped>
  .left_top_main {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .left_top_main .left {
    width: 200px;
    height: 100%;
    background: #ffccaa;
    position: absolute;
    top: 0;
    left: 0;
    color: #FFF;
    padding-top: 80px;
    box-sizing: border-box;
  }

  .left_top_main .top {
    height: 80px;
    width: 100%;
    background: #2c3e50;
    position: absolute;
    top: 0;
    left: 0;
    color: #FFF;
    padding-left: 200px;
    box-sizing: border-box;
  }

  .left_top_main .main {
    width: 100%;
    height: 100%;
    background: #fcd;
    padding: 100px 20px 20px 220px;
    box-sizing: border-box;
    overflow-y: scroll;
  }

  .left_top_main .main table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
  }

  .left_top_main .main table td {
    height: 30px;
    line-height: 30px;
    border: 1px solid red;
  }

  .left_top_main .main .test {
    background: blueviolet;
  }

  .left_top_main .main .test p {
    text-indent: 30px;
    margin-top: 10px;
    color: #FFF;
  }
  * {
    padding: 0;
    margin: 0;
  }

  #app, html, body {
    width: 100%;
    height: 100%;
  }
</style>