init

miniprogram/pages/search/search.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "搜索配方"
+}

miniprogram/pages/search/search.scss

@@ -0,0 +1,93 @@
+.operation-part{
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  .btn{
+    border: 1px solid red;
+    padding: 10px;
+    border-radius: 5px;
+    margin: 0 5px;
+    color: red;
+    font-size: 12px;
+  }
+  .star-btn{
+    border: 1px solid rgb(192, 21, 21);
+    color: rgb(192, 21, 21);
+  }
+  .question-btn{
+    padding:0 10px;
+    display:flex;
+    align-items: center;
+    border: 1px solid rgb(21, 144, 192);
+    color: rgb(21, 144, 192);
+    image{
+      width: 20px;
+    }
+  }
+}
+.introduce-part {
+  text-align: center;
+  .title{
+    font-family: 'iconfont';
+    text-transform: capitalize;
+    font-size: 35px;
+  }
+  .desc{
+    font-size: 12px;
+    margin-top: 10px;
+  }
+}
+.list-part{
+  width: 95% !important;
+  margin-top: 50px;
+  .lp-card{
+    display: flex;
+    padding: 10px;
+    align-items: baseline;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .lpc-name-box{
+      width:70%;
+      .lpc-name{
+        width: 100%;
+        font-family: 'iconfont';
+        text-transform: capitalize;
+        font-size: 20px;
+      }
+    }
+    .lpc-tag{
+      white-space: nowrap;
+      width:30%;
+      text-align: right;
+    }
+  }
+}
+.desc-part{
+  font-size: 12px;
+}
+.search-part{
+  width: 100%;
+  position: fixed;
+  top: 10px;
+  text-align: right;
+  box-sizing: border-box;
+  left: 0;
+  .search-box{
+    background-color: rgb(243, 243, 243);
+    width: 80%;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border-radius: 5px;
+    .search-icon{
+      width: 15px;
+    }
+    .search-input{
+      font-size: 12px;
+      width: 100%;
+      text-align: left;
+      padding-left: 10px;
+    }
+  }
+}

miniprogram/pages/search/search.ts

@@ -0,0 +1,79 @@
+// pages/search/search.ts
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    list:[
+      {
+        name:'the last word',
+        desc:'橙汁',
+        tag:'遗言',
+        id:1
+      },
+      {
+        name:'june bug',
+        tag:'六月虫',
+        desc:'青柠汁',
+        id:2
+      }
+    ]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

miniprogram/pages/search/search.wxml

@@ -0,0 +1,22 @@
+<view class="container" style="padding: 10px;">
+  <view class="search-part  c-part">
+    <view class="search-box">
+      <image class="search-icon" src="../../assets/search.png" mode="widthFix"/>
+      <input class="search-input" type="text"   placeholder="搜索鸡尾酒" />
+    </view>
+  </view>
+  <view class="list-part c-part" wx:if="{{list.length>0}}">
+    <view class="lp-card"  wx:for="{{list}}" wx:for-item="item" wx:key="id">
+      <view class="lpc-name-box">
+        <view class="lpc-name text-ellipsis-1" style="margin-bottom: 5px;"> {{item.name}}</view>
+        <view class="small-text text-ellipsis-1"> {{item.desc}}</view>
+      </view>
+      <view class="lpc-tag std-small-text text-ellipsis-1">
+        {{item.tag}}
+      </view>
+    </view>
+  </view>
+  <view wx:else="{{list.length<1}}">
+    暂无数据
+  </view>
+</view>