58 changed files with 5738 additions and 1269 deletions
@ -0,0 +1,477 @@
|
||||
<template> |
||||
<view class="business-page"> |
||||
<!-- 搜索 --> |
||||
<view class="search-box acea-row row-middle"> |
||||
<image src="../../../static/images/search-icon.png" mode="" class="search-icon"></image> |
||||
<input type="text" value="" placeholder="请输入相关关键词" /> |
||||
<view class="search acea-row row-center-wrapper">搜一下</view> |
||||
</view> |
||||
<!-- 供需大厅 企业服务 项目投融 --> |
||||
<view class="acea-row row-around pa40"> |
||||
<view class="img1"> |
||||
<image src="../../../static/images/business-img1.png"></image> |
||||
</view> |
||||
<view class="img2 acea-row row-column-between"> |
||||
<image src="../../../static/images/business-img2.png"></image> |
||||
<image src="../../../static/images/business-img3.png"></image> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 商业简报 --> |
||||
<view class="news-box acea-row row-middle"> |
||||
<image src="../../../static/images/business-news.png" class="news-img"></image> |
||||
<view> |
||||
<view class="news-con acea-row row-middle"> |
||||
<image src="../../../static/images/hot-icon.png"></image>2021中国酒店与商用厨具行业品牌盛即将召开 |
||||
</view> |
||||
<view class="news-con acea-row row-middle"> |
||||
<image src="../../../static/images/rem-icon.png"></image>2021如何具有商业思维？ |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 优质企业 --> |
||||
<view class="company-box"> |
||||
<view class="title-con acea-row"> |
||||
<image src="../../../static/images/business-title1.png" class="title-img"></image> |
||||
<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="company-list" v-for="(item,index) in 6"> |
||||
<view class="title">楚象科技有限公司</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="title-s">以领先科技，致力于推动客户成功</view> |
||||
<view class="acea-row"> |
||||
<image src="../../../static/images/business-img1.png" class="company-logo"></image> |
||||
<view class="todetails">了解详情</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</scroll-view> |
||||
</view> |
||||
|
||||
<!-- 推荐服务 --> |
||||
<view class="service-box"> |
||||
<view class="title-con acea-row row-middle"> |
||||
<image src="../../../static/images/business-title2.png" class="title-img"></image> |
||||
<image src="../../../static/images/fabu-close.png" class="toadd"></image> |
||||
</view> |
||||
<view class="service-top acea-row row-between"> |
||||
<view class="service-nub-left acea-row row-column-between"> |
||||
<view class="tips">我要开发小程序</view> |
||||
<view class="tips-item">最快一个月进入测试阶段</view> |
||||
<image src="../../../static/images/business-img1.png" mode=""></image> |
||||
</view> |
||||
<view class="acea-row row-between service-nub-right"> |
||||
<view class="acea-row row-center-wrapper module-nub"> |
||||
<view class="tips">我要H5定制</view> |
||||
<view class="tips-item">最快半个月进入测试阶段</view> |
||||
</view> |
||||
<view class="module-box acea-row row-center-wrapper"> |
||||
<view class="tips">装修服务</view> |
||||
<view class="tips-item">房屋装修</view> |
||||
</view> |
||||
<view class="module-box acea-row row-center-wrapper"> |
||||
<view class="tips">装修服务</view> |
||||
<view class="tips-item">房屋装修</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="service-bottom acea-row row-between"> |
||||
<view class="module-box bg-red acea-row row-center-wrapper"> |
||||
<view class="tips">装修服务</view> |
||||
<view class="tips-item">房屋装修</view> |
||||
</view> |
||||
<view class="module-box bg-blue acea-row row-center-wrapper"> |
||||
<view class="tips">装修服务</view> |
||||
<view class="tips-item">房屋装修</view> |
||||
</view> |
||||
<view class="module-box bg-yellow acea-row row-center-wrapper"> |
||||
<view class="tips">装修服务</view> |
||||
<view class="tips-item">房屋装修</view> |
||||
</view> |
||||
<view class="tolearn acea-row row-center-wrapper">装修服务</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 优质项目 --> |
||||
<view class="project-box"> |
||||
<image src="../../../static/images/business-title3.png" class="title-img"></image> |
||||
<view class="project-list acea-row" v-for="(item,index) in 3"> |
||||
<image src="../../../static/images/business-img1.png" mode="" class="project-img"></image> |
||||
<view class="right-con acea-row row-column-between"> |
||||
<view class="acea-row row-middle title"> |
||||
<image src="../../../static/images/new-icon.png" mode="" class="new-icon"> |
||||
</image> |
||||
<view class="title-h">富硒产品</view> |
||||
</view> |
||||
<view class="title-s line1">农业项目、国家扶贫、乡村振兴、国家红利</view> |
||||
<view class="category-box acea-row"> |
||||
<view class="tag-item-y tag">持续盈利</view> |
||||
<view class="tag-item-b tag">财务规范</view> |
||||
<view class="tag-item-p tag">零负债</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
.business-page { |
||||
width: 100%; |
||||
height: auto; |
||||
background: #fff; |
||||
font-size: 24rpx; |
||||
margin-bottom: 100rpx; |
||||
} |
||||
|
||||
// 搜索 |
||||
.search-box { |
||||
width: 670rpx; |
||||
height: 68rpx; |
||||
border: 2rpx solid #FF5100; |
||||
border-radius: 8rpx; |
||||
margin: 24rpx auto; |
||||
|
||||
.search-icon { |
||||
width: 35rpx; |
||||
height: 35rpx; |
||||
margin: 0 29rpx 0 52rpx; |
||||
} |
||||
|
||||
.search { |
||||
margin-left: auto; |
||||
width: 132rpx; |
||||
height: 68rpx; |
||||
background: linear-gradient(39deg, #FF5100 0%, #FFA074 100%); |
||||
border-radius: 8rpx; |
||||
color: #fff; |
||||
} |
||||
} |
||||
|
||||
// 供需大厅 企业服务 项目投融 |
||||
.pa40 { |
||||
padding: 0 35rpx; |
||||
|
||||
.img1 { |
||||
width: 312rpx; |
||||
height: 208rpx; |
||||
} |
||||
|
||||
.img1 image { |
||||
width: 312rpx; |
||||
height: 208rpx; |
||||
} |
||||
|
||||
.img2 { |
||||
width: 342rpx; |
||||
height: 208rpx; |
||||
} |
||||
|
||||
.img2 image { |
||||
width: 342rpx; |
||||
height: 96rpx; |
||||
} |
||||
} |
||||
|
||||
// 商业简报 |
||||
.news-box { |
||||
width: 670rpx; |
||||
height: 96rpx; |
||||
background: #FFFFFF; |
||||
box-shadow: 0rpx 2rpx 12rpx rgba(0, 0, 0, 0.16); |
||||
border-radius: 16rpx; |
||||
margin: 32rpx auto; |
||||
color: #6E6E6E; |
||||
|
||||
.news-img { |
||||
width: 64rpx; |
||||
height: 78rpx; |
||||
margin-left: 18rpx; |
||||
} |
||||
|
||||
.news-con { |
||||
margin-bottom: 6rpx; |
||||
} |
||||
|
||||
.news-con image { |
||||
width: 32rpx; |
||||
height: 34rpx; |
||||
margin: 0 26rpx 0 40rpx; |
||||
} |
||||
} |
||||
|
||||
// 优质企业 |
||||
.title-con { |
||||
padding: 0 40rpx; |
||||
} |
||||
|
||||
.title-img { |
||||
width: 134rpx; |
||||
height: 46rpx; |
||||
} |
||||
|
||||
.company-box { |
||||
height: 380rpx; |
||||
.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; |
||||
} |
||||
|
||||
.update-icon image { |
||||
width: 26rpx; |
||||
height: 26rpx; |
||||
background: rgba(0, 0, 0, 0); |
||||
margin-right: 10rpx; |
||||
} |
||||
|
||||
.scroll-view_H { |
||||
width: 100%; |
||||
height: 330rpx; |
||||
white-space: nowrap; |
||||
margin-left: 30rpx; |
||||
.company-list { |
||||
width: 408rpx; |
||||
height: 304rpx; |
||||
background: #FFFFFF; |
||||
box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16); |
||||
border-radius: 12rpx; |
||||
padding: 16rpx 24rpx; |
||||
display: inline-block; |
||||
margin: 15rpx 30rpx 0 10rpx; |
||||
.title { |
||||
font-size: 28rpx; |
||||
font-weight: 600; |
||||
color: #4A4A4A; |
||||
margin: 5rpx 0 10rpx 0; |
||||
} |
||||
|
||||
.category-box { |
||||
.tag { |
||||
width: 112rpx; |
||||
height: 36rpx; |
||||
border-radius: 4rpx; |
||||
font-size: 20rpx; |
||||
margin-right: 8rpx; |
||||
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; |
||||
} |
||||
} |
||||
|
||||
.title-s { |
||||
font-weight: 400; |
||||
color: #6E6E6E; |
||||
margin: 16rpx 0 10rpx 0; |
||||
} |
||||
|
||||
.company-logo { |
||||
width: 176rpx; |
||||
height: 128rpx; |
||||
} |
||||
|
||||
.todetails { |
||||
width: 148rpx; |
||||
height: 52rpx; |
||||
line-height: 52rpx; |
||||
background: linear-gradient(315deg, #FF6D31 0%, #FFC2AA 100%); |
||||
border-radius: 12rpx; |
||||
text-align: center; |
||||
color: #fff; |
||||
margin-left: auto; |
||||
margin-top: auto; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 推荐服务 |
||||
.service-box { |
||||
width: 100%; |
||||
height: 496rpx; |
||||
.toadd { |
||||
width: 88rpx; |
||||
height: 88rpx; |
||||
margin-left: auto; |
||||
transform: rotate(45deg); |
||||
} |
||||
.service-top { |
||||
padding: 0 40rpx; |
||||
height: 272rpx; |
||||
margin: 8rpx 0 16rpx 0; |
||||
.service-nub-left { |
||||
width: 344rpx; |
||||
height: 272rpx; |
||||
background: #FFF3DC; |
||||
border-radius: 12rpx; |
||||
padding: 14rpx 24rpx; |
||||
} |
||||
.service-nub-left image { |
||||
width: 288rpx; |
||||
height: 162rpx; |
||||
} |
||||
.service-nub-right { |
||||
width: 310rpx; |
||||
height: 272rpx; |
||||
.module-nub { |
||||
width: 310rpx; |
||||
height: 128rpx; |
||||
background: #FFEFE8; |
||||
border-radius: 12rpx; |
||||
padding: 18rpx 0 32rpx 0; |
||||
} |
||||
} |
||||
} |
||||
.service-bottom { |
||||
padding: 0 40rpx; |
||||
height: 112rpx; |
||||
|
||||
.tolearn { |
||||
width: 70rpx; |
||||
height: 112rpx; |
||||
background: #FFE4D8; |
||||
border-radius: 12rpx; |
||||
color: #FF7636; |
||||
font-size: 20rpx; |
||||
writing-mode: tb-rl; |
||||
} |
||||
} |
||||
} |
||||
.module-box { |
||||
width: 184rpx; |
||||
height: 112rpx; |
||||
border-radius: 12rpx; |
||||
padding: 16rpx 0 14rpx 0; |
||||
} |
||||
|
||||
.bg-red { |
||||
background: #FDE9DE; |
||||
} |
||||
|
||||
.bg-blue { |
||||
background: #E5F1FF; |
||||
} |
||||
|
||||
.bg-yellow { |
||||
background: #FEFADF; |
||||
} |
||||
|
||||
.tips { |
||||
font-size: 28rpx; |
||||
font-weight: 600; |
||||
color: #4A4A4A; |
||||
} |
||||
|
||||
.tips-item { |
||||
font-weight: 400; |
||||
color: #636363; |
||||
} |
||||
|
||||
.service-nub-left .tips, |
||||
.module-nub .tips { |
||||
color: #FF7636; |
||||
} |
||||
.service-top .module-box { |
||||
width: 144rpx; |
||||
height: 128rpx; |
||||
background: rgba(245, 249, 255, 0.82); |
||||
border-radius: 12rpx; |
||||
} |
||||
|
||||
|
||||
// 优质项目 |
||||
.project-box{ |
||||
width: 100%; |
||||
height: 610rpx; |
||||
.project-list{ |
||||
width: 100%; |
||||
height: 180rpx; |
||||
padding: 26rpx 40rpx; |
||||
border-bottom: 1rpx solid #DCDCDC; |
||||
.project-img{ |
||||
width: 128rpx; |
||||
height: 128rpx; |
||||
margin-right: 32rpx; |
||||
} |
||||
.right-con { |
||||
.title { |
||||
font-weight: 800; |
||||
height: 35rpx; |
||||
line-height: 35rpx; |
||||
.new-icon { |
||||
width: 48rpx; |
||||
height: 24rpx; |
||||
margin-right: 8rpx; |
||||
.title-h { |
||||
color: #1D1D1D; |
||||
} |
||||
} |
||||
} |
||||
.title-s { |
||||
width: 450rpx; |
||||
height: 34rpx; |
||||
font-size: 24rpx; |
||||
color: #707070; |
||||
} |
||||
.category-box { |
||||
.tag { |
||||
width: 112rpx; |
||||
height: 36rpx; |
||||
line-height: 33rpx; |
||||
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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.project-box .title-img{ |
||||
margin: 35rpx 0 -15rpx 40rpx; |
||||
} |
||||
|
||||
</style> |
||||
@ -0,0 +1,579 @@
|
||||
<template> |
||||
<view class="Investment-page"> |
||||
<!-- 导航栏 --> |
||||
<view class="navigation-box"> |
||||
<view class="search-box acea-row row-middle"> |
||||
<image src="../../../static/images/search-icon.png" mode="" class="search-img"></image> |
||||
<input type="text" value="" placeholder="请输入关键词进行搜索" /> |
||||
<view class="search acea-row row-center-wrapper">搜一下</view> |
||||
</view> |
||||
<view class="resource-tabs acea-row"> |
||||
<view :class="'tab ' + (active == 1 ? 'tab-a' : '')" data-i="1" @tap="tabClick">全部项目</view> |
||||
<view :class="'tab ' + (active == 2 ? 'tab-a' : '')" data-i="2" @tap="tabClick">投资方</view> |
||||
<view class="screen-box acea-row row-between-wrapper" > |
||||
<view class="screen acea-row row-middle" @tap="showDialog"> |
||||
<text>筛选</text> |
||||
<image src="/static/images/home/screen.png"></image> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="modular-box"> |
||||
<!-- 全部项目 --> |
||||
<view class="project-box" v-if="active == 1"> |
||||
<view class="project-list" v-for="(item,index) in 2"> |
||||
<view class="project-top acea-row row-left"> |
||||
<image src="../../../static/images/home/menu6.png" class="project-img"></image> |
||||
<view class="right-con acea-row row-column-between"> |
||||
<view class="acea-row row-middle title"> |
||||
<image src="../../../static/images/new-icon.png" mode="" class="new-icon"> |
||||
</image> |
||||
<view class="title-h">富硒产品</view> |
||||
</view> |
||||
<view class="title-s">农业项目、国家扶贫、乡村振兴、优质资源利用、国家大力支持</view> |
||||
<view class="category-box acea-row"> |
||||
<view class="tag-item-y tag">持续盈利</view> |
||||
<view class="tag-item-b tag">财务规范</view> |
||||
<view class="tag-item-p tag">零负债</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="project-bottom acea-row row-middle"> |
||||
<view class="finance-price">融资金额</view> |
||||
<view class="price">200万元-300万元</view> |
||||
<view class="tocheck acea-row row-middle"> |
||||
<image src="../../../static/images/check.png" mode=""></image> |
||||
查看 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<!-- 投资方 --> |
||||
<view class="project-box" v-if="active == 2"> |
||||
<view class="investor-list acea-row row-middle"> |
||||
<view class="head-img acea-row row-center"> |
||||
<image src="../../../static/images/home/menu6.png" mode="" class="user-img"></image> |
||||
<image src="../../../static/images/vip-icon.png" mode="" class="user-icon"></image> |
||||
</view> |
||||
<view class="investor-con acea-row row-middle"> |
||||
<view class="name">李岩斌</view> |
||||
<view class="title-f acea-row row-middle"> |
||||
<view>朗玛峰创投</view> |
||||
<view class="row "></view> |
||||
<view>合伙人</view> |
||||
</view> |
||||
<view class="title-f mt16">意向领域：智能硬件、企业IT服务...</view> |
||||
<view class="title-f">投资伦次：A轮、A+轮、B轮</view> |
||||
</view> |
||||
<view class="toContact"> |
||||
<image src="../../../static/images/contact.png" mode=""></image> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
<view class="add"><image src="../../../static/images/fabu-close.png"></image></view> |
||||
<view class="mask-box" v-if="showScreenDialog"> |
||||
<view :class="'screen-dialog-box ' + (showScreenDialog ? 'move' : '')"> |
||||
<view class="screen-list"> |
||||
<!-- <view class="screen-item"> |
||||
<view class="screen-title">所有服务</view> |
||||
<view class="acea-row"> |
||||
<view v-for="(item, index) in cagetoryList" :key="index" :class="'item ' + (cagetoryActive == index ? 'item-active' : '')" @tap="cagetoryClick" :data-i="index" :data-item="item">{{item.cagetoryName}}</view> |
||||
</view> |
||||
</view> --> |
||||
<view class="screen-item" > |
||||
<view class="screen-title" >项目领域</view> |
||||
<view class="acea-row"> |
||||
<view class="item">农林牧鱼</view> |
||||
<view class="item">农林牧鱼</view> |
||||
<view class="item">农林牧鱼</view> |
||||
<view class="item">农林牧鱼</view> |
||||
<view class="item">农林牧鱼</view> |
||||
</view> |
||||
</view> |
||||
<view class="screen-item"> |
||||
<view class="screen-title">项目阶段</view> |
||||
<view class="acea-row"> |
||||
<view class="item">农林牧鱼</view> |
||||
<view class="item">农林牧鱼</view> |
||||
<view class="item">农林牧鱼</view> |
||||
<view class="item">农林牧鱼</view> |
||||
<view class="item">农林牧鱼</view> |
||||
</view> |
||||
</view> |
||||
<view class="screen-item"> |
||||
<view class="screen-title">项目标签</view> |
||||
<view class="acea-row"> |
||||
<view class="item">农林牧鱼</view> |
||||
<view class="item">农林牧鱼</view> |
||||
<view class="item">农林牧鱼</view> |
||||
<view class="item">农林牧鱼</view> |
||||
<view class="item">农林牧鱼</view> |
||||
</view> |
||||
</view> |
||||
<!-- <view class="screen-item"> |
||||
<view class="screen-title">商家身份<text class="fz20">(所有商家均实名认证)</text></view> |
||||
<view class="acea-row"> |
||||
<view :class="'item ' + (enterpriseType == 2 ? 'item-active' : '')" @tap="businessChange" data-name="个人认证" data-type="2">个人认证</view> |
||||
<view :class="'item ' + (enterpriseType == 1 ? 'item-active' : '')" @tap="businessChange" data-name="企业认证" data-type="1">企业认证</view> |
||||
</view> |
||||
</view> --> |
||||
<view class="submit-box acea-row row-between"> |
||||
<view class="btn reset" @tap="resetClick">重置</view> |
||||
<view class="btn finish" @tap="finishClick">完成</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
const app = getApp(); |
||||
export default { |
||||
data() { |
||||
return { |
||||
active: '1', |
||||
showScreenDialog: false, |
||||
cagetoryActive: "", |
||||
//筛选企业/个人 |
||||
resourceCagetoryId: '', |
||||
// 分类列表 |
||||
enterpriseType: '', |
||||
//筛选分类 |
||||
choseCagetory: '', |
||||
choseBusiness: '', |
||||
cName: "", |
||||
} |
||||
}, |
||||
// onLoad: function (options) { |
||||
// this.getCagetoryList(); |
||||
// }, |
||||
methods:{ |
||||
tabClick(e) { |
||||
this.setData({ |
||||
active: e.currentTarget.dataset.i, |
||||
}) |
||||
}, |
||||
// getCagetoryList() { |
||||
// app.http('get', 'ResourcesCagetory/listResourcesCagetory').then(res => { |
||||
// if (res.data.success) { |
||||
// this.setData({ |
||||
// cagetoryList: res.data.data |
||||
// }); |
||||
// } |
||||
// }); |
||||
// }, |
||||
showDialog() { |
||||
this.setData({ |
||||
showScreenDialog: true |
||||
}); |
||||
}, |
||||
showhaha() { |
||||
this.setData({ |
||||
showScreenDialog: true |
||||
}); |
||||
}, |
||||
// cagetoryClick(e) { |
||||
// let item = e.currentTarget.dataset.item; |
||||
// let i = e.currentTarget.dataset.i; |
||||
// console.log(item); |
||||
// this.setData({ |
||||
// cagetoryActive: i, |
||||
// resourceCagetoryId: item.id, |
||||
// choseCagetory: item.cagetoryName |
||||
// }); |
||||
// }, |
||||
businessChange(e) { |
||||
let type = e.currentTarget.dataset.type; |
||||
let name = e.currentTarget.dataset.name; |
||||
this.setData({ |
||||
choseBusiness: name, |
||||
enterpriseType: type |
||||
}); |
||||
}, |
||||
|
||||
finishClick() { |
||||
this.setData({ |
||||
showScreenDialog: false |
||||
}); |
||||
}, |
||||
|
||||
resetClick() { |
||||
this.setData({ |
||||
cName: '', |
||||
cagetoryActive: null, |
||||
resourceCagetoryId: '', |
||||
enterpriseType: '', |
||||
choseBusiness: '', |
||||
choseCagetory: '', |
||||
}); |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
.Investment-page { |
||||
width: 100%; |
||||
min-height: 100vh; |
||||
background: #F5F5F5; |
||||
font-size: 28rpx; |
||||
} |
||||
|
||||
/* 导航栏 */ |
||||
.navigation-box { |
||||
width: 100%; |
||||
height: auto; |
||||
background: #fff; |
||||
padding-top: 20rpx; |
||||
.search-box { |
||||
width: 670rpx; |
||||
height: 68rpx; |
||||
border: 2rpx solid #FF5100; |
||||
border-radius: 8rpx; |
||||
margin: 0 auto; |
||||
.search-img { |
||||
width: 35rpx; |
||||
height: 35rpx; |
||||
margin: 0 29rpx 0 52rpx; |
||||
} |
||||
} |
||||
.search { |
||||
width: 132rpx; |
||||
height: 68rpx; |
||||
background: linear-gradient(39deg, #FF5100 0%, #FFA074 100%); |
||||
border-radius: 8rpx; |
||||
color: #fff; |
||||
margin-left: auto; |
||||
} |
||||
.resource-tabs { |
||||
width: 100%; |
||||
padding-top: 10rpx; |
||||
background: #fff; |
||||
border-bottom: 2rpx solid #EEEEEE; |
||||
padding-left: 20rpx; |
||||
} |
||||
.tab { |
||||
width: 150rpx; |
||||
padding: 26rpx 0; |
||||
font-size: 32rpx; |
||||
color: #BFBFBF; |
||||
position: relative; |
||||
font-weight: 500; |
||||
text-align: center; |
||||
margin-left: 115rpx; |
||||
} |
||||
.tab::after { |
||||
display: block; |
||||
content: ''; |
||||
width: 80rpx; |
||||
height: 8rpx; |
||||
border-radius: 8rpx; |
||||
background: #FF5100; |
||||
position: absolute; |
||||
bottom: 0rpx; |
||||
left: 50%; |
||||
margin-left: -40rpx; |
||||
opacity: 0; |
||||
transform: scaleX(0); |
||||
transition: all .2s ease, opacity .15s ease; |
||||
} |
||||
.tab-a { |
||||
color: #FF5100; |
||||
} |
||||
.tab-a::after { |
||||
opacity: 1; |
||||
transform: scaleX(1); |
||||
} |
||||
.screen-box { |
||||
height: 94rpx; |
||||
padding: 0 38rpx; |
||||
color: #666; |
||||
background: #fff; |
||||
margin-left: auto; |
||||
} |
||||
.screen-result { |
||||
color: #FF5100; |
||||
} |
||||
.screen image { |
||||
width: 27rpx; |
||||
height: 27rpx; |
||||
margin-left: 6rpx; |
||||
} |
||||
} |
||||
|
||||
|
||||
.modular-box { |
||||
width: 670rpx; |
||||
margin: 0 auto; |
||||
background-color: #F5F5F5; |
||||
margin-bottom: 76rpx; |
||||
/* 全部项目 */ |
||||
.project-box { |
||||
.project-list { |
||||
width: 670rpx; |
||||
height: 256rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 12rpx; |
||||
margin-top: 32rpx; |
||||
padding-top: 16rpx; |
||||
.project-top { |
||||
width: 630rpx; |
||||
height: 160rpx; |
||||
margin: 0 auto 30rpx auto; |
||||
.project-img { |
||||
width: 160rpx; |
||||
height: 160rpx; |
||||
margin-right: 18rpx; |
||||
} |
||||
.right-con { |
||||
.title { |
||||
line-height: 24rpx; |
||||
font-weight: 800; |
||||
.new-icon { |
||||
width: 48rpx; |
||||
height: 24rpx; |
||||
margin-right: 8rpx; |
||||
.title-h { |
||||
color: #1D1D1D; |
||||
} |
||||
} |
||||
} |
||||
.title-s { |
||||
width: 450rpx; |
||||
height: 70rpx; |
||||
font-size: 24rpx; |
||||
color: #707070; |
||||
} |
||||
.category-box { |
||||
.tag { |
||||
width: 112rpx; |
||||
height: 36rpx; |
||||
line-height: 33rpx; |
||||
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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.project-bottom { |
||||
height: 40rpx; |
||||
margin: 0 45rpx 0 20rpx; |
||||
color: #FF5100; |
||||
font-size: 24rpx; |
||||
.finance-price { |
||||
margin-right: 20rpx; |
||||
font-weight: 900; |
||||
} |
||||
.price { |
||||
font-weight: 900; |
||||
} |
||||
.tocheck { |
||||
margin-left: auto; |
||||
font-size: 30rpx; |
||||
} |
||||
.tocheck image { |
||||
width: 32rpx; |
||||
height: 32rpx; |
||||
margin-right: 10rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
/* 投资方 */ |
||||
.project-box { |
||||
.investor-list { |
||||
width: 670rpx; |
||||
height: 192rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 12rpx; |
||||
margin-top: 32rpx; |
||||
.head-img { |
||||
width: 160rpx; |
||||
height: 168rpx; |
||||
position: relative; |
||||
margin: 0 28rpx 0 16rpx; |
||||
.user-img { |
||||
width: 160rpx; |
||||
height: 160rpx; |
||||
border-radius: 50%; |
||||
position: absolute; |
||||
top: 0; |
||||
} |
||||
.user-icon { |
||||
width: 104rpx; |
||||
height: 38rpx; |
||||
position: absolute; |
||||
bottom: 0; |
||||
} |
||||
} |
||||
.investor-con { |
||||
width: 382rpx; |
||||
height: 170rpx; |
||||
font-size: 24rpx; |
||||
font-weight: 400; |
||||
color: #707070; |
||||
.name { |
||||
width: 100%; |
||||
font-size: 32rpx; |
||||
font-weight: bold; |
||||
color: #1D1D1D; |
||||
line-height: 35rpx; |
||||
} |
||||
.row { |
||||
height: 21rpx; |
||||
border: 2rpx solid #707070; |
||||
margin: 0 20rpx; |
||||
} |
||||
} |
||||
.toContact { |
||||
width: 54rpx; |
||||
height: 192rpx; |
||||
margin-left: auto; |
||||
} |
||||
.toContact image { |
||||
width: 54rpx; |
||||
height: 192rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.add{ |
||||
position: absolute; |
||||
right: 40rpx; |
||||
} |
||||
.add image{ |
||||
width: 84rpx; |
||||
height: 84rpx; |
||||
transform: rotate(45deg); |
||||
|
||||
} |
||||
|
||||
.mask-box{ |
||||
width: 100%; |
||||
height: 100vh; |
||||
background: rgba(0,0,0,.5); |
||||
position:fixed; |
||||
top: 190rpx;/* #ifdef H5 */ |
||||
top: calc(88rpx + constant(safe-area-inset-top)); |
||||
top: calc(88rpx + env(safe-area-inset-top));/* #endif */ |
||||
left: 0; |
||||
z-index: 9999; |
||||
|
||||
} |
||||
.screen-dialog-box{ |
||||
width: 590rpx; |
||||
height: 100%; |
||||
padding-top: 10rpx; |
||||
overflow-y: scroll; |
||||
background-color: #fff; |
||||
position: absolute; |
||||
top: 0rpx; |
||||
right: 0rpx; |
||||
animation: move 200ms ease; |
||||
} |
||||
/* .move{ |
||||
right: 0rpx; |
||||
} */ |
||||
@keyframes move{ |
||||
0%{ |
||||
transform: translateX(800rpx); |
||||
} |
||||
100%{ |
||||
transform: translateX(0rpx); |
||||
} |
||||
} |
||||
.screen-item{ |
||||
width: 100%; |
||||
padding: 0 38rpx; |
||||
overflow: hidden; |
||||
transform: all .2s linear; |
||||
} |
||||
.screen-title{ |
||||
font-size: 28rpx; |
||||
color: #343434; |
||||
margin-bottom: 32rpx; |
||||
font-weight: 600 |
||||
; |
||||
} |
||||
.screen-item{ |
||||
padding-top: 40rpx; |
||||
} |
||||
|
||||
.screen-item .item{ |
||||
width: 152rpx; |
||||
height: 64rpx; |
||||
line-height: 64rpx; |
||||
text-align: center; |
||||
font-size: 24rpx; |
||||
color: #666666; |
||||
background: #F6F6F6; |
||||
margin: 0 32rpx 32rpx 0; |
||||
} |
||||
.screen-item .item:nth-child(3n){ |
||||
margin-right: 0; |
||||
} |
||||
.screen-item .item-active{ |
||||
border: 2rpx solid #FF6E33; |
||||
color: #FE7D26; |
||||
background: #FDEFE6; |
||||
} |
||||
.across-line{ |
||||
width: 44rpx; |
||||
height: 2rpx; |
||||
background: #ACABAB; |
||||
margin: 0 12rpx; |
||||
} |
||||
.low-price{ |
||||
width: 228rpx; |
||||
height: 60rpx; |
||||
background: #F6F5F5; |
||||
border-radius: 4rpx; |
||||
} |
||||
.low-price input{ |
||||
width: 100%; |
||||
height: 100%; |
||||
text-align: center; |
||||
} |
||||
.fz20{ |
||||
font-size: 20rpx; |
||||
color: #393939; |
||||
} |
||||
.submit-box{ |
||||
width: 376rpx; |
||||
height: 64rpx; |
||||
margin: 0 auto; |
||||
margin-top: 64rpx; |
||||
} |
||||
.submit-box .btn{ |
||||
width: 152rpx; |
||||
height: 64rpx; |
||||
line-height: 64rpx; |
||||
text-align: center; |
||||
border-radius: 12rpx; |
||||
color: #FF5100; |
||||
border: 2rpx solid #FF9665; |
||||
} |
||||
.submit-box .finish{ |
||||
background: #FF660C; |
||||
color: #fff; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,353 @@
|
||||
<template> |
||||
<view class="enterprise-page"> |
||||
<image src="../../../static/images/business-img3.png" mode="aspectFill" class="top-img"></image> |
||||
<view class="enterprise-info-box"> |
||||
<view class="company-info-box acea-row"> |
||||
<image :src="detail.enterpriseLogo" mode="aspectFill" class="logo-img"></image> |
||||
<view class="info-right acea-row row-column-between"> |
||||
<view class="name line1">{{detail.enterpriseName}}</view> |
||||
<view class="line1">{{detail.enterpriseTitle}}</view> |
||||
<view class="category-box acea-row"> |
||||
<view class="tag-item-b tag line1">{{detail.cname}}</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="contact-box acea-row row-column-between"> |
||||
<view class="acea-row row-middle"> |
||||
<image src="/static/images/home/c-location.png" class="contact-icon"></image> |
||||
<text class="line1">{{detail.enterpriseAddress}}</text> |
||||
</view> |
||||
<view class="acea-row row-middle" > |
||||
<image src="/static/images/home/c-site.png" class="contact-icon"></image> |
||||
<text class="line1">{{detail.enterpriseNet}}</text> |
||||
</view> |
||||
<view class="acea-row row-middle"> |
||||
<image src="/static/images/home/c-phone.png" class="contact-icon"></image> |
||||
<text class="line1">{{detail.enterprisePhone}}</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="navigation-box acea-row row-between-wrapper"> |
||||
<view :class="'tab ' + (active == 1 ? 'tab-a' : '')" data-i="1" @tap="tabClick">首页</view> |
||||
<view :class="'tab ' + (active == 2 ? 'tab-a' : '')" data-i="2" @tap="tabClick">资源({{detail.resourceList.length || 0}})</view> |
||||
<view :class="'tab ' + (active == 3 ? 'tab-a' : '')" data-i="3" @tap="tabClick">需求({{detail.demandList.length || 0}})</view> |
||||
</view> |
||||
|
||||
<view class="modular-box"> |
||||
<!-- 首页 --> |
||||
<view class="home-box" v-if="active == 1"> |
||||
<view class="company-show-box"> |
||||
<view class="title-box acea-row row-middle"> |
||||
<image src="../../../static/images/shu.png" mode=""></image>案例展示 |
||||
</view> |
||||
<view> |
||||
<swiper class="swiper-block" autoplay="true" circular="true" previous-margin="0rpx" next-margin="180rpx" current="0" @change="swiperChange"> |
||||
<block v-for="(item, index) in detail.imgPaths" :key="index"> |
||||
<swiper-item class="swiper-item" @tap="previewImg"> |
||||
<image mode="aspectFill" :src="item" :class="'slide-image ' + (swiperIndex == index ? 'active' : '')"></image> |
||||
</swiper-item> |
||||
</block> |
||||
</swiper> |
||||
</view> |
||||
</view> |
||||
<view class="title-box acea-row row-middle"> |
||||
<image src="../../../static/images/shu.png" mode=""></image>基本信息 |
||||
</view> |
||||
<view class="info-box"> |
||||
<view class="info-item acea-row-nowrap"> |
||||
<view class="f-weight">企业名称</view> |
||||
<view class="colG">{{detail.enterpriseName}}</view> |
||||
</view> |
||||
<view class="info-item acea-row-nowrap"> |
||||
<view class="f-weight">所属类型</view> |
||||
<view class="colG">{{detail.enterpriseType == 1? '企业' : '个人团队' }}</view> |
||||
</view> |
||||
<view class="info-item acea-row-nowrap"> |
||||
<view class="f-weight">法定代表</view> |
||||
<view class="colG">{{detail.legalPersonName}}</view> |
||||
</view> |
||||
<view class="info-item acea-row-nowrap"> |
||||
<view class="f-weight">企业规模</view> |
||||
<view class="colG">{{detail.enterpriseScale}}人</view> |
||||
</view> |
||||
<view class="info-item acea-row-nowrap"> |
||||
<view class="f-weight">经营范围</view> |
||||
<view class="colG">{{detail.businessNature}}</view> |
||||
</view> |
||||
</view> |
||||
<view class="about-box"> |
||||
<view class="title-box acea-row row-middle"> |
||||
<image src="../../../static/images/shu.png" mode=""></image>关于我们 |
||||
</view> |
||||
<view class="about"> |
||||
<text>{{detail.resourceIntroduction}}</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<!-- 资源 --> |
||||
<view class="" v-if="active == 2"> |
||||
|
||||
</view> |
||||
<!-- 需求 --> |
||||
<view class="" v-if="active == 3"> |
||||
|
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
const app = getApp(); |
||||
export default { |
||||
data() { |
||||
return { |
||||
|
||||
active: '1', |
||||
detail: {}, |
||||
swiperIndex: 0, |
||||
} |
||||
}, |
||||
onLoad: function (options) { |
||||
this.setData({ |
||||
id: options.id |
||||
}); |
||||
this.getDetail(); |
||||
}, |
||||
methods:{ |
||||
previewImg() { |
||||
uni.previewImage({ |
||||
current: this.detail.imgPaths[0], |
||||
// 当前显示图片的http链接 |
||||
urls: this.detail.imgPaths // 需要预览的图片http链接列表 |
||||
|
||||
}); |
||||
}, |
||||
tabClick(e) { |
||||
this.setData({ |
||||
active: e.currentTarget.dataset.i, |
||||
}) |
||||
}, |
||||
getDetail() { |
||||
app.http('get', 'Enterprise/enterpriseInfo', { |
||||
id: this.id |
||||
}).then(res => { |
||||
if (res.data.success) { |
||||
this.setData({ |
||||
detail: res.data.data |
||||
}); |
||||
} |
||||
}); |
||||
}, |
||||
swiperChange(e) { |
||||
const that = this; |
||||
that.setData({ |
||||
swiperIndex: e.detail.current |
||||
}); |
||||
}, |
||||
|
||||
}, |
||||
} |
||||
|
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
.enterprise-page { |
||||
width: 100%; |
||||
height: auto; |
||||
background: #fff; |
||||
position: relative; |
||||
} |
||||
|
||||
.top-img { |
||||
width: 100%; |
||||
height: 406rpx; |
||||
display: block; |
||||
} |
||||
|
||||
.enterprise-info-box { |
||||
width: 100%; |
||||
height: 406rpx; |
||||
background: linear-gradient(to bottom, rgba(24, 24, 24, 1), rgba(0, 0, 0, 0.3)); |
||||
position: absolute; |
||||
top: 0; |
||||
padding: 92rpx 40rpx 28rpx 40rpx; |
||||
.company-info-box { |
||||
.logo-img { |
||||
width: 134rpx; |
||||
height: 134rpx; |
||||
margin-right: 26rpx; |
||||
} |
||||
.info-right { |
||||
width: 470rpx; |
||||
height: 134rpx; |
||||
color: #FFFFFF; |
||||
font-size: 24rpx; |
||||
.name { |
||||
line-height: 35rpx; |
||||
font-size: 32rpx; |
||||
} |
||||
.category-box { |
||||
.tag { |
||||
width: auto; |
||||
padding: 0 10rpx; |
||||
height: 36rpx; |
||||
line-height: 36rpx; |
||||
border-radius: 8rpx; |
||||
font-size: 20rpx; |
||||
margin-right: 12rpx; |
||||
text-align: center; |
||||
color: #fff; |
||||
} |
||||
.tag-item-b { |
||||
background: #5D8AFD; |
||||
} |
||||
.tag-item-y { |
||||
background: #FD855B; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.contact-box{ |
||||
width: 460rpx; |
||||
height: 106rpx; |
||||
font-size: 24rpx; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
margin-top: 46rpx; |
||||
.contact-icon{ |
||||
width: 20rpx; |
||||
height: 20rpx; |
||||
margin-right: 10rpx; |
||||
} |
||||
.line1{ |
||||
width: 400rpx; |
||||
line-height: 30rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
.navigation-box { |
||||
width: 100%; |
||||
height: 74rpx; |
||||
background: #FFFFFF; |
||||
box-shadow: 0px -6rpx 20rpx rgba(0, 0, 0, 0.11); |
||||
padding: 0 25rpx; |
||||
.tab { |
||||
width: 146rpx; |
||||
height: 74rpx; |
||||
line-height: 74rpx; |
||||
font-size: 28rpx; |
||||
color: #BFBFBF; |
||||
position: relative; |
||||
font-weight: 500; |
||||
text-align: center; |
||||
} |
||||
.tab::after { |
||||
display: block; |
||||
content: ''; |
||||
width: 74rpx; |
||||
height: 8rpx; |
||||
border-radius: 8rpx; |
||||
background: #FF5100; |
||||
position: absolute; |
||||
bottom: -5rpx; |
||||
left: 50%; |
||||
margin-left: -37rpx; |
||||
opacity: 0; |
||||
transform: scaleX(0); |
||||
transition: all .2s ease, opacity .15s ease; |
||||
} |
||||
.tab-a { |
||||
color: #FF5100; |
||||
} |
||||
.tab-a::after { |
||||
opacity: 1; |
||||
transform: scaleX(1); |
||||
} |
||||
} |
||||
|
||||
|
||||
.modular-box{ |
||||
width: 100%; |
||||
height: auto; |
||||
} |
||||
|
||||
// 首页 |
||||
.home-box{ |
||||
width: 100%; |
||||
padding-bottom: 140rpx; |
||||
.title-box{ |
||||
font-size: 36rpx; |
||||
font-weight: 600; |
||||
color: #1D1D1D; |
||||
padding: 50rpx 0rpx 15rpx 40rpx; |
||||
} |
||||
.title-box image { |
||||
width: 18rpx; |
||||
height: 36rpx; |
||||
margin-right: 10rpx; |
||||
} |
||||
.col-line{ |
||||
width: 8rpx; |
||||
height: 36rpx; |
||||
background: #FF7942; |
||||
border-radius: 4rpx; |
||||
margin-right: 14rpx; |
||||
} |
||||
.info-item{ |
||||
padding-left: 40rpx; |
||||
margin-bottom: 20rpx; |
||||
font-size: 28rpx; |
||||
line-height: 40rpx; |
||||
color: #1D1D1D; |
||||
} |
||||
.f-weight{ |
||||
font-weight: 600; |
||||
} |
||||
.colG{ |
||||
width: 496rpx; |
||||
color: #707070; |
||||
margin-left: 30rpx; |
||||
} |
||||
.about{ |
||||
padding: 0rpx 40rpx; |
||||
} |
||||
.about text{ |
||||
font-size: 28rpx; |
||||
color: #707070; |
||||
line-height: 40rpx; |
||||
} |
||||
|
||||
.swiper-block { |
||||
width: 100%; |
||||
} |
||||
|
||||
.swiper-item { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: flex-start; |
||||
overflow: unset; |
||||
} |
||||
.slide-image { |
||||
height: 250rpx; |
||||
width: 520rpx; |
||||
border-radius: 9rpx; |
||||
margin: 0rpx 30rpx; |
||||
z-index: 1; |
||||
} |
||||
.active { |
||||
transform: scale(1.14); |
||||
transition: all 0.2s ease-in 0s; |
||||
z-index: 20; |
||||
padding-left: 40rpx; |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
</style> |
||||
@ -0,0 +1,611 @@
|
||||
<template> |
||||
<view class="supplyHall-page"> |
||||
<!-- 导航栏 --> |
||||
<view class="navigation-box"> |
||||
<view class="search-box acea-row row-middle"> |
||||
<image src="../../../static/images/search-icon.png" mode=""></image> |
||||
<input type="text" value="" placeholder="请输入企业名或服务进行搜索" /> |
||||
<view class="search acea-row row-center-wrapper">搜一下</view> |
||||
</view> |
||||
<view class="resource-tabs acea-row"> |
||||
<view :class="'tab ' + (active == 1 ? 'tab-a' : '')" data-i="1" @tap="tabClick">服务列表</view> |
||||
<view :class="'tab ' + (active == 2 ? 'tab-a' : '')" data-i="2" @tap="tabClick">企业列表</view> |
||||
<view class="screen-box acea-row row-between-wrapper"> |
||||
<view class="screen acea-row row-middle" @tap="showDialog"> |
||||
<text>筛选</text> |
||||
<image src="/static/images/home/screen.png"></image> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
<view class="supplyHall-box"> |
||||
<view class="resource-box" v-if="active == 1"> |
||||
<!-- 企业 --> |
||||
<view class="enterprise-list" v-for="(item,index) in 2" :key="index"> |
||||
<image src="../../../static/images/act-time.png" mode="" class="lable-img"></image> |
||||
<view class="enterprise-con acea-row"> |
||||
<image src="../../../static/images/home/menu6.png" class="enterprise-img"></image> |
||||
<view class="content-right acea-row row-column-between"> |
||||
<view>APP开发平台搭建外卖小程序返现H5定制一站式解决</view> |
||||
<view class="category-box acea-row"> |
||||
<view class="tag-item-b tag">商务合作</view> |
||||
<view class="tag-item-y tag">场地租赁</view> |
||||
</view> |
||||
<view class="enterprise-price">￥20,000</view> |
||||
</view> |
||||
</view> |
||||
<view class="user-info acea-row row-middle"> |
||||
<image src="../../../static/images/cart.png" mode="" class="head-logo"></image> |
||||
<view class="user-name">湖北知音动漫有限公司</view> |
||||
</view> |
||||
<view class="todetails">查看详情</view> |
||||
</view> |
||||
</view> |
||||
<view class="company-box" v-if="active == 2"> |
||||
<view class="business-list" v-for="(item,index) in companyList" :key="index" @tap="toCompanyDetail" :data-id="item.id"> |
||||
<view :class="'business-lable' + (item.enterpriseType == 2 ? 'bg2' : '')"> |
||||
{{item.enterpriseType == 1 ? '企业' : '个人'}} |
||||
</view> |
||||
<view class="business-con acea-row"> |
||||
<view> |
||||
<image :src="item.enterpriseLogo" class="logo-img"></image> |
||||
</view> |
||||
<view> |
||||
<view class="title-h">{{item.enterpriseName}}</view> |
||||
<view class="category-box acea-row"> |
||||
<view class="tag-item-b tag">{{item.cname}}</view> |
||||
<!-- <view class="tag-item-y tag"></view> --> |
||||
</view> |
||||
<view class="title-s">{{item.enterpriseTitle}}</view> |
||||
</view> |
||||
</view> |
||||
<vie class="business-img acea-row row-around"> |
||||
<image v-for="(item, index2) in item.imgPaths" :key="index2" mode="aspectFill" :src="item" |
||||
v-if="index2 < 2"></image> |
||||
</vie> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="mask-box" v-if="showScreenDialog"> |
||||
<view :class="'screen-dialog-box ' + (showScreenDialog ? 'move' : '')"> |
||||
<view class="screen-list"> |
||||
<view class="screen-item"> |
||||
<view class="screen-title">所有服务</view> |
||||
<view class="acea-row"> |
||||
<view v-for="(item, index) in cagetoryList" :key="index" |
||||
:class="'item ' + (cagetoryActive == index ? 'item-active' : '')" @tap="cagetoryClick" |
||||
:data-i="index" :data-item="item">{{item.cagetoryName}}</view> |
||||
</view> |
||||
</view> |
||||
<view class="screen-item"> |
||||
<view class="screen-title">商家身份<text class="fz20">(所有商家均实名认证)</text></view> |
||||
<view class="acea-row"> |
||||
<view :class="'item ' + (enterpriseType == 2 ? 'item-active' : '')" @tap="businessChange" |
||||
data-name="个人认证" data-type="2">个人认证</view> |
||||
<view :class="'item ' + (enterpriseType == 1 ? 'item-active' : '')" @tap="businessChange" |
||||
data-name="企业认证" data-type="1">企业认证</view> |
||||
</view> |
||||
</view> |
||||
<view class="submit-box acea-row"> |
||||
<view class="btn reset" @tap="resetClick">重置</view> |
||||
<view class="btn finish" @tap="finishClick">完成</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
const app = getApp(); |
||||
export default { |
||||
data() { |
||||
return { |
||||
active: '1', |
||||
showScreenDialog: false, |
||||
cagetoryActive: "", |
||||
//筛选企业/个人 |
||||
resourceCagetoryId: '', |
||||
// 分类列表 |
||||
enterpriseType: '', |
||||
//筛选分类 |
||||
choseCagetory: '', |
||||
choseBusiness: '', |
||||
cName: "", |
||||
|
||||
companyList: [], |
||||
} |
||||
}, |
||||
onLoad: function(options) { |
||||
this.getCagetoryList(); |
||||
}, |
||||
methods: { |
||||
tabClick(e) { |
||||
this.setData({ |
||||
active: e.currentTarget.dataset.i, |
||||
}); |
||||
if (e.currentTarget.dataset.i == 2) { |
||||
this.getCompanyList(); |
||||
} |
||||
}, |
||||
getCompanyList() { |
||||
app.http('post', 'Enterprise/listEnterprise').then(res => { |
||||
if (res.data.success) { |
||||
this.setData({ |
||||
companyList: res.data.data.content |
||||
}); |
||||
} |
||||
}); |
||||
|
||||
}, |
||||
getCagetoryList() { |
||||
app.http('get', 'ResourcesCagetory/listResourcesCagetory').then(res => { |
||||
if (res.data.success) { |
||||
this.setData({ |
||||
cagetoryList: res.data.data |
||||
}); |
||||
} |
||||
}); |
||||
}, |
||||
showDialog() { |
||||
this.setData({ |
||||
showScreenDialog: true |
||||
}); |
||||
}, |
||||
|
||||
// 所有服务 |
||||
cagetoryClick(e) { |
||||
let item = e.currentTarget.dataset.item; |
||||
let i = e.currentTarget.dataset.i; |
||||
console.log(item); |
||||
this.setData({ |
||||
cagetoryActive: i, |
||||
resourceCagetoryId: item.id, |
||||
choseCagetory: item.cagetoryName |
||||
}); |
||||
}, |
||||
|
||||
// 个人/企业认证 |
||||
businessChange(e) { |
||||
let type = e.currentTarget.dataset.type; |
||||
let name = e.currentTarget.dataset.name; |
||||
this.setData({ |
||||
choseBusiness: name, |
||||
enterpriseType: type |
||||
}); |
||||
}, |
||||
|
||||
// 完成 |
||||
finishClick() { |
||||
this.setData({ |
||||
showScreenDialog: false |
||||
}); |
||||
}, |
||||
|
||||
// 重置 |
||||
resetClick() { |
||||
this.setData({ |
||||
cName: '', |
||||
cagetoryActive: null, |
||||
resourceCagetoryId: '', |
||||
enterpriseType: '', |
||||
choseBusiness: '', |
||||
choseCagetory: '', |
||||
}); |
||||
}, |
||||
// 企业列表 |
||||
toCompanyDetail(e) { |
||||
let id = e.currentTarget.dataset.id; |
||||
uni.navigateTo({ |
||||
url: '/pages/demandHall/enterprisePage/index?id=' + id |
||||
}); |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
.supplyHall-page { |
||||
width: 100%; |
||||
min-height: 100vh; |
||||
background: #F5F5F5; |
||||
font-size: 28rpx; |
||||
} |
||||
|
||||
/* 导航栏 */ |
||||
.navigation-box { |
||||
width: 100%; |
||||
height: auto; |
||||
background: #fff; |
||||
padding-top: 20rpx; |
||||
} |
||||
|
||||
.search-box { |
||||
width: 670rpx; |
||||
height: 68rpx; |
||||
border: 2rpx solid #FF5100; |
||||
border-radius: 8rpx; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.search-box image { |
||||
width: 35rpx; |
||||
height: 35rpx; |
||||
margin: 0 29rpx 0 52rpx; |
||||
} |
||||
|
||||
.search { |
||||
margin-left: auto; |
||||
width: 132rpx; |
||||
height: 68rpx; |
||||
background: linear-gradient(39deg, #FF5100 0%, #FFA074 100%); |
||||
border-radius: 8rpx; |
||||
color: #fff; |
||||
} |
||||
|
||||
.resource-tabs { |
||||
width: 100%; |
||||
padding-top: 10rpx; |
||||
background: #fff; |
||||
border-bottom: 2rpx solid #EEEEEE; |
||||
padding-left: 20rpx; |
||||
} |
||||
|
||||
.tab { |
||||
width: 150rpx; |
||||
padding: 26rpx 0; |
||||
font-size: 32rpx; |
||||
color: #BFBFBF; |
||||
position: relative; |
||||
font-weight: 500; |
||||
text-align: center; |
||||
margin-left: 115rpx; |
||||
} |
||||
|
||||
.tab::after { |
||||
display: block; |
||||
content: ''; |
||||
width: 80rpx; |
||||
height: 8rpx; |
||||
border-radius: 8rpx; |
||||
background: #FF5100; |
||||
position: absolute; |
||||
bottom: 0rpx; |
||||
left: 50%; |
||||
margin-left: -40rpx; |
||||
opacity: 0; |
||||
transform: scaleX(0); |
||||
transition: all .2s ease, opacity .15s ease; |
||||
} |
||||
|
||||
.tab-a { |
||||
color: #FF5100; |
||||
} |
||||
|
||||
.tab-a::after { |
||||
opacity: 1; |
||||
transform: scaleX(1); |
||||
} |
||||
|
||||
.screen-box { |
||||
height: 94rpx; |
||||
padding: 0 38rpx; |
||||
color: #666; |
||||
background: #fff; |
||||
margin-left: auto; |
||||
} |
||||
|
||||
.screen-result { |
||||
color: #FF5100; |
||||
} |
||||
|
||||
.screen image { |
||||
width: 27rpx; |
||||
height: 27rpx; |
||||
margin-left: 6rpx; |
||||
} |
||||
|
||||
.supplyHall-box { |
||||
width: 670rpx; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.resource-box { |
||||
width: 100%; |
||||
} |
||||
|
||||
/* 企业 */ |
||||
.lable-img { |
||||
width: 60rpx; |
||||
height: 32rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 12rpx; |
||||
} |
||||
|
||||
.user-info { |
||||
margin: 8rpx 0 0rpx 20rpx; |
||||
padding-bottom: 16rpx; |
||||
} |
||||
|
||||
.user-name { |
||||
height: 40rpx; |
||||
color: #1D1D1D; |
||||
margin: 0 10rpx 0 16rpx; |
||||
} |
||||
.category-box{ |
||||
width: 100%; |
||||
} |
||||
.tag { |
||||
width: auto; |
||||
padding: 0 10rpx; |
||||
height: 36rpx; |
||||
border-radius: 4rpx; |
||||
font-size: 20rpx; |
||||
margin-right: 8rpx; |
||||
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; |
||||
} |
||||
|
||||
.todetails { |
||||
width: 148rpx; |
||||
height: 44rpx; |
||||
line-height: 44rpx; |
||||
background: linear-gradient(141deg, #FFA782 0%, #FF6D31 100%); |
||||
border-radius: 8rpx; |
||||
position: absolute; |
||||
right: 18rpx; |
||||
bottom: 38rpx; |
||||
text-align: center; |
||||
color: #fff; |
||||
} |
||||
|
||||
.enterprise-list { |
||||
width: 670rpx; |
||||
background: #FFFFFF; |
||||
margin: 0 auto; |
||||
margin-top: 32rpx; |
||||
border-radius: 12rpx; |
||||
position: relative; |
||||
} |
||||
|
||||
.enterprise-price { |
||||
height: 40rpx; |
||||
font-size: 28rpx; |
||||
color: #FF5100; |
||||
} |
||||
|
||||
.head-logo { |
||||
width: 72rpx; |
||||
height: 72rpx; |
||||
} |
||||
|
||||
.enterprise-con { |
||||
width: 100%; |
||||
height: 192rpx; |
||||
margin: 6rpx 20rpx 10rpx 20rpx; |
||||
} |
||||
|
||||
.enterprise-img { |
||||
width: 150rpx; |
||||
height: 192rpx; |
||||
margin-right: 30rpx; |
||||
} |
||||
|
||||
.content-right { |
||||
width: 456rpx; |
||||
position: relative; |
||||
} |
||||
|
||||
.content-right>.supply-screen { |
||||
margin: 16rpx 0 20rpx 0; |
||||
} |
||||
|
||||
.company-box { |
||||
width: 670rpx; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.business-list { |
||||
width: 670rpx; |
||||
background: #FFFFFF; |
||||
margin: 0 auto; |
||||
margin-top: 32rpx; |
||||
border-radius: 12rpx; |
||||
position: relative; |
||||
} |
||||
|
||||
.business-lable { |
||||
width: 60rpx; |
||||
height: 32rpx; |
||||
background: rgba(88, 144, 255, 0.91); |
||||
border-radius: 12rpx 0rpx 14rpx 0rpx; |
||||
color: #fff; |
||||
text-align: center; |
||||
font-size: 20rpx; |
||||
} |
||||
|
||||
.bg2 { |
||||
background: rgba(255, 170, 0, 0.63); |
||||
} |
||||
|
||||
|
||||
.business-con { |
||||
margin: 8rpx 20rpx 16rpx 20rpx; |
||||
} |
||||
|
||||
.logo-img { |
||||
width: 154rpx; |
||||
height: 154rpx; |
||||
margin-right: 20rpx; |
||||
} |
||||
|
||||
.title-h { |
||||
height: 44rpx; |
||||
font-size: 32rpx; |
||||
color: #1D1D1D; |
||||
margin-bottom: 8rpx; |
||||
} |
||||
|
||||
.title-s { |
||||
width: 456rpx; |
||||
height: 65rpx; |
||||
font-size: 24rpx; |
||||
color: #666666; |
||||
margin-top: 10rpx; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
|
||||
.business-img { |
||||
width: 630rpx; |
||||
height: 176rpx; |
||||
margin: 0 20rpx; |
||||
padding-bottom: 30rpx; |
||||
} |
||||
|
||||
.business-img image { |
||||
width: 305rpx; |
||||
height: 176rpx; |
||||
border-radius: 8rpx; |
||||
} |
||||
|
||||
.mask-box { |
||||
width: 100%; |
||||
height: 100vh; |
||||
background: rgba(0, 0, 0, .6); |
||||
position: fixed; |
||||
top: 0; |
||||
/* #ifdef H5 */ |
||||
top: calc(88rpx + constant(safe-area-inset-top)); |
||||
top: calc(88rpx + env(safe-area-inset-top)); |
||||
/* #endif */ |
||||
left: 0; |
||||
z-index: 9999; |
||||
} |
||||
|
||||
.screen-dialog-box { |
||||
width: 602rpx; |
||||
height: 100%; |
||||
/* padding-bottom: 160rpx; */ |
||||
overflow-y: scroll; |
||||
background-color: #fff; |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0rpx; |
||||
animation: move 200ms ease; |
||||
} |
||||
|
||||
/* .move{ |
||||
right: 0rpx; |
||||
} */ |
||||
@keyframes move { |
||||
0% { |
||||
transform: translateX(800rpx); |
||||
} |
||||
|
||||
100% { |
||||
transform: translateX(0rpx); |
||||
} |
||||
} |
||||
|
||||
.screen-item { |
||||
width: 100%; |
||||
padding: 0 38rpx; |
||||
padding-bottom: 22rpx; |
||||
border-bottom: 2rpx solid #EEEEEE; |
||||
} |
||||
|
||||
.screen-title { |
||||
font-size: 24rpx; |
||||
color: #000; |
||||
margin-bottom: 32rpx; |
||||
} |
||||
|
||||
.screen-item { |
||||
padding-top: 40rpx; |
||||
} |
||||
|
||||
.screen-item .item { |
||||
width: 162rpx; |
||||
height: 48rpx; |
||||
line-height: 48rpx; |
||||
text-align: center; |
||||
font-size: 24rpx; |
||||
color: #666666; |
||||
background: #F6F6F6; |
||||
border-radius: 4rpx; |
||||
margin-bottom: 20rpx; |
||||
margin-right: 20rpx; |
||||
} |
||||
|
||||
.screen-item .item:nth-child(3n) { |
||||
margin-right: 0; |
||||
} |
||||
|
||||
.screen-item .item-active { |
||||
border: 2rpx solid #FF6E33; |
||||
color: #FE7D26; |
||||
background: #FDEFE6; |
||||
} |
||||
|
||||
.across-line { |
||||
width: 44rpx; |
||||
height: 2rpx; |
||||
background: #ACABAB; |
||||
margin: 0 12rpx; |
||||
} |
||||
|
||||
.low-price { |
||||
width: 228rpx; |
||||
height: 60rpx; |
||||
background: #F6F5F5; |
||||
border-radius: 4rpx; |
||||
} |
||||
|
||||
.low-price input { |
||||
width: 100%; |
||||
height: 100%; |
||||
text-align: center; |
||||
} |
||||
|
||||
.fz20 { |
||||
font-size: 20rpx; |
||||
color: #393939; |
||||
} |
||||
|
||||
.submit-box { |
||||
width: 602rpx; |
||||
height: 100rpx; |
||||
box-shadow: 2rpx 0px 12rpx rgba(0, 0, 0, 0.16); |
||||
position: fixed; |
||||
bottom: 0; |
||||
right: 0; |
||||
} |
||||
|
||||
.submit-box .btn { |
||||
width: 50%; |
||||
height: 100%; |
||||
line-height: 100rpx; |
||||
text-align: center; |
||||
} |
||||
|
||||
.submit-box .finish { |
||||
background: #FF660C; |
||||
color: #fff; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,336 @@
|
||||
<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">蜂蜜供应商</view> |
||||
<view class="label">A轮</view> |
||||
<view class="title-s">优质的供应源、多元化的土地使用、快速扩张的能力、稳定的分销渠道</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> |
||||
<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 class="detials-box"> |
||||
<view class="title acea-row row-middle"> |
||||
<image src="../../../static/images/shu.png" mode=""></image>项目详情 |
||||
</view> |
||||
<view>所属区域：武汉</view> |
||||
<view>项目详情：融资方的合作标准</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 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">蜂蜜供应商</view> |
||||
<view class="line1">优质的供应源，多元化的土地sssssssssssss</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; |
||||
padding: 20rpx 40rpx 0 40rpx; |
||||
|
||||
.content-box { |
||||
width: 670rpx; |
||||
height: 130rpx; |
||||
margin-bottom: 25rpx; |
||||
|
||||
.content-left { |
||||
width: 536rpx; |
||||
|
||||
.title { |
||||
width: 208rpx; |
||||
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; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.content-box image { |
||||
width: 128rpx; |
||||
height: 128rpx; |
||||
margin-left: auto; |
||||
} |
||||
|
||||
} |
||||
.category-box { |
||||
.tag { |
||||
width: 112rpx; |
||||
height: 36rpx; |
||||
border-radius: 4rpx; |
||||
font-size: 20rpx; |
||||
margin-right: 8rpx; |
||||
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; |
||||
top: -48rpx; |
||||
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: 384rpx; |
||||
background: #FFFFFF; |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
color: #343434; |
||||
padding: 24rpx 0 0 32rpx; |
||||
} |
||||
|
||||
.detials-box view { |
||||
margin-bottom: 22rpx; |
||||
} |
||||
|
||||
.title { |
||||
height: 52rpx; |
||||
font-size: 36rpx; |
||||
font-family: PingFang SC; |
||||
font-weight: 600; |
||||
color: #343434; |
||||
} |
||||
|
||||
.title image { |
||||
width: 18rpx; |
||||
height: 36rpx; |
||||
margin-right: 10rpx; |
||||
} |
||||
.mask-box{ |
||||
width: 750rpx; |
||||
height: 384rpx; |
||||
background: #fff; |
||||
box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.01); |
||||
filter: blur(6rpx); |
||||
position: fixed; |
||||
top: 390rpx; |
||||
} |
||||
.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, #FF6D31 0%, #FFC2AA 100%); |
||||
border-radius: 12rpx; |
||||
font-size: 24rpx; |
||||
font-weight: 600; |
||||
line-height: 52rpx; |
||||
color: #FFFFFF; |
||||
text-align: center; |
||||
} |
||||
.recommend-box .title{ |
||||
margin-left: 32rpx; |
||||
} |
||||
.recommend-box { |
||||
width: 750rpx; |
||||
height: 528rpx; |
||||
background: #FFFFFF; |
||||
margin: 32rpx 0; |
||||
// padding: 24rpx 0 0 32rpx; |
||||
padding: 24rpx 0 0 0rpx; |
||||
} |
||||
|
||||
.update-box { |
||||
width: 670rpx; |
||||
height: 48rpx; |
||||
color: #FF6D31; |
||||
font-size: 24rpx; |
||||
margin-bottom: 26rpx; |
||||
margin-left: 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; |
||||
} |
||||
.update-icon image{ |
||||
width: 26rpx; |
||||
height: 26rpx; |
||||
background: rgba(0, 0, 0, 0); |
||||
margin-right: 10rpx; |
||||
} |
||||
.scroll-view_H{ |
||||
width: 100%; |
||||
height: 345rpx; |
||||
white-space: nowrap; |
||||
padding-left: 22rpx; |
||||
} |
||||
.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 22rpx 0 10rpx; |
||||
} |
||||
.recommend-list image{ |
||||
width: 392rpx; |
||||
height: 194rpx; |
||||
border-radius: 12rpx 12rpx 0 0; |
||||
} |
||||
.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> |
||||
@ -0,0 +1,566 @@
|
||||
<template> |
||||
<view class="supplyHall-page"> |
||||
<!-- 导航栏 --> |
||||
<view class="navigation-box"> |
||||
<view class="search-box acea-row row-middle" > |
||||
<image src="../../../static/images/search-icon.png" mode=""></image> |
||||
<input type="text" value="" placeholder="请输入相关关键词"/> |
||||
<view class="search acea-row row-center-wrapper">搜一下</view> |
||||
</view> |
||||
<view class="resource-tabs acea-row"> |
||||
<view :class="'tab ' + (active == 1 ? 'tab-a' : '')" data-i="1" @tap="tabClick">需求广场</view> |
||||
<view :class="'tab ' + (active == 2 ? 'tab-a' : '')" data-i="2" @tap="tabClick">供应广场</view> |
||||
<view class="screen-box acea-row row-between-wrapper" > |
||||
<view class="screen acea-row row-middle" @tap="showDialog"> |
||||
<text>筛选</text> |
||||
<image src="/static/images/home/screen.png"></image> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
<view class="supplyHall-box" > |
||||
<view class="resource-box" v-if="active == 1" > |
||||
<!-- 个人 --> |
||||
<view class="personal-list" v-for="(item,index) in 2" :key="index"> |
||||
<image src="../../../static/images/backhome.png" mode="" class="lable-img"></image> |
||||
<view class="acea-row row-column-between info-box"> |
||||
<view class="user-info acea-row row-middle"> |
||||
<image src="../../../static/images/business-img1.png" mode="" class="head-img"></image> |
||||
<view class="user-name">大老虎</view> |
||||
<view class="user-address">武汉</view> |
||||
<view class="user-price">￥20,000</view> |
||||
</view> |
||||
<view class="supply-con">李先生需要景区方面资源，洽谈相关合作</view> |
||||
<view class="category-box acea-row"> |
||||
<view class="tag-item-b tag">商务合作</view> |
||||
<view class="tag-item-y tag">场地租赁</view> |
||||
</view> |
||||
<view class="time-end">2021.8.30截止报名</view> |
||||
</view> |
||||
<view class="todetails">查看详情</view> |
||||
</view> |
||||
<!-- 企业 --> |
||||
<view class="enterprise-list"> |
||||
<image src="../../../static/images/act-time.png" mode="" class="lable-img"></image> |
||||
<view class="enterprise-box acea-row row-column-between"> |
||||
<view class="title-h">招聘前端工程师若干名</view> |
||||
<view class="enterprise-price">2K-10K</view> |
||||
<view class="supply-screen acea-row"> |
||||
<view class="tag-item-y tag">网站建设</view> |
||||
<view class="tag-item-p tag">APP开发</view> |
||||
<view class="time-end-t">2021.8.30截止报名</view> |
||||
</view> |
||||
<view class="enterprise-info acea-row row-middle"> |
||||
<image src="../../../static/images/cart.png" mode="" class="head-logo"></image> |
||||
<view class="user-name">湖北知音动漫有限公司</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="todetails">查看详情</view> |
||||
</view> |
||||
</view> |
||||
<view class="company-box" v-if="active == 2"> |
||||
<view class="personal-list"> |
||||
<image src="../../../static/images/backhome.png" mode="" class="lable-img"></image> |
||||
<view class="acea-row row-column-between info-box"> |
||||
<view class="user-info acea-row row-middle"> |
||||
<image src="../../../static/images/business-img1.png" mode="" class="head-img"></image> |
||||
<view class="user-name">大老虎</view> |
||||
<view class="user-address">武汉</view> |
||||
<view class="user-price">￥20,000</view> |
||||
</view> |
||||
<view class="supply-con">李先生需要景区方面资源，洽谈相关合作</view> |
||||
<view class="category-box acea-row"> |
||||
<view class="tag-item-b tag">商务合作</view> |
||||
<view class="tag-item-y tag">场地租赁</view> |
||||
</view> |
||||
<view class="time-end">2021.8.30截止报名</view> |
||||
</view> |
||||
<view class="todetails">查看详情</view> |
||||
</view> |
||||
<view class="enterprise-list"> |
||||
<image src="../../../static/images/act-time.png" mode="" class="lable-img"></image> |
||||
<view class="enterprise-con acea-row"> |
||||
<image src="../../../static/images/home/menu6.png" class="enterprise-img"></image> |
||||
<view class="content-right acea-row row-column-between"> |
||||
<view>APP开发平台搭建外卖小程序返现H5定制一站式解决</view> |
||||
<view class="category-box acea-row"> |
||||
<view class="tag-item-b tag">商务合作</view> |
||||
<view class="tag-item-y tag">场地租赁</view> |
||||
</view> |
||||
<view class="e-price">￥20,000</view> |
||||
</view> |
||||
</view> |
||||
<view class="enterprise-info acea-row row-middle mt20"> |
||||
<image src="../../../static/images/cart.png" mode="" class="head-logo"></image> |
||||
<view class="user-name">湖北知音动漫有限公司</view> |
||||
</view> |
||||
<view class="todetails">查看详情</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="mask-box" v-if="showScreenDialog"> |
||||
<view :class="'screen-dialog-box ' + (showScreenDialog ? 'move' : '')"> |
||||
<view class="screen-list"> |
||||
<view class="screen-item"> |
||||
<view class="screen-title">所有服务</view> |
||||
<view class="acea-row"> |
||||
<view v-for="(item, index) in cagetoryList" :key="index" :class="'item ' + (cagetoryActive == index ? 'item-active' : '')" @tap="cagetoryClick" :data-i="index" :data-item="item">{{item.cagetoryName}}</view> |
||||
</view> |
||||
</view> |
||||
<view class="screen-item"> |
||||
<view class="screen-title">商家身份<text class="fz20">(所有商家均实名认证)</text></view> |
||||
<view class="acea-row"> |
||||
<view :class="'item ' + (enterpriseType == 2 ? 'item-active' : '')" @tap="businessChange" data-name="个人认证" data-type="2">个人认证</view> |
||||
<view :class="'item ' + (enterpriseType == 1 ? 'item-active' : '')" @tap="businessChange" data-name="企业认证" data-type="1">企业认证</view> |
||||
</view> |
||||
</view> |
||||
<view class="submit-box acea-row"> |
||||
<view class="btn reset" @tap="resetClick">重置</view> |
||||
<view class="btn finish" @tap="finishClick">完成</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
const app = getApp(); |
||||
export default { |
||||
data() { |
||||
return { |
||||
active: '1', |
||||
showScreenDialog: false, |
||||
cagetoryActive: "", |
||||
//筛选企业/个人 |
||||
resourceCagetoryId: '', |
||||
// 分类列表 |
||||
enterpriseType: '', |
||||
//筛选分类 |
||||
choseCagetory: '', |
||||
choseBusiness: '', |
||||
cName: "", |
||||
} |
||||
}, |
||||
onLoad: function (options) { |
||||
this.getCagetoryList(); |
||||
}, |
||||
methods:{ |
||||
tabClick(e) { |
||||
this.setData({ |
||||
active: e.currentTarget.dataset.i, |
||||
}) |
||||
}, |
||||
getCagetoryList() { |
||||
app.http('get', 'ResourcesCagetory/listResourcesCagetory').then(res => { |
||||
if (res.data.success) { |
||||
this.setData({ |
||||
cagetoryList: res.data.data |
||||
}); |
||||
} |
||||
}); |
||||
}, |
||||
showDialog() { |
||||
this.setData({ |
||||
showScreenDialog: true |
||||
}); |
||||
}, |
||||
cagetoryClick(e) { |
||||
let item = e.currentTarget.dataset.item; |
||||
let i = e.currentTarget.dataset.i; |
||||
console.log(item); |
||||
this.setData({ |
||||
cagetoryActive: i, |
||||
resourceCagetoryId: item.id, |
||||
choseCagetory: item.cagetoryName |
||||
}); |
||||
}, |
||||
businessChange(e) { |
||||
let type = e.currentTarget.dataset.type; |
||||
let name = e.currentTarget.dataset.name; |
||||
this.setData({ |
||||
choseBusiness: name, |
||||
enterpriseType: type |
||||
}); |
||||
}, |
||||
|
||||
finishClick() { |
||||
this.setData({ |
||||
showScreenDialog: false |
||||
}); |
||||
}, |
||||
|
||||
resetClick() { |
||||
this.setData({ |
||||
cName: '', |
||||
cagetoryActive: null, |
||||
resourceCagetoryId: '', |
||||
enterpriseType: '', |
||||
choseBusiness: '', |
||||
choseCagetory: '', |
||||
}); |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
.supplyHall-page{ |
||||
width: 100%; |
||||
min-height: 100vh; |
||||
background: #F5F5F5; |
||||
font-size: 28rpx; |
||||
} |
||||
/* 导航栏 */ |
||||
.navigation-box{ |
||||
width: 100%; |
||||
height: auto; |
||||
background: #fff; |
||||
padding-top: 20rpx; |
||||
} |
||||
.search-box{ |
||||
width: 670rpx; |
||||
height: 68rpx; |
||||
border: 2rpx solid #FF5100; |
||||
border-radius: 8rpx; |
||||
margin: 0 auto; |
||||
} |
||||
.search-box image{ |
||||
width: 35rpx; |
||||
height: 35rpx; |
||||
margin: 0 29rpx 0 52rpx; |
||||
} |
||||
.search{ |
||||
margin-left: auto; |
||||
width: 132rpx; |
||||
height: 68rpx; |
||||
background: linear-gradient(39deg, #FF5100 0%, #FFA074 100%); |
||||
border-radius: 8rpx; |
||||
color: #fff; |
||||
} |
||||
.resource-tabs{ |
||||
width: 100%; |
||||
padding-top: 10rpx; |
||||
background: #fff; |
||||
border-bottom: 2rpx solid #EEEEEE; |
||||
padding-left: 20rpx; |
||||
} |
||||
.tab{ |
||||
width: 150rpx; |
||||
padding: 26rpx 0; |
||||
font-size: 32rpx; |
||||
color: #BFBFBF; |
||||
position: relative; |
||||
font-weight: 500; |
||||
text-align: center; |
||||
margin-left: 115rpx; |
||||
} |
||||
.tab::after{ |
||||
display: block; |
||||
content: ''; |
||||
width: 80rpx; |
||||
height: 8rpx; |
||||
border-radius: 8rpx; |
||||
background: #FF5100; |
||||
position: absolute; |
||||
bottom: 0rpx; |
||||
left: 50%; |
||||
margin-left: -40rpx; |
||||
opacity: 0; |
||||
transform:scaleX(0); |
||||
transition: all .2s ease,opacity .15s ease; |
||||
} |
||||
.tab-a{ |
||||
color: #FF5100; |
||||
} |
||||
.tab-a::after{ |
||||
opacity: 1; |
||||
transform: scaleX(1); |
||||
} |
||||
|
||||
.screen-box{ |
||||
height: 94rpx; |
||||
padding: 0 38rpx; |
||||
color: #666; |
||||
background: #fff; |
||||
margin-left: auto; |
||||
} |
||||
.screen-result{ |
||||
color: #FF5100; |
||||
} |
||||
.screen image{ |
||||
width: 27rpx; |
||||
height: 27rpx; |
||||
margin-left: 6rpx; |
||||
} |
||||
.supplyHall-box{ |
||||
width: 670rpx; |
||||
margin: 0 auto; |
||||
} |
||||
.resource-box{ |
||||
width: 100%; |
||||
} |
||||
/* 个人 */ |
||||
.personal-list{ |
||||
width: 100%; |
||||
border-radius: 12rpx; |
||||
background: #FFF; |
||||
position: relative; |
||||
margin-top: 34rpx; |
||||
padding-bottom: 32rpx; |
||||
} |
||||
.lable-img{ |
||||
width: 60rpx; |
||||
height: 32rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 12rpx; |
||||
} |
||||
.info-box{ |
||||
height: 214rpx; |
||||
padding-left: 20rpx; |
||||
} |
||||
.head-img{ |
||||
width: 64rpx; |
||||
height: 64rpx; |
||||
} |
||||
.user-name{ |
||||
height: 40rpx; |
||||
color: #1D1D1D; |
||||
margin: 0 10rpx 0 16rpx; |
||||
} |
||||
.user-address{ |
||||
width: 80rpx; |
||||
height: 28rpx; |
||||
line-height: 28rpx; |
||||
background: #FF5100; |
||||
border-radius: 16rpx; |
||||
font-size: 24rpx; |
||||
color: #FFFFFF; |
||||
text-align: center; |
||||
} |
||||
.user-price{ |
||||
position: absolute; |
||||
right: 58rpx; |
||||
height: 40rpx; |
||||
color: #FF5100; |
||||
font-weight: 600; |
||||
} |
||||
.supply-con{ |
||||
height: 40rpx; |
||||
color: #1D1D1D; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.tag{ |
||||
width: 112rpx; |
||||
height: 36rpx; |
||||
border-radius: 4rpx; |
||||
font-size: 20rpx; |
||||
margin-right: 8rpx; |
||||
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; |
||||
} |
||||
.time-end{ |
||||
height: 34rpx; |
||||
font-size: 24rpx; |
||||
color: #707070; |
||||
} |
||||
.todetails{ |
||||
width: 148rpx; |
||||
height: 44rpx; |
||||
line-height: 44rpx; |
||||
background: linear-gradient(141deg, #FFA782 0%, #FF6D31 100%); |
||||
border-radius: 8rpx; |
||||
position: absolute; |
||||
right: 18rpx; |
||||
bottom: 38rpx; |
||||
text-align: center; |
||||
color: #fff; |
||||
} |
||||
|
||||
/* 企业 */ |
||||
.enterprise-list{ |
||||
width: 670rpx; |
||||
background: #FFFFFF; |
||||
margin-top: 32rpx; |
||||
border-radius: 12rpx; |
||||
position: relative; |
||||
padding-bottom: 15rpx; |
||||
} |
||||
.enterprise-box{ |
||||
height: 208rpx; |
||||
padding-left: 20rpx; |
||||
} |
||||
.title-h{ |
||||
width: 456rpx; |
||||
height: 35rpx; |
||||
line-height: 35rpx; |
||||
font-size: 32rpx; |
||||
color: #1D1D1D; |
||||
font-weight: 600; |
||||
} |
||||
.enterprise-price{ |
||||
height: 30rpx; |
||||
line-height: 30rpx; |
||||
font-size: 28rpx; |
||||
color: #FF5100; |
||||
} |
||||
.head-logo{ |
||||
width: 72rpx; |
||||
height: 72rpx; |
||||
} |
||||
.time-end-t{ |
||||
position: absolute; |
||||
right: 15rpx; |
||||
height: 34rpx; |
||||
font-size: 24rpx; |
||||
color: #707070; |
||||
} |
||||
.enterprise-con{ |
||||
width: 100%; |
||||
height: 192rpx; |
||||
padding: 0 20rpx; |
||||
} |
||||
.enterprise-img{ |
||||
width: 150rpx; |
||||
height: 192rpx; |
||||
margin-right: 30rpx; |
||||
} |
||||
.content-right{ |
||||
width: 450rpx; |
||||
height:180rpx; |
||||
position: relative; |
||||
} |
||||
.e-price{ |
||||
height: 40rpx; |
||||
color: #FF5100; |
||||
font-weight: 600; |
||||
} |
||||
.mt20{ |
||||
padding-left: 20rpx; |
||||
} |
||||
|
||||
|
||||
|
||||
.mask-box{ |
||||
width: 100%; |
||||
height: 100vh; |
||||
background: rgba(0,0,0,.6); |
||||
position:fixed; |
||||
top: 0;/* #ifdef H5 */ |
||||
top: calc(88rpx + constant(safe-area-inset-top)); |
||||
top: calc(88rpx + env(safe-area-inset-top));/* #endif */ |
||||
left: 0; |
||||
z-index: 9999; |
||||
|
||||
} |
||||
.screen-dialog-box{ |
||||
width: 602rpx; |
||||
height: 100%; |
||||
/* padding-bottom: 160rpx; */ |
||||
overflow-y: scroll; |
||||
background-color: #fff; |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0rpx; |
||||
animation: move 200ms ease; |
||||
} |
||||
/* .move{ |
||||
right: 0rpx; |
||||
} */ |
||||
@keyframes move{ |
||||
0%{ |
||||
transform: translateX(800rpx); |
||||
} |
||||
100%{ |
||||
transform: translateX(0rpx); |
||||
} |
||||
} |
||||
.screen-item{ |
||||
width: 100%; |
||||
padding: 0 38rpx; |
||||
padding-bottom: 22rpx; |
||||
border-bottom: 2rpx solid #EEEEEE; |
||||
} |
||||
.screen-title{ |
||||
font-size: 24rpx; |
||||
color: #000; |
||||
margin-bottom: 32rpx; |
||||
} |
||||
.screen-item{ |
||||
padding-top: 40rpx; |
||||
} |
||||
|
||||
.screen-item .item{ |
||||
width: 162rpx; |
||||
height: 48rpx; |
||||
line-height: 48rpx; |
||||
text-align: center; |
||||
font-size: 24rpx; |
||||
color: #666666; |
||||
background: #F6F6F6; |
||||
border-radius: 4rpx; |
||||
margin-bottom: 20rpx; |
||||
margin-right: 20rpx; |
||||
} |
||||
.screen-item .item:nth-child(3n){ |
||||
margin-right: 0; |
||||
} |
||||
.screen-item .item-active{ |
||||
border: 2rpx solid #FF6E33; |
||||
color: #FE7D26; |
||||
background: #FDEFE6; |
||||
} |
||||
.across-line{ |
||||
width: 44rpx; |
||||
height: 2rpx; |
||||
background: #ACABAB; |
||||
margin: 0 12rpx; |
||||
} |
||||
.low-price{ |
||||
width: 228rpx; |
||||
height: 60rpx; |
||||
background: #F6F5F5; |
||||
border-radius: 4rpx; |
||||
} |
||||
.low-price input{ |
||||
width: 100%; |
||||
height: 100%; |
||||
text-align: center; |
||||
} |
||||
.fz20{ |
||||
font-size: 20rpx; |
||||
color: #393939; |
||||
} |
||||
.submit-box{ |
||||
width: 602rpx; |
||||
height: 100rpx; |
||||
box-shadow: 2rpx 0px 12rpx rgba(0, 0, 0, 0.16); |
||||
position: fixed; |
||||
bottom: 0; |
||||
right: 0; |
||||
} |
||||
.submit-box .btn{ |
||||
width: 50%; |
||||
height: 100%; |
||||
line-height: 100rpx; |
||||
text-align: center; |
||||
} |
||||
.submit-box .finish{ |
||||
background: #FF660C; |
||||
color: #fff; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,145 @@
|
||||
<template> |
||||
<!-- sdsd 345 --> |
||||
<view class="activityCenter-page"> |
||||
<image src="/static/images/center-img.png" class="top-bg"></image> |
||||
<view class="page-title" :style="'top:' + menuTop + 'px;height:' + menuHeight + 'px;line-height: ' + menuHeight + 'px;'">活动中心</view> |
||||
<view class="activity-box"> |
||||
<view class="activity-list acea-row" v-for="(item,index) in 3"> |
||||
<image src="../../../static/images/business-img1.png" mode="" class="act-img"></image> |
||||
<view class="act-con acea-row row-column-between"> |
||||
<view class="title">云生态会员招募开始</view> |
||||
<view class="act-time acea-row row-middle"> |
||||
<image src="../../../static/images/act-time.png" mode="" class="time-img"></image> |
||||
<view>12-23 00:00至11-25 23:00</view> |
||||
</view> |
||||
<view class="act-adress acea-row"> |
||||
<image src="../../../static/images/act-address.png" mode="" class="address-img"></image> |
||||
<view class="title-line">武汉市江夏区文化大道288号斤斤计较经济放假安排发金额为吉安打了个</view> |
||||
</view> |
||||
<view class="acea-row row-between-wrapper act-price"> |
||||
<text class="act-p">￥888.00</text> |
||||
<text class="act-i">进行中</text> |
||||
<view class="enter-btn">立即报名</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
const app = getApp(); |
||||
export default { |
||||
data() { |
||||
return { |
||||
menuHeight: app.globalData.menuHeight, |
||||
menuTop: app.globalData.menuTop, |
||||
}; |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
.activityCenter-page{ |
||||
width: 100%; |
||||
height: auto; |
||||
background: #fff; |
||||
position: relative; |
||||
} |
||||
.top-bg{ |
||||
width: 100%; |
||||
height: 1210rpx; |
||||
} |
||||
.page-title{ |
||||
width: 100%; |
||||
color: #fff; |
||||
text-align: center; |
||||
position: absolute; |
||||
} |
||||
.activity-box{ |
||||
width: 100%; |
||||
height: auto; |
||||
background: #FFF; |
||||
position: absolute; |
||||
top: 538rpx; |
||||
border-radius: 30rpx 30rpx 0 0; |
||||
padding: 32rpx 40rpx 0 40rpx; |
||||
margin-bottom: 218rpx; |
||||
} |
||||
|
||||
.activity-list{ |
||||
border-bottom: 1px solid #EEEEEE; |
||||
padding: 20rpx 0; |
||||
.act-img{ |
||||
width: 178rpx; |
||||
height: 236rpx; |
||||
margin-right: 20rpx; |
||||
} |
||||
.act-con{ |
||||
width: 450rpx; |
||||
height: 236rpx; |
||||
padding: 5rpx 0; |
||||
.title{ |
||||
width: 345rpx; |
||||
height: 40rpx; |
||||
font-size: 28rpx; |
||||
font-weight: 600; |
||||
line-height: 35rpx; |
||||
color: #1D1D1D; |
||||
} |
||||
.act-time{ |
||||
width: 345rpx; |
||||
font-size: 24rpx; |
||||
color: #191919; |
||||
.time-img{ |
||||
width: 18rpx; |
||||
height: 22rpx; |
||||
line-height: 34rpx; |
||||
margin: 0rpx 16rpx 0 0; |
||||
} |
||||
} |
||||
.act-adress{ |
||||
width: 345rpx; |
||||
height: 67rpx; |
||||
.address-img{ |
||||
width: 19rpx; |
||||
height: 23rpx; |
||||
margin: 7rpx 14rpx 40rpx 0; |
||||
} |
||||
.title-line{ |
||||
width: 308rpx; |
||||
height: 68rpx; |
||||
font-size: 24rpx; |
||||
font-weight: 500; |
||||
color: #191919; |
||||
word-wrap : break-word; |
||||
overflow:hidden; |
||||
} |
||||
} |
||||
.act-price{ |
||||
width: 100%; |
||||
.act-i { |
||||
font-size: 24rpx; |
||||
color: #FF5A0E; |
||||
font-weight: 600; |
||||
} |
||||
.act-p{ |
||||
font-size: 32rpx; |
||||
color: #2A2B2B; |
||||
font-weight: 600; |
||||
} |
||||
.enter-btn{ |
||||
width: 138rpx; |
||||
height: 40rpx; |
||||
line-height: 40rpx; |
||||
text-align: center; |
||||
background: linear-gradient(39deg, #FF5A0D 0%, #FFAC85 100%); |
||||
border-radius: 26rpx; |
||||
color: #fff; |
||||
font-size: 24rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
@ -1,144 +1,159 @@
|
||||
|
||||
<template> |
||||
<view class="article-box"> |
||||
<view class="article-header"> |
||||
<view class="headline">{{detail.title}}</view> |
||||
<view class="acea-row"> |
||||
<view class="header-img"><image :src="detail.authorLogo"></image></view> |
||||
<view class=""> |
||||
<view class="release-auth">{{detail.author}}</view> |
||||
<view class="acea-row"> |
||||
<view class="fz24 acea-row row-middle"> |
||||
<image src="../../../static/images/eye.png" class="eye-icon"></image> |
||||
<text>{{detail.visit}}</text> |
||||
</view> |
||||
<view class="fz24">{{detail.formatTime}}</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="article-box"> |
||||
<view class="article-header"> |
||||
<view class="headline">{{ detail.title }}</view> |
||||
<view class="acea-row"> |
||||
<view class="header-img"><image :src="detail.authorLogo"></image></view> |
||||
<view class=""> |
||||
<view class="release-auth">{{ detail.author }}</view> |
||||
<view class="acea-row"> |
||||
<view class="fz24 acea-row row-middle"> |
||||
<image |
||||
src="../../../static/images/eye.png" |
||||
class="eye-icon" |
||||
></image> |
||||
<text>{{ detail.visit }}</text> |
||||
</view> |
||||
<view class="fz24">{{ detail.formatTime }}</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="content"> |
||||
<view class="explain-box">转载声明：本文由云快讯收录，观点仅代表作者本人。不代表云快讯立场，云快讯不对所包含的准确性，可靠性或完整性提供任何明示，请自行承担任何责任。</view> |
||||
<rich-text :nodes="detail.content"></rich-text> |
||||
</view> |
||||
|
||||
</view> |
||||
<view class="content"> |
||||
<view class="explain-box" |
||||
>转载声明：本文由云快讯收录，观点仅代表作者本人。不代表云快讯立场，云快讯不对所包含的准确性，可靠性或完整性提供任何明示，请自行承担任何责任。</view |
||||
> |
||||
<rich-text :nodes="detail.content"></rich-text> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { getArticleDetail } from "@/api/home"; |
||||
export default{ |
||||
data() { |
||||
return{ |
||||
id: this.id, |
||||
detail: {} |
||||
} |
||||
}, |
||||
onShareAppMessage() { |
||||
return { |
||||
title: this.detail.title, |
||||
imageUrl: this.detail.imageInput, |
||||
path: '/pages/life/articleDetail/index?id=' + this.detail.id, |
||||
success(res) { |
||||
uni.showToast({ |
||||
title: '分享成功', |
||||
}) |
||||
}, |
||||
fail(res) { |
||||
uni.showToast({ |
||||
title: '分享失败', |
||||
icon: 'none', |
||||
}) |
||||
}, |
||||
} |
||||
}, |
||||
methods:{ |
||||
getArticleDetail(){ |
||||
getArticleDetail({id: this.id}).then((res)=>{ |
||||
res.data.content= this.formatRichText(res.data.content) |
||||
this.detail = res.data |
||||
}) |
||||
}, |
||||
formatRichText(html){ |
||||
let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){ |
||||
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, ''); |
||||
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, ''); |
||||
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, ''); |
||||
return match; |
||||
}); |
||||
newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){ |
||||
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;'); |
||||
return match; |
||||
}); |
||||
newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'); |
||||
return newContent; |
||||
} |
||||
}, |
||||
onLoad: function (option) { |
||||
this.id= this.$yroute.query.id; |
||||
this.getArticleDetail() |
||||
} |
||||
|
||||
|
||||
} |
||||
export default { |
||||
data() { |
||||
return { |
||||
id: this.id, |
||||
detail: {}, |
||||
}; |
||||
}, |
||||
onShareAppMessage() { |
||||
return { |
||||
title: this.detail.title, |
||||
imageUrl: this.detail.imageInput, |
||||
path: "/pages/life/articleDetail/index?id=" + this.detail.id, |
||||
success(res) { |
||||
uni.showToast({ |
||||
title: "分享成功", |
||||
}); |
||||
}, |
||||
fail(res) { |
||||
uni.showToast({ |
||||
title: "分享失败", |
||||
icon: "none", |
||||
}); |
||||
}, |
||||
}; |
||||
}, |
||||
methods: { |
||||
getArticleDetail() { |
||||
getArticleDetail({ id: this.id }).then((res) => { |
||||
res.data.content = this.formatRichText(res.data.content); |
||||
this.detail = res.data; |
||||
}); |
||||
}, |
||||
formatRichText(html) { |
||||
let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) { |
||||
match = match |
||||
.replace(/style="[^"]+"/gi, "") |
||||
.replace(/style='[^']+'/gi, ""); |
||||
match = match |
||||
.replace(/width="[^"]+"/gi, "") |
||||
.replace(/width='[^']+'/gi, ""); |
||||
match = match |
||||
.replace(/height="[^"]+"/gi, "") |
||||
.replace(/height='[^']+'/gi, ""); |
||||
return match; |
||||
}); |
||||
newContent = newContent.replace( |
||||
/style="[^"]+"/gi, |
||||
function (match, capture) { |
||||
match = match |
||||
.replace(/width:[^;]+;/gi, "max-width:100%;") |
||||
.replace(/width:[^;]+;/gi, "max-width:100%;"); |
||||
return match; |
||||
} |
||||
); |
||||
newContent = newContent.replace( |
||||
/\<img/gi, |
||||
'<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"' |
||||
); |
||||
return newContent; |
||||
}, |
||||
}, |
||||
onLoad: function (option) { |
||||
this.id = this.$yroute.query.id; |
||||
this.getArticleDetail(); |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
.article-box{ |
||||
width: 100%; |
||||
min-height: 100vh; |
||||
.article-header{ |
||||
padding: 0 40rpx; |
||||
} |
||||
.headline{ |
||||
font-size: 32rpx; |
||||
color: #333333; |
||||
padding-top: 20rpx; |
||||
margin-bottom: 30rpx; |
||||
font-weight: 500; |
||||
} |
||||
.header-img{ |
||||
width: 72rpx; |
||||
height: 72rpx; |
||||
margin-right: 20rpx; |
||||
image{ |
||||
width: 100%; |
||||
height: 100%; |
||||
border-radius: 25px; |
||||
} |
||||
} |
||||
.release-auth{ |
||||
font-size: 32rpx; |
||||
color: #333; |
||||
line-height: 44rpx; |
||||
margin-bottom: 6rpx; |
||||
} |
||||
.fz24{ |
||||
font-size: 24rpx; |
||||
color: #707070; |
||||
margin-right: 20rpx; |
||||
} |
||||
.eye-icon{ |
||||
width: 24rpx; |
||||
height: 24rpx; |
||||
margin-right: 8rpx; |
||||
} |
||||
.content{ |
||||
width: 100%; |
||||
padding: 24rpx; |
||||
overflow: hidden; |
||||
} |
||||
.explain-box{ |
||||
width: 100%; |
||||
padding: 12rpx 34rpx; |
||||
background: #E3E3E3; |
||||
color: #999; |
||||
font-size: 24rpx; |
||||
line-height: 38rpx; |
||||
border-radius: 12rpx; |
||||
margin-bottom: 12rpx; |
||||
} |
||||
} |
||||
|
||||
.article-box { |
||||
width: 100%; |
||||
min-height: 100vh; |
||||
.article-header { |
||||
padding: 0 40rpx; |
||||
} |
||||
.headline { |
||||
font-size: 32rpx; |
||||
color: #333333; |
||||
padding-top: 20rpx; |
||||
margin-bottom: 30rpx; |
||||
font-weight: 500; |
||||
} |
||||
.header-img { |
||||
width: 72rpx; |
||||
height: 72rpx; |
||||
margin-right: 20rpx; |
||||
image { |
||||
width: 100%; |
||||
height: 100%; |
||||
border-radius: 25px; |
||||
} |
||||
} |
||||
.release-auth { |
||||
font-size: 32rpx; |
||||
color: #333; |
||||
line-height: 44rpx; |
||||
margin-bottom: 6rpx; |
||||
} |
||||
.fz24 { |
||||
font-size: 24rpx; |
||||
color: #707070; |
||||
margin-right: 20rpx; |
||||
} |
||||
.eye-icon { |
||||
width: 24rpx; |
||||
height: 24rpx; |
||||
margin-right: 8rpx; |
||||
} |
||||
.content { |
||||
width: 100%; |
||||
padding: 24rpx; |
||||
overflow: hidden; |
||||
} |
||||
.explain-box { |
||||
width: 100%; |
||||
padding: 12rpx 34rpx; |
||||
background: #e3e3e3; |
||||
color: #999; |
||||
font-size: 24rpx; |
||||
line-height: 38rpx; |
||||
border-radius: 12rpx; |
||||
margin-bottom: 12rpx; |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,31 @@
|
||||
<template> |
||||
<swiper class="swiper-box" autoplay="true" indicator-dots='true' indicator-color='#B17815' indicator-active-color='#FFB93E' > |
||||
<swiper-item> |
||||
<image src="../../../static/images/learnMore1.png"></image> |
||||
</swiper-item> |
||||
<swiper-item> |
||||
<image src="../../../static/images/learnMore2.png"></image> |
||||
</swiper-item> |
||||
<swiper-item> |
||||
<image src="../../../static/images/learnMore3.png"></image> |
||||
</swiper-item> |
||||
<swiper-item> |
||||
<image src="../../../static/images/learnMore4.png"></image> |
||||
</swiper-item> |
||||
</swiper> |
||||
</template> |
||||
|
||||
<script> |
||||
</script> |
||||
|
||||
<style> |
||||
.swiper-box{ |
||||
width: 100%; |
||||
height: 100vh; |
||||
background-color: #070604; |
||||
} |
||||
.swiper-box image{ |
||||
width: 100%; |
||||
height: 100vh; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,378 @@
|
||||
<template> |
||||
<view class="information-box"> |
||||
<view class="search-box acea-row row-middle" > |
||||
<image src="../../../static/images/search-icon.png" mode=""></image> |
||||
<input type="text" value="" placeholder="请输入相关关键词"/> |
||||
<view class="search acea-row row-center-wrapper">搜一下</view> |
||||
</view> |
||||
<view class="vote-box"> |
||||
<view class="news"> |
||||
<view class="news-title-h">武汉12月底双层公交车将全面下线</view> |
||||
<view class="news-title-s">趁着有时间和你爱的人再去回味一下,那你认为有下线的必要吗？</view> |
||||
</view> |
||||
<view class="vote"> |
||||
|
||||
</view> |
||||
</view> |
||||
<scroll-view class="scroll-view_N" scroll-x="true" > |
||||
<view class="rotaion" v-for="(item,index) in 7" :key="index"> |
||||
<view class="acea-row row-center"> |
||||
<image src="../../../static/images/collect.png" mode=""></image> |
||||
<view class="rotaion-h">今日大事</view> |
||||
<view class="rotaion-s">每日热点资讯</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</scroll-view> |
||||
<!-- 最新资讯 --> |
||||
<view class="newInfo-box"> |
||||
<image src="../../../static/images/newInfo.png" mode="" class="newInfo-title-img"></image> |
||||
<view class="newInfo" > |
||||
<view class="modular acea-row row-between" v-for="(item,index) in 3" :key="index"> |
||||
<view class="acea-row title" > |
||||
<view class="modular-h">海鸥出行将大巴车市场带入平台化阶段，提高包车出行效率</view> |
||||
<view class="title-l acea-row row-between"> |
||||
<view>云资讯</view> |
||||
<view>1小时前</view> |
||||
<view class="acea-row row-middle">203 |
||||
<image src="../../../static/images/eye.png" mode="" ></image> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<image src="../../../static/images/home/top-bg.png" mode="" ></image> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<!-- 热点精选 --> |
||||
<view class="hotspot-box"> |
||||
<image src="../../../static/images/user/hotspot.png" mode="" class="title-h-img"></image> |
||||
<scroll-view class="scroll-view_H acea-row" scroll-x="true" > |
||||
<view class="slide-box" v-for="(item,index) in 3" :key="index"> |
||||
<image src="../../../static/images/home/top-bg.png" mode=""></image> |
||||
<view class="hotspot-con"> |
||||
<view class="hotspot-icon">热点</view> |
||||
<view class="hotspot-title-h">禅易云生态：加入云生态，共建万亿私域资源圈获取海量资源与福利。</view> |
||||
</view> |
||||
</view> |
||||
</scroll-view> |
||||
</view> |
||||
<!-- 值得关注 --> |
||||
<view class="follow-box"> |
||||
<image src="../../../static/images/follow-title.png" mode="" class="title-h-img"></image> |
||||
<view class="follow-con" v-for="(item,index) in 3" :key="index"> |
||||
<view class="follow-top acea-row row-between"> |
||||
<view class="acea-row follow-title" > |
||||
<view class="follow-h">2021中国酒店与商用厨具行业品牌盛会</view> |
||||
<view class="follow-title-l acea-row row-between"> |
||||
<view>云资讯</view> |
||||
<view>1小时前</view> |
||||
<view class="acea-row row-middle">203 |
||||
<image src="../../../static/images/eye.png" mode="" ></image> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<image src="../../../static/images/home/top-bg.png" mode="" ></image> |
||||
</view> |
||||
<view class="follow-bottom acea-row row-middle"> |
||||
<image src="../../../static/images/collect.png" mode=""></image> |
||||
<view class="follow-title-b"> |
||||
<view class="title-s">云咨詢</view> |
||||
<view class="title-con">每天发布商业/生活等相关内容...</view> |
||||
</view> |
||||
<view class="follow-btn">关注+</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
</script> |
||||
|
||||
<style> |
||||
.information-box{ |
||||
width: 100%; |
||||
height: 100vh; |
||||
position: relative; |
||||
} |
||||
.search-box{ |
||||
width: 670rpx; |
||||
height: 68rpx; |
||||
border: 2rpx solid #FF5100; |
||||
border-radius: 8rpx; |
||||
margin: 52rpx auto; |
||||
font-size: 28rpx; |
||||
position: relative; |
||||
} |
||||
.search-box image{ |
||||
width: 35rpx; |
||||
height: 35rpx; |
||||
margin: 0 29rpx 0 52rpx; |
||||
} |
||||
.search{ |
||||
position: absolute; |
||||
right: 0; |
||||
width: 132rpx; |
||||
height: 68rpx; |
||||
background: linear-gradient(39deg, #FF5100 0%, #FFA074 100%); |
||||
border-radius: 8rpx; |
||||
color: #fff; |
||||
|
||||
} |
||||
.vote-box{ |
||||
width: 670rpx; |
||||
height: 358rpx; |
||||
background: #FFFFFF; |
||||
box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16); |
||||
border-radius: 16rpx; |
||||
margin: 0 auto; |
||||
position: relative; |
||||
} |
||||
.news{ |
||||
width: 100%; |
||||
height: 248rpx; |
||||
background: #D2D2D2; |
||||
border-radius: 16rpx 16rpx 0 0; |
||||
color: #FFF; |
||||
position: absolute; |
||||
padding-left: 42rpx; |
||||
} |
||||
.news-title-h{ |
||||
font-size: 28rpx; |
||||
position: absolute; |
||||
bottom: 54rpx; |
||||
} |
||||
.news-title-s{ |
||||
font-size: 20rpx; |
||||
position: absolute; |
||||
bottom: 18rpx; |
||||
} |
||||
.vote{ |
||||
width: 100%; |
||||
height: 110rpx; |
||||
position: absolute; |
||||
bottom: 0; |
||||
border: 1rpx solid #000000; |
||||
} |
||||
.scroll-view_N{ |
||||
width: 100%; |
||||
height: 228rpx; |
||||
margin: 30rpx 0 0 30rpx; |
||||
white-space: nowrap; |
||||
} |
||||
.rotaion{ |
||||
width: 168rpx; |
||||
padding: 32rpx 0 16rpx 0; |
||||
background: #FFFFFF; |
||||
box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.16); |
||||
border-radius: 16rpx; |
||||
margin: 10rpx 22rpx 20rpx 10rpx; |
||||
display: inline-block; |
||||
} |
||||
.rotaion image{ |
||||
width: 80rpx; |
||||
height: 80rpx; |
||||
background: #FF6D2A; |
||||
border-radius: 50%; |
||||
} |
||||
.rotaion-h{ |
||||
height: 34rpx; |
||||
font-size: 24rpx; |
||||
color: #333333; |
||||
margin: 12rpx 0 4rpx 0; |
||||
font-weight: 600; |
||||
} |
||||
.rotaion-s{ |
||||
height: 26rpx; |
||||
font-size: 18rpx; |
||||
color: #9D9D9D; |
||||
} |
||||
/* 最新资讯 */ |
||||
.newInfo-box{ |
||||
margin: 44rpx 0 0rpx 0; |
||||
} |
||||
.newInfo-title-img{ |
||||
width: 160rpx; |
||||
height: 52rpx; |
||||
margin: 0 0 18rpx 38rpx; |
||||
} |
||||
.newInfo{ |
||||
width: 100%; |
||||
height: 528rpx; |
||||
border-top: 2rpx solid #EFEFEF; |
||||
} |
||||
.modular{ |
||||
width: 100%; |
||||
height: 176rpx; |
||||
border-bottom: 2rpx solid #EFEFEF; |
||||
padding: 20rpx 40rpx 22rpx 40rpx; |
||||
} |
||||
|
||||
.modular-h{ |
||||
width: 392rpx; |
||||
height: 80rpx; |
||||
font-size: 28rpx; |
||||
color: #4A4A4A; |
||||
font-weight: 600; |
||||
} |
||||
.modular image{ |
||||
width: 204rpx; |
||||
height: 134rpx; |
||||
} |
||||
.title{ |
||||
width: 392rpx; |
||||
height: 134rpx; |
||||
} |
||||
.title-l{ |
||||
width: 310rpx; |
||||
height: 34rpx; |
||||
font-size: 24rpx; |
||||
color: #707070; |
||||
} |
||||
.title-l image{ |
||||
width: 24rpx; |
||||
height: 24rpx; |
||||
margin-left: 5rpx; |
||||
} |
||||
/* 热点精选 */ |
||||
.hotspot-box{ |
||||
width: 100%; |
||||
height: 456rpx; |
||||
} |
||||
.title-h-img{ |
||||
width: 162rpx; |
||||
height: 62rpx; |
||||
margin: 32rpx 0 5rpx 40rpx; |
||||
} |
||||
.scroll-view_H{ |
||||
width: 100%; |
||||
height: 344rpx; |
||||
white-space: nowrap; |
||||
} |
||||
.scroll-view_H image{ |
||||
width: 670rpx; |
||||
height: 344rpx; |
||||
border-radius: 10rpx; |
||||
position: absolute; |
||||
} |
||||
.slide-box{ |
||||
position: relative; |
||||
width: 670rpx; |
||||
height: 100%; |
||||
display: inline-block; |
||||
margin-right: 16rpx; |
||||
} |
||||
.hotspot-con{ |
||||
width: 588rpx; |
||||
height: 130rpx; |
||||
bottom: 34rpx; |
||||
left: 24rpx; |
||||
position: absolute; |
||||
} |
||||
.hotspot-icon{ |
||||
width: 72rpx; |
||||
height: 32rpx; |
||||
background: #FE3737; |
||||
border-radius: 12rpx 2rpx 12rpx 0; |
||||
position: absolute; |
||||
font-size: 22rpx; |
||||
color: #fff; |
||||
text-align: center; |
||||
|
||||
} |
||||
.hotspot-title-h{ |
||||
width: 588rpx; |
||||
height: 80rpx; |
||||
font-size: 28rpx; |
||||
color: #FFFFFF; |
||||
position: absolute; |
||||
bottom: 0; |
||||
white-space:pre-wrap; |
||||
} |
||||
/* 值得关注 */ |
||||
.follow-box{ |
||||
width: 100%; |
||||
height: 950rpx; |
||||
margin-bottom: 50rpx; |
||||
} |
||||
.follow-con{ |
||||
width: 670rpx; |
||||
height: 250rpx; |
||||
margin: 0 auto; |
||||
background: #FFFFFF; |
||||
box-shadow: 0rpx 4rpx 10rpx rgba(0, 0, 0, 0.16); |
||||
border-radius: 16rpx; |
||||
margin-bottom: 32rpx; |
||||
} |
||||
.follow-top{ |
||||
width: 100%; |
||||
height: 170rpx; |
||||
padding: 20rpx 20rpx 26rpx 20rpx; |
||||
border-bottom: 1rpx solid #DCDCDC; |
||||
} |
||||
.follow-top image{ |
||||
width: 232rpx; |
||||
height: 130rpx; |
||||
border-radius: 16rpx; |
||||
} |
||||
.follow-title{ |
||||
width: 370rpx; |
||||
height: 100%; |
||||
} |
||||
.follow-h{ |
||||
width: 370rpx; |
||||
height: 80rpx; |
||||
font-size: 28rpx; |
||||
color: #000000; |
||||
font-weight: 600; |
||||
} |
||||
.follow-title-l{ |
||||
width: 250rpx; |
||||
height: 28rpx; |
||||
font-size: 20rpx; |
||||
color: #707070; |
||||
} |
||||
.follow-title-l image{ |
||||
width: 24rpx; |
||||
height: 24rpx; |
||||
margin-left: 5rpx; |
||||
} |
||||
.follow-bottom{ |
||||
width: 100%; |
||||
height: 80rpx; |
||||
padding: 12rpx 20rpx 16rpx 20rpx; |
||||
} |
||||
.follow-bottom image{ |
||||
width: 52rpx; |
||||
height: 52rpx; |
||||
border-radius: 50%; |
||||
margin-right: 8rpx; |
||||
} |
||||
.follow-title-b{ |
||||
|
||||
} |
||||
|
||||
.title-s{ |
||||
height: 28rpx; |
||||
font-size: 20rpx; |
||||
margin-bottom: 6rpx; |
||||
font-weight: 600; |
||||
} |
||||
.title-con{ |
||||
height: 22rpx; |
||||
font-size: 16rpx; |
||||
color: #707070; |
||||
} |
||||
|
||||
.follow-btn{ |
||||
width: 136rpx; |
||||
height: 40rpx; |
||||
background: linear-gradient(39deg, #FF5A0D 0%, #FFAC85 100%); |
||||
border-radius: 26rpx; |
||||
font-size: 28rpx; |
||||
color: #fff; |
||||
text-align: center; |
||||
position: absolute; |
||||
right: 60rpx; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,431 @@
|
||||
<template> |
||||
<!--pages/release/index.wxml--> |
||||
<view class="release-page"> |
||||
<view class="guid-box acea-row"> |
||||
<view class="guid-title">发布指南</view> |
||||
<image src="../../static/images/handbook.png" class="handbook-img"></image> |
||||
<view class="title-s">详细阅读有助于让你快速了解云生态发布规则，更准确地发布内容</view> |
||||
<image src="../../static/images/arror-right.png" class="arror-r"></image> |
||||
</view> |
||||
<view class="auth-btn-box acea-row row-column row-middle"> |
||||
<view class="auth-btn acea-row row-middle" @tap="toCompanyAuth" v-if="authStatus == 0 || authStatus == 3"> |
||||
<view><image src="/static/images/user/person.png" class="auth-headimg person-img"></image></view> |
||||
<view> |
||||
<view class="auth-title">个人认证</view> |
||||
<view class="auth-title-h">个人认证后可发布资源项目及需求</view> |
||||
</view> |
||||
<image src="/static/images/home/arrow-r.png" class="tojump"></image> |
||||
</view> |
||||
<view class="auth-btn acea-row row-middle" @tap="toPersonlAuth" v-if="authStatus == 0 || authStatus == 3"> |
||||
<view><image src="/static/images/user/business.png" class="auth-headimg business-img"></image></view> |
||||
<view> |
||||
<view class="auth-title">企业认证</view> |
||||
<view class="auth-title-h">企业认证后可发布资源项目及需求，展示企业相关服务</view> |
||||
</view> |
||||
<image src="/static/images/home/arrow-r.png" class="tojump"></image> |
||||
</view> |
||||
<view class="auth-btn acea-row row-middle" @tap="toPersonlAuth" v-if="authStatus == 0 || authStatus == 3"> |
||||
<view><image src="/static/images/user/investor.png" class="auth-headimg investor-img"></image></view> |
||||
<view> |
||||
<view class="auth-title">投资方认证</view> |
||||
<view class="auth-title-h">投资方认证后可查看项目方发布项目详情</view> |
||||
</view> |
||||
<image src="/static/images/home/arrow-r.png" class="tojump"></image> |
||||
</view> |
||||
</view> |
||||
<view :class="'posi ' + (authStatus == 1 || authStatus == 2 ? 'top30' : '')"> |
||||
<view class="tips-box"> |
||||
<view class="tips acea-row-nowrap row-middle" v-if="authStatus == 0 || authStatus == 3"> |
||||
<!-- <view class="icon">!</view> --> |
||||
<view>注：完成企业认证后可以发布资源及需求，个人认证后只可发布需求</view> |
||||
</view> |
||||
<view class="tips acea-row row-middle" v-if="authStatus == 0"> |
||||
<view class="icon">!</view> |
||||
<view>请先完成认证</view> |
||||
</view> |
||||
<view class="tips acea-row row-middle" v-if="authStatus == 1"> |
||||
<view class="icon">!</view> |
||||
<view>{{authType == 1 ? '企业信息审核中，请耐心等待！' : '个人信息审核中， 请耐心等待'}}</view> |
||||
</view> |
||||
<view class="tips acea-row row-middle" v-if="authStatus == 2"> |
||||
<view class="icon">!</view> |
||||
<view>{{authType == 1 ? '企业信息审核通过，可以发布资源和需求！' : '个人信息审核通过，可以发布需求'}}</view> |
||||
</view> |
||||
<view class="tips acea-row row-middle" v-if="authStatus == 3"> |
||||
<view class="icon">!</view> |
||||
<view>{{authType == 1 ? '企业信息未审核通过， 请重新提交审核信息！' : '个人信息未审核通过， 请重新提交审核信息！'}}</view> |
||||
<view>未通过理由：{{reason}}</view> |
||||
</view> |
||||
</view> |
||||
<view class="btn-box "> |
||||
<view :class="'btn ' + (authStatus == 2 && authType == 1 ? 'auth' : '' )" @tap="toResources" class="acea-row row-middle btn-res"> |
||||
<image :class="authStatus == 2 && authType == 1 ? '' : 'default'" src="/static/images/auth-icon1.png"></image> |
||||
<view> |
||||
<view class="tip">发布资源</view> |
||||
<view class="tip-s">我要发布我的资源展示在供应广场</view> |
||||
</view> |
||||
</view> |
||||
<view :class="'btn ' + (authStatus == 2 ? 'auth' : '' )" @tap="toNeeds" class="acea-row row-middle btn-need"> |
||||
<image :class="authStatus == 2 ? '' : 'default'" src="/static/images/auth-icon2.png"></image> |
||||
<view> |
||||
<view class="tip">发布资源</view> |
||||
<view class="tip-s">我要发布我的资源展示在供应广场</view> |
||||
</view> |
||||
</view> |
||||
<view :class="'btn ' + (authStatus == 2 ? 'auth' : '' )" @tap="toNeeds" class="acea-row row-middle btn-demo"> |
||||
<image :class="authStatus == 2 ? '' : 'default'" src="/static/images/auth-icon3.png"></image> |
||||
<view> |
||||
<view class="tip">发布项目</view> |
||||
<view class="tip-s">发布优质项目精准推荐投资方</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="close" @tap="back"><image src="/static/images/close-icon.png"></image></view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
// pages/release/index.js |
||||
const app = getApp(); |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
userInfo: {}, |
||||
authStatus: 0, |
||||
authType: null, |
||||
completeState: null, |
||||
authInfo: {} |
||||
}; |
||||
}, |
||||
|
||||
components: {}, |
||||
props: {}, |
||||
|
||||
/** |
||||
* 生命周期函数--监听页面加载 |
||||
*/ |
||||
onLoad: function (options) {}, |
||||
|
||||
/** |
||||
* 生命周期函数--监听页面显示 |
||||
*/ |
||||
onShow: function () { |
||||
this.isAuthentication(); |
||||
}, |
||||
|
||||
/** |
||||
* 生命周期函数--监听页面隐藏 |
||||
*/ |
||||
onHide: function () {}, |
||||
|
||||
/** |
||||
* 生命周期函数--监听页面卸载 |
||||
*/ |
||||
onUnload: function () {}, |
||||
|
||||
/** |
||||
* 页面相关事件处理函数--监听用户下拉动作 |
||||
*/ |
||||
onPullDownRefresh: function () {}, |
||||
|
||||
/** |
||||
* 页面上拉触底事件的处理函数 |
||||
*/ |
||||
onReachBottom: function () {}, |
||||
|
||||
/** |
||||
* 用户点击右上角分享 |
||||
*/ |
||||
onShareAppMessage: function () {}, |
||||
methods: { |
||||
back() { |
||||
let pages = getCurrentPages(); |
||||
console.log(pages) |
||||
// let pagePath = '/' + pages[pages.length - 2].route; |
||||
// if(pagePath){ |
||||
// uni.navigateTo({ |
||||
// url: pagePath |
||||
// }); |
||||
// } else{ |
||||
// uni.switchTab({ |
||||
// url: '/pages/home/index' |
||||
// }); |
||||
// } |
||||
uni.switchTab({ |
||||
url: '/pages/user/index' |
||||
}); |
||||
}, |
||||
|
||||
toPersonlAuth() { |
||||
if (this.authStatus == 0) { |
||||
uni.navigateTo({ |
||||
url: '/pages/release/personAuth/index' |
||||
}); |
||||
} else if (this.authStatus == 3) { |
||||
let authInfo = encodeURIComponent(JSON.stringify(this.authInfo)); |
||||
uni.navigateTo({ |
||||
url: '/pages/release/personAuth/index?authInfo=' + authInfo |
||||
}); |
||||
} else if (this.authStatus == 1) { |
||||
uni.showToast({ |
||||
title: '认证申请审核中，请等待！', |
||||
icon: 'none' |
||||
}); |
||||
} |
||||
}, |
||||
|
||||
toCompanyAuth() { |
||||
if (this.authStatus == 0) { |
||||
uni.navigateTo({ |
||||
url: '/pages/release/companyAuth/index' |
||||
}); |
||||
} else if (this.authStatus == 3) { |
||||
let authInfo = encodeURIComponent(JSON.stringify(this.authInfo)); |
||||
uni.navigateTo({ |
||||
url: '/pages/release/companyAuth/index?authInfo=' + authInfo |
||||
}); |
||||
} else if (this.authStatus == 1) { |
||||
uni.showToast({ |
||||
title: '认证申请审核中，请等待！', |
||||
icon: 'none' |
||||
}); |
||||
} |
||||
}, |
||||
|
||||
isAuthentication() { |
||||
app.http('get', 'user/isAuthentication').then(res => { |
||||
if (res.data.success) { |
||||
this.setData({ |
||||
authStatus: res.data.data.authenticationState, |
||||
authType: res.data.data.authorizationType, |
||||
completeState: res.data.data.completeState, |
||||
authInfo: res.data.data.authInfo, |
||||
reason: res.data.data.authInfo.reason |
||||
}); |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
toResources() { |
||||
let that = this; |
||||
console.log(this.authStatus, 'authStatus'); |
||||
console.log(this.authType, 'authType'); |
||||
console.log(this.completeState, 'completeState'); |
||||
|
||||
if (this.authStatus == 2 && this.authType == 1 && this.completeState == true) { |
||||
uni.navigateTo({ |
||||
url: '/pages/user/editNeeds/index?type=1' |
||||
}); |
||||
} else if (this.authStatus == 2 && this.authType == 1 && this.completeState == false) { |
||||
uni.showModal({ |
||||
title: '提示！', |
||||
content: '您还未完善企业信息，点击确定去完善吧~', |
||||
|
||||
success(res) { |
||||
if (res.confirm) { |
||||
uni.navigateTo({ |
||||
url: '/pages/release/perfectCompanyInfo/index' |
||||
}); |
||||
} |
||||
} |
||||
|
||||
}); |
||||
} else if (this.authStatus == 0 && (this.authType == 1 || this.authType == 0) && this.completeState == false) { |
||||
uni.showModal({ |
||||
title: '提示！', |
||||
content: '您还未完成企业认证，点击确定去认证吧~', |
||||
|
||||
success(res) { |
||||
if (res.confirm) { |
||||
uni.navigateTo({ |
||||
url: '/pages/release/companyAuth/index' |
||||
}); |
||||
} |
||||
} |
||||
|
||||
}); |
||||
} |
||||
}, |
||||
|
||||
toNeeds() { |
||||
if (this.authStatus == 2 && (this.authType == 2 || this.authType == 1) && this.completeState == true) { |
||||
uni.navigateTo({ |
||||
url: '/pages/user/editNeeds/index?type=2' |
||||
}); |
||||
} else if (this.authStatus == 2 && (this.authType == 2 || this.authType == 0) && this.completeState == false) { |
||||
uni.showModal({ |
||||
title: '提示！', |
||||
content: '您还未完善个人信息，点击确定去完善吧~', |
||||
|
||||
success(res) { |
||||
uni.navigateTo({ |
||||
url: '/pages/release/perfectPersonInfo/index' |
||||
}); |
||||
} |
||||
|
||||
}); |
||||
} else if (this.authStatus == 0 && (this.authType == 2 || this.authType == 0) && this.completeState == false) { |
||||
uni.showModal({ |
||||
title: '提示！', |
||||
content: '您还未完成认证，点击上方按钮去认证吧！' |
||||
}); |
||||
} |
||||
} |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
<style> |
||||
/* pages/release/index.wxss */ |
||||
.guid-box{ |
||||
width: 662rpx; |
||||
height: 140rpx; |
||||
margin: 196rpx 46rpx 60rpx 40rpx; |
||||
position: relative; |
||||
} |
||||
.guid-title{ |
||||
width: 192rpx; |
||||
height: 56rpx; |
||||
font-size: 42rpx; |
||||
color: #1D1D1D; |
||||
} |
||||
.handbook-img{ |
||||
width: 200rpx; |
||||
height: 56rpx; |
||||
} |
||||
.title-s{ |
||||
width: 650rpx; |
||||
height: 74rpx; |
||||
font-size: 24rpx; |
||||
color: #1D1D1D; |
||||
margin-top: 10rpx; |
||||
} |
||||
.arror-r{ |
||||
width: 21rpx; |
||||
height: 39rpx; |
||||
position: absolute; |
||||
right: 0; |
||||
top: 16rpx; |
||||
} |
||||
|
||||
.auth-btn-box{ |
||||
width: 100%; |
||||
margin-top: 60rpx; |
||||
} |
||||
.auth-btn{ |
||||
width: 666rpx; |
||||
height: 134rpx; |
||||
box-shadow: 0px 0px 12rpx rgba(164, 164, 164, 0.16); |
||||
border-radius: 12rpx; |
||||
margin-bottom: 22rpx; |
||||
background: #FFFFFF; |
||||
position: relative; |
||||
} |
||||
.auth-headimg{ |
||||
margin: 0 44rpx 0 44rpx; |
||||
} |
||||
.person-img{ |
||||
width: 73rpx; |
||||
height: 68rpx; |
||||
} |
||||
.business-img{ |
||||
width: 65rpx; |
||||
height: 73rpx; |
||||
} |
||||
.investor-img{ |
||||
width: 71rpx; |
||||
height: 79rpx; |
||||
} |
||||
.auth-title{ |
||||
width: 454rpx; |
||||
height: 40rpx; |
||||
} |
||||
.auth-title-h{ |
||||
width: 445rpx; |
||||
font-size: 24rpx; |
||||
color: #686868; |
||||
} |
||||
.tojump{ |
||||
width: 21rpx; |
||||
height: 39rpx; |
||||
position: absolute; |
||||
right: 32rpx; |
||||
} |
||||
|
||||
.posi{ |
||||
width: 100%; |
||||
bottom: 100rpx; |
||||
margin-top: 50rpx; |
||||
} |
||||
.top30{ |
||||
bottom: 30%; |
||||
} |
||||
.tips-box{ |
||||
/* margin-top: 15%; */ |
||||
} |
||||
.tips{ |
||||
color: #FF0000; |
||||
font-size: 26rpx; |
||||
padding-left: 54rpx; |
||||
margin-bottom: 10rpx; |
||||
} |
||||
.icon{ |
||||
width: 26rpx; |
||||
height: 26rpx; |
||||
border: 1rpx solid #FF0000; |
||||
text-align: center; |
||||
line-height: 22rpx; |
||||
border-radius: 50%; |
||||
font-size: 20rpx; |
||||
margin-right: 10rpx; |
||||
} |
||||
.btn-box{ |
||||
width: 598rpx; |
||||
margin: 0 auto; |
||||
} |
||||
.btn{ |
||||
width: 598rpx; |
||||
height: 150rpx; |
||||
background: #F8F8F8; |
||||
border-radius: 148px; |
||||
position: relative; |
||||
margin-bottom: 42rpx; |
||||
} |
||||
.btn-res{ |
||||
background: #FF783A; |
||||
} |
||||
.btn-need{ |
||||
background: #6AA5FF; |
||||
} |
||||
.btn-demo{ |
||||
background: #ACAAFF; |
||||
} |
||||
.btn-box image{ |
||||
width: 98rpx; |
||||
height: 98rpx; |
||||
margin: 0 32rpx 0 42rpx; |
||||
} |
||||
.btn-box .default{ |
||||
filter: grayscale(1); |
||||
} |
||||
.btn .tip{ |
||||
color: #FFFFFF; |
||||
font-weight: 500; |
||||
font-size: 32rpx; |
||||
margin-bottom: 12rpx; |
||||
} |
||||
.tip-s{ |
||||
font-size: 24rpx; |
||||
color: #FFFFFF; |
||||
} |
||||
.close { |
||||
text-align: center; |
||||
margin: 114rpx 0 180rpx 0; |
||||
} |
||||
.close image{ |
||||
width: 40rpx; |
||||
height: 40rpx; |
||||
} |
||||
</style> |
||||
|
Before Width: | Height: | Size: 163 B After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 326 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 839 KiB |
|
After Width: | Height: | Size: 738 KiB |
|
After Width: | Height: | Size: 714 KiB |
|
After Width: | Height: | Size: 477 KiB |
|
After Width: | Height: | Size: 856 B |
|
After Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 421 B |
|
After Width: | Height: | Size: 873 B |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 763 B |
|
After Width: | Height: | Size: 826 B |
Loading…
Reference in new issue