XEH-miniProgram/pages/self/commonQuestion.vue

<template>
	<view class="page-wrap">
		<view class="chat-panel">
			<image class="avatar" src="../../static/icon_logo.png" mode="aspectFill"></image>
			<view class="text-box">
				您可能关心这些问题：
			</view>
			<view class="question-list">
				<view class="item">
					创业套餐都包含哪些服务？
					<image class="arrow" src="../../static/svg/arrow.svg"></image>
				</view>
				<view class="item">
					财税平台要单独购买吗？
					<image class="arrow" src="../../static/svg/arrow.svg"></image>
				</view>
				<view class="item">
					企业有多个用户，且权限不同
					<image class="arrow" src="../../static/svg/arrow.svg"></image>
				</view>
				<view class="item">
					企业钱包能做什么？
					<image class="arrow" src="../../static/svg/arrow.svg"></image>
				</view>
				<view class="item">
					企业钱包的钱能退么？
					<image class="arrow" src="../../static/svg/arrow.svg"></image>
				</view>
				<view class="item">
					账单应该怎么支付？
					<image class="arrow" src="../../static/svg/arrow.svg"></image>
				</view>
				<view class="item">
					优惠券怎么使用？
					<image class="arrow" src="../../static/svg/arrow.svg"></image>
				</view>
				<view class="item">
					如何接入办公室视频？
					<image class="arrow" src="../../static/svg/arrow.svg"></image>
				</view>
			</view>
		</view>
		<view class="tips-row">
			还有其他问题？请咨询<text>4006194699</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.page-wrap {
		padding: 68.68rpx 16.48rpx;
	}

	.chat-panel {
		padding-left: 104.4rpx;
		position: relative;

		.avatar {
			width: 82.42rpx;
			height: 82.42rpx;
			position: absolute;
			left: 0;
			top: 0;
			border: 6.87rpx solid #fff;
			box-sizing: border-box;
			border-radius: 8.24rpx;
		}
		.text-box{
			width: 480.77rpx;
			min-height: 82.42rpx;
			font-size: 30.22rpx;
			color: #333;
			padding: 19.23rpx 20.6rpx;
			line-height: 1.5;
			box-sizing: border-box;
			background: #fff;
			word-break: break-all;
			position: relative;
			&::before{
				content: '';
				position: absolute;
				left: -8.24rpx;
				top: 27.47rpx;
				width: 24.73rpx;
				height: 24.73rpx;
				transform: rotate(45deg);
				background: #fff;
			}
		}
		.question-list{
			width: 480.77rpx;
			background: #fff;
			border: 1px solid #e0e0e0;
			box-sizing: border-box;
			margin-top: 13.74rpx;
			.item{
				font-size: 27.47rpx;
				color: #0384D6;
				line-height: 82.42rpx;
				border-top: 1px solid #e0e0e0;
				padding: 0 54.95rpx 0 27.47rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				position: relative;
				&:first-child{
					border: none;
				}
				.arrow{
					width: 27.47rpx;
					height: 27.47rpx;
					position: absolute;
					right: 27.47rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
	}
	.tips-row{
		font-size: 27.47rpx;
		text-align: center;
		margin-top: 54.95rpx;
		text{
			color: #0384D6;
			margin-left: 13.74rpx;
		}
	}
</style>