如何解决我可以在打字稿中创建带有圆滑轮播的按钮,但我无法在 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 举报,一经查实,本站将立刻删除。