69 lines
1.0 KiB
Vue
69 lines
1.0 KiB
Vue
<template>
|
|
<div
|
|
class="digit-box"
|
|
:class="[
|
|
value in '0123456789'.split('') ? 'digit' : 'zhHans',
|
|
wider ? 'another-hw' : '',
|
|
]"
|
|
>
|
|
{{ value }}
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "DigitalBox",
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
default: "0",
|
|
},
|
|
wider: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "../../assets/styles/functions";
|
|
|
|
.digit-box {
|
|
// height: h(80px);
|
|
// width: w(64px);
|
|
height: adjust(h(80px));
|
|
width: adjust(w(56px));
|
|
color: white;
|
|
background: url(../../assets/digit.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
padding: adjust(2px);
|
|
text-align: center;
|
|
user-select: none;
|
|
}
|
|
|
|
.digit {
|
|
font-family: "zcoolqingkehuangyouti-Regular", sans-serif;
|
|
font-size: adjust(32px);
|
|
line-height: adjust(39px);
|
|
}
|
|
|
|
.zhHans {
|
|
font-size: adjust(18px);
|
|
line-height: adjust(48px);
|
|
}
|
|
|
|
.another-hw {
|
|
height: adjust(h(72px));
|
|
width: adjust(w(62px));
|
|
}
|
|
|
|
.another-hw.digit {
|
|
font-size: adjust(32px);
|
|
line-height: adjust(32px);
|
|
}
|
|
</style>
|