ddw1e

pages/home/index.js

@@ -150,7 +150,7 @@ Page({
     activeIndex: 0,
     sfData:{},
     sfListLength: 0,
-    article:{},
+    articles:[],
     articlesLength: 0
   },
 
@@ -181,15 +181,18 @@ Page({
       }
     })
 
-    const res2 = await request('patient/articles', 'get', { title: '', page: 1, page_size: 10 });
+    const res2 = await request('patient/articles', 'get', { title: '', page: 1, page_size: 2 });
     // Convert rich text content to plain text
     const plainTextContent = this.stripHtml(res2.list[0].content);
+    const articleList = res2.list.map(item => {
+      return {
+        ...item,
+        contentText: this.stripHtml(item.content)
+      }
+    })
     this.setData({
       articlesLength: res2.total,
-      article: {
+      articles: articleList
-        ...res2.list[0],
-        contentText: plainTextContent
-      }
     })
   },
 
@@ -241,8 +244,9 @@ Page({
       url: '/pages/articleList/index',
     })
   },
-  async toArticleDelit(){
+  async toArticleDelit(e){
-    await wx.setStorageSync('article',JSON.stringify(this.data.article));
+    const index = e.currentTarget.dataset.index;
+    await wx.setStorageSync('article',JSON.stringify(this.data.articles[index]));
     wx.navigateTo({
       url: '/pages/article/index',
     })

pages/home/index.less

@@ -6,7 +6,7 @@
   height: calc(100vh - @tab-bar-height);
   padding-top: 160rpx;
   position: relative;
-  image{
+  .home-top-bg{
     width: 100%;
     height: auto;
     position: absolute;
@@ -14,34 +14,51 @@
     left: 0;
     z-index: 0;
   }
+  
   .home-content {
     // height: calc(100% - @nav-bar-height);
     padding: 30rpx;
     position: relative;
     z-index: 1;
-    .item-content {
+    .item-title-img{
-      background-color: #fff;
+      height: 36rpx;
-      border-radius: 12rpx;
+      // width: auto;
-      padding: 30rpx;
+    }
-      margin-bottom: 30rpx;
+    .item-title-img-2{
-
+      height: 96rpx;
-      .item-title {
+      position: relative;
-        font-size: 32rpx;
+      left: -24rpx;
-        font-weight: bold;
+      margin-top: -28rpx;
-        color: #323030;
+    }
-        image{
+    .item-title {
+      font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
+      font-weight: normal;
+      font-size: 36rpx;
+      color: var(--td-text-color);
+      line-height: 36rpx;
+      font-style: normal;
+      text-transform: none;
+      margin-bottom: 28rpx;
+      .item-title-icon{
           vertical-align: middle;
           width: 36rpx;
           height: 36rpx;
-          margin-right: 10rpx;
+          margin-right: 20rpx;
-        }
+          position: relative;
-      }
+          top: -4rpx;
-      .item-title-icon{
+          left: 20rpx;
-        vertical-align: middle;
-          width: 36rpx;
-          height: 36rpx;
-          margin-right: 10rpx;
       }
+      
+      
+    }
+    .item-content {
+      background-color: #fff;
+      border-radius: 24rpx;
+      padding: 30rpx;
+      margin-bottom: 30rpx;
+
+      
+      
       .echarts-canvas-container {
         width: 100%;
         height: 600rpx;
@@ -79,13 +96,20 @@
           position: absolute;
           right: 0;
           top: 0;
-          color: #0091cc;
+          color: #606266;
-          font-size: 24rpx;
+          font-size: 26rpx;
         }
       }
-
+      .item-content-1-bg{
+        position: absolute;
+        z-index: 0;
+        right: 0;
+        top: 0;
+        width: 240rpx;
+        height: 240rpx;
+      }
       .item-box {
-        background-color: #f5f5f5;
+        background-color: #fff;
         border-radius: 12rpx;
         padding: 26rpx;
         margin-top: 20rpx;
@@ -109,8 +133,8 @@
         }
 
         .drug-name {
-          font-size: 30rpx;
+          font-size: 32rpx;
-          color: #323030;
+          color: var(--td-text-color);
           margin-bottom: 8rpx;
         }
 
@@ -121,12 +145,13 @@
         }
 
         .follow-up-itme {
-          font-size: 24rpx;
+          font-size: 28rpx;
+          color: #909399;
         }
 
         .follow-itme-ed {
-          color: #0091cc;
+          color: #00B095;
-          font-size: 30rpx;
+          font-size: 32rpx;
           position: absolute;
           right: 30rpx;
           top: 50%;
@@ -134,21 +159,50 @@
         }
 
         .article-content {
-          margin-top: 10rpx;
+          margin-top: 20rpx;
-          font-size: 26rpx;
+          font-size: 28rpx;
-          line-height: 36rpx;
+          color: #606266;
+          line-height: 44rpx;
           display: -webkit-box;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 3;
           overflow: hidden;
           word-break: break-word;
+          
         }
 
       }
 
     }
+    .item-content-3{
+      padding-left: 0;
+      padding-right: 0;
+      background-color: transparent;
+      .item-box{
+        // background-color: transparent;
+        box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(178,178,178,0.05);
+        border-radius: 24rpx;   
+      }
+      .item-title-icon{
+        margin-right: 18rpx;
+      }
+    }
   }
-
+  .item-content-1{
+    background: linear-gradient( 180deg, #EDF3F8 0%, #F7FAFC 100%);
+    box-shadow: 0rpx 2rpx 20rpx 0rpx #EDF3F8;
+    border-radius: 24rpx;
+    border: 2rpx solid #FFFFFF;
+    position: relative;
+  }
+  .item-content-2{
+    background: linear-gradient( 180deg, #E7F2F2 0%, #F7FCFC 100%);
+    box-shadow: 0rpx 2rpx 20rpx 0rpx #E9F4F3;
+    border-radius: 24rpx;
+    border: 2rpx solid #FFFFFF;
+    position: relative;
+  }
+  
 
 }
 

pages/home/index.wxml

@@ -3,7 +3,7 @@
   <image class="home-top-bg" mode="widthFix" src="../../assets/images/home/top-bg.png" />
   <view class="home-content">
     <view class="item-title">
-      <image class="item-title-icon" src="../../assets/images/home/icon_1.svg" />
+      <image class="item-title-icon" src="../../assets/images/home/icon_1.svg"></image>
       宝宝成长曲线</view>
     <view class="item-content">
       <view class="echarts-legend">
@@ -19,8 +19,10 @@
         <ec-canvas wx:else id="mychart-dom-bar" canvas-id="mychart-bar2" ec="{{ ec2 }}"></ec-canvas>
       </view>
     </view>
-    <view class="item-content">
+    <view class="item-content item-content-1">
-      <view class="item-title">每日用药提醒
+      <image class="item-content-1-bg" src="../../assets/images/home/img_1.png" mode="widthFix"></image>
+      <view class="item-title">
+        <image class="item-title-img" src="../../assets/images/home/img_title_1.png" mode="heightFix"></image>
           <view class="item-title-right-text" bindtap="toClockIn">
             更多
           </view>
@@ -47,9 +49,10 @@
         <t-button theme="primary" block>打卡</t-button>
       </view>
     </view>
-    <view class="item-content" wx:if="{{sfListLength > 0}}">
+    <view class="item-content item-content-2" wx:if="{{sfListLength > 0}}">
-      <view class="item-title">随访提醒
+      <image class="item-content-1-bg" src="../../assets/images/home/img_2.png" mode="widthFix"></image>
-          
+      <view class="item-title">
+        <image class="item-title-img-2" src="../../assets/images/home/img_title_2.png" mode="heightFix"></image>
       </view>
       <view class="item-box">
         <view class="drug-name">
@@ -62,18 +65,19 @@
         <text class="follow-itme-ed">{{sfData.daysUntilPlan}}天后</text>
       </view>
     </view>
-    <view class="item-content" wx:if="articlesLength > 0">
+    <view class="item-content item-content-3" wx:if="articlesLength > 0">
-      <view class="item-title">健康推送
+      <view class="item-title">
+        <image class="item-title-icon" src="../../assets/images/home/icon_2.png"></image> 健康推送
         <view class="item-title-right-text" bind:tap="toArticle">
             更多
           </view>
       </view>
-      <view class="item-box" bind:tap="toArticleDelit">
+      <view class="item-box" wx:for="{{articles}}" wx:key="index" bind:tap="toArticleDelit" data-index="{{index}}">
         <view class="drug-name">
-          {{article.title}}
+          {{item.title}}
         </view>
         <view class="article-content">
-          {{article.contentText}}
+          {{item.contentText}}
         </view>
       </view>
     </view>