样式集（一）通用商品列表样式

上图：

上代码：

// pages/choosePackage/choosePackage.js
Page({data: {list:[1,2,3],},onLoad: function (options) {},nav_upInfo(){wx.navigateTo({url: '../upInfo/upInfo',})},
})

<!--pages/choosePackage/choosePackage.wxml-->
<view class="item" wx:for='{{list}}' wx:key=""><view class="p_r" catchtap="nav_upInfo"><view style="width:190rpx;"><image class="product" src="/img/img1.png"></image></view><view><view class="title">华为光猫联通千兆光纤畅爽冰激凌99元套餐</view><view class="p_r" style="width:70%;"><view class="tag">担保金</view><view class="detail">199元</view></view></view></view>
</view>

/* pages/choosePackage/choosePackage.wxss */
page{background-color: #F0F0F8;font-size: 34rpx;
}
.item{margin: 30rpx 0 30rpx 0;width: 94%;margin-left: 3%;background-color: #ffffff;padding-top: 35rpx;padding-bottom: 35rpx;position: relative;border-radius: 12rpx;
}
.title{margin-left: 30rpx;font-size: 32rpx;width: 86%;/* font-weight: 600; */letter-spacing:2rpx;
}
.detail{margin-left: 20rpx;font-size: 32rpx;margin-top: 28rpx;/* font-weight: 600; */color: #ff8e00;}
.tag{font-size: 26rpx;border-radius: 50rpx;color: white;background-color: #ff8e00;height: 40rpx;padding: 5rpx 26rpx 5rpx 26rpx;margin-top:27rpx;margin-left: 30rpx;}
.product{width: 160rpx;height: 160rpx;margin-left: 30rpx;
}

样式集（一）通用商品列表样式相关推荐

悦轩饼家-商品列表样式
1.什么是商品列表页面? 商品列表页面(有时称为 PLP 或类别登录页面)是网站上的搜索过滤器根据不同类别显示的产品页面,访问者可以在显示的页面里找到他们感兴趣的更多信息,也可以将看到的产品和服务等项 ...
CSS中列表样式的简介
什么是CSS列表样式: 所谓的CSS列表样式,肯定和列表有关,但是列表我们要清楚地是,列表可以分为有序列表和无序列表.于是我们的列表样式又可以分为三种类型,第一是设置不同形状的标记的无序列表,第二是设 ...
css边框样式和列表样式
边框样式图片边框局部边框列表样式
如何用CDR创建样式与样式集
样式是一组定义对象属性的格式化属性,如轮廓或填充.例如,要定义轮廓样式,您可以指定轮廓宽度.颜色和线条类型等属性.要定义字符样式,您可以指定字体类型.字体样式和大小.文本颜色和背景色.字符位置.大写等 ...
《React Native移动开发实战》一一3.4 完善商品列表——ListView组件
3.4 完善商品列表--ListView组件在完善了搜索框和轮播广告之后,对电商应用的首页的改造已经初见成效.最后,我们要让商品列表的内容也变得更加丰富. 3.4.1 对图片资源进行重构添加商品图 ...
微信小程序——商品列表
主页面 <view class="container"><googsList goodsClassList="{{goodsClassList}}&qu ...
CSS——商品列表子菜单的实现
文章目录前言一.结构分析二.实现过程 1.HTML结构 2.CSS样式总结前言今天和大家分享的是商品列表子菜单的实现过程,这个应用在很多平台都有看到,感兴趣的小伙伴可以驻足翻阅一下~ 一. ...
html三角形无序列表样式,Keynote创建项目符号列表或编号列表
文本框会添加到幻灯片上. 选择要格式为列表的文本,然后从中选取一个选项. 2.选定了文本框后,在"格式"检查器的"文本"面板中,从"项目符号与列表& ...
CSS----字体、文本样式/列表样式
color 为字体指定颜色颜色取值可以是对应颜色单词.rgb(0,0,0)里面对应分别是红绿蓝.rgba(255,0,0,0.2)a对应的是后面0.2,这个值的取值范围是0~1. <style ...

样式集（一）通用商品列表样式

样式集（一）通用商品列表样式相关推荐

最新文章

热门文章

样式集（一） 通用商品列表样式

样式集（一） 通用商品列表样式相关推荐

最新文章

热门文章

样式集（一）通用商品列表样式

样式集（一）通用商品列表样式相关推荐