【Mena】Vue实现新闻小组件

<template>
  <div id="HotNews" class="newsMain">
    <el-tabs v-model="activeName"  @tab-click="handleClick">

    <el-tab-pane   name="first">
      <span class="newsTitle" slot="label" >知乎</span>

      <li v-for="zhihuNew in zhihuNews.info.slice(0,4)" :key="zhihuNew.rank" ><a class="newsLink" target="_blank" :href="zhihuNew.url">{{+zhihuNew.rank+'\u00a0'+'\u00a0'+zhihuNew.keyword}}</a></li>
      
    </el-tab-pane>

    <el-tab-pane  name="second">
      <span class="newsTit'le" slot="label" >百度</span>
      <li v-for="baiduNew in baiduNews.info.slice(0,4)" :key="baiduNew.rank"><a class="newsLink" target="_blank" :href="baiduNew.url">{{baiduNew.rank+'\u00a0'+'\u00a0'+baiduNew.keyword+'\u00a0'+'\u00a0'+'\u00a0'+'\u00a0'+baiduNew.hotValue}}</a></li>  
    </el-tab-pane>
    <el-tab-pane  name="third">
      <span class="newsTit'le" slot="label" >微博</span>
      <li v-for="weiboNew in weiboNews.info.slice(0,4)" :key="weiboNew.rank"><a class="newsLink" target="_blank" :href="weiboNew.url">{{weiboNew.rank+'\u00a0'+'\u00a0'+weiboNew.keyword }}</a></li>
     
      
    </el-tab-pane>
    </el-tabs>
   
  </div>
</template>
 
<script>
import axios from 'axios';
import { keys } from 'shelljs/commands';
import { re } from 'semver';
import Qs from 'qs'
export default {
    name: 'HotNews',
    data(){
        return{
          
            zhihuNews: {
              name: '知乎',
              info: []
            },

            weiboNews:{
              name: '微博',
              info: []
            },

            baiduNews: {
              name: '百度',
              info: []
            },

            activeName : 'first'
        }
    },

      created() {             
        let accessKey = 'd9c3845930ea8a5e5208b591b9085faf'
        let secretKey = '735762a6537ddff2fa3c355ee40d4050'
        
        axios({
          method: 'GET',
          url: '/api/api/resou/v1/zhihu',
          headers: { 			  //要在请求头里添加身份凭证
            'access-key': accessKey,
            'secret-key': secretKey
          },
        }) 
        .then(res =>{
          
          this.zhihuNews.info = res.data.data;

          
            
        })
        .catch(res => {
            
        });

        axios({
          method: 'GET',
          url: '/api/api/resou/v1/baidu',
          headers: {
            'access-key': accessKey,
            'secret-key': secretKey
          },
        }) 
        .then(res => {
            this.baiduNews.info = res.data.data
            
            
        })
        .catch(res => {
            
        });

        axios({
          method: 'GET',
          url: '/api/api/resou/v1/weibo',
          headers: {
            'access-key': accessKey,
            'secret-key': secretKey
          },
        }) 
        .then(res => {
            this.weiboNews.info = res.data.data
            
            
        })
        .catch(res => {
            
        });

       
      },
    
    methods: {
      
        handleClick(tab, event) {
      }
      },
  }

</script>

<style scoped>


  .newsContent{
    width:100%;
    height: 100%;
  }

  .newsTitle{
    color: white;
    
  }

  #HotNews{
    color: #fff;
    border-radius: 16px;
    background-image: linear-gradient(135deg,rgba(20,20,20,.7),rgba(20,20,20,.4));
    text-align: left;
  }
  #HotNews li{
    font-size: 12px;
    list-style: none;
    height: 100%;
    line-height: 23px;
    margin-left: 3px;
    

  }

  .newsMain /deep/ .el-tabs__header{  //这里使用了深度作用选择器
    height: 40px;
    margin-bottom: 5px;
  }

  .newsMain /deep/ .el-tabs__item{    
       color:white !important;
       font-size: 13px;
       width: 55px;
       
       text-align: center  !important;
   }

   

   .newsMain /deep/  .el-tabs__nav{
     width: 250px;
   }

  
  .newsLink{
    text-decoration:none;
  }

  a:link{
    color: white
    
    
  }
  
  a:visited{
    color: white;
  }

</style>