12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 |
- <template>
- <div class="count-bottom-title">
- <span v-if="tab==1" class="count-bottom-text">
- <span class="span1"></span>
- <span class="span2 Micbold">室内温度满足率</span>
- <span class="span3">{{rate}}%</span>
- </span>
- <span v-if="tab==2" class="count-bottom-text">
- <span class="span1"></span>
- <span class="span2 Micbold">节能率</span>
- <span class="span4">{{rate}}%</span>
- <span class="span5">准确率</span>
- <span class="span6">90%</span>
- </span>
- <span v-if="tab==3" class="count-bottom-text">
- <span class="span1"></span>
- <span class="span2 Micbold">执行率</span>
- <img class="span7" src="../../assets/finish.png" alt />
- </span>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {};
- },
- mounted() {},
- props: ["tab", "rate"]
- };
- </script>
- <style lang="scss" scoped>
- .count-bottom-title {
- display: flex;
- .count-bottom-text {
- height: 64px;
- background: rgba(248, 249, 250, 1);
- border-radius: 4px;
- border: 1px solid rgba(238, 238, 238, 1);
- display: flex;
- align-items: center;
- padding-right: 24px;
- .span1 {
- width: 4px;
- height: 64px;
- background: rgba(0, 145, 255, 1);
- border-radius: 4px 0 0 4px;
- margin-right: 20px;
- }
- .span2 {
- font-size: 20px;
- color: rgba(31, 36, 41, 1);
- margin-right: 12px;
- }
- .span3 {
- font-size: 24px;
- font-family: Persagy-Bold, Persagy;
- font-weight: bold;
- color: rgba(31, 36, 41, 1);
- }
- .span4 {
- font-size: 24px;
- font-family: Persagy-Bold, Persagy;
- font-weight: bold;
- color: rgba(31, 36, 41, 1);
- margin-right: 32px;
- }
- .span5 {
- font-size: 16px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: rgba(100, 108, 115, 1);
- margin-right: 8px;
- }
- .span6 {
- font-size: 16px;
- font-family: Persagy;
- color: rgba(100, 108, 115, 1);
- }
- .span7 {
- width: 20px;
- height: 20px;
- }
- }
- }
- </style>
|