udxcms 1.0.10 → 1.0.11

package/dist/components/pageComponents/header/header_bridge.vue

@@ -0,0 +1,516 @@
+<template>
+  <div class="header-wrapper bridge" :class="['theme-' + themeMode]">
+    <div class="header-inner" :class="{ 'header-fixed': headerFixed }">
+      <div class="header-left ivu-scroll">
+        <div class="logo-wrapper" @click="toHome">
+          <img
+              :src="logoBase"
+              class="logo"
+              v-theme="{ height: '40px' || commonConfig.logoHeight }"
+          />
+          <!-- 处理不同主题 -->
+          <div class="origin-img">
+            <img
+                :src="logoBase"
+                class="logo-origin"
+                v-theme="{ height: '40px' || commonConfig.logoHeight }"
+            /> 
+          </div>
+        </div>
+      </div>
+      <ul class="user-wrapper">
+
+        <!-- 语言/法币 -->
+        <li class="lang-currency" @mouseenter="isShowCurrency = true">
+            <div class="menu-text gradient-border bridge-menu-text">
+                <img src="../../../assets/component_img/index-bridge/lang.png" alt="">
+            </div>
+            <!-- <a-icon type="caret-down" /> -->
+            <div class="menu-dropdown currency-dropdown bridge-menu-currency">
+                <Currency
+                    v-model="isShowCurrency"
+                    top="0"
+                    left=""
+                    right="0"
+                    :isClickstatus="false"
+                    :showCurrency='false'
+                    @setLang="setLang"
+                />
+            </div>
+        </li>
+        <!-- 已登录 - 钱包 -->
+        <li v-if="(account || isLocked) && !hideWalletBtn">
+          <div class='gradient-border bridge-wallet-connected'>
+            <WalletConnected class='bridge-connected'/>
+          </div>
+        </li>
+        <li v-else-if='!hideWalletBtn'>
+            <div
+              class="gradient-border wallet-connect"
+              type="primary"
+              @click="login"
+            >
+                <div class='wallet-connect-content'>
+                    <img src="../../../assets/component_img/index-bridge/Wallet.png" alt="">
+                    <span>{{$t('wallet_common_connect')}}</span>
+                </div>
+            </div>
+        </li>
+      </ul>
+    </div>
+    <TopMessage :show='true'/>
+  </div>
+</template>
+
+<script>
+import config from "../../../config/index";
+import _ from "lodash";
+import themeMixin from "../../../mixins/themeMixin-votex";
+import logoBase from '../../../assets/component_img/index-bridge/logo.png'
+
+
+export default {
+  name: "HeaderVortex",
+  mixins: [themeMixin],
+  props: {
+    navList: {
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+    scrollTop: {
+      type: Number,
+      default: null,
+    },
+    showMiddleInfo: {
+      type: Boolean,
+      default: true,
+    },
+    hideWalletBtn: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      sitePath: config.sitePath,
+      walletMenuVisible: true,
+      token: localStorage.getItem("TOKEN"),
+      headerFixed: false,
+      isShowCurrency: false,
+      logoBase
+    };
+  },
+  computed: {
+
+    commonConfig() {
+      return this.$store.state.theme.common.common_conf;
+    },
+    logoUrl() {
+    //   if(this.themeMode === 'light') {
+    //     return this.sitePath +location.hostname + '/light/logo.png'
+    //   } else {
+    //     return window.site_config[
+    //       "site_common_logo_image_" + location.hostname
+    //       ];
+    //   }
+    },
+    currency() {
+      return this.$store.state.user.currency;
+    },
+    userInfo() {
+      return this.$store.state.user.userInfo || {};
+    },
+    btcWallet() {
+        return this.$store.state.wallet.btcWallet || {}
+    },
+    account() {
+        return this.btcWallet?.btcAccoount || this.$store.getters.account || "";
+    },
+    isLocked() {
+      return this.$store.getters.isLocked;
+    },
+    walletAccount() {
+      return this.walletData && this.walletData.getAddress()
+    },
+    chainId() {
+      return this.$store.state.chainId;
+    },
+    walletNetworks() {
+      return this.$store.getters.walletNetworks;
+    },
+    chainIcon() {
+      const networkDetail = this.$store.getters.filterNetworkItem(
+          this.chainId,
+          "L1"
+      );
+      return networkDetail.networkLogo;
+    },
+
+    userMenus() {
+      return this.$store.state.navigation.user;
+    },
+    walletIcon() {
+      return this.$store.getters.walletIcon || '';
+    },
+    isBasic() {
+      return this.$store.state.siteConfig.tradeMoel == 'Basic'
+    }
+  },
+  watch: {
+    account() {
+      this.checkAccount();
+    }
+  },
+  created() {
+    window.addEventListener("scroll", this.scrollFn());
+  },
+  mounted() {
+    // refresh event
+    this.$nextTick(() => {
+      $Vue.$bus.$on("refresh", (events) => {
+        events.map((type) => {
+          switch (type) {
+            case "initActiveUser":
+              this.checkAccount();
+              break;
+            default:
+              break;
+          }
+        })
+      })
+    })
+  },
+  methods: {
+    scrollFn() {
+      return _.throttle(() => {
+        let scrollT = window.scrollY * 1;
+        if (scrollT && this.$route.name == 'home') {
+            localStorage.setItem('vortexIndexScorll', scrollT)
+        }
+        if (scrollT >= this.scrollTop) {
+          this.headerFixed = true;
+        } else {
+          this.headerFixed = false;
+        }
+      }, 50);
+    },
+    checkAccount() {
+      this.token = localStorage.getItem("TOKEN");
+    },
+    toHome() {
+      this.$router.push({
+        path: "/",
+      });
+    },
+    onClickMenu(item) {
+      if (this.isBasic && item.click_url.includes('/trade?')) {
+        item.click_url = item.click_url.replace('/trade', '/trade/spot/swap')
+        console.log('item.click_url', item.click_url)
+      }
+      if (item.child && item.child.length) return;
+      if (item.click_url.startsWith("http")) {
+        if (item.bar_name !== "Faucet") {
+          window.open(item.click_url, "_blank");
+        }
+      } else {
+        this.$store.commit('setRouteUrl', item.click_url);
+        this.$router.push({
+          path: item.click_url,
+        });
+      }
+    },
+    goThirdUrl(url) {
+      if (url) {
+        window.open(this.faucetTips.url, "_blank");
+      }
+      this.faucetTips.show = false;
+    },
+    async changeChain(chainId) {
+      this.$store.commit("setChainId", chainId);
+    },
+    login() {
+      $Vue.$bus.$emit("linkWalletByConnetBtn");
+    },
+    formatAccount(value) {
+      if (!value) return ''
+      return value.slice(0, 4) + "******" + value.slice(-4, value.length);
+    },
+    setLang() {
+
+    }
+  },
+};
+</script>
+
+<style lang="less" scoped>
+
+.header-wrapper {
+  --height: 36px;
+  height: 60px;
+  &.bridge {
+    margin: 0px auto 18px;
+    height: 80px;
+    --height: 80px;
+  }
+  .header-inner {
+    font-size: 14px;
+    background-color: var(--header-bg-color);
+    height: 80px;
+    padding: 0 200px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    &.header-fixed {
+      position: fixed;
+      z-index: 1000;
+      padding: 0 200px;
+      margin: 0 auto;
+      transition: transform 0.3s ease;
+      top: -100px;
+      transform: translateY(100px);
+      background-color: transparent;
+      box-shadow: var(--box-shadow-base);
+      &::before {
+        content: "";
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background: var(--header-fixed-bg-color);
+        backdrop-filter: blur(15px);
+      }
+    }
+  }
+
+  .header-left {
+    display: flex;
+    align-items: center;
+  }
+  .logo-wrapper {
+    position: relative;
+    overflow: hidden;
+    flex: none;
+    cursor: pointer;
+    .logo {
+      height: 26px;
+      width: auto
+    }
+    .origin-img {
+      display: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      overflow: hidden;
+    }
+  }
+
+  li {
+    height: var(--height);
+    line-height: var(--height);
+    cursor: pointer;
+    position: relative;
+    .bridge-menu-text {
+        padding: 5px;
+        border-radius: 50%;
+        &::before {
+            background: #020202;
+        }
+        img {
+            position: relative;
+            z-index: 2;
+            width:30px;
+            height: 30px;
+        }
+    }
+    &:hover {
+      .menu-text {
+        color: var(--link-color);
+      }
+      .menu-dropdown {
+        display: block;
+      }
+    }
+    .menu-text {
+      display: flex;
+      white-space: nowrap;
+      align-items: center;
+      font-family: MFontBold;
+      font-size: 16px;
+      &:hover {
+        color: #A5FF87;
+      }
+    }
+    .anticon {
+      font-size: 12px;
+      margin-left: 4px;
+    }
+  }
+
+  .menu-wrapper {
+    margin-left: 30px;
+    display: flex;
+    align-items: center;
+    gap: 26px;
+  }
+  .menu-dropdown {
+    display: none;
+    position: absolute;
+    top: var(--height);
+    left: 0;
+    min-width: 160px;
+    z-index: 800;
+    /deep/ .portfolio {
+      ul {
+        background: var(--popup-bg);
+        border-radius: var(--border-radius-base);
+        box-shadow: var(--box-shadow-base);
+        li {
+          margin: 0px;
+          height: 48px;
+          line-height: 48px;
+          font-size: 16px;
+          color: var(--text-color);
+          white-space: nowrap;
+          &:hover {
+            color: var(--link-color);
+            background-color: var(--select-item-bg);
+          }
+        }
+      }
+    }
+    &.currency-dropdown {
+      right: 0;
+      left: auto;
+    }
+    &.bridge-menu-currency {
+        /deep/ .current-content {
+            border-right: 0px;
+        }
+    }
+    .submenu-wrapper {
+      // margin-top: 10px;
+      background: var(--popup-bg);
+      border-radius: var(--border-radius-base);
+      overflow: hidden;
+      box-shadow: var(--box-shadow-base);
+      .submenu-item {
+        height: 48px;
+        line-height: 48px;
+        padding: 0 16px;
+        font-size: 16px;
+        white-space: nowrap;
+        &:hover {
+          background-color: var(--select-item-bg);
+          color: var(--link-color);
+        }
+      }
+    }
+  }
+
+  .user-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-left: 20px;
+    li {
+        display: flex;
+        align-items: center;
+    }
+    .my-orders, .my-portfolio {
+      margin-right: 12px;
+    }
+
+    .wallet-connect {
+      display: inline-block;
+      box-sizing: border-box;
+      height: 40px;
+      font-size: 14px;
+      padding: 0 10px;
+      color: var(--white);
+      border-radius:  50px;
+      font-family: CFontBold;
+      min-width: 160px;
+    //   border: 1px solid #A5FF87;
+      padding: 0 26px;
+      &:hover {
+        border: 0px;
+        color: #32b0bc;
+      }
+      &::before {
+        background: #020202;
+        z-index: 0;
+      }
+      .wallet-connect-content {
+        position: relative;
+        z-index: 2;
+        display: flex;
+        align-items: center;
+        height: 40px;
+        font-family: Font;
+        img {
+            margin-right: 10px;
+            width: 20px;
+            height: 20px;
+            vertical-align: 2px;
+        }
+      }
+    }
+  }
+
+  .bridge-wallet-connected {
+    display: flex;
+    align-items: center;
+    border: 1px solid none;
+    height: 40px;
+    border-radius: var(--border-radius-base);
+    padding: 8px 12px;
+    border-radius: 40px;
+    font-family: Font;
+    &::before {
+        background: #020202;
+    }
+    .bridge-connected {
+        position: relative;
+        z-index: 2;
+    }
+    /deep/ .wallet-connected {
+        border: 0 !important;
+    }
+    img {
+      width: 24px;
+      height: 24px;
+    }
+    .icon-locked {
+      font-size: 14px;
+    }
+    .user-account {
+      margin: 0 6px;
+    }
+    &.wallet-locked {
+      color: var(--error-color);
+    }
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .header-wrapper {
+    .menu-wrapper {
+      margin-left: 20px;
+    }
+  }
+}
+
+@media screen and (min-width: 1500px) {
+  .header-wrapper {
+    .menu-wrapper {
+      margin-left: 130px;
+      width: fit-content;
+      gap: 100px;
+    }
+  }
+}
+</style>