<template>
  <div class="RightTopContainer">
    <ContentTop title="健身房信息" :type="2" />
    <div class="rank-radio d-flex jc-end w-100" style="margin-top: 20px">
      <Radio :radioProps="levelRankRadioProps" />
    </div>
    <div style="margin-top: 13px">
      <AccumulateTip
        iconName="gym_icon"
        :width="60"
        label="健身房总数"
        :count="7366789"
        :countMargin="6"
        unit="个"
      />
    </div>
    <div style="margin-top: 21px">
      <Sliders
        @sliderChange="sliderChange"
        :options="optData"
        :textWidth="80"
        :isHasRight="true"
        :isHasTop="false"
        :rightTextWidth="65"
      />
    </div>
  </div>
</template>
              
              <script>
import ContentTop from "@/components/contentTop";
import Sliders from "@/components/Sliders";
import Radio from "@/components/Radio";
import AccumulateTip from "@/components/accumulateTip";
export default {
  components: {
    ContentTop,
    Sliders,
    Radio,
    AccumulateTip,
  },
  data() {
    return {
      levelRankRadioProps: {
        name: "levelRankRadio",
        width: "auto",
        options: [
          { value: "qu", label: "区" },
          { value: "xian", label: "县" },
          { value: "shi", label: "市" },
        ],
      },
      optData: [
        { value: 90, label: "一类总数", rightText: "40%" },
        { value: 20, label: "二类总数", rightText: "20%" },
        { value: 10, label: "城市总数", rightText: "10%" },
        { value: 10, label: "农村总数", rightText: "10%" },
      ],
    };
  },
  methods: {
    sliderChange(index, value) {
      console.log(index, value);
    },
  },
};
</script>
              
              <style lang="scss" scoped>
@import "../../../assets/scss/index.scss";
.RightTopContainer {
}
</style>
              