<template>
	<view class="content">
		<view class="top" :style="'padding-top:' + top + 'px'"></view>
		<view class="logo">
			<view class="img">
				<image src="@/static/image/logo.png" mode=""></image>
			</view>
			<image class="avatar" src="@/static/image/default-avatar.svg" mode="" @click="goTo(6)"></image>
		</view>
		<view class="navigation">
			<view class="title">功能导航</view>
			<view class="function">
				<view @click="goTo(1)">
					<view class="iconbox">
						<image class="icon1" src="@/static/image/icon-Group4529.svg" mode=""></image>
						<text class="iconfont icon-Vector-2"></text>
					</view>
					<text class="text">公司介绍</text>
				</view>
				<view @click="goTo(4)">
					<view class="iconbox">
						<image class="icon1" src="@/static/image/icon-Group4530.svg" mode=""></image>
						<view class="iconfont icon-Vector-2"></view>
					</view>
					<text class="text">公司案例</text>
				</view>
				<view>
					<view class="iconbox">
						<image class="icon1" src="@/static/image/icon-Group4531.svg" mode=""></image>
						<view class="iconfont icon-Vector-2"></view>
					</view>
					<text class="text">商务合作</text>
				</view>
			</view>
		</view>
		<view class="clients">
			<view class="title">
				<view>合作客户</view>
				<image class="more" src="@/static/image/more.svg" mode=""></image>
			</view>
			<view class="companies">
				<scroll-view :show-scrollbar="false" class="scroll-view_H" scroll-x="true">
					<view class="company">
						<image
							src="https://img2.baidu.com/it/u=419111865,3225914506&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
							mode=""></image>
						<view class="introduce">
							<image src="@/static/image/default-avatar.svg" mode=""></image>
							<view class="company-name">XXX律师事务所</view>
						</view>
					</view>
					<view class="company">
						<image
							src="https://img2.baidu.com/it/u=419111865,3225914506&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
							mode=""></image>
						<view class="introduce">
							<image src="@/static/image/default-avatar.svg" mode=""></image>
							<view class="company-name">XXX律师事务所</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="information">
			<view class="title" @click="goTo(2)">
				<view>企业资讯</view>
				<image class="more" src="@/static/image/more.svg" mode=""></image>
			</view>
			<view class="news" @click="goTo(3)">
				<image src="https://mms2.baidu.com/it/u=3529567955,935711200&fm=253&app=120&f=JPEGw=640&h=429" mode="">
				</image>
				<view class="news-box">
					<view class="news-title">企业资讯标题标题标额...企业资讯标标题标题标额</view>
					<view class="iconfont icon-arrow-up-1--arrow-up-keyboard"></view>
				</view>
			</view>
			<view class="news" @click="goTo(3)">
				<view class="news-box">
					<view class="news-title">企业资讯标题标题标额...企业资讯标标题标题标额</view>
					<view class="iconfont icon-arrow-up-1--arrow-up-keyboard"></view>
				</view>
				<image src="https://mms0.baidu.com/it/u=392427122,2979071926&fm=253&app=138&f=JPEGw=759&h=459" mode="">
				</image>
			</view>
		</view>
		<view class="case">
			<view class="title" @click="goTo(4)">
				<view>案例库</view>
				<image class="more" src="@/static/image/more.svg" mode=""></image>
			</view>
			<view>
				<scroll-view :show-scrollbar="false" class="screen" scroll-x="true">
					<view :class="select==index?'item active':'item'" v-for="(item,index) in navList" :key="item.text"
						@click="sel(index)">
						<view v-if="item.text == 'logo设计'" style="position: relative;padding-left: 32rpx;">
							<image :src="select==index?'../../static/image/VectorStroke-1.svg':'../../static/image/VectorStroke.svg'" mode="" style="position: absolute; left: 0;"></image>
							<text style="margin-left: 9rpx;">{{item.text}}</text>
						</view>
						<view v-else>
							<text :class="item.name"></text>
							<text style="margin-left: 9rpx;">{{item.text}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="product">
				<view class="product-item" @click="goTo(5)">
					<image
						src="https://img2.baidu.com/it/u=419111865,3225914506&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
						mode=""></image>
					<view>
						<text class="bg-blue">开发</text>
						<text>xxxx小程序</text>
					</view>
				</view>
				<view class="product-item">
					<image
						src="https://img2.baidu.com/it/u=3625112638,614874177&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
						mode=""></image>
					<view>
						<text class="bg-blue">开发</text>
						<text>xxxx小程序</text>
					</view>
				</view>
				<view class="product-item">
					<image src="http://t14.baidu.com/it/u=3416681815,520803445&fm=224&app=112&f=JPEG?w=500&h=500"
						mode=""></image>
					<view>
						<text class="bg-green">设计</text>
						<text>xxxx小程序</text>
					</view>
				</view>
				<view class="product-item">
					<image
						src="https://img0.baidu.com/it/u=745259874,3861833027&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=510"
						mode=""></image>
					<view>
						<text class="bg-blue">开发</text>
						<text>xxxx小程序</text>
					</view>
				</view>
			</view>
		</view>
		<bottoms></bottoms>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top: 0,
				navList: [{
						text: '全部',
						name: 'iconfont icon-dashboard-3--app-application-dashboard-home-layout-vertical'
					}, {
						text: '系统开发',
						name: 'iconfont icon-Vector-14'
					}, {
						text: 'APP',
						name: 'iconfont icon-Vector-1-2'
					},
					{
						text: '小程序',
						name: 'iconfont icon-Vector-2-1'
					}, {
						text: '3D建模',
						name: 'iconfont icon-Vector-3-1'
					},
					{
						text: '网站',
						name: 'iconfont icon-Vector-5-2'
					}, {
						text: 'logo设计',
						name: 'iconfont icon-Vector-3-1'
					},
					{
						text: '识别设计',
						name: 'iconfont icon-Vector-8'
					}, {
						text: '包装设计',
						name: 'iconfont icon-Vector-7'
					},
					{
						text: '宣传品设计',
						name: 'iconfont icon-Vector-6'
					}, {
						text: 'UI设计',
						name: 'iconfont icon-Vector-5'
					},
					{
						text: '动漫游戏设计',
						name: 'iconfont icon-Group4525'
					}, {
						text: '视频拍摄',
						name: 'iconfont icon-VectorStroke-1'
					},
					{
						text: '照片拍摄',
						name: 'iconfont icon-Vector-9'
					},
				],
				select: 0
			}
		},
		onLoad() {
			this.top = uni.getMenuButtonBoundingClientRect().top;
		},
		methods: {
			sel(i) {
				this.select = i;
			},
			goTo(i) {
				switch (i) {
					case 1:
						uni.navigateTo({
							url: '/pages/companyProfile/companyProfile'
						})
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/companyInformation/companyInformation'
						})
						break;
					case 3:
						uni.navigateTo({
							url: '/pages/infoDetail/infoDetail'
						})
						break;
					case 4:
						uni.navigateTo({
							url: '/pages/caseSelect/caseSelect'
						})
						break;
					case 5:
						uni.navigateTo({
							url: '/pages/caseDetail/caseDetail'
						})
						break;
					case 6:
						uni.navigateTo({
							url: '/pages/my/my'
						})
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding-left: 30rpx;
		padding-bottom: 48rpx;
	}

	.logo {
		margin-top: 67rpx;
		padding-right: 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.img {
			width: 398rpx;
			height: 119rpx;

			image {
				width: 398rpx;
				height: 119rpx;
			}
		}

		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
	}

	.title {
		color: #2A3A72;
		font-size: 36rpx;
		font-weight: 600;
		margin-bottom: 45rpx;
	}

	.clients .title,
	.information .title,
	.case .title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 30rpx;

		.more {
			width: 78rpx;
			height: 40rpx;
		}
	}

	.clients .title {
		margin-bottom: 14rpx;
	}

	.navigation {
		margin-top: 92rpx;
		padding-right: 30rpx;

		.function {
			display: flex;
			justify-content: space-between;

			>view {
				width: 216rpx;
				height: 162rpx;
				border-radius: 40rpx;
				box-shadow: 0 0 30rpx 4rpx #7a98c61a;
				box-sizing: border-box;
				padding: 14rpx 22rpx 0;

				.text {
					color: #2A3A72;
					font-size: 30rpx;
					font-weight: 500;
				}
			}

			.iconbox {
				height: 82rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				.icon1 {
					width: 82rpx;
					height: 82rpx;
					border-radius: 50%;
				}

				.icon-Vector-2 {
					color: #7781a4;
				}
			}
		}
	}

	.clients {
		margin-top: 114rpx;

		.companies {
			display: flex;

			.scroll-view_H {
				white-space: nowrap;
				width: 100%;
			}

			.company {
				border-radius: 40rpx;
				box-shadow: 0 4rpx 32rpx 4rpx #b2c6e340;
				padding: 22rpx 20rpx;
				display: inline-block;
				margin: 30rpx;
				margin-left: 0;

				>image {
					width: 459rpx;
					height: 387rpx;
					border-radius: 30rpx;
				}
			}

			.introduce {
				display: flex;
				align-items: center;
				margin-top: 25rpx;

				image {
					width: 68rpx;
					height: 68rpx;
					border-radius: 50%;
				}

				.company-name {
					font-size: 30rpx;
					font-weight: 500;
					color: #2A3A72;
					margin-left: 14rpx;
				}
			}
		}
	}

	.information {
		margin-top: 86rpx;
		padding-right: 30rpx;

		.title {
			padding-right: 0;
		}

		.news {
			border-radius: 40rpx;
			overflow: hidden;
			display: flex;
			margin-top: 37rpx;

			&:first-child {
				margin-top: 0;
			}

			image {
				width: 345rpx;
				height: 216rpx;
			}

			.news-box {
				flex: 1;
				background-color: #F6FAFB;
				padding: 50rpx 40rpx 27rpx 27rpx;

				.news-title {
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
			}

			.icon-arrow-up-1--arrow-up-keyboard {
				text-align: right;
				color: #3887FD;
				margin-top: 20rpx;
			}
		}
	}

	.case {
		margin-top: 142rpx;

		.screen {
			white-space: nowrap;
			width: 100%;
			margin-bottom: 39rpx;
		}

		.item {
			display: inline-block;
			border-radius: 50rpx;
			padding: 15rpx 35rpx;
			color: #2A3A72;
			font-size: 22rpx;
			image{
				width: 32rpx;
				height: 32rpx;
			}
		}

		.item.active {
			background-color: #7F89AC;
			color: #fff;
		}

		.product {
			display: flex;
			flex-wrap: wrap;
			padding-right: 30rpx;

			.product-item {
				width: 332rpx;
				margin-right: 26rpx;
				margin-bottom: 45rpx;

				&:nth-child(2n) {
					margin-top: 48rpx;
					margin-right: 0;
					margin-bottom: 0;
				}

				image {
					width: 332rpx;
					height: 280rpx;
					border-radius: 40rpx;
					margin-bottom: 12rpx;
				}

				view {
					display: flex;
					align-items: center;
				}

				text {
					&:first-child {
						font-size: 20rpx;
						font-weight: 500;
						padding: 5rpx;
					}

					&:last-child {
						margin-left: 11rpx;
						font-size: 30rpx;
						font-weight: 500;
						color: #333;
					}
				}

				.bg-blue {
					color: #3887FD;
					background-color: #EEF1FF;
				}

				.bg-green {
					color: #6FCC26;
					background-color: #EEFEE7;
				}
			}
		}
	}
</style>
