对宽度的控制原则 git commit -a -m "M 1、完成less计算得出图片的均分布局；";git push origin master:master

<script>

import wepy from 'wepy'

import api from '../api/api'

export default class recharge extends wepy.page {

config = {

navigationBarTitleText: '账户充值'

}

data = {

notHere: {},

apiRes: {},

amountTab: {

currentType: '0',

amountType: [

[1000, 0],

[2000, 200],

[5000, 1000],

[10000, 3000]

],

payType: 0

}

}

async getAccountBalance() {

const backEndRequire = {

method: 'POST',

header: {

'Content-Type': 'application/x-www-form-urlencoded'

}

}

let q = backEndRequire

q.query = {

uid: this.$parent.UID.uid,

}

const r = await api.getAccountBalance(q)

this.apiRes.AccountBalance = r.data.data

this.$apply()

}

onLoad() {

this.notHere.commonCfg = wepy.$appConfig.common

this.getAccountBalance()

}

phoneCall(e) {

wx.makePhoneCall({

phoneNumber: e.currentTarget.dataset.replyPhone,

success() {}

})

}

onTap(e) {

const k = e.currentTarget.dataset.key

const v = e.currentTarget.dataset.val

this.amountTab[k] = v

}

}

</script>

<template>

<view class="root_">

<view>

<view>

<view>账户余额

<text class="question-mark">?</text>

</view>

<view>

<view class="balance"><text>￥</text><text class="balance-num"> {{apiRes.AccountBalance['1'].val}} </text> <text>币</text></view>

</view>

</view>

<view>

<view>充值金额</view>

<repeat for="{{amountTab.amountType}}" key="index" index="index" item="item">

<view class="amount-item" @tap="onTap" data-key="currentType" data-val={{index}}>

<view mode="aspectFit" class=" {{index===amountTab.currentType ? 'amount-item_select-after' :''}}">

<view>

<view wx:if="{{index !== 0}}">送{{item[1]}}币</view>

<view>

<text>{{item[0]}}</text><text>元</text>=<text>{{item[0]+item[1]}}</text><text>币</text>

</view>

</view>

</view>

</view>

</repeat>

</view>

</view>

<view>支付方式</view>

<view class="pay-type">

<view class="payType_img-separation">

<view class="{{amountTab.payType === '0' ? 'pay-type_select-after' : ''}}">

<image @tap="onTap" data-key="payType" data-val="0" class="pay-type_img-width-height" src="{{notHere.commonCfg.localImgPath}}payWeixin.jpg"></image>

</view>

</view>

<view class="payType_img-separation">

<view class="{{amountTab.payType === '1' ? 'pay-type_select-after' : ''}}">

<image @tap="onTap" data-key="payType" data-val="1" class="pay-type_img-width-height" src="{{notHere.commonCfg.localImgPath}}payAli.jpg"></image>

</view>

</view>

</view>

<view>

<view class="pay-number">应付金额

<text>{{amountTab.amountType[amountTab.currentType][0]}}</text>元

</view>

</view>

<view>

<button class="weui-btn weui-btn_mini weui-btn_primary recharge_button">立即充值</button>

</view>

<view class="contact">购买套餐,一键咨询：

<text class="phone-number" data-reply-phone="075581773181" bindtap="phoneCall">0755-81773181</text>

</view>

</view>

</template>

<style lang="less">

@import "../style/weui.wxss"; // WXSS · 小程序 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

@wx-width: 750rpx;

@wx-width_px: 750;

@wx-width_one-unit: @wx-width/750;

@color-main_red: #F00;

@color-main_blue: #2CABE2; // TODO 全局统一；2018年10月2日 16:29:42

@page-padding-horizontal: @wx-width_one-unit*12;

@wx-width_subtract-padding-width: @wx-width - @page-padding-horizontal*2;

.root_ {

padding: @page-padding-horizontal;

}

.balance {

font-size: @wx-width_one-unit*25;

.balance-num {

font-weight: normal;

}

}

.question-mark {

@c: #adadad;

border: @wx-width_one-unit solid @c;

color: @c;

border-radius: 50%;

text-align: center;

}

.amount-item {

width: 50%;

display: inline-flex;

}

@pay-type_2imgs_padding-width : @wx-width_subtract-padding-width*0.1; // 并排的2张图的区域的外围边框

@pay-type_border-width: @wx-width_one-unit; // 图片被点击后的新增边框宽度

@pay-type_img_available-width: @wx-width_subtract-padding-width - @pay-type_2imgs_padding-width*2 - @pay-type_border-width*2; // 可用区的图片宽度份额，其他留作2张图片间的水平padding

@pay-type_imgs_width-share: 0.6;

@pay-type_img-margin-width: @pay-type_img_available-width*(1- @pay-type_imgs_width-share)/4; // 2张图之间的margin宽度

@pay-type_img-render-width: @pay-type_img_available-width*@pay-type_imgs_width-share/2; // 图片最终被渲染的宽度

@pay-type_img-width-divide-height: 98/40; // 原图 宽度 高度 98 40 像素 96*96 dpi;// 原2张图宽高像素比相同；//image-height("file.png")；

@pay-type_img-render-height: @pay-type_img-render-width/@pay-type_img-width-divide-height; // 保持图片宽高比,图片最终被渲染的高度

@pay-type_amount-item_select-after-font-size: @wx-width_one-unit*24;

.pay-type {

display: inline-flex;

padding: 0 @pay-type_2imgs_padding-width;

height: @pay-type_img-render-height + @pay-type_border-width;

}

.pay-type_img-width-height {

width: @pay-type_img-render-width;

height: @pay-type_img-render-height;

}

.payType_img-separation {

margin: 0 @pay-type_img-margin-width;

}

.pay-type_select-after,

.amount-item_select-after {

border: @pay-type_border-width solid @color-main_blue;

@v: @pay-type_amount-item_select-after-font-size;

&:after {

display: block;

float: right;

content: "√";

background-color: @color-main_blue;

color: #fff;

border-radius: 50%;

font-size: @v;

margin-top: -@v;

}

}

.contact {

text-align: center;

.phone-number {

color: @color-main_blue;

}

}

.recharge_button {

width: 90%;

border-radius: @wx-width_one-unit*8;

background-color: @color-main_blue;

color: #fff;

}

</style>

 

 

对宽度的精细化控制

【宽度赋值原则】

1、艺术的数组，科研的结果，比如：黄金分割；

2、加减乘除的计算的结果；