jp-housekeep-electric/pages/mine/contactService.vue

<template>
	<view>
		<u-navbar title="联系客服"  title-color="#101010" ></u-navbar>
		<view class="background">
			<view class="common-problem">
				<view class="headline">
					常见问题
				</view>
				<!-- 标签 -->
				<view class="tabs">
					<u-tabs :list="list"  font-size="28" :is-scroll="false" :current="current" @change="change"></u-tabs>
				</view>
				<!-- 问题 -->
				<view class="problems">
					<u-collapse accordion="false">
							<u-collapse-item :title="item.head" v-for="(item, index) in itemList" :open="item.open" :key="index">
								{{item.body}}
							</u-collapse-item>
						</u-collapse>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="bottom">
			<button class="service">
				<view>
					<image class="img" src="@/assets/img/riFill-customer-service-2-fill 1.svg" mode=""></image>
				</view>
				客服电话（7:00-24:00）
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '软件使用'
				}, {
					name: '设备状态及参数'
				}, {
					name: '工单相关',
					
				}],
				itemList: [{
									head: "常见问题1",
									body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来",
									open: true,
									
								},{
									head: "常见问题2",
									body: "学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美",
									open: false,
								},{
									head: "常见问题3",
									body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
									open: false,
								}],
				current: 0
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.background{
		position: relative;
		height: 200px;
		background: linear-gradient(180deg, rgba(203,234,255,1) 0%,rgba(203,234,255,0) 100%);
		.common-problem{
			position: absolute;
			top: 24rpx;
			left: 32rpx;
			right: 32rpx;
			background-color: #fff;
			border-radius: 8px;
			padding: 40rpx 32rpx;
			.headline{
				color: rgba(16,16,16,1);
				font-size: 36rpx;
			}
			// 标签
			.tabs{
				border-top: 1px solid rgba(232,232,232,1);
				margin-top: 28rpx;
				width: 522rpx;
				/deep/.u-tab-item{
					
					font-size: 24rpx !important;
				}
			}
			.problems{
				margin-top: 8rpx;
			}
		}
	}
  // 底部
  .bottom{
	  background-color: #fff;
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  padding: 24rpx 32rpx;
	  
	  .service{
		  display: flex;
		  justify-content: center;
		  align-items: center;	
		  
		  color: rgba(255,255,255,1);
		  font-size: 32rpx;
		  border-radius: 50px;
		  background: linear-gradient(-88.46deg, rgba(34,109,198,1) 2.59%,rgba(9,158,237,1) 97.02%);
	  }
	  .img{
		  width: 40rpx;
		  height: 40rpx;
		  vertical-align: middle;
		  margin-right: 16rpx;
	  }
  }
</style>