nyx: 发现

1. 调整详情页的格式

增值产品-小程序及app/nyx-master/pages/discover/note-info/note-info.js

-// pages/index/note-info/note-info.js
+// pages/index/note-info/note-info.js
@@ -8,6 +8,7 @@ Page({
 
     windowHeight: "",
     windowWidth: "",
+    contentHeight: "",
     scrollLeft: 0, //切换栏的滚动条位置
     curIndex : 0,
     toView: 'tag1',
@@ -36,7 +37,15 @@ Page({
         proDec: "都要买",
         proPrice: "100",
       },
-    ]
+    ],
+    notes: 
+      {
+        note_image: "https://img.xiaohongshu.com/items/c1a0056ba9ba17b30446a0e040dc9e30@800w_90Q_1x_2o.jpg",
+        title: "便携香水加香一天",
+        writer: "无敌花木兰",
+        like: 10,
+        writer_image: "../../../icon/icon_avatar3.png"
+      },
   
   },
 
@@ -50,6 +59,7 @@ Page({
     this.setData({
       windowHeight: windowHeight,
       windowWidth: windowWidth,
+      contentHeight : windowHeight * 0.75 + 30,
     })
 
     wx.setNavigationBarTitle({

增值产品-小程序及app/nyx-master/pages/discover/note-info/note-info.wxml

-<view class="page">
+<view class="page">
 <view class="page">
-  <scroll-view class="scroll-view_H" scroll-x scroll-with-animation style="width: 100%;height:{{windowHeight}}px" bindscroll="getSelectItem" scroll-left="{{scrollLeft}}">
+  <!-- 作者信息 -->
+  <view class="note-handle">
+      <image class="writer-image" src="{{notes.writer_image}}"/>
+      <span class="name">{{notes.writer}}</span>
+  </view>
+  <!-- 图片 -->
+  <scroll-view class="scroll-view_H" scroll-x scroll-with-animation style="width: 100%;height:{{contentHeight}}px" bindscroll="getSelectItem" scroll-left="{{scrollLeft}}">
       <block wx:for="{{proList}}"  wx:key="unique" wx:for-index="id" wx:for-item="item">
         <view class="scroll_item {{item.selected ? 'selected' : ''}}" data-index='{{item.index}}' bindtap='selectProItem'>
-        <view class='proImg'><image src="{{item.proUrl}}" mode="widthFix"/></view>
-          <!-- <view class='detailBox'>
-              <view class='proTitle'>{{item.proTitle}}</view>
-              <view class='proDec'>{{item.proDec}}</view>
-              <view class='proPrice'>￥{{item.proPrice}}</view>
-              <navigator class='detailLink'  url="../detail/detail?id={{item.id}}">查看详情 ></navigator>
-          </view> -->
+          <image src="{{item.proUrl}}" mode="widthFix"/>
         </view>
       </block>
-    </scroll-view>
+  </scroll-view>
+  <!-- 文字内容 -->
+  <view class="note">
+    <view class="note-info">
+      在欧洲国家中，目前意大利的新冠肺炎疫情形势最为严峻。截至当地时间21日18时，意大利累计确诊病例达到53578例，累计死亡病例达4825例。旅意侨胞和留学生如何保证安全？回国还是不回国？大使馆能提供哪些帮助？今天下午（北京时间3月22日17时），中国驻意大利大使李军华同旅意侨胞、留学生代表一起在线交流。
+    </view>
+  </view>
 </view>

增值产品-小程序及app/nyx-master/pages/discover/note-info/note-info.wxss

-.scroll-view_H{
+.scroll-view_H{
 .scroll-view_H{
+    position: relative;
     width: 100%;
     text-align: center;
     white-space: nowrap;
@@ -11,11 +12,11 @@
   display: inline-block;
   border-radius: 20rpx !important ;
   overflow: hidden;
-  transform: scale(0.9);
-  box-shadow: 0 0 10px #ccc;
+  transform: scale(0.9, 1);
+  /* box-shadow: 0 0 10px #ccc; */
   vertical-align: top;
-  top: 5%;
-  height: 72%;
+  top: 2%;
+  /* height: 72%; */
   background-color: #fff;
  }
 .scroll_item:first-child{
@@ -27,56 +28,42 @@
      left: 0;
 }
 .scroll_item.selected{
-     transform: scale(0.9);
+     /* transform: scale(0.9); */
      border: solid 1px #ffcd54;
 }
-.scroll_item .proImg{
-    border-top-left-radius: 20rpx;
-    border-top-right-radius: 20rpx;
-    width: 100%;
-    max-height: 200rpx;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 0;
-}
 .scroll_item image {
     width: 100%;
     float: left;
+    margin-top: 0;
     border-top-left-radius: 20rpx;
     border-top-right-radius: 20rpx;
 }
-.detailBox {
-    padding: 30rpx 5% 30rpx 5%;
-    float: left;
-    width: 100%;
-    border-bottom-left-radius: 20rpx;
-    border-bottom-right-radius: 20rpx;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    z-index: 1;
-    background: #fff;
+.note{
+  width: 100%;
+  /* position: fixed; */
+  background: #fff;
+  border-radius: 5px;
+  float: left;
 }
-.proTitle {
-    font-size: 36rpx;
-    color: #666;
-    line-height: 50rpx;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+.note-info{
+  font-size: 13px;
+
+  /* 后期用于 '展开' 功能 */
+  /* overflow : hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical; */
+  margin-left: 10%;
+  margin-right: 10%;
+  margin-top: 20rpx;
 }
-.proDec {
-    font-size: 30rpx;
-    color: #999;
-    line-height: 50rpx;
+.note-handle{
+  display: flex;
+  flex-direction: row;
 }
-.proPrice {
-    font-size: 48rpx;
-    color: #CA414C;
-    line-height: 90rpx;
+.writer-image{
+  width: 30px;
+  height: 30px;
+  margin-left: 10%;
 }
-.detailLink{
-    color: #666;
-    font-size: 30rpx;
-}
\ No newline at end of file