Browse Source

详情页推荐资讯功能完成

Jing 8 hours ago
parent
commit
b35ab41a07
3 changed files with 100 additions and 2 deletions
  1. 63 0
      assets/css/detail.less
  2. 18 0
      pages/[dir]/[dir]/[id].vue
  3. 19 2
      pages/[dir]/[id].vue

+ 63 - 0
assets/css/detail.less

@@ -165,6 +165,69 @@
                     line-height: 30px;
                 }
             }
+
+            .recommendRead {
+                width: 790px;
+                margin: 30px 0px;
+
+                .recommendReadTitle {
+                    width: 100px;
+                    height: 40px;
+                    line-height: 40px;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: 400;
+                    margin: 20px 0;
+                    font-size: 20px;
+                    color: #333333;
+                    position: relative;
+
+                    em {
+                        display: inline-block;
+                        width: 8px;
+                        height: 8px;
+                        border-radius: 4px;
+                        background-color: #a01c0e;
+                        position: absolute;
+                        top: 6px;
+                        right: 8px;
+                    }
+                }
+
+                .recommendReadList {
+                    min-height: 155px;
+                    margin-top: 30px;
+                    padding-bottom: 10px;
+                    font-size: 20px;
+                    border-bottom: 1px solid #D9D9D9;
+
+                    .recommendReadListTitle {
+                        margin-top: 25px;
+                        width: 790px;
+                        color: #333333;
+
+                        a {
+                            color: #333333;
+                        }
+
+                        span {
+                            float: right;
+                        }
+                    }
+
+                    .recommendReadListTitle:hover a {
+                        color: #a01c0e;
+                    }
+
+                    .recommendReadListTitle:nth-child(1)::after {
+                        content: "热";
+                        margin-left: 13px;
+                        background: #FF8A37;
+                        color: #fff;
+                        font-size: 14px;
+                        padding: 0px 2px;
+                    }
+                }
+            }
         }
 
         .innerRight {

+ 18 - 0
pages/[dir]/[dir]/[id].vue

@@ -112,6 +112,22 @@
                     </div>
                     <!-- 投票 end ---------------------------------------->
                 </div>
+                <!-- 推荐阅读 -->
+                <div class="recommendRead" v-if="newsDetail.commendArticle != false">
+                    <div class="recommendReadTitle">
+                        推荐阅读
+                        <em></em>
+                    </div>
+                    <div class="recommendReadList">
+                        <div class="recommendReadListTitle" v-for="(item, index) in newsDetail.commendArticle"
+                            :key="item.id">
+                            <a :href="`/${item.alias_pinyin}/${item.id}.html`" v-if="index < 3">
+                                {{ item.title }}
+                            </a>
+                            <span  v-if="index < 3">{{ getTime(item.created_at,"month",1) }}</span>
+                        </div>
+                    </div>
+                </div>
             </div>
             <div class="innerRight">
                 <!-- 热点资讯1 -->
@@ -218,6 +234,8 @@ async function getPageData() {
             'articleid': articleId
         },
     });
+    console.log("资讯详情", mkdata)
+
     if (mkdata.code == 200) {
         //判断是否显示投票
         if (mkdata.data.is_survey == 1) {

+ 19 - 2
pages/[dir]/[id].vue

@@ -15,7 +15,7 @@
                     <NuxtLink to="/">首页</NuxtLink>
                 </el-breadcrumb-item>
                 <el-breadcrumb-item>
-                    <NuxtLink :to="`/${parent_pinyin}/index.html`">
+                    <NuxtLink :to="`/${targetSegment}/index.html`">
                         {{ routLevelTitle }}
                     </NuxtLink>
                 </el-breadcrumb-item>
@@ -111,6 +111,22 @@
                     </div>
                     <!-- 投票 end ---------------------------------------->
                 </div>
+                <!-- 推荐阅读 -->
+                <div class="recommendRead" v-if="newsDetail.commendArticle != false">
+                    <div class="recommendReadTitle">
+                        推荐阅读
+                        <em></em>
+                    </div>
+                    <div class="recommendReadList">
+                        <div class="recommendReadListTitle" v-for="(item, index) in newsDetail.commendArticle"
+                            :key="item.id">
+                            <a :href="`/${item.alias_pinyin}/${item.id}.html`" v-if="index < 3">
+                                {{ item.title }}
+                            </a>
+                            <span  v-if="index < 3">{{ getTime(item.created_at,"month",1) }}</span>
+                        </div>
+                    </div>
+                </div>
             </div>
             <div class="innerRight">
                 <!-- 热点资讯1 -->
@@ -196,7 +212,7 @@ let getParentNav = async () => {
     }
 }
 //获得父级栏目详情
-getParentNav();
+// getParentNav();
 //1.页面依赖 end ---------------------------------------->
 
 //2.页面数据 start ---------------------------------------->
@@ -218,6 +234,7 @@ async function getPageData() {
             'articleid': articleId
         },
     });
+    console.log("资讯详情", mkdata)
     if (mkdata.code == 200) {
         //判断是否显示投票
         if (mkdata.data.is_survey == 1) {