微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

我可以在打字稿中创建带有圆滑轮播的按钮,但我无法在 scss 中塑造它们

如何解决我可以在打字稿中创建带有圆滑轮播的按钮,但我无法在 scss 中塑造它们

我试图在我的项目中用打字稿创建一个按钮并用 css 对其进行整形,按钮已形成,但 scss 看不到我写的代码

我不认为 scss 代码错误的,因为当我为 html 创建一个按钮并给它的类一个光滑的箭头时,形状就形成了。

scss 代码

body {
 font-family: Montserrat,sans-serif;
 margin: 0;
  }


$bg-gradient: linear-gradient(
   151deg,rgba(131,58,180,1) 0%,rgba(253,29,1) 50%,rgba(252,176,69,1) 100%
 );


     //arrows

 .slick-arrow {
   position: absolute;
   bottom: 2em;
   right: 2em;
   z-index: 2;
   background: $bg-gradient;
   background-size: 100%;
   border: 0;
   width: 30px;
   height: 25px;
   text-indent: -9999px;
   clip-path: polygon(50% 0%,0% 100%,100% 100%);
   cursor: pointer;
   transition: all 0.5s ease;

   &:hover {
     background-size: 190%;
   }

   &.slick-prev {
     right: 5em;
     transform: rotate(-90deg);
   }

   &.slick-next {
     transform: rotate(90deg);
   }
 }
                     

打字稿代码

  import { Component,OnInit } from '@angular/core';

 declare var $: any;

 @Component({
   selector: 'app-home-page',templateUrl: './home-page.component.html',styleUrls: ['./home-page.component.scss'],})
 export class HomePageComponent implements OnInit {
   constructor() {}

   ngOnInit(): void {
     this.demo();
   }

   demo() {
     $('.slider').slick({
       slidesToShow: 1,slidesToScroll: 1,arrows: true,fade: true,});
   }
 }

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。