UI
This commit is contained in:
parent
a5ba270d08
commit
c14ef73398
|
|
@ -1,233 +1,219 @@
|
|||
<template>
|
||||
<view class="prize-log-wrapper">
|
||||
<!-- 分类标签 -->
|
||||
<scroll-view class="sub-tab" scroll-x>
|
||||
<view
|
||||
v-for="(item, i) in subTab"
|
||||
:key="i"
|
||||
class="sub-tab-item"
|
||||
:class="{ act: currentSubTab === i, unact: currentSubTab !== i }"
|
||||
@click="onSubTabChange(i)"
|
||||
>
|
||||
{{ item.shang_title }}
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="prize-log-wrapper">
|
||||
<!-- 分类标签 -->
|
||||
<scroll-view class="sub-tab" scroll-x>
|
||||
<view v-for="(item, i) in subTab" :key="i" class="sub-tab-item"
|
||||
:class="{ act: currentSubTab === i, unact: currentSubTab !== i }" @click="onSubTabChange(i)">
|
||||
{{ item.shang_title }}
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 中奖记录列表 -->
|
||||
<view v-if="logList.length > 0" class="log-list">
|
||||
<view v-for="(item, i) in logList" :key="i" class="log-item br20">
|
||||
<!-- 用户头像 -->
|
||||
<view class="avatar">
|
||||
<image :src="item.user_info.headimg" lazy-load></image>
|
||||
</view>
|
||||
<!-- 中奖记录列表 -->
|
||||
<view v-if="logList.length > 0" class="log-list">
|
||||
<view v-for="(item, i) in logList" :key="i" class="log-item br20">
|
||||
<!-- 用户头像 -->
|
||||
<view class="avatar">
|
||||
<image :src="item.user_info.headimg" lazy-load></image>
|
||||
</view>
|
||||
|
||||
<!-- 用户信息 -->
|
||||
<view class="info">
|
||||
<view class="name hang1">{{ item.user_info.nickname }}</view>
|
||||
<view class="time">{{ item.addtime }}</view>
|
||||
</view>
|
||||
<!-- 用户信息 -->
|
||||
<view class="info">
|
||||
<view class="name hang1">{{ item.user_info.nickname }}</view>
|
||||
<view class="time">{{ item.addtime }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 中奖信息 -->
|
||||
<view class="prize">
|
||||
<view class="pic flex">
|
||||
<image
|
||||
class="img100"
|
||||
:src="item.goodslist_imgurl"
|
||||
lazy-load
|
||||
></image>
|
||||
</view>
|
||||
<view class="column align-end">
|
||||
<view
|
||||
class="prize-shang center"
|
||||
:style="{ background: item.shang_color }"
|
||||
>
|
||||
{{ item.shang_title }}
|
||||
</view>
|
||||
<view class="flex mt10">
|
||||
<view class="title hang1">{{ item.goodslist_title }}</view>
|
||||
<view class="num">×{{ item.prize_num }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 中奖信息 -->
|
||||
<view class="prize">
|
||||
<view class="pic flex">
|
||||
<image class="img100" style="border-radius: 16rpx;" :src="item.goodslist_imgurl" lazy-load></image>
|
||||
</view>
|
||||
<view class="column align-end">
|
||||
<view class="prize-shang center" :style="{ background: item.shang_color }">
|
||||
{{ item.shang_title }}
|
||||
</view>
|
||||
<view class="flex mt10">
|
||||
<view class="title hang1">{{ item.goodslist_title }}</view>
|
||||
<view class="num">×{{ item.prize_num }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 无数据提示 -->
|
||||
<view v-else class="empty-tip">暂无中奖记录</view>
|
||||
</view>
|
||||
<!-- 无数据提示 -->
|
||||
<view v-else class="empty-tip">暂无中奖记录</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "DetailPrizeLog",
|
||||
props: {
|
||||
// 分类标签列表
|
||||
subTab: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
// 中奖记录列表
|
||||
logList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
// 当前选中的分类
|
||||
currentSubTab: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 切换分类
|
||||
onSubTabChange(index) {
|
||||
if (index === this.currentSubTab) return;
|
||||
this.$emit("sub-tab-change", index);
|
||||
},
|
||||
},
|
||||
};
|
||||
export default {
|
||||
name: "DetailPrizeLog",
|
||||
props: {
|
||||
// 分类标签列表
|
||||
subTab: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
// 中奖记录列表
|
||||
logList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
// 当前选中的分类
|
||||
currentSubTab: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 切换分类
|
||||
onSubTabChange(index) {
|
||||
if (index === this.currentSubTab) return;
|
||||
this.$emit("sub-tab-change", index);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.prize-log-wrapper {
|
||||
width: 100%;
|
||||
.prize-log-wrapper {
|
||||
width: 100%;
|
||||
|
||||
// 分类标签栏
|
||||
.sub-tab {
|
||||
white-space: nowrap;
|
||||
padding: 30rpx 0 10rpx;
|
||||
// 分类标签栏
|
||||
.sub-tab {
|
||||
white-space: nowrap;
|
||||
padding: 30rpx 0 10rpx;
|
||||
|
||||
.sub-tab-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 20rpx;
|
||||
height: 50rpx;
|
||||
margin-left: 30rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
border-radius: 8rpx;
|
||||
transition: all 0.2s;
|
||||
.sub-tab-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 20rpx;
|
||||
height: 50rpx;
|
||||
margin-left: 30rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
border-radius: 8rpx;
|
||||
transition: all 0.2s;
|
||||
|
||||
// 活跃状态
|
||||
&.act {
|
||||
color: #333333;
|
||||
background: #e6f791;
|
||||
}
|
||||
// 活跃状态
|
||||
&.act {
|
||||
color: #333333;
|
||||
background: #e6f791;
|
||||
}
|
||||
|
||||
// 非活跃状态
|
||||
&.unact {
|
||||
color: #333333;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
// 非活跃状态
|
||||
&.unact {
|
||||
color: #333333;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 中奖记录列表
|
||||
.log-list {
|
||||
padding: 1rpx 30rpx 30rpx;
|
||||
// 中奖记录列表
|
||||
.log-list {
|
||||
padding: 1rpx 30rpx 30rpx;
|
||||
|
||||
.log-item {
|
||||
height: 144rpx;
|
||||
padding: 0 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
background: #f8f8f8;
|
||||
.log-item {
|
||||
height: 144rpx;
|
||||
padding: 0 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
background: #f8f8f8;
|
||||
|
||||
// 用户头像
|
||||
.avatar {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
background: #9d9d9d;
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
// 用户头像
|
||||
.avatar {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
background: #9d9d9d;
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 用户信息
|
||||
.info {
|
||||
width: 230rpx;
|
||||
margin-left: 20rpx;
|
||||
// 用户信息
|
||||
.info {
|
||||
width: 230rpx;
|
||||
margin-left: 20rpx;
|
||||
|
||||
.name {
|
||||
font-size: 20rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
.name {
|
||||
font-size: 20rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.time {
|
||||
margin-top: 10rpx;
|
||||
white-space: nowrap;
|
||||
font-size: 16rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
.time {
|
||||
margin-top: 10rpx;
|
||||
white-space: nowrap;
|
||||
font-size: 16rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
// 中奖物品信息
|
||||
.prize {
|
||||
flex: 1;
|
||||
padding-left: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// 中奖物品信息
|
||||
.prize {
|
||||
flex: 1;
|
||||
padding-left: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.prize-shang {
|
||||
height: 40rpx;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #ffffff;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
.prize-shang {
|
||||
min-width: 68rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 18rpx;
|
||||
font-size: 14rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.pic {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
.pic {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 16rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
text-align: right;
|
||||
}
|
||||
.title {
|
||||
width: 100rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 16rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 16rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.num {
|
||||
font-size: 16rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 空数据提示
|
||||
.empty-tip {
|
||||
text-align: center;
|
||||
padding: 40rpx 0;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
// 空数据提示
|
||||
.empty-tip {
|
||||
text-align: center;
|
||||
padding: 40rpx 0;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -51,6 +51,10 @@
|
|||
<image :src="pageData.goods.collection_is?$img1('index/sc1.png'):$img1('index/sc2.png')"></image>
|
||||
<text>收藏</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
style="width: 100%; height: 232rpx; position: absolute; bottom: 0; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));">
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
|
@ -128,7 +132,7 @@
|
|||
<template v-for="(a, b) in item.goods_list">
|
||||
<view class="goods-item column" :key="b" @click="previewDetail(item, a)">
|
||||
<view class="pic flex">
|
||||
<image class="img100" :src="a.imgurl" mode="aspectFill"></image>
|
||||
<image class="img100" style="border-radius: 16rpx 16rpx 0rpx 0rpx;" :src="a.imgurl" mode="aspectFill"></image>
|
||||
<view v-if="a.goods_type == 2" class="yu-tag ziti">预售</view>
|
||||
</view>
|
||||
<view class="title hang1">
|
||||
|
|
@ -173,7 +177,7 @@
|
|||
<image class="img100" :src="a.goodslist_imgurl"></image>
|
||||
</view>
|
||||
<view class="align-end column">
|
||||
<view class="" :style="{background: a.shang_color}">{{ a.shang_title}}</view>
|
||||
<view class="center" :style="{background: a.shang_color}">{{ a.shang_title}}</view>
|
||||
<view class="align-center mt10">
|
||||
<view class="title hang1">
|
||||
{{ a.goodslist_title }}
|
||||
|
|
@ -1380,6 +1384,7 @@
|
|||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 78rpx;
|
||||
z-index: 10;
|
||||
|
||||
>text:nth-child(2n+1) {
|
||||
font-weight: 400;
|
||||
|
|
@ -1398,6 +1403,7 @@
|
|||
position: absolute;
|
||||
left: 304rpx;
|
||||
bottom: 142rpx;
|
||||
z-index: 10;
|
||||
|
||||
&-imgs {
|
||||
>image {
|
||||
|
|
@ -1779,15 +1785,12 @@
|
|||
>view:nth-child(2) {
|
||||
>view:nth-child(1) {
|
||||
padding: 0 20rpx;
|
||||
min-width: 92rpx;
|
||||
height: 40rpx;
|
||||
min-width: 68rpx;
|
||||
height: 32rpx;
|
||||
box-sizing: border-box;
|
||||
line-height: 40rpx;
|
||||
background: #B07AF3;
|
||||
border-radius: 8rpx;
|
||||
// border: 2rpx solid #FFFFFF;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
border-radius: 18rpx;
|
||||
font-size: 14rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user