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

相关推荐
好好研究1 小时前
使用JavaScript实现轮播图的自动切换和左右箭头切换效果
开发语言·前端·javascript·css·html
paopaokaka_luck3 小时前
基于Spring Boot+Vue的吉他社团系统设计和实现(协同过滤算法)
java·vue.js·spring boot·后端·spring
伍哥的传说5 小时前
Radash.js 现代化JavaScript实用工具库详解 – 轻量级Lodash替代方案
开发语言·javascript·ecmascript·tree-shaking·radash.js·debounce·throttle
前端程序媛-Tian6 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
iamlujingtao6 小时前
js多边形算法:获取多边形中心点,且必定在多边形内部
javascript·算法
嘉琪0016 小时前
实现视频实时马赛克
linux·前端·javascript
爱分享的程序员6 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试
超级土豆粉6 小时前
Taro 位置相关 API 介绍
前端·javascript·react.js·taro
90后的晨仔7 小时前
条件渲染:从传统原生到 Vue 的进化之路
前端·vue.js
草履虫建模7 小时前
RuoYi-Vue 项目 Docker 容器化部署 + DockerHub 上传全流程
java·前端·javascript·vue.js·spring boot·docker·dockerhub