892 lines
21 KiB
Vue
892 lines
21 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 topCont-tool-right">
|
|
<view class="topCont-tool-label blueBlock" @click="$Router.push({name: 'PersonBrief', params: {type: 1}})">
|
|
<view class="topCont-tool-cont">
|
|
<!-- @click="$Router.push({name: 'indexEntrust'}) -->
|
|
<view class="topCont-tool-name">
|
|
个人全年法律
|
|
</view>
|
|
<view class="topCont-tool-tips">
|
|
咨询服务 抖火法律
|
|
</view>
|
|
<image class="topCont-tool-img" src="@/static/imgs/toolImg_01.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
<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">
|
|
咨询服务 抖火法律
|
|
</view>
|
|
<image class="topCont-tool-img" src="@/static/imgs/toolImg_03.png" alt=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="topCont-tool-right">
|
|
<view class="topCont-tool-label purpleBlock" @click="$Router.push({name: 'StandBrief', params: {type: 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_04.png" mode="widthFix"></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">
|
|
咨询服务 抖火法律
|
|
</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 } from '@/apis/interfaces/index'
|
|
import { userIndex } from '@/apis/interfaces/user'
|
|
export default {
|
|
data() {
|
|
return {
|
|
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 : ''
|
|
}
|
|
},
|
|
onShow() {
|
|
// 获取首页数据
|
|
this.homeInfo();
|
|
|
|
// 获取文章分类
|
|
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"
|
|
})
|
|
})
|
|
},
|
|
|
|
// 文章分类
|
|
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);
|
|
margin-right: $margin - 10;
|
|
overflow: hidden;
|
|
}
|
|
.topCont-tool-right {
|
|
width: 50%;
|
|
}
|
|
.topCont-tool-label {
|
|
position: relative;
|
|
padding-top: calc(50% - 20rpx);
|
|
border-radius: $radius;
|
|
overflow: hidden;
|
|
&.blueBlock {
|
|
margin-bottom: 20rpx;
|
|
background-image: linear-gradient(to bottom right, #097df5, #71b9ff);
|
|
}
|
|
&.redBlock {
|
|
margin-top: 20rpx;
|
|
background-image: linear-gradient(to bottom right, #f46049, #fe8479);
|
|
}
|
|
&.purpleBlock {
|
|
margin-bottom: 20rpx;
|
|
background-image: linear-gradient(to bottom right, #9c78fe, #a892ff);
|
|
}
|
|
&.greenBlock {
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 法律常识
|
|
.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>
|