From 5503e81bb32e930ee703210bbdf788fa13ec93d8 Mon Sep 17 00:00:00 2001
From: pplokijuhyg <1162963624@qq.com>
Date: Wed, 27 Nov 2019 09:48:46 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=84=E8=AE=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/IndexArticleDetail.vue         | 158 ++++++++++++++++++++++++++++-
 src/assets/baoqing.png             | Bin 0 -> 1805 bytes
 src/assets/qiehuan.png             | Bin 0 -> 481 bytes
 src/assets/quit.png                | Bin 0 -> 3180 bytes
 src/components/Emotion/Emotion.vue |  30 ++++++
 src/components/Emotion/index.vue   |  68 +++++++++++++
 src/components/indexcomment.vue    |  50 +++++++++
 7 files changed, 302 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/baoqing.png
 create mode 100644 src/assets/qiehuan.png
 create mode 100644 src/assets/quit.png
 create mode 100644 src/components/Emotion/Emotion.vue
 create mode 100644 src/components/Emotion/index.vue
 create mode 100644 src/components/indexcomment.vue

diff --git a/src/IndexArticleDetail.vue b/src/IndexArticleDetail.vue
index 0349274..0bf3030 100644
--- a/src/IndexArticleDetail.vue
+++ b/src/IndexArticleDetail.vue
@@ -14,10 +14,57 @@
 
     <articles></articles>
 
-    <p class="title">热门推荐</p>
+    <p class="title" @click="show = true">热门推荐</p>
     <privatets></privatets>
     <articles></articles>
     <articles></articles>
+    <van-popup v-model="show" position="bottom" :style="{ height: '100%' }" class="linshi">
+      <div class="top">
+        <p class="tiao">389条评论</p>
+        <p class="qie">
+          <img class="qiehuan" src="./assets/qiehuan.png" alt srcset /> 切换为时间排序
+        </p>
+        <img class="quit" src="./assets/quit.png" alt @click="show = !show" />
+      </div>
+      <div class="bodys">
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+      </div>
+      <div class="reply">
+        <img @click="biaoqing = !biaoqing" src="./assets/baoqing.png" alt srcset />
+        <textarea placeholder="写下你的评论..." v-model="content"></textarea>
+        <p>发布</p>
+        <div v-show="biaoqing"><Emotion @emotion="handleEmotion" :height="4" ></Emotion></div>
+      </div>
+    </van-popup>
   </div>
 </template>
 
@@ -27,23 +74,126 @@ import privates from "./components/indexprivate";
 import articles from "./components/indexarticle";
 import privatets from "./components/indexprivatet";
 import heads from "./components/indexhead";
-
+import comment from "./components/indexcomment";
+import Emotion from './components/Emotion/index'
 export default {
   name: "IndexArticleDetail",
   data() {
-    return {};
+    return {
+      show: false,
+      content:"",
+      biaoqing:false
+    };
   },
   components: {
     follow,
     privates,
     articles,
     privatets,
-    heads
+    heads,
+    comment,
+    Emotion
+  },
+  methods:{
+    handleEmotion (i) {
+      this.content += i
+    },
   }
 };
 </script>
 
 <style lang="scss">
