vue3用Grid布局 写了一个数字输入小键盘

后端工程师 写起了前端 只能说 很丑！！！！！！
Grid布局是一种用于网页布局的CSS模块，它允许您以类似于表格的方式创建复杂的网格结构。通过将网页划分为行和列，您可以轻松地定位和调整网页中的元素。

在Grid布局中，您可以定义网格容器（grid container）和网格项目（grid item）两个主要部分。

网格容器（Grid Container）:
通过将一个元素的 display 属性设置为 grid 或 inline-grid，您可以将其标记为网格容器。 网格容器中的子元素将成为网格项目。 您可以使用属性如 grid-template-rows、grid-template-columns 和 grid-template-areas 来定义网格的行和列，以及各个网格单元的布局。
网格项目（Grid Item）:
网格容器中的直接子元素被称为网格项目。 您可以使用属性如 grid-row、grid-column 和 grid-area 来控制网格项目在网格中的位置和大小。 通过这些属性，您可以指定网格项目所占据的行和列的起始和结束位置，或者使用网格命名区域（grid named areas）来指定它们在网格中的位置。 使用Grid布局，您可以轻松创建复杂的网格结构，并通过简单的属性和值来调整网格中各个项目的位置和大小。这使得响应式布局变得更加容易，因为您可以自由调整网格的行列布局，以适应不同的屏幕尺寸和设备。

<template>
  <div>
    <div>
      <input type="text" @click="isInputChoose = true" v-model="number" />
    </div>
    <div>
      <div class="grid-container" v-if="isInputChoose">
        <div class="grid-item"><button @click="x(1)">1</button></div>
        <div class="grid-item"><button @click="x(2)">2</button></div>
        <div class="grid-item"><button @click="x(3)">3</button></div>
        <div class="grid-item"><button @click="x(4)">4</button></div>
        <div class="grid-item"><button @click="x(5)">5</button></div>
        <div class="grid-item"><button @click="x(6)">6</button></div>
        <div class="grid-item"><button @click="x(7)">7</button></div>
        <div class="grid-item"><button @click="x(8)">8</button></div>
        <div class="grid-item"><button @click="x(9)">9</button></div>
        <div class="grid-item"><button @click="x(10)">0</button></div>
        <div class="grid-item"><button @click="x(11)">清除</button></div>
        <div class="grid-item"><button @click="x(12)">确认</button></div>
      </div>
    </div>
  </div>
</template>

  <script setup>
import { ref } from "vue";
let number = ref("");
let calNumber = ref("");
let isInputChoose = ref(false);
const x = (value) => {
  console.log("v", value);
  if (value != 11 && value != 12) {
    number.value = number.value + value;
    console.log(number.value);
  }
  if (value == 11) {
    number.value = number.value.slice(0, -1);
    console.log(number.value);
  }
  if (value == 12) {
    calNumber.value = number.value;
    console.log(calNumber.value);
    isInputChoose.value = false;
    number.value=''
  }
};
</script>
  <style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 20%);
  grid-template-rows: repeat(4, 30%);
  grid-gap: 10px;
  width: 40vw; /* 页面宽度的40% */
  height: 30vh; /* 页面高度的30% */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.grid-item {
  width: 100%; /* 按钮宽度填满网格 */
  height: 100%; /* 按钮高度填满网格 */
  border-radius: 10px; /* 圆角矩形 */
  border: 1px solid white; /* 白色边框 */
  background-color: transparent; /* 无背景色 */
  color: white; /* 白色字体 */
  /* background-color: rgb(39, 39, 49); */
}

.grid-item button {
  width: 100%;
  height: 100%;
  border-radius: 10px; /* 圆角矩形 */
  background-color: rgb(39, 39, 49);
  border: none;
  color: white;
  font-size: 30px;
  font-weight: bold;
  transition: background-color 0.3s;
}

.grid-item button:active {
  background-color: #c9c9c9;
}

</style>
  

效果图