udxcms 1.0.9 → 1.0.10

package/dist/components/cmsComponents/dapps/Dapplist.vue

@@ -1,219 +0,0 @@
-<template>
-    <div class='dapps'>
-        <div class='title'>
-            {{title}}
-            <div class='opt-btn' v-if='showCount < total'>
-                <div :class="['opt', currentAct == 0 && 'no-more']" @click='goViewDapp(-1)'><a-icon type="left" class='icon' /></div>
-                <div :class="['opt', currentAct == total - 1 && 'no-more']" @click='goViewDapp(1)'><a-icon type="right" class='icon' /></div>
-            </div>
-        </div>
-        <div class='dapp-list' :style="{width: total / showCount * 100 + '%', transform: 'translateX('+ currentAct * -1 / total * 100 +'%)'}">
-            <div class='item' :style="{width: 1 / total * 100 + '%'}" v-for="(item, index) in dataList" :key='index'>
-                <div class='content' @click='goDetail(item)'>
-                    <div class='img-box' @touchstart="touchstart" @touchend='touchend'>
-                        <!-- <img :src="item.image_url || require('../../../assets/default-site-icon.png')" alt="" @error='changeImgUrl(item, index)'/> -->
-                        <img :src="item.image_url" alt="" @error='changeImgUrl(item, index)'/>
-                        <div class='del' v-show='showDel && index != 0 && showDelBtn' @click.stop="delItem(index)">
-                            <svg-icon class='del-close' icon-class="close"></svg-icon>
-                        </div>
-                    </div>
-                    <div class='name'>{{item.title || item.name}}</div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    import { isInIsWalletApp } from '../../../utils/index'
-    export default {
-        name: 'dapp-list',
-        props: {
-            dataList: {
-                type: Array,
-                default: () => {
-                    return []
-                }
-            },
-            showCount: {
-                type: Number,
-                defualt: 1
-            },
-            total: {
-                type: Number,
-                default: 1
-            },
-            title: {
-                type: String,
-                defualt: ''
-            },
-            showDel: {
-                type: Boolean,
-                defulat: false
-            }
-        },
-        data() {
-            return {
-                currentAct: 0,
-                showDelBtn: false,
-                timer: null
-            }
-        },
-        mounted() {
-            document.addEventListener('click', () => {
-                this.showDelBtn = false
-            })
-        },
-        methods: {
-            changeImgUrl(item, index) {
-                console.log('change-img-error:-----', index)
-                this.$emit('changeItem', {item, index})
-            },
-            goViewDapp(step) {
-                let currentAct = this.currentAct + step
-                if (currentAct < 0 || currentAct == this.total) return
-                else this.currentAct = currentAct
-            },
-            goDetail(dappItem, item) {
-                dappItem.link = dappItem.link || dappItem.url
-                if (dappItem.link) {
-                    if(isInIsWalletApp()) {
-                        window.location.href = dappItem.link
-                    } else {
-                        window.open(dappItem.link,  '_blank')
-                    }
-                }
-            },
-            delItem(index) {
-                this.$emit('delItem', index)
-            },
-            touchstart() {
-                clearTimeout(this.timer)
-                this.timer = setTimeout(() => {
-                    this.showDelBtn = true
-                })
-            },
-            touchend() {
-                clearTimeout(this.timer)
-            }
-        }
-    }
-</script>
-
-<style lang="less" scoped>
-    .dapps {
-        .title {
-            position: relative;
-            padding: 12px 0;
-            font-weight: 500;
-            font-size: 16px;
-            line-height: 24px;
-            color: var(--text-color);
-            .opt-btn {
-                position: absolute;
-                width: 80px;
-                z-index: 2;
-                right: 0;
-                top: 0;
-                display: flex;
-                justify-content: space-between;
-                div {
-                    width: 36px;
-                    height: 36px;
-                    background: rgba(241, 241, 241, .56);
-                    border-radius: 18px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    cursor: pointer;
-                    &:hover {
-                        background: rgba(241, 241, 241, 1);
-                    }
-                    &.no-more {
-                        background: none;
-                        // cursor: none;
-                    }
-                    .icon {
-                        color: #3D5066;
-                        font-size: 14px;
-                    }
-                }
-            }
-        }
-        width: 100%;
-        overflow: hidden;
-    }
-    .dapp-list {
-        margin-top: 8px;
-        transition: all .5s;
-        .item {
-            text-align: left;
-            float: left;
-
-            .content {
-                width: 60px;
-                cursor: pointer;
-                .img-box {
-                    // padding: 8px;
-                    border-radius: 16px;
-                    // border: 1px solid #F1F1F1;
-                    box-shadow: 1px 1px 4px #dfdfdf;
-                    position: relative;
-                    img {
-                        width: 60px;
-                        height: 60px;
-                    }
-                    .del {
-                        width: 0;
-                        height: 0;
-                        border: 8px solid white;
-                        border-color: white white transparent transparent;
-                        filter: drop-shadow(-1px 1px 1px #dfdfdf);
-                        position: absolute;
-                        top: -1px;
-                        right: -1px;
-                        .del-close {
-                            width: 10px;
-                            height: 10px;
-                            // margin-top: -10px;
-                            color: var(--primary-color);
-                            transform: translateY(-16px)  translateX(-0px);
-                        }
-                    }
-                }
-                .name {
-                    text-align: center;
-                    margin-top: 6px;
-                    font-size: 12px;
-                    line-height: 18px;
-                    color: var(--text-color);
-                    overflow:hidden;
-                    text-overflow: ellipsis;
-                    -webkit-line-clamp: 2;
-                    display: -webkit-box;
-                    -webkit-box-orient: vertical;
-                }
-            }
-        }
-    }
-    @media screen and (min-width: 1200px) {
-        .dapp-list {
-            .item {
-                .content {
-                    width: 80px;
-                    .img-box {
-                        // padding: 8px;
-                        border-radius: 16px;
-                        // border: 1px solid #F1F1F1;
-                        box-shadow: 1px 1px 4px #dfdfdf;
-                        // filter: drop-shadow(1px 1px 2px black);
-                        img {
-                            width: 80px;
-                            height: 80px;
-                        }
-                    }
-                }
-            }
-        }
-    }
-</style>