english_learned_master/pages/main/article.wxml

<view class="{{ThemeCSS}} container FlexColumn" style='min-height:{{Containnerheight}}rpx;' bindtap="onContainerTap">
  <view class="panel1 FlexColumn">
    <rich-text class="textArticle" wx:if="{{!IsShowTranslate}}" nodes="{{Content.ArticleEnglishStr}}"></rich-text>
    <view class="textArticle FlexColumn" wx:if="{{IsShowTranslate}}">
      <view wx:for="{{Content.ArticleEnglish}}" wx:key="index" class="textArticle">
        <rich-text class="textArticle" nodes="{{item}}"></rich-text>
        <view class="textArticleTranslate">{{Content.ArticleChinese[index]}}</view>
        <view class="panelLine" wx:if="{{index<Content.ArticleEnglish.length-1}}"></view>
      </view>
    </view>
  </view>

  <view wx:if="{{!IsShowQuestion}}" class="panelFooter FlexRow">
    <view class="panelFooter1 FlexRow">
      <view class="panelFooter11 panelFooter10 FlexColumn" bindtap="generatePDF">
        <image src="../images/sysIcon_a07.png" class="sysIcon_a03"></image>
        <view class="text02">PDF下载</view>
      </view>
      <view class="panelFooter12 panelFooter10 FlexColumn" bind:tap="showData" data-name="IsShowQuestion">
        答题
      </view>
      <view class="panelFooter13 panelFooter10 FlexColumn" bind:tap="showData" data-name="IsShowSetting">
        <image src="../images/sysIcon_a08.png" class="sysIcon_a03"></image>
        <view class="text02">设置</view>
      </view>
    </view>
  </view>

  <!-- 看问题 -->
  <view hidden="{{!IsShowQuestion}}" class="{{ThemeCSS}} panelAnswer FlexColumn">
    <view class="text03">Reading Comprehension Questions</view>
    <swiper class="panelAnswer1" indicator-dots="true" current="{{CurrentQuestionIndex}}" bindchange="updateQuestionIndex" >
      <swiper-item class="panelAnswer1Item" wx:for="{{Content.Question}}" wx:key="index" data-index="{{index}}">
        <scroll-view scroll-y="true" class="panelAnswer1Item1 FlexColumn">
          <view class="panelAnswer2 FlexRow">
            <image src="../images/sysIcon_c0{{index+1}}.png" wx:if="{{ThemeCSS=='DarkColor'}}" class="sysIcon_c01"></image>
            <image src="../images/sysIcon_d0{{index+1}}.png" wx:if="{{ThemeCSS=='LightColor'}}" class="sysIcon_c01"></image>
            <view class="text04 FlexColumn">
              <view class="text041">{{item.QuestionEnglish}}</view>
              <view class="text042" wx:if="{{IsShowTranslate}}">{{item.QuestionChinese}}</view>
            </view>
          </view>
          <view class="panelAnswer3 FlexColumn" >
            <view class="panelAnswer31 {{ item.AnswerNumber==indexChild && IsShowAnswer?'panelAnswer310':'' }} FlexRow" wx:for="{{item.OptionsEnglish}}" wx:key="indexChild" wx:for-item="itemChild" wx:for-index="indexChild" catch:tap="selectedAnswer" data-question="{{index}}" data-index="{{indexChild}}">
              <view class="panelAnswer311 {{ item.AnswerNumber==indexChild && IsShowAnswer?'panelAnswer3110':'' }}" wx:if="{{indexChild!=item.UserAnswer}}"></view>
              <view class="panelAnswer311 panelAnswer3110 FlexColumn" wx:if="{{indexChild==item.UserAnswer}}">
                <image wx:if="{{ThemeCSS=='DarkColor'}}" src="../images/sysIcon_a10.png" class="sysIcon_a10"></image>
                <image wx:if="{{ThemeCSS=='LightColor'}}" src="../images/sysIcon_a11.png" class="sysIcon_a10"></image>
              </view>
              <view class="text05 FlexColumn">
              <view class="text051">{{itemChild}}</view>
              <view class="text052" wx:if="{{IsShowTranslate}}">{{item.OptionsChinese[indexChild]}}</view>
            </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>    
    <view class="panelLine2"></view>
    <view class="panelAnswer4 FlexRow">
      <view class="btn1 FlexRow" catch:tap="showData" data-name="IsShowAnswer"><block wx:if="{{!IsShowAnswer}}">看答案</block><block wx:if="{{IsShowAnswer}}">关答案</block></view>
      <view class="btn1  {{ CurrentQuestionIndex+1==Content.Question.length?'btn10':'' }} FlexRow" catch:tap="nextQuestion">下一题</view>
    </view>
    <view class="btnClose" capture-bind:tap="showData" data-name="IsShowQuestion">隐藏</view>
  </view>

  <!-- 设置 -->
  <view wx:if="{{IsShowSetting}}" class="panelAnswer FlexColumn">
    <view class="text03 text06">阅读设置</view>
    <view class="btn2 FlexRow" catch:tap="showData" data-name="IsShowTranslate">
      <image  wx:if="{{ThemeCSS=='DarkColor'}}" src="../images/sysIcon_b02.png" class="sysIcon_b02"></image>
      <image  wx:if="{{ThemeCSS=='LightColor'}}" src="../images/sysIcon_b03.png" class="sysIcon_b02"></image>
      <view>中英对照</view>
    </view>
    <view class="panelAnswer5 FlexColumn">
      <view class="panelAnswer51 FlexRow">
        <view class="text12">突出关键词</view>
        <switch class="switchClass" bindchange="showData" checked="true" data-name="IsShowKeyword"/>
      </view>
      <view class="text13">用亮色强调用来生成短文的单词</view>
    </view>
    <view class="panelLine3"></view>
    <view class="panelAnswer5 FlexColumn">
      <view class="panelAnswer51 panelAnswer510 FlexRow">
        <view class="text12">浅色方案</view>
        <switch class="switchClass" bindchange="showData"  data-name="IsShowLightColor"/>
      </view>
    </view>
    <view class="btnClose btnClose2 FlexRow" capture-bind:tap="showData" data-name="IsShowSetting">
      <image  wx:if="{{ThemeCSS=='DarkColor'}}" src="../images/sysIcon_a03.png" class="sysIcon_a03"></image>
      <image  wx:if="{{ThemeCSS=='LightColor'}}" src="../images/sysIcon_a09.png" class="sysIcon_a03"></image>
    </view>
  </view>
</view>

<view wx:if="{{IsShowFirstOpen}}" class="panelHelp container FlexColumn" style='min-height:{{Containnerheight}}rpx;'>
  <view class="panelHelp1">
    <image src="../images/sysIcon_b07.png" class="sysIcon_b07"></image>
    <view class="panelHelp2 FlexColumn">
      <text class="text07">上面看短文\n下面做题目，右下角还有调节功能</text>
      <view class="btn3 FlexColumn" bind:tap="closeHelp">知道了</view>
    </view>
  </view>
</view>

<view wx:if="{{IsBuilding}}" class="panelBuilding container FlexColumn" style='min-height:{{Containnerheight}}rpx;'>
  <view class="panelBuilding1 FlexColumn">
    <image src="../images/pic_03.png" class="pic_03"></image>
    <view class="panelBuilding11 FlexColumn">
      <text class="text08">生成中</text>
      <text class="text09">还需要5……10秒左右\n感谢您耐心等待</text>
    </view>
    <view class="panelBuilding12 FlexColumn">
      <text class="text10">Vocabulary:</text>
      <text class="text11">{{Words}}</text>
    </view>
  </view>
</view>