position: fixed固定，及文字不换行

<template>
  <div style="background:white;">
    <div style="width: 100%;height:46px;background: white;" class="rec" v-if="topTabNav">
      <van-nav-bar class="debtDetailPage-top-bar"
                   title= "债转详情页"
                   left-arrow
                   @click-left="debtdetaiminelBack"
      />
    </div>
    <div style="background: #FAFAFA;width: 100%;height: 10px;"></div>

    <div style="width: 100%; height: 9rem; display: flex; align-items:center;">
      <img style="width: 5rem; height: 5rem; margin-left: 0.8rem;margin-right: 1.2rem;" :src="debtIcon"/>
      <div>
        <p style="color: #333333; font-size: 1.8rem; font-weight: 450; text-align: left;">{{debtPlatName}}</p>
        <p style="display: flex; margin-top: 0.8rem;">
          <span style="color: #2A2A2A; font-size: 1.5rem; line-height: 1.5rem;">
            <span style="color: #F74C4C;">¥{{debtPlatAccount}}</span>
            平台总收购
            <span style="width: 1px; height: 2.5rem; color: #DCDCDC; margin-left: 2px; margin-right: 2px; ">|</span>
            <span style="color: #F74C4C;">{{debtRateMin}}-{{debtRateMax}}</span>
            折购
          </span>
        </p>
      </div>
    </div>
    <div style="background: #FAFAFA;width: 100%;height: 10px;"></div>
    <p style="line-height: 65px;display: flex;align-items: center;width: 100%;" @click="turnAgreement">
      <span style="font-size: 17px;color: #333333;margin-left: 15px;width: 50%;text-align: left;">债转详情</span>
      <span style="font-size: 15px;color: #666666;margin-right: 1.5%;width: 50%;text-align: right;">债权转让及受让协议
      </span>
      <img src="https://lsdk.oss-cn-hangzhou.aliyuncs.com/webapp/rightarrow.png" style="height: 18px;margin-right: 15px;"/>
    </p>

    <div>
    <div>
      <p style="color: #999999;" class="debtdatilListp">
        <span style="width: 21%;text-align: left;margin-left: 15px;">申请时间</span>
        <span style="width: 17%;">用户</span>
        <span style="width: 25%;">债转本金(元)</span>
        <span style="width: 16%;">债转折扣</span>
        <span style="width: 21%;margin-left: 10px;">已提现(元)</span>
      </p>
    </div>
    <div v-for='(item, index) in usertradedataList'>
        <p style="color: #666666;" class="debtdatilListp">
          <span style="width: 21%;text-align: left;margin-left: 15px;">{{item.createDate}}</span>
          <span style="width: 17%;">{{item.trueName}}</span>
          <span style="width: 25%;">{{item.amount}}</span>
          <span style="width: 16%;">{{item.rate}}</span>
          <span style="width: 21%;margin-left: 10px;">{{item.cashedAmount}}</span>
        </p>
    </div>
    </div>
 position: fixed固定在底部不变，不会让上面的div内容往下
    <div style="position: fixed;bottom: 0;line-height: 100px;width: 100%;">
      <p style="background: #FAFAFA;height: 45px;line-height: 45px;text-align: right;color: #999999;bottom: 55px;font-size: 15px;">注：数据为最近一批次兑换情况 &nbsp;</p>
      <div v-if="hasLogin">
        <p style="width: 100%;display: flex;">
          <span class="debtdatilbottomleftBtn">&nbsp;&nbsp;&nbsp;我的原始债权本金：¥{{debtMyAccount}}</span>
          <span style="line-height: 55px;width: 28%;background-color: #0A87EB;color: white;font-size: 18px;" @click="turnOffer(1)">{{debtTextName}}</span>
        </p>
      </div>
      <div v-else>
        <div style="width: 100%;background-color: #0A87EB;font-size: 18px;color: white;line-height: 55px;height: 55px;" @click="turnOffer(2)">{{debtTextName}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Button, Tab, Tabs, NavBar, Dialog, Toast} from 'vant'
