udxcms 1.0.1

package/dist/components/pageComponents/index/IndexWallet.vue

@@ -0,0 +1,696 @@
+<!--
+ * @Descripttion:
+ * @version:
+ * @Author:
+ * @Date: 2021-04-20 11:15:15
+ * @LastEditors: Lewis
+ * @LastEditTime: 2022-03-26 22:50:27
+-->
+
+<template>
+  <div class="home-header">
+    <Header :scrollTop="500" :childPage='tabIndex' class='visible-pc'/>
+    <Top class="top visible-h5" />
+    <!-- <fullpage ref='allPage' @moveEnded='moveEnded'> -->
+    <div slot="section">
+      <div class="home-item home-item-first">
+        <video
+          class="home-video"
+          :src="videoUrl"
+          v-show="showVideo"
+          @error="endVideoFunc"
+          @ended="endVideoFunc"
+          preload
+          muted
+          @canplaythrough="playVideo"
+          id="video"
+        />
+        <transition name="homeFade">
+          <div class="home-content home-content-first" v-if="videoEnd == 1">
+            <div class="home-head-content">
+              <img
+                :src="
+                  require('../../../assets/component_img/index-wallet/mao.png')
+                "
+                alt=""
+              />
+            </div>
+            <div class="home-first-title">{{$t('cms_home_wallet_first_title')}}</div>
+            <div class="home-frist-subtitle">
+              {{$t('cms_home_wallet_first_description')}}
+            </div>
+            <!-- <div v-if="!uid" class="home-first-btns" @click="login">
+              {{ $t("wallet_common_connect") }}
+            </div> -->
+
+            <!-- <div class="home-two-title">{{$t('cms_home_wallet_two_title')}}</div>
+            <div class="home-two-subtitle">
+              {{$t('cms_home_wallet_two_description')}}
+            </div> -->
+
+            <!-- download -->
+            <div class="download-wrapper">
+              <div class="download-text-wrapper">
+                <div class="home-first-title download-title">{{$t('cms_home_download_title')}}</div>
+                <div class="download-subtitle">{{$t('cms_home_download_subtitle')}}</div>
+                <router-link to="/download" class="download-btn">{{$t('cms_home_download_btn_title')}}</router-link>
+              </div>
+              <div class="download-cover-wrapper" :style="'background-image: url(' + require('../../../assets/component_img/index-wallet/home-download-cover.png') +')'">
+                <!-- <img
+                  :src="
+                    require('../../../assets/component_img/index-wallet/home-download-cover.png')
+                  "
+                  alt=""
+                /> -->
+
+              </div>
+            </div>
+
+            <div class="home-first-title">{{$t('cms_home_wallet_iswallet_brings_these_changes')}}</div>
+            <div class="home-two-items">
+              <div class="home-two-item">
+                <img
+                  :src="
+                    require('../../../assets/component_img/index-wallet/home-two2.svg')
+                  "
+                  alt=""
+                />
+                <div class="home-two-item-title">{{$t('cms_home_feature_ultra_security')}}</div>
+                <div class="home-two-item-subtitle">
+                  {{$t('cms_home_feature_ultra_security_description')}}
+                </div>
+              </div>
+              <div class="home-two-item">
+                <img
+                  :src="
+                    require('../../../assets/component_img/index-wallet/layer-2-integration.svg')
+                  "
+                  alt=""
+                />
+                <div class="home-two-item-title">{{$t('cms_home_layer_2_integration')}}</div>
+                <div class="home-two-item-subtitle">
+                  {{$t('cms_home_layer_2_integration_description')}}
+                </div>
+              </div>
+              <div class="home-two-item">
+                <img
+                  :src="
+                    require('../../../assets/component_img/index-wallet/ultra-low-fee.svg')
+                  "
+                  alt=""
+                />
+                <div class="home-two-item-title">{{$t('cms_home_ultra_low_fee')}}</div>
+                <div class="home-two-item-subtitle">
+                  {{$t('cms_home_ultra_low_fee_description')}}
+                </div>
+              </div>
+              <div class="home-two-item">
+                <img
+                  :src="
+                    require('../../../assets/component_img/index-wallet/home-two1.svg')
+                  "
+                  alt=""
+                />
+                <div class="home-two-item-title">{{$t('cms_home_wallet_two_item1_title')}}</div>
+                <div class="home-two-item-subtitle">
+                  {{$t('cms_home_wallet_two_item1_description')}}
+                </div>
+              </div>
+              <div class="home-two-item">
+                <img
+                  :src="
+                    require('../../../assets/component_img/index-wallet/home-two3.svg')
+                  "
+                  alt=""
+                />
+                <div class="home-two-item-title">{{$t('cms_home_wallet_two_item3_title')}}</div>
+                <div class="home-two-item-subtitle">
+                  {{$t('cms_home_wallet_two_item3_description')}}
+                </div>
+              </div>
+              <div class="home-two-item">
+                <img
+                  :src="
+                    require('../../../assets/component_img/index-wallet/explore-metaverse.svg')
+                  "
+                  alt=""
+                />
+                <div class="home-two-item-title">{{$t('cms_home_feature_explore_metaverse')}}</div>
+                <div class="home-two-item-subtitle">
+                  {{$t('cms_home_feature_explore_metaverse_description')}}
+                </div>
+              </div>
+            </div>
+
+            <div class="home-three-title">
+              {{$t('cms_home_wallet_three_title')}}
+            </div>
+            <div class="home-three-subtitle">
+              {{$t('cms_home_wallet_three_description')}}
+            </div>
+            <div class="home-three-img">
+              <img
+                :src="
+                  require('../../../assets/component_img/index-wallet/hom-three-img.png')
+                "
+                alt=""
+              />
+            </div>
+
+            <div class="home-three-title home-four-title">
+              {{$t('cms_home_wallet_four_title')}}
+            </div>
+            <div class="home-three-subtitle home-four-subbtitle">
+              {{$t('cms_home_wallet_four_description')}}
+            </div>
+            <div class="home-four-items">
+              <div class="home-four-item">
+                <img
+                  :src="
+                    require('../../../assets/component_img/index-wallet/WalletConnect.svg')
+                  "
+                  alt=""
+                />
+                <span class="home-four-span">{{$t('cms_home_wallet_four_item1_title')}}</span>
+              </div>
+              <div class="home-four-item">
+                <img
+                  :src="
+                    require('../../../assets/component_img/index-wallet/ETH.svg')
+                  "
+                  alt=""
+                />
+                <span class="home-four-span">{{$t('cms_home_wallet_four_item2_title')}}</span>
+              </div>
+              <div class="home-four-item">
+                <img
+                  :src="
+                    require('../../../assets/component_img/index-wallet/L2.svg')
+                  "
+                  alt=""
+                />
+                <span class="home-four-span">{{$t('cms_home_wallet_four_item3_title')}}</span>
+              </div>
+            </div>
+
+            <Footer />
+          </div>
+        </transition>
+      </div>
+    </div>
+    <!-- </fullpage> -->
+  </div>
+</template>
+
+<script>
+import { getLocation } from "../../../api/common";
+import conf from "../../../config/index";
+import { isUserCenter } from "../../../utils/index";
+export default {
+  name: "home",
+  computed: {
+    uid() {
+      return (
+        (this.$store.state.user.userInfo &&
+          this.$store.state.user.userInfo.id) ||
+        ""
+      );
+    },
+    logoSrc() {
+      let path =
+        this.$t("site_common_logo_base_url") +
+        (window.location.host.indexOf(conf.localHostIp) == -1
+          ? window.location.hostname
+          : conf.testSite);
+      return path;
+    },
+  },
+  data() {
+    return {
+      type: 1,
+      subscribe: "",
+      showToast: false,
+      showVideo: false,
+      videoUrl: "",
+      videoEnd: 1,
+      videoTime: null,
+      tabIndex: 1,
+      language: localStorage.getItem("language") || conf.baseLanguage,
+      userCenter: isUserCenter(),
+    };
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+    init() {
+    //   let Location = this.$store.state.user.location || {};
+    //   if (!Object.keys(Location).length) {
+    //     getLocation().then((res) => {
+    //       let { data, code } = res.data;
+    //       if (code == 200) {
+    //         this.$store.commit("user/setLocation", data.country);
+    //         this.$store.commit("user/setCurrency", data.currency);
+    //       }
+    //     }).catch(e => e);
+    //   }
+    //   this.initVideo();
+    },
+    dealUrl() {
+      if (this.uid) {
+        this.$router.push({
+          path: "/wallet",
+        });
+      } else {
+        this.$router.push({
+          path: "/user/login",
+        });
+      }
+    },
+    initVideo() {
+      let videoCount = localStorage.getItem("videoCount");
+      if (videoCount && videoCount > 0) {
+        this.videoUrl = this.$t("site_common_advertise_video_url");
+      }
+    },
+    playVideo() {
+      this.$nextTick(() => {
+        let video = document.getElementById("video");
+        video && video.play();
+        this.showVideo = true;
+        this.videoEnd = 0;
+      });
+    },
+    endVideoFunc() {
+      this.showVideo = false;
+      this.videoEnd = 1;
+      let videoCount = localStorage.getItem("videoCount");
+      if (typeof videoCount !== "object") {
+        videoCount--;
+        localStorage.setItem("videoCount", videoCount);
+      }
+    },
+    goPage(num) {
+      this.$refs.allPage.next();
+    },
+    moveEnded(index) {
+      this.tabIndex = index;
+    },
+    login() {
+      if (this.userCenter) {
+        this.$router.push({
+          path: "/user/login",
+        });
+      } else {
+        $Vue.$bus.$emit("linkWallet");
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.home-header /deep/ .contentWidth {
+  width: 100%;
+  padding: 0 30px;
+}
+.home-first {
+  height: 100vh;
+}
+.home-item {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  .home-video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    object-fit: cover;
+  }
+  img {
+    width: 100%;
+    height: 100%;
+  }
+  .home-item-2 {
+    height: 100vh;
+    width: auto;
+  }
+  .home-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 3;
+    padding-top: 60px;
+  }
+}
+.home-head-content {
+  text-align: center;
+  padding-top: 44px;
+  & > img {
+    width: 240px;
+    height: 180px;
+  }
+}
+
+.home-first-title {
+  padding-top: 30px;
+  font-size: 28px;
+  font-family: FontMedium;
+  text-align: center;
+  color: var(--text-color);
+  line-height: 42px;
+}
+.home-frist-subtitle {
+  width: 100%;
+  padding: 0 20px;
+  text-align: center;
+  font-size: 14px;
+  font-family: Font;
+  color: #3d5066;
+  line-height: 16px;
+}
+
+.home-first-btns {
+  margin: 0 auto;
+  margin-top: 40px;
+  width: 210px;
+  height: 58px;
+  opacity: 1;
+  border: 2px solid #e6017a;
+  border-radius: 31px;
+  line-height: 58px;
+  font-family: FontSemiBold;
+  text-align: center;
+  color: #e5087e;
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.download-wrapper{
+  // max-width: 1100px;
+  // margin: 20px auto;
+  margin: 20px auto;
+  padding: 0 20px;
+	display: grid;
+	grid-template-columns: 1fr;
+  grid-template-areas: 'a'
+                        'b';
+	gap: 24px;
+	align-items: center;
+	justify-items: stretch;
+	padding-top: 40px;
+	padding-bottom: 0;
+  .download-title{
+    text-align: center;
+    margin-bottom: 25px;
+    line-height: 1.5;
+    padding-top: 0;
+  }
+  .download-subtitle{
+    text-align: center;
+    font-size: 16px;
+    margin-bottom: 25px;
+  }
+  .download-btn{
+    width: 210px;
+    height: 46px;
+    line-height: 46px;
+    margin: 0 auto;
+    display: block;
+    border-radius: 31px;
+    background-color: var(--primary-color);
+    color: #fff;
+  }
+
+
+	.download-cover-wrapper {
+        grid-area: a;
+		width: 92.9%;
+		padding-top: 92.9%;
+		margin: auto;
+
+		background-position: center center;
+		background-repeat: no-repeat;
+		background-size: contain;
+	}
+}
+
+.home-two-title {
+  margin-top: 40px;
+  font-size: 32px;
+  font-family: FontMedium;
+
+  text-align: center;
+  color: #171718;
+  line-height: 48px;
+}
+.home-two-subtitle {
+  width: 100%;
+  padding: 0 20px;
+  font-size: 14px;
+  font-family: Font;
+  line-height: 24px;
+  text-align: center;
+  color: #3d5066;
+}
+.home-two-items {
+  padding: 40px 20px 0 20px;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  max-width: 1320px;
+  margin: 0 auto;
+  flex-wrap: wrap;
+  .home-two-item {
+    flex: auto;
+    padding: 20px 20px 56px 20px;
+    background: rgba(252, 252, 252, 1);
+    text-align: center;
+    margin-bottom: 10px;
+    img {
+      display: inline-block;
+      width: 170px;
+      height: 130px;
+      // margin: 0 auto;
+    }
+    .home-two-item-title {
+      margin: 12px auto 20px;
+      font-size: 24px;
+      font-family: FontMedium;
+
+      color: var(--text-color);
+      line-height: 35px;
+    }
+    .home-two-item-subtitle {
+      font-size: 14px;
+      font-family: Font;
+      color: #3d5066;
+      line-height: 24px;
+    }
+  }
+}
+
+.home-three-title {
+  margin-top: 40px;
+  margin-bottom: 20px;
+  padding: 0 20px;
+  font-size: 32px;
+  font-family: FontMedium;
+
+  text-align: center;
+  color: #171718;
+  line-height: 48px;
+}
+.home-three-subtitle {
+  margin: 0 auto;
+  width: 100%;
+  padding: 0 20px;
+  font-size: 14px;
+  font-family: Font;
+
+  text-align: center;
+  color: #3d5066;
+  line-height: 24px;
+}
+.home-three-img {
+  margin-top: 40px;
+  text-align: center;
+  img {
+    width: 100%;
+    height: auto;
+  }
+}
+.home-four-items {
+  padding: 40px 20px 0 20px;
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  .home-four-item {
+    display: flex;
+    align-items: center;
+    padding: 25px;
+    background: rgba(252,252,252,1);
+    margin-bottom: 10px;
+    img {
+      width: 64px;
+      height: 64px;
+    }
+    span {
+      margin-left: 16px;
+      font-size: 18px;
+      font-family: Font;
+
+      text-align: center;
+      color: var(--text-color);
+    }
+  }
+}
+.footer {
+  margin-top: 40px;
+  overflow: hidden;
+  /deep/ .footer {
+    padding: 20px 0 20px;
+    background: #fbfbfb;
+  }
+}
+@media screen and (min-width: 768px) {
+  .home-head-content {
+    padding-top: 80px;
+    & > img {
+      width: 400px;
+      height: 280px;
+    }
+  }
+  .home-first-title {
+    padding-top: 54px;
+    font-size: 40px;
+    line-height: 60px;
+  }
+  .home-frist-subtitle {
+    width: 640px;
+    margin: 12px auto;
+    font-size: 18px;
+    line-height: 24px;
+  }
+  .home-first-btns {
+    margin-top: 64px;
+    width: 210px;
+    height: 58px;
+    border-radius: 30px;
+    line-height: 58px;
+    font-size: 18px;
+  }
+  .home-two-title {
+    margin-top: 100px;
+    font-size: 40px;
+    line-height: 60px;
+  }
+  .home-two-subtitle {
+    width: 640px;
+    margin: 24px auto 0;
+    font-size: 18px;
+  }
+  .home-two-items {
+    padding-top: 56px;
+    .home-two-item {
+      text-align: left;
+      max-width: 50%;
+      width: 40%;
+      // min-height: 420px;
+      padding: 40px;
+      img {
+        width: 170px;
+        height: 130px;
+      }
+      .home-two-item-title {
+        margin: 20px auto 16px;
+        font-size: 28px;
+        line-height: 42px;
+      }
+      .home-two-item-subtitle {
+        font-size: 18px;
+        line-height: 24px;
+      }
+    }
+    .home-two-item:not(:last-child) {
+      margin-right: 10px;
+    }
+  }
+
+  .home-three-title {
+    margin-top: 100px;
+    margin-bottom: 24px;
+    font-size: 40px;
+    line-height: 60px;
+  }
+  .home-three-subtitle {
+    width: 700px;
+    font-size: 18px;
+    line-height: 24px;
+  }
+  .home-three-img {
+    margin-top: 72px;
+    img {
+      width: 1280px;
+      height: 300px;
+    }
+  }
+  .home-four-items {
+    padding-top: 100px;
+    .home-four-item {
+      img {
+        width: 64px;
+        height: 64px;
+      }
+      span {
+        margin-left: 16px;
+        font-size: 20px;
+      }
+    }
+  }
+  .footer {
+    margin-top: 80px;
+    /deep/ .footer {
+      padding: 36px 0 60px;
+    }
+  }
+  .download-wrapper{
+    padding: 0 40px;
+		grid-template-columns: 1fr 0.8fr;
+    grid-template-areas: 'a b';
+    .download-cover-wrapper {
+      grid-area: b;
+    }
+  }
+}
+@media screen and (min-width: 1200px) {
+
+  .download-wrapper{
+    max-width: 1400px;
+    padding: 0 60px;
+    .download-title{
+      text-align: left;
+    }
+    .download-subtitle{
+      text-align: left;
+    }
+    .download-btn{
+      margin-left: 0;
+    }
+  }
+  .home-two-items {
+    padding-top: 56px;
+    .home-two-item {
+      text-align: left;
+      max-width: 33.33%;
+      width: 25%;
+    }
+  }
+}
+</style>