ld/ld-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix layout problem.

Browse Source
This commit is contained in:
liding 2024-06-30 09:32:26 +08:00
parent 1146f3b180
commit cf9e51611a
2 changed files with 28 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/tool/unit_conversion/DataUnitConversion.vue
View File

@ -187,7 +187,10 @@ const isMultipleOf4KiB = computed(() => {
<style>
h1,
p,
p {
margin: 0.5em 0;
}
.unit-conversion-computation-node {
margin: 0.5em 0;
}
@ -198,18 +201,18 @@ p,
margin: 0 8px 0 0;
}
.size-text {
.unit-conversion-computation-node .size-text {
margin: 0 6px 0 0;
width: 125px
}
@media screen and (max-width: 395px) {
.unit-conversion-computation-node {
width: 130px;
width: 140px;
}
.size-text {
width: 85px;
.unit-conversion-computation-node .size-text {
width: 95px;
}
}

37
src/components/tool/unit_conversion/WeightConversion.vue
View File

@ -68,37 +68,37 @@ function weightChanged(unitName) {
<template>
<h1>重量换算</h1>
<div class="unit-conversion-computation-area metric">
<div class="weight-conversion-computation-area metric">
<p>公制重量:</p>
<div class="unit-conversion-computation-node">
<div class="weight-conversion-computation-node">
<input class="size-text" :id="twToMetricUnitName.KILOGRAM" type="text"
v-model="weight[twToMetricUnitName.KILOGRAM]" @input="weightChanged(twToMetricUnitName.KILOGRAM)">
<span class="unit-name">千克</span>
</div>
<div class="unit-conversion-computation-node">
<div class="weight-conversion-computation-node">
<input class="size-text" :id="twToMetricUnitName.GRAM" type="text" v-model="weight[twToMetricUnitName.GRAM]"
@input="weightChanged(twToMetricUnitName.GRAM)">
<span class="unit-name">克</span>
</div>
</div>
<div class="unit-conversion-computation-area tw">
<div class="weight-conversion-computation-area tw">
<p>台湾制重量:</p>
<div class="unit-conversion-computation-node">
<div class="weight-conversion-computation-node">
<input class="size-text" :id="twToMetricUnitName.JIN" type="text" v-model="weight[twToMetricUnitName.JIN]"
@input="weightChanged(twToMetricUnitName.JIN)">
<span class="unit-name">斤</span>
</div>
<div class="unit-conversion-computation-node">
<div class="weight-conversion-computation-node">
<input class="size-text" :id="twToMetricUnitName.LIANG" type="text" v-model="weight[twToMetricUnitName.LIANG]"
@input="weightChanged(twToMetricUnitName.LIANG)">
<span class="unit-name">两</span>
</div>
<div class="unit-conversion-computation-node">
<div class="weight-conversion-computation-node">
<input class="size-text" :id="twToMetricUnitName.QIAN" type="text" v-model="weight[twToMetricUnitName.QIAN]"
@input="weightChanged(twToMetricUnitName.QIAN)">
<span class="unit-name">钱</span>
</div>
<div class="unit-conversion-computation-node">
<div class="weight-conversion-computation-node">
<input class="size-text" :id="twToMetricUnitName.FEN" type="text" v-model="weight[twToMetricUnitName.FEN]"
@input="weightChanged(twToMetricUnitName.FEN)">
<span class="unit-name">分</span>
@ -108,39 +108,42 @@ function weightChanged(unitName) {
<style>
h1,
p,
.unit-conversion-computation-node {
p {
margin: 0.5em 0;
}
.unit-conversion-computation-node {
.weight-conversion-computation-node {
margin: 0.5em 0;
}
.weight-conversion-computation-node {
float: left;
width: 170px;
margin: 0 8px 0 0;
}
.size-text {
.weight-conversion-computation-node .size-text {
margin: 0 6px 0 0;
width: 115px
}
@media screen and (max-width: 395px) {
.unit-conversion-computation-node {
width: 130px;
.weight-conversion-computation-node {
width: 140px;
}
.size-text {
.weight-conversion-computation-node .size-text {
width: 85px;
}
}
.unit-conversion-computation-area::after {
.weight-conversion-computation-area::after {
content: '';
display: block;
clear: both;
}
.unit-conversion-computation-result {
.weight-conversion-computation-result {
margin: 0.5em 0 0.5em 0;
height: 1em;
}