@charset "UTF-8"; /** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 * * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 */ /* 颜色变量 */ /* 行为相关颜色 */ /* 文字基本颜色 */ /* 背景颜色 */ /* 边框颜色 */ /* 尺寸变量 */ /* 文字尺寸 */ /* 图片尺寸 */ /* Border Radius */ /* 水平间距 */ /* 垂直间距 */ /* 透明度 */ /* 文章场景相关 */ .pages-home { background-color: #ffffff; min-height: calc(100vh); position: relative; } .pages-home .map-info { position: absolute; z-index: 99; width: 100%; top: 20rpx; padding: 21rpx; display: flex; } .pages-home .map-info .position { color: #ffffff; display: flex; align-items: center; } .pages-home .map-info .input { flex: 1; margin-left: 30rpx; } .pages-home .map-info .input .u-input--circle { background-color: #EEFDF8; } .pages-home .search-box { width: 710rpx; bottom: 0; z-index: 9; overflow: hidden; } .pages-home .tab { background-color: #ffffff; border-radius: 30rpx 30rpx 0rpx 0rpx; margin-top: -58rpx; position: relative; z-index: 99; display: flex; align-items: center; justify-content: space-between; padding: 45rpx; } .pages-home .tab .tabItem { text-align: center; } .pages-home .tab .tabItem image { width: 100rpx; height: 100rpx; } .pages-home .tab .tabItem .text { margin-top: 25rpx; font-size: 26rpx; font-family: Alibaba PuHuiTi; font-weight: 400; color: #333333; } .pages-home .sectionTitle { display: flex; align-items: center; margin-bottom: 21rpx; } .pages-home .sectionTitle image { width: 34rpx; height: 39rpx; } .pages-home .sectionTitle text { font-size: 34rpx; font-family: Alibaba PuHuiTi; font-weight: 400; color: #333333; margin-left: 15rpx; } .pages-home .gridContainer { margin-top: 13rpx; padding: 0 24rpx; } .pages-home .gridContainer .recommendItem image { width: 100%; height: 300rpx; border-radius: 27rpx; } .pages-home .gridContainer .recommendItem .nameText { position: absolute; height: 50rpx; bottom: 0rpx; line-height: 50rpx; background-color: rgba(0, 0, 0, 0.5); color: #ffffff; z-index: 99; width: 100%; text-align: center; } .pages-home .gridContainer .recommendItem .flag { width: 100rpx; height: 50rpx; line-height: 50rpx; text-align: center; background: #08BF77; position: absolute; border-radius: 27rpx 0px 27rpx 0px; top: 0; left: 0; font-size: 24rpx; color: #ffffff; } .pages-home .gridContainer .recommendItem .new { background: #08BF77; } .pages-home .gridContainer .recommendItem .people { background: #F4563C; } .pages-home .list-item { background: #F4F7F6; } .pages-home .list-item .cover { width: 200rpx; height: 200rpx; } .pages-home .list-item .itemTitle { color: #333333; font-size: 34rpx; } .pages-home .list-item .subTitle { color: #C0C5CA; font-size: 24rpx; margin-top: 6rpx; } .pages-home .list-item .timeInfo { margin: 15rpx 0; display: flex; align-items: center; justify-content: space-between; } .pages-home .list-item .time-long { display: flex; align-items: center; } .pages-home .list-item .time-long image { width: 30rpx; height: 30rpx; } .pages-home .list-item .time-long text { color: #71787E; font-size: 24rpx; margin-left: 14rpx; } .pages-home .list-item .lookNum { color: #71787E; font-size: 24rpx; } .pages-home .list-item .priceContent { display: flex; align-items: center; justify-content: space-between; } .pages-home .list-item .priceContent text { color: #F4563C; font-size: 30rpx; } .pages-home .list-item .priceContent .item-btn { text-align: center; padding: 15rpx 33rpx; background: #08BF77; border: 1px solid #EAEAEA; border-radius: 27px; } .pages-home .list-item .f-icontext { font-size: 18rpx; } .pages-home .list-item .text-delete { font-size: 20rpx; color: #B9B9B9; } .coupon-popup { width: 658rpx; height: 865rpx; position: relative; } .coupon-popup .bg-img { width: 100%; height: 100%; } .coupon-popup .icon-close { font-size: 60rpx; position: absolute; top: 50rpx; right: 60rpx; z-index: 999; } .coupon-popup .coupon-info { position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; } .coupon-popup .coupon-info .tops { width: 480rpx; color: #FB4523; position: absolute; top: 260rpx; } .coupon-popup .coupon-info .tops > view:nth-child(1) { font-weight: bold; font-size: 30rpx; } .coupon-popup .coupon-info .lists { width: 500rpx; height: 300rpx; padding: 10rpx; overflow-x: hidden; position: absolute; bottom: 222rpx; } .coupon-popup .coupon-info .lists .list { width: 420rpx; height: 130rpx; margin-bottom: 10rpx; margin-top: 5rpx; position: relative; } .coupon-popup .coupon-info .lists .list > image { width: 100%; height: 100%; } .coupon-popup .coupon-info .lists .list > view { position: absolute; width: 100%; height: 100%; top: 0; left: 8rpx; } .coupon-popup .coupon-info .lists .list > view > view:nth-child(1) { width: 38%; } .coupon-popup .coupon-info .lists .list > view > view:nth-child(2) { display: flex; justify-content: center; flex: 1; padding: 0 15rpx; box-sizing: border-box; } .coupon-popup .coupon-info .lists .list > view .price { font-size: 30rpx; color: #FB4523; } .coupon-popup .coupon-info .lists .list > view .title { font-size: 30rpx; line-height: 36rpx; font-weight: bold; } .coupon-popup .coupon-info .lists .list > view .price_text { color: #ccc; } .coupon-popup view.btns { width: 100%; position: absolute; height: 82rpx; bottom: 18rpx; left: 0; } .coupon-popup view.btns > view { width: 422rpx; height: 82rpx; border-radius: 40rpx; font-size: 34rpx; color: #FFFFFF; }