From 660a45ff322d624d55537bba25c2c5bb17803405 Mon Sep 17 00:00:00 2001
From: pplokijuhyg <1162963624@qq.com>
Date: Tue, 26 Nov 2019 09:25:03 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/IndexList.vue | 122 ++++++++++++++++++++++++++---------
 1 file changed, 91 insertions(+), 31 deletions(-)

diff --git a/src/components/IndexList.vue b/src/components/IndexList.vue
index 34774aa..b12c679 100644
--- a/src/components/IndexList.vue
+++ b/src/components/IndexList.vue
@@ -1,36 +1,38 @@
 <template>
   <div class="PersonafFollow">
-    
     <div class="center">舆论之于司法利大于弊还是弊大于利？</div>
     <div class="answer">
-     
       <div class="content">
-        <img src alt srcset />
-        <p>
-            这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明
-        </p>
+        <img class="img" src alt srcset />
+        <p>这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明</p>
       </div>
       <div class="operation">
-          <div>
-              <img src="../assets/share.png" alt="" srcset="">
-              分享
-          </div>
-          <div>
-              <img src="../assets/share.png" alt="" srcset="">
-              888评论
-          </div>
-          <div>
-              
+        <div>
+          <img src="../assets/share.png" alt srcset />
+          分享
+        </div>
+        <div>
+          <img src="../assets/share.png" alt srcset />
+          888评论
+        </div>
+        <div class="more" @click="show = !show">
+          <div></div>
+          <div></div>
+          <div></div>
+          <div class="eject" v-show="show">
+            <p>举报</p>
+            <p>没有帮助</p>
           </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 <style lang="scss" scoped>
 .PersonafFollow {
-//   padding: 0px 0 39px 0;
-//   border-bottom: 1px solid #dfdfdf;
-box-shadow:0px 2px 2px 0px rgba(237,237,237,0.4);
+  //   padding: 0px 0 39px 0;
+  //   border-bottom: 1px solid #dfdfdf;
+  box-shadow: 0px 2px 2px 0px rgba(237, 237, 237, 0.4);
   width: 690px;
   padding: 53px 30px 40px 30px;
   background-color: #fff;
@@ -77,7 +79,7 @@ box-shadow:0px 2px 2px 0px rgba(237,237,237,0.4);
       color: #95998f;
     }
     .content {
-      > img {
+      .img {
         width: 690px;
         height: 374px;
         background-color: #000;
@@ -95,20 +97,76 @@ box-shadow:0px 2px 2px 0px rgba(237,237,237,0.4);
         font-size: 26px;
       }
     }
-    .operation{
+    .operation {
+      display: flex;
+      margin-top: 30px;
+      > div {
+        margin-right: 60px;
+        font-size: 22px;
+        color: #95998f;
+        > img {
+          width: 17px;
+          height: 17px;
+          margin-right: 11px;
+        }
+      }
+      .more {
         display: flex;
-        margin-top: 30px;
-        >div{
-            margin-right: 60px;
+        width: 33px;
+        height: 22px;
+        justify-content: space-between;
+        align-items: center;
+        position: relative;
+        > div {
+          width: 7px;
+          height: 7px;
+          border-radius: 50%;
+          background-color: #95998f;
+        }
+        > div:last-child {
+          border-radius: 4px;
+          border: 2px solid rgba(223, 223, 223, 1);
+          width: 130px;
+          height: 101px;
+          position: absolute;
+          top: 55px;
+          background-color: #FFFFFF;
+          left: -50px;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          padding-left: 20px;
+    
+          box-sizing: border-box;
+          >p{
             font-size: 22px;
             color: #95998F;
-            >img{
-                width: 17px;
-                height: 17px;
-                margin-right: 11px;
-                
-            }
+
+          }
+          &::after {
+            position: absolute;
+            top: -10px;
+            left: 58px;
+            content: "";
+            width: 0;
+            height: 0;
+            border-right: 7px solid transparent;
+            border-bottom: 10px solid #FFFFFF;
+            border-left: 7px solid transparent;
+          }
+          &::before {
+            position: absolute;
+            top: -12px;
+            left: 55px;
+            content: "";
+            width: 0;
+            height: 0;
+            border-right: 10px solid transparent;
+            border-bottom: 11px solid rgba(223, 223, 223, 1);
+            border-left: 10px solid transparent;
+          }
         }
+      }
     }
   }
 }
@@ -117,7 +175,9 @@ box-shadow:0px 2px 2px 0px rgba(237,237,237,0.4);
 export default {
   name: "PersonafFollow",
   data() {
-    return {};
+    return {
+      show:false
+    };
   }
 };
 </script>
\ No newline at end of file