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

<div class="stroke_writing_all" ng-if="!wctrl.chapter.multiCharacter" style="height: 96%;">
  <div class="btn-group pull-right" style="margin-left: 5px;">
    <a class="btn btn-u" ng-click="wctrl.playUserAudio()" ng-if="wctrl.playbacksrc">
      <i class="fa fa-volume-up">
      </i>
    </a>
    <a class="btn btn-danger" ng-click="wctrl.recordAudio()" ng-if="wctrl.recordingMode=='idle'">
      <i class="fa fa-microphone">
      </i>
    </a>
    <a class="btn btn-danger" ng-click="wctrl.stopRecording()" ng-if="wctrl.recordingMode=='recording'" title="{{'Stop' | translate}}">
      <i class="fa fa-dot-circle-o blink">
      </i>
      {{'Stop'| translate}}
    </a>
  </div>
  <div class="btn-group pull-right" ng-if="wctrl.recordingMode!='recording'">
    <button class="btn btn-info" ng-model="wctrl.mode" uib-btn-radio="'single'" uncheckable="">
      读单字
    </button>
    <label class="btn btn-info" ng-model="wctrl.mode" uib-btn-radio="'word'" uncheckable="">
      读词语
    </label>
    <label class="btn btn-info" ng-click="wctrl.playChapterAudio()" ng-if="wctrl.chapter.options.chapteraudio" ng-model="wctrl.mode" uib-btn-radio="'all'" uib-uncheckable="uncheckable">
      读课文
    </label>
    <label class="btn btn-info" ng-click="wctrl.playAll()" ng-if="!wctrl.chapter.options||wctrl.chapter.options.onebyone" ng-model="wctrl.mode" uib-btn-radio="'onebyone'">
      读全篇
    </label>
    <label class="btn btn-info" ng-model="wctrl.mode" uib-btn-radio="'explain'" uib-tooltip="点击成语名查看对应成语注释" tooltip-placement="bottom">
      注释
    </label>
  </div>
  <div class="headline text-left">
    <h3>
      {{ wctrl.chapter.name }}
    </h3>
  </div>
  <div class="clearfix">
  </div>
  <div class="row text-center padding-left-15" style="height: 87%;">
    <div class="no-padding" ng-class="{'col-xs-3':wctrl.chapter.size==2, 'col-xs-2':wctrl.chapter.size==3 || wctrl.chapter.size==4}" ng-if="wctrl.chapter.content||wctrl.chapter.photo" style="position: relative; height: 100%">
      <div class="message_container" ng-if="wctrl.chapter.content">
        <div class="message_box">
          <p>
            {{wctrl.chapter.content}}
          </p>
        </div>
      </div>
      <img ng-if="wctrl.chapter.photo" ng-src="{{wctrl.resUrl+wctrl.chapter.photo}}" style="width:100%; position:absolute; left:0; bottom:0;"/>
    </div>
    <div class="col-xs-9 popover_container2" ng-class="{'col-xs-offset-1':!wctrl.chapter.content && !wctrl.chapter.photo}" ng-if="wctrl.chapter.size==2" style="margin-bottom: 20px;">
      <div class="margin-bottom-20">
      </div>
      <!--div class="col-xs-6" ng-repeat="ppt in wctrl.chapter.ppts"-->
      <div class="col-xs-6" ng-repeat="ppt in wctrl.chapter.ppts">
        <div class="stroke_text multi_idiom" popover-enable="wctrl.mode!='single'&&wctrl.mode!='all'&&wctrl.mode!='onebyone'&&wctrl.mode!='word'" popover-placement="{{wctrl.get24Placement($index)}}" popover-trigger="'outsideClick'"  uib-popover-template="'app/course/chapter/popover2.html'">
          <div>
            <h2 class="seprate count_4" ng-class="{'seprate_highlight':wctrl.mode=='single', 'active':ppt.word==wctrl.currentPPT.word && wctrl.mode!='single','extword':ppt.ext}">
              <a ng-class="{'active':wctrl.charactor==word}" ng-click="wctrl.playAudio(word,ppt)" ng-repeat="word in ppt.word track by $index">
                <span>
                  {{word}}
                </span>
              </a>
            </h2>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-9 popover_container2" ng-class="{'col-xs-offset-2':!wctrl.chapter.content && !wctrl.chapter.photo}" ng-if="wctrl.chapter.size==5" style="margin-bottom: 20px;">
      <div class="margin-bottom-20">
      </div>
      <div class="col-xs-5" ng-repeat="ppt in wctrl.chapter.ppts">
        <div class="stroke_text multi_idiom" popover-enable="wctrl.mode!='single'&&wctrl.mode!='all'&&wctrl.mode!='onebyone'&&wctrl.mode!='word'" popover-placement="{{wctrl.get24Placement($index)}}" popover-trigger="'outsideClick'"  uib-popover-template="'app/course/chapter/popover2.html'">
          <div>
            <h2 class="seprate count_3" ng-class="{'seprate_highlight':wctrl.mode=='single', 'active':ppt.word==wctrl.currentPPT.word && wctrl.mode!='single','extword':ppt.ext}">
              <a ng-class="{'active':wctrl.charactor==word}" ng-click="wctrl.playAudio(word,ppt)" ng-repeat="word in ppt.word track by $index">
                <span>
                  {{word}}
                </span>
              </a>
            </h2>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-10 column_3" ng-class="{'col-xs-offset-1':!wctrl.chapter.content&&!wctrl.chapter.photo}" ng-if="wctrl.chapter.size==3" style="margin-bottom: 20px;">
      <div class="margin-bottom-20">
      </div>
      <!--div class="col-xs-6" ng-repeat="ppt in wctrl.chapter.ppts"-->
      <div class="col-xs-4 padding-right-0" ng-repeat="ppt in wctrl.chapter.mainppts">
        <div class="stroke_text multi_idiom" popover-enable="wctrl.mode!='single'&&wctrl.mode!='all'&&wctrl.mode!='word'&&wctrl.mode!='onebyone'" popover-placement="{{wctrl.get34Placement($index)}}" popover-trigger="'outsideClick'" uib-popover-template="'app/course/chapter/popover2.html'">
          <div>
            <h2 class="count_4" ng-class="{'seprate_highlight':wctrl.mode=='single', 'active':ppt.word==wctrl.currentPPT.word && wctrl.mode!='single','count_4':wctrl.chapter.size==2||!wctrl.chapter.size}">
              <a ng-click="wctrl.playAudio(word,ppt)" ng-repeat="word in ppt.word track by $index">
                <span>
                  {{word}}
                </span>
              </a>
            </h2>
          </div>
        </div>
      </div>
      <div class="clearfix">
      </div>
      <div class="col-xs-4 padding-right-0" ng-repeat="ppt in wctrl.chapter.extppts">
        <div class="stroke_text extword multi_idiom" popover-enable="wctrl.mode!='single'&&wctrl.mode!='all'&&wctrl.mode!='word'&&wctrl.mode!='onebyone'" popover-placement="bottom" popover-trigger="'outsideClick'" uib-popover-template="'app/course/chapter/popover3.html'">
          <div>
            <h2 class="count_4" ng-class="{'seprate_highlight':wctrl.mode=='single', 'active':ppt.word==wctrl.currentPPT.word && wctrl.mode!='single','count_4':wctrl.chapter.size==2||!wctrl.chapter.size}">
              <a ng-click="wctrl.playAudio(word,ppt)" ng-repeat="word in ppt.word track by $index">
                <span>
                  {{word}}
                </span>
              </a>
            </h2>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-10 column_4" ng-class="{'col-xs-offset-1':!wctrl.chapter.content&&!wctrl.chapter.photo}" ng-if="wctrl.chapter.size==4" style="margin-bottom: 20px;">
      <div class="margin-bottom-20">
      </div>
      <div class="col-xs-3 padding-right-0" ng-repeat="ppt in wctrl.chapter.mainppts">
        <div class="stroke_text multi_idiom" popover-enable="wctrl.mode!='single'&&wctrl.mode!='all'&&wctrl.mode!='word'&&wctrl.mode!='onebyone'" popover-placement="{{wctrl.get44Placement($index)}}" popover-trigger="'outsideClick'" uib-popover-template="'app/course/chapter/popover2.html'">
          <div>
            <h2 class="count_3" ng-class="{'seprate_highlight':wctrl.mode=='single', 'active':ppt.word==wctrl.currentPPT.word && wctrl.mode!='single','count_4':wctrl.chapter.size==2||!wctrl.chapter.size}">
              <a ng-click="wctrl.playAudio(word,ppt)" ng-repeat="word in ppt.word track by $index">
                <span>
                  {{word}}
                </span>
              </a>
            </h2>
          </div>
        </div>
      </div>
      <div class="clearfix">
      </div>
      <div class="col-xs-3 padding-right-0" ng-repeat="ppt in wctrl.chapter.extppts">
        <div class="stroke_text extword multi_idiom" popover-enable="wctrl.mode!='single'&&wctrl.mode!='all'&&wctrl.mode!='word'&&wctrl.mode!='onebyone'" popover-placement="bottom" popover-trigger="'outsideClick'" uib-popover-template="'app/course/chapter/popover2.html'">
          <div>
            <h2 class="count_3" ng-class="{'seprate_highlight':wctrl.mode=='single', 'active':ppt.word==wctrl.currentPPT.word && wctrl.mode!='single','count_4':wctrl.chapter.size==2||!wctrl.chapter.size}">
              <a ng-click="wctrl.playAudio(word,ppt)" ng-repeat="word in ppt.word track by $index">
                <span>
                  {{word}}
                </span>
              </a>
            </h2>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="stroke_writing_all" ng-if="wctrl.chapter.multiCharacter">
  <div class="pull-right btn-group">
    <label class="btn btn-info" ng-model="wctrl.mode" uib-btn-radio="'single'" uncheckable="">
      单字发音
    </label>
    <label class="btn btn-info" ng-model="wctrl.mode" uib-btn-radio="'word'" uncheckable="">
      词语发音
    </label>
    <label class="btn btn-info" ng-click="wctrl.playAll()" ng-model="wctrl.mode" uib-btn-radio="'all'" uib-uncheckable="uncheckable">
      全篇朗读
    </label>
  </div>
  <div class="headline">
    <h3>
      {{ wctrl.chapter.name }}
    </h3>
  </div>
  <div class="row text-center no-padding">
    <div class="col-md-8 col-xs-8 text-center no-padding">
      <div class="col-xs-6" ng-repeat="ppt in wctrl.chapter.ppts">
        <div class="stroke_text multi_idiom">
          <div>
            <h2 class="seprate count_4" ng-class="{'seprate_highlight':wctrl.mode=='single', 'active':ppt.word==wctrl.currentPPT.word && wctrl.mode!='single'}">
              <a ng-click="wctrl.playAudio(word,ppt)" ng-repeat="word in ppt.word track by $index">
                <span>
                  {{word}}
                </span>
              </a>
            </h2>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4 col-xs-4 padding-left-0">
      <div class="info_box">
        <h3 ng-if="wctrl.currentPPT.word">
          {{wctrl.currentPPT.word}}
        </h3>
        <h4 class="relative" ng-if="wctrl.currentPPT.explain">
          {{wctrl.currentPPT.explain}}
          <a class="fa fa-volume-down" ng-click="wctrl.playWord(wctrl.currentPPT.explain)" style="position: absolute; right:0; top: -15px;">
          </a>
        </h4>
        <p ng-if="wctrl.mode!='single'" style="color:brown;">
          {{wctrl.currentPPT.source}}
        </p>
        <p ng-if="wctrl.mode!='single'">
          {{wctrl.currentPPT.example}}
        </p>
        <div class="stroke_img" ng-if="wctrl.mode=='single'&&wctrl.code">
          <img ng-src="//https.bamboostudy.com/bishun/{{wctrl.code}}.gif"/>
        </div>
      </div>
    </div>
  </div>
</div>