123

dcc

2024-06-11 1a0dfc3414d02b4247e2160436d37413da8bf295

 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>