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.
 
 
 
 

477 lines
11 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"></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;
.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 20rpx 0 15rpx;
.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>