<template>
  <container class="container">
    <image class="banner" src="{{ds.topBanner}}"></image>
    <container class="rule-container">
      <link style="font-size:22;color:#ffffff;text-align:center;"
        text="帮助" href="{{ds.ruleLink}}"></link>
    </container>
    <container class="announce">
      <image class="announce-hd" src="{{ds.announceHdBanner}}"></image>
      <banners style="margin-left:6;margin-right:6;"
        ds="{{ds.bannerItems}}" direction="row" width="{{NUMBER_233}}"
        height="{{NUMBER_172}}" space="{{NUMBER_3}}">
      </banners>
    </container>
  </container>
</template>

<style>
  .banner {
    width: 750;
    height: 782;
  }

  .share-container {
    position: absolute;
    right: 100;
    top: 15;
    z-index: 100;
    font-size: 20;
    color: #ffffff;
    background-color: #000000;
    border-radius: 17;
    width: 110;
    height: 35;
    justify-content: center;
    align-items: center;
  }

  .rule-container {
    position: absolute;
    right: 22;
    top: 15;
    z-index: 100;
    font-size: 20;
    color: #ffffff;
    background-color: #000000;
    border-radius: 17;
    width: 70;
    height: 35;
    justify-content: center;
  }

  .announce {
    background-color: #f5f3f4;
    width: 716;
    height: 286;
    position: absolute;
    bottom: 17;
    left: 17;
    border-radius: 5;
  }

  .announce-hd {
    width: 700;
    height: 90;
    margin-top: 8;
    margin-bottom: 8;
    margin-left: 5;
    margin-right: 5;
  }
</style>

<script>
  module.exports = {
    data: {
      ds: {},
      NUMBER_233: 233,
      NUMBER_172: 172,
      NUMBER_3: 3
    },
    methods: {
      ready: function () {
        var self = this;
        self.isH5 = self._app.IS_H5;
        self.isTM = self._app.IS_TM;
        self.isTest = self._app.IS_TEST;
      },
    }
  };
</script>