language

zzzz

2024-04-18 b46c7394ad29a9ac937b56b2605b347020f68695

 src/page/home/buy.vue

@@ -5,69 +5,101 @@
        <router-link :to="'/listdetail?code='+detail.code+'&stock_type='+detail.stockType" slot="left">
          <mt-button icon="back">详情</mt-button>
        </router-link> -->
        <!-- <mt-button icon="more" slot="right"></mt-button> -->
      <!-- </mt-header>
    <!-- <mt-button icon="more" slot="right"></mt-button> -->
    <!-- </mt-header>
    </div> -->

    <div class="box-tab">
      <div class="tab-title">
        <span class="circle"></span>股票详情
      </div>
      <div class="tab-title"><span class="circle"></span>股票详情</div>
      <div class="tab-con">
        <ul class="first clearfix">
          <li class="pull-left">
            {{detail.name}}
            {{ detail.name }}
          </li>
          <li :class="detail.hcrate < 0?'pull-left green':detail.hcrate == 0?'pull-left':'pull-left red'">
          <li
            :class="
              detail.hcrate < 0
                ? 'pull-left green'
                : detail.hcrate == 0
                ? 'pull-left'
                : 'pull-left red'
            "
          >
            当前价：
            <span>{{detail.nowPrice}}</span>
            <span>{{ detail.nowPrice }}</span>
          </li>
        </ul>
        <ul class="first clearfix">
          <li class="pull-left">
            {{detail.code}}
            {{ detail.code }}
            <!-- <span>(Scrb1905)</span> -->
          </li>
          <li :class="detail.hcrate < 0?'pull-left green':detail.hcrate == 0?'pull-left':'pull-left red'">
          <li
            :class="
              detail.hcrate < 0
                ? 'pull-left green'
                : detail.hcrate == 0
                ? 'pull-left'
                : 'pull-left red'
            "
          >
            <!-- 当前价： -->
            <span>{{detail.hcrate}}%</span>
            <span>{{ detail.hcrate }}%</span>
          </li>
          <li class="last pull-right">
            <mt-button class="btn-red" @click="goBack" size="small" type="danger">行情></mt-button>
            <mt-button
              class="btn-red"
              @click="goBack"
              size="small"
              type="danger"
              >行情></mt-button
            >
          </li>
        </ul>
      </div>
    </div>
    <div class="box-tab">
      <div class="tab-title">
        <span class="circle"></span>选择手数
      </div>
      <div class="tab-title"><span class="circle"></span>选择手数</div>
      <div class="tab-con">
        <ul class="radio-group clearfix">
          <li v-for="item in numberList" :key="item.key" @click="selectNumberFun(item.value)">
            <div :class="selectNumber == item.value?'on':''">
              {{item.label}}
          <li
            v-for="item in numberList"
            :key="item.key"
            @click="selectNumberFun(item.value)"
          >
            <div :class="selectNumber == item.value ? 'on' : ''">
              {{ item.label }}
            </div>
          </li>
          <li class="auto" v-show="!selectNumber">
            <input @keyup="changeAutoNumber" v-model="autoNumber" type="text">手
            <input
              @keyup="changeAutoNumber"
              v-model="autoNumber"
              type="text"
            />手
          </li>
        </ul>
        <p class="clearfix">
          <span class="pull-left">最小购买股数{{Number(settingInfo.buyMinNum)/100}}手</span>
          <span class="protem pull-right">最大可购买数量{{Number(settingInfo.buyMaxNum)/100}}手</span>
          <span class="pull-left"
            >最小购买股数{{ Number(settingInfo.buyMinNum) / 100 }}手</span
          >
          <span class="protem pull-right"
            >最大可购买数量{{ Number(settingInfo.buyMaxNum) / 100 }}手</span
          >
        </p>
      </div>
    </div>
    <div class="box-tab">
      <div class="tab-title">
        <span class="circle"></span>选择杠杆
      </div>
      <div class="tab-title"><span class="circle"></span>选择杠杆</div>
      <div class="tab-con">
        <ul class="radio-group clearfix">
          <li v-for="item in siteLeverList" :key="item.key" @click="selectCycleFun(item.value)">
            <div :class="selectCycle == item.value?'on':''">
              {{item.label}}
          <li
            v-for="item in siteLeverList"
            :key="item.key"
            @click="selectCycleFun(item.value)"
          >
            <div :class="selectCycle == item.value ? 'on' : ''">
              {{ item.label }}
            </div>
          </li>
        </ul>
