仿简书页面代码示例（1）

这次，我将写一个仿简书的一个项目，这里将实时跟新进度。

首先是前端项目

• 编译工具：WebStorm
• 代码语言：Java

未登录就能显示的界面

• 登录界面

<template>
    <div class="main">
      <div class="logo">
        <router-link to="/index">
        <img src="//cdn2.jianshu.io/assets/web/logo-58fd04f6f0de908401aa561cda6a0688.png">
        </router-link>
      </div>
      <div class="sign">
        <div class="row">
          <router-link to="/sign_in"><h4 class="sign_in active">登录</h4></router-link>
          <a><h4>·</h4></a>
          <router-link to="sign_up"><h4 class="sign_up">注册</h4></router-link>
        </div>
        <div class="wirte">
          <div>
            <br class="input-group">
              <input type="text" class="form-control" placeholder="手机号或邮箱"><br>
              <input type="text" class="form-control" placeholder="密码">
              <div class="rember">
                <div class="fore">
                  <input type="checkbox" ><span>记住我</span>
                </div>
                <div class="back">
                  <p>登录遇到问题？</p>
                </div>
              </div><br>
              <div class="btn">
                <b-button variant="primary" size="lg">登录</b-button>
              </div>
            <div class="line_02"><span>社交账号登录</span></div>
            <ul class="row">
              <li><img src="../../../static/img/微博.png"></li>
              <li><img src="../../../static/img/微信.png"></li>
              <li><img src="../../../static/img/qq.png"></li>
              <li><a>其它</a></li>
            </ul>
            </div>
          </div>
        </div>
      </div>
</template>

<script>
  export default {
        name: "Signin"
    }
</script>

<style scoped>
  .main {
    height: 100%;
    min-height: 750px;
    text-align: center;
    font-size: 14px;
    background-color: #f1f1f1;
  }
  .logo {
    position: absolute;
    top: 56px;
    margin-left: 50px;
  }
  .sign {
    width: 400px;
    margin: 150px auto 0;
    padding: 50px 50px 30px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(0,0,0,.1);
    vertical-align: middle;
    display: inline-block;
  }
  h4{
    padding: 10px;
    font-family: "宋体";
  }
  h4:hover {
    text-decoration: underline;
  }
  .sign_in {
    margin-left: 80px;
    cursor: pointer;
  }
  .sign_up {
    cursor: pointer;
  }
  input {
    background-color: gainsboro;
  }
  .rember{
    margin-top: 20px;
  }
  .fore {
    float: left;
  }
  .back {
    float: right;
  }
  .btn {
    width:250px;
    border-radius: 50px;
  }

  .line_02{
    height: 1px;
    border-top: 1px solid gray;
    text-align: center;
    margin-top: 20px;
  }
  .line_02 span{
    position: relative;
    top: -8px;
    background: #fff;
    padding: 0 20px;
  }
  ul li{
    list-style-type: none;
    padding: 20px 15px;
    cursor: pointer;
  }
  ul li span{
    font-size: 18px;
  }
</style>

siginin.png

• 注册界面

<template>
  <div class="main">
    <div class="logo">
      <router-link to="/index">
        <img src="//cdn2.jianshu.io/assets/web/logo-58fd04f6f0de908401aa561cda6a0688.png">
      </router-link>
    </div>
    <div class="sign">
      <div class="row">
        <router-link to="/sign_in"><h4 class="sign_in active">登录</h4></router-link>
        <a><h4>·</h4></a>
        <router-link to="sign_up"><h4 class="sign_up">注册</h4></router-link>
      </div>
      <div class="wirte">
        <div>
          <br class="input-group">
          <input type="text" class="form-control" placeholder="你的昵称"><br>
          <input type="text" class="form-control" placeholder="手机号"><br>
          <input type="text" class="form-control" placeholder="设置密码">
          <div class="btn">
            <b-button variant="success" size="lg">注册</b-button><br>
          </div>
          <p class="message">"点击 “注册” 即表示您同意并愿意遵守简书"<br>
            <a target="_blank" href="http://www.jianshu.com/p/c44d171298ce">用户协议</a>" 和 "
            <a target="_blank" href="http://www.jianshu.com/p/2ov8x3">隐私政策</a>" 。"</p>
          <div class="line_02"><span>社交账号直接注册</span></div>
          <ul class="row">
            <li><img src="../../../static/img/微信.png"></li>
            <li><img src="../../../static/img/qq.png"></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "Signup"
    }
</script>

<style scoped>
  .main {
    height: 100%;
    min-height: 750px;
    text-align: center;
    font-size: 14px;
    background-color: #f1f1f1;
  }
  .logo {
    position: absolute;
    top: 56px;
    margin-left: 50px;
  }
  .sign {
    width: 400px;
    margin: 150px auto 0;
    padding: 50px 50px 30px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(0,0,0,.1);
    vertical-align: middle;
    display: inline-block;
  }
  h4{
    padding: 10px;
    font-family: "宋体";
  }
  h4:hover {
    text-decoration: underline;
  }
  .sign_in {
    margin-left: 80px;
    cursor: pointer;
  }
  .sign_up {
    cursor: pointer;
  }
  input {
    background-color: gainsboro;
  }
  .btn {
    width:260px;
    border-radius: 50px;
    text-align: center;
  }

  .line_02{
    height: 1px;
    border-top: 1px solid gray;
    text-align: center;
    margin-top: 20px;
  }
  .line_02 span{
    position: relative;
    top: -8px;
    background: #fff;
    padding: 0 20px;
  }
  ul li{
    list-style-type: none;
    padding: 20px 40px;
    cursor: pointer;
  }
