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

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

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