zsw-farm-bxg/pages/expert/index.vue

<template>
	<view>
		<view class="header">
			<cu-custom :isBack="true" :isCenter="true">
				<block slot="backText">
					<view class="backImg">
						<image src="@/static/images/back-btn.png" mode=""></image>
					</view>
				</block>
				<block slot="content">
					<view class="tab-title">专家专栏</view>
				</block>
			</cu-custom>
		</view>
		
		<view class="list">
			<view class="item" v-for="(item,index) in dataList" :key="index">
				<image class="image" :src="item.image" mode="" :style="index%2?'right: 32rpx;':'left: 30rpx;'"></image>
				<image v-if="index%2" class="bg" src="../../static/images/right-bg.png" mode=""></image>
				<image v-else class="bg" src="../../static/images/left-bg.png" mode=""></image>
				<view class="text-box" :style="index%2?'margin-left: 24rpx;':'margin-left: 296rpx;'">
					<view class="acea-row">
						<view class="name">{{item.expertName}}</view>
						<view class="position">{{item.expertStatus}}</view>
					</view>
					<view class="line"></view>
					<view class="unit">{{item.expertUnit}}</view>
					<view class="info">{{item.expertInfo}}</view>
					<view class="btn" :style="index%2?'':'margin-left: 192rpx;'" @click="contact">向ta留言咨询</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getExpert } from "@/api/public.js"
	export default {
		data() {
			return {
				dataList: [],
			};
		},
		onLoad() {
			this.getExpertList();
		},
		methods: {
			getExpertList() {
				uni.showLoading({
					title: ''
				})
				getExpert().then(res => {
					this.dataList = res.data;
					uni.hideLoading();
				})
			},
			// 客服
			contact() {
				wx.openCustomerServiceChat({
				  extInfo: {url: 'https://work.weixin.qq.com/kfid/kfc3952c32f3d9b68c3'},
				  corpId: 'ww8bcef4602d97a76a',
				  success(res) {}
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.header {
		.tab-title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #2DB5AE;
			line-height: 42rpx;
		}
		.backImg {
			width: 88rpx;
			height: 62rpx;
			padding-left: 26rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.list {
		padding: 20rpx 32rpx;
		.item {
			width: 100%;
			height: 330rpx;
			padding-top: 26rpx;
			position: relative;
			margin-bottom: 32rpx;
			.image {
				position: absolute;
				top: 0;
				width: 216rpx;
				height: 330rpx;
			}
			.bg {
				position: absolute;
				top: 26rpx;
				width: 100%;
				height: 304rpx;
				z-index: -1;
				// box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0,0,0,0.15);
			}
			.text-box {
				width: 362rpx;
				height: 304rpx;
				
				font-size: 20rpx;
				font-family: SourceHanSansSCVF;
				font-weight: 500;
				color: #2DB5AE;
				line-height: 28rpx;
				.name {
					font-size: 30rpx;
					font-weight: bold;
					color: #3A3A3C;
					line-height: 46rpx;
					padding-left: 4rpx;
				}
				.position {
					padding-left: 10rpx;
					font-weight: bold;
					padding-top: 14rpx;
				}
				.line {
					margin-top: 6rpx;
					width: 362rpx;
					height: 2rpx;
					background-color: #979797;
				}
				.unit {
					padding-left: 4rpx;
					padding-bottom: 14rpx;
				}
				.info {
					padding-left: 4rpx;
					height: 126rpx;
					overflow: hidden;
					font-family: PingFang SC;
					line-height: 26rpx;
					margin-bottom: 4rpx;
				}
				.btn {
					margin-left: 4rpx;
					width: 170rpx;
					height: 46rpx;
					background: #2DB5AE;
					border-radius: 16rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 46rpx;
					text-align: center;
				}
			}
		}
	}
</style>