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

2023-12-20 14:45:01

<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://blog.csdn.net/galaxyJING/article/details/135100989
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。