society.vue 3.5 KB
<template>
  <div class="container">
    <div class="coursenav flexone">
      <div
        class="coursenavleft"
        :class="selnav == index ? 'selactive' : ''"
        :data-id="index"
        @click="selectnav"
        v-for="(item, index) in navarr"
        :key="index"
      >
        {{ item }}
      </div>
    </div>
    <div class="societybox">
      <div class="societyitem">
        <div class="societytop flextwo">
          <div class="societyleft flexone">
            <div class="personimg">
              <img src="../../../assets/touxiang.png" alt="" />
            </div>
            <div class="personright">
              <div class="personname">宁立青</div>
              <div class="persondate">2020-6-12</div>
            </div>
          </div>
          <div class="dingimg">
            <img src="../../../assets/ding.png" alt="" />
          </div>
        </div>
        <div class="societytext">
          这个月又瘦了10斤,唐元集真的是太棒了,我 现在自信很多!
        </div>
        <div class="societyimg flexone">
          <div class="societyimgitem">
            <img src="../../../assets/societyimg.png" alt="" />
          </div>
          <div class="societyimgitem">
            <img src="../../../assets/societyimg.png" alt="" />
          </div>
          <div class="societyimgitem">
            <img src="../../../assets/societyimg.png" alt="" />
          </div>
          <div class="societyimgitem">
            <img src="../../../assets/societyimg.png" alt="" />
          </div>
          <div class="societyimgitem">
            <img src="../../../assets/societyimg.png" alt="" />
          </div>
        </div>
        <div class="jianzheng flexone">
          <div class="jianzhengleft">
            #
          </div>
          <div class="jianzhengright">见证蜕变</div>
        </div>
        <!-- 点赞 -->
        <div class="dainzan flexone">
          <div class="flexone dianitem">
            <img src="../../../assets/zan.png" alt="" class="dianzanimg" />
            <span class="number">960</span>
          </div>
          <div class="flexone dianitem">
            <img src="../../../assets/star.png" alt="" class="dianzanimg" />
            <span class="number">960</span>
          </div>
          <div class="flexone dianitem">
            <img src="../../../assets/edit.png" alt="" class="dianzanimg" />
            <span class="number">960</span>
          </div>
          <div class="flexone dianitem">
            <img src="../../../assets/download.png" alt="" class="dianzanimg" />
            <span class="number">960</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 图片没有上传 -->
    <div class="gantanimg">
      <img src="../../../assets/gantan.png" class="ganimg" alt="" />
      <div class="gantantext">用户未上传图片</div>
    </div>
    <tabBar v-bind:active="1" />
  </div>
</template>

<script>
import tabBar from "@/components/views/tabBar.vue";
export default {
  components: {
    tabBar
  },
  data() {
    return {
      selnav: 0,
      navarr: [
        "分类一",
        "分类一",
        "分类一",
        "分类一",
        "分类一",
        "分类一",
        "分类一",
        "分类一",
        "分类一",
        "分类一",
        "分类一"
      ]
    };
  },
  methods: {
    selectnav(e) {
      this.selnav = e.currentTarget.dataset.id;
    }
  }
};
</script>

<style scoped>
@import "../../../style/society.css";
</style>