移动点击底部弹出面板

移动点击底部弹出面板（nuxt）

html:

<!-- 刻字修改 -->
<div v-if="ifShowEditLetterPopup " class="edit-letter-popup">
  <div class="bg" @click="ifShowEditLetterPopup = false"></div>
  <div class="edit-letter-box" :class="{
   active:ifShowEditLetterPopup}">
    <div class="edit-info">
      <div class="head-title">
        <div class="title">{
   {
   lang.EngravingModification}}</div>
        <i @click="ifShowEditLetterPopup = false" class="el-icon-close"></i>
      </div>
      <div class="info-top">
      </div>
      
      <!-- 单品属性 -->
      <div class="single" v-if="type == 'single'">
        <!-- 刻字字体选择 -->
        <div class="font-selection">
          <div class="font-title">{
   {
   lang.FontSelect}}</div>
          <div class="radios">
              <div class="single-radio" :class="{
   'text-width-en':language == 'en_US'}" v-for="(item,index) in fontDetail" :key="index">
              <input
                :checked="fontsChoose.font == item.id"
                type="radio"
                @click="ChooseFont(item.id)"
              />
              <span @click="ChooseFont(item.id)">{
   {
   item.name}}</span>
            </div>
          </div>
        </div>
        <div class="content">
          <input id="input" type="text" v-model="lettering">
          <em ref="container"  class="em1" v-for="(a,index) in content" :key="index" @click="ChooseLetter('input',a)">{
   {
   a}}</em>
          <i class="looktokz" @click="Preview">{
   {
   lang.Preview}}</i>
        </div>
      </div>
      <div class="confirm" @click="confirmAttr()">{
   {
    lang.confirm }}</div>
    </div>
  </div>
</div>

css:

// 刻字弹窗
.edit-letter-popup{
   
  position: fixed;
  top: 0;
  left: 0;
  z-index: 22;
  width: 100%;
  height: 100%;
  // background-color: rgba(0, 0, 0, 0.5);
  // transition: all 0.1s linear;
  .bg{