export default {
  name: 'debtDetailPage',
  components: {Button, Tab, Tabs, NavBar, Dialog},
  data () {
    return {
      topTabNav: true,
      hasLogin: true,
      usertradedataList: [],
      debtIcon: 'https://lsdk.oss-cn-hangzhou.aliyuncs.com/webapp/gh_zlogo.png',
      debtPlatName: '',
      debtPlatAccount: '',
      debtRateMax: 0,
      debtRateMin: 0,
      debtIconPDF: '',
      debtTextName: '去债转',
      debtTextType: '',
      debtMyAccount: '',
      debtCustomerId: ''
    }
  },
  methods: {
    debtdetaiminelBack: function () {
      history.back(-1)
    },
    turnAgreement: function () {
      console.log(this.debtIconPDF)
      this.$router.push({name: 'creditorcontract', query: {urlpath: this.debtIconPDF}})
    },
    turnOffer: function (num) {
      if (num == '2') {
        this.$router.push({name: 'confirmationPage1',
          query: {
            customerId: localStorage.getItem('masterId'),
            platformNameStr: this.$route.query.platformName,
            batchId: this.$route.query.batchId
          }})
        return
      }
      if (this.debtTextType == '0') {
        if (num == '1') {
          this.$router.push({name: 'zcxqQuote',
            query: {
              platformName: this.$route.query.platformName,
              batchId: this.$route.query.batchId
            }})
        } else {
          this.$router.push({name: 'confirmationPage1', query: {}})
        }
      }
    },
    // 进页面接口
    debtRequest: function () {
      this.postRequest('/buyback/api/assetstar/buyback/detail', {
        'platformName': this.$route.query.platformName,
        'customerId': localStorage.getItem('masterId')
      }).then(respond => {
        console.log(respond)
        if (respond.status === 200) {
          if (respond.data.code === 1000) {
            this.usertradedataList = respond.data.result.buyBackDetailVos
            this.debtIcon = respond.data.result.icon
            this.debtPlatName = respond.data.result.platformNameStr
            this.debtPlatAccount = respond.data.result.platformTotalBuyBackAmount
            this.debtRateMax = respond.data.result.rateMax
            this.debtRateMin = respond.data.result.rateMin
            this.debtIconPDF = respond.data.result.ossZhaocaimaoContractTemplatePath
            this.debtMyAccount = respond.data.result.balance
            for (var i = 0; i < this.usertradedataList.length; i++) {
              this.usertradedataList[i].createDate = this.timestampToTime(this.usertradedataList[i].createDate)
            }
          } else {
            console.log(respond.data.message)
          }
        }
      })
    },
    // 时间戳转换成时间
    timestampToTime (timestamp) {
      if (timestamp == '' || timestamp == null) {
        return ''
      }
      var date = new Date(timestamp) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' '
      var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':'
      var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes())
      return Y + M + D
    }
  },
  mounted () {
    var parm = this.$route.query
    this.debtTextType = parm.type
    this.debtCustomerId = parm.customerId
  
    this.debtRequest()
  }
}
</script>
<style lang="scss">
  .debtdatilListp{
    display: flex;
    justify-content: space-around;
    width: 100%;
    font-size: 13px;
    line-height: 33px;
    text-align: center;
文字不换行
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .debtdatilbottomleftBtn{
    line-height: 55px;
    width: 72%;
    height: 55px;
    background-color: #FFFFFF;
    color: #333333;
    font-size: 15px;
    text-align: left;
    flex: 1;
  }
  .debtDetailPage-top-bar{
    /*font-family: PingFangSC-Semibold;*/
    font-size: 17px;
    color: #030303;
    width: 100%;
    letter-spacing: -0.41px;
    text-align: center;
    position: fixed;top: 0;
    z-index: 99 !important;
  }
  .rec .van-nav-bar .van-icon {
    color: black;
    width: 12px;
    height: 28px;
    line-height: 28px;
    font-weight: bold;
  }

</style>