Vue3炫酷商品卡牌组件设计

木子dn

已于 2024-04-22 13:17:20 修改

阅读量1.5k

点赞数 26

CC 4.0 BY-SA版权

分类专栏： # Vue 文章标签： vue typescript javascript

于 2024-04-22 13:12:53 首次发布

本文链接：https://blog.csdn.net/m0_51390969/article/details/138072145

文章目录

演示
代码

感谢来自BinaryMoon-CSS 艺术之暗系魔幻卡牌的博文。💕

演示

请添加图片描述

代码

接口类型

export interface CourseBaseVO {
   
   
  /**
   * 主键
   */
  id: string | number;

  /**
   * 机构ID
   */
  companyId: string | number;

  /**
   * 课程名称
   */
  name: string;

  /**
   * 大分类
   */
  mt: string;

  /**
   * 小分类
   */
  st: string;

  /**
   * 课程图片
   */
  pic: string;

  /**
   * 是否收费
   */
  charge: boolean;

  /**
   * 原价
   */
  originalPrice: number;

  /**
   * 现价
   */
  price: number;

  /**
   * 评分
   */
  star: number;

  /**
   * UNPUBLISHED(1, "未发布"),     UNDER_REVIEW(2, "审核中"),     REVIEW_FAILED(3, "审核不通过"),     REVIEW_PASSED(4, "审核通过")
   */
  status: number;

  /**
   * 审核意见
   */
  mind: string;

}
interface CourseBaseExtraHotVo extends CourseBaseVO {
   
   
  isHot: boolean;
}

外部资源wave_orange.svg

<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 490" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150"><defs><linearGradient id="gradient" x1="0%" y1="51%" x2="100%" y2="49%"><stop offset="5%" stop-color="#fcb900"></stop><stop offset="95%" stop-color="#ff6900"></stop></linearGradient></defs><path d="M 0,500 L 0,0 C 90.96650717703349,54.02870813397129 181.93301435406698,108.05741626794259 268,115 C 354.066985645933,121.94258373205741 435.23444976076553,81.79904306220095 535,84 C 634.7655502392345,86.20095693779905 753.129186602871,130.7464114832536 867,132 C 980.870813397129,133.2535885167464 1090.248803827751,91.2153110047847 1185,62 C 1279.751196172249,32.78468899521531 1359.8755980861245,16.392344497607656 1440,0 L 1440,500 L 0,500 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.53" class="transition-all duration-300 ease-in-out delay-150 path-0"></path><defs><linearGradient id="gradient" x1="0%" y1="51%" x2="100%" y2="49%"><stop offset="5%" stop-color="#fcb900"></stop><stop offset="95%" stop-color="#ff6900"></stop></linearGradient></defs><path d="M 0,500 L 0,0 C 111.98086124401911,108.89952153110048 223.96172248803822,217.79904306220095 335,271 C 446.0382775119618,324.20095693779905 556.133971291866,321.7033492822967 626,309 C 695.866028708134,296.2966507177033 725.5023923444976,273.3875598086125 820,274 C 914.4976076555024,274.6124401913875 1073.8564593301435,298.7464114832536 1188,257 C 1302.1435406698565,215.25358851674642 1371.0717703349283,107.62679425837321 1440,0 L 1440,500 L 0,500 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-1"></path></svg>

组件源码

<template>
  <div
    id="card"
    style="padding: 5px;margin: 20px"
  >
    <el-card
      shadow="hover"
      style="width: 350px; border-radius: 10px"
    >
      <div class="wave-orange-card"></div>
      <