22 changed files with 619 additions and 28 deletions
|
After Width: | Height: | Size: 117 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 9.8 KiB |
|
After Width: | Height: | Size: 9.2 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
@ -0,0 +1,534 @@ |
|||
<template> |
|||
<div class="index_body"> |
|||
<el-carousel trigger="click" height="754px" ref="carousel"> |
|||
<el-carousel-item v-for="(item,index) in 3" :key="index"> |
|||
<img src="../../assets/img/index_banner.jpg" alt="" class="asset_banner_img"> |
|||
</el-carousel-item> |
|||
</el-carousel> |
|||
<div class="index_conent"> |
|||
<div class="process"> |
|||
<div class="process_tips"> |
|||
<p>交易</p> |
|||
<p>流程</p> |
|||
</div> |
|||
<div class="process_item"> |
|||
<div class="process_item_left"> |
|||
<img src="../../assets/img/index_process.png" alt=""> |
|||
</div> |
|||
<div class="process_item_right"> |
|||
<p>第一步</p> |
|||
<p>注册登录</p> |
|||
</div> |
|||
</div> |
|||
<img src="../../assets/img/index_right.png" alt="" class="index_right"> |
|||
<div class="process_item"> |
|||
<div class="process_item_left"> |
|||
<img src="../../assets/img/index_process1.png" alt=""> |
|||
</div> |
|||
<div class="process_item_right"> |
|||
<p>第二步</p> |
|||
<p>阅读公告</p> |
|||
</div> |
|||
</div> |
|||
<img src="../../assets/img/index_right.png" alt="" class="index_right"> |
|||
<div class="process_item"> |
|||
<div class="process_item_left"> |
|||
<img src="../../assets/img/index_process2.png" alt=""> |
|||
</div> |
|||
<div class="process_item_right"> |
|||
<p>第三步</p> |
|||
<p>咨询看样</p> |
|||
</div> |
|||
</div> |
|||
<img src="../../assets/img/index_right.png" alt="" class="index_right"> |
|||
<div class="process_item"> |
|||
<div class="process_item_left"> |
|||
<img src="../../assets/img/index_process3.png" alt=""> |
|||
</div> |
|||
<div class="process_item_right"> |
|||
<p>第四步</p> |
|||
<p>购买签约</p> |
|||
</div> |
|||
</div> |
|||
<img src="../../assets/img/index_right.png" alt="" class="index_right"> |
|||
<div class="process_item"> |
|||
<div class="process_item_left"> |
|||
<img src="../../assets/img/index_process4.png" alt=""> |
|||
</div> |
|||
<div class="process_item_right"> |
|||
<p>第五步</p> |
|||
<p>资产交付</p> |
|||
</div> |
|||
</div> |
|||
<img src="../../assets/img/index_right.png" alt="" class="index_right"> |
|||
<div class="process_item"> |
|||
<div class="process_item_left"> |
|||
<img src="../../assets/img/index_process5.png" alt=""> |
|||
</div> |
|||
<div class="process_item_right"> |
|||
<p>第六步</p> |
|||
<p>交易完成</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="asset"> |
|||
<div class="asset_left"> |
|||
<div class="asset_left_title"> |
|||
<div class="asset_title_left"> |
|||
<span>热门</span> |
|||
<span>资产</span> |
|||
</div> |
|||
<div class="asset_title_right"> |
|||
<div class="asset_title_right_item" v-for="(item,index) in indexList.views" :key="index">{{item}}</div> |
|||
<span>次浏览</span> |
|||
</div> |
|||
</div> |
|||
<div class="asset_left_content"> |
|||
<div class="tabs_item" @click="goDetails(item.id,'/AssetDetails')" v-for="(item,index) in indexList.hot_list" :key="index"> |
|||
<img :src="item.serial_img" alt="" class="tabs_item_img"> |
|||
<div class="tabs_item_lable">{{item.top_class_name}}</div> |
|||
<div class="tabs_item_content"> |
|||
<p class="tabs_item_content_title">{{item.serial_name}}</p> |
|||
<p class="tabs_item_content_p"> |
|||
<span>评估价格： </span> |
|||
<span class="tabs_item_content_span">￥</span> |
|||
<span class="tabs_item_content_span tabs_item_content_span1">{{item.price}}</span> |
|||
</p> |
|||
<p class="tabs_item_content_p"> |
|||
<span>资产类型： </span> |
|||
<span class="tabs_item_content_span2 tabs_item_content_span3">{{item.parent_class_name}}</span> |
|||
</p> |
|||
<p class="tabs_item_content_p"> |
|||
<span>所在地： </span> |
|||
<span class="tabs_item_content_span2 tabs_item_content_span3">{{item.city}}</span> |
|||
</p> |
|||
<p class="tabs_item_content_p"> |
|||
<span>有效日期： </span> |
|||
<span class="tabs_item_content_span2 ">{{item.effective_date}}前</span> |
|||
</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="asset_left_title"> |
|||
<div class="asset_title_left"> |
|||
<span>最新</span> |
|||
<span>资产</span> |
|||
</div> |
|||
</div> |
|||
<div class="asset_left_content"> |
|||
<div class="tabs_item" @click="goDetails(item.id,'/AssetDetails')" v-for="(item,index) in indexList.news_list" :key="index"> |
|||
<img :src="item.serial_img" alt="" class="tabs_item_img"> |
|||
<div class="tabs_item_lable">{{item.top_class_name}}</div> |
|||
<div class="tabs_item_content"> |
|||
<p class="tabs_item_content_title">{{item.serial_name}}</p> |
|||
<p class="tabs_item_content_p"> |
|||
<span>评估价格： </span> |
|||
<span class="tabs_item_content_span">￥</span> |
|||
<span class="tabs_item_content_span tabs_item_content_span1">{{item.price}}</span> |
|||
</p> |
|||
<p class="tabs_item_content_p"> |
|||
<span>资产类型： </span> |
|||
<span class="tabs_item_content_span2 tabs_item_content_span3">{{item.parent_class_name}}</span> |
|||
</p> |
|||
<p class="tabs_item_content_p"> |
|||
<span>所在地： </span> |
|||
<span class="tabs_item_content_span2 tabs_item_content_span3">{{item.city}}</span> |
|||
</p> |
|||
<p class="tabs_item_content_p"> |
|||
<span>有效日期： </span> |
|||
<span class="tabs_item_content_span2 ">{{item.effective_date}}前</span> |
|||
</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="asset_left_title"> |
|||
<div class="asset_title_left"> |
|||
<span>第三方服务机构</span> |
|||
</div> |
|||
<div class="asset_title_right"> |
|||
<span class="asset_title_right_span">共</span> |
|||
<span>{{indexList.third_party_list.length}}</span> |
|||
<span class="asset_title_right_span">家</span> |
|||
</div> |
|||
</div> |
|||
<div class="asset_left_content" v-if="indexList.third_party_list.length!=0"> |
|||
<img src="../../assets/img/index_banner.jpg" alt="" class="tree_img" v-for="item in 4" :key="item"> |
|||
</div> |
|||
</div> |
|||
<div class="notice"> |
|||
<div class="notice_item" v-if="indexList.asset_notice_list.length!=0"> |
|||
<p class="notice_item_title"> |
|||
<span>挂牌公告</span> |
|||
<span @click="goPage('/Listing')">更多 ></span> |
|||
</p> |
|||
<div class="notice_item_info" v-for="(item,index) in indexList.asset_notice_list" :key="index" @click="goDetails(item.id,'/NoticeDetails')"> |
|||
<div class="notice_item_info_div">{{item.serial_name}}</div> |
|||
<p class="notice_item_info_time">{{item.create_time | formatDate}}</p> |
|||
</div> |
|||
</div> |
|||
<!-- <div class="notice_item" v-if="indexList.asset_notice_list.length!=0"> |
|||
<p class="notice_item_title"> |
|||
<span>摘牌公告</span> |
|||
<span>更多 ></span> |
|||
</p> |
|||
<div class="notice_item_info"> |
|||
<div class="notice_item_info_div">关于宁夏轨道交通技工学校在本所“文化产业板”挂牌的公告关于宁夏轨道交通技工学校在本所“文化产业板”挂牌的公告…</div> |
|||
<p class="notice_item_info_time">2021年7月16日 10:32:21</p> |
|||
</div> |
|||
</div> --> |
|||
<div class="notice_item" v-if="indexList.delist.length!=0"> |
|||
<p class="notice_item_title"> |
|||
<span>成交公告</span> |
|||
<span @click="goPage('/Deal')">更多 ></span> |
|||
</p> |
|||
<div class="notice_item_info" v-for="(item,index) in indexList.delist" :key="index" > |
|||
<div class="notice_item_info_div">{{item.serial_name}}</div> |
|||
<p class="notice_item_info_time">{{item.confirm_delivery_time | formatDate}}</p> |
|||
</div> |
|||
</div> |
|||
<!-- <template v-if="indexList.delist.length!=0"> |
|||
<div class="notice_item1"> |
|||
<img src="../../assets/img/index_banner.jpg" alt=""> |
|||
<div class="notice_item1_content"> |
|||
<p>资产跳转营销标题1</p> |
|||
<p>这里写各种好好看的营销文案！</p> |
|||
</div> |
|||
</div> |
|||
</template> --> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import {index} from '../../api/index' |
|||
export default { |
|||
data(){ |
|||
return{ |
|||
indexList:{ |
|||
hot_list:[], |
|||
news_list:[], |
|||
views:[], |
|||
third_party_list:[], |
|||
asset_notice_list:[], |
|||
delist:[], |
|||
} |
|||
} |
|||
}, |
|||
created(){ |
|||
this.getIndex() |
|||
}, |
|||
methods:{ |
|||
getIndex(){ |
|||
index(this.query).then(res=>{ |
|||
console.info(res) |
|||
if(res.code==100){ |
|||
this.indexList=res.data |
|||
}else{ |
|||
this.$message.error(res.msg) |
|||
} |
|||
}) |
|||
}, |
|||
goPage(url){ |
|||
this.$router.push(url) |
|||
}, |
|||
goDetails(id,url){ |
|||
this.$router.push({path:url,query:{id:id}}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.index_body{ |
|||
margin-top: 5px; |
|||
} |
|||
.tree_img{ |
|||
width: 280px; |
|||
height: 60px; |
|||
cursor: pointer; |
|||
margin-right: 14px; |
|||
margin-bottom: 20px; |
|||
} |
|||
.tree_img:nth-child(n+3){ |
|||
margin-right: 0; |
|||
} |
|||
.asset_title_right_span{ |
|||
color: #333333; |
|||
} |
|||
.notice{ |
|||
width: 300px; |
|||
padding: 15px 10px; |
|||
box-sizing: border-box; |
|||
background: #F2F2F2; |
|||
border: 1px solid #D7D7D7; |
|||
height: auto; |
|||
} |
|||
.notice_item1{ |
|||
width: 242px; |
|||
margin: 0 auto; |
|||
margin-top: 20px; |
|||
background: white; |
|||
} |
|||
.notice_item1 img{ |
|||
width: 100%; |
|||
height: 150px; |
|||
} |
|||
.notice_item1_content{ |
|||
padding: 15px 0; |
|||
text-align: center; |
|||
font-size: 12px; |
|||
color: #555555; |
|||
} |
|||
.notice_item1_content p:last-child{ |
|||
color: #7F7F7F; |
|||
margin-top: 5px; |
|||
} |
|||
.notice_item{ |
|||
padding: 15px 0px; |
|||
border-bottom: 1px solid #D7D7D7; |
|||
} |
|||
.notice_item_title{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
font-size: 12px; |
|||
color: #333333; |
|||
padding: 0px 10px; |
|||
} |
|||
.notice_item_title span:last-child{ |
|||
cursor: pointer; |
|||
} |
|||
.notice_item_info_time{ |
|||
color: #AAAAAA; |
|||
text-align: right; |
|||
margin-top: 3px; |
|||
} |
|||
.notice_item_info{ |
|||
padding: 0px 10px; |
|||
width: 240px; |
|||
font-size: 12px; |
|||
margin-top: 15px; |
|||
position: relative; |
|||
cursor: pointer; |
|||
} |
|||
.notice_item_info_div{ |
|||
width: 100%; |
|||
text-overflow: -o-ellipsis-lastline; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
position: relative; |
|||
} |
|||
.notice_item_info:after{ |
|||
content:""; |
|||
width:0; |
|||
height:0; |
|||
position:absolute; |
|||
left:0px; |
|||
top:1px; |
|||
border-top:solid 6px transparent; |
|||
border-left:solid 6px #AAAAAA; /* 黑色大三角形 */ |
|||
border-bottom:solid 6px transparent; |
|||
} |
|||
.notice_item_title span:first-child{ |
|||
font-size: 18px; |
|||
} |
|||
.asset{ |
|||
display: flex; |
|||
width: 100%; |
|||
justify-content: space-between; |
|||
} |
|||
.asset_left{ |
|||
width: 878px; |
|||
} |
|||
.asset_left_content{ |
|||
display: flex; |
|||
width: 100%; |
|||
justify-content: space-between; |
|||
flex-wrap: wrap; |
|||
} |
|||
.asset_title_right{ |
|||
font-size: 14px; |
|||
color: #C94C4C; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.asset_title_right_item{ |
|||
width: 17px; |
|||
height: 23px; |
|||
background: #C94C4C; |
|||
color: white; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-right: 5px; |
|||
} |
|||
.asset_title_left{ |
|||
font-weight: 650; |
|||
font-size: 24px; |
|||
color: #555555; |
|||
display: flex; |
|||
} |
|||
.asset_title_left span:first-child{ |
|||
color: #C94C4C; |
|||
} |
|||
.asset_left_title{ |
|||
padding: 10px 0; |
|||
padding-right: 20px; |
|||
width: 100%; |
|||
border-bottom: 2px solid #D98282; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-bottom: 20px; |
|||
box-sizing: border-box; |
|||
} |
|||
.asset_banner_img{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.index_conent{ |
|||
width: 1200px; |
|||
margin: 0 auto; |
|||
} |
|||
.process{ |
|||
width: 100%; |
|||
margin: 20px 0; |
|||
border: 1px solid #D7D7D7; |
|||
height: 80px; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.process_tips{ |
|||
width: 110px; |
|||
height: 100%; |
|||
background: #F2F2F2; |
|||
font-weight: 650; |
|||
font-size: 18px; |
|||
color: #333333; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.process_item{ |
|||
margin: 0 36px; |
|||
font-size: 12px; |
|||
color: #7F7F7F; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.process_item_left{ |
|||
width: 27px; |
|||
height: 27px; |
|||
background: #D7D7D7; |
|||
border-radius: 50% 0px 50% 50% ; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-right: 10px; |
|||
} |
|||
.process_item_left img{ |
|||
width: 15px; |
|||
height: 15px; |
|||
} |
|||
.process_item_right p:last-child{ |
|||
font-weight: 650; |
|||
color: #333333; |
|||
margin-top: 5px; |
|||
} |
|||
.index_right{ |
|||
width: 29px; |
|||
height: 29px; |
|||
} |
|||
|
|||
|
|||
|
|||
.tabs_item{ |
|||
width: 283px; |
|||
height: 300px; |
|||
border: 1px solid #E9B7B7; |
|||
margin-bottom: 20px; |
|||
box-sizing: border-box; |
|||
position: relative; |
|||
border-radius: 5px; |
|||
cursor: pointer; |
|||
margin-right: 14px; |
|||
} |
|||
.tabs_item:nth-child(n+3){ |
|||
margin-right: 0; |
|||
} |
|||
.tabs_item_img{ |
|||
width: 100%; |
|||
height: 170px; |
|||
border-radius: 5px 5px 0 0; |
|||
} |
|||
.tabs_item_lable{ |
|||
width: 100px; |
|||
height: 25px; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
font-size: 12px; |
|||
color: #FFFFFF; |
|||
background: #C94C4C; |
|||
z-index: 100; |
|||
line-height: 25px; |
|||
text-align: center; |
|||
} |
|||
.tabs_item_lable::after{ |
|||
content: ''; |
|||
border-top: 12.5px solid transparent; |
|||
border-left: 10px solid #C94C4C; |
|||
border-bottom: 12.5px solid transparent; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 100px; |
|||
} |
|||
.breadcrumb{ |
|||
margin-top: 30px; |
|||
} |
|||
.el-breadcrumb{ |
|||
font-size: 18px; |
|||
} |
|||
.tabs_item_content{ |
|||
width: 100%; |
|||
background-color: rgba(255, 255, 255, 0.5); |
|||
height: 150px; |
|||
margin-top: -40px; |
|||
/* padding: 10px 10px; */ |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
box-sizing: border-box; |
|||
/* padding-bottom: 10px; */ |
|||
} |
|||
.tabs_item_content_title{ |
|||
width: 100%; |
|||
overflow: hidden; |
|||
text-overflow:ellipsis; |
|||
white-space: nowrap; |
|||
font-size: 14px; |
|||
background: rgba(238, 238, 238, 0.5); |
|||
box-sizing: border-box; |
|||
padding: 10px; |
|||
} |
|||
.tabs_item_content_p{ |
|||
color: #7F7F7F; |
|||
font-size: 12px; |
|||
padding-left: 10px; |
|||
} |
|||
.tabs_item_content_span{ |
|||
color: #C94C4C; |
|||
} |
|||
.tabs_item_content_span1{ |
|||
font-size: 18px; |
|||
} |
|||
.tabs_item_content_span2{ |
|||
color: #333333; |
|||
} |
|||
.tabs_item_content_span3{ |
|||
font-weight: bold; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue