gree_leran/pages/index/index.vue

<template>
	<view class="content">
		<view class="nav">
			<view class="tit-box">
				学习平台
			</view>
			<view class="search-box" style="width: 80%;margin: 0 auto;">
				<up-search class="search" placeholder="日照香炉生紫烟" :clearabled="true" v-model="keyword"
					animation="false"></up-search>
			</view>
		</view>
		<view class="hand">
			<up-swiper height="150" :list="swipe"></up-swiper>
		</view>
		<view class="seton">
			<up-grid :border="false" col="4">
				<up-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex" @click="NavicatToBaseItems(baseListItem)">
					<!-- <up-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="22"></up-icon> -->
					<image :src="baseListItem.src" style="width: 60rpx;" mode="widthFix"></image>
					<text class="grid-text" style="margin: 10rpx;">{{baseListItem.title}}</text>
				</up-grid-item>
			</up-grid>
		</view>
		<view class="newlist" >
			<up-text margin="1em"  type="primary" text="新闻"></up-text>
			<view class="">
				<news-card :info="i" v-for="i in newsList"></news-card>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,ref
	} from 'vue';
	const swipe = reactive([
		"/static/stu.png"
	]);
	import newsCard from '@/components/newsCard.vue';
	const newsList = reactive([{
		title:"测试",
		image:'/static/stu.png',
		detile:"这是一个测试",
		time:"2024-6-1"
	}])
	
	
	const baseList = ref([  
	       {  
	    	        src:'/static/icon/video.png',
	    	        title: '视频'  ,
	    			url:"/pages/video/video"
	    	    },  
	    	    {  
	    	       src:'/static/icon/talk.png',
	    	        title: '讨论',
	    			url:'/pages/discuss/discuss'
	    	    },  
	    	    {  
	    	        src: '/static/icon/score.png',  
	    	        title: '积分',
	    			url:'/pages/intergral/intergral'
	    	    },  
	    		{
	    		    src: '/static/icon/me.png',  
	    		    title: '我的',
	    		},
	]);  
	   function NavicatToBaseItems(item){
			uni.navigateTo({
				url:item.url
			})
		}
</script>

<style lang="scss">
	.nav {

		// margin-top: 20rpx;
		height: 350rpx;
		display: flex;
		background-color: #a8e6cf;
		flex-direction: column;
		width: 100%;
		margin: 0 auto;
		justify-content: center;

		.tit-box {
			display: flex;
			width: 100%;
			// text-align: center;
			// position: relative;
			// top: 100rpx;
			margin-top: -60rpx;
			font-size: 34rpx;
			justify-content: center;
			font-weight: 600;
			color: #fff;
		}

		.search-box {
			position: relative;
			top: 25rpx;

			.search {


				// display: flex;
				// align-items: center;
				// justify-content: center;
			}
		}

	}

	.content {
		height: 100vh;
		background-color: #F7F8FA;
		.seton{
			// position: relative;
			background-color: #fff;
			width: 95%;
			margin: 0 auto;
			margin-top: 25rpx;
			border-radius: 25rpx;
			display: flex;
			// flex-direction: ;
			// height: 120rpx;
			align-items: center;
			// top: 500rpx;
		}
		.hand {
			width: 95%;
			margin: 0 auto;
			margin-top: -80rpx;
		}
		
	}
</style>