Merge branch 'main' of github.com:MarleneJiang/ByteDream-JueJin

IdeaLeap · Feb 3, 2023 · 0470467 · 0470467
2 parents 3bb4309 + 5e7da4d
commit 0470467
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 45 deletions.
diff --git a/frontend/components/ArticlesContent/SideBar/Left.vue b/frontend/components/ArticlesContent/SideBar/Left.vue
@@ -1,11 +1,7 @@
 <script setup lang="ts">
 defineProps({
-  commented: {
-    type: Number,
-  },
-  liked: {
-    type: Number,
-  },
+  commented: Number,
+  liked: Number,
 })
 const { immerseState, immerseToggle } = useImmerse()
 </script>
@@ -124,64 +120,36 @@ const { immerseState, immerseToggle } = useImmerse()
     <div v-show="!immerseState" class="panel-btn">
       <svg class="sprite-icon icon-report"><use xlink:href="#icon-report" /></svg>
     </div>
-    <span>
-      <span class="byte-tooltip__wrapper"><div class="panel-btn" :class="immerseState ? 'active tooltip block' : 'tooltip block'" @click="immerseToggle">
+    <span class="tooltip">
+      <span class="tooltiptext">沉浸阅读</span>
+      <span class="byte-tooltip__wrapper"><div class="panel-btn block" :class="immerseState ? 'active ' : ''" @click="immerseToggle">
         <svg class="sprite-icon icon-immerse"><use xlink:href="#icon-immerse" /></svg></div></span>
     </span>
   </div>
 </template>
 
 <style scoped>
 .article-suspended-panel {
-  position: fixed;
-  margin-left: -7rem;
-  top: 140px;
-  z-index: 2;
+  @apply fixed top-140px ml--7rem z-2;
 }
 .panel-btn.with-badge:after {
+  @apply absolute top-0 left-75% h-17px lh-17px px-5px rd-9px text-11px text-center whitespace-nowrap bg-#c2c8d1 text-#fff;
   content: attr(badge);
-  position: absolute;
-  top: 0;
-  left: 75%;
-  height: 17px;
-  line-height: 17px;
-  padding: 0 5px;
-  border-radius: 9px;
-  font-size: 11px;
-  text-align: center;
-  white-space: nowrap;
-  background-color: #c2c8d1;
-  color: #fff;
 }
 .panel-btn {
-  position: relative;
-  margin-bottom: 1.667rem;
-  width: 4rem;
-  height: 4rem;
-  background-color: #fff;
+  @apply relative mb-1.667rem w-4rem h-4rem bg-#fff bg-center bg-no-repeat rd-50%  cursor-pointer text-center text-size-1.67rem;
   background-position: 50%;
-  background-repeat: no-repeat;
-  border-radius: 50%;
   box-shadow: 0 2px 4px 0 rgb(0 0 0 / 4%);
-  cursor: pointer;
-  text-align: center;
-  font-size: 1.67rem;
 }
 .divider {
-  width: 32px;
-  background: #e4e6eb;
-  height: 1px;
-  margin: 0 auto 1.667rem;
+  @apply w-32px h-1px bg-#e4e6eb mx-auto mb-1.667rem;
 }
 .panel-btn .sprite-icon {
-  color: #8a919f;
-  height: 100%;
+  @apply c-#8a919f h-100%;
+  @apply hover:c-#515767;
 }
 .sprite-icon {
-  width: 1em;
-  height: 1em;
-  fill: currentColor;
-  vertical-align: middle;
+  @apply w-1em h-1em fill-current vertical-middle;
   transition: all 0.15s linear;
 }
 svg {
@@ -190,4 +158,21 @@ svg {
 .panel-btn:not(.share-btn).active .sprite-icon {
   color: #1e80ff;
 }
+.tooltip {
+  @apply relative inline-block;
+}
+.tooltip .tooltiptext {
+  @apply absolute z-1 bottom-113% ml--25% w-70px h-45px lh-45px  text-#fff text-center rd-6px opacity-0 invisible;
+  background-color: rgba(0, 0, 0, 0.8);
+  transition: visibility 0s linear 0.3s, opacity 0.3s linear;
+}
+.tooltip:hover .tooltiptext {
+  @apply opacity-100 visible;
+  transition-delay: 0.3s;
+}
+.tooltiptext::after {
+  @apply absolute top-100% left-50%  ml--5px b-5px  border-solid;
+  content: '';
+  border-color: black transparent transparent transparent;
+}
 </style>
diff --git a/frontend/components/ArticlesContent/SideBar/Right/index.vue b/frontend/components/ArticlesContent/SideBar/Right/index.vue
@@ -2,7 +2,7 @@
 const props = defineProps({
   content: String,
   author: Object,
-  column: Array,
+  column: Object,
 })
 const { immerseState } = useImmerse()
 </script>