bingyu-mini/bingyu/pages/companyInformation/companyInformation.vue

<template>
	<view style="padding-bottom: 46rpx;">
		<navs :top='top' :page='pageName' :color='color'></navs>
		<view class="infobox">
			<view class="top">
				<view class="box" @click="change(1)" :class="select==1?'active':''">
					<text>公司动态</text>
					<image class="img1" src="@/static/image/company.svg" mode="" v-if="select==1"></image>
				</view>
				<view class="box" @click="change(2)" :class="select==2?'active':''">
					<text>行业动态</text>
					<image class="img2" src="@/static/image/industry.svg" mode="" v-if="select==2"></image>
				</view>
			</view>
			<view class="news">
				<view class="news-item" @click="goTo()">
					<image src="https://mms2.baidu.com/it/u=3529567955,935711200&fm=253&app=120&f=JPEGw=640&h=429" mode=""></image>
					<view style="margin-top: 17rpx;padding: 0 22rpx;">
						<view class="title1">企业资讯标题标题标额企业资讯标企业资讯标题标题标额</view>
						<view class="title2">xxxx网    2023.08.22</view>
					</view>
				</view>
				<view class="news-item">
					<image src="https://mms2.baidu.com/it/u=3529567955,935711200&fm=253&app=120&f=JPEGw=640&h=429" mode=""></image>
					<view style="margin-top: 17rpx;padding: 0 22rpx;">
						<view class="title1">企业资讯标题标题标额企业资讯标企业资讯标题标题标额</view>
						<view class="title2">xxxx网    2023.08.22</view>
					</view>
				</view>
				<view class="news-item">
					<image src="https://mms2.baidu.com/it/u=3529567955,935711200&fm=253&app=120&f=JPEGw=640&h=429" mode=""></image>
					<view style="margin-top: 17rpx;padding: 0 22rpx;">
						<view class="title1">企业资讯标题标题标额企业资讯标企业资讯标题标题标额</view>
						<view class="title2">xxxx网    2023.08.22</view>
					</view>
				</view>
			</view>
			<bottoms></bottoms>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				select:1,
				pageName:'公司资讯',
				color:1,
				top:0
			};
		},
		onLoad() {
			this.top = uni.getMenuButtonBoundingClientRect().top;
		},
		methods:{
			change(i){
				this.select = i;
			},
			goTo(){
				uni.navigateTo({
					url:'/pages/infoDetail/infoDetail'
				})
			}
		}
	}
</script>

<style lang="scss">
.infobox{
	padding: 30rpx;
	background-color: #F9FAFF;
}
.top{
	display: flex;
	justify-content: space-evenly;
	.box{
		width: 186rpx;
		height: 160rpx;
		border-radius: 20rpx;
		color: #fff;
		background-color: #494949;
		text-align: center;
		font-size: 36rpx;
		font-weight: 600;
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		letter-spacing: 4rpx;
		position: relative;
		animation: width2 1s;
		&:nth-child(2){
			margin-left: 16rpx;
		}
		image{
			position: absolute;
		}
		.img1{
			width: 213rpx;
			height: 179rpx;
			right: 0;
			top: 0;
		}
		.img2{
			width: 220rpx;
			height: 161rpx;
			right: 7rpx;
			top: 16rpx;
		}
	}
	.box.active{
		// flex: 1;
		width: 488rpx;
		padding: 0;
		line-height: 160rpx;
		letter-spacing: 2rpx;
		font-size: 40rpx;
		text-indent: 1em;
		text-align: left;
		background-color: #008DFF;
		// transition: flex .7s linear;
		animation: width1 .5s;
		.img1{
			animation: img1 .7s;
		}
		.img2{
			animation: img2 .7s;
		}
	}
	@keyframes width1{
		from{
			width: 186rpx;
		}
		to{
			width: 488rpx;
		}
	}
	@keyframes width2{
		from{
			width: 488rpx;
		}
		to{
			width: 186rpx;
		}
	}
	@keyframes img1{
		from{
			width: 0;
			height: 0;
		}
		to{
			width: 213rpx;
			height: 179rpx;
		}
	}
	@keyframes img2{
		from{
			width: 0;
			height: 0;
		}
		to{
			width: 220rpx;
			height: 161rpx;
		}
	}
}
.news{
	margin-top: 28rpx;
	.news-item{
		border-radius: 20rpx;
		box-shadow: 0 2rpx 6rpx 6rpx #0000000a;
		overflow: hidden;
		margin-top: 20rpx;
		&:first-child{
			margin-top: 0;
		}
		image{
			width: 100%;
			height: 329rpx;
		}
		.title1{
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}
		.title2{
			font-size: 24rpx;
			font-weight: 400;
			color: #C2C2C2;
			padding: 10rpx 0 18rpx;
		}
	}
}
</style>