137 lines
3.0 KiB
Plaintext
137 lines
3.0 KiB
Plaintext
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const list = ref([
|
|
{ label: '澶?, bgColor: '#BE0012', textColor: '#FFFFFF', hasShadow: true },
|
|
{ label: '椤剁骇', bgColor: '#F17415', textColor: '#FFFFFF', hasShadow: true },
|
|
{ label: '浜轰笂浜?, bgColor: '#F9E962', textColor: '#FFFFFF', hasShadow: true },
|
|
{ label: 'NPC', bgColor: '#FDF5C0', textColor: '#555555', hasShadow: false },
|
|
{ label: '鎷夊畬浜?, bgColor: '#FFFFFF', textColor: '#555555', hasShadow: false }
|
|
]);
|
|
|
|
const handleAdd = (index) => {
|
|
console.log('娣诲姞椤?, index);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<view class="ranking-container">
|
|
<view class="ranking-table">
|
|
<view v-for="(item, index) in list" :key="index" class="ranking-row">
|
|
<!-- 鏍囩鍒?-->
|
|
<view class="label-col" :style="{ backgroundColor: item.bgColor }">
|
|
<text class="label-text" :class="{ 'with-shadow': item.hasShadow }" :style="{ color: item.textColor }">
|
|
{{ item.label }}
|
|
</text>
|
|
</view>
|
|
|
|
<!-- 鍐呭鍒?-->
|
|
<view class="content-col">
|
|
<!-- 浠呭湪绗竴琛屽睍绀烘紨绀哄浘鐗?-->
|
|
<template v-if="index === 0">
|
|
<view class="item-box">
|
|
<image src="/static/images/food.jpg" mode="aspectFill" class="item-img" />
|
|
</view>
|
|
</template>
|
|
<!-- 娣诲姞鎸夐挳 -->
|
|
<view class="add-btn" @tap="handleAdd(index)">
|
|
<text class="plus-icon">+</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="less">
|
|
.ranking-container {
|
|
padding: 30rpx 20rpx;
|
|
background-color: #F8F8F8;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.ranking-table {
|
|
border: 2rpx solid #333;
|
|
background-color: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.ranking-row {
|
|
display: flex;
|
|
min-height: 180rpx;
|
|
border-bottom: 2rpx solid #333;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.label-col {
|
|
width: 200rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-right: 2rpx solid #333;
|
|
padding: 0 10rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.label-text {
|
|
font-size: 52rpx;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
|
|
&.with-shadow {
|
|
/* 寮哄姏榛戣壊鎻忚竟锛屾ā鎷?:1鏁堟灉 */
|
|
text-shadow:
|
|
2rpx 2rpx 0 #000,
|
|
-2rpx -2rpx 0 #000,
|
|
2rpx -2rpx 0 #000,
|
|
-2rpx 2rpx 0 #000,
|
|
0 2rpx 0 #000,
|
|
0 -2rpx 0 #000,
|
|
2rpx 0 0 #000,
|
|
-2rpx 0 0 #000;
|
|
}
|
|
}
|
|
|
|
.content-col {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
padding: 20rpx;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.item-box {
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
background-color: #eee;
|
|
border: 1rpx solid #ddd;
|
|
}
|
|
|
|
.item-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.add-btn {
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
background-color: #F2F2F2;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.plus-icon {
|
|
font-size: 70rpx;
|
|
color: #DBDBDB;
|
|
font-weight: 200;
|
|
}
|
|
}
|
|
</style>
|