sooka_consult_uniapp/pages/demo/wenbaxiangqing/wenbaxiangqing.vue

<template>
    <view>
        <!-- pages/me.wxml -->
        <view class="container">
            <h1 class="title">国家乡村振兴局关于落实党中央国务院2023年全面推进乡村振兴重点工作部署的实施意见</h1>
            <view class="wenzhangLy">
                <!-- 头像昵称 -->
                <view class="txTime">
                    <image :src="loadImgSrc('/moren.png')"></image>
                    <view class="time">
                        <p>国家乡村振兴局</p>
                        <span>2023-2-27 16:04</span>
                    </view>
                </view>
                <!-- 积分 -->
                <span class="jf">100</span>
            </view>
            <view class="wenzhangCont">
                <text>
                    2023年是全面贯彻落实党的二十大精神的开局之年，是巩固拓展脱贫攻坚成果同乡村振兴有效衔接的关键之年。2023年工作的总体思路是，以习近平新时代中国特色社会主义思想为指导，深入学习贯彻党的二十大精神，贯彻落实中央经济工作会议和中央农村工作会议精神，坚持稳中求进工作总基调，完整、准确、全面贯彻新发展理念，加快构建新发展格局，着力推动高质量发展，锚定建设农业强国目标，聚焦“守底线、抓发展、促振兴”，增强脱贫地区和脱贫群众内生发展动力，牢牢守住不发生规模性返贫的底线，扎实推进乡村发展、乡村建设、乡村治理和农村精神文明建设，建设宜居宜业和美乡村，推动巩固拓展脱贫攻坚成果上台阶、乡村全面振兴见实效，为全面建设社会主义现代化国家开局起步提供有力支撑。
                </text>

                <image :src="loadImgSrc('/img2.png')"></image>
            </view>
            <view class="fengexian"></view>
            <!-- 分割线 -->
            <view class="pinglunTj">
                <span class="pinglunTitle">
                    回答
                    <em>46</em>
                </span>
                <view class="ck">
                    <span>
                        <em class="iconfont icon-chakan"></em>
                        120
                    </span>
                    <span>
                        <em class="iconfont icon-shoucang"></em>
                        10
                    </span>
                </view>
            </view>
            <ul class="pinglunList" id="pinglunList">
                <li v-for="(e,idx) in anwserList" :key="idx" style="position: relative;">
                    <!-- 头像昵称 -->
                    <view class="txTime">
						<image :src="loadImgSrc('/moren.png')"></image>
						<view class="time">
							<p>{{ e.deptName }}</p>
							<span>{{ e.updateTime }}</span>
						</view>
					</view>
					<!-- <div class="effectBox"  :style="{ top: adoptTopSize + '%' }">精选答案</div> -->
					<div class="effectBix" :style="idx == adoptIndex ? 'display:block' : 'display:none' ">精  	选</div>
                    <text class="plListcont" style="z-index: 10;">{{ e.desc }}</text>
					<uploadImage/>
                    <button v-show="!isAdopt" @click="adoptFunc(idx)">采纳答案</button>
                </li>
            </ul>
        </view>
        <view class="fabiaoPl" :class="isCollection ? 'collect' : 'not-collect'" style="z-index: 100;">
            <view class="shuRu">
                <em class="iconfont icon-bianji"></em>
                <input placeholder="请输入内容，友好回答" v-model="anwserVal"/>
            </view>
            <em
				class="iconfont icon-shoucang"
				@click="collectionFunc"
				>
			</em>
            <view class="fasong" @click="answerFunc"><em class="iconfont icon-fasong"></em></view>
        </view>
    </view>
</template>

<script>
// pages/me.js
export default {
    data() {
        return {
			anwserVal:'',
			anwserList:[
				{
					deptName:'国家乡村振兴局',
					updateTime:'2023-2-27 16:04',
					desc:'用好政策效果评估成果，进一步优化巩固拓展脱贫攻坚成果同乡村振兴有效衔接政策供给，为推动工作提质增效提供有力支撑保障。',
				}
			],
			isCollection:false,
			isAdopt:false,
			adoptTopSize:'115',
			adoptIndex:null,
        };
    },
	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
		},
	}
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady(e) {
	},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
};
</script>
<style lang="scss">
@import 'wenbaxiangqing.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>