[WeChat ミニ プログラム/フロントエンド] 実践的なスタイル関連コンテンツに関する簡単なメモ

0 まえがき

点在するいくつかの点の簡単な記録

1 バント

1.1 バンボタン

/* 取消点击按钮时，按钮变灰 */
.van-button--active:before{
    
    
  opacity: 0;
}

/* 按钮点击时缩小 */
.yourCustomButtonStyle:active{
    
    
  transform: scale(0.98)
}

/* 按钮添加渐变色 */
/* 配色参考网址: https://uigradients.com/#SinCityRed */
.yourCustomButtonStyle {
    
    
  background-image: linear-gradient(90deg, #DD213A, #D3291E);
}

1.2 バンのイメージ

<!-- 宽度自适应，显示加载动画、失败提示 -->
<van-image
  custom-class="yourCustomImageStyle"
  fit="widthFix"
  use-loading-slot
  use-error-slot
>
  <van-loading
    slot="loading"
	type="spinner"
	size="40"
	color="#F29438"
	vertical
  />
  <text slot="error">图片加载失败</text>
</van-image>
<!-- 带上 width:100vw;min-height:100vh; 也可以全屏背景图 -->

2 画像など

2.1 背景

/* 全屏背景长图，宽度拉伸，长度截取 */
.home{
    
    
  min-height: 1460px; /* 屏幕小于1460px则取1460px */
  height: 100vh; /* 屏幕大于1460px则取100vh */
  background: url("") no-repeat;
  background-size: 100% auto; /* 宽度拉满，高度适应 */
}
.home::after,
.home:before {
    
    
  content: "";
  display: table;
  clear: both;
}

3 キャンバスなど