You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

621 lines
13 KiB

<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" @tap="toSupplyHall"></image>
</view>
<view class="img2 acea-row row-column-between">
<image src="../../../static/images/business-img2.png" @tap="toEnterpriseServer"></image>
<image src="../../../static/images/business-img3.png" @tap="toDemoInvestment"></image>
</view>
</view>
<!-- 商业简报 -->
<view class="news-box acea-row row-middle">
<image src="../../../static/images/business-news.png" class="news-img"></image>
<view class="news-con-box">
<view class="news-con acea-row row-middle">
<image src="../../../static/images/hot-icon.png"></image>
<view class="notice-swiper">
<NewsSwiper :list="isHotList" :interval="4000" @toArticleDetail="toArticleDetail"></NewsSwiper>
</view>
</view>
<view class="news-con acea-row row-middle">
<image src="../../../static/images/rem-icon.png"></image>
<view class="notice-swiper">
<NewsSwiper :list="isRecommend" :interval="4000" @toArticleDetail="toArticleDetail"></NewsSwiper>
</view>
</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" @click="replaceClick">
<image src="../../../static/images/update-icon.png" :class="showCirc ? 'circ' : ''"></image>换一批
</view>
</view>
<scroll-view class="scroll-view_H acea-row" scroll-x="true">
<view class="company-list" v-for="(item,index) in enterpriseList" :key="index">
<view class="title">{{item.enterpriseName}}</view>
<view class="category-box acea-row">
<view class="tag" :class="index%2 == 0 ? 'tag-item-b' : 'tag-item-y' ">{{item.cname}}</view>
<!-- <view class="tag-item-y tag">财务规范</view>
<view class="tag-item-p tag">零负债</view> -->
</view>
<view class="title-s line1">{{item.enterpriseTitle}}</view>
<view class="acea-row">
<image :src="item.enterpriseLogo" class="company-logo" mode="aspectFill"></image>
<view class="todetails" @click="toCompanyDetail(item.id)">了解详情</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" @tap="toAuthentication"></image>
</view>
<view class="service-top acea-row row-between">
<view class="service-nub-left acea-row row-column-between">
<view class="tips line1">{{supplyList[0].title}}</view>
<view class="tips-item line1">{{supplyList[0].detailedDescription}}</view>
<image :src="supplyList[0].resourceImgs[0]" mode="aspectFill"></image>
</view>
<view class="acea-row row-between service-nub-right">
<view class="acea-row row-center-wrapper module-nub">
<view class="tips line1">{{supplyList[1].title}}</view>
<view class="tips-item line1">{{supplyList[1].detailedDescription}}</view>
</view>
<view class="acea-row row-center-wrapper module-nub">
<view class="tips">{{supplyList[2].title || '广告位招租'}}</view>
<view class="tips-item">{{supplyList[2].detailedDescription}}</view>
</view>
</view>
</view>
<view class="service-bottom acea-row row-between">
<view v-for="(item,index) in cagetoryList" :key="index">
<view class="module-box bg-red acea-row row-center-wrapper" v-if="index <= 2 ">
<view class="tips">{{item.cagetoryName}}</view>
<!-- <view class="tips-item">房屋装修</view> -->
</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" :key="index">
<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>
import { getArticle } from "@/api/home";
import { briefing, supply, listResourcesCagetory, listEnterprise } from "@/api/business"
import NewsSwiper from "./newsSwiper.vue"
export default {
components:{ NewsSwiper },
data() {
return {
showCirc: false,
isHotList: [],
isRecommend: [],
supplyList: [],
cagetoryList: [],
enterpriseList: []
};
},
mounted(){
this.getArticleList()
this.getSupplyList()
this.getCagetoryList()
this.getEnterpriseList()
},
methods:{
//获取资讯
getArticleList(){
briefing().then((res)=>{
const articleList= res.data
this.isHotList = articleList.filter(item=> item.isHot == 1)
this.isRecommend = articleList.filter(item=> item.isRecommend == 1)
})
},
toArticleDetail(id){
uni.navigateTo({
url:"/pages/life/articleDetail/index?id=" + id
})
},
//获取供应
getSupplyList(){
supply().then((res)=>{
this.supplyList = res.data
})
},
//获取分类
getCagetoryList(){
listResourcesCagetory().then((res)=>{
this.cagetoryList = res.data
})
},
//获取企业
getEnterpriseList(){
listEnterprise().then((res)=>{
this.enterpriseList = res.data
this.showCirc = false
})
},
toCompanyDetail(id){
uni.navigateTo({
url:"/pages/life/articleDetail/index?id=" + id
})
},
//换一批
replaceClick(){
if(!this.showCirc){
this.showCirc = true;
this.getEnterpriseList()
}
},
// 供需大厅
toSupplyHall(e){
uni.navigateTo({
url:"/pages/demandHall/supplyHall/index"
})
},
// 企业服务
toEnterpriseServer(e){
uni.navigateTo({
url:"/pages/demandHall/enterpriseServer/index"
})
},
// 项目投融
toDemoInvestment(e){
uni.showModal({
title:'提示!',
content: '模块开发中,请等待...',
showCancel: false
})
// uni.navigateTo({
// url:"/pages/demandHall/demoInvestment/index"
// })
},
// 认证
toAuthentication(e){
uni.navigateTo({
url:"/pages/release/index2"
})
}
},
}
</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: 66rpx;
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-box{
width: calc(100% - 100rpx);
}
.news-con {
margin-bottom: 6rpx;
.notice-swiper{
width: calc(100% - 116rpx);
height: 34rpx;
}
.scroll-Y{
height: 34rpx;
.swiper-item{
height: 34rpx;
}
}
}
.news-con image {
width: 32rpx;
height: 34rpx;
margin: 0 26rpx 0 40rpx;
}
}
// 优质企业
.title-con {
padding: 0 40rpx;
}
.title-img {
width: 134rpx;
height: 46rpx;
}
@keyframes doCric{
0% {
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.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;
}
.update-icon .circ{
animation: doCric 1s ease;
}
.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 {
height: 32rpx;
font-weight: 400;
color: #6E6E6E;
margin: 16rpx 0 10rpx 0;
}
.company-logo {
width: 176rpx;
height: 128rpx;
border-radius: 8rpx;
}
.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;
border-radius: 8rpx;
}
.service-nub-right {
width: 310rpx;
height: 272rpx;
.module-nub {
width: 310rpx;
height: 128rpx;
background: #FFEFE8;
border-radius: 12rpx;
padding: 18rpx 12rpx 32rpx;
}
}
}
.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>