You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
165 lines
3.7 KiB
165 lines
3.7 KiB
<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>
|
|
|