fix: 标题移动端溢出问题

IdeaLeap · Feb 17, 2023 · 4122bcd · 4122bcd
1 parent 0b9c4dc
commit 4122bcd
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 21 deletions.
diff --git a/.github/workflows/autoDeploy.yaml b/.github/workflows/autoDeploy.yaml
@@ -45,4 +45,4 @@ jobs:
             pm2 delete cms # 删除旧的进程
             sed -i 's/\r//' start.sh # 将start.sh中的\r替换为空，解决换行符问题
             pm2 start start.sh --name cms # 启动新的进程
-            pm2 save # 保存配置
+            pm2 save # 保存配置
diff --git a/backend/.tmp/data.db b/backend/.tmp/data.db
diff --git a/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json b/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json
@@ -14,7 +14,7 @@
       "name": "Apache 2.0",
       "url": "https://www.apache.org/licenses/LICENSE-2.0.html"
     },
-    "x-generation-date": "2023-02-17T05:00:15.539Z"
+    "x-generation-date": "2023-02-14T15:56:25.705Z"
   },
   "x-strapi-config": {
     "path": "/documentation",

diff --git a/frontend/components/ArticlesList/Item/Ads.vue b/frontend/components/ArticlesList/Item/Ads.vue
@@ -4,7 +4,7 @@ const ad = inject<IArticleAd>('ads')
 </script>
 
 <template>
-  <li>
+  <li class="relative">
     <ArticlesListUiLink :to="ad?.url">
       <div class="flex-1 overflow-hidden">
         <ArticlesListItemBarTop

diff --git a/frontend/components/ArticlesList/Item/Bar/Top.vue b/frontend/components/ArticlesList/Item/Bar/Top.vue
@@ -10,7 +10,7 @@ const show = useState('authorCard', () => false)
 </script>
 
 <template>
-  <div class="topbar">
+  <div class="topbar" :class="!adId ? 'px-[1.67rem]' : ''">
     <div class="author">
       <span class="name" @mouseover="show = true">{{ adId ? adId : authorId?.name }}</span>
       <LazyArticlesListItemAuthorCard
@@ -34,7 +34,7 @@ const show = useState('authorCard', () => false)
 
 <style scoped>
 .topbar {
-  @apply flex items-center pr-4 text-[13px] leading-[22px]
+  @apply flex items-center pr-4 text-[13px] leading-[22px] pt-[1rem] all-cursor-pointer
 }
 .author {
   @apply transition text-jj-font-normal px-3 border-r-1 pl-0 hover:text-jj-brand-normal

diff --git a/frontend/components/ArticlesList/Item/index.vue b/frontend/components/ArticlesList/Item/index.vue
@@ -10,16 +10,16 @@ const hideHandler = (id: string) => {
 </script>
 
 <template>
-  <ul ref="parent" class="list-items">
+  <ul ref="parent">
     <ArticlesListItemAds />
-    <li v-for="art in artlist" :key="art.id">
+    <li v-for="art in artlist" :key="art.id" class="relative">
+      <ArticlesListItemBarTop
+        :author-id="art.authorId"
+        :duration="formatTime(art.createdAt)"
+        :tags="art.tagIds.data"
+      />
       <ArticlesListUiLink class="link" :to="`/article/${art.id}`">
         <div class="flex-1 truncate">
-          <ArticlesListItemBarTop
-            :author-id="art.authorId"
-            :duration="formatTime(art.createdAt)"
-            :tags="art.tagIds.data"
-          />
           <ArticlesListItemBarCenter :title="art.title" :summary="art.summary" />
           <ArticlesListItemBarBottom :viewed="art.viewed" :liked="art.liked" :commented="art.commented" />
         </div>
@@ -31,9 +31,6 @@ const hideHandler = (id: string) => {
 </template>
 
 <style scoped>
-.list-items{
-  position: inherit !important;
-}
 li:hover .icon {
   @apply block
 }

diff --git a/frontend/components/ArticlesList/Navigation/Select.vue b/frontend/components/ArticlesList/Navigation/Select.vue
@@ -10,7 +10,7 @@ const routeMap = {
 </script>
 
 <template>
-  <div class="select">
+  <div class="z-9 relative">
     <div class="drop-down">
       <div class="dropdown-toggle" @click="isShow = !isShow">
         {{ routeMap[String(route.query.sort)] }}
@@ -28,9 +28,6 @@ const routeMap = {
 </template>
 
 <style scoped>
-.select{
-  position: relative;
-}
 .drop-down {
   @apply absolute top-1/2 left-0 text-jj-gray-drop-normal min-w-[4rem] -translate-y-1/2
 }
@@ -44,7 +41,7 @@ const routeMap = {
 }
 .dropdown-menu {
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
-  @apply text-left bg-white border border-[#ebebeb] absolute box-border top-[105%] left-0 z-1 min-w-[7rem] text-[1rem] rounded-[0.17rem]
+  @apply text-left bg-white border border-[#ebebeb] absolute box-border top-[105%] left-0 z-1000 min-w-[7rem] text-[1rem] rounded-[0.17rem]
   @apply dark:(b-jj-gray-container-normal bg-jj_bg_gray)
 }
 .dropdown-menu li {

diff --git a/frontend/components/ArticlesList/Ui/Link.vue b/frontend/components/ArticlesList/Ui/Link.vue
@@ -10,7 +10,7 @@ defineProps<{ to: String }>()
 
 <style scoped>
 .link_container {
-  @apply transition flex-1 f-c-c transition-all all-cursor-pointer px-[1.67rem] pt-[1rem] pb-[10px] truncate
+  @apply transition flex-1 f-c-c transition-all all-cursor-pointer px-[1.67rem] pb-[10px] truncate
   @apply hover:bg-jj-hover
 }
 .link_container::after {