<template>
  <!-- 导航组 -->
<!--  <view class="diy-navBar" :style="{ background: itemStyle.background, color: itemStyle.textColor }">
    <view class="data-list" :class="[`avg-sm-${itemStyle.rowsNum}`]">
     <view class="item-nav" v-for="(dataItem, index) in dataList" :key="index">
        <view class="nav-to" @click="onLink(dataItem.link)">
          <view class="item-image">
            <image class="image" mode="widthFix" :src="dataItem.imgUrl"></image>
          </view>
          <view class="item-text oneline-hide">{{ dataItem.text }}</view>
        </view>
      </view>
	
    </view>
  </view> -->
  
  <view style="width: 750rpx;">
  	<uv-scroll-list indicatorColor="#fff0f0" indicatorActiveColor="#7B0373">
  		<view class="scroll-list">
  			<view class="scroll-list__line" v-for="(item, index) in dataList" :key="index">
  				<view class="scroll-list__line__item" @click="onLink(item1.link)" style="width: 120rpx;"
  					v-for="(item1, index1) in item" :key="index1"
  					:class="[(index1 === item.length - 1) && 'scroll-list__line__item--no-margin-right']">
				  
  					<view class="item-image" style="display: flex;justify-content: center;align-items: center;">
  						<image class="image" mode="widthFix" :src="item1.imgUrl"></image>
  					</view>
  					<view class="item-text oneline-hide" style="text-align: center;">{{ item1.text }}</view>
					
  				</view>
  			</view>
  		</view>
  	</uv-scroll-list>
  
  </view>
  
</template>

<script>
  import mixin from '../mixin'

  export default {
    name: "NavBar",
    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    props: {
      itemIndex: String,
      itemStyle: Object,
      params: Object,
      dataList: Array
    },

    mixins: [mixin],

    /**
     * 组件的方法列表
     * 更新属性和数据的方法与更新页面数据的方法类似
     */
    methods: {

    }

  }
</script>

<style lang="scss">
	@import '@/common/demo.scss';
	@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';

	.item-text {
		font-size: 26rpx;
		font-weight: 900;
	}

	.item-image {
		margin-bottom: 4px;
		font-size: 0;
	}

	.item-image .image {
		width: 88rpx;
		height: 88rpx;
	}

	.scroll-list {


		&__goods-item {
			margin-right: 20px;

			&__image {
				width: 60px;
				height: 60px;
				border-radius: 4px;
			}

			&__text {
				color: #f56c6c;
				text-align: center;
				font-size: 12px;
				margin-top: 5px;
			}
		}

		&__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;

			&__text {
				font-size: 12px;
				width: 12px;
				color: #f56c6c;
				line-height: 16px;
			}
		}

		&__line {
			@include flex;
			margin-top: 10px;

			&__item {
				margin-right: 15px;

				&__image {
					width: 61px;
					height: 48px;
				}

				&__text {
					margin-top: 5px;
					color: $uv-content-color;
					font-size: 12px;
					text-align: center;
				}

				&--no-margin-right {
					margin-right: 0;
				}
			}
		}
	}
</style>