90 lines
1.6 KiB
Vue
90 lines
1.6 KiB
Vue
|
<script setup>
|
||
|
|
const props = defineProps({
|
||
|
|
signin: {
|
||
|
|
type: Function,
|
||
|
|
default: () => {},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<view class="container">
|
||
|
|
<view>
|
||
|
|
<view class="labels">
|
||
|
|
<text>反曲弓</text>
|
||
|
|
<text>5 米</text>
|
||
|
|
<text>40 全环靶</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>2025-07-10 14:00:00</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<image src="../static/bow-target.png" mode="widthFix" />
|
||
|
|
<view class="aroow-amount">
|
||
|
|
<text>共</text>
|
||
|
|
<text>36</text>
|
||
|
|
<text>箭</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.container {
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 15px;
|
||
|
|
display: flex;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
height: 24vw;
|
||
|
|
}
|
||
|
|
.container > view {
|
||
|
|
position: relative;
|
||
|
|
margin-left: 15px;
|
||
|
|
}
|
||
|
|
.container > view:first-child {
|
||
|
|
width: calc(100% - 5vw);
|
||
|
|
}
|
||
|
|
.container > view:first-child > view {
|
||
|
|
width: 100%;
|
||
|
|
height: 50%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.labels {
|
||
|
|
align-items: flex-end !important;
|
||
|
|
}
|
||
|
|
.labels > text {
|
||
|
|
font-size: 12px;
|
||
|
|
color: #333333;
|
||
|
|
border: 1px solid #eee;
|
||
|
|
margin-right: 10px;
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 5px 10px;
|
||
|
|
}
|
||
|
|
.container > view:last-child {
|
||
|
|
margin-right: 1vw;
|
||
|
|
}
|
||
|
|
.container > view:last-child > image {
|
||
|
|
width: 24vw;
|
||
|
|
}
|
||
|
|
.aroow-amount {
|
||
|
|
position: absolute;
|
||
|
|
background-color: #0009;
|
||
|
|
border-radius: 10px;
|
||
|
|
color: #fffc;
|
||
|
|
font-size: 12px;
|
||
|
|
line-height: 22px;
|
||
|
|
width: 60px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
top: calc(50% - 11px);
|
||
|
|
left: calc(50% - 30px);
|
||
|
|
}
|
||
|
|
.aroow-amount > text:nth-child(2) {
|
||
|
|
color: #fff;
|
||
|
|
font-size: 14px;
|
||
|
|
margin: 0 3px;
|
||
|
|
}
|
||
|
|
</style>
|