deepChartVueApp/pages/customerServicePlatform/questionDetail.vue

<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>