XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

图片查看

Browse Source
This commit is contained in:
luJianJun
2023-07-25 18:17:45 +08:00
parent b39a23dc70
commit f94ef15476
6 changed files with 226 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
src/components/detail/breadcrumb.vue
View File

@@ -1,35 +1,57 @@
<template>
<div class="title-top-box">
<div class="breadcrumb-box">
<el-breadcrumb :separator-icon="ArrowRight">
<el-breadcrumb-item v-for="(item, i) in storeData" :key="i" :to="{ path: item.path }">
<span class="breadcrumb-text">
{{ item.title }}
</span>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="dis-f al-item jus-bet title-box">
<div class="detail-title">
{{ data['data']['info']&&data['data']['info'].subject }}
<div class="pos-r">
<div class="authentication-top" v-if="data['data']&&data['data'].isintermediary===1">
<div class="dis-f al-item jus-bet">
<div>
<img src="../../assets/img/detail/authenticationLogon.png" class="logo" alt="">
<img src="../../assets/img/detail/authenticationTitle.png" class="title" alt="">
</div>
<div class="dis-f al-item">
<div class="dis-f al-item">
<img src="../../assets/img/detail/authenticationType.svg" class="type-icon" alt=""><span>房产证明</span>
</div>
<div class="dis-f al-item" style="margin-left:20px;">
<img src="../../assets/img/detail/authenticationType.svg" class="type-icon" alt=""><span>房东身份证</span>
</div>
</div>
</div>
<div class="tool-btn-box dis-f al-item">
<div class="btn-s dis-f al-item jus-x" @click="operation">
<img src="../../assets/img/detail/collect.png" v-show="!data.data.isfav" class="img" alt="">
<img src="../../assets/img/detail/collectT.png" v-show="data.data.isfav" class="img" alt="">
<span class="mg-l-5">
{{data.data.isfav?data['data']['info'].count_fav:'收藏'}}
</span>
</div>
<div class="title-top-box pos-r" style="z-index:666;">
<div class="top-round" v-if="data['data']&&data['data'].isintermediary===1">
<div class="top-round-s"></div>
</div>
<div class="breadcrumb-box">
<el-breadcrumb :separator-icon="ArrowRight">
<el-breadcrumb-item v-for="(item, i) in storeData" :key="i" :to="{ path: item.path }">
<span class="breadcrumb-text">
{{ item.title }}
</span>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="dis-f al-item jus-bet title-box">
<div class="detail-title">
{{ data['data']['info'] && data['data']['info'].subject }}
</div>
<div class="line">
<div class="tool-btn-box dis-f al-item">
<div class="btn-s dis-f al-item jus-x" @click="operation">
<img src="../../assets/img/detail/collect.png" v-show="!data.data.isfav" class="img" alt="">
<img src="../../assets/img/detail/collectT.png" v-show="data.data.isfav" class="img" alt="">
<span class="mg-l-5">
{{ data.data.isfav ? data['data']['info'].count_fav : '收藏' }}
</span>
</div>
<div class="line">
</div>
<div class="btn-s dis-f al-item jus-x" style="position: relative;">
<img src="../../assets/img/detail/forward.png" class="img" alt="">
<span class="mg-l-5">
转发
</span>
<transmit-btn v-if="data.data['info']" :qrcode="data.data['qrcode']" :title="data.data.info['title']"></transmit-btn>
</div>
<div class="btn-s dis-f al-item jus-x" style="position: relative;">
<img src="../../assets/img/detail/forward.png" class="img" alt="">
<span class="mg-l-5">
转发
</span>
<transmit-btn v-if="data.data['info']" :qrcode="data.data['qrcode']"
:title="data.data.info['title']"></transmit-btn>
</div>
</div>
</div>
</div>
@@ -38,31 +60,31 @@
<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { reactive, onMounted, ref, defineProps,watchEffect } from 'vue'
import { reactive, onMounted, ref, defineProps, watchEffect } from 'vue'
import store from '@/store'
import transmitBtn from '@/components/public/transmitBtn.vue'
const props=defineProps({
const props = defineProps({
data: {
type: Object,
default: function () {
return {}
}
},
operation:{
type:Function
operation: {
type: Function
}
})
let data=reactive({})
let data = reactive({})
let operation=props.operation
let operation = props.operation
//导航数据
let storeData = store.state.routeList
console.log('storeData',storeData)
console.log('storeData', storeData)
watchEffect(()=>{
data['data']=props.data
watchEffect(() => {
data['data'] = props.data
console.log(data['data'])
})
@@ -101,6 +123,47 @@ img {
justify-content: space-between;
}
.authentication-top {
position: absolute;
left: 0px;
top: -80px;
width: 1200px;
height: 65px;
background: -webkit-linear-gradient(166.822294925074deg, rgba(255, 214, 243, 1) -89%, rgba(128, 128, 255, 1) 53%);
background: -moz-linear-gradient(-76.8222949250736deg, rgba(255, 214, 243, 1) -89%, rgba(128, 128, 255, 1) 53%);
background: linear-gradient(-76.8222949250736deg, rgba(255, 214, 243, 1) -89%, rgba(128, 128, 255, 1) 53%);
border: none;
border-radius: 16px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
padding: 10px 22px;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 15px;
color: #FFFFFF;
.logo {
width: 20px;
height: 20px;
}
.title {
width: 81px;
height: 17px;
margin-left: 8px;
}
.type-icon{
width: 18px;
height:18px;
margin-right:8px;
}
}
.title-top-box {
width: 1200px;
background: inherit;
@@ -115,6 +178,24 @@ img {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
font-size: 14px;
transform: translateY(-38px);
position: relative;
.top-round{
width:22px ;
height:22px;
background: #fff;
position: absolute;
top:-8px;
right:-1px;
.top-round-s{
position: absolute;
top:-13px;
left:-1px;
border-radius:0 0 16px 0;
background:rgba(174, 159, 251, 1);
width:23px;
height:20px;
}
}
.breadcrumb-box {
padding: 20px;
@@ -157,7 +238,7 @@ img {
font-size: 14px;
justify-content: center;
.mg-l-5{
.mg-l-5 {
margin-left: 5px;
}
@@ -167,13 +248,14 @@ img {
font-weight: 400;
font-style: normal;
text-align: center;
width:80px;
height:40px;
line-height:40px;
width: 80px;
height: 40px;
line-height: 40px;
cursor: pointer;
.img{
width:20px;
height:20px;
.img {
width: 20px;
height: 20px;
}
}
@@ -181,7 +263,7 @@ img {
width: 1px;
height: 21px;
background: #d7d7d7;
margin:0 15px;
margin: 0 15px;
}
}
}