+.linshi {
+  z-index: 999999 !important;
+  .top {
+    background-color: #fff;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 98px;
+    border-bottom: #f6f6f6 solid 1px;
+    display: flex;
+    align-items: center;
+    .tiao {
+      font-size: 30px;
+      color: #000;
+      font-weight: 500;
+      margin-left: 31px;
+    }
+    .qie {
+      font-size: 28px;
+      color: #95998f;
+      margin-left: 208px;
+      padding-right: 28px;
+      border-right: #f6f6f6 solid 2px;
+      height: 42px;
+      line-height: 42px;
+      display: flex;
+      align-items: center;
+      .qiehuan {
+        width: 26px;
+        height: 22px;
+        display: block;
+        margin-right: 9px;
+      }
+    }
+    .quit {
+      width: 28px;
+      height: 29px;
+      font-size: 29px;
+      margin-left: 34px;
+      display: flex;
+      > img {
+        width: 33px;
+        height: 33px;
+      }
+      // background-image: url("./assets/quit.png")
+    }
+  }
+  .bodys {
+    width: 100%;
+    height: 100%;
+    // background-color: #000;
+    overflow: hidden;
+    overflow-y: auto;
+    padding: 98px 0;
+    box-sizing: border-box;
+  }
+  .reply {
+    width: 100%;
+    height: 98px;
+    position: absolute;
+    bottom: 0;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    >img{
+      width: 33px;
+      height: 33px;
+      margin-left: 30px
+    }
+    >textarea{
+      margin-left: 21px;
+      border: none;
+      font-size: 30px;
+      height: 35px;
+      width: 550px;
+      // word-break: break-all;
+      // text-align: center;
+    }
+    >p{
+      margin-left: 30px;
+      font-size: 30px;
+      color: #6B9147;
+    }
+    >div{
+      position: absolute;
+      bottom: 98px;
+      background-color: #fff;
+      width: 100%;
+    }
+  }
+}
 .line {
   height: 0.2rem;
   width: 100%;
diff --git a/src/assets/baoqing.png b/src/assets/baoqing.png
new file mode 100644
index 0000000000000000000000000000000000000000..1814d35eab8ce7add564104959297d4cdd48027c
GIT binary patch
literal 1805
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

literal 0
HcmV?d00001

diff --git a/src/assets/qiehuan.png b/src/assets/qiehuan.png
new file mode 100644
index 0000000000000000000000000000000000000000..d8ba2077871a0389ae074f1c40be397db7ff1df1
GIT binary patch
literal 481
zcmV<70UrK|P)<h;3K|Lk000e1NJLTq000^Q000&U1^@s6-iVB~00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru;|m%H0T>Vzy~zLo0d7e|
zK~zY`z16Xb6hROM;IC!|K`{`{#3xt~y+;rf!2@?uOic{L+*dF^H1HifOiT_<)KkG1
zFcm=z72!nCbN6=2z|kAV6>rZOe<+%+uIit^x~n^G-M+7ksZ{tILaMWBV)K_b<hY30
z4P3|j-x4$Sv3omSh}c!eH<h2Zqcj~66XFF<EXrMqXirz6j#4Tbi%-qsh}gnP4@B*X
z#3J{Ic#31a5w*xZcHFDP^R}`ICvg@#sF&sWQO&rrU~QFnMxMims<69Gu@(lwDLldX
zBGktXia3pz)!d==DrZ+yd_6$v_JgD3yNY518wN(P*WtsWDq||681|HweS-c;5ia2j
zW&>S@!+2F?#^sRLhE$Wy6LeGN<Nr~*ZCt>^X6)ikraQrBln3BALcXq=NiB0t#3n9w
zbl(f^_RvS|O>>M#otSw~4ck4roM5ZvDTg6qE_0k|vzf2-br}}n3nnrj;O(Ej^kwiJ
Xf=Xy3ST+p500000NkvXXu0mjfnV-%t

literal 0
HcmV?d00001

diff --git a/src/assets/quit.png b/src/assets/quit.png
new file mode 100644
index 0000000000000000000000000000000000000000..28985730ddeb129815f9c027c23b22b0782b7cc0
GIT binary patch
literal 3180
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
R8kN5YfWFt8c8_|9`){?mg=qi)

literal 0
HcmV?d00001

diff --git a/src/components/Emotion/Emotion.vue b/src/components/Emotion/Emotion.vue
new file mode 100644
index 0000000..229797a
--- /dev/null
+++ b/src/components/Emotion/Emotion.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="ly-emotion" >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ly-emotion',
+  mounted () {
+    const name = this.$el.innerHTML
+    const list = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极']
+    let index = list.indexOf(name)
+    let imgHTML = `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif">`
+    this.$nextTick(() => {
+      this.$el.innerHTML = imgHTML
+    })
+  },
+}
+</script>
+<style scoped>
+.ly-emotion {
+  display: inline-block
+}
+.ly-static-emotion {
+  width: 24px;
+  height: 24px;
+  display: inline-block;
+}
+</style>
diff --git a/src/components/Emotion/index.vue b/src/components/Emotion/index.vue
new file mode 100644
index 0000000..e041b36
--- /dev/null
+++ b/src/components/Emotion/index.vue
@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <div class="emotion-box" :style="{height: height + 'rem' }" >
+      <div class="emotion-box-line" v-for="(line, i) in list" :key="i" >
+        <emotion class="emotion-item" v-for="(item, i) in line" :key="i" @click.native="clickHandler(item)" >{{item}}</emotion>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Emotion from './Emotion'
+export default {
+  props: {
+    height: {
+      type: Number,
+      default: 200,
+    }
+  },
+  data () {
+    return {
+      list: [
+        ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴'],
+        ['睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过'],
+        ['酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢'],
+        ['饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂'],
+        ['疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见'],
+        ['擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠'],
+        ['鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀'],
+        ['西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰',],
+        ['凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀'],
+        ['足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强'],
+        ['弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你'],
+        ['NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈'],
+        ['磕头', '回头', '跳绳', '挥手', '激动', '街舞', '左太极', '右太极'],
+      ]
+    }
+  },
+  methods: {
+    clickHandler (i) {
+      let emotion = `#${i};`
+      this.$emit('emotion', emotion)
+    }
+  },
+  components: {
+    Emotion
+  }
+}
+</script>
+<style scoped>
+  .emotion-box {
+    margin: 0 auto;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 5px;
+    border: 1px solid #b4b4b4;
+    overflow: hidden;
+    overflow-y: auto;
+  }
+  .emotion-box-line {
+    display: flex;
+  }
+  .emotion-item {
+    flex: 1;
+    text-align: center;
+    cursor: pointer;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/indexcomment.vue b/src/components/indexcomment.vue
new file mode 100644
index 0000000..b5fff06
--- /dev/null
+++ b/src/components/indexcomment.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="box">
+    <div class="user">
+        <img src="http://q1.qlogo.cn/g?b=qq&nk=1162963624&s=5" alt="">
+        <p>啦啦啦</p>
+    </div>
+    <div class="centers">
+        大一法学生瑟瑟发抖但感触良多
+    </div>
+    <div class="zan">
+        赞 439 · 回复 · 更多 · 1 年前
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.box {
+  width: 690px;
+  margin: 0 30px;
+  padding: 24px 0 30px 0;
+  box-sizing: border-box;
+  border-bottom: #f6f6f6 solid 1px;
+  .user{
+      display: flex;
+      align-items: center;
+      >img{
+          width: 48px;
+          height: 48px;
+          border-radius: 4px;
+          margin-right: 16px;
+      }
+  }
+  .centers{
+      font-size: 28px;
+      color: #000;
+      margin-top: 29px;
+
+  }
+  .zan{
+      font-size: 28px;
+      margin-top: 33px;
+      color: #95998F;
+      font-weight: 400;
+  }
+}
+</style>
+<script>
+export default {
+  name: "indexcomment"
+};
+</script>
\ No newline at end of file