Skip to content

activities / web-lottery

Go to a project
Commit 7056dc15 by Lays-lzq
Options

feat: 样式优化

parent fc9e537e
Showing with 69 additions and 38 deletions
pages/recordDetail/index.vue
...@@ -29,13 +29,13 @@ ...@@ -29,13 +29,13 @@
<img v-if="detailInfo.prizeIcon" v-lazy="detailInfo.prizeIcon" class="record-detail__info-img" alt="" /> <img v-if="detailInfo.prizeIcon" v-lazy="detailInfo.prizeIcon" class="record-detail__info-img" alt="" />
</div> </div>
</li> </li>
<li> <li v-if="detailInfo.prizeId !== 0">
<label>领奖方式：</label> <label>领奖方式：</label>
<span>{{ LOTTERY_EXCHANGE_TYPE_TXT[detailInfo.exchangeType] }}</span> <span>{{ LOTTERY_EXCHANGE_TYPE_TXT[detailInfo.exchangeType] }}</span>
</li> </li>
</ul> </ul>
</div> </div>
<div v-if="+detailInfo.exchangeType === +LOTTERY_EXCHANGE_TYPE.offline" class="record-detail__code-info"> <div v-if="+detailInfo.exchangeType === +LOTTERY_EXCHANGE_TYPE.offline && detailInfo.prizeId !== 0" class="record-detail__code-info">
<QRCode :url="detailInfo.code" :width="70" :height="70"></QRCode> <QRCode :url="detailInfo.code" :width="70" :height="70"></QRCode>
<p class="record-detail__code-text"> <p class="record-detail__code-text">
<label>兑换码：</label> <label>兑换码：</label>
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
</p> </p>
<p class="record-detail__notice">*兑换信息请勿泄露给他人，以防冒充代领</p> <p class="record-detail__notice">*兑换信息请勿泄露给他人，以防冒充代领</p>
</div> </div>
<div v-if="+detailInfo.exchangeType === +LOTTERY_EXCHANGE_TYPE.mailing" class="record-detail__addressee-info"> <div v-if="+detailInfo.exchangeType === +LOTTERY_EXCHANGE_TYPE.mailing && detailInfo.prizeId !== 0" class="record-detail__addressee-info">
<span v-if="!detailInfo.name" class="record-detail__edit-btn" @click="isShowAddressPopup = true" <span v-if="!detailInfo.name" class="record-detail__edit-btn" @click="isShowAddressPopup = true"
>填写收货地址</span >填写收货地址</span
> >
......
pages/records/index.vue
...@@ -13,20 +13,20 @@ ...@@ -13,20 +13,20 @@
@load="loadData" @load="loadData"
> >
<div v-for="item in recordList" :key="item.id" class="records__list-item"> <div v-for="item in recordList" :key="item.id" class="records__list-item">
<div class="records__item-img"> <div class="records__item-top">
<img v-lazy="item.banner" alt="" /> <div class="records__item-toptitle">{{ item.title }}</div>
<div class="records__item-topstatus">{{ WRITEOFF_STATUS_TXT[+item.status] }}</div>
</div> </div>
<div class="records__item-info"> <div class="records__item-middle">
<div class="records__info-wrap"> <div class="records__item-middleimg">
<div class="records__item-name">{{ item.title }}</div> <img v-lazy="item.banner" alt="" />
<div class="records__item-subs"> </div>
{{ (item.drawTime * 1000) | formatDate('YYYY/MM/DD') }} 第{{ item.drawPlay }}场抽奖 <div class="records__item-middleinfo">
</div> <div class="title">{{ item.prizeName }}</div>
<div class="time">{{ (item.drawTime * 1000) | formatDate('YYYY/MM/DD') }} 第{{ item.drawPlay }}场抽奖</div>
</div> </div>
<div class="records__item-prize">{{ item.prizeName }}</div>
</div> </div>
<div class="records__item-operate"> <div class="records__item-operate">
<span class="records__item-write-off">{{ WRITEOFF_STATUS_TXT[+item.status] }}</span>
<van-button class="records__btn" round @click="openPopup(item)">查看详情</van-button> <van-button class="records__btn" round @click="openPopup(item)">查看详情</van-button>
</div> </div>
</div> </div>
...@@ -169,33 +169,65 @@ export default { ...@@ -169,33 +169,65 @@ export default {
} }
&__list-item { &__list-item {
display: flex; display: flex;
align-items: center; flex-direction: column;
padding: 12px 0; padding: 12px 0;
box-shadow: 0px 1px 8px 1px rgba(200, 200, 200, 0.5);
margin-top: 8px;
border-radius: 8px;
padding: 10px 12px;
} }
&__item-img { &__item-middle {
width: 55px;
height: 55px;
border: 1px solid #dddddd;
border-radius: 6px;
overflow: hidden;
img {
display: block;
width: 100%;
height: 100%;
}
}
&__item-info {
flex: 1;
overflow: hidden;
height: 55px;
display: flex; display: flex;
flex-direction: column; &img {
padding: 0 10px; width: 55px;
height: 55px;
border: 1px solid #dddddd;
border-radius: 6px;
overflow: hidden;
img {
display: block;
width: 100%;
height: 100%;
}
}
&info {
display: flex;
flex-direction: column;
margin-left: 10px;
.title {
line-height: 20px;
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
margin-bottom: 8px;
}
.time {
line-height: 18.5px;
font-size: 13px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
}
} }
&__info-wrap { &__item-top {
flex: 1;
display: flex; display: flex;
flex-direction: column; align-items: center;
justify-content: space-between;
margin-bottom: 12px;
&title {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
&status {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
} }
&__item-name { &__item-name {
width: 100%; width: 100%;
...@@ -225,11 +257,10 @@ export default { ...@@ -225,11 +257,10 @@ export default {
height: 16px; height: 16px;
} }
&__item-operate { &__item-operate {
height: 55px; margin-top: 10px;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: space-around; justify-content: flex-end;
} }
&__item-write-off { &__item-write-off {
font-size: 12px; font-size: 12px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment