xiaochengxu/components/BusinessDynamics/BusinessDynamics.vue

<!--品牌风采和业务动态-->
<template name="BusinessDynamics">
	<view class="main">
		<view class="top">
			<view class="tabs">
				<u-tabs :list="TabListOfBusiness" :scrollable="false"
				lineColor="#D49B4B" 
				:activeStyle="{
					color:'#333333',
					fontSize:'36rpx',
					fontWeight:'bold',
					lineHeight:'50rpx',
					transform: 'scale(1.05)'
				}" 
				:inactiveStyle="{
					color:'#999999',
					fontSize:'32rpx',
					lineHeight:'45rpx',
					fontWeight:'400',
					trasform: 'scale(1)'
				}" 
				@click="onTableIndexChanged" :current="currentTabIndex"
				/>
			</view>
			<view class="more">
				<u-text text="更多" size="24rpx" color="#666666" margin="42rpx 54rpx 42rpx 5rpx"/>
				<image src="@/static/images/mainview/more.png" class=".more_icon"/>
			</view>
		</view>
		<u-line color="#E2E2E2" length="662rpx" customStyle="position: relative;left: 20rpx;border: 1px solid #E2E2E2;" :hairline="true" margin="0 0 0 0"></u-line>
		<view class="itemArea">
			<view class="rowItem" v-for="(item,index) in datasOfShowing">
				<text class="itemTitle">{{item.title}}</text>
				<text class="intro">{{item.intro}}</text>
				<text class="time">{{onChangeTime(item.time)}}</text>
				<image :src="item.imageUrl" class="itemImage" mode="widthFix"></image>
				<u-line color="#E2E2E2" length="662rpx" customStyle="position: absolute;left: 20rpx;border: 1px solid #E2E2E2;" :hairline="true" margin="156rpx 0 0 0"></u-line>
			</view>
		</view>
	</view>
</template>

<script>
	import utils from "../../common/utils.js"
	import BusinessDynamicsConfig from "@/components/BusinessDynamics/BusinessDynamics.config.js"
	let currentTabIndex = 0;
	let TabListOfBusiness = BusinessDynamicsConfig.TabListOfBusiness;
	///测试用品牌风采的数据
	let BrandDatas = BusinessDynamicsConfig.BrandDatas;
	let BusinessDatas = BusinessDynamicsConfig.BusinessDatas;
	///当前正用于显示的数据
	let datasOfShowing = currentTabIndex == 0 ? BrandDatas : BusinessDatas;
	export default {
		name:"BusinessDynamics",
		data() {
			return {
				TabListOfBusiness,
				currentTabIndex,
				datasOfShowing,
			};
		},
		methods:{
			onTableIndexChanged(item){
				this.currentTabIndex = item.index;
				this.datasOfShowing = this.currentTabIndex == 0 ? BrandDatas : BusinessDatas;
			},
			///将指定的时间进行转换
			onChangeTime(tm){
				return utils.formatTime(tm);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.main{
		width: 702rpx;
		height: 593rpx;
		background-color: #FFFFFF;
		opacity: 1;
		border-radius: 20rpx;
		position: relative;
		margin-left: 24rpx;
		margin-right: 24rpx;
	}
	.top{
		height: 110rpx;
		width: 702rpx;
		border-radius: 20rpx;
		position: relative;
	}
	.tabs{
		width: 364rpx;
		//ackground-color: #1CBBB4;
		border-radius: 20rpx;
		position: absolute;
		height: 110rpx;
	}
	.more{
		width: 110rpx;
		height: 110rpx;
		//background-color: #1CBBB4;
		border-radius: 20rpx;
		position: absolute;
		right: 10rpx;
	}
	.more_icon{
		width: 24rpx;
		height: 24rpx;
		position: absolute;
		top: 46rpx;
		right: 20rpx;
	}
	///子节点区域
	.itemArea{
		width: 702rpx;
		height: 473rpx;
		position: relative;
		//background-color: #39B54A;
		border-radius: 20rpx;
	}
	
	.rowItem{
		width: 702rpx;
		height: 157rpx;
		position: relative;
		//background-color: #8799A3;
		border-radius: 20rpx;
	}
	///每一个item的title的style
	.itemTitle{
		width: 471rpx;
		//height: 37rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #333333;
		opacity: 1;
		position: absolute;
		left: 20rpx;
		top: 24rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	
	///每一个简介text的style
	.intro{
		width: 471rpx;
		//height: 33rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		opacity: 1;
		position: absolute;
		left: 20rpx;
		//top: 69rpx;
		bottom: 55rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	
	///每一个简介text的style
	.time{
		width: 212rpx;
		//height: 33rpx;
		font-size: 20rpx;
		font-weight: 400;
		color: #999999;
		opacity: 1;
		position: absolute;
		left: 20rpx;
		//top: 69rpx;
		bottom: 12rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	///每个item的image的style
	.itemImage{
		width: 192rpx;
		height: 109rpx;
		position: absolute;
		top: 30rpx;
		right: 20rpx;
	}
</style>