powerbank/pages/abbr/index.vue

<template>
	<view class="page">
		<u-navbar title="客服中心" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			height='38'></u-navbar>
		<view class="serch">
			<u-search placeholder="搜索问题" height="72" :showAction="false" v-model="keyword"></u-search>
		</view>

		<view class="list">
			<view class="tab">
			     	<u-tabs :list="list" :is-scroll="true" :current="current" active-color="#38D492" bar-width="80" gutter="40" item-width="200" @change="change"></u-tabs>
			</view>
			<view class="wenti">
				<view class="wzwt">
					<text>充电宝没弹出但扣费了</text> <u-icon name="arrow-right"></u-icon>
				</view>
				<view class="wzwt">
					<text>租借的充电宝电量不足</text> <u-icon name="arrow-right"></u-icon>
				</view>
				<view class="wzwt">
					<text>充电宝无法充电</text> <u-icon name="arrow-right"></u-icon>
				</view>
				<view class="wzwt">
					<text>可归还机离线/断电/故障</text> <u-icon name="arrow-right"></u-icon>
				</view>
				<view class="wzwt">
					<text>充电宝无法归还（商家打烊/机柜满仓）</text> <u-icon name="arrow-right"></u-icon>
				</view>
				<view class="wzwt">
					<text>购买充电宝后能退款吗</text> <u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="huan">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uH9hJJuhEDQw4JBGy9kS" mode=""></image> 换一换
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '猜你想问',
				}, {
					name: '常见问题',
				}, {
					name: '费用问题'
				}, {
					name: '归还问题'
				}, {
					name: '使用问题'
				}],
				current:0
			}
		},
		onLoad() {
          
		},
		methods: {
			change(index){
			this.current = index;
			}
		}
	}
</script>

<style lang="scss">
	page {
		// background-color: ;
		background: linear-gradient(180deg, #25CE88 0%, rgba(255, 255, 255, 0) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.page {
		width: 750rpx;
		padding-left: 34rpx;
		padding-right: 34rpx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;

		.serch {
			margin-top: 44rpx;
		}
		.list{
			width: 680rpx;
			height: 654rpx;
			background: #FFFFFF;
		    margin-top: 46rpx;
			border-radius: 50rpx;
			padding: 10rpx 32rpx;
			box-sizing: border-box;
			overflow: hidden;
			// overflow-x: scroll;
			.tab{
				width: 650rpx;
				margin-bottom: 38rpx;
				// display: flex;
				
			}
			.wenti{
				.wzwt{
					display: flex;
					justify-content: space-between;
					margin-bottom: 38rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #3D3D3D;
				}
			}
			.huan{
				image{
					width: 30rpx;
					height: 28rpx;
					vertical-align: middle;
					margin-right: 10rpx;
				}
				width: 100%;
				text-align: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
			}
		}
	}
	
	.active{
		border-bottom: 6rpx solid #25CE88;
		padding-bottom: 10rpx;
		border-radius: 3rpx 3rpx 3rpx 3rpx;
	}
</style>