12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- <template>
- <view :class="{'padding-lr':showStyle!=='0px'}">
- <view v-if="storage" class="bg-white">
- <view :class="{'padding-lr':bannerShowStyle!=='0px'}">
- <image @click="naviageToPage(indexBanner.url)" :src="image"
- :mode="bannerImgStyle==='cover'?'aspectFill':'scaleToFill'"
- style="width: 100%;height:174rpx ;padding-top: 8rpx;"></image>
- </view>
- <view class="cate-section" :style="{backgroundColor:bgColor}">
- <view v-for="(item, index) in categoryButtomList" :key="index"
- @click="naviageToPage(item.url+('&id='+item.id),item.title)" class="cate-item" :style={color:fontColor}>
- <image :src="JSON.parse(item.imgUrl)[0].url" :style="{borderRadius: iconStyle}"></image>
- <text>{{item.title}}</text>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- name: 'Navigation',
- props: ['storage', 'categoryButtomList', 'options'],
- computed: {
- bannerShowStyle() {
- return this.options.banner.showStyle
- },
- bannerImgStyle() {
- return this.options.banner.imgStyle
- },
- showStyle() {
- return this.options.showStyle
- },
- fontColor() {
- return this.options.fontColor
- },
- bgColor() {
- return this.options.bgColor
- },
- image() {
- const {
- image
- } = this.options.banner
- if (image) {
- return JSON.parse(image)[0].url
- } else {
- return 'https://nontax.oss-cn-beijing.aliyuncs.com/kxmall/G2urVA.png'
- }
- },
- iconStyle() {
- return this.options.iconStyle
- }
- },
- methods: {
- naviageToPage(url, title) {
- this.$emit('naviage-to-page', url, title)
- }
- }
- }
- </script>
- <style scoped lang="scss">
- /* 分类 */
- .cate-section {
- display: flex;
- //justify-content: space-around;
- align-items: center;
- flex-wrap: wrap;
- padding-top: 34rpx;
- // padding: 30upx 25upx;
- background-color: #fff;
- justify-content: space-evenly;
- .cate-item {
- display: flex;
- flex-direction: column;
- align-items: center;
- width: 138rpx;
- padding-bottom: 24rpx;
- font-size: $font-sm + 2upx;
- color: $font-color-dark;
- }
- /* 原图标颜色太深,不想改图了,所以加了透明度 */
- image {
- width: 86upx;
- height: 86upx;
- margin-bottom: 24upx;
- border-radius: 8rpx;
- opacity: .7;
- // box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
- }
- }
- </style>
|