搜索

components/navBar/navBar.wxml

@@ -15,7 +15,8 @@
         </view> -->
         <view class='nav-title'>
            <view class="input-box row">
-               <input placeholder="请输入板块代码" bindtap="search" />
+               <!-- <input placeholder="请输入板块代码" bindtap="search" /> -->
+               <input placeholder="请输入板块代码" bindtap="search" disabled="true" />
                <icon class="weui-icon-search_in-box" type="search" size="20"></icon>
             </view>
             <!-- <input placeholder="请输入板块代码" style='{{textStyle}}'/> -->

components/navBar/navBar.wxss

@@ -31,7 +31,7 @@
     left: 30%;
     top: 50%;
     font-size: 0;
-    /* font-weight: bold; */
+    font-weight: bold;
     width: 60%;
 }
 .input-box {

pages/index/index.wxml

@@ -2,6 +2,7 @@
 <!-- <view>
   <component-tag-name inner-text="Some text"></component-tag-name>
 </view> -->
+
 <navBar></navBar>
 <view class="container">
   <view class="swiper-tab">

pages/news/news.wxml

@@ -1,14 +1,14 @@
 <!--pages/news/news.wxml-->
 <view class="news-detail-container">
-  <!-- <image class="head-img" src="../{{ currentNews.image }}"></image> -->
    <text class="title">{{ currentNews.title }}</text>
    <view class="author-time">
     <!-- <image class="author-avatar" src="../{{currentNews.icon}}"></image> -->
     <text class="author-name">{{ currentNews.author }}</text>
-    <!-- <text class="const-text">发表于</text> -->
+    <text class="const-text">发表于</text>
     <text class="time">{{ currentNews.time }}</text>
   </view>
-  <view class="horizon"></view>
+  <image class="head-img" src="../{{ currentNews.image }}"></image>
+  <!-- <view class="horizon"></view> -->
   <view class="tool">
     <!-- <view class="circle-img">
       <image src="../../../image/sch.png" ></image> 

pages/news/news.wxss

@@ -6,13 +6,15 @@
 }
 
 .head-img{
-  width: 100%;
+  width: 90%;
+  margin:0 auto
 }
 
 .author-time{
   flex-direction: row;
   margin-left: 30rpx;
   margin-top: 20rpx;
+  margin-bottom: 20rpx;
 }
 
 .author-avatar{
@@ -44,7 +46,8 @@
 }
 
 .title{
-  margin-left: 40rpx;
+  margin-left: 10rpx;
+  margin-right: 10rpx;
   font-size: 36rpx;
   font-weight: 700;
   margin-top: 30rpx;
@@ -55,7 +58,10 @@
 
 .tool{
   margin-top: 20rpx;
-  margin-left: 10rpx;
+  margin-bottom: 30rpx;
+  padding-left: 20rpx;
+  padding-right: 6rpx;
+  
 }
 
 .circle-img{
@@ -87,8 +93,8 @@
 .detail{
   /* color:#666; */
   margin-top: 20rpx;
-  margin-right: 30rpx;
-  margin-left: 30rpx;
+  /* margin-right: 20rpx; */
+  /* margin-left: 30rpx; */
   /* margin-bottom: 50rpx; */
   line-height: 44rpx;
   letter-spacing: 2px;

pages/search/search.js

@@ -5,7 +5,9 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    list: [],
+    inputValue: null,
+    resultList:[]
   },
 
   /**

pages/search/search.json

@@ -1,4 +1,5 @@
 {
   "navigationBarTitleText": "搜索",
   "usingComponents": {}
-}
+}
+

pages/search/search.wxml

@@ -1,2 +1,42 @@
 <!--pages/search/search.wxml-->
-<text>pages/search/search.wxml</text>
+<view class='container2'>
+  <view  class='search_input'>
+    <icon type="search" size="15" class='search_icon' />
+    <input placeholder='请输入板块代码' placeholder-class="search_placeholder" value="{{inputValue}}" bindinput="blur"></input>
+    <!-- <image src='../images/del.png' class='cancle_btn' wx:if="{{inputValue}}" bindtap='clean'></image> -->
+    <image src='./images/del.png' class='cancle_btn' bindtap='clean'></image>
+  </view>
+  <view class='flex space_between align_center search_title'>
+     <view>
+        搜索记录
+     </view>
+     <!-- <image src='../images/delete.png' wx:if="{{list.length!=0}}"  catchtap='remove'></image> -->
+     <image src='./images/delete.png'  catchtap='remove'></image>
+  </view>
+
+  <view class='list'>
+     <view class="key" wx:if="{{list.length==0}}">暂无搜索记录</view>
+     <!-- <view class="key" wx:for="{{list}}" wx:key="" bindtap='searchName' data-value='{{item}}'>{{item}}</view> -->
+  </view>
+  <view style="clear:both"></view>
+   <view  class='search_result' wx:if="{{inputValue}}">
+       <!-- <view wx:for="{{resultList}}" wx:key="" bindtap='detail' data-id='{{item.projectCode}}'>
+          {{item.projectName}}
+       </view> -->
+        <view class='no_more' wx:if="{{resultList.length==0}}">暂无相关内容</view>
+  </view>
+  <view class="flex space_between align_center search_title">
+     <view>
+        热门搜索
+     </view>
+  </view>
+  <view class='list'>
+      <view class="key">中国移动</view>
+      <view class="key">中国联通</view>
+      <view class="key">中国电信</view>
+  </view>
+
+</view>
+  
+
+

pages/search/search.wxss

@@ -1 +1,134 @@
-/* pages/search/search.wxss */
+/* pages/news/search.wxss */
+.key{
+  width:auto;
+  height:48rpx;
+  line-height: 48rpx;
+  background:rgba(246,246,246,1);
+  border-radius:30rpx;
+  padding: 5rpx 30rpx;
+  font-weight:300;
+  color: #4A4A4A;
+  float:left;
+  margin-right: 10rpx;
+  margin-bottom: 30rpx;
+  margin-left: 10rpx;
+}
+
+.list{
+  padding-left: 10rpx;
+}
+
+.search_title{
+   margin: 40rpx 20rpx 40rpx 30rpx;
+}
+.search_title image{
+    width: 48rpx;
+    height: 48rpx;
+}
+
+.search_result{
+  position:fixed;
+  left:0;
+  right:0;
+  top:80rpx;
+  bottom:0;
+  background:#ffffff;
+  font-size: 26rpx;
+  overflow: scroll;
+  padding-bottom: 30rpx;
+}
+
+.search_result>view{
+  width: 690rpx;
+  border-bottom:1rpx solid rgba(239,239,239,1);
+  margin: auto;
+  padding:30rpx 0;
+  color: #070707;
+  font-weight:400;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.search_result>view:nth-last-child(1){
+   border-bottom: none;
+}
+
+.cancle_btn{
+  position: absolute;
+  right: 40rpx;
+  top:15rpx;
+  width: 48rpx;
+  height: 48rpx;
+  z-index: 999;
+}
+
+.search_input {
+  width: 620rpx;
+  height: 72rpx;
+  background: rgba(247, 247, 247, 1);
+  border-radius: 36rpx;
+  padding-left: 80rpx;
+  margin:20rpx auto;
+  font-size: 24rpx;
+}
+
+.search_input input{
+  line-height:72rpx;
+  height:72rpx;
+  width:500rpx;
+}
+
+.search_icon {
+  position: absolute;
+  left: 60rpx;
+  top: 43rpx;
+}
+
+.search_placeholder {
+  /* color: #cacaca; */
+}
+
+.cancle_btn{
+  position: absolute;
+  right: 40rpx;
+  top:30rpx;
+  width: 48rpx;
+  height: 48rpx;
+  z-index: 999;
+}
+
+.container2 {
+  padding: 0 0 50rpx;
+  font-size: 29rpx;
+  overflow: scroll;
+}
+
+.no_more {
+  text-align: center;
+  font-weight: 400;
+  color: rgba(107, 107, 107, 1);
+  margin-bottom: 30rpx;
+}
+
+
+.flex {
+  display: flex;
+  color: #ffffff;
+}
+
+.space_between {
+  justify-content: space-between;
+}
+
+.space_around {
+  justify-content: space-around;
+}
+
+.align_center {
+  align-items: center;
+}
+.hot_search{
+  margin: 10rpx 20rpx 40rpx 30rpx;
+  color: #ffffff;
+}