crmeb 行业资讯 页面的实现

实现的最终界面

实现的功能:

• 
• 
• 

步骤

• list的部分：

重点：根据activeClass和当前子分类的id判断显示类名

<ul class="info-list">
    <li
    v-for="(item,index) in cateList"
    :key="item.id" class="info-item"
    >
    <router-link :to="'/info/' + item.id" :class="{active: activeClass == 'hot' && item.id == 0 || activeClass == 'life' && item.id == 3 || activeClass == 'train' && item.id == 2}" class="info-lk">{{item.title}}</router-link>
   </li>
  </ul>

• 列表详情页面 info-every
  重点: :to=" ‘info/detail/’ + item.id"

引用：     <info-every :list="list"></info-every>
info-every的内容： 
<template>
  <!-- 每条被渲染的数据 -->
  <div class="con">
    <ul class="news-list">
      <li class="news-item" v-for="(item,index) in list" :key="index">
        <router-link class='news-lk' :to="'/info/detail/' + item.id">
          <div class="desc">
            <div class="name">{{item.title}}</div>
            <div class="time">{{item.add_time}}</div>
          </div>
          <img src="~@/assets/img/info/hot1.jpg" alt="">
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
  import api from '../../api/index.js';
  export default {
    props: ['list'],
    data() {
      return {
        id: ''
      }
    }
  }
</script>

• 到info/detail页面取出相应的id,显示相应的yemian

mounted() {
      const id = this.$route.params.id;
      api.getInfoDetail(id).then((res) => {
        this.data = res.data;
        this.content = this.data.data.content;
        console.log(this.data.data)
      })
    }

来源：CSDN

作者：希望至上

链接：https://blog.csdn.net/weixin_43844975/article/details/103655457