105 lines
1.9 KiB
Vue
105 lines
1.9 KiB
Vue
<template>
|
||
<view class="page-v4 flex flex-wrap">
|
||
|
||
<view class="item" v-for="item in 9" :key="item">
|
||
<view class="img-box">
|
||
<image class="main-img" :src="webUrl+'/20220214125726718023.png'" mode="scaleToFill"></image>
|
||
<view class="label flex ai-center">
|
||
<image class="icon-live" :src="webUrl+'/20220218221956204228.png'" mode="scaleToFill"></image>
|
||
<text>文化展示</text>
|
||
</view>
|
||
</view>
|
||
<view class="info flex ai-center">
|
||
<image class="logo" :src="webUrl+'/20220105121325790975.png'" mode="scaleToFill"></image>
|
||
<view>
|
||
<view class="name">香道滇旗舰店</view>
|
||
<view class="sub">冬季上新买二送一！</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
webUrl: this.$VUE_APP_RESOURCES_URL
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.page-v4 {
|
||
padding: 0 32rpx 24rpx;
|
||
}
|
||
|
||
.main-img {
|
||
width: 332rpx;
|
||
height: 360rpx;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.icon-live {
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.logo {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
border-radius: 50%;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.item {
|
||
width: 332rpx;
|
||
margin-top: 24rpx;
|
||
border-radius: 8px 8px 0 0;
|
||
background: #fff;
|
||
|
||
.name {
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
line-height: 34rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.sub {
|
||
font-size: 20rpx;
|
||
font-weight: bold;
|
||
line-height: 30rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.item:nth-child(2n) {
|
||
margin-left: 22rpx;
|
||
}
|
||
|
||
.info {
|
||
padding: 8rpx 16rpx 18rpx;
|
||
}
|
||
|
||
.img-box{
|
||
position: relative;
|
||
.label {
|
||
position: absolute;
|
||
top: 14rpx;
|
||
left: 16rpx;
|
||
padding: 4rpx 14rpx 4rpx 10rpx;
|
||
border-radius: 20px;
|
||
font-size: 22rpx;
|
||
line-height: 1;
|
||
color: #FFFFFF;
|
||
background: rgba(0,0,0,.6);
|
||
}
|
||
}
|
||
|
||
</style>
|