mall-web-ssr/components/mobile/store/StoreDetail.vue

<template>
  <div class="store-detail mobile-content">
    <div class="lookjianjie" @click="activeType = 'detail'">简介<i class="iconfont icon-fanhui"></i></div>
    <div class="store-logo">
      <div class="store-logo-box">
        <img :src="store.logoUrl || '/images/component/default.png'"/>
        <i v-if="showIcon" class="iconfont icon-shoucang" :style="isFocus === 'true'?'color:#ff7800':'color: #ddd'" @click="collectStore"></i>
      </div>
      <!--<div class="store-switch-item">-->
        <!--<span :class="activeType=='product'?'mobile-switch-btn active':'mobile-switch-btn'" @click="activeType='product'">产品</span>-->
        <!--<span :class="activeType=='detail'?'mobile-switch-btn active':'mobile-switch-btn'" @click="activeType='detail'">介绍</span>-->
      <!--</div>-->
    </div>
    <modal-wrapper :showModal="activeType==='detail'" :title="'企业信息 | ' + store.storeName" @closeAction="activeType=''">
      <div class="store-info" >
        <div class="store-description">
          <h4>主营产品</h4>
          <p class="content" v-if="store.description">
            {{store.description}}
          </p>
          <div class="com-none-state" v-else>
            <p>抱歉，暂无主营产品信息</p>
          </div>
        </div>
        <div class="store-description">
          <h4>应用领域</h4>
          <p class="content" v-if="store.storeApplication">
            {{store.storeApplication}}
          </p>
          <div class="com-none-state" v-else>
            <p>抱歉，暂无应用领域信息</p>
          </div>
        </div>
        <div class="store-description">
          <h4>企业介绍</h4>
          <p class="content" v-if="store.enterprise.description">
            {{store.enterprise.description}}
          </p>
          <div class="com-none-state" v-else>
            <p>抱歉，暂无企业介绍</p>
          </div>
        </div>
        <div class="contact-info">
          <h4>联系我们</h4>
          <ul class="list-unstyled clearfix">
            <li>
              <div>电&nbsp;&nbsp;话：</div>
              <div v-if="store.enterprise.enTel"><a :href="'tel:' + store.enterprise.enTel" @click="clickTel = true" :class="{'click-tel': clickTel}">{{store.enterprise.enTel}}</a></div>
              <div v-else><span>-</span></div>
            </li>
            <li>
              <div>传&nbsp;&nbsp;真：</div>
              <div v-if="store.enterprise.enFax"> {{store.enterprise.enFax}}</div>
              <div v-else><span>-</span></div>
            </li>
            <li>
              <div>手&nbsp;&nbsp;机：</div>
              <div v-if="store.enterprise.enPhone"> <a :href="'tel:' + store.enterprise.enPhone" @click="clickPhone = true" :class="{'click-phone': clickPhone}">{{store.enterprise.enPhone}}</a></div>
              <div v-else><span>-</span></div>
            </li>
            <li>
              <div>微&nbsp;&nbsp;信：</div>
              <div v-if="store.enterprise.enWeixin"> {{store.enterprise.enWeixin}}</div>
              <div v-else><span>-</span></div>
            </li>
            <li>
              <div>Q&nbsp;&nbsp;&nbsp;Q：</div>
              <div v-if="store.enterprise.enQQ"> {{store.enterprise.enQQ.trim()}}</div>
              <div v-else>-</div>
            </li>
            <!-- <li>
               <div>店铺地址：</div>
               <div v-if="store.enterprise.address">{{store.enterprise.address}}</div>
               <div v-else><span>-</span></div>
             </li>-->
          </ul>
        </div>
      </div>
    </modal-wrapper>

  <!--  <div class="com-none-state" v-if="activeType=='detail'">
      <img src="/images/mobile/@2x/empty-collect.png">
      <p>抱歉，暂无店铺简介</p>
      <nuxt-link to="/">返回首页</nuxt-link>
    </div>-->
    <div class="product-store">
      <div class="search-content">
        <input type="text" v-model="keyword" placeholder="品牌/物料名称(类目)/型号/规格" @keyup.13="search">
        <span @click="search" style="height:0.5rem;line-height:0.5rem;">
        <i class="iconfont icon-sousuo"></i>
        </span>
      </div>
      <div v-if="searchLists&&searchLists.length > 0">
        <div v-for="(item, index) in searchLists">
          <!--@click="goProductDetail(item)"-->
          <div class="middle">
            <div class="list">
              <div class="fl">
                <div class="name">品牌：</div>
                <div class="text">{{item.brandNameEn}}</div>
              </div>
              <div class="fl">
                <div class="name">交期(天)：</div>
                <div class="text" v-if="item.b2cMaxDelivery && (item.b2cMaxDelivery != item.b2cMinDelivery)" v-text="item.b2cMinDelivery + '-'+ item.b2cMaxDelivery"></div>
                <div class="text" v-if="item.b2cMaxDelivery && (item.b2cMaxDelivery == item.b2cMinDelivery)" v-text="item.b2cMinDelivery"></div>
              </div>
            </div>
            <div class="list">
              <div class="fl">
                <div class="name">物料名称(类目)：</div>
                <div class="text">{{item.kindNameCn || '-'}}</div>
              </div>
              <div class="fl">
                <div class="name">库存：</div>
                <div class="text">{{item.reserve || '-'}}</div>
              </div>
            </div>
            <div class="list">
              <div class="fl">
                <div class="name">型号：</div>
                <div class="text">{{item.code || '-'}}</div>
              </div>
              <div class="fl">
                <div class="name">起拍：</div>
                <div class="text">{{item.minBuyQty || '-'}}</div>
              </div>
            </div>
            <div class="list">
              <div class="fl">
                <div class="name">规格：</div>
                <div class="text">{{item.spec || '-'}}</div>
              </div>
              <div class="fl">
                <div class="name">包装：</div>
                <div class="text">{{item.packaging || '无包装信息'}}</div>
              </div>
            </div>
            <div class="list">
              <div class="fl" @click.stop="goAttach(item.attach)">
                <div class="name">规格书：</div>
                <div class="text">
                  <i class="iconfont icon-pdf" :class="{'active': item.attach && item.attach !== '' && item.attach !== '1'}"></i>
                </div>
              </div>
              <div class="fl">
                <div class="name">生产日期：</div>
                <div class="text" :title="item.produceDate">{{item.produceDate || '-'}}</div>
              </div>
            </div>
            <div class="list">
              <div class="name left">价格梯度<p>(pcs):</p></div>
              <div class="table left">
                <ul>
                  <li class="title">
                    <div>分段数量/PCS</div>
                    <div>分段单价</div>
                  </li>
                  <li v-for="price in item.prices">
                    <div>{{price.start}}+</div>
                    <div v-if="item.currencyName == 'RMB'">¥{{price.rMBPrice}}</div>
                    <div v-else>${{price.rMBPrice}}</div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="list clearfix">
              <div class="pull-left cancat" @click.stop="showStoreInfo = true">
                <i class="iconfont icon-kefu1"></i>联系卖家
              </div>
              <div class="pull-right clearfix">
                <div class="pull-left" @click="buy(item, false, $event)">加入购物车</div>
                <div class="pull-left" @click="buy(item, true, $event)">立即购买</div>
              </div>
            </div>
          </div>
          </div>
      </div>

      <empty-status :type="isSearch ? 'search' : 'collect'"
                    :text="isSearch ? `抱歉，暂无与“${remindKeyword}”匹配的产品信息`: '抱歉，暂无产品信息'"
                    :showLink="false"
                    v-else
      ></empty-status>
    </div>
    <!-- 联系卖买家 -->
    <div class="mobile-modal" v-if="showStoreInfo" @touchmove="preventTouchMove($event)">
      <div class="mobile-modal-box mobile-link-en">
        <div class="mobile-modal-header">联系方式<i @click="showStoreInfo = false" class="icon-guanbi iconfont"></i></div>
        <div class="mobile-modal-content">
          <div v-if="store.enterprise.enTel" class="clearfix"><span class="pull-left">电话：</span><a :href="'tel:' + store.enterprise.enTel" target="_blank" class="content-line link-url pull-left">{{store.enterprise.enTel}}</a></div>
          <div v-if="store.enterprise.enPhone" class="clearfix"><span class="pull-left">手机：</span><a :href="'tel:' + store.enterprise.enPhone" target="_blank" class="content-line link-url pull-left">{{store.enterprise.enPhone}}</a></div>
          <div v-if="store.enterprise.enWeixin" class="clearfix"><span class="pull-left">微信：</span><span class="content-line pull-left">{{store.enterprise.enWeixin}}</span></div>
          <div v-if="store.enterprise.enQQ" class="clearfix"><span class="pull-left">Q&nbsp;Q：</span><span class="content-line pull-left">{{store.enterprise.enQQ}}</span></div>
          <div v-if="!empty">暂无联系方式</div>
        </div>
      </div>
    </div>
    <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
    <login-box @onLoginBoxClose="showLoginBox = false" v-if="showLoginBox" :url="url"></login-box>
    <pull-up :searchMore="fetching" :allPage="allPage" :page="page" @pullUpAction="getMoreSearch"></pull-up>
  </div>
</template>
<script>
  import {RemindBox, LoginBox, PullUp, EmptyStatus} from '~components/mobile/common'
  import { ModalWrapper } from '~components/mobile/base'
  export default {
    data () {
      return {
        showStoreInfo: false,
        activeType: '',
        collectResult: '收藏成功',
        timeoutCount: 0,
        clickTel: false,
        clickPhone: false,
        searchLists: [],
        page: 1,
        count: 10,
        showLoginBox: false,
        isScrollOverTab: false,
        url: '',
        keyword: '',
        remindKeyword: '',
        isChange: false,
        isSearch: false
      }
    },
    components: {
      RemindBox,
      LoginBox,
      PullUp,
      EmptyStatus,
      ModalWrapper
    },
    filters: {
      currency: function (num) {
        if (typeof num === 'number') {
          if (num <= 0.000001) {
            num = 0.000001
          } else {
            if (num.toString().indexOf('.') === -1) {
              num += '.00'
            } else {
              let inputStr = num.toString()
              let arr = inputStr.split('.')
              let floatNum = arr[1]
              if (floatNum) {
                if (floatNum.length > 6) {
                  num = inputStr.substring(0, arr[0].length + 7)
                  if (Number(floatNum.charAt(6)) > 4) {
                    num = (Number(num) * 1000000 + 1) / 1000000
                  }
                } else if (floatNum.length === 1) {
                  num = num + '0'
                }
              }
            }
          }
        }
        return num
      }
    },
    created () {
      this.clickTel = false
      this.clickPhone = false
    },
    computed: {
      empty () {
        return this.checkInfo(this.store.enterprise.enTel) || this.checkInfo(this.store.enterprise.enPhone) || this.checkInfo(this.store.enterprise.enWeixin) || this.checkInfo(this.store.enterprise.enQQ)
      },
      store () {
        return this.$store.state.shop.storeInfo.store.data
      },
      commodities () {
        let list = this.$store.state.shop.storeInfo.storeCommodity.data
        if (this.isChange) {
          this.searchLists = []
          this.page = 1
          this.isChange = false
        } else {
          this.searchLists = [...this.searchLists, ...list.content]
          this.isSearchSearchingMore = false
        }
        return list
      },
      fetching () {
        return this.$store.state.shop.storeInfo.storeCommodity.fetching
      },
      allPage () {
        return this.commodities.totalPages
      },
      isFocus () {
        return this.$store.state.shop.storeInfo.focusList.data
      },
      user () {
        return this.$store.state.option.user
      },
      showIcon() {
        return this.store.uuid !== this.$store.state.option.storeStatus.data.uuid
      }
    },
    methods: {
      checkInfo: function (str) {
        return str && str.trim() !== ''
      },
      goAttach: function (url) {
        if (this.user.logged) {
          if (url && url !== '1') {
            window.open(url)
          } else {
            if (!url) {
              this.collectResult = '该产品暂无数据手册'
              this.timeoutCount++
            } else {
              this.collectResult = '数据手册地址错误'
              this.timeoutCount++
            }
          }
        } else {
          this.url = this.$route.fullPath
          this.showLoginBox = true
        }
      },
      scroll: function () {
        let tbodyObj = document.getElementById('product-body')
        let theadObj = document.getElementById('product-head')
        if (theadObj) {
          this.isScrollOverTab = tbodyObj.getBoundingClientRect().top - theadObj.getBoundingClientRect().height - 5 <= theadObj.getBoundingClientRect().height
        }
      },
      getMoreSearch: function () {
        this.page++
        this.pageCommodity({ page: this.page, count: this.count })
      },
      async pageCommodity (pageParams) {
        let params = { storeid: this.$route.params.uuid, origin: 'store', code: this.keyword }
        params.page = pageParams.page
        params.count = pageParams.count
        try {
          let { data } = await this.$http.get('/api/commodity/commodities', { params })
          this.$store.commit('shop/storeInfo/GET_STORE_COMMODITY_SUCCESS', data)
        } catch (err) {
          this.$store.commit('shop/storeInfo/GET_STORE_COMMODITY_FAILURE', err)
        }
      },
      goProductDetail: function (com) {
//        if (uuid) {
//          this.$router.push('/mobile/brand/componentDetail/' + uuid)
//        } else {
//          this.collectResult = '卖家上传的产品暂无参数，请联系卖家了解具体详情。'
//          this.timeoutCount ++
//        }
        if (com.batchCode) {
          this.$router.push('/mobile/product/' + com.batchCode)
        } else {
          this.collectResult = '产品参数错误'
          this.timeoutCount ++
        }
      },
      collectStore: function () {
        if (this.user.logged) {
          if (this.isFocus === 'false') {
            this.$store.dispatch('shop/StoreFocus', {storeName: this.store.storeName, storeid: this.store.id})
              .then(response => {
                this.$store.dispatch('shop/StoreFocusList', {id: this.store.id})
                this.collectResult = '关注成功'
                this.timeoutCount++
              })
          } else if (this.isFocus === 'true') {
            this.$http.post('/trade/storeFocus/delete/storeId', [this.store.id])
              .then(response => {
                this.$store.dispatch('shop/StoreFocusList', {id: this.store.id})
                this.collectResult = '取消成功'
                this.timeoutCount++
              })
          }
        } else {
          this.url = this.$route.fullPath
          this.showLoginBox = true
        }
      },
      setRemindText: function (str) {
        this.collectResult = str
        this.timeoutCount++
      },
      search: function () {
        this.page = 1
        this.isChange = true
        this.isSearch = true
        this.remindKeyword = this.keyword
        this.pageCommodity({ page: this.page, count: this.count })
      },
      buy: function (item, flag, e) {
        this.baseUtils.buyOrCar(flag, e, this, item, '/mobile/center/user/pay/')
      }
    }
  }
