自封组件-带背景效果的数据展示卡片

LXXgalaxy

已于 2023-12-20 14:56:55 修改

阅读量386

点赞数 11

分类专栏： elementUI vue 自封组件文章标签：前端 vue.js 开源软件

于 2023-12-20 10:05:58 首次发布

本文链接：https://blog.csdn.net/galaxyJING/article/details/135100989

版权

vue 同时被 3 个专栏收录

40 篇文章 1 订阅

订阅专栏

自封组件

21 篇文章 1 订阅

订阅专栏

elementUI

14 篇文章 1 订阅

订阅专栏

<template>
  <div>
    <div class="hd_shownum" :style="{height: height * 0.13+ 'px'}">
      <div style=" text-align: center;color: #FFFFFF;">
        <span class="hd_shadow_text">314</span>
        <span style="">元/MWh</span>
      </div>
      <div class="hd_cen_tips"style="margin-top:calc(10vh - 50px) ">中长期损益</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PriceCard'
}
</script>

<style scoped>
.hd_shownum {
  background: url('/img/bg/hd_big_center.png');
  background-size: 100% 100%;
  height: 90px;
  padding: 2px 3px;
  margin: 5px;
  color: #FFFFFF;
}
.hd_shadow_text{
  font-weight: bold;font-size: 30px;
  text-shadow: 0 0 4px #71b2ec;
}
.hd_cen_tips{
  text-align: center;
  height: 24px;
  background-image: linear-gradient(to right,#02113220, #268FEB, #02113220);
  color: #FFFFFF;
  /*margin-top: 30%;*/
}
</style>

图片以及全部资料：https://download.csdn.net/download/galaxyJING/88646107?spm=1001.2014.3001.5501