maziyang
4 weeks ago
6 changed files with 393 additions and 65 deletions
-
8api/customerServicePlatform/customerServicePlatform.js
-
9pages.json
-
80pages/customerServicePlatform/csPlatformIndex.vue
-
30pages/customerServicePlatform/historyRecord.vue
-
325pages/customerServicePlatform/questionDetail.vue
-
BINstatic/customer-service-platform/robot-head.png
@ -0,0 +1,325 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<view class="top" :style="{ height: iSMT + 'px' }"></view> |
|||
|
|||
<!-- 头部导航 --> |
|||
<view class="header"> |
|||
<view class="back-icon"> |
|||
<image @click="onBack" src="/static/customer-service-platform/cs-platform-back.png" |
|||
class="header-icon-image"></image> |
|||
</view> |
|||
<view class="title">{{ headerTitle }}</view> |
|||
<view class="notification-icon"> |
|||
<image src="/static/customer-service-platform/message.png" class="header-icon-image"></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<scroll-view scroll-y class="content-container"> |
|||
|
|||
<view class="content-header"> |
|||
<view class="content-header-area"> |
|||
<view class="logo"> |
|||
<image mode="aspectFit" src="/static/customer-service-platform/ellipse-dc-img.png"></image> |
|||
</view> |
|||
<view class="greeting"> |
|||
<text class="greet-title">嗨，我能为你做点什么？</text> |
|||
<text class="greet-sub">DeepChart随时为您提供服务</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 卡片部分 --> |
|||
<view class="card"> |
|||
<!-- 问题头部--> |
|||
<view class="question-header"> |
|||
<view class="question-row"> |
|||
<image class="question-avatar" src="/static/customer-service-platform/robot-head.png" |
|||
mode="aspectFill"></image> |
|||
<view class="question-title">{{ questionTitle }}?</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 卡片内容区--> |
|||
<view class="card-body"> |
|||
<image class="card-logo" src="/static/customer-service-platform/ellipse-dc-img.png" |
|||
mode="aspectFit"></image> |
|||
|
|||
<view class="card-text"> |
|||
<text class="card-paragraph"> |
|||
DeepChart 提供了多种注册方式，具体流程如下： |
|||
</text> |
|||
|
|||
<view class="bullet-list"> |
|||
<view class="bullet-item"> |
|||
<view class="bullet-dot"></view> |
|||
<text class="bullet-text">邮箱 / |
|||
手机号注册：进入注册页面后，输入邮箱地址或手机号，勾选“接受用户协议和隐私政策”，点击“注册”即可；若未勾选协议，点击注册时会弹窗提示“请阅读并同意服务协议和隐私权限”，同意后可进入下一步。</text> |
|||
</view> |
|||
|
|||
<view class="bullet-item"> |
|||
<view class="bullet-dot"></view> |
|||
<text class="bullet-text">第三方账号注册：支持通过 Apple 账号或 Google |
|||
邮箱直接注册，点击对应平台按钮，按提示完成授权即可。</text> |
|||
</view> |
|||
|
|||
<view class="bullet-item"> |
|||
<view class="bullet-dot"></view> |
|||
<text class="bullet-text">若遇到问题，请通过页面底部的“联系客服”按钮联系我们。</text> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view class="login-row"> |
|||
<button class="login-btn">登录</button> |
|||
<button class="register-btn">注册</button> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
headerTitle: '智能客服中台', |
|||
iSMT: 0, |
|||
questionTitle: '如何注册账号' |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.iSMT = uni.getSystemInfoSync().statusBarHeight || 0; |
|||
}, |
|||
methods: { |
|||
onBack() { |
|||
if (typeof uni !== 'undefined') uni.navigateBack(); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.main { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 100vh; |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
.header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 20rpx 30rpx; |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
.title { |
|||
color: #000000; |
|||
text-align: center; |
|||
font-size: 32rpx; |
|||
font-weight: 400; |
|||
} |
|||
|
|||
.back-icon, |
|||
.notification-icon { |
|||
width: 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.header-icon-image { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
object-fit: contain; |
|||
} |
|||
|
|||
.content-container { |
|||
padding: 20rpx; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
overflow-x: hidden; |
|||
} |
|||
|
|||
.content-header { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
gap: 24rpx; |
|||
padding: 0 60rpx; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
height: 188rpx; |
|||
} |
|||
|
|||
.content-header-area { |
|||
display: flex; |
|||
gap: 20rpx; |
|||
} |
|||
|
|||
.logo { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex: 0 0 112rpx; |
|||
} |
|||
|
|||
.greeting { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
flex: 1 1 auto; |
|||
} |
|||
|
|||
.greet-title { |
|||
color: #000; |
|||
font-size: 40rpx; |
|||
font-style: normal; |
|||
font-weight: 500; |
|||
line-height: normal; |
|||
margin: 0; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.greet-sub { |
|||
color: #838383; |
|||
font-size: 28rpx; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: normal; |
|||
margin-top: 12rpx; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.card { |
|||
width: 90%; |
|||
margin: 0 auto 20rpx; |
|||
padding: 28rpx; |
|||
box-sizing: border-box; |
|||
border-radius: 16rpx; |
|||
border: 4rpx solid #FF7C99; |
|||
background: #fff; |
|||
} |
|||
|
|||
/* 问题头部 */ |
|||
.question-header { |
|||
width: 100%; |
|||
margin-bottom: 48rpx; |
|||
} |
|||
|
|||
.question-row { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.question-avatar { |
|||
width: 52rpx; |
|||
height: 52rpx; |
|||
border-radius: 999rpx; |
|||
margin-right: 32rpx; |
|||
} |
|||
|
|||
.question-title { |
|||
font-size: 34rpx; |
|||
color: #222; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
/* 卡片内部布局 */ |
|||
.card-body { |
|||
display: flex; |
|||
gap: 20rpx; |
|||
align-items: flex-start; |
|||
} |
|||
|
|||
.card-logo { |
|||
width: 52rpx; |
|||
height: 52rpx; |
|||
flex: 0 0 52rpx; |
|||
border-radius: 8rpx; |
|||
} |
|||
|
|||
.card-text { |
|||
flex: 1 1 auto; |
|||
} |
|||
|
|||
.card-paragraph { |
|||
display: block; |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
margin-bottom: 14rpx; |
|||
} |
|||
|
|||
.bullet-list { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 12rpx; |
|||
} |
|||
|
|||
.bullet-item { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
} |
|||
|
|||
.bullet-dot { |
|||
width: 8rpx; |
|||
height: 8rpx; |
|||
background: #FF7C99; |
|||
border-radius: 999rpx; |
|||
margin-top: 10rpx; |
|||
flex: 0 0 8rpx; |
|||
} |
|||
|
|||
.bullet-text { |
|||
margin-left: 12rpx; |
|||
color: #666; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
/* 提高可读性 */ |
|||
} |
|||
.login-row{ |
|||
display: flex; |
|||
justify-content: center; |
|||
width:100%; |
|||
margin-top: 100rpx; |
|||
} |
|||
.login-btn{ |
|||
width: 300rpx; |
|||
height: 100rpx; |
|||
border-radius: 50rpx; |
|||
background: #F3F3F3; |
|||
color: #000000; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 28rpx; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: normal; |
|||
} |
|||
.register-btn{ |
|||
width: 300rpx; |
|||
height: 100rpx; |
|||
border-radius: 60rpx; |
|||
background: #000; |
|||
color: #ffffff; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 28rpx; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: normal; |
|||
} |
|||
|
|||
</style> |
|||
|
After Width: 21 | Height: 19 | Size: 1.2 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue