udxcms 1.0.1

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

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