132 lines
2.7 KiB
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> |