MinNan/index_fenbao/mn_wenhua/mn_wenhua.vue

<template>
	<view class="body" style="background-color: #efefef">
		<u-navbar :autoBack="true" title="文化" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>
		<view class="banxin">
			<u-tabs
				:list="listTab"
				:lineWidth="30"
				lineColor="#4E7198"
				:activeStyle="{
					color: '#4E7198',
					fontSize: '34rpx'
				}"
			></u-tabs>
		</view>

		<view class="box_1">
			<view class="box_28">
				<view class="text-wrapper_46">
					<text lines="1" class="text_8">课程录播</text>
					<text lines="1" class="text_9">查看更多》</text>
				</view>
				<view class="group_3" v-for="item in 2" :key="item">
					<view class="section_3">
						<image src="https://huli-app.wenlvti.net/app_static/minnanhun/image/kctp.png"></image>
					</view>
					<view class="section_16">
						<view class="text-group_36">
							<text lines="1" class="text_10">课程标题</text>
							<text lines="1" class="text_11">课程附标题</text>
						</view>
						<view class="text-wrapper_47">
							<text lines="1" class="text_12">会员价</text>
							<text lines="1" class="text_13">￥99</text>
						</view>
					</view>
					<view class="text-wrapper_4">
						<text lines="1" class="text_14">立即报名</text>
					</view>
				</view>

				<view class="text-wrapper_50">
					<text lines="1" class="text_25">文化集锦</text>
					<text lines="1" class="text_9">查看更多》</text>
				</view>
				<view class="list_5">
					<view class="image-text_2-0" v-for="item in 2" :key="item">
						<view class="box_4-0">
							<image src="../../../static/image/fx.png"></image>
						</view>
						<view class="box_30-0">
							<view class="text-group_39-0">
								<text lines="1" class="text_27-0">闽南的“博饼”文化</text>
								<text lines="1" class="text_28-0">起源于清初，相传是郑成功屯兵鼓..</text>
							</view>
							<view class="box_31-0">
								<view class="text-wrapper_10-0">
									<text lines="1" class="text_31-0">#博饼</text>
								</view>
								<view class="text-wrapper_11-0">
									<text lines="1" class="text_31-0">#博饼</text>
								</view>
								<view class="text-wrapper_25-0">
									<text lines="1" decode="true" class="text_47-0">+&nbsp;收藏</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="text-wrapper_50">
					<text lines="1" class="text_33">文章荟萃</text>
					<text lines="1" class="text_9">查看更多》</text>
				</view>
				<view class="section_18">
					<view class="box_7" v-for="item in 2" :key="item">
						<view class="box_8">
							<image style="width: 100%; height: 100%" src="../../../static/image/mn.png"></image>
							<view class="block_3">
								<view class="image-text_16">
									<uni-icons color="#ffffff" type="locked" size="20"></uni-icons>

									<text lines="1" class="text-group_8">待解锁</text>
								</view>
							</view>
						</view>
						<view class="group_25">
							<view class="text-group_41">
								<text lines="1" class="text_35">课程标题</text>
								<text lines="1" class="text_36">课程附标题</text>
							</view>
							<view class="block_10">
								<view class="text-wrapper_13">
									<text lines="1" class="text_31-0">#标签</text>
								</view>
								<view class="text-wrapper_14">
									<text lines="1" class="text_31-0">#标签</text>
								</view>
							</view>
						</view>
						<view class="text-wrapper_28">
							<text lines="1" decode="true" class="text_49">+&nbsp;收藏</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			listTab: [
				{
					name: '历史',
					tabid: 1
				},
				{
					name: '宗教',
					tabid: 2
				},
				{
					name: '经典',
					tabid: 3
				},
				{
					name: '人物',
					tabid: 4
				},
				{
					name: '社会',
					tabid: 5
				}
			]
		};
	},
	methods: {}
};
</script>

<style>
.banxin {
	margin: 0 32rpx 0 32rpx;
}
.box_1 {
	width: 750rpx;
	display: flex;
	flex-direction: column;
	background-color: #efefef;
}

