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" >
			<view class="newList-t" @click="toTop">
				<up-text margin="1em"  type="primary" text="新闻"></up-text>
			</view>
			<!-- <button @click="clicksx">刷新</button> -->
			<CaseList ref="caseList"></CaseList>
		</view>
		<MenTab></MenTab>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,ref
	} from 'vue';
	const app=getApp();
	const caseList=ref(null);
	const userUtils=ref(app.globalData.utils);
	const swipe = reactive([
		"/static/stu.png"
	]);
	import { onShow } from "@dcloudio/uni-app"
	import newsCard from '@/components/newsCard.vue';
	const toTop=()=>{
		uni.pageScrollTo({
		    scrollTop: 0,
		    duration: 300
		  });
	}
	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: '我的',
					url:'/pages/user/user'
	    		},
	]);  
   function NavicatToBaseItems(item){
	   // 尝试 navigateTo 方法
	     uni.navigateTo({
	       url: item.url,
	       fail: () => {
	         // 如果 navigateTo 失败，尝试 switchTab 方法
	         uni.switchTab({
	           url: item.url,
	           fail: (err) => {
	             console.error('导航失败：', err);
	           }
	         });
	       }
	     });
	}
	// onShow(()=>{
	// 	caseList.value.updateList()
	// })
</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;
			}
		}

	}
	.newlist{
		overflow-y: hidden;
		// flex: 1;
		// display: flex;
		// flex-flow: column;
		// overflow: hidden;
	}
	.newList-t{
		// position: sticky;
		// top: 60rpx;
		// height: 60rpx;
		height: 70rpx;
		padding: 10rpx;
		background-color: #fff;
		z-index: 2;
		margin: 20rpx auto;
		// background-color: #000;
	}
	.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>