Client-Teapay/src/pages/account/conversion.vue

<template>
  <div class='conversion'>
        <view class="list flex_r flex_ac flex_jb mar_t16">
            <view class="list_name">需要转化的金额:</view>
            <view class="list_text">
                <input type="text" v-model="give_num" placeholder="请输入需要转化的金额" placeholder-style="color:#ddd;" />
            </view>
        </view>
        <view class="list flex_r flex_ac flex_jb mar_t16">
            <view class="list_name">你将得到的茶宝:</view>
            <view class="list_text ">200</view>
        </view>
        <view class="btn flex_r flex_ac flex_jc" @tap="giveIntegral">立即转化</view>
  </div>
</template>
<script>
import { get, post } from '@/request/api.js';
export default {
  name: 'conversion',
  data () {
    return {}
  },
  onLoad (option) {},
  onLaunch () {},
  onShow () {},
  onHide () {},
  methods: {},
  computed: {},
  watch: {}
}
</script>
<style scoped lang='scss'>
.conversion{

}

// 页面配置
page {
    background: #f4f4f4;
}

// 页面配置-end


.list {
    width: 100%;
    height: 86rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    background: #fff;
}

.list_text {
    flex: 1;
    font-family: "SourceHanSansCN-Bold";
    text-align: right;
}

.list_name {
    flex: 1;
    color: #333333;
    font-size: 28rpx;
    font-family: "SourceHanSansCN-Medium";
    font-weight: 500;
}

.list_text input {
    font-size: 30rpx;
    color: #333;
    text-align: right;
    font-weight: bold;
    // margin-left: 20rpx;
}

.list_text text {
    font-family: "SourceHanSansCN-Medium";
    font-size: 36rpx;
    font-weight: bold;
    color: #17bb87;
}

.btn {
    width: 689rpx;
    height: 92rpx;
    background: #17bb87;
    color: #fff;
    font-size: 42rpx;
    font-family: "SourceHanSansCN-Medium";
    font-weight: 500;
    margin: 132rpx auto 0;
    border-radius: 10rpx;
}
</style>