XEH-miniProgram/pages/taxationLesson/index.vue

<template>
	<view class="page-box">
		<image class="title-img"  src="/static/taxation/poster.jpg" alt="海报"/>
		<view class="content-box">
			 <view class="content-title display-flex-center items-center">
			 	<view class="line"></view><view class="circle"></view>
				<view class="title">社区活动</view>
				<view class="circle"></view><view class="line"></view>
			 </view>
			 <view class="display-around display-wrap hood-box">
			 	<view class="display-around items-center hood-child" v-for="(item,index) in hoodList" @click="goDetail()">
					<view class="display-around-column">
						<text>{{item.title}}</text>
						<text class="color-999">{{item.type === 'on' ? '线上课堂' : '线下活动'}}</text>
					</view>
					<image :src="item.imgSrc"></image>
				</view>
			 </view>		 
			 <view class="hood-bottom .items-center color-666 display-around">
				  <text>大学生创业之路</text>
				  <text>创业的五个思路</text>
				  <text>创业经验少走两年弯路!</text>
			 </view>
			 <image class="title-img2" src="/static/taxation/poster2.png"></image>	 
			 <view class="content-title display-flex-center items-center">
			 	<view class="line"></view><view class="circle"></view>
				<view class="title">创业干货</view>
				<view class="circle"></view><view class="line"></view>
			 </view>
			<view class="display-flex goods-box">
				<view class="display-around items-center goods-child" v-for="(item,index) in goodsList">
					<view class="display-around-column width-55">
						<text>{{item.title}}</text>
						<text class=" margin-goods color-666">{{item.type}}</text>
						<text class="color-999">{{item.time}}</text>
					</view>
					<image :src="item.imgSrc"></image>
				</view>
			</view>				   
		</view>
	</view>	
</template>

<script>
	import md5 from "@/common/md5.js";
	export default {
		components: {
		},
		data() {
			return {
				dateYear:new Date().getFullYear(),
				dateMonth:new Date().getMonth() + 1,
                hoodList:[
					{
						imgSrc:'/static/taxation/poster.jpg',
						title:'8月供需对接会',
						type:'off'
					},
					{
						imgSrc:'/static/taxation/poster2.png',
						title:'创业大讲堂',
						type:'on'
					},
					{
						imgSrc:'/static/taxation/poster.jpg',
						title:'职工素质讲座',
						type:'on'
					},
					{
						imgSrc:'/static/taxation/poster2.png',
						title:'创业分享会',
						type:'on'
					},
				],
                goodsList:[
					{
						imgSrc:'/static/taxation/poster.jpg',
						title:'小微企业--全额返还',
						type:'鑫恩华创业社区',
						time:'2021-11-15 18:18:52'
					},
					{
						imgSrc:'/static/taxation/poster2.png',
						title:'政策直通--国科小那些事儿',
						type:'鑫恩华创业社区',
						time:'2021-11-15 18:18:52'
					},
					{
						imgSrc:'/static/taxation/poster.jpg',
						title:'税筹--劳务派遣与劳务分包',
						type:'鑫恩华创业社区',
						time:'2021-11-15 18:18:52'
					},
				],				
			}
		},
		onLoad(option) {
			if(option.id){
		
			}else {
			
			}
		},
		onShow() {
		},
		methods: {
			goDetail(){
				uni.navigateTo({
					url:'./active'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-box {
		width: 100%;
		height: 100%;
		.title-img {
			width: 98%;
			height: 340rpx;
			margin-left: 1%;
		}
		
		.content-title {
			width: 100%;
			height: 100rpx;
			border-bottom: 1px solid #cccccc;
			.line {
				width: 60rpx;
				height: 2rpx;
				background-color: #cccccc;
			}
			.circle {
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background-color: #cccccc;
				margin: 0 10rpx 0 10rpx;
			}
			.title {
				color: #000;
				font-size: 36rpx;
				margin: 0 20rpx 0 20rpx;
			}
		}
		
		.hood-box {
			.hood-child {
				width: 48%;
				height: 160rpx;
				background-color: #fafafa;
				margin-bottom: 20rpx;
				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
			}
		}
		.hood-bottom {
			width: 100%;
			height: 80rpx;
		}
		
		.title-img2 {
			width: 98%;
			height: 220rpx;
			margin-left: 1%;
		}
		
		.goods-box {
			.goods-child {
				width: 100%;
				height: 280rpx;
				background-color: #fafafa;
				border-bottom: 1px solid #cccccc;
				.margin-goods {
					margin: 80rpx 0 10rpx 0;
				}
				image {
					width: 240rpx;
					height: 230rpx;
					border-radius: 6rpx;
				}
				
			}
		}		
		
	}
	
	
</style>