123
dcc
2024-06-11 1a0dfc3414d02b4247e2160436d37413da8bf295
123
9 files modified
766 ■■■■ changed files
src/components/layout/headerMenuItem.vue 2 ●●● patch | view | raw | blame | history
src/i18n/cht/home.js 1 ●●●● patch | view | raw | blame | history
src/i18n/de/home.js 1 ●●●● patch | view | raw | blame | history
src/i18n/en/home.js 1 ●●●● patch | view | raw | blame | history
src/i18n/fra/home.js 1 ●●●● patch | view | raw | blame | history
src/i18n/kor/home.js 1 ●●●● patch | view | raw | blame | history
src/i18n/zh/home.js 1 ●●●● patch | view | raw | blame | history
src/views/market/components/hangqing.vue 542 ●●●●● patch | view | raw | blame | history
src/views/market/components/pageDetail.vue 216 ●●●●● patch | view | raw | blame | history
src/components/layout/headerMenuItem.vue
@@ -9,7 +9,7 @@
    <!-- 市场 -->
    <button v-else class="dropbtn" :class="{'menu-active': false}" @click="gotoPage(url,title)">
      <span v-if="title !== 'zhanghu'">{{ t(`message.user.${title}`) }}</span>
      <div v-else style="display: inline-block;margin-top: 12px;">
      <div v-else style="float: left;margin-top: 16px;">
        <svg width="22" height="22" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="svgView"><path data-v-3207902a="" fill="black" d="M7 0C3.136 0 0 3.136 0 7C0 10.864 3.136 14 7 14C10.864 14 14 10.864 14 7C14 3.136 10.864 0 7 0ZM7 2.8C8.351 2.8 9.45 3.899 9.45 5.25C9.45 6.601 8.351 7.7 7 7.7C5.649 7.7 4.55 6.601 4.55 5.25C4.55 3.899 5.649 2.8 7 2.8ZM7 12.6C5.579 12.6 3.899 12.026 2.702 10.584C3.92812 9.622 5.44153 9.09916 7 9.09916C8.55847 9.09916 10.0719 9.622 11.298 10.584C10.101 12.026 8.421 12.6 7 12.6Z"></path></svg>
      </div>
      <img v-if="title == 'licaijijin' || title == 'kuangchisuocang' "  class="icon-arrow-down" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAABYVJREFUWEftl12oVFUUx//rnJl7Jz+pIG4WhvUUpEKEeL1zZiYloYLoxUDqIciM6qFEqSwiu5AUmvkSREIvQR/0ZEUPQnbnnNEQffCSGmEmRKVFQl6z5uucFWvtvc98eO84zo3woXnZc+bj7N/813/91x7CVfagq4wHswLiyj2LkFRHkRn5glZ98ve/8eNmBxQGk5wky8ijU2BvIxXD/bOFGhiIj5fm4ffmhU4A3krFA6/PBmpwoErpLm42DhMRmBmy6oNoBxWi5waFGhwoKjyDJNntNu6C2kiFaM8gUIMDTeS/YuISoVMhBoPgVZHJ3kFj+09dKdRAQHxozfWo1n8F2G/fsEMl4DMqVh74b4DKhS3M8Y5L/AOonyRMRDlkMktpbOIYh8G7QJJFkH2caKLZC/KKFeKT9w7jlz+/B/jmHuq4t96kYmULl/M/AFgCog8RhA8TEc8E1ROIT5dy+DFZQcUwTM0bjm0F03ZVQpuKwOSbhOU47Thbvm8xNzeKi7VzzImvncj0CpWi8cGAyoUnAN6J7MgNksQc5W9FQpMgb57tccAbgqCl5UtqciV0AGKp3zYwv9oCoCZ8f5TyE0emg+qtUDn/OYD7wXwfiov2ITwbgfxR9oaMIv4w1DIddyFwXDWAzSoISSzqpL5SJfkoipU7pyvdjEB8cPVNaNZPg5EFvEfh+SvAyVPsDQPesAlCeW70gba7loQBUUleljWpm89wrIKkpfa8B6kQ7e1WaWagMNgF5k3qBdAkPH+5wJA/DPg5gFypxBYWMK6m5UNcVRhRS72W1MBJs5XooK+pGK3qC4gPrL4Fjfp3IIgEAPlaHng59YwqI1CyvaxqcOsb6yEtmypUA2K7OpXUc2D4c0ZobN9v7VDTKsTl/E4Am1UdLwv1jPhFFLIwqY/k2pZKsRRIymXUoXQVhaSUTc0oc29vPRWij3oC8fF1Qzh35gwnfJ16QtTJLjTKiBqqkF3l53g52+oqpYWpWRinTh1ITAnRvJh6iTzvJSpE23sDRXcv57h+1MBkTKnEL75RR1XKLmjBabfZ8klpBEo3t4aW1xrnwXHN+EhWGIODaBcVos2XAcqvR4IPtCNEHWfkjIMQL4la1kdOOY0dY2DIMUlNbQG4bq71dSldw5ib6B0qRE/2BgqDZ8H8Vmpm8Ygoot5xCtkSOnMLlGyg5q0CsZTIKNNh6saU+ogk0fVUQNuoWGkLzbToLUYOgw2cJHucfy4pkQIutF031PKXy53mVFoeNXb9vDG6U6kxlWYSPO8xCsL3eitUGXsIMX1sukA8lANn5oNkpSFQJgdk5nd0nJbQKSSlad+8vdsaAlfXTtP7+7SSgsqh3kDlwhIgkelshqYtFayHXASkneY6T8ycwrj8ceaW8k21eUpMTT+hEC7uHh8z5dAJALcz/FYyp4FoSybXkic2o7T6LqltIGpHKYg1taa18RBAu6kYbeovqcNgHMwvO2O3+0jL5jpMklrnmZvuLq2tqcXkAikQavILtsO8KoZpGa0MT/YHNLl2Lv746wQzL5ak1u6yIGaemWDUZHajQ7W2k16T2ra8qKPPzSjReebTCxRU3uiGaYvWS9/iMJBjhxw/7CzrSmlRSZRxE9/9HXLnIZtDrbY3ZgZwBIXM6ExH2d7noYngRRC/pkcGLzPtHDMqmRmsm7s55bqLa2b2Gu8cQ2bOmu6B2rPLurXiMHgE4LfBWCBzbeDzEJL34V37NOU/7fq327ljX4d8DoMbwfw8GBvg+XPdkUP9ZM9k5p8rmxMk2wMa1xlx80vAH6dSOZrOM32ZeqYv8sF116B5di3gl0BYCsZt8HMLgWQeGDI1p5DUz4DxDYgOw6e9tGr/z/2AuM/0pdCV3HC2n/0f6HIK/gMJPv5Dn5EZlwAAAABJRU5ErkJggg==" />
