Goodgame_web/pages/corporateStyle.vue

<template>
	<Layout :index="6" :banner="6">
		<view class="max-width mg-b-14">
			<view class="common-head">
				<text class="color-666">当前位置：</text>
				<a class="color-666 pointer" href="/">首页</a>
				<text class="color-666 mg-10-lr">></text>
				<text>企业风采</text>
				<view class="search-box d-b-c">
					<image class="search-img" src="../static/img/search_01@2x.png"></image>
					<input class="search-input" v-model="keywords" confirm-type="search" @confirm="search" placeholder="搜索您想找的企业" placeholder-class="placeholder" />
					<text class="icon-close" v-if="keywords" @tap="del"></text>
					<view class="search_add" @tap="search">搜索</view>
				</view>
			</view>
		</view>
		<view :class="{'bgc-fc':index%2==1}" v-for="(item,index) in listData" :key="index">
			<view class="max-width">
				<view class="fc-item d-b-c">
					<a class="fc-item-left pointer" :href="'/companyProflie?id='+item.store_id">
						<image class="fc-item-img" :src="item.logo?item.logo.file_path:''" mode="aspectFill"></image>
					</a>
					<a class="fc-item-right pointer" :href="'/companyProflie?id='+item.store_id">
						<view class="d-b-c border-bt-e6 fc-item-top">
							<view class="fc-item-title text-ellipsis">
								<text>{{item.store_name||''}}</text>
							</view>
							<view class="fc-item-time">
								<text>{{item.create_time.substring(0,10)||''}}</text>
							</view>
						</view>
						<view class="fc-item-text">
							<text>联系人：{{item.linkman||''}}</text><text class="fc-item-text2">联系电话：{{item.phone||''}}</text>
						</view>
						<view class="fc-item-text padd-right text-ellipsis">
							<text>地址：{{item.address||''}}</text>
							<view class="fc-item-more">
								<text>查看更多</text>
								<image class="fc-item-icon" src="/static/img/Thearrow@2x.png" mode=""></image>
							</view>
						</view>
					</a>
				</view>
			</view>
		</view>
		<el-pagination background layout="prev, pager, next" :total="total" :current-page="page" :page-size="list_rows" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
		
	</Layout>
</template>

<script>
	import Layout from './part/layout.vue';
	export default {
		components: {
			Layout
		},
		data() {
			return {
				page: 1,
				list_rows: 10,
				listData: [],
				total: 0,
				keywords: '',
			}
		},
		created() {
			this.getData();
		},
		methods: {
			search(){
				uni.showLoading({
					title: '搜索中..',
					mask: true
				});
				this.page = 1;
				this.getData();
			},
			del(){
				this.keywords = '';
				this.page = 1;
				this.getData();
			},
			/*每页多少条*/
			handleSizeChange(val){
				this.list_rows = val;
				this.getData();
			},
			/*选择第几页*/
			handleCurrentChange(val){
				this.page = val;
				this.getData();
			},
			getData(){
				this._get('store.store/lists',{
					page: this.page,
					list_rows: this.list_rows,
					keywords: this.keywords,
				},res=>{
					uni.hideLoading();
					this.listData = res.data.list.data;
					this.total = res.data.list.total;
				},err=>{
					uni.hideLoading();
				});
			},
			goJianjie(e){
				this.$router.push({
					path: 'companyProflie',
					query:{
						id: e.store_id
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.mg-b-14{
		margin-bottom: 14px;
	}
	.search-box {
		float: right;
		width: 406px;
		height: 60px;
		border: 2px solid #F48612;
		border-radius: 30px;
		margin-top: 45px;

		.search-img {
			width: 22px;
			height: 22px;
			margin-right: 10px;
			margin-left: 20px;
		}

		.search-input {
			flex: 1;
			height: 60px;
			line-height: 60px;
			font-size: 20px;
		}
		.placeholder{
			font-size: 18px;
		}
		.icon-close{
			font-size: 32px;
			color: #CCCCCC;
			padding: 0 10px;
		}
		.search_add {
			width: 120px;
			background-color: #F48612;
			height: 60px;
			border-radius: 30px;
			text-align: center;
			line-height: 60px;
			font-size: 20px;
			color: #ffffff;
		}
	}

	.fc-item {
		padding: 80px 0;

		.fc-item-left {
			display: block;
			width: 350px;
			height: 200px;

			.fc-item-img {
				width: 350px;
				height: 200px;
			}
		}

		.fc-item-right {
			display: block;
			width: calc(100% - 350px);
			padding-left: 30px;
			.fc-item-top{
				margin-bottom: 25px;
			}
			.fc-item-title {
				max-width: 72%;
				height: 74px;
				line-height: 74px;
				font-size: 22px;
				font-weight: bold;
			}

			.fc-item-time {
				font-size: 20px;
				color: #999999;
			}

			.fc-item-text {
				height: 50px;
				line-height: 50px;
				font-size: 22px;
				position: relative;
				.fc-item-text2{
					margin-left: 64px;
				}
			}
			.padd-right{
				padding-right: 200px;
			}
			.fc-item-more {
				line-height: 50px;
				font-size: 22px;
				color: #F48612;
				position: absolute;
				top: 0;
				right: 0;
				.fc-item-icon {
					width: 22px;
					height: 22px;
					margin-left: 12px;
				}
			}
		}
	}
	.zhanwei{
		height: 214px;
	}
</style>