<template>
    <div class="container center-content">
        <div class="top" v-loading="loading">
            <div class="top-left">
                <swiper class="mySwiper imgBox" ref="mySwiper" :options="swiperOptions">
                    <swiper-slide v-for="(item, index) in banners" :key="index">
                        <video
                            class="swiper-video"
                            v-if="isVideo(item)"
                            :src="item.url"
                            :poster="getImg(changeImgs([item]), '', 1800)"
                            controls="controls"
                        >
                            您的浏览器不支持 video 标签。
                        </video>
                        <el-image
                            v-else
                            :src="getImg(item.url, '', 1800)"
                            :preview-src-list="bannerList"
                            style="width: 100%; height: 520px"
                            fit="scale-down"
                        />
                    </swiper-slide>
                </swiper>
                <div class="works">
                    <img class="works1" src="../assets/img/icon-quanyibaohu@3x.png" alt="" />
                    <div class="works2">该作品已在保存至区块链并进行权益保护</div>
                </div>
                <div class="content" v-if="info.tokenId">
                    <el-collapse v-model="activeNames" :accordion="false">
                        <el-collapse-item name="6">
                            <template slot="title">
                                <img class="imgs" src="../assets/icon-lianshangxinxi.png" alt="" />
                                <span>链上信息</span>
                            </template>
                            <div class="info-hash">
                                <div class="hash-con">
                                    <div class="text1">Hash地址</div>
                                    <div class="hash-right">
                                        <img
                                            @click="copyAddress"
                                            class="hash-img"
                                            src="../assets/detail/copy_icon@3x (2).png"
                                            alt=""
                                        />
                                        <span class="hash-text">{{ info.txHash }}</span>
                                    </div>
                                </div>
                                <div class="hash-con">
                                    <div class="text1">区块高度</div>
                                    <div class="hash-right textName">
                                        <span class="hash-text">{{ info.blockNumber }}</span>
                                    </div>
                                </div>
                                <div class="hash-con">
                                    <div class="text1">令牌ID</div>
                                    <div class="hash-right">
                                        <img
                                            @click="copyId"
                                            class="hash-img"
                                            src="../assets/detail/copy_icon@3x (2).png"
                                            alt=""
                                        />
                                        <span class="hash-text">{{ info.tokenId }}</span>
                                    </div>
                                </div>
                            </div>
                            <!-- <div style="padding-left: 0" v-else class="info5">
                                <div class="del">铸造者未设置链上信息</div>
                            </div> -->
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </div>

            <div class="top-info">
                <div class="title">
                    <div class="title1">{{ info.name }}</div>
                    <div class="text">
                        <like-button size="large" :isLike="info.liked" @like="likeProduct">
                            {{ info.likes }}
                        </like-button>

                        <el-popover placement="bottom" popper-class="share-popver" trigger="hover">
                            <div class="text1" slot="reference">
                                <img class="img1" src="../assets/img/fenxiang-icon@3x.png" alt="" />
                                <div class="text2">分享</div>
                            </div>

                            <share :info="info" pageType="collectionDetail"> </share>
                        </el-popover>
                    </div>
                </div>
                <div class="name-list">
                    <router-link :to="{ path: '/castingDetail', query: { id: info.minterId } }" class="name">
                        <img class="name1" :src="info.minterAvatar" alt="" />
                        <div>
                            <div class="name2">{{ info.minter }}</div>
                            <div class="name3">铸造者</div>
                        </div>
                        <img class="name4" src="../assets/img/icon_inter@3x (4).png" alt="" />
                    </router-link>
                    <router-link :to="{ path: '/castingDetail', query: { id: info.ownerId } }" class="name">
                        <img class="name1" :src="info.ownerAvatar" alt="" />
                        <div>
                            <div class="name2">{{ info.owner }}</div>
                            <div class="name3">持有者</div>
                        </div>
                        <img class="name4" src="../assets/img/icon_inter@3x (4).png" alt="" />
                    </router-link>
                </div>
                <div class="content topcontent">
                    <el-collapse v-model="activeNames" :accordion="false">
                        <el-collapse-item name="1">
                            <template slot="title">
                                <img class="imgs" src="../assets/icon-miaoshu.png" alt="" />
                                <span>作品描述</span>
                            </template>
                            <div class="info5">
                                <div v-if="info.detail" v-html="info.detail"></div>
                                <div style="padding-left: 0" v-else class="del">铸造者未设置描述</div>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </div>

                <div class="time" v-if="info.salable">
                    <div class="time-icon">
                        <img class="time-img" src="../assets/detail/icon-dingjia@3x.png" alt="" />
                        <div class="time1">卖家定价</div>
                    </div>
                    <div class="time2" v-if="info.isAppointment">
                        首发抢购倒计时<span>{{ startTime }}</span>
                    </div>
                </div>
                <div style="margin-bottom: 30px" v-if="info.salable == false">
                    <div class="time">
                        <div class="time-icon">
                            <img class="time-img" src="../assets/detail/icon-tequan@3x.png" alt="" />
                            <div class="time1">卖家定价</div>
                        </div>
                    </div>
                    <div class="card init3">仅展示</div>
                </div>
                <div style="padding-bottom: 20px" class="price" v-if="info.salable">
                    <div class="top2">
                        <div class="price1">
                            <div class="price2">价格</div>
                            <img class="price3" src="../assets/img/icon_jiage@3x.png" alt="" />
                            <div class="price4">{{ info.price }}</div>
                            <div class="price2" v-if="info.royalties">
                                含 <span>{{ info.royalties }}%</span> 版税
                            </div>
                        </div>
                        <el-button
                            class="buy"
                            :class="{ used: info.appointment }"
                            v-if="info.isAppointment"
                            @click="appointment"
                            type="primary"
                            size="default"
                        >
                            {{ info.appointment ? '已预约' : '一键预约' }}
                        </el-button>
                        <el-button class="buy" v-else-if="isBuy" @click="submit" type="primary" size="default"
                            >立即购买</el-button
                        >
                    </div>
                    <div class="price1 num">
                        <div class="price2 num2">单次限购 1 件</div>
                        <div class="price2 num2">已售 {{ info.sale }} / 剩余 {{ info.stock }}</div>
                    </div>
                </div>
                <div class="content">
                    <el-collapse v-model="activeNames" :accordion="false">
                        <el-collapse-item name="5">
                            <template slot="title">
                                <img class="imgs" src="../assets/detail/icon-leixing@3x.png" alt="" />
                                <span>类型</span>
                                <img
                                    style="margin-left: 47px"
                                    class="imgs"
                                    src="../assets/detail/icon-qiaoqiaohua@3x.png"
                                    alt=""
                                />
                                <span>悄悄话<span class="span-detail">（灰色表示已使用）</span></span>
                                <img
                                    style="margin-left: 37px"
                                    class="imgs"
                                    src="../assets/detail/icon-tequan@3x.png"
                                    alt=""
                                />
                                <span>持有特权<span class="span-detail">（灰色表示已使用）</span></span>
                            </template>
                            <div class="init1">
                                <div class="name-store" v-if="info.category">{{ info.category }}</div>
                                <div class="Notset" v-else>铸造者未设置</div>
                                <div class="bor"></div>
                                <div style="width: 228px">
                                    <div class="box" v-if="init2 != ''">
                                        <!-- <div class="box" v-if=""> -->
                                        <div
                                            v-if="init2"
                                            @mouseenter="isShowPopover(init2.name, true)"
                                            @mouseleave="isShowPopover(init2.name, false)"
                                            style="position: relative; width: 24px; margin-left: 16px"
                                        >
                                            <img v-if="init2.opened" class="img" :src="init2.icon[2]" alt="" />
                                            <img v-else class="img" :src="init2.icon[0]" alt="" />
                                            <!-- v-if="popoverStatus[init2.name]" -->
                                            <div class="hoverTips1" v-if="popoverStatus[init2.name]">
                                                <p>{{ init2.description }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="del" v-else>铸造者未设置</div>
                                </div>
                                <div class="bor"></div>
                                <div>
                                    <div class="iconBox" v-if="init.length > 0">
                                        <div v-for="(item, index) in init" :key="index">
                                            <div
                                                style="position: relative"
                                                @mouseenter="isShowPopover(item.name, true)"
                                                @mouseleave="isShowPopover(item.name, false)"
                                            >
                                                <img v-if="item.opened" class="img2" :src="item.icon[2]" alt="" />
                                                <img v-if="!item.opened" class="img2" :src="item.icon[3]" alt="" />
                                                <div class="hoverTips" v-if="popoverStatus[item.name]">
                                                    <div class="span">{{ item.name }}</div>
                                                    <p>{{ item.description }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-else class="del">铸造者未设置</div>
                                </div>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </div>

                <div class="content">
                    <el-collapse v-model="activeNames" :accordion="false">
                        <el-collapse-item name="4">
                            <template slot="title">
                                <img class="imgs" src="../assets/detail/icon-texing@3x.png" alt="" />
                                <span>商品特性</span>
                            </template>
                            <div class="card">
                                <div class="storeCard" v-if="properties.length != 0">
                                    <div class="box1" v-for="(item, index) in properties" :key="index">
                                        <div class="box2">{{ item.name }}</div>
                                        <div class="box3">{{ item.value }}</div>
                                    </div>
                                </div>
                                <div class="dels" v-else>铸造者未设置</div>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </div>
        </div>
        <div class="content" v-loading="loading">
            <el-collapse v-model="activeNames" :accordion="false">
                <el-collapse-item name="2" v-if="boxs.length !== 0">
                    <template slot="title">
                        <img class="imgs" src="../assets/icon-miaoshu.png" alt="" />
                        <span>盲盒信息</span>
                    </template>
                    <div class="info4">
                        <swiper class="boxs" :options="boxOptions">
                            <swiper-slide v-for="(item, index) in boxs" :key="index">
                                <el-image :src="item" :preview-src-list="boxs" fit="scale-down" />
                            </swiper-slide>
                        </swiper>
                        <!-- <div v-html="info.detail"></div> -->
                    </div>
                </el-collapse-item>
                <div v-if="tableData.length != 0">
                    <el-collapse-item name="3">
                        <template slot="title">
                            <img class="imgs" src="../assets/info_icon_jiaoyijilu.png" alt="" />
                            <span>交易历史</span>
                        </template>
                        <el-table :data="tableData" stripe style="width: 100%; background: #1c1e26">
                            <el-table-column prop="fromUser" label="卖方" width="355">
                                <template slot-scope="scope">
                                    <div style="color: #fdfb60; font-size: 14px">
                                        {{ scope.row.fromUser }}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="operation" label="操作" width="305">
                                <template slot-scope="scope">
                                    <div style="font-size: 14px; color: #939599">
                                        {{ scope.row.operation }}
                                        <span v-if="scope.row.price">{{ scope.row.price }}</span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="nickname" label="持有方" width="305">
                                <template slot-scope="scope">
                                    <div style="color: #fdfb60; font-size: 14px">
                                        {{ scope.row.toUser }}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="createdAt" label="时间">
                                <template slot-scope="scope">
                                    <div style="font-size: 14px; color: #939599">
                                        {{ scope.row.createdAt }}
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-collapse-item>
                </div>
            </el-collapse>
        </div>
        <div class="nft" v-if="relateds.length > 0">
            <div class="nft1">
                <img class="nft2" :src="info.minterAvatar" alt="" />
                <div class="nft3">{{ info.minter }}</div>
            </div>
            <div class="nft4">来自创作者的NFT</div>
            <router-link class="nft1" :to="{ path: '/castingDetail', query: { id: info.minterId } }">
                <div class="nft5">查看更多</div>
                <img class="nft6" src="../assets/img/icon_inter@3x (4).png" alt="" />
            </router-link>
        </div>
        <div class="list" v-loading="loading" v-if="relateds.length > 0">
            <collection-info
                target="_blank"
                v-for="(item, index) in relateds"
                :key="item.id"
                :info.sync="relateds[index]"
            >
            </collection-info>
        </div>
        <submit ref="sub"></submit>
    </div>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import product from '../mixins/product';
import 'swiper/css/swiper.css';
import LikeButton from '../components/LikeButton.vue';
import CollectionInfo from '../components/CollectionInfo.vue';
import { mapState } from 'vuex';
import Submit from './Submit.vue';
import Share from '../components/Share.vue';
export default {
    components: { Swiper, SwiperSlide, LikeButton, CollectionInfo, Submit, Share },
    mixins: [product],
    data() {
        return {
            tableData: [],
            popoverStatus: {
                悄悄话: false,
                版权权利: false,
                加密空间: false,
                票务: false,
                兑换锁链: false,
                铸造: false
            },
            show: false,
            show2: false,
            show3: false,
            show4: false,
            info: {},
            blindBoxItems: [],
            swiperOptions: {},
            activeNames: ['1', '2', '3', '4', '5', '6'],
            relateds: [],
            boxOptions: { slidesPerView: 4, spaceBetween: 24, autoplay: true },
            loading: true,
            init2: [],
            init: [],
            list2: []
        };
    },
    computed: {
        banners() {
            return this.info.pic || [];
        },
        properties() {
            return this.info.properties || [];
        },
        isBuy() {
            return this.info.stock && this.info.onShelf && this.info.salable;
        },
        boxs() {
            let list = [...this.blindBoxItems];
            return list.map(item => {
                return this.getImg(this.changeImgs(item.pic));
            });
        },
        ...mapState(['userInfo'])
    },
    mounted() {
        this.getDetail();
    },
    watch: {
        $route() {
            this.getDetail();
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }
    },
    methods: {
        copyId() {
            this.$copyText(this.info.tokenId).then(
                e => {
                    this.$message.success('复制成功');
                },
                e => {
                    this.$message.warning('复制失败');
                }
            );
        },
        copyAddress() {
            this.$copyText(this.info.txHash).then(
                e => {
                    this.$message.success('复制成功');
                },
                e => {
                    this.$message.warning('复制失败');
                }
            );
        },
        isShowPopover(type, flag) {
            for (let key in this.popoverStatus) {
                if (type === key) {
                    this.popoverStatus[key] = flag;
                }
            }
        },
        getDetail() {
            this.$http
                .get('/collection/get/' + this.$route.query.id)
                .then(res => {
                    this.info = res;
                    this.loading = false;
                    this.getTime(res.startTime);
                    this.getRelated(res.ownerId);
                    if (res.assetId) {
                        this.$http.get('/asset/get/' + res.assetId).then(res => {
                            // console.log(res);
                            this.$http
                                .get('/asset/tokenHistory', {
                                    tokenId: res.tokenId,
                                    assetId: res.collectionId
                                })
                                .then(res => {
                                    // console.log(res);
                                    this.tableData = res;
                                });
                        });
                    }
                    if (res.privileges) {
                        this.init2 = res.privileges.find(item => {
                            return item.name === '悄悄话';
                        });
                    }
                    // console.log(JSON.stringify(this.init2).length == 0);

                    if (res.privileges) {
                        this.init = res.privileges.filter(item => {
                            return item.name !== '悄悄话' && item.name !== '加密空间';
                        });
                    }
                    if (res.type === 'BLIND_BOX') {
                        return this.$http.post(
                            '/blindBoxItem/all',
                            {
                                query: {
                                    blindBoxId: res.id
                                }
                            },
                            { body: 'json' }
                        );
                    } else {
                        return Promise.resolve();
                    }
                })
                .then(res => {
                    if (res) {
                        this.blindBoxItems = res.content;
                    } else {
                        this.blindBoxItems = [];
                    }
                });
        },
        likeProduct() {
            if (!this.info.liked) {
                this.$http.get(`/collection/${this.info.id}/like`).then(() => {
                    this.getDetail();
                    this.$message.success('收藏成功');
                });
            } else {
                this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
                    this.getDetail();
                    this.$message.success('取消收藏');
                });
            }
        },
        getRelated(id) {
            this.$http
                .post(
                    '/collection/all',
                    {
                        query: {
                            del: false,
                            ownerId: id
                        },
                        size: 5,
                        sort: 'createdAt,desc'
                    },
                    {
                        body: 'json'
                    }
                )
                .then(res => {
                    let list = [];
                    res.content.forEach(item => {
                        if (item.id !== this.info.id && list.length < 4) {
                            list.push(item);
                        }
                    });
                    this.relateds = list;
                });
        },
        appointment() {
            this.$http
                .post('/collection/appointment?id=' + this.info.id)
                .then(res => {
                    this.getDetail();
                    this.$message.success('预约成功');
                })
                .catch(e => {
                    if (e.error) {
                        this.$message.warning(e.error);
                    }
                });
        },
        submit() {
            this.$refs.sub.init(this.info);
        }
    }
};
</script>
<style lang="less" scoped>
.container {
    padding: 50px 50px 200px;
    background: #1a1a1a;
    .top {
        display: flex;
        justify-content: space-between;
        .top-left {
            width: 520px;
            flex-shrink: 0;
        }

        .top-info {
            // flex-grow: 1;
            width: 650px;
            // margin-left: 30px;
        }

        .works {
            display: flex;
            align-items: center;
            height: 44px;
            background: #1c1e26;
            border-radius: 8px;
            margin: 20px 0;
            .works1 {
                width: 24px;
                height: 24px;
                margin: 2px 10px 0 16px;
            }
            .works2 {
                font-size: 16px;
                font-weight: 400;
                color: #ffffff;
            }
        }
        .title {
            display: flex;
            justify-content: space-between;
            // margin-top: 10px;
            // padding-right: 100px;
            // position: relative;
            .title1 {
                font-size: 26px;
                font-weight: bold;
                color: #ffffff;
                .ellipsis();
            }
            .text {
                // position: absolute;
                // right: 24px;
                // top: -10px;
                // display: flex;
                .text1 {
                    text-align: center;
                    margin-left: 26px;
                    cursor: pointer;
                    display: inline-flex;
                    align-items: center;
                    flex-direction: column;
                    .img1 {
                        width: 24px;
                        height: 24px;
                        display: block;
                    }
                    .text2 {
                        font-size: @menuFont2;
                        font-weight: 400;
                        color: #949699;
                        line-height: 24px;
                        margin-top: 4px;
                    }
                }
            }
        }
        .name-list {
            display: flex;
            margin: 5px 0 10px;
        }
        .name {
            display: flex;
            align-items: center;
            height: 64px;
            line-height: 64px;
            cursor: pointer;
            margin-right: 80px;

            .name1 {
                width: 38px;
                height: 38px;
                border-radius: 50%;
                margin-right: 12px;
            }
            .name2 {
                font-size: 14px;
                font-weight: 400;
                color: #ffffff;
                line-height: 24px;
            }
            .name3 {
                font-size: 12px;
                font-weight: 400;
                color: #939599;
                line-height: 22px;
            }
            .name4 {
                width: 24px;
                height: 24px;
                margin-left: 16px;
            }
        }
        .time-icon {
            display: flex;
            .time-img {
                width: 24px;
                height: 24px;
                margin-right: 10px;
            }
            .time1 {
                font-size: @menuFont;
                // font-weight: bold;
                color: #ffffff;
                line-height: 24px;
            }
        }
        .time {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #1c1e26;
            border-radius: 8px 8px 0px 0px;
            height: 44px;
            padding: 0 16px;
            margin-top: 20px;

            .time2 {
                font-size: @menuFont2;
                font-weight: 400;
                color: #939599;
                line-height: 24px;
            }
            span {
                font-size: @menuFont2;
                font-weight: 400;
                color: @prim;
                line-height: 24px;
                margin-left: 6px;
            }
        }
        .price {
            padding: 0 23px 0 18px;
            background: #1f2230;
            border-radius: 0px 0px 8px 8px;
            margin-bottom: 20px;
            .top2 {
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid #2b2e3e;
            }
            .price1 {
                display: flex;
                padding: 23px 0 20px 0;
                &.num {
                    justify-content: space-between;
                    border-bottom: 0;
                    padding: 0;
                }
                .span {
                    font-size: 14px;
                    font-weight: bold;
                    color: #ffffff;
                    line-height: 22px;
                    margin-left: 16px;
                }
                .price2 {
                    font-size: 14px;
                    font-weight: 400;
                    color: #939599;
                    line-height: 24px;
                    margin-top: 13px;
                    &.num2 {
                        padding-top: 0;
                    }
                }
                .price3 {
                    width: 10px;
                    height: 11px;
                    margin: 18px 0 0 10px;
                }
                .price4 {
                    font-size: 40px;
                    font-family: OSP-DIN, OSP;
                    font-weight: normal;
                    color: @prim;
                    line-height: 36px;
                    margin-right: 5px;
                }
                span {
                    font-size: 16px;
                    font-weight: 400;
                    color: @prim;
                    line-height: 24px;
                }
            }
            .btn {
                height: 52px;
                line-height: 52px;
                text-align: center;
                background: linear-gradient(135deg, @prim 0%, @warn 100%);
                border-radius: 8px;
            }
        }
        .del {
            font-size: 14px;
            width: 210px;
            font-weight: 400;
            color: #939599;
            line-height: 24px;
            padding-left: 16px;
        }
        .dels {
            font-size: 14px;
            font-weight: 400;
            color: #939599;
            line-height: 24px;
            margin-left: -11px;
        }
        .init1 {
            display: flex;
            align-items: center;
            height: 64px;
            background: #1f2230;
            border-radius: 0px 0px 8px 8px;
            .Notset {
                font-size: 14px;
                width: 96px;
                font-weight: 400;
                color: #939599;
                line-height: 24px;
                // padding: 0 16px;
                padding-left: 16px;
            }
            .name-store {
                font-size: 14px;
                font-weight: 400;
                color: #ffffff;
                width: 96px;
                line-height: 24px;
                padding-left: 16px;
            }
            .bor {
                width: 1px;
                height: 16px;
                background: #2b2e3e;
                border-radius: 1px;
            }
            .box {
                position: absolute;
                margin-top: -12px;
                .img {
                    width: 24px;
                    height: 24px;
                    cursor: pointer;
                }
            }
            .iconBox {
                margin-left: -21px;
                display: flex;
                align-items: center;
                position: absolute;
                margin-top: -17px;
                .img2 {
                    width: 23px;
                    height: 24px;
                    padding-left: 36px;
                    cursor: pointer;
                    margin-top: 5px;
                }
            }
            .hoverTips {
                position: absolute;
                width: 188px;
                background: #fff;
                border-radius: 4px;
                z-index: 9999;
                top: 40px;
                left: 30px;
                .span {
                    font-size: 16px;
                    color: #000000;
                    line-height: 24px;
                    text-align: center;
                    padding-top: 12px;
                }
                p {
                    padding: 12px 16px;
                    font-size: 14px;
                    color: #939599;
                    line-height: 24px;
                }
            }
            .hoverTips::before {
                width: 0;
                height: 0;
                border-left: 7px solid transparent;
                border-right: 7px solid transparent;
                border-bottom: 10px solid #fff;
                content: '';
                display: block;
                z-index: 999;
                position: absolute;
                left: 12px; //给小三角定位，更具实际需求调整
                top: -10px; //给小三角定位，更具实际需求调整
            }
            .hoverTips1 {
                position: absolute;
                width: 188px;
                background: #fff;
                border-radius: 4px;
                top: 40px;
                left: -4px;
                p {
                    padding: 12px 16px;
                    font-size: 14px;
                    color: #939599;
                    line-height: 24px;
                }
            }
            .hoverTips1::before {
                width: 0;
                height: 0;
                border-left: 7px solid transparent;
                border-right: 7px solid transparent;
                border-bottom: 10px solid #fff;
                content: '';
                display: block;
                position: absolute;
                left: 12px; //给小三角定位，更具实际需求调整
                top: -10px; //给小三角定位，更具实际需求调整
            }
        }
        .card {
            height: 66px;
            border-radius: 0px 0px 8px 8px;
            background: #1f2230;
            padding: 0 30px;
            display: flex;
            align-items: center;
            // justify-content: space-between;
            .storeCard {
                display: flex;
                width: 100%;
                flex-wrap: wrap;
                .box1 {
                    width: 94px;
                    height: 46px;
                    text-align: center;
                    margin-right: 30px;
                    .line(@bg:#1f2230);
                    .box2 {
                        font-size: @menuFont1;
                        font-weight: 400;
                        color: #939599;
                        line-height: 17px;
                        margin-top: 5px;
                    }
                    .box3 {
                        font-size: @menuFont1;
                        font-weight: 400;
                        color: #ffffff;
                        line-height: 17px;
                    }
                }
            }

            &.init3 {
                height: 70px;
                padding-left: 16px;
                font-size: 20px;
                font-weight: 400;
                color: #939599;
                line-height: 30px;
            }
        }
    }
    .content {
        /deep/ .el-table {
            background: #1f2230 !important;
        }
        /deep/ .el-table__row {
            color: #ffffff;
        }
        /deep/ .cell {
            font-size: 12px;
        }
        /deep/ .el-table td,
        .el-table th.is-leaf {
            border-bottom: 1px solid #2b2e3e;
            background: #1f2230;
        }
        /deep/ .el-table th.is-leaf:last-child {
            border-bottom: 0 !important;
        }
        // last-child
        /deep/ .el-table th.is-leaf {
            border-bottom: 1px solid #2b2e3e;
        }
        /deep/ .el-collapse-item__content {
            padding-bottom: 1px !important;
        }
        /deep/ .el-collapse {
            border-radius: 8px;
        }
        .info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            background: #1c1e26;
            &.rad {
                border-radius: 8px 8px 0px 0px;
                margin-top: 30px;
            }
            .info1 {
                display: flex;
                align-items: center;
                height: 68px;
                .imgs {
                    width: 24px;
                    height: 24px;
                    margin-right: 10px;
                }
                .info2 {
                    font-size: 16px;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 24px;
                }
            }

            .info3 {
                width: 24px;
                height: 24px;
            }
        }
        .border {
            height: 1px;
            background: #494a4d;
            border-radius: 1px;
            margin: 0 16px;
        }
        .info4 {
            color: #fff;
            padding: 10px 16px;
        }
        .info-hash {
            font-size: @menuFont2;
            color: #939599;
            line-height: 24px;
            padding: 10px 16px;
            .hash-con {
                display: flex;
                align-items: center;
                .text1 {
                    min-width: 70px;
                }
                .hash-right {
                    display: flex;
                    align-items: center;
                    margin-left: 122px;
                    &.textName {
                        margin-left: 356px;
                    }
                    .hash-img {
                        width: 18px;
                        height: 18px;
                        margin-right: 3px;
                        cursor: pointer;
                    }
                    .hash-text {
                        font-size: @menuFont2;
                        color: #939599;
                        line-height: 24px;
                        width: 280px;
                        overflow: hidden;
                        white-space: nowrap !important;
                        text-overflow: ellipsis !important;
                    }
                }
            }
        }
        .info5 {
            padding: 10px 16px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #939599;
            line-height: 24px;
        }
    }
    .nft {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 50px 0 27px;
        .nft1 {
            display: flex;
            align-items: center;
            .nft2 {
                width: 38px;
                height: 38px;
                border-radius: 50%;
                margin-right: 12px;
            }
            .nft3 {
                font-size: 16px;
                font-weight: 400;
                color: #ffffff;
                line-height: 24px;
            }
            .nft5 {
                font-size: 13px;
                font-weight: 400;
                color: #939599;
                line-height: 18px;
                margin-top: 2px;
            }
            .nft6 {
                width: 24px;
                height: 24px;
            }
        }
        .nft4 {
            font-size: 18px;
            font-weight: bold;
            color: #ffffff;
            line-height: 30px;
        }
    }
}
.mySwiper {
    width: 520px;
    display: inline-block;
    .line();
    /deep/.el-image {
        display: block;
        img {
            display: block;
        }
    }
}
.buy {
    // width: 100%;
    width: 280px;
    height: 48px;
    display: block;
    font-size: 16px;
    background: linear-gradient(135deg, @prim 0%, @warn 100%);
    border-radius: 8px;
    border-width: 0;
    color: #000;
    font-weight: bold;
    &:hover {
        background: linear-gradient(135deg, darken(@prim, 10%), darken(@warn, 10%));
    }

    &.used {
        background: linear-gradient(135deg, darken(@prim, 50%), darken(@warn, 50%));
        color: #939599;
    }
}