@@ -88,59 +120,98 @@
      </div>
    </div> -->
    <div class="box-tab">
      <div class="tab-title">
        <span class="circle"></span>买卖方向
      </div>
      <div class="tab-title"><span class="circle"></span>买卖方向</div>
      <div class="tab-con">
        <ul class="radio-group clearfix">
          <li v-for="item in type" :key="item.key" @click="selectTypeFun(item.value)">
            <div :class="selectType == item.value?'on':''">
              {{item.label}}
          <li
            v-for="item in type"
            :key="item.key"
            @click="selectTypeFun(item.value)"
          >
            <div :class="selectType == item.value ? 'on' : ''">
              {{ item.label }}
            </div>
          </li>
        </ul>
      </div>
    </div>
    

    <div class="box-tab">
      <div class="tab-con">
        <p class="text-left page-part">
          <span class="">{{selectNumber?selectNumber*100:autoNumber*100}}股</span>
          <span class="pull-right">市值 {{price?price:0}}元</span>
          <span class=""
            >{{ selectNumber ? selectNumber * 100 : autoNumber * 100 }}股</span
          >
          <span class="pull-right">市值 {{ price ? price : 0 }}元</span>
        </p>
        <p class="text-left page-part">
          <span class="">保证金 {{(price/ selectCycle).toFixed(2)}}</span>
          <span class="pull-right">最小购买金额 {{settingInfo.buyMinAmt}}元</span>
          <span class="">保证金 {{ (price / selectCycle).toFixed(2) }}</span>
          <span class="pull-right"
            >最小购买金额 {{ settingInfo.buyMinAmt }}元</span
          >
        </p>
        <p class="text-left page-part">
          <span class="">总手续费 {{poundage?poundage:0}}元 <i @click="focePromptPopup = true" ref="button" class="iconfont icon-xinshou"></i></span>
          <span class=""
            >总手续费 {{ poundage ? poundage : 0 }}元
            <i
              @click="focePromptPopup = true"
              ref="button"
              class="iconfont icon-xinshou"
            ></i
          ></span>
          <span class="pull-right"></span>
        </p>
      </div>
    </div>
    <div class="agree text-center">
      <p>
        <i @click="isAgree"
           :class="agree?'glyphicon glyphicon glyphicon-ok-sign red':'glyphicon glyphicon-ok-circle'"></i>
        <i
          @click="isAgree"
          :class="
            agree
              ? 'glyphicon glyphicon glyphicon-ok-sign red'
              : 'glyphicon glyphicon-ok-circle'
          "
        ></i>
        我已阅读并同意
        <!-- <a @click="dialogShow = true">《合作协议》</a> -->
        <a @click="totrageUrl">《{{settingInfo.tradeAgreeTitle}}》</a>
        <a @click="totrageUrl">《{{ settingInfo.tradeAgreeTitle }}》</a>
      </p>
    </div>
    <div class="footer-btn">
      <div class="total">
        <p class="pay">需要支付<span class="protem">{{total?total:0}}</span></p>
        <p class="account">(账户余额:{{$store.state.userInfo.enableAmt}}元)</p>
        <p class="pay">
          需要支付<span class="protem">{{ total ? total : 0 }}</span>
        </p>
        <p class="account">
          (账户余额:{{ $store.state.userInfo.enableAmt }}元)
        </p>
      </div>
      <mt-button :disabled="buying" class="btn-red" size="small" type="danger" @click="toInquiry">下单</mt-button>
      <mt-button
        :disabled="buying"
        class="btn-red"
        size="small"
        type="danger"
        @click="toInquiry"
        >下单</mt-button
      >
    </div>
    
    <mt-popup v-model="focePromptPopup" popup-transition="popup-fade" class="mint-popup-white">

    <mt-popup
      v-model="focePromptPopup"
      popup-transition="popup-fade"
      class="mint-popup-white"
    >
      <div class="clearfix">
        <a @click="focePromptPopup = false" class="pull-right"><i class="iconfont icon-weitongguo"></i></a>
        <a @click="focePromptPopup = false" class="pull-right"
          ><i class="iconfont icon-weitongguo"></i
        ></a>
      </div>
      <p class="font-title">总手续费计算规则：</p>
      <p class="font-bold">总手续费 = 买入手续费（{{(settingInfo.buyFee*100)}}%）+ 印花税（{{(settingInfo.dutyFee*100)}}%）+ 点差费（{{(settingSpreadRate.spreadRate*100)}}%）
      <p class="font-bold">
        总手续费 = 买入手续费（{{ settingInfo.buyFee * 100 }}%）+ 印花税（{{
          settingInfo.dutyFee * 100
        }}%）+ 点差费（{{ settingSpreadRate.spreadRate * 100 }}%）
      </p>
    </mt-popup>
    <foot></foot>
