前仨完成

明梦爽

2021-11-08 810010a617a5b24238726c28b1b0d4b16c8629f8

 src/components/page/zhengce.vue

@@ -2,21 +2,22 @@
  <div>
    <el-row>
      <globalTitle />
    </el-row> 
    <span>政策</span><br>
    <span>政策</span><br>
    <span>政策</span><br>
    <span>政策</span><br>
    <span>政策</span><br>
    <span>政策</span><br>
    <span>政策</span><br>
    <span>政策</span><br>
    <span>政策</span><br>
    <span>政策</span><br>
    <span>政策</span><br>
    <span>政策</span><br>
    <span>政策</span><br>
    <span>政策</span><br>
    </el-row>
    <el-row class="mart10">
      <el-col :span="4" class="marr10">
        <ul>
          <li
            :key="index"
            v-for="(item, index) in menuList"
            class="liStylenone liPointer marb10"
            @click="changeMenu(item.name)"
          >
          <b :class="cont == item.name?'ft-blue':'ft-black'"> {{  item.name }} </b>
          </li>
        </ul>
      </el-col>
      <el-col :span="18"><div v-html="cont"></div></el-col>
    </el-row>
  </div>
</template>

@@ -24,12 +25,44 @@
import globalTitle from '../globalTitle.vue'
export default {
  name: 'zhengce',
  components:{
  components: {
    globalTitle
  },
  data() {
    return {
      cont:'',
      menuList: [
        { name: '中国科协政策法规' },
        { name: '地方科协政策法规' },
        { name: '社团管理文件' }
      ]
    }
  },
  mounted() {
    this.cont = this.menuList[0].name;
  },
  methods: {
    changeMenu(val) {
      this.cont = val;
    }
  }
}
</script>

<style lang="less" scoped>

ul {
  width: 200px;
  li {
    background-color: rgb(242, 243, 245);
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
}
.ft-blue{
  color:rgb(9, 143, 252);
}
.ft-black{
  color: #000;
}
</style>