refactor: tailwindcss样式优化

Former-commit-id: 3ab444012a3b3f81929830d5c73df8c68437cb87

src/components/Breadcrumb/index.vue

@@ -1,12 +1,15 @@
 <template>
-  <el-breadcrumb class="app-breadcrumb" separator-class="el-icon-arrow-right">
+  <el-breadcrumb
+    separator-class="el-icon-arrow-right"
+    class="h-[50px] flex items-center"
+  >
     <transition-group name="breadcrumb">
       <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
         <span
           v-if="
             item.redirect === 'noredirect' || index === breadcrumbs.length - 1
           "
-          class="no-redirect"
+          class="text-[#97a8be]"
           >{{ generateTitle(item.meta.title) }}</span
         >
         <a v-else @click.prevent="handleLink(item)">
@@ -88,11 +91,6 @@ onBeforeMount(() => {
 </script>
 
 <style lang="scss" scoped>
-.el-breadcrumb__inner,
-.el-breadcrumb__inner a {
-  font-weight: 400 !important;
-}
-
 .app-breadcrumb.el-breadcrumb {
   display: inline-block;
   font-size: 14px;

src/components/Hamburger/index.vue

@@ -1,12 +1,13 @@
 <template>
-  <div style="padding: 0 15px" @click="toggleClick">
+  <div
+    @click="toggleClick"
+    class="px-[15px] hover:bg-gray-50 cursor-pointer h-[50px] leading-[50px]"
+  >
     <svg
       :class="{ 'is-active': isActive }"
       class="hamburger"
       viewBox="0 0 1024 1024"
       xmlns="http://www.w3.org/2000/svg"
-      width="64"
-      height="64"
     >
       <path
         d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
@@ -33,8 +34,6 @@ function toggleClick() {
 
 <style scoped>
 .hamburger {
-  display: inline-block;
-  vertical-align: middle;
   width: 20px;
   height: 20px;
 }

src/components/LangSelect/index.vue

@@ -24,7 +24,7 @@ function handleLanguageChange(lang: string) {
     trigger="click"
     @command="handleLanguageChange"
   >
-    <div class="lang-select__icon">
+    <div class="cursor-pointer w-[40px] h-[50px] leading-[50px] text-center">
       <svg-icon class-name="international-icon" icon-class="language" />
     </div>
     <template #dropdown>
@@ -42,9 +42,3 @@ function handleLanguageChange(lang: string) {
     </template>
   </el-dropdown>
 </template>
-
-<style lang="scss" scoped>
-.lang-select__icon {
-  line-height: 50px;
-}
-</style>

src/components/Screenfull/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="cursor-pointer w-[40px] h-[50px] leading-[50px] text-center">
     <svg-icon
       :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
       @click="toggle"

src/components/SizeSelect/index.vue

@@ -21,7 +21,7 @@ function handleSizeChange(size: string) {
 
 <template>
   <el-dropdown trigger="click" @command="handleSizeChange">
-    <div style="line-height: 50px">
+    <div class="cursor-pointerw-[40px] h-[50px] leading-[50px] text-center">
       <svg-icon icon-class="size" />
     </div>
     <template #dropdown>

src/components/SvgIcon/index.vue

@@ -34,7 +34,6 @@ const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
 
 <style scoped>
 .svg-icon {
-  vertical-align: -0.15em;
   overflow: hidden;
   fill: currentColor;
 }