update

src/components/setting/home/InfoCard.vue

@@ -0,0 +1,64 @@
+<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>