Javascript 窗口内容后添加的空白缩小NUXT.js/Vue.js

因此，在缩小窗口时，我对页面的样式有一个问题。一开始，如果我刷新页面就可以了。我最大化窗口，然后缩小窗口再次和空白出现没有任何原因。我最初在结尾有一个页脚。然而，我只是删除了它，因为我认为这是我的问题的答案。

不是我想要的！页脚后有空格

我想要实现的目标

UnreleasedVault.vue

<template>
  <div class="container">
    <v-container class="myGrid">
      <v-card
        v-for="song in songs"
        :key="song.id"
        :class="song.color"
        :color="song.color + 'lighten-2'"
        tile
        flat
        width="100%"
        height="100%"
        @click="!isPlaying ? playSong(song.url,song.id) : pause(song.url,song.id)"
      >
        <v-img class="card-img" :src="song.cover_art_url" width="inherit" height="inherit">
          <div v-if="song.id === setSong" :class="song.id">
            <v-progress-circular
              v-if="isPlaying"
              :class="song.id"
              :rotate="360"
              :size="200"
              :width="15"
              :value="value"
              color="red accent-3"
              style="margin: 0;
                   position: absolute;
                   progress-circular-rotate-animation: progress-circular-rotate 0.5 linear infinite !default;
                   top: 50%;
                   left: 50%;
                   -ms-transform: translate(-50%, -50%);
                   transform: translate(-50%, -50%);"
            >
              <font-awesome-icon :icon="['fas', 'stop']" class=" fa-4x " />
            </v-progress-circular>
          </div>
        </v-img>
      </v-card>
    </v-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      interval: {},
      audio: undefined,
      isPlaying: false,
      value: 0,
      setSong: undefined,
      lorem: 'Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos.',
      songs: [
        {
          color: 'orange',
          id: 1,
          title: 'Tomb Stone',
          album: '',
          url: 'https://drive.google.com/uc?export=download&id=1Rvybbfj5KDks15M_NYyx_qpXLlJhmThM',
          cover_art_url: 'https://i.pinimg.com/originals/d3/b8/6c/d3b86cac17b13f95a31cf2c23de4ed38.jpg'
        },
        {
          color: 'yellow',
          title: 'Love Me More',
          album: '',
          url: 'https://drive.google.com/uc?export=download&id=1PpzXwxf4ibqC-glQovXsP7qI7z5woQiC',
          cover_art_url: 'https://i.scdn.co/image/523aeca7d02ba33ec03dd8837130b83e9c51a130'
        },
        {
          color: 'cyan',
          id: 3,
          title: 'Wet Dreamz',
          album: '',
          url: 'https://drive.google.com/uc?export=download&id=19v1iWSOud5tt16muoKG3fc55X8gTt_-4',
          cover_art_url: 'https://i.pinimg.com/originals/d3/b8/6c/d3b86cac17b13f95a31cf2c23de4ed38.jpg'
        },
        {
          color: 'indigo',
          id: 4,
          title: 'Love',
          album: '',
          url: 'https://drive.google.com/uc?export=download&id=1gRvnYa-O8gPwcq58nceBwIwDJv2Rb_uF',
          cover_art_url: 'https://i.pinimg.com/originals/d3/b8/6c/d3b86cac17b13f95a31cf2c23de4ed38.jpg'
        },
        {
          color: 'red1',
          id: 5,
          title: 'Pop It',
          album: '',
          url: 'https://drive.google.com/uc?export=download&id=1HOS3PMzC1UF19DxF-NQFWgbtB4bwC-BQ',
          cover_art_url: 'https://i.pinimg.com/originals/d3/b8/6c/d3b86cac17b13f95a31cf2c23de4ed38.jpg'
        },
        {
          color: 'red2',
          id: 6,
          title: 'Rich Forever',
          album: '',
          url: 'https://drive.google.com/uc?export=download&id=1fQ-_5vto1bZPCXBN41tNFyJ2FgemHCRu',
          cover_art_url: 'https://i.scdn.co/image/523aeca7d02ba33ec03dd8837130b83e9c51a130'
        },
        {
          color: 'red3',
          id: 7,
          title: 'Dance All Night',
          album: '',
          url: 'https://drive.google.com/uc?export=download&id=1fZsCp6F4ToSn8l4lH13kaDWWTfGG2Nw8',
          cover_art_url: 'https://i.scdn.co/image/523aeca7d02ba33ec03dd8837130b83e9c51a130'
        }
      ]
    };
  },
  methods: {
    playSong (songurl, songid) {
      // if nothing is playing at all
      if (this.isPlaying === false) {
        this.audio = new Audio(songurl)
        this.audio.play();
        this.interval = setInterval(() => {
          if (Math.ceil(this.value) === 100) {
            this.pause(songurl, songid);
            return (this.value = 0)
          }
          this.value += 3.33;
          console.log(Math.ceil(this.value));
        }, 1000)
      }
      this.isPlaying = true;
      this.setSong = songid
      console.log(this.isPlaying, songurl);
    },
    pause (songurl, songid) {
      if (this.setSong === songid) {
        this.audio.pause();
        this.isPlaying = false;
        clearInterval(this.interval);
        this.value = 0;
      } else {
        console.log('play the new song and send the id');
        this.audio.pause();
        this.isPlaying = false;
        clearInterval(this.interval);
        this.value = 0;
        this.playSong(songurl, songid);
      }
    }
  }
}
</script>

