marquee标签广告轮播内容显示不全问题

Posted 2021-11-30 rxfn

marquee标签内不能用 ul  li ,要用table tr td  才可以

<template>
   <div class="v-marquee-info">
    <!--滚动信息-->
    <div class="marquee-info-content"> 
  // 错误的 
<!-- <marquee style="width: 100%; height:60px;" 
         scrollamount="10" scrolldelay="0" direction="left" 
          behaviour="Scroll" >
          <ul class="marquee-info" > 
            <li class="marquee-item" v-for="(item,index) in info_List"  :key="item.index" @click=‘showDetail(index)‘>
              {{ item.title }} 
            </li> 
          </ul> 
        </marquee> -->
        <marquee style="width: 100%; height:60px;" scrollamount="10" scrolldelay="0" direction="left" behaviour="Scroll" >
          <table class="marquee-info" > 
            <tr>
              <td  class="marquee-item" v-for="(item,index) in info_List"  :key="item.index" @click=‘showDetail(index)‘>
                {{ item.title }} 
              </td> 
            </tr>
          </table> 
        </marquee>
// 这是elementUI的走马灯效果
       <!-- <el-carousel arrow="never" type="string" interval="5000">
          <el-carousel-item  v-for="(item,index) in info_List"  :key="item.index" >
            <h3 @click=‘showDetail(index)‘ >{{ item.title }}</h3>
          </el-carousel-item>
      </el-carousel>  -->
 </div> 
  </div> 
</template>
<script>
import axios from ‘axios‘
export default {
  name: ‘v-marquee-info‘,
  data() {
    return {
      info_List: []
    }
  },
  mounted(){
    axios.get(‘url/sdrs/web/goTZGG.action?type=1‘)
    .then((result) => { 
      let rs = result.data;
      let _this = this;
      if(rs.code == 1){
        let rs_list = rs.data.listNotice;
        for(let i = 0; i < rs_list.length; i++){
          _this.info_List.push(rs_list[i]);
        }
      }
    }).catch((err) => {
    });
  },
  methods:{
    showDetail: function(index){
      this.$store.state.i = index;
      for(var i = 0;i<this.info_List.length;i++){
        this.$store.state.detail = this.info_List[index].content;
        this.$store.state.title = this.info_List[index].title;
        this.$router.push({name: ‘notiDetail‘});
      }
    }
  },
}
</script>
<style scoped lang="scss">
.marquee-info-content {
  width:80%;
  margin: 240px auto auto auto;
  background:rgba(83,209,224,.5);
  position:relative;
  overflow:hidden;
  .marquee-info {
    height:60px;
    line-height:60px;
    font-family: ‘Microsoft YaHei‘;
    .marquee-item {
      width:30px;
      color:#FAFFF8;
      font-size: 24px;
      padding:0 150px;
    }
  }
}
</style>
<style lang="scss">
//走马灯样式
.el-carousel__container{
  text-align: center;
  line-height: 60px;
  font-size:26px;
  color:#fff;
  height:60px !important;
}
.el-carousel__indicator--horizontal{
  display: none !important;
}
</style>