UI更新
This commit is contained in:
kron
@@ -11,12 +11,16 @@ const props = defineProps({
|
||||
},
|
||||
onExpand: {
|
||||
type: Function,
|
||||
default: null,
|
||||
default: () => {},
|
||||
},
|
||||
onSelect: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
noArrow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
const bowTypes = [
|
||||
{
|
||||
@@ -95,7 +99,13 @@ const onMeterChange = (e) => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="container" :style="{ maxHeight: expand ? '500px' : '50px' }">
|
||||
<view
|
||||
class="container"
|
||||
:style="{
|
||||
maxHeight: expand ? '500px' : '50px',
|
||||
marginTop: noArrow ? '0' : '10px',
|
||||
}"
|
||||
>
|
||||
<view @click="() => onExpand(itemIndex, !expand)">
|
||||
<text :style="{ opacity: expand ? 1 : 0 }">{{
|
||||
itemIndex !== 3 ? itemTexts[itemIndex] : "选择组"
|
||||
@@ -126,6 +136,7 @@ const onMeterChange = (e) => {
|
||||
</block>
|
||||
<button hover-class="none">
|
||||
<image
|
||||
v-if="!noArrow"
|
||||
src="../static/arrow-grey.png"
|
||||
mode="widthFix"
|
||||
:style="{ transform: expand ? 'rotateX(180deg)' : 'rotateX(0deg)' }"
|
||||
@@ -218,9 +229,8 @@ const onMeterChange = (e) => {
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: calc(100vw - 40px);
|
||||
width: calc(100% - 20px);
|
||||
background-color: #fff;
|
||||
margin-top: 10px;
|
||||
border-radius: 10px;
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
|
||||
89
src/components/PointRecord.vue
Normal file
89
src/components/PointRecord.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<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>
|
||||
@@ -9,32 +9,50 @@ const props = defineProps({
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
noBg: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
const showContainer = ref(false);
|
||||
const showContent = ref(false);
|
||||
watch(
|
||||
() => props.show,
|
||||
(newValue) => {
|
||||
setTimeout(() => {
|
||||
showContent.value = newValue;
|
||||
}, 100);
|
||||
}
|
||||
if (newValue) {
|
||||
showContainer.value = true;
|
||||
setTimeout(() => {
|
||||
showContent.value = true;
|
||||
}, 100);
|
||||
} else {
|
||||
showContent.value = false;
|
||||
setTimeout(() => {
|
||||
showContainer.value = false;
|
||||
}, 100);
|
||||
}
|
||||
},
|
||||
{}
|
||||
);
|
||||
const closeModal = () => {
|
||||
showContent.value = false;
|
||||
setTimeout(() => {
|
||||
props.onClose();
|
||||
}, 300);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="container" v-if="show" :style="{ opacity: show ? 1 : 0 }">
|
||||
<view
|
||||
class="container"
|
||||
v-if="showContainer"
|
||||
:style="{ opacity: show ? 1 : 0 }"
|
||||
@click="onClose"
|
||||
>
|
||||
<view
|
||||
class="modal-content"
|
||||
:style="{ transform: `translateY(${showContent ? '0%' : '100%'})` }"
|
||||
:style="{ transform: `translateY(${showContent ? '0%' : '100%'})`, height: !noBg ? '260px' : 'auto' }"
|
||||
@click.stop=""
|
||||
>
|
||||
<image src="../static/modal-content-bg.png" mode="widthFix" />
|
||||
<view class="close-btn" @click="closeModal">
|
||||
<image
|
||||
v-if="!noBg"
|
||||
src="../static/modal-content-bg.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="close-btn" @click="onClose">
|
||||
<image src="../static/close-yellow.png" mode="widthFix" />
|
||||
</view>
|
||||
<slot></slot>
|
||||
@@ -60,7 +78,6 @@ const closeModal = () => {
|
||||
}
|
||||
.modal-content {
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
transform: translateY(100%);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
|
||||
66
src/components/ScreenHint2.vue
Normal file
66
src/components/ScreenHint2.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<script setup>
|
||||
import IconButton from "./IconButton.vue";
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
onClose: {
|
||||
type: Function,
|
||||
default: null,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 100,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="container" :style="{ display: show ? 'flex' : 'none' }">
|
||||
<view class="scale-in">
|
||||
<image src="../static/point-book-tip-bg.png" mode="widthFix" />
|
||||
<slot />
|
||||
</view>
|
||||
<IconButton
|
||||
v-if="!!onClose"
|
||||
src="../static/close-white-outline.png"
|
||||
:width="30"
|
||||
:onClick="onClose"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 999;
|
||||
}
|
||||
.container > view:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 75vw;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
.container > view:first-child > image {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user