JLBA202505130001_关于吉林银行新建AI智能培训系统的需求_开发提示
This commit is contained in:
田岩
+2
-2
@@ -7,7 +7,7 @@ ENV = 'development'
|
||||
#VITE_APP_BASE_API_Url = 'https://aits.jlbank.com.cn:7002'
|
||||
|
||||
|
||||
#VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7002'
|
||||
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'
|
||||
@@ -21,7 +21,7 @@ ENV = 'development'
|
||||
|
||||
# sit
|
||||
|
||||
VITE_APP_BASE_API_Url = 'http://25.18.122.91:9786'
|
||||
#VITE_APP_BASE_API_Url = 'http://25.18.122.91:9786'
|
||||
|
||||
|
||||
# UAT
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<view class="score" v-if="['settlement', 'examination', 'pk_in'].includes(props.mode)">
|
||||
{{ item.tgtGrade }}分
|
||||
</view>
|
||||
<view class="score answerMethod" v-if="['study','examination', 'practice'].includes(props.mode)">
|
||||
<view class="score answerMethod" v-if="['study','examination', 'practice'].includes(props.mode) && qnsTyp === 'ES'">
|
||||
{{ answerMethod }}
|
||||
</view>
|
||||
<view class="fl1"></view>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<template>
|
||||
<view class="talk-div">
|
||||
<view class="talk-list-max">
|
||||
<view class="talk-list-top-3"></view>
|
||||
<view class="talk-list-top-2"></view>
|
||||
@@ -9,59 +10,53 @@
|
||||
{{ talkList }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="answerTipButton">回答提示</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup >
|
||||
const textText = '你核心的诉求现在非常明确了：文字必须放在单个不拆分的盒子里（这样才能滑动查看上方内容），同时要实现两个效果 —— 一是文字整体越往上颜色越淡，二是底部新增文字时，内容能缓慢向上挤（有平滑动画），且不能用 JS 拆分文字行。我现在提供的方案完全满足你的要求：无 JS 拆分、单个文字盒子、支持滑动查看上方内容、文字越往上越淡、新增文字缓慢上挤动画，所有效果都通过 CSS 核心实现，JS 仅做 “追加文字” 的极简操作（无任何拆分逻辑）。'
|
||||
<script setup>
|
||||
const textText =
|
||||
'你核心的诉求现在非常明确了：文字必须放在单个不拆分的盒子里（这样才能滑动查看上方内容），同时要实现两个效果 —— 一是文字整体越往上颜色越淡，二是底部新增文字时，内容能缓慢向上挤（有平滑动画），且不能用 JS 拆分文字行。我现在提供的方案完全满足你的要求：无 JS 拆分、单个文字盒子、支持滑动查看上方内容、文字越往上越淡、新增文字缓慢上挤动画，所有效果都通过 CSS 核心实现，JS 仅做 “追加文字” 的极简操作（无任何拆分逻辑）。';
|
||||
import { ref } from 'vue';
|
||||
const talkList = ref('');
|
||||
// 初始化文本索引，记录当前添加到哪个位置
|
||||
let currentIndex = 0;
|
||||
// 每次添加的字符数（1=逐个加，2=逐两个加，可自行调整）
|
||||
const step = 2;
|
||||
|
||||
const step = 2;
|
||||
|
||||
// 定时器逐字/逐两字添加文本
|
||||
const addTextTimer = setInterval(() => {
|
||||
// 截取从当前索引开始的step个字符
|
||||
const addStr = textText.slice(currentIndex, currentIndex + step);
|
||||
// 拼接到talkList
|
||||
talkList.value += addStr;
|
||||
// 更新索引
|
||||
currentIndex += step;
|
||||
|
||||
// 当索引超过文本长度时，清除定时器（添加完成）
|
||||
if (currentIndex >= textText.length) {
|
||||
clearInterval(addTextTimer);
|
||||
console.log('文本添加完成');
|
||||
}
|
||||
// 截取从当前索引开始的step个字符
|
||||
const addStr = textText.slice(currentIndex, currentIndex + step);
|
||||
// 拼接到talkList
|
||||
talkList.value += addStr;
|
||||
// 更新索引
|
||||
currentIndex += step;
|
||||
|
||||
// 当索引超过文本长度时，清除定时器（添加完成）
|
||||
if (currentIndex >= textText.length) {
|
||||
clearInterval(addTextTimer);
|
||||
console.log('文本添加完成');
|
||||
}
|
||||
}, 70); // 70ms间隔，和你原来的节奏一致
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$talk-text-line-height: 48rpx;
|
||||
$talk-text-font-size: 32rpx;
|
||||
.talk-div{
|
||||
|
||||
}
|
||||
.talk-list-max {
|
||||
left: 30rpx;
|
||||
top: calc(150rpx + var(--status-bar-height) + 200rpx + 100rpx);
|
||||
position: absolute;
|
||||
// left: 0;
|
||||
// top: calc(150rpx + var(--status-bar-height) + 200rpx + 150rpx);
|
||||
position: relative;
|
||||
width: calc(100% - 60rpx);
|
||||
height: $talk-text-line-height * 6;
|
||||
|
||||
overflow: hidden;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, .9), rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .1) 60%, rgba(0, 0, 0, 0) 100%);
|
||||
/* 核心修正1：补全-webkit-前缀（小程序必须加） */
|
||||
// background: linear-gradient(to top, #ffffff 100%, rgba(255,255,255,0.2) 0%);
|
||||
background-color: red;
|
||||
-webkit-background-clip: text; /* webkit内核必加 */
|
||||
background-clip: text;
|
||||
color: transparent; /* 文字透明，透出渐变背景 */
|
||||
|
||||
/* 核心修正2：兜底（若渐变失效，显示基础文字色） */
|
||||
// color: rgba(255,255,255,0.8);
|
||||
white-space: pre-wrap;
|
||||
.talk-list {
|
||||
// background-color: red;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
@@ -73,12 +68,17 @@
|
||||
overflow: hidden; /* 隐藏超出max-height的内容 */
|
||||
min-height: 48rpx;
|
||||
line-height: $talk-text-line-height;
|
||||
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
// transition: all 0.5s ease-out;
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.answerTipButton {
|
||||
width: 160rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #2688F9;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -324,7 +324,12 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.talk-list{
|
||||
left: 30rpx;
|
||||
top: calc(150rpx + var(--status-bar-height) + 200rpx + 150rpx);
|
||||
position: absolute;
|
||||
width: calc(100% - 60rpx);
|
||||
}
|
||||
.isVideo {
|
||||
// background-color: red;
|
||||
.role-info {
|
||||
|
||||
Reference in New Issue
Block a user