udxcms 1.0.8 → 1.0.10

package/dist/components/cmsComponents/dapps/Dapp copy.vue

@@ -1,543 +0,0 @@
-Dapp.vue
-
-<!--
- * @Descripttion:
- * @version:
- * @Author:
- * @Date: 2021-08-09 17:53:35
- * @LastEditors: Lewis
- * @LastEditTime: 2022-03-22 16:15:57
--->
-<template>
-    <div class='dapp'>
-        <div class="section-one-container visible-pc">
-            <div class="cms-container section-one">
-                <div class="text-wrap">
-                <div class="text-title">{{$t('cms_dapp_home_title')}}</div>
-                <div class="text-content">
-                    {{$t('cms_dapp_home_description')}}
-                </div>
-                </div>
-                <div class="img-wrap">
-                <img :src="require('../../../assets/img/cms/dapps.png')" alt="" />
-                </div>
-            </div>
-            <div class='dapp-content-tags visible-pc'>
-                <div class='tags'>
-                    <span :class="['tag-item', activeTagNames.indexOf(item.name) != -1 && 'active']" v-for="(item, index) in tagList" :key='index' @click='dealTag(item, index)'>
-                        <span>{{item.name}}</span>
-                        <img :src="require('../../../assets/img/add-icon.svg')" alt="" v-if='activeTagNames.indexOf(item.name) == -1'/>
-                        <img :src="require('../../../assets/img/add-right-icon.svg')" alt="" v-else/>
-                    </span>
-                </div>
-            </div>
-        </div>
-        <div class='section-two-container visible-h5'>
-            <div class="text-title">{{$t('cms_dapp_home_title')}}</div>
-            <div class="text-content">
-                {{$t('cms_dapp_home_description')}}
-            </div>
-            <div class='tags'>
-                <span :class="['tag-item', activeTagNames.indexOf(item.name) != -1 && 'active']" v-for="(item, index) in tagList" :key='index' @click='dealTag(item, index)'>
-                    <span>{{item.name}}</span>
-                    <img :src="require('../../../assets/img/add-icon.svg')" alt="" v-if='activeTagNames.indexOf(item.name) == -1'/>
-                    <img :src="require('../../../assets/img/add-right-icon.svg')" alt="" v-else/>
-                </span>
-            </div>
-        </div>
-        <div class='dapp-content'>
-            <div class='dapp-items' v-if='storeList.length && !loading'>
-                <div v-for='(item, index) in storeList' :key='index' :class="['dapp-item']"  @click='goDetail(item)'>
-                    <div class='cover' :style="{'background-image': 'url(' + item.image_url + ')'}">
-                        <div class='dapp-item-tags'>
-                            <div class='tag' v-for='(tagItem, tagIndex) in item.tagList' :key='tagIndex'>
-                                <span>{{tagItem}}</span>
-                            </div>
-                            <div class='tag' v-if='blockOverview.average_APY'>
-                                <span>ROE:</span>
-                                <span class='red'>{{blockOverview.average_APY || '0%'}}</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class='dapp-brief'>
-                        <div class='title'>{{item.title}}</div>
-                        <div class='brief'>{{item.brief}}</div>
-                    </div>
-                </div>
-            </div>
-            <div v-else class='loading'>
-                <SiteLoading v-show='loading' />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    import { loadImportScript, isPhone, isInIsWalletApp } from '../../../utils/index'
-    import conf from '../../../config/index'
-    import { getBlocksOverview } from '../../../api/common'
-    export default {
-        name: 'dapp',
-        data() {
-            return {
-                storeList: [],
-                storeInitList: [],
-                tags: [],
-                blockOverview: {},
-                isPhone: isPhone(),
-                loading: false,
-                activeTagIndex: -1,
-                activeText: '',
-                activeTagNames: [],
-                tagList: []
-            }
-        },
-        mounted() {
-            this.getDappList()
-            this.getTaglist()
-            this.getBlocksOverview()
-        },
-        watch: {
-            activeTagNames(val) {
-                if (!(val.length)) this.storeList = this.storeInitList
-                else this.storeList = this.storeInitList.filter(v => {
-                    return this.isSameItem(val, v.tagList)
-                })
-            }
-        },
-        methods: {
-            getDappList() {
-                // let hostname = window.mainHostname;
-                let hostname = location.hostname
-                let lang = localStorage.getItem('language')
-                let src = `${conf.sitePath}${hostname}/${lang}/app_store/all/classify_tree.js`
-                this.loading = true
-                let timeDate = new Date()
-                let time = '' + timeDate.getFullYear() + timeDate.getMonth() + timeDate.getDate()
-                loadImportScript(`${conf.sitePath}${hostname}/${lang}/app_store/all/classify_tree.js?time=${time}`, null, 'message').then(res => {
-                    console.log('message', res)
-                    let dappsList = res || []
-                    let storeList = []
-                    let tags = []
-                    dappsList.map(v => {
-                        if (v.content) {
-                            storeList = storeList.concat(v.content)
-                        }
-                    })
-                    this.storeList = storeList.map(v => {
-                        v.tagList = v.tags && v.tags.map(tag => {
-                            return tag.name
-                        }) || []
-                        if (v.tagList.length) tags = tags.concat(v.tagList)
-                        return v
-                    })
-                    this.storeInitList = Object.assign([], this.storeList)
-                    this.tags = Array.from(new Set(tags))
-                    console.log('this.storeList', this.storeList, this.tags)
-                    this.loading = false
-                }).catch(e => e)
-            },
-            getTaglist() {
-                let hostname = window.location.hostname
-                let src = `${conf.sitePath}${hostname}/all/app_store/all/all_tag.js`
-                loadImportScript(src, null, 'message').then(res => {
-                    console.log('getTaglist', res)
-                    this.tagList = Object.assign([], res)
-                }).catch(e => e)
-            },
-            dealTag(item, index) {
-                this.activeTagIndex = index
-                let dealIndex = this.activeTagNames.indexOf(item.name)
-                if (dealIndex >= 0) {
-                    this.activeTagNames.splice(dealIndex, 1)
-                } else {
-                    this.activeTagNames.push(item.name)
-                }
-            },
-            showItemFunc(item) {
-                let tagsName = item.tags.map(v => v.name)
-                let res = false
-                this.activeTagNames.map(v => {
-                    if (tagsName.includes(v)) {
-                        res = true
-                    }
-                })
-                return res
-            },
-            goDetail(dappItem, item) {
-                if (dappItem.link) {
-                    if(isInIsWalletApp()) {
-                        window.location.href = dappItem.link
-                    } else {
-                        window.open(dappItem.link,  '_blank')
-                    }
-                }
-            },
-            getBlocksOverview() {
-                let currency_symbol, currency_name
-                if (this.isPhone) {
-                    let userCurrency = this.$store.state.user.currency || {}
-                    if (Object.keys(userCurrency).length) {
-                        let { name, symbol } = userCurrency
-                        currency_symbol = symbol || '$'
-                        currency_name = name || 'USD'
-                    } else {
-                        currency_symbol = this.$store.state.selCurrencySymbol
-                        currency_name = this.$store.state.selCurrency
-                    }
-                } else {
-                    let userCurrency = this.$store.state.user.currency || {}
-                    let { name, symbol } = userCurrency
-                    currency_symbol = symbol || '$'
-                    currency_name = name || 'USD'
-                }
-
-                getBlocksOverview({currency_symbol:currency_symbol, currency_name:currency_name}).then(res => {
-                    if (res.code == 200) {
-                        this.blockOverview = res.data || {}
-                        console.log('blockOverview', blockOverview)
-                    }
-                }).catch(e => e)
-            },
-            isSameItem(arr, dealArr) {
-                let resArr = arr.concat(dealArr)
-                let dealResArr = Array.from(new Set(resArr))
-                return resArr.length !== dealResArr.length
-            }
-        }
-    }
-</script>
-
-<style lang="less" scoped>
-.section-one {
-  padding-top: 60px;
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 24px;
-  align-items: center;
-  justify-items: stretch;
-  padding-bottom: 10px;
-  background: var(--text-color-six);
-  max-width: 100%;
-  .text-wrap {
-    padding: 30px 20px;
-    max-width: 100%;
-    .text-title {
-      font-size: 30px;
-      font-family: FontSemiBold;
-      color: white;
-      line-height: 36px;
-      margin-bottom: 12px;
-      max-width: 100%;
-    }
-    .text-content {
-      font-size: 18px;
-      font-family: Font;
-      color: white;
-      line-height: 26px;
-      margin-bottom: 18px;
-      max-width: 100%;
-    }
-  }
-  .img-wrap {
-    width: 100%;
-    padding: 30px;
-    max-width: 100%;
-    img {
-      width: 100%;
-      max-width: calc(100vw - 60px);
-    }
-  }
-}
-/* iphone6 7 8 */
-.dapp {
-    padding-bottom: 20px;
-    .section-one-container {
-        position: relative;
-        .dapp-content-tags {
-            position: absolute;
-            z-index: 2;
-            width: 100%;
-            bottom: 120px;
-            .tags {
-                margin-top: 48px;
-                text-align: center;
-                .tag-item {
-                    border-radius: 18px;
-                    padding: 8px 12px;
-                    background: white;
-                    color: #6C757D;
-                    font-family: Poppins;
-                    font-size: 14px;
-                    margin-right: 16px;
-                    margin-bottom: 16px;
-                    img {
-                        width: 12px;
-                        height: 12px;
-                        margin-left: 5px;
-                    }
-                    &.active {
-                        background: rgba(229, 8, 126, 1);
-                        color: white;
-                    }
-                }
-            }
-        }
-    }
-    .dapp-content {
-        .loading {
-            padding-top: 100px;
-        }
-        .dapp-items {
-            display: grid;
-            gap: 20px;
-            min-height: 200px;
-        }
-        .dapp-item {
-            margin: 0 20px;
-            border-radius: 12px;
-            overflow: hidden;
-            position: relative;
-            .cover {
-                padding-top: 50%;
-                // border-radius: 12px 12px 0 0;
-                // background-color: #eee;
-                background-position: center center;
-                background-repeat: no-repeat;
-                background-size: cover;
-            }
-        }
-    }
-    .dapp-item-box {
-        padding: 0 20px;
-        margin-bottom: 40px;
-    }
-    .dapp-logo {
-        text-align: center;
-        max-width: 100%;
-        img {
-            display: inline-block;
-            width: 30px;
-        }
-    }
-    .title {
-        max-width: 100%;
-        font-family: FontMedium;
-
-        text-align: center;
-    }
-    .dapp-logo-title {
-        margin-top: 24px;
-        font-size: 24px;
-        line-height: 36px;
-        color: var(--text-color);
-    }
-    .dapp-title {
-        margin-top: 16px;
-        font-size: 35px;
-        line-height: 52px;
-        color: #171718;
-        max-width: 100%;
-    }
-    .subtitle {
-        font-family: Font;
-        text-align: center;
-        color: #3d5066;
-        max-width: 100%;
-    }
-    .dapp-subtitle {
-        margin-top: 20px;
-        font-size: 15px;
-        line-height: 24px;
-        max-width: 100%;
-    }
-    .dapp-items {
-        display: grid;
-        margin-top: 48px;
-        grid-template-columns: repeat(1, minmax(300px, 1fr));
-        gap: 10px;
-        max-width: 100%;
-    }
-    .dapp-item {
-        position: relative;
-        // background: rgba(247,247,247,1);
-        border-radius: 12px;
-        min-height: 332px;
-        cursor: pointer;
-        margin-bottom: 20px;
-        max-width: 100%;
-        overflow: hidden;
-        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
-        .dapp-item-bg {
-            height: 260px;
-            background-position: center;
-            background-repeat: no-repeat;
-            background-size: cover;
-        }
-        .dapp-item-tags {
-            position: absolute;
-            top:0;
-            width: 100%;
-            padding: 24px;
-            text-align: right;
-            display: flex;
-            justify-content: flex-end;
-            .tag {
-                margin-left: 12px;
-                font-size: 14px;
-                font-family: Font;
-                color: var(--text-color);
-                padding: 12px;
-                background: #ffffff;
-                border-radius: 18px;
-                border-radius: 19px;
-                word-break: keep-all;
-                .red {
-                    color: #f38fc5;
-                }
-            }
-        }
-    }
-    .dapp-item-none {
-        display: none;
-    }
-    .dapp-brief {
-        top: 0;
-        z-index: 2;
-        width: 100%;
-        height: 160px;
-        background: var(--white);
-        padding: 24px;
-        max-width: 100%;
-        .title {
-            font-size: 24px;
-            font-family: Font;
-            font-weight: 600;
-            color: var(--text-color);
-            text-align: left;
-            line-height: 36px;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-        }
-        .brief {
-            margin-top: 4px;
-            font-size: 16px;
-            font-family: Font;
-            color: var(--text-color-third);
-            line-height: 24px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: -webkit-box;
-            -webkit-line-clamp: 3;
-            -webkit-box-orient: vertical;
-        }
-    }
-    .dapp-item:hover .dapp-brief {
-        display: block;
-    }
-}
-.section-two-container {
-    width: 100%;
-    height: 476px;
-    background: linear-gradient(180.27deg, var(--text-color-six) 56.3%, #E5087E 210.85%);
-    padding: 88px 20px 0 20px;
-    .text-title {
-        font-family: Font;
-        font-weight: 600;
-        font-size: 35px;
-        line-height: 42px;
-        color: #FFFFFF;
-        text-align: center;
-    }
-    .text-content {
-        margin-top: 24px;
-        font-family: Font;
-        font-size: 15px;
-        line-height: 22px;
-        text-align: center;
-        color: #FFFFFF;
-    }
-    .tags {
-        margin-top: 48px;
-        text-align: center;
-        .tag-item {
-            border-radius: 18px;
-            padding: 8px 12px;
-            background: white;
-            color: #6C757D;
-            font-family: Poppins;
-            font-size: 14px;
-            margin-right: 16px;
-            margin-bottom: 16px;
-            display: inline-block;
-            img {
-                width: 12px;
-                height: 12px;
-                margin-left: 5px;
-            }
-            &.active {
-                background: rgba(229, 8, 126, 1);
-                color: white;
-            }
-        }
-    }
-}
-@media screen and (min-width: 1200px) {
-    .section-one {
-        padding: 50px 98px 0;
-        grid-template-columns: 1fr 1fr;
-        .text-wrap {
-            padding: 0;
-            .text-title {
-                font-size: 40px;
-            }
-        }
-        .img-wrap {
-            width: 100%;
-            text-align: center;
-            padding: 0;
-            img {
-                height: 552px;
-                width: auto;
-                max-width: auto;
-            }
-        }
-    }
-    .dapp {
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-        .dapp-content {
-            min-height: 420px;
-        }
-        .dapp-logo-title {
-            margin-top: 16px;
-        }
-        .dapp-title {
-            margin-top: 12px;
-            font-size: 40px;
-            line-height: 60px;
-        }
-        .dapp-subtitle {
-            margin-top: 12px;
-            font-size: 18px;
-            line-height: 24px;
-        }
-        .dapp-items {
-            width: 1280px;
-            margin: 48px auto 0;
-            display: grid;
-            grid-template-columns: repeat(3, minmax(420px, 1fr));
-            gap: 20px;
-            justify-content: center;
-            justify-items: center;
-        }
-        .dapp-item {
-            width: 100%;
-            margin: 0;
-            margin-bottom: 0px;
-        }
-    }
-}
-</style>