217 lines
8.5 KiB
Vue
217 lines
8.5 KiB
Vue
<template>
|
||
<view class="aiHelper">
|
||
<view class="aiHelperContainer">
|
||
<!-- 标题区域 -->
|
||
<view class="aiHelperTitle" :style="{'background-image': `url(${aiHelperTitleBackground})`}">
|
||
{{ aiHelperTitle }}
|
||
</view>
|
||
|
||
<!-- AI类型卡片容器 -->
|
||
<view class="aiBox">
|
||
<view class="aiType" v-for="(item, index) in aiType" :key="item.id" @click="goAiType(item)">
|
||
<view class="aiTypeContainer" :style="{'background-image': `url(${item.background})`}">
|
||
<view class="aiLeft" :style="{'background-image': `url(${item.imagePath})`}">
|
||
<view class="aiLeftTitle">{{ item.name }}</view>
|
||
</view>
|
||
<view class="aiRight">
|
||
<view class="aiRightTitle"><text>{{ item.description }}</text></view>
|
||
<view class="aiDescription"><text>开始对话></text></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view><Footer></Footer></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import Footer from '@/components/footer_common.vue';
|
||
import { get, post } from '@/utils/request';
|
||
import { IMAGE_BASE_URL, BASE_URL } from '@/utils/config';
|
||
import {navigateTo} from '@/utils/router.js'
|
||
export default {
|
||
name: 'aiHelper',
|
||
components: { Footer },
|
||
data() {
|
||
return {
|
||
aiHelperTitle: 'AI智能助手',
|
||
aiHelperTitleBackground: '../../static/imgs/ai/title.png',
|
||
aiType: [],
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getData();
|
||
},
|
||
methods: {
|
||
goAiType(item) {
|
||
navigateTo({
|
||
url: `/pages/chat/chatPage?serviceUrl=${item.serviceUrl}&apiKey=${item.apiKey}&id=${item.id}&name=${item.name}&icon=${item.icon}`
|
||
});
|
||
},
|
||
async getData() {
|
||
let params = {
|
||
current: 1,
|
||
pageSize: 10,
|
||
};
|
||
try {
|
||
const res = await get('/api/v1/apps/ai_request', params);
|
||
if (!res || !res.success) {
|
||
throw new Error('获取AI助手失败');
|
||
}
|
||
if (res.data.length > 0) {
|
||
res.data.forEach((item) => {
|
||
item.background = IMAGE_BASE_URL + item.background
|
||
item.imagePath = IMAGE_BASE_URL + item.imagePath
|
||
item.icon = IMAGE_BASE_URL + item.icon
|
||
})
|
||
}
|
||
this.aiType = res.data
|
||
} catch (err) {
|
||
console.error('获取AI助手失败:', err);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 引入变量和混入
|
||
// @import "@/styles/variables.scss"; // 假设你有这个文件，没有可以忽略
|
||
|
||
.aiHelper {
|
||
// 使用安全区域适配，避免底部被遮挡
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
|
||
.aiHelperContainer {
|
||
padding: 30rpx; // 使用rpx单位适配不同屏幕
|
||
box-sizing: border-box; // 确保padding不会增加总宽度
|
||
|
||
.aiHelperTitle {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: #000;
|
||
text-align: center;
|
||
// padding: 20rpx 0 30rpx; // 增加底部内边距
|
||
background-repeat: no-repeat;
|
||
background-position: 50% 80%;
|
||
background-size: 30%;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.aiBox {
|
||
// 增加容器内边距，避免卡片贴边
|
||
padding: 10rpx 0;
|
||
|
||
.aiType {
|
||
// 关键优化：使用固定间距代替百分比，确保不同设备一致
|
||
margin-bottom: 30rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.aiTypeContainer {
|
||
display: flex;
|
||
border-radius: 20rpx; // 更大的圆角更美观
|
||
background-size: cover;
|
||
background-position: 30% 50%;
|
||
background-repeat: no-repeat;
|
||
width: 100%;
|
||
// 关键优化：使用固定高度代替aspect-ratio，避免变形
|
||
height: 320rpx;
|
||
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.15); // 更柔和的阴影
|
||
overflow: hidden; // 防止内容溢出
|
||
|
||
.aiLeft {
|
||
border-radius: 16rpx;
|
||
padding: 5% 0;
|
||
margin-right: 12%;
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
width: 35%;
|
||
position: relative;
|
||
// 增加内边距，避免内容贴边
|
||
padding: 20rpx;
|
||
|
||
.aiLeftTitle {
|
||
font-size: 30rpx;
|
||
font-weight: 900;
|
||
color: #fff;
|
||
text-align: left;
|
||
position: absolute;
|
||
bottom: 20rpx;
|
||
left: 20rpx;
|
||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3); // 增加文字阴影提高可读性
|
||
}
|
||
}
|
||
|
||
.aiRight {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding-right: 30rpx; // 增加右侧内边距
|
||
|
||
.aiRightTitle {
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
color: #000;
|
||
text-align: left;
|
||
margin-bottom: 20rpx;
|
||
line-height: 1.5; // 增加行高，避免文字拥挤
|
||
// 限制最大宽度，防止文字溢出
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.aiDescription {
|
||
font-size: 26rpx;
|
||
font-weight: 700;
|
||
color: #999;
|
||
text-align: right;
|
||
width: 100%;
|
||
padding-top: 10rpx;
|
||
// 增加交互提示
|
||
transition: color 0.3s ease;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 增加hover效果，提升交互体验
|
||
&:active .aiTypeContainer {
|
||
transform: scale(0.98);
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
&:active .aiDescription {
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 响应式适配：针对不同屏幕尺寸调整
|
||
@media screen and (min-width: 750rpx) {
|
||
.aiTypeContainer {
|
||
height: 340rpx !important;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 375rpx) {
|
||
.aiTypeContainer {
|
||
height: 280rpx !important;
|
||
}
|
||
|
||
.aiRightTitle {
|
||
font-size: 28rpx !important;
|
||
}
|
||
}
|
||
</style> |