sooka_consult_uniapp/pages/specialService/loveAtVillage/details.vue

<template>
    <view>
        <!-- 乡村婚恋详情 -->
        <view class="container">
            <h1 class="title">{{fromData.titleName}}</h1>
          <!-- 头像昵称 -->
<!--          <view class="wenzhangLy">-->
<!--            &lt;!&ndash; 头像昵称 &ndash;&gt;-->
<!--            <view class="txTime">-->
<!--              <img-->
<!--                  class="uni-header-image"-->
<!--                  :src="initInfo.headImg == null || initInfo.headImg == '' ? initImgPath : loadImgSrcLocalhost(initInfo.headImg)"-->
<!--              />-->
<!--              <view class="time">-->
<!--                <p>{{initInfo.name == null || initInfo.name == '' ? initInfo.wechatName : initInfo.name}}</p>-->
<!--                <span>{{ fromData.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/loveAtVillage.js';
    import {
      getUserInfo
    } from '@/api/me/me.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>