diff --git a/src/IndexReport.vue b/src/IndexReport.vue
new file mode 100644
index 0000000..6aa5567
--- /dev/null
+++ b/src/IndexReport.vue
@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <div>
+      <indexreporttop :left="menu"></indexreporttop>
+      <div>
+        <indexreporttype :list="list" @change="xz"></indexreporttype>
+        <!-- <div @click="choose('不友善行为',0)">
+          <indexreporttype left="不友善行为"></indexreporttype>
+        </div>
+        <div @click="choose('有害信息',0)">
+          <indexreporttype left="有害信息"></indexreporttype>
+        </div>
+        <div @click="choose('涉嫌侵权',0)">
+          <indexreporttype left="涉嫌侵权"></indexreporttype>
+        </div>
+        <div @click="choose('诱导赞同、关注等行为',0)">
+          <indexreporttype left="诱导赞同、关注等行为"></indexreporttype>
+        </div>
+        <div @click="choose('其他',1)">
+          <indexreporttype left="其他"></indexreporttype>
+        </div>-->
+      </div>
+
+  
+
+        <div class="btns" v-if="choose1">
+          <button class="btn2">举报</button>
+          <button class="btn1">举报</button>
+    </div>
+        <button class="btn" v-else>举报</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import indexreporttop from "./components/indexreporttop";
+import indexreporttype from "./components/indexreporttype";
+import more from "./assets/more.png";
+export default {
+  data() {
+    return {
+      menu: "举报",
+      more,
+      list: [
+        { left: "垃圾广告信息", right: this.more ,class:"more" },
+        { left: "不友善行为", right: this.more,class:"more" },
+        { left: "有害信息", right:this.more,class:"more"  },
+        { left: "涉嫌侵权", right: this.more ,class:"more" },
+         { left: "诱导赞同、关注等行为", right: this.more ,class:"more" },
+           { left: "其他", right: this.more ,class:"more" },
+      ],
+      ifselect: false,
+      choose1:false
+      
+    };
+  },
+  methods: {
+      xz(e){
+          window.console.log("uguihiovhiao")
+          if(e){
+              this.choose1=true
+          }else{
+              this.choose1=false
+          }
+      },
+    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.list = ["垃圾广告信息", "不友善行为", "有害信息", "涉嫌侵权"];
+
+            break;
+          case 1:
+            this.menu = e;
+            this.list = ["骚扰、辱骂、歧视等", "其他不友善行为"];
+            window.console.log(this.list);
+
+            break;
+          case 2:
+            this.menu = e;
+            this.list = ["垃圾广告信息", "不友善行为", "有害信息"];
+
+            break;
+          case 3:
+            this.menu = e;
+            this.list = ["垃圾广告信息", "不友善行为"];
+
+            break;
+          case 4:
+            this.menu = e;
+            this.list = ["垃圾广告信息", "不友善行为", "有害信息", "aaaa"];
+
+            break;
+        }
+      } else {
+        window.console.log(i, "asd");
+        return;
+      }
+    }
+  },
+  components: {
+    indexreporttop,
+    indexreporttype
+  }
+};
+</script>
+
+<style lang="scss">
+body {
+  background-color: white;
+}
+
+.btn {
+  width: 398px;
+  height: 62px;
+  background: rgba(107, 145, 71, 0.55);
+  line-height: 62px;
+  text-align: center;
+  color: white;
+  font-size: 32px;
+  margin-left: 176px;
+  margin-top: 55px;
+}
+.btns{
+  display: flex;
+  justify-content: space-around;
+  margin-top: 55px;
+  .btn1{
+width:330px;
+height:62px;
+background:rgba(107,145,71,1);
+border-radius:4px;
+font-size: 32px;
+color: white;
+line-height: 62px;
+text-align: center;
+  }
+.btn2{
+  width:330px;
+height:62px;
+border:2px solid rgba(149,153,143,1);
+background-color: white;
+opacity:0.55;
+border-radius:4px;
+}
+}
+</style>
\ No newline at end of file
diff --git a/src/IndexReport1.vue b/src/IndexReport1.vue
new file mode 100644
index 0000000..043c17a
--- /dev/null
+++ b/src/IndexReport1.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <indexreporttop left="不友善行为"></indexreporttop>
+    <indexreporttype left="骚扰、辱骂、歧视等"></indexreporttype>
+    <indexreporttype left="其他不友善行为"></indexreporttype>
+    <div class="btns">
+          <button class="btn2">举报</button>
+          <button class="btn1">举报</button>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import indexreporttop from "./components/indexreporttop";
+import indexreporttype from "./components/indexreporttype";
+export default {
+  components: {
+    indexreporttop,
+    indexreporttype
+  }
+};
+</script>
+
+<style lang="scss">
+body {
+  background-color: white;
+}
+.btns{
+  display: flex;
+  justify-content: space-around;
+  margin-top: 55px;
+  .btn1{
+width:330px;
+height:62px;
+background:rgba(107,145,71,1);
+border-radius:4px;
+font-size: 32px;
+color: white;
+line-height: 62px;
+text-align: center;
+  }
+.btn2{
+  width:330px;
+height:62px;
+border:2px solid rgba(149,153,143,1);
+background-color: white;
+opacity:0.55;
+border-radius:4px;
+}
+}
+
+</style>
\ No newline at end of file
diff --git a/src/IndexReport2.vue b/src/IndexReport2.vue
new file mode 100644
index 0000000..c03b877
--- /dev/null
+++ b/src/IndexReport2.vue
@@ -0,0 +1,59 @@
+<template>
+<div class="indexreport2">
+    <indexreporttop left="其他不友善行为"></indexreporttop>
+    <textarea name="" id="" cols="30" rows="20" class="shuru" placeholder="举报详细说明（必填）"></textarea>
+        <div class="btns">
+          <button class="btn2">返回</button>
+          <button class="btn1">举报</button>
+    </div>
+</div>
+</template>
+
+<script>
+import indexreporttop from "./components/indexreporttop";
+export default {
+  components: {
+    indexreporttop,
+  }
+}
+</script>
+
+<style lang="scss">
+.indexreport2{
+    .shuru{
+        width: 688px;
+        height: 230px;
+        margin-left:31px;
+        color:#333333;
+        line-height: 50px;
+         border: none;
+    }
+    .shuru::placeholder{
+        color: #999999;
+    }
+    .btns{
+  display: flex;
+  justify-content: space-around;
+  margin-top: 55px;
+  .btn1{
+width:330px;
+height:62px;
+background:rgba(107,145,71,0.55);
+// opacity:0.55;
+border-radius:4px;
+font-size: 32px;
+color: white;
+line-height: 62px;
+text-align: center;
+  }
+.btn2{
+  width:330px;
+height:62px;
+border:2px solid rgba(149,153,143,1);
+background-color: white;
+opacity:0.55;
+border-radius:4px;
+}
+}
+}
+</style>
\ No newline at end of file
diff --git a/src/assets/close.png b/src/assets/close.png
deleted file mode 100644
index 8ffa705..0000000
Binary files a/src/assets/close.png and /dev/null differ
diff --git a/src/assets/more.png b/src/assets/more.png
new file mode 100644
index 0000000..4b2a97a
Binary files /dev/null and b/src/assets/more.png differ
diff --git a/src/assets/selected.png b/src/assets/selected.png
new file mode 100644
index 0000000..ea49a19
Binary files /dev/null and b/src/assets/selected.png differ
diff --git a/src/components/indexreporttop.vue b/src/components/indexreporttop.vue
new file mode 100644
index 0000000..2e17541
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/indexreporttype.vue b/src/components/indexreporttype.vue
new file mode 100644
index 0000000..b221b2e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/login.vue b/src/login.vue
index 1f696f8..3cb2992 100644
--- a/src/login.vue
+++ b/src/login.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="login">
     <div class="logo">
