chelvc-custom/src/pages/user/servicecenter/index.vue

<template>
  <view class="container">
    <view class="title">
      常见问题
    </view>
    <view class="item-box issue-box">
      <view class="item" v-for="item of 4">
        <view class="item-l">
          <img class="img" src="@/static/logo.png" alt="">
        </view>
        <view class="item-r">
          如何注销账户？
        </view>
      </view>
    </view>


    <view class="title">
      热门问题
    </view>
    <view class="item-box hote-box">
      <view class="item" v-for="item of 4">
        <view class="item-l">
          <img class="img" src="@/static/logo.png" alt="">
        </view>
        <view class="item-r">
          如何注销账户？
        </view>
      </view>
    </view>

    <view class="title">
      在线客服
    </view>
    <view class=" cust-box">
      <view class="item" v-for="item of 3">
        <view class="item-l">
          <img class="cust-img" src="@/static/logo.png" alt="">
        </view>
        <view class="item-r">
          <view class="r-title">客服小姐姐</view>
          <view class="r-text">在线</view>
        </view>
      </view>
    </view>
    <u-button class="contact-btn" @click="handlerCallService">联系客服</u-button>


    <view class="footer-item">
      <view class="item" v-for="item of footerList">
        <view class="item-l">
          {{ item.name }}
        </view>
        <view class="item-r">
            <img class="cust-img" :src="item.imgs" alt="">
            <span class="r-span">{{ item.text }}</span>
        </view>
      </view>
    </view>
    <button class="feedback-btn" @click="handlerSubmitFeedback">提交反馈</button>

  </view>
</template>

<script>
  export default{
    data(){
      return{
        footerList:[
          {
            name:'反馈建议',
            imgs:'../../../static/logo.png',
            text:'客服热线:888-8888-8888'
          },
          {
            name:'反馈内容',
            imgs:'../../../static/logo.png',
            text:'客服邮箱:kefu@xxx.com'
          },
          {
            name:'联系方式',
            imgs:'../../../static/logo.png',
            text:'客服时间:周一至周五9:00-20:00'
          }
        ]
      }
    },
    methods:{
      // 点击联系客服
      handlerCallService(){
        uni.showToast({
          title:'嘟...',
          icon:'none'
        })
      },
      // 点击提交反馈
      handlerSubmitFeedback(){
        uni.showToast({
          title:'不给提',
          icon:'none'
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  .container{
    padding: 40rpx;
    .title{
      font-size: 32rpx;
      font-weight: bold;
      color: #000;
      margin-top: 20rpx;
    }
    .item-box{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .issue-box{
      .item{
        display: flex;
        align-items: center;
        padding: 20rpx 10rpx;
        background-color: #F3F4F6;
        border-radius: 20rpx;
        width: 42%;
        margin: 20rpx 10rpx;
        .item-l{
          .img{
            width: 50rpx;
            height: 50rpx;
            border-radius: 50rpx;
          }
        }
        .item-r{
          margin-left: 20rpx;
        }
      }
    }
    .hote-box{
      .item{
        display: flex;
        align-items: center;
        padding: 20rpx 10rpx;
        background-color: #F3F4F6;
        border-radius: 20rpx;
        margin: 10rpx;
        width: 100%;
        .item-l{
          .img{
            width: 50rpx;
            height: 50rpx;
            border-radius: 50rpx;
          }
        }
        .item-r{
          margin-left: 20rpx;
        }
      }
    }

    .cust-box{
      .item{
        display: flex;
        align-items: center;
        margin: 20rpx 10rpx;
        .item-l{
          .cust-img{
            width: 80rpx;
            height: 80rpx;
            border-radius: 80rpx;
          }
        }
        .item-r{
          margin-left: 20rpx;
          .r-title{
            font-size:28rpx;
            font-weight: bold;
            color: #000;
          }
          .r-text{
            font-size: 28rpx;
            color: #8A909A;
          }
        }
      }
    }
    .footer-item{
      margin: 40rpx 0;
      .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20rpx 0;
        .item-l{
          font-size: 32rpx;
          font-weight: bold;
          color: #000;
        }
        .item-r{
          display: flex;
          align-items: center;
          .cust-img{
            width: 30rpx;
            height: 30rpx;
          }
          .r-span{
            color: #2D3643;
            font-size: 28rpx;
            margin-left: 20rpx;
          }
        }
      }
    }


    .contact-btn{
      font-size: 28rpx;
    }
    .feedback-btn{
      background-color: #5992BB;
      color: #fff;
      font-size: 28rpx;
      margin-top: 20rpx;
    }
  }
</style>