MinNan/xueyuan_fenbao/jiGou/jiGou.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>
		<view class="box_sw">
			<u-swiper
				:list="mn_swiperList"
				imgMode="aspectFill"
				:height="220"
				:indicator="true"
				:autoplay="true"
				:circular="true"
				indicatorStyle="bottom: 20px"
				indicatorMode="dot"
				indicatorActiveColor="#fff"
				indicatorInactiveColor="rgba(255, 255, 255, 0.35)"
			></u-swiper>
		</view>
		<view class="" style="position: relative">
			<view class="box_title">
				<view class="tit1">秦汉胡同国学书院</view>
				<view class="tit2">书法教育综合服务平台</view>
				<view class="box_tit">
					<view class="tit3">
						<uni-icons type="location-filled" color="#C3A07B" size="20"></uni-icons>
						<text>厦门市思明区金榜路63号凯旋广场写字楼502</text>
					</view>
					<view class="">
						<uni-icons type="forward" color="#C3A07B" size="20"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<!-- 机构简介 -->
		<view class="box_ban">
			<view class="box_tab">
				<view v-for="(item, index) in tabTit" :key="item" @click="tabBtn(index)" :class="tabIndex == index ? 'active' : ''" class="tab_tit">{{ item.title }}</view>
			</view>
		</view>
		<!--  -->
		<view class="box_tab1" v-if="tabIndex == 0">
			秦汉胡同国学书院定位于一站式创新书法教育综合服务 平台，产品整合“教研、教学、服务、营销、管理”五 大板块，以书法学习为基础，以互联网为核心，为线下
			教培机构提供现代化的书法教育解决方案。
		</view>
		<!-- <view class="" v-if="tabIndex == 1">
			<view class="">1</view>
		</view> -->

		<view class="box_tab2">
			<view v-for="(item, index) in tabTit2" :key="item" @click="tabBtn2(index)" :class="tabIndex2 == index ? 'active' : ''" class="tab_tit">{{ item.title }}</view>
		</view>
		<!-- 热门课程 -->
		<view class="box_kc" v-if="tabIndex2 == 0">
			<course-item v-for="item in kcList" :item="item" :key="item.id"></course-item>
		</view>
		<!-- 精彩活动 -->
		<view class="box_kc" v-if="tabIndex2 == 1">
			<view class="list_3">
				<view @click="xqBtn" class="list-items_1-0" v-for="item in 2" :key="item">
					<view class="section_1-0"></view>
					<uni-icons style="margin-top: 50rpx; margin-left: 20rpx" type="paperclip" size="22"></uni-icons>

					<view class="text-wrapper_8-0">
						<text lines="1" class="text_9-0">“答嘴鼓”夏令营第三期活动</text>
						<text lines="1" decode="true" class="text_10-0">2023-01-12&nbsp;&nbsp;&nbsp;&nbsp;08:30</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 作者展示 -->
		<view class="box_kc" v-if="tabIndex2 == 2">
			<custom-waterfalls-flow :value="list" style="width: 90%; margin: auto">
				<view class="item" style="position: relative" v-for="(item, index) in list" :key="index" slot="slot{{index}}">
					<view class="title_pubu">
						{{ item.title }}
					</view>
					<!-- <view class="desc">{{ item.desc }}</view> -->
				</view>
			</custom-waterfalls-flow>
		</view>
		<!-- 热点关注 -->
		<view class="box_kc" v-if="tabIndex2 == 3">
			<view class="sh_xs banxin">
				<view class="sh_xs_item" v-for="item in shXiShuList" :key="item">
					<view @click="detailsBtn" class="" style="width: 325rpx; height: 180rpx; border-radius: 10rpx">
						<image style="width: 100%; height: 100%" :src="item.img"></image>
					</view>
					<view class="">{{ item.title }}</view>
					<view class="ms_dianzan">
						<view class="">
							<uni-icons type="star-filled" color="#4e7198" size="20"></uni-icons>
							<text>1.5w</text>
						</view>

						<view class="">
							<uni-icons type="heart-filled" color="#ca5642" size="20"></uni-icons>
							<text>1.5w</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			tabIndex: 0,
			tabIndex2: 0,
			tabTit: [
				{
					title: '机构简介'
				},
				{
					title: '业务介绍'
				},
				{
					title: '机构资质'
				},
				{
					title: '师资介绍'
				}
			],
			tabTit2: [
				{
					title: '热门课程'
				},
				{
					title: '精彩活动'
				},
				{
					title: '作品展示'
				},
				{
					title: '热点关注'
				}
			],
			mn_swiperList: [
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/sy_lbt2.png',
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/sy_lbt1.png',
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/sy_lbt3.jpg',
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/sy_lbt4.jpg',
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/sy_lbt5.png'
			],
			kcList: [],
			list: [
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_jy1.png',
					title: '传统捏泥人',
					desc: '描述描述描述描述描述描述描述描述2'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_jy2.png',
					title: '青龙宫',
					desc: '描述描述描述描述描述描述描述描述1'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_jy3.png',
					title: '火把节',
					desc: '11'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_jy9.png',
					title: '老物件',
					desc: '描述描述描述描述描述描述描述描述2'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_jy4.png',
					title: '林后青龙宫',
					desc: '描述描述描述描述描述描述描述描述2'
				}
			],
			shXiShuList: [
				{
					img: 'https://www.chinanews.com/tp/hd2011/2013/03-11/U508P4T426D182733F16470DT20130311112416.jpg',
					title: '闽南民俗浔浦天香日'
				},
				{
					img: 'https://inews.gtimg.com/newsapp_bt/0/11032609926/1000',
					title: '闽南冬至丸'
				},
				{
					img: 'https://img1.baidu.com/it/u=1711973128,1321603179&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333',
					title: '闽南习俗拜天公'
				},
				{
					img: 'https://i2.hdslb.com/bfs/archive/24ab948019ae5cc13055113cfcd5321f7c16dc41.jpg',
					title: '抬神'
				}
			]
		};
	},
	onLoad() {
		that = this;
		this.kcfn();
	},
	methods: {
		tabBtn(index) {
			console.log(index);
			this.tabIndex = index;
		},
		tabBtn2(index) {
			console.log(index);
			this.tabIndex2 = index;
		},
		// 课程详情
		kcfn() {
			this.$api.getCourseList({}, function (res) {
				console.log('啦啦啦', res);

				if (res.code == 1) {
					if (res.data.items.length > 0) {
						that.kcList = [...that.kcList, ...res.data.items];
					}
				}
			});
		},
		// 活动详情
		xqBtn() {
			uni.navigateTo({
				url: '/xueyuan_fenbao/zhuangJia/huodongXq'
			});
		}
	}
};
</script>

