投稿
问答

请问vue框架网页的下端有白块该怎么去掉？

作者：admin 2021-04-30 我要评论

由上图可看出，页面上端和下端显然样式不一，请问该怎么让下方白块消失呢？ template div id="mainPage" style="height:100%;width:100%"!-- a-layout id="compo...

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

image.png
由上图可看出，页面上端和下端显然样式不一，请问该怎么让下方白块消失呢？

<template>
  <div id="mainPage" style="height:100%;width:100%">
<!--    <a-layout id="components-layout-demo-top-side-2">-->
    <div id="header">
      <div class="logo">知&nbsp;否</div>

      <div id="title" @click="mainPage">
        <a-icon type="home" />&nbsp;首页
        <a-icon type="user" />&nbsp;个人中心
      </div>
        <input
            placeholder="input search text"
            size="large"
            @search="onSearch"
       >
        <button type="button" id="search" @click="onSearch" style="
    height: 15px;
    width: 80px;
    margin: 10px;
    padding: 18px;
    border-radius: 10px;
    line-height: 0px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 20px;
    color:white;
    position: absolute;
    background: deepskyblue;
    font-weight: bold;
    color: lightblue;



    transform: translateY(4px);
">提问</button>
      <div style="height:60px;weight:200px;float:right;padding: 0 20px;">
        <div id="right" style="padding: 20px 5px 10px 20px;">
        <a-icon type="bell"/>&nbsp;通知
        </div>
<!--        <div style="display: inline-block">
          ![](../assets/logo.png)
        </div>-->
        <template>
          <a-dropdown>
            <a style="color:white;font-size:15px" >
              {{ user_name }} <a-icon type="down" style="color:white;font-size:20px" />
            </a>
            <a-menu slot="overlay" @click="onClick">
              <a-menu-item key="1">
                <a-icon type="setting" />
                设置
              </a-menu-item>
              <a-menu-item key="2">
                <a-icon type="logout" />
                退出
              </a-menu-item>

            </a-menu>
          </a-dropdown>
        </template>

      </div>
    </div>

      <a-layout style="height:520px">

        <a-layout style="padding: 0 24px 24px">
          <a-breadcrumb style="margin: 16px 0">

          </a-breadcrumb>
          <a-layout-content
              :style="{ background: '#fff', padding: '14px', margin: 0, minHeight: '280px',width: '900px' }"
          >
            <div id="container_header">
              <a-menu mode="horizontal">
                <a-menu-item>推荐 </a-menu-item>
                <a-menu-item>关注</a-menu-item>
                <a-menu-item>热榜</a-menu-item>
              </a-menu>
            </div>
              <div id="question_block" v-for="item in questions">
                <p style="font-size: 15px" >{{item.user_name}}&nbsp;的提问期待你的解答</p><br/>
                <div style="float:right;background: red;font-size: 18px;padding:5px;color:white">未终结</div>
                <p id="question_title" style="font-size:20px;font-weight: bold">{{item.question_name}}</p><br/>
                <a @click="getAllAnswers">{{item.question_text}}&nbsp;&nbsp;查看全文&nbsp;<a-icon type="down" /></a><br/><br/>
                <a-button style="background: lightskyblue"><a-icon type="edit" />写回答</a-button>
                <div style="font-size: 14px;float:right;display:inline-block">{{item.question_date}}</div>
<!--                :{{item.question_shield_state}}:{{item.question_end_State}}:-->


              </div>

          </a-layout-content>
          <div id="side_card">
            <div
                style="height: 30px;
                      width: 100%;
                      text-align: center;
                      padding: 10px 0;
                      font-size: 20px;">
              创作中心
            </div>
            <a-divider style="margin:17px 0 13px 0;"/>

            <div style="height:80px;width:100%">
            <div style="height: 80px;width: 150px;padding: 0 0 0 20px;">
            <div style="height: 80px;
                  width: 100px;
                  text-align: center;
                  font-size: 20px;" @click="publishQuestions">
              <a-icon type="edit" style="fontSize:20px;padding: 0 0 10px 0"/><br/>
              发布问题
            </div>
            </div>

            <div style="position:absolute;
            display:inline-block;
            left: 150px;
            right: 0px;
            top: 60px;
            height: 80px;
            width: 10px;">
              <div style="height: 80px;
                  width: 100px;
                  text-align: center;
                  font-size: 20px;">
                <a-icon type="video-camera" style="fontSize:20px;padding: 0 0 10px 0"/><br/>
                发视频
              </div>
            </div>

            </div>
            <a-divider style="margin:17px 0 13px 0;"/>

            <a-row>
              <a-col :span="12" style="padding: 10px 0px;font-size: 20px;">
                稍后发
              </a-col>
              <a-divider type="vertical" style="height: 50px; position: absolute;right: 125px;"/>
              <a-col :span="12" style="padding: 10px 0px;font-size: 20px;">
                存草稿
              </a-col>
            </a-row>

          </div>
        </a-layout>

      </a-layout>