/deep/.content {
    margin-top: 20px;
    &.topcontent {
        margin-top: 0;
    }
    .el-collapse-item__wrap {
        border-bottom-width: 0;
        border-radius: 0 0 8px 8px !important;
    }
    .el-collapse {
        border-width: 0;
        // border-radius: 8px !important;
    }

    .el-collapse-item__header {
        background-color: #1c1e26;
        border-radius: 8px 8px 0 0 !important;
        padding: 0 8px 0 16px;
        height: 44px;
        // font-weight: bold;
        border-bottom-width: 0;
        img {
            width: 24px;
            height: 24px;
            margin-right: 10px;
        }
        font-size: 16px;
        color: #ffffff;
        line-height: 24px;
    }
    .span-detail {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #939599;
        line-height: 22px;
    }
    .el-collapse-item__content {
        background-color: #1f2230;
    }
    .el-table {
        background-color: transparent;
        padding: 0 16px;
        tr {
            background-color: transparent;
        }
        th {
            background-color: transparent;
        }
        &::before {
            content: none;
        }
    }
    p {
        max-height: 130px;
        overflow-y: auto;
    }
    .el-collapse-item {
        &:last-child {
            .el-collapse-item__wrap {
                border-width: 0;
            }
        }
    }
}
.list {
    margin: -16px;

    .collect {
        margin: 16px;
    }
}

/deep/.boxs {
    .el-image {
        width: 100%;
        height: 310px;
        border-radius: 12px;
    }
}
</style>
