<template>
<div class="app">
<!--轮播图-->
<div >
<el-row>
<el-col :lg="14">
<img :src="showInfo.imgSrc">
</el-col>
<el-col :offset="1" :lg="9">
<div style="height: 420px">
<div>
<h3>{{showInfo.dairy}}</h3>
<h1>{{showInfo.title}}</h1>
<p>{{showInfo.content}}</p>
</div>
<div style="position: absolute;bottom:0;">
<el-button-group style="float: left;margin-left: 15px;margin-bottom: 10px">
<el-button icon="el-icon-arrow-left" ></el-button>
<el-button icon="el-icon-arrow-right " @click="nextShowInfo"></el-button>
</el-button-group>
<p style="margin-left: 400px;margin-bottom: 0px">{{showInfo.id}}/{{showInfo.total}}</p>
</div>
</div>
</el-col>
</el-row>
</div>
<div></div>
</div>
</template>
data() {
return {
showInfo:{
id: 1,
imgSrc: require("../assets/images/img1.jpg"),
dairy: '2020 /10 /4',
title: '青衫烟雨客，似是故人来。',
content: '你说帘外海棠，锦屏鸳鸯，后来庭院春深，咫尺画堂。你说笛声如诉，费尽思量，后来茶烟尚绿，人影茫茫'
,total:3
},
imgList: [{
id: 1,
imgSrc: require("../assets/images/img1.jpg"),
dairy: '2020 /10 /4',
title: '青衫烟雨客，似是故人来。',
content: '你说帘外海棠，锦屏鸳鸯，后来庭院春深，咫尺画堂。你说笛声如诉，费尽思量，后来茶烟尚绿，人影茫茫,' +
'君不见青街雨巷，红尘巷陌；奈何无缘成叹，情深若何。君不见年华碧水，浅箫笙歌；奈何执念成绊，徒费消磨。' +
'君不见碧玉流光，韶华浅落；然而年光渐逝，' +
'不予共我。君不见三生石畔，噬爱成魔；然而流年空倚，岁月蹉跎。'
},
{
id: 2,
imgSrc: require("../assets/images/img2.jpg"),
dairy: '2020 /12 /5',
title: '青衫烟雨客，似是故人来。',
content: '你说帘外海棠，锦屏鸳鸯，后来庭院春深，咫尺画堂。你说笛声如诉，费尽思量，后来茶烟尚绿，人影茫茫'
},
{
id: 3,
imgSrc: require("../assets/images/img3.jpg"),
dairy: '2020 /12 /5',
title: '青衫烟雨客，似是故人来。',
content: '你说帘外海棠，锦屏鸳鸯，后来庭院春深，咫尺画堂。你说笛声如诉，费尽思量，后来茶烟尚绿，人影茫茫'
}
]
}
},
methods:{
nextShowInfo(){//轮播图，下一个
console.log("next");
if(this.showInfo.id === this.showInfo.total){
let i = 1
this.showInfo.id=i
this.showInfo.imgSrc=this.imgList[i-1].imgSrc
this.showInfo.dairy=this.imgList[i-1].dairy
this.showInfo.title=this.imgList[i-1].title
this.showInfo.content=this.imgList[i-1].content
}
else {
let i = this.showInfo.id
i=i+1
this.showInfo.id=i
this.showInfo.imgSrc=this.imgList[i-1].imgSrc
this.showInfo.dairy=this.imgList[i-1].dairy
this.showInfo.title=this.imgList[i-1].title
this.showInfo.content=this.imgList[i-1].content
}
}
}