<!--      </a-layout>-->

  </div>

</template>

<!--import { Divider } from 'antd';-->
<script>

export default {
  name: 'mainPage',
  data () {
    return {
      questions: {

      },
      question_id: '',

      user_id:'',
      user_name:'',

    }
  },
  components:{

  },
  created:function() {
    console.log('created');
    this.getParameter();
    this.$nextTick(() => {
      // 在此处执行你要执行的函数
      this.getAllQuestions();

    })
  },
  methods: {
    getParameter(){
      // 将数据放在当前组件的数据内
      this.user_id = this.$route.params.user_id;
      this.user_name=this.$route.params.user_name;
    },

    onOpenChange (openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    },
    //分页获得所有的问题
    getAllQuestions () {
      var _this = this;
      _this.$axios.post('/api/question/getAllQuestions',
        _this.$qs.stringify({

        })
      ).then(function (response) {
        console.log("打印response.data：");
        console.log(response.data)
        console.log("打印list：");
        console.log(response.data.data)

        _this.questions = response.data.data;
        console.log("this.questions" + _this.questions)
      }).catch(function (error) {
        console.log(error);

      });
    },
    onClick ({ key }) {
      console.log(`Click on item ${key}`)
    },
    onSearch (value) {
      console.log(value)
    },
    mainPage(){
      this.$router.push({name:"mainPage"})
    },
    publishQuestions(){
      console.log(this.user_id,this.user_name);
      this.$router.push({name:"publishQuestions",params:{user_id:this.user_id,user_name:this.user_name}})
    },
    getAllAnswers() {
      var _this = this;
      _this.$axios.post('/api/answer/getAllAnswers',
        _this.$qs.stringify({
            question_id:_this.questions.question_id
        })
      ).then(function (response) {

        console.log('打印问题id:')
        _this.question_id=_this.questions.question_id;
        console.log(_this.questions.question_id)

      }).catch(function (error) {
        console.log(error);

      });
    },


  },



}
</script>

<style scoped>
@import "../assets/index.css";
</style>
<template>
  <div id="mainPage" style="height:100%;width:100%">
<!--    <a-layout id="components-layout-demo-top-side-2">-->
 <div id="header">
      <div class="logo">知&nbsp;否</div>
      <div id="title" @click="mainPage">
        <a-icon type="home" />&nbsp;首页
 <a-icon type="user" />&nbsp;个人中心
 </div>
        <input
 placeholder="input search text"
 size="large"
 @search="onSearch"
 >
        <button type="button" id="search" @click="onSearch" style="
 height: 15px;
    width: 80px;
    margin: 10px;
    padding: 18px;
    border-radius: 10px;
    line-height: 0px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 20px;
    color:white;
    position: absolute;
    background: deepskyblue;
    font-weight: bold;
    color: lightblue;
    transform: translateY(4px);
">提问</button>
      <div style="height:60px;weight:200px;float:right;padding: 0 20px;">
        <div id="right" style="padding: 20px 5px 10px 20px;">
        <a-icon type="bell"/>&nbsp;通知
 </div>