src/i18n/cht/home.js
@@ -1136,6 +1136,7 @@
    '您的加入,才能壯大COLLOTI社區!': '您的加入,才能壯大COLLOTI社區!',
    'bottom-info': '在加入或使用平台和網站時,您聲明並保證您完全了解與涉及數位資產的交易或使用平台相關的風險。您同意並瞭解,您全權負責確定這些風險對您自己的財產、潛在價值、適用性和適當性,且本公司不會對任何數位資產提供意見或建議,包括其適用性和適當性,以及任何數位資產的投資策略。您同意並瞭解,您造訪和使用平台和網站的風險由您承擔自行承擔。',
    '版權所有': '版權所有',
    '透過電子郵件/手機號碼註冊': '透過電子郵件/手機號碼註冊',
    //   三、報名
    //   3.1、註冊資格
    //   您確認並承諾:當您完成註冊程序或以本網站允許的其他方式實際使用本網站提供的服務時,您應具有簽署本協議並按照適用法律要求使用本網站服務的能力自然人、法人或其他組織。一旦您點擊同意註冊按鈕,即表示您或您的授權代理人已同意協議內容,該代理人將註冊並使用本網站的服務。如您不具備上述主體資格,由此產生的一切後果由您和您的授權代理人承擔,本公司保留註銷或永久凍結您的賬戶,並追究您和您的授權代理人責任的權利。
src/i18n/de/home.js
@@ -841,4 +841,5 @@
  "您的加入,才能壯大COLLOTI社區!": "Ihre Teilnahme ist der einzige Weg, um die COLLOTI-Community zu vergrößern!",
  'bottom-info': 'Wenn Sie der Plattform und der Website beitreten oder diese nutzen, erklären und garantieren Sie, dass Sie die mit Transaktionen im Zusammenhang mit digitalen Vermögenswerten oder der Nutzung der Plattform verbundenen Risiken vollständig verstehen. Sie stimmen zu und verstehen, dass Sie allein dafür verantwortlich sind, den potenziellen Wert, die Eignung und die Angemessenheit dieser Risiken in Bezug auf Ihr eigenes Eigentum zu bestimmen, und dass das Unternehmen keine Ratschläge oder Empfehlungen zu digitalen Vermögenswerten, einschließlich ihrer Eignung und Angemessenheit, erteilt alle Anlagestrategien für digitale Vermögenswerte. Sie stimmen zu und verstehen, dass Ihr Zugriff auf die Plattform und die Website und deren Nutzung auf Ihr eigenes Risiko erfolgt.',
  '版權所有': 'Alle Rechte vorbehalten',
  '透過電子郵件/手機號碼註冊': 'Registrieren Sie sich per E-Mail/Handynummer',
}
src/i18n/en/home.js
@@ -1325,4 +1325,5 @@
  '您的加入,才能壯大COLLOTI社區!': 'Your participation can strengthen the COLLOTI community!',
  'bottom-info': 'When joining or using the Platform and Website, you represent and warrant that you fully understand the risks associated with transactions involving digital assets or use of the Platform. You agree and understand that you are solely responsible for determining the potential value, suitability and appropriateness of these risks with respect to your own property, and that the Company does not provide advice or recommendations regarding any Digital Asset, including its suitability and appropriateness, and any Digital asset investment strategies. You agree and understand that your access to and use of the Platform and Website is at your own risk.',
  '版權所有': 'all rights reserved',
  '透過電子郵件/手機號碼註冊': 'Register via email/mobile number',
};
src/i18n/fra/home.js
@@ -841,4 +841,5 @@
    "您的加入,才能壯大COLLOTI社區!": "Votre participation est le seul moyen de faire grandir la communauté COLLOTI !",
    'bottom-info': 'Lorsque vous rejoignez ou utilisez la Plateforme et le Site Web, vous déclarez et garantissez que vous comprenez parfaitement les risques associés aux transactions impliquant des actifs numériques ou à l\'utilisation de la Plateforme. Vous acceptez et comprenez que vous êtes seul responsable de la détermination de la valeur potentielle, de l\'adéquation et de la pertinence de ces risques par rapport à votre propre propriété, et que la Société ne fournit aucun conseil ni recommandation concernant tout actif numérique, y compris son adéquation et son caractère approprié, et toutes les stratégies d’investissement dans les actifs numériques. Vous acceptez et comprenez que votre accès et votre utilisation de la Plateforme et du Site Web se font à vos propres risques.',
    '版權所有': 'tous droits réservés',
    '透過電子郵件/手機號碼註冊': 'Inscrivez-vous par e-mail/numéro de portable',
}
src/i18n/kor/home.js
@@ -841,4 +841,5 @@
    "您的加入,才能壯大COLLOTI社區!": "여러분의 참여만이 COLLOTI 커뮤니티를 성장시킬 수 있는 유일한 방법입니다!",
    'bottom-info': '플랫폼 및 웹사이트에 가입하거나 사용할 때 귀하는 디지털 자산 또는 플랫폼 사용과 관련된 거래와 관련된 위험을 완전히 이해하고 있음을 진술하고 보증합니다. 귀하는 자신의 재산과 관련하여 이러한 위험의 잠재적 가치, 적합성 및 적절성을 결정하는 것은 전적으로 귀하에게 책임이 있으며 회사는 적합성과 적절성을 포함하여 디지털 자산에 관한 조언이나 권장 사항을 제공하지 않는다는 점에 동의하고 이해합니다. 모든 디지털 자산 투자 전략. 귀하는 플랫폼과 웹사이트에 대한 액세스 및 사용에 따른 위험은 귀하의 책임이라는 점에 동의하고 이해합니다.',
    '版權所有': '판권 소유',
    '透過電子郵件/手機號碼註冊': '이메일/휴대폰번호로 등록',
}
src/i18n/zh/home.js
@@ -1136,6 +1136,7 @@
  '您的加入,才能壯大COLLOTI社區!': '您的加入,才能壮大COLLOTI社区!',
  'bottom-info': '在加入或使用平台和网站时,您声明并保证您完全了解与涉及数位资产的交易或使用平台相关的风险。您同意并了解,您全权负责确定这些风险对您自己的财产、潜在价值、适用性和适当性,且本公司不会对任何数位资产提供意见或建议,包括其适用性和适当性,以及任何数位资产的投资策略。您同意并了解,您造访和使用平台和网站的风险由您承担自行承担。',
  '版權所有': '版权所有',
  '透過電子郵件/手機號碼註冊': '透过电子邮件/手机号码注册',
  //   三、报名
  //   3.1、注册资格
  //   您确认并承诺:当您完成注册程序或以本网站允许的其他方式实际使用本网站提供的服务时,您应具有签署本协议并按照适用法律要求使用本网站服务的能力自然人、法人或其他组织。一旦您点击同意注册按钮,即表示您或您的授权代理人已同意协议内容,该代理人将注册并使用本网站的服务。如您不具备上述主体资格,由此产生的一切后果由您和您的授权代理人承担,本公司保留注销或永久冻结您的账户,并追究您和您的授权代理人责任的权利。
