<template>
  <div class="info-card">
    <div class="icon">
      <img style="width: 70px;height: 70px;margin-left: 10px" src="@/assets/img/bookmark.png">
    </div>
    <div class="content">
      <span class="content-info">4655 /个</span>
      <span class="content-tag">书签个数</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "InfoCard",
  data() {
    return {}
  },
  mounted() {

  },
  created() {

  },
  computed: {},
  methods: {}

}
</script>
<style scoped>
.info-card{
  justify-content: space-between;
  width: 300px;
  height: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 20px;
  border: 1px solid;
  border-color:var(--border-color);
  background-color: var(--theme-bg-color);
  color: var(--theme-color);
}
.icon{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.content{
  display: flex;
  flex-direction: column;
  margin-right: 20px;
}
.content-info{
  font-weight: bolder;
  font-size: 30px;
  color: var(--theme-color);
}
.content-tag{
  text-align: end;
  font-size: 18px;
  color: var(--theme-color);
  font-weight: bolder;
}
</style>