|
|
|
<!--品牌风采和业务动态-->
|
|
|
|
<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()" @click="onTouchOneItem(index)" :key="index">
|
|
|
|
<text class="itemTitle">{{item.title}}</text>
|
|
|
|
<text class="intro">{{item.titledesc}}</text>
|
|
|
|
<text class="time">{{onChangeTime(item.inserttime)}}</text>
|
|
|
|
<image :src="item.picurl" class="itemImage"></image>
|
|
|
|
<u-line v-if="index<2" 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;
|
|
|
|
var mainPageData = getApp().globalData.mainPageData;
|
|
|
|
export default {
|
|
|
|
name:"BusinessDynamics",
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
currentTabIndex,
|
|
|
|
mainPageData,
|
|
|
|
TabListOfBusiness : [
|
|
|
|
{
|
|
|
|
name : '品牌风采'
|
|
|
|
},{
|
|
|
|
name : '业务动态'
|
|
|
|
}
|
|
|
|
],
|
|
|
|
};
|
|
|
|
},
|
|
|
|
methods:{
|
|
|
|
onTableIndexChanged(item){
|
|
|
|
this.currentTabIndex = item.index;
|
|
|
|
},
|
|
|
|
///将指定的时间进行转换
|
|
|
|
onChangeTime(tm){
|
|
|
|
return this.$utils.formatTime(tm);
|
|
|
|
},
|
|
|
|
|
|
|
|
///获取当前需要显示的内容
|
|
|
|
getTargetShowingData(){
|
|
|
|
var datas = [];
|
|
|
|
if(this.currentTabIndex == 0){
|
|
|
|
datas = this.mainPageData.brandstyle;
|
|
|
|
}else{
|
|
|
|
datas = this.mainPageData.busdyna;
|
|
|
|
}
|
|
|
|
var len = datas.length;
|
|
|
|
//如果超过3个的,只显示前面三个
|
|
|
|
if(len > 3){
|
|
|
|
var res = [];
|
|
|
|
for(var i = 0;i<3;i++){
|
|
|
|
res.push(datas[i]);
|
|
|
|
}
|
|
|
|
return res;
|
|
|
|
}
|
|
|
|
return datas;
|
|
|
|
},
|
|
|
|
///点击更多
|
|
|
|
onTouchMore(){
|
|
|
|
console.log('点击了更多!');
|
|
|
|
uni.navigateTo({
|
|
|
|
url:'/pages/BusinessStyle/BusinessStyle?index=' + this.currentTabIndex,
|
|
|
|
})
|
|
|
|
},
|
|
|
|
///点击了某一动态
|
|
|
|
onTouchOneItem(index){
|
|
|
|
var datas = this.getTargetShowingData();
|
|
|
|
var skData = datas[index];
|
|
|
|
//console.log('点了某一个动态:',skData);
|
|
|
|
getApp().globalData.showingSkipData = skData;
|
|
|
|
uni.navigateTo({
|
|
|
|
url:'/pages/SkipView/SkipView'
|
|
|
|
})
|
|
|
|
}
|
|
|
|
},
|
|
|
|
}
|
|
|
|
</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: 431rpx;
|
|
|
|
//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: 431rpx;
|
|
|
|
//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>
|