{"remainingRequest":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/src/views/moment/childComps/ChildDetailMoment.vue?vue&type=script&lang=js&","dependencies":[{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/src/views/moment/childComps/ChildDetailMoment.vue","mtime":1618382828764},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/babel-loader/lib/index.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KCmltcG9ydCBpY29uIGZyb20gIkAvdmlld3MvbW9tZW50L2NoaWxkQ29tcHMvaWNvbiI7CmltcG9ydCBDb21tZW50TGlzdCBmcm9tICJAL2NvbXBvbmVudHMvY29udGVudC9jb21tZW50cy9Db21tZW50TGlzdCI7CmltcG9ydCBQcmFpc2VMaXN0IGZyb20gIkAvY29tcG9uZW50cy9jb250ZW50L3ByYWlzZXMvUHJhaXNlTGlzdCI7CmltcG9ydCB7IGdldEFsbENvbW1uZXQgfSBmcm9tICJAL25ldHdvcmsvY29tbWVudCI7CmltcG9ydCBTY3JvbGwgZnJvbSAiQC9jb21wb25lbnRzL2NvbW1vbi9TY3JvbGwvU2Nyb2xsIjsKZXhwb3J0IGRlZmF1bHQgewogIG5hbWU6ICJDaGlsZERldGFpbE1vbWVudCIsCiAgY29tcG9uZW50czogewogICAgQ29tbWVudExpc3QsCiAgICBQcmFpc2VMaXN0LAogICAgaWNvbiwKICAgIFNjcm9sbAogIH0sCiAgcHJvcHM6IHsKICAgIGNvbW1lbnRzOiB7CiAgICAgIHR5cGU6IE9iamVjdCwKICAgICAgZGVmYXVsdCgpIHsKICAgICAgICByZXR1cm4ge307CiAgICAgIH0KICAgIH0KICB9LAogIGRhdGEoKSB7CiAgICByZXR1cm4gewogICAgICBpZDogIiIsCiAgICAgIHNob3c6IGZhbHNlLAogICAgICBpc1Jlc2l6ZTogZmFsc2UsCiAgICAgIGlzc2hvdzogdHJ1ZSwKICAgICAgY29tbWVudDogewogICAgICAgIGNvbnRlbnQ6ICIiLAogICAgICAgIG1vbWVudElkOiAiIgogICAgICB9LAogICAgICBpc2NvbW1lbnQ6IHRydWUsCiAgICAgIGFsbGNvbW1lbnQ6IFtdLAogICAgICBwcmFpc2U6IHt9LAogICAgICBpc3ByYWlzZTogIiIsCiAgICAgIG51bWJlcjogIiIsCiAgICAgIGlzZGlzcGxheTogdHJ1ZSwKICAgICAgY2xpZW50SGVpZ2h0OiBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuY2xpZW50SGVpZ2h0LAogICAgICBzaG93cHJhaXNlOnRydWUsCiAgICB9OwogIH0sCiAgY3JlYXRlZCgpIHsKICAgIHRoaXMubW9tZW50SWQgPSB0aGlzLiRyb3V0ZS5wYXJhbXMuaWlkOwogICAgZ2V0QWxsQ29tbW5ldCh0aGlzLm1vbWVudElkKS50aGVuKHJlcyA9PiB7CiAgICAgIHRoaXMuYWxsY29tbWVudCA9IHJlcy5kYXRhOwogICAgfSk7CiAgICB0aGlzLmdldGRhdGEoKTsKICB9LAogIC8v5bGA6YOo57uE5oiQ6IGa54SmCiAgZGlyZWN0aXZlczogewogICAgZm9jdXM6IHsKICAgICAgLy8g5oyH5Luk55qE5a6a5LmJCiAgICAgIGluc2VydGVkOiBmdW5jdGlvbihlbCkgewogICAgICAgIGVsLmZvY3VzKCk7CiAgICAgIH0KICAgIH0KICB9LAogIG1ldGhvZHM6IHsKICAgIGxvYWRNb3JlKCkgewogICAgICB0aGlzLiRyZWZzLnNjcm9sbC5yZWZyZXNoKCk7CiAgICB9LAogICAgcHVsbGluZ0Rvd24oKSB7CiAgICAgIHRoaXMucHVsbGluZ2Rvd24gPSB0cnVlOwogICAgICBzZXRUaW1lb3V0KCgpID0+IHsKICAgICAgICB0aGlzLnB1bGxpbmdkb3duID0gZmFsc2U7CiAgICAgICAgdGhpcy4kcmVmcy5zY3JvbGwuZmluaXNoUHVsbERvd24oKTsKICAgICAgfSwgMzAwKTsKICAgIH0sCiAgICBhc3luYyBnZXRkYXRhKCkgewogICAgICBjb25zdCB7IGRhdGE6IHJlcyB9ID0gYXdhaXQgdGhpcy4kaHR0cC5nZXQoIi9wcmFpc2UvIiArIHRoaXMubW9tZW50SWQpOwogICAgICB0aGlzLnByYWlzZSA9IHJlczsKICAgIH0sCiAgICAvL+aYr+WQpuaYvuekuuivhOiuuuWSjOiBmueEpuaViOaenOaLiemUruebmAogICAgUG9wdXAoKSB7CiAgICAgIHRoaXMuc2hvdyA9ICF0aGlzLnNob3c7CiAgICAgIC8v5bu26L+f6IGa54SmCiAgICAgIHZhciBvZm91Y3MgPSB0aGlzOwogICAgICB0aGlzLiRuZXh0VGljaygoKSA9PiB7CiAgICAgICAgb2ZvdWNzLiRyZWZzLmdhaW4uZm9jdXMoKTsKICAgICAgfSwgMzAwKTsKICAgIH0sCiAgICByZWZyZXNoKCkgewogICAgICB0aGlzLnNob3dwcmFpc2UgPSBmYWxzZTsKICAgICAgdGhpcy5pc2Rpc3BsYXkgPSBmYWxzZTsKICAgICAgdmFyIG90aGlzID0gdGhpczsKICAgICAgdGhpcy4kbmV4dFRpY2soYXN5bmMoKSA9PiB7CiAgICAgICAgY29uc3QgeyBkYXRhOiByZXMgfSA9IGF3YWl0IG90aGlzLiRodHRwLmdldCgiL3ByYWlzZS8iICsgdGhpcy5tb21lbnRJZCk7CiAgICAgICAgb3RoaXMucHJhaXNlID0gcmVzOwogICAgICAgIG90aGlzLmlzZGlzcGxheSA9IHRydWU7CiAgICAgICAgb3RoaXMuc2hvd3ByYWlzZSA9IHRydWU7CiAgICAgIH0sIDEwMCk7CiAgICB9LAogICAgLy/lj5HooajmiJDlip/or4TorroKICAgIGFzeW5jIGNyZWF0ZWNvbW1lbnQoKSB7CiAgICAgIHRoaXMuY29tbWVudC5tb21lbnRJZCA9IHRoaXMuY29tbWVudHMuaWQ7CiAgICAgIGlmICh0aGlzLmlzY29tbWVudCkgewogICAgICAgIGNvbnN0IHsgZGF0YTogcmVzIH0gPSBhd2FpdCB0aGlzLiRodHRwLnBvc3QoImNvbW1lbnQiLCB0aGlzLmNvbW1lbnQpOwogICAgICAgIGlmIChyZXMuaW5zZXJ0SWQgIT0gMCkgewogICAgICAgICAgdGhpcy4kZW1pdCgicmVmcmVzaCIpOwogICAgICAgICAgdGhpcy4kbWVzc2FnZS5zdWNjZXNzKCLor4TorrrmiJDlip8iKTsKICAgICAgICB9CiAgICAgIH0gZWxzZSB7CiAgICAgICAgY29uc3QgeyBkYXRhOiByZXMgfSA9IGF3YWl0IHRoaXMuJGh0dHAucG9zdCgKICAgICAgICAgICJjb21tZW50LyIgKyB0aGlzLmNvbW1lbnRJZCArICIvcmVwbHkiLAogICAgICAgICAgdGhpcy5jb21tZW50CiAgICAgICAgKTsKICAgICAgICBpZiAocmVzLmluc2VydElkICE9IDApIHsKICAgICAgICAgIHRoaXMuaXNjb21tZW50ID0gdHJ1ZTsKICAgICAgICAgIHRoaXMuJGVtaXQoInJlZnJlc2giKTsKICAgICAgICAgIHRoaXMuJG1lc3NhZ2Uuc3VjY2Vzcygi6K+E6K665oiQ5YqfIik7CiAgICAgICAgfQogICAgICB9CiAgICB9LAoKICAgIGFzeW5jIGNsaWNrcHJhaXNlKCkgewogICAgICBjb25zdCB7IGRhdGE6IHJlcyB9ID0gYXdhaXQgdGhpcy4kaHR0cC5wb3N0KAogICAgICAgICIvcHJhaXNlL2lzcHJhaXNlLyIgKyB0aGlzLm1vbWVudElkCiAgICAgICk7CiAgICAgIGlmIChyZXMuc3RhdHVzICE9ICIyMDAiKSB7CiAgICAgICAgdGhpcy5udW1iZXIgPSB3aW5kb3cubG9jYWxTdG9yYWdlLmdldEl0ZW0oIm51bWJlciIpOwogICAgICAgIGlmICh0aGlzLm51bWJlciA9PT0gIjEiKSB3aW5kb3cubG9jYWxTdG9yYWdlLnNldEl0ZW0oIm51bWJlciIsICIwIik7CiAgICAgICAgZWxzZSB7CiAgICAgICAgICB3aW5kb3cubG9jYWxTdG9yYWdlLnNldEl0ZW0oIm51bWJlciIsICIxIik7CiAgICAgICAgfQogICAgICB9CiAgICAgIGlmIChyZXMuc3RhdHVzID09ICIyMDAiKSB7CiAgICAgICAgYXdhaXQgdGhpcy4kaHR0cC5wb3N0KCIvcHJhaXNlLyIgKyB0aGlzLm1vbWVudElkKTsKICAgICAgICB0aGlzLiRuZXh0VGljaygoKSA9PiB7CiAgICAgICAgICB0aGlzLnJlZnJlc2goKTsKICAgICAgICB9LCAxMDApOwogICAgICB9IGVsc2UgewogICAgICAgIHRoaXMubnVtYmVyID0gd2luZG93LmxvY2FsU3RvcmFnZS5nZXRJdGVtKCJudW1iZXIiKTsKICAgICAgICBjb25zdCBjb250ZW50ID0gewogICAgICAgICAgaXNwcmFpc2U6ICIiCiAgICAgICAgfTsKICAgICAgICBjb250ZW50LmlzcHJhaXNlID0gdGhpcy5udW1iZXI7CiAgICAgICAgY29uc3QgeyBkYXRhOiByZXMgfSA9IGF3YWl0IHRoaXMuJGh0dHAucG9zdCgKICAgICAgICAgICIvcHJhaXNlL3VwZGF0ZS8iICsgdGhpcy5tb21lbnRJZCwKICAgICAgICAgIGNvbnRlbnQKICAgICAgICApOwogICAgICAgIHRoaXMuJG5leHRUaWNrKCgpID0+IHsKICAgICAgICAgIHRoaXMucmVmcmVzaCgpOwogICAgICAgIH0sIDEwMCk7CiAgICAgIH0KICAgIH0KICB9LAogIG1vdW50ZWQoKSB7CiAgICB0aGlzLiRidXMuJG9uKCJjb21tZW50SWQiLCByZXN1bHQgPT4gewogICAgICB0aGlzLmNvbW1lbnRJZCA9IHJlc3VsdDsKICAgICAgdGhpcy5pc2NvbW1lbnQgPSBmYWxzZTsKICAgIH0pOwogICAgdGhpcy4kYnVzLiRvbigiY29tbWVudCIsIHRoaXMuUG9wdXApOwoKICAgIHZhciBuID0gbmF2aWdhdG9yLnVzZXJBZ2VudDsKICAgIHZhciBvc2hvd2NvbW1lbnQgPSBkb2N1bWVudC5nZXRFbGVtZW50c0J5Q2xhc3NOYW1lKCJ2YW4tcG9wdXAiKVswXTsKICAgIGlmIChuLmluZGV4T2YoImlQaG9uZSIpIDw9IC0xKSB7CiAgICAgIHdpbmRvdy5vbnJlc2l6ZSA9ICgpID0+IHsKICAgICAgICBpZiAodGhpcy5jbGllbnRIZWlnaHQgPiBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuY2xpZW50SGVpZ2h0KSB7CiAgICAgICAgICAvLyBvc2hvd2NvbW1lbnQuc3R5bGUucG9zaXRpb249J2Fic29sdXRlJwogICAgICAgICAgLy8g6ZqQ6JeP5oyJ6ZKuCiAgICAgICAgfSBlbHNlIHsKICAgICAgICAgIC8vIOaYvuekuuaMiemSrgogICAgICAgICAgLy8gb2NvbnRlbnQuc3R5bGUuYm90dG9tPSdmaXhlZCcKICAgICAgICB9CiAgICAgIH07CiAgICB9CiAgfQp9Owo="},{"version":3,"sources":["ChildDetailMoment.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"ChildDetailMoment.vue","sourceRoot":"src/views/moment/childComps","sourcesContent":["<template>\n  <div class=\"moment\">\n    <Scroll\n      class=\"content\"\n      ref=\"scroll\"\n      :pull-up-load=\"true\"\n      :probe-type=\"3\"\n      @pullingUp=\"loadMore\"\n      @pullingDown=\"pullingDown\"\n    >\n      <!-- 基本内容 -->\n      <div class=\"top\">\n        <img :src=\"comments.author && comments.author.avatarUrl\" />\n        <div class=\"desc\">\n          <div class=\"name\">{{ comments.author && comments.author.name }}</div>\n          <div class=\"time\">\n            {{ this.$moment(comments.createTime).fromNow() }}\n          </div>\n        </div>\n      </div>\n      <!-- 内容区域 -->\n      <div class=\"maincontent\">{{ comments.content }}</div>\n      <!-- 图片区域 -->\n      <div>\n        <div class=\"image\">\n          <li\n            v-for=\"(item, index) in comments.images\"\n            :key=\"index\"\n            class=\"picture\"\n          >\n            <img\n              width=\"100px\"\n              height=\"100px\"\n              :preview=\"index\"\n              :src=\"item + '?type=small'\"\n            />\n            <!-- v-lazy=\"item+'?type=small'\" -->\n          </li>\n        </div>\n      </div>\n      <!-- 小图标区域 -->\n      <icon\n        class=\"icon\"\n        :comments=\"comments\"\n        :praise=\"this.praise\"\n        @clickpraise=\"clickpraise\"\n        @Popup=\"Popup\"\n        v-if=\"this.isdisplay\"\n      ></icon>\n      <!-- 点赞 -->\n      <PraiseList\n        class=\"praise\"\n        :praises=\"this.praise.praise\"\n        v-if=\"this.showpraise\"\n      >\n      </PraiseList>\n\n      <!-- 评论 -->\n      <CommentList\n        class=\"commentsarea\"\n        :newcomments=\"this.allcomment\"\n        :Author=\"comments.author\"\n      ></CommentList>\n\n      <!-- 发表评论 -->\n    </Scroll>\n    <!-- show是否要显示评论 -->\n    <van-popup v-model=\"show\" class=\"showcomment\" position=\"bottom\">\n      <van-field\n        ref=\"gain\"\n        class=\"inputcomment\"\n        v-model=\"comment.content\"\n        rows=\"1\"\n        autosize\n        placeholder=\"输入你想表达～\"\n        show-word-limit\n        type=\"textarea\"\n        size=\"large\"\n        v-focus\n      />\n      <span className=\"postcomment\" round type=\"info\" @click=\"createcomment\"\n        >发送</span\n      >\n    </van-popup>\n  </div>\n</template>\n\n<script>\nimport icon from \"@/views/moment/childComps/icon\";\nimport CommentList from \"@/components/content/comments/CommentList\";\nimport PraiseList from \"@/components/content/praises/PraiseList\";\nimport { getAllCommnet } from \"@/network/comment\";\nimport Scroll from \"@/components/common/Scroll/Scroll\";\nexport default {\n  name: \"ChildDetailMoment\",\n  components: {\n    CommentList,\n    PraiseList,\n    icon,\n    Scroll\n  },\n  props: {\n    comments: {\n      type: Object,\n      default() {\n        return {};\n      }\n    }\n  },\n  data() {\n    return {\n      id: \"\",\n      show: false,\n      isResize: false,\n      isshow: true,\n      comment: {\n        content: \"\",\n        momentId: \"\"\n      },\n      iscomment: true,\n      allcomment: [],\n      praise: {},\n      ispraise: \"\",\n      number: \"\",\n      isdisplay: true,\n      clientHeight: document.documentElement.clientHeight,\n      showpraise:true,\n    };\n  },\n  created() {\n    this.momentId = this.$route.params.iid;\n    getAllCommnet(this.momentId).then(res => {\n      this.allcomment = res.data;\n    });\n    this.getdata();\n  },\n  //局部组成聚焦\n  directives: {\n    focus: {\n      // 指令的定义\n      inserted: function(el) {\n        el.focus();\n      }\n    }\n  },\n  methods: {\n    loadMore() {\n      this.$refs.scroll.refresh();\n    },\n    pullingDown() {\n      this.pullingdown = true;\n      setTimeout(() => {\n        this.pullingdown = false;\n        this.$refs.scroll.finishPullDown();\n      }, 300);\n    },\n    async getdata() {\n      const { data: res } = await this.$http.get(\"/praise/\" + this.momentId);\n      this.praise = res;\n    },\n    //是否显示评论和聚焦效果拉键盘\n    Popup() {\n      this.show = !this.show;\n      //延迟聚焦\n      var ofoucs = this;\n      this.$nextTick(() => {\n        ofoucs.$refs.gain.focus();\n      }, 300);\n    },\n    refresh() {\n      this.showpraise = false;\n      this.isdisplay = false;\n      var othis = this;\n      this.$nextTick(async() => {\n        const { data: res } = await othis.$http.get(\"/praise/\" + this.momentId);\n        othis.praise = res;\n        othis.isdisplay = true;\n        othis.showpraise = true;\n      }, 100);\n    },\n    //发表成功评论\n    async createcomment() {\n      this.comment.momentId = this.comments.id;\n      if (this.iscomment) {\n        const { data: res } = await this.$http.post(\"comment\", this.comment);\n        if (res.insertId != 0) {\n          this.$emit(\"refresh\");\n          this.$message.success(\"评论成功\");\n        }\n      } else {\n        const { data: res } = await this.$http.post(\n          \"comment/\" + this.commentId + \"/reply\",\n          this.comment\n        );\n        if (res.insertId != 0) {\n          this.iscomment = true;\n          this.$emit(\"refresh\");\n          this.$message.success(\"评论成功\");\n        }\n      }\n    },\n\n    async clickpraise() {\n      const { data: res } = await this.$http.post(\n        \"/praise/ispraise/\" + this.momentId\n      );\n      if (res.status != \"200\") {\n        this.number = window.localStorage.getItem(\"number\");\n        if (this.number === \"1\") window.localStorage.setItem(\"number\", \"0\");\n        else {\n          window.localStorage.setItem(\"number\", \"1\");\n        }\n      }\n      if (res.status == \"200\") {\n        await this.$http.post(\"/praise/\" + this.momentId);\n        this.$nextTick(() => {\n          this.refresh();\n        }, 100);\n      } else {\n        this.number = window.localStorage.getItem(\"number\");\n        const content = {\n          ispraise: \"\"\n        };\n        content.ispraise = this.number;\n        const { data: res } = await this.$http.post(\n          \"/praise/update/\" + this.momentId,\n          content\n        );\n        this.$nextTick(() => {\n          this.refresh();\n        }, 100);\n      }\n    }\n  },\n  mounted() {\n    this.$bus.$on(\"commentId\", result => {\n      this.commentId = result;\n      this.iscomment = false;\n    });\n    this.$bus.$on(\"comment\", this.Popup);\n\n    var n = navigator.userAgent;\n    var oshowcomment = document.getElementsByClassName(\"van-popup\")[0];\n    if (n.indexOf(\"iPhone\") <= -1) {\n      window.onresize = () => {\n        if (this.clientHeight > document.documentElement.clientHeight) {\n          // oshowcomment.style.position='absolute'\n          // 隐藏按钮\n        } else {\n          // 显示按钮\n          // ocontent.style.bottom='fixed'\n        }\n      };\n    }\n  }\n};\n</script>\n\n<style scoped>\n.maincontent {\n  margin: 8px 5px;\n  font-size: 16px;\n}\n\n.showcomment {\n  position: fixed;\n  display: flex;\n  background-color: #f5f5f5;\n}\n\n.showcomment span {\n  display: inline-block;\n  margin: auto auto;\n  color: #f53b57;\n}\n.inputcomment {\n  margin: 5px;\n  padding: 5px;\n  width: 80%;\n  display: inline-block;\n  background-color: #fff;\n  border-radius: 20px;\n}\n\n.icon {\n  margin-top: 15px;\n  border-top: 1px solid rgb(245, 243, 243);\n}\n\n.name {\n  margin-top: 20px;\n  font-weight: 600;\n}\n\n.time {\n  margin-top: 10px;\n  font-size: 12px;\n}\n\n.commentsarea {\n  margin-top: 5px;\n  margin-left: 5px;\n}\n\n.top {\n  display: flex;\n  height: 90px;\n}\n\n.image {\n  margin-top: 15px;\n  display: flex;\n  justify-content: space-evenly;\n}\n\n.moment {\n}\n\n.moment .top > img {\n  margin: 10px 10px;\n  height: 70px;\n  width: 70px;\n  border-radius: 50%;\n}\n\nli {\n  list-style: none;\n}\n\n.praise {\n  display: block;\n}\n\n.content {\n  left: 0;\n  right: 0;\n  top: 44px;\n  bottom: 0px;\n  overflow: hidden;\n  position: absolute;\n}\n</style>\n"]}]}