You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
338 lines
7.2 KiB
338 lines
7.2 KiB
<template>
|
|
<view class="container">
|
|
<view class="xxqd">
|
|
<view class="head">
|
|
你的学习清单
|
|
</view>
|
|
<view class="main">
|
|
<view class="text">
|
|
距离上次学习已经
|
|
<text class="hongzi"> 6</text>天
|
|
<text class="hongzi"> 20</text>时
|
|
<text class="hongzi"> 38</text>分
|
|
</view>
|
|
<view class="xxls">
|
|
<view class="xxone" v-for="(item,index) in xxList" :key="index" @click="xxClick(item)">
|
|
<image style="width: 100%;height: 238rpx;border-radius: 16rpx;" :src="item.img" mode=""></image>
|
|
<view class="xxjd">
|
|
已学{{item.xxjd}}%
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-tabs :list="tabList" :lineWidth="34" :lineHeight="4" lineColor="#007FFF"
|
|
:activeStyle="{color: '#0C092A',fontWeight: '600',fontSize: '34rpx'}"
|
|
:inactiveStyle="{color: '#858494',fontWeight: '350',fontSize: '30rpx'}" @click="tabClick"></u-tabs>
|
|
<u-search @search="search" @clickIcon="clickIcon" shape="square" placeholder="请输入搜索内容"
|
|
placeholderColor="#088cff" v-model="keyword" searchIcon="/static/img/search.png" searchIconSize="14"
|
|
:showAction="false" height="40" margin="40rpx 24rpx 24rpx 24rpx"></u-search>
|
|
|
|
<view class="KClist">
|
|
<view class="kcone" v-for="(item,index) in kcList" :key="index" @click="kcClick(item)">
|
|
<image class="img" :src="item.img" mode=""></image>
|
|
<view class="right">
|
|
<text class="title">{{item.title}}</text>
|
|
<text class="txt">{{item.txt}}</text>
|
|
<view class="bottompart">
|
|
<text class="gtsy">{{item.gtsy}}</text>
|
|
<text class="data">{{item.data}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
watch
|
|
} from 'vue'
|
|
|
|
const xxList = ref([{
|
|
id: 0,
|
|
img: '/static/img/sl4.png',
|
|
xxjd: 50
|
|
},
|
|
{
|
|
id: 1,
|
|
img: '/static/img/sl4.png',
|
|
xxjd: 30
|
|
},
|
|
{
|
|
id: 1,
|
|
img: '/static/img/sl4.png',
|
|
xxjd: 30
|
|
}
|
|
])
|
|
|
|
const tabList = ref([{
|
|
name: '推荐'
|
|
},
|
|
{
|
|
name: '视频课'
|
|
},
|
|
{
|
|
name: '图文课'
|
|
}
|
|
])
|
|
|
|
const kcList = ref([{
|
|
img: '/static/img/sl5.png',
|
|
title: '课程标题标题标题',
|
|
txt: '小白必看！新手如何炒股票不被割韭菜？/书单推荐/股票基金避坑理财课靠谱吗？',
|
|
gtsy: '个体私营协会',
|
|
data: '2025-04-17',
|
|
type: 'video'
|
|
},
|
|
{
|
|
img: '/static/img/sl5.png',
|
|
title: '课程标题标题标题',
|
|
txt: '小白必看！新手如何炒股票不被割韭菜？/书单推荐/股票基金避坑理财课靠谱吗？',
|
|
gtsy: '个体私营协会',
|
|
data: '2025-04-17',
|
|
type: 'imgtxt'
|
|
},
|
|
{
|
|
img: '/static/img/sl5.png',
|
|
title: '课程标题标题标题',
|
|
txt: '小白必看！新手如何炒股票不被割韭菜？/书单推荐/股票基金避坑理财课靠谱吗？',
|
|
gtsy: '个体私营协会',
|
|
data: '2025-04-17',
|
|
type: 'imgtxt'
|
|
}
|
|
])
|
|
|
|
const xxClick = (item) => {
|
|
console.log(item);
|
|
}
|
|
|
|
const tabClick = (item) => {
|
|
console.log(item);
|
|
}
|
|
|
|
const search = (val) => {
|
|
console.log(val);
|
|
zhscrollRel.value.searchleMenuTap(keyword.value)
|
|
}
|
|
|
|
const clickIcon = () => {
|
|
console.log(keyword.value);
|
|
zhscrollRel.value.searchleMenuTap(keyword.value)
|
|
}
|
|
|
|
const kcClick = (item) => {
|
|
console.log(item);
|
|
uni.navigateTo({
|
|
url: '/pages/learningCenter/detail?id=' + item.type
|
|
})
|
|
}
|
|
|
|
|
|
onShow(() => {
|
|
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
padding: 24rpx;
|
|
background: linear-gradient(0deg, #F1F3F9 72%, rgba(241, 243, 249, 0.2) 88%);
|
|
height: 100vh;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.xxqd {
|
|
display: grid;
|
|
justify-items: center;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
|
|
.head {
|
|
width: 272rpx;
|
|
height: 60rpx;
|
|
background-image: url(@/static/img/xxqd.png);
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: Source Han Sans;
|
|
font-size: 28rpx;
|
|
font-weight: 350;
|
|
line-height: 30rpx;
|
|
letter-spacing: normal;
|
|
color: #FFFFFF;
|
|
z-index: 1;
|
|
}
|
|
|
|
.main {
|
|
width: 100%;
|
|
height: 410rpx;
|
|
border-radius: 48rpx;
|
|
background: #FFFAF7;
|
|
box-sizing: border-box;
|
|
border: 12rpx solid #DBEDFF;
|
|
padding: 60rpx 24rpx 54rpx 24rpx;
|
|
margin-top: -40rpx;
|
|
display: grid;
|
|
justify-items: center;
|
|
align-items: flex-start;
|
|
|
|
.text {
|
|
display: flex;
|
|
align-items: center;
|
|
font-family: Source Han Sans;
|
|
font-size: 24rpx;
|
|
font-weight: 350;
|
|
line-height: 28rpx;
|
|
letter-spacing: normal;
|
|
/* 距离上次学习已经 */
|
|
color: #0C092A;
|
|
}
|
|
|
|
.hongzi {
|
|
margin-left: 6rpx;
|
|
font-family: Source Han Sans;
|
|
font-size: 24rpx;
|
|
font-weight: 350;
|
|
line-height: 28rpx;
|
|
letter-spacing: normal;
|
|
/* 距离上次学习已经 */
|
|
color: #FE0000;
|
|
}
|
|
|
|
.xxls {
|
|
display: flex;
|
|
margin-top: 20rpx;
|
|
gap: 26rpx;
|
|
|
|
.xxone {
|
|
display: grid;
|
|
align-items: center;
|
|
width: 192rpx;
|
|
|
|
.xxjd {
|
|
margin-top: -34rpx;
|
|
width: 100%;
|
|
height: 34rpx;
|
|
border-radius: 0rpx 0rpx 16rpx 16rpx;
|
|
background: #000000;
|
|
font-family: Source Han Sans;
|
|
font-size: 20rpx;
|
|
font-weight: 350;
|
|
line-height: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
letter-spacing: normal;
|
|
color: #FFFFFF;
|
|
display: grid;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.KClist {
|
|
display: grid;
|
|
|
|
.kcone {
|
|
width: 100%;
|
|
height: 284rpx;
|
|
border-radius: 32rpx;
|
|
background: #FFFFFF;
|
|
display: flex;
|
|
margin-top: 30rpx;
|
|
box-sizing: border-box;
|
|
|
|
.img {
|
|
width: 234rpx;
|
|
height: 284rpx;
|
|
border-radius: 20rpx 0 0 20rpx;
|
|
flex: 1;
|
|
}
|
|
|
|
.right {
|
|
flex: 2;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 20rpx 28rpx 20rpx 20rpx;
|
|
box-sizing: border-box;
|
|
display: grid;
|
|
align-items: center;
|
|
|
|
.title {
|
|
font-family: Source Han Sans;
|
|
font-size: 28rpx;
|
|
font-weight: 350;
|
|
text-align: justify;
|
|
/* 浏览器可能不支持 */
|
|
display: flex;
|
|
align-items: center;
|
|
letter-spacing: normal;
|
|
color: #0C092A;
|
|
}
|
|
|
|
.txt {
|
|
font-family: Source Han Sans;
|
|
font-size: 24rpx;
|
|
font-weight: 350;
|
|
text-align: justify;
|
|
/* 浏览器可能不支持 */
|
|
display: flex;
|
|
align-items: center;
|
|
letter-spacing: normal;
|
|
color: #858494;
|
|
}
|
|
|
|
.bottompart {
|
|
margin-top: 42rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
|
|
.gtsy {
|
|
font-family: Source Han Sans;
|
|
font-size: 20rpx;
|
|
font-weight: 350;
|
|
text-align: justify;
|
|
/* 浏览器可能不支持 */
|
|
display: flex;
|
|
align-items: center;
|
|
letter-spacing: normal;
|
|
color: #007FFF;
|
|
}
|
|
|
|
.data {
|
|
font-family: Source Han Sans;
|
|
font-size: 20rpx;
|
|
font-weight: 350;
|
|
text-align: right;
|
|
display: flex;
|
|
align-items: center;
|
|
letter-spacing: normal;
|
|
color: #858494;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style>
|
|
.u-search {
|
|
margin: 20rpx 0rpx 0 0 !important;
|
|
}
|
|
|
|
.u-search__content {
|
|
background-color: #FFFFFF !important;
|
|
border-radius: 16rpx !important;
|
|
height: 90rpx !important;
|
|
}
|
|
|
|
.u-search__content__input {
|
|
background-color: #FFFFFF !important;
|
|
}
|
|
</style>
|