<!--
 * @FilePath: \wang-vue-worke:\demo\daping\src\views\environment\content\chart\verticalNum.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-02 10:56:18
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div class="box">
    <h2>{{ title }}</h2>
    <i :class="data>quota?'iconfont '+iconname+' icon-red':'iconfont '+iconname+' icon-blue'"></i>
    <!-- <div :class="data>quota?'icon-box-red':'icon-box-blue'">
      
      <div :class="data>quota?'unit-red':'unit-blue'">{{ unit }}</div>
      <div :class="data>quota?'num-red':'num-blue'">{{data}}</div>
      
    </div> -->
  <!-- <p>{{ data }}</p>
  <div>{{ unit }}</div> -->
  </div>

</template>

<script setup lang="ts">
import {onMounted, ref} from "vue"
let props=defineProps<{
    title:String,
    data?:number,
    unit?:String,
    quota?:number,
    iconname?:String
    }>()
    onMounted(() => {
      console.log(props.iconname);
      
    })
</script>

<style module>
 .container {
 }
</style>
<style scoped>
@import '@/assets/css/iconfont.css';
.box{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
h2{
  color: #fff;
}
/* p{
  color: red;
  font-size: 16px;
}
div{
  color: #fff;
  font-size: 16px;
  margin-bottom: 20px;
} */
.icon-box-red{
  top: -20px;
  height: 50%;
  width: 80%;
  background-color:rgba(255, 55, 55, 0.2);
  border-radius: 10%;
  /* border: 1px rgba(255, 255, 255, .3) solid; */
  box-shadow: 0 0 10px 2px rgba(253, 196, 196, 0.2) inset,
  0 0 0px 1px rgba(255, 255, 255, .3) inset;
  position: relative;
  transform-style: preserve-3d;
  /* -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 85%, 85% 100%, 0% 100%, 0% 100%, 0% 100%); */
}
.icon-box-red::before{
  position: absolute;
  top: 3px;
  left: 3px;
  width: 100%;
  height: 100%;
  border-radius: 10%;
  background-color:rgba(255, 55, 55, 0.2);
  border: 1px rgba(255, 0, 0, 0.2) solid;
  content:"";
  display: block;
  transform: translateZ(-1px);
  /* -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 87%, 87% 87%, 87% 100%, 0% 100%, 0% 100%, 0% 100%); */
}
.icon-red{
  font-size: 70px;
  color: red;

  position: relative;
  top: -15px;
}
.num-red{
  position: absolute;
  right: -13%;
  top: -15%;
  width: 40px;
  height: 40px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: red;
  font-weight: 500;
}
.unit-red{
  margin-top: -10px;
  font-size: 16px;
  color: red;
}

.icon-box-blue{
  top: -20px;
  height: 50%;
  width: 80%;
  background-color:rgba(126,191,227, 0.2);
  border-radius: 10%;
  border: 1px rgba(255, 255, 255, .3) solid;
  /* box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.2) inset,
  0 0 0px 2px rgba(255, 255, 255, .3) inset; */
  position: relative;
  transform-style: preserve-3d;
  /* -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 85%, 85% 100%, 0% 100%, 0% 100%, 0% 100%); */
}
.icon-box-blue::before{
  position: absolute;
  top: 3px;
  left: 3px;
  width: 100%;
  height: 100%;
  border-radius: 10%;
  background-color:rgba(126,191,227, 0.2);
  border: 1px rgba(0, 166, 255, 0.5) solid;
  content:"";
  display: block;
  transform: translateZ(-1px);
  /* -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 87%, 87% 87%, 87% 100%, 0% 100%, 0% 100%, 0% 100%); */
}
.icon-blue{
  font-size: 70px;
  color: #A7A6BD;

  position: relative;
  top: -15px;
}
.num-blue{
  position: absolute;
  right: -13%;
  top: -15%;
  width: 40px;
  height: 40px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: #7EBFE3;
  font-weight: 500;
}
.unit-blue{
  margin-top: -10px;
  font-size: 16px;
}

.demo-red{
  position: relative;
  top: -20px;
  height: 50%;
  width: 80%;
  background-color:rgba(255, 55, 55, 0.2);
  border: 5px rgba(255, 255, 255, .3) solid;
  border-radius: 10%;
}
.demo-icon-red{
  font-size: 70px;
  color: #fff;
  font-weight: 600;
  position: relative;
  top: -15px;
}
.demo-blue{
  position: relative;
  top: -20px;
  height: 50%;
  width: 80%;
  border: 5px #7EBFE3 solid;
  border-radius: 10%;
}
.demo-icon-blue{
  font-size: 70px;
  color: #7EBFE3;
  font-weight: 600;
  position: relative;
  top: -15px;
}
</style>
