sooka_consult_uniapp/pages/highServer/travelGuideDetails/travelGuideDetails.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/travelGuide/travelGuide.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 './travelGuideDetails.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>