<template>
  <div class="rate">
    <section v-if="$isMobile" class="rateMobile">
      <section class="leftMenu"  v-loading="documentLoading" v-if="!contentShow">
        <!-- <p class="catalogue">{{ $t("apiFile.catalogue") || "目录：" }}</p> -->
        <ul>
          <li
            v-for="item in navList"
            :class="{ navActive: String(item.id) === String(DetailsParams.id) }"
            :key="item.id"
            @click="clickJump(item)"
          >
            <i class="iconfont icon-baogao file"></i>{{ item.title }}
          </li>
        </ul>
      </section>
      <!-- <section class="rightText">
        <h3>{{ $t(`apiFile.file`) }}</h3>
        <div class="content">
          <h4>{{ $t(`apiFile.survey`) }}</h4>
          <p>{{ $t(`apiFile.survey1`) }}</p>
          <p>{{ $t(`apiFile.survey2`) }}</p>
         
        </div>
      
        <div class="content">
          <h3>{{ $t(`apiFile.apiAuthentication`) }}</h3>
         
          <p>{{ $t(`apiFile.apiAuthentication1`) }} <span @click="handelJump(`personalCenter/personalAPI`)" style="color: #651FFF;cursor: pointer;">{{ $t(`apiFile.apiAuthentication5`) }}</span> {{ $t(`apiFile.apiAuthentication6`) }}</p>
          <p>{{ $t(`apiFile.apiAuthentication2`) }}</p>
          <p>{{ $t(`apiFile.apiAuthentication3`) }}</p>
          <p>{{ $t(`apiFile.apiAuthentication4`) }}</p>
          <ul>
            <li>curl --request GET {url} \</li>
            <li>--header 'Content-Type: application/json' \</li>
            <li>--header 'API-KEY: {token}'</li>
          </ul>
        </div>

        <div class="ExampleTable">
          <div class="title"><span>{{ $t(`apiFile.url`) }}</span> <span>{{ $t(`apiFile.explain`) }}</span></div>
          <div>
       
            <code>https://m2pool.com/oapi/v1/pool/watch?coin={coin}</code>
            <span
              >{{ $t(`apiFile.explain1`) }}</span
            >
          </div>
          <div>
       
            <code>https://m2pool.com/oapi/v1/pool/
              hashrate_history?coin={coin}&start={yyyy-MM-dd}&end={yyyy-MM-dd
              }</code>
            <span>{{ $t(`apiFile.explain2`) }}</span>
          </div>
        </div>
        <div class="text-container">
          <p>{{ $t(`apiFile.explain3`) }}</p>
          <div class="container">
            <p>{</p>
            <p style="color:crimson">"code": {ERR_CODE},</p>
            <p > "msg": "{{ $t(`apiFile.explain4`) }}"</p>
            <p>}</p>
          </div>
        </div>
        <div class="text-container">
          <p>{{ $t(`apiFile.explain5`) }}</p>
          <div class="container">
            <p>{</p>
            <p style="color:green">"code": 200,</p>
            <p>"data": object</p>
            <p>}</p>
          </div>
          <p>{{ $t(`apiFile.explain6`) }}</p>
        </div>
      
        <section class="MiningPool" id="HashRate">
          <h3>{{ $t(`apiFile.miningPoolInformation`) }}</h3>
   
          <div class="Pool" >
            <p>{{ $t(`apiFile.miningPoolInformation1`) }}</p>
            <p class="hash">HashRate</p>
            <p>{{ $t(`apiFile.miningPoolInformation2`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>date</td> 
                <td>Date</td>
                <td></td>
                <td>{{ $t(`apiFile.powerStatistics`) }}</td>
              </tr>
              <tr>
                <td>hashrate</td>
                <td>double</td>
                <td></td>
                <td>{{ $t(`apiFile.power`) }}</td>
              </tr>
            </table>
          </div>
        
          <div class="Pool" id="MinersList">        
            <p class="hash">MinersList</p>
            <p>{{ $t(`apiFile.minersNum`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>total</td> 
                <td>int</td>
                <td></td>
                <td>{{ $t(`apiFile.totalMiners`) }}</td>
              </tr>
              <tr>
                <td>online</td>
                <td>int</td>
                <td></td>
                <td>{{ $t(`apiFile.onLineMiners`) }}</td>
              </tr>
              <tr>
                <td>offline</td>
                <td>int</td>
                <td></td>
                <td>{{ $t(`apiFile.offLineMiners`) }}</td>
              </tr>
            </table>
          </div>
         
          <div class="Pool">        
            <p class="hash">{{ $t(`apiFile.overviewOfMiningPool`) }}</p>
            <p class="Interface">Get /oapi/v1/pool/watch</p>
            <p class="hash">{{ $t(`apiFile.jurisdiction`) }}     pool</p>
            <p class="hash">{{ $t(`apiFile.parameter`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>coin</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.currency`) }}</td>
              </tr>
             
            </table>
            <p class="hash">{{ $t(`apiFile.response`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>pool_fee</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.serviceCharge`) }}</td>
              </tr>
              <tr>
                <td>min_pay</td> 
                <td>double</td>
                <td></td>
                <td>{{ $t(`apiFile.minimumPaymentAmount`) }}</td>
              </tr>
              <tr>
                <td>miners</td> 
                <td>int</td>
                <td></td>
                <td>{{ $t(`apiFile.onLineMiners`) }}</td>
              </tr>
              <tr>
                <td>history_last_7days</td> 
                <td class="active"> <a href="#HashRate">HashRate</a></td>
                <td>repeated</td>
                <td>{{ $t(`apiFile.latelyPower24h`) }}</td>
              </tr>
              <tr>
                <td>hashrate</td> 
                <td>Double</td>
                <td></td>
                <td>{{ $t(`apiFile.Power24h`) }}</td>
              </tr>
              <tr>
                <td>last_found</td> 
                <td>int</td>
                <td></td>
                <td>{{ $t(`apiFile.height`) }}</td>
              </tr>
             
            </table>
          </div>

      
          <div class="Pool">        
            <p class="hash">{{ $t(`apiFile.currentMiners`) }}</p>
            <p class="Interface">Get /oapi/v1/pool/miners_list</p>
            <p class="hash">{{ $t(`apiFile.jurisdiction`) }}     pool</p>
            <p class="hash">{{ $t(`apiFile.parameter`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>coin</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.currency`) }}</td>
              </tr>
             
            </table>
            <p class="hash">{{ $t(`apiFile.response`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>miners_list</td> 
                <td class="active"> <a href="#MinersList">MinersList</a></td>
                <td>repeated</td>
                <td>{{ $t(`apiFile.eachState`) }}</td>
              </tr>
             
             
            </table>
          </div>
        
          <div class="Pool">        
            <p class="hash">{{ $t(`apiFile.realTimePower`) }}</p>
            <p class="Interface">Get /oapi/v1/pool/hashrate</p>
            <p class="hash">{{ $t(`apiFile.jurisdiction`) }}     pool</p>
            <p class="hash">{{ $t(`apiFile.parameter`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>coin</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.currency`) }}</td>
              </tr>
             
            </table>
            <p class="hash">{{ $t(`apiFile.response`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>hashrate_realtime</td> 
                <td>double</td>
                <td></td>
                <td>{{ $t(`apiFile.averagePower30m`) }}</td>
              </tr>
              <tr>
                <td>hashrate_24h</td> 
                <td>double</td>
                <td></td>
                <td>{{ $t(`apiFile.averagePower24h`) }}</td>
              </tr>
              <tr>
                <td>unit</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.Company`) }} （h/s, kh/s, mh/s, gh/s …）</td>
              </tr>
            
             
            </table>
          </div>
         
             <div class="Pool">        
            <p class="hash">{{ $t(`apiFile.historyPower`) }}</p>
            <p class="Interface">Get /oapi/v1/pool/hashrate_history</p>
            <p class="hash">{{ $t(`apiFile.jurisdiction`) }}     pool</p>
            <p class="hash">{{ $t(`apiFile.parameter`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>coin</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.currency`) }}</td>
              </tr>
              <tr>
                <td>start</td> 
                <td>string</td>
                <td>{{ $t(`apiFile.start2`) }}</td>
                <td>{{ $t(`apiFile.start`) }}</td>
              </tr>
              <tr>
                <td>end</td> 
                <td>string</td>
                <td>{{ $t(`apiFile.end2`) }}</td>
                <td>{{ $t(`apiFile.end`) }}</td>
              </tr>
             
            </table>
            <p class="hash">{{ $t(`apiFile.response`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>hashrate_30m</td> 
                <td class="active"> <a href="#HashRate">HashRate</a></td>
                <td>repeated</td>
                <td>{{ $t(`apiFile.historyPower30m`) }}</td>
              </tr>
              <tr>
                <td>hashrate_24h</td> 
                <td class="active"> <a href="#HashRate">HashRate</a></td>
                <td>repeated</td>
                <td>{{ $t(`apiFile.historyPower24h`) }}</td>
              </tr>
              <tr>
                <td>unit</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.Company`) }}（h/s, kh/s, mh/s, gh/s …）</td>
              </tr>
            
             
            </table>
          </div>
        </section>

     
         <section class="MiningPool" id="accountHashRate" >
          <h3>{{ $t(`apiFile.miningAccount`) }}</h3>
        
          <div class="Pool" >
            <p>{{ $t(`apiFile.miningPoolInformation1`) }}</p>
            <p class="hash">HashRate</p>
            <p>{{ $t(`apiFile.miningPoolInformation2`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>date</td> 
                <td>Date</td>
                <td></td>
                <td>{{ $t(`apiFile.powerStatistics`) }}</td>
              </tr>
              <tr>
                <td>hashrate</td>
                <td>double</td>
                <td></td>
                <td>{{ $t(`apiFile.power`) }}</td>
              </tr>
            </table>
          </div>
      
          <div class="Pool" id="accountList">        
            <p class="hash">MinersList</p>
            <p>{{ $t(`apiFile.minerData`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>total</td> 
                <td>int</td>
                <td></td>
                <td>{{ $t(`apiFile.totalMiners`) }}</td>
              </tr>
              <tr>
                <td>online</td>
                <td>int</td>
                <td></td>
                <td>{{ $t(`apiFile.onLineMiners`) }}</td>
              </tr>
              <tr>
                <td>offline</td>
                <td>int</td>
                <td></td>
                <td>{{ $t(`apiFile.offLineMiners`) }}</td>
              </tr>
            </table>
          </div>
      
            <div class="Pool"  id="MinerInfo">        
            <p class="hash">MinerInfo</p>
            <p>{{ $t(`apiFile.stateData`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>miner</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.minerId`) }}</td>
              </tr>
              <tr>
                <td>state</td>
                <td>int</td>
                <td></td>
                <td>{{ $t(`apiFile.minerStatus`) }}<br>
                  {{ $t(`apiFile.minerStatus0`) }}<br>
                    {{ $t(`apiFile.minerStatus1`) }}<br>
                    {{ $t(`apiFile.minerStatus2`) }}</td>
              </tr>
             
            </table>
          </div>
       
          <div class="Pool">        
            <p class="hash">{{ $t(`apiFile.overviewOfMiners`) }}</p>
            <p class="Interface">Post  /oapi/v1/account/watch</p>
            <p class="hash">{{ $t(`apiFile.jurisdiction`) }}     account</p>
            <p class="hash">{{ $t(`apiFile.parameter`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>coin</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.currency`) }}</td>
              </tr>
              <tr>
                <td>mining_user</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.accountApiKey`) }}</td>
              </tr>
             
            </table>
            <p class="hash">{{ $t(`apiFile.response`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>miners_list</td> 
                <td class="active"> <a href="#accountList">MinersList</a></td>
                <td>repeated</td>
                <td>{{ $t(`apiFile.eachState`) }}</td>
              </tr>
            
             
            </table>
          </div>

        
          <div class="Pool">        
            <p class="hash">{{ $t(`apiFile.allMiners`) }}</p>
            <p class="Interface">Post  /oapi/v1/account/miners_list</p>
            <p class="hash">{{ $t(`apiFile.jurisdiction`) }}     account</p>
            <p class="hash">{{ $t(`apiFile.parameter`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>coin</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.currency`) }}</td>
              </tr>
              <tr>
                <td>mining_user</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.accountApiKey`) }}</td>
              </tr>
             
            </table>
            <p class="hash">{{ $t(`apiFile.response`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>miners_list</td> 
                <td class="active"> <a href="#MinerInfo">MinerInfo</a></td>
                <td>repeated</td>
                <td>{{ $t(`apiFile.eachState`) }}</td>
              </tr>
             
             
            </table>
          </div>
      
          <div class="Pool">        
            <p class="hash">{{ $t(`apiFile.realTimeAccount`) }}</p>
            <p class="Interface">Post /oapi/v1/account/hashrate_real</p>
            <p class="hash">{{ $t(`apiFile.jurisdiction`) }}     account</p>
            <p class="hash">{{ $t(`apiFile.parameter`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>coin</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.currency`) }}</td>
              </tr>
              <tr>
                <td>mining_user</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.accountApiKey`) }}</td>
              </tr>
             
            </table>
            <p class="hash">{{ $t(`apiFile.response`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>hashrate_realtime</td> 
                <td>double</td>
                <td></td>
                <td>{{ $t(`apiFile.averagePower30m`) }}</td>
              </tr>
              <tr>
                <td>hashrate_24h</td> 
                <td>double</td>
                <td></td>
                <td>{{ $t(`apiFile.averagePower24h`) }}</td>
              </tr>
              <tr>
                <td>unit</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.Company`) }}（h/s, kh/s, mh/s, gh/s …）</td>
              </tr>
            
             
            </table>
          </div>
        
             <div class="Pool">        
            <p class="hash">{{ $t(`apiFile.account24h`) }}</p>
            <p class="Interface">Post /oapi/v1/account/hashrate_history</p>
            <p class="hash">{{ $t(`apiFile.jurisdiction`) }}     account</p>
            <p class="hash">{{ $t(`apiFile.parameter`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>coin</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.currency`) }}</td>
              </tr>
              <tr>
                <td>mining_user</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.accountApiKey`) }}</td>
              </tr>
              <tr>
                <td>start</td> 
                <td>string</td>
                <td>{{ $t(`apiFile.start2`) }}</td>
                <td>{{ $t(`apiFile.start`) }}</td>
              </tr>
              <tr>
                <td>end</td> 
                <td>string</td>
                <td>{{ $t(`apiFile.end2`) }}</td>
                <td>{{ $t(`apiFile.end`) }}</td>
              </tr>
             
            </table>
            <p class="hash">{{ $t(`apiFile.response`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>hashrate_24h</td> 
                <td class="active"> <a href="#accountHashRate">HashRate</a></td>
                <td>repeated</td>
                <td>{{ $t(`apiFile.historyPower24h`) }}</td>
              </tr>             
              <tr>
                <td>unit</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.Company`) }}（h/s, kh/s, mh/s, gh/s …）</td>
              </tr>
            
             
            </table>
          </div>
         
            <div class="Pool">        
            <p class="hash">{{ $t(`apiFile.account24h30m`) }}</p>
            <p class="Interface">Post /oapi/v1/account/hashrate_last24h</p>
            <p class="hash">{{ $t(`apiFile.jurisdiction`) }}     account</p>
            <p class="hash">{{ $t(`apiFile.parameter`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>coin</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.currency`) }}</td>
              </tr>
              <tr>
                <td>mining_user</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.accountApiKey`) }}</td>
              </tr>            
             
            </table>
            <p class="hash">{{ $t(`apiFile.response`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>hashrate_30m</td> 
                <td class="active"> <a href="#accountHashRate">HashRate</a></td>
                <td>repeated</td>
                <td>{{ $t(`apiFile.average24h30m`) }}</td>
              </tr>             
              <tr>
                <td>unit</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.Company`) }}（h/s, kh/s, mh/s, gh/s …）</td>
              </tr>
            
             
            </table>
          </div>
        </section>

     
          <section class="MiningPool" id="minerHashRate" >
          <h3>{{ $t(`apiFile.miningMachineInformation`) }}</h3>     
             
          <div class="Pool" >
            <p>{{ $t(`apiFile.miningPoolInformation1`) }}</p>
            <p class="hash">HashRate</p>
            <p>{{ $t(`apiFile.miningPoolInformation2`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>date</td> 
                <td>Date</td>
                <td></td>
                <td>{{ $t(`apiFile.powerStatistics`) }}</td>
              </tr>
              <tr>
                <td>hashrate</td>
                <td>double</td>
                <td></td>
                <td>{{ $t(`apiFile.power`) }}</td>
              </tr>
            </table>
          </div>
       
          <div class="Pool">        
            <p class="hash">{{ $t(`apiFile.realTimeMiningMachine`) }}</p>
            <p class="Interface">Post /oapi/v1/miner/hashrate_real</p>
            <p class="hash">{{ $t(`apiFile.jurisdiction`) }}     miner</p>
            <p class="hash">{{ $t(`apiFile.parameter`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>coin</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.currency`) }}</td>
              </tr>
              <tr>
                <td>mining_user</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.accountApiKey`) }}</td>
              </tr>
              <tr>
                <td>miner</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.aCertainMiner`) }}</td>
              </tr>
             
            </table>
            <p class="hash">{{ $t(`apiFile.response`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>hashrate_realtime</td> 
                <td >double</td>
                <td></td>
                <td>{{ $t(`apiFile.averagePower30m`) }}</td>
              </tr>
              <tr>
                <td>hashrate_24h</td> 
                <td >double</td>
                <td></td>
                <td>{{ $t(`apiFile.averagePower24h`) }}</td>
              </tr>
              <tr>
                <td>unit</td> 
                <td >string</td>
                <td></td>
                <td>{{ $t(`apiFile.Company`) }}（h/s, kh/s, mh/s, gh/s …）</td>
              </tr>          
            </table>
          </div>

      
          <div class="Pool">        
            <p class="hash">{{ $t(`apiFile.miningMachineHistory24h`) }}</p>
            <p class="Interface">Post /oapi/v1/miner/hashrate_history</p>
            <p class="hash">{{ $t(`apiFile.jurisdiction`) }}     miner</p>
            <p class="hash">{{ $t(`apiFile.parameter`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>coin</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.currency`) }}</td>
              </tr>
              <tr>
                <td>mining_user</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.accountApiKey`) }}</td>
              </tr>
              <tr>
                <td>miner</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.aCertainMiner`) }}</td>
              </tr>
              <tr>
                <td>start</td> 
                <td>string</td>
                <td>{{ $t(`apiFile.start2`) }}</td>
                <td>{{ $t(`apiFile.start`) }}</td>
              </tr>
              <tr>
                <td>end</td> 
                <td>string</td>
                <td>{{ $t(`apiFile.end2`) }}</td>
                <td>{{ $t(`apiFile.end`) }}</td>
              </tr>
             
             
            </table>
            <p class="hash">{{ $t(`apiFile.response`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>hashrate_24h</td> 
                <td class="active"> <a href="#minerHashRate">HashRate</a></td>
                <td>repeated</td>
                <td>{{ $t(`apiFile.historyPower24h`) }}</td>
              </tr>
              <tr>
                <td>unit</td> 
                <td > string</td>
                <td></td>
                <td>{{ $t(`apiFile.Company`) }}（h/s, kh/s, mh/s, gh/s …）</td>
              </tr>
             
             
            </table>
          </div>
     
          <div class="Pool">        
            <p class="hash">{{ $t(`apiFile.realTimeMiningMachine24h30m`) }}</p>
            <p class="Interface">Post  /oapi/v1/miner/hashrate_last24h</p>
            <p class="hash">{{ $t(`apiFile.jurisdiction`) }}     miner</p>
            <p class="hash">{{ $t(`apiFile.parameter`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>coin</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.currency`) }}</td>
              </tr>
              <tr>
                <td>mining_user</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.accountApiKey`) }}</td>
              </tr>
              <tr>
                <td>miner</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.aCertainMiner`) }}</td>
              </tr>
             
            </table>
            <p class="hash">{{ $t(`apiFile.response`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>hashrate_30m</td> 
                <td class="active"> <a href="#minerHashRate">HashRate</a> </td>
                <td>repeated</td>
                <td>{{ $t(`apiFile.average24h30m`) }}</td>
              </tr>
              <tr>
                <td>unit</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.Company`) }}（h/s, kh/s, mh/s, gh/s …）</td>
              </tr>
            
            
             
            </table>
          </div>
           
        </section>
        
      </section> -->
      <section class="rightText" v-else >
        <p class="backMenu" @click="backMenu">{{ $t("apiFile.backMenu") || "返回目录" }} </p>
        <section class="rightContent">
          <div v-if="documentLoading" class="loading-container">
            <span class="loading-text">{{
              $t("home.loadingContent") || "正在加载内容..."
            }}</span>
          </div>
          <div
            v-else-if="info && info.trim()"
            class="dynamic-content"
            v-html="info"
          ></div>
          <div v-else class="no-content">
            <p>{{ $t("home.noContent") || "暂无内容" }}</p>
          </div>
        </section>

      
      </section>
    </section>

    <section class="rateBox" v-else>
    
      <section class="leftMenu">
        <ul>
          <li
            v-for="item in navList"
            :class="{ navActive: String(item.id) === String(DetailsParams.id) }"
            :key="item.id"
            @click="clickJump(item)"
          >
            <i class="iconfont icon-baogao file"></i>{{ item.title }}
          </li>
        </ul>
      </section>
      <section class="rightText">
        <section class="rightContent">
          <div v-if="documentLoading" class="loading-container">
            <span class="loading-text">{{
              $t("home.loadingContent") || "正在加载内容..."
            }}</span>
          </div>
          <div
            v-else-if="info && info.trim()"
            class="dynamic-content"
            v-html="info"
          ></div>
          <div v-else class="no-content">
            <p>{{ $t("home.noContent") || "暂无内容" }}</p>
          </div>
        </section>

        <!-- -------------------------------------- -->
        <!-- <h2>{{ $t(`apiFile.file`) }}</h2>
        <div class="content">
          <h3>{{ $t(`apiFile.survey`) }}</h3>
          <p>{{ $t(`apiFile.survey1`) }}</p>
          <p>{{ $t(`apiFile.survey2`) }}</p>
         
        </div>

        <div class="content">
          <h3>{{ $t(`apiFile.apiAuthentication`) }}</h3>
          <p>{{ $t(`apiFile.apiAuthentication1`) }} <span @click="handelJump(`personalCenter/personalAPI`)" style="color: #651FFF;cursor: pointer;">{{ $t(`apiFile.apiAuthentication5`) }}</span> {{ $t(`apiFile.apiAuthentication6`) }}</p>
          <p>{{ $t(`apiFile.apiAuthentication2`) }}</p>
          <p>{{ $t(`apiFile.apiAuthentication3`) }}</p>
          <p>{{ $t(`apiFile.apiAuthentication4`) }}</p>
          <ul>
            <li>curl --request GET {url} \</li>
            <li>--header 'Content-Type: application/json' \</li>
            <li>--header 'API-KEY: {token}'</li>
          </ul>
        </div>

        <div class="ExampleTable">
          <div class="title"><span>{{ $t(`apiFile.url`) }}</span> <span>{{ $t(`apiFile.explain`) }}</span></div>
          <div>
            <span>https://m2pool.com/oapi/v1/pool/watch?coin={coin}</span>
            <span
              >{{ $t(`apiFile.explain1`) }}</span
            >
          </div>
          <div>
            <span
              >https://m2pool.com/oapi/v1/pool/
              hashrate_history?coin={coin}&start={yyyy-MM-dd}&end={yyyy-MM-dd
              }</span
            >
            <span>{{ $t(`apiFile.explain2`) }}</span>
          </div>
        </div>
        <div class="text-container">
          <p>{{ $t(`apiFile.explain3`) }}</p>
          <div class="container">
            <p>{</p>
            <p style="color:crimson">"code": {ERR_CODE},</p>
            <p > "msg": "{{ $t(`apiFile.explain4`) }}"</p>
            <p>}</p>
          </div>
        </div>
        <div class="text-container">
          <p>{{ $t(`apiFile.explain5`) }}</p>
          <div class="container">
            <p>{</p>
            <p style="color:green">"code": 200,</p>
            <p>"data": object</p>
            <p>}</p>
          </div>
          <p>{{ $t(`apiFile.explain6`) }}</p>
        </div> -->
        <!-- 矿池信息 -->
        <!-- <section class="MiningPool" id="HashRate">
          <h3>{{ $t(`apiFile.miningPoolInformation`) }}</h3>

          <div class="Pool" >
            <p>{{ $t(`apiFile.miningPoolInformation1`) }}</p>
            <p class="hash">HashRate</p>
            <p>{{ $t(`apiFile.miningPoolInformation2`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>date</td> 
                <td>Date</td>
                <td></td>
                <td>{{ $t(`apiFile.powerStatistics`) }}</td>
              </tr>
              <tr>
                <td>hashrate</td>
                <td>double</td>
                <td></td>
                <td>{{ $t(`apiFile.power`) }}</td>
              </tr>
            </table>
          </div>
          <div class="Pool" id="MinersList">        
            <p class="hash">MinersList</p>
            <p>{{ $t(`apiFile.minersNum`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>total</td> 
                <td>int</td>
                <td></td>
                <td>{{ $t(`apiFile.totalMiners`) }}</td>
              </tr>
              <tr>
                <td>online</td>
                <td>int</td>
                <td></td>
                <td>{{ $t(`apiFile.onLineMiners`) }}</td>
              </tr>
              <tr>
                <td>offline</td>
                <td>int</td>
                <td></td>
                <td>{{ $t(`apiFile.offLineMiners`) }}</td>
              </tr>
            </table>
          </div>
       
          <div class="Pool">        
            <p class="hash">{{ $t(`apiFile.overviewOfMiningPool`) }}</p>
            <p class="Interface">Get /oapi/v1/pool/watch</p>
            <p class="hash">{{ $t(`apiFile.jurisdiction`) }}     pool</p>
            <p class="hash">{{ $t(`apiFile.parameter`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>coin</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.currency`) }}</td>
              </tr>
             
            </table>
            <p class="hash">{{ $t(`apiFile.response`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>pool_fee</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.serviceCharge`) }}</td>
              </tr>
              <tr>
                <td>min_pay</td> 
                <td>double</td>
                <td></td>
                <td>{{ $t(`apiFile.minimumPaymentAmount`) }}</td>
              </tr>
              <tr>
                <td>miners</td> 
                <td>int</td>
                <td></td>
                <td>{{ $t(`apiFile.onLineMiners`) }}</td>
              </tr>
              <tr>
                <td>history_last_7days</td> 
                <td class="active"> <a href="#HashRate">HashRate</a></td>
                <td>repeated</td>
                <td>{{ $t(`apiFile.latelyPower24h`) }}</td>
              </tr>
              <tr>
                <td>hashrate</td> 
                <td>Double</td>
                <td></td>
                <td>{{ $t(`apiFile.Power24h`) }}</td>
              </tr>
              <tr>
                <td>last_found</td> 
                <td>int</td>
                <td></td>
                <td>{{ $t(`apiFile.height`) }}</td>
              </tr>
             
            </table>
          </div>

      
          <div class="Pool">        
            <p class="hash">{{ $t(`apiFile.currentMiners`) }}</p>
            <p class="Interface">Get /oapi/v1/pool/miners_list</p>
            <p class="hash">{{ $t(`apiFile.jurisdiction`) }}     pool</p>
            <p class="hash">{{ $t(`apiFile.parameter`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>coin</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.currency`) }}</td>
              </tr>
             
            </table>
            <p class="hash">{{ $t(`apiFile.response`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>miners_list</td> 
                <td class="active"> <a href="#MinersList">MinersList</a></td>
                <td>repeated</td>
                <td>{{ $t(`apiFile.eachState`) }}</td>
              </tr>
             
             
            </table>
          </div>
      
          <div class="Pool">        
            <p class="hash">{{ $t(`apiFile.realTimePower`) }}</p>
            <p class="Interface">Get /oapi/v1/pool/hashrate</p>
            <p class="hash">{{ $t(`apiFile.jurisdiction`) }}     pool</p>
            <p class="hash">{{ $t(`apiFile.parameter`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>coin</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.currency`) }}</td>
              </tr>
             
            </table>
            <p class="hash">{{ $t(`apiFile.response`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>hashrate_realtime</td> 
                <td>double</td>
                <td></td>
                <td>{{ $t(`apiFile.averagePower30m`) }}</td>
              </tr>
              <tr>
                <td>hashrate_24h</td> 
                <td>double</td>
                <td></td>
                <td>{{ $t(`apiFile.averagePower24h`) }}</td>
              </tr>
              <tr>
                <td>unit</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.Company`) }} （h/s, kh/s, mh/s, gh/s …）</td>
              </tr>
            
             
            </table>
          </div>
        
             <div class="Pool">        
            <p class="hash">{{ $t(`apiFile.historyPower`) }}</p>
            <p class="Interface">Get /oapi/v1/pool/hashrate_history</p>
            <p class="hash">{{ $t(`apiFile.jurisdiction`) }}     pool</p>
            <p class="hash">{{ $t(`apiFile.parameter`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>coin</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.currency`) }}</td>
              </tr>
              <tr>
                <td>start</td> 
                <td>string</td>
                <td>{{ $t(`apiFile.start2`) }}</td>
                <td>{{ $t(`apiFile.start`) }}</td>
              </tr>
              <tr>
                <td>end</td> 
                <td>string</td>
                <td>{{ $t(`apiFile.end2`) }}</td>
                <td>{{ $t(`apiFile.end`) }}</td>
              </tr>
             
            </table>
            <p class="hash">{{ $t(`apiFile.response`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>hashrate_30m</td> 
                <td class="active"> <a href="#HashRate">HashRate</a></td>
                <td>repeated</td>
                <td>{{ $t(`apiFile.historyPower30m`) }}</td>
              </tr>
              <tr>
                <td>hashrate_24h</td> 
                <td class="active"> <a href="#HashRate">HashRate</a></td>
                <td>repeated</td>
                <td>{{ $t(`apiFile.historyPower24h`) }}</td>
              </tr>
              <tr>
                <td>unit</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.Company`) }}（h/s, kh/s, mh/s, gh/s …）</td>
              </tr>
            
             
            </table>
          </div>
        </section> -->

        <!-- 挖矿账号信息 -->
        <!-- <section class="MiningPool" id="accountHashRate" >
          <h3>{{ $t(`apiFile.miningAccount`) }}</h3>
         
          <div class="Pool" >
            <p>{{ $t(`apiFile.miningPoolInformation1`) }}</p>
            <p class="hash">HashRate</p>
            <p>{{ $t(`apiFile.miningPoolInformation2`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>date</td> 
                <td>Date</td>
                <td></td>
                <td>{{ $t(`apiFile.powerStatistics`) }}</td>
              </tr>
              <tr>
                <td>hashrate</td>
                <td>double</td>
                <td></td>
                <td>{{ $t(`apiFile.power`) }}</td>
              </tr>
            </table>
          </div>
        
          <div class="Pool" id="accountList">        
            <p class="hash">MinersList</p>
            <p>{{ $t(`apiFile.minerData`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>total</td> 
                <td>int</td>
                <td></td>
                <td>{{ $t(`apiFile.totalMiners`) }}</td>
              </tr>
              <tr>
                <td>online</td>
                <td>int</td>
                <td></td>
                <td>{{ $t(`apiFile.onLineMiners`) }}</td>
              </tr>
              <tr>
                <td>offline</td>
                <td>int</td>
                <td></td>
                <td>{{ $t(`apiFile.offLineMiners`) }}</td>
              </tr>
            </table>
          </div>
      
            <div class="Pool"  id="MinerInfo">        
            <p class="hash">MinerInfo</p>
            <p>{{ $t(`apiFile.stateData`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>miner</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.minerId`) }}</td>
              </tr>
              <tr>
                <td>state</td>
                <td>int</td>
                <td></td>
                <td>{{ $t(`apiFile.minerStatus`) }}<br>
                  {{ $t(`apiFile.minerStatus0`) }}<br>
                    {{ $t(`apiFile.minerStatus1`) }}<br>
                    {{ $t(`apiFile.minerStatus2`) }}</td>
              </tr>
             
            </table>
          </div>
        
          <div class="Pool">        
            <p class="hash">{{ $t(`apiFile.overviewOfMiners`) }}</p>
            <p class="Interface">Post  /oapi/v1/account/watch </p>
            <p class="hash">{{ $t(`apiFile.jurisdiction`) }}     account</p>
            <p class="hash">{{ $t(`apiFile.parameter`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>coin</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.currency`) }}</td>
              </tr>
              <tr>
                <td>mining_user</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.accountApiKey`) }}</td>
              </tr>
             
            </table>
            <p class="hash">{{ $t(`apiFile.response`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>miners_list</td> 
                <td class="active"> <a href="#accountList">MinersList</a></td>
                <td>repeated</td>
                <td>{{ $t(`apiFile.eachState`) }}</td>
              </tr>
            
             
            </table>
          </div>

       
          <div class="Pool">        
            <p class="hash">{{ $t(`apiFile.allMiners`) }}</p>
            <p class="Interface">Post  /oapi/v1/account/miners_list</p>
            <p class="hash">{{ $t(`apiFile.jurisdiction`) }}     account</p>
            <p class="hash">{{ $t(`apiFile.parameter`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>coin</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.currency`) }}</td>
              </tr>
              <tr>
                <td>mining_user</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.accountApiKey`) }}</td>
              </tr>
             
            </table>
            <p class="hash">{{ $t(`apiFile.response`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>miners_list</td> 
                <td class="active"> <a href="#MinerInfo">MinerInfo</a></td>
                <td>repeated</td>
                <td>{{ $t(`apiFile.eachState`) }}</td>
              </tr>
             
             
            </table>
          </div>
  
          <div class="Pool">        
            <p class="hash">{{ $t(`apiFile.realTimeAccount`) }}</p>
            <p class="Interface">Post /oapi/v1/account/hashrate_real</p>
            <p class="hash">{{ $t(`apiFile.jurisdiction`) }}     account</p>
            <p class="hash">{{ $t(`apiFile.parameter`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>coin</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.currency`) }}</td>
              </tr>
              <tr>
                <td>mining_user</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.accountApiKey`) }}</td>
              </tr>
             
            </table>
            <p class="hash">{{ $t(`apiFile.response`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>hashrate_realtime</td> 
                <td>double</td>
                <td></td>
                <td>{{ $t(`apiFile.averagePower30m`) }}</td>
              </tr>
              <tr>
                <td>hashrate_24h</td> 
                <td>double</td>
                <td></td>
                <td>{{ $t(`apiFile.averagePower24h`) }}</td>
              </tr>
              <tr>
                <td>unit</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.Company`) }}（h/s, kh/s, mh/s, gh/s …）</td>
              </tr>
            
             
            </table>
          </div>
      
             <div class="Pool">        
            <p class="hash">{{ $t(`apiFile.account24h`) }}</p>
            <p class="Interface">Post   /oapi/v1/account/hashrate_history</p>
            <p class="hash">{{ $t(`apiFile.jurisdiction`) }}     account</p>
            <p class="hash">{{ $t(`apiFile.parameter`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>coin</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.currency`) }}</td>
              </tr>
              <tr>
                <td>mining_user</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.accountApiKey`) }}</td>
              </tr>
              <tr>
                <td>start</td> 
                <td>string</td>
                <td>{{ $t(`apiFile.start2`) }}</td>
                <td>{{ $t(`apiFile.start`) }}</td>
              </tr>
              <tr>
                <td>end</td> 
                <td>string</td>
                <td>{{ $t(`apiFile.end2`) }}</td>
                <td>{{ $t(`apiFile.end`) }}</td>
              </tr>
             
            </table>
            <p class="hash">{{ $t(`apiFile.response`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>hashrate_24h</td> 
                <td class="active"> <a href="#accountHashRate">HashRate</a></td>
                <td>repeated</td>
                <td>{{ $t(`apiFile.historyPower24h`) }}</td>
              </tr>             
              <tr>
                <td>unit</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.Company`) }}（h/s, kh/s, mh/s, gh/s …）</td>
              </tr>
            
             
            </table>
          </div>
        
            <div class="Pool">        
            <p class="hash">{{ $t(`apiFile.account24h30m`) }}</p>
            <p class="Interface">Post /oapi/v1/account/hashrate_last24h</p>
            <p class="hash">{{ $t(`apiFile.jurisdiction`) }}     account</p>
            <p class="hash">{{ $t(`apiFile.parameter`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>coin</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.currency`) }}</td>
              </tr>
              <tr>
                <td>mining_user</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.accountApiKey`) }}</td>
              </tr>            
             
            </table>
            <p class="hash">{{ $t(`apiFile.response`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>hashrate_30m</td> 
                <td class="active"> <a href="#accountHashRate">HashRate</a></td>
                <td>repeated</td>
                <td>{{ $t(`apiFile.average24h30m`) }}</td>
              </tr>             
              <tr>
                <td>unit</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.Company`) }}（h/s, kh/s, mh/s, gh/s …）</td>
              </tr>
            
             
            </table>
          </div>
        </section> -->

        <!-- <section class="MiningPool" id="minerHashRate" >
          <h3>{{ $t(`apiFile.miningMachineInformation`) }}</h3>     
          
          <div class="Pool" >
            <p>{{ $t(`apiFile.miningPoolInformation1`) }}</p>
            <p class="hash">HashRate</p>
            <p>{{ $t(`apiFile.miningPoolInformation2`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>date</td> 
                <td>Date</td>
                <td></td>
                <td>{{ $t(`apiFile.powerStatistics`) }}</td>
              </tr>
              <tr>
                <td>hashrate</td>
                <td>double</td>
                <td></td>
                <td>{{ $t(`apiFile.power`) }}</td>
              </tr>
            </table>
          </div>
     
          <div class="Pool">        
            <p class="hash">{{ $t(`apiFile.realTimeMiningMachine`) }}</p>
            <p class="Interface">Post /oapi/v1/miner/hashrate_real</p>
            <p class="hash">{{ $t(`apiFile.jurisdiction`) }}     miner</p>
            <p class="hash">{{ $t(`apiFile.parameter`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>coin</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.currency`) }}</td>
              </tr>
              <tr>
                <td>mining_user</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.accountApiKey`) }}</td>
              </tr>
              <tr>
                <td>miner</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.aCertainMiner`) }}</td>
              </tr>
             
            </table>
            <p class="hash">{{ $t(`apiFile.response`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>hashrate_realtime</td> 
                <td >double</td>
                <td></td>
                <td>{{ $t(`apiFile.averagePower30m`) }}</td>
              </tr>
              <tr>
                <td>hashrate_24h</td> 
                <td >double</td>
                <td></td>
                <td>{{ $t(`apiFile.averagePower24h`) }}</td>
              </tr>
              <tr>
                <td>unit</td> 
                <td >string</td>
                <td></td>
                <td>{{ $t(`apiFile.Company`) }}（h/s, kh/s, mh/s, gh/s …）</td>
              </tr>          
            </table>
          </div>

      
          <div class="Pool">        
            <p class="hash">{{ $t(`apiFile.miningMachineHistory24h`) }}</p>
            <p class="Interface">Post /oapi/v1/miner/hashrate_history</p>
            <p class="hash">{{ $t(`apiFile.jurisdiction`) }}     miner</p>
            <p class="hash">{{ $t(`apiFile.parameter`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>coin</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.currency`) }}</td>
              </tr>
              <tr>
                <td>mining_user</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.accountApiKey`) }}</td>
              </tr>
              <tr>
                <td>miner</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.aCertainMiner`) }}</td>
              </tr>
              <tr>
                <td>start</td> 
                <td>string</td>
                <td>{{ $t(`apiFile.start2`) }}</td>
                <td>{{ $t(`apiFile.start`) }}</td>
              </tr>
              <tr>
                <td>end</td> 
                <td>string</td>
                <td>{{ $t(`apiFile.end2`) }}</td>
                <td>{{ $t(`apiFile.end`) }}</td>
              </tr>
             
             
            </table>
            <p class="hash">{{ $t(`apiFile.response`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>hashrate_24h</td> 
                <td class="active"> <a href="#minerHashRate">HashRate</a></td>
                <td>repeated</td>
                <td>{{ $t(`apiFile.historyPower24h`) }}</td>
              </tr>
              <tr>
                <td>unit</td> 
                <td > string</td>
                <td></td>
                <td>{{ $t(`apiFile.Company`) }}（h/s, kh/s, mh/s, gh/s …）</td>
              </tr>
             
             
            </table>
          </div>
    
          <div class="Pool">        
            <p class="hash">{{ $t(`apiFile.realTimeMiningMachine24h30m`) }}</p>
            <p class="Interface">Post /oapi/v1/miner/hashrate_last24h</p>
            <p class="hash">{{ $t(`apiFile.jurisdiction`) }}     miner</p>
            <p class="hash">{{ $t(`apiFile.parameter`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>coin</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.currency`) }}</td>
              </tr>
              <tr>
                <td>mining_user</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.accountApiKey`) }}</td>
              </tr>
              <tr>
                <td>miner</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.aCertainMiner`) }}</td>
              </tr>
             
            </table>
            <p class="hash">{{ $t(`apiFile.response`) }}</p>
            <table border="1">
              <tr>
                <th>{{ $t(`apiFile.name`) }}</th>
                <th>{{ $t(`apiFile.type`) }}</th>
                <th>{{ $t(`apiFile.remarks`) }}</th>
                <th>{{ $t(`apiFile.Explain`) }}</th>
              </tr>
              <tr>
                <td>hashrate_30m</td> 
                <td class="active"> <a href="#minerHashRate">HashRate</a> </td>
                <td>repeated</td>
                <td>{{ $t(`apiFile.average24h30m`) }}</td>
              </tr>
              <tr>
                <td>unit</td> 
                <td>string</td>
                <td></td>
                <td>{{ $t(`apiFile.Company`) }}（h/s, kh/s, mh/s, gh/s …）</td>
              </tr>
            
            
             
            </table>
          </div>
           
        </section> -->
      </section>
    </section>
  </div>
</template>

<script>
import Index from "./index.js";
export default {
  mixins: [Index],
  metaInfo: {
    meta: [
      {
        name: "keywords",
        content:
          "API 文档,认证 token,接口调用,API documentation, authentication tokens, interface calls",
      },
      {
        name: "description",
        content: window.vm.$t(`seo.apiFile`),
      },
    ],
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    handelJump(url) {
      const lang = this.$i18n.locale;
      // 移除开头的斜杠以避免双斜杠
      const cleanPath = url.startsWith("/") ? url.slice(1) : url;
      this.$router.push(`/${lang}/${cleanPath}`);
    },
  },
};
</script>

<style scoped lang="scss">
// 手机端适配
@media screen and (min-width: 220px) and (max-width: 1279px) {
  .rate {
    background: transparent !important;
    min-height: 360px;
  }
  .rateMobile {
    padding: 10px;
    .leftMenu ul{
      margin-top: 30px !important;
      max-height: 500px !important;
      overflow-y: auto !important;
    }
    .leftMenu ul li {
      font-size: 0.9rem !important;
      padding: 10px !important;
      border-radius: 10px !important;
      background: rgba(91, 33, 182, 0.06) !important; /* 淡紫块，提高可读性 */
      border: 1px solid #ede9fe !important;
      text-decoration: none !important;
      transition: background 0.2s ease, transform 0.1s ease;
    }
    .leftMenu ul li:hover {
      background: rgba(91, 33, 182, 0.12) !important;
      transform: translateY(-1px);
    }
  }
  .backMenu{
    position: sticky;
    top: 8px;
    z-index: 5;
    color: #5b21b6;
    font-size: 0.95rem !important;
    margin: 0 0 10px 2px !important;
    display: inline-block !important;
    text-decoration: none;
    cursor: pointer;
    background: rgba(255,255,255,0.9);
    border: 1px solid #ede9fe;
    padding: 6px 10px;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  }
  .catalogue{
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
  }
  .rightContent .dynamic-content {
    overflow-x: auto !important; /* 超出时允许横向滚动（兜底） */
    -webkit-overflow-scrolling: touch;
  }
  .rightContent .dynamic-content :deep(table) {
    /* 对含有 colspan/rowspan 的表格，固定布局会引发表头与列错位，这里改为自动布局 */
    table-layout: auto !important;
    width: 100% !important;
    border-collapse: collapse !important;
  }
  .rightContent .dynamic-content :deep(th),
  .rightContent .dynamic-content :deep(td) {
  
    white-space: normal !important;
    padding: 0px !important;
    font-size: 0.7rem !important; /* 表格单元格字号 */
    min-width: 0 !important; /* 覆盖外层全局 td 的最小宽度，避免小屏列被强撑导致错位 */
    vertical-align: left !important;
  }
  /* 步骤里的段落在移动端必须自动换行，禁止引发横向滚动条 */
  .rightContent .dynamic-content :deep(p) {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important; /* 优先按单词/字符断行 */
    overflow-wrap: anywhere !important; /* 极端长串也强制换行 */
    word-wrap: break-word !important; /* 旧版兼容 */
    font-size: 0.8rem !important;
  }
  .rightContent .dynamic-content :deep(a) {
    font-size: 0.7rem !important;
  }
  .rightContent .dynamic-content :deep(li) {
    font-size: 0.7rem !important;
  }

  .rightContent .dynamic-content :deep(pre) {
    font-size: 0.7rem !important;
  }

  .rightContent .dynamic-content :deep(font) {
    font-size: 0.7rem !important;
    min-width: 40px !important;
    display: inline-block !important;
  }
  .rightContent .dynamic-content :deep(h2) {
    font-size: 1rem !important;
  }

  .rightContent .dynamic-content :deep(h3) {
    font-size: 0.9rem !important;
  }
  .content,
  .ExampleTable,
  .text-container,
  .MiningPool {
    margin-top: 18px;
    font-size: 0.9rem;
    p {
      font-size: 0.9rem;
      margin-top: 5px;
    }
    li {
      font-size: 0.9rem;
    }
    div {
      font-size: 0.9rem;
    }
    span {
      font-size: 0.9rem;
    }

    table {
      border-collapse: collapse; /* 确保边框合并为单一线条 */
      margin-top: 8px;
    }

    table,
    th,
    td {
      border: 1px solid #808080; /* 灰色实线边框 */
      font-size: 0.9rem;
      padding: 8px;
    }
  }

  .active {
    font-weight: 600;
    background: #f2ecf6;
    cursor: pointer;
    text-decoration: underline;
  }

  /* 移动端 navContent 样式 */
  .navContent {
    width: 100%;
    padding: 15px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;

    .loading-container,
    .error-container {
      text-align: center;
      padding: 30px 15px;
      color: #666;
      font-size: 0.9rem;
    }

    .error-container {
      color: #f56c6c;
    }

    .document-content {
      font-size: 0.9rem;
      line-height: 1.5;
      color: #333;
      word-wrap: break-word;

      /* 动态内容卡片化 */
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 6px 16px rgba(0,0,0,0.06);
      padding: 14px;

      h1,
      h2,
      h3 {
        margin: 15px 0 10px 0;
        color: #2c3e50;
        font-weight: 600;
      }

      h1 {
        font-size: 1.4rem;
      }
      h2 {
        font-size: 1.2rem;
      }
      h3 {
        font-size: 1.1rem;
      }

      p {
        margin: 8px 0;
        line-height: 1.5;
      }

      code {
        background: #f4f4f4;
        padding: 2px 4px;
        border-radius: 2px;
        font-size: 0.85rem;
      }

      pre {
        background: #f4f4f4;
        padding: 10px;
        border-radius: 4px;
        overflow-x: auto;
        margin: 10px 0;
        font-size: 0.8rem;
      }

      table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        margin: 10px 0;
        font-size: 0.85rem;
        border-radius: 10px;
        overflow: hidden;

        th,
        td {
          border: 1px solid #eee;
          padding: 10px 8px;
          text-align: left;
        }

        th {
          background: #f5f3ff;
          color: #4c1d95;
          font-weight: 700;
        }

        tr:nth-child(even) td {
          background: #fafafa;
        }
      }

      a {
        color: #5b21b6;
        text-decoration: none;
      }

      * {
        max-width: 100%;
        box-sizing: border-box;
      }
    }
  }
}

.rate {
  width: 100%;

  background: #fff;
  background-image: url(../../assets/img/miningAccount/top.png);
  background-size: 100% 50%;
  background-repeat: no-repeat;
  background-position: 30% -15%;
  padding: 0;
  margin: 0;
  padding-top: 20px;
}
a {
  transition: 0.3s all;
}
.rateBox {
  width: 90%;
  height: 830px;
  margin: 0 auto;
  display: flex;
  justify-content: center;

  border-radius: 8px;
  overflow: hidden;
  padding: 20px;
  transition: 0.3s linear;

  .leftMenu {
    min-width: 240px;
    text-align: center;
    margin-right: 2%;
    padding-top: 50px;
    // background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0px 0px 8px 2px #ccc;

    ul {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0;
      margin: 0;
      li {
        width: 100%;
        list-style: none;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 90%;
        margin-top: 10px;
        border-radius: 5px;
        background: rgba(210, 195, 234, 0.3);
        color: #000;
        cursor: pointer;
        .file {
          margin-right: 5px;
        }
      }
    }
  }
  .rightText {
    flex: 1;
    // width: 80%;
    background: #fff;
    padding: 50px;
    box-shadow: 0px 0px 8px 2px #ccc;
    height: 100%;
    overflow-y: auto;
    .Interface {
      height: 50px;
      line-height: 50px;
      background: #f7f7f7;
      padding-left: 10px;
    }
    .tableTitle {
      width: 90%;

      display: flex;
      align-items: center;
      height: 60px;
      background: #d2c3ea;
      span {
        display: inline-block;
        width: calc(100% / 5);
        text-align: center;
      }
    }
    .content {
      margin-top: 30px;
      h3 {
        margin-bottom: 20px;
      }
      p {
        line-height: 30px;
        font-size: 0.95rem;
      }
      ul {
        padding: 20px;
        padding-left: 20px;
        background: #f7f7f7;
        font-size: 0.9rem;
        li {
          // list-style-type: disc;
          margin-top: 8px;
        }
      }
    }
    .ExampleTable {
      background: #f7f7f7;
      width: 100%;
      padding-left: 10px;
      padding-bottom: 20px;

      .title {
        height: 35px;
        line-height: 35px;
        font-weight: bold;
        overflow: hidden;
      }
      div {
        box-sizing: border-box;
        width: 95%;
        display: flex;
        height: 120px;
        font-size: 0.9rem;
        align-items: center;
        overflow-y: auto;

        span {
          width: 100%;
          border: 1px solid rgba(0, 0, 0, 0.3);
          height: 100%;
          // line-height: 30px;
          padding-left: 10px;
          // background: goldenrod;
        }
      }
    }
    .text-container {
      margin-top: 15px;
      p {
        margin-top: 10px;
        font-size: 0.95rem;
      }
      .container {
        background: #f7f7f7;
        padding-left: 10px;
      }
    }
    .MiningPool {
      margin-top: 50px;
      font-size: 0.95rem;
      .Pool {
        margin-top: 20px;
        p {
          margin-top: 8px;
        }
        .hash {
          font-weight: 600;
        }
      }
    }
  }
  .active {
    font-weight: 600;
    background: #f2ecf6;
    cursor: pointer;
    text-decoration: underline;
  }

  table {
    border-collapse: collapse; /* 确保边框合并为单一线条 */
    margin-top: 8px;
  }

  table,
  th,
  td {
    border: 1px solid #808080; /* 灰色实线边框 */
    font-size: 0.95rem;
  }
  td {
    padding: 5px;
    min-width: auto; /* 避免影响移动端动态内容表格的列宽计算 */
    height: 40px;
    text-align: center;
    font-size: 0.9rem;
  }
  th {
    font-weight: bold;
    padding: 8px;
  }

  tr:nth-child(odd) {
    background-color: #f7f7f7;
  }
  /* 为偶数行设置背景色 */
  tr:nth-child(even) {
    background-color: #ffffff;
  }

  /* 第一行背景色 */
  tr:first-child {
    background-color: #ffffff;
  }

  /* navContent 动态文档内容样式 */
  .navContent {
    width: 100%;
    max-width: 100%;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    overflow: hidden; /* 确保不超出容器 */

    .loading-container,
    .error-container {
      text-align: center;
      padding: 40px 20px;
      color: #666;
      font-size: 14px;
    }

    .error-container {
      color: #f56c6c;
    }

    .document-content {
      font-size: 14px;
      line-height: 1.6;
      color: #333;
      word-wrap: break-word;
      overflow-wrap: break-word;

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        margin: 20px 0 15px 0;
        color: #2c3e50;
        font-weight: 600;
      }

      h1 {
        font-size: 28px;
      }
      h2 {
        font-size: 24px;
      }
      h3 {
        font-size: 20px;
      }

      p {
        margin: 10px 0;
        line-height: 1.6;
      }

      code {
        background: #f4f4f4;
        padding: 2px 6px;
        border-radius: 3px;
        font-family: "Courier New", monospace;
        font-size: 13px;
      }

      pre {
        background: #f4f4f4;
        padding: 15px;
        border-radius: 5px;
        overflow-x: auto;
        margin: 15px 0;

        code {
          background: none;
          padding: 0;
        }
      }

      table {
        width: 100%;
        border-collapse: collapse;
        margin: 15px 0;
        font-size: 13px;

        th,
        td {
          border: 1px solid #ddd;
          padding: 8px 12px;
          text-align: left;
        }

        th {
          background: #f8f9fa;
          font-weight: 600;
        }

        tr:nth-child(even) {
          background: #f9f9f9;
        }
      }

      a {
        color: #5721e4;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }

      strong {
        font-weight: 600;
        color: #2c3e50;
      }

      em {
        font-style: italic;
        color: #666;
      }

      /* 确保所有内容不超出容器 */
      * {
        max-width: 100%;
        box-sizing: border-box;
      }

      /* 图片自适应 */
      img {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
      }
    }
  }
}

/* 主容器样式 */
.navContent {
  background: #ffffff; /* 白色背景 */
  padding: 24px; /* 统一内边距 */
  border-radius: 12px; /* 圆角 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); /* 轻微阴影 */
  margin-bottom: 20px;
}

/* 加载状态样式 */
.loading-container {
  background: #f8f9fa; /* 浅灰背景 */
  padding: 40px 20px; /* 上下40px，左右20px */
  text-align: center;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.loading-container p {
  color: #6c757d;
  font-size: 14px;
  margin: 0;
  /* 可以添加加载动画 */
  animation: pulse 1.5s ease-in-out infinite;
}

/* 文档内容样式 */
.document-content {
  background: #ffffff; /* 纯白背景 */
  padding: 20px; /* 内容区域内边距 */
  border-radius: 8px;
  line-height: 1.6;
  color: #2c3e50;

  /* 如果内容过长，添加滚动 */
  max-height: 70vh;
  overflow-y: auto;
}

/* 错误状态样式 */
.error-container {
  background: #fef5f5; /* 淡红背景 */
  padding: 30px 20px;
  text-align: center;
  border-radius: 8px;
  border: 1px solid #fecaca;
}

.error-container p {
  color: #dc2626; /* 红色文字 */
  font-size: 14px;
  margin: 0;
}
.dynamic-content {
  width: 100%;
  margin: 0 auto;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #222;

  // 富文本样式
  :deep(table) {
    border-collapse: collapse;
    width: 100%;
    margin: 16px 0;
    font-size: 14px;
  }
  :deep(ul) {
    background: #f4f4f4;
    padding: 10px;
    padding-left: 18px;
  }
  :deep(li) {
    margin-top: 10px;
  }
  :deep(code) {
    line-height: 1px !important;
  }
  :deep(span) {
    background-color: transparent !important;
  }
  :deep(pre) {
    background: #f4f4f4;
    line-height: 1 !important;
    padding: 18px 8px;
  }

  :deep(th),
  :deep(td) {
    border: 1px solid #d1d5db;
    padding: 8px 12px;
    text-align: left;
  }
  :deep(th) {
    background: #d2c3ea;
    font-weight: bold;
  }
  :deep(strong),
  :deep(b) {
    font-weight: bold !important;
    color: inherit !important;
    font-style: normal !important;
  }
  :deep(em),
  :deep(i) {
    font-style: italic !important;
    color: inherit !important;
  }
  :deep(a) {
    color: #661ffb !important;
    text-decoration: none !important;
    &:hover {
      text-decoration: underline !important;
    }
  }

  :deep(p) {
    text-align: justify !important;
    text-justify: inter-ideograph !important;

    line-height: 2 !important;
    margin: 0.8em 0 !important;
    /* 英文按单词换行，避免拆词；超长连续单词在必要时断行 */
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important; /* 兼容现代浏览器 */
    word-wrap: break-word !important; /* 兼容旧版浏览器 */
    hyphens: none; /* 禁止连字符，保持整词换行 */
  }
  :deep(div) {
    text-align: justify !important;
    text-justify: inter-ideograph !important;
    line-height: 2 !important;
    margin: 0.8em 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important; /* 兼容现代浏览器 */
    word-wrap: break-word !important; /* 兼容旧版浏览器 */
    hyphens: none;
  }
}

/* 加载动画 */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .navContent {
    padding: 16px; /* 移动端减少内边距 */
    margin: 10px;
  }

  .document-content {
    padding: 15px;
    max-height: 60vh; /* 移动端调整最大高度 */
  }

  .loading-container,
  .error-container {
    padding: 25px 15px;
  }
}

.navActive {
  background: #ac85e0 !important;
}
</style>