You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
377 lines
7.6 KiB
377 lines
7.6 KiB
<template> |
|
<view class="project-page"> |
|
<view class="content"> |
|
<view class="acea-row content-box"> |
|
<view class="content-left acea-row row-middle"> |
|
<view class="title line1">蜂蜜供应商</view> |
|
<view class="label">A轮</view> |
|
<view class="title-s line2">优质的供应源、多元化的土地使用、快速扩张的能力、稳定的分销渠道</view> |
|
</view> |
|
<image src="../../../static/images/home/menu6.png"></image> |
|
</view> |
|
<view class="category-box acea-row"> |
|
<view class="tag-item-b tag">持续盈利</view> |
|
<view class="tag-item-y tag">财务规范</view> |
|
<view class="tag-item-p tag">零负债</view> |
|
</view> |
|
<view class="region acea-row row-middle"> |
|
<view class="regin-box br1"> |
|
<view class="title-l">项目领域</view> |
|
<view class="title-m">农业</view> |
|
</view> |
|
<view class="regin-box"> |
|
<view class="title-l">融资金额</view> |
|
<view class="title-m">200万元-300万元</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="detials-box"> |
|
<view class="pa20"> |
|
<view class="title acea-row row-middle"> |
|
<image src="../../../static/images/shu.png" mode=""></image>项目详情 |
|
</view> |
|
<view>所属区域：武汉</view> |
|
<view class="detail-con">项目详情：融资方的合作标准封锁地带</view> |
|
</view> |
|
<view class="mask-box acea-row row-center-wrapper"> |
|
<view class="acea-row row-center-wrapper mask-con"> |
|
<view class="con">投资方认证后可查看项目详情</view> |
|
<view class="authentication-btn">立即认证</view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="recommend-box"> |
|
<view class="title acea-row row-middle"> |
|
<image src="../../../static/images/shu.png" mode=""></image>项目推荐 |
|
</view> |
|
<view class="update-box acea-row row-middle"> |
|
<view>今日已更新7个</view> |
|
<view class="update-icon acea-row row-center-wrapper"> |
|
<image src="../../../static/images/update-icon.png" mode=""></image>换一批 |
|
</view> |
|
</view> |
|
<scroll-view class="scroll-view_H acea-row" scroll-x="true"> |
|
<view class="recommend-list acea-row" v-for="(item,index) in 3"> |
|
<image src="../../../static/images/business-img1.png" mode=""></image> |
|
<view class="recommend-bottom acea-row row-column-between"> |
|
<view class="title-item line1">蜂蜜供应商</view> |
|
<view class="line1">优质的供应源，多元化的土地</view> |
|
<view class="category-box acea-row"> |
|
<view class="tag-item-b tag">持续盈利</view> |
|
<view class="tag-item-y tag">财务规范</view> |
|
<view class="tag-item-p tag">零负债</view> |
|
</view> |
|
</view> |
|
</view> |
|
</scroll-view> |
|
|
|
</view> |
|
<view class="footer"> |
|
<view class="toContact">联系项目方</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
</script> |
|
|
|
<style lang="less"> |
|
.project-page { |
|
width: 100%; |
|
height: 100vh; |
|
background: #F8F8F8; |
|
} |
|
|
|
|
|
.content { |
|
width: 100%; |
|
height: 284rpx; |
|
background: #fff; |
|
position: relative; |
|
margin-bottom: 90rpx; |
|
padding: 20rpx 40rpx 0 40rpx; |
|
|
|
.content-box { |
|
width: 670rpx; |
|
height: 130rpx; |
|
margin-bottom: 25rpx; |
|
|
|
image { |
|
width: 128rpx; |
|
height: 128rpx; |
|
margin-left: auto; |
|
} |
|
|
|
.content-left { |
|
width: 536rpx; |
|
|
|
.title { |
|
width: auto; |
|
max-width: 280rpx; |
|
height: 52rpx; |
|
font-size: 36rpx; |
|
margin-right: 22rpx; |
|
font-weight: bold; |
|
color: #343434; |
|
} |
|
|
|
.label { |
|
width: 110rpx; |
|
height: 32rpx; |
|
line-height: 32rpx; |
|
text-align: center; |
|
background: #FF5100; |
|
border-radius: 4rpx; |
|
color: #fff; |
|
} |
|
|
|
.title-s { |
|
width: 536rpx; |
|
height: 68rpx; |
|
font-size: 24rpx; |
|
font-weight: 400; |
|
color: #707070; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.category-box { |
|
width: 100%; |
|
height: 36rpx; |
|
overflow: hidden; |
|
|
|
.tag { |
|
width: auto; |
|
padding: 0 10rpx; |
|
height: 36rpx; |
|
line-height: 34rpx; |
|
border-radius: 4rpx; |
|
font-size: 20rpx; |
|
margin-right: 16rpx; |
|
text-align: center; |
|
} |
|
|
|
.tag-item-b { |
|
border: 1rpx solid #3A9EFA; |
|
color: #3A9EFA; |
|
} |
|
|
|
.tag-item-y { |
|
border: 1px solid #FFAA00; |
|
color: #FFAA00; |
|
} |
|
|
|
.tag-item-p { |
|
color: #FC9367; |
|
border: 1px solid #FC9367; |
|
} |
|
} |
|
|
|
.region { |
|
width: 670rpx; |
|
height: 112rpx; |
|
background: #FFFFFF; |
|
box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16); |
|
border-radius: 12rpx; |
|
position: relative; |
|
bottom: -21rpx; |
|
margin: 0 auto; |
|
|
|
.regin-box { |
|
width: 50%; |
|
height: 80rpx; |
|
text-align: center; |
|
|
|
.title-l { |
|
font-weight: 400; |
|
color: #707070; |
|
margin-bottom: 6rpx; |
|
} |
|
|
|
.title-m { |
|
font-size: 28rpx; |
|
font-weight: 600; |
|
color: #FF5100; |
|
} |
|
} |
|
.br1 { |
|
border-right: 1rpx solid #E9E9E9; |
|
} |
|
} |
|
|
|
.detials-box { |
|
width: 750rpx; |
|
height: auto; |
|
min-height: 384rpx; |
|
background: #FFFFFF; |
|
font-size: 28rpx; |
|
font-weight: 400; |
|
color: #343434; |
|
position: relative; |
|
|
|
.pa20 { |
|
width: 100%; |
|
height: 100%; |
|
padding: 24rpx 32rpx 10rpx 32rpx; |
|
filter: blur(6rpx); |
|
view { |
|
margin-bottom: 15rpx; |
|
} |
|
|
|
.detail-con { |
|
width: 100%; |
|
height: auto; |
|
overflow: hidden; |
|
} |
|
} |
|
|
|
.mask-box { |
|
width: 750rpx; |
|
height: 100%; |
|
background: rgba(255,255,255,0.7); |
|
box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.01); |
|
position: absolute; |
|
top: 0; |
|
|
|
.mask-con { |
|
width: 484rpx; |
|
height: 136rpx; |
|
z-index: 9999; |
|
|
|
.con { |
|
font-size: 36rpx; |
|
font-weight: 600; |
|
color: #FF5100; |
|
margin-bottom: 20rpx; |
|
} |
|
|
|
.authentication-btn { |
|
width: 148rpx; |
|
height: 52rpx; |
|
background: linear-gradient(315deg, #000 0%, #FFC2AA 100%); |
|
border-radius: 12rpx; |
|
font-size: 24rpx; |
|
font-weight: 600; |
|
line-height: 52rpx; |
|
color: #FFFFFF; |
|
text-align: center; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.title { |
|
height: 52rpx; |
|
font-size: 36rpx; |
|
font-family: PingFang SC; |
|
font-weight: 600; |
|
color: #343434; |
|
|
|
image { |
|
width: 18rpx; |
|
height: 36rpx; |
|
margin-right: 10rpx; |
|
} |
|
} |
|
|
|
.recommend-box { |
|
width: 750rpx; |
|
height: 528rpx; |
|
background: #FFFFFF; |
|
margin: 32rpx 0; |
|
padding: 24rpx 0 0 0rpx; |
|
|
|
.title { |
|
margin-left: 32rpx; |
|
} |
|
|
|
.update-box { |
|
width: auto; |
|
height: 48rpx; |
|
color: #000; |
|
font-size: 24rpx; |
|
margin: 0rpx 32rpx 26rpx 32rpx; |
|
|
|
.update-icon { |
|
width: 118rpx; |
|
height: 48rpx; |
|
background: #FFFFFF; |
|
box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.16); |
|
border-radius: 24rpx; |
|
font-size: 20rpx; |
|
line-height: 26rpx; |
|
color: #666666; |
|
margin-left: auto; |
|
|
|
image { |
|
width: 26rpx; |
|
height: 26rpx; |
|
background: rgba(0, 0, 0, 0); |
|
margin-right: 10rpx; |
|
} |
|
} |
|
} |
|
|
|
.scroll-view_H { |
|
width: 100%; |
|
height: 345rpx; |
|
white-space: nowrap; |
|
|
|
.recommend-list { |
|
width: 392rpx; |
|
background: #FFFFFF; |
|
box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16); |
|
border-radius: 12rpx; |
|
font-size: 24rpx; |
|
color: #707070; |
|
display: inline-block; |
|
margin: 0 32rpx 0 0rpx; |
|
|
|
image { |
|
width: 392rpx; |
|
height: 194rpx; |
|
border-radius: 12rpx 12rpx 0 0; |
|
} |
|
} |
|
|
|
.recommend-list:nth-child(1) { |
|
margin-left: 32rpx; |
|
} |
|
|
|
.recommend-bottom { |
|
height: 130rpx; |
|
padding: 0 16rpx 15rpx 24rpx; |
|
|
|
.title-item { |
|
height: 30rpx; |
|
line-height: 30rpx; |
|
font-size: 28rpx; |
|
font-weight: 600; |
|
color: #1D1D1D; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.footer { |
|
width: 100%; |
|
height: 132rpx; |
|
background: #FFFFFF; |
|
padding: 32rpx 32rpx 0 0; |
|
|
|
.toContact { |
|
width: 223rpx; |
|
height: 76rpx; |
|
line-height: 76rpx; |
|
text-align: center; |
|
background: linear-gradient(144deg, #FFA782 0%, #FF5100 100%); |
|
border-radius: 38rpx; |
|
margin-left: auto; |
|
font-size: 32rpx; |
|
font-weight: 500; |
|
color: #FFFFFF; |
|
} |
|
} |
|
</style>
|
|
|