AI问答框架

This commit is contained in:
zhonghua.li
2026-03-29 20:11:22 +08:00
parent 703fc70a17
commit d14ef1ef05
17 changed files with 2055 additions and 16 deletions

View File

@@ -0,0 +1,173 @@
<template>
<view class="qa-page">
<view class="page-header">
<view class="nav-bar">
<view class="nav-left" @click="goBack">
<text class="back-icon"></text>
</view>
<text class="nav-title">售后问答</text>
</view>
</view>
<scroll-view class="content-scroll" scroll-y="true">
<view class="intro-card">
<text class="intro-title">说明</text>
<text class="intro-body">成交后与履约相关的问题安装调试维修质保范围与期限退换补件投诉升级路径等是延续信任与口碑的关键触点</text>
</view>
<view class="section">
<text class="section-title">典型问题</text>
<view class="bullet" v-for="(t, i) in questions" :key="i">
<text class="bullet-dot"></text>
<text class="bullet-text">{{ t }}</text>
</view>
</view>
<view class="tip-card">
<text class="tip-label">应对关键</text>
<text class="tip-body">说清时效与责任人谁接单多久响应书面或工单留痕超出权限的部分主动升级并给时间节点避免空承诺</text>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
questions: [
'安装大概要多久?收费吗?',
'质保多久?哪些情况不保?',
'出问题了找谁?多久能上门?'
]
};
},
methods: {
goBack() {
uni.navigateBack();
}
}
};
</script>
<style scoped>
.qa-page {
min-height: 100vh;
background: #f8f9fa;
}
.page-header {
background: #ffffff;
border-bottom: 1rpx solid #e9ecef;
}
.nav-bar {
display: flex;
align-items: center;
height: 88rpx;
padding: 0 30rpx;
}
.nav-left {
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
}
.back-icon {
font-size: 36rpx;
color: #333;
}
.nav-title {
flex: 1;
text-align: center;
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.content-scroll {
height: calc(100vh - 88rpx);
}
.intro-card {
margin: 24rpx 30rpx;
padding: 28rpx;
background: #fff;
border-radius: 16rpx;
}
.intro-title {
display: block;
font-size: 28rpx;
font-weight: 600;
color: #333;
margin-bottom: 16rpx;
}
.intro-body {
font-size: 26rpx;
color: #555;
line-height: 1.6;
}
.section {
margin: 0 30rpx 24rpx;
padding: 28rpx;
background: #fff;
border-radius: 16rpx;
}
.section-title {
display: block;
font-size: 28rpx;
font-weight: 600;
color: #333;
margin-bottom: 20rpx;
}
.bullet {
display: flex;
margin-bottom: 12rpx;
}
.bullet-dot {
margin-right: 12rpx;
color: #007AFF;
font-size: 28rpx;
line-height: 1.5;
}
.bullet-text {
flex: 1;
font-size: 26rpx;
color: #555;
line-height: 1.5;
}
.tip-card {
margin: 0 30rpx 40rpx;
padding: 28rpx;
background: #f0f7ff;
border-radius: 16rpx;
border: 1rpx solid #d0e3fc;
}
.tip-label {
display: block;
font-size: 26rpx;
font-weight: 600;
color: #007AFF;
margin-bottom: 12rpx;
}
.tip-body {
font-size: 26rpx;
color: #333;
line-height: 1.6;
}
</style>

View File

@@ -0,0 +1,173 @@
<template>
<view class="qa-page">
<view class="page-header">
<view class="nav-bar">
<view class="nav-left" @click="goBack">
<text class="back-icon"></text>
</view>
<text class="nav-title">竞品类问答</text>
</view>
</view>
<scroll-view class="content-scroll" scroll-y="true">
<view class="intro-card">
<text class="intro-title">对比选择</text>
<text class="intro-body">客户在你和其他品牌之间摇摆需要差异化说服</text>
</view>
<view class="section">
<text class="section-title">典型问题</text>
<view class="bullet" v-for="(t, i) in questions" :key="i">
<text class="bullet-dot"></text>
<text class="bullet-text">{{ t }}</text>
</view>
</view>
<view class="tip-card">
<text class="tip-label">应对关键</text>
<text class="tip-body">不贬损竞品客户在意维度做对比表交付材质售后落地案例把差异落到可验证的事实与承诺上</text>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
questions: [
'你家和 XX 品牌有什么区别?',
'为什么选你不选别家?',
'他们说得也很好,你们强在哪?'
]
};
},
methods: {
goBack() {
uni.navigateBack();
}
}
};
</script>
<style scoped>
.qa-page {
min-height: 100vh;
background: #f8f9fa;
}
.page-header {
background: #ffffff;
border-bottom: 1rpx solid #e9ecef;
}
.nav-bar {
display: flex;
align-items: center;
height: 88rpx;
padding: 0 30rpx;
}
.nav-left {
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
}
.back-icon {
font-size: 36rpx;
color: #333;
}
.nav-title {
flex: 1;
text-align: center;
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.content-scroll {
height: calc(100vh - 88rpx);
}
.intro-card {
margin: 24rpx 30rpx;
padding: 28rpx;
background: #fff;
border-radius: 16rpx;
}
.intro-title {
display: block;
font-size: 28rpx;
font-weight: 600;
color: #333;
margin-bottom: 16rpx;
}
.intro-body {
font-size: 26rpx;
color: #555;
line-height: 1.6;
}
.section {
margin: 0 30rpx 24rpx;
padding: 28rpx;
background: #fff;
border-radius: 16rpx;
}
.section-title {
display: block;
font-size: 28rpx;
font-weight: 600;
color: #333;
margin-bottom: 20rpx;
}
.bullet {
display: flex;
margin-bottom: 12rpx;
}
.bullet-dot {
margin-right: 12rpx;
color: #007AFF;
font-size: 28rpx;
line-height: 1.5;
}
.bullet-text {
flex: 1;
font-size: 26rpx;
color: #555;
line-height: 1.5;
}
.tip-card {
margin: 0 30rpx 40rpx;
padding: 28rpx;
background: #f0f7ff;
border-radius: 16rpx;
border: 1rpx solid #d0e3fc;
}
.tip-label {
display: block;
font-size: 26rpx;
font-weight: 600;
color: #007AFF;
margin-bottom: 12rpx;
}
.tip-body {
font-size: 26rpx;
color: #333;
line-height: 1.6;
}
</style>

View File

@@ -0,0 +1,173 @@
<template>
<view class="qa-page">
<view class="page-header">
<view class="nav-bar">
<view class="nav-left" @click="goBack">
<text class="back-icon"></text>
</view>
<text class="nav-title">决策类问答</text>
</view>
</view>
<scroll-view class="content-scroll" scroll-y="true">
<view class="intro-card">
<text class="intro-title">临门一脚</text>
<text class="intro-body">客户有需求认可产品但犹豫是否立刻下单</text>
</view>
<view class="section">
<text class="section-title">典型问题</text>
<view class="bullet" v-for="(t, i) in questions" :key="i">
<text class="bullet-dot"></text>
<text class="bullet-text">{{ t }}</text>
</view>
</view>
<view class="tip-card">
<text class="tip-label">应对关键</text>
<text class="tip-body">制造紧迫感限时 / 限量给出行动理由推动快速决策</text>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
questions: [
'我再考虑考虑 / 和家人商量下。',
'不急,以后再说。',
'现在买有什么额外好处?'
]
};
},
methods: {
goBack() {
uni.navigateBack();
}
}
};
</script>
<style scoped>
.qa-page {
min-height: 100vh;
background: #f8f9fa;
}
.page-header {
background: #ffffff;
border-bottom: 1rpx solid #e9ecef;
}
.nav-bar {
display: flex;
align-items: center;
height: 88rpx;
padding: 0 30rpx;
}
.nav-left {
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
}
.back-icon {
font-size: 36rpx;
color: #333;
}
.nav-title {
flex: 1;
text-align: center;
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.content-scroll {
height: calc(100vh - 88rpx);
}
.intro-card {
margin: 24rpx 30rpx;
padding: 28rpx;
background: #fff;
border-radius: 16rpx;
}
.intro-title {
display: block;
font-size: 28rpx;
font-weight: 600;
color: #333;
margin-bottom: 16rpx;
}
.intro-body {
font-size: 26rpx;
color: #555;
line-height: 1.6;
}
.section {
margin: 0 30rpx 24rpx;
padding: 28rpx;
background: #fff;
border-radius: 16rpx;
}
.section-title {
display: block;
font-size: 28rpx;
font-weight: 600;
color: #333;
margin-bottom: 20rpx;
}
.bullet {
display: flex;
margin-bottom: 12rpx;
}
.bullet-dot {
margin-right: 12rpx;
color: #007AFF;
font-size: 28rpx;
line-height: 1.5;
}
.bullet-text {
flex: 1;
font-size: 26rpx;
color: #555;
line-height: 1.5;
}
.tip-card {
margin: 0 30rpx 40rpx;
padding: 28rpx;
background: #f0f7ff;
border-radius: 16rpx;
border: 1rpx solid #d0e3fc;
}
.tip-label {
display: block;
font-size: 26rpx;
font-weight: 600;
color: #007AFF;
margin-bottom: 12rpx;
}
.tip-body {
font-size: 26rpx;
color: #333;
line-height: 1.6;
}
</style>

View File

@@ -0,0 +1,173 @@
<template>
<view class="qa-page">
<view class="page-header">
<view class="nav-bar">
<view class="nav-left" @click="goBack">
<text class="back-icon"></text>
</view>
<text class="nav-title">需求类问答</text>
</view>
</view>
<scroll-view class="content-scroll" scroll-y="true">
<view class="intro-card">
<text class="intro-title">核心基础</text>
<text class="intro-body">客户想确认产品 / 服务是否匹配自身需求是成交的前提</text>
</view>
<view class="section">
<text class="section-title">典型问题</text>
<view class="bullet" v-for="(t, i) in questions" :key="i">
<text class="bullet-dot"></text>
<text class="bullet-text">{{ t }}</text>
</view>
</view>
<view class="tip-card">
<text class="tip-label">应对关键</text>
<text class="tip-body">深挖痛点精准匹配产品价值不盲目推销</text>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
questions: [
'这能解决我的什么问题?',
'适合我这类情况吗?',
'有没有针对 XX 场景的方案?'
]
};
},
methods: {
goBack() {
uni.navigateBack();
}
}
};
</script>
<style scoped>
.qa-page {
min-height: 100vh;
background: #f8f9fa;
}
.page-header {
background: #ffffff;
border-bottom: 1rpx solid #e9ecef;
}
.nav-bar {
display: flex;
align-items: center;
height: 88rpx;
padding: 0 30rpx;
}
.nav-left {
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
}
.back-icon {
font-size: 36rpx;
color: #333;
}
.nav-title {
flex: 1;
text-align: center;
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.content-scroll {
height: calc(100vh - 88rpx);
}
.intro-card {
margin: 24rpx 30rpx;
padding: 28rpx;
background: #fff;
border-radius: 16rpx;
}
.intro-title {
display: block;
font-size: 28rpx;
font-weight: 600;
color: #333;
margin-bottom: 16rpx;
}
.intro-body {
font-size: 26rpx;
color: #555;
line-height: 1.6;
}
.section {
margin: 0 30rpx 24rpx;
padding: 28rpx;
background: #fff;
border-radius: 16rpx;
}
.section-title {
display: block;
font-size: 28rpx;
font-weight: 600;
color: #333;
margin-bottom: 20rpx;
}
.bullet {
display: flex;
margin-bottom: 12rpx;
}
.bullet-dot {
margin-right: 12rpx;
color: #007AFF;
font-size: 28rpx;
line-height: 1.5;
}
.bullet-text {
flex: 1;
font-size: 26rpx;
color: #555;
line-height: 1.5;
}
.tip-card {
margin: 0 30rpx 40rpx;
padding: 28rpx;
background: #f0f7ff;
border-radius: 16rpx;
border: 1rpx solid #d0e3fc;
}
.tip-label {
display: block;
font-size: 26rpx;
font-weight: 600;
color: #007AFF;
margin-bottom: 12rpx;
}
.tip-body {
font-size: 26rpx;
color: #333;
line-height: 1.6;
}
</style>

View File

@@ -0,0 +1,173 @@
<template>
<view class="qa-page">
<view class="page-header">
<view class="nav-bar">
<view class="nav-left" @click="goBack">
<text class="back-icon"></text>
</view>
<text class="nav-title">通用问答</text>
</view>
</view>
<scroll-view class="content-scroll" scroll-y="true">
<view class="intro-card">
<text class="intro-title">说明</text>
<text class="intro-body">面向未归入具体场景的日常咨询产品基础介绍服务范围预约流程交货周期等先澄清客户真正想知道什么再分点回答避免一次抛出过多信息</text>
</view>
<view class="section">
<text class="section-title">可优先确认</text>
<view class="bullet" v-for="(t, i) in points" :key="i">
<text class="bullet-dot"></text>
<text class="bullet-text">{{ t }}</text>
</view>
</view>
<view class="tip-card">
<text class="tip-label">应对关键</text>
<text class="tip-body">先倾听再结构化回答复杂问题拆成结论 + 理由 + 下一步并反问一句确认是否讲清楚</text>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
points: [
'客户当前处在哪个环节(了解 / 对比 / 即将下单)',
'是否有明确使用场景或限制条件(空间、预算、时间)',
'是否需要书面资料或样品/现场勘查'
]
};
},
methods: {
goBack() {
uni.navigateBack();
}
}
};
</script>
<style scoped>
.qa-page {
min-height: 100vh;
background: #f8f9fa;
}
.page-header {
background: #ffffff;
border-bottom: 1rpx solid #e9ecef;
}
.nav-bar {
display: flex;
align-items: center;
height: 88rpx;
padding: 0 30rpx;
}
.nav-left {
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
}
.back-icon {
font-size: 36rpx;
color: #333;
}
.nav-title {
flex: 1;
text-align: center;
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.content-scroll {
height: calc(100vh - 88rpx);
}
.intro-card {
margin: 24rpx 30rpx;
padding: 28rpx;
background: #fff;
border-radius: 16rpx;
}
.intro-title {
display: block;
font-size: 28rpx;
font-weight: 600;
color: #333;
margin-bottom: 16rpx;
}
.intro-body {
font-size: 26rpx;
color: #555;
line-height: 1.6;
}
.section {
margin: 0 30rpx 24rpx;
padding: 28rpx;
background: #fff;
border-radius: 16rpx;
}
.section-title {
display: block;
font-size: 28rpx;
font-weight: 600;
color: #333;
margin-bottom: 20rpx;
}
.bullet {
display: flex;
margin-bottom: 12rpx;
}
.bullet-dot {
margin-right: 12rpx;
color: #007AFF;
font-size: 28rpx;
line-height: 1.5;
}
.bullet-text {
flex: 1;
font-size: 26rpx;
color: #555;
line-height: 1.5;
}
.tip-card {
margin: 0 30rpx 40rpx;
padding: 28rpx;
background: #f0f7ff;
border-radius: 16rpx;
border: 1rpx solid #d0e3fc;
}
.tip-label {
display: block;
font-size: 26rpx;
font-weight: 600;
color: #007AFF;
margin-bottom: 12rpx;
}
.tip-body {
font-size: 26rpx;
color: #333;
line-height: 1.6;
}
</style>

View File

@@ -0,0 +1,173 @@
<template>
<view class="qa-page">
<view class="page-header">
<view class="nav-bar">
<view class="nav-left" @click="goBack">
<text class="back-icon"></text>
</view>
<text class="nav-title">抗拒点问答</text>
</view>
</view>
<scroll-view class="content-scroll" scroll-y="true">
<view class="intro-card">
<text class="intro-title">说明</text>
<text class="intro-body">客户在语言上未直接拒绝但用拖延借口或模糊理由保持距离需要先分辨真顾虑还是礼貌推脱</text>
</view>
<view class="section">
<text class="section-title">典型表现</text>
<view class="bullet" v-for="(t, i) in questions" :key="i">
<text class="bullet-dot"></text>
<text class="bullet-text">{{ t }}</text>
</view>
</view>
<view class="tip-card">
<text class="tip-label">应对关键</text>
<text class="tip-body">用小闭环提问澄清真实障碍预算决策人对比项时间节点给出可试的一步看案例到现场小单试点降低心理压力</text>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
questions: [
'我回去再看看吧。',
'现在手头紧 / 最近太忙了。',
'和朋友那套差不多,我再比比。'
]
};
},
methods: {
goBack() {
uni.navigateBack();
}
}
};
</script>
<style scoped>
.qa-page {
min-height: 100vh;
background: #f8f9fa;
}
.page-header {
background: #ffffff;
border-bottom: 1rpx solid #e9ecef;
}
.nav-bar {
display: flex;
align-items: center;
height: 88rpx;
padding: 0 30rpx;
}
.nav-left {
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
}
.back-icon {
font-size: 36rpx;
color: #333;
}
.nav-title {
flex: 1;
text-align: center;
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.content-scroll {
height: calc(100vh - 88rpx);
}
.intro-card {
margin: 24rpx 30rpx;
padding: 28rpx;
background: #fff;
border-radius: 16rpx;
}
.intro-title {
display: block;
font-size: 28rpx;
font-weight: 600;
color: #333;
margin-bottom: 16rpx;
}
.intro-body {
font-size: 26rpx;
color: #555;
line-height: 1.6;
}
.section {
margin: 0 30rpx 24rpx;
padding: 28rpx;
background: #fff;
border-radius: 16rpx;
}
.section-title {
display: block;
font-size: 28rpx;
font-weight: 600;
color: #333;
margin-bottom: 20rpx;
}
.bullet {
display: flex;
margin-bottom: 12rpx;
}
.bullet-dot {
margin-right: 12rpx;
color: #007AFF;
font-size: 28rpx;
line-height: 1.5;
}
.bullet-text {
flex: 1;
font-size: 26rpx;
color: #555;
line-height: 1.5;
}
.tip-card {
margin: 0 30rpx 40rpx;
padding: 28rpx;
background: #f0f7ff;
border-radius: 16rpx;
border: 1rpx solid #d0e3fc;
}
.tip-label {
display: block;
font-size: 26rpx;
font-weight: 600;
color: #007AFF;
margin-bottom: 12rpx;
}
.tip-body {
font-size: 26rpx;
color: #333;
line-height: 1.6;
}
</style>

View File

@@ -0,0 +1,173 @@
<template>
<view class="qa-page">
<view class="page-header">
<view class="nav-bar">
<view class="nav-left" @click="goBack">
<text class="back-icon"></text>
</view>
<text class="nav-title">价格类问答</text>
</view>
</view>
<scroll-view class="content-scroll" scroll-y="true">
<view class="intro-card">
<text class="intro-title">高频阻力</text>
<text class="intro-body">客户关注成本性价比是最常见的成交障碍</text>
</view>
<view class="section">
<text class="section-title">典型问题</text>
<view class="bullet" v-for="(t, i) in questions" :key="i">
<text class="bullet-dot"></text>
<text class="bullet-text">{{ t }}</text>
</view>
</view>
<view class="tip-card">
<text class="tip-label">应对关键</text>
<text class="tip-body">塑造价值谈价格用效果售后长期成本抵消价格顾虑</text>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
questions: [
'太贵了,能不能便宜点?',
'有优惠 / 折扣 / 赠品吗?',
'别家比你家便宜。'
]
};
},
methods: {
goBack() {
uni.navigateBack();
}
}
};
</script>
<style scoped>
.qa-page {
min-height: 100vh;
background: #f8f9fa;
}
.page-header {
background: #ffffff;
border-bottom: 1rpx solid #e9ecef;
}
.nav-bar {
display: flex;
align-items: center;
height: 88rpx;
padding: 0 30rpx;
}
.nav-left {
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
}
.back-icon {
font-size: 36rpx;
color: #333;
}
.nav-title {
flex: 1;
text-align: center;
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.content-scroll {
height: calc(100vh - 88rpx);
}
.intro-card {
margin: 24rpx 30rpx;
padding: 28rpx;
background: #fff;
border-radius: 16rpx;
}
.intro-title {
display: block;
font-size: 28rpx;
font-weight: 600;
color: #333;
margin-bottom: 16rpx;
}
.intro-body {
font-size: 26rpx;
color: #555;
line-height: 1.6;
}
.section {
margin: 0 30rpx 24rpx;
padding: 28rpx;
background: #fff;
border-radius: 16rpx;
}
.section-title {
display: block;
font-size: 28rpx;
font-weight: 600;
color: #333;
margin-bottom: 20rpx;
}
.bullet {
display: flex;
margin-bottom: 12rpx;
}
.bullet-dot {
margin-right: 12rpx;
color: #007AFF;
font-size: 28rpx;
line-height: 1.5;
}
.bullet-text {
flex: 1;
font-size: 26rpx;
color: #555;
line-height: 1.5;
}
.tip-card {
margin: 0 30rpx 40rpx;
padding: 28rpx;
background: #f0f7ff;
border-radius: 16rpx;
border: 1rpx solid #d0e3fc;
}
.tip-label {
display: block;
font-size: 26rpx;
font-weight: 600;
color: #007AFF;
margin-bottom: 12rpx;
}
.tip-body {
font-size: 26rpx;
color: #333;
line-height: 1.6;
}
</style>

View File

@@ -0,0 +1,173 @@
<template>
<view class="qa-page">
<view class="page-header">
<view class="nav-bar">
<view class="nav-left" @click="goBack">
<text class="back-icon"></text>
</view>
<text class="nav-title">针尖问答</text>
</view>
</view>
<scroll-view class="content-scroll" scroll-y="true">
<view class="intro-card">
<text class="intro-title">说明</text>
<text class="intro-body">语气尖锐带测试或挑衅色彩的问题常在试探专业度诚意或底线硬怼或空喊口号都容易失分</text>
</view>
<view class="section">
<text class="section-title">典型问题</text>
<view class="bullet" v-for="(t, i) in questions" :key="i">
<text class="bullet-dot"></text>
<text class="bullet-text">{{ t }}</text>
</view>
</view>
<view class="tip-card">
<text class="tip-label">应对关键</text>
<text class="tip-body">不怼不躲先共情或复述问题再坦诚边界能承诺什么 / 不能承诺什么用可验证依据与替代方案收尾把对话带回需求与价值</text>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
questions: [
'你们是不是就靠嘴上说得好听?',
'要是出了问题你们跑得比谁都快吧?',
'你给最低价,我现在就定。'
]
};
},
methods: {
goBack() {
uni.navigateBack();
}
}
};
</script>
<style scoped>
.qa-page {
min-height: 100vh;
background: #f8f9fa;
}
.page-header {
background: #ffffff;
border-bottom: 1rpx solid #e9ecef;
}
.nav-bar {
display: flex;
align-items: center;
height: 88rpx;
padding: 0 30rpx;
}
.nav-left {
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
}
.back-icon {
font-size: 36rpx;
color: #333;
}
.nav-title {
flex: 1;
text-align: center;
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.content-scroll {
height: calc(100vh - 88rpx);
}
.intro-card {
margin: 24rpx 30rpx;
padding: 28rpx;
background: #fff;
border-radius: 16rpx;
}
.intro-title {
display: block;
font-size: 28rpx;
font-weight: 600;
color: #333;
margin-bottom: 16rpx;
}
.intro-body {
font-size: 26rpx;
color: #555;
line-height: 1.6;
}
.section {
margin: 0 30rpx 24rpx;
padding: 28rpx;
background: #fff;
border-radius: 16rpx;
}
.section-title {
display: block;
font-size: 28rpx;
font-weight: 600;
color: #333;
margin-bottom: 20rpx;
}
.bullet {
display: flex;
margin-bottom: 12rpx;
}
.bullet-dot {
margin-right: 12rpx;
color: #007AFF;
font-size: 28rpx;
line-height: 1.5;
}
.bullet-text {
flex: 1;
font-size: 26rpx;
color: #555;
line-height: 1.5;
}
.tip-card {
margin: 0 30rpx 40rpx;
padding: 28rpx;
background: #f0f7ff;
border-radius: 16rpx;
border: 1rpx solid #d0e3fc;
}
.tip-label {
display: block;
font-size: 26rpx;
font-weight: 600;
color: #007AFF;
margin-bottom: 12rpx;
}
.tip-body {
font-size: 26rpx;
color: #333;
line-height: 1.6;
}
</style>

View File

@@ -0,0 +1,173 @@
<template>
<view class="qa-page">
<view class="page-header">
<view class="nav-bar">
<view class="nav-left" @click="goBack">
<text class="back-icon"></text>
</view>
<text class="nav-title">信任类问答</text>
</view>
</view>
<scroll-view class="content-scroll" scroll-y="true">
<view class="intro-card">
<text class="intro-title">决策关键</text>
<text class="intro-body">客户对产品品牌销售本人存在疑虑缺乏安全感</text>
</view>
<view class="section">
<text class="section-title">典型问题</text>
<view class="bullet" v-for="(t, i) in questions" :key="i">
<text class="bullet-dot"></text>
<text class="bullet-text">{{ t }}</text>
</view>
</view>
<view class="tip-card">
<text class="tip-label">应对关键</text>
<text class="tip-body">用案例资质口碑承诺建立信任打消顾虑</text>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
questions: [
'质量有保障吗?',
'售后怎么样?出问题找谁?',
'有没有成功案例 / 资质证明?'
]
};
},
methods: {
goBack() {
uni.navigateBack();
}
}
};
</script>
<style scoped>
.qa-page {
min-height: 100vh;
background: #f8f9fa;
}
.page-header {
background: #ffffff;
border-bottom: 1rpx solid #e9ecef;
}
.nav-bar {
display: flex;
align-items: center;
height: 88rpx;
padding: 0 30rpx;
}
.nav-left {
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
}
.back-icon {
font-size: 36rpx;
color: #333;
}
.nav-title {
flex: 1;
text-align: center;
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.content-scroll {
height: calc(100vh - 88rpx);
}
.intro-card {
margin: 24rpx 30rpx;
padding: 28rpx;
background: #fff;
border-radius: 16rpx;
}
.intro-title {
display: block;
font-size: 28rpx;
font-weight: 600;
color: #333;
margin-bottom: 16rpx;
}
.intro-body {
font-size: 26rpx;
color: #555;
line-height: 1.6;
}
.section {
margin: 0 30rpx 24rpx;
padding: 28rpx;
background: #fff;
border-radius: 16rpx;
}
.section-title {
display: block;
font-size: 28rpx;
font-weight: 600;
color: #333;
margin-bottom: 20rpx;
}
.bullet {
display: flex;
margin-bottom: 12rpx;
}
.bullet-dot {
margin-right: 12rpx;
color: #007AFF;
font-size: 28rpx;
line-height: 1.5;
}
.bullet-text {
flex: 1;
font-size: 26rpx;
color: #555;
line-height: 1.5;
}
.tip-card {
margin: 0 30rpx 40rpx;
padding: 28rpx;
background: #f0f7ff;
border-radius: 16rpx;
border: 1rpx solid #d0e3fc;
}
.tip-label {
display: block;
font-size: 26rpx;
font-weight: 600;
color: #007AFF;
margin-bottom: 12rpx;
}
.tip-body {
font-size: 26rpx;
color: #333;
line-height: 1.6;
}
</style>