<template>
<view v-for="item in pool" :key="item.id">
<lover-cards
:cardType="2"
:cardData="{
id: item.id,
name: item.name,
rarity: item.rarity,
image: item.image,
weight: item.weight,
text: item.text,
}"
/>
</view>
</template>
<script>
import LoverCards from '@/components/lover_cards.vue'
import cardPoolData from '@/data/cardPool.json';
export default {
components: { LoverCards },
data(){
return{
pool: cardPoolData
}
}
}
</script>
<style>
</style>
<!-- components/lover-cards/lover-cards.vue -->
<template>
<view class="card-container" @click="flipCard">
<view class="card" :class="['rarity-' + rarityClass, { flipped: isFlipped }]">
<!-- 卡片正面 -->
<view class="card-front" :style="frontStyle">
<view class="info-container">
<view class="rarity-badge">{{ cardData.rarity }}</view>
<view class="task-name">{{ cardData.name }}</view>
<view class="task-text">{{ cardData.text }}</view>
<view class="meta-info">
<text style="position: absolute;bottom: 5rpx;left: 5rpx;">#{{ cardData.id }}</text>
<text style="position: absolute;bottom: 5rpx;right: 5rpx">权重: {{ cardData.weight }}</text>
</view>
</view>
</view>
<!-- 卡片背面 -->
<view class="card-back" :style="backStyle">
<view class="shine-effect"></view>
</view>
</view>
</view>
</template>
<script>
// 稀有度样式映射
const RARITY_STYLES = [
/* 0.暧昧 */
{
class: 'ambiguous',
front: {
background: 'linear-gradient(135deg, #ffd6e7, #ffc2dc)',
pattern: 'rgba(255, 230, 240, 0.4)'
},
back: {
background: 'linear-gradient(135deg, #ffc2dc, #ffadd2)',
pattern: 'linear-gradient(45deg, rgba(255,182,220,0.5) 25%, transparent 25%)'
},
color: '#d85e9a'
},
/* 1.暧昧-边缘 */
{
class: 'ambiguous-edge',
front: {
background: 'linear-gradient(135deg, #ffc2dc, #ffa3d1)',
pattern: 'rgba(255, 200, 220, 0.4)'
},
back: {
background: 'linear-gradient(135deg, #ffa3d1, #ff8bc8)',
pattern: 'repeating-linear-gradient(45deg, rgba(255,163,209,0.5), transparent 10px)'
},
color: '#d1488f'
},
/* 2.边缘 */
{
class: 'edge',
front: {
background: 'linear-gradient(135deg, #ff8bc8, #ff73bf)',
pattern: 'rgba(255, 170, 210, 0.4)'
},
back: {
background: 'linear-gradient(135deg, #ff73bf, #ff5cb6)',
pattern: 'radial-gradient(circle, rgba(255,115,191,0.5), transparent 40%)'
},
color: '#c23584'
},
/* 3.边缘-畅意 */
{
class: 'edge-ecstasy',
front: {
background: 'linear-gradient(135deg, #ff5cb6, #ff44ad)',
pattern: 'rgba(255, 140, 200, 0.4)'
},
back: {
background: 'linear-gradient(135deg, #ff44ad, #ff2da4)',
pattern: 'conic-gradient(rgba(255,68,173,0.5), rgba(255,45,164,0.5))'
},
color: '#ba2c7f'
},
/* 4.畅意 */
{
class: 'ecstasy',
front: {
background: 'linear-gradient(135deg, #ff2da4, #ff159b)',
pattern: 'rgba(255, 100, 180, 0.4)'
},
back: {
background: 'linear-gradient(135deg, #ff159b, #fd00a5)',
pattern: 'repeating-radial-gradient(circle, rgba(255,21,155,0.5), transparent 10px)'
},
color: '#a8186f'
},
/* 5.畅意-放浪 */
{
class: 'ecstasy-libertine',
front: {
background: 'linear-gradient(135deg, #fd00a5, #e100c8)',
pattern: 'rgba(230, 0, 180, 0.4)'
},
back: {
background: 'linear-gradient(135deg, #e100c8, #d400e0)',
pattern: 'linear-gradient(to right, rgba(225,0,200,0.5), rgba(225,0,200,0.3))'
},
color: '#9e0060'
},
/* 6.放浪 */
{
class: 'libertine',
front: {
background: 'linear-gradient(135deg, #d400e0, #c800ff)',
pattern: 'rgba(200, 0, 220, 0.4)'
},
back: {
background: 'linear-gradient(135deg, #c800ff, #b100ff)',
pattern: 'linear-gradient(135deg, rgba(200,0,255,0.5), rgba(177,0,255,0.5))'
},
color: '#7a005a'
}
]
export default {
props: {
// 卡片类型：0~6 对应7种稀有度
cardType: {
type: Number,
default: 0,
validator: value => value >= 0 && value <= 6
},
// 卡片数据
cardData: {
type: Object,
default: () => ({
id: 0,
name: "",
rarity: "",
image: "",
weight: 0,
text: ""
})
}
},
data() {
return {
isFlipped: false
}
},
computed: {
// 当前稀有度样式配置
rarityStyle() {
return RARITY_STYLES[this.cardType] || RARITY_STYLES[0]
},
// 稀有度类名
rarityClass() {
return this.rarityStyle.class
},
// 正面样式
frontStyle() {
return {
backgroundImage: `${this.rarityStyle.front.background}, ${this.rarityStyle.front.pattern}`
}
},
// 背面样式
backStyle() {
return {
backgroundImage: `${this.rarityStyle.back.background}, ${this.rarityStyle.back.pattern}`
}
}
},
methods: {
flipCard() {
this.isFlipped = !this.isFlipped
}
}
}
</script>
<style scoped>
.card-container {
perspective: 1000rpx;
display: inline-block;
margin: 20rpx;
}
.card {
position: relative;
width: 280rpx;
height: 400rpx;
transform-style: preserve-3d;
transition: transform 0.5s ease;
border-radius: 24rpx;
box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.1);
overflow: hidden;
}
.card.flipped {
transform: rotateY(180deg);
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 24rpx;
background-size: 200% 200%, auto;
animation: flow 8s infinite linear;
display: flex;
flex-direction: column;
padding: 20rpx;
box-sizing: border-box;
background-blend-mode: overlay;
}
.card-back {
transform: rotateY(180deg);
}
/* 稀有度全局样式 */
.rarity-badge {
align-self: flex-start;
padding: 4rpx 12rpx;
border-radius: 16rpx;
font-size: 22rpx;
font-weight: bold;
backdrop-filter: blur(5px);
}
.task-image {
width: 150rpx;
height: 150rpx;
margin: 15rpx auto;
border-radius: 50%;
border: 2rpx solid rgba(255,255,255,0.5);
background: rgba(255,255,255,0.2);
}
.task-name {
font-size: 30rpx;
font-weight: bold;
text-align: center;
margin: 5rpx 0;
}
.task-text {
font-size: 26rpx;
text-align: center;
flex-grow: 1;
padding: 0 15rpx;
line-height: 1.4;
}
.meta-info {
display: flex;
justify-content: space-between;
font-size: 22rpx;
margin-top: 10rpx;
}
.shine-effect {
position: absolute;
top: -50%;
left: -60%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.4), transparent 60%);
transform: rotate(30deg);
animation: shine 4s infinite;
}
@keyframes shine {
0% { transform: rotate(30deg) translateX(-100%); }
50% { transform: rotate(30deg) translateX(100%); }
100% { transform: rotate(30deg) translateX(-100%); }
}
@keyframes flow {
0%, 100% { background-position: 0% 0%; }
50% { background-position: 100% 100%; }
}
/* 稀有度特定样式 */
.rarity-ambiguous .rarity-badge { background: rgba(255, 230, 240, 0.5); }
.rarity-ambiguous-edge .rarity-badge { background: rgba(255, 200, 220, 0.5); }
.rarity-edge .rarity-badge { background: rgba(255, 170, 210, 0.5); }
.rarity-edge-ecstasy .rarity-badge { background: rgba(255, 140, 200, 0.5); }
.rarity-ecstasy .rarity-badge { background: rgba(255, 100, 180, 0.5); }
.rarity-ecstasy-libertine .rarity-badge { background: rgba(230, 0, 180, 0.5); }
.rarity-libertine .rarity-badge { background: rgba(200, 0, 220, 0.5); }
.rarity-ambiguous .task-name { color: #d85e9a; }
.rarity-ambiguous-edge .task-name { color: #d1488f; }
.rarity-edge .task-name { color: #c23584; }
.rarity-edge-ecstasy .task-name { color: #ba2c7f; }
.rarity-ecstasy .task-name { color: #a8186f; }
.rarity-ecstasy-libertine .task-name { color: #9e0060; }
.rarity-libertine .task-name { color: #7a005a; }
.rarity-ambiguous { border: 2rpx solid rgba(255, 182, 220, 0.4); }
.rarity-ambiguous-edge { border: 2rpx solid rgba(255, 163, 209, 0.5); }
.rarity-edge { border: 2rpx solid rgba(255, 115, 191, 0.6); }
.rarity-edge-ecstasy { border: 2rpx solid rgba(255, 68, 173, 0.7); }
.rarity-ecstasy { border: 2rpx solid rgba(255, 21, 155, 0.8); }
.rarity-ecstasy-libertine { border: 2rpx solid rgba(225, 0, 200, 0.9); }
.rarity-libertine { border: 2rpx solid rgba(200, 0, 255, 1); }
</style>
请告诉我如何在卡池页按照我已经写好的方式套用，只需要告诉我这个就行了，再不要多说一句话！
扫一扫
845
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
