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

<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>