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" @click="onTouchMore">
				<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 getTargetShowingData()">
				<text class="itemTitle">{{item.title}}</text>
				<text class="intro">{{item.textmsg}}</text>
				<text class="time">{{onChangeTime(item.inserttime)}}</text>
				<image :src="item.picurl" 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>
	let currentTabIndex = 0;
	export default {
		name:"BusinessDynamics",
		data() {
			return {
				currentTabIndex,
				mainPageData : getApp().globalData.mainPageData,
				TabListOfBusiness : [
					{
						name : '品牌风采'
					},{
						name : '业务动态'
					}
				],
			};
		},
		methods:{
			onTableIndexChanged(item){
				this.currentTabIndex = item.index;
			},
			///将指定的时间进行转换
			onChangeTime(tm){
				return this.$utils.formatTime(tm);
			},
			
			///获取当前需要显示的内容
			getTargetShowingData(){
				if(this.currentTabIndex == 0){
					return this.mainPageData.brandstyle;
				}
				return this.mainPageData.busdyna;
			},
			///点击更多
			onTouchMore(){
				console.log('点击了更多！');
			}
		},
	}
</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>