<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="../../static/image/lx.png" 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>