Files
douhuo-h5/pages/index/index.vue
2024-03-29 15:13:27 +08:00

1433 lines
36 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="content">
<!-- top -->
<view class="top">
<view class="topBack"></view>
<view class="topCont">
<!-- logo -->
<view class="topCont-logo">
<image class="topCont-logo-img" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/fbd7ddba29e4ac81467b3d218233bb02.png" mode="widthFix"></image>
<view class="topCont-logo-go" @click="seekClick">
立即咨询
</view>
</view>
<!-- 专业优质在线法律平台 -->
<view class="topCont-text">
<view class="topCont-text-name">
专业优质在线法律平台
</view>
<view class="topCont-text-tips">
<text v-if="homeData.attorney">
{{homeData.attorney.value}}+{{homeData.attorney.name}}
</text>
<block v-if="homeData.use_count">{{homeData.use_count.value}}+{{homeData.use_count.name}}</block>
</view>
</view>
<!-- 平台公告 -->
<view class="topCont-notice">
<view class="topCont-notice-name"><image src="@/static/imgs/noticeArrow.png" mode="widthFix"></image>平台公告</view>
<view class="topCont-notice-cont">
<view class="topCont-notice-title">今日</view>
<swiper class="topCont-notice-swiper" circular :autoplay="autoplay" :interval="interval"
:duration="duration" vertical="y">
<block v-for="(item, index) in noticesArr" :key="index">
<swiper-item>
<view class="topCont-swiper-item">
<view class="topCont-swiper-name nowrap" v-if="item.user">
{{item.user.name}} {{item.user.text}}
</view>
<view class="topCont-swiper-name nowrap" v-else>
今日暂无信息
</view>
</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
<!-- 新增改版 - 协商调解类 -->
<view class="module" style="display: none;">
<view class="module-title">
协商调解类
</view>
<view class="horizontal">
<!-- <view class="horizontal-label" v-for="(item, index) in businessArr" :key="index" @click="horizontalClick(item.title, item.business_id)">
<view class="horizontal-name">
{{item.title}}
</view>
<view class="horizontal-tips">
去咨询>
</view>
<image class="horizontal-img" v-if="item.business_id == 1" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/18/a44d5b7433a6663c23c2f9e8307dcbe3.png" alt="" mode="widthFix"></image>
<image class="horizontal-img" v-else src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/18/a44d5b7433a6663c23c2f9e8307dcbe3.png" alt="" mode="widthFix"></image>
</view> -->
<view class="horizontal-label" @click="horizontalClick">
<view class="horizontal-name">
报单咨询
</view>
<view class="horizontal-tips">
立即咨询 >
</view>
<image class="horizontal-img" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/18/85d5475c4901d2113a433f09205804d8.png" alt="" mode="widthFix"></image>
</view>
</view>
</view>
<!-- 账户管理咨询类 -->
<view class="module" v-if="accountData.length > 0" style="display: none;">
<view class="module-title">
账户管理咨询类
</view>
<scroll-view class="law" scroll-x="true" show-scrollbar="false">
<view class="law-label" v-for="(item, index) in accountData" :key="index" @click="onMagInfo('Account', item.id)">
<image class="law-label-img" :src="item.cover" mode="widthFix"></image>
<view class="law-label-cont">
<view class="nowrap law-label-name">
{{item.title}}
</view>
<view class="law-label-price">
{{item.price}}
</view>
</view>
</view>
</scroll-view>
</view>
<!-- 委托管理类 -->
<view class="module" v-if="delegation.length > 0" style="display: none;">
<view class="module-title">
委托管理类
</view>
<scroll-view class="law" scroll-x="true" show-scrollbar="false">
<view class="law-label" v-for="(item, index) in delegation" :key="index" @click="onMagInfo('Delegation', item.id)">
<image class="law-label-img" :src="item.cover" mode="widthFix"></image>
<view class="law-label-cont">
<view class="nowrap law-label-name">
{{item.title}}
</view>
<view class="law-label-price">
{{item.price}}
</view>
</view>
</view>
</scroll-view>
</view>
<!-- 新增改版 - 法律资讯类 -->
<view class="module">
<view class="module-title">
企业法律顾问
</view>
<scroll-view class="law" scroll-x="true" show-scrollbar="false">
<!-- <view class="law-label" @click="clickBrief">
<image class="law-label-img" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/18/f3db072ac405edf2a3dc3fd6c3aae206.png" mode="widthFix"></image>
<view class="law-label-cont">
<view class="law-label-name">
个人全年法律
</view>
<view class="law-label-text">
咨询服务
</view>
<view class="law-label-price">
365.00/
</view>
</view>
</view> -->
<view class="law-label" @click="$Router.push({name: 'StandBrief', params: {type: 2}})">
<image class="law-label-img" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/18/d813f30a393e6d50df8cc59a36e557c8.png" mode="widthFix"></image>
<view class="law-label-cont">
<view class="nowrap law-label-name">
企业全年法律
</view>
<view class="law-label-text">
咨询服务
</view>
<view class="law-label-price">
3650.00/
</view>
</view>
</view>
<view class="law-label" @click="$Router.push({name: 'StandBrief', params: {type: 2}})">
<image class="law-label-img" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/18/1feb7650fff088d4b98455020ebc5620.png" mode="widthFix"></image>
<view class="law-label-cont">
<view class="law-label-name">
企业全年法律
</view>
<view class="nowrap law-label-text">
咨询服务
</view>
<view class="law-label-price">
8888.00/
</view>
</view>
</view>
<view class="law-label" @click="$Router.push({name: 'StandBrief', params: {type: 2}})">
<image class="law-label-img" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/18/d946342544d1175cb98402c1a97ee50f.png" mode="widthFix"></image>
<view class="law-label-cont">
<view class="nowrap law-label-name">
企业全年法律
</view>
<view class="law-label-text">
咨询服务
</view>
<view class="law-label-price">
20000.00/
</view>
</view>
</view>
<view class="law-label" @click="$Router.push({name: 'StandBrief', params: {type: 2}})">
<image class="law-label-img" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/18/21b6b99149feb39e42e893977ef0c5eb.png" mode="widthFix"></image>
<view class="law-label-cont">
<view class="nowrap law-label-name">
企业全年法律
</view>
<view class="law-label-text">
咨询服务
</view>
<view class="law-label-price">
50000.00/
</view>
</view>
</view>
</scroll-view>
</view>
<!-- 新增改版 - 诉讼委托类 -->
<view class="module">
<view class="module-title">
案件诉讼委托
</view>
<view class="topCont-tool">
<view class="topCont-tool-label redBlock" @click="$Router.push({name: 'EntrustBrief'})">
<view class="topCont-tool-cont">
<view class="topCont-tool-name">
案件委托
</view>
<view class="topCont-tool-tips">
2000
</view>
<image class="topCont-tool-img" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/e4d4dff88c6042c3dbc7f48cc64d022b.png" alt=""></image>
</view>
</view>
<view class="topCont-tool-label greenBlock" @click="$Router.push({name: 'ExpandBrief'})">
<view class="topCont-tool-cont">
<view class="topCont-tool-name">
拓展服务
</view>
<view class="topCont-tool-tips">
500
</view>
<image class="topCont-tool-img" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/38b5da41e958d797441adbabc6ea2769.png" alt=""></image>
</view>
</view>
</view>
</view>
<!-- 新增改版 - 增收赋能类 -->
<view class="module" style="display: none;">
<view class="module-title">
增收赋能类
</view>
<scroll-view class="enable-scroll" scroll-x="true" show-scrollbar="false">
<view class="enable-label" v-for="(item, index) in empowerArr" :key="index" @click="onEmpower(item.id)">
<image class="enable-img" :src="item.cover" alt="" mode="widthFix"></image>
<view class="nowrap enable-title">{{item.title}}</view>
<view class="enable-price">{{item.price}}/</view>
</view>
</scroll-view>
</view>
<!-- 数据展示 -->
<view class="topCont-data">
<view class="topCont-data-label" v-if="homeData.consult">
{{homeData.consult.name}}<text>{{homeData.consult.value}}</text>
</view>
<view class="topCont-data-label" v-if="homeData.sucess_count">
{{homeData.sucess_count.name}}<text>{{homeData.sucess_count.value}}</text>
</view>
<view class="topCont-data-label" v-if="homeData.success_rate">
{{homeData.success_rate.name}}<text>{{homeData.success_rate.value}}</text>
</view>
</view>
</view>
</view>
<!-- 工具 -->
<!-- <view class="tool">
<scroll-view class="tool-lable" scroll-x="true" show-scrollbar="false">
<view class="tool-lable-item" v-for="(item, index) in lawyersWork" :key="index" @click="$Router.push({name: 'indexSort', params: {id: item.lawyer_business_id}})">
<image :src="item.cover" class="tool-lable-img"></image>
<view class="tool-lable-name">
{{item.title}}
</view>
</view>
</scroll-view>
</view> -->
<!-- 金牌律师 -->
<view class="list">
<view class="list-title">
金牌律师
</view>
<view class="lawyer">
<view class="lawyer-item" v-for="(item, index) in lawyersArr" :key="index" @click="$Router.push({name: 'lawyerDetails', params: {id: item.lawyer_id}})">
<view class="lawyer-item-img">
<!-- 5:6 -->
<image :src="item.cover" mode="aspectFill"></image>
<view class="nowrap lawyer-item-name">
{{item.name}}
</view>
</view>
<view class="lawyer-item-cont">
<view class="nowrap lawyer-item-tips">
擅长
<block v-for="(items, itemsIndex) in item.tags" :key="itemsIndex">
{{items.name}},
</block>
</view>
<view class="lawyer-item-price">
<!-- <view class="lawyer-item-number">{{item.price}}</view> -->
<!-- <text>{{item.years}}+人咨询</text> -->
</view>
</view>
</view>
</view>
</view>
<!-- 法律常识 -->
<view class="list">
<view class="list-title">
法律常识
</view>
<view class="list-tabs">
<scroll-view class="list-classify" scroll-x="true" show-scrollbar="false">
<view v-for="(item, index) in articleArr" :key="index" class="list-tabs-item" :class="{show : categoryId == item.category_id}" @click="onTabs(item.category_id)">{{item.title}}</view>
</scroll-view>
</view>
<view class="list-item">
<view class="list-item-label" v-for="(item, index) in listArr" :key="index" @click="$Router.push({name: 'indexDetails', params: {id: item.article_id}})">
<view class="list-item-img">
<!-- 5:6 -->
<image :src="item.cover" mode="widthFix"></image>
</view>
<view class="list-item-cont">
<view class="nowrap list-item-name">
{{item.title}}
</view>
<view class="list-item-see">
<image class="list-item-icon" src="@/static/imgs/indexSee.png" mode="widthFix"></image>{{item .clicks}} 游览
</view>
<view class="list-item-tips" v-for="(items, itemsIndex) in item.categories" :key="itemsIndex">
{{items.title}}
</view>
</view>
</view>
</view>
</view>
<!-- 是否有上级 -->
<view class="tipsBack" v-if="generalShow"></view>
<view class="tipsCont" v-if="generalShow">
<view class="tipsWhite">
<image class="tipsCont-img" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/5051bbafbadf7fc24628e3a22acdab04.jpg" mode="widthFix"></image>
<view class="tipsWhite-top">
<view class="tipsWhite-name">
抱歉您还没有业务员
</view>
<view class="tipsWhite-text">
绑定后可立即咨询
</view>
</view>
<view class="tipsWhite-btn">
<view class="tipsWhite-btn-go" @click="generalShow = false">
暂不绑定
</view>
<view class="tipsWhite-btn-go" @click="judgeGeneral">
立即绑定
</view>
</view>
</view>
</view>
<!-- 弹出 -->
<view class="haveBack" v-if="haveimg"></view>
<view class="haveCont" v-if="haveimg">
<image class="haveCont-img" :src="layadImg" mode="widthFix"></image>
<image class="haveCont-close" src="@/static/imgs/close.png" mode="widthFix" @click="haveHIde"></image>
</view>
<view class="tipsBack" v-if="officialShow"></view>
<view class="tipsCont" v-if="officialShow">
<view class="tipsWhite">
<image class="tipsCont-img" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/6b1485847b45273618f8d922ceee889c.png" mode="widthFix"></image>
<view class="tipsWhite-top">
<view class="tipsWhite-name">
请您先关注抖火法律咨询公众号
</view>
<view class="tipsWhite-text">
关注后可立即下单
</view>
</view>
<view class="tipsWhite-btn">
<view class="tipsWhite-btn-go" @click="officialShow = false">
稍后关注
</view>
<view class="tipsWhite-btn-go" @click="judgeGeneral">
马上关注
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { workIndex, home, articleSort, articleList, accountManagement, delegation } from '@/apis/interfaces/index'
import { judgeReal, userIndex, authFollow } from '@/apis/interfaces/user'
import { lists } from '@/apis/interfaces/empower.js'
export default {
data() {
return {
businessArr : [], // 协商调解数组
canBuy : '', // 是否有免费个人咨询
officialShow : false, // 公众号
autoplay : true,
interval : 3000,
duration : 500,
homeData : {}, // 首页数据
homeList : '', // 首页分类
lawyersArr : [], // 精选律师
noticesArr : [], // 公告列表
articleArr : [], // 文章分类
categoryId : 1, // 文章分类id
listArr : [], // 文章列表
page : {}, // 分页信息
lodingStats : false, // 加载状态
generalShow : false, // 是否有上级弹出
parentData : '',
first : 1,
layadState : '',
layadImg : '',
haveimg : '',
// 增收赋能列表
empowerArr : [],
// 账户管理类
accountData : [],
// 委托管理类
delegation : []
}
},
onShow() {
// 业务类型列表
workIndex().then(res => {
this.businessArr = res
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
// 获取首页数据
this.homeInfo();
// 获取文章分类
this.articleInfo();
// 获取文章列表
this.articleItem();
// 增收赋能
this.getEmpower();
// 账户管理类
this.getManagement();
// 委托管理类
this.getDelegation();
if(this.$store.getters.getToken) {
userIndex().then(res => {
this.parentData = res.parent
}).catch(err => {
uni.showToast({
title: err.message,
icon: "none"
})
})
}
},
methods: {
// 获取账户管理类
getManagement(){
accountManagement().then(res => {
let accountData = res
this.accountData = accountData
}).catch(err => {
uni.showToast({
title: err.message,
icon: "none"
})
})
},
// 获取委托管理类
getDelegation(){
delegation().then(res => {
let delegationData = res
this.delegation = delegationData
}).catch(err => {
uni.showToast({
title: err.message,
icon: "none"
})
})
},
// 查看管理类业务
onMagInfo(type, id){
this.$Router.push({
name : 'Mag' + type,
params : { id }
})
},
// 增收赋能接口
getEmpower(){
lists().then(res => {
this.empowerArr = res;
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
},
// 首页数据
homeInfo() {
home().then(res => {
if(res.layad.is_lay_ad) {
this.layadImg = res.layad.lay_ad_img
}
let times = Number(res.layad.times.padEnd(4, 0))
if(this.first === 1 && res.layad.is_lay_ad) {
this.haveimg = true
// 定时器
let timer = setInterval(() => {
clearInterval(timer)
this.haveimg = false
},times);
}
this.homeList = res.categories
this.lawyersArr = res.lawyers
this.noticesArr = res.notices
this.canBuy = res.synthesis.can.buy
let newObj = {}
res.configs.map(item => newObj[item.slug] = {name: item.name, value: item.value})
this.homeData = newObj
}).catch(err => {
uni.showToast({
title: err.message,
icon: "none"
})
})
},
// 文章分类
articleInfo() {
articleSort().then(res => {
this.articleArr = res
}).catch(err => {
uni.showToast({
title: err.message,
icon: "none"
})
})
},
// 文章分类筛选
onTabs(e) {
this.categoryId = e
// 获取文章列表
this.articleItem();
},
// 文章列表
articleItem(page) {
articleList({
category_id: this.categoryId,
page : page || 1
}).then(res => {
let list = this.listArr,
newData = []
if(page == 1 || page == undefined) list = []
newData = list.concat(res.data)
this.listArr = newData
this.page = res.page
this.lodingStats = false
uni.stopPullDownRefresh()
}).catch(err => {
uni.showToast({
title: err.message,
icon: "none"
})
})
},
// 立即咨询判断
seekClick(e, type) {
if(this.$store.getters.getToken) {
if(this.parentData) {
if(e != 'other') {
// 跳到立即咨询
this.$Router.push({name: 'indexIntroduce'})
} else {
// 跳到其他立即咨询
this.$Router.push({name: 'sheetLoan', params: {type: type}})
}
return
}
// 业务员弹出
this.generalShow = true
return
}
// 去登录
this.$Router.push({name: 'Login'})
},
// 协商调解类
horizontalClick() {
if(this.$store.getters.getToken) {
if(this.parentData) {
// 再次判断是否认证
this.sheetClick();
return
}
// 业务员弹出
this.generalShow = true
return
}
// 去登录
this.$Router.push({name: 'Login'})
},
// 判断是否认证
sheetClick() {
judgeReal().then(res => {
if(res.has_sign) {
if(!res.has_subscribe) {
// 弹出公众号
this.officialShow = true
} else {
// 跳到咨询单
this.$Router.push({
name : 'sheetCreate'
})
// 跳到咨询单
// this.$Router.push({
// name : 'sheetBasic',
// params : {
// businessTitle: title,
// businessId: business_id
// }
// })
}
return
}
// 跳到认证页面
this.$Router.push({name: 'sheetIdcard'})
}).catch( err => {
uni.showToast({
title: err.message,
icon: "none"
})
})
},
// 状态
officialGeneral(){
// 获取微信授权信息
authFollow({
url: 'https://web.douhuofalv.com/webview/webCode'
// url: 'https://web.douhuotest.douhuofalv.com/webview/webCode'
}).then(res => {
window.location.href = res
}).catch(err => {
uni.showToast({
title: err.message,
icon: "none"
})
})
// 关闭公众号
this.generalShow = false
},
// 状态
judgeGeneral(){
// 跳到业务员搜索
this.$Router.push({name: 'indexWork'})
// 关闭业务员弹出
this.generalShow = false
},
// 页面相关事件处理函数--监听用户下拉动作
onPullDownRefresh() {
// 获取文章列表
this.articleItem()
},
// 上拉加载
onReachBottom(){
this.lodingStats = true
let pageNumber = this.page.current
if(this.page.has_more){
pageNumber++
// 获取文章列表
this.articleItem(pageNumber)
}
},
// 关闭弹出
haveHIde() {
this.first = 0
this.haveimg = false
},
// 是否有免费个人咨询
clickBrief(){
if(this.$store.getters.getToken) {
if(this.parentData) {
// 再次判断是否认证
judgeReal().then(res => {
if(res.has_sign) {
if(!res.has_subscribe) {
// 弹出公众号
this.officialShow = true
} else {
if(this.canBuy) {
this.$Router.push({
name : 'FeeWrite',
params : {
synthesisId: 1
}
})
return
}
this.$Router.push({
name : 'PersonBrief',
params : {
synthesisId: 1,
type: 1
}
})
}
return
}
// 跳到认证页面
this.$Router.push({name: 'sheetIdcard'})
}).catch( err => {
uni.showToast({
title: err.message,
icon: "none"
})
})
return
}
// 业务员弹出
this.generalShow = true
return
}
// 去登录
this.$Router.push({name: 'Login'})
},
// 查看增收赋能详情
onEmpower(id){
if(this.$store.getters.getToken) {
this.$Router.push({
name : 'EmpowerInfo',
params : { id }
})
return
}
// 去登录
this.$Router.push({name: 'Login'})
}
}
}
</script>
<style lang="scss" scoped>
.content {
background-color: #f2f6f8;
height: 100vh;
overflow-y: scroll;
}
.top {
position: relative;
.topBack {
width: 100%;
position: absolute;
padding-top: 37%;
background-image: linear-gradient(to right, #d51a59, #ed7646);
border-radius: 0 0 $radius*4 $radius*4;
}
.topCont {
width: 100%;
position: inherit;
top: 0;
left: 0;
padding: $padding;
box-sizing: border-box;
position: relative;
.topCont-logo {
display: flex;
line-height: 58rpx;
.topCont-logo-img {
margin-right: 15rpx;
width: 190rpx;
}
.topCont-logo-name {
font-weight: 600;
}
.topCont-logo-go {
background-color: #ffffff;
border-radius: $radius*5;
text-align: center;
color: $mian-color;
font-size: $title-size;
line-height: 72rpx;
font-weight: 600;
display: inline-block;
position: absolute;
right: $margin;
top: $margin + 10;
padding: 0 $padding + 10;
}
}
.topCont-text {
margin-top: $margin;
color: #ffffff;
.topCont-text-name {
font-size: $title-size + 6;
font-weight: 600;
}
.topCont-text-tips {
font-size: $title-size-sm;
margin: $margin - 10 0 $margin;
text {
padding-right: $padding * 2;
display: inline-block;
position: relative;
}
}
}
.topCont-notice {
width: 100%;
height: 74rpx;
overflow: hidden;
display: flex;
background-color: #ffffff;
border-radius: $radius - 5;
padding: 0 $padding;
box-sizing: border-box;
margin-bottom: $margin;
.topCont-notice-name {
color: $mian-color;
font-size: $title-size-lg;
font-weight: 600;
width: 190rpx;
line-height: 74rpx;
display: flex;
image {
width: 38rpx;
height: 38rpx;
margin-top: 19rpx;
margin-right: 10rpx;
vertical-align: middle;
}
}
.topCont-notice-cont {
height: 74rpx;
width: calc(100% - 190rpx);
display: flex;
.topCont-notice-title {
font-size: $title-size-sm - 4;
display: inline-block;
border: 2rpx solid $mian-color;
color: $mian-color;
height: 34rpx;
line-height: 32rpx;
margin-top: 20rpx;
width: 60rpx;
text-align: center;
border-radius: $radius - 10;
margin-right: $margin - 10;
}
.topCont-notice-swiper {
height: 74rpx;
width: calc(100% - 60rpx);
.topCont-swiper-item {
display: flex;
font-size: $title-size-sm - 2;
line-height: 74rpx;
.topCont-swiper-name {
color: $text-color;
}
}
}
}
}
.topCont-tool {
display: flex;
position: relative;
.topCont-tool-label {
width: calc(50% - 10rpx);
position: relative;
padding-top: 20%;
border-radius: $radius;
overflow: hidden;
&.redBlock {
margin-right: 15rpx;
background-image: linear-gradient(to bottom right, #f46049, #fe8479);
}
&.greenBlock {
margin-left: 15rpx;
background-image: linear-gradient(to bottom right, #32c4c2, #50ecc7);
}
}
.topCont-tool-cont {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
padding: $padding - 10 $padding;
box-sizing: border-box;
color: #ffffff;
.topCont-tool-name {
margin-bottom: $margin - 15;
}
.topCont-tool-tips {
font-size: $title-size-sm;
opacity: .7;
}
.topCont-tool-img {
width: 80rpx;
height: 80rpx;
position: absolute;
right: 25rpx;
top: calc(50% - 40rpx);
}
}
}
.topCont-data {
background-color: #ffffff;
line-height: 70rpx;
display: flex;
margin-top: 30rpx;
border-radius: $radius - 10;
font-size: $title-size-sm - 2;
.topCont-data-label {
flex: 3;
text-align: center;
text {
color: $mian-color;
padding: 0 5rpx;
}
}
}
}
}
// 法律常识
.list {
padding:0 $padding;
box-sizing: border-box;
.list-title {
font-weight: 600;
margin-bottom: 10rpx;
color: $text-color;
}
.lawyer {
overflow: hidden;
margin: 20rpx -15rpx 0;
.lawyer-item {
background-color: #fff;
width: calc(50% - 30rpx);
float: left;
margin: 0 15rpx $margin;
border: 2rpx solid #f1f1f1;
box-sizing: border-box;
border-radius: $radius-m;
overflow: hidden;
.lawyer-item-img {
position: relative;
width: 100%;
padding-top: 55%;
overflow: hidden;
background-color: #515151;
image {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.lawyer-item-name {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .1);
line-height: 54rpx;
color: #ffffff;
padding: 0 $padding - 10;
box-sizing: border-box;
font-size: $title-size-lg;
}
}
.lawyer-item-cont {
padding: $padding - 10;
box-sizing: border-box;
.lawyer-item-tips {
font-size: $title-size-m;
color: $text-color;
}
.lawyer-item-price {
display: flex;
margin-top: 10rpx;
line-height: 44rpx;
.lawyer-item-number {
flex: 1;
color: $mian-color;
font-weight: 600;
font-size: $title-size;
}
text {
font-size: $title-size-sm;
color: #9d9d9d;
}
}
}
}
}
.list-tabs {
background-color: #ffffff;
border-radius: $radius-m;
padding: 5rpx $padding 15rpx;
box-sizing: border-box;
margin-top: $margin - 10;
}
.list-classify {
white-space: nowrap;
.list-tabs-item {
display: inline-block;
font-size: $title-size-m;
color: $text-color;
padding-right: 50rpx;
line-height: 54rpx;
position: relative;
border-bottom: 6rpx solid #e5e5e5;
&::after {
position: absolute;
content: '';
left: 0;
bottom: -6rpx;
background-color: transparent;
border-radius: $radius*3;
width: calc(100% - 50rpx);
height: 6rpx;
z-index: 9;
}
&:last-child {
padding-right: 0;
}
&.show {
color: #000000;
}
&.show::after {
background-color: $mian-color;
}
}
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}
}
.list-item {
margin-top: $margin;
.list-item-label {
background-color: #fff;
padding: 20rpx;
box-sizing: border-box;
margin-bottom: $margin;
border-radius: 10rpx;
position: relative;
.list-item-img {
width: 200rpx;
height: 150rpx;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d2d2d2;
border-radius: $radius - 10;
overflow: hidden;
box-sizing: border-box;
image {
width: 100%;
vertical-align:middle;
}
}
.list-item-cont {
position: absolute;
left: 0;
top: 0;
width: 100%;
padding: 20rpx 20rpx 20rpx 250rpx;
box-sizing: border-box;
box-sizing: border-box;
.list-item-name {
color: $text-color;
line-height: 44rpx;
font-size: $title-size-m;
}
.list-item-see {
font-size: $title-size-sm - 4;
margin-top: 30rpx;
display: flex;
line-height: 30rpx;
.list-item-icon {
width: 30rpx;
height: 30rpx;
margin-right: 10rpx;
}
}
.list-item-tips {
font-size: $title-size-sm - 4;
display: inline-block;
color: #a1a1a1;
padding-left: 40rpx;
}
}
}
}
}
// 是否有上级
.tipsBack {
position: fixed;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
z-index: 9;
background-color: rgba(0, 0, 0, .8);
}
.tipsCont {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 10;
padding: 0 10%;
box-sizing: border-box;
}
.tipsWhite {
background-color: #ffffff;
border-radius: 20rpx;
overflow: hidden;
}
.tipsWhite-top {
padding: $padding;
box-sizing: border-box;
text-align: center;
}
.tipsCont-img {
width: 100%;
}
.tipsWhite-name {
text-align: center;
color: #111111;
font-size: 34rpx;
font-weight: 600;
margin-bottom: 15rpx;
}
.tipsWhite-text {
font-size: 30rpx;
color: #666666;
line-height: 48rpx;
}
.tipsWhite-btn {
display: flex;
padding: $padding 10rpx;
box-sizing: border-box;
.tipsWhite-btn-go {
flex: 2;
color: #fff;
margin: 0 15rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
border: 2rpx solid #F6F6F6;
background-color: #007df5;
border-radius: $radius-m;
&:first-child {
color: #333333;
background-color: #ffffff;
border: 2rpx solid #cccccc;
}
}
}
// 图片弹出
.haveBack {
position: fixed;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
z-index: 9;
background-color: rgba(0, 0, 0, .7);
}
.haveCont {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 10;
padding: 0 10%;
box-sizing: border-box;
text-align: center;
}
.haveCont-img {
width: 75%;
border-radius: 20rpx;
overflow: hidden;
display: block;
margin: 0 auto;
}
.haveCont-close {
width: 52rpx;
height: 52rpx;
margin-top: 10px;
opacity: .8;
}
// 新改版
.module {
background-color: #fff;
padding: 30rpx;
box-sizing: border-box;
border-radius: 10rpx;
margin-top: 30rpx;
.module-title {
margin-bottom: 20rpx;
font-weight: 600;
color: #4d4d4d;
}
}
.law {
white-space: nowrap;
.law-label {
display: inline-block;
width: 190rpx;
margin-right: 30rpx;
.law-label-img {
width: 190rpx;
}
.law-label-cont {
// position: absolute;
// left: 0;
// top: 0;
// padding: 0 0 30rpx 170rpx;
// box-sizing: border-box;
font-size: 28rpx;
.law-label-name {
font-size: 28rpx;
}
.law-label-text {
padding: 10rpx 0;
color: #999999;
font-size: 24rpx;
}
.law-label-price {
color: #f0115c;
font-weight: 600;
}
}
}
}
.enable-scroll {
white-space: nowrap;
.enable-label {
display: inline-block;
width: 190rpx;
margin-right: 30rpx;
.enable-img {
width: 190rpx;
}
.enable-title {
font-size: 28rpx;
margin: 10rpx 0 15rpx;
}
.enable-price {
font-size: 28rpx;
color: #f0115c;
font-weight: 600;
}
}
}
.horizontal {
display: flex;
.horizontal-label {
background-color: #fd8c40;
border-radius: 10rpx;
position: relative;
padding: 30rpx;
box-sizing: border-box;
overflow: hidden;
flex: 2;
.horizontal-img {
width: 300rpx;
position: absolute;
bottom: 0;
right: 0;
}
.horizontal-name {
color: #ffffff;
font-size: 38rpx;
}
.horizontal-tips {
margin:20rpx 0 10rpx;
display: inline-block;
color: #ffffff;
border-radius: 80rpx;
border: 2rpx solid #ffffff;
font-size: 26rpx;
padding: 0 20rpx;
line-height: 44rpx;
}
}
}
// 关注
.tipsBack {
position: fixed;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
z-index: 9;
background-color: rgba(0, 0, 0, .8);
}
.tipsCont {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 10;
padding: 0 10%;
box-sizing: border-box;
}
.tipsWhite {
background-color: #ffffff;
border-radius: 20rpx;
overflow: hidden;
}
.tipsWhite-top {
padding: $padding;
box-sizing: border-box;
text-align: center;
}
.tipsCont-img {
width: 100%;
}
.tipsWhite-name {
text-align: center;
color: #111111;
font-size: 34rpx;
font-weight: 600;
margin-bottom: 15rpx;
}
.tipsWhite-text {
font-size: 30rpx;
color: #666666;
line-height: 48rpx;
}
.tipsWhite-btn {
display: flex;
padding: $padding 10rpx;
box-sizing: border-box;
.tipsWhite-btn-go {
flex: 2;
color: #fff;
margin: 0 15rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
border: 2rpx solid #F6F6F6;
background-color: #007df5;
border-radius: $radius-m;
&:first-child {
color: #333333;
background-color: #ffffff;
border: 2rpx solid #cccccc;
}
}
}
</style>