qw_customer/src/views/userindex/my/MyForwarddetail.vue

<template>
  <div class="indexbox">
    <p class="imgStyle">
      <img src="../../../assets/jiantou.png"
           style="width: 6vw;height: 6vw;"
           alt=""
           @click="GoUp">
    </p>
    <div>
      <div class="card">
        <div class="titile">
          <h2 @click="gowenzhang">{{ titile }}</h2>
          <p> {{ count }} 人阅读</p>
        </div>
        <img :src=acover
             alt="">
      </div>
      <div class="nameres">
        <div v-for="(item,index) in brows" :key="index">
          <img :src=item.avatar
               alt="">
          <p>{{ item.name }}</p>
          <p>{{ item.create_time }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { shareDetails } from "../../../../serves/prove"
export default {
  data () {
    return {
      active: 0,
      brows:'',
      titile:'',
      acover:'',
      count:'',
      Tid:''
    }
  },
  mounted () {
    this.titile=this.$route.query.title
    this.count=this.$route.query.count
    this.acover=this.$route.query.cover
    this.Tid=this.$route.query.Tid
    this.getshareDetails(this.$route.query.Tid)
  },
  methods: {
    gowenzhang () {
      this.$router.push({name:'textpage',query:{id:this.$route.query.id}})
    },
    async getshareDetails (id) {
      const res = await shareDetails(id)
      this.brows=res.data.brows
    },
    //返回上级
    GoUp () {
      this.$router.go(-1)
    }
  }

}
</script>
<style>
.van-tabs__wrap {
  height: 3rem !important;
}

.van-tab {
  line-height: 5rem;
}

.van-tab__text--ellipsis {
  font-size: 1rem !important;
}
</style>
<style lang="scss" scoped>
.indexbox {
  width: 90vw;
  height: 100vh;
  margin: 0 auto;
  padding-top: 2rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .imgStyle {
    width: 90vw;
    height: 5vh;
  }
  hr {
    margin-top: 20px;
    border-color: rgb(255, 255, 255, 0.5);
  }

  .card {
    width: 100%;
    height: 17vw;
    margin-top: 1vh;
    margin-bottom: 5vh;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgb(185, 185, 185);

    img {
      width: 30%;
      height: 15vw;
    }

    .titile {
      display: flex;
      justify-content: space-around;
      flex-direction: column;

      p {
        font-size: 0.6rem;
      }

      h2 {
        font-size: 1.2rem;
      }
    }
  }

  .nameres {
    div {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // background-color: aqua;

      p:nth-child(2) {
        flex: 1;
        margin-left: 5vw;
        line-height: 5vh;
      }

      p:nth-child(3) {
        line-height: 5vh;
      }

      img {
        width: 5vw;
        height: 5vw;
        border-radius: 50%;
      }
    }
  }
}
</style>