Nuxt.js+Ant Design Vue轮播图上方有漂浮窗

最新推荐文章于 2024-07-30 14:14:07 发布

前端杨小白

最新推荐文章于 2024-07-30 14:14:07 发布

阅读量923

点赞数

分类专栏： Nuxt.js 文章标签： Nuxt.js Ant Design VUE

本文链接：https://blog.csdn.net/yangwqi/article/details/101538345

版权

Nuxt.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

目的

在轮播图上方有漂浮窗固定展示在这里插入图片描述

H5代码块

<div id="home">
  <div class="tips"> <a-icon type="sound" theme="twoTone" twoToneColor="#eb2f96"/> {{asyncObj}}</div>
  <!-- <div class="search"></div> -->
  <a-carousel autoplay>
    <div>
      <h1>中国文化传媒新文创（IP）平台</h1>
      <h2>确权 + 交易 + 保护 一站式解决方案</h2>
    </div>
    <div><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1672984128,966606357&fm=26&gp=0.jpg"/></div>
  </a-carousel> 
</div>

CSS代码块

<style scope>
#home{
  position: relative;
}
/* 通知 */
.tips{
  position: absolute;
  z-index: 3;
  left: 15%;
  top: 3px;
  width: 70%;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-indent: 5px;
}
/* 轮播图 */
.ant-carousel .slick-slide {
  text-align: center;
  height: 300px;
  line-height: 50px;
  background: pink;
  overflow: hidden;
}
.ant-carousel .slick-slide h1 {
  padding-top:80px;
}
.ant-carousel .slick-slide img{
  width: 100%;
  height:300px;
}
</style>

JS代码块

  async asyncData({ $axios }) {
    const data = await $axios.$get(
      "http://59.110.17.210:25570/mdmController/ignorekeywords"
    );
    return { asyncObj: data };
  },