cwg-crm
/
cwg_crm_person_front_vu_realse


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Payment Status</title>
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="full-screen" content="yes">
  <meta name="x5-fullscreen" content="true">

  <link rel="stylesheet" href="css/element-ui.css" />
  <link rel="stylesheet" href="css/element@2.12.2.css" />

  <style>
    :root {
      --primary: #eb3f57;
      --primary-dark: #d92f48;
      --primary-soft: #fff1f3;
      --blue: #368fec;
      --text-main: #111827;
      --text-secondary: #4b5563;
      --text-muted: #9ca3af;
      --border: #e5e7eb;
      --bg-page: #f5f7fb;
      --bg-card: rgba(255, 255, 255, .96);
      --radius-xl: 30px;
      --radius-lg: 22px;
      --radius-md: 16px;
      --shadow-card:
        0 24px 70px rgba(17, 24, 39, .08),
        0 6px 20px rgba(17, 24, 39, .05);
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      min-height: 100%;
      background:
        radial-gradient(circle at top left, rgba(235, 63, 87, .12), transparent 32%),
        radial-gradient(circle at top right, rgba(59, 130, 246, .1), transparent 30%),
        var(--bg-page);
      font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
      color: var(--text-main);
      -webkit-font-smoothing: antialiased;
    }

    img {
      display: block;
      max-width: 100%;
    }

    a {
      text-decoration: none;
    }

    [v-cloak] {
      display: none;
    }

    #payment {
      width: 100%;
      min-height: 100vh;
      padding: 32px 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .payment-wrapper {
      width: min(760px, 100%);
    }

    .payment-card {
      overflow: hidden;
      border-radius: var(--radius-xl);
      border: 1px solid rgba(255, 255, 255, .75);
      background: var(--bg-card);
      backdrop-filter: blur(18px);
      box-shadow: var(--shadow-card);
    }

    /* 
    .payment-card::before {
      content: "";
      display: block;
      width: 100%;
      height: 5px;
      background:
        linear-gradient(90deg,
          var(--primary),
          var(--primary-dark));
    } */

    .card-header {
      padding: 28px 34px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      border-bottom: 1px solid var(--border);
      background:
        linear-gradient(180deg,
          #ffffff 0%,
          #fafcff 100%);
    }

    .logo-box img {
      width: 150px;
      object-fit: contain;
    }

    .language-switch {
      display: inline-flex;
      align-items: center;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: #fff;
      box-shadow:
        0 10px 22px rgba(17, 24, 39, .04);
    }

    .language-switch .menu {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-main);
      cursor: pointer;
    }

    .card-body {
      padding: 42px 34px;
      text-align: center;
    }

    .status-image {
      width: 120px;
      height: 120px;
      margin: 0 auto 28px;
      border-radius: 50%;
      background: var(--primary-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      box-shadow:
        inset 0 0 0 10px rgba(235, 63, 87, .06),
        0 20px 40px rgba(235, 63, 87, .12);
    }

    .status-image img {
      width: 100%;
    }

    .status-title {
      margin: 0;
      font-size: 30px;
      font-weight: 850;
      letter-spacing: -.03em;
    }

    .status-description {
      margin: 24px auto 0;
      max-width: 520px;
      font-size: 15px;
      line-height: 2;
      color: var(--text-secondary);
    }

    .status-description a {
      color: var(--blue);
      font-weight: 800;
      text-decoration: underline;
    }

    .support-card {
      margin-top: 42px;
      padding: 24px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
      background:
        linear-gradient(180deg,
          #ffffff 0%,
          #fafafa 100%);
      display: flex;
      align-items: center;
      gap: 24px;
      text-align: left;
    }

    .support-image {
      width: 92px;
      flex: 0 0 auto;
    }

    .support-text {
      color: #64748b;
      font-size: 13px;
      line-height: 2;
    }

    .support-text span {
      color: var(--blue);
      font-weight: 700;
      text-decoration: underline;
    }

    .footer-note {
      margin-top: 34px;
      padding-top: 28px;
      border-top: 1px solid var(--border);
      color: #9ca3af;
      font-size: 12px;
      line-height: 1.9;
      text-align: left;
    }

    .footer-note strong {
      color: #6b7280;
    }

    .card-footer {
      margin-top: 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
    }

    .footer-title {
      font-size: 13px;
      font-weight: 800;
    }

    .social-list {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .social-item {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border: 1px solid var(--border);
      transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
    }

    .social-item:hover {
      transform: translateY(-2px);
      border-color: rgba(235, 63, 87, .4);
      box-shadow:
        0 14px 30px rgba(235, 63, 87, .12);
    }

    .social-item img {
      width: 20px;
      height: 20px;
      object-fit: contain;
    }

    .el-dropdown-menu {
      border-radius: 14px;
      overflow: hidden;
    }

    @media (max-width: 768px) {
      #payment {
        padding: 14px;
        align-items: flex-start;
      }

      .payment-card {
        border-radius: 24px;
      }

      .card-header {
        padding: 22px 18px;
      }

      .language-switch {
        justify-content: center;
      }

      .card-body {
        padding: 30px 18px;
      }

      .status-image {
        width: 96px;
        height: 96px;
      }

      .status-title {
        font-size: 24px;
      }

      .status-description {
        font-size: 14px;
        line-height: 1.8;
      }

      .support-card {
        flex-direction: column;
        text-align: center;
      }

      .footer-note {
        text-align: center;
      }

      .card-footer {
        justify-content: center;
      }

      .footer-title {
        width: 100%;
        text-align: center;
      }
    }
  </style>
</head>

<body>

  <div id="payment" v-if="isShow" v-cloak>
    <div class="payment-wrapper">

      <div class="payment-card">

        <header class="card-header">

          <div class="logo-box">
            <img src="img/logo.jpg" alt="logo" />
          </div>

          <div class="language-switch">
            <el-dropdown trigger="click" @command="chooseLang">

              <span class="menu language-box">
                {{langList[language]}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>

              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="cn">中文简体</el-dropdown-item>
                <el-dropdown-item command="zhHant">中文繁体</el-dropdown-item>
                <el-dropdown-item command="en">English</el-dropdown-item>
                <el-dropdown-item command="vn">Tiếng Việt</el-dropdown-item>
                <el-dropdown-item command="de">Deutsch</el-dropdown-item>
                <el-dropdown-item command="es">Español</el-dropdown-item>
                <el-dropdown-item command="id">Indonesian</el-dropdown-item>
                <el-dropdown-item command="ms">Melayu</el-dropdown-item>
                <el-dropdown-item command="th">ภาษาไทย</el-dropdown-item>
                <el-dropdown-item command="ar">العربية</el-dropdown-item>
                <el-dropdown-item command="ko">한국어</el-dropdown-item>
                <el-dropdown-item command="pt">Português</el-dropdown-item>
                <el-dropdown-item command="fa">زبان پارسی</el-dropdown-item>
                <el-dropdown-item command="tr">Türkçe</el-dropdown-item>
              </el-dropdown-menu>

            </el-dropdown>
          </div>

        </header>

        <main class="card-body">

          <!-- <div class="status-image">
            <img src="img/wait.png" alt="status" />
          </div> -->

          <h1 class="status-title">
            {{lang.item1}}
          </h1>

          <div class="status-description">
            {{lang.item2}}
            <a :href="'https://secure.' + ho + '.com/'">
              {{lang.item3}}
            </a>
            {{lang.item4}}
          </div>

          <div class="support-card">

            <!-- <div class="support-image">
              <img src="img/kf.png" alt="support" />
            </div> -->

            <div class="support-text">
              {{lang.item5}}
              <span>{{lang.item6}}</span>
              {{lang.item7}}
              <span>{{lang.item8}}</span>
              {{lang.item9}}
            </div>

          </div>

          <div class="footer-note">
            <strong>{{lang.item10}}</strong>
            {{lang.item11}}
          </div>

          <div class="card-footer">

            <div class="footer-title">
              {{lang.item12}}
            </div>

            <div class="social-list">

              <!-- <a
              class="social-item"
              href="https://www.youtube.com/channel/UCsezhM2kqgoJ5s4wyU2XFqw?view_as=subscriber"
            >
              <img src="img/1.png" alt="youtube" />
            </a>

            <a
              class="social-item"
              href="https://www.facebook.com/cwgmarkets-113157100404084/"
            >
              <img src="img/2.png" alt="facebook" />
            </a>

            <a
              class="social-item"
              href="https://www.linkedin.com/company/20863443"
            >
              <img src="img/3.png" alt="linkedin" />
            </a>

            <a
              class="social-item"
              href="https://instagram.com/cwgmarkets?igshid=5o01ctz1iser"
            >
              <img src="img/4.png" alt="instagram" />
            </a>

            <a
              class="social-item"
              href="https://twitter.com/MarketsCwg"
            >
              <img src="img/5.png" alt="twitter" />
            </a> -->

            </div>

          </div>

        </main>

      </div>

    </div>
  </div>

  <script src="js/vue.min.js"></script>
  <script src="js/axios.min.js"></script>
  <script src="js/element-ui.js"></script>
  <script src="js/element@2.12.2.js"></script>
  <script src="./assets/js/payment.js"></script>

</body>

</html>