|
@@ -0,0 +1,233 @@
|
|
|
|
+<template>
|
|
|
|
+ <view>
|
|
|
|
+ <!-- pages/me.wxml -->
|
|
|
|
+ <view class="container">
|
|
|
|
+ <h1 class="title">{{ detailInfo.titleName }}</h1>
|
|
|
|
+ <view class="wenzhangLy">
|
|
|
|
+ <!-- 头像昵称 -->
|
|
|
|
+ <!-- <view class="txTime"> -->
|
|
|
|
+ <!-- <image :src="loadImgSrc(detailInfo.headImg!=null?detailInfo.headImg:'/profile/upload/2024/03/05/abf969632ee94bd5a429c8c2dbb2f6b4 (1)_20240305092823A002.png')" style="border-radius: 50px;"></image> -->
|
|
|
|
+ <!-- <view class="time">
|
|
|
|
+ <p>{{detailInfo.nickName?detailInfo.nickName:'网友'}}</p>
|
|
|
|
+ <span>{{ detailInfo.createTime }}</span>
|
|
|
|
+ </view> -->
|
|
|
|
+ <!-- </view> -->
|
|
|
|
+ <!-- 积分 -->
|
|
|
|
+<!-- <span class="jf">100</span> -->
|
|
|
|
+ </view>
|
|
|
|
+ <view class="wenzhangCont article">
|
|
|
|
+ <span v-html="detailInfo.textDetails">
|
|
|
|
+ </span>
|
|
|
|
+
|
|
|
|
+ <view >
|
|
|
|
+ <!-- 图片轮播 -->
|
|
|
|
+ <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular">
|
|
|
|
+ <block v-for="(one, index) in detailInfo.urls" :key="index">
|
|
|
|
+ <swiper-item><image :src="loadImgSrc(one)" style="background-size: 100% 100%;"></image></swiper-item>
|
|
|
|
+ </block>
|
|
|
|
+ </swiper>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+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
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ /**
|
|
|
|
+ * 生命周期函数--监听页面加载
|
|
|
|
+ */,
|
|
|
|
+ onLoad(options) {
|
|
|
|
+ this.detailInfo = JSON.parse(options.obj)
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 生命周期函数--监听页面初次渲染完成
|
|
|
|
+ */
|
|
|
|
+ onReady(e) {
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 生命周期函数--监听页面显示
|
|
|
|
+ */
|
|
|
|
+ onShow() {},
|
|
|
|
+ /**
|
|
|
|
+ * 生命周期函数--监听页面隐藏
|
|
|
|
+ */
|
|
|
|
+ onHide() {},
|
|
|
|
+ /**
|
|
|
|
+ * 生命周期函数--监听页面卸载
|
|
|
|
+ */
|
|
|
|
+ onUnload() {},
|
|
|
|
+ /**
|
|
|
|
+ * 页面相关事件处理函数--监听用户下拉动作
|
|
|
|
+ */
|
|
|
|
+ onPullDownRefresh() {},
|
|
|
|
+ /**
|
|
|
|
+ * 页面上拉触底事件的处理函数
|
|
|
|
+ */
|
|
|
|
+ onReachBottom() {},
|
|
|
|
+ /**
|
|
|
|
+ * 用户点击右上角分享
|
|
|
|
+ */
|
|
|
|
+ onShareAppMessage() {},
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+<style lang="scss">
|
|
|
|
+@import './informationDetail.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>
|