|  | @@ -19,127 +19,190 @@
 | 
	
		
			
				|  |  |              : require('../../../../assets/icon/Cross-16-normal-red.png')
 | 
	
		
			
				|  |  |          "
 | 
	
		
			
				|  |  |        />
 | 
	
		
			
				|  |  | -      <el-tabs type="border-card">
 | 
	
		
			
				|  |  | -        <el-tab-pane label="简体">
 | 
	
		
			
				|  |  | -          <div class="left-content">
 | 
	
		
			
				|  |  | -            <div class="strockplay">
 | 
	
		
			
				|  |  | -              <Strockplayredline
 | 
	
		
			
				|  |  | -                :playStorkes="true"
 | 
	
		
			
				|  |  | -                :wordNum="item.con.length"
 | 
	
		
			
				|  |  | -                :Book_text="item.con"
 | 
	
		
			
				|  |  | -                :targetDiv="'pra' + item.con + index"
 | 
	
		
			
				|  |  | -              />
 | 
	
		
			
				|  |  | -            </div>
 | 
	
		
			
				|  |  | -            <div class="left-content-pra"></div>
 | 
	
		
			
				|  |  | -            <div class="footer">
 | 
	
		
			
				|  |  | -              <div @click="collectFlag = !collectFlag" class="bg-box">
 | 
	
		
			
				|  |  | -                <template v-if="collectFlag">
 | 
	
		
			
				|  |  | -                  <img
 | 
	
		
			
				|  |  | -                    :src="
 | 
	
		
			
				|  |  | -                      themeColor
 | 
	
		
			
				|  |  | -                        ? themeColor == 'green'
 | 
	
		
			
				|  |  | -                          ? require('../../../../assets/icon/starline-16-normal-Green.png')
 | 
	
		
			
				|  |  | -                          : themeColor == 'brown'
 | 
	
		
			
				|  |  | -                          ? require('../../../../assets/icon/starline-16-normal-Brown.png')
 | 
	
		
			
				|  |  | -                          : require('../../../../assets/icon/starline-16-normal-red.png')
 | 
	
		
			
				|  |  | -                        : require('../../../../assets/icon/starline-16-normal-red.png')
 | 
	
		
			
				|  |  | -                    "
 | 
	
		
			
				|  |  | -                    class="practice-icon"
 | 
	
		
			
				|  |  | -                  />
 | 
	
		
			
				|  |  | -                </template>
 | 
	
		
			
				|  |  | -                <template v-else>
 | 
	
		
			
				|  |  | -                  <img
 | 
	
		
			
				|  |  | -                    :src="
 | 
	
		
			
				|  |  | -                      themeColor
 | 
	
		
			
				|  |  | -                        ? themeColor == 'green'
 | 
	
		
			
				|  |  | -                          ? require('../../../../assets/icon/starline-16-normal-Green.png')
 | 
	
		
			
				|  |  | -                          : themeColor == 'brown'
 | 
	
		
			
				|  |  | -                          ? require('../../../../assets/icon/starline-16-normal-Brown.png')
 | 
	
		
			
				|  |  | -                          : require('../../../../assets/icon/starline-16-normal-red.png')
 | 
	
		
			
				|  |  | -                        : require('../../../../assets/icon/starline-16-normal-red.png')
 | 
	
		
			
				|  |  | -                    "
 | 
	
		
			
				|  |  | -                    class="practice-icon"
 | 
	
		
			
				|  |  | -                  />
 | 
	
		
			
				|  |  | +      <el-tabs type="border-card" @tab-click="handleClick">
 | 
	
		
			
				|  |  | +        <el-tab-pane label="简体">        
 | 
	
		
			
				|  |  | +        </el-tab-pane>
 | 
	
		
			
				|  |  | +        <el-tab-pane label="繁体">         
 | 
	
		
			
				|  |  | +        </el-tab-pane>
 | 
	
		
			
				|  |  | +      </el-tabs>
 | 
	
		
			
				|  |  | +      <div class="tab-box">
 | 
	
		
			
				|  |  | +          <div class="tab-box_0" :class="[isShow=='0'?'z-top':'']">
 | 
	
		
			
				|  |  | +              <div class="left-content">
 | 
	
		
			
				|  |  | +                    <div class="strockplay">
 | 
	
		
			
				|  |  | +                    <Strockplayredline
 | 
	
		
			
				|  |  | +                        :playStorkes="true"
 | 
	
		
			
				|  |  | +                        :wordNum="item.con.length"
 | 
	
		
			
				|  |  | +                        :Book_text="item.con"
 | 
	
		
			
				|  |  | +                        :targetDiv="'pra' + item.con + index"
 | 
	
		
			
				|  |  | +                    />
 | 
	
		
			
				|  |  | +                    </div>
 | 
	
		
			
				|  |  | +                    <div class="left-content-pra"></div>
 | 
	
		
			
				|  |  | +                    <div class="footer">
 | 
	
		
			
				|  |  | +                    <div @click="collectFlag = !collectFlag" class="bg-box">
 | 
	
		
			
				|  |  | +                        <template v-if="collectFlag">
 | 
	
		
			
				|  |  | +                        <img
 | 
	
		
			
				|  |  | +                            :src="
 | 
	
		
			
				|  |  | +                            themeColor
 | 
	
		
			
				|  |  | +                                ? themeColor == 'green'
 | 
	
		
			
				|  |  | +                                ? require('../../../../assets/icon/starline-16-normal-Green.png')
 | 
	
		
			
				|  |  | +                                : themeColor == 'brown'
 | 
	
		
			
				|  |  | +                                ? require('../../../../assets/icon/starline-16-normal-Brown.png')
 | 
	
		
			
				|  |  | +                                : require('../../../../assets/icon/starline-16-normal-red.png')
 | 
	
		
			
				|  |  | +                                : require('../../../../assets/icon/starline-16-normal-red.png')
 | 
	
		
			
				|  |  | +                            "
 | 
	
		
			
				|  |  | +                            class="practice-icon"
 | 
	
		
			
				|  |  | +                        />
 | 
	
		
			
				|  |  | +                        </template>
 | 
	
		
			
				|  |  | +                        <template v-else>
 | 
	
		
			
				|  |  | +                        <img
 | 
	
		
			
				|  |  | +                            :src="
 | 
	
		
			
				|  |  | +                            themeColor
 | 
	
		
			
				|  |  | +                                ? themeColor == 'green'
 | 
	
		
			
				|  |  | +                                ? require('../../../../assets/icon/starline-16-normal-Green.png')
 | 
	
		
			
				|  |  | +                                : themeColor == 'brown'
 | 
	
		
			
				|  |  | +                                ? require('../../../../assets/icon/starline-16-normal-Brown.png')
 | 
	
		
			
				|  |  | +                                : require('../../../../assets/icon/starline-16-normal-red.png')
 | 
	
		
			
				|  |  | +                                : require('../../../../assets/icon/starline-16-normal-red.png')
 | 
	
		
			
				|  |  | +                            "
 | 
	
		
			
				|  |  | +                            class="practice-icon"
 | 
	
		
			
				|  |  | +                        />
 | 
	
		
			
				|  |  | +                        </template>
 | 
	
		
			
				|  |  | +                        收藏
 | 
	
		
			
				|  |  | +                    </div>
 | 
	
		
			
				|  |  | +                    </div>
 | 
	
		
			
				|  |  | +                </div>
 | 
	
		
			
				|  |  | +                <template>
 | 
	
		
			
				|  |  | +                    <div class="right-content">
 | 
	
		
			
				|  |  | +                    <div class="right-strockred">
 | 
	
		
			
				|  |  | +                        <template v-if="navIndex == 0">
 | 
	
		
			
				|  |  | +                        <Strockred
 | 
	
		
			
				|  |  | +                            :Book_text="cur.stem[0].con"
 | 
	
		
			
				|  |  | +                            :hanzicolor="hanzicolor"
 | 
	
		
			
				|  |  | +                            :playStorkes="playStorkes"
 | 
	
		
			
				|  |  | +                            :targetDiv="'write-pra' + cur.stem[0].con"
 | 
	
		
			
				|  |  | +                        />
 | 
	
		
			
				|  |  | +                        </template>
 | 
	
		
			
				|  |  | +                        <template v-else>
 | 
	
		
			
				|  |  | +                        <Freewrite
 | 
	
		
			
				|  |  | +                            :cur="cur"
 | 
	
		
			
				|  |  | +                            :lineColor="hanzicolor"
 | 
	
		
			
				|  |  | +                            :lineWidth="hanziweight"
 | 
	
		
			
				|  |  | +                            ref="freewrite"
 | 
	
		
			
				|  |  | +                        />
 | 
	
		
			
				|  |  | +                        <div class="footer">
 | 
	
		
			
				|  |  | +                            <div class="pen-colors">
 | 
	
		
			
				|  |  | +                            <a @click="resetHuahua(index)" class="clean-btn"></a>
 | 
	
		
			
				|  |  | +                            </div>
 | 
	
		
			
				|  |  | +                        </div>
 | 
	
		
			
				|  |  | +                        </template>
 | 
	
		
			
				|  |  | +                    </div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                    <ul class="nav-list">
 | 
	
		
			
				|  |  | +                        <li
 | 
	
		
			
				|  |  | +                        :class="navIndex == 0 ? 'active' : ''"
 | 
	
		
			
				|  |  | +                        @click="changeNav(0)"
 | 
	
		
			
				|  |  | +                        >
 | 
	
		
			
				|  |  | +                        描红
 | 
	
		
			
				|  |  | +                        </li>
 | 
	
		
			
				|  |  | +                        <li
 | 
	
		
			
				|  |  | +                        :class="navIndex == 1 ? 'active' : ''"
 | 
	
		
			
				|  |  | +                        @click="changeNav(1)"
 | 
	
		
			
				|  |  | +                        >
 | 
	
		
			
				|  |  | +                        默写
 | 
	
		
			
				|  |  | +                        </li>
 | 
	
		
			
				|  |  | +                    </ul>
 | 
	
		
			
				|  |  | +                    </div>
 | 
	
		
			
				|  |  |                  </template>
 | 
	
		
			
				|  |  | -                收藏
 | 
	
		
			
				|  |  | -              </div>
 | 
	
		
			
				|  |  | -            </div>
 | 
	
		
			
				|  |  |            </div>
 | 
	
		
			
				|  |  | -          <template>
 | 
	
		
			
				|  |  | -            <div class="right-content">
 | 
	
		
			
				|  |  | -              <div class="right-strockred">
 | 
	
		
			
				|  |  | -                <template v-if="navIndex == 0">
 | 
	
		
			
				|  |  | -                  <Strockred
 | 
	
		
			
				|  |  | -                    :Book_text="cur.stem[0].con"
 | 
	
		
			
				|  |  | -                    :hanzicolor="hanzicolor"
 | 
	
		
			
				|  |  | -                    :playStorkes="playStorkes"
 | 
	
		
			
				|  |  | -                    :targetDiv="'write-pra' + cur.stem[0].con"
 | 
	
		
			
				|  |  | -                  />
 | 
	
		
			
				|  |  | -                </template>
 | 
	
		
			
				|  |  | -                <template v-else>
 | 
	
		
			
				|  |  | -                  <Freewrite
 | 
	
		
			
				|  |  | -                    :cur="cur"
 | 
	
		
			
				|  |  | -                    :lineColor="hanzicolor"
 | 
	
		
			
				|  |  | -                    :lineWidth="hanziweight"
 | 
	
		
			
				|  |  | -                    ref="freewrite"
 | 
	
		
			
				|  |  | -                  />
 | 
	
		
			
				|  |  | -                  <div class="footer">
 | 
	
		
			
				|  |  | -                    <div class="pen-colors">
 | 
	
		
			
				|  |  | -                      <!-- <img
 | 
	
		
			
				|  |  | -                                        class="write-icon-3"
 | 
	
		
			
				|  |  | -                                        src="../../assets/common/write-icon-3.png"
 | 
	
		
			
				|  |  | -                                    /> -->
 | 
	
		
			
				|  |  | -                      <!-- <ul class="colors-list">
 | 
	
		
			
				|  |  | +          <div class="tab-box_1" :class="[isShow=='1'?'z-top':'']">
 | 
	
		
			
				|  |  | +              <div class="left-content">
 | 
	
		
			
				|  |  | +                    <div class="strockplay">
 | 
	
		
			
				|  |  | +                    <Strockplayredline
 | 
	
		
			
				|  |  | +                        :playStorkes="true"
 | 
	
		
			
				|  |  | +                        :wordNum="item.TChinese.length"
 | 
	
		
			
				|  |  | +                        :Book_text="item.TChinese"
 | 
	
		
			
				|  |  | +                        :targetDiv="'praT' + item.TChinese + index"
 | 
	
		
			
				|  |  | +                    />
 | 
	
		
			
				|  |  | +                    </div>
 | 
	
		
			
				|  |  | +                    <div class="left-content-pra"></div>
 | 
	
		
			
				|  |  | +                    <div class="footer">
 | 
	
		
			
				|  |  | +                    <div @click="collectFlag = !collectFlag" class="bg-box">
 | 
	
		
			
				|  |  | +                        <template v-if="collectFlag">
 | 
	
		
			
				|  |  | +                        <img
 | 
	
		
			
				|  |  | +                            :src="
 | 
	
		
			
				|  |  | +                            themeColor
 | 
	
		
			
				|  |  | +                                ? themeColor == 'green'
 | 
	
		
			
				|  |  | +                                ? require('../../../../assets/icon/starline-16-normal-Green.png')
 | 
	
		
			
				|  |  | +                                : themeColor == 'brown'
 | 
	
		
			
				|  |  | +                                ? require('../../../../assets/icon/starline-16-normal-Brown.png')
 | 
	
		
			
				|  |  | +                                : require('../../../../assets/icon/starline-16-normal-red.png')
 | 
	
		
			
				|  |  | +                                : require('../../../../assets/icon/starline-16-normal-red.png')
 | 
	
		
			
				|  |  | +                            "
 | 
	
		
			
				|  |  | +                            class="practice-icon"
 | 
	
		
			
				|  |  | +                        />
 | 
	
		
			
				|  |  | +                        </template>
 | 
	
		
			
				|  |  | +                        <template v-else>
 | 
	
		
			
				|  |  | +                        <img
 | 
	
		
			
				|  |  | +                            :src="
 | 
	
		
			
				|  |  | +                            themeColor
 | 
	
		
			
				|  |  | +                                ? themeColor == 'green'
 | 
	
		
			
				|  |  | +                                ? require('../../../../assets/icon/starline-16-normal-Green.png')
 | 
	
		
			
				|  |  | +                                : themeColor == 'brown'
 | 
	
		
			
				|  |  | +                                ? require('../../../../assets/icon/starline-16-normal-Brown.png')
 | 
	
		
			
				|  |  | +                                : require('../../../../assets/icon/starline-16-normal-red.png')
 | 
	
		
			
				|  |  | +                                : require('../../../../assets/icon/starline-16-normal-red.png')
 | 
	
		
			
				|  |  | +                            "
 | 
	
		
			
				|  |  | +                            class="practice-icon"
 | 
	
		
			
				|  |  | +                        />
 | 
	
		
			
				|  |  | +                        </template>
 | 
	
		
			
				|  |  | +                        收藏
 | 
	
		
			
				|  |  | +                    </div>
 | 
	
		
			
				|  |  | +                    </div>
 | 
	
		
			
				|  |  | +                </div>
 | 
	
		
			
				|  |  | +                <template>
 | 
	
		
			
				|  |  | +                    <div class="right-content">
 | 
	
		
			
				|  |  | +                    <div class="right-strockred">
 | 
	
		
			
				|  |  | +                        <template v-if="navIndex == 0">
 | 
	
		
			
				|  |  | +                        <Strockred
 | 
	
		
			
				|  |  | +                            :Book_text="cur.stem[0].TChinese"
 | 
	
		
			
				|  |  | +                            :hanzicolor="hanzicolor"
 | 
	
		
			
				|  |  | +                            :playStorkes="playStorkes"
 | 
	
		
			
				|  |  | +                            :targetDiv="'write-praT'+cur.stem[0].TChinese"
 | 
	
		
			
				|  |  | +                        />
 | 
	
		
			
				|  |  | +                        </template>
 | 
	
		
			
				|  |  | +                        <template v-else>
 | 
	
		
			
				|  |  | +                        <Freewrite
 | 
	
		
			
				|  |  | +                            :cur="cur"
 | 
	
		
			
				|  |  | +                            :lineColor="hanzicolor"
 | 
	
		
			
				|  |  | +                            :lineWidth="hanziweight"
 | 
	
		
			
				|  |  | +                            ref="freewrite"
 | 
	
		
			
				|  |  | +                        />
 | 
	
		
			
				|  |  | +                        <div class="footer">
 | 
	
		
			
				|  |  | +                            <div class="pen-colors">
 | 
	
		
			
				|  |  | +                            <a @click="resetHuahua(index)" class="clean-btn"></a>
 | 
	
		
			
				|  |  | +                            </div>
 | 
	
		
			
				|  |  | +                        </div>
 | 
	
		
			
				|  |  | +                        </template>
 | 
	
		
			
				|  |  | +                    </div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                    <ul class="nav-list">
 | 
	
		
			
				|  |  | +                        <li
 | 
	
		
			
				|  |  | +                        :class="navIndex == 0 ? 'active' : ''"
 | 
	
		
			
				|  |  | +                        @click="changeNav(0)"
 | 
	
		
			
				|  |  | +                        >
 | 
	
		
			
				|  |  | +                        描红
 | 
	
		
			
				|  |  | +                        </li>
 | 
	
		
			
				|  |  |                          <li
 | 
	
		
			
				|  |  | -                          :class="
 | 
	
		
			
				|  |  | -                            colorIndex == index
 | 
	
		
			
				|  |  | -                              ? 'color-item-active' + index
 | 
	
		
			
				|  |  | -                              : ''
 | 
	
		
			
				|  |  | -                          "
 | 
	
		
			
				|  |  | -                          :key="'color' + index"
 | 
	
		
			
				|  |  | -                          @click="changeColor(index)"
 | 
	
		
			
				|  |  | -                          v-for="(item, index) in 5"
 | 
	
		
			
				|  |  | +                        :class="navIndex == 1 ? 'active' : ''"
 | 
	
		
			
				|  |  | +                        @click="changeNav(1)"
 | 
	
		
			
				|  |  |                          >
 | 
	
		
			
				|  |  | -                          <span :class="'color-item' + index"></span>
 | 
	
		
			
				|  |  | +                        默写
 | 
	
		
			
				|  |  |                          </li>
 | 
	
		
			
				|  |  | -                      </ul> -->
 | 
	
		
			
				|  |  | -                      <a @click="resetHuahua(index)" class="clean-btn"></a>
 | 
	
		
			
				|  |  | +                    </ul>
 | 
	
		
			
				|  |  |                      </div>
 | 
	
		
			
				|  |  | -                    <!-- <div class="pen" v-if="navIndex == 1">
 | 
	
		
			
				|  |  | -                      <img
 | 
	
		
			
				|  |  | -                        :src="penIndex == 0 ? thinpenActive : thinpen"
 | 
	
		
			
				|  |  | -                        @click="changePen(0)"
 | 
	
		
			
				|  |  | -                        class="pen-img"
 | 
	
		
			
				|  |  | -                      />
 | 
	
		
			
				|  |  | -                      <img
 | 
	
		
			
				|  |  | -                        :src="penIndex == 1 ? thickpenActive : thickpen"
 | 
	
		
			
				|  |  | -                        @click="changePen(1)"
 | 
	
		
			
				|  |  | -                        class="pen-img"
 | 
	
		
			
				|  |  | -                      />
 | 
	
		
			
				|  |  | -                    </div> -->
 | 
	
		
			
				|  |  | -                  </div>
 | 
	
		
			
				|  |  |                  </template>
 | 
	
		
			
				|  |  | -              </div>
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -              <ul class="nav-list">
 | 
	
		
			
				|  |  | -                <li
 | 
	
		
			
				|  |  | -                  :class="navIndex == 0 ? 'active' : ''"
 | 
	
		
			
				|  |  | -                  @click="changeNav(0)"
 | 
	
		
			
				|  |  | -                >
 | 
	
		
			
				|  |  | -                  描红
 | 
	
		
			
				|  |  | -                </li>
 | 
	
		
			
				|  |  | -                <li
 | 
	
		
			
				|  |  | -                  :class="navIndex == 1 ? 'active' : ''"
 | 
	
		
			
				|  |  | -                  @click="changeNav(1)"
 | 
	
		
			
				|  |  | -                >
 | 
	
		
			
				|  |  | -                  默写
 | 
	
		
			
				|  |  | -                </li>
 | 
	
		
			
				|  |  | -              </ul>
 | 
	
		
			
				|  |  | -            </div>
 | 
	
		
			
				|  |  | -          </template>
 | 
	
		
			
				|  |  | -        </el-tab-pane>
 | 
	
		
			
				|  |  | -        <el-tab-pane label="繁体"> </el-tab-pane>
 | 
	
		
			
				|  |  | -      </el-tabs>
 | 
	
		
			
				|  |  | +          </div>
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  |      </div>
 | 
	
		
			
				|  |  |    </div>
 | 
	
		
			
				|  |  |  </template>
 | 
	
	
		
			
				|  | @@ -148,15 +211,11 @@
 | 
	
		
			
				|  |  |  import Strockplayredline from "./Strockplayredline.vue";
 | 
	
		
			
				|  |  |  import Strockred from "./Strockred.vue";
 | 
	
		
			
				|  |  |  import Freewrite from "./Freewrite.vue";
 | 
	
		
			
				|  |  | -// import ChinaDict from "./ChinaDict";
 | 
	
		
			
				|  |  | -// import Audio from "./AudioRed.vue";
 | 
	
		
			
				|  |  |  export default {
 | 
	
		
			
				|  |  |    components: {
 | 
	
		
			
				|  |  |      Strockplayredline,
 | 
	
		
			
				|  |  |      Strockred,
 | 
	
		
			
				|  |  |      Freewrite,
 | 
	
		
			
				|  |  | -    // ChinaDict,
 | 
	
		
			
				|  |  | -    // Audio,
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |    props: ["cur", "changePraShow", "themeColor"],
 | 
	
		
			
				|  |  |    data() {
 | 
	
	
		
			
				|  | @@ -175,6 +234,7 @@ export default {
 | 
	
		
			
				|  |  |        thickpen: require("../../../../assets/common/thick-pen.png"),
 | 
	
		
			
				|  |  |        thickpenActive: require("../../../../assets/common/thick-pen-active.png"),
 | 
	
		
			
				|  |  |        collectFlag: false, // 是否收藏
 | 
	
		
			
				|  |  | +      isShow: '0'
 | 
	
		
			
				|  |  |      };
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |    computed: {},
 | 
	
	
		
			
				|  | @@ -199,9 +259,11 @@ export default {
 | 
	
		
			
				|  |  |        this.learn_mode = mode;
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  |      resetHuahua(index) {
 | 
	
		
			
				|  |  | -      console.log(this.$refs.freewrite);
 | 
	
		
			
				|  |  |        this.$refs.freewrite[index].handelReset();
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  | +    handleClick(tab, event){
 | 
	
		
			
				|  |  | +        this.isShow = tab.index
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |    //生命周期 - 创建完成(可以访问当前this实例)
 | 
	
		
			
				|  |  |    created() {
 | 
	
	
		
			
				|  | @@ -225,7 +287,7 @@ export default {
 | 
	
		
			
				|  |  |  <style lang='scss' scoped>
 | 
	
		
			
				|  |  |  .practice {
 | 
	
		
			
				|  |  |    width: 504px;
 | 
	
		
			
				|  |  | -  max-height: 434px;
 | 
	
		
			
				|  |  | +//   max-height: 434px;
 | 
	
		
			
				|  |  |    overflow: auto;
 | 
	
		
			
				|  |  |    margin: 0 auto;
 | 
	
		
			
				|  |  |    background: #f3f3f3;
 | 
	
	
		
			
				|  | @@ -259,10 +321,10 @@ export default {
 | 
	
		
			
				|  |  |    .Book_content {
 | 
	
		
			
				|  |  |      width: 100%;
 | 
	
		
			
				|  |  |      height: 100%;
 | 
	
		
			
				|  |  | -    display: flex;
 | 
	
		
			
				|  |  | +    // display: flex;
 | 
	
		
			
				|  |  |      box-sizing: border-box;
 | 
	
		
			
				|  |  |      position: relative;
 | 
	
		
			
				|  |  | -    align-items: flex-start;
 | 
	
		
			
				|  |  | +    // align-items: flex-start;
 | 
	
		
			
				|  |  |    }
 | 
	
		
			
				|  |  |    .left-content {
 | 
	
		
			
				|  |  |      display: flex;
 | 
	
	
		
			
				|  | @@ -466,6 +528,25 @@ export default {
 | 
	
		
			
				|  |  |  .el-tabs {
 | 
	
		
			
				|  |  |    width: 100%;
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  | +.tab-box{
 | 
	
		
			
				|  |  | +    background: #fff;
 | 
	
		
			
				|  |  | +    padding: 24px;
 | 
	
		
			
				|  |  | +    position: relative;
 | 
	
		
			
				|  |  | +    height: 428px;
 | 
	
		
			
				|  |  | +    >div{
 | 
	
		
			
				|  |  | +        display: flex;
 | 
	
		
			
				|  |  | +        box-sizing: border-box;
 | 
	
		
			
				|  |  | +        position: relative;
 | 
	
		
			
				|  |  | +        align-items: flex-start;
 | 
	
		
			
				|  |  | +        position: absolute;
 | 
	
		
			
				|  |  | +        left: 24px;
 | 
	
		
			
				|  |  | +        top: 24px;
 | 
	
		
			
				|  |  | +        z-index: 1;
 | 
	
		
			
				|  |  | +        &.z-top{
 | 
	
		
			
				|  |  | +            z-index: 2;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  |  .NPC-Big-Book-preview-green {
 | 
	
		
			
				|  |  |    .practice {
 | 
	
		
			
				|  |  |      .nav-list {
 | 
	
	
		
			
				|  | @@ -495,41 +576,3 @@ export default {
 | 
	
		
			
				|  |  |    }
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  |  </style>
 | 
	
		
			
				|  |  | -<style lang="scss">
 | 
	
		
			
				|  |  | -.practiceSingle {
 | 
	
		
			
				|  |  | -  .strock-play-box {
 | 
	
		
			
				|  |  | -    width: 24px !important;
 | 
	
		
			
				|  |  | -    height: 24px !important;
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
 | 
	
		
			
				|  |  | -    color: #000;
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -  .el-tabs--border-card
 | 
	
		
			
				|  |  | -    > .el-tabs__header
 | 
	
		
			
				|  |  | -    .el-tabs__item:not(.is-disabled):hover {
 | 
	
		
			
				|  |  | -    color: #000;
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -  .el-tabs__item,
 | 
	
		
			
				|  |  | -  .el-tabs--border-card > .el-tabs__header .el-tabs__item {
 | 
	
		
			
				|  |  | -    color: #000;
 | 
	
		
			
				|  |  | -    font-size: 16px;
 | 
	
		
			
				|  |  | -    line-height: 150%;
 | 
	
		
			
				|  |  | -    line-height: 48px;
 | 
	
		
			
				|  |  | -    height: 48px;
 | 
	
		
			
				|  |  | -    width: 80px;
 | 
	
		
			
				|  |  | -    text-align: center;
 | 
	
		
			
				|  |  | -    font-weight: normal;
 | 
	
		
			
				|  |  | -    border: none;
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -  .el-tabs--border-card > .el-tabs__header {
 | 
	
		
			
				|  |  | -    background: #f3f3f3;
 | 
	
		
			
				|  |  | -    border: none;
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -  .el-tabs--border-card > .el-tabs__content {
 | 
	
		
			
				|  |  | -    padding: 24px;
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -  .el-tab-pane {
 | 
	
		
			
				|  |  | -    display: flex;
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -}
 | 
	
		
			
				|  |  | -</style>
 |