<style>
.myGrid {
  display: grid;
  width: 100vw;
  height: 100vh;
  grid-template-columns: 30% 40% 30%;
  grid-template-rows: repeat(3, 33%);
  grid-template-areas:
    "orange cyan red1"
    "orange indigo2 red2"
    "yellow indigo2 red3"
    ". . red4"
    "purple green blue"
    ;
    grid-gap: 0.3rem;
    justify-items: stretch;
    align-items: stretch;
}
.orange {
  grid-area: orange;
}
/* .orange:hover{
   box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
  transform: translate3d(0px, -4px, 0px);
} */
.indigo {
  grid-area: indigo2 }
/* .indigo2:hover {
  box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
  transform: translate3d(0px, -4px, 0px);
} */
.red1 {
  grid-area: red1 }
/* .red1:hover{
  box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
  transform: translate3d(0px, -4px, 0px);
} */
.red2 {
  grid-area: red2 }
/* .red2:hover{
  box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
  transform: translate3d(0px, -4px, 0px);
  } */
.red3 {
  grid-area: red3}
  /* .red3:hover{
  box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
  transform: translate3d(0px, -4px, 0px);
  } */
.red4 {
  grid-area: red4}
  /* .red4:hover{
    box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
  transform: translate3d(0px, -4px, 0px);
  } */
.green {
  grid-area: green }
  /* .green:hover {
    box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
  transform: translate3d(0px, -4px, 0px);
  } */
.purple {
  grid-area: purple}
  /* .purple:hover{
  box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
  transform: translate3d(0px, -4px, 0px);
  } */
.blue { grid-area: blue }
  /* .blue:hover{
    box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
  transform: translate3d(0px, -4px, 0px);
  } */
.yellow {
  grid-area: yellow
}
/* .yellow:hover{
  box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
  transform: translate3d(0px, -4px, 0px);
} */
.cyan{
  grid-area: cyan
}
/* .cyan:hover {
  box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
  transform: translate3d(0px, -4px, 0px);
} */
@media only screen and (max-width:960px) {
  .myGrid{
    width: 100vw;
    height: 100vh;
    grid-template-columns: 100%;
    grid-template-rows: repeat(7,14.3%);
    grid-template-areas:
    "oranage"
    "yellow"
    "cyan"
    "indigo2"
    "red1"
    "red2"
    "red3"
  }
}
</style>

