uView Plus Vue3 ： （ VIP Plus 付费版 ）

# Common CSS

这个页面在 vuepress@1.8.2 里要想直接看到效果，不能只放代码块；代码块只负责展示源码，不会执行样式。
正确做法是：在 Markdown 里直接写 HTML 结构，并在页面底部补 <style scoped>。

# 常用定位

transform: translateX(-50%);

✅ Copy success!

# 背景渐变预览

下面这个示例会直接渲染出背景颜色和毛玻璃层次：

glass-card-v1
从上到下逐渐透明的背景渐变
.glass-card-v1 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.32) 100%);
  box-shadow: inset 0 2rpx 0 rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(28rpx);

  /* 核心渐变 */
  background: linear-gradient(
    to bottom,
    rgba(90, 86, 233, 0.2) 0%,
    rgba(90, 86, 233, 0) 30%
  );
}

✅ Copy success!

# 卡片示例预览

uni-app 里的 view / rpx 在 VuePress 文档页里不能直接作为页面展示单位使用，所以这里做了文档预览版映射：

  • view 改成 div
  • rpx 改成 px
钱包卡片
用于文档中直接预览背景、阴影和层叠关系。
<div class="wallet-illustration">
  <div class="wallet-back"></div>
  <div class="wallet-front"></div>
  <div class="wallet-flap"></div>
  <div class="wallet-dot"></div>
</div>

✅ Copy success!
.wallet-illustration {
  position: relative;
  width: 192px;
  height: 148px;
}

.wallet-back,
.wallet-front,
.wallet-flap {
  position: absolute;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(132, 127, 236, 0.65) 0%, rgba(132, 127, 236, 0.28) 100%);
  border: 2px solid rgba(132, 127, 236, 0.16);
}

.wallet-back {
  top: 10px;
  left: 56px;
  width: 120px;
  height: 92px;
  transform: rotate(-30deg);
}

.wallet-front {
  right: 0;
  bottom: 8px;
  width: 136px;
  height: 92px;
}

.wallet-flap {
  top: 42px;
  right: 0;
  width: 84px;
  height: 38px;
  border-radius: 20px;
}

.wallet-dot {
  position: absolute;
  top: 54px;
  right: 24px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(90, 86, 233, 0.66);
}

✅ Copy success!

# 说明

  • 如果只是想展示代码，用代码块即可。
  • 如果还想让页面直接看到效果，必须写真实 DOM，并配合 <style>。
  • VuePress 文档页展示建议优先使用 div、span、px 这一套 Web 原生写法。

← bgcolor 颜色 →