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

相关推荐
携欢6 小时前
PortSwigger靶场之Exploiting server-side parameter pollution in a REST URL通关秘籍
前端·javascript·安全
寒月霜华6 小时前
JavaWeb-html、css-网页正文制作
前端·css·html
*濒危物种*6 小时前
HTML标签语法,基本框架
前端·css·html
软件技术NINI6 小时前
html css js网页制作成品——HTML+CSS+js早餐铺网页设计(4页)附源码
javascript·css·html
艾小码7 小时前
前端必备:JS数组与对象完全指南,看完秒变数据处理高手!
前端·javascript
weixin-a153003083168 小时前
vue疑难解答
前端·javascript·vue.js
大怪v15 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
西陵15 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
Panda__Panda15 小时前
docker项目打包演示项目(数字排序服务)
运维·javascript·python·docker·容器·c#
10年前端老司机16 小时前
Promise 常见面试题(持续更新中)
前端·javascript