只差对接口

src/components/indexreporttop.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="indexreporttop">
+        <p class="left">{{left}}</p>
+        <img src="../assets/quit.png" alt="" class="close">
+  </div>
+</template>
+
+<script>
+export default {
+name:"indexreporttop",
+props:{
+  left:{
+    type:String
+  }
+}
+}
+</script>
+
+<style lang="scss">
+.indexreporttop{
+  width: 100%;
+  height:88px;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #F5F5F5;
+  box-sizing: border-box;
+  .left{
+      color: #333333;
+      font-size:34px;
+      line-height: 88px;
+      margin-left: 31px;
+      font-weight:500;
+  } 
+  .close{
+    width: 36px;
+    height: 36px;
+    
+    margin: auto 0;
+    margin-right: 30px;
+  }
+}
+</style>

src/components/indexreporttype.vue

@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <div class="indexreporttype" v-for="(i,j) in list1" :key="j" @click="choose(i.left,j)">
+      <p class="left">{{i.left}}</p>
+      <img :src="i.right" alt :class="i.class" />
+    </div>
+  </div>
+</template>
+
+<script>
+import more from "../assets/more.png";
+import selected from "../assets/selected.png"
+export default {
+  data() {
+    return {
+      ifselect: false,
+      menu: "举报",
+      list1: [],
+      more,
+      selected,
+      classmore:"more"
+    };
+  },
+  mounted() {
+    this.list1 = this.list;
+    for(let i in this.list1){
+        this.list1[i].right=this.more
+    }
+  },
+  methods: {
+    choose(e, i) {
+      //   this.menu = e;
+      if (this.menu == "举报") {
+        window.console.log(111);
+        window.console.log(i, 464646);
+        switch (i) {
+          case 0:
+            this.menu = e;
+            this.list1 = [
+              { left: "垃圾广告信息", right:this.more,class:"more" },
+              { left: "不友善行为", right: this.more ,class:"more"},
+              { left: "有害信息", right: this.more ,class:"more"},
+              { left: "涉嫌侵权", right:this.more ,class:"more"}
+            ];
+
+            break;
+          case 1:
+            this.menu = e;
+            this.list1 = [
+              { left: "骚扰、辱骂、歧视等", right: this.more ,class:"more"},
+               { left: "其他不友善行为", right: this.more ,class:"more"},            ];
+            window.console.log(this.list);
+
+            break;
+          case 2:
+            this.menu = e;
+             this.list1 = [
+              { left: "垃圾广告信息", right: this.more ,class:"more"},
+               { left: "不友善行为", right:this.more ,class:"more"},  
+                 { left: "有害信息", right: this.more ,class:"more"},          ];
+
+            break;
+          case 3:
+            this.menu = e;
+                this.list1 = [
+              { left: "垃圾广告信息", right: this.more ,class:"more"},
+               { left: "不友善行为", right: this.more,class:"more"},       ];
+
+            break;
+          case 4:
+            this.menu = e;
+                   this.list1 = [
+              { left: "垃圾广告信息", right: this.more ,class:"more"},
+               { left: "不友善行为", right: this.more,class:"more"},    
+                 { left: "有害信息", right: this.more ,class:"more"}, 
+                   { left: "aaaa", right: this.more ,class:"more"},    ];
+
+            break;
+            case 5:
+             this.$router.push({
+          path: `/IndexReport2`,
+        })
+        }
+      } else {
+        window.console.log(i, "asd");
+         for(let i in this.list1){
+        this.list1[i].right=this.more
+         this.list1[i].class="more"
+    }
+        this.list1[i].right=this.selected
+        this.list1[i].class="selected"
+        this.classmore=""
+        this.$emit("change",true)
+        return;
+      }
+    }
+  },
+  props: {
+    left: {
+      type: String
+    },
+
+    list: {}
+  }
+};
+</script>
+
+<style lang="scss">
+.indexreporttype {
+  width: 690px;
+  height: 89px;
+  color: #333333;
+  font-size: 30px;
+  line-height: 89px;
+  border-bottom: 1px solid #f5f5f5;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  .more {
+    width: 13px;
+    height: 25px;
+    margin: auto 0;
+  }
+  .selected{
+          width: 28px;
+    height: 28px;
+    margin: auto 0;
+  }
+}
+</style>