gree_leran/pages/index/index.vue

173 lines
3.8 KiB
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 style="height: 100vh;" 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{
// flex: 1;
display: flex;
flex-flow: column;
// overflow: hidden;
}
.newList-t{
position: sticky;
top: 60rpx;
height: 60rpx;
background-color: #fff;
z-index: 2;
// 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>