导出默认值{
数据（）{
返回{
间隔：{}，
音频：未定义，
isplay:false，
值：0，
setSong:未定义，
lorem:“lorem ipsum door sit amet，mel在clita quando。Te sit oratio vitutoribus，nam ad ipsum posidonium mediocatem，解释不同意见的原因。共和国的争议非常激烈，没有必要进行辩论，在欧盟成立之前进行辩论。”，
歌曲：[
{
颜色：“橙色”，
id:1，
标题:"墓碑",，
相册：“”，
网址：'https://drive.google.com/uc?export=download&id=1Rvybbfj5KDks15M_NYyx_qpXLlJhmThM',
封面图片网址：'https://i.pinimg.com/originals/d3/b8/6c/d3b86cac17b13f95a31cf2c23de4ed38.jpg'
},
{
颜色：'黄色'，
标题：“更爱我”，
相册：“”，
网址：'https://drive.google.com/uc?export=download&id=1PpzXwxf4ibqC-glQovXsP7qI7z5woQiC'，
封面图片网址：'https://i.scdn.co/image/523aeca7d02ba33ec03dd8837130b83e9c51a130'
},
{
颜色：“青色”，
id:3，
标题：“湿梦”，
相册：“”，
网址：'https://drive.google.com/uc?export=download&id=19v1iWSOud5tt16muoKG3fc55X8gTt_-4',
封面图片网址：'https://i.pinimg.com/originals/d3/b8/6c/d3b86cac17b13f95a31cf2c23de4ed38.jpg'
},
{
颜色：“靛蓝”，
id:4，
标题:"爱",，
相册：“”，
网址：'https://drive.google.com/uc?export=download&id=1gRvnYa-O8gPwcq58nceBwIwDJv2Rb_uF'，
封面图片网址：'https://i.pinimg.com/originals/d3/b8/6c/d3b86cac17b13f95a31cf2c23de4ed38.jpg'
},
{
颜色：“红色1”，
id:5，
标题：“Pop It”，
相册：“”，
网址：'https://drive.google.com/uc?export=download&id=1HOS3PMzC1UF19DxF-NQFWGB4B4C BQ'，
封面图片网址：'https://i.pinimg.com/originals/d3/b8/6c/d3b86cac17b13f95a31cf2c23de4ed38.jpg'
},
{
颜色：“红色2”，
id:6，
标题:"永远富有",，
相册：“”，
网址：'https://drive.google.com/uc?export=download&id=1fQ-_5vto1bZPCXBN41tNFyJ2FgemHCRu'，
封面图片网址：'https://i.scdn.co/image/523aeca7d02ba33ec03dd8837130b83e9c51a130'
},
{
颜色：“红色3”，
id:7，
标题：“整夜跳舞”，
相册：“”，
网址：'https://drive.google.com/uc?export=download&id=1fZsCp6F4ToSn8l4lH13kaDWWTfGG2Nw8',
封面图片网址：'https://i.scdn.co/image/523aeca7d02ba33ec03dd8837130b83e9c51a130'
}
]
};
},
方法：{
playSong（songurl，songid）{
//如果什么都没有
如果（this.isPlaying==false）{
this.audio=新音频（songurl）
这个.audio.play（）；
this.interval=setInterval（（）=>{
if（Math.ceil（this.value）==100）{
暂停（songurl，songid）；
返回（this.value=0）
}
该值+=3.33；
log（Math.ceil（this.value））；
}, 1000)
}
this.isplay=true；
this.setSong=songid
console.log（this.isPlaying，songurl）；
},
暂停（songurl、songid）{
if（this.setSong==songid）{
this.audio.pause（）；
this.isplay=false；
clearInterval（这个.interval）；
该值=0；
}否则{
log（'播放新歌并发送id'）；
this.audio.pause（）；
this.isplay=false；
clearInterval（这个.interval）；
该值=0；
this.playSong（songurl，songid）；
}
}
}
}
.myGrid{
显示：网格；
宽度：100vw；
高度：100vh；
网格模板列：30%40%30%；
网格模板行：重复（3,33%）；
网格模板区域：
“橙色青色红色1”
“橙色靛蓝红色2”
“黄色靛蓝红色3”
“.red4”
“紫绿蓝”
;
网格间距：0.3rem；
调整项目：拉伸；
对齐项目：拉伸；
}
.橙色{
网格区域：橙色；
}
/*橙色：悬停{
盒影：rgba（0,0,0,0.22）0px 19px 43px；
转换：translate3d（0px，-4px，0px）；
} */
靛蓝{
网格区域：靛蓝}
/*.indigo2:悬停{
盒影：rgba（0,0,0,0.22）0px 19px 43px；
转换：translate3d（0px，-4px，0px）；
} */
.red1{
网格区域：red1}
/*.red1:悬停{
盒影：rgba（0,0,0,0.22）0px 19px 43px；
转换：translate3d（0px，-4px，0px）；
} */
.red2{
网格区域：red2}
/*.red2:悬停{
盒影：rgba（0,0,0,0.22）0px 19px 43px；
转换：translate3d（0px，-4px，0px）；
} */
.red3{
网格区域：red3}
/*.red3:悬停{
盒影：rgba（0,0,0,0.22）0px 19px 43px；
转换：translate3d（0px，-4px，0px）；
} */
.red4{
网格区域：red4}
/*.red4:悬停{
盒影：rgba（0,0,0,0.22）0px 19px 43px；
转换：translate3d（0px，-4px，0px）；
} */
格林先生{
网格区域：绿色}
/*.格林：悬停{
盒影：rgba（0,0,0,0.22）0px 19px 43px；
转换：translate3d（0px，-4px，0px）；
} */
紫色{
网格区域：紫色}
/*紫色：悬停{
盒影：rgba（0,0,0,0.22）0px 19px 43px；
转换：translate3d（0px，-4px，0px）；
} */
.blue{网格区域：blue}
/*蓝色：悬停{
盒影：rgba（0,0,0,0.22）0px 19px 43px；
转换：translate3d（0px，-4px，0px）；
} */
耶尔先生
<template>
  <!-- App.vue -->
  <v-app>
    <div>
      <v-app-bar color="transparent">
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
        <v-spacer></v-spacer>

        <span class=" fa-2x " @click="redirect('https://www.instagram.com/_bertab/')">
          <font-awesome-icon :icon="['fab', 'instagram']" />
        </span>
        <span class=" fa-2x " @click="redirect('https://www.youtube.com/channel/UCtjsu3dwIPX505yXjOaCHKg')">
          <font-awesome-icon :icon="['fab', 'youtube']" />
        </span>
      </v-app-bar>
    </div>

    <!-- Sizes your content based upon application components -->
    <v-main class="v-main">
      <!-- Provides the application the proper gutter -->
      <section>
        <v-img src="https://wallpaperaccess.com/full/912523.jpg"></v-img>
        <UnreleasedVault />
      </section>
    </v-main>
  </v-app>
</template>

<script>
import 'nuxt-fontawesome'
import UnreleasedVault from '../components/UnreleasedVault';
export default {
  components: { UnreleasedVault },
  methods: {
    redirect (link) {
      window.location = link;
    }
  }
}

</script>
<style>
v-app, body{
    width:100%;
    height:100%
}
.myFont {
  font-family: "Winter";
}
.v-btn:hover:before {
  opacity: 0 !important;
}
@media only screen and (max-width: 767px) {
 .v-footer {
  background: orange;
  bottom: 0px;
  width:100vw;
  margin-bottom:0;
}
 }
</style>