小程序入门：我的界面设计

一、页面效果

先看一下页面设计出来的效果：

二、实现代码

（一）myindex.wxml：

<!--pages/myindex/myindex.wxml-->
<view class='amountBg'><view class='img'><image src="../../images/userinfo.jpg" style='width:86px;height:86px;'></image></view><view class='account'><view class="name">Plute.</view><view class='manage_text'>普通用户</view></view><view class='set'><image src='/images/icon/set.png'></image></view>
</view>
<view class='contain'><view class='order'><view class='order_text'>我的订单</view><view class='cut'></view><view class='order_list'><view class='cut'></view><view class='desc'><view class="desc_img"><image src='../../images/icon/pay.png'></image></view><view>已付款</view></view><view class='desc'><view class='desc_img'><image src='../../images/icon/car.png'></image></view><view>已取货</view></view><view class='desc'><view class='desc_img'><image src='../../images/icon/complate.png'></image></view><view>已完成</view></view></view></view><view class='clear'></view><view class='item'><view class='icon'><image src='../../images/icon/address.png'></image></view><view class='itemname'><view>收货地址</view></view></view><view class='hr'></view><view class='item' ><view class='icon'><image src='../../images/icon/star.png'></image></view><view class='itemname'><view>我的收藏</view></view></view><view class='hr'></view><view class='item'><view class='icon'><image src='../../images/icon/aggrement.png'></image></view><view class='itemname'><view>问题反馈</view></view></view><view class='hr'></view><view class='item'><view class='icon'><image src='../../images/icon/fankui.png'></image></view><view class='itemname'><view>协议说明</view></view></view>
</view>

（二）myindex.wxss

Page{background-color: #f4f4f4;
}
.amountBg{height: 330rpx;background:linear-gradient(to top,#de4e30,#910327);display: flex;flex-direction: row;
}
.img{margin-left:60rpx; margin-top:50rpx;
}
.account{color: #ffffff;margin-left: 30rpx;margin-top: 68rpx;
}
.name{font-size: 50rpx;
}
.manage_text{font-size: 30rpx;color: white;margin-top: 10rpx;border:2rpx solid #9b9b9b;border-radius: 40rpx;text-align: center;
}
.set{margin-top: 80rpx;margin-left: 280rpx;
}
.set image{width: 46rpx;height: 46rpx;
}
.order{width:92%;height: 260rpx;margin:0 auto;background-color: #ffffff;border-radius: 20rpx;text-align: center;margin-bottom: 40rpx;margin-top: -80rpx;display: flex;flex-direction: column;box-shadow:0rpx  8rpx  8rpx 3rpx rgb(221, 220, 220);
}
.order_text{font-size: 44rpx;color: gray;margin-top: 20rpx;text-align: left;height:60rpx;margin-left: 30rpx;
}
.cut{opacity: 0.2;height: 2rpx;margin-top: 20rpx;background-color: #000000;
}
.order_list{display: flex;flex-direction:row;
}
.desc{color: gray;width: 33%;font-size: 30rpx;
}
.item{background-color: #ffffff;display: flex;margin:0 auto;flex-direction: row;height: 100rpx;align-items: center;width: 92%;margin-top: 20rpx;border-radius: 20rpx;box-shadow:0rpx  8rpx  8rpx 3rpx rgb(221, 220, 220);
}
.icon{width: 100rpx;text-align: center;margin-top: 16rpx;
}
.itemname{color: gray;width: 40%;font-size: 34rpx;
}
.hr{height: 2rpx;background-color: #000000;width: 90%;margin: 0 auto;opacity: 0.2;
}
.remark{font-weight: normal;margin-top:10rpx;
}
.right{color: #707075;width: 40%;text-align: right;
}
.desc_img image{margin-top: 16rpx;width: 90rpx;height: 90rpx;
}
.icon image{height: 62rpx;width: 62rpx
}

实现的页面为静态页面，没有添加点击效果，可以自己添加相应的bindtap事件响应。

小程序入门：我的界面设计相关推荐

微信小程序入门---01
目录微信小程序入门一.小程序简介二.第一个小程序二.小程序代码的构成三.WXML模块四.WXSS 样式五.JS 逻辑交互六.组件七.API 八.WXML 模板语法 - 数据绑定九. ...
从零开始的微信小程序入门教程(一)
从零开始的微信小程序入门教程(一) 之前说要和同事一起开发个微信小程序项目,现在也在界面设计,功能定位等需求上开始实施了.所以在还未正式写项目前,打算在空闲时间学习下小程序.本意是在学习过程中结合实践 ...
从零开始的微信小程序入门教程
之前说要和同事一起开发个微信小程序项目,现在也在界面设计,功能定位等需求上开始实施了.所以在还未正式写项目前,打算在空闲时间学习下小程序.本意是在学习过程中结合实践整理出一个较为入门且不是很厚的教程, ...
A095_day01_微信小程序入门与组件
目录微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...
微信小程序入门篇（二）
上篇我们讲解了一下小程序的整体架构,今天来讲一下,一个页面的具体实现原理,好注意听,下面要开始画重点啦~哈哈页面的构成还记得我们在上篇文章中讲解如何加入一个界面吗?在app.json中的pages ...
【微信小程序】微信小程序入门与实战-个人笔记
微信小程序入门与实战文章目录微信小程序入门与实战 1 初识微信小程序 1-1 2020版重录说明 1-2 下载小程序开发工具 1-3 新建小程序项目 1-4 小程序appid的注册 1-5 新版小 ...
微信小程序入门与实战（七月）
微信小程序入门与实战(七月) 第1章初识微信小程序第2章小程序的基本目录结构与文件作用剖析 2-1 小程序页面的4种基本文件类型详解第3章 rpx响应式单位与flex布局 3-3 新建页面的技 ...
微信小程序开发 | 微信小程序入门
微信小程序入门 1.1 初识微信小程序 1.1.1 什么是微信小程序 1.1.2 微信小程序的账号 1.1.3 微信小程序的特点 1.1.4 微信小程序的发展前景 1.2 开发环境搭建 1.2.1 注 ...
小程序真机调试访问不了接口_小程序入门
之前写了一个去水印的小程序,详情可查看「短视频去水印工具小程序版-去水印Pro版」一文,我个人对小程序也是从完全陌生到入门阶段,这篇文章就把入门的过程和遇到的问题记录一下. 一.小程序注册想要开发小 ...
小程序的ui应该怎么设计?
UI设计中小程序的设计是很多UI设计师在工作中会碰到的,一款好的小程序设计页面,会带来效果很好的用户体验,下面小编就为大家详细的分享一下具体小程序的ui应该怎么设计? UI设计培训分享:小程序的ui应 ...

小程序入门：我的界面设计

一、页面效果

二、实现代码

（一）myindex.wxml：

（二）myindex.wxss

小程序入门：我的界面设计相关推荐

最新文章

热门文章