320 lines
7.4 KiB
Vue
320 lines
7.4 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="lawyerBack">
|
|
<image src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/fde441acb415f64ef59bf45ff800a302.png" mode="widthFix"></image>
|
|
</view>
|
|
|
|
<view class="lawyerCont">
|
|
<view class="white">
|
|
<view class="basics-top">
|
|
<!-- 4:3 -->
|
|
<image class="basics-head" :src="lawyersData.photo" mode="aspectFill"></image>
|
|
<view class="basics-top-info">
|
|
<view class="basics-top-name">{{lawyersData.name}}</view>
|
|
<view class="basics-top-lingo">精英律师</view>
|
|
<view class="basics-top-lingo">1对1专项咨询解决</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="basics-data">
|
|
<!-- <view class="basics-data-item">
|
|
<view class="basics-data-number basics-score">
|
|
<text>￥</text>{{lawyersData.price}}
|
|
</view>
|
|
<view class="basics-data-name">咨询费用</view>
|
|
</view> -->
|
|
<view class="basics-data-item">
|
|
<view class="basics-data-number">100<text>人</text></view>
|
|
<view class="basics-data-name">服务人数</view>
|
|
</view>
|
|
<view class="basics-data-item">
|
|
<view class="basics-data-number">{{lawyersData.years}}<text>年</text></view>
|
|
<view class="basics-data-name">职业年限</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="basics-good">
|
|
<view class="basics-good-name">擅长</view>
|
|
<view class="basics-good-text">
|
|
<block v-for="(item, index) in lawyersData.tags" :key="index">
|
|
<text>{{item.name}}</text>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="white">
|
|
<view class="white-title">律师档案</view>
|
|
<view class="brief">
|
|
<view class="brief-label">
|
|
<image class="brief-icon" src="/static/icon/lawyerIcon_01.png" mode="aspectFill"></image>
|
|
<view class="brief-cont">
|
|
<view class="brief-name">
|
|
执照认证
|
|
</view>
|
|
<view class="brief-text">
|
|
-
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="brief-label">
|
|
<image class="brief-icon" src="/static/icon/lawyerIcon_03.png" mode="aspectFill"></image>
|
|
<view class="brief-cont">
|
|
<view class="brief-name">
|
|
律所认证
|
|
</view>
|
|
<view class="brief-text">
|
|
精英律师
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="brief-label">
|
|
<image class="brief-icon" src="/static/icon/lawyerIcon_05.png" mode="aspectFill"></image>
|
|
<view class="brief-cont">
|
|
<view class="brief-name">
|
|
荣誉奖项
|
|
</view>
|
|
<view class="brief-text">
|
|
-
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="brief-label">
|
|
<image class="brief-icon" src="/static/icon/lawyerIcon_04.png" mode="aspectFill"></image>
|
|
<view class="brief-cont">
|
|
<view class="brief-name">
|
|
简介
|
|
</view>
|
|
<view class="brief-text">
|
|
{{lawyersData.description}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="brief-label">
|
|
<image class="brief-icon" src="/static/icon/lawyerIcon_02.png" mode="aspectFill"></image>
|
|
<view class="brief-cont">
|
|
<view class="brief-name">
|
|
详情
|
|
</view>
|
|
<view class="brief-text">
|
|
<rich-text :nodes="articleContent"></rich-text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 立即咨询 -->
|
|
<!-- <view class="lawyerBtn">
|
|
<view class="btn" @click="$Router.push({name: 'indexSortpay', params:{id: lawyersData.lawyer_id, type:'lawyer'}})">
|
|
立即咨询 ￥{{lawyersData.price}}
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { lawyersdet } from '@/apis/interfaces/index'
|
|
export default {
|
|
data() {
|
|
return {
|
|
lawyersData : '',
|
|
articleContent : ''
|
|
}
|
|
},
|
|
onShow() {
|
|
// 获取精选律师详情
|
|
this.lawyersInfo()
|
|
},
|
|
methods: {
|
|
lawyersInfo() {
|
|
lawyersdet(this.$Route.query.id).then(res => {
|
|
this.lawyersData = res
|
|
this.articleContent= res.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: "none"
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
background: #f5f5f7;
|
|
height: 100vh;
|
|
overflow-y: scroll;
|
|
}
|
|
.lawyerBack{
|
|
position: absolute;
|
|
width: 100%;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
&::after,
|
|
&::before{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
content: " ";
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
&::after{
|
|
background-image: linear-gradient(to top, #fff, rgba(255,255,255,.0));
|
|
z-index: 1;
|
|
}
|
|
&::before{
|
|
z-index: 2;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
}
|
|
|
|
.lawyerCont {
|
|
position: relative;
|
|
z-index: 3;
|
|
padding: $padding * 2 $padding $padding;
|
|
box-sizing: border-box;
|
|
// border-bottom: 100rpx solid transparent;
|
|
.white {
|
|
background-color: #fff;
|
|
border-radius: 10rpx;
|
|
padding: $padding;
|
|
box-sizing: border-box;
|
|
margin-bottom: $margin;
|
|
}
|
|
.basics-top {
|
|
display: flex;
|
|
margin-bottom: 20rpx;
|
|
.basics-top-info {
|
|
width: calc(100% - 130rpx);
|
|
padding: 0 $padding;
|
|
box-sizing: border-box;
|
|
.basics-top-name {
|
|
font-size: $title-size-sm + 8;
|
|
font-weight: 600;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.basics-top-lingo {
|
|
margin-top: 8rpx;
|
|
color: #85888f;
|
|
font-size: $title-size-sm;
|
|
}
|
|
}
|
|
.basics-head {
|
|
flex: 1;
|
|
width: 120rpx;
|
|
height: 160rpx;
|
|
border-radius: $radius-m;
|
|
}
|
|
}
|
|
.basics-data {
|
|
display: flex;
|
|
.basics-data-item {
|
|
flex: 3;
|
|
text-align: center;
|
|
.basics-data-number {
|
|
font-weight: 600;
|
|
line-height: 54rpx;
|
|
text {
|
|
font-weight: normal;
|
|
font-size: $title-size-sm - 2;
|
|
padding-left: 5rpx;
|
|
}
|
|
&.basics-score {
|
|
color: $mian-color;
|
|
}
|
|
}
|
|
.basics-data-name {
|
|
font-size: $title-size-sm - 2;
|
|
line-height: 32rpx;
|
|
color: $text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.basics-good {
|
|
font-size: $title-size-m;
|
|
display: flex;
|
|
margin-top: $margin + 10;
|
|
.basics-good-name {
|
|
line-height: 42rpx;
|
|
width: 70rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.basics-good-text {
|
|
color: #85888f;
|
|
width: calc(100% - 90rpx);
|
|
text{
|
|
font-size: 24rpx;
|
|
background-color: #f5f5f5;
|
|
color: #9f9f9f;
|
|
display: inline-block;
|
|
margin: 0 0 15rpx 20rpx;
|
|
padding: 0 15rpx;
|
|
border-radius: 10rpx;
|
|
line-height: 42rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.white-title {
|
|
font-size: 32rpx;
|
|
margin-bottom: 20rpx;
|
|
font-weight: 600;
|
|
color: $text-color;
|
|
}
|
|
.brief-label {
|
|
display: flex;
|
|
margin: $margin + 10 0 10rpx;
|
|
width: 100%;
|
|
.brief-icon {
|
|
width: 54rpx;
|
|
height: 54rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
.brief-cont {
|
|
font-size: $title-size-m;
|
|
width: 100%;
|
|
.brief-name {
|
|
margin-bottom: 10rpx;
|
|
color: $text-color;
|
|
}
|
|
.brief-text {
|
|
font-size: $title-size-sm;
|
|
line-height: 44rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.lawyerBtn {
|
|
background-color: #ffffff;
|
|
position: fixed;
|
|
z-index: 99;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 130rpx;
|
|
padding: $padding - 10 $padding;
|
|
box-sizing: border-box;
|
|
.btn {
|
|
background-color: $mian-color;
|
|
color: #ffffff;
|
|
border-radius: $radius-m;
|
|
text-align: center;
|
|
line-height: 90rpx;
|
|
font-size: $title-size-lg;
|
|
}
|
|
}
|
|
</style> |