unserver-unify/src/app/course/chapter/bishuns.html

<style type="text/css">
  .stroke_img {background: url('assets/images/strok_bg.jpg') no-repeat 0 0; background-size: 100%;}
</style>
<div class="single_word_stroke">
  <div class="stroke_writing" ng-if="!wctrl.chapter.multiCharacter">
    <div class="headline">
      <h3 translate="">
        {{ wctrl.chapter.name }}
      </h3>
    </div>
    <div class="row">
      <div class="col-md-6 col-xs-6">
        <div class="stroke_text same_idiom">
          <div ng-class="{'col-xs-4':wctrl.chapter.size==12,'col-xs-3':wctrl.chapter.size!=12,'current':wctrl.currentIndex==$index}" ng-click="wctrl.show($index)" ng-repeat="ppt in wctrl.chapter.ppts">
            <h2 class="seprate">
              <span>
                {{ppt.word}}
              </span>
            </h2>
          </div>
        </div>
      </div>
      <div class="stroke_audio col-md-6 col-xs-6 padding-left-0 text-center">
        <h3>
          {{wctrl.currentPPT.word}}
          <span>
            {{wctrl.currentPPT.proun}}
          </span>
        </h3>
        <span>
          {{wctrl.currentPPT.explain}}
          <a class="fa fa-volume-down" ng-click="wctrl.playWord(wctrl.currentPPT.explain)">
          </a>
        </span>
        <div class="margin-bottom-30">
        </div>
        <div class="stroke_img">
          <img ng-src="//https.bamboostudy.com/bishun/{{wctrl.currentPPT.code}}.gif"/>
        </div>
        <h4>
          {{wctrl.currentPPT.examples}}
        </h4>
      </div>
    </div>
  </div>
  <div ng-if="wctrl.chapter.multiCharacter">
    <div class="carousel-inner stroke_audio" title="{{wctrl.currentPPT.explain}}">
      <div class="col-md-5 col-md-offset-1 text-center" style="padding-top: 8%;">
        <h3>
          {{wctrl.currentPPT.word}}
          <span>
            {{wctrl.currentPPT.proun}}
          </span>
        </h3>
        <span>
          {{wctrl.currentPPT.explain}}
          <a class="fa fa-volume-down" ng-click="wctrl.playWord(wctrl.currentPPT.explain)">
          </a>
        </span>
        <img ng-src="//https.bamboostudy.com/bishunjpg/{{wctrl.currentPPT.code}}_bishun.jpg" style="margin-top: 10%;"/>
        <h4>
          {{wctrl.currentPPT.examples}}
        </h4>
      </div>
      <div class="col-md-6 text-center" style="padding-top: 18%;">
        <div class="stroke_img">
          <img ng-src="//https.bamboostudy.com/bishun/{{wctrl.currentPPT.code}}.gif"/>
        </div>
      </div>
    </div>
    <!-- video exist -->
    <a class="left carousel-control" id="iconleft" ng-click="wctrl.lastPage()">
      <span class="glyphicon glyphicon-chevron-left">
      </span>
    </a>
    <a class="right carousel-control" id="iconright" ng-click="wctrl.nextPage();">
      <span class="glyphicon glyphicon-chevron-right" id="icongright">
      </span>
    </a>
    <div class="badge badge-info page_info">
      {{wctrl.index+1}} / {{wctrl.chapter.ppts.length}}
    </div>
    <div class="letter_pagination">
      <a class="btn btn-default" ng-class="{'current':wctrl.index==$index}" ng-click="wctrl.show($index)" ng-repeat="ppt in wctrl.chapter.ppts">
        {{ppt.word}}
      </a>
    </div>
    <div class="clearfix">
    </div>
  </div>
</div>