仿簡書頁面代碼示例（1）

這次，我將寫一個仿簡書的一個項目，這里將實時跟新進度。

首先是前端項目

  • 編譯工具：WebStorm
  • 代碼語言：Java

未登錄就能顯示的界面

  • 登錄界面
<template>
    <div class="main">
      <div class="logo">
        <router-link to="/index">
        <img src="http://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="http://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="設(shè)置密碼">
          <div class="btn">
            <b-button variant="success" size="lg">注冊</b-button><br>
          </div>
          <p class="message">"點擊 “注冊” 即表示您同意并愿意遵守簡書"<br>
            <a target="_blank" href="http://www.itdecent.cn/p/c44d171298ce">用戶協(xié)議</a>" 和 "
            <a target="_blank" href="http://www.itdecent.cn/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":"http://upload.jianshu.io/collections/images/21/20120316041115481.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64",
                "name":"簡書電影"
              },
              {
                "id":2,
                "href":"http://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":"http://upload.jianshu.io/collections/images/83/1.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64",
                "name":"攝影"
              },
              {
                "id":4,
                "href":"http://upload.jianshu.io/collections/images/76/12.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64",
                "name":"自然科普"
              },{
                "id":5,
                "href":"http://upload.jianshu.io/collections/images/14/6249340_194140034135_2.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64",
                "name":"IT@互聯(lián)網(wǎng)"
              },{
                "id":6,
                "href":"http://upload.jianshu.io/collections/images/4/sy_20091020135145113016.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64",
                "name":"讀書"
              },
              {
                "id":7,
                "href":"http://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">寫了{(lán){authors.wordsCount}}字，{{authors.likeCount}}喜歡</p>
        <p class="guanzhu">+關(guān)注</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":"http://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":"http://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":"簡書版權(quán)",
                "wordsCount":" 491.2k",
                "likeCount":"42.7k"
              },
              {
                "avatar":"http://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":"http://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":"http://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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,094評論 25贊 709
  • 用兩張圖告訴你，為什么你的 App 會卡頓? - Android - 掘金 Cover 有什么料？ 從這篇文章中你...
    hw1212閱讀 14,024評論 2贊 59
  • 你想要什么 天上的云 夜空的星 期盼的愛人 明媚的眼睛 你想要什么。 不要 云 星辰 影子愛人 明媚的眼睛 山河湖...
    手掌心_60fa閱讀 751評論 0贊 0
  • 回老家，有種特別的感覺。 漸漸的，我感受到古人為何要把這段時間空出來，專門來慶祝新年。 古時這段時間，應(yīng)該比現(xiàn)在還...
    薛衡閱讀 499評論 3贊 3
  • 私家偵探的能力還是很不錯的。不過一個星期，他們就給了我調(diào)查結(jié)果。 顧寒現(xiàn)在有一家不大的冷鏈物流公司，兩個月前，出了...
    沐弘晨閱讀 492評論 0贊 22

友情鏈接更多精彩內(nèi)容