margin 依附与可见的内容，不能为margin而写margin
margin 依附于可见的内容，不能为margin而写margin
<!DOCTYPE html>
<html>
<head>
<style>
p{margin:20px 0;}
</style>
</head>
<body>
<p>第-1个段落。</p>
<p></p>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
</body>
</html>
<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>账户余额
<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 class="clear_both">充值金额</view>
<view class="amountType-container">
<repeat for="{{amountTab.amountType}}" key="index" index="index" item="item">
<view class="amountType-item {{index===amountTab.currentType ? 'amount-item_select-after' :'amount-item_select-before'}}" @tap="onTap" data-key="currentType" data-val={{index}}>
<view class="amountType-gift">{{index===0 ? ' ': '送'+item[1]+'币'}}</view>
<view class="amountType-exchange-rate">
<text>{{item[0]}}</text><text>元</text>=<text>{{item[0]+item[1]}}</text><text>币</text>
</view>
</view>
</repeat>
</view>
<view class="clear_both">支付方式</view>
<view class="pay-type">
<view class="payType_img-separation">
<view class="pay-type_select-before {{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="pay-type_select-before {{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 class="pay-number">应付金额
<text>{{amountTab.amountType[amountTab.currentType][0]}}</text>元
</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="0755123" bindtap="phoneCall">0755-123</text>
</view>
</view>
</template>
<style lang="less">
// WXSS · 小程序 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
@wx-width: 750rpx; // TODO 全局统一；2018年10月2日 16:29:42
@wx-width_px: 750;
@wx-width_rpx-num: 750;
@wx-width_one-unit: @wx-width/@wx-width_rpx-num;
@color-main_red: #F00;
@color-main_blue: #2CABE2;
@color-main_gray: #ADADAD;
@root_padding-horizontal: @wx-width_one-unit*12;
@wx-width_subtract-padding-width: @wx-width - @root_padding-horizontal*2;
@common_border-width: @wx-width_one-unit; // 选中项的边框
@common_select-after-font-size: @wx-width_one-unit*24; // 选中项的after-content字体大小
.root_ {
padding: @root_padding-horizontal;
}
.clear_both {
clear: both;
}
.balance {
font-size: @wx-width_one-unit*25;
.balance-num {
font-weight: normal;
color: @color-main_red;
}
}
.question-mark {
border: @wx-width_one-unit solid @color-main_gray;
color: @color-main_gray;
border-radius: 50%;
text-align: center;
}
.mixin_change-border-color(@c: @color-main_gray) {
border: @common_border-width solid @c;
}
.mixin_item_select-before() {
.mixin_change-border-color(@c: @color-main_gray);
} // 没有点击选中前的公共样式；
.mixin_item_select-after(@font-size: @common_select-after-font-size, @margin-top: @common_select-after-font-size) {
display: block;
float: right;
content: "√";
background-color: @color-main_blue;
color: #fff;
border-radius: 50%;
font-size: @font-size;
margin-top: -@margin-top;
} // 点击选中后的公共样式；
.amountType-container {
// 盒子模型；注意view初始为display:block;
@2items_margin-width: @wx-width_subtract-padding-width*0.02; // 并排的2个选项区域的外围margin；
@item-separation-margin-width: @wx-width_subtract-padding-width*0.05; // 2个选项横排；选项margin水平间距；
@item-border-width: @common_border-width; // 2个选项的border宽度；
@item-available-width: @wx-width_subtract-padding-width - @2items_margin-width*2 - @item-border-width*4 - @item-separation-margin-width*4; // 待布局选项区域；
@item-render-width: @item-available-width/2; // 选项最终被渲染的宽度；
@item_select-after-font-size: @common_select-after-font-size;
margin: 0 @2items_margin-width; // width: @wx-width_one-unit;
background-color: green;
.amountType-item {
width: @item-render-width;
float: left;
margin: @common_select-after-font-size*0.8 @item-separation-margin-width;
.mixin_block-float(@f: right) {
display: block;
float: @f;
}
.amountType-gift {
.mixin_block-float(@f: right);
background-color: @color-main_red;
border-radius: 20% 0 0 30%;
color: #fff;
font-size: 80%; //TODO exact
}
.amountType-exchange-rate {
.mixin_block-float(@f: left);
@v: 700;
text:nth-last-child(2) {
color: @color-main_red;
font-weight: @v;
}
text:nth-child(1) {
font-weight: @v;
}
}
}
.amount-item_select-before {
.mixin_item_select-before();
}
.amount-item_select-after {
.mixin_change-border-color(@c: @color-main_blue);
&:after {
.mixin_item_select-after(@font-size: @common_select-after-font-size, @margin-top: @common_select-after-font-size);
}
}
}
.pay-type {
@pay-type_2imgs_padding-width : @wx-width_subtract-padding-width*0.1; // 并排的2项的区域的外围边框
@pay-type_img-available-width: @wx-width_subtract-padding-width - @pay-type_2imgs_padding-width*2 - @pay-type_border-width*4; // 待布局图片的区域
@pay-type_border-width: @common_border-width; // 无论是否被选中，项之间、选中前后都有相同的边框宽度；选中对边框的影响是改变边框颜色；
@pay-type_imgs_width-share: 0.6; // 图片宽度份额，其他留作2张图片间的水平margin；
@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: @common_select-after-font-size;
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-before {
.mixin_item_select-before()
}
.pay-type_select-after {
.mixin_change-border-color(@c: @color-main_blue);
&:after {
.mixin_item_select-after(@font-size: @common_select-after-font-size, @margin-top: @common_select-after-font-size);
}
}
}
.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>
margin 依附与可见的内容，不能为margin而写margin的更多相关文章
- 关于元素加上margin属性后以谁为基准移动的问题及负margin的问题
突然想起这个问题,这是很基础很基础的问题啊,但之前很多次都忘记了,然后困扰了我很久.不清不楚的感觉很不好,所以要做成笔记比较好记住,好记性不如烂笔头,以后再次困惑了再回来看看.推荐文章,海玉的< ...
- php 写内容到文件,把日志写到log文件
php 写内容到文件,把日志写到log文件 <?php header("Content-type: text/html; charset=utf-8"); /******** ...
- 把a表格的内容读取出来，然后写到b表格
把a表格的内容读取出来,然后写到b表格 #!/usr/bin/env python3 import sys #控制台要输入的两个参数格式为:python script_name.py 参数1 参数2 ...
- Example010实现浏览器兼容改内容的函数，自写
<!-- 实例010实现浏览器兼容改内容的函数 --> <!DOCTYPE html> <html lang="en"> <head> ...
- 黄聪：WordPress 多站点建站教程（三）：主站如何调用子站的文章内容、SQL语句如何写？
1.如果懂得编程的朋友可以SQL语句,然后加上PHP函数等操作就可以通过直接调用网站的数据库信息来实现想要达到的目的. 既然要用到SQL语句首先得对WordPress多站点数据库有一个了解,多站点激活 ...
- css 系统自学笔记2017-12-04
一.几个常用的可以连写的样式属性 1.backgroud: 背景连写:没有先后顺序,都是可选的. 2.font字体属性连写: font: 二.元素分类 块级元素:div p h1~h6 ul li o ...
- margin+absolute布局：右栏固定主内容自适应 demo
margin+absolute布局:右栏固定主内容自适应 demo 头部 Aside侧边栏区域 Main主内容区域 底部 #demo{width:80%;margin:auto;height:300p ...
- CSS 盒子模型（Box model）中的 padding 与 margin
本文将讲述 HTML 和 CSS 的关键—盒子模型 (Box model) .理解 Box model 的关键便是 margin 和 padding 属性,而正确理解这两个属性也是学习用 CSS 布局 ...
- CSS中的margin、border和padding的区别
aaarticlea/gif;base64,R0lGODlhuQEbAbMAAP8AM8zMzGZmYszMmZmZZkIP/5qE/8zM/wICApmZmf//zP///wAAAAAAAAAAAA
随机推荐
- Java基础知识介绍
数组的定义及初始化方式 数组对象创建没有() 一维数组 静态初始化: String[] books = {"Thinking in Java","Effective Ja ...
- BASE64Decoder的引用
project---->properties--->Libraries--->JRE System Library--->Access rules--->Edit---& ...
- C-printf/sprintf/snprintf中的类型转换详解
源码1 #include <stdio.h> void f1() { double x = -5.5625; printf("%d\n",x); //输出为0,为什么? ...
- node.js 学习03
node.js学习03 解决浏览器接收服务端信息之后乱码的问题: 服务器通过设置http响应报文头,告诉浏览器使用相应的编码 来解析网页. res.setHeader('Content','text/ ...
- 安装ecshop默认安装后的错误解决方案
1,统一解决 php.ini中的配置 error_reporting = E_ALL | E_STRICT 这是说,显示那些不符合编码规范的警告(coding standards warnings). ...
- 在Telerik for silverlight控件radtreeview中如何通过路径得到节点（转载）
页面<telerik:RadTreeView Margin="8" x:Name="radTreeView" SelectionChanged=" ...
- Android WebView与JavaScript交互实现Web App
当我们去开发一个基于web的android app时,我们第一须要处理的就是与JavaScript的交互问题.Android须要做的事情就是开放某些特定的接口供web里的JavaScript调用,能够 ...
- library not found for -lPods-AFNetworking解决放案
出现library not found for -lPods-AFNetworking这个报错, 来自于我从git上面把我项目直接Download下来的,我的项目里面用了CocoaPods的,如今pr ...
- input子系统分析（转）
转自:http://www.linuxidc.com/Linux/2011-09/43187.htm 作者:作者:YAOZHENGUO2006 Input子系统处理输入事务,任何输入设备的驱动程序都可 ...
- int abs(int number)函数有感: 求补码和通过补码求对应的整数 C++(增加：数字的二进制表示中1的个数)
#include "limits.h" #include "math.h" int abs(int number) { int const mask = num ...