src/views/market/components/hangqing.vue
@@ -146,7 +146,7 @@
                          {{ item.name }}
                        </div>
                      </div>
                      <div class="title-more"> 更多
                      <div class="title-more" @click="$router.push('/market')"> {{ $t("message.jiaoyi.more") }}
                        <img
                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAVBAMAAACAghKHAAAAAXNSR0IArs4c6QAAACFQTFRFAAAAjI6YiY2Wi42Zi4+XjY+ZiY2Vi42Xi46XjI6Xi46XbqjnnwAAAAp0Uk5TAG9wcH9/gIC/30jpDyUAAAA0SURBVAjXY5B0YACBWUvAlNUqMJd9FYRbRRx3EZjbtRJEsq5aBqKiViUQz2GYBeYwWII5AGMrGipkbhMxAAAAAElFTkSuQmCC">
                      </div>
@@ -353,240 +353,357 @@
                          </div>
                        </div>
                      </div>
                      <!-- 分页器 -->
                      <div class="css-1ttcc5">
                        <div class="css-b0tuh4">
                          <button
                              data-bn-type="button"
                              class="mirror css-11xno5y"
                              disabled=""
                              aria-label="Previous page"
                          >
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 24 24"
                                fill="none"
                                class="css-1iztezc"
                            >
                              <path
                                  fill-rule="evenodd"
                                  clip-rule="evenodd"
                                  d="M11.934 12l3.89 3.89-1.769 1.767L8.398 12l1.768-1.768 3.89-3.889 1.767 1.768-3.889 3.89z"
                                  fill="currentColor"
                              ></path>
                            </svg>
                          </button>
                          <div v-for="pageItem of allPage" :key="pageItem">
                            <button
                                data-bn-type="button"
                                aria-label="Page number 1"
                                :class="
                                currentPage == pageItem
                                  ? 'css-5jht7o-1'
                                  : 'css-hlqxzb-1'
                              "
                                @click="OnclickPage(pageItem)"
                            >
                              {{ pageItem }}
                            </button>
                          </div>
                          <button
                              data-bn-type="button"
                              class="mirror css-11xno5y"
                              disabled=""
                              aria-label="Next page"
                          >
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 24 24"
                                fill="none"
                                class="css-1iztezc"
                            >
                              <path
                                  fill-rule="evenodd"
                                  clip-rule="evenodd"
                                  d="M12.288 12l-3.89 3.89 1.768 1.767L15.823 12l-1.768-1.768-3.889-3.889-1.768 1.768 3.89 3.89z"
                                  fill="currentColor"
                              ></path>
                            </svg>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 榜单 -->
                  <div
                      class="box2"
                      style="display: block; background-color: white"
                  >
                    <!-- tab -->
                    <div class="css-1vii3zc">
                      <div id="box1002" class="tab-box">
                        <div
                            class="tab-item"
                            v-for="(item, i) in rankTypeList"
                            :key="i"
                            @click="changeTypeRank(item)"
                            :class="[rankIndex == item.id ? 'tab-active' : '']"
                            style="margin-left: 20px; font-size: 14px"
                        >
                          {{ item.name }}
                  <div>
                    <!-- 榜单 -->
                    <div
                        class="box2"
                        style="display: block; background-color: white;width: 100%;"
                    >
                      <!-- tab -->
                      <div class="css-1vii3zc">
                        <div id="box1002" class="tab-box">
                          <div
                              class="tab-item"
                              style="margin-left: 20px; font-size: 14px"
                          >
                            {{ $t("message.hangqing.chengjiaobang") }}
                          </div>
                          <div class="title-more"  @click="$router.push('/market')"> {{ $t("message.jiaoyi.more") }}
                            <img
                                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAVBAMAAACAghKHAAAAAXNSR0IArs4c6QAAACFQTFRFAAAAjI6YiY2Wi42Zi4+XjY+ZiY2Vi42Xi46XjI6Xi46XbqjnnwAAAAp0Uk5TAG9wcH9/gIC/30jpDyUAAAA0SURBVAjXY5B0YACBWUvAlNUqMJd9FYRbRRx3EZjbtRJEsq5aBqKiViUQz2GYBeYwWII5AGMrGipkbhMxAAAAAElFTkSuQmCC">
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="css-72ldqd" style="display: block">
                      <!-- 标题 -->
                      <div class="css-qbmpwo">
                        <div class="css-vurnku" style="min-width: 350px">
                          <div class="css-13euu76">
                            <!-- 名称 -->
                            <div
                                data-area="left"
                                class="css-1e8pqe6"
                                style="width: 110px; flex: 110 1 0%"
                            >
                              <div class="css-lkqrqt">
                                <div
                                    style="
                                    overflow: hidden;
                                    -webkit-line-clamp: 1;
                                    line-height: 16px;
                                  "
                                >
                                  {{ $t("message.hangqing.mingcheng") }}
                                </div>
                              </div>
                            </div>
                            <!-- 价格 -->
                            <div
                                data-area="left"
                                class="css-1e8pqe6"
                                style="width: 60px; flex: 60 1 0%"
                            >
                              <div class="css-lkqrqt">
                                <div
                                    title="价格"
                                    class="css-1i04fkn"
                                    style="
                                    overflow: hidden;
                                    -webkit-line-clamp: 1;
                                    line-height: 16px;
                                  "
                                >
                                  {{ $t("message.hangqing.jiage") }}
                                </div>
                              </div>
                            </div>
                            <!-- 涨跌 或交易额-->
                            <div
                                data-area="right"
                                class="css-1e8pqe6"
                                style="width: 55px; flex: 55 1 0%"
                            >
                              <div class="css-lkqrqt">
                                <div
                                    class="css-1i04fkn"
                                    style="
                                    overflow: hidden;
                                    -webkit-line-clamp: 1;
                                    line-height: 16px;
                                  "
                                >
                                  {{
                                    rankIndex === 2
                                        ? $t("message.home.chengjiaoe")
                                        : $t("message.home.zhangdie")
                                  }}
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- 内容 -->
                          <div class="css-1vuj9rf" style="min-height: 830px">
                            <div
                                direction="ltr"
                                class="css-vlibs4"
                                v-for="(item, index) in rankDataList"
                                :key="index"
                            >
                      <div class="css-72ldqd" style="display: block">
                        <!-- 标题 -->
                        <div class="css-qbmpwo">
                          <div class="css-vurnku" style="min-width: 350px">
                            <div class="css-13euu76">
                              <!-- 名称 -->
                              <div
                                  class="css-leyy1t"
                                  style="cursor: pointer; text-decoration: none"
                                  data-area="left"
                                  class="css-1e8pqe6"
                                  style="width: 110px; flex: 110 1 0%"
                              >
                                <!-- 名称 -->
                                <div
                                    data-area="left"
                                    class="css-14yoi5o"
                                    style="width: 110px; flex: 110 1 0%"
                                >
                                  <div class="">
                                    <!-- :src="handleSymbolImg(item.symbol)" -->
                                    <!-- :src="`${ConfigURL.HOST_URL}/symbol/${item.symbol}.png`" -->
                                    <el-image
                                        :src="handleSymbolImg(item.symbol)"
                                        class="el-img-style"
                                        style="margin-left: 10px"
                                    >
                                      <div slot="error" class="image-slot">
                                        <img
                                            :src="`${ConfigURL.HOST_URL}/symbol/noCoins.png`"
                                            class="el-img-style"
                                        />
                                      </div>
                                    </el-image>
                                <div class="css-lkqrqt">
                                  <div
                                      style="
                                    overflow: hidden;
                                    -webkit-line-clamp: 1;
                                    line-height: 16px;
                                  "
                                  >
                                    {{ $t("message.hangqing.mingcheng") }}
                                  </div>
                                  <div class="css-y492if">
                                    <div class="css-1wp9rgv">
                                      {{ getName(item) }}
                                </div>
                              </div>
                              <!-- 价格 -->
                              <div
                                  data-area="left"
                                  class="css-1e8pqe6"
                                  style="width: 60px; flex: 60 1 0%"
                              >
                                <div class="css-lkqrqt">
                                  <div
                                      title="价格"
                                      class="css-1i04fkn"
                                      style="
                                    overflow: hidden;
                                    -webkit-line-clamp: 1;
                                    line-height: 16px;
                                  "
                                  >
                                    {{ $t("message.hangqing.jiage") }}
                                  </div>
                                </div>
                              </div>
                              <!-- 涨跌 或交易额-->
                              <div
                                  data-area="right"
                                  class="css-1e8pqe6"
                                  style="width: 55px; flex: 55 1 0%"
                              >
                                <div class="css-lkqrqt">
                                  <div
                                      class="css-1i04fkn"
                                      style="
                                    overflow: hidden;
                                    -webkit-line-clamp: 1;
                                    line-height: 16px;
                                  "
                                  >
                                    {{
                                      rankIndex === 2
                                          ? $t("message.home.chengjiaoe")
                                          : $t("message.home.zhangdie")
                                    }}
                                  </div>
                                </div>
                              </div>
                            </div>
                            <!-- 内容 -->
                            <div class="css-1vuj9rf">
                              <div
                                  direction="ltr"
                                  class="css-vlibs4"
                                  v-for="(item, index) in rankDataList1.slice(0,3)"
                                  :key="index"
                              >
                                <div
                                    class="css-leyy1t"
                                    style="cursor: pointer; text-decoration: none"
                                >
                                  <!-- 名称 -->
                                  <div
                                      data-area="left"
                                      class="css-14yoi5o"
                                      style="width: 110px; flex: 110 1 0%"
                                  >
                                    <div class="">
                                      <!-- :src="handleSymbolImg(item.symbol)" -->
                                      <!-- :src="`${ConfigURL.HOST_URL}/symbol/${item.symbol}.png`" -->
                                      <el-image
                                          :src="handleSymbolImg(item.symbol)"
                                          class="el-img-style"
                                          style="margin-left: 10px"
                                      >
                                        <div slot="error" class="image-slot">
                                          <img
                                              :src="`${ConfigURL.HOST_URL}/symbol/noCoins.png`"
                                              class="el-img-style"
                                          />
                                        </div>
                                      </el-image>
                                    </div>
                                    <div class="css-y492if">
                                      <div class="css-1wp9rgv">
                                        {{ getName(item) }}
                                      </div>
                                    </div>
                                  </div>
                                  <!-- 价格 -->
                                  <div
                                      data-area="left"
                                      class="css-ydcgk2"
                                      style="width: 60px; flex: 60 1 0%"
                                  >
                                    <div
                                        style="direction: ltr"
                                        :class="
                                      item.change_ratio > 0 ? 'black' : 'black'
                                    "
                                    >
                                      ${{ item.close }}
                                    </div>
                                  </div>
                                  <!-- 涨跌 或交易额-->
                                  <div
                                      data-area="right"
                                      class="css-18yakpx"
                                      style="width: 55px; flex: 55 1 0%"
                                  >
                                    <div
                                        v-if="rankIndex === 2"
                                        style="direction: ltr"
                                    >
                                      {{ fixData(item.volume) }}
                                    </div>
                                    <div
                                        v-else
                                        :class="
                                      item.change_ratio > 0 ? 'green' : 'red'
                                    "
                                        style="direction: ltr"
                                    >
                                      {{ `${item.change_ratio}%` }}
                                    </div>
                                  </div>
                                </div>
                                <!-- 价格 -->
                                <div
                                    data-area="left"
                                    class="css-ydcgk2"
                                    style="width: 60px; flex: 60 1 0%"
                                >
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- 分页器 -->
                      </div>
                    </div>
                    <!-- 榜单 -->
                    <div
                        class="box2"
                        style="display: block; background-color: white;width: 100%;"
                    >
                      <!-- tab -->
                      <div class="css-1vii3zc">
                        <div id="box1002" class="tab-box">
                          <div
                              class="tab-item"
                              style="margin-left: 20px; font-size: 14px"
                          >
                            {{ $t("message.hangqing.zhangfubang") }}
                          </div>
                          <div class="title-more"  @click="$router.push('/market')"> {{ $t("message.jiaoyi.more") }}
                            <img
                                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAVBAMAAACAghKHAAAAAXNSR0IArs4c6QAAACFQTFRFAAAAjI6YiY2Wi42Zi4+XjY+ZiY2Vi42Xi46XjI6Xi46XbqjnnwAAAAp0Uk5TAG9wcH9/gIC/30jpDyUAAAA0SURBVAjXY5B0YACBWUvAlNUqMJd9FYRbRRx3EZjbtRJEsq5aBqKiViUQz2GYBeYwWII5AGMrGipkbhMxAAAAAElFTkSuQmCC">
                          </div>
                        </div>
                      </div>
                      <div class="css-72ldqd" style="display: block">
                        <!-- 标题 -->
                        <div class="css-qbmpwo">
                          <div class="css-vurnku" style="min-width: 350px">
                            <div class="css-13euu76">
                              <!-- 名称 -->
                              <div
                                  data-area="left"
                                  class="css-1e8pqe6"
                                  style="width: 110px; flex: 110 1 0%"
                              >
                                <div class="css-lkqrqt">
                                  <div
                                      style="direction: ltr"
                                      :class="
                                      item.change_ratio > 0 ? 'black' : 'black'
                                    "
                                      style="
                                    overflow: hidden;
                                    -webkit-line-clamp: 1;
                                    line-height: 16px;
                                  "
                                  >
                                    ${{ item.close }}
                                    {{ $t("message.hangqing.mingcheng") }}
                                  </div>
                                </div>
                                <!-- 涨跌 或交易额-->
                                <div
                                    data-area="right"
                                    class="css-18yakpx"
                                    style="width: 55px; flex: 55 1 0%"
                                >
                              </div>
                              <!-- 价格 -->
                              <div
                                  data-area="left"
                                  class="css-1e8pqe6"
                                  style="width: 60px; flex: 60 1 0%"
                              >
                                <div class="css-lkqrqt">
                                  <div
                                      v-if="rankIndex === 2"
                                      style="direction: ltr"
                                      title="价格"
                                      class="css-1i04fkn"
                                      style="
                                    overflow: hidden;
                                    -webkit-line-clamp: 1;
                                    line-height: 16px;
                                  "
                                  >
                                    {{ fixData(item.volume) }}
                                    {{ $t("message.hangqing.jiage") }}
                                  </div>
                                </div>
                              </div>
                              <!-- 涨跌 或交易额-->
                              <div
                                  data-area="right"
                                  class="css-1e8pqe6"
                                  style="width: 55px; flex: 55 1 0%"
                              >
                                <div class="css-lkqrqt">
                                  <div
                                      v-else
                                      :class="
                                      class="css-1i04fkn"
                                      style="
                                    overflow: hidden;
                                    -webkit-line-clamp: 1;
                                    line-height: 16px;
                                  "
                                  >
                                    {{
                                      rankIndex === 2
                                          ? $t("message.home.chengjiaoe")
                                          : $t("message.home.zhangdie")
                                    }}
                                  </div>
                                </div>
                              </div>
                            </div>
                            <!-- 内容 -->
                            <div class="css-1vuj9rf">
                              <div
                                  direction="ltr"
                                  class="css-vlibs4"
                                  v-for="(item, index) in rankDataList.slice(0,3)"
                                  :key="index"
                              >
                                <div
                                    class="css-leyy1t"
                                    style="cursor: pointer; text-decoration: none"
                                >
                                  <!-- 名称 -->
                                  <div
                                      data-area="left"
                                      class="css-14yoi5o"
                                      style="width: 110px; flex: 110 1 0%"
                                  >
                                    <div class="">
                                      <!-- :src="handleSymbolImg(item.symbol)" -->
                                      <!-- :src="`${ConfigURL.HOST_URL}/symbol/${item.symbol}.png`" -->
                                      <el-image
                                          :src="handleSymbolImg(item.symbol)"
                                          class="el-img-style"
                                          style="margin-left: 10px"
                                      >
                                        <div slot="error" class="image-slot">
                                          <img
                                              :src="`${ConfigURL.HOST_URL}/symbol/noCoins.png`"
                                              class="el-img-style"
                                          />
                                        </div>
                                      </el-image>
                                    </div>
                                    <div class="css-y492if">
                                      <div class="css-1wp9rgv">
                                        {{ getName(item) }}
                                      </div>
                                    </div>
                                  </div>
                                  <!-- 价格 -->
                                  <div
                                      data-area="left"
                                      class="css-ydcgk2"
                                      style="width: 60px; flex: 60 1 0%"
                                  >
                                    <div
                                        style="direction: ltr"
                                        :class="
                                      item.change_ratio > 0 ? 'black' : 'black'
                                    "
                                    >
                                      ${{ item.close }}
                                    </div>
                                  </div>
                                  <!-- 涨跌 或交易额-->
                                  <div
                                      data-area="right"
                                      class="css-18yakpx"
                                      style="width: 55px; flex: 55 1 0%"
                                  >
                                    <div
                                        v-if="rankIndex === 2"
                                        style="direction: ltr"
                                    >
                                      {{ fixData(item.volume) }}
                                    </div>
                                    <div
                                        v-else
                                        :class="
                                      item.change_ratio > 0 ? 'green' : 'red'
                                    "
                                      style="direction: ltr"
                                  >
                                    {{ `${item.change_ratio}%` }}
                                        style="direction: ltr"
                                    >
                                      {{ `${item.change_ratio}%` }}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- 分页器 -->
                      </div>
                      <!-- 分页器 -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
