927 lines
22 KiB
Vue
927 lines
22 KiB
Vue
<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="@/static/imgs/logo_title.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="topCont-tool">
|
||
<view class="topCont-tool-left">
|
||
<view class="topCont-tool-cont" @click="seekClick('other', 1)">
|
||
<!-- @click="$Router.push({name: 'sheetLoan', params: {type: 1}}) -->
|
||
<view class="topCont-whole-name">
|
||
经济纠纷
|
||
</view>
|
||
<view class="topCont-whole-tips">
|
||
咨询服务 抖火法律
|
||
</view>
|
||
<image class="topCont-whole-img" src="@/static/imgs/toolImg_00.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view class="topCont-tool-right">
|
||
<view class="topCont-tool-label" @click="seekClick('other', 2)">
|
||
<view class="topCont-tool-cont">
|
||
<view class="topCont-tool-name">
|
||
刑事辩护
|
||
</view>
|
||
<view class="topCont-tool-tips">
|
||
咨询服务 抖火法律
|
||
</view>
|
||
<image class="topCont-tool-img" src="@/static/imgs/toolImg_03.png" alt=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="topCont-tool-label" @click="seekClick('other', 3)">
|
||
<view class="topCont-tool-cont">
|
||
<view class="topCont-tool-name">
|
||
合同纠纷
|
||
</view>
|
||
<view class="topCont-tool-tips">
|
||
咨询服务 抖火法律
|
||
</view>
|
||
<image class="topCont-tool-img" src="@/static/imgs/toolImg_02.png" alt=""></image>
|
||
</view>
|
||
</view>
|
||
</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="@/static/imgs/seek_back.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>
|
||
</template>
|
||
|
||
<script>
|
||
import { home, articleSort, articleList, lawyersBusiness } from '@/apis/interfaces/index'
|
||
import { userIndex } from '@/apis/interfaces/user'
|
||
export default {
|
||
data() {
|
||
return {
|
||
autoplay : true,
|
||
interval : 3000,
|
||
duration : 500,
|
||
homeData : {}, // 首页数据
|
||
homeList : '', // 首页分类
|
||
lawyersWork : [], // 律师业务
|
||
lawyersArr : [], // 精选律师
|
||
noticesArr : [], // 公告列表
|
||
articleArr : [], // 文章分类
|
||
categoryId : 1, // 文章分类id
|
||
listArr : [], // 文章列表
|
||
page : {}, // 分页信息
|
||
lodingStats : false, // 加载状态
|
||
generalShow : false, // 是否有上级弹出
|
||
parentData : '',
|
||
|
||
first : 1,
|
||
layadState : '',
|
||
layadImg : '',
|
||
haveimg : ''
|
||
}
|
||
},
|
||
onShow() {
|
||
// 获取首页数据
|
||
this.homeInfo();
|
||
|
||
// 获取律师业务
|
||
this.lawyersInfo();
|
||
|
||
// 获取文章分类
|
||
this.articleInfo();
|
||
|
||
// 获取文章列表
|
||
this.articleItem();
|
||
|
||
if(this.$store.getters.getToken) {
|
||
userIndex().then(res => {
|
||
this.parentData = res.parent
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
// 首页数据
|
||
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
|
||
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"
|
||
})
|
||
})
|
||
},
|
||
|
||
// 获取律师业务
|
||
lawyersInfo() {
|
||
lawyersBusiness().then(res => {
|
||
this.lawyersWork = res
|
||
}).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'})
|
||
},
|
||
|
||
// 状态
|
||
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
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
body {
|
||
background-color: #f2f6f8;
|
||
}
|
||
.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;
|
||
.topCont-tool-left {
|
||
width: calc(50% - 20rpx);
|
||
position: relative;
|
||
background-color: #554ca7;
|
||
background-image: linear-gradient(to bottom right, #544df1, #8283ff);
|
||
padding-top: calc(50% - 20rpx);
|
||
margin-right: $margin - 10;
|
||
border-radius: $radius;
|
||
overflow: hidden;
|
||
.topCont-whole-name {
|
||
margin: 15rpx 0;
|
||
font-size: $title-size + 6;
|
||
}
|
||
.topCont-whole-tips {
|
||
line-height: 35rpx;
|
||
font-size: $title-size-sm - 2;
|
||
opacity: .9;
|
||
}
|
||
.topCont-whole-img {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
}
|
||
}
|
||
.topCont-tool-right {
|
||
width: 50%;
|
||
}
|
||
.topCont-tool-label {
|
||
position: relative;
|
||
padding-top: calc(50% - 20rpx);
|
||
border-radius: $radius;
|
||
overflow: hidden;
|
||
&:nth-child(1) {
|
||
margin-bottom: 20rpx;
|
||
background-image: linear-gradient(to bottom right, #f46049, #fe8479);
|
||
}
|
||
&:nth-child(2) {
|
||
margin-top: 20rpx;
|
||
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 - 4;
|
||
opacity: .7;
|
||
}
|
||
.topCont-tool-img {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
position: absolute;
|
||
right: 25rpx;
|
||
top: calc(50% - 40rpx);
|
||
}
|
||
}
|
||
}
|
||
.topCont-data {
|
||
background-color: #f6f6f8;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 工具
|
||
.tool {
|
||
padding: $padding - 20 $padding - 20 $padding;
|
||
box-sizing: border-box;
|
||
.tool-lable {
|
||
white-space: nowrap;
|
||
.tool-lable-item {
|
||
display: inline-block;
|
||
font-size: $title-size-m;
|
||
width: 20%;
|
||
text-align: center;
|
||
color: $text-color;
|
||
.tool-lable-img {
|
||
width: 54rpx;
|
||
height: 54rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 法律常识
|
||
.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 {
|
||
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: #f0f0f0;
|
||
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 {
|
||
margin-bottom: $margin;
|
||
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-left: 220rpx;
|
||
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;
|
||
}
|
||
</style>
|