<!--        <div style="display: inline-block">
 <img alt="Vue logo" src="../assets/logo.png" style="width:50px;height:50px;padding: 0 0 10px 10px;"> </div>--> <template>
          <a-dropdown>
            <a style="color:white;font-size:15px" >
              {{ user_name }} <a-icon type="down" style="color:white;font-size:20px" />
            </a>
            <a-menu slot="overlay" @click="onClick">
              <a-menu-item key="1">
                <a-icon type="setting" />
                设置
 </a-menu-item>
              <a-menu-item key="2">
                <a-icon type="logout" />
                退出
 </a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>
      </div>
    </div>
      <a-layout style="height:520px">
        <a-layout style="padding: 0 24px 24px">
          <a-breadcrumb style="margin: 16px 0">
          </a-breadcrumb>
          <a-layout-content
 :style="{ background: '#fff', padding: '14px', margin: 0, minHeight: '280px',width: '900px' }"
 >
            <div id="container_header">
              <a-menu mode="horizontal">
                <a-menu-item>推荐 </a-menu-item>
                <a-menu-item>关注</a-menu-item>
                <a-menu-item>热榜</a-menu-item>
              </a-menu>
            </div>
              <div id="question_block" v-for="item in questions">
                <p style="font-size: 15px" >{{item.user_name}}&nbsp;的提问期待你的解答</p><br/>
                <div style="float:right;background: red;font-size: 18px;padding:5px;color:white">未终结</div>
                <p id="question_title" style="font-size:20px;font-weight: bold">{{item.question_name}}</p><br/>
                <a @click="getAllAnswers">{{item.question_text}}&nbsp;&nbsp;查看全文&nbsp;<a-icon type="down" /></a><br/><br/>
                <a-button style="background: lightskyblue"><a-icon type="edit" />写回答</a-button>
                <div style="font-size: 14px;float:right;display:inline-block">{{item.question_date}}</div>
<!--                :{{item.question_shield_state}}:{{item.question_end_State}}:-->
 </div>
          </a-layout-content>
          <div id="side_card">
            <div
 style="height: 30px;
                      width: 100%;
                      text-align: center;
                      padding: 10px 0;
                      font-size: 20px;">
              创作中心
 </div>
            <a-divider style="margin:17px 0 13px 0;"/>
            <div style="height:80px;width:100%">
            <div style="height: 80px;width: 150px;padding: 0 0 0 20px;">
            <div style="height: 80px;
                  width: 100px;
                  text-align: center;
                  font-size: 20px;" @click="publishQuestions">
              <a-icon type="edit" style="fontSize:20px;padding: 0 0 10px 0"/><br/>
              发布问题
 </div>
            </div>
            <div style="position:absolute;
            display:inline-block;
            left: 150px;
            right: 0px;
            top: 60px;
            height: 80px;
            width: 10px;">
              <div style="height: 80px;
                  width: 100px;
                  text-align: center;
                  font-size: 20px;">
                <a-icon type="video-camera" style="fontSize:20px;padding: 0 0 10px 0"/><br/>
                发视频
 </div>
            </div>
            </div>
            <a-divider style="margin:17px 0 13px 0;"/>
            <a-row>
              <a-col :span="12" style="padding: 10px 0px;font-size: 20px;">
                稍后发
 </a-col>
              <a-divider type="vertical" style="height: 50px; position: absolute;right: 125px;"/>
              <a-col :span="12" style="padding: 10px 0px;font-size: 20px;">
                存草稿
 </a-col>
            </a-row>
          </div>
        </a-layout>
      </a-layout>
<!--      </a-layout>-->
 </div>
</template>
<!--import { Divider } from 'antd';-->
<script>
export default {
  name: 'mainPage',
  data () {
    return {
      questions: {
      },
      question_id: '',
      user_id:'',
      user_name:'',
    }
  },
  components:{
  },
  created:function() {
    console.log('created');
    this.getParameter();
    this.$nextTick(() => {
      // 在此处执行你要执行的函数
 this.getAllQuestions();
    })
  },
  methods: {
    getParameter(){
      // 将数据放在当前组件的数据内
 this.user_id = this.$route.params.user_id;
      this.user_name=this.$route.params.user_name;
    },
    onOpenChange (openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    },
    //分页获得所有的问题
 getAllQuestions () {
      var _this = this;
      _this.$axios.post('/api/question/getAllQuestions',
        _this.$qs.stringify({
        })
      ).then(function (response) {
        console.log("打印response.data：");
        console.log(response.data)
        console.log("打印list：");
        console.log(response.data.data)
        _this.questions = response.data.data;
        console.log("this.questions" + _this.questions)
      }).catch(function (error) {
        console.log(error);
      });
    },
    onClick ({ key }) {
      console.log(`Click on item ${key}`)
    },
    onSearch (value) {
      console.log(value)
    },
    mainPage(){
      this.$router.push({name:"mainPage"})
    },
    publishQuestions(){
      console.log(this.user_id,this.user_name);
      this.$router.push({name:"publishQuestions",params:{user_id:this.user_id,user_name:this.user_name}})
    },
    getAllAnswers() {
      var _this = this;
      _this.$axios.post('/api/answer/getAllAnswers',
        _this.$qs.stringify({
            question_id:_this.questions.question_id
 })
      ).then(function (response) {
        console.log('打印问题id:')
        _this.question_id=_this.questions.question_id;
        console.log(_this.questions.question_id)
      }).catch(function (error) {
        console.log(error);
      });
    },
  },
}
</script>
<style scoped>
@import "../assets/index.css";
</style>

