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

JLBA202505130001_关于吉林银行新建AI智能培训系统的需求_首页样式

Browse Source
This commit is contained in:
杨航
2026-01-21 10:00:28 +08:00
parent ec517a26ae
commit 8d329cd9b1
11 changed files with 382 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.development.yh
+1 -1
View File
@@ -12,5 +12,5 @@ VITE_APP_BASE_H5_API_Url = 'http://25.18.122.65:7001'
# VITE_APP_BASE_H5_API_Url_TRAAPP = 'http://25.64.32.154:9601'
# VITE_APP_BASE_H5_API_Url_TRAAPP = 'http://25.64.32.158:9601'
# VITE_APP_BASE_H5_API_Url_TRASTUDY = 'http://25.64.32.154:9602'
VITE_APP_BASE_H5_API_Url_TRAASK = 'http://25.64.32.157:9605'
# VITE_APP_BASE_H5_API_Url_TRAASK = 'http://25.64.32.157:9605'
src/pages/course/components/touchBtn.vue
+1 -1
View File
@@ -216,11 +216,11 @@
const isGettingPermission = ref(false)
const isStartNum = ref(0);
const isStopNum = ref(0);
const transLoading = ref(false)
//#ifdef APP-PLUS
// app端
const recordObjCom = ref({});
const IsAndEnv = getPhoneEnvBool('AND');
const transLoading = ref(false)
const initRecord = () => {
recordObjCom.value = uni.getRecorderManager();
unref(recordObjCom)?.onStop((res, duration) => {
src/pages/index/components/calendar.vue
+14 -8
View File
@@ -10,7 +10,7 @@
todayWeek > index ?'is-pass':'',
tipDateList.includes(item)?'is-tip':''
]">
<view class="item-box" @click="chooseDate(item)">
<view class="item-box" @click="chooseDate(item, todayWeek > index)">
{{
nowDayStr === item ?'今':
item.split('-')[2]
@@ -32,7 +32,7 @@
onShow
} from '@dcloudio/uni-app'
const emit = defineEmits(['update:modelValue'])
const emit = defineEmits(['update:modelValue', 'change'])
const props = defineProps({
modelValue: {
default: String,
@@ -54,7 +54,8 @@
}
})
const activeDateShow = ref(1)
const chooseDate = (item) => {
const chooseDate = (item, isDisabled) => {
if (isDisabled) return
activeDate.value = item
}
const nowDate = ref(new Date())
@@ -114,13 +115,15 @@
<style lang="scss" scoped>
$day-width: 54rpx;
.year-box{
.year-box {
height: 50rpx;
line-height: 50rpx;
margin-bottom: 12rpx;
text-align: center;
font-size: 29rpx;
}
.day-box {
width: 100%;
overflow: hidden;
@@ -141,16 +144,18 @@
font-size: 29rpx;
}
&.label-name{
&.label-name {
color: #999;
height: 50rpx;
line-height: 50rpx;
}
&.is-pass {
color: #999
}
&.is-tip{
&::after{
&.is-tip {
&::after {
content: '';
width: 8rpx;
height: 8rpx;
@@ -164,11 +169,12 @@
transform: translateX(-50%);
}
}
.item-box {
width: $day-width;
height: 100%;
text-align: center;
border-radius: calc( $day-width/2);
border-radius: calc($day-width/2);
background-color: #fff;
position: absolute;
left: 50%;
src/pages/index/components/todo-com/course.vue
+30
View File
@@ -0,0 +1,30 @@
<template>
<view class="table-item custom-todo-item">
<view :class="['item-status', dataInfo.status === '11' ? '' : 'in-progress']">
{{dataInfo.status === '11' ? '未开始' :'进行中'}}</view>
<view class="item-title">
<view class="item-type course-type">课程</view>
<view class="item-name">卡拉华师大击杀看来是打算报考打不上卡了卡拉华师大击杀看来是打算报考打不上卡了</view>
</view>
<view class="item-info">
<view class="item-info-item inline-item">更新：{{'2026-01-02'}}</view>
<view class="item-info-item inline-item">已学：{{'454'}}</view>
</view>
<view class="item-btn">去学习</view>
</view>
</template>
<script setup>
const props = defineProps({
dataInfo: {
default: () => ({
type: 1
}),
type: Object
}
})
</script>
<style lang="scss" scoped>
@import './item.scss';
</style>
src/pages/index/components/todo-com/exam.vue
+30
View File
@@ -0,0 +1,30 @@
<template>
<view class="table-item custom-todo-item">
<view :class="['item-status', dataInfo.status === '11' ? '' : 'in-progress']">
{{dataInfo.status === '11' ? '未开始' :'进行中'}}</view>
<view class="item-title">
<view class="item-type exam-type">考试</view>
<view class="item-name">卡拉华师大击杀看来是打算报考打不上卡了</view>
</view>
<view class="item-info">
<view class="item-info-item">起止时间：<text class="color-blue">{{'2026-01-02'}}</text></view>
<view class="item-info-item">完成人数：<text class="color-black">{{'202'}}/{{3033}}</text></view>
</view>
<view class="item-btn">去考试</view>
</view>
</template>
<script setup>
const props = defineProps({
dataInfo: {
default: () => ({
type: 1
}),
type: Object
}
})
</script>
<style lang="scss" scoped>
@import './item.scss';
</style>
src/pages/index/components/todo-com/item.scss
+115
View File
@@ -0,0 +1,115 @@
.custom-todo-item.table-item{
border-bottom: 2rpx solid #efefef;
margin-bottom: 25rpx;
position: relative;
padding-bottom: 32rpx;
&:last-child{
border: 0;
}
.item-status{
width: 100%;
font-size: 29rpx;
line-height: 40rpx;
margin-bottom: 14rpx;
color: #06f;
&.in-progress{
color: #ff8a2d;
}
}
.item-title{
overflow: hidden;
margin-bottom: 25rpx;
padding: 5rpx 0;
.item-type{
float: left;
width: 64rpx;
height: 33rpx;
border-radius: 4rpx;
text-align: center;
font-size: 23rpx;
line-height: 30rpx;
box-sizing: border-box;
margin-right: 12rpx;
&.course-type{
color: #06f;
border: 2rpx solid #06f;
background-color: rgba(0, 102, 255,.2);
}
&.exam-type{
color: rgb(72, 174, 128);
border: 2rpx solid rgb(72, 174, 128);
background-color: rgba(72, 174, 128,.2);
}
&.task-type{
color: rgb(130, 96, 253);
border: 2rpx solid rgb(130, 96, 253);
background-color: rgba(130, 96, 253,.2);
}
&.pk-type{
color: rgb(245, 130, 73);
border: 2rpx solid rgb(245, 130, 73);
background-color: rgba(245, 130, 73,.2);
}
&.sparring-type{
color: rgb(230, 192, 14);
border: 2rpx solid rgb(230, 192, 14);
background-color: rgba(230, 192, 14,.2);
}
}
.item-name{
width: calc(100% - 76rpx);
float: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 29rpx;
line-height: 33rpx;
font-weight: 600;
color: #333;
}
}
.item-info{
min-height: 33rpx;
overflow: hidden;
.item-info-item{
display: block;
color: #666;
font-size: 23rpx;
margin-bottom: 15rpx;
line-height: 33rpx;
height: 33rpx;
&:last-child{
margin-bottom: 0;
}
&.inline-item{
float: left;
margin-bottom: 0;
&+.inline-item{
margin-left: 30rpx;
}
}
}
}
.item-btn{
position: absolute;
background-color: #ebf1ff;
width: 120rpx;
height: 54rpx;
line-height: 54rpx;
color: #2c8ef2;
font-size: 25rpx;
text-align: center;
border-radius: 27rpx;
right: 0;
bottom: 23rpx;
}
}
.color-blue{
color: #06f;
}
.color-black{
color: #333;
}
.inline-item{
float: left;
}
src/pages/index/components/todo-com/pk.vue
+29
View File
@@ -0,0 +1,29 @@
<template>
<view class="table-item custom-todo-item">
<view :class="['item-status', dataInfo.status === '11' ? '' : 'in-progress']">
{{dataInfo.status === '11' ? '未开始' :'进行中'}}</view>
<view class="item-title">
<view class="item-type pk-type">竞赛</view>
<view class="item-name">卡拉华师大击杀看来是打算报考打不上卡了</view>
</view>
<view class="item-info">
<view class="item-info-item">起止时间：<text class="color-blue">{{'2026-01-02'}}</text></view>
</view>
<view class="item-btn">去竞赛</view>
</view>
</template>
<script setup>
const props = defineProps({
dataInfo: {
default: () => ({
type: 1
}),
type: Object
}
})
</script>
<style lang="scss" scoped>
@import './item.scss';
</style>
src/pages/index/components/todo-com/sparring.vue
+31
View File
@@ -0,0 +1,31 @@
<template>
<view class="table-item custom-todo-item">
<view :class="['item-status', dataInfo.status === '11' ? '' : 'in-progress']">
{{dataInfo.status === '11' ? '未开始' :'进行中'}}</view>
<view class="item-title">
<view class="item-type sparring-type">陪练</view>
<view class="item-name">卡拉华师大击杀看来是打算报考打不上卡了</view>
</view>
<view class="item-info">
<view class="item-info-item">截止时间：<text
class="color-blue">{{dataInfo.limitTyp === '01' ? '不限制' : dataInfo.endTm}}</text></view>
<view class="item-info-item">陪练次数：<text class="color-black">{{3033}}</text></view>
</view>
<view class="item-btn">去陪练</view>
</view>
</template>
<script setup>
const props = defineProps({
dataInfo: {
default: () => ({
type: 1
}),
type: Object
}
})
</script>
<style lang="scss" scoped>
@import './item.scss';
</style>
src/pages/index/components/todo-com/task.vue
+66
View File
@@ -0,0 +1,66 @@
<template>
<view class="table-item custom-todo-item">
<view :class="['item-status', dataInfo.status === '11' ? '' : 'in-progress']">
{{dataInfo.status === '11' ? '未开始' :'进行中'}}</view>
<view class="item-title">
<view class="item-type task-type">任务</view>
<view class="item-name">卡拉华师大击杀看来是打算报考打不上卡了</view>
</view>
<view class="item-info">
<view class="item-info-item">起止时间：<text class="color-blue">{{'2026-01-02'}}至{{'2026-01-02'}}</text></view>
<view class="item-info-item inline-item">
完成人数：<text class="color-black">{{'202'}}/{{3033}}</text>
</view>
<view class="item-info-item inline-item">
<view class="bg-block inline-item">
<view class="bg-gray">
<view class="bg-blue" :style="`width: ${2/4 * 100}%;`"></view>
</view>
</view>
<view class="color-blue inline-item">{{'32'}}%</view>
</view>
</view>
<view class="item-btn">做任务</view>
</view>
</template>
<script setup>
const props = defineProps({
dataInfo: {
default: () => ({
type: 1
}),
type: Object
}
})
</script>
<style lang="scss" scoped>
@import './item.scss';
.bg-block {
display: inline-block;
width: 100%;
height: 33rpx;
position: relative;
width: 100rpx;
margin-right: 20rpx;
}
.bg-gray {
width: 100%;
background-color: #ededed;
overflow: hidden;
border-radius: 15rpx;
position: absolute;
top: 8rpx;
left: 0;
height: 16rpx;
.bg-blue {
height: 100%;
float: left;
background-color: #06f;
}
}
</style>
src/pages/index/components/todo-item.vue
+30
View File
@@ -0,0 +1,30 @@
<template>
<taskCom v-if="itemIndex === 1" :dataInfo="props.dataInfo"/>
<pkCom v-else-if="itemIndex === 2" :dataInfo="props.dataInfo"/>
<sparringCom v-else-if="itemIndex === 3" :dataInfo="props.dataInfo"/>
<examCom v-else-if="itemIndex === 4" :dataInfo="props.dataInfo"/>
<courseCom v-else-if="itemIndex === 5" :dataInfo="props.dataInfo"/>
</template>
<script setup>
import courseCom from './todo-com/course.vue'
import taskCom from './todo-com/task.vue'
import pkCom from './todo-com/pk.vue'
import sparringCom from './todo-com/sparring.vue'
import examCom from './todo-com/exam.vue'
const props = defineProps({
dataInfo: {
default: () => ({
type: 1
}),
type: Object
},
itemIndex: {
default: 0,
type: Number
}
})
</script>
<style lang="scss" scoped>
</style>
src/pages/index/components/todo.vue
+35 -9
View File
@@ -1,32 +1,53 @@
<template>
<view class="module_title_div" >
<view class="module_title_div">
<view class="icon icon_1">
<!-- <image class="img" :src="icon"></image> -->
</view>
<view class="text font_pf">待办事项</view>
<view class="text font_pf">我的待办</view>
</view>
<view class="cont-box">
<calendarCom @change="changeDate"/>
{{activeDate}}
<calendarCom @change="changeDate" />
<view class="table-list">
<todoItem v-for="item in 5" :itemIndex="item" @click="handleDetail(item)"></todoItem>
</view>
</view>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue'
import {
ref,
onMounted,
computed
} from 'vue'
import calendarCom from './calendar.vue'
import todoItem from './todo-item.vue'
const activeDate = ref('')
const tableData = ref([])
const pageObj = ref({
totalNum: 0,
page: 1,
limit: 10
})
const changeDate = (date) => {
console.log('date: '+date)
getDataList(date)
}
const getDataList = (date) => {
console.log('date: ' + date)
}
const handleDetail = (item) => {
console.log(item)
}
</script>
<style lang="scss" scoped>
$bg-margin-left: 30rpx;
.module_title_div {
display: flex;
margin: 30rpx $bg-margin-left;
align-items: center;
.icon {
margin-right: 6rpx;
}
@@ -48,13 +69,14 @@
}
.icon_3 {
// margin-top: 10rpx;
.img {
width: 38rpx;
height: 31rpx;
}
}
.title {
font-size: 34rpx;
color: #323e57;
@@ -64,10 +86,14 @@
}
}
.cont-box{
.cont-box {
margin: 0 $bg-margin-left;
background-color: #fff;
border-radius: 22rpx;
padding: 20rpx;
.table-list {
padding: 0 16rpx;
}
}
</style>