72 lines
1.3 KiB
Vue
72 lines
1.3 KiB
Vue
<script setup>
|
|
import { ref } from "vue";
|
|
|
|
const props = defineProps({
|
|
onChange: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
});
|
|
|
|
const mode = ref(true);
|
|
|
|
const onClick = () => {
|
|
mode.value = !mode.value;
|
|
props.onChange(mode.value);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<view
|
|
class="point-switcher"
|
|
:style="{ borderColor: mode ? '#D8D8D8' : '#53EF56' }"
|
|
>
|
|
<view
|
|
@click="onClick"
|
|
:style="{ transform: 'translateX(' + (mode ? '-58' : '4') + 'rpx)' }"
|
|
>
|
|
<text>放大</text>
|
|
<view :style="{ background: mode ? '#D8D8D8' : '#53EF56' }"></view>
|
|
<text>真实</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.point-switcher {
|
|
width: 100rpx;
|
|
height: 40rpx;
|
|
border-radius: 22rpx;
|
|
border: 2rpx solid;
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
.point-switcher > view {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 40rpx;
|
|
color: #ffffff;
|
|
font-weight: 500;
|
|
font-size: 20rpx;
|
|
word-break: keep-all;
|
|
padding: 0 12rpx;
|
|
transition: all 0.3s ease;
|
|
transform: translateX(-58rpx);
|
|
}
|
|
.point-switcher > view > text:first-child {
|
|
color: #53ef56;
|
|
}
|
|
.point-switcher > view > view {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
flex: 0 0 auto;
|
|
border-radius: 50%;
|
|
margin: 0 10rpx;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.point-switcher > view > text:last-child {
|
|
color: #d8d8d8;
|
|
}
|
|
</style>
|