🌈 style(书籍详情页): 样式调整

hookehuyr
Commit fe45e12ca6b04ba129ec63e59f4220807653d3c5 fe45e12c 1 parent 881a068d
Showing 2 changed files with 31 additions and 24 deletions
.eslintrc.js
src/views/client/bookDetail.vue
--- a/.eslintrc.js
View file @fe45e12
+++ b/.eslintrc.js
View file @fe45e12
@@ -15,6 +15,7 @@ module.exports = {
       "multiline": {
         "max": 5
       }
-    }]
+    }],
+    "vue/singleline-html-element-content-newline": 0, // 在单行元素的内容之前和之后需要换行符
   }
 }
--- a/src/views/client/bookDetail.vue
View file @fe45e12
+++ b/src/views/client/bookDetail.vue
View file @fe45e12
 <template>
   <div class="book-detail-page content-bg">
-    <div class="modify-top"></div>
+    <div class="modify-top" />
-    <div style="height: 1.5rem;"></div>
+    <div style="height: 1.5rem;" />
     <div class="book-detail">
       <div style="text-align: center;">
         <van-image width="220" height="220" :src="bookInfo.cover" />
@@ -10,10 +10,12 @@
         <p class="book-post">{{ bookInfo.name }}</p>
         <div id="book-intro" :class="{ 'van-multi-ellipsis--l3': isToggle }">{{ bookInfo.note }}</div>
         <div v-if="hasToggle">
-          <div v-if="isToggle" @click="isToggle = false" class="book-toggle-icon">展开&nbsp;
+          <div v-if="isToggle" class="book-toggle-icon" @click="isToggle = false">
+            展开&nbsp;
             <van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_down" />
           </div>
-          <div v-else @click="isToggle = true" class="book-toggle-icon">折叠&nbsp;
+          <div v-else class="book-toggle-icon" @click="isToggle = true">
+            折叠&nbsp;
             <van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_up" />
           </div>
         </div>
@@ -37,12 +39,12 @@
         <div class="book-video-language">
           <van-row>
             <van-col span="6">
-              <div @click="toggleLanguage('mandarin')" :class="[checkMandarin ? 'checked' : 'uncheck']">普通话</div>
+              <div :class="[checkMandarin ? 'checked' : 'uncheck']" @click="toggleLanguage('mandarin')">普通话</div>
             </van-col>
             <van-col span="6">
-              <div @click="toggleLanguage('localism')" :class="[checkLocalism ? 'checked' : 'uncheck']">方言</div>
+              <div :class="[checkLocalism ? 'checked' : 'uncheck']" @click="toggleLanguage('localism')">方言</div>
             </van-col>
-            <van-col span="12" v-if="checkLocalism" @click="showPicker = true">
+            <van-col v-if="checkLocalism" span="12" @click="showPicker = true">
               <div class="choose-wrapper">
                 <div class="text">
                   &nbsp;{{ chooseLanguage.text }}
@@ -54,31 +56,35 @@
             </van-col>
           </van-row>
           <van-popup v-model:show="showPicker" round position="bottom">
-            <van-picker :columns="columns" :columns-field-names="{ text: 'text', value: 'val', children: 'children' }"
+            <van-picker 
-              @cancel="showPicker = false" @confirm="onConfirm" />
+              :columns="columns" :columns-field-names="{ text: 'text', value: 'val', children: 'children' }" @cancel="showPicker = false" @confirm="onConfirm"
+            />
           </van-popup>
         </div>
       </van-sticky>
       <div class="book-video-list">
-        <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''"
+        <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''" @load="onLoad">
-          @load="onLoad">
+          <template v-for="item in prod_list" :key="item">
-          <template v-for="item in prod_list" :key="item" style="height: 3rem;">
             <video-card :item="item">
               <template #bookDetailSub>
-                <div @click="goToDetail(item.id, item.book_id, item.type)"
+                <div
-                  style="color: #999999; padding: 0px 1rem 0.5rem;">{{ item.kg_name }} ｜ {{ item.localism_type }} </div>
+                  style="color: #999999; padding: 0px 1rem 0.5rem;"
+                  @click="goToDetail(item.id, item.book_id, item.type)"
+                >
+                  {{ item.kg_name }} ｜ {{ item.localism_type }}
+                </div>
               </template>
             </video-card>
           </template>
         </van-list>
       </div>
-      <div style="height: 2rem;"></div>
+      <div style="height: 2rem;" />
       <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无作品信息" />
     </div>
-    <div style="height: 6rem;"></div>
+    <div style="height: 6rem;" />
     <div class="book-bar">
-      <div @click="onSubscribe" class="text">
+      <div class="text" @click="onSubscribe">
         <template v-if="!bookInfo.is_subscribe">
           <van-icon :name="icon_subscribed" size="1.25rem" style="margin: 0 auto;" />
           <span style="font-size: 0.85rem;">订阅</span>
@@ -89,23 +95,23 @@
         </template>
       </div>
       <div class="button">
-        <my-button @on-click="uploadVideo" type="primary">上传作品</my-button>
+        <my-button type="primary" @on-click="uploadVideo">上传作品</my-button>
       </div>
       <div class="button">
-        <my-button @on-click="toDonate" type="plain">爱心捐书</my-button>
+        <my-button type="plain" @on-click="toDonate">爱心捐书</my-button>
       </div>
     </div>
-    <shortcut-fixed type="C" :item="shortcutItem"></shortcut-fixed>
+    <shortcut-fixed type="C" :item="shortcutItem" />
   </div>
   <!-- 上传时，如果没有默认儿童提示弹框, 如果没有实名认证提示弹框 -->
   <notice-overlay :show="showNotice" :text="noticeText" @on-submit="onSubmit" @on-close="onClose">
     <div style="color: #333333;">
-      <div v-html="noticeHtml"></div>
+      <div v-html="noticeHtml" />
     </div>
   </notice-overlay>
-  <donate-book :showPopup="showDonate" :item="userInfo" @on-close="closeDonate"></donate-book>
+  <donate-book :show-popup="showDonate" :item="userInfo" @on-close="closeDonate" />
   <van-overlay :show="show" z-index="9999">
     <div class="wrapper" @click.stop>
@@ -117,7 +123,7 @@
 <script setup>
 import { ref, onActivated, nextTick } from 'vue'
 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
-import { Cookies, $, _, storeToRefs, mainStore, Toast, hasEllipsis } from '@/utils/generatePackage'
+import { Cookies, _, storeToRefs, mainStore, Toast, hasEllipsis } from '@/utils/generatePackage'
 import { MyButton, VideoCard, NoticeOverlay, DonateBook, ShortcutFixed } from '@/utils/generateModules'
 import { icon_video, icon_up, icon_down, icon_subscribed, icon_unsubscribe, no_image } from '@/utils/generateIcons'
 import { JSJ_FORM_C } from '@/constant'