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="list_box">
    <item></item>
  </div>
</div>
</template>

<script>
  import item from "./item";
export default {
  data(){
    return{
      dropDownMenuShow:false,
    }
  },
//部件
 components: {
   item
 },
//静态
 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;
  padding-bottom: 20px;
  .item{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .line{
    width: 1px;
    height: 24px;
    background-color: #DCDCDC;
  }
}
// 页面信息
.list_box{
  padding: 20px 0;
  background-color: #F3F3F3;
    .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;
      overflow: hidden;
      .left{
        display:flex;
        align-items: center;
        float:left;
        img{
          display:block;
          width:22px;
          height:22px;
          margin-right: 10px;
        }
      }
      .right{
        float:right;
      }
    }
  }
}
</style>