点赞效果

停车牌 号码输入

京

津

沪

渝

冀

豫

云

辽

黑

湘

皖

鲁

新

苏

浙

赣

鄂

桂

甘

晋

蒙

陕

吉

闽

贵

粤

青

藏

川

宁

琼

警

澳

港

领

使

学

渐变边框

方式 1:

代码

<template>
  <div class="base-bg"></div>
</template>

<style scoped>
.base-bg {
  width: 300px;
  height: 200px;
  background: #222;

  position: relative;

  border-radius: 12px;
}

.base-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;

  border-radius: inherit;
  margin: -8px;

  background: linear-gradient(to right, #8f41e9, #578aef);
}
</style>

---

方式 2:

代码

第二张与第三种非常相似，但是效果却差别很大

<template>
  <div class="base-bg"></div>
</template>

<style scoped>
.base-bg {
  width: 300px;
  height: 200px;
  background: #222;

  position: relative;
  border-radius: 16px;

  border: 4px solid transparent; /** 关键点 */
  background-clip: padding-box; /** 关键点 */
}

.base-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;

  border-radius: inherit;

  margin: -8px; /** 关键点 */

  background: linear-gradient(to right, #8f41e9, #578aef);
}
</style>

---

方式 3:

代码

<template>
  <div class="base-bg"></div>
</template>

<style scoped>
.base-bg {
  width: 300px;
  height: 200px;

  border: 8px solid transparent;
  border-radius: 16px;

  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #333, #333), linear-gradient(to
        right, #8f41e9, #578aef);
}
</style>

优惠券

优惠券

¥ 998

卡券效果

首页渐变文字

这是一段文本内容，试一试呗

轮播功能

3

1

2

3

1

left

right

跑马灯

参考：https://juejin.cn/post/7106525437844520973

订场须知：为保证本馆的正常运行，保障健身群众的人身安全，公平公正的提供优质服务，结合本馆实际情

订单 二维码 切换效果

• 第一版

1 / 3

• 第二版

1 / 0

通用业务组件

纯粹 Card 背景边框（只有 css 效果）

icon 文本 slot/多半是内容（比如场馆信息）

灰色的线

按钮（蓝，红，白）

首页的显示效果

底部 css。订单部分总计出现的很多

写协议阅读同意

icon title slot，card 蓝色图标 title

用户输入信息的 input

未写过的第二部分