<template>
    <div class="detail">
        <swiper pagination class="mySwiper" v-if="banners.length > 0">
            <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]))"
                    controls="controls"
                >
                    您的浏览器不支持 video 标签。
                </video>
                <van-image
                    v-else
                    @click="preview(index, changeImgs(banners))"
                    :src="item.url"
                    width="100vw"
                    height="100vw"
                    fit="scale-down"
                />
            </swiper-slide>
        </swiper>

        <div class="info">
            <div class="price-line">
                <template v-if="info.consignment">
                    <div class="price"><i class="font_family icon-icon_jiage"></i>{{ info.sellPrice || 0 }}</div>
                    <div class="sub" v-if="info.royalties">
                        含 <span>{{ info.royalties }}%</span> 版税
                    </div>
                </template>

                <div class="status" v-else-if="info.status == 'NORMAL'">
                    {{ info.publicShow ? '仅展示' : '未展示' }}
                </div>
                <div class="status" v-else>
                    {{ getLabelName(info.status, assetStatusOptions) }}
                </div>
            </div>
            <div class="title">{{ info.name }}</div>
            <div class="info-bottom">
                <span class="text1" v-if="info.number"> 编号 {{ info.number }} </span>
                <!-- <van-button
          type="primary"
          plain
          size="mini"
          >选择其他编号</van-button
        >
        <like-button :isLike="info.liked" @click="likeProduct">
          {{ info.likes }}
        </like-button> -->
            </div>
        </div>

        <driver />
        <div class="user">
            <van-cell class="creator">
                <template #icon>
                    <van-image
                        width="40"
                        height="40"
                        class="user-img"
                        :src="info.minterAvatar"
                        fit="cover"
                        radius="100"
                    />
                </template>
                <template #title>
                    <div class="text1 van-ellipsis">{{ info.minter }}</div>
                    <div class="text2">铸造者</div>
                </template>
            </van-cell>
            <van-cell class="creator">
                <template #icon>
                    <van-image
                        width="40"
                        height="40"
                        class="user-img"
                        :src="userInfo.avatar || require('../../assets/svgs/img_default_photo.svg')"
                        fit="cover"
                        radius="100"
                    />
                </template>
                <template #title>
                    <div class="text1 van-ellipsis">{{ userInfo.nickname }}</div>
                    <div class="text2">持有者</div>
                </template>
            </van-cell>
        </div>
        <driver />

        <div class="goods">
            <div class="top">
                <div class="top1">
                    <div class="text1">类型</div>
                    <div v-if="info.category" class="text2">{{ info.category }}</div>
                    <div v-else class="text5">铸造者未设置</div>
                </div>
                <div class="top1" @click="Whisper">
                    <div class="text1">悄悄话</div>
                    <div class="text2 text3" v-if="init2" :class="{ prim: init2.opened }">
                        <img v-if="!init2.opened" class="img" :src="init2.icon[0]" alt="" />
                        <img v-if="init2.opened" class="img" :src="init2.icon[2]" alt="" />
                        <div class="text4" :class="{ prim: init2.opened }">
                            {{ init2.opened ? '已打开' : '未打开' }}
                        </div>
                    </div>
                    <div class="text5" v-else>铸造者未设置</div>
                </div>
            </div>
            <div class="page-title">持有特权<span>（灰色表示已使用）</span></div>
            <div class="prive" v-if="privileges.length > 0">
                <div v-for="(item, index) in init" :key="index">
                    <div class="prive1" :class="{ prim: item.opened }">
                        <img v-if="!item.opened" class="img" :src="item.icon[0]" alt="" />
                        <div v-if="item.icon[2]">
                            <img v-if="item.opened" class="img" :src="item.icon[2]" alt="" />
                        </div>
                        <!-- <img class="img" v-else :src="item.icon[0]" alt="" /> -->

                        <div v-if="item.once" @click="privilegeFn2(item)" class="prive2">
                            {{ item.name }}
                        </div>
                        <div v-else @click="privilegeFn(item)" class="prive2">
                            {{ item.name }}
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="privileges.length === 0" class="conName">铸造者未设置</div>
            <div class="goods">
                <div class="goods-info">
                    <div class="page-title">商品特性</div>
                    <div class="specific-list" v-if="properties.length > 0">
                        <div class="specific-item" v-for="(item, index) in properties" :key="index">
                            <div class="text1">{{ item.name }}</div>
                            <div class="text2">{{ item.value }}</div>
                        </div>
                    </div>
                    <div v-else class="textName">铸造者未设置</div>
                </div>
                <div class="goods-info">
                    <div class="page-title">链上信息</div>
                    <div class="page-text" v-if="info.txHash || info.blockNumber || info.tokenId">
                        Hash地址：{{ info.txHash }}<br />
                        区块高度： {{ info.blockNumber }}<br />
                        令牌ID： {{ info.tokenId }}
                    </div>
                    <div v-else class="textName">铸造者未设置</div>
                </div>
                <div class="goods-info">
                    <div class="page-title">作品描述</div>
                    <div v-if="info.detail" class="page-text" v-html="info.detail"></div>
                    <div v-else class="textName">铸造者未设置</div>
                </div>
            </div>

            <!-- <template v-if="info.detail">
                <div class="page-title">作品描述</div>
                <div class="page-text" v-html="info.detail"></div>
            </template> -->
        </div>

        <!-- <div class="btn van-safe-area-bottom" ref="btn" v-if="isBuy">
            <div class="btns">
                <van-button type="primary" block round @click="buy">立即购买</van-button>
            </div>
        </div> -->
        <div class="btn van-safe-area-bottom" ref="btn" v-if="info.status === 'NORMAL'">
            <div class="btns1">
                <div @click="Add">
                    <img
                        class="img"
                        src="https://9space-2021.oss-cn-shenzhen.aliyuncs.com/image/2021-11-09-15-17-04hsdZwERv.png"
                        alt=""
                    />
                    <div class="text2">赠送</div>
                </div>
                <van-button class="btn1" type="primary" block round @click="Exhibition">{{
                    info.publicShow ? '取消展示' : '公开展示'
                }}</van-button>
                <van-button type="primary" block round @click="Consignment">{{
                    info.consignment ? '取消寄售' : '寄售上架'
                }}</van-button>
            </div>
        </div>
        <!-- <div > -->
        <div class="goods">
            <div style="padding-left: 16px" class="page-title">交易历史</div>
            <div class="content" v-for="item in list" :key="item.id">
                <!-- <img class="img" :src="list.avatar" alt="" /> -->
                <div class="init">
                    <div style="width: 100%">
                        <div class="text1">{{ item.fromUser || '保密' }}</div>
                        <div class="text2">
                            <div class="text3">{{ item.operation }}{{ item.price }}</div>
                            <div class="text4">{{ item.createdAt }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- </div> -->

        <driver />
        <!-- 其他三个 -->
        <van-popup v-model:show="show">
            <div class="title2">
                <div class="top">
                    <img class="img" v-if="list2.icon[1]" :src="list2.icon[1]" alt="" />
                    <img class="img" v-else :src="list2.icon[0]" alt="" />
                    <div class="title3">{{ list2.name }}</div>
                </div>
                <img
                    @click="allFn"
                    class="icon"
                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-11-13-13-52-01rJiHiwBy.png"
                    alt=""
                />
            </div>
            <div class="border"></div>
            <div class="name">{{ list2.description }}</div>
            <div class="name1" v-if="list2.type != 'code' && list2.name != '版权权利'">
                <img class="qrcodeImg" v-if="list2.type == 'qrcode'" :src="list2.detail" alt="" />
                <div class="qrcode1" v-if="list2.type == 'qrcode'">扫描二维码进行票务核销</div>
                说明：<span>{{ list2.remark || '暂无' }}</span>
            </div>
            <div v-if="list2.type == 'code'">
                <div class="copy">
                    <div class="id">
                        {{ list2.id }}
                    </div>
                    <img class="copyImg" @click="copy" src="../../assets/svgs/copy_icon.svg" alt="" />
                </div>
                <span class="span">说明：</span> <span>{{ list2.remark || '暂无' }}</span>
                <div class="border"></div>
                <div class="code">每次交易都会产生校验码</div>
            </div>
            <div v-if="list2.openTime">
                <div v-if="list2.type == 'qrcode'" class="timename">
                    <span class="time">截止时间：</span>{{ list2.openTime }}
                </div>
                <div v-else class="timename"><span class="time">打开时间：</span>{{ list2.openTime }}</div>
            </div>
        </van-popup>
        <!-- 悄悄话 -->
        <van-popup v-model:show="show3">
            <div class="title2">
                <div class="top">
                    <img class="img" :src="init2.icon[1]" alt="" />
                    <div class="title3">{{ init2.name }}</div>
                </div>
                <img
                    @click="allFn2"
                    class="icon"
                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-11-13-13-52-01rJiHiwBy.png"
                    alt=""
                />
            </div>
            <div class="border"></div>
            <div class="name">{{ init2.description }}</div>
            <div class="name1">
                说明：<span>{{ init2.remark || '暂无' }}</span>
            </div>
            <div v-if="init2.openTime" class="timename"><span class="time">开启时间：</span>{{ init2.openTime }}</div>
        </van-popup>
        <!-- 悄悄话 -->
        <div class="whisper">
            <van-popup v-model:show="show2">
                <div class="con">
                    <div class="Whisper">提示</div>
                    <img
                        @click="show2 = false"
                        class="icon"
                        src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-11-12-16-13-37tvHvqsIN.png"
                        alt=""
                    />
                </div>
                <img
                    @click="openedFn"
                    class="imgBox"
                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-11-12-16-13-07DtWLMcPy.png"
                    alt=""
                />
                <div class="Whisper1">点击图标打开悄悄话,(隐藏内容，只能开启一次)</div>
            </van-popup>
        </div>

        <post
            :info="info"
            :noButton="info.status !== 'NORMAL' || (!info.publicShow && !info.consignment)"
            pageUrl="assetDetail"
        />
    </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';

import 'swiper/swiper.min.css';
import 'swiper/swiper-bundle.min.css';

import SwiperCore, { Pagination } from 'swiper';
import Post from '../../components/Post.vue';
import asset from '../../mixins/asset';
import product from '../../mixins/product';
import { mapState } from 'vuex';
import { ImagePreview } from 'vant';
import Vue from 'vue';
import { Dialog } from 'vant';
// install Swiper modules
SwiperCore.use([Pagination]);

export default {
    components: {
        Swiper,
        SwiperSlide,
        Post
    },

    mixins: [asset, product],
    data() {
        return {
            activeName: '1',
            info: {},
            liked: false,
            show2: false,
            show3: false,
            btn: null,
            list: [],
            show: false,
            init: [],
            init2: null,
            typeOptions: [
                { label: '文本', value: 'text' },
                { label: '二维码', value: 'qrcode' },
                { label: '验证码', value: 'code' },
                { label: '铸造', value: 'exchange' }
            ]
        };
    },
    computed: {
        ...mapState(['userInfo']),
        banners() {
            return this.info.pic || [];
        },
        properties() {
            return this.info.properties || [];
        },
        privileges() {
            return this.info.privileges || [];
        },
        isBuy() {
            return this.info.stock && this.info.onShelf;
        }
    },
    mounted() {
        this.getProduct();
        setTimeout(() => {
            this.record();
        }, 1000);
    },
    methods: {
        allFn() {
            this.show = false;
            this.getProduct();
        },
        allFn2() {
            this.show3 = false;
            this.getProduct();
        },
        copy() {
            this.$copyText(this.list2.id).then(
                e => {
                    this.$toast.success('复制成功');
                    console.log(e);
                },
                e => {
                    this.$toast('复制失败');
                    console.log(e);
                }
            );
        },
        privilegeFn(init) {
            this.list2 = init;
            this.show = true;
            this.$http
                .post('/asset/usePrivilege', {
                    assetId: this.info.id,
                    privilegeId: init.id
                })
                .then(res => {
                    console.log(res);
                });
        },
        privilegeFn2(init) {
            if (init.once && init.opened == false) {
                this.list2 = init;
                this.show = true;
                this.$http
                    .post('/asset/usePrivilege', {
                        assetId: this.info.id,
                        privilegeId: init.id
                    })
                    .then(res => {
                        console.log(res);
                    });
            }
        },
        openedFn() {
            this.show2 = false;
            this.show3 = true;
            if (!this.init2.once) {
                // this.show2 = false;
                this.$http
                    .post('/asset/usePrivilege', {
                        assetId: this.info.id,
                        privilegeId: this.init2.id
                    })
                    .then(res => {
                        console.log(res);
                    });
            }
        },
        Whisper() {
            if (!this.init2.once) {
                this.show2 = true;
                this.$http
                    .post('/asset/usePrivilege', {
                        assetId: this.info.id,
                        privilegeId: this.init2.id
                    })
                    .then(res => {
                        console.log(res);
                    });
            }
        },
        record() {
            this.$http
                .get('/asset/tokenHistory', {
                    tokenId: this.info.tokenId,
                    assetId: this.info.id
                })
                .then(res => {
                    this.list = res;
                });
        },
        Consignment() {
            if (this.userInfo.authStatus === 'SUCCESS') {
                if (!this.info.consignment) {
                    Dialog.confirm({
                        title: '寄售上架',
                        message: '确定寄售上架吗？'
                    }).then(() => {
                        this.$router.push('/Consignment?id=' + this.info.id);
                    });
                } else {
                    Dialog.confirm({
                        title: '取消寄售',
                        message: '确定取消寄售吗？'
                    })
                        .then(() => {
                            return this.$http.post(`/asset/cancelConsignment?id=${this.info.id}`);
                        })
                        .then(res => {
                            this.$toast.success('取消寄售');
                            setTimeout(() => {
                                this.getProduct();
                            }, 1000);
                        });
                }
            } else if (this.userInfo.authStatus === 'PENDING' || this.userInfo.authStatus === 'FAIL') {
                Dialog.confirm({
                    title: '认证信息',
                    message: '用户认证中,是否查看认证'
                }).then(() => {
                    this.$router.push('/waiting');
                });
            } else if (this.userInfo.authStatus === 'NOT_AUTH') {
                Dialog.confirm({
                    title: '认证信息',
                    message: '用户未认证,是否立即认证'
                }).then(() => {
                    this.$router.push('/Authentication');
                });
            }
        },
        Add() {
            if (this.userInfo.authStatus === 'SUCCESS') {
                this.$router.push('/giveSearch?id=' + this.info.id);
            } else if (this.userInfo.authStatus === 'PENDING' || this.userInfo.authStatus === 'FAIL') {
                Dialog.confirm({
                    title: '认证信息',
                    message: '用户认证中,是否查看认证'
                }).then(() => {
                    this.$router.push('/waiting');
                });
            } else if (this.userInfo.authStatus === 'NOT_AUTH') {
                Dialog.confirm({
                    title: '认证信息',
                    message: '用户未认证,是否立即认证'
                }).then(() => {
                    this.$router.push('/Authentication');
                });
            }
        },
        Exhibition() {
            if (!this.info.publicShow) {
                Dialog.confirm({
                    title: '公开展示',
                    message: '藏品将公开展示，无报价'
                }).then(() => {
                    return this.$http
                        .post(`/asset/publicShow?id=${this.info.id}`)
                        .then(res => {
                            this.$toast.success('展示成功');
                            setTimeout(() => {
                                this.getProduct();
                            }, 1000);
                        })
                        .catch(e => {
                            this.$toast.success(e.error);
                        });
                });
            } else {
                Dialog.confirm({
                    title: '取消展示',
                    message: '藏品将取消展示，无报价'
                })
                    .then(() => {
                        return this.$http.post(`/asset/cancelPublic?id=${this.info.id}`);
                    })
                    .then(res => {
                        this.$toast.success('取消成功');
                        setTimeout(() => {
                            this.getProduct();
                        }, 1000);
                    });
            }
        },

        preview(index = 0, list = []) {
            ImagePreview({
                images: [...list],
                startPosition: index
            });
        },
        getProduct() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.$http.get('/asset/get/' + this.$route.query.id).then(res => {
                this.info = res;
                this.tokenId = this.info.tokenId;
                if (res.privileges) {
                    this.init2 = res.privileges.find(item => {
                        return item.name === '悄悄话';
                    });
                }
                if (res.privileges) {
                    this.init = res.privileges.filter(item => {
                        return item.name !== '悄悄话';
                    });
                }

                this.$nextTick(() => {
                    if (this.isBuy) {
                        this.btn = this.$refs.btn;
                    }
                });

                this.$toast.clear();
            });
        },
        likeProduct() {
            if (!this.info.liked) {
                this.$http.get(`/collection/${this.info.id}/like`).then(() => {
                    this.getProduct();
                    this.$toast.success('收藏成功');
                });
            } else {
                this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
                    this.getProduct();
                    this.$toast.success('取消收藏');
                });
            }
        },
        buy() {
            this.checkLogin().then(() => {
                this.$router.push({
                    path: '/submit',
                    query: {
                        id: this.$route.query.id
                    }
                });
            });
        }
    }
};
</script>