此为mainPage.vue代码，下为相关index.css代码

.logo {
    width: 180px;
    font-weight: bold;
    font-family: "96B64E66";
    text-align: center;
    font-size: 35px;
    color: white;
    float: left;
}
#mainPage,#Questions {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
    height:100%;
}
#header{
    position: relative;
    min-width: 1000px;
    height:60px;
    background: dodgerblue;
}
#title,#right{
    display: inline-block;
    padding: 20px 10px 10px 0px;
    font-size: 16px;
    line-height: 22px;
    color:white;
    font-weight: bold;
    font-size:20px;
}
#ask_box{
    box-sizing: border-box;
    margin: 0;
    min-width: 0;
    flex: 1;
    -webkit-box-pack: center;
    justify-content: center;
    display: flex;
}
input{
    width:400px;
    height:40px;
    margin: 5px auto;/*外边距30px，输入框居中*/
 padding: 8px;/*设置内边距*/
 text-align: center;/*文字居中*/
 border: 1px solid #EBEBEB;/*把输入框包起来，变成长方形*/
 border-radius: 10px;/*让长方形的4个角弯一点，*/
 font-family: 'Source Sans Pro', sans-serif;/*字体类型*/
 font-size: 18px;/*字体大小*/
 /*你点击输入框，会出现一个边框，下面代码是去掉原来边框*/
 outline: none;
}
/*button {
 height: 15px; width: 80px; margin: 10px; padding: 18px; border-radius: 10px; line-height: 0px; font-family: 'Source Sans Pro', sans-serif; font-size: 20px; color:white; position: absolute; background: deepskyblue;}
button:hover{
 font-weight: bold; color: lightblue;
}
button:active {
 transform: translateY(4px);}*/
#side_card{
    position: absolute;
    background: white;
    top: 90px;
    left:930px;
    height:230px;
    width:280px;
    background: whitesmoke;
}
#side_card:hover {
    -webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;
    /*鼠标移动是过渡*/
 box-shadow: 0px 0px 100px #FFFFFF/*四边出现阴影，效果发光*/
}
a-icon{
    fontSize:20px;
    color:white;
}
#container_header{
  font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
  font-size: 15px;
  background: #fff;
  margin-bottom: 0!important;
  text-align: left;
}
#question_block{
  font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
  font-size: 11px;
  color: #121212;
  -webkit-tap-highlight-color: rgba(18,18,18,0);
  background: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 0;
  padding: 15px 0 0px 5px;
  border-bottom: 1px solid #f0f2f7;
  width: 860px;
  text-align: left;
  height: 130px;
}

此为index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Q&Asystem</title>
  <style type="text/css">
    html, body, #app {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

此为App.vue
望诸位解答。

###

image.png

我试着跑了一下你的代码，感觉显示效果差挺大的，而且你貌似请求的本地服务器模拟的数据吧，好在大致样子有了，我这F12就只发现 #side_card 是背景灰色的，你自己定位看看这个怎么改是你想要的结果

#side_card{
    position: absolute;
    background: white;
    top: 90px;
    left:930px;
    height:230px;
    width:280px;
    background: whitesmoke;
}

版权声明：本文转载自网络，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的，如有侵权请联系QQ/微信：153890879删除

相关文章
  • 请问vue框架网页的下端有白块该怎么去

    请问vue框架网页的下端有白块该怎么去

  • 这个 post 请求体和请求结果是啥意思？

    这个 post 请求体和请求结果是啥意思？

  • 一个正则看不懂

    一个正则看不懂

  • 如何实现chrome.exe动态加载本地的html

    如何实现chrome.exe动态加载本地的html

腾讯云代理商
精彩导读
/uploads/allimg/210421/1201216142-0-lp.jpg

怎么实现多行不定列自适应布局

/uploads/allimg/210420/1500233312-0-lp.jpg

使用render生成的VNode 必须唯一，那是

/images/defaultpic.gif

给form表单设置属性失败

/images/defaultpic.gif

2021-02-21：手写代码：高性能路由，也

/images/defaultpic.gif

grid布局如何把元素拉伸到最大？

/uploads/allimg/210421/2101303J2-0-lp.jpg

fiddler everywhere mac版抓不了包

海外云服务器
热门资讯
备案：湘ICP备15009499号-1
网站简介 投稿须知 商务合作 版权申明 技术支持：TOP云