Merge branch 'xuebaoxin' of pplokijuhyg/falvpingtai into master

src/components/IndexList.vue

@@ -1,26 +1,28 @@
 <template>
   <div class="PersonafFollow">
-    
     <div class="center">舆论之于司法利大于弊还是弊大于利？</div>
     <div class="answer">
-     
       <div class="content">
-        <img src alt srcset />
+        <img class="img" src alt srcset />
-        <p>
+        <p>这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明</p>
-            这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明
-        </p>
       </div>
       <div class="operation">
         <div>
-              <img src="../assets/share.png" alt="" srcset="">
+          <img src="../assets/share.png" alt srcset />
           分享
         </div>
         <div>
-              <img src="../assets/share.png" alt="" srcset="">
+          <img src="../assets/share.png" alt srcset />
           888评论
         </div>
-          <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>
@@ -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;
@@ -101,12 +103,68 @@ box-shadow:0px 2px 2px 0px rgba(237,237,237,0.4);
       > div {
         margin-right: 60px;
         font-size: 22px;
-            color: #95998F;
+        color: #95998f;
         > img {
           width: 17px;
           height: 17px;
           margin-right: 11px;
+        }
+      }
+      .more {
+        display: flex;
+        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;
+
+          }
+          &::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>