【微信小程序】关于页面中引入背景的两种方式

进阶的CC2023-09-21 22:48

| 布局设计思路

html 复制代码

<view class="about">
<view class="pubilcTitle">
  <view class="en"></view>
  <view class="cn"></view>
  <view class="line"></view>
</view>
<view class="content">
<view class="row"></view>
<view class="row"></view>
<view class="row"></view>
</view>
</view>

1.对于全局都需要的头样式写在app.wxss里面

css 复制代码

/*app.wxss*/
.pubilcTitle{
  text-align: center;
}
.pubilcTitle .en{
  font-size: 86rpx;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--globalColor);
  opacity: 0.3;
}
.pubilcTitle .cn{
  font-size: 56rpx;
  font-weight: 900;
  color: var(--globalColor);
  opacity: 0.8;
  transform: translateY(-60rpx);
  -webkit-transform: translateY(-60rpx);
  -moz-transform: translateY(-60rpx);
  -ms-transform: translateY(-60rpx);
  -o-transform: translateY(-60rpx);
}
.pubilcTitle .line{
  display: inline-block;
  text-align: center;
  width: 200rpx;
  height: 4rpx;
  background: var(--globalColor);
  transform: translateY(-40rpx);
  -webkit-transform: translateY(-40rpx);
  -moz-transform: translateY(-40rpx);
  -ms-transform: translateY(-40rpx);
  -o-transform: translateY(-40rpx);
}