-      <img src="./assets/close.png" alt class="close" />
+      <img src="./assets/quit.png" alt class="close" />
     </div>
     <div class="tel">
       <p>+86</p>
diff --git a/src/loginpwd.vue b/src/loginpwd.vue
index 3601c55..8327423 100644
--- a/src/loginpwd.vue
+++ b/src/loginpwd.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="login">
     <div class="logo">
-      <img src="./assets/close.png" alt class="close" />
+      <img src="./assets/quit.png" alt class="close" />
     </div>
     <!-- <div class="tel">
       <p>+86</p>
diff --git a/src/router.js b/src/router.js
index 6063fe5..66e3ba0 100644
--- a/src/router.js
+++ b/src/router.js
@@ -11,11 +11,26 @@ import IndexArticleDetail from "./IndexArticleDetail"
 import login from "./login"
 import loginpwd from "./loginpwd"
 import indexfind from "./IndexFind"
+import IndexReport from "./IndexReport"
+import IndexReport1 from "./IndexReport1"
+import IndexReport2 from "./IndexReport2"
 import Answer from "./Answer"
 const router=new Router({
   routes: [
     {
       path: '/',
+      component: IndexReport
+    },
+    {
+      path: '/IndexReport1',
+      component: IndexReport1
+    },
+    {
+      path: '/IndexReport2',
+      component: IndexReport2
+    },
+    {
+      path: '/indexfind',
       component: indexfind
     },
     {