feat:发布动态页面；部分样式修改

src/sheep/components/segmented/segmented.vue

@@ -1,45 +1,10 @@
-<script setup lang="ts">
-import { computed } from "vue";
-
-const props = withDefaults(
-  defineProps<{
-    items?: string[];
-    modelValue?: number;
-  }>(),
-  {
-    items: () => [],
-    modelValue: 0,
-  }
-);
-const emit = defineEmits<{
-  (e: "update:modelValue", index: number): void;
-  (e: "onChange", target: { currentIndex: number }): void;
-}>();
-
-const activeStyle = computed(() => {
-  const x = 60 * props.modelValue;
-  return {
-    transform: `translate3d(${x}px, 0, 0)`,
-  };
-});
-
-const segmentedWidth = computed(() => {
-  return { width: `${props.items.length * 60}px` };
-});
-
-function segmentedItem(index: number) {
-  if (props.modelValue === index) return;
-  emit("update:modelValue", index);
-  emit("onChange", {
-    currentIndex: index,
-  });
-}
-</script>
-
 <template>
-  <view class="segmentedes" :style="segmentedWidth">
+  <view
+    class="flex items-center relative mx-auto border-1 border-solid border-#666 rounded-full overflow-hidden"
+    :style="segmentedWidth"
+  >
     <view
-      class="segmented-item"
+      class="relative z-10 flex-1 h-50rpx line-height-50rpx text-center text-sm active:text-color-theme"
       v-for="(item, index) in items"
       :key="item"
       :class="{ active: modelValue === index }"
@@ -47,40 +12,48 @@ function segmentedItem(index: number) {
     >
       <text>{{ item }}</text>
     </view>
-    <div class="active-bar" :style="activeStyle"></div>
+    <div
+      class="absolute left-0 top-0 h-full bg-color-theme-dark rounded-full transform duration-100"
+      :style="activeStyle"
+    ></div>
   </view>
 </template>
 
-<style scoped lang="scss">
-.segmentedes {
-  display: flex;
-  position: relative;
-  align-items: center;
-  margin: 0 auto;
-  border: 1px solid $color-highlight-background;
-  border-radius: 5px;
-  .segmented-item {
-    position: relative;
-    z-index: 10;
-    flex: 1;
-    height: 30px;
-    line-height: 30px;
-    text-align: center;
-    font-size: $font-size-medium;
-    color: $color-text-d;
-    &.active {
-      color: $color-text;
-    }
+<script setup lang="ts">
+  import { computed } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      items?: string[];
+      modelValue?: number;
+    }>(),
+    {
+      items: () => [],
+      modelValue: 0,
+    },
+  );
+  const emit = defineEmits<{
+    (e: 'update:modelValue', index: number): void;
+    (e: 'change', target: { currentIndex: number }): void;
+  }>();
+
+  const activeStyle = computed(() => {
+    const x = 50 * props.modelValue;
+    return {
+      width: `${50}px`,
+      transform: `translate3d(${x}px, 0, 0)`,
+    };
+  });
+
+  const segmentedWidth = computed(() => {
+    return { width: `${props.items.length * 50}px` };
+  });
+
+  function segmentedItem(index: number) {
+    if (props.modelValue === index) return;
+    emit('update:modelValue', index);
+    emit('change', {
+      currentIndex: index,
+    });
   }
-  .active-bar {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 60px;
-    height: 30px;
-    transition: transform 0.3s;
-    border-radius: 5px;
-    background: $color-highlight-background;
-  }
-}
-</style>
+</script>