uniapp 学习笔记三十结算页面结构搭建地址列表页面结构搭建

order.vue

<template><view><view class="padding flex align-center justify-between"><view class="">曹国舅,13901099102<view class="">北京市 朝阳区 朝阳路周家井</view></view><text class="cuIcon-right"></text></view><view class="padding">配送时间</view><view class="padding flex justify-between"><view class="">选择配送日期</view><view class="">选择配送时间</view></view><view class="flex padding" v-for="(item,index) in 1"><view class="flex align-center"><!-- <text :class="['iconfont','icon-youxiajiaogouxuan','margin-right',{'yellow':item.isCheck}]"></text> --><image class="poster margin-right" :src="item.img" mode=""></image></view><view class="flex justify-between info"><view class=""><!-- {{item.name}} -->蛋糕<view class="margin-tb-xs"> Fraction    </view><!-- Y{{item.list[item.idx].price}} --></view><view class="flex flex-direction align-end"><view class="edit margin-bottom-xs"><text class="iconfont icon-bianjishuru"></text></view><!-- {{item.list[item.idx].spec}} -->X <!-- {{item.num}} --></view></view></view><view class="fixed padding flex justify-between align-center">总计<view class="">199</view><button class="cu-btn bg-brown">立即支付</button></view></view>
</template><script>export default {data() {return {};}}
</script><style lang="scss">
.poster{width: 180upx;height: 180upx;background-color: #d8d8d8;
}
.info{width: 60%;.edit{width: 80upx;height: 80upx;text-align: center;line-height: 80upx;background-color: #e6e6e6;border-radius: 50%;}
}
.flex.align-end{min-width: 210upx;
}
.icon-youxiajiaogouxuan{color: #e7e7e7;
}
.cu-btn.lg{width: 50%;
}
.fixed {position: fixed;bottom: 0;left: 0;width: 100%;box-shadow: 0 0 10upx 2upx rgba(0, 0, 0, 0.2);
}
</style>

address.vue

<template><view><view v-for="(item,index) in 3" class="margin-sm u-border padding default"><view class="default-cont">默</view><view class="flex justify-between"><view class="flex align-center"><text class="iconfont icon-youxiajiaogouxuan margin-right"></text><view class="">曹国舅,13910199012<view class="">北京市朝阳区朝阳路周家井</view></view></view><view class="edit margin-bottom-sm"><text class="iconfont icon-bianjishuru"></text></view></view><view class="flex justify-around align-center margin-top"><view class="">设为默认</view><u-line length="15" direction="col"></u-line><view class="">删除地址</view></view></view><view class="text-center"><button class="cu-btn bg-brown">新增地址</button></view></view>
</template><script>export default {data() {return {};}}
</script><style lang="scss">
.edit{width: 80upx;height: 80upx;text-align: center;line-height: 80upx;background-color: #e6e6e6;border-radius: 50%;
}
.icon-youxiajiaogouxuan{color: #e7e7e7;
}
.cu-btn.lg{width: 50%;
}
.fixed {position: fixed;bottom: 0;left: 0;width: 100%;box-shadow: 0 0 10upx 2upx rgba(0, 0, 0, 0.2);
}
.icon-youxiajiaogouxuan{width: 50upx;height: 50upx;text-align: center;line-height: 50upx;background-color: #e6e6e6;border-radius: 20%;
}
.default{position: relative;overflow: hidden;
}
.default-cont{padding: 20upx 10upx 10upx;width: 100upx;background-color: #fae456;font-size: 12upx;text-align: center;position: absolute;top: -20upx;right: -40upx;transform: rotate(45deg);
}
</style>

uniapp 学习笔记三十结算页面结构搭建地址列表页面结构搭建相关推荐

uniapp 学习笔记二十二购物车页面结构搭建
uniapp 学习笔记二十二购物车页面结构搭建 cart.vue <template><view><view class="flex padding" ...
Mr.J-- jQuery学习笔记(三十二)--jQuery属性操作源码封装
扫码看专栏 jQuery的优点 jquery是JavaScript库,能够极大地简化JavaScript编程,能够更方便的处理DOM操作和进行Ajax交互 1.轻量级 JQuery非常轻巧 2.强大的 ...
tensorflow学习笔记(三十二):conv2d_transpose (解卷积)
tensorflow学习笔记(三十二):conv2d_transpose ("解卷积") deconv解卷积,实际是叫做conv_transpose, conv_transpose ...
【Unity 3D】学习笔记三十六：物理引擎——刚体
物理引擎就是游戏中模拟真是的物理效果.如两个物体发生碰撞,物体自由落体等.在unity中使用的是NVIDIA的physX,它渲染的游戏画面很逼真. 刚体刚体是一个很很中要的组件. 默认情况下,新创的 ...
angular学习笔记(三十)-指令(4)-transclude
from: http://www.cnblogs.com/liulangmao/p/3951865.html 本篇主要介绍指令的transclude属性: transclude的值有三个: 1.tra ...
[傅里叶变换及其应用学习笔记] 三十. 拉东变换
X射线断层摄影术(Tomography) 在商业上有两种不同的成像方法:CT.MRI,两种方法在实现方法上有部分相通的地方,这里讲述的是CT. 假设上图为一个身体剖面图,内含有各种粘性物质,如骨头.肌 ...
tensorflow学习笔记(三十四)：Saver(保存与加载模型)
Saver tensorflow 中的 Saver 对象是用于参数保存和恢复的.如何使用呢? 这里介绍了一些基本的用法. 官网中给出了这么一个例子: v1 = tf.Variable(..., na ...
软件工程之美学习笔记三十八 37 | 遇到线上故障，你和高手的差距在哪里？
<软件工作之美>材料地址:https://time.geekbang.org/column/article/97219 遇到线上故障,新手和高手的差距在哪里? 新手遇到复杂的线上故障,不知 ...
学习笔记三十：IO流（二）
你应将心思精心专注于你的事业上.日光不经透镜屈折,集于焦点,绝不能使物体燃烧.--毛姆本讲内容:文件流例一:图片或者文件的拷贝(注意:用的是文件字节流 ) 思路:先把图片读入到内存然后写入到某个文 ...
JAVA学习笔记(三十九)-打印流
import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.PrintStream; i ...

uniapp 学习笔记三十结算页面结构搭建地址列表页面结构搭建

uniapp 学习笔记三十结算页面结构搭建地址列表页面结构搭建相关推荐

最新文章

热门文章

uniapp 学习笔记三十 结算页面结构搭建地址列表页面结构搭建

uniapp 学习笔记三十 结算页面结构搭建地址列表页面结构搭建相关推荐

最新文章

热门文章

uniapp 学习笔记三十结算页面结构搭建地址列表页面结构搭建

uniapp 学习笔记三十结算页面结构搭建地址列表页面结构搭建相关推荐