<style lang="less" scoped>
.detail {
    padding-bottom: 100px;
}
.conName {
    font-size: @font2;
    font-weight: 400;
    color: #939599;
    line-height: 24px;
    padding: 10px 0 16px 16px;
}
.content {
    padding: 0px 16px;
    display: flex;
    align-items: center;
    width: 343px;
    height: 68px;
    border-radius: 12px;
    .img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .init {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        .text1 {
            font-size: 14px;
            font-weight: bold;
            color: #ffffff;
            line-height: 24px;
        }
        .text2 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            .text3 {
                font-size: 14px;
                font-weight: 400;
                color: @text3;
                line-height: 24px;
            }
            .text4 {
                font-size: 14px;
                font-weight: 400;
                color: @text3;
                line-height: 24px;
            }
        }
    }
}
.info {
    // height: 164px;
    background-color: @bg;
    border-radius: 20px 20px 0 0;
    transform: translateY(-16px);
    position: relative;
    z-index: 2;
    padding: 16px 16px 0;
    box-sizing: border-box;

    .price {
        font-size: 36px;
        font-family: OSP;
        color: #fdfb60;
        line-height: 36px;
        transform: translateY(3px);

        .font_family {
            font-size: 10px;
            line-height: 24px;
            vertical-align: middle;
        }
    }

    .price-line {
        display: flex;
        align-items: flex-end;
        .sub {
            flex-grow: 1;
            margin-left: 5px;
            font-size: 14px;
            color: #949699;
            line-height: 16px;
            span {
                color: #fff;
            }
        }

        .text {
            font-size: 14px;
            color: @text3;
            line-height: 16px;
            span {
                margin-left: 10px;
            }
        }
    }

    .title {
        font-size: 20px;
        font-weight: bold;
        color: #ffffff;
        line-height: 28px;
        margin-top: 12px;
    }

    .info-bottom {
        display: flex;
        position: relative;
        margin-top: 4px;
        height: 24px;
        .text1 {
            font-size: 14px;
            color: #949699;
            line-height: 24px;
        }
        .van-button {
            font-size: 13px;
            color: #fdfb60;
            line-height: 24px;
            background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            border-width: 0px;
            margin-left: 10px;
        }

        .like {
            position: absolute;
            right: 0;
        }
    }
}

