udxcms 1.0.8 → 1.0.10

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

@@ -1,516 +0,0 @@
-<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>