@@ -148,234 +219,269 @@
</template>

<script>
import foot from '../../components/foot/foot'
import { Toast } from 'mint-ui'
import { isNull } from '@/utils/utils'
import * as api from '@/axios/api'
import foot from "../../components/foot/foot";
import { Toast } from "mint-ui";
import { isNull } from "@/utils/utils";
import * as api from "@/axios/api";

export default {
  components: {
    foot
    foot,
  },
  props: {},
  data () {
  data() {
    return {
      detail: {
        name: '',
        code: '',
        gid: '',
        stockType: ''
        name: "",
        code: "",
        gid: "",
        stockType: "",
      }, //
      cycle: [ // 杠杆倍数
        { label: '10', value: '10' },
        { label: '20', value: '20' },
        { label: '30', value: '30' }
      cycle: [
        // 杠杆倍数
        { label: "10", value: "10" },
        { label: "20", value: "20" },
        { label: "30", value: "30" },
      ],
      selectCycle: '20',
      selectCycle: "20",
      numberList: [
        { label: '50手', value: '50' },
        { label: '100手', value: '100' },
        { label: '150手', value: '150' },
        { label: '200手', value: '200' },
        { label: '250手', value: '250' },
        { label: '300手', value: '300' },
        { label: '自定义', value: '' }
        { label: "50手", value: "50" },
        { label: "100手", value: "100" },
        { label: "150手", value: "150" },
        { label: "200手", value: "200" },
        { label: "250手", value: "250" },
        { label: "300手", value: "300" },
        { label: "自定义", value: "" },
      ],
      siteLeverList:[],
      selectNumber: '',
      autoNumber: '',
      siteLeverList: [],
      selectNumber: "",
      autoNumber: "",
      type: [
        { label: '买涨', value: '0' },
        { label: '买跌', value: '1' }
        { label: "买涨", value: "0" },
        { label: "买跌", value: "1" },
      ],
      selectType: '',
      selectType: "",
      // number:0,// 股
      // price:0,// 股价格
      // total:0, // 总价
      agree: true,
      settingInfo: {
        buyMaxNum: 1000, // 最大买入股数
        buyMinNum: 100 // 最小买入股数
        buyMinNum: 100, // 最小买入股数
      }, // 设置规则信息
      dialogShow: false,
      timer: null,
      buying: false,
      focePromptPopup: false, // 总手续费提示框
      settingSpreadRate: {spreadRate: 0}
    }
      settingSpreadRate: { spreadRate: 0 },
    };
  },
  watch: {},
  computed: {
    poundage () { //手续费= 买入手续费+印花税+点差费
    poundage() {
      //手续费= 买入手续费+印花税+点差费
      if (this.autoNumber) {
        let payfee = (this.detail.nowPrice * this.autoNumber * 100).toFixed(2) // / this.selectCycle
        return ((payfee * this.settingInfo.buyFee) + (payfee * this.settingInfo.dutyFee) + (payfee * this.settingSpreadRate.spreadRate)).toFixed(2)
        let payfee = (this.detail.nowPrice * this.autoNumber * 100).toFixed(2); // / this.selectCycle
        return (
          payfee * this.settingInfo.buyFee +
          payfee * this.settingInfo.dutyFee +
          payfee * this.settingSpreadRate.spreadRate
        ).toFixed(2);
      } else if (this.selectNumber) {
        let payfee = (this.detail.nowPrice * this.selectNumber * 100).toFixed(2)
        return ((payfee * this.settingInfo.buyFee) + (payfee * this.settingInfo.dutyFee) + (payfee * this.settingSpreadRate.spreadRate)).toFixed(2)
        let payfee = (this.detail.nowPrice * this.selectNumber * 100).toFixed(
          2
        );
        return (
          payfee * this.settingInfo.buyFee +
          payfee * this.settingInfo.dutyFee +
          payfee * this.settingSpreadRate.spreadRate
        ).toFixed(2);
      } else {
        return 0
        return 0;
      }
    },
    total () {
      if (this.settingSpreadRate == undefined || this.settingSpreadRate.spreadRate == undefined){
        this.settingSpreadRate.spreadRate = 0
    total() {
      if (
        this.settingSpreadRate == undefined ||
        this.settingSpreadRate.spreadRate == undefined
      ) {
        this.settingSpreadRate.spreadRate = 0;
      }
      if (this.autoNumber) {
        let payfee = (this.detail.nowPrice * this.autoNumber * 100 / this.selectCycle)
        return (payfee + (payfee * this.settingInfo.buyFee) + (payfee * this.settingInfo.dutyFee) + (payfee * this.settingSpreadRate.spreadRate)).toFixed(2)
        let payfee =
          (this.detail.nowPrice * this.autoNumber * 100) / this.selectCycle;
        return (
          payfee +
          payfee * this.settingInfo.buyFee +
          payfee * this.settingInfo.dutyFee +
          payfee * this.settingSpreadRate.spreadRate
        ).toFixed(2);
        //return (this.detail.nowPrice * this.autoNumber * 100 / this.selectCycle).toFixed(2)
      } else if (this.selectNumber) {
        // alert("bb"+this.detail.nowPrice+"cc==="+this.selectNumber+"ff==="+this.selectCycle+"==="+this.settingSpreadRate.spreadRate)
        let payfee = (this.detail.nowPrice * this.selectNumber * 100 / this.selectCycle)
        return (payfee + (payfee * this.settingInfo.buyFee) + (payfee * this.settingInfo.dutyFee) + (payfee * this.settingSpreadRate.spreadRate)).toFixed(2)
        let payfee =
          (this.detail.nowPrice * this.selectNumber * 100) / this.selectCycle;
        return (
          payfee +
          payfee * this.settingInfo.buyFee +
          payfee * this.settingInfo.dutyFee +
          payfee * this.settingSpreadRate.spreadRate
        ).toFixed(2);
        //return (this.detail.nowPrice * this.selectNumber * 100 / this.selectCycle).toFixed(2)
      } else {
        return 0
        return 0;
      }
      // 需支付总价 = 现价 * 股（1手 = 100股）/ 杠杆倍数
    },
    price () {
    price() {
      if (this.autoNumber) {
        return (this.detail.nowPrice * this.autoNumber * 100).toFixed(2)
        return (this.detail.nowPrice * this.autoNumber * 100).toFixed(2);
      } else if (this.selectNumber) {
        return (this.detail.nowPrice * this.selectNumber * 100).toFixed(2)
        return (this.detail.nowPrice * this.selectNumber * 100).toFixed(2);
      } else {
        return 0
        return 0;
      }
      // 市值价 = 现价 * 股（1手 = 100股）
    }
    },
  },
  created () {
    this.timer = setInterval(this.getDetail, 5000)
  created() {
    this.timer = setInterval(this.getDetail, 5000);
  },
  beforeDestroy () {
    clearInterval(this.timer)
  beforeDestroy() {
    clearInterval(this.timer);
  },
  mounted () {
  mounted() {
    //   this.getDetail()
    this.detail.gid = this.$route.params.gid
    this.detail.name = this.$route.params.name
    this.detail.code = this.$route.params.code
    this.detail.stockType = this.$route.params.stockType
    this.detail.hcrate = this.$route.params.hcrate
    this.detail.nowPrice = this.$route.params.nowPrice
    this.selectNumber = 0
    this.detail.gid = this.$route.params.gid;
    this.detail.name = this.$route.params.name;
    this.detail.code = this.$route.params.code;
    this.detail.stockType = this.$route.params.stockType;
    this.detail.hcrate = this.$route.params.hcrate;
    this.detail.nowPrice = this.$route.params.nowPrice;
    this.selectNumber = 0;
    //   this.selectCycle = 10
    this.getSettingInfo()
    this.getSettingInfo();
    if (!this.$store.state.userInfo.enableAmt) {
      this.getUserInfo()
      this.getUserInfo();
    }
  },
  methods: {
    changeAutoNumber () {
    changeAutoNumber() {
      // 自定义手数
      this.selectNumber = ''
      this.selectNumber = "";
    },
    async getSettingInfo () {
    async getSettingInfo() {
      // 网站设置信息
      let data = await api.getSetting()
      let data = await api.getSetting();
      if (data.status === 0) {
        // 成功
        this.settingInfo = data.data
        this.settingInfo = data.data;
        // 杠杆倍数
        this.selectCycle = data.data.siteLever
        if(this.$store.state.userInfo !== undefined && this.$store.state.userInfo !== null && this.$store.state.userInfo.phone !== '' && this.$store.state.userInfo.siteLever !== null){
            this.selectCycle = this.$store.state.userInfo.siteLever.split('/')[0]
            this.siteLeverList = []
            for (let i = 0; i < this.$store.state.userInfo.siteLever.split('/').length; i++) {
              let val = this.$store.state.userInfo.siteLever.split('/')[i]
              let item = { label: val + '倍', value: val }
              this.siteLeverList.push(item)
            }
          } else {
            this.selectCycle = data.data.siteLever.split('/')[0]
            this.siteLeverList = []
            for (let i = 0; i < data.data.siteLever.split('/').length; i++) {
              let val = data.data.siteLever.split('/')[i]
              let item = { label: val + '倍', value: val }
              this.siteLeverList.push(item)
            }
        this.selectCycle = data.data.siteLever;
        if (
          this.$store.state.userInfo !== undefined &&
          this.$store.state.userInfo !== null &&
          this.$store.state.userInfo.phone !== "" &&
          this.$store.state.userInfo.siteLever !== null
        ) {
          this.selectCycle = this.$store.state.userInfo.siteLever.split("/")[0];
          this.siteLeverList = [];
          for (
            let i = 0;
            i < this.$store.state.userInfo.siteLever.split("/").length;
            i++
          ) {
            let val = this.$store.state.userInfo.siteLever.split("/")[i];
            let item = { label: val + "倍", value: val };
            this.siteLeverList.push(item);
          }
        } else {
          this.selectCycle = data.data.siteLever.split("/")[0];
          this.siteLeverList = [];
          for (let i = 0; i < data.data.siteLever.split("/").length; i++) {
            let val = data.data.siteLever.split("/")[i];
            let item = { label: val + "倍", value: val };
            this.siteLeverList.push(item);
          }
        }
      } else {
        Toast(data.msg)
        Toast(data.msg);
      }
    },
    async findSpreadRateOne () {
    async findSpreadRateOne() {
      // 查询点差费率
      let opts = {
        applies: this.detail.hcrate, // 涨跌幅
        turnover: this.total, //成交额
        unitprice: this.detail.nowPrice, //股票单价
        code: this.$route.params.code
      }
      let data = await api.findSpreadRateOne(opts)
        code: this.$route.params.code,
      };
      let data = await api.findSpreadRateOne(opts);
      if (data.status === 0) {
        // 成功
        if(data.data != undefined){
          this.settingSpreadRate = data.data
        if (data.data != undefined) {
          this.settingSpreadRate = data.data;
        }
        console.log(this.settingSpreadRate)
        
        console.log(this.settingSpreadRate);
      } else {
        this.$message.error(data.msg)
        this.$message.error(data.msg);
      }
    },
    isAgree () {
      let i = false
      let j = true
      this.agree = this.agree ? i : j
    isAgree() {
      let i = false;
      let j = true;
      this.agree = this.agree ? i : j;
    },
    totrageUrl () {
      this.$router.push('/trade')
    totrageUrl() {
      this.$router.push("/trade");
    },
    async getDetail () {
    async getDetail() {
      let opts = {
        code: this.$route.params.code
      }
      let data = await api.getSingleStock(opts)
        code: this.$route.params.code,
      };
      let data = await api.getSingleStock(opts);
      if (data.status === 0) {
        this.detail = data.data
        this.findSpreadRateOne()
        this.detail = data.data;
        this.findSpreadRateOne();
      } else {
        Toast(data.msg)
        Toast(data.msg);
      }
    },
    selectCycleFun (value) {
      this.selectCycle = value
    selectCycleFun(value) {
      this.selectCycle = value;
    },
    selectNumberFun (value) {
      this.selectNumber = value
    selectNumberFun(value) {
      this.selectNumber = value;
      if (+value !== 0) {
        this.autoNumber = ''
        this.autoNumber = "";
      }
    },
    selectTypeFun (value) {
      this.selectType = value
    selectTypeFun(value) {
      this.selectType = value;
    },
    canBuyStatus () {
      let dataTime = new Date()
      let day = dataTime.getDay() // 星期几
      let hour = dataTime.getHours() // 小时
      let minute = dataTime.getMinutes() // 分钟
    canBuyStatus() {
      let dataTime = new Date();
      let day = dataTime.getDay(); // 星期几
      let hour = dataTime.getHours(); // 小时
      let minute = dataTime.getMinutes(); // 分钟
      if (+day === 6 || +day === 7) {
        return false
        return false;
      }
      if (hour < 9 || (hour >= 12 && hour < 13) || hour >= 15) {
        return false
        return false;
      }
      if (hour === 9 && minute < 32) {
        return false
        return false;
      }
      if (hour === 11 && minute >= 30) {
        return false
        return false;
      }
      if (hour === 14 && minute > 57) {
        return false
        return false;
      }
      return true
      return true;
    },
    async toInquiry () {
    async toInquiry() {
      // 判断在不在开盘时间内
      // if(!this.canBuyStatus()){
      //     Toast('不在交易时段内！')
@@ -383,148 +489,149 @@
      // }
      // 下单
      if (!this.$store.state.userInfo.idCard) {
        Toast('您还未实名认证,请先实名认证了再下单')
        this.$router.push('/authentication')
        return
        Toast("您还未实名认证,请先实名认证了再下单");
        this.$router.push("/authentication");
        return;
      }
      if (!this.agree) {
        Toast('需同意合作协议才能交易!')
        Toast("需同意合作协议才能交易!");
      } else if (isNull(this.selectNumber) && isNull(this.autoNumber)) {
        Toast('请选择购买手数')
        Toast("请选择购买手数");
      } else if (isNull(this.selectType)) {
        Toast('请选择买卖方向')
        Toast("请选择买卖方向");
      } else {
        this.buying = true
        this.buying = true;
        let opts = {
          stockId: this.$route.params.gid,
          buyNum: this.selectNumber ? this.selectNumber * 100 : this.autoNumber * 100,
          buyNum: this.selectNumber
            ? this.selectNumber * 100
            : this.autoNumber * 100,
          buyType: this.selectType,
          lever: this.selectCycle
        }
        let data = await api.buy(opts)
        this.buying = false
          lever: this.selectCycle,
        };
        let data = await api.buy(opts);
        this.buying = false;
        if (+data.status === 0) {
          Toast(data.data)
          this.getUserInfo()
          this.$router.push('/orderlist?index=1')
          Toast(data.data);
          this.getUserInfo();
          this.$router.push("/orderlist?index=1");
        } else {
          Toast(data.msg)
          Toast(data.msg);
        }
      }
    },
    toDetail () {
      this.$router.push('/listdetail')
    toDetail() {
      this.$router.push("/listdetail");
    },
    goBack () {
      this.$router.go(-1)
    goBack() {
      this.$router.go(-1);
    },
    async getUserInfo () {
    async getUserInfo() {
      // 获取用户信息
      let data = await api.getUserInfo()
      let data = await api.getUserInfo();
      if (+data.status === 0) {
        // Toast(data.msg)
        this.$store.state.userInfo = data.data
        this.$store.state.userInfo = data.data;
      } else {
        Toast(data.msg)
        Toast(data.msg);
      }
    },
  },
};
</script>
<style lang="less" scoped>
body {
  background: #fff;
}

.protem {
  color: #ff8000;
}

.agree {
  margin-top: 0.2rem;
  padding-bottom: 1rem;

  a {
    color: #428bca;
  }
}

.footer-btn {
  position: fixed;
  z-index: 1;
  width: 100%;
  padding-right: 0;
  bottom: 0.97rem;
  height: 0.89rem;
  line-height: 0.89rem;
  display: flex;

  .total {
    font-size: 0.26rem;
    padding-left: 0.3rem;
    flex: 3;

    .pay {
      line-height: 0.45rem;
    }

    .account {
      line-height: 0.3rem;
      font-size: 0.24rem;
      color: #999;
    }
  }

  .btn-red {
    flex: 2;
    background: #b60c0d;
    border-radius: 0;
    padding: 0;
  }
}

.auto {
  input {
    display: inline-block;
    width: 75%;
    border-bottom: 0.01rem solid #ddd;
  }
}

// bottom 7rem -> 0.97rem
.buy-price {
  // border-top: 0.01rem solid #000000;
  padding-top: 0.15rem;

  p {
    height: 0.32rem;
    line-height: 0.32rem;
  }
}

.mint-popup-white {
  height: 6.5rem;
  padding: 0.25rem;

  .check-box {
    height: 5.3rem;
    line-height: 0.35rem;
    overflow: auto;

    h3 {
      margin-bottom: 0.2rem;
    }
  }

  .box-btn {
    width: 100%;
    padding-top: 0.2rem;

    .btn-red {
      width: 100%;
      height: 0.6rem;
    }
  }
}
</script>
<style lang="less" scoped>
  body {
    background: #fff;
  }

  .protem {
    color: #ff8000;
  }

  .agree {
    margin-top: 0.2rem;
    padding-bottom: 1rem;

    a {
      color: #428bca;
    }
  }

  .footer-btn {
    position: fixed;
    z-index: 1;
    width: 100%;
    padding-right: 0;
    bottom: 0.97rem;
    height: .89rem;
    line-height: .89rem;
    display: flex;

    .total {
      font-size: 0.26rem;
      padding-left: 0.3rem;
      flex: 3;

      .pay {
        line-height: 0.45rem;
      }

      .account {
        line-height: 0.3rem;
        font-size: 0.24rem;
        color: #999;
      }
    }

    .btn-red {
      flex: 2;
      background: #b60c0d;
      border-radius: 0;
      padding: 0;
    }
  }

  .auto {
    input {
      display: inline-block;
      width: 75%;
      border-bottom: 0.01rem solid #ddd;
    }
  }

  // bottom 7rem -> 0.97rem
  .buy-price {
    // border-top: 0.01rem solid #000000;
    padding-top: 0.15rem;

    p {
      height: 0.32rem;
      line-height: 0.32rem;
    }
  }

  .mint-popup-white {
    height: 6.5rem;
    padding: 0.25rem;

    .check-box {
      height: 5.3rem;
      line-height: 0.35rem;
      overflow: auto;

      h3 {
        margin-bottom: 0.2rem;
      }
    }

    .box-btn {
      width: 100%;
      padding-top: 0.2rem;

      .btn-red {
        width: 100%;
        height: 0.6rem;
      }
    }
  }

</style>