<template>
  <div class="container4" @click="fn(ajqkUrl)">
    <div class="one">{{str}}</div>
    <div class="two">{{data.value}}</div>
    <div class="three">
      环比 
      <span style="color: #00ff00; font-weight: 700" v-if="data.type == 'down'">↓</span> 
      <span style="color: #ff0000; font-weight: 700" v-else>↑</span> 
      {{data.percentage}}
    </div>
  </div>
</template>

<script>

export default {
  props:['data','str'],
  data() {
    return {
      ajqkUrl:'http://219.147.99.164:8082/servicecity/route/bigdata/list-case-info-ajlx.html',
    }
  },
  methods:{
    fn(url) {
      layer.open({
        type: 2,
        content: url, 
        area: ['80%', '80%'],
        title:'' ,
      });
    },
  }
  
};
</script>

<style scoped lang="scss">
.container4 {
  /* border: 1px solid #00ffff;  */
  width: 15.9896vw;
  height: 10.2481vh;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.1);
  .one {
    font-size: 0.8333vw;
  }
  .two {
    font-size: 1.3021vw;
    margin: 0.5393vh 0;
  }
  .three {
    font-size: 0.5208vw;
  }
 
}

</style>