Waste/Waste.WebApi/App/Page/src/views/home/index.vue

<template>
  <page-header-wrapper>
    <div class="container">
      <a-row>
        <a-col :xs="24" :sm="4" :md="24" :lg="16" :xl="16">
          <div class="content-L">
            <DeviceTag />
            <StatisticsTag></StatisticsTag>
          </div>
        </a-col>
        <a-col :xs="24" :sm="4" :md="24" :lg="8" :xl="8">
          <div class="content-R">
            <div class="tags">
              <h4>标签统计<span @click="onchangeTags">更多
                  <a-icon type="double-right" /></span>
              </h4>
              <div class="tags_list">
                <a-tag v-for="(item,index) in tags_list" :key="index" v-if="index < 9">
                  {{ item.name }}({{index+1}})
                </a-tag>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
    <!--  -->
    <div class="content mt-25">
      <div class="card_item ">
        <a-row type="flex" justify="space-between">
          <a-col :xs="24" :lg="11">
            <div class="cardInfo mb-15">
              <a-table :columns="columns" :data-source="data" bordered :pagination="false">
                <template slot="name" slot-scope="text">
                  <a>{{ text }}</a>
                </template>
                <template slot="title">
                  <div class="item item1">
                    <span>减脂人群数据统计（男）</span>
                    <span>更多
                      <a-icon type="double-right" /></span>
                  </div>
                </template>
              </a-table>
            </div>
          </a-col>
          <a-col :xs="24" :lg="11">
            <div class="cardInfo">
              <a-table :columns="columns" :data-source="data" bordered :pagination="false">
                <template slot="name" slot-scope="text">
                  <a>{{ text }}</a>
                </template>
                <template slot="title">
                  <div class="item item1">
                    <span>减脂人群数据统计（女）</span>
                    <span>更多
                      <a-icon type="double-right" /></span>
                  </div>
                </template>
              </a-table>
            </div>
          </a-col>
        </a-row>
      </div>
      <!--  -->
      <div class="card_item">
        <a-row type="flex" justify="space-between">
          <a-col :xs="24" :lg="11">
            <div class="cardInfo mb-15">
              <a-table :columns="columns" :data-source="data" bordered :pagination="false">
                <template slot="name" slot-scope="text">
                  <a>{{ text }}</a>
                </template>
                <template slot="title">
                  <div class="item item1">
                    <span>超重人群数据统计(BMI)</span>
                    <span>更多
                      <a-icon type="double-right" /></span>
                  </div>
                </template>
              </a-table>
            </div>
          </a-col>
          <a-col :xs="24" :lg="11">
            <div class="cardInfo">
              <a-table :columns="columns" :data-source="data" bordered :pagination="false">
                <template slot="name" slot-scope="text">
                  <a>{{ text }}</a>
                </template>
                <template slot="title">
                  <div class="item item1">
                    <span>7日活跃人群数据统计</span>
                    <span>更多
                      <a-icon type="double-right" /></span>
                  </div>
                </template>
              </a-table>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </page-header-wrapper>
</template>

<script>
  const columns = [{
      title: '人群',
      dataIndex: 'name',
      scopedSlots: {
        customRender: 'name'
      },
    },
    {
      title: '指数范围',
      children: [{
          title: '16~30（岁）',
          dataIndex: 'companyAddress',
          key: 'companyAddress',
        },
        {
          title: '31~45（岁）',
          dataIndex: 'companyName',
          key: 'companyName',
        },
      ],
    },
    {
      title: '人数',
      dataIndex: 'address',
    },
  ]

  const data = [{
    key: '1',
    name: '肥胖人群',
    companyAddress: '>28',
    companyName: '>30',
    address: '23',
  }, {
    key: '2',
    name: '微胖人群',
    companyAddress: '>28',
    companyName: '>30',
    address: '23',
  }, {
    key: '3',
    name: '健康人群',
    companyAddress: '>28',
    companyName: '>30',
    address: '23',
  }]

  const tags_list = [{
      key: '1',
      name: '偏瘦体型',
    }, {
      key: '2',
      name: '标准体型',
    }, {
      key: '3',
      name: '过胖体型',
    },
    {
      key: '4',
      name: '肥胖人群',
    },
    {
      key: '5',
      name: '微胖人群',
    },
    {
      key: '6',
      name: '标准人群',
    },
    {
      key: '7',
      name: '偏瘦人群',
    },
    {
      key: '8',
      name: '三高风险',
    },
    {
      key: '9',
      name: '特别关注',
    },
    {
      key: '10',
      name: '非常关注',
    },
    {
      key: '11',
      name: '稍微关注',
    },
    {
      key: '12',
      name: '无关注',
    },
  ]
  import {
    baseMixin
  } from '@/store/app-mixin'
  import DeviceTag from '@/components/device/device.vue'
  import StatisticsTag from '@/components/device/Statistics.vue'
  export default {
    name: 'Analysis',
    mixins: [baseMixin],
    components: {
      StatisticsTag,
      DeviceTag
    },
    data() {
      return {
        columns,
        data,
        tags_list,
      }
    },
    created() {
      setTimeout(() => {
        this.loading = !this.loading
      }, 1000)
    },
    methods: {
      onchangeTags() {
        this.$router.push('/market/tag')
      }
    }
  }
</script>

<style lang="less" scoped>
  .container {
    background-color: #fff;
    width: auto;
    height: auto;
    overflow: hidden;
  }

  .content-L {
    height: auto;
    overflow: hidden;
  }

  .card_item {
    width: auto;
    height: auto;
    overflow: hidden;
    margin-bottom: 20px;
  }

  .cardInfo {
    // width: 45%;
    background: #fff;
    display: block;

    .item {
      width: 100%;

      span {
        display: inline-block;
        width: 30%;
        text-align: center;
      }

      span:nth-child(1) {
        width: 70%;
        background-color: #fafafa;
        text-align: left;
        padding-right: 0;
        font-weight: 600;
      }
    }

    .item1 {
      span {
        text-align: right;
        font-size: 16px;
        font-weight: 600;
      }

      span:nth-child(1) {
        border-right: none;
        background-color: #fff;
        padding-right: 0;
      }
    }
  }

  .content-R {
    border: 1px solid #dfdfdf;
    padding: 10px 10px 0;
    height:169px;
    margin: 20px;

    h4 {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 12px;

      span {
        font-size: 14px;
        float: right;
        color: #999;
        cursor: pointer;
      }
    }

    .tags_list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      -webkit-box-orient: vertical;
      -webkit-line-clamp:3;
      overflow: hidden;
    }

    .ant-tag {
      font-size: 13px;
      height: 26px;
      line-height: 26px;
      margin-bottom: 12px;
      margin-right: 0;
      color: #1890ff;
    }
  }
</style>