udxcms 1.0.1

package/dist/components/businessComponents/walletPanel.vue

@@ -0,0 +1,241 @@
+<!--
+ * @Author:
+ * @Date: 2020-11-17 10:20:07
+ * @LastEditTime: 2021-12-27 22:50:14
+ * @LastEditors: Lewis
+ * @Description:
+-->
+<template>
+    <div class='user-panel' :style="{top: top + 'px', left: left + 'px', position: active ? 'fixed': 'absolute'}" v-if='value'>
+        <div v-if="type == 'B' && uid && wallet && token">
+            <div class='user-p-item'>
+                <router-link to='/wallet'>{{$t("wallet_menu_overview")}}</router-link>
+            </div>
+            <div class='user-p-item'>
+                <router-link to='/wallet/deposit'>{{$t("wallet_menu_deposit")}}</router-link>
+            </div>
+            <div class='user-p-item'>
+                <router-link to='/wallet/withdraw/index'>{{$t("wallet_menu_withdraw")}}</router-link>
+            </div>
+            <div class='user-p-item'>
+                <router-link to='/wallet/transfer'>{{$t("wallet_menu_transfer")}}</router-link>
+            </div>
+            <div class='user-p-item'>
+                <router-link to='/wallet/bridge'>{{$t('wallet_menu_bridge')}}</router-link>
+            </div>
+            <div class='user-p-item'>
+                <router-link to='/wallet/nft'>{{$t('wallet_menu_nft')}}</router-link>
+            </div>
+            <div class='user-p-item'>
+                <router-link to='/wallet/security'>{{$t('wallet_common_security')}}</router-link>
+            </div>
+            <div class='user-p-item'>
+                <router-link to='/wallet/transaction-history'>{{$t("wallet_menu_transaction")}}</router-link>
+            </div>
+        </div>
+        <div v-if='!wallet || !token || !uid'>
+            <div class='user-p-item' @click='connectWallet'>
+                <span>{{$t("wallet_menu_unlock_account")}}</span>
+            </div>
+        </div>
+        <div class='user-p-item user-p-out' @click='logOutFunc'>
+            {{$t('wallet_menu_log_out')}}
+        </div>
+    </div>
+</template>
+
+<script>
+    import { logOut } from '../../api/common'
+    import { mapState } from 'vuex'
+    import { isUserCenter, emitEvents, onEvents} from '../../utils/index'
+    import conf from '../../config/index'
+    let closeFn
+    export default {
+        name: "userPanel",
+        props: {
+            top: {
+                type: String,
+                default: '0'
+            },
+            right: {
+                type: String | Number,
+                default: '0'
+            },
+            left: {
+                type: String | Number,
+                default: '0'
+            },
+            isClickstatus: {
+                type: Boolean,
+                default: true
+            },
+            value: {
+                type:Boolean,
+                default: false
+            },
+            active: {
+                type:Boolean,
+                default: false
+            },
+            type: {
+                type: String,
+                default: 'B'
+            }
+        },
+        computed: {
+            ...mapState('user', ['userInfo']),
+            userCenter() {
+                return isUserCenter()
+            },
+            uid() {
+                return this.userInfo && this.userInfo.uid
+            }
+        },
+        data() {
+            return {
+                wallet: this.walletData.getSyncWallet() && 1,
+                token: localStorage.getItem('TOKEN')
+            }
+        },
+        mounted() {
+            this.$nextTick(() => {
+                this.judgWallet()
+                onEvents('refresh', events => {
+                    if (!!~events.indexOf('userPenal')) {
+                        this.judgWallet()
+                    }
+                })
+            })
+        },
+        watch: {
+            value: function(val,oldValue) {
+                if (!val) {
+                    document.removeEventListener('click',closeFn)
+                }
+                let clickCount = 0
+                closeFn = (e)=>{
+                    if(!this.$el.contains(e.target) && (e.target.id !== 'userPannel') || (e.target.id === 'userPannel' && clickCount % 2)) {
+                        this.closeCallBack()
+                    }
+                    clickCount++
+                }
+                this.$nextTick(()=>{
+                    if(val) {
+                        document.addEventListener('click',closeFn)
+                    }else {
+                        document.removeEventListener('click',closeFn)
+                    }
+                })
+            }
+        },
+        methods: {
+            connectWallet() {
+                emitEvents('linkLogin', {
+                    type: 'unlock',
+                    fn: () => {
+                        this.loginBack()
+                    }
+                })
+            },
+            loginBack() {
+                let backRouteName = this.$store.state.cmsstore.backRouteName
+                if (backRouteName) {
+                    this.$store.commit('setBackRouteName', '')
+                    this.$router.push({
+                        name: backRouteName
+                    })
+                } else {
+                    this.$router.push({
+                        name: 'home'
+                    })
+                }
+            },
+            logOutFunc() {
+                this.closeCallBack()
+                let message = this.$t("user_menu_log_out_text")
+                this.$Powx.toast.confirm(message, 'logOut', this)
+            },
+            logOut(val) {
+                if (val) {
+                    this.closeCallBack()
+                    this.$Powx.toast.hide()
+                    logOut().catch(e => e).finally(final => {
+                        this.$store.commit('user/logout');
+                        this.$store.commit('setChainId', null);
+                        this.walletData.set({
+                            syncWallet: undefined,
+                            syncProvider: undefined,
+                            accountState: undefined
+                        })
+                        if (!conf.notNeedLoginRoute.includes(this.$route.name)) {
+                            this.$router.push({
+                                name: 'home'
+                            })
+                        }
+                    })
+                }
+            },
+            closeCallBack() {
+                if (this.isClickstatus) this.$emit('input', false)
+            },
+            judgWallet() {
+                this.wallet = this.walletData.getSyncWallet() && 1
+                this.token = localStorage.getItem('TOKEN')
+            }
+        },
+        beforeDestroy() {
+            document.removeEventListener('click',closeFn)
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .user-panel {
+        position: absolute;
+        top: 0;
+        // right: 0;
+        min-width: 180px;
+        left: 0;
+        box-sizing: border-box;
+        background: #21262C;
+        z-index: 999;
+        border-radius: 6px;
+        // border: 1px solid var(--border-color-base);
+        // box-shadow:  0px -1px 0px 0px var(--border-color-base) inset, 0px 1px 0px 0px var(--border-color-base) inset;
+        // transform: translateX(-12px);
+        overflow: hidden;
+    }
+    .user-p-item {
+        height: 48px;
+        line-height: 48px;
+        padding:0 20px;
+        font-size: 16px;
+        color: #fff;
+        font-family: Font;
+        cursor: pointer;
+        a {
+            color: #fff;
+            cursor: pointer;
+            white-space: nowrap;
+        }
+    }
+    .user-p-item:hover{
+        a {
+            color: rgba(255, 255, 255, 0.82);
+        }
+    }
+    .user-account {
+        width: 200px;
+        height: 70px;
+        line-height: 70px;
+        color: #1F2126;
+        border-bottom: 1px solid var(--border-color-base);
+        overflow-x: auto;
+        overflow-y: hidden;
+    }
+    .user-p-out {
+        text-align: center;
+        color: #EA5455;
+        border-top: 1px solid var(--border-line-color);
+    }
+</style>

package/dist/components/cmsComponents/academy/Academy.vue

@@ -0,0 +1,414 @@
+<template>
+  <div class="cms-acdemy">
+    <div class="section-one-container">
+      <div class="cms-container section-one">
+        <div class="text-wrap">
+          <div class="text-title">Mobi makes it safer and more efficient.</div>
+          <div class="text-content">
+            Your one-stop decentralized trading guide to all decentralized
+            trading techniques and trading related tutorials. Whether you’ re
+            trying to understand trading mining or looking to develop a
+            decentralized trading strategy, we’ve got you covered.
+          </div>
+          <a href="" class="text-btn">GET STARTED</a>
+        </div>
+        <div class="img-wrap">
+          <img
+            :src="require('../../../assets/img/cms/acdemy-top-img.png')"
+            alt=""
+          />
+        </div>
+      </div>
+    </div>
+    <!-- 文章列表 -->
+    <div class="section-article-container">
+      <div class="cms-container section-article">
+        <div class="section-title">Latest Releases</div>
+        <div class="article-wrap">
+          <div class="article-item">
+            <a href="/cms/detail?name=">
+              <div
+                class="article-img"
+                style="
+                  background-image: url('https://image.binance.vision/uploads-thumbnails/2dde1146856049b0825c1bae268762c8.png');
+                "
+              ></div>
+              <div class="article-title">Research</div>
+              <div class="article-content">
+                How to withdraw assets from the layer-2 network to the layer-1
+                network?
+              </div>
+              <div class="article-date">Jun 24，2021</div>
+            </a>
+          </div>
+          <div class="article-item">
+            <a href="/cms/detail?name=">
+              <div
+                class="article-img"
+                style="
+                  background-image: url('https://image.binance.vision/uploads-thumbnails/2dde1146856049b0825c1bae268762c8.png');
+                "
+              ></div>
+              <div class="article-title">Research</div>
+              <div class="article-content">
+                How to withdraw assets from the layer-2 network to the layer-1
+                network?
+              </div>
+              <div class="article-date">Jun 24，2021</div>
+            </a>
+          </div>
+          <div class="article-item">
+            <a href="/cms/detail?name=">
+              <div
+                class="article-img"
+                style="
+                  background-image: url('https://image.binance.vision/uploads-thumbnails/2dde1146856049b0825c1bae268762c8.png');
+                "
+              ></div>
+              <div class="article-title">Research</div>
+              <div class="article-content">
+                How to withdraw assets from the layer-2 network to the layer-1
+                network?
+              </div>
+              <div class="article-date">Jun 24，2021</div>
+            </a>
+          </div>
+          <div class="article-item">
+            <a href="/cms/detail?name=">
+              <div
+                class="article-img"
+                style="
+                  background-image: url('https://image.binance.vision/uploads-thumbnails/2dde1146856049b0825c1bae268762c8.png');
+                "
+              ></div>
+              <div class="article-title">Research</div>
+              <div class="article-content">
+                How to withdraw assets from the layer-2 network to the layer-1
+                network?
+              </div>
+              <div class="article-date">Jun 24，2021</div>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- join community -->
+    <div class="section-joinCommunity-container">
+      <div class="cms-container section-joinCommunity">
+        <div class="title">Join the MOBI community</div>
+        <div class="content">
+          MOBI is a 100% open-source program meaning to enable a decentralized
+          web and better society. We're looking for community members to join
+          our program and built MOBI decentralized network together.
+        </div>
+        <div class="grid">
+          <div class="grid-item" v-for="(item, index) in linkArr" :key="index">
+            <img :src="item.logo" alt="" />
+            <div class="text-wrap">
+              <div class="grid-item-title">{{ item.name }}</div>
+              <div class="grid-item-subtitle">{{ item.description }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import conf from "@/config/index";
+export default {
+  name: "Acdemy2",
+  data() {
+    return {
+      linkArr: [],
+    };
+  },
+  mounted() {
+    this.initLinkArr();
+    this.$nextTick(() => {
+      $Vue.$bus.$on("updateNavList", () => {
+        this.initLinkArr();
+      });
+    });
+  },
+  methods: {
+    initLinkArr() {
+      this.linkArr =
+        this.$t("media_common_media_channel") != "media_common_media_channel"
+          ? JSON.parse(this.$t("media_common_media_channel"))
+          : [
+              {
+                logo: "",
+                name: "Telegram",
+                description: "Telegram to Kim Il Sung of",
+              },
+              {
+                logo: "",
+                name: "Telegram",
+                description: "Telegram to Kim Il Sung of",
+              },
+              {
+                logo: "",
+                name: "Telegram",
+                description: "Telegram to Kim Il Sung of",
+              },
+            ];
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+// 第一块
+.section-one-cms-container {
+  background: #fcfcfc;
+}
+.section-one {
+  // height: 550px;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 24px;
+  align-items: center;
+  justify-items: stretch;
+  padding-top: 40px;
+  padding-bottom: 0;
+  .text-wrap {
+    .text-title {
+      font-size: 32px;
+      font-family: FontSemiBold;
+      color: var(--text-color);
+      line-height: 36px;
+      margin-bottom: 12px;
+    }
+    .text-content {
+      font-size: 16px;
+      font-family: Font;
+
+      color: #3d5066;
+      line-height: 26px;
+      margin-bottom: 20px;
+    }
+    .text-btn {
+      width: 148px;
+      height: 40px;
+      display: block;
+      margin: 20px auto;
+      line-height: 40px;
+      text-align: center;
+      border: 1px solid #e5087e;
+      border-radius: 20px;
+      font-size: 17px;
+      font-family: FontMedium;
+
+      color: #e5087e;
+      transition: all 300ms ease-in-out;
+      &:hover {
+        background-color: #e5087e;
+        color: #fff;
+      }
+    }
+  }
+  .img-wrap {
+    width: 100%;
+    img {
+      width: 100%;
+    }
+  }
+}
+
+// 文章列表
+.section-article {
+  padding-bottom: 0;
+  .section-title {
+    font-size: 20px;
+    line-height: 48px;
+    margin-bottom: 16px;
+    font-family: FontMedium;
+  }
+  .article-wrap {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 24px;
+    margin-bottom: 40px;
+  }
+  .article-item {
+    a {
+      display: block;
+      background: #ffffff;
+      border: 1px solid #e9ecef;
+      border-radius: 12px;
+      transition: box-shadow 250ms ease-in;
+      box-shadow: 0px 1px 6px 0px rgba(52, 58, 64, 0.12);
+    }
+    a:hover {
+      box-shadow: 0px 1px 12px 0px rgba(52, 58, 64, 0.34);
+    }
+    .article-img {
+      padding-top: 50%;
+      border-radius: 12px 12px 0 0;
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+    .article-title {
+      font-size: 16px;
+      font-family: Font;
+
+      text-align: left;
+      color: #e5087e;
+      line-height: 25px;
+      margin: 24px 24px 12px;
+    }
+    .article-content {
+      height: 84px;
+      line-height: 28px;
+      margin: 0 24px 24px;
+      font-size: 20px;
+      color: var(--text-color);
+      font-family: Font;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+      overflow: hidden;
+    }
+    .article-date {
+      border-top: 1px solid #f1f1f1;
+      height: 56px;
+      line-height: 56px;
+      font-size: 16px;
+      font-family: Font;
+
+      text-align: left;
+      color: #868f9a;
+      padding-left: 24px;
+    }
+  }
+}
+
+// join the MOBI community
+.section-joinCommunity-cms-container {
+  background: #172026;
+}
+.section-joinCommunity {
+  padding-top: 72px;
+  padding-bottom: 72px;
+  color: #fff;
+  .title {
+    font-size: 32px;
+    font-family: FontMedium;
+
+    text-align: center;
+    line-height: 36px;
+    margin-bottom: 12px;
+  }
+  .content {
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+    font-size: 17px;
+    font-family: Font;
+
+    text-align: center;
+    color: #ffffff;
+    line-height: 25px;
+    margin-bottom: 25px;
+  }
+  .grid {
+    margin-top: 36px;
+    display: grid;
+    gap: 25px;
+    grid-template-columns: 1fr;
+  }
+  .grid-item {
+    display: flex;
+    background: #fbfbfb;
+    box-shadow: 0px 4px 11px 0px rgba(1, 1, 1, 0.1);
+    border-radius: 20px;
+    height: 88px;
+    align-items: center;
+    padding-left: 30px;
+    img {
+      width: 48px;
+      height: 48px;
+    }
+    .text-wrap {
+      margin-left: 16px;
+      font-family: Font;
+      .grid-item-title {
+        font-size: 20px;
+        color: var(--text-color-four);
+        line-height: 24px;
+      }
+      .grid-item-subtitle {
+        font-size: 16px;
+        color: #3d5066;
+        line-height: 24px;
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .section-one {
+    grid-template-columns: 1fr 0.8fr;
+    .text-wrap {
+      max-width: 500px;
+    }
+  }
+
+  // 文章列表
+  .section-article {
+    .article-wrap {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  // join the MOBI community
+  .section-joinCommunity {
+    .grid {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+}
+@media screen and (min-width: 1200px) {
+  .section-one {
+    grid-template-columns: 1fr 1fr;
+    padding-top: 50px;
+
+    .text-wrap {
+      width: 500px;
+      .text-title {
+        font-size: 40px;
+        line-height: 48px;
+        margin-bottom: 25px;
+      }
+      .text-content {
+        margin-bottom: 25px;
+      }
+      .text-btn {
+        margin: 0 auto 0 0;
+      }
+    }
+  }
+
+  // 文章列表
+  .section-article {
+    .article-wrap {
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+  }
+
+  // join the MOBI community
+  .section-joinCommunity {
+    .title {
+      font-size: 40px;
+      line-height: 60px;
+      margin-bottom: 16px;
+    }
+    .grid {
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+  }
+}
+</style>