<template>
<view class="content">
<view class="model_box">
<view class="model_title">推广营销</view>
<view class="model_scrollx flex_row">
<scroll-view class="uni-swiper-tab" scroll-x :style="'height:'+scrollH+'px'">
<view class="scrollx_items tg_zdtg">
<image src="/static/my/icon_tg1.png" mode=""></image>
<view class="tgyx_title">置顶推广</view>
<view class="tgyx_desc">搜索页最强特权</view>
</view>
<view class="scrollx_items tg_hot">
<image src="/static/my/icon_tg2.png" mode=""></image>
<view class="tgyx_title">我要上热门</view>
<view class="tgyx_desc">多十倍商机</view>
</view>
<view class="scrollx_items tg_zshy">
<image src="/static/my/icon_tg3.png" mode=""></image>
<view class="tgyx_title">钻石会员</view>
<view class="tgyx_desc">抢占无限商机</view>
</view>
<view class="scrollx_items tg_hjhy">
<image src="/static/my/icon_tg4.png" mode=""></image>
<view class="tgyx_title">黄金会员</view>
<view class="tgyx_desc">提供供应排名</view>
</view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
scrollH: 130
}
},
onLoad() {
uni.getSystemInfo({
success: function(res) { // res - 各种参数
let info = uni.createSelectorQuery().select(".scrollx_items");
info.boundingClientRect(function(data) { //data - 各种参数
console.log(data.height) // 获取元素宽度
this.scrollH = data.height
}).exec()
}
});
},
onShow() {
},
methods: {
}
}
</script>
<style>
/* 左右滑动 */
.uni-swiper-tab{
white-space: nowrap;
}
.model_scrollx{
justify-content: space-between;
padding: 40rpx 0;
}
.scrollx_items{
padding: 30rpx 20rpx;
text-align: center;
display: inline-block;
width: 210rpx;
box-sizing: border-box;
margin-left: 30rpx;
}
.scrollx_items:last-child{
margin-right: 30rpx;
}
.scrollx_items image{
width: 70rpx;
height: 66rpx;
}
.tgyx_title{
font-size: 28rpx;
color: #333333;
margin-top: 30rpx;
}
.tgyx_desc{
font-size: 24rpx;
margin-top: 10rpx;
}
.tg_zdtg{
background: linear-gradient(bottom right, #d5e4fa, #dae7fb);
color: #477cd3;
}
.tg_hot{background: linear-gradient(bottom right, #fffcec, #fbf6d9);color: #ffa800;}
.tg_zshy{background: linear-gradient(bottom right, #fdf7fe, #f9e5fe);color: #c559de;}
.tg_hjhy{background: linear-gradient(bottom right, #fff8f0, #fff0df);color: #f3791f;}
</style>