公司列表

h5_web/pages.json

@@ -208,13 +208,32 @@
 				"enablePullDownRefresh": false
 			}
 
+		}, {
+			"path": "pages/cooperativeEnterprise/cooperativeEnterprise",
+			"style": {
+				"navigationBarTitleText": "企业列表",
+				"enablePullDownRefresh": false,
+				"navigationBarBackgroundColor": "#3D5D4C",
+				"navigationBarTextStyle": "white"
+			}
+
+		}, {
+			"path": "pages/businessDetails/businessDetails",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false,
+				"navigationBarBackgroundColor": "#3D5D4C",
+				"navigationBarTextStyle": "white",
+				"backgroundColor": "#f2f2f2"
+			}
+
 		}
 	],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8"
+		"navigationBarBackgroundColor": "#F2F2F2",
+		"backgroundColor": "#F2F2F2"
 	},
 	"tabBar": {
 		"color": "#909399",

h5_web/pages/businessDetails/businessDetails.scss

@@ -0,0 +1,242 @@
+/* 企业详情 */
+.business-details {
+	position: relative;
+	font-family: 'PingFangSC-Regular, PingFang SC';
+	background-color: #f2f2f2;
+	min-height: calc(190vh - 44px);
+	/* 背景 */
+	&-bg {
+		position: relative;
+		&-1 {
+			height: 400rpx;
+			background: linear-gradient(#456553, #3D5D4C);
+		}
+		&-2 {
+			width: 100%;
+			height: 200rpx;
+			border-radius: 0 0 50% 50%;
+			background-color: #3D5D4C;
+		}
+		image {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 520rpx;
+			height: 520rpx;
+		}
+	}
+	/* 内容 */
+	&-content {
+		width: 100%;
+		position: absolute;
+		top: 0;
+		left: 0;
+		text-align: center;
+		&-logo {
+			background-color: rgba(255, 255, 255, 0.3);
+			width: 156rpx;
+			height: 156rpx;
+			border-radius: 50%;
+			margin: 45rpx auto 25rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			image {
+				width: 139rpx;
+				height: 139rpx;
+				border-radius: 50%;
+			}
+		}
+		&-name {
+			font-family: 'PingFangSC-Heavy, PingFang SC';
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #fff;
+		}
+		&-evaluate {
+			width: calc(100% - 60rpx);
+			height: 64rpx;
+			line-height: 64rpx;
+			margin: 36rpx auto 63rpx;
+			background-color: rgba($color: #fff, $alpha: 0.8);
+			border-radius: 32rpx;
+			padding: 0 31rpx;
+			display: flex;
+			justify-content: space-between;
+			.left {
+				display: flex;
+				.evaluate {
+					font-size: 26rpx;
+					color: #EF651F;
+					margin-right: 19rpx;
+				}
+				.describe {
+					font-size: 24rpx;
+					color: #000;
+					font-weight: 400;
+					margin-right: 14rpx;
+				}
+				.grade {
+					color: #EF651F;
+					margin-left: 14rpx;
+					font-weight: 400;
+				}
+			}
+			.right {
+				color: #666;
+				font-size: 24rpx;
+				.icon {
+					margin-left: 9rpx;
+				}
+			}
+		}
+		
+		/* 公司概况 */
+		&-survey {
+			width: calc(100% - 60rpx);
+			margin: 0 auto;
+			background-color: #fff;
+			border-radius: 10rpx;
+			padding: 28rpx 33rpx;
+			text-align: left;
+			.title {
+				color: #000;
+				font-size: 32rpx;
+				font-weight: 400;
+				margin-bottom: 10rpx;
+			}
+			.item {
+				color: #545454;
+				font-size: 24rpx;
+				line-height: 48rpx;
+				.address {
+					display: flex;
+					justify-content: space-between;
+					image {
+						width: 20rpx;
+						height: 26rpx;
+						vertical-align: middle;
+						margin-right: 10rpx;
+					}
+					view:last-child {
+						color: #058fff;
+					}
+				}
+			}
+		}
+		
+		/* 公司介绍 */
+		&-introduce {
+			width: calc(100% - 60rpx);
+			margin: 20rpx auto 0;
+			background-color: #fff;
+			border-radius: 10rpx;
+			padding: 28rpx 33rpx;
+			text-align: left;
+			.title {
+				color: #000;
+				font-size: 32rpx;
+				font-weight: 400;
+				margin-bottom: 10rpx;
+			}
+			.content {
+				font-size: 24rpx;
+				color: #545454;
+				line-height: 40rpx;
+			}
+		}
+		
+		/* 公司相册 */
+		&-album {
+			width: calc(100% - 60rpx);
+			margin: 20rpx auto 0;
+			background-color: #fff;
+			border-radius: 10rpx;
+			padding: 28rpx 33rpx;
+			text-align: left;
+			.title {
+				color: #000;
+				font-size: 32rpx;
+				font-weight: 400;
+				margin-bottom: 20rpx;
+			}
+			.pic-list {
+				display: flex;
+				justify-content: space-between;
+				flex-wrap: wrap;
+				&-item {
+					width: calc(50% - 8rpx);
+					margin-bottom: 8rpx;
+					image {
+						width: 100%;
+						height: 206rpx;
+						border-radius: 5rpx;
+					}
+				}
+			}
+		}
+		
+		/* 公司职位 */
+		&-position {
+			width: calc(100% - 60rpx);
+			margin: 20rpx auto 0;
+			background-color: #fff;
+			border-radius: 10rpx;
+			padding: 28rpx 33rpx;
+			text-align: left;
+			.title {
+				color: #000;
+				font-size: 32rpx;
+				font-weight: 400;
+				margin-bottom: 16rpx;
+				border-bottom: solid 1px #9F9F9F;
+				padding-bottom: 20rpx;
+			}
+			.position-list {
+				&-item {
+					display: flex;
+					justify-content: space-between;
+					padding: 32rpx 0;
+					margin-bottom: 8rpx;
+					.left {
+						display: flex;
+						.logo {
+							width: 112rpx;
+							height: 112rpx;
+							margin-right: 20rpx;
+							image {
+								width: 100%;
+								height: 100%;
+							}
+						}
+						.info {
+							view {
+								font-size: 22rpx;
+								color: #9B9B9B;
+								line-height: 40rpx;
+								&:first-child {
+									color: #000;
+									font-size: 30rpx;
+								}
+							}
+						}
+					}
+					.right {
+						display: flex;
+						flex-direction: column;
+						view {
+							font-size: 22rpx;
+							text-align: right;
+							color: #BCBCBC;
+							&:first-child {
+								flex: 1;
+								color: #EE5A10;
+								font-weight: 500;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}

h5_web/pages/businessDetails/businessDetails.vue

@@ -0,0 +1,151 @@
+<!-- 企业详情 -->
+<template>
+	<view class="business-details">
+		<!-- 背景 -->
+		<view class="business-details-bg">
+			<view class="business-details-bg-1"></view>
+			<view class="business-details-bg-2"></view>
+			<image src="../../static/img/company-details-bg-1.png" mode=""></image>
+		</view>
+		
+		<!-- 内容 -->
+		<view class="business-details-content">
+			<view class="business-details-content-logo">
+				<image src="../../static/img/avatar.jpg" mode=""></image>
+			</view>
+			<view class="business-details-content-name">中国平安银行股份有限公司</view>
+			<view class="business-details-content-evaluate">
+				<view class="left">
+					<view class="evaluate">优秀</view>
+					<view class="describe">综合评分</view>
+					<view class="star">
+						<u-icon name="star-fill" color="#EF651F"></u-icon>
+						<u-icon name="star-fill" color="#EF651F"></u-icon>
+						<u-icon name="star-fill" color="#EF651F"></u-icon>
+						<u-icon name="star-fill" color="#EF651F"></u-icon>
+						<u-icon name="star-fill" color="#EF651F"></u-icon>
+					</view>
+					<view class="grade">4.8</view>
+				</view>
+				<view class="right">
+					详情
+					<u-icon class="icon" name="arrow-right" color="#666666"></u-icon>
+				</view>
+			</view>
+			
+			<!-- 公司概况 -->
+			<view class="business-details-content-survey">
+				<view class="title">公司概况</view>
+				<view class="item">
+					<view>公司全称：中国平安银行股份有限公司贵州分公司</view>
+					<view>公司简称：平安银行</view>
+					<view>所属行业：金融</view>
+					<view>公司规模：1000人以上</view>
+					<view>联系方式：400-888-1234</view>
+					<view class="address">
+						<view>公司地址：贵州省乌当区顺海中路88号</view>
+						<view>
+							<image src="../../static/img/dingwei.png"/>
+							查看位置
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<!-- 公司介绍 -->
+			<view class="business-details-content-introduce">
+				<view class="title">公司介绍</view>
+				<view class="content">
+					平安银行，全称平安银行股份有限公司，是中国平安保险（集团）股份有限公司控股的一家跨区域经营的股份制商业银行，为中国大陆12家全国性股份制商业银行之一。注册资本为人民币51.2335亿元，总资产近1.37万亿元，总部位于广东省深圳市。
+					中国平安保险（集团）股份有限公司（以下简称“中国平安”）及其控股子公司持有平安银行股份共计约26.84亿股，占比约52.38%，为平安银行的控股股东。在全中国各地设有34家分行，在香港设有代表处。
+					2012年1月，现平安银行的前身深圳发展银行收购平安保险集团旗下的深圳平安银行，收购完成后，深圳发展银行更名为新的平安银行，组建新的平安银行正式对外营业。2019年6月26日，平安银行等8家银行首批上线运行企业信息联网核查系统。
+				</view>
+			</view>
+			
+			<!-- 公司相册 -->
+			<view class="business-details-content-album">
+				<view class="title">公司相册</view>
+				<view class="pic-list">
+					<view
+						class="pic-list-item"
+						v-for="(item, index) in picList"
+						:key="index"
+					>
+						<image :src="item.url" mode=""></image>
+					</view>
+				</view>
+			</view>
+			
+			<!-- 公司职位 -->
+			<view class="business-details-content-position">
+				<view class="title">公司职位</view>
+				<view class="position-list">
+					<view
+						class="position-list-item"
+						v-for="(item, index) in positionList"
+						:key="index"
+					>
+						<view class="left">
+							<view class="logo">
+								<image :src="item.icon" mode=""></image>
+							</view>
+							<view class="info">
+								<view>{{ item.position }}</view>
+								<view>{{ item.content }}</view>
+								<view>{{ item.address }}</view>
+							</view>
+						</view>
+						<view class="right">
+							<view>{{ item.money }}</view>
+							<view>{{ item.date }}</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				// 公司相册
+				picList: [
+					{
+						url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5883681.s21i.faiusr.com%2F2%2FABUIABACGAAgpdOXrQUo6bG5wgYw9AM4uwI.jpg&refer=http%3A%2F%2F5883681.s21i.faiusr.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637389823&t=ae7d50157800667800f24911b60c4a3b'
+					},
+					{
+						url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg105.job1001.com%2Fupload%2Falbum%2F2015-01-09%2F1420776447-A8AMV7X_960_600.JPG&refer=http%3A%2F%2Fimg105.job1001.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637389823&t=b67bd35034b7a1f74dd4d453ecc24e4a'
+					}
+				],
+				// 公司职位
+				positionList: [
+					{
+						icon: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.tatait.com%2FUpLoadFiles%2F20130723%2F2013072319120209.jpg&refer=http%3A%2F%2Fwww.tatait.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637390645&t=8c9969db409a72105fc18f8702b21013',
+						position: '业务员',
+						content: '白云区｜经验不限｜中等专科',
+						address: '平安银行贵州分公司',
+						money: '4.0K-8.0K',
+						date: '2020.12.25'
+					},
+					{
+						icon: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.tatait.com%2FUpLoadFiles%2F20130723%2F2013072319120209.jpg&refer=http%3A%2F%2Fwww.tatait.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637390645&t=8c9969db409a72105fc18f8702b21013',
+						position: '业务员',
+						content: '白云区｜经验不限｜中等专科',
+						address: '平安银行贵州分公司',
+						money: '4.0K-8.0K',
+						date: '2020.12.25'
+					}
+				]
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+@import './businessDetails.scss';
+</style>

h5_web/pages/cooperativeEnterprise/cooperativeEnterprise.scss

@@ -0,0 +1,65 @@
+/* 企业列表 */
+.enterprose-list {
+	background-color: #f2f2f2;
+	min-height: calc(100vh - 44px);
+	/* 搜索 */
+	&-search {
+		width: calc(100% - 60rpx);
+		margin: 0 auto;
+		padding: 29rpx 0;
+	}
+	/* tab */
+	&-tab {
+		background-color: #fff;
+		border-top-left-radius: 5px;
+		border-top-right-radius: 5px;
+		padding: 5px 0;
+	}
+	/* 列表 */
+	&-content {
+		&-item {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 40rpx 30rpx;
+			background-color: #fff;
+			margin-bottom: 20rpx;
+			border-radius: 10rpx;
+			&:first-child {
+				border-top: solid 1px #DBDBDB;
+				border-top-left-radius: 0;
+				border-top-right-radius: 0;
+			}
+			&-left {
+				display: flex;
+				align-items: center;
+				.image {
+					margin-right: 22rpx;
+					image {
+						width: 82rpx;
+						height: 82rpx;
+						border-radius: 10rpx;
+					}
+				}
+				.info {
+					font-family: 'PingFangSC-Regular, PingFang SC;';
+					color: #000;
+					font-size: 32rpx;
+					font-weight: 400;
+					.company {
+						display: flex;
+						font-size: 22rpx;
+						color: #9B9B9B;
+						margin-top: 18rpx;
+						.icon {
+							margin-right: 83rpx;
+							view:first-child {
+								margin-right: 10rpx;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}

h5_web/pages/cooperativeEnterprise/cooperativeEnterprise.vue

@@ -0,0 +1,168 @@
+<!-- 企业列表 -->
+<template>
+	<view class="enterprose-list">
+		<z-paging
+			ref="paging"
+			v-model="companyList"
+			@query="queryList"
+		>
+			<!-- 搜索 -->
+			<view class="enterprose-list-search" slot="top">
+				<u-search
+					class="enterprose-list-search-input"
+					placeholder="请输入关键词"
+					v-model="keyword"
+					shape="square"
+					input-align="center"
+					:show-action="false"
+					bg-color="#ffffff"
+					height="70"
+				/>
+			</view>
+			
+			<!-- tab -->
+			<view class="enterprose-list-tab" slot="top">
+				<u-tabs
+					:list="tabList"
+					:is-scroll="true"
+					:current="tabCur"
+					height="70"
+					font-size="28"
+					inactive-color="#5F5F5F"
+					@change="tabChange"
+				/>
+			</view>
+			
+			<!-- 列表 -->
+			<view class="enterprose-list-content">
+				<view
+					class="enterprose-list-content-item"
+					v-for="(item, index) in companyList"
+					:key="index"
+					@click="jumpPage('/pages/businessDetails/businessDetails', { id: item.company})"
+				>
+					<view class="enterprose-list-content-item-left">
+						<view class="image">
+							<image :src="item.img" mode=""></image>
+						</view>
+						<view class="info">
+							<view>{{ item.company }}</view>
+							<view class="company">
+								<view class="icon"><u-icon name="star-fill" color="#EF651F"/>{{ item.star }}</view>
+								<view>{{ item.content }}</view>
+							</view>
+						</view>
+					</view>
+					<view class="enterprose-list-content-item-right">
+						<u-icon name="arrow-right"/>
+					</view>
+				</view>
+			</view>
+		</z-paging>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				// 搜索关键词
+				keyword: '',
+				// tab
+				tabList: [
+					{
+						name: '全部'
+					},
+					{
+						name: '金融类'
+					},
+					{
+						name: '酒店类'
+					},
+					{
+						name: 'IT类'
+					},
+					{
+						name: '餐饮类'
+					},
+					{
+						name: '保险类'
+					},
+					{
+						name: '其他'
+					}
+				],
+				// tab选中项
+				tabCur: 0,
+				// 公司列表
+				companyList: []
+			}
+		},
+		methods: {
+			/**
+			 * tab切换
+			 */
+			tabChange(val) {
+				this.tabCur = val
+			},
+			/**
+			 * @param {String} url
+			 * @param {Object} params
+			 */
+			jumpPage(url, params) {
+				this.$u.route({
+					url: url,
+					params: params
+				})
+			},
+			/**
+			 * 
+			 */
+			queryList(pageNo, pageSize) {
+				this.$refs.paging.complete(
+				[
+					{
+						img: require('@/static/img/avatar.jpg'),
+						position: '保安员',
+						company: '保利贵州酒店管理有限公司',
+						content: '20-99人 · 餐饮',
+						area: '4.0 ~ 8.0k',
+						date: '2020-12.25',
+						star: 4.2
+					},
+					{
+						img: require('@/static/img/avatar.jpg'),
+						position: '保安员',
+						company: '保利贵州酒店管理有限公司',
+						content: '20-99人 · 餐饮',
+						area: '4.0 ~ 8.0k',
+						date: '2020-12.25',
+						star: 4.2
+					},
+					{
+						img: require('@/static/img/avatar.jpg'),
+						position: '保安员',
+						company: '保利贵州酒店管理有限公司',
+						content: '20-99人 · 餐饮',
+						area: '4.0 ~ 8.0k',
+						date: '2020-12.25',
+						star: 4.2
+					},
+					{
+						img: require('@/static/img/avatar.jpg'),
+						position: '保安员',
+						company: '保利贵州酒店管理有限公司',
+						content: '20-99人 · 餐饮',
+						area: '4.0 ~ 8.0k',
+						date: '2020-12.25',
+						star: 4.2
+					}
+				])
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+@import './cooperativeEnterprise.scss';
+</style>

h5_web/pages/index/index.vue

@@ -40,7 +40,7 @@
 					<image class="service-item-img" src="../../static/img/index-service-02.png" mode="aspectFill"></image>
 					<view class="service-item-text">招聘就业</view>
 				</view>
-				<view class="service-item" @click="openPage('pages/inbuild/inbuild','合作企业')" >
+				<view class="service-item" @click="openPage('pages/cooperativeEnterprise/cooperativeEnterprise','合作企业')" >
 					<image class="service-item-img" src="../../static/img/index-service-03.png" mode="aspectFill"></image>
 					<view class="service-item-text">合作企业</view>
 				</view>