mall-web-ssr/components/mobile/applyPurchase/PublishSeek.vue

<template>
  <div class="mobile-modal" v-if="showSayPriceBox">
    <div class="mobile-modal-box">
      <div class="mobile-modal-header">发布求购<i class="icon-guanbi iconfont" @click="cancel"></i></div>
      <div class="publish-seek">
        <div class="content-line">
          <span><i>*</i>型号：</span>
          <input type="text" placeholder="请勿填中文符号">
        </div>
        <div class="content-line">
          <span><i>*</i>品牌：</span>
          <input type="text" placeholder="请勿填中文符号">
        </div>
        <div class="content-line">
          <span><i>*</i>截止日期：</span>
          <input type="text" placeholder="请勿填中文符号">
        </div>
        <div class="content-line">
          <span>币种：</span>
          <a href="">RMB </a>
          <ul>
            <li>不限</li>
            <li>RMB</li>
            <li>USD</li>
          </ul>
        </div>
        <div class="content-line">
          <span>数量：</span>
          <input type="text">
        </div>
        <div class="content-line">
          <span>规格：</span>
          <input type="text">
        </div>
        <a>确认发布</a>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: ['showSayPriceBox'],
    methods: {
      cancel: function () {
        this.$emit('cancelAction')
      }
    }
  }
</script>
<style lang="scss" scoped>
  .mobile-modal {
    .mobile-modal-box {
      .publish-seek {
        background: #fff;
        padding-top: .1rem;
        padding-bottom: .4rem;
        .content-line {
          height: .8rem;
          line-height: .8rem;
          font-size: .26rem;
          text-align: left;
          border-bottom: .01rem solid #b7d5fe;
          position: relative;
          input {
            width: 3.49rem;
            height: .52rem;
            padding-left: .19rem;
            border: .01rem solid #7e7e7e;
          }
          > span {
            display: inline-block;
            width: 1.76rem;
            text-align: right;
            i {
              color: #ff0000;
              margin-right: .05rem;
              font-style: normal;
            }
          }
          > a {
            font-size: .26rem;
            color: #666;
          }
          > ul {
            position: absolute;
            top: .6rem;
            left: 1.16rem;
            z-index: 1;
            width: 1.75rem;
            background: #fff;
            text-align: center;
            border-radius: .1rem;
            border: .01rem solid #dfdfdf;
            -webkit-box-shadow: 0 0 .12rem .02rem #e2d9d975;
            -moz-box-shadow:  0 0 .12rem .02rem #e2d9d975;
            box-shadow:  0 0 .12rem .02rem #e2d9d975;
            li {
              height: .52rem;
              line-height: .52rem;
              border-bottom: .01rem solid #dfdfdf;
              &:hover, &:active {
                background: #dedede;
              }
            }
          }
        }
        > a {
          display: block;
          width: 5.19rem;
          height: .84rem;
          text-align: center;
          line-height: .84rem;
          font-size: .38rem;
          margin: .3rem auto 0;
          background: #3f84f6;
          color: #fff;
          border-radius: .08rem;
        }
      }
    }
  }
</style>