first commit

2026-09-08 17:20:27 +08:00
commit a7f2e0ca01
752 changed files with 111259 additions and 0 deletions
@@ -0,0 +1,78 @@
+<template>
+  <view class="checkbox" :class="isOpen ? 'active' : ''" @click="handleToggle">
+    <text v-show="isOpen" style="padding-bottom:1px;">MASS</text>
+    <view class="circle"></view>
+    <text v-show="!isOpen" style="padding-bottom:1px;">IM</text>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    isOpen: {
+      required: true,
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    handleToggle() {
+      this.$emit('toggle');
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.active {
+  background-color: #bd9c59 !important;
+  
+  > .circle {
+    transform: translateX(92rpx); // 移动到右侧的距离
+  }
+}
+
+.checkbox {
+  width: 130rpx;
+  height: 40rpx;
+  padding: 4rpx;
+  border-radius: 24rpx;
+  background-color: #bd9c59; // 默认为灰色
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative; // 添加相对定位
+  
+  > .circle {
+    width: 40rpx;
+    height: 40rpx;
+    background-color: white;
+    border-radius: 50%;
+    transition: transform 0.3s ease; // 添加过渡效果
+    position: absolute; // 使用绝对定位
+    left: 4rpx; // 左侧起始位置
+  }
+  
+  > text {
+    flex: 1;
+    font-size: 26rpx;
+	margin-top:1px;
+    color: white;
+    position: relative; // 确保文本在圆形按钮上方
+    z-index: 1;
+    
+    &:first-of-type {
+      text-align: left;
+      margin-left: 16rpx;
+    }
+    
+    &:last-of-type {
+      text-align: right;
+      margin-right: 16rpx;
+    }
+  }
+}
+</style>