</script>
<style lang="scss" scoped>
  .mobile-header {
    border-bottom: 0px !important;
  }
  .mobile-modal .mobile-link-en-content {
    width: 7.04rem;
    margin-top: 0 !important;
    left: 0.2rem;
    background: #f7f7f7;
    top: 5% !important;
  }
  .store-detail {
    padding: 0 !important;;
    margin: 0.88rem auto 0rem;
    text-align: center;
    background: #f7f7f7;
    .store-logo {
      height: 3.27rem;
      width: 100%;
      display: inline-block;
      line-height: 2.13rem;
      background: #fff;
      text-align: center;
      background: url('/images/mobile/@2x/brand-bg2.png') no-repeat;
      background-size: cover;
      position: relative;
      .store-logo-box {
        border: .01rem solid #c7e5fd;
        border-radius: .1rem;
        height: 2.21rem;
        width: 3.73rem;
        margin: .5rem auto 0;
        background: #fff;
        position: relative;
        img {
          max-height: 2.1rem;
          max-width: 3.6rem;
        }
        >i {
          position: absolute;
          font-size: .4rem;
          background: #fff;
          width: .6rem;
          height: .6rem;
          line-height: .6rem;
          border-radius: 100%;
          box-shadow: 0 0 .05rem #aaa;
          right: -1.44rem;
          top: .75rem;
          text-align: center;
        }
      }
    }
    .store-switch-item {
      text-align: center;
      background: #fff;
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      height: 0.83rem;
      line-height: 0.83rem;
      border-bottom: 1px solid #ccc;
      .mobile-switch-btn {
        background: #fff;
        color: #666;
        display: inline-block;
        font-size: .34rem;
        width: 1.4rem;
        height: 0.79rem;
        line-height: 0.79rem;
        &:first-child {
          margin-right: 1.78rem;
        }
        &.active {
          color: #fc5708;
          border-bottom: .04rem solid #fc5708;
        }
      }
    }
    .store-info {
      background: #f7f7f7;
      h4{
        width: 100%;
        text-align: left;
        font-size: 0.3rem;
        line-height: 0.6rem;
        height: 0.6rem;
        letter-spacing: 0px;
        color: #333;
        font-weight: normal;
        border-bottom: 1px solid #efeded;
        padding-left: 0.11rem;
        &:before{
          content: '';
          display: inline-block;
          width: 0.08rem;
          height: 0.26rem;
          background-color: #145dee;
          margin-right: 0.13rem;
          position: relative;
          top: 0.02rem;
        }
      }
      .contact-info{
        background: #fff;
        margin: .2rem auto;
        border-radius: .1rem;
        ul{
          padding: 0.22rem 0rem;
          li{
            div{
              float: left;
              font-size: .28rem;
              color: #666;
              line-height: .53rem;
              width:80%;
              text-align: left;
              &:first-child{
                width: 20%;
                padding-left: 0.36rem;
                text-align: justify;
              }
              a{
                color: #145dee;
              }
              .click-tel, .click-phone{
                color: #f44336;
              }
            }
           /* &:last-child{
              div{
                width: 74%;
                padding-right:.34rem;
                word-wrap: break-word;
                &:first-child{
                  text-align: left;
                  padding: 0rem 0rem 0rem .36rem;
                  width: 26%;
                }
              }
            }*/
          }
        }
      }
      .store-description{
        background: #fff;
        width: 6.96rem;
        margin: 0 auto .2rem;
        border-radius: .1rem;
        .content {
          text-indent:2em;
          background: #fff;
          margin: .2rem auto 0;
          padding: .04rem .34rem .4rem .34rem;
          width: 100%;
          font-size: .28rem;
          color: #666;
          text-align: left;
          height: 95%;
          /*box-shadow: 0 .03rem .01rem 0 #cdcbcb96;*/
          line-height: .5rem;
          word-break: break-all;
        }
      }
    }
    .middle {
      .order-tag {
        display: inline-block;
        font-size: .18rem;
        color: #fff;
        font-weight: bold;
        background: #ee1717;
        height: .27rem;
        width: .27rem;
        line-height: .27rem;
        text-align: center;
        border-radius: .05rem;
        position: relative;
        top: -.05rem;
        margin-right: .05rem;
        &.reserve-tag {
          background: #07bb1c;
        }
      }
      text-align: left;
      padding: 0.24rem 0.24rem;
      background: #fff;
      margin: 0.24rem 0.24rem 0;
      border-radius: 5px;
      border: 1px solid #e3e5e8;
      .pms {
        color: #f57710;
        border: 1px solid #f57710;
        border-radius: 0.4rem;
        background: #fff;
        font-size: 0.24rem;
        height: 0.4rem;
        line-height: 0.4rem;
        width: 0.8rem;
        text-align: center;
      }
      .list {
        .left {
          float: left;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .textinfo {
          font-size: 0.18rem;
          margin-left: 0.1rem;
          display: inline-block;
          background: #3f84f6;
          color: #fff;
          font-weight: bold;
          border-radius: 3px;
          width: 0.8rem;
          height: 0.32rem;
          line-height: 0.32rem;
          text-align: center
        }
        .button {
          font-size: 0.3rem;
          color: #1a58dd;
          width: 0.92rem;
          height: 0.43rem;
          line-height: 0.43rem;
          text-align: center;
          border-radius: 5px;
          border:1px solid #1a58dd;
          display: inline-block;
          margin-right: 0.2rem;
        }
        margin-bottom: 0.18rem;
        &::after{
          clear: both;
          display: block;
          content: ' ';
          visibility: hidden;
          zoom: 1;
        }
        .fl {
          width: 3.2rem;
          float: left;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .fr {
          text-align: left;
          width: 2.6rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        &.list-long {
          .fl {
            width: 100% !important;
          }
        }
        .name {
          color: #666;
          font-size: 0.28rem;
          display: inline-block;
        }
        .text {
          display: inline-block;
          color: #333;
          font-size: 0.28rem
        }
        .table {
          width: 5.25rem;
          margin-bottom: 0;
          margin-top: 0;
          margin-left: 0.1rem;
          li {
            height: 0.43rem;
            line-height: 0.43rem;
            border-left: .01rem solid #c5c5c5;
            font-size: .28rem;
            &::after {
              clear: both;
              display: block;
              content: ' ';
              visibility: hidden;
              zoom: 1;
            }
            div {
              text-align: center;
              width: 50%;
              float: left;
              border-right: .01rem solid #c5c5c5;
              border-bottom: .01rem solid #c5c5c5;
            }
            &:nth-child(odd) {
              background: #ddd;
              color: #333;
              font-size: 0.28rem;
            }
            &:nth-child(even) {
              background: #fcfcfc;
              color: #333;
              font-size: 0.28rem;
            }
            &:nth-last-of-type(1){
              color: #f31919;
            }
            &.title {
              font-size: 0.28rem;
              color: #333;
            }
          }
        }
        .pull-right {
          div {
            color: #3f84f6;
            font-size: 0.28rem;
            border-radius: 0.07rem;
            border: 1px solid #3f84f6;
            background: #fff;
            width: 2rem;
            line-height: 0.54rem;
            height: 0.54rem;
            text-align: center;
          }
          div:last-child {
            margin-left: 0.2rem;
            color: #fff;
            background: #3f84f6;
          }
        }
        i {
          &.icon-pdf {
            color: #929292;
            font-size: 0.4rem;
          }
          &.active {
            color: #eb062b;
          }
        }
      }
    }
    .product-store {
      margin: .2rem 0 0 0;
      padding-bottom: 1.2rem;
      table {
        width: 100%;
        font-size: .28rem;
        thead {
          background: #d5e5fb;
          &.active {
            position: fixed;
            top: .88rem;
            z-index: 2;
          }
          tr {
            th {
              text-align: center;
              height: .98rem;
              line-height: normal;
              font-size: .26rem;
              font-weight: normal;
              color: #333;
            }
          }
        }
        tbody {
          tr {
            background: #fff;
            border-bottom: 0.2rem solid #f7f7f7;
            td {
              padding: .2rem .1rem;
              text-align: left;
              &.price-level-wrap {
                text-align: center;
              }
              div {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-bottom: .2rem;
                max-width: 1.58rem;
                &:last-child {
                  margin-bottom: 0;
                }
              }
              .price-level:last-child {
                color: #fc5708;
              }
              .price-number {
                display: inline-block;
                vertical-align: middle;
                margin-bottom: 0;
                width: .9rem;
              }
              .order-tag {
                display: inline-block;
                font-size: .18rem;
                color: #fff;
                font-weight: bold;
                background: #ee1717;
                height: .27rem;
                width: .27rem;
                line-height: .27rem;
                text-align: center;
                border-radius: .05rem;
                position: relative;
                top: -.05rem;
                margin-right: .05rem;
                &.reserve-tag {
                  background: #07bb1c;
                }
              }
            }
            &:active {
              background: #e1e1e1;
            }
          }
        }
      }
      .no-store {
        background: #fff;
        padding-top: 1rem;
        img {
          display: block;
          text-align: center;
          margin: 0 auto;
          margin-bottom: .45rem;
          width: 3.31rem;
          height: 2.13rem;
        }
        div {
          width: 5.27rem;
          margin: 0 auto;
          text-align: center;
          line-height: .4rem;
          color: #999;
          .link-url {
            color: #01a44e;
          }
        }
      }
    }
    .no-product {

      background: #fff;
      padding-top: 1rem;
      img {
        display: block;
        text-align: center;
        margin: 0 auto;
        margin-bottom: .45rem;
        width: 3.31rem;
        height: 2.13rem;
      }
      div {
        width: 5.27rem;
        margin: 0 auto;
        text-align: center;
        line-height: .4rem;
        font-size: .32rem;
        color: #999;
      }
    }
  }
  .com-none-state {
    background: #fff !important;
    padding: .3rem;
    margin: 0;
    p {
      margin: 0;
      font-size: .28rem;
    }
  }
  .search-content {
    padding: .07rem 0;
    input {
      width: 6.37rem;
      border: 1px solid #376ff3;
    }
  }
  .cancat {
    height: 0.56rem;
    line-height: 0.56rem;
    border: 1px solid #3f84f6;
    color: #3f84f6;
    font-size: 0.26rem;
    text-align: center;
    border-radius: 3px;
    padding: 0 0.1rem;
    overflow: hidden;
    width: auto;
    i {
      font-size: 0.26rem;
    }
  }
  .lookjianjie {
    position: fixed;
    top: 0;
    right: 0.4rem;
    font-size: 0.28rem;
    color: #fff;
    z-index: 11;
    line-height: 0.88rem;
    i {
      font-size: 0.28rem;
      color: #fff;
      transform: rotate(180deg);
      display: inline-block;
    }
  }
</style>