完善小组件

src/widgets/discount/Large.tsx

@@ -1,9 +1,58 @@
-import { defineComponent } from 'vue'
+import { computed, defineComponent, onMounted, ref } from 'vue'
+import useDiscountStore from './useDiscountStore'
 
 export default defineComponent(() => {
+  const store = useDiscountStore()
+  const idx = ref(0)
+  const selectItem = computed(() => {
+    return store.list[idx.value]
+  })
+  onMounted(() => {
+    setInterval(() => {
+      idx.value = idx.value + 1
+      if (idx.value > store.list.length - 1) {
+        idx.value = 0
+      }
+    }, 5000)
+  })
   return () => (
-    <div class="w-full h-full bg-[#ecfbff] flex flex-col">
+    <div class="w-full h-full bg-[#ecfbff] flex flex-col" style={{
-      large
+      background: `url('${selectItem.value?.commdity[0]?.img}')`
+    }}>
+      <div class={"absolute left-0 top-0 flex text-[14px] h-[26px] bg-[#78635D] rounded-lg items-center  text-white"}>
+        <div class="bg-[#ef5a41] flex items-center  h-full text-white rounded px-2 font-bold ">
+          -13%
+        </div>
+        <span class={" rounded-lg px-2"}>剩余1天</span>
+      </div>
+      <div
+        class={
+          'absolute right-0 h-full w-1/2 rounded-lg bg-[#0003]  backdrop-blur-md'
+        }
+      >
+        <div class="flex flex-col w-full h-full justify-center gap-y-2 py-2 px-3">
+          <span class="text-white text-[14px]">{selectItem.value.name}</span>
+          <div>
+            <span
+              class={
+                'border-[1px] border-[#f6d1b8] border-solid text-[#f6d1b8] p-1 text-[12px] rounded'
+              }
+            >
+              {selectItem.value.typename}
+            </span>
+          </div>
+          <div class={"flex flex-col"}>
+            <span class="text-[#fffbc2] text-[18px] font-bold ">
+              ￥{selectItem.value.commdity[0]?.price}
+            </span>
+            <span class="text-[12px] text-[#bdbdbd] line-through decoration-current">
+              ￥{selectItem.value.commdity[0]?.oldprice}
+            </span>
+          </div>
+
+
+        </div>
+      </div>
     </div>
   )
 })

src/widgets/discount/Middle.tsx

@@ -1,10 +1,49 @@
-import { defineComponent } from 'vue'
+import { computed, defineComponent, onMounted, ref } from 'vue'
+import useDiscountStore from './useDiscountStore'
 
 export default defineComponent(() => {
-
+  const store = useDiscountStore()
+  const idx = ref(0)
+  const selectItem = computed(() => {
+    return store.list[idx.value]
+  })
+  onMounted(() => {
+    setInterval(() => {
+      idx.value = idx.value + 1
+      if (idx.value > store.list.length - 1) {
+        idx.value = 0
+      }
+    }, 5000)
+  })
   return () => (
-    <div class="w-full h-full bg-[#ecfbff] flex flex-col">
+    <div class="w-full h-full bg-[#ecfbff] flex flex-col" style={{
-      middle
+      background: `url('${selectItem.value?.commdity[0]?.img}')`
+    }}>
+      <div class={"absolute left-0 top-0 flex text-[14px] h-[26px] bg-[#78635D] rounded-lg items-center  text-white"}>
+        <div class="bg-[#ef5a41] flex items-center  h-full text-white rounded px-2 font-bold ">
+          -13%
+        </div>
+      </div>
+      <div
+        class={
+          'absolute bottom-0 h-1/2 w-full rounded-lg bg-[#0003]  backdrop-blur-md'
+        }
+      >
+        <div class="flex flex-col w-full h-full justify-center gap-y-1 py-2 px-3">
+          <span class="text-white text-[14px]">{selectItem.value.name}</span>
+
+          <div class={"flex flex-col"}>
+            <span class="text-[#fffbc2] text-[18px] font-bold ">
+              ￥{selectItem.value.commdity[0]?.price}
+            </span>
+            <span class="text-[12px] text-[#bdbdbd] line-through decoration-current">
+              ￥{selectItem.value.commdity[0]?.oldprice}
+            </span>
+          </div>
+
+
+        </div>
+      </div>
     </div>
   )
 })