</style>

siginup.png

• 主界面（这里只贴部分代码）

  
  001.png

<template>
    <div class="little">
      <a class="collection" v-for="lists in topicList" :key="lists.id">
        <router-link :to="'/c/' + lists.id">
          <img v-bind:src="lists.href" alt="64">
          <div class="name">{{lists.name}}</div>
        </router-link>
      </a>
      <a class="morecollection">
        <router-link to="/collections/tuijian">
          <span class="name"> 更多热门专题 >
          </span>
        </router-link>
      </a>
    </div>
</template>

<script>
    export default {
        name: "LittleCollections",
      data(){
          return {
            topicList:[
              {
                "id":1,
                "href":"//upload.jianshu.io/collections/images/21/20120316041115481.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64",
                "name":"简书电影"
              },
              {
                "id":2,
                "href":"//upload.jianshu.io/collections/images/283250/%E6%BC%AB%E7%94%BB%E4%B8%93%E9%A2%98.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64",
                "name":"手绘"
              },
              {
                "id":3,
                "href":"//upload.jianshu.io/collections/images/83/1.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64",
                "name":"摄影"
              },
              {
                "id":4,
                "href":"//upload.jianshu.io/collections/images/76/12.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64",
                "name":"自然科普"
              },{
                "id":5,
                "href":"//upload.jianshu.io/collections/images/14/6249340_194140034135_2.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64",
                "name":"IT@互联网"
              },{
                "id":6,
                "href":"//upload.jianshu.io/collections/images/4/sy_20091020135145113016.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64",
                "name":"读书"
              },
              {
                "id":7,
                "href":"//upload.jianshu.io/collections/images/95/1.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64",
                "name":"故事"
              }
            ]
          }
      }
    }
</script>

<style scoped>
  .little {
    margin-bottom: 20px;
    margin-top: 50px;
  }
  .collection {
    display: inline-block;
    margin: 0 18px 18px 0;
    min-height: 32px;
    background-color: #f7f7f7;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    vertical-align: top;
    overflow: hidden;
    cursor: pointer;
  }
  .morecollection {
    display: inline-block;
  }
  .collection img {
    width: 32px;
    height: 32px;
    vertical-align: center;
  }
  .name {
    display: inline-block;
    padding: 0 11px 0 6px;
    font-size: 14px;
  }
  .name:hover {
    list-style-type: none;
  }
  a {
    text-decoration: none;
    list-style-type: none;
    color: black;
  }
</style>

002.png

<template>
    <div class="main">
      <div class="head">
        <p>推荐作者</p>
      </div>
      <div class="main" v-for="authors in authorList">
          <a><img v-bind:src=authors.avatar></a>
        <p class="name">{{authors.name}}</p>
        <p class="info">写了{{authors.wordsCount}}字，{{authors.likeCount}}喜欢</p>
        <p class="guanzhu">+关注</p>
      </div>
      <router-link to="/users"><div class="seeall"><span>查看全部 ></span></div></router-link>
    </div>
</template>

<script>
    export default {
        name: "RecommandAuthor",
      data(){
          return {
            authorList:[
              {
                "avatar":"//upload.jianshu.io/users/upload_avatars/6305091/b1912e7b-20d1-41a6-94f3-5a0d1c81fc5a.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp",
                "name":"只有一半影子的人",
                "wordsCount":"422.5k",
                "likeCount":"33.1k"
              },
              {
                "avatar":"//upload.jianshu.io/users/upload_avatars/1835526/9bc600ce-7672-42b8-b03b-1a779593dd45.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp",
                "name":"简书版权",
                "wordsCount":" 491.2k",
                "likeCount":"42.7k"
              },
              {
                "avatar":"//upload.jianshu.io/users/upload_avatars/3730494/4a86a2a7-d5b9-47f1-969a-d8ef4711488b.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp",
                "name":"格列柯南",
                "wordsCount":" 491.2k",
                "likeCount":"42.7k"
              },
              {
                "avatar":"//upload.jianshu.io/users/upload_avatars/6305091/b1912e7b-20d1-41a6-94f3-5a0d1c81fc5a.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp",
                "name":"只有一半影子的人",
                "wordsCount":" 491.2k",
                "likeCount":"42.7k"
              },
              {
                "avatar":"//upload.jianshu.io/users/upload_avatars/6305091/b1912e7b-20d1-41a6-94f3-5a0d1c81fc5a.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp",
                "name":"只有一半影子的人",
                "wordsCount":" 491.2k",
                "likeCount":"42.7k"
              }
            ]
          }
      }
    }
</script>

<style scoped>
img {
  border-radius: 100px;
  width: 50px;
  height: 50px;
}
  .head {
    margin-top: 50px;
  }
  .info {
    margin-left: 55px;
    margin-top: -10px;
    font-size: x-small;
  }
  .name {
    margin-top: -45px;
    margin-left: 55px;
  }
  .guanzhu {
    margin-left: 300px;
    margin-top: -50px;
    color: green;
    cursor: pointer;
  }
  .main {
    margin: 30px 0;
  }
  .seeall{
    border-radius: 2px;
    background-color: #f7f7f7;
    border: solid;
    border-width: 0.5px;
    border-color: #f6f6f6;
    height: 30px;
    text-align: center;
    cursor: pointer;
  }
  a:hover{
    text-decoration: none;
  }
  a:link{
    color: black;

  }
</style>

更多代码请见我的GitHub地址

https://github.com/1094064939/JianshuFrontEnd