tianyan/tra-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

课程详情

Browse Source
This commit is contained in:
李泉德
2025-06-20 08:43:24 +08:00
parent 543e1a53eb
commit 1c5c191188
11 changed files with 511 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+88 -68
View File
@@ -1,81 +1,101 @@
<script>
export default {
onLaunch: function() {
// console.log('App Launch')
},
onShow: function() {
// console.log('App Show')
},
onHide: function() {
// console.log('App Hide')
}
export default {
onLaunch: function () {
// console.log('App Launch')
},
onShow: function () {
// console.log('App Show')
},
onHide: function () {
// console.log('App Hide')
}
};
</script>
<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
// @import "@/uni_modules/uview-ui/index.scss";
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
// @import "@/uni_modules/uview-ui/index.scss";
view{
box-sizing: border-box;
}
@font-face {
font-family: 'PingFangSC';
src: url('@/static/font/PingFang-SC.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "PingFangSC";
src: url('@/static/font/PingFang-SC.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
// 解决uview离线环境下没有图标
@font-face {
font-family: 'uicon-iconfont';
src: url('@/static/font/font_2225171_8kdcwk4po24.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
// 解决uview离线环境下没有图标
@font-face {
font-family: "uicon-iconfont";
src: url('@/static/font/font_2225171_8kdcwk4po24.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.max_page {
min-height: 100vh;
}
.mr-10 {
margin-right: 10rpx;
}
.mb-8 {
margin-bottom: 8rpx;
}
.mb-18{
margin-bottom: 18rpx;
}
.mb-64{
margin-bottom: 64rpx;
}
.mb-4 {
margin-bottom: 4rpx;
}
.fz-30{
font-size: 30rpx;
}
.w_100 {
width: 100%;
}
.max_page {
min-height: 100vh;
}
.h_100 {
height: 100%;
}
.w_100 {
width: 100%;
}
.flex {
display: flex;
}
.fw-600 {
font-weight: 600;
}
.img_100 {
width: 100%;
height: 100%;
}
.h_100 {
height: 100%;
}
.fl1 {
flex: 1;
}
.flex {
display: flex;
}
.font_pf {
font-family: 'PingFangSC';
}
.img_100 {
width: 100%;
height: 100%;
}
.ellipsis-text {
white-space: nowrap;
/* 强制不换行 */
overflow: hidden;
/* 超出部分隐藏 */
text-overflow: ellipsis;
/* 超出部分显示省略号 */
}
.fl1 {
flex: 1;
}
.font_pf {
font-family: "PingFangSC";
}
.ellipsis-text {
white-space: nowrap;
/* 强制不换行 */
overflow: hidden;
/* 超出部分隐藏 */
text-overflow: ellipsis;
/* 超出部分显示省略号 */
}
/* 多行文本溢出 */
.multi-line-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
/* 显示的行数 */
overflow: hidden;
}
</style>
/* 多行文本溢出 */
.multi-line-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
/* 显示的行数 */
overflow: hidden;
}
</style>
src/pages.json
+138 -137
View File
@@ -1,139 +1,140 @@
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/study/index",
"style": {
"navigationBarTitleText": "学习",
"app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/course/index",
"style": {
"navigationBarTitleText": "课程中心",
"app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/intelligent_answering/index",
"style": {
"navigationBarTitleText": "智能问答",
"app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/scene/index",
"style": {
"navigationBarTitleText": "场景",
"app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/me/index",
"style": {
"navigationBarTitleText": "我的",
"app-plus": {
"titleNView": false
},
"enablePullDownRefresh": true
}
},
{
"path": "pages/login/login",
"style": {
"navigationBarTitleText": "登录",
"app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/other/web_view",
"style": {
"navigationBarTitleText": "",
"app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/login/ysxy",
"style": {
"navigationBarTitleText": "",
"app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/search/search",
"style": {
"navigationBarTitleText": "",
"app-plus": {
"titleNView": false
}
}
}
],
"tabBar": {
"list": [{
"text": "首页",
"pagePath": "pages/index/index"
},
{
"text": "学习",
"pagePath": "pages/study/index"
},
{
"text": "场景",
"pagePath": "pages/scene/index"
},
{
"text": "我的",
"pagePath": "pages/me/index"
}
],
"color": "#666666",
"selectedColor": "#0066FF",
"fontSize": "16px",
"borderStyle": "white",
"borderColor": "#ffffff",
"height": "70px",
"spacing": "10px",
"midButton": {
"iconPath": "/static/images/icon/fawn.png",
"width": "86px",
"height": "86px",
"iconWidth": "90px"
}
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "AI智能培训",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"navigationStyle": "custom",
"app-plus": {
"titleView": false,
"bounce": "none"
}
},
"uniIdRouter": {}
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/courseDetail/index",
"style": {
"navigationBarTitleText": "课程详情",
"app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/study/index",
"style": {
"navigationBarTitleText": "学习",
"app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/intelligent_answering/index",
"style": {
"navigationBarTitleText": "智能问答",
"app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/scene/index",
"style": {
"navigationBarTitleText": "场景",
"app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/me/index",
"style": {
"navigationBarTitleText": "我的",
"app-plus": {
"titleNView": false
},
"enablePullDownRefresh": true
}
},
{
"path": "pages/login/login",
"style": {
"navigationBarTitleText": "登录",
"app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/other/web_view",
"style": {
"navigationBarTitleText": "",
"app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/login/ysxy",
"style": {
"navigationBarTitleText": "",
"app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/search/search",
"style": {
"navigationBarTitleText": "",
"app-plus": {
"titleNView": false
}
}
}
],
"tabBar": {
"list": [
{
"text": "首页",
"pagePath": "pages/index/index"
},
{
"text": "学习",
"pagePath": "pages/study/index"
},
{
"text": "场景",
"pagePath": "pages/scene/index"
},
{
"text": "我的",
"pagePath": "pages/me/index"
}
],
"color": "#666666",
"selectedColor": "#0066FF",
"fontSize": "16px",
"borderStyle": "white",
"borderColor": "#ffffff",
"height": "70px",
"spacing": "10px",
"midButton": {
"iconPath": "/static/images/icon/fawn.png",
"width": "86px",
"height": "86px",
"iconWidth": "90px"
}
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "AI智能培训",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"navigationStyle": "custom",
"app-plus": {
"titleView": false,
"bounce": "none"
}
},
"uniIdRouter": {}
}
src/pages/courseDetail/index.vue
+249
View File
@@ -0,0 +1,249 @@
<template>
<view class="max_page detail-main">
<image src="/src/static/images/courseDetail/mipmap-xhdpi/bg.png" mode="widthFix" class="back-image"></image>
<view class="detail-body">
<view class="head-title font_pf">
<view class="title-text">课程标题课程标题111111</view>
<view class="title-num">
<view class="num-item">
<image class="title-icon" src="/src/static/images/courseDetail/mipmap-xhdpi/zhishidian.png" mode="widthFix"></image>
<view class="mr-10">知识点</view>
<view class="c-000">4</view>
</view>
<view class="num-item">
<image class="title-icon" src="/src/static/images/courseDetail/mipmap-xhdpi/yixue.png" mode="widthFix"></image>
<view class="mr-10">已学</view>
<view class="c-000">1</view>
</view>
</view>
</view>
<view class="body-box">
<view class="body-tab">
<uv-tabs
class="font_pf"
:list="tabList"
@click="tabSwitch"
:scrollable="false"
line-color="#0066FF"
:active-style="{ color: '#323E57', 'font-weight': 600, 'font-size': '30rpx' }"
:inactive-style="{ color: '#666666', 'font-size': '30rpx' }"
></uv-tabs>
</view>
<view class="course-info">
<view class="info-top font_pf">
<view class="top-left font_pf">
<view class="fz-30 fw-600 mb-8">课程类别</view>
<view class="fz-30 fw-600">核心业务类</view>
</view>
<view class="top-right font_pf">
<view class="rate-text mb-4">评分</view>
<view class="rate-num">7.8</view>
</view>
</view>
<view class="info-middle font_pf">
<view class="fz-30 fw-600 mb-8">发布日期</view>
<view class="fz-30 fw-600">2025-06-04 14:45</view>
</view>
<view class="info-bottom">
<view class="bottom-left">
<view class="mb-64">
<view class="fz-30 font_pf fw-600 mb-18">标签</view>
<view class="label">
<text class="label-item font_pf" v-for="item in 6">零售业务</text>
</view>
</view>
<view class="mb-64">
<view class="fz-30 fw-600 font_pf mb-4">创建人</view>
<view class="fz-30 font_pf fw-600">李少全</view>
</view>
<view class="mb-64">
<view class="fz-30 font_pf fw-600 mb-4">归属部门</view>
<view class="fz-30 font_pf fw-600">机构业务部</view>
</view>
</view>
<view class="bottom-right">
<image src="/src/static/images/courseDetail/mipmap-xhdpi/ditu.png" class="right-img" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</view>
<view class="btn-box font_pf">
<uv-button type="primary">去学习</uv-button>
<uv-button type="primary">去练习</uv-button>
<uv-button type="primary">去考试</uv-button>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
// tab栏
const tabList = ref([{ name: '课程介绍' }, { name: '知识点' }, { name: '评价' }]);
const tabSwitch = (item) => {
console.log(item);
};
onLoad(() => {
console.log('onLoad');
});
</script>
<style lang="scss" scoped>
.detail-main {
background-color: #f5f5f5;
position: relative;
}
.detail-body {
box-sizing: border-box;
height: calc(100vh - 256rpx);
position: absolute;
top: 256rpx;
border-radius: 23rpx 23rpx 0rpx 0rpx;
width: 100%;
display: flex;
flex-direction: column;
}
.body-head {
height: 460rpx;
background-color: red;
}
.back-image {
position: absolute;
width: 100%;
}
.head-title {
border-radius: 24rpx 24rpx 0rpx 0rpx;
height: 162rpx;
background-color: #ffffff;
display: flex;
flex-direction: column;
padding-top: 36rpx;
padding-left: 42rpx;
padding-bottom: 24rpx;
}
.title-text {
font-size: 34rpx;
color: #333333;
font-weight: 600;
margin-bottom: 20rpx;
}
.title-icon {
width: 22rpx;
height: 30rpx;
margin-right: 10rpx;
}
.title-num {
display: flex;
}
.body-box {
background-color: #f5f5f5;
flex: 1;
padding-left: 16rpx;
padding-right: 16rpx;
padding-top: 20rpx;
padding-bottom: 245rpx;
}
.body-tab {
background-color: #ffffff;
border-radius: 22rpx;
height: 92rpx;
// padding-top: 22rpx;
padding-bottom: 22rpx;
margin-bottom: 24rpx;
// :deep(.uv-tabs__wrapper__nav__line) {
// bottom: 10rpx;
// }
}
.course-info {
box-sizing: border-box;
width: 100%;
background-color: #ffffff;
border-radius: 22rpx;
padding-top: 38rpx;
padding-left: 38rpx;
}
.info-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 62rpx;
padding-right: 36rpx;
.top-right {
.rate-text {
text-align: right;
color: #999999;
font-size: 30rpx;
margin-bottom: 4rpx;
}
.rate-num {
color: #0066ff;
font-size: 62rpx;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
}
}
}
.info-middle {
margin-bottom: 35rpx;
padding-right: 36rpx;
}
.info-bottom {
display: flex;
justify-content: space-between;
width: 100%;
}
.bottom-left {
display: flex;
flex-direction: column;
padding-top: 12rpx;
flex: 1;
.label {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.label-item {
text-align: center;
border-radius: 22rpx;
padding: 2rpx 14rpx;
font-size: 22rpx;
margin-right: 14rpx;
background-color: #f1f3f8;
}
}
.bottom-right {
width: 50%;
.right-img {
width: 100%;
height: auto;
object-fit: cover;
}
}
.btn-box {
position: fixed;
bottom: 0;
height: 187rpx;
width: 100%;
display: flex;
padding-top: 37rpx;
justify-content: space-evenly;
background-color: #ffffff;
:deep(.uv-button) {
border-radius: 14rpx;
width: 200rpx;
height: 92rpx;
}
}
.num-item {
display: flex;
align-items: center;
font-size: 30rpx;
margin-right: 30rpx;
color: #666666;
}
.c-000 {
font-weight: 600;
color: #000000;
}
</style>
src/pagesOther.json
+9
View File
@@ -8,6 +8,15 @@
"titleNView": false
}
}
},
{
"path": "pages/courseDetail/index",
"style": {
"navigationBarTitleText": "课程详情",
"app-plus": {
"titleNView": false
}
}
}
],
"tabBar": {
src/static/images/courseDetail/mipmap-xhdpi/bg.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 526 KiB

src/static/images/courseDetail/mipmap-xhdpi/ditu.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

src/static/images/courseDetail/mipmap-xhdpi/yixue.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 601 B

src/static/images/courseDetail/mipmap-xhdpi/zhishidian.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 416 B

src/static/images/courseDetail/课程详情-介绍_slices.zip
BIN
View File
Binary file not shown.
src/uni_modules/uv-ui-tools/libs/css/color.scss
+1 -1
View File
@@ -6,7 +6,7 @@ $uv-border-color: #dadbde !default;
$uv-bg-color: #f3f4f6 !default;
$uv-disabled-color: #c8c9cc !default;
$uv-primary: #3c9cff !default;
$uv-primary: #0066ff !default;
$uv-primary-dark: #398ade !default;
$uv-primary-disabled: #9acafc !default;
$uv-primary-light: #ecf5ff !default;