<style>
.box {
	height: auto;
	width: 100%;
	background-color: #f8f8f8;
	background-attachment: fixed;
	position: relative;
	display: flex;
	flex-direction: column;
}
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
.course-item:last-child {
	margin-bottom: 20rpx !important;
}
.active {
	color: #ca5642 !important;
	font-size: 36rpx;
	font-weight: bold;
}
/deep/.column-value.data-v-ddfcbb1c {
	border-radius: 25rpx 60rpx 0rpx 30rpx !important;
}
.box_sw {
	margin-top: -128rpx;
}
.box_title {
	width: 100%;
	position: absolute;
	top: -30rpx;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	background-color: #ffffff;
	border-bottom: 1px solid #c3a07b;
	padding: 30rpx 20rpx 10rpx 32rpx;
}
.tit1 {
	font-size: 42rpx;
	font-weight: bold;
	color: #312520;
}
.tit2 {
	font-size: 28rpx;
	color: #5b5454;
	margin-top: 10rpx;
	margin-bottom: 20rpx;
}
.tit3 {
	display: flex;
	align-items: center;
	font-size: 24rpx;
	color: #c3a07b;
}
.box_tit {
	margin-left: -8rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.box_ban {
	margin-top: 200rpx;
	/* height: 921rpx; */
}
.box_tab {
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.box_tab2 {
	height: 95rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.tab_tit {
	font-size: 28rpx;
	color: #5b5454;
}
.box_tab1 {
	/* height: 740rpx; */
	margin-top: 20rpx;
	padding: 30rpx;
	background-color: #f8f3e9;
}
.box_kc {
	padding: 30rpx;
	background-color: #f8f3e9;
}
.list_3 {
	width: 686rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 0 0 0 32rpx;
}
.list-items_1-0 {
	background-color: rgba(255, 255, 255, 1);
	border-radius: 20rpx;
	width: 686rpx;
	height: 149rpx;
	margin-bottom: 32rpx;
	flex-direction: row;
	display: flex;
}
.section_1-0 {
	background-color: rgba(202, 86, 66, 1);
	width: 8rpx;
	height: 80rpx;
	margin-top: 35rpx;
	display: flex;
	flex-direction: column;
}

.text-wrapper_8-0 {
	width: 389rpx;
	height: 73rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 36rpx 197rpx 0 20rpx;
}
.text_9-0 {
	width: 371rpx;
	height: 30rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 30rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	line-height: 30rpx;
	margin-left: 18rpx;
}
.text_10-0 {
	width: 198rpx;
	height: 18rpx;
	overflow-wrap: break-word;
	color: rgba(153, 153, 153, 1);
	font-size: 24rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 24rpx;
	margin-top: 25rpx;
}
.title_pubu {
	width: 100%;
	height: 65rpx;
	line-height: 65rpx;
	background-color: #ca5642;
	font-size: 30rpx;
	color: #ffffff;
	position: absolute;
	bottom: 0;
	left: 0;
}
.sh_xs {
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
}
.ms_dianzan {
	width: 245rpx;
	display: flex;
	justify-content: space-between;
	margin-top: 10rpx;
}
.sh_xs_item {
	border-radius: 10rpx;
	background: #ffffff;
	margin-bottom: 35rpx;
}
</style>