508 lines
12 KiB
Vue
508 lines
12 KiB
Vue
<template>
|
|
<view class="main">
|
|
<div class="advertisement">
|
|
<div class="advertisementContentBox">
|
|
<div class="advertisementTop">
|
|
<div class="title">
|
|
商务活动策划
|
|
<!-- {{ activityObj.UserdefinedType_Name || "" }} -->
|
|
</div>
|
|
</div>
|
|
|
|
<scroll-view class="shopList" scroll-x>
|
|
<div
|
|
:style="{
|
|
width: activityShopList.length * 160 + 'rpx',
|
|
height: '100%',
|
|
whiteSpace: 'noWrap',
|
|
}"
|
|
>
|
|
<div
|
|
class="shopItem"
|
|
v-for="(item, index) in activityShopList"
|
|
:key="index"
|
|
@click.stop="handleGoShopDetail(item)"
|
|
>
|
|
<div class="shopItemImg">
|
|
<div class="imgBox">
|
|
<image
|
|
class="shopImg"
|
|
:src="
|
|
item.IMAGE_PATH || '/static/images/home/defultImg.png'
|
|
"
|
|
/>
|
|
</div>
|
|
<text class="discountedPrice"
|
|
>¥{{ item.bigNumber || "" }}.{{
|
|
item.smallNumber || "00"
|
|
}}</text
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</scroll-view>
|
|
</div>
|
|
|
|
<div class="advertisementContentBox">
|
|
<div class="advertisementTop">
|
|
<div class="title">
|
|
团建
|
|
<!-- {{ activityObj.UserdefinedType_Name || "" }} -->
|
|
</div>
|
|
</div>
|
|
|
|
<scroll-view class="shopList" scroll-x>
|
|
<div
|
|
:style="{
|
|
width: activityShopList.length * 160 + 'rpx',
|
|
height: '100%',
|
|
whiteSpace: 'noWrap',
|
|
}"
|
|
>
|
|
<div
|
|
class="shopItem"
|
|
v-for="(item, index) in activityShopList"
|
|
:key="index"
|
|
@click.stop="handleGoShopDetail(item)"
|
|
>
|
|
<div class="shopItemImg">
|
|
<div class="imgBox">
|
|
<image
|
|
class="shopImg"
|
|
:src="
|
|
item.IMAGE_PATH || '/static/images/home/defultImg.png'
|
|
"
|
|
/>
|
|
</div>
|
|
<text class="discountedPrice"
|
|
>¥{{ item.bigNumber || "" }}.{{
|
|
item.smallNumber || "00"
|
|
}}</text
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</scroll-view>
|
|
</div>
|
|
|
|
<div class="advertisementContentBox">
|
|
<div class="advertisementTop">
|
|
<div class="title">
|
|
茶歇
|
|
<!-- {{ activityObj.UserdefinedType_Name || "" }} -->
|
|
</div>
|
|
</div>
|
|
|
|
<scroll-view class="shopList" scroll-x>
|
|
<div
|
|
:style="{
|
|
width: activityShopList.length * 160 + 'rpx',
|
|
height: '100%',
|
|
whiteSpace: 'noWrap',
|
|
}"
|
|
>
|
|
<div
|
|
class="shopItem"
|
|
v-for="(item, index) in activityShopList"
|
|
:key="index"
|
|
@click.stop="handleGoShopDetail(item)"
|
|
>
|
|
<div class="shopItemImg">
|
|
<div class="imgBox">
|
|
<image
|
|
class="shopImg"
|
|
:src="
|
|
item.IMAGE_PATH || '/static/images/home/defultImg.png'
|
|
"
|
|
/>
|
|
</div>
|
|
<text class="discountedPrice"
|
|
>¥{{ item.bigNumber || "" }}.{{
|
|
item.smallNumber || "00"
|
|
}}</text
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</scroll-view>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
activityShopList: [],
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.main {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
box-sizing: border-box;
|
|
background: #f2f4f5;
|
|
padding: 32rpx;
|
|
|
|
.advertisement {
|
|
width: 100%;
|
|
border-radius: 16rpx;
|
|
margin-top: 24rpx;
|
|
box-sizing: border-box;
|
|
padding: 2rpx;
|
|
|
|
.advertisementContentBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #fff;
|
|
// 真的有个空格！！！
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/Special Offers.png");
|
|
background-repeat: no-repeat;
|
|
border-radius: 16rpx;
|
|
background-size: 100% 100%;
|
|
box-sizing: border-box;
|
|
padding: 16rpx 22rpx;
|
|
margin-bottom: 32rpx;
|
|
|
|
.advertisementTop {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.title {
|
|
font-family: "PingFangSC";
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
line-height: 32rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
color: #181716;
|
|
.titleImg {
|
|
width: 112rpx;
|
|
height: 36rpx;
|
|
}
|
|
}
|
|
|
|
.moreBox {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.moreText {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #8b8280;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.rightIcon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.advertisementTopUnionMall {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.title {
|
|
font-size: 26rpx;
|
|
font-weight: 600;
|
|
color: #181716;
|
|
}
|
|
|
|
.moreBox {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.moreText {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #8b8280;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.rightIcon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.UnionMallShopList {
|
|
width: 100%;
|
|
margin-top: 24rpx;
|
|
height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.leftSortBox {
|
|
width: 50%;
|
|
background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
|
|
border-radius: 16rpx;
|
|
box-sizing: border-box;
|
|
padding: 12rpx 24rpx;
|
|
|
|
.titleTop {
|
|
.title {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #130f05;
|
|
line-height: 44rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rowBox {
|
|
width: 25%;
|
|
height: 144rpx;
|
|
|
|
// width: 96rpx;
|
|
// height: 154rpx;
|
|
// display: inline-block;
|
|
// box-sizing: border-box;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.imgBox {
|
|
width: 96rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.itemImgBox {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
padding: 2rpx;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
margin-bottom: 16rpx;
|
|
|
|
.img {
|
|
width: 96rpx;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.itemName {
|
|
width: 96rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #020e1a;
|
|
line-height: 32rpx;
|
|
text-align: center;
|
|
font-style: normal;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
.shopList {
|
|
width: 100%;
|
|
margin-top: 24rpx;
|
|
height: 80px;
|
|
|
|
.shopItem {
|
|
width: 136rpx;
|
|
display: inline-block;
|
|
margin-right: 40rpx;
|
|
|
|
.shopItemImg {
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
.imgBox {
|
|
width: 136rpx;
|
|
height: 136rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
|
|
.shopImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.discountedPrice {
|
|
background: linear-gradient(90deg, #fd3404 0%, #fe7e1f 100%);
|
|
padding: 4rpx 12rpx;
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #ffffff;
|
|
line-height: 32rpx;
|
|
font-style: normal;
|
|
border-radius: 16rpx;
|
|
position: absolute;
|
|
bottom: -12rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.price {
|
|
width: 100%;
|
|
display: inline-block;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #756c6a;
|
|
line-height: 36rpx;
|
|
text-align: center;
|
|
font-style: normal;
|
|
text-decoration-line: line-through;
|
|
margin-top: 14rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.advertisementContentBox ::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.sortBox {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
// align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.leftSortBox {
|
|
background: linear-gradient(180deg, #ffe8e8 0%, #ffffff 100%);
|
|
border-radius: 16rpx;
|
|
box-sizing: border-box;
|
|
padding: 12rpx 24rpx;
|
|
margin-right: 16rpx;
|
|
min-width: 320rpx;
|
|
|
|
.titleTopSort {
|
|
width: 100%;
|
|
|
|
.title {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #130f05;
|
|
line-height: 44rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
|
|
.red {
|
|
color: #ff3e3e;
|
|
}
|
|
}
|
|
}
|
|
|
|
.notice {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
color: #716f69;
|
|
line-height: 28rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.shopList {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 16rpx;
|
|
|
|
.shopItem {
|
|
width: 128rpx;
|
|
height: 128rpx;
|
|
|
|
.shopImg {
|
|
width: 128rpx;
|
|
height: 128rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.rightItem {
|
|
border-radius: 16rpx;
|
|
box-sizing: border-box;
|
|
padding: 12rpx 24rpx;
|
|
min-width: 160rpx;
|
|
|
|
.titleTopSort {
|
|
width: 100%;
|
|
|
|
.title {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #130f05;
|
|
line-height: 44rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
|
|
.red {
|
|
color: #ff8000;
|
|
}
|
|
}
|
|
}
|
|
|
|
.notice {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
color: #716f69;
|
|
line-height: 28rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.shopItem {
|
|
width: 128rpx;
|
|
height: 128rpx;
|
|
margin-top: 16rpx;
|
|
|
|
.shopImg {
|
|
width: 128rpx;
|
|
height: 128rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bg2 {
|
|
background: linear-gradient(180deg, #ffefe0 0%, #ffffff 100%);
|
|
}
|
|
|
|
.bg3 {
|
|
background: linear-gradient(180deg, #d8f9de 0%, #ffffff 100%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |