<template>
<view class="rumor">
<image src="http://111.198.10.15:11604/png/back_complete.png" style="position:absolute;top: -4rpx;left: 0;z-index: -999; width:100%;height: 300rpx;"></image>
<view class="button-area">
<view class="button" @click="goAnotherMiniProgranm">我来查证</view>
<button class="button1 button" open-type="contact" session-from="sessionFrom">线索提交</button>
<view class="button2 button" @click="goRumorWebView">辟谣信息</view>
</view>
<div class="article-answer-stack">
<flipcard ref="stack" :pages="stackList" :stackInit="stackInit" @click="handleStackClicked"></flipcard>
</div>
</view>
</template>
<script>
import flipcard from '../../components/card.vue'
export default {
components:{
flipcard
},
data() {
return {
stackList:[
{
title:"2021高考作文难吗11111？",
tag: "最近83人提问过这个问题11111",
problem: "关于陈红军壮烈牺牲的报道，陈红军的“发小”王煦辉这几天看了一遍又一遍，从小玩到大的伙伴如今已经天人相隔，让他至今也无法接受。在同学眼中，陈红军打小就是一位品学兼优的好子，就是这个家境贫寒的农村娃，考上了城里的高？",
author: {
id: 1,
name: "一颗棒棒糖",
avatar: "/static/avatar/1.jpg",
},
comment_num: 5160, // 评论数
dig_num: 5160, // 顶数
forward_num: 5160, // 转发数
attention_num: 30, // 关注数
},
{
title:"2021高考作文难吗？22222",
tag: "最近83人提问过这个问题22222",
problem: "关于陈红军壮烈牺牲的报道，陈红军的“发小”王煦辉这几天看了一遍又一遍，从小玩到大的伙伴如今已经天人相隔，让他至今也无法接受。在同学眼中，陈红军打小就是一位品学兼优的好子，就是这个家境贫寒的农村娃，考上了城里的高？",
author: {
id: 1,
name: "两颗棒棒糖",
avatar: "/static/avatar/2.jpg",
},
comment_num: 5160, // 评论数
dig_num: 5160, // 顶数
forward_num: 5160, // 转发数
attention_num: 30, // 关注数
},
{
title:"2021高考作文难吗？33333",
tag: "最近83人提问过这个问题33333",
problem: "关于陈红军壮烈牺牲的报道，陈红军的“发小”王煦辉这几天看了一遍又一遍，从小玩到大的伙伴如今已经天人相隔，让他至今也无法接受。在同学眼中，陈红军打小就是一位品学兼优的好子，就是这个家境贫寒的农村娃，考上了城里的高？",
author: {
id: 1,
name: "三颗棒棒糖",
avatar: "/static/avatar/4.jpg",
},
comment_num: 5160, // 评论数
dig_num: 5160, // 顶数
forward_num: 5160, // 转发数
attention_num: 30, // 关注数
},
{
title:"2021高考作文难吗？44444",
tag: "最近83人提问过这个问题44444",
problem: "关于陈红军壮烈牺牲的报道，陈红军的“发小”王煦辉这几天看了一遍又一遍，从小玩到大的伙伴如今已经天人相隔，让他至今也无法接受。在同学眼中，陈红军打小就是一位品学兼优的好子，就是这个家境贫寒的农村娃，考上了城里的高？",
author: {
id: 1,
name: "四颗棒棒糖",
avatar: "/static/avatar/5.jpg",
},
comment_num: 5160, // 评论数
dig_num: 5160, // 顶数
forward_num: 5160, // 转发数
attention_num: 30, // 关注数
}
],
stackInit: {
currentPage:0,
visible: 3
}
}
},
methods: {
handleStackPrev() {
this.$refs["stack"].prev()
},
handleStackNext() {
this.$refs["stack"].next()
},
// 点击辟谣信息
goRumorWebView() {
// wx.navigateTo({
// url: '/packageC/rumorWebView/rumorWebView'
// })
wx.navigateTo({
url: '/packageC/rumorInfo/rumorInfo'
})
},
// 点击我来查证
goAnotherMiniProgranm() {
wx.showToast({
title: '请提供跳转小程序的appId',
icon: 'none'
})
}
}
}
</script>
<style lang="scss" scoped>
.rumor {
// padding: 40rpx;
height: 100%;
width: 100%;
box-sizing: border-box;
padding-top: 300rpx;
padding-bottom: 40rpx;
overflow: hidden;
.button-area {
height: 120rpx;
display: flex;
justify-content: space-around;
box-sizing: border-box;
.button {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-weight: 600;
box-sizing: border-box;
width: 180rpx;
height: 80rpx;
background: #fff;
color: #0043ac;
border: 2rpx solid #0043ac;
border-radius: 20rpx;
// animation: btn4Ani 2s linear infinite;
margin: 0;
white-space: nowrap;
}
.button2 {
background: #fff;
color: #0043ac;
border: 2rpx solid #0043ac;
// animation: 6s btn4Ani 2s linear infinite;
}
.button1 {
background: #0043ac;
color: #fff;
border: 2rpx solid #0043ac;
animation: btn4Ani 2s linear infinite;
}
}
@keyframes btn4Ani {
0% {
width: 200rpx;
height: 80rpx;
}
30% {
width: 280rpx;
height: 112rpx;
transform: rotate(0deg);
}
40% {
width: 280rpx;
height: 112rpx;
transform: rotate(-5deg);
}
50% {
width: 280rpx;
height: 112rpx;
transform: rotate(5deg);
}
60% {
width: 280rpx;
height: 112rpx;
transform: rotate(-5deg);
}
70% {
width: 280rpx;
height: 112rpx;
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
width: 200rpx;
height: 80rpx;
}
}
}
.article-answer {
&-stack{
width: 100%;
height: 100%;
position: relative;
list-style: none;
pointer-events: none;
padding: 30rpx;
box-sizing: border-box;
}
}
</style>
