128 lines
2.1 KiB
Vue
128 lines
2.1 KiB
Vue
<!--
|
|
filename: CityValue.vue
|
|
author: liubin
|
|
date: 2024-04-10 08:59:28
|
|
description:
|
|
-->
|
|
|
|
<template>
|
|
<div class="city-value" :class="[horizontal ? 'horizontal' : '']">
|
|
<span class="hint" :class="[horizontal ? 'horizontal' : '']">{{
|
|
period == "周" ? "本周产出" : "今日产出"
|
|
}}</span>
|
|
<span class="value" :class="[horizontal ? 'horizontal' : '']">{{
|
|
value | numberFilter
|
|
}}</span>
|
|
<!-- <GradientTextVue :text="value" :size="horizontal ? 32 : 26" /> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import GradientTextVue from "./GradientText.vue";
|
|
|
|
export default {
|
|
name: "CityValue",
|
|
components: { GradientTextVue },
|
|
props: {
|
|
period: {
|
|
type: String,
|
|
default: "日",
|
|
},
|
|
value: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
horizontal: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
filters: {
|
|
numberFilter(value) {
|
|
if (value != null && !isNaN(parseInt(value))) {
|
|
return parseInt(value).toLocaleString();
|
|
} else {
|
|
return value;
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.city-value {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 8px;
|
|
flex: 2;
|
|
position: relative;
|
|
}
|
|
|
|
.city-value.horizontal {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.city-value::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 1px;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
transparent 20%,
|
|
#fff 50%,
|
|
transparent 80%
|
|
);
|
|
}
|
|
|
|
span.hint {
|
|
margin: 0 0.77vw;
|
|
font-size: 0.77vw;
|
|
order: 2;
|
|
/* margin: 0 12px;
|
|
width: 32px;
|
|
font-size: 12px; */
|
|
}
|
|
|
|
span.hint.horizontal {
|
|
margin: 0 1.235vw;
|
|
width: 1.543vw;
|
|
order: 1;
|
|
font-size: 0.77vw;
|
|
/* margin: 0 12px;
|
|
width: 32px;
|
|
font-size: 12px; */
|
|
}
|
|
|
|
.value {
|
|
color: #4dd2fe;
|
|
text-align: center;
|
|
font-size: 1.132vw;
|
|
order: 1;
|
|
}
|
|
.value.horizontal {
|
|
text-align: left;
|
|
flex: 1;
|
|
font-size: 1.543vw;
|
|
order: 2;
|
|
}
|
|
|
|
svg,
|
|
.value {
|
|
width: 100px;
|
|
order: 1;
|
|
}
|
|
|
|
.value.horizontal,
|
|
svg.horizontal {
|
|
order: 2;
|
|
}
|
|
</style>
|