瀏覽代碼

💄 修改页面左右盒子细节问题,增加文章转自

快乐的梦鱼 3 周之前
父節點
當前提交
09841f7269

+ 9 - 4
src/components/parts/LeftRightBox.vue

@@ -2,7 +2,7 @@
   <div class="main-box main-left-right-box row">
     <div class="col col-12 col-lg-6 col-md-6">
       <template v-if="left">
-        <Carousel v-if="rightItems && rightItems.length > 0" v-bind="carousel2Config" class="carousel-light">
+        <Carousel v-if="rightItems && rightItems.length > 0" v-bind="carousel2Config" class="carousel-light h-100">
           <Slide 
             v-for="(item, index) in rightItems"
             :key="index"
@@ -20,7 +20,7 @@
             <Pagination />
           </template>
         </Carousel>
-        <img v-else :src="image" alt="image" @click="emit('moreClick')" />
+        <img v-else :src="image" alt="image" class="h-100" @click="emit('moreClick')" />
       </template>
       <TitleDescBlock 
         v-else 
@@ -43,7 +43,7 @@
         @moreClick="emit('moreClick')"
       />
       <template v-else>
-        <Carousel v-if="rightItems && rightItems.length > 0" v-bind="carousel2Config" class="carousel-light">
+        <Carousel v-if="rightItems && rightItems.length > 0" v-bind="carousel2Config" class="carousel-light h-100">
           <Slide 
             v-for="(item, index) in rightItems"
             :key="index"
@@ -60,7 +60,7 @@
             <Pagination />
           </template> 
         </Carousel>
-        <img v-else :src="image" alt="image" @click="emit('moreClick')" />
+        <img v-else :src="image" alt="image" class="h-100" @click="emit('moreClick')" />
       </template>
     </div>
   </div>
@@ -131,9 +131,14 @@ const emit = defineEmits([
   }
   img {
     max-width: 100%;
+    object-fit: cover;
   }
   .TitleDescBlock {
     padding: 25px;
   }
+  .ImageTitleBlock {
+    height: 100%;
+    min-height: 250px;
+  }
 }
 </style>

+ 7 - 4
src/components/parts/TitleDescBlock.vue

@@ -2,7 +2,7 @@
   <div class="TitleDescBlock">
     <h3>{{ title }}</h3>
     <span v-if="date" class="time">{{ date }}</span>
-    <p :class="expand?'expand':''" v-html="desc"></p>
+    <p :class="expand?'expand':'no-expand'" v-html="desc"></p>
     <slot name="addon" />
 
     <div class="footer">
@@ -79,11 +79,9 @@ const emit = defineEmits([
   .time {
     margin-bottom: 16px;
   }
-  p {
+  > p {
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    -webkit-line-clamp: 5;
-    line-clamp: 5;
     margin: 0;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -92,6 +90,11 @@ const emit = defineEmits([
       -webkit-line-clamp: 100;
       line-clamp: 100;
     }
+    &.no-expand {
+      -webkit-line-clamp: 5;
+      line-clamp: 5;
+      max-height: 300px; 
+    }
   }
 
   .footer {

+ 2 - 2
src/views/AboutView.vue

@@ -42,7 +42,7 @@
     <section v-if="mainTabActive == 0" class="main-section main-background main-background-type0">
       <div class="content">   
         <SimplePageContentLoader :loader="introdLoader">
-          <div class="d-flex justify-content-center mt-5">
+          <div class="d-flex justify-content-center">
             <h2>闽南文化生态保护区(厦门市)基本情况</h2>
           </div>
           <LeftRightBox 
@@ -54,7 +54,7 @@
             @rightItemDefaultClick="(item) => navTo('/news/detail', { id: item.id })"
             @moreClick="navTo('/introduction/about')"
           />
-          <div class="d-flex justify-content-center ">
+          <div class="d-flex justify-content-center mt-5">
             <h2>全国文化生态保护区基本情况</h2>
           </div>
           <LeftRightBox 

+ 1 - 0
src/views/NewsDetailView.vue

@@ -15,6 +15,7 @@
 
           <h1>{{ newsLoader.content.value.title }}</h1>
           <div class="d-flex flex-row justify-content-center">
+            <span v-if="newsLoader.content.value.from" class="small-info">转自:{{ newsLoader.content.value.from }}</span>
             <span class="small-info">时间:{{ DateUtils.formatDate(newsLoader.content.value.publishAt, DateUtils.FormatStrings.YearCommonShort) }}</span>
           </div>
    

+ 5 - 2
src/views/NewsView.vue

@@ -41,7 +41,7 @@
         </div>
       </div>
       <!-- 头部TAB -->
-      <div class="main-header-tab">
+      <!-- <div class="main-header-tab">
         <div class="list">
           <div 
             v-for="(tab, k) in mainTabs"
@@ -52,7 +52,7 @@
             {{ tab.title }}
           </div>
         </div>
-      </div>
+      </div> -->
     </section>
 
     <!-- 新闻 -->
@@ -150,6 +150,9 @@ const newsLoader = useSimplePagerDataLoader(10, async (page, pageSize) => {
   };
 });
 
+watch(mainTabActive, () => {
+  newsLoader.loadData(undefined, true);
+});
 watch(searchRegion, () => {
   newsLoader.loadData(undefined, true);
 });

+ 3 - 2
src/views/details/TabDetailView.vue

@@ -15,8 +15,9 @@
           </div>
 
           <h1>{{ loader.content.value.title }}</h1>
-          <p class="small-info">
-            {{ loader.content.value.address }} 
+          <p class="d-flex flex-row justify-content-between small-info">
+            <span>{{ loader.content.value.address }}</span>
+            <span v-if="loader.content.value.from" >转自:{{ loader.content.value.from }}</span>
           </p>
 
           <!-- Tab -->