@@ -659,10 +776,15 @@
        },
      ],
      rankDataList: [], // 当前所属榜列表数据
      rankDataList1: [],
      rankItem: {
        type: "change_ratio",
        sort: "up",
      }, //当前所选中的榜单对象,初始默认为涨幅榜
      rankItem1: {
        sort: "up",
        type: "volume",
      },
      rankIndex: 0, //当前所选中的榜单index
      searchValue: "",
      searchList: [],
@@ -741,6 +863,11 @@
          this.compare(this.rankItem.type, this.rankItem.sort)
      );
      this.rankDataList = rankDataList.slice(0, this.maxItemPage);
      let rankDataList1 = [...this.activeList].sort(
          this.compare(this.rankItem1.type, this.rankItem1.sort)
      );
      this.rankDataList1 = rankDataList1.slice(0, this.maxItemPage);
    },
    compare(p, type) {
@@ -785,6 +912,7 @@
    },
    // 榜单切换
    changeTypeRank(item) {
      console.log(item)
      this.rankItem = item;
      this.rankIndex = item.id;
      this.rankDataList = [...this.activeList].sort(
@@ -1042,4 +1170,8 @@
    height: 9px;
  }
}
#box1002{
  width: 100%;
  justify-content: space-between;
}
</style>
src/views/market/components/pageDetail.vue
@@ -1,31 +1,67 @@
<template>
  <div class="welcome">
    <div class="welcome-content">
      <div class="title-1">{{$t('message.home["歡迎來到 COLLOTI"]')}}</div>
      <div class="title-2">{{$t('message.home["即刻開啟您的數字貨幣之旅。"]')}}</div>
      <div class="action-btns">
        <el-button class="jy" @click="$router.push(`coin/constract/btc?timestamp=${Date.now()}&RouterName=delivery`)"> {{$t('message.home.jiaoyi')}}</el-button>
        <el-button class="cz" @click="$router.push('/recharge')"> {{$t('message.user.chongzhi')}}</el-button>
      <div class="title-1">{{ $t('message.home["歡迎來到 COLLOTI"]') }}</div>
      <div class="title-2">{{ $t('message.home["即刻開啟您的數字貨幣之旅。"]') }}</div>
      <div class="action-btns" v-if="userStore.userInfo.token">
        <el-button class="jy" @click="$router.push(`coin/constract/btc?timestamp=${Date.now()}&RouterName=delivery`)">
          {{ $t('message.home.jiaoyi') }}
        </el-button>
        <el-button class="cz" @click="$router.push('/recharge')"> {{ $t('message.user.chongzhi') }}</el-button>
      </div>
      <div class="tip"> {{$t('message.home["揭開驚喜,解鎖獎勵 – 你的精彩之旅從這裡開始!"]')}} <img
      <el-button  v-if="!userStore.userInfo.token" class="register-btn" type="primary" @click="$router.push('/login')">
        <img
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAlCAMAAADyQNAxAAAAAXNSR0IArs4c6QAAAGxQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////Pk/gVgAAACN0Uk5TAAgQGCAoMDc4QEhPWF9gZ2hveICHj5efp6+3v8fP3t/n7/fpv/78AAAA20lEQVQYGcXB4U6DMBgF0EspuA7mLKUgY7h93Pd/RxMzmzJbfhk9B/9OHa1z50Zhz4u/CnlfvEGeufBhNsipZwZzhYyRkQFpWhgRjaSWGy2SOm50SOq40SGp5UaLJC2MiEbawMiIjGpmMNfIMTMfLgZ5xi93Uq7+gD2qOTtnjwp/pyi1Lgvs0Y3th3EcettUyKjtuAi/yPJuaySo0ySMyGQVnpX9jU/EldhSfuUP4hU23MqE1RWIGGGSHBGZmHEpEFTCjLVC8MasVwSeWR5Bf3v28c0hOJyyavyyT6RgPCG9KV4nAAAAAElFTkSuQmCC">
        {{$t('message.home["透過電子郵件/手機號碼註冊"]')}}
      </el-button>
      <div v-if="!userStore.userInfo.token" class="or"><span>or</span></div>
      <div v-if="!userStore.userInfo.token" class="btns">
        <a class="google-play">
          <img
              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAjCAMAAABbyCHdAAAAAXNSR0IArs4c6QAAAKtQTFRFAAAAAAAAQEBAAAAAODhAAAAANTpAAAAAODxEAAAAAAAAAAAAAAAAAAAAOTtEAAAAHB4iODxEAAAAOTxDAAAAOjtDODtDAAAAAAAABQUFODxECAgJCAgKOTtDOT1DCwwNCwwODxASOTxEBwcJCgsNDg8REhMWFhcZFhcaGRodGRoeHB4iHR4iICImIyUrJCUqJykvKi0zKy0zLjE4MjQ7MjQ8MjU7NThAOTxEpF/e/AAAACN0Uk5TABAQICAwMEBAT19gb3Bwf4CAkJCfn6Cvv7+/39/f3+/v7++6JeDFAAABDElEQVQ4y7WTXVuCMBiGB2paZGRfDqJMEmdGI6vR8/9/WQeA7tngsJ3e93U979eEECKIopEYfpfr6nN3N2hEbwBgXuIBvvwCAKDKLnq5LOpGQLnsC5HmKJi+MiROAr79EAlbQJWde5wEs+cQCUeA2cWBw1nQW6sMCVfQCiiTEfOToBX1KsFCgwGYLCbeCEcMoJwThylqGwPrgDjM69bGeJ8y18puE9hPiGvFc/h5pHyteA6H1cTmbWmd8NvuQTLuhI9kSvOzGjNFfVjNef7Ut9ncBLwfHks6dvZP+Gnm3o+N8yvv/mx8G3r3aeH0zL//RA0Et++6C16Evf8rfAYA3IdDH3j8kOfpTPzP+wNccXgk9byhTQAAAABJRU5ErkJggg=="
              class="icon">
          <div class="p1">Google Play</div>
          <div class="mask">
            <div class="mask-title">Scan to download</div>
            <img src="https://colloti.com/er-code.png" class="icon">
            <button>More</button>
          </div>
        </a>
        <a class="apple-store">
          <img
              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAxCAMAAACrgNoQAAAAAXNSR0IArs4c6QAAAHhQTFRFAAAAICAwICAwICgwJSUwJCQwJCgwICctIyMtIyMwIyYwIyYuIyYwIyUtIyUwIicwIicuJCcwIiYuIiYuJCYwIiUuJCUuIiUuIyUwIyUvIyYwIyYvIyYuIyYvIyUvISUvIiUvIiYvIiYvIyYvIyYvIyYvIyYvIyYvSSHmhgAAACd0Uk5TABAgIDBAQE9QUFBfX2Bgb3Bwf4CAj4+QkJ+gr7C+v87P3t/f7u/+VHK92QAAAPpJREFUGBntwdFSgzAQBdC7hGCppVVRK6IpguH+/x+aOh2dkV0mvvccXP0l+xr/IA+RHfKVI8kW2Vxk4pFtZDIhW8OzHbIFJi/Ix+QV+Rw57JBDnEMivgDgtttKsKYJTMKtAKiOkWd9BUs58CL2x8AfTwJVGWkYoHGRJg9FoCV6KCqaamh6WjqoIi0FNCUtb1BtaGmhamhpoGpoaaFqaOmg2tASoXI0eagiLZNA09M0CBR3tE0FliRyxQ2Weq4osORpC9AEmjw0npYOumfqYgGdnKi6h8V9UtHB5md+m/lrEKwoP2bO83stQPk4MukF6/btQXDh24PHFb4AtqpwymP1xEcAAAAASUVORK5CYII="
              class="icon">
          <div class="p1">App Store</div>
          <div class="mask">
            <div class="mask-title">Scan to download</div>
            <img src="https://colloti.com/er-code.png" class="icon">
            <button>More</button>
          </div>
        </a>
      </div>
      <div class="tip"> {{ $t('message.home["揭開驚喜,解鎖獎勵 – 你的精彩之旅從這裡開始!"]') }} <img
          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAMAAACOLiwjAAAAAXNSR0IArs4c6QAAADNQTFRFAAAAICAwICAwJSUwIiYuIiYuJCYwIiUuIyUuIyUvIyYvIyYuIyYvIyUvIyYvIyYvIyYvbgd1ZQAAABB0Uk5TABAgMH+AgI+Qn5+gr7/f76mIx4UAAABBSURBVBjTfc45DgAgCERR3Hfl/qe1c8ZCqf4LCUHEWTnjdUJBSaazpP213EP5Urw0VAsewYY7Udd3T26LO/gyUG8DewQfiCCoRgAAAABJRU5ErkJggg==">
      </div>
    </div>
    <div class="bg-img">
      <div class="suspension">
        <div class="title">{{$t('message.home["立刻下載COLLOTI手機 App!"]')}}</div>
        <div class="btns"><a class="apple-store" style="margin-right: 10px;">
        <div class="title">{{ $t('message.home["立刻下載COLLOTI手機 App!"]') }}</div>
        <div class="btns">
          <a class="apple-store" style="margin-right: 10px;">
          <img
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAxCAMAAACrgNoQAAAAAXNSR0IArs4c6QAAAHhQTFRFAAAAICAwICAwICgwJSUwJCQwJCgwICctIyMtIyMwIyYwIyYuIyYwIyUtIyUwIicwIicuJCcwIiYuIiYuJCYwIiUuJCUuIiUuIyUwIyUvIyYwIyYvIyYuIyYvIyUvISUvIiUvIiYvIiYvIyYvIyYvIyYvIyYvIyYvSSHmhgAAACd0Uk5TABAgIDBAQE9QUFBfX2Bgb3Bwf4CAj4+QkJ+gr7C+v87P3t/f7u/+VHK92QAAAPpJREFUGBntwdFSgzAQBdC7hGCppVVRK6IpguH+/x+aOh2dkV0mvvccXP0l+xr/IA+RHfKVI8kW2Vxk4pFtZDIhW8OzHbIFJi/Ix+QV+Rw57JBDnEMivgDgtttKsKYJTMKtAKiOkWd9BUs58CL2x8AfTwJVGWkYoHGRJg9FoCV6KCqaamh6WjqoIi0FNCUtb1BtaGmhamhpoGpoaaFqaOmg2tASoXI0eagiLZNA09M0CBR3tE0FliRyxQ2Weq4osORpC9AEmjw0npYOumfqYgGdnKi6h8V9UtHB5md+m/lrEKwoP2bO83stQPk4MukF6/btQXDh24PHFb4AtqpwymP1xEcAAAAASUVORK5CYII="
            class="icon">
              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAxCAMAAACrgNoQAAAAAXNSR0IArs4c6QAAAHhQTFRFAAAAICAwICAwICgwJSUwJCQwJCgwICctIyMtIyMwIyYwIyYuIyYwIyUtIyUwIicwIicuJCcwIiYuIiYuJCYwIiUuJCUuIiUuIyUwIyUvIyYwIyYvIyYuIyYvIyUvISUvIiUvIiYvIiYvIyYvIyYvIyYvIyYvIyYvSSHmhgAAACd0Uk5TABAgIDBAQE9QUFBfX2Bgb3Bwf4CAj4+QkJ+gr7C+v87P3t/f7u/+VHK92QAAAPpJREFUGBntwdFSgzAQBdC7hGCppVVRK6IpguH+/x+aOh2dkV0mvvccXP0l+xr/IA+RHfKVI8kW2Vxk4pFtZDIhW8OzHbIFJi/Ix+QV+Rw57JBDnEMivgDgtttKsKYJTMKtAKiOkWd9BUs58CL2x8AfTwJVGWkYoHGRJg9FoCV6KCqaamh6WjqoIi0FNCUtb1BtaGmhamhpoGpoaaFqaOmg2tASoXI0eagiLZNA09M0CBR3tE0FliRyxQ2Weq4osORpC9AEmjw0npYOumfqYgGdnKi6h8V9UtHB5md+m/lrEKwoP2bO83stQPk4MukF6/btQXDh24PHFb4AtqpwymP1xEcAAAAASUVORK5CYII="
              class="icon">
          <div class="p1">IOS</div>
          <div class="p2">Download</div>
        </a><a class="google-play"><img
        </a>
          <a class="google-play">
            <img
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAjCAMAAABbyCHdAAAAAXNSR0IArs4c6QAAAKtQTFRFAAAAAAAAQEBAAAAAODhAAAAANTpAAAAAODxEAAAAAAAAAAAAAAAAAAAAOTtEAAAAHB4iODxEAAAAOTxDAAAAOjtDODtDAAAAAAAABQUFODxECAgJCAgKOTtDOT1DCwwNCwwODxASOTxEBwcJCgsNDg8REhMWFhcZFhcaGRodGRoeHB4iHR4iICImIyUrJCUqJykvKi0zKy0zLjE4MjQ7MjQ8MjU7NThAOTxEpF/e/AAAACN0Uk5TABAQICAwMEBAT19gb3Bwf4CAkJCfn6Cvv7+/39/f3+/v7++6JeDFAAABDElEQVQ4y7WTXVuCMBiGB2paZGRfDqJMEmdGI6vR8/9/WQeA7tngsJ3e93U979eEECKIopEYfpfr6nN3N2hEbwBgXuIBvvwCAKDKLnq5LOpGQLnsC5HmKJi+MiROAr79EAlbQJWde5wEs+cQCUeA2cWBw1nQW6sMCVfQCiiTEfOToBX1KsFCgwGYLCbeCEcMoJwThylqGwPrgDjM69bGeJ8y18puE9hPiGvFc/h5pHyteA6H1cTmbWmd8NvuQTLuhI9kSvOzGjNFfVjNef7Ut9ncBLwfHks6dvZP+Gnm3o+N8yvv/mx8G3r3aeH0zL//RA0Et++6C16Evf8rfAYA3IdDH3j8kOfpTPzP+wNccXgk9byhTQAAAABJRU5ErkJggg=="
            class="icon">
          <div class="p1">Android</div>
          <div class="p2">Download</div>
        </a></div>
        </a>
        </div>
      </div>
    </div>
  </div>
