vue模拟扑克效果

vue模拟扑克效果

效果图:

step1:C:\Users\wangrusheng\PycharmProjects\untitled18\src\views\Home.vue

typescript 复制代码
<template>
  <div class="poker-container">
    <!-- 使用复合数据对象实现双行显示 -->
    <div
      v-for="(card, index) in POKER_CARDS"
      :key="index"
      class="poker-card"
      :class="[cardColors(card.suit), { 'joker-card': card.type === 'JOKER' }]"
    >
     <template v-if="card.type === 'JOKER'">
        <!-- 修改后的JOKER结构 -->
        <div class="card-top">{{ card.size === 'little' ? '🦈' : '🐬' }}</div>
        <div class="card-center" :class="card.size === 'big' ? 'red-text' : 'gray-text'">JOKER</div>
        <div class="card-bottom">{{ card.size === 'little' ? '🦈' : '🐬' }}</div>
      </template>
      <template v-else>
        <div class="card-top">{{ card.suit }}</div>
        <div class="card-center">{{ card.number }}</div>
        <div class="card-bottom">{{ card.suit }}</div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      POKER_CARDS: [
        { type: 'JOKER', size: 'big' },    // 大王
        { type: 'JOKER', size: 'little' }, // 新增的小王
        { suit: '♠', number: '2' },
        { suit: '♣', number: '2' },
        { suit: '♥', number: 'A' },
        { suit: '♦', number: 'A' },
        { suit: '♠', number: 'A' },
        { suit: '♥', number: 'K' },
        { suit: '♣', number: 'K' },
        { suit: '♠', number: 'K' },
        { suit: '♦', number: '10' },
        { suit: '♠', number: '10' },
        { suit: '♥', number: '8' },
        { suit: '♦', number: '8' },
        { suit: '♥', number: '8' },
        { suit: '♠', number: '8' },
        { suit: '♦', number: '4' }
      ]
    }
  },
  methods: {
    cardColors(suit) {
      return {
        'black-text': ['♠', '♣'].includes(suit),
        'red-text': ['♥', '♦'].includes(suit)
      }
    }
  }
}
</script>

<style>
.poker-container {
  display: flex;
  gap: 12px;
  padding: 20px;
  background: white;
  flex-wrap: wrap;
  justify-content: center;
}

.poker-card {
  width: 80px;
  height: 120px;
  border: 1px solid #ddd;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.black-text { color: #333; }
.red-text { color: #c00; }


.card-top, .card-bottom {
  font-size: 1.2em;
  transform: scaleY(0.8);
}

.card-center {
  font-size: 1.8em;
  font-weight: bold;
  text-align: center;
}

.card-bottom {
  transform: rotate(180deg);
}
/* 新增灰色文本样式 */
.gray-text { color: #666; }

/* 保持JOKER文字与普通卡片一致 */
.joker-card .card-center {
  font-size:22px;
  font-weight: bold;
  text-align: center;
  /* 通过缩放保持原有布局效果 */
  transform: scaleY(0.8);
}


</style>

end

相关推荐
张晓~183399481217 分钟前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
爱喝水的小周9 分钟前
AJAX vs axios vs fetch
前端·javascript·ajax
Jinxiansen021112 分钟前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
几道之旅16 分钟前
介绍electron
前端·javascript·electron
轻语呢喃40 分钟前
React智能前端:从零开始的识图学单词项目(一)
javascript·react.js·aigc
断竿散人40 分钟前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架
小飞悟42 分钟前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计
LRH44 分钟前
JS基础 - 基于 Generator + Promise 实现 async/await 原理
前端·javascript
自由逐风44 分钟前
前端小数点精度问题解析
javascript
断竿散人1 小时前
JavaScript 异常捕获完全指南(上):从同步异步到 Promise 错误处理
前端·javascript·promise