From 69c27a75219a21f67b072ad1ac3f6a5e5bda5393 Mon Sep 17 00:00:00 2001
From: YunYouJun <me@yunyoujun.cn>
Date: Fri, 15 Apr 2022 00:58:52 +0800
Subject: [PATCH] feat: add switch for toggle mode

---
 src/components/ChooseFood.vue | 77 +++++++++++++++++++++++++++++++----
 src/pages/about.md            |  5 +++
 src/pages/index.vue           |  2 +-
 3 files changed, 75 insertions(+), 9 deletions(-)

diff --git a/src/components/ChooseFood.vue b/src/components/ChooseFood.vue
index baf9441..1bc8462 100644
--- a/src/components/ChooseFood.vue
+++ b/src/components/ChooseFood.vue
@@ -36,14 +36,15 @@ const toggleStuff = (item: StuffItem) => {
 </script>
 
 <template>
-  <button m="x-1" class="btn" :bg="strict && 'orange-500 hover:orange-600'" @click="strict = !strict">
-    <span v-if="strict">
-      严格模式
-    </span>
-    <span v-else>
-      宽松模式
-    </span>
-  </button>
+  <div class="inline-flex justify-center items-center">
+    <span :class="!strict && 'text-green-600'" font="bold" m="x-1" @click="strict = false">模糊匹配</span>
+    <label m="x-1" class="switch">
+      <input v-model="strict" type="checkbox">
+      <span class="slider round" />
+    </label>
+    <span :class="strict && 'text-green-600'" font="bold" m="x-1" @click="strict = true">严格匹配</span>
+  </div>
+
   <div m="y-4">
     <h2 text="xl" font="bold" p="1">
       🥬 菜菜
@@ -136,3 +137,63 @@ const toggleStuff = (item: StuffItem) => {
     </Transition>
   </div>
 </template>
+
+<style lang="scss">
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 48px;
+  height: 28px;
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+$size: 20px;
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: $size;
+  width: $size;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: green;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX($size);
+  -ms-transform: translateX($size);
+  transform: translateX($size);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 28px;
+
+  &:before {
+    border-radius: 50%;
+  }
+}
+</style>
diff --git a/src/pages/about.md b/src/pages/about.md
index 97bfada..0d3506e 100644
--- a/src/pages/about.md
+++ b/src/pages/about.md
@@ -9,3 +9,8 @@ title: 关于
 **🍜 好的，今天我们来做菜！**
 
 代码请见 [YunYouJun/cook](https://github.com/YunYouJun/cook)。
+
+<div class="flex justify-center items-center">
+Made by
+<div class="inline-flex" m="x-1" i-ri-bilibili-line /><a class="inline-flex" href="https://space.bilibili.com/1579790" target="_blank">云游君 Official</a>
+</div>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 060b117..460ea28 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -3,7 +3,7 @@
     <div text-4xl m="t-4">
       <div i-mdi-pot-steam-outline inline-block />
     </div>
-    <p m="2">
+    <p text="sm" m="b-4">
       好的，今天我们来做菜！
     </p>
     <p>