sooka_consult_uniapp/pages/specialService/financialInfrastructure/details.vue

<template>
    <view>
        <!-- 金融基建详情 -->
        <view class="container">
            <h1 class="title">{{fromData.titleName}}</h1>
            <view class="wenzhangLy">
                <!-- 头像昵称 -->
                <view class="txTime">
                    <image :src="(detailInfo.headImg!=null)?loadImgSrcLocalhost(detailInfo.headImg):'https://tse4-mm.cn.bing.net/th/id/OIP-C.cYyiJYfTo1SY1cj26FQpAQHaHa?rs=1&pid=ImgDetMain'" style="border-radius: 50px;"></image>
                    <view class="time">
                        <p>{{detailInfo.nickName?detailInfo.nickName:'网友'}}</p>
                        <span>{{ detailInfo.createTime }}</span>
                    </view>
                </view>
            </view>
            <view class="wenzhangCont article">
                <view v-html="fromData.textDetails"></view>
                <view v-for="(item, index) in fromData.pictureList" :key="index">
                    <image :src="loadImgSrcLocalhost(item)"></image>
                </view>
            </view>
            <view class="fengexian"></view>
        </view>
    </view>
</template>

<script>
    import { getDetails } from '@/api/specialService/financialInfrastructure.js';
    export default {
        data() {
            return {
                parentId: "",
                fromData: {},
                content: "",
                initInfo: {
                    userId: null,
                    scoreNum: 0,
                    wechatName: "微信用户",
                    name: null,
                    headImg: null,
                },
            };
        },
        methods: {
            // 获取数据
            getDetails() {
                getDetails(this.parentId).then(res => {
                    if (res.code == 200) {
                        this.fromData = res.data
                    }
                })
            },
            // getUserInfoByUserId(userId) {
            // 	getUserInfo(userId).then(res => {
            // 		this.initInfo = res.data;
            // 	})
            // },
        }
        /**
         * 生命周期函数--监听页面加载
         */
        ,
        onLoad(options) {
            this.parentId = options.id
            this.getDetails()
        },
        /**
         * 生命周期函数--监听页面初次渲染完成
         */
        onReady() {
            this.userId = getApp().globalData.userId
            // this.getUserInfoByUserId(this.userId)
        },
        /**
         * 生命周期函数--监听页面显示
         */
        onShow() {},
        /**
         * 生命周期函数--监听页面隐藏
         */
        onHide() {},
        /**
         * 生命周期函数--监听页面卸载
         */
        onUnload() {},
        /**
         * 页面相关事件处理函数--监听用户下拉动作
         */
        onPullDownRefresh() {},
        /**
         * 页面上拉触底事件的处理函数
         */
        onReachBottom() {},
        /**
         * 用户点击右上角分享
         */
        onShareAppMessage() {},
    };
</script>
<style lang="scss">
    @import './details.css';

    .collect {
        .icon-shoucang:before {
            color: red;
        }
    }

    .not-collect {}

    .effectBix {
        width: 56px;
        height: 56px;
        border-radius: 50px;
        font-family: 'Bebas Neue', cursive;
        background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
        border: 0;
        color: #fff;
        text-align: center;
        line-height: 56px;
        outline: transparent;
        position: absolute;
        transform: rotate(-30deg);
        right: 3%;
        top: -5%;
    }

    .effectBox,
    .effectBox::after {
        width: 56px;
        height: 56px;
        border-radius: 50px;
        font-size: 16px;
        font-family: 'Bebas Neue', cursive;
        background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
        border: 0;
        color: #fff;
        opacity: 1;
        letter-spacing: 3px;
        text-align: center;
        line-height: 56px;
        outline: transparent;
        position: relative;
        left: 78%;
        top: 113%;
        transform: rotate(-30deg);
        z-index: 1;
    }

    .effectBox::after {
        --slice-0: inset(50% 50% 50% 50%);
        --slice-1: inset(80% -6px 0 0);
        --slice-2: inset(50% -6px 30% 0);
        --slice-3: inset(10% -6px 85% 0);
        --slice-4: inset(40% -6px 43% 0);
        --slice-5: inset(80% -6px 5% 0);

        content: 'AVAILABLE NOW';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);
        text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
        clip-path: var(--slice-0);
    }

    .effectBox:hover::after {
        animation: 1s glitch;
        animation-timing-function: steps(2, end);
    }

    @keyframes glitch {
        0% {
            clip-path: var(--slice-1);
            transform: translate(-20px, -10px);
        }

        10% {
            clip-path: var(--slice-3);
            transform: translate(10px, 10px);
        }

        20% {
            clip-path: var(--slice-1);
            transform: translate(-10px, 10px);
        }

        30% {
            clip-path: var(--slice-3);
            transform: translate(0px, 5px);
        }

        40% {
            clip-path: var(--slice-2);
            transform: translate(-5px, 0px);
        }

        50% {
            clip-path: var(--slice-3);
            transform: translate(5px, 0px);
        }

        60% {
            clip-path: var(--slice-4);
            transform: translate(5px, 10px);
        }

        70% {
            clip-path: var(--slice-2);
            transform: translate(-10px, 10px);
        }

        80% {
            clip-path: var(--slice-5);
            transform: translate(20px, -10px);
        }

        90% {
            clip-path: var(--slice-1);
            transform: translate(-10px, 0px);
        }

        100% {
            clip-path: var(--slice-1);
            transform: translate(0);
        }
    }
</style>