falvpingtai/src/Answer.vue

<template>
  <div class="box">
    <heads></heads>
    <div class="bodys">
      <div class="nav">
        <p class="selection">为你推荐</p>
        <p>全站热门</p>
        <p>邀请回答(68)</p>
        <p></p>
      </div>
      <div class="Recommend" v-show="false">
        <input type="text" placeholder="添加擅长话题" />
      </div>
      <div class="Popular" v-show="false">
        <div class="strip">
          <p class>如何评价谷歌的优化GEMM论文The Indirect Convolution Algorithm？</p>
          <p>3 个回答 · 255 人关注</p>
        </div>
        <div class="strip">
          <p class>如何评价谷歌的优化GEMM论文The Indirect Convolution Algorithm？</p>
          <p>3 个回答 · 255 人关注</p>
        </div>
        <div class="strip">
          <p class>如何评价谷歌的优化GEMM论文The Indirect Convolution Algorithm？</p>
          <p>3 个回答 · 255 人关注</p>
        </div>
      </div>
      <div class="Invitation">
        <div class="screen">
          <p class="selection">所有人(72)</p>
          <p>我关注的人(0)</p>
        </div>
        <div class="list">
          <div class="strip">
            <div>
              <p>如何评价谷歌的优化GEMM论文The Indirect Convolution Algorithm？</p>
              <p>3 个回答 · 255 人关注</p>
            </div>
            <p>忽略</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.box {
  padding-top: 90px;
  .bodys {
    width: 100%;
    min-height: 360px;
    background-color: #fff;
    .nav {
      display: flex;
      padding: 18px 30px;
      > p {
        font-size: 30px;
        color: #666;
        padding: 22px 32px;
        border-bottom: #ccc solid 1px;
      }
      > p:last-child {
        width: 10px;
      }
      .selection {
        border: #ccc solid 1px;
        border-bottom: none;
      }
    }
    .Recommend {
      margin-top: 27px;
      margin-left: 30px;
      > input {
        width: 510px;
        height: 80px;
        box-sizing: border-box;
        font-size: 26px;
        padding: 27px 21px;
        border: #ccc solid 1px;
        border-radius: 5px;
      }
    }
    .Popular {
      padding: 0 30px;
      .strip {
        padding: 26px 0 40px 0;
        border-bottom: #ccc solid 1px;
        //   width: 100%;
        > p {
          font-size: 30px;
          color: #465a33;
          width: 604px;
        }
        > p:last-child {
          font-size: 26px;
          color: #999;
          margin-top: 18px;
        }
      }
    }
    .Invitation {
      padding: 0 30px;
      .strip {
        padding: 26px 0 40px 0;
        border-bottom: #ccc solid 1px;
        //   width: 100%;
        display: flex;
        > div {
          width: 560px;
          > p {
            font-size: 30px;
            color: #465a33;
            width: 100%;
          }
          > p:last-child {
            font-size: 26px;
            color: #999;
            margin-top: 18px;
          }
        }
        >p{
          margin-top: 24px;
          width: 130px;
          height: 60px;
          border: #6B9147 solid 1px;
          font-size: 28px;
          text-align: center;
          line-height: 60px;
          color: #6B9147;
        }
      }
      .screen {
        border-bottom: #ccc solid 1px;
        display: flex;
        padding-bottom: 20px;
        > p {
          font-size: 28px;
          color: #95998f;
          padding-right: 29px;
          margin-right: 29px;
          border-right: #ccc solid 1px;
        }
        > p:last-child {
          border: none;
        }
        .selection {
          color: #333;
        }
      }
    }
  }
}
</style>
<script>
import heads from "./components/indexhead";
export default {
  name: "Answer",
  data() {
    return {};
  },
  components: {
    heads
  }
};
</script>