静态页面

project.config.json

@@ -5,22 +5,25 @@
 	"appid": "wx75ce0dc4b59e0458",
 	"setting": {
 		"urlCheck": false,
+		"scopeDataCheck": false,
+		"coverView": true,
 		"es6": false,
-		"enhance": false,
 		"postcss": false,
+		"compileHotReLoad": false,
 		"preloadBackgroundData": false,
 		"minified": false,
+		"autoAudits": false,
 		"newFeature": false,
-		"coverView": true,
+		"uglifyFileName": false,
+		"uploadWithSourceMap": true,
+		"useIsolateContext": true,
 		"nodeModules": false,
-		"autoAudits": false,
+		"enhance": false,
+		"useCompilerModule": false,
+		"userConfirmedUseCompilerModuleSwitch": false,
 		"showShadowRootInWxmlPanel": true,
-		"scopeDataCheck": false,
-		"uglifyFileName": false,
 		"checkInvalidKey": true,
 		"checkSiteMap": true,
-		"uploadWithSourceMap": true,
-		"compileHotReLoad": false,
 		"useMultiFrameRuntime": true,
 		"useApiHook": true,
 		"useApiHostProcess": false,
@@ -31,9 +34,6 @@
 		},
 		"enableEngineNative": false,
 		"bundle": false,
-		"useIsolateContext": true,
-		"useCompilerModule": false,
-		"userConfirmedUseCompilerModuleSwitch": false,
 		"userConfirmedBundleSwitch": false,
 		"packNpmManually": false,
 		"packNpmRelationList": [],

src/pages/Index/BookDetail/index.vue

@@ -8,6 +8,10 @@
 
             <!-- 封面内容 -->
             <view class="FrontInfo">
+              <view class="Like" @tap="TriggerSave">
+                <text class="iconfont iconshoucang1" :class="{'active': ArticleInfo.isSaved}"></text>
+                <!-- <text>收藏</text> -->
+              </view>
               <view class="Img">
                 <view>
                   <image mode="aspectFit" :src="ArticleInfo.poster" class="centerLabel"></image>
@@ -17,14 +21,14 @@
                 <view class="Tag">
                   <text class="iconfont iconbiaoqian"></text>
                   <text>分类：</text>
-                  <text v-for="(item, index) in (ArticleInfo.tags || [])" :key="index">{{item}}</text>
+                  <text class="active">{{ArticleInfo.typeName}}</text>
                 </view>
                 <view class="flex-h">
-                  <view class="flex-item flex-h">
+                  <view class="flex-item flex-h" style="flex: 3; -webkit-flex: 3;">
                     <text>名称：</text>
                     <text class="flex-item">{{ArticleInfo.name}}</text>
                   </view>
-                  <view class="flex-item flex-h">
+                  <view class="flex-item flex-h" style="flex: 1; -webkit-flex: 1;">
                     <text>阅读量：</text>
                     <text class="flex-item">{{ArticleInfo.answerNum}}</text>
                   </view>
@@ -40,7 +44,7 @@
                   </view>
                 </view>
                 <view class="Desc">
-                  <text>简介：{{ArticleInfo.summary}}</text>
+                  简介：<text>{{ArticleInfo.summary}}</text>
                 </view>
               </view>
 
@@ -61,7 +65,7 @@
         </view>
 
         <!-- 底部 -->
-        <view class="flex-h Bottom">
+        <!-- <view class="flex-h Bottom">
           <view class="Share" @tap="ShareArticle">
             <text class="iconfont iconfenxiang"></text>
             <text>分享</text>
@@ -74,16 +78,7 @@
           <view class="Answer">
             <navigator :url="`/pages/Index/BookAnswer/index?id=${ArticleInfo.postId}`" hover-class="none">去答题</navigator>
           </view>
-          <!-- <view class="ReadInfo">
-            <text>阅读时长：1小时22分钟22秒</text>
-            <view class="Progress flex-h">
-              <view class="flex-item">
-                <view :style="{width: '50%'}"></view>
-              </view>
-              <text>完成进度</text>
-            </view>
-          </view> -->
-        </view>
+        </view> -->
       </view>
     </MainPage>
   </view>

src/pages/Index/BookDetail/page.scss

@@ -17,8 +17,32 @@
       > .FrontInfo {
         position: relative;
         overflow: hidden;
+        > .Like {
+          display: inline-block;
+          position: absolute;
+          z-index: 2;
+          right: 30px;
+          top: 30px;
+          font-size: 0;
+          white-space: nowrap;
+          > text {
+            display: inline-block;
+            vertical-align: middle;
+            font-size: 28px;
+            color: #333;
+            &:first-child {
+              font-size: 48px;
+              color: #ccc;
+              &.active {
+                color: #f4c819;
+              }
+            }
+          }
+        }
         > .Img {
           padding: 30px 120px;
+          position: relative;
+          z-index: 1;
           > view {
             width: 100%;
             padding-bottom: 125%;
@@ -48,11 +72,20 @@
                 font-weight: normal;
                 font-size: 40px;
               }
+              &.active {
+                font-size: 24px;
+                line-height: 50px;
+                font-weight: normal;
+                background: #f4c819;
+                padding: 0 20px;
+                border-radius: 6px;
+              }
             }
           }
           > .flex-h {
             align-items: center;
             padding: 0 30px;
+            margin-top: 30px;
             > view {
               align-items: center;
               > text {
@@ -61,9 +94,12 @@
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
-                color: #999;
+                color: #333;
+                font-weight: bold;
                 &:first-child {
                   margin-right: 10px;
+                  color: #999;
+                  font-weight: normal;
                 }
               }
             }
@@ -72,12 +108,14 @@
             padding: 0 30px;
             position: relative;
             overflow: hidden;
+            margin-top: 30px;
+            font-size: 28px;
+            line-height: 60px;
+            color: #999;
             > text {
-              width: 100%;
-              display: block;
               font-size: 28px;
-              line-height: 40px;
-              color: #999;
+              line-height: 60px;
+              color: #333;
             }
           }
         }

src/pages/Index/index.vue

@@ -24,7 +24,7 @@
                   <view>
                     <swiper :indicator-dots="true" :autoplay="true" :interval="3000">
                       <swiper-item v-for="(item, index) in BannerList" :key="index">
-                        <view class="BannerItem">
+                        <view class="BannerItem" @tap="BannerClick(item)">
                           <image mode="aspectFill" :src="item.image" class="centerLabel"></image>
                         </view>
                       </swiper-item>
@@ -118,6 +118,11 @@ export default {
       'GetIndexHotList',
       'GetIndexNewestArticle'
     ]),
+    BannerClick (item) {
+      if (item.targetType === 'post') {
+        wx.navigateTo({ url: `/pages/Index/BookDetail/index?id=${item.targetId}` })
+      }
+    },
     UserInfoChange () {
       this.GetIndexBanner().then((res) => {
         this.BannerList = [...res.data.data]