590 lines
14 KiB
Vue
590 lines
14 KiB
Vue
<template>
|
||
<view class="main_div max_page">
|
||
<nav-bar></nav-bar>
|
||
<view class="bg_div">
|
||
<!-- 背景图 -->
|
||
<image src="@/static/images/index/bg.png" class="bg_img"></image>
|
||
<!-- 文字logo -->
|
||
<view class="title_logo" @click="common.navigateTo('/pages/login/login')">
|
||
<image src="@/static/images/index/logo_text.png" class="log_img"></image>
|
||
<view class="fl1"></view>
|
||
</view>
|
||
<!-- 搜索框 -->
|
||
<view class="search_div">
|
||
<uv-input shape="circle" :customStyle="customStyles" :placeholderStyle="placeholderStyle"
|
||
placeholder="请输入关键字" suffixIcon="search" :suffixIconStyle="suffixIconStyle">
|
||
</uv-input>
|
||
<view class="message_div">
|
||
<image src="@/static/images/index/message.png" class="message_img"></image>
|
||
<view class="message_text">消息</view>
|
||
<view class="message_num">
|
||
30
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 滚动通知 -->
|
||
<view class="notice_div">
|
||
<uv-notice-bar v-show="notice_text.length" :text="notice_text" :bgColor="null"
|
||
color="rgba(255,255,255,0.7)" fontSize="10px" :speed="40" direction="column"></uv-notice-bar>
|
||
</view>
|
||
<!-- 学习时长和飞天兔子，为了挡住部分兔子只能多一个盒子 -->
|
||
<view class="study_duration_and_profile_div">
|
||
<!-- 飞天兔子 -->
|
||
<view class="profile_div">
|
||
<image src="/static/images/index/fttz.png" class="profile"></image>
|
||
</view>
|
||
<!-- 学习时长 -->
|
||
<view class="study_duration_div">
|
||
|
||
<view class="item">
|
||
<view class="top">累计学习时长</view>
|
||
<view class="bottom">256h</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="top">累计训练时长</view>
|
||
<view class="bottom">224h</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="top">累计考试次数</view>
|
||
<view class="bottom">25</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="navigation_div">
|
||
<view class="group">
|
||
<view class="item">
|
||
<image class="icon" src="@/static/images/index/navigation_course.png"></image>
|
||
<view class="title">课程中心</view>
|
||
</view>
|
||
<view class="item">
|
||
<image class="icon" src="@/static/images/index/navigation_question_answering.png"></image>
|
||
<view class="title">AI问答</view>
|
||
</view>
|
||
<view class="item">
|
||
<image class="icon" src="@/static/images/index/navigation_ai.png"></image>
|
||
<view class="title">AI陪练</view>
|
||
</view>
|
||
<view class="item">
|
||
<image class="icon" src="@/static/images/index/navigation_learning_tasks.png"></image>
|
||
<view class="title">学习任务</view>
|
||
</view>
|
||
</view>
|
||
<view class="group">
|
||
<view class="item">
|
||
<image class="icon" src="@/static/images/index/navigation_examination.png"></image>
|
||
<view class="title">考试中心</view>
|
||
</view>
|
||
<view class="item">
|
||
<image class="icon" src="@/static/images/index/navigation_practice.png"></image>
|
||
<view class="title">竞赛练习</view>
|
||
</view>
|
||
<view class="item">
|
||
<image class="icon" src="@/static/images/index/navigation_wrong_question.png"></image>
|
||
<view class="title">错题本</view>
|
||
</view>
|
||
<view class="item">
|
||
<image class="icon" src="@/static/images/index/navigation_learning_analysis.png"></image>
|
||
<view class="title">学习分析</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 热门课程分模块标题 -->
|
||
<view class="module_title_div">
|
||
<view class="icon">
|
||
<image class="img_100" src="@/static/images/index/hot.png"></image>
|
||
</view>
|
||
<view class="text font_pf">热门课程</view>
|
||
</view>
|
||
<!-- 热门课程 -->
|
||
<view class="hot_class_div">
|
||
<scroll-view class="scroll-view" :scroll-x="true" :show-scrollbar="false">
|
||
<view class="scroll-view-item" v-for="(item,index) in hot_class_list" :key="index">
|
||
<view class="item_div">
|
||
<uv-skeleton :loading="!item.title" :rows="3" avatar avatar-shape="square" :title="false">
|
||
<view class="item">
|
||
<view class="left">
|
||
<image class="img" src="@/static/images/test/1.png"></image>
|
||
</view>
|
||
<view class="right">
|
||
<view class="title ellipsis-text">{{item.title}}</view>
|
||
<view class="note ellipsis-text">
|
||
发布：{{item.date}} 丨已学：{{item.num}}
|
||
</view>
|
||
<view class="button_div">
|
||
<view class="button">去学习</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uv-skeleton>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 推荐课程分模块标题 -->
|
||
<view class="module_title_div">
|
||
<view class="icon">
|
||
<image class="img_100" src="@/static/images/index/recommend.png"></image>
|
||
</view>
|
||
<view class="text font_pf">推荐课程</view>
|
||
</view>
|
||
<!-- 推荐课程 -->
|
||
<view class="hot_class_div">
|
||
<scroll-view class="scroll-view" :scroll-x="true" :show-scrollbar="false">
|
||
<view class="scroll-view-item" v-for="(item,index) in hot_class_list" :key="index">
|
||
<view class="item_div">
|
||
<uv-skeleton :loading="!item.title" :rows="3" avatar avatar-shape="square" :title="false">
|
||
<view class="item">
|
||
<view class="left">
|
||
<image class="img" src="@/static/images/test/1.png"></image>
|
||
</view>
|
||
<view class="right">
|
||
<view class="title ellipsis-text">{{item.title}}</view>
|
||
<view class="note ellipsis-text">
|
||
发布：{{item.date}} 丨已学：{{item.num}}
|
||
</view>
|
||
<view class="button_div">
|
||
<view class="button">去学习</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uv-skeleton>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 最新课程分模块标题 -->
|
||
<view class="module_title_div">
|
||
<view class="icon">
|
||
<image class="img_100" src="@/static/images/index/new.png"></image>
|
||
</view>
|
||
<view class="text font_pf">最新课程</view>
|
||
</view>
|
||
<!-- 最新课程 -->
|
||
<view class="hot_class_div">
|
||
<scroll-view class="scroll-view" :scroll-x="true" :show-scrollbar="false">
|
||
<view class="scroll-view-item" v-for="(item,index) in hot_class_list" :key="index">
|
||
<view class="item_div">
|
||
<uv-skeleton :loading="!item.title" :rows="3" avatar avatar-shape="square" :title="false">
|
||
<view class="item">
|
||
<view class="left">
|
||
<image class="img" src="@/static/images/test/1.png"></image>
|
||
</view>
|
||
<view class="right">
|
||
<view class="title ellipsis-text">{{item.title}}</view>
|
||
<view class="note ellipsis-text">
|
||
发布：{{item.date}} 丨已学：{{item.num}}
|
||
</view>
|
||
<view class="button_div">
|
||
<view class="button">去学习</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uv-skeleton>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="bottom_line">
|
||
<uv-divider text='我是有底线的' lineColor="#9cB0DC" :hairline="true"></uv-divider>
|
||
</view>
|
||
</view>
|
||
|
||
<tabbar-shadow></tabbar-shadow>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
onMounted,
|
||
ref
|
||
} from 'vue'
|
||
import common from '../../common/common'
|
||
|
||
// 静态样式配置
|
||
const customStyles = {
|
||
backgroundColor: "#DCE9FF",
|
||
paddingLeft: "40rpx",
|
||
paddingTop: "5px",
|
||
paddingBottom: "5px",
|
||
}
|
||
const placeholderStyle = 'color:#76A3EB;font-size:26rpx'
|
||
const suffixIconStyle = {
|
||
color: "#2c8ef2",
|
||
fontSize: "28px"
|
||
}
|
||
const notice_text = ref(['绿色金融政策解析与商业银行绿色水水水水水水水水水水水水水', '绿色金融政策解析与商业银行红色'])
|
||
const hot_class_list = ref([{
|
||
img: '',
|
||
title: '',
|
||
date: '',
|
||
num: ''
|
||
}, {
|
||
img: '',
|
||
title: '',
|
||
date: '',
|
||
num: ''
|
||
}])
|
||
onMounted(() => {
|
||
|
||
setTimeout(() => {
|
||
hot_class_list.value = [{
|
||
img: '11',
|
||
title: '最新课程最新课程最新课程程最新课程程最新课程程最新课程',
|
||
date: '2025/4/21',
|
||
num: '44'
|
||
},
|
||
{
|
||
img: '1124',
|
||
title: '最新课程',
|
||
date: '2025/4/21',
|
||
num: '31'
|
||
}
|
||
]
|
||
}, 1000)
|
||
})
|
||
</script>
|
||
|
||
|
||
<style lang="scss" scoped>
|
||
$bg-margin-left: 50rpx;
|
||
|
||
// :deep(.uni-scroll-view-content) {
|
||
// display: flex;
|
||
// }
|
||
|
||
// :deep(.uv-skeleton__wrapper__avatar) {
|
||
// height: 146rpx !important;
|
||
// width: 146rpx !important;
|
||
// border-radius: 16rpx;
|
||
// }
|
||
|
||
.bottom_line{
|
||
|
||
margin: 0 auto;
|
||
width: 240rpx;
|
||
|
||
|
||
}
|
||
.hot_class_div {
|
||
margin-left: $bg-margin-left;
|
||
|
||
.scroll-view {
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
}
|
||
|
||
.scroll-view-item {
|
||
display: inline-block;
|
||
margin-right: 30rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 22rpx;
|
||
box-shadow: #eaeaea 0 0 6rpx;
|
||
padding: 32rpx 22rpx 36rpx 26rpx;
|
||
}
|
||
|
||
|
||
.item_div {
|
||
width: 562rpx;
|
||
display: block;
|
||
}
|
||
|
||
.item {
|
||
display: flex;
|
||
|
||
.left {
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
width: 180rpx;
|
||
height: 146rpx;
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: calc(100% - 180rpx);
|
||
margin-left: 22rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
.title {
|
||
width: 100%;
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.note {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 23rpx;
|
||
color: #666666;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
|
||
}
|
||
|
||
.button_div {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
|
||
|
||
.button {
|
||
text-align: center;
|
||
line-height: 62rpx;
|
||
width: 138rpx;
|
||
height: 62rpx;
|
||
background: #EBF1FF;
|
||
border-radius: 30rpx;
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #0066FF;
|
||
font-style: normal;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.bg_div {
|
||
height: 100%;
|
||
padding-bottom: 30rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
z-index: 0;
|
||
|
||
// 背景图
|
||
.bg_img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 870rpx;
|
||
z-index: -1;
|
||
}
|
||
|
||
// 文字图片
|
||
.title_logo {
|
||
display: flex;
|
||
margin-top: 106rpx;
|
||
margin-left: $bg-margin-left;
|
||
|
||
.log_img {
|
||
margin-left: 10rpx;
|
||
width: 300rpx;
|
||
height: 46rpx;
|
||
|
||
}
|
||
}
|
||
|
||
// 搜索框
|
||
.search_div {
|
||
margin-top: 26rpx;
|
||
margin-left: $bg-margin-left;
|
||
width: 390rpx;
|
||
height: 70rpx;
|
||
z-index: 20;
|
||
display: flex;
|
||
position: relative;
|
||
|
||
.message_div {
|
||
position: absolute;
|
||
top: 4rpx;
|
||
right: -56rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.message_img {
|
||
width: 32rpx;
|
||
height: 36rpx;
|
||
}
|
||
.message_text{
|
||
margin-top: 4rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #FFFFFF;
|
||
line-height: 24rpx;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.message_num {
|
||
position: absolute;
|
||
top: 2rpx;
|
||
right: -4rpx;
|
||
padding: 1rpx 1rpx 1rpx 2rpx;
|
||
background-color: #ff1926;
|
||
border-radius: 10rpx;
|
||
width: 22rpx;
|
||
height: 20rpx;
|
||
font-size: 10rpx;
|
||
color: #ffffff;
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
//滚动消息
|
||
.notice_div {
|
||
// margin-top: 10rpx;
|
||
margin-left: $bg-margin-left;
|
||
width: 400rpx;
|
||
height: 74rpx;
|
||
font-weight: 500;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
::v-deep .u-notice-bar {
|
||
padding: 14rpx 0;
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
::v-deep .u-notice__left-icon {
|
||
margin-right: 5rpx;
|
||
}
|
||
}
|
||
|
||
// 学习时长
|
||
.study_duration_and_profile_div {
|
||
margin: 0 $bg-margin-left;
|
||
position: relative;
|
||
|
||
//飞天兔子
|
||
.profile_div {
|
||
position: absolute;
|
||
top: -236rpx;
|
||
right: -20rpx;
|
||
z-index: -1;
|
||
|
||
.profile {
|
||
width: 278rpx;
|
||
height: 370rpx;
|
||
}
|
||
}
|
||
|
||
.study_duration_div {
|
||
height: 162rpx;
|
||
background: linear-gradient(180deg, rgba(238, 246, 255, 0.65) 0%, #C5DFFD 4%, #FFFFFF 100%);
|
||
border-radius: 23rpx;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
z-index: 20;
|
||
|
||
.item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
|
||
.top {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 25rpx;
|
||
color: #666666;
|
||
line-height: 35rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
}
|
||
.bottom {
|
||
margin-top: 5%;
|
||
font-weight: bold;
|
||
font-size: 50rpx;
|
||
color: #000000;
|
||
line-height: 58rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-align: center;
|
||
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
|
||
// 快捷导航栏
|
||
.navigation_div {
|
||
margin: 16rpx $bg-margin-left 0 $bg-margin-left;
|
||
height: 338rpx;
|
||
background-color: #FFFFFF;
|
||
border-radius: 23rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
box-shadow: #E6E8EF 0 5rpx 20rpx;
|
||
|
||
.group {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 10rpx 10rpx;
|
||
// background-color: red;
|
||
}
|
||
|
||
.item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
// background-color: red;
|
||
.icon {
|
||
width: 88rpx;
|
||
height: 86rpx;
|
||
}
|
||
|
||
.title {
|
||
margin-top: 10rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 25rpx;
|
||
color: #323E57;
|
||
line-height: 35rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
.module_title_div {
|
||
display: flex;
|
||
margin: 30rpx $bg-margin-left;
|
||
align-items: center;
|
||
|
||
.icon {
|
||
width: 34rpx;
|
||
height: 38rpx;
|
||
margin-right: 6rpx;
|
||
|
||
}
|
||
|
||
.title {
|
||
font-size: 34rpx;
|
||
color: #323E57;
|
||
|
||
line-height: 46rpx;
|
||
text-align: left;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.main_div {
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-color: #F6F8FF;
|
||
}
|
||
</style> |