report

manifest.json

@@ -59,7 +59,7 @@
             "postcss" : true
         },
         "usingComponents" : true,
-        "requiredBackgroundModes": ["audio"]
+        "requiredBackgroundModes" : [ "audio" ]
     },
     "mp-alipay" : {
         "usingComponents" : true

pages-report/reportList.vue

@@ -0,0 +1,74 @@
+<template>
+  <view class="report-list-page">
+        <van-sticky style="background: #fff">
+            <view class="flex search-wrap">
+                <van-search
+                    shape="round"
+                    :value="searchVal"
+                    placeholder="图表名称搜索"
+                    @change="searchValChange"
+                    @search="onSearch"
+                    @clear="onClearSearch"
+                    clear-trigger="always"
+                    style="flex:1"
+                />
+                <view class="filter-box">
+                    <image src="./static/filter-icon.png" mode="aspectFill"></image>
+                    <text>筛选</text>
+                </view>
+            </view>
+        </van-sticky>
+        <view class="list-wrap">
+            <view class="global-list-card flex list-item" v-for="item in 10" :key="item">
+                <image class="img" src="" mode="aspectFill"/>
+                <view class="content">
+                    <view class="title">【第1期|FICC|橡胶双周报】人民币在博弈的逻辑</view>
+                </view>
+            </view>
+        </view>
+  </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+<style>
+.van-search{
+    padding: 0 !important;
+}
+</style>
+<style lang="scss" scoped>
+.search-wrap {
+    background-color: #fff;
+    padding: 30rpx 34rpx;
+    align-items: center;
+    .filter-box{
+        image{
+            width: 48rpx;
+            height: 48rpx;
+            vertical-align: middle;
+        }
+        text{
+            vertical-align: middle;
+        }
+    }
+}
+.list-wrap{
+    padding: 34rpx;
+    .list-item{
+        padding: 20rpx;
+        margin-bottom: 40rpx;
+        .img{
+            width: 200rpx;
+            height: 260rpx;
+            display: block;
+            flex-shrink: 0;
+            margin-right: 30rpx;
+            background-color: #f5f5f5;
+        }
+    }
+}
+
+</style>

pages-report/specialColumn/detail.vue

@@ -0,0 +1,69 @@
+<template>
+  <view class="special-column-info-page">
+      <view class="top-box">
+          <view class="title">标题</view>
+          <view class="name">分析师：王沛</view>
+          <view class="time">最近更新：2021.11.22</view>
+      </view>
+      <view class="content-wrap">
+            <van-tabs :active="tabActive" color="#D5AD79" title-active-color="#D5AD79" @change="onChange">
+                <van-tab title="专栏介绍" name="intro">
+                    <view class="intro-box">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.
+                    </view>
+                </van-tab>
+                <van-tab title="报告目录" name="list">
+                    <view class="list-box">
+                        <view class="global-list-card list-item">
+                            <view class="name">【第15期|FICC】债股日评</view>
+                            <view class="desc">摘要：煤炭数据点评及地产思考</view>
+                            <view class="time">2021.11.22  18:00</view>
+                        </view>
+                    </view>
+                </van-tab>
+            </van-tabs>
+      </view>
+  </view>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            tabActive:'list'
+        }
+    },
+    methods: {
+        onChange(){}
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.special-column-info-page{
+    .top-box{
+        background-color: #f5f5f5;
+        height: 300rpx;
+        text-align: center;
+        .title{
+            font-size: 32rpx;
+            font-weight: bold;
+        }
+    }
+}
+.content-wrap{
+    .intro-box{
+        padding: 34rpx;
+        font-size: 28rpx;
+        line-height: 1.5;
+    }
+    .list-box{
+        padding: 34rpx;
+        .list-item{
+            padding: 20rpx;
+        }
+    }
+}
+</style>

pages-report/specialColumn/list.vue

@@ -0,0 +1,20 @@
+<template>
+  <view class="special-column-list-page">
+    <view class="global-list-card"></view>
+  </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.special-column-list-page{
+  padding: 34rpx;
+  .global-list-card{
+    padding: 20rpx;
+  }
+}
+</style>

pages.json

@@ -153,6 +153,18 @@
 					"style":{
 						"navigationBarTitleText": ""
 					}
+				},
+				// 专栏列表
+				{
+					"path": "specialColumn/list"
+				},
+				// 专栏详情
+				{
+					"path": "specialColumn/detail"
+				},
+				// 报告列表
+				{
+					"path": "reportList"
 				}
 			]
 		}

pages/report/report.vue

@@ -2,7 +2,7 @@
   <view class="report-page">
     <van-sticky style="background: #fff">
     <!-- 导航 -->
-    <view class="nav-bar-wrap" :style="{height:navBarStyle.height,paddingTop:navBarStyle.paddingTop}">
+    <view class="nav-bar-wrap" :style="{height:navBarStyle.height,paddingTop:navBarStyle.paddingTop,paddingBottom:navBarStyle.paddingBottom}">
       <view class="content">
         <van-icon custom-class="search-icon" name="search" size="24px" @click="goSearch" />
         <view class="text">FICC研报</view>
@@ -34,12 +34,15 @@
         <view class="time">{{item.time}}</view>
         <view class="content-list">
           <view class="content-item" v-for="citem in item.list" :key="citem">
-            <view class="c-time">{{citem.time}}</view>
-            <view class="title">{{citem.title}}</view>
-            <view class="van-multi-ellipsis--l3 desc">{{citem.desc}}</view>
-            <view class="tags">
-              <van-tag style="margin-right:5px" color="#D5AD79" type="primary" v-for="tag in citem.tags">{{tag}}</van-tag>
+            <view class="content-box">
+              <view class="c-time">{{citem.time}}</view>
+              <view class="title">{{citem.title}}</view>
+              <view class="van-multi-ellipsis--l3 desc">{{citem.desc}}</view>
+              <view class="tags">
+                <van-tag style="margin-right:5px" color="#D5AD79" type="primary" v-for="tag in citem.tags">{{tag}}</van-tag>
+              </view>
             </view>
+            
           </view>
         </view>
       </view>
@@ -53,7 +56,8 @@ export default {
     return {
       navBarStyle:{
         height:60+'px',
-        paddingTop:40+'px'
+        paddingTop:40+'px',
+        paddingBottom:'4px'
       },
       
       list:[
@@ -104,15 +108,12 @@ export default {
   },
   methods: {
     initNavBar(){
-      uni.getSystemInfo({
-        success: (result) => {
-          this.navBarStyle={
-            height:(result.statusBarHeight+result.safeArea.top)+'px',
-            paddingTop:result.safeArea.top+'px'
-          }
-        },
-        fail: (error) => {}
-      })
+      let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+      this.navBarStyle={
+        height:(menuButtonInfo.height+menuButtonInfo.top+8)+'px',
+        paddingTop:(menuButtonInfo.top-4)+'px',
+        paddingBottom:'4px'
+      }
     },
 
     // 跳转分类
@@ -214,9 +215,12 @@ export default {
     margin-bottom: 40rpx;
   }
   .content-list{
-    .content-item{
-      padding: 20rpx 0 20rpx 20rpx;
+    .content-box{
       border-bottom: 1px solid $global-border-color;
+      padding: 0 20rpx 20rpx 20rpx;
+    }
+    .content-item{
+      padding:0 20rpx;
       border-left: 1px solid $global-border-color;
       position: relative;
       &:last-child{