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-27 16:56:58 +08:00
parent 29a1bbf50c
commit 3d8dda7392
7 changed files with 78 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.development
+2 -2
View File
@@ -7,7 +7,7 @@ ENV = 'development'
#VITE_APP_BASE_API_Url = 'https://aits.jlbank.com.cn:7001'
VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
#VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
# VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7002'
# VITE_APP_BASE_API_Url = 'http://192.168.247.200'
@@ -16,7 +16,7 @@ VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
# dev
# DEV
#VITE_APP_BASE_API_Url = 'http://25.18.122.65:7001'
VITE_APP_BASE_API_Url = 'http://25.18.122.65:7001'
# sit
#VITE_APP_BASE_API_Url = 'http://25.18.122.91:9786'
src/pages/learningTasks/components/details-item.vue
+47 -17
View File
@@ -3,29 +3,30 @@
<!-- 箭头指示 -->
<view class="arrow-div">
<view class="big-arrow">
<image class="img" :src="statusOpen?bigArrow2:bigArrow1" mode=""></image>
<image class="img" :src="statusOpen ? bigArrow2 : bigArrow1" mode=""></image>
</view>
<view class="small-arrow">
<image class="img" src="@/static/images/learningTasks/small-arrow.png" mode=""></image>
</view>
</view>
<view class="idea-div">
<image class="img" src="@/static/images/learningTasks/idea-1.png" mode="aspectFit"></image>
<image class="img" :src="statusOpen ? idea2 : idea1" mode="aspectFit"></image>
</view>
<view class="mid-div">
<view class="title-div">{{ props.item.crsName }}xx{{props.item.status}}</view>
<view class="title-div">{{ props.item.crsName }}</view>
<view class="button-div">
<view class="button button-status-1">
<view class="button" :class="isFinishStudy.className" @click="item_click(item)">
<view class="button-icon">
<image class="img" src="@/static/images/learningTasks/button-1.png" mode="aspectFit"></image>
<image class="img" :src="isFinishStudy.icon" mode="aspectFit"></image>
</view>
<view class="button-text">完成学习</view>
<view class="button-text">{{ isFinishStudy.text }}</view>
</view>
<view class="button button-status-2">
<view class="button" :class="isFinishExam.className" @click="item_click(item)">
<view class="button-icon">
<image class="img" src="@/static/images/learningTasks/button-2.png" mode="aspectFit"></image>
<image class="img" :src="isFinishExam.icon" mode="aspectFit"></image>
</view>
<view class="button-text">完成学习</view>
<view class="button-text">{{ isFinishExam.text }}</view>
</view>
</view>
</view>
@@ -38,8 +39,14 @@
</template>
<script setup>
import bigArrow1 from '@/static/images/learningTasks/big-arrow-1.png'
import bigArrow2 from '@/static/images/learningTasks/big-arrow-2.png'
import bigArrow1 from '@/static/images/learningTasks/big-arrow-1.png';
import bigArrow2 from '@/static/images/learningTasks/big-arrow-2.png';
import idea1 from '@/static/images/learningTasks/idea-1.png';
import idea2 from '@/static/images/learningTasks/idea-2.png';
import button1 from '@/static/images/learningTasks/button-1.png';
import button2 from '@/static/images/learningTasks/button-2.png';
import button3 from '@/static/images/learningTasks/button-3.png';
import button4 from '@/static/images/learningTasks/button-4.png';
import { ref, computed } from 'vue';
const props = defineProps({
item: {
@@ -51,6 +58,24 @@
requset: true
}
});
const emits = defineEmits(['item_click'])
const item_click = (item) => emits('item_click', item)
const buttonStatusDict = {
'01': 'button-status-0',
'02': 'button-status-1',
'03': 'button-status-2'
};
const isFinishStudy = computed(() => ({
className: buttonStatusDict[props.item.isFinishStudy],
text: props.item.isFinishStudy === '02' ? '完成学习' : '去学习',
icon: props.item.isFinishStudy === '02' ? button2 : button1
}));
const isFinishExam = computed(() => ({
className: buttonStatusDict[props.item.isFinishExam],
text: props.item.isFinishStudy === '02' ? '通过考试' : '去考试',
icon: props.item.isFinishStudy === '02' ? button4 : button3
}));
const statusOpen = computed(() => ['01', '02'].includes(props.item.status));
const direction = computed(() => {
const styleArray = [];
@@ -63,14 +88,15 @@
styleArray.push('right');
}
// 00进行中、01已完成、02已超时
const isFinish = props.item.isFinish;
if (isFinish === '01') {
const status = props.item.status;
if (status === '01') {
styleArray.push('unfinished');
} else if (isFinish === '02') {
} else if (status === '02') {
styleArray.push('completed');
} else {
styleArray.push('not_unlocked');
}
console.log('styleArray', styleArray);
return styleArray;
});
@@ -268,9 +294,13 @@
}
}
.button-status-1 {
background-color: #63a1ff;
}
.button-status-2 {
background-color: #6baa1b;
}
.button-status-2 {
background-color: #63a1ff;
}
.button-status-0 {
// background-color: #8aa2c6;
display: none !important;
}
</style>
src/pages/learningTasks/details.vue
+29 -2
View File
@@ -31,8 +31,22 @@
<view class="time-div">
起止时间：{{ detailData.startTm?.substr(0, 10) }}至{{ detailData.endTm?.substr(0, 10) }}
</view>
<view class="fl1"></view>
<!-- 收藏盒子 -->
<view class="collection-div"></view>
<view class="num-item" @click="collect_click(detailData.collectionId)">
<image
v-if="detailData.collectionId"
class="collect-icon"
src="@/static/images/courseDetail/out_collect.png"
mode="widthFix"
></image>
<image
v-else
class="collect-icon"
src="@/static/images/courseDetail/in_collect.png"
mode="widthFix"
></image>
</view>
</view>
<view class="other-div-2">
<!-- 完成人数盒子 -->
@@ -58,7 +72,7 @@
</view>
<!-- 步骤 -->
<view class="step-list-div">
<detailsItem v-for="(item, index) in data_list" :item="item" :index="index"></detailsItem>
<detailsItem v-for="(item, index) in data_list" :item="item" :index="index" @item_click="item_click"></detailsItem>
</view>
</z-paging>
</view>
@@ -274,6 +288,8 @@
}
.other-div-1 {
margin-top: 6rpx;
display: flex;
align-items: center;
.time-div {
font-weight: 400;
font-size: 22rpx;
@@ -281,6 +297,17 @@
line-height: 33rpx;
font-family: Arial, Helvetica, sans-serif;
}
.num-item {
display: flex;
align-items: center;
font-size: 30rpx;
color: #666666;
.collect-icon {
width: 36rpx;
height: 36rpx;
}
}
}
.other-div-2 {
width: 100%;
src/static/images/learningTasks/button-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 823 B

After

Width:  |  Height:  |  Size: 613 B

src/static/images/learningTasks/button-2.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 613 B

After

Width:  |  Height:  |  Size: 511 B

src/static/images/learningTasks/button-3.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 823 B

src/static/images/learningTasks/button-4.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1020 B