jigesi/pages/mall/index.vue

<template>
	<view class="">
		<navBar title="商城" :back="false" color="black" flex="cen" background="#fff" />

		<view class="searchAndTab">
			<view class="searchBox">
				<u-search shape="round" :showAction="false"></u-search>
			</view>
			<u-sticky bgColor="#fff">
				<u-tabs :list="list1" :scrollable="true" :activeStyle='activeStyle'
					:inactiveStyle="inactiveStyle"></u-tabs>
			</u-sticky>
		</view>

		<view class="content">
			<view class="leftMenu">
				<view class="item" v-for="i in 20" :class="[i==currBrandIndex?'act':'']" @click="currBrandIndex=i">
					<text style="position: relative;z-index: 1;">品牌{{i+1}}</text>
					<!-- <image src="/static/index/more.png" mode="" style="width: 30rpx;height: 30rpx;"></image> -->
					<view class="halfCircle" v-if="i==currBrandIndex">
					</view>
				</view>
			</view>
			<view class="rightDes">
				<view class="item" v-for="i in 10" :style="{marginTop:i>0?'22rpx':''}" @click="toDetail">
					<view class="top">
						<view class="name">
							筒灯
						</view>
						<image src="/static/index/more.png" mode=""
							style="width: 40rpx;height: 40rpx;margin-right: 4rpx;">
						</image>
					</view>
					<view class="bottom">
						<image src="/static/index/img1.png" mode="" style="" class="img" v-for="i in 5"></image>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import classifyData from '@/common/classify.data.js';
	export default {
		data() {
			return {
				currBrandIndex: 0,
				list1: [{
						name: '无主灯',
					},
					{
						name: '主灯',
					}, {
						name: '开关插座'
					},
					{
						name: '智能家装',
					}, {
						name: '智能锁'
					},
				],
				activeStyle: {
					color: '#F7790C'
				},
				inactiveStyle: {
					color: '#080F18'
				}

			};
		},
		created() {

		},
		onLoad: function() {

		},
		onReady() {

		},
		methods: {
			toDetail() {
				uni.navigateTo({
					url: '/pages/mall/goodsList/index'
				})
			}
		},
		components: {}
	};
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>