<template>
  <view class="content">
    <view v-for="(item, key) in datas" :key="key">
      <view class="title">{{ item.ruleCategory }}</view>
      <view class="option">
        <view
          v-for="(item1, index) in item.rules"
          :key="index"
          class="option-list"
          @tap="jump"
        >
          <view class="option-list_text">{{ item1.name }}</view>
          <view class="option-list_img1">
            <image mode :src="require('@/assets/my/icon-more.png')"></image>
          </view>
          <view v-if="key < datas.length - 1" class="option-border"></view>
        </view>
      </view>
    </view>
    <view>
      <view class="title">帮助</view>
      <view class="option" @tap="openDetail('service')">
        <view class="option-list">
          <view class="option-list_text">用户服务协议</view>
          <view class="option-list_img1">
            <image mode :src="require('@/assets/my/icon-more.png')"></image>
          </view>
        </view>
      </view>
      <view class="option" @tap="openDetail('contact')">
        <view class="option-list">
          <view class="option-list_text">商务合作</view>
          <view class="option-list_img1">
            <image mode :src="require('@/assets/my/icon-more.png')"></image>
          </view>
        </view>
      </view>
      <!-- <view class="option" @tap="openDetail('rule')">
        <view class="option-list">
          <view class="option-list_text">余额服务须知</view>
          <view class="option-list_img1">
            <image mode :src="require('@/assets/my/icon-more.png')"></image>
          </view>
        </view>
      </view> -->
      <!-- <view class="option" @tap="openDetail('rule')">
        <view class="option-list">
          <view class="option-list_text">余额服务须知</view>
          <view class="option-list_img1">
            <image mode :src="require('@/assets/my/icon-more.png')"></image>
          </view>
        </view>
      </view> -->
      <!-- <view class="option" @tap="openDetail('about')">
        <view class="option-list">
          <view class="option-list_text">关于我们</view>
          <view class="option-list_img1">
            <image mode :src="require('@/assets/my/icon-more.png')"></image>
          </view>
        </view>
      </view> -->
    </view>
  </view>
</template>

<script>
export default {
  name: "PageHelp",
  data() {
    return {
      datas: [],
    };
  },

  methods: {
    openDetail(page) {
      uni.navigateTo({
        url: "./" + page,
      });
    },
  },
};
</script>

<style>
.content {
  align-items: flex-start;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  width: 750rpx;
  min-height: 100vh;
  box-sizing: border-box;
  padding-bottom: 64rpx;
}

image {
  height: inherit;
  width: inherit;
}

.title {
  color: #666;
  float: left;
  font-family: PingFangSC-Regular;
  font-size: 28rpx;
  height: 92rpx;
  line-height: 92rpx;
  margin-left: 24rpx;
  width: 702rpx;
}

.option {
  background: #fff;
  border-radius: 24rpx;
  float: left;
  margin-left: 24rpx;
  width: 702rpx;
  margin-bottom: 20rpx;
}

.option-list {
  background: #fff;
  float: left;
  font-size: 34rpx;
  height: 96rpx;
  line-height: 96rpx;
  width: 702rpx;
}

.option-list_img {
  float: left;
  height: 56rpx;
  margin-left: 24rpx;
  margin-top: 20rpx;
  width: 56rpx;
}

.option-list_text {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  color: #333;
  display: -webkit-box;
  float: left;
  font-size: 30rpx;
  height: 94rpx;
  line-height: 94rpx;
  overflow: hidden;
  text-indent: 24rpx;
  width: 600rpx;
}

.option-list_img1 {
  float: right;
  height: 32rpx;
  margin-right: 34rpx;
  width: 32rpx;
}

.option-border {
  background-color: #f5f5f5;
  float: left;
  height: 2rpx;
  margin-left: 24rpx;
  width: 678rpx;
}

.bang {
  margin: 20rpx 0 0 20rpx;
}

.bottom-text {
  background-color: #fff;
  font-size: 32rpx;
  height: 50rpx;
  margin: 20rpx 20rpx 0;
  padding: 20rpx;
  width: 666rpx;
}
</style>
