Merge branches 'master' and 'master' of https://gitee.com/lvYeJu/lane-crawford-3

src/assets/icons/pause.svg

@@ -0,0 +1 @@
+<svg t="1760927343641" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5713" width="200" height="200"><path d="M512 51.2c254.08 0 460.8 206.72 460.8 460.8s-206.72 460.8-460.8 460.8S51.2 766.08 51.2 512 257.92 51.2 512 51.2M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.752 0 512 0L512 0z" fill="currentColor" p-id="5714"></path><path d="M741.312 700.352c0 16-12.928 28.992-28.928 28.992L311.616 729.344c-16 0-28.928-12.992-28.928-28.992L282.688 299.648c0-16 12.928-28.864 28.928-28.864l400.768 0c16 0 28.928 12.864 28.928 28.864L741.312 700.352z" fill="currentColor" p-id="5715"></path></svg>

src/components/MyList.vue

@@ -42,6 +42,7 @@
 			font-size: 3rem;
 			color: #000;
 			text-align: center;
+			margin: var(--my-list-footer-margin, 0);
 			> .placeholder {
 				height: 1px;
 			}

src/views/Workshop/library.vue

@@ -2,24 +2,31 @@
 	import { ref, reactive, onMounted, inject } from 'vue'
 	import HeaderTitle from '@/components/HeaderTitle.vue'
 	import FooterNavigation from '@/components/FooterNavigation.vue'
+	import MyList from '@/components/myList.vue'
 	const emit = defineEmits(['view-type'])
 
 	onMounted(() => {
 		emit('view-type', 1)
 	})
+	const loading = ref(false)
+	const finish = ref(false)
+	const list = reactive([])
 
-	const list = reactive([
-		{ id: 1, userID: '1111111111', datetime: '7/22/2025 18:20', lastopened: '18:20' },
-		{ id: 2, userID: '2222222222', datetime: '7/22/2025 18:20', lastopened: '18:20' },
-		{ id: 3, userID: '3333333333', datetime: '7/22/2025 18:20', lastopened: '18:20' },
-		{ id: 4, userID: '4444444444', datetime: '7/22/2025 18:20', lastopened: '18:20' },
-		{ id: 5, userID: '5555555555', datetime: '7/22/2025 18:20', lastopened: '18:20' },
-		{ id: 6, userID: '6666666666', datetime: '7/22/2025 18:20', lastopened: '18:20' },
-		{ id: 7, userID: '7777777777', datetime: '7/22/2025 18:20', lastopened: '18:20' },
-		{ id: 8, userID: '8888888888', datetime: '7/22/2025 18:20', lastopened: '18:20' },
-		{ id: 9, userID: '9999999999', datetime: '7/22/2025 18:20', lastopened: '18:20' },
-		{ id: 10, userID: '0000000000', datetime: '7/22/2025 18:20', lastopened: '18:20' }
-	])
+	const onLoad = () => {
+		loading.value = true
+		setTimeout(() => {
+			for (var i = 0; i < 10; i++) {
+				list.push({
+					id: list.length + 1,
+					userID: 10000000 + list.length,
+					datetime: '7/22/2025 18:20',
+					lastopened: '18:20'
+				})
+			}
+			loading.value = false
+			if (list.length >= 50) finish.value = true
+		}, 1500)
+	}
 	const onRetrieveItem = (i: number) => {
 		console.log('检索' + i)
 	}
@@ -34,18 +41,20 @@
 	<div class="library">
 		<div class="title">Library</div>
 		<div class="list">
-			<div class="item" v-for="(v, i) in list" :key="v.id">
-				<div class="image">
-					<img src="@/assets/images/workshop/posture/posture_1.png" />
+			<my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad">
+				<div class="item" v-for="(v, i) in list" :key="v.id">
+					<div class="image">
+						<img src="@/assets/images/workshop/posture/posture_1.png" />
+					</div>
+					<div class="content">
+						<span class="userID">User ID: {{ v.userID }}</span>
+						<span class="datetime">{{ v.datetime }}</span>
+						<span class="lastopened">Last opened {{ v.lastopened }}</span>
+						<button @click="onRetrieveItem(i)">Retrieve</button>
+					</div>
+					<div class="delete" @click="deleteItem(i)"><SvgIcon name="delete2" size="30" /></div>
 				</div>
-				<div class="content">
-					<span class="userID">User ID: {{ v.userID }}</span>
-					<span class="datetime">{{ v.datetime }}</span>
-					<span class="lastopened">Last opened {{ v.lastopened }}</span>
-					<button @click="onRetrieveItem(i)">Retrieve</button>
-				</div>
-				<div class="delete" @click="deleteItem(i)"><SvgIcon name="delete2" size="30" /></div>
-			</div>
+			</my-list>
 		</div>
 	</div>
 	<footer-navigation is-placeholder />
@@ -88,93 +97,99 @@
 		}
 		> .list {
 			flex: 1;
-			overflow-y: auto;
-			padding: 0 3.8rem;
+			overflow: hidden;
 			margin: 0 3rem;
-			> .item {
-				position: relative;
-				padding: 2.8rem;
-				width: 100%;
-				height: 34.4rem;
-				border-radius: 1.88rem;
-				margin-bottom: 7.66rem;
-				background-color: #f3f3f3;
-				display: flex;
-				align-items: center;
-				> .image {
-					width: 21.4rem;
-					height: 100%;
-					overflow: hidden;
-					border-radius: 2rem;
-					background-color: #fff;
-					> img {
-						width: 100%;
-						height: 100%;
-						object-fit: contain;
-					}
-				}
-				> .content {
-					margin-left: 5.6rem;
+			> .my-list {
+				padding: 0 3.8rem;
+				--my-list-footer-margin: 2rem 0;
+				> .item {
+					position: relative;
+					padding: 2.8rem;
+					width: 100%;
+					height: 34.4rem;
+					border-radius: 1.88rem;
+					background-color: #f3f3f3;
 					display: flex;
-					flex-direction: column;
-					height: 90%;
-					> .userID {
-						font-family: satoshiRegular;
-						font-weight: 500;
-						font-size: 3.8rem;
-						line-height: 89%;
-						color: #000;
+					align-items: center;
+					margin-top: 7.66rem;
+					&:first-child {
+						margin-top: 0;
 					}
-					> .datetime {
-						margin-top: 1.8rem;
-						font-family: satoshiRegular;
-						font-weight: 400;
-						font-size: 3.2rem;
-						line-height: 89%;
-						color: #000;
+					> .image {
+						width: 21.4rem;
+						height: 100%;
+						overflow: hidden;
+						border-radius: 2rem;
+						background-color: #fff;
+						> img {
+							width: 100%;
+							height: 100%;
+							object-fit: contain;
+						}
 					}
-					> .lastopened {
-						margin-top: 1rem;
-						font-family: satoshiRegular;
-						font-weight: 400;
-						font-style: Regular;
-						font-size: 2.6rem;
-						line-height: 89%;
-						color: #6f6f6f;
+					> .content {
+						margin-left: 5.6rem;
+						display: flex;
+						flex-direction: column;
+						height: 90%;
+						> .userID {
+							font-family: satoshiRegular;
+							font-weight: 500;
+							font-size: 3.8rem;
+							line-height: 89%;
+							color: #000;
+						}
+						> .datetime {
+							margin-top: 1.8rem;
+							font-family: satoshiRegular;
+							font-weight: 400;
+							font-size: 3.2rem;
+							line-height: 89%;
+							color: #000;
+						}
+						> .lastopened {
+							margin-top: 1rem;
+							font-family: satoshiRegular;
+							font-weight: 400;
+							font-style: Regular;
+							font-size: 2.6rem;
+							line-height: 89%;
+							color: #6f6f6f;
+						}
+						> button {
+							margin-top: auto;
+							width: 12.3rem;
+							height: 3.8rem;
+							border-radius: 0.5rem;
+							box-sizing: content-box;
+							border: 0.193rem solid #000;
+							background: transparent;
+							font-family: satoshiRegular;
+							font-weight: 400;
+							font-size: 2.576rem;
+							color: #000;
+							margin-right: 5rem;
+							&:active {
+								opacity: 0.7;
+							}
+						}
 					}
-					> button {
-						margin-top: auto;
-						width: 12.3rem;
-						height: 3.8rem;
-						border-radius: 0.5rem;
-						box-sizing: content-box;
-						border: 0.193rem solid #000;
-						background: transparent;
-						font-family: satoshiRegular;
-						font-weight: 400;
-						font-size: 2.576rem;
-						color: #000;
-						margin-right: 5rem;
+					> .delete {
+						position: absolute;
+						top: 2.5rem;
+						right: 2rem;
+						width: 5.5rem;
+						height: 5.5rem;
+						border: 0.188rem solid #000;
+						border-radius: 1.88rem;
+						display: flex;
+						align-items: center;
+						justify-content: center;
 						&:active {
 							opacity: 0.7;
 						}
 					}
 				}
-				> .delete {
-					position: absolute;
-					top: 2.5rem;
-					right: 2rem;
-					width: 5.5rem;
-					height: 5.5rem;
-					border: 0.188rem solid #000;
-					border-radius: 1.88rem;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					&:active {
-						opacity: 0.7;
-					}
-				}
 			}
 		}
 	}

src/views/asistant/components/AudioVisualizer.vue

@@ -1,13 +1,19 @@
 <template>
   <div class="audio-visualizer" ref="containerRef">
     <div class="visualizer-container" ref="visualizerRef">
-      <div v-for="(line, index) in lines" :key="index" :class="['line', `line-${line.type}`]"></div>
+      <template v-if="isInitialized">
+        <div
+          v-for="(line, index) in lines"
+          :key="index"
+          :class="['line', `line-${line.type}`]"
+        ></div> </template
+      >>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, onMounted, nextTick } from 'vue'
 
 // 定义线条类型
 interface Line {
@@ -17,12 +23,16 @@ interface Line {
 const containerRef = ref<HTMLElement>()
 const visualizerRef = ref<HTMLElement>()
 const lines = ref<Line[]>([])
+const isInitialized = ref<boolean>(false)
 
 // 计算需要的线条数量
 const calculateLines = (): Line[] => {
   if (!visualizerRef.value) return []
 
   const containerWidth = visualizerRef.value.offsetWidth
+
+  // 如果容器宽度为0或很小，说明还没有正确渲染，返回空数组
+  if (containerWidth < 50) return []
   const lineWidth = 0.96 // 每条线的宽度 (rem)
   const gap = 0.96 // 线条之间的间距 (rem)
 
@@ -66,7 +76,7 @@ const calculateLines = (): Line[] => {
   // 生成一个完整周期的内容
   const oneCycle: Line[] = []
   oneCycle.push(...basePattern)
-  
+
   // 添加重复模式直到填满一个周期
   let currentIndex = basePattern.length
   while (currentIndex < linesNeeded) {
@@ -91,22 +101,38 @@ const calculateLines = (): Line[] => {
 
 // 更新线条
 const updateLines = () => {
-  lines.value = calculateLines()
+  if (isInitialized.value) return
+  const newLines = calculateLines()
+  if (newLines.length > 0) {
+    lines.value = newLines
+    isInitialized.value = true
+  }
 }
 
-// 监听窗口大小变化
-const handleResize = () => {
-  updateLines()
-}
+// 暴露方法给父组件
+defineExpose({
+  updateLines
+})
 
 onMounted(async () => {
   await nextTick()
-  updateLines()
-  window.addEventListener('resize', handleResize)
-})
 
-onUnmounted(() => {
-  window.removeEventListener('resize', handleResize)
+  // 立即尝试第一次更新
+  updateLines()
+
+  // 如果第一次没有成功，快速重试
+  setTimeout(() => {
+    if (!isInitialized.value) {
+      updateLines()
+    }
+  }, 50)
+
+  // 最后的备用尝试
+  setTimeout(() => {
+    if (!isInitialized.value) {
+      updateLines()
+    }
+  }, 150)
 })
 </script>
 
@@ -117,7 +143,6 @@ onUnmounted(() => {
   justify-content: center;
   align-items: center;
   padding: 20px;
-  min-height: 200px;
   border-radius: 10px;
 }
 

src/views/asistant/components/InputArea.vue

@@ -13,7 +13,8 @@
     <div class="input-container">
       <!-- 加号图标 -->
       <div class="icon-wrapper">
-        <SvgIcon name="plus" size="40" />
+        <SvgIcon v-if="!isRecording" name="plus" size="40" />
+        <SvgIcon v-else name="pause" size="60" @click="stopRecording" />
       </div>
 
       <!-- 分隔线 -->
@@ -21,18 +22,20 @@
 
       <!-- 正常状态：显示输入框 -->
       <div class="input-wrapper">
-        <input
+        <textarea
           id="textarea"
           v-show="!isRecording"
           v-model="inputValue"
-          type="text"
+          rows="1"
           placeholder="Ask anything about your desired outfit"
           class="text-input"
-          @keyup.enter="handleSend"
-        />
+          @keydown="handleKeyDown"
+          @input="handleInput"
+          ref="textareaRef"
+        ></textarea>
         <div v-show="isRecording" class="recording-wrapper">
           <!-- <div class="recording-animation"> -->
-          <AudioVisualizer />
+          <AudioVisualizer ref="audioVisualizerRef" />
           <!-- </div> -->
         </div>
       </div>
@@ -51,13 +54,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onUnmounted } from 'vue'
+import { ref, onUnmounted, nextTick } from 'vue'
 import AudioVisualizer from './AudioVisualizer.vue'
+import { showToast } from 'vant'
 
 const emit = defineEmits(['send-message'])
 
 const inputValue = ref<string>('')
 const isRecording = ref<boolean>(false)
+const audioVisualizerRef = ref<InstanceType<typeof AudioVisualizer> | null>(null)
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
 const shortcutList: string[] = [
   'Suggest shoe styles',
   'Recommend evening bags',
@@ -72,6 +78,34 @@ const handleSend = (): void => {
     console.log('input发送消息:', inputValue.value)
     emit('send-message', inputValue.value)
     inputValue.value = ''
+    // 重置textarea高度
+    if (textareaRef.value) {
+      textareaRef.value.style.height = 'auto'
+    }
+  }
+}
+
+// 处理键盘事件
+const handleKeyDown = (event: KeyboardEvent): void => {
+  if (event.key === 'Enter' && !event.shiftKey) {
+    event.preventDefault()
+    handleSend()
+  }
+}
+
+// 处理输入事件，自动调整高度
+const handleInput = (): void => {
+  if (textareaRef.value) {
+    textareaRef.value.style.height = 'auto'
+
+    // const lineHeight = 4.8
+    // const maxLines = 3
+    // const maxHeight = lineHeight * maxLines
+
+    const scrollHeight = textareaRef.value.scrollHeight
+    // const newHeight = Math.min(scrollHeight, maxHeight * 10)
+
+    textareaRef.value.style.height = `${scrollHeight}px`
   }
 }
 
@@ -89,10 +123,22 @@ onUnmounted(() => {
   }
 })
 
-const handleClickAudio = (): void => {
+const handleClickAudio = async (): Promise<void> => {
   isRecording.value = !isRecording.value
 
+  // 当开始录音时，等待DOM更新后触发AudioVisualizer重新计算
   if (isRecording.value) {
+    await nextTick()
+    // 立即尝试更新
+    if (audioVisualizerRef.value) {
+      audioVisualizerRef.value.updateLines?.()
+    }
+    // 快速重试
+    setTimeout(() => {
+      if (audioVisualizerRef.value) {
+        audioVisualizerRef.value.updateLines?.()
+      }
+    }, 50)
     startRecording()
   } else {
     stopRecording()
@@ -126,7 +172,7 @@ const startRecording = () => {
   }
 
   // 识别结果
-  speechRecognition.onresult = (event) => {
+  speechRecognition.onresult = (event: any) => {
     let finalTranscript = ''
     let interimTranscript = ''
 
@@ -165,10 +211,11 @@ const startRecording = () => {
   }
 
   // 识别错误
-  speechRecognition.onerror = (event) => {
+  speechRecognition.onerror = (event: any) => {
     console.error('语音识别错误:', event.error)
     isRecording.value = false
-    alert('语音识别失败，请重试')
+    // alert('语音识别失败，请重试')
+    showToast(event.error)
   }
 
   // 开始识别
@@ -215,8 +262,8 @@ const stopRecording = () => {
   display: flex;
   align-items: center;
   background-color: #efefef;
-  padding: 0 4.85rem 0 5.2rem;
-  height: 19.3rem;
+  padding: 1.5rem 4.85rem 1.5rem 5.2rem;
+  min-height: 19.3rem;
 }
 
 .icon-wrapper {
@@ -224,6 +271,7 @@ const stopRecording = () => {
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  color: #6d6868;
 
   &.send-icon {
     margin-left: 4.38rem;
@@ -236,6 +284,7 @@ const stopRecording = () => {
   margin-left: 5.59rem;
   margin-right: 3.5rem;
   background-color: #888;
+  align-self: center;
 }
 
 .input-wrapper {
@@ -243,26 +292,22 @@ const stopRecording = () => {
   display: flex;
   align-items: center;
   overflow: hidden;
-  // height: 100%;
 }
 
 .text-input {
   width: 100%;
-  // height: 100%;
-  height: auto;
   // min-height: 4.8rem;
-  // max-height: 100%;
+  max-height: 14.4rem;
   border: none;
   outline: none;
   background: transparent;
   font-size: 4rem;
   font-family: 'robotoBold';
   font-weight: 400;
-  line-height: 121%;
-  // padding-right: 2rem;
-  margin-right: 4.21rem;
+  line-height: 4.8rem; /* 设置行高等于实际渲染高度，实现垂直居中 */
+  padding: 0;
   color: #000;
-  // resize: none;
+  word-break: break-all;
 
   &::placeholder {
     color: #888;
@@ -288,6 +333,7 @@ const stopRecording = () => {
   flex: 1;
   display: flex;
   align-items: center;
+  min-height: 4.8rem;
 }
 
 .recording-animation {

src/views/asistant/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="asistant-container flex flex-column">
     <div class="header">
-      <HeaderTitle light hasSetting />
+      <HeaderTitle hasSetting styleType="2" />
     </div>
     <div class="loading-container" v-if="isLoading">
       <GenerateLoading />
@@ -80,7 +80,6 @@ onMounted(() => {
   // handleSendMessage('123')
 })
 
-let loadingTimer: any = null
 const handleSendMessage = (message: string): void => {
   console.log('收到消息:', message)
   messageList.value.push({
@@ -91,27 +90,6 @@ const handleSendMessage = (message: string): void => {
     thumb: ''
   })
   //
-
-  // 模拟请求延迟
-  // setTimeout(() => {
-  //   // 调用NoticeList的方法添加新消息
-  //   if (noticeListRef.value) {
-  //     isLoading.value = true
-
-  //     loadingTimer = setTimeout(() => {
-  //       const newMessage: ChatMessage = {
-  //         id: Date.now().toString(),
-  //         content:
-  //           "Thanks for your message! I'm processing your request and will provide you with the best fashion advice.",
-  //         userId: '2',
-  //         time: new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),
-  //         thumb: 'https://files-dev.deercal.com/uploads/platforms/logo_code/669933e1b873e798.jpg'
-  //       }
-  //       messageList.value.push(newMessage)
-  //       isLoading.value = false
-  //     }, 3000)
-  //   }
-  // }, 10000) // 3秒后完成
 }
 
 const handleContinue = () => {

src/views/stylist/index.vue

@@ -11,15 +11,7 @@
       <div class="carousel-container">
         <!-- 左箭头 -->
         <div class="nav-arrow left" @click="handleChangeSwiper('prev')">
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-            <path
-              d="M15 18L9 12L15 6"
-              stroke="white"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
+          <van-icon name="arrow-left" color="#fff" size="40" />
         </div>
 
         <van-swipe touchable ref="swiperRef">
@@ -37,7 +29,8 @@
         </van-swipe>
 
         <div class="nav-arrow right" @click="handleChangeSwiper('next')">
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+          <van-icon name="arrow" color="#fff" size="40" />
+          <!-- <svg width="15" height="26" viewBox="0 0 24 24" fill="none">
             <path
               d="M9 18L15 12L9 6"
               stroke="white"
@@ -45,7 +38,7 @@
               stroke-linecap="round"
               stroke-linejoin="round"
             />
-          </svg>
+          </svg> -->
         </div>
       </div>
     </div>
@@ -182,8 +175,8 @@ watch(showVideo, (newValue) => {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  width: 5rem;
-  height: 5rem;
+  width: 8.6rem;
+  height: 8.4rem;
   background: rgba(255, 255, 255, 0.15);
   border-radius: 50%;
   display: flex;
@@ -192,15 +185,9 @@ watch(showVideo, (newValue) => {
   cursor: pointer;
   transition: all 0.3s ease;
   z-index: 3;
-  box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1),
-    inset 0 0.1rem 0.2rem rgba(255, 255, 255, 0.3);
+  box-shadow: 0 2rem 2.5rem rgba(0, 0, 0, 0.25), 0 0 6rem rgba(0, 0, 0, 0.25);
   border: 0.1rem solid rgba(255, 255, 255, 0.2);
-
-  &:active {
-    transform: translateY(-50%) scale(0.95);
-    box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2), inset 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
-  }
-
+  filter: drop-shadow(2px 4px 6.6px rgba(0, 0, 0, 0.25));
   &.left {
     left: 1rem;
   }
@@ -223,6 +210,15 @@ watch(showVideo, (newValue) => {
       flex-direction: column;
       align-items: center;
       padding: 4.25rem 0 2.65rem;
+      background: radial-gradient(
+        100% 100% at 0% 0%,
+        rgba(115, 115, 115, 0.4) 0%,
+        rgba(115, 115, 115, 0.2) 50%,
+        rgba(0, 0, 0, 0) 100%
+      );
+      backdrop-filter: blur(35px);
+      overflow: hidden;
+      position: relative;
       img {
         width: 59rem;
         height: 63rem;
@@ -283,7 +279,7 @@ watch(showVideo, (newValue) => {
 :deep(.video-dialog) {
   width: 80%;
   background: rgba(0, 0, 0, 0.3);
-  
+
   .close-btn {
     width: 8.6rem;
     height: 8.4rem;
@@ -299,27 +295,21 @@ watch(showVideo, (newValue) => {
     cursor: pointer;
     backdrop-filter: blur(1rem);
     border: 1px solid rgba(255, 255, 255, 0.3);
-    box-shadow: 
-      0 0.8rem 1.6rem rgba(0, 0, 0, 0.4),
-      inset 0 0.2rem 0.4rem rgba(255, 255, 255, 0.1),
+    box-shadow: 0 0.8rem 1.6rem rgba(0, 0, 0, 0.4), inset 0 0.2rem 0.4rem rgba(255, 255, 255, 0.1),
       inset 0 -0.2rem 0.4rem rgba(0, 0, 0, 0.3);
     transition: all 0.3s ease;
-    
+
     &:hover {
       transform: translateY(-0.2rem);
-      box-shadow: 
-        0 1.2rem 2.4rem rgba(0, 0, 0, 0.5),
-        inset 0 0.2rem 0.4rem rgba(255, 255, 255, 0.15),
-        inset 0 -0.2rem 0.4rem rgba(0, 0, 0, 0.4);
+      box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.5),
+        inset 0 0.2rem 0.4rem rgba(255, 255, 255, 0.15), inset 0 -0.2rem 0.4rem rgba(0, 0, 0, 0.4);
     }
-    
+
     &:active {
       transform: translateY(0.1rem);
-      box-shadow: 
-        0 0.4rem 0.8rem rgba(0, 0, 0, 0.3),
-        inset 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
+      box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.3), inset 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
     }
-    
+
     .close-icon {
       color: white;
       font-size: 2.4rem;