maziyang
4 weeks ago
6 changed files with 393 additions and 65 deletions
-
8api/customerServicePlatform/customerServicePlatform.js
-
9pages.json
-
80pages/customerServicePlatform/csPlatformIndex.vue
-
36pages/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