<template>
  <div class="card">
    <div class="title">
      <div class="title__icon">
        <svg viewBox="0 0 1024 1024" width="83" height="83"><path d="M450.1 501c118.8 0 215.5-98.4 215.5-219.3S568.9 62.5 450.1 62.5c-118.9 0-215.5 98.4-215.5 219.2S331.2 501 450.1 501zM524.9 522.1H377.4c-150 0-272.1 124.1-272.1 276.6v16.4c0 79.8 120.1 79.8 272.1 79.8h83.5c-26.8-43.6-42.6-94.8-42.6-149.8 0.1-90.1 41.7-170.4 106.6-223z" fill="#fff"></path><path d="M702.8 528.6c-119.2 0-215.9 96.9-215.9 216.4s96.6 216.4 215.9 216.4S918.7 864.5 918.7 745s-96.6-216.4-215.9-216.4z m96.1 270.3H691.3c-19.8 0-35.9-16.1-35.9-35.9V655.5c0-19.8 16.1-35.9 35.9-35.9s35.9 16.1 35.9 35.9v71.7h71.7c19.8 0 35.9 16.1 35.9 35.9 0 19.8-16.1 35.8-35.9 35.8z" fill="#fff"></path></svg>
      </div>
      <div class="title__text">
        <div class="title__text--name">访客量</div>
        <div class="title__text--sub">描述文字</div>
      </div>
    </div>

    <div class="title__data">
      <div class="title__data-item">
        <div class="title__data-item__num">2000</div>
        <div class="title__data-item__text">今日访客</div>
      </div>
      <div class="title__data-item">
        <div class="title__data-item__num">100000</div>
        <div class="title__data-item__text">总计访客</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {},
  computed: {},
}
</script>

<style scoped lang="scss">
.card {
  border-radius: 7px;
  filter: drop-shadow(0 0 7.5px rgba(211,215,221,0.4));
  background-color: #ffffff;
  border: 1px solid #d8e2f0;
}
</style>
