gree_leran/pages/index/index.vue

132 lines
2.7 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">
<!-- <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: '视频'
},
{
src:'/static/icon/talk.png',
title: '讨论'
},
{
src: '/static/icon/score.png',
title: '积分'
},
{
src: '/static/icon/me.png',
title: '我的'
},
]);
</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>