百万级可视化开发进阶笔记——累计销售-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_26728817/article/details/116832070

本文展示了总订单的累计销售额卡片，包含每日同比增长率7.08%的数据，并通过箭头图标直观展示上升和下降趋势。底部显示了昨日的销售额为￥30,000,000。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果截图
在这里插入图片描述
TotalOrders下index.vue

<template>
  <common-card
    title="累计销售"
    value="￥ 32,039,165"
  >
    <template>
      <div class="compare-wrapper">
        <div class="compare">
          <span>日同比</span>
          <span class="emphasis">7.08%</span>
          <div class="increase"></div>
        </div>
        <div class="compare">
          <span>日同比</span>
          <span class="emphasis">7.08%</span>
          <div class="decrease"></div>
        </div>
      </div>
    </template>
    <template v-slot:footer>
      <div>
        <span>昨日销售额 </span>
        <span class="emphasis">￥ 30,000,000</span>
      </div>
    </template>
  </common-card>
</template>

<script>
import commonCardMixin from '@/mixins/commonCardMixin'
export default {
  name: 'total-sales',
  mixins: [commonCardMixin]
}
</script>

<style scoped lang="scss">
.compare-wrapper{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.compare{
  display: flex;
  align-items: center;
  font-size: 12px;
  margin-top: 3px;
  color: #666;
}
span{
  font-size: 12px;
}
.increase{
 width: 0;
  height: 0;
  border-width: 3px;
  border-color: transparent transparent red transparent;
  margin: 0 0 3px 5px;
  border-style: solid;
}
.decrease{
  width: 0;
  height: 0;
  border-width: 3px;
  border-color: green transparent transparent transparent;
  margin: 5px 0 0 3px;
  border-style: solid;
}
</style>
<style>
.emphasis{
  margin-left: 5px;
  color: #000;
  font-weight: 700;
}
</style>