.box_28 {
	width: 750rpx;

	display: flex;
	flex-direction: column;
}
.text-wrapper_46 {
	width: 684rpx;
	height: 27rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 42rpx 0 0 34rpx;
}
.text_8 {
	width: 111rpx;
	height: 27rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 28rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	line-height: 28rpx;
}
.text_9 {
	width: 89rpx;
	height: 20rpx;
	color: rgba(18, 18, 18, 1);
	font-size: 22rpx;
	white-space: nowrap;
	line-height: 20rpx;
	margin-top: 4rpx;
}
.group_3 {
	background-color: rgba(255, 255, 255, 1);
	border-radius: 10rpx;
	width: 686rpx;
	height: 170rpx;
	flex-direction: row;
	display: flex;
	margin: 30rpx 0 0 31rpx;
}
.section_3 {
	background-color: rgba(202, 86, 66, 1);
	border-radius: 10rpx;
	width: 307rpx;
	height: 170rpx;
	display: flex;
	flex-direction: column;
}
.section_16 {
	width: 130rpx;
	height: 122rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 29rpx 0 0 20rpx;
}
.text-group_36 {
	width: 111rpx;
	height: 61rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.text_10 {
	width: 110rpx;
	height: 26rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 28rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 28rpx;
	margin-left: 1rpx;
}
.text_11 {
	width: 107rpx;
	height: 21rpx;
	overflow-wrap: break-word;
	color: rgba(102, 102, 102, 1);
	font-size: 22rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 22rpx;
	margin-top: 14rpx;
}
.text-wrapper_47 {
	width: 125rpx;
	height: 22rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 39rpx 0 0 5rpx;
}
.text_12 {
	width: 60rpx;
	height: 20rpx;
	overflow-wrap: break-word;
	color: rgba(202, 86, 66, 1);
	font-size: 20rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 20rpx;
	margin-top: 2rpx;
}
.text_13 {
	width: 56rpx;
	height: 22rpx;
	overflow-wrap: break-word;
	color: rgba(202, 86, 66, 1);
	font-size: 28rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	line-height: 28rpx;
}
.text-wrapper_4 {
	background-color: rgba(202, 86, 66, 1);
	border-radius: 10rpx;
	height: 44rpx;
	display: flex;
	flex-direction: column;
	width: 129rpx;
	margin: 115rpx 18rpx 0 82rpx;
}
.text_14 {
	width: 92rpx;
	height: 23rpx;
	overflow-wrap: break-word;
	color: rgba(248, 226, 175, 1);
	font-size: 24rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 24rpx;
	margin: 10rpx 0 0 18rpx;
}

.text-wrapper_50 {
	width: 670rpx;
	height: 27rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 32rpx 0 0 32rpx;
}
.text_25 {
	width: 111rpx;
	height: 27rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 28rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	line-height: 28rpx;
}

.list_5 {
	width: 686rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 30rpx 0 0 31rpx;
}
.image-text_2-0 {
	background-color: rgba(255, 255, 255, 1);
	border-radius: 10rpx;
	width: 686rpx;
	height: 170rpx;
	margin-bottom: 31rpx;
	flex-direction: row;
	display: flex;
}
.box_4-0 {
	border-radius: 10rpx;
	height: 170rpx;
	display: flex;
	flex-direction: column;
	width: 307rpx;
	background: rgba(202, 86, 66, 1);
}
.box_30-0 {
	position: relative;
	width: 343rpx;
	height: 125rpx;
	display: flex;
	flex-direction: column;
	margin: 29rpx 0 0 19rpx;
}
.text-group_39-0 {
	position: absolute;
	left: 1rpx;
	top: 0rpx;
	width: 337rpx;
	height: 62rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.text_27-0 {
	width: 249rpx;
	height: 26rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 28rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 28rpx;
	margin-left: 2rpx;
}
.text_28-0 {
	width: 337rpx;
	height: 22rpx;
	overflow-wrap: break-word;
	color: rgba(102, 102, 102, 1);
	font-size: 22rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 36rpx;
	margin-top: 14rpx;
}
.box_31-0 {
	width: 343rpx;
	height: 44rpx;
	margin-top: 81rpx;
	flex-direction: row;
	display: flex;
}
.text-wrapper_10-0 {
	background-color: rgba(202, 86, 66, 0.09);
	border-radius: 18rpx;
	height: 36rpx;
	border: 1px solid rgba(202, 87, 66, 1);
	margin-top: 7rpx;
	display: flex;
	flex-direction: column;
	width: 84rpx;
}
.text_31-0 {
	width: 50rpx;
	height: 19rpx;
	overflow-wrap: break-word;
	color: rgba(202, 86, 66, 1);
	font-size: 20rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 46rpx;
	margin: -6rpx 0 0 12rpx;
}
.text-wrapper_11-0 {
	background-color: rgba(255, 135, 2, 0.09);
	border-radius: 18rpx;
	height: 36rpx;
	border: 1px solid rgba(255, 135, 2, 1);
	display: flex;
	flex-direction: column;
	width: 84rpx;
	margin: 7rpx 0 0 11rpx;
}

.text-wrapper_25-0 {
	background-color: rgba(78, 113, 152, 1);
	border-radius: 10rpx;
	height: 44rpx;
	margin-left: 60rpx;
	display: flex;
	flex-direction: column;
	width: 104rpx;
}
.text_47-0 {
	width: 65rpx;
	height: 23rpx;
	overflow-wrap: break-word;
	color: rgba(255, 255, 255, 1);
	font-size: 24rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 24rpx;
	margin: 10rpx 0 0 18rpx;
}

.text_33 {
	width: 111rpx;
	height: 28rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 28rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	line-height: 28rpx;
}

.section_18 {
	width: 686rpx;
	height: 371rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 29rpx 0 32rpx 31rpx;
}
.box_7 {
	background-color: rgba(255, 255, 255, 1);
	border-radius: 10rpx;
	width: 686rpx;
	height: 170rpx;
	flex-direction: row;
	display: flex;
}
.box_8 {
	background-color: rgba(202, 86, 66, 1);
	border-radius: 10rpx;
	height: 170rpx;
	display: flex;
	flex-direction: column;
	width: 307rpx;
}
.block_3 {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 10rpx;
	width: 307rpx;
	height: 170rpx;
	display: flex;
	flex-direction: row;
}
.image-text_16 {
	width: 97rpx;
	height: 27rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 71rpx 0 0 105rpx;
	line-height: 25rpx;
}

.text-group_8 {
	width: 71rpx;
	height: 23rpx;
	overflow-wrap: break-word;
	color: rgba(255, 255, 255, 1);
	font-size: 24rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 24rpx;
	margin-top: 3rpx;
}
.group_25 {
	width: 179rpx;
	height: 122rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 29rpx 0 0 19rpx;
}
.text-group_41 {
	width: 111rpx;
	height: 61rpx;
	margin-left: 1rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.text_35 {
	width: 110rpx;
	height: 26rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 28rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 28rpx;
	margin-left: 1rpx;
}
.text_36 {
	width: 107rpx;
	height: 21rpx;
	overflow-wrap: break-word;
	color: rgba(102, 102, 102, 1);
	font-size: 22rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 22rpx;
	margin-top: 14rpx;
}
.block_10 {
	width: 179rpx;
	height: 36rpx;
	margin-top: 25rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
}
.text-wrapper_13 {
	background-color: rgba(202, 86, 66, 0.09);
	border-radius: 18rpx;
	height: 36rpx;
	border: 1px solid rgba(202, 87, 66, 1);
	display: flex;
	flex-direction: column;
	width: 84rpx;
}

.text-wrapper_14 {
	background-color: rgba(255, 135, 2, 0.09);
	border-radius: 18rpx;
	height: 36rpx;
	border: 1px solid rgba(255, 135, 2, 1);
	display: flex;
	flex-direction: column;
	width: 84rpx;
}
.text-wrapper_28 {
	background-color: rgba(78, 113, 152, 1);
	border-radius: 10rpx;
	height: 44rpx;
	display: flex;
	flex-direction: column;
	width: 104rpx;
	margin: 106rpx 17rpx 0 60rpx;
}
.text_49 {
	width: 65rpx;
	height: 23rpx;
	overflow-wrap: break-word;
	color: rgba(255, 255, 255, 1);
	font-size: 24rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 24rpx;
	margin: 10rpx 0 0 18rpx;
}
</style>