/deep/.creator {
    align-items: center;
    padding: 24px 16px 24px;
    .van-cell__title {
        margin-left: 12px;
        .text1 {
            font-size: 16px;
            line-height: 24px;
        }
        .text2 {
            font-size: 12px;
            color: @text3;
            line-height: 22px;
        }
    }

    .van-cell__value {
        font-size: 13px;
    }
}
.whisper {
    /deep/ .van-popup {
        width: 260px;
        background: rgb(209, 206, 18);
        border-radius: 10px;
        .con {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px 0;
            .Whisper {
                font-size: 16px;
                font-weight: 400;
                color: #000000;
                line-height: 24px;
            }
            .icon {
                width: 24px;
                height: 24px;
            }
        }
        .imgBox {
            width: 80px;
            height: 80px;
            text-align: center;
            margin: 30px 90px 22px;
        }
        .Whisper1 {
            font-size: 12px;
            font-weight: 400;
            color: #303133;
            line-height: 18px;
            padding-bottom: 36px;
            margin: 0 64px;
        }
    }
}

/deep/ .mySwiper {
    width: 100vw;
    height: 100vw;
    z-index: 1;

    .swiper-pagination {
        bottom: 22px;
    }

    .swiper-pagination-bullet {
        width: 6px;
        height: 2px;
        border-radius: 1px;
        background: #d7d7d7;
    }

    .swiper-pagination-bullet-active {
        background: @prim;
    }

    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
    }
}
/deep/ .van-popup {
    width: 228px;
    background: #ffffff;
    padding: 0 16px;
    border-radius: 8px;
    .title2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 12px;
        .top {
            display: flex;
            align-items: center;
            .img {
                width: 18px;
                height: 18px;
                color: #ff4f50;
                margin-right: 3px;
            }
            .title3 {
                font-size: 16px;
                font-weight: 400;
                color: #ff4f50;
                line-height: 24px;
            }
        }
        .icon {
            width: 18px;
            height: 18px;
        }
    }
    .border {
        height: 1px;
        background: #f2f3f5;
        border-radius: 1px;
        margin: 12px 0 6px;
    }
    .name1 {
        width: 208px;
        padding: 10px;
        background: #f5f7fa;
        border-radius: 4px;
        color: @text3;
        margin-bottom: 11px;
        .qrcodeImg {
            width: 93px;
            height: 93px;
            border-radius: 11px;
            margin-left: 60px;
        }
        .qrcode1 {
            font-size: 12px;
            font-weight: 400;
            color: @text3;
            line-height: 18px;
            margin: 12px 0px 12px 44px;
        }
    }
    .timename {
        color: #ff4f50;
        font-size: 12px;
        padding-bottom: 12px;
    }
    .time {
        color: @text3;
        font-size: 12px;
    }
    .copy {
        width: 220px;
        height: 42px;
        background: #f5f7fa;
        border-radius: 24px;
        margin-bottom: 16px;
        justify-content: center;
        display: flex;
        align-items: center;
        .id {
            font-size: 16px;
            color: #303133;
        }
        .copyImg {
            width: 18px;
            height: 18px;
            margin-left: 6px;
            cursor: pointer;
        }
    }
    span {
        color: #303133;
    }
    .span {
        color: @text3;
    }
    .code {
        font-size: 12px;
        font-weight: 400;
        color: @text3;
        line-height: 18px;
        padding-bottom: 12px;
    }
    .name {
        font-size: 12px;
        font-weight: 400;
        color: @text3;
        line-height: 18px;
        margin-bottom: 6px;
    }
}
.textName {
    font-size: @font2;
    font-weight: 400;
    color: #939599;
    line-height: 24px;
    // padding-top: 10px;
    padding: 10px 0 0 16px;
}
.goods {
    // padding: 20px 16px;

    .page-title {
        font-size: @font2;
        font-weight: bold;
        color: #ffffff;
        line-height: 24px;
        margin-top: 14px;
        &:not(:first-child) {
            padding-top: 16px;
        }
    }

    span {
        font-size: 14px;
        font-weight: 400;
        color: @text3;
        line-height: 24px;
    }
    .top {
        padding: 20px 16px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .top1 {
            display: flex;
            align-items: center;
            .text1 {
                font-size: @font2;
                font-weight: bold;
                color: #ffffff;
                line-height: 28px;
            }
            .text2 {
                width: 94px;
                height: 32px;
                border: 1px solid yellow;
                border-radius: 4px;
                margin-left: 14px;
                line-height: 32px;
                text-align: center;
                color: #ffffff;
                &.text3 {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .img {
                    width: 18px;
                    height: 18px;
                    margin-right: 4px;
                }
                &.prim {
                    color: @text3;
                    border: 1px solid #303133;
                    background: #202122;
                }
            }
            .text4 {
                color: #fdfb60;
                &.prim {
                    color: @text3;
                }
            }
            .text5 {
                font-size: @font2;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #939599;
                line-height: 24px;
                padding-left: 10px;
            }
        }
    }
    .prive {
        display: flex;
        align-items: center;
        width: 100%;
        flex-wrap: wrap;
        .prive1 {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 16px 15px 0;
            width: 94px;
            height: 32px;
            color: #000;
            background: linear-gradient(48deg, #fdfb60 0%, #ff8f3e 100%);
            border-radius: 4px;
            &.prim {
                background: #202122;
                color: @text3;
            }
        }
        .prive2 {
            text-align: center;
        }
        .img {
            text-align: center;
            width: 18px;
            height: 18px;
            margin-right: 4px;
        }
    }
}

.page-title {
    padding: 0 16px;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    line-height: 28px;
}
.specific-list {
    padding: 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.specific-item {
    width: 94px;
    height: 62px;
    border-radius: 4px;
    border: solid 0px transparent;
    padding: 1px;
    background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, #fdfb60, #ff8f3e);
    background-origin: border-box;
    box-sizing: border-box;
    background-clip: content-box, border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0 16px;
    .text1 {
        font-size: 14px;
        color: @text3;
        line-height: 24px;
    }

    .text2 {
        font-size: 14px;
        color: #ffffff;
        line-height: 24px;
    }
}

.page-text {
    font-size: @font2;
    color: #ffffff;
    line-height: 28px;
    margin-top: 10px;
    word-break: break-all;
    padding: 0 16px 14px 16px;
    // p {
    //     font-size: @font2;
    //     color: #ffffff;
    //     line-height: 28px;
    //     // margin-top: 10px;
    //     word-break: break-all;
    // }
}

.btn {
    position: fixed;
    z-index: 20;
    bottom: 0;
    left: 0;
    right: 0;
    background: #202122ee;
    .btns {
        padding: 6px 42px;
    }
    .btns1 {
        display: flex;
        padding: 6px 16px 6px 26px;
        .btn1 {
            margin: 0 16px 0 25px;
        }
        .img {
            width: 24px;
            height: 24px;
        }
        .text2 {
            width: 24px;
            height: 17px;
            font-size: 12px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: @text3;
            line-height: 17px;
            background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }
    .van-button {
        background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
        color: #333230;
        font-size: 16px;
        border-width: 0px;
    }
}
.status {
    font-size: 22px;
    font-weight: bold;
    color: #fdfb60;
    line-height: 24px;
}

.user {
    display: flex;
    .creator {
        width: 50%;
    }

    .user-img {
        flex-shrink: 0;
    }

    /deep/.van-cell__title {
        margin-left: 10px;
        overflow: hidden;
    }
}
</style>
