test

<template>
<div>

<el-input
  type="textarea"
  :rows="2"
  placeholder="请输入内容"
  v-model="keyValue">
</el-input>
        <div class="numKey" @click="handClick">
          <div class="numKey_left">
            <button type="button" class="pad-num specialkey" data-num="1">1</button>
            <button type="button" class="pad-num specialkey" data-num="2">2</button>
            <button type="button" class="pad-num specialkey" data-num="3">3</button>
            <button type="button" class="pad-num specialkey" data-num="4">4</button>
            <button type="button" class="pad-num specialkey" data-num="5">5</button>
            <button type="button" class="pad-num specialkey" data-num="6">6</button>
            <button type="button" class="pad-num specialkey" data-num="7">7</button>
            <button type="button" class="pad-num specialkey" data-num="8">8</button>
            <button type="button" class="pad-num specialkey" data-num="9">9</button>
            <button type="button" class="pad-num specialkey" data-num="<"><</button>
            <button type="button" class="pad-num specialkey" data-num="0">0</button>
            <button type="button" class="pad-num specialkey" data-num=".">.</button>
          </div>


          <div class="numKey_right">
            <div class="pos-right">
              <button type="button" class="pad-num1 specialkey border-right" style="100%" data-num="*">*</button>
              <button type="button" class="pad-num1 specialkey border-right" style="100%" data-num="C">C</button>
            </div>
            <button type="button" class="pad-num3 specialkey border-right" style="100%" data-num="Fast">Fast Item<br></button>
            <button type="button" class="pad-num4 specialkey border-right" data-num="enter">Enter</button>
          </div>

        </div>
        </div>
</template>

<script>
export default {
  data() {
    return {
      keyValue: ""
    };
  },
  methods: {
    handClick(e) {
      let value = e.target.dataset.num;
      switch (String(value)) {
        case "C":
          this.keyValue = "";
          break;
        case "enter":
          this.keyValue += "
";
          break;
        default:
          this.keyValue += value;
          break;
      }
    }
  }
};
</script>



<style lang="scss">
@import "./index.scss";
</style>

.numKey{
  display: flex;
   270px;
  flex-direction: row;
}

.numKey_left{
   75%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  .pad-num {
    color: #ffffff;
    30.333%;
    margin: 2px;
    height: 60px;
    font-weight: 900;
    font-size: 25px;
    cursor: pointer;
    background-color:#43aae4;
    border-radius: 5px;
  }
}



//旁边

.numKey_right {
  display: flex;
  flex-direction: column;
   25%;
}

.pos-right{
  display: flex;
  flex-direction: row;
  100%;
  .pad-num1{
    background-color:#43aae4;
     50%;
    height: 60px;
    font-size: 20px;
    color: #ffffff;
    margin: 2px;
    font-weight: 900;
    border-radius: 5px;
  }
}


.pad-num3{
  background-color:#43aae4;
  height: 60px;
  margin: 2px 2px 4px 2px;
  font-size: 20px;
  font-weight: 500;
  color: #ffffff;
  border-radius: 5px;
}

.pad-num4{
   100%;
  background-color:#43aae4;
  height: 124px;
  border-radius: 0%;
  font-size: 30px;
  cursor: pointer;
  color: #c3f31a;
  font-weight: 700;
  border-radius: 5px;
  margin-left: 2px;
}