feat

lxf

2025-04-18 02a3d94d359b34e915f34abec024cbc1504a6a7c

 src/views/market/components/pageDetail.vue

@@ -1,17 +1,34 @@
<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" 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 class="title-1">{{ $t('message.home["歡迎來到 MT10"]') }}</div>
      <div class="title-2">
        {{ $t('message.home["即刻開啟您的數字貨幣之旅。"]') }}
      </div>
      <el-button v-if="!userStore.userInfo.token" class="register-btn" type="primary" @click="$router.push('/login')">
      <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>
      <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">
          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>
@@ -19,36 +36,53 @@
        <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">
            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">
            <img src="https://MT10.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">
            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">
            <img src="https://MT10.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 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="jq">
        <svg xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000" width="1000" height="1000"
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 1000 1000"
          width="1000"
          height="1000"
          preserveAspectRatio="xMidYMid meet"
          style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px); content-visibility: visible;">
          style="
            width: 100%;
            height: 100%;
            transform: translate3d(0px, 0px, 0px);
            content-visibility: visible;
          "
        >
          <defs>
            <clipPath id="__lottie_element_48">
              <rect width="1000" height="1000" x="0" y="0"></rect>
@@ -62,60 +96,124 @@
            <image xlink:href="@/assets/images/img_6.png"></image>
          </defs>
          <g clip-path="url(#__lottie_element_48)">
            <g class="png" style="display: block;" transform="matrix(1,0,0,1,270,662.5)" opacity="1">
              <image width="376px" height="339px" preserveAspectRatio="xMidYMid slice"
                xlink:href="@/assets/images/img_6.png"></image>
            <g
              class="png"
              style="display: block"
              transform="matrix(1,0,0,1,270,662.5)"
              opacity="1"
            >
              <image
                width="376px"
                height="339px"
                preserveAspectRatio="xMidYMid slice"
                xlink:href="@/assets/images/img_6.png"
              ></image>
            </g>
            <g class="png" style="display: block;" transform="matrix(1,0,0,1,520.5,110.54200744628906)" opacity="1">
              <image class="img_5" width="323px" height="252px" preserveAspectRatio="xMidYMid slice"
                xlink:href="@/assets/images/img_5.png"></image>
            <g
              class="png"
              style="display: block"
              transform="matrix(1,0,0,1,520.5,110.54200744628906)"
              opacity="1"
            >
              <image
                class="img_5"
                width="323px"
                height="252px"
                preserveAspectRatio="xMidYMid slice"
                xlink:href="@/assets/images/img_5.png"
              ></image>
            </g>
            <g class="png" style="display: block;" transform="matrix(1,0,0,1,670.3294067382812,283.9642028808594)"
              opacity="1">
              <image class="img_4" width="355px" height="365px" preserveAspectRatio="xMidYMid slice"
                xlink:href="@/assets/images/img_4.png"></image>
            <g
              class="png"
              style="display: block"
              transform="matrix(1,0,0,1,670.3294067382812,283.9642028808594)"
              opacity="1"
            >
              <image
                class="img_4"
                width="355px"
                height="365px"
                preserveAspectRatio="xMidYMid slice"
                xlink:href="@/assets/images/img_4.png"
              ></image>
            </g>
            <g class="png" style="display: block;"
            <g
              class="png"
              style="display: block"
              transform="matrix(0.9999943375587463,0.003364115720614791,-0.003364115720614791,0.9999943375587463,508.53765869140625,565.6394653320312)"
              opacity="1">
              <image class="img_3" width="376px" height="319px" preserveAspectRatio="xMidYMid slice"
                xlink:href="@/assets/images/img_3.png"></image>
              opacity="1"
            >
              <image
                class="img_3"
                width="376px"
                height="319px"
                preserveAspectRatio="xMidYMid slice"
                xlink:href="@/assets/images/img_3.png"
              ></image>
            </g>
            <g class="png" style="display: block;"
            <g
              class="png"
              style="display: block"
              transform="matrix(0.9967423677444458,0.08065123856067657,-0.08065123856067657,0.9967423677444458,736.8223876953125,519.9822387695312)"
              opacity="1">
              <image class="img_2" width="247px" height="246px" preserveAspectRatio="xMidYMid slice"
                xlink:href="@/assets/images/img_2.png"></image>
              opacity="1"
            >
              <image
                class="img_2"
                width="247px"
                height="246px"
                preserveAspectRatio="xMidYMid slice"
                xlink:href="@/assets/images/img_2.png"
              ></image>
            </g>
            <g class="png" style="display: block;"
            <g
              class="png"
              style="display: block"
              transform="matrix(0.14042603969573975,0.9900911450386047,-0.9900911450386047,0.14042603969573975,583.931884765625,641.3410034179688)"
              opacity="1">
              <image class="img_1" width="287px" height="286px" preserveAspectRatio="xMidYMid slice"
                xlink:href="@/assets/images/img_1.png"></image>
              opacity="1"
            >
              <image
                class="img_1"
                width="287px"
                height="286px"
                preserveAspectRatio="xMidYMid slice"
                xlink:href="@/assets/images/img_1.png"
              ></image>
            </g>
            <g class="png" style="display: block;"
            <g
              class="png"
              style="display: block"
              transform="matrix(0.9967423677444458,0.08065123856067657,-0.08065123856067657,0.9967423677444458,780.9017333984375,260.44317626953125)"
              opacity="1">
              <image class="img_0" width="93px" height="93px" preserveAspectRatio="xMidYMid slice"
                xlink:href="@/assets/images/img_0.png"></image>
              opacity="1"
            >
              <image
                class="img_0"
                width="93px"
                height="93px"
                preserveAspectRatio="xMidYMid slice"
                xlink:href="@/assets/images/img_0.png"
              ></image>
            </g>
          </g>
        </svg>
      </div>
      <div class="suspension">
        <div class="title">{{ $t('message.home["立刻下載COLLOTI手機 App!"]') }}</div>
        <div class="title">
          {{ $t('message.home["立刻下載MT10手機 App!"]') }}
        </div>
        <div class="btns">
          <a class="apple-store" style="margin-right: 10px;">
          <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">
              class="icon"
            />
            <div class="p1">IOS</div>
            <div class="p2">Download</div>
          </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">
              class="icon"
            />
            <div class="p1">Android</div>
            <div class="p2">Download</div>
          </a>
