w-front-end / select_good · Files

<template>
<div>
  <!-- 搜索 -->
  <div class="search_box">
    <div class="search">
      <div class="left">
        供给
        <span @click="dropDownMenuShow=true" class="icon_triangle">
        </span>
        <!-- 下拉选项 -->
        <div v-show="dropDownMenuShow" @click="dropDownMenuShow=false"  class="drop_down_menu">
           <span class="up_triangle">
          </span>
          <div class="box">
            <div class="item">
              求购
            </div>
            <div class="item">
              供给
            </div>
          </div>
        </div>
      </div>
      <!--分割线 -->
      <div class="line"> </div>
      <!--搜索框-->
      <div class="right">
        <input  @focus="handleFocus"
                  @blur="handleblur"
                  placeholder="请输入货品关键字" 
                  type="text" />
      </div>
    </div>
    <div class="cancel">取消</div>
  </div>
  <!-- 分类 -->
  <div class="classification_box">
        <div class="item">
          品类
          <span class="icon_triangle">
          </span>
        </div>
         <!--分割线 -->
        <div class="line"> </div>
        <div class="item">
          供货期
          <span class="icon_triangle">
          </span>
        </div>
         <!--分割线 -->
        <div class="line"> </div>
        <div class="item">
          地区
          <span class="icon_triangle">
          </span>
        </div>
  </div>
  <!-- item -->
  <div class="item_box">
    <!-- 用户信息 -->
    <div class="user_info">
      <img class="pic" src="http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg" alt=""/>
      <div class="name">陕西省-张三-20100759</div>
    </div>
    <!-- 描述 -->
    <div class="desc">
      纯天然无污染无添加，一年取一次原生态放养土蜂蜜百花蜜纯天然无污染无添加
    </div>
    <!-- 图片库 -->
    <div class="img_box">
      <van-image
            class="img"
            fit="cover"
            lazy-load
            src="http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg"/>
       <van-image
            class="img"
            fit="cover"
            lazy-load
            src="http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg"/>
         <van-image
            class="img"
            fit="cover"
            lazy-load
            src="http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg"/>          
    </div>
    <!-- 地址信息 -->
    <div class="address_info">
      <div class="left">
           <img src="http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg" alt=""/>
           陕西省 西安市 西安区
      </div>
      <div class="right">
        2020-09-23
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  data(){
    return{
      dropDownMenuShow:false,
    }
  },
//部件
 components: {
 },
//静态
 props: [
],
//对象内部的属性监听，也叫深度监听
 watch: {
 },
//属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
 computed: { 
 },
//方法表示一个具体的操作，主要书写业务逻辑；
 methods: { 
       /* 使文本框出现在视野内 */
    // 键盘弹起
    handleFocus(event) {
      clearTimeout(this.timer);
    },
    // 键盘回落
    handleblur() {
      this.timer = setTimeout(() => {
        document.body.scrollTop = 0;
        window.pageXOffset = 0;
        document.documentElement.scrollTop = 0;
      }, 100);
    },
    // 安卓手机下弹起和收起
    androidkeyboardOn() {
      const innerHeight = window.innerHeight;
      window.addEventListener("resize", () => {
        const newInnerHeight = window.innerHeight;
        if (innerHeight > newInnerHeight) {
          this.androidKeyBoard = true;
        } else {
          this.androidKeyBoard = false;
        }
      });
    },
 },
//请求数据
 created() {
},
 mounted() {
}
}
</script>

<style scoped lang="less" rel="stylesheet/less">
.icon_triangle{
    display: block;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #4A4A4A;
    margin-left: 10px;
}
.search_box{
  display: flex;
  .search{
    width: 604px;
    height: 58px;
    background: #F9F9F9;
    border-radius: 32px;
    display: flex;
    margin: 20px 30px;
    .left{
      height: 37px;
      font-size: 26px;
      font-weight: 400;
      color: #333333;
      line-height: 37px;
      margin:11px 10px 11px 30px;
      display: flex;
      align-items: center;
      position: relative;
      .drop_down_menu{
        position: absolute;
        top: 50px;
        left: -36px;
        .up_triangle{
          display: block;
          width: 0;
          height: 0;
          border-left: 12px solid transparent;
          border-right: 12px solid transparent;
          border-bottom: 12px solid rgba(0, 0, 0, 0.5);
          margin-left: 40px;
        }
        .box{
          width: 160px;
          height: 160px;          
          background: rgba(0, 0, 0, 0.5);
          border-radius: 18px;
          .item{
            height: 40px;
            font-size: 28px;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 40px;
            padding: 20px 0;
            text-align: center;
          }
          .item:first-child{
            margin: 0 20px;
            border-bottom: solid 4px #999999;
          }
        }
      }
    }
    .line{
      width: 1px;
      height: 22px;
      background-color: #858585;
      margin: 18px 20px 18px 15px;
    }
    .right{
      flex: 1;
      input{
        width: 100%;
        line-height: 58px;
        outline-style: none;
        border:0;
        border-radius: 32px;
        background: #F9F9F9;
        font-weight: 400;
        color: #333;
        font-weight: 400;
        font-size: 26px;
      }
    }
  }
  .cancel{
    height: 58px;
    line-height: 58px;
    font-size: 28px;
    font-weight: 400;
    color: #F5A623;
    margin: 20px 30px 20px 0;
  }
}
.classification_box{
  display: flex;
  align-items: center;
  .item{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .line{
    width: 1px;
    height: 24px;
    background-color: #DCDCDC;
  }
}
// 页面信息
.item_box{
  margin: 20px;
  padding: 30px 20px 20px 20px;
  background-color: #fff;
  border-radius: 16px;
  .user_info{
    display:flex;
    .pic{
      display:block;
      width:80px;
      height:80px;
      border-radius: 50%;
      margin-right: 90px;
    }
    .name{
      flex: 1;
      height: 80px;
      font-size: 30px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 80px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
  }
  .desc{
  height: 74px;
  font-size: 26px;
  font-weight: 400;
  color: #666660;
  line-height: 37px;
  margin-top: 30px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  }
  .img_box{
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style: none;
    .img{
      padding: 5px;
      flex:1
    }
  }
  .address_info{
    margin-top:30px;
    font-size:24px;
    font-weight: 300;
    color: #9A9A9A;
    line-height: 33px;
    .left{
      display:flex;
      align-items: center;
      float:left;
      img{
        display:block;
        width:22px;
        height:22px;
        margin-right: 10px;
      }
    }
    .right{
      float:right;
    }
  }
}
</style>