jmpc/src/views/introduce/introduce.vue

<template>
	<div class="introduce">
		<jm-box :navList='navList' @navListC='navListC'>
			<div class="boooox">
				
			</div>
			<div class="center" v-if="navChoose == 2">
				<div class="inlist">
					<div class="initem" v-for="(q,index) in qxlist" @click="isShowQx = index">
						<div class="titley" :class="{title: isShowQx == index}">
							{{ q.title }}
							<div class="img">
								<img src="../../assets/img/up.png"  v-show="isShowQx == index">
							</div>
							<div class="img">
								<img src="../../assets/img/down.png" v-show="isShowQx != index">
							</div>
						</div>
						<transition name="slide-fade">
							<div class="nr" v-html="q.content" v-show="index==isShowQx">
							</div>
						</transition>
					</div>
				</div>
			</div>
		</jm-box>
	</div>
</template>

<script>
import { getArticList,getList,details } from '@/request/api.js'

import jmBox from '@/components/box.vue'
	export default {
		components: {
			jmBox,
		},
		data() {
			return {
				list: [
					{
						name: '沙洋县红十字会',
						phone: ''
					}
				]
			}
		},
		mounted() {
			this.init()
		},
		data() {
			return {
				navChoose: this.$route.params.navChoose || this.$route.query.navChoose || 0,
				navList: {
					title: '组织介绍',
					url: 'introduce',
					list: this.$store.state.introduce || []
				},
				qxlist: [],
				isShowQx: 0
			}
		},
		methods: {
			init() {
				this.getdataList()
				this.getGqx()
			},
			getdataList() {
				getList({},14).then(res => {
					this.navList.list = res.data
					this.$store.commit('setIntroduce',res.data)
				})
				
			},
			getGqx() {
				getArticList({},35).then(res => {
					console.log(res);
					this.qxlist = res.data.list
					for(let i = 0; i<res.data.count; i++) {
						details({},res.data.list[i].id).then(e => {
							this.qxlist[i].content = e.data.content
						})
					}
				})
			},
			navListC(index) {
				this.navChoose = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	// .slide-fade-enter-active {
		// 	transition: all .8s ease;
	// }
	// .slide-fade-enter, .slide-fade-leave-to {
		// 	transform: translateY(-20px);
		// 	opacity: 0;
	// }
	.center {
		background-color: #F9F9F9;
		.inlist {
			.initem {
				width: 100%;
				.titley {
					position: relative;
					border-bottom: solid 1px #EEEEEE;
					background-color: #fff;
					padding: 0 25px;
					height: 50px;
					line-height: 50px;
					font-weight: bold;
					.img {
						position: absolute;
						top: 7px;
						right: 30px;
						img {
							width: 25px;
						}
					}
				}
				.title {
					background-color: #333333;
					color: #fff;
				}
				.nr {
					background-color: #F9F9F9;
					padding: 10px 0;
				}
			}
		}
	}
</style>