@@ -98,8 +134,16 @@
</template>
<script>
import {useUserStore} from '@/store/user.js'
const userStore = useUserStore()
export default {
  name: "pageDetail"
  name: "pageDetail",
  data() {
    return {
      userStore
    }
  }
}
</script>
@@ -117,6 +161,150 @@
    width: 1200px;
    margin-top: 122px;
    position: relative;
    .register-btn {
      width: 408px;
      height: 52px;
      font-size: 17px;
      font-family: Noto Sans SC;
      font-weight: 700;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #2a64fb;
      border-radius: 6px;
      outline: none;
      border: none;
      margin-top: 20px;
      cursor: pointer;
      img {
        width: 18px;
        height: 18px;
        margin-right: 8px
      }
    }
    .or {
      position: relative;
      width: 408px;
      margin-top: 17px;
      height: 1px;
      background: #afb1bb;
      text-align: center;
      span {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 34px;
        height: 17px;
        line-height: 17px;
        font-size: 14px;
        font-family: Noto Sans SC;
        font-weight: 500;
        color: #8b95a3;
        background: #edf1ff;
      }
    }
    .btns {
      display: flex;
      margin-top: 16px;
      a {
        cursor: pointer;
        width: 196px;
        height: 52px;
        flex: 0 0 196px;
        margin-left: 16px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-left: 38px;
        position: relative;
        border-radius: 90px;
        border: 1px solid #afb1bb;
        &:first-child {
          margin-left: 0
        }
        img{
          flex: 0 0 24px;
          width: 24px;
          height: 24px;
        }
        .p1{
          font-size: 17px;
          font-family: Noto Sans SC;
          font-weight: 500;
          color: #23262f;
          line-height: 24px;
          margin-left: 8px;
        }
        .mask{
          display: none;
          position: absolute;
          z-index: 10;
          top: 61px;
          left: -6px;
          width: 182px;
          height: 220px;
          background: #fff;
          border-radius: 6px;
          box-sizing: border-box;
          padding-top: 6px;
          box-shadow: 0 2px 6px rgba(0,0,0,.1);
          &:before {
            content: "";
            position: absolute;
            top: -4px;
            left: 45px;
            width: 12px;
            height: 12px;
            border-radius: 3px;
            transform-origin: center center;
            transform: rotate(45deg);
            background: #fff
          }
          .mask-title {
            font-size: 12px;
            font-family: Noto Sans SC;
            font-weight: 700;
            color: #000;
            line-height: 35px;
            text-align: center;
          }
          img {
            display: block;
            width: 110px;
            height: 110px;
            margin: 0 auto;
            margin-top: 7px;
          }
          button {
            width: 137px;
            height: 26px;
            background: #2b64fb;
            border-radius: 3px 3px 3px 3px;
            border: none;
            outline: none;
            display: block;
            margin: 0 auto;
            margin-top: 20px;
            font-size: 10px;
            font-family: Noto Sans SC;
            font-weight: 700;
            color: #fff;
          }
        }
      }
      a.google-play img {
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
      }
      a:hover .mask {
        display: block;
      }
    }
  }
}
@@ -391,4 +579,6 @@
    }
  }
}
a {text-decoration: none;}
</style>