@@ -129,7 +227,7 @@
  <!--          <div class="left">-->
  <!--            <div class="coin-info">-->
  <!--              <div class="el-image" style="width: 24px; height: 24px;"><img-->
  <!--                  src="https://colloti.com/symbol/btc.png" class="el-image__inner"></div>-->
  <!--                  src="https://MT10.com/symbol/btc.png" class="el-image__inner"></div>-->
  <!--              <span class="coin-title">BTC/USDT </span></div>-->
  <!--            <div class="money">70871.11</div>-->
  <!--            <div class="percentage percentage-add"> 2.56%</div>-->
@@ -149,7 +247,7 @@
  <!--          <div class="left">-->
  <!--            <div class="coin-info">-->
  <!--              <div class="el-image" style="width: 24px; height: 24px;"><img-->
  <!--                  src="https://colloti.com/symbol/eth.png" class="el-image__inner">&lt;!&ndash;&ndash;&gt;</div>-->
  <!--                  src="https://MT10.com/symbol/eth.png" class="el-image__inner">&lt;!&ndash;&ndash;&gt;</div>-->
  <!--              <span class="coin-title">ETH/USDT </span></div>-->
  <!--            <div class="money">3805.03</div>-->
  <!--            <div class="percentage percentage-add"> 0.77%</div>-->
@@ -170,7 +268,7 @@
  <!--          <div class="left">-->
  <!--            <div class="coin-info">-->
  <!--              <div class="el-image" style="width: 24px; height: 24px;"><img-->
  <!--                  src="https://colloti.com/symbol/ltc.png" class="el-image__inner">&lt;!&ndash;&ndash;&gt;</div>-->
  <!--                  src="https://MT10.com/symbol/ltc.png" class="el-image__inner">&lt;!&ndash;&ndash;&gt;</div>-->
  <!--              <span class="coin-title">LTC/USDT </span></div>-->
  <!--            <div class="money">83.62</div>-->
  <!--            <div class="percentage percentage-add"> 0.83%</div>-->
@@ -192,17 +290,17 @@
</template>

<script>
import { useUserStore } from '@/store/user.js'
import { useUserStore } from "@/store/user.js";

const userStore = useUserStore()
const userStore = useUserStore();
export default {
  name: "pageDetail",
  data() {
    return {
      userStore
    }
  }
}
      userStore,
    };
  },
};
</script>


@@ -239,7 +337,7 @@
      img {
        width: 18px;
        height: 18px;
        margin-right: 8px
        margin-right: 8px;
      }
    }

@@ -286,7 +384,7 @@
        border: 1px solid #afb1bb;

        &:first-child {
          margin-left: 0
          margin-left: 0;
        }

        img {
@@ -316,7 +414,7 @@
          border-radius: 6px;
          box-sizing: border-box;
          padding-top: 6px;
          box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

          &:before {
            content: "";
@@ -328,7 +426,7 @@
            border-radius: 3px;
            transform-origin: center center;
            transform: rotate(45deg);
            background: #fff
            background: #fff;
          }

          .mask-title {
@@ -447,14 +545,15 @@
  top: -70px;
  width: 866px;
  height: 640px;
  background: url(https://colloti.com/img/right-bg-1.c9ac5e41.svg) 166px 0px no-repeat;
  background: url(https://MT10.com/img/right-bg-1.c9ac5e41.svg) 166px 0px
    no-repeat;
  .jq {
        position: absolute;
        top: 152px;
        left: 149px;
        width: 504.339px;
        height: 510.84px
    }
    position: absolute;
    top: 152px;
    left: 149px;
    width: 504.339px;
    height: 510.84px;
  }
}

.welcome .bg-img .suspension {
@@ -464,7 +563,7 @@
  width: 218px;
  height: 139px;
  border-radius: 18px;
  background: hsla(0, 0%, 100%, .8);
  background: hsla(0, 0%, 100%, 0.8);
  animation: move-21751b44 4s linear 0s infinite;
}

@@ -482,31 +581,30 @@
  }
}

.img_1{
.img_1 {
  transform-origin: 14.5% 14.5%;
  animation: img_1_move 4s linear infinite;
}
.img_2{
.img_2 {
  transform-origin: 12.5% 12.5%;
  animation: img_1_move 4s linear infinite;
}

.img_0{
.img_0 {
  transform-origin: 5% 5%;
  animation: img_1_move 4s linear infinite;
}


.img_3{
.img_3 {
  transform-origin: 12.5% 12.5%;
  animation: img_3_move 4s linear infinite;
}

.img_4{
.img_4 {
  animation: move-21751b44 4s linear 0s infinite;
}

.img_5{
.img_5 {
  animation: move-21751b44 4s linear 0s infinite;
}
@keyframes img_3_move {
@@ -518,7 +616,6 @@
    transform: rotate(-5deg);
  }
}


@keyframes img_1_move {
  0% {
@@ -534,7 +631,6 @@
  }
}


.welcome .bg-img .suspension .title {
  line-height: 20px;
  padding: 12px 0;
@@ -542,15 +638,15 @@
  font-family: Noto Sans SC;
  font-weight: 700;
  color: #23262f;
  text-align: center
  text-align: center;
}

.welcome .bg-img .suspension .btns {
  display: flex;
  justify-content: center
  justify-content: center;
}

.welcome .bg-img .suspension .btns>a {
.welcome .bg-img .suspension .btns > a {
  cursor: pointer;
  box-sizing: border-box;
  width: 79px;
@@ -561,26 +657,26 @@
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative
  position: relative;
}

.welcome .bg-img .suspension .btns>a:first-child img {
.welcome .bg-img .suspension .btns > a:first-child img {
  width: 22px;
  height: 24px;
  top: 8px
  top: 8px;
}

.welcome .bg-img .suspension .btns>a:nth-child(2) img {
.welcome .bg-img .suspension .btns > a:nth-child(2) img {
  width: 15px;
  height: 17px
  height: 17px;
}

.welcome .bg-img .suspension .btns>a div {
.welcome .bg-img .suspension .btns > a div {
  font-size: 9px;
  font-family: Noto Sans SC;
  font-weight: 700;
  color: #393c44;
  line-height: 14px
  line-height: 14px;
}

.hot {
@@ -599,7 +695,7 @@
      width: 388px;
      height: 126px;
      background: #fff;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      //margin-left: 18px;
      border-radius: 8px;
      padding: 19px 24px;
@@ -663,7 +759,6 @@
    }
  }
}


.el-image {
  position: relative;