whyneedname
2 years ago
15 changed files with 837 additions and 55 deletions
@ -0,0 +1,157 @@
|
||||
<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;'">向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(); |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</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> |
After Width: | Height: | Size: 3.1 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 500 B |
Loading…
Reference in new issue