sooka_consult_uniapp/pages/mattersDetail/mattersDetail.vue

<template>
    <view>
        <!-- pages/me.wxml -->
        <view class="container">
            <h1 class="title">{{ detailInfo.titleName }}</h1>
            <view class="wenzhangLy">
                <!-- 头像昵称 -->
                <view class="txTime">
                    <image :src="loadImgSrcLocalhost(detailInfo.headImg!=null?detailInfo.headImg:'/profile/upload/2024/03/05/abf969632ee94bd5a429c8c2dbb2f6b4 (1)_20240305092823A002.png')" style="border-radius: 50px;"></image>
                    <view class="time">
                        <p>{{detailInfo.department?detailInfo.department:'网友'}}</p>
                        <span>{{ detailInfo.createTime }}</span>
                    </view>
                </view>
                <!-- 积分 -->
<!--                <span class="jf">100</span> -->
            </view>
            <view class="wenzhangCont article">
                <span v-html="detailInfo.content">
                </span>
			
                <view >
                    <image :src="loadImgSrcLocalhost(detailInfo.picture)"  style="background-size: 100% 100%;"></image>
                </view>
            </view>
			
			
        </view>
	</view>
</template>

<script>
import { 
	getMattersDetail 
} from '@/api/me/matters/matters.js'
export default {
    data() {
        return {
			anwserVal:'',
			anwserList:[
				{
					deptName:'国家乡村振兴局',
					updateTime:'2023-2-27 16:04',
					desc:'用好政策效果评估成果，进一步优化巩固拓展脱贫攻坚成果同乡村振兴有效衔接政策供给，为推动工作提质增效提供有力支撑保障。',					
				}
			],
			isCollection:false,
			isAdopt:false,
			adoptTopSize:'115',
			adoptIndex:null,
			detailInfo:{},
        };
    },
	methods: {
		// 评论回答
		answerFunc(){
			this.anwserList.push({
				deptName:'国家烟草局',
				updateTime:new Date().getFullYear() + "-" + new Date().getMonth() + "-" + new Date().getDay() + " " + (new Date().getHours() < 10 ? "0" + new Date().getHours() : new Date().getHours()) + ':' + (new Date().getMinutes() < 10 ? "0" + new Date().getMinutes() : new Date().getMinutes()),
				desc:this.anwserVal,		
			})
			this.anwserVal = null
		},
		adoptFunc(idx){
			this.adoptIndex = idx
			this.isAdopt = true
		},
		// 标记喜欢
		collectionFunc(){
			this.isCollection = !this.isCollection
		},
		// 加工图片路径
		srcExcutedFunc(html){
			let newReg = /(?<=(src="))[^"]*?(?=")/ig;
			let newHtml = html
			var allSrc = html.match(newReg);
			try{
				if(allSrc.length != 0){
					allSrc.forEach(e => {
						newHtml = newHtml.replace(e,this.loadImgSrc(e))
					})
				} 
			}catch(e){
				//TODO handle the exception
			}
			
			return newHtml
		}
	}
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
		getMattersDetail(options.id).then(res => {
			debugger
			let result = res.data
			// result.textDetails = this.srcExcutedFunc(result.textDetails)
			this.detailInfo = result
		})
	},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady(e) {  
	}, 
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
};
</script>
<style lang="scss">
@import './mattersDetail.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>