这是我uniapp 的抽奖数据组组件代码 , 在首页调用的 , 帮我优化这个页面的样式 , 现在是一个一横排 我想2条数据是两横排 , 但是如果三个数据 那就横着三个封面图一横排 超过3个我也就不展示了 因为这里我只需要请求三条数据 最多的 ; 然后三个一排的话 每个图片封面图上面 底部区域展示对应的 已参与比例 看是进度条好一些还是怎么好一些 看着设计好看点就行 ,主要突出 抽奖的紧迫感 火爆感 ; 因为不想太占用首页的高度空间 , 然后代码里面 没有用的都帮我去掉, 精简点 , 这是我的全部代码 要在我的代码上优化:<template> <view class="box" v-if="lists.length > 0"> <view class="bg"> <view class="titles"> <view class="flex align-center"> <image src="https://apps.xiaodan01.com/xcx/shop/ctitle.png" style="width: 70.5px;height: 20.5px;margin-top: 4px;"></image> </view> <navigator url="/pages/activity/seckill/seckill-list/index"> <view class="flex align-center look"> <text class="text-sm" style="color: #5F6166;">查看更多</text> <text class="cuIcon-right margin-left-xs" style="font-size: 20rpx; color: #5F6166;"></text> </view> </navigator> </view> </view> <view> <view class="margin-top-sm"> <block v-for="(item,index) in lists" :key="index"> <!-- <view class="list-item padding-tb-sm flex" @click="navToDetail(item)"> --> <view class="list-item flex" @click="toDeatil(item)"> <view class="item-image radius overHidden"> <fu-image :src="item.icon" mode="aspectFill"></fu-image> <view class="time-box flex justify-center align-center" :style="'background:'+item.skill_background"> {{item.skill_status_text}} </view> </view> <view class="flex flex-direction flex-sub"> <view class="text-cut-2 text-df text-333 text-bold item-title">{{item.name}}</view> <view class="flex align-center justify-between item-score" style="margin-top: 27rpx;"> <view class="cu-progress xs" style="width: 70%;border-radius: 6rpx;"> <view class="" :style="{ width: item.rate}" style="background: #FE6F5C;"></view> </view> <view class="score text-999" style="margin-left: 3px;">{{item.rate}}</view> </view> <view class="flex" style="margin-top: 16rpx;flex-direction: column;" > <view class="text-999 margin-right-sm text-xs">{{item.sdate}} - {{item.edate}}</view> <view class="text-999 margin-right-sm text-xs">{{item.draw_txt}}</view> </view> <view class="flex margin-top-xs justify-end"> <view style="margin-top: 16rpx;"> <view v-if="item.status == 1 && item.user_joined == false && item.can_join" class="qiang" :style="'background:'+item.skill_background"> <text>立即参与</text> </view> <view v-if="item.status == 1 && item.user_joined" class="qiang" :style="'background:'+item.skill_background"> <text>已参与</text> </view> <view v-if="item.status == 0" class="qiang" :style="'background:'+item.skill_background"> <text>待开始</text> </view> <view v-if="item.status == 2" class="qiang" :style="'background:'+item.skill_background"> <text>已结束</text> </view> </view> </view> </view> </view> </block> </view> </view> </view> </template> <script> const _tabs = [{ model: '00:00', text: '即将开始', start: 0 }, { model: '02:00', text: '即将开始', start: 2 }, { model: '04:00', text: '即将开始', start: 4 }, { model: '06:00', text: '即将开始', start: 6 }, { model: '08:00', text: '即将开始', start: 8 }, { model: '10:00', text: '即将开始', start: 10 }, { model: '12:00', text: '即将开始', start: 12 }, { model: '14:00', text: '即将开始', start: 14 }, { model: '16:00', text: '即将开始', start: 16 }, { model: '18:00', text: '即将开始', start: 18 }, { model: '20:00', text: '即将开始', start: 20 }, { model: '22:00', text: '即将开始', start: 22 }, ]; export default { components: { // benCountDown, }, data() { return { lists: [], tabs: Object.freeze(_tabs), nowTabs: [], curIndex: 0, start: null } }, computed: { isLogin() { return this.$store.getters.isLogin; }}, methods: { init() { console.log(123) let nowDate = new Date(); let _hour = nowDate.getHours(); let _count; if (_hour % 2 === 0) { _count = _hour; } else { _count = _hour - 1; } let _startIndex = _count / 2; const _tabs = this.tabs.filter((item, index) => { return index >= _startIndex && index <= _startIndex + 4 }) if (_tabs.length < 5) { let _len = 5 - _tabs.length; for (let i = 0; i < _len; i++) { _tabs.push(this.tabs[i]) } } this.nowTabs = _tabs; this.start = this.nowTabs[0].start; this.getSeckill(); }, // 获取抽奖活动 getSeckill() { let data = { // start_time: this.start, // end_time: this.start + 2, page: this.page, list_rows: this.size, type: 1, user_id: global.userInfo && global.userInfo.id || 0, keyword:this.search }; console.log(data); this.$api.get(global.apiUrls.postSeckillList, data) .then(res => { console.log('秒杀', res); if (res.statusCode == 200 && res.data.code == 1) { res = res.data; var totalSize = res.data.total; var curPageData = res.data.data; if (this.page == 1) this.lists = []; this.lists = this.lists.concat(curPageData); console.log(this.lists.length+'<'+totalSize); if (this.lists.length < totalSize) { this.status = 'more'; this.page++; } else { this.status = 'noMore'; } }else{ this.lists = []; } this.isInit = true; this.isShowLoading = false uni.stopPullDownRefresh(); }) }, toDeatil(item) { this.$urouter.navigateTo({ url: '/pages/activity/seckill/seckill-detail/index', params: { id: item.id || 0, } }); }, tabSelect(index, start) { this.curIndex = index; this.start = this.nowTabs[index].start; this.getSeckill(); }, refresh() { this.init(); this.$refs.count.refresh(); }, // 发送通知 handleRemind(item) { const { goods_id, activity_id, activity_type, sku_id } = item; this.$util.actionAuth(() => { let _notifyTime = (Math.abs(this.start - 1)).toString().padStart(2, '0') + ':57' // #ifdef MP-WEIXIN uni.requestSubscribeMessage({ tmplIds: ['x3ljpUAnxYgi-u6iQcaRuP-Z3fVoJ5o22KTDqiNhPMk'], complete: () => { this.$api.post(global.apiUrls.postSendNotice, { goodsId: goods_id, pageUrl: `/pages/activity/seckill/seckill-detail?id=${goods_id}&sku_id=${sku_id}&activity_id=${activity_id}`, type: 1, notifyTime: _notifyTime, }) .then(res => { res = res.data; console.log('消息通知', res); if (res.code == 1) { this.$message.info('设置成功,将在开抢前三分钟收到提醒'); this.getSeckill(); } else { this.$message.info(res.msg); } }) .catch(err => { this.$message.info('该功能暂未开发'); console.log(err); }) }, }) // #endif // #ifdef APP-PLUS this.$api.post(global.apiUrls.postSendNotice, { goodsId: goods_id, pageUrl: `/pages/activity/seckill/seckill-detail?id=${goods_id}&sku_id=${sku_id}&activity_id=${activity_id}`, type: 2, notifyTime: _notifyTime, }) .then(res => { res = res.data; console.log('消息通知', res); if (res.code == 1) { this.$message.info('设置成功,将在开抢前三分钟收到提醒'); this.getSeckill(); } else { this.$message.info(res.msg); } }) .catch(err => { this.$message.info('该功能暂未开发'); console.log(err); }) // #endif // #ifdef H5 this.$message.info('H5不支持推送功能'); // #endif }) }, // 取消通知 handleUnRemind(item) { const { goods_id } = item; this.$util.actionAuth(() => { let _notifyTime = (Math.abs(this.start - 1)).toString().padStart(2, '0') + ':57' this.$api.post(global.apiUrls.postCancelNotice, { goodsId: goods_id, // #ifdef MP-WEIXIN type: 1, // #endif // #ifdef APP-PLUS type: 2, // #endif notifyTime: _notifyTime, }) .then(res => { console.log('取消通知', res); res = res.data; if (res.code == 1) { this.$message.info('抽奖提醒已取消,您可能会抢不到哟~'); this.getSeckill(); } else { this.$message.info(res.msg); } }) .catch(err => { console.log(err); }) }) }, }, filters: { filterPrice(val) { if (!val) return ''; return Number(val).toFixed(1); } }, created() { this.init(); } } </script> <style lang="scss" scoped> .margin-left-sm{ margin-left: 8px !important; } .box { background-color: #FFFFFF; // margin: 0 24rpx; border-radius: 24rpx; .bg{ // background: url('https://apps.xiaodan01.com/xcx/activity/time-minute-ng.png') no-repeat; background-size: 100% 100%; border-radius: 24rpx; } .titles { height: 100rpx; display: flex; justify-content: space-between; align-items: center; padding: 0 24rpx; } .top-tab{ display: flex; .tab-item{ flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; .number{ font-size: 30rpx; font-weight: bold; color: #999999; } .text{ display: flex; flex-direction: row; justify-content: center; align-items: center; font-size: 20rpx; color: #999999; border-radius: 20rpx; // padding: 5rpx 10rpx; margin-top:10rpx; } } .tab-item.current{ .number{ color: #FF503B; font-size: 40rpx; } .text{ color: #FFFFFF; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 120rpx; height: 32rpx; text-align: center; background: #FF503B; box-shadow: 0px 3rpx 6rpx rgba(232, 34, 34, 0.27); margin-top:6rpx; } } } .list-item { margin-bottom: 15rpx; background: #ea4e4512; border-radius: 5px; padding: 10rpx; .item-image { width: 246rpx; height: 246rpx; min-width: 246rpx; min-height: 246rpx; margin-right: 20rpx; border-radius: 8rpx; position: relative; image { width: 100%; height: 100%; border-radius: 8rpx; } } .item-title { word-break: break-all; } .item-type { margin: 16rpx 0; font-size: 24rpx; line-height: 33rpx; } .item-score { margin-top: 10rpx; .out-box { width: 220rpx; height: 8rpx; border-radius: 4rpx; background-color: #DBDBDB; margin-right: 24rpx; } .inner-box { height: 100%; width: 50%; border-radius: 4rpx; background: $bgtheme; /* 标准的语法(必须放在最后) */ } } .btn-right { width: 120rpx; color: #fff; font-size: 20rpx; height: 66rpx; line-height: 66rpx; text-align: center; border-radius: 8rpx; } .confirm { background: $bgtheme; } .notice { background: #FFE167; } .cancel { background: $bgtheme; } .disabled { background: #FFE167; } } // .list-item+.list-item { // border-top: 1rpx solid rgba(0, 0, 0, .1); // } .empty-box{ width: 100%; height: 150rpx; line-height: 50rpx; font-size: 24rpx; color: #999999; text-align: center; font-weight: bold; color: rgba(191, 191, 191, 1); } } .qiang { width: 201rpx; height: 50rpx; background: #FF503B; opacity: 1; border-radius: 56rpx; font-size: 24rpx; font-family: PingFang SC; font-weight: 400; line-height: 50rpx; color: #FFFFFF; letter-spacing: 5rpx; text-align: center; } .block-246 { width: 246rpx; height: 246rpx; min-width: 246rpx; min-height: 246rpx; background-color: #F8F8F8; position: relative; image { width: 100%; height: 100%; } .tag { position: absolute; text-align: center; line-height: 40rpx; font-size: 18rpx; font-family: PingFang SC; font-weight: 400; color: #FFFFFF; top: 0; left: 0; width: 79rpx; height: 40rpx; background:url('https://apps.xiaodan01.com/xcx/activity/feng.png') no-repeat center/cover; } } .color1 { color: $theme; } .color2 { color: #FA9C24; } @keyframes heart{ 0%{ font-size: 20rpx; } 50%{ font-size: 26rpx; } 100%{ font-size: 20rpx; } } .bg-theme{ background: #FE6B59!important; } .time-image{ width: 117rpx; height: 23rpx; } .look{ // width: 114rpx; font-size: 24rpx; font-family: PingFang SC; font-weight: 400; color: #5F6166; height: 36rpx; // background: url('https://apps.xiaodan01.com/xcx/activity/time-more-bg.png') no-repeat; // background-size: 100% 100%; text{ margin-left: 13rpx; } image{ width: 21rpx; height: 20rpx; } } .cu-progress{ border-radius: 6rpx; } .radius{ border-radius: 30rpx 0 0 0; } </style>
最新发布