一.项目访问

本项目预览：点击访问

本项目经过作者的最大努力，长期的键盘敲打，以最大限度仿照实现PC版的《微信读书》样式，因为是仿照，所以怎么也不可能与原作品相提并论（此处省略一万个谦虚的表情…），项目仅仅以作为学习和助于个人成长之用。
其实作者最近经常看到这样一个情景：每天人来人往中，无论是上班、下班途中，还是地铁、公交车上，很多人，手里拿着手机，低着头，很专注地在看小说（屏幕字体很大，所以一看就知道了…），所以作者的灵感也来源于此，而微信读书也是偶然的机会看到了，想想微信的产品肯定也是顶呱呱！喜欢，那就下手吧~

获取源码 或 有任何问题 的朋友可通过博客最后的名片添加作者或留言、私聊都可（会马上回复）。

二.项目效果图及实现

1. 首页

源码

<template>
  <div class="wr_page_index">
    <div class="home_page_container">
      <div class="ranking_topCategory_container">
        <div v-for="i in 4" class="ranking_block_container">
          <div class="ranking_block_header">
            <h2 class="ranking_block_header_title">飙升·出版</h2>
            <a class="ranking_block_header_link">
              <img :src="require('../../../public/img/ranklist.png')" alt="TOP200" class="ranking_block_header_cover">
              <p class="ranking_block_header_desc">
                <span style="color:#FF4593;">微信读书用户近期热读的出版书</span>
              </p>
            </a>
          </div>
          <div class="ranking_block_body">
            <div class="ranking_block_body_left">
              <div v-for="i in 3" @click="bookDetail" title="通透（独家首发）" class="ranking_block_book">
                <a class="ranking_block_book_link"></a>
                <div class="ranking_block_book_container">
                  <div class="wr_bookCover ranking_block_book_cover">
                    <!----><!----><!----><!---->
                    <img :src="require('../../../public/img/1680246060.jpg')" alt="书籍封面" class="wr_bookCover_img">
                    <div class="wr_bookCover_border"></div>
                    <span class="wr_bookCover_decor wr_bookCover_gradientDecor wr_bookCover_borderDecor"></span>
                  </div>
                  <div class="ranking_block_book_bookInfo">
                    <div class="ranking_block_book_title">
                      <div class="ranking_block_book_index">1</div>
                      <div class="ranking_block_book_title_text">通透（独家首发）</div>
                    </div>
                    <a class="ranking_block_book_author">杨天真</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="ranking_block_body_right">
              <div v-for="i in 3" @click="bookDetail" title="与狐说" class="ranking_block_book">
                <a class="ranking_block_book_link"></a>
                <div class="ranking_block_book_container">
                  <div class="wr_bookCover ranking_block_book_cover">
                    <!----><!----><!----><!---->
                    <img :src="require('../../../public/img/1677576298.jpg')" alt="书籍封面" class="wr_bookCover_img">
                    <div class="wr_bookCover_border"></div>
                    <span class="wr_bookCover_decor wr_bookCover_gradientDecor wr_bookCover_borderDecor"></span>
                  </div>
                  <div class="ranking_block_book_bookInfo">
                    <div class="ranking_block_book_title">
                      <div class="ranking_block_book_index">4</div>
                      <div class="ranking_block_book_title_text">与狐说</div>
                    </div>
                    <a class="ranking_block_book_author">萝卜药丸了</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="ranking_block_footer">
            <a class="ranking_block_footer_link" @click="type">
              <span class="ranking_block_footer_link_text">查看全部</span>
              <span class="ranking_block_footer_link_icon"></span>
            </a>
          </div>

        </div>
      </div>

      <div class="ranking_allCategory_container">
        <div class="ranking_allCategory_header">
          <h2 class="ranking_allCategory_header_title">分类榜单</h2>
        </div>
        <ul class="ranking_allCategory_list">
          <li class="ranking_allCategory_list_li"><a class="ranking_allCategory_list_item">精品小说 · 18392本</a></li>
          <li class="ranking_allCategory_list_li"><a class="ranking_allCategory_list_item">历史 · 26365本</a></li>
          <li class="ranking_allCategory_list_li"><a class="ranking_allCategory_list_item">文学 · 34642本</a></li>
          <li class="ranking_allCategory_list_li"><a class="ranking_allCategory_list_item">艺术 · 8085本</a></li>
          <li class="ranking_allCategory_list_li"><a class="ranking_allCategory_list_item">人物传记 · 5795本</a></li>
          <li class="ranking_allCategory_list_li"><a class="ranking_allCategory_list_item">哲学宗教 · 5223本</a></li>
          <li class="ranking_allCategory_list_li"><a class="ranking_allCategory_list_item">计算机 · 11237本</a></li>
          <li class="ranking_allCategory_list_li"><a class="ranking_allCategory_list_item">心理 · 3748本</a></li>
          <li class="ranking_allCategory_list_li"><a class="ranking_allCategory_list_item">社会文化 · 20781本</a></li>
          <li class="ranking_allCategory_list_li"><a class="ranking_allCategory_list_item">个人成长 · 13194本</a></li>
          <li class="ranking_allCategory_list_li"><a class="ranking_allCategory_list_item">经济理财 · 24027本</a></li>
          <li class="ranking_allCategory_list_li" @click="type">
            <a class="ranking_allCategory_list_all">
            <span class="ranking_allCategory_list_all_text">查看全部 · 19个</span>
            <span class="ranking_allCategory_list_all_icon"></span>
          </a></li>
        </ul>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
      
      
    data() {
      
      
      return {
      
      
      };
    },
    mounted() {
      
      
    },
    methods: {
      
      
      bookDetail(){
      
      //详情
        this.$router.push({
      
      path: '/bookDetail'});
      },
      type(){
      
      //分类
        this.$router.push({
      
      path: '/type'});
      },
    }
  };
</script>

2. 分类

3.详情

源码：

<template>
  <div class="readerContent routerView app_content_navBarOffset" style="background: #000000;">
    <div class="app_content">
      <div class="topAnchor"></div>
      <div class="readerBookInfo">
        <div class="readerBookInfo_head">
          <div class="wr_bookCover bookInfo_cover">
            <!----><!----><!----><!---->
            <img :src="require('../../../public/img/1680246060.jpg')" alt="书籍封面" class="wr_bookCover_img">
            <div class="wr_bookCover_border"></div>
            <span class="wr_bookCover_decor wr_bookCover_gradientDecor wr_bookCover_borderDecor"></span>
          </div>
          <div class="bookInfo_right">
            <h2 class="bookInfo_right_header">
              <div class="bookInfo_right_header_title">通透（独家首发）</div>
              <button class="bookInfo_right_header_addShelfBtn bookInfo_right_header_addShelfBtn_Add">
                <span class="bookInfo_right_header_addShelfBtn_icon"></span>
                加入书架
              </button>
            </h2>
            <div class="bookInfo_author_container">
              <a class="bookInfo_author link">杨天真</a>
            </div>
            <a class="bookInfo_rankList rankList_newbook"></a>
            <div class="bookInfo_intro hasMore">
              【活成人间清醒，从读懂人性开始！人际关系的避坑指南 破解人际关系的密码，洞悉人性的本质。自我认知说明书 在变化的世界中寻找自己的锚点。宋佳、吴梦知、薛兆丰 作序，刘墉、罗翔、马东 诚意推荐！】这是一本从A到Z的人性词典，也是一本关于情商提升、自我认知，内心成长，让你活得自信、明白、通透的人生通关秘籍。大码女装品牌PLUSMALL主理人杨天真，用她丰富的职场、人生、创业经验，以人性的若干关键词入手，贴近生活的案例，妙语连珠的分析，帮助读者深挖人性，了解自我，观察世界，领悟情商的真谛，分析当代人常见的焦虑、社恐、迷茫、纠结等难题，在变化的世界中寻找自己的锚点。
            </div>
          </div>
        </div>
      </div>

      <div class="book_ratings_container">
        <div class="book_ratings_header">
        微信读书推荐值
        <!---->
        </div>
        <div aria-label="button" class="book_rating_item_container book_rating_item_container_Clickable">
          <div class="book_rating_item_detail">
            <span class="book_rating_item_label_number">
              68.3<span class="book_rating_item_label_number_suffix">%</span>
            </span>
            <div class="book_rating_item_detail_count">
              <span>221人点评</span>
              <div class="book_rating_item_detail_count_icon">
              </div>
            </div>
          </div>
          <div class="book_rating_item_bar_container">
            <div class="book_rating_item_bar">
              <span>推荐</span>
              <div class="book_rating_item_bar_background">
                <div class="book_rating_item_bar_content" style="width:68%;"></div>
              </div>
            </div>
            <div class="book_rating_item_bar book_rating_item_bar_margin">
              <span>一般</span>
              <div class="book_rating_item_bar_background">
                <div class="book_rating_item_bar_content" style="width:21%;"></div>
              </div>
            </div>
            <div class="book_rating_item_bar">
              <span>不行</span>
              <div class="book_rating_item_bar_background">
                <div class="book_rating_item_bar_content" style="width:11%;"></div>
              </div>
            </div>
          </div>
        </div>
        <!---->
        <div class="book_ratings_button_container">
          <a class="book_ratings_button book_ratings_button_Good">
            <div class="book_ratings_button_icon">
            </div>
            推荐
          </a>
          <a class="book_ratings_button book_ratings_button_Fair">
            <div class="book_ratings_button_icon"></div>
            一般
          </a>
          <a class="book_ratings_button book_ratings_button_Poor">
            <div class="book_ratings_button_icon"></div>
            不行
          </a>
        </div>
      </div>

      <div class="reader_bookReviewList">
        <div class="lineBox"></div>
        <div class="reader_topReview_container">
          <div class="reader_topReview_header"><p class="reader_topReview_title">精彩点评</p></div>
          <div class="reader_topReview_content">
            <li v-for="i in 3" :key="i" @click="commentDetail" class="bookReviewList_item clickable">
              <div class="title">
                <div class="wr_avatar avatar">
                  <img :src="require('../../../public/img/96.jpg')" class="wr_avatar_img">
                </div>
                <span class="name">西祖</span>
                <div class="wr_ratingLevelBar wr_ratingLevelBar_Good">
                  <div class="wr_ratingLevelBar_icon"></div>
                  <div class="wr_ratingLevelBar_text">推荐</div>
                </div>
              </div>
              <p data-v-21cffff7="" class="content content_Normal">
                杨绛先生曾说过：“年轻的时候，以为不读书不足以了解人生，直到后来才发现，如果不了解人生是读不懂书的。读书的意义大概就是，用生活所感去读书，用读书所感去生活吧。”读完了杨天真女士的新书《通透》，这种读书与生活相互融合的感觉更深刻。
              全书从A-Y分享了25个"现代关键词”案例和解决方案，干货量充足，信息量巨大。但是到最后一章“Z”杨女士告诉我们要“重新开始”，因为“书的开头，她提到过，知行合一很难；所以在书的结尾，她想说，读懂人性后，从零开始。”
              关于上瘾：“人对做自己喜欢的事情入迷。”培养自己积极上瘾的行为，把注意力分配给那些对我们更有价值的事情。
              关于钝感力：钝感力的核心是—面对你再怎么努力都无法改变的事情，能积极调整心态。|其实别人并没有像我们自己那样注意我们。
              关于偏心偏爱：关于不公平的存在，是一种常态，大多数时候我们无法解决不公平这件事，我们要解决的是当这件事发生在我们身上时，我们该以什么样的心态和行动来应对。
              关于纠结：每个问题的背后都隐藏着一个更深层次的、关于自己价值体系的问题——什么对自己更重要。
              关于偏见：每一个个体都不应当被不公平地对待，偏见是由人产生的，也就必然只能从自身做起，不断学习和提升自我认知水平去减弱偏见对我们的影响。
              关于瓶颈：如果已经陷入瓶颈，可以选择“向内看”，调整好自己的状态，等待下一个机会；或者“向外看”，打破目前的局面，蕞好是办法一定是保持学习，提升自身的能力。毕竟应对所有焦虑的蕞优解，都是保持学习。
              何为“通透”？第yi，能明确自己的目的；第二，能厘清他人行为背后的逻辑；第三，能放下对人性的幻想和对他人的期待。世间万事万物，总有其运行规律，通透就是你在了解了自己，了解自己和世界的关系之后，能够做出更从容、自洽的选择。
              书中醒脑金句频出，恨不能全书摘抄，但很明显这不是通透之举，还有人熬夜看完全书的（虽然我有时也会熬夜看书），但如此有损健康的行为明显也不是通透之举。任何新知识或新技能，从“知道”到“做到”，都有一个漫长的探索过程。

              “她什么都知道，还那么天真。”杨天真女士通过多年的自我探索，将自己的人生经验和对人性的思考，倾注在这本书中。所谓的高情商，并不是要教人“诈”，而是在追寻“知行合一”的道路上，先读懂人性，在遇见清醒的自己。
              正如好友宋佳在为本书做序时评价她是“一个勇敢的人”，在“折腾”的路上，永葆自信和豁达，不断实现自我超越。人生没有标准答案，通透的人之所以通透，是因为读懂人性之后，把自己活成了人间清醒。接受自己的普通，然后全力以赴的出众。
              </p>
            </li>
          </div>
          <div class="reader_topReview_footer">
            <button class="reader_topReview_more_button" @click="moreComment">
            查看更多精彩点评
            </button>
          </div>
        </div>
      </div>

      <div class="readerFooter">
        <a class="readerFooter_button blue" @click="reader">
        开始阅读本书
        </a>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
      
      
    data() {
      
      
      return {
      
      
      };
    },
    mounted() {
      
      
    },
    methods: {
      
      
      moreComment(){
      
      //更多评论
        this.$router.push({
      
      path: '/moreComment'});
      },
      commentDetail(){
      
      //评论详情
        this.$router.push({
      
      path: '/commentDetail'});
      },
      reader(){
      
      //章节阅读
        this.$router.push({
      
      path: '/reader'});
      },
    }
  };
</script>

4.评论

更多评论：

评论详情：

5.章节阅读

三.总结

本项目经过作者的最大努力，长期的键盘敲打，以最大限度仿照实现PC版的《微信读书》样式，因为是仿照，所以怎么也不可能与原作品相提并论（此处省略一万个谦虚的表情…），项目仅仅以作为学习和助于个人成长之用。

如今微信读书注册用户数2.1亿，日活跃用户超过500万，其中19-35岁年轻用户占比超过60%，本科及以上学历用户占比高达80%，北上广深及其他省会城市/直辖市用户占比超过80%。

当然小说、游戏、短视频之类的都要合理安排时间，否则有害于人的健康！

其实作者最近经常看到这样一个情景：每天人来人往中，无论是上班、下班途中，还是地铁、公交车上，很多人，手里拿着手机，低着头，很专注地在看小说（屏幕字体很大，所以一看就知道了…），所以作者的灵感也来源于此，而微信读书也是偶然的机会看到了，想想微信的产品肯定也是顶呱呱！喜欢，那就下手吧~

获取源码 或 有任何问题 的朋友可通过博客最后的名片添加作者或留言、私聊都可（会马上回复）。
感谢您的阅读呢~