技能竞赛子库小程序开发云计算竞赛子库-39小程序应用开发.docxVIP

商店界面开发 参照图 4 小程序页面的布局、元素和配色，实现微信 o2o 商城的“商店”界面开发。将“商店”界面截图和代码提交到答题框。 参考答案 首先需要在 pages/store/wxss 的 style.wxss 文件中添加代码 view { /* color:#81c7d1; */ color:#232323; font-size:32rpx; } button[type=primary][plain] { border: 1px solid #81c7d1; color: #81c7d1; } button[type=primary] { color:#FFFFFF; background-color:#81c7d1; } .topbar{ background: #f5f5f5; line-height: 64rpx; position: fixed; width: 100%; z-index: 1000; border-bottom: 2rpx solid #e1e1e1; } .topbar-2nd { margin-top:90rpx; background: #f3f2f7 !important; } .topbar image { width: 48rpx; height: 48rpx; margin:20rpx; margin-right: 10rpx; margin-bottom:0; } .topbar .avatar { border-radius: 50%; } .topbar text{ height: 48rpx; font-size:28rpx; line-height: 88rpx; margin-left: 10rpx; margin-top: 5rpx; } .font-bold { font-weight: 500; } .font-s16 { font-size:32rpx; } .font-s15 { font-size:30rpx; } .font-s14 { font-size:28rpx; line-height: 36rpx; } .text-primary { color:#FF6347; } .view-row{ display: flex; flex-direction:row; } .block { display: flex; flex-direction:column; } .block .row { flex-direction: row; } .block .column { flex-direction: column; } .block .block-content { padding: 20rpx; width: 100%; padding-left:0; padding-right:0; } .block .block-title { padding: 20rpx; width: 100%; padding-left:0; padding-right:0; font-size:36rpx; font-weight: 500; } .block .form-group { margin-top:20rpx; margin-left:40rpx; margin-bottom:20rpx; } .block .form-group label { margin-top:10rpx; } .block .form-group input { margin-top:10rpx; border-bottom: 2rpx solid #f2f2f2; } .block .form-group picker { padding-top:10rpx; padding-bottom: 20rpx; border-bottom: 2rpx solid #f2f2f2; } .table-list { display: flex; flex-direction:column; } .table-list .row { display: flex; flex-direction:row; } .table-list .column { flex-direction: column; } .table-list .row image { width:100%; } .table-list .row view{ height: auto; } .view-column { display: flex; flex-direction:column; } .border-1 { border: 2rpx solid #f2f2f2; } .border-t-1 { border