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
随机推荐
- 笛卡尔树 POJ ——1785 Binary Search Heap Construction
相应POJ 题目:点击打开链接 Binary Search Heap Construction Time Limit: 2000MS Memory Limit: 30000K Total Subm ...
- Jpa调用存储过程及参数
public List<Object> findAllEntityListBySearch(Long inputInfoId, int flag) throws Exception { L ...
- 小程序排错（redis导致）
小程序突然出问题,题库加载不了,程序正常,测试环境同样环境,同样代码都正常,但是线上数据秒过期,怀疑redis过期时间设置有问题,但是检查配置没问题,写入数据带过期时间也正常. redis设置key: ...
- WCF RIA Services使用详解（转载）
理解领域服务和领域操作 本文目录: 3.1 WCF Ria Services简介 3.1.1 什么是WCF Ria Services 3.1.2 WCF Ria Services如何生成客户端代码 3 ...
- 基于FPGA实现的高速串行交换模块实现方法研究
基于FPGA实现的高速串行交换模块实现方法研究 https://wenku.baidu.com/view/9a3d501a227916888486d7ed.html
- Backup and Recovery Basics1
一.Backup and Recovery Overview 1.Backup and Recovery Overview 1.1 What is Backup and Recovery? 一般,备份 ...
- AJAX动态加载评论
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于ZBarReaderView 打开闪光灯
关于ZBarReaderView 打开闪光灯 ZBarReaderView *readerView; - (void)changeLight:(id)sender{ UIButton *btn = ( ...
- tp 大致执行流程
http://www.thinkphp.cn/code/305.html http://document.thinkphp.cn/manual_3_2.html#wechat
- bat脚本批处理打war打包
@echo =========================================== @echo 描述:打包脚本 @echo 作者:霍建国 @echo 日期:2018-03-13 @ec ...