111

src/assets/css/style.css

@@ -24,7 +24,6 @@ h6,
   font-family: Poppins, sans-serif;
   font-weight: 600;
   letter-spacing: 2px;
-  text-transform: capitalize;
 }
 @keyframes loading {
   0% {

src/assets/css/style.less

@@ -26,7 +26,7 @@ h6,
 	font-family: Poppins, sans-serif;
 	font-weight: 600;
 	letter-spacing: 2px;
-	text-transform: capitalize;
+	// text-transform: capitalize;
 }
 
 @keyframes loading {

src/pages/my-account/orders.vue

@@ -1,11 +1,17 @@
 <template>
-	<div class="orders">No order has been made yet.</div>
+	<div class="orders">
+		<tip-box>
+			<router-link class="link" to="/">Browse products</router-link>
+		</tip-box>
+	</div>
 </template>
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
+	import tipBox from './tip-box.vue'
 </script>
 
 <style scoped lang="less">
 	.orders {
+		width: 100%;
 	}
 </style>

src/pages/my-account/tip-box.vue

@@ -0,0 +1,29 @@
+<template>
+	<div class="tip-box">
+		<span class="iconfont icon-info"></span>
+		<div class="tip">No order has been made yet.</div>
+		<slot></slot>
+	</div>
+</template>
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+</script>
+
+<style scoped lang="less">
+	.tip-box {
+		width: 100%;
+		height: 48px;
+		background-color: #1565c0;
+		border-left: 5px solid rgba(0, 0, 0, 0.2);
+		display: flex;
+		align-items: center;
+		padding: 0 20px;
+		> .tip {
+			flex: 1;
+		}
+		> * {
+			color: #fff;
+			font-size: 16px;
+		}
+	}
+</style>