1550 lines
45 KiB
Vue
1550 lines
45 KiB
Vue
<template>
|
||
<view>
|
||
<top-bar></top-bar>
|
||
<common-header></common-header>
|
||
<category-bar alwaysShowCategory></category-bar>
|
||
|
||
<!-- banner -->
|
||
<view class="banner-outer">
|
||
<common-swiper height="365" width="760px"/>
|
||
</view>
|
||
<!-- banner下 -->
|
||
<div class="group-inner3">
|
||
<div class="flex justify-center items-center">
|
||
<div class="w-33p pointer" @click="navTo('/pages/index/self-support/self-support')">
|
||
<img src="/static/images/home1.jpg" alt="" style="width: 240px; height: 124px">
|
||
</div>
|
||
<div class="w-33p pointer" @click="navTo('/pages/spot/goods/goods')">
|
||
<img src="/static/images/home2.jpg" alt="" style="width: 240px; height: 124px">
|
||
</div>
|
||
<div class="w-33p pointer" @click="navTo('/pages/enquiry/list')">
|
||
<img src="/static/images/home3.jpg" alt="" style="width: 240px; height: 124px">
|
||
</div>
|
||
</div>
|
||
<!-- <div class="group-inner3-list">-->
|
||
<!-- <a href="javascript:;" rel="nofollow" @click="navTo('/pages/index/self-support/self-support')">-->
|
||
<!-- <div class="group-inner3-listleft">-->
|
||
<!-- <h2>厂家直营</h2>-->
|
||
<!-- <p>产地货源 正规优价</p>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="group-inner3-listright">-->
|
||
<!-- <img src="/static/images/home1.jpg">-->
|
||
<!-- </div>-->
|
||
<!-- </a>-->
|
||
|
||
<!-- </div>-->
|
||
|
||
<!-- <div class="group-inner3-list">-->
|
||
<!-- <a href="javascript:;" @click="navTo('/pages/spot/goods/goods')" rel="nofollow">-->
|
||
<!-- <div class="group-inner3-listleft">-->
|
||
<!-- <h2>采购·找现货</h2>-->
|
||
<!-- <p>专属采购助手<br>-->
|
||
<!-- 为您匹配优质供应商</p>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="group-inner3-listright">-->
|
||
<!-- <img src="/static/images/home2.jpg">-->
|
||
<!-- </div>-->
|
||
<!-- </a>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- <div class="group-inner3-list">-->
|
||
<!-- <a href="javascript:;" @click="navTo('/pages/enquiry/list')" rel="nofollow">-->
|
||
<!-- <div class="group-inner3-listleft">-->
|
||
<!-- <h2>供应·找买家 </h2>-->
|
||
<!-- <p>快速发布您的产品<br>-->
|
||
<!-- 让网上生意变的如此简单</p>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="group-inner3-listright">-->
|
||
<!-- <img src="/static/images/home3.jpg">-->
|
||
<!-- </div>-->
|
||
<!-- </a>-->
|
||
<!-- </div>-->
|
||
</div>
|
||
|
||
<view class="register pointer" @click.native="navTo('/pages/auth/login/login')">
|
||
<view class="left">
|
||
<view class="text">
|
||
<text>免费注册！！</text>
|
||
<el-divider class="divider" direction="vertical"/>
|
||
<view class="ad-text2">
|
||
<text class="yellow">成为平台会员 免费询价</text>
|
||
<text class="white">企业专享价 续重免运费 增值权益 免息账期 采购管家</text>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="right">
|
||
<el-button type="warning" round>
|
||
立即注册
|
||
<i class="el-icon-arrow-right"></i>
|
||
</el-button>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
|
||
<!-- <gap height="100" />-->
|
||
|
||
<div style="clear:both;width: 100%;"></div>
|
||
<div class="flex justify-between items-center w-1200 m-a">
|
||
<template v-if="ad3.length">
|
||
<el-carousel :height="`100px`" :style="{width: ad4.length ? '50%' : '100%'}" class="m-a">
|
||
<el-carousel-item v-for="(item, index) in ad3" :key="index" :style="{width: '100%', height: '100px'}">
|
||
<image @click="vk.navigateTo(`/pages/yellowPage/info?id=${item.companyId}`)"
|
||
class="carousel-img pointer" :src="item.swiper" mode="aspectFill"
|
||
:style="{width: '100%', height: '100px'}"/>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</template>
|
||
<template v-if="ad4.length">
|
||
<el-carousel :height="`100px`" :style="{width: ad3.length ? '50%' : '100%'}" class="m-a">
|
||
<el-carousel-item v-for="(item, index) in ad4" :key="index" :style="{width: '100%', height: '100px'}">
|
||
<image @click="vk.navigateTo(`/pages/yellowPage/info?id=${item.companyId}`)"
|
||
class="carousel-img pointer" :src="item.swiper" mode="aspectFill"
|
||
:style="{width: '100%', height: '100px'}"/>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</template>
|
||
</div>
|
||
<!-- 询价列表 start -->
|
||
<view class="enquiry-outer">
|
||
<view class="" style="height: 20px;"></view>
|
||
<el-divider>
|
||
<view class="divider-text">最新询价信息</view>
|
||
</el-divider>
|
||
<view class="" style="height: 20px;"></view>
|
||
<div class="mod-inner2Listcenter clearfix sliper" style="margin-top: 0">
|
||
<ul class="clearfix flex justify-start items-start flex-wrap">
|
||
<li v-for="(item, index) in enquirySheetData" class="inli-mask" :key="index"
|
||
style="height: 200px"
|
||
@click="vk.navigateTo('/pages/enquiry/detail?id=' + item._id);">
|
||
<a href="javascript:void(0)" style="display: block;" rel="nofollow">
|
||
<div class="detail">
|
||
<div class="detail-kind clearfix">
|
||
<div class="tag">报价中</div>
|
||
<div class="kind"><span>{{ item.quoteNum || 0 }}</span>家已报价</div>
|
||
</div>
|
||
<div class="text-30 py-10 text-black line-1">
|
||
<span>{{ item.title.split('-')[0] }}</span>
|
||
</div>
|
||
<div class="text-30 py-10 text-black line-1">
|
||
<span>{{ item.title.split('-')[1] }}</span>
|
||
</div>
|
||
<div class="text-30 py-10 text-black line-1">
|
||
<span>预估采购数量: {{
|
||
item.productList.map(product => (product.procureNumber ? product.procureNumber : '') + (product.procureUnit ? product.procureUnit : ''))[0]
|
||
}}</span>
|
||
</div>
|
||
<div class="text-25 mt-25">
|
||
<span>{{ item.fullAddress }}</span>
|
||
</div>
|
||
<div class="detail-num flex flex-col justify-start items-start">
|
||
<template v-if="item.user">
|
||
<span v-if="item.user.accountType === 1"
|
||
class="company line-1">{{
|
||
item.user.person.personName.replace(/^(.).*$/, "$1**")
|
||
}}</span>
|
||
<span v-if="item.user.accountType === 2"
|
||
class="company line-1">{{
|
||
item.user.company.companyName.replace(/^(.)(.).*(.)(.)(.)(.)$/, "$1$2***$3$4$5$6")
|
||
}}</span>
|
||
<span class="time">{{ item._add_time_str }}</span>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<div class="show-more" @click="navTo('/pages/enquiry/list')"><i class="el-icon-view"></i>查看更多
|
||
</div>
|
||
</div>
|
||
</view>
|
||
<!-- 询价列表 end -->
|
||
<view class="" style="height: 20px;"></view>
|
||
<el-divider>
|
||
<view class="divider-text">现货市场</view>
|
||
</el-divider>
|
||
<view class="" style="height: 20px;"></view>
|
||
<!-- 现货市场 start -->
|
||
<view class="spot-outer">
|
||
|
||
<view class="" style="height: 20px;"></view>
|
||
<view class="goods-list">
|
||
<view v-for="(item, index) in spotGoodsData" :key="index" class="goods"
|
||
:style="{marginRight:( (index + 1) % 5 === 0 && index > 0) ? 0 : '10px'}">
|
||
<view class="top" v-if="item.isTop">特别推荐</view>
|
||
<view class="top" v-if="!item.isTop && index < 10">最新</view>
|
||
<view class="goods-title line-2">{{ item.name }}</view>
|
||
<view class="goods-stock">库存：{{ item.stock }}吨</view>
|
||
<view class="goods-address">{{ item.addressStr }}</view>
|
||
<!-- <view class="goods-image">-->
|
||
<!-- <image :src="item.user.businessCard.logo" mode="aspectFit"></image>-->
|
||
<!-- </view>-->
|
||
<view style="height: 45px">
|
||
<template v-if="item.user">
|
||
<view v-if="item.user.accountType === 1" class="goods-company">
|
||
{{ item.user.person.personName }}
|
||
</view>
|
||
<view v-if="item.user.accountType === 2" class="goods-company">{{
|
||
item.user.company.companyName
|
||
}}
|
||
</view>
|
||
</template>
|
||
</view>
|
||
<el-button class="empty-bg-plain-btn"
|
||
@click="vk.navigateTo('/pages/spot/goods/detail?id=' + item._id);" type="primary" plain
|
||
size="small">立即查看
|
||
</el-button>
|
||
</view>
|
||
</view>
|
||
<div class="show-more" @click="navTo('/pages/spot/goods/goods')"><i class="el-icon-view"></i>查看更多</div>
|
||
</view>
|
||
<!-- 现货市场 end -->
|
||
<!-- <gap height="50"/>-->
|
||
|
||
<!-- 合作商家 start -->
|
||
<view class="spot-outer hzsj-bg">
|
||
<el-divider>
|
||
<view class="divider-text">合作商家</view>
|
||
</el-divider>
|
||
<view class="hzsj-list">
|
||
<view class="w-25p pointer" v-for="(item, index) in companyList" :key="index"
|
||
@click="navTo(`/pages/yellowPage/info?id=${item.uid}`)">
|
||
<view class="border bg-white flex flex-col justify-start items-start p-20" style="height: 250rpx">
|
||
<view class="flex justify-start items-center mb-25">
|
||
<image v-if="item.businessCard" :src="item.businessCard.logo" class="logo"/>
|
||
<image v-else src="/static/images/no-logo.jpg" class="logo" mode="aspectFill"/>
|
||
<span class="text-28 font-bold ml-15">{{ item.company.companyName }}</span>
|
||
</view>
|
||
<div class="flex justify-start items-start ml-20 w-100p">
|
||
<span class="mt-20 line-2 w-100p">
|
||
主营: {{
|
||
(item.mainSpotCategory && item.mainSpotCategory.length > 0) ? item.mainSpotCategory.join() : ''
|
||
}}
|
||
</span>
|
||
</div>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<div class="show-more" @click="navTo(`/pages/yellowPage/list`)"><i class="el-icon-view"></i>查看更多</div>
|
||
</view>
|
||
<!-- 合作商家 end -->
|
||
|
||
|
||
<!-- 金久信服务商展示 start -->
|
||
<view class="w1200">
|
||
<el-divider>
|
||
<view class="divider-text">金久信特色展示</view>
|
||
</el-divider>
|
||
<view class="" style="height: 20px;"></view>
|
||
<view class="server-card2">
|
||
<!-- <view class="item b1" @click="navTo('/pages/otherArticle/detail?id=65791ccbe0ec19b504538e31')">-->
|
||
<!-- <image src="/static/images/index/icon9.png" mode="widthFix"-->
|
||
<!-- style="width: 40px;"></image>-->
|
||
<!-- <!– <i class="el-icon-lock"></i> –>-->
|
||
<!-- <view class="text">交易安全</view>-->
|
||
<!-- <view class="p4">-->
|
||
<!-- <el-button plain round size="mini">交易安全</el-button>-->
|
||
<!-- </view>-->
|
||
<!-- </view>-->
|
||
<view class="item b2" @click="navTo('/pages/otherArticle/detail?id=65791dab21821b5c0f8741c8')">
|
||
<image src="/static/images/index/icon10.png" mode="widthFix"
|
||
style="width: 40px;"></image>
|
||
<!-- <i class="el-icon-lock"></i> -->
|
||
<view class="text">代检代查</view>
|
||
<view class="p4">
|
||
<el-button plain round size="mini">
|
||
<span style="font-size: 18px">代检代查</span>
|
||
</el-button>
|
||
</view>
|
||
</view>
|
||
<view class="item b3" @click="navTo('/pages/otherArticle/detail?id=65791dc98b0da41d316435b7')">
|
||
<image src="/static/images/index/icon11.png" mode="widthFix"
|
||
style="width: 40px;"></image>
|
||
<!-- <i class="el-icon-lock"></i> -->
|
||
<view class="text">优势资源匹配</view>
|
||
<view class="p4">
|
||
<el-button plain round size="mini">
|
||
<span style="font-size: 18px">优势资源匹配</span>
|
||
</el-button>
|
||
</view>
|
||
</view>
|
||
<view class="item b4" @click="navTo('/pages/otherArticle/detail?id=65791dd0f082105ea491286f')">
|
||
<image src="/static/images/index/icon12.png" mode="widthFix"
|
||
style="width: 40px;"></image>
|
||
<!-- <i class="el-icon-lock"></i> -->
|
||
<view class="text">交易模式多元化</view>
|
||
<view class="p4">
|
||
<el-button plain round size="mini">
|
||
<span style="font-size: 18px">交易模式多元化</span>
|
||
</el-button>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="item b5" @click="navTo('/pages/otherArticle/detail?id=65791dd5bd02205a5327a559')">-->
|
||
<!-- <image src="/static/images/index/icon13.png" mode="widthFix"-->
|
||
<!-- style="width: 40px;"></image>-->
|
||
<!-- <!– <i class="el-icon-lock"></i> –>-->
|
||
<!-- <view class="text">电子合同</view>-->
|
||
<!-- <view class="p4">-->
|
||
<!-- <el-button plain round size="mini">电子合同</el-button>-->
|
||
<!-- </view>-->
|
||
<!-- </view>-->
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- 合作商家 end -->
|
||
|
||
<!-- 交易模式 start -->
|
||
<view class="w1200">
|
||
<view class="" style="height: 1px;"></view>
|
||
<el-divider>
|
||
<view class="divider-text">交易模式多样化</view>
|
||
</el-divider>
|
||
<view class="" style="height: 20px;"></view>
|
||
<el-row :gutter="10" class="wrap" justify="space-between">
|
||
<el-col :span="6">
|
||
<el-card shadow="hover" class="transaction-card"
|
||
@click.native="navTo('/pages/otherArticle/detail?id=6583beb165234188b3be6732')">
|
||
<view class="item">
|
||
<view class="p1">
|
||
<i class="el-icon-lock"></i>
|
||
自主交易
|
||
</view>
|
||
<view class="p2">
|
||
<view class="line"></view>
|
||
</view>
|
||
<view class="p3">
|
||
<text>平台提供供需信息</text>
|
||
<text>用户在相互信任基础之上可进行自主交易</text>
|
||
</view>
|
||
<view class="p4">
|
||
<el-button plain round size="mini">交易流程</el-button>
|
||
</view>
|
||
</view>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-card shadow="hover" class="transaction-card"
|
||
@click.native="navTo('/pages/otherArticle/detail?id=6583bec8189f86d49ba8a58a')">
|
||
<view class="item">
|
||
<view class="p1">
|
||
<i class="el-icon-key"></i>
|
||
金久信公正
|
||
</view>
|
||
<view class="p2">
|
||
<view class="line"></view>
|
||
</view>
|
||
<view class="p3">
|
||
<text>平台作为中间方</text>
|
||
<text>采购货款支付至平台，双方确认交易完成后支付至供货商</text>
|
||
</view>
|
||
<view class="p4">
|
||
<el-button plain round size="mini">交易流程</el-button>
|
||
</view>
|
||
</view>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-card shadow="hover" class="transaction-card"
|
||
@click.native="navTo('/pages/otherArticle/detail?id=6583bee1fe975f47a5931867')">
|
||
<view class="item">
|
||
<view class="p1">
|
||
<i class="el-icon-postcard"></i>
|
||
信誉采购
|
||
</view>
|
||
<view class="p2">
|
||
<view class="line"></view>
|
||
</view>
|
||
<view class="p3">
|
||
<text>信誉良好用户可与平台或接受账期交易内供应商进行交易</text>
|
||
<!-- <text></text>-->
|
||
</view>
|
||
<view class="p4">
|
||
<el-button plain round size="mini">交易流程</el-button>
|
||
</view>
|
||
</view>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-card shadow="hover" class="transaction-card"
|
||
@click.native="navTo('/pages/otherArticle/detail?id=6583bef3f08210d4b8a10e8a')">
|
||
<view class="item">
|
||
<view class="p1">
|
||
<i class="el-icon-medal"></i>
|
||
金久信自营
|
||
</view>
|
||
<view class="p2">
|
||
<view class="line"></view>
|
||
</view>
|
||
<view class="p3">
|
||
<text>对产品质量和服务有高标准高要求的用户与平台交易:享受专业 、高效的 服务过程</text>
|
||
<!-- <text>交易成功后支付至销售商</text>-->
|
||
</view>
|
||
<view class="p4">
|
||
<el-button plain round size="mini">交易流程</el-button>
|
||
</view>
|
||
</view>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</view>
|
||
<!-- 交易模式 end -->
|
||
|
||
|
||
<!-- 新闻资讯 start -->
|
||
<view class="w1200">
|
||
<el-row :gutter="10" class="wrap" justify="space-between">
|
||
<el-col :span="18">
|
||
<el-card shadow="hover" class="news-card">
|
||
<div slot="header" class="clearfix">
|
||
<span class="card-title">金久信·金融服务</span>
|
||
<el-button style="float: right; color: #BD3124;" size="mini" @click.native="openClose">
|
||
马上开通
|
||
</el-button>
|
||
</div>
|
||
<div class="jrfw-img">
|
||
<el-row :gutter="20" justify="space-between" class="jrfw-row">
|
||
<el-col :span="12">
|
||
<el-card shadow="hover">
|
||
<div class="jrfw-img-item">
|
||
<div class="info">
|
||
<div class="title">·买家采购更放心</div>
|
||
<div class="desc">先收货后付款，账期最长
|
||
<text>60</text>
|
||
天
|
||
</div>
|
||
<gap height="20"></gap>
|
||
<div class="title">·卖家销售无压力</div>
|
||
<div class="desc">账期交易未到期，资金提前放。</div>
|
||
</div>
|
||
<div class="pic">
|
||
<image src="/static/images/index/gg1.png"
|
||
mode="aspectFit"></image>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-card shadow="hover">
|
||
<div class="jrfw-img-item">
|
||
<div class="info">
|
||
<div class="title">利率低至年化4.35%</div>
|
||
<div class="desc">赊销卖钢材，回款不担心</div>
|
||
</div>
|
||
<div class="pic">
|
||
<image src="/static/images/index/gg2.png"
|
||
mode="aspectFit"></image>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
|
||
<!-- <image src="https://oss.wsdns.cn/20231207/a3ea8ffd7242453eb2242ffaaa89116d.png"
|
||
mode="widthFix"></image> -->
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-card shadow="hover" class="news-card">
|
||
<div slot="header" class="clearfix">
|
||
<span class="card-title">最新入驻</span>
|
||
</div>
|
||
<div class="news-list">
|
||
<el-link @click.native="navTo(`/pages/yellowPage/info?id=${item._id}`)" :underline="false"
|
||
v-for="(item, index) in latestCompanyList" :key="index">
|
||
{{ item.company.companyName }}
|
||
</el-link>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</view>
|
||
<!-- 新闻资讯 end -->
|
||
|
||
<!-- 买家入门 卖家入门 start -->
|
||
<view class="w1200">
|
||
<el-row :gutter="10" class="wrap" justify="space-between">
|
||
<el-col :span="12">
|
||
<el-card shadow="hover" class="news-card">
|
||
<div slot="header" class="clearfix">
|
||
<span class="card-title">买家入门</span>
|
||
<el-button style="float: right; padding: 3px 0; color: #999999;" type="text"
|
||
@click="navTo(`/pages/otherArticle/list?id=6573d7c3e0ec19b5047ffa8c`)">更多>
|
||
</el-button>
|
||
</div>
|
||
<div class="content">
|
||
<div class="news-img">
|
||
<image src="/static/images/index/xw1.jpg" mode="widthFix">
|
||
</image>
|
||
</div>
|
||
<div class="tabs">
|
||
<div class="news-list">
|
||
<el-link v-for="(item, index) in buyerArticleList" :key="index"
|
||
@click="navTo(`/pages/otherArticle/detail?id=${item._id}`)">{{
|
||
item.name
|
||
}}
|
||
</el-link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="12" class="wrap" justify="space-between">
|
||
<el-card shadow="hover" class="news-card">
|
||
<div slot="header" class="clearfix">
|
||
<span class="card-title">卖家入门</span>
|
||
<el-button style="float: right; padding: 3px 0; color: #999999;" type="text"
|
||
@click="navTo(`/pages/otherArticle/list?id=6573d7bde0ec19b5047ff941`)">更多>
|
||
</el-button>
|
||
</div>
|
||
<div class="content">
|
||
<div class="news-img">
|
||
<image src="/static/images/index/xw2.jpg" mode="widthFix">
|
||
</image>
|
||
</div>
|
||
<div class="tabs">
|
||
<div class="tabs">
|
||
<div class="news-list">
|
||
<el-link @click="navTo(`/pages/otherArticle/detail?id=${item._id}`)"
|
||
v-for="(item, index) in sellerArticleList" :key="index">{{
|
||
item.name
|
||
}}
|
||
</el-link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</view>
|
||
<!-- 买家入门 卖家入门 end -->
|
||
<div class="flex justify-between items-center w-1200 m-a">
|
||
<template v-if="ad5.length">
|
||
<el-carousel :height="`100px`" :style="{width: '1200px'}" class="m-a">
|
||
<el-carousel-item v-for="(item, index) in ad5" :key="index" :style="{width: '100%'}">
|
||
<image @click="vk.navigateTo(`/pages/yellowPage/info?id=${item.companyId}`)"
|
||
class="pointer carousel-img" :src="item.swiper" mode="widthFix"
|
||
:style="{width: '100%', height: '100px'}"/>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</template>
|
||
<template v-if="ad6.length">
|
||
<el-carousel :height="`100px`" :style="{width: '1200px'}" class="m-a">
|
||
<el-carousel-item v-for="(item, index) in ad6" :key="index" :style="{width: '100%'}">
|
||
<image @click="vk.navigateTo(`/pages/yellowPage/info?id=${item.companyId}`)"
|
||
class="pointer carousel-img" :src="item.swiper" mode="widthFix"
|
||
:style="{width: '100%', height: '100px'}"/>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</template>
|
||
</div>
|
||
<div class="flex justify-between items-center w-1200 m-a">
|
||
<template v-if="ad7.length">
|
||
<el-carousel :height="`100px`" :style="{width: '1200px'}" class="m-a">
|
||
<el-carousel-item v-for="(item, index) in ad7" :key="index" :style="{width: '100%'}">
|
||
<image @click="vk.navigateTo(`/pages/yellowPage/info?id=${item.companyId}`)"
|
||
class="pointer carousel-img" :src="item.swiper" mode="widthFix"
|
||
:style="{width: '100%', height: '100px'}"/>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</template>
|
||
<template v-if="ad8.length">
|
||
<el-carousel :height="`100px`" :style="{width: '1200px'}" class="m-a">
|
||
<el-carousel-item v-for="(item, index) in ad8" :key="index" :style="{width: '100%'}">
|
||
<image @click="vk.navigateTo(`/pages/yellowPage/info?id=${item.companyId}`)"
|
||
class="pointer carousel-img" :src="item.swiper" mode="widthFix"
|
||
:style="{width: '100%', height: '100px'}"/>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</template>
|
||
</div>
|
||
<!-- 资讯中心 start -->
|
||
<view class="w1200">
|
||
<view class="" style="height: 1px;"></view>
|
||
<el-divider>
|
||
<view class="divider-text">资讯中心</view>
|
||
</el-divider>
|
||
<view class="" style="height: 20px;"></view>
|
||
<el-row :gutter="10" class="wrap" justify="space-between">
|
||
<el-col :span="6" v-for="(item, index) in articleList" :key="index">
|
||
<el-card shadow="hover">
|
||
<div slot="header" class="clearfix pointer">
|
||
<span @click="navTo(`/pages/otherArticle/list?id=${item.id}`)">{{ item.title }}</span>
|
||
</div>
|
||
<div class="news-list" style="height: 140px">
|
||
<el-link @click="navTo(`/pages/otherArticle/detail?id=${article._id}`)"
|
||
v-for="(article, articleIndex) in item.list" :key="articleIndex"
|
||
:underline="false">
|
||
{{ article.name }}
|
||
</el-link>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</view>
|
||
<!-- 资讯中心 end -->
|
||
|
||
|
||
<!-- <view class="ad-bottom">-->
|
||
<!-- <el-row :gutter="10" class="wrap" justify="space-between">-->
|
||
<!-- <el-col :span="12">-->
|
||
<!-- <view class="item">-->
|
||
<!-- <image src="http://jyx.gxwebsoft.com/uploads/20210506/8a6b689d22ffcb382dad758e15e933f9.jpg"-->
|
||
<!-- mode="widthFix"/>-->
|
||
<!-- </view>-->
|
||
<!-- </el-col>-->
|
||
<!-- <el-col :span="12">-->
|
||
<!-- <view class="item">-->
|
||
<!-- <image src="http://jyx.gxwebsoft.com/uploads/20210506/13a1ee4c52fda80a7e03080198944671.jpg"-->
|
||
<!-- mode="widthFix"/>-->
|
||
<!-- </view>-->
|
||
<!-- </el-col>-->
|
||
<!-- <el-col :span="12">-->
|
||
<!-- <view class="item">-->
|
||
<!-- <image src="http://jyx.gxwebsoft.com/uploads/20210521/41e761a2f98cdf5a7e873ead16fb47eb.jpg"-->
|
||
<!-- mode="widthFix"/>-->
|
||
<!-- </view>-->
|
||
<!-- </el-col>-->
|
||
<!-- <el-col :span="12">-->
|
||
<!-- <view class="item">-->
|
||
<!-- <image src="http://jyx.gxwebsoft.com/uploads/20210506/8e24bf5d6b29858a8c5b1256b29ffadc.jpg"-->
|
||
<!-- mode="widthFix"/>-->
|
||
<!-- </view>-->
|
||
<!-- </el-col>-->
|
||
<!-- </el-row>-->
|
||
<!-- </view>-->
|
||
|
||
<!-- <el-card class="register-count">
|
||
金久信已帮助6,157,952位企业解决产品供需难题
|
||
在线提交您的需求，即享专业服务
|
||
</el-card> -->
|
||
|
||
|
||
<gap height="50"/>
|
||
<common-footer></common-footer>
|
||
<right-bar></right-bar>
|
||
</view>
|
||
</template>
|
||
|
||
|
||
<script>
|
||
|
||
var vk = uni.vk;
|
||
export default {
|
||
data() {
|
||
// 页面数据变量
|
||
return {
|
||
// init请求返回的数据
|
||
spotGoodsData: [],
|
||
enquirySheetData: [],
|
||
data: {},
|
||
// 表单请求数据
|
||
form1: {},
|
||
scrollTop: 0,
|
||
buyerTabs: 'first',
|
||
sellerTabs: 'first',
|
||
sellerArticleList: [],
|
||
buyerArticleList: [],
|
||
articleList: [
|
||
{
|
||
id: '657451bb6e5d2d335ab78b3a',
|
||
title: '市场信息',
|
||
list: []
|
||
},
|
||
{
|
||
id: '65745200337a9f07565fb08d',
|
||
title: '期货信息',
|
||
list: []
|
||
},
|
||
{
|
||
id: '6574520a7ad52d34471a9582',
|
||
title: '行情分析',
|
||
list: []
|
||
},
|
||
{
|
||
id: '6574521499c62431df5b562c',
|
||
title: '行业动态',
|
||
list: []
|
||
},
|
||
],
|
||
companyList: [],
|
||
latestCompanyList: [],
|
||
ad3: [],
|
||
ad4: [],
|
||
ad5: [],
|
||
ad6: [],
|
||
ad7: [],
|
||
ad8: [],
|
||
allChildCate: [],
|
||
}
|
||
},
|
||
onPageScroll(e) {
|
||
this.scrollTop = e.scrollTop;
|
||
},
|
||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||
onLoad(options = {}) {
|
||
console.log(options)
|
||
vk = uni.vk;
|
||
this.options = options;
|
||
this.init(options);
|
||
},
|
||
// 函数
|
||
methods: {
|
||
getSpotGoods() {
|
||
vk.callFunction({
|
||
url: 'client/spot/goods/pub/getList',
|
||
loading: false,
|
||
data: {
|
||
pageIndex: 1,
|
||
pageSize: 10,
|
||
},
|
||
success: (data) => {
|
||
console.log('data: ', data);
|
||
data.rows.forEach(item => {
|
||
try {
|
||
item.addressStr = item.address.province.name + "-" + item.address.city
|
||
.name + "-" + item.address.area.name
|
||
} catch (err) {
|
||
item.addressStr = ""
|
||
}
|
||
})
|
||
this.spotGoodsData = data.rows
|
||
}
|
||
});
|
||
},
|
||
getEnquirySheetList() {
|
||
vk.callFunction({
|
||
url: 'client/enquiry/sheet/pub/getList',
|
||
loading: false,
|
||
data: {
|
||
pageIndex: 1,
|
||
pageSize: 15,
|
||
latest: true
|
||
},
|
||
success: (data) => {
|
||
this.enquirySheetData = data.rows.map(item => {
|
||
item.fullAddress = ''
|
||
item.fullAddress = (item.addressRegion && item.addressRegion.province) ? `${item.addressRegion.province.name}${item.addressRegion.city.name}${item.addressRegion.area.name}` : ''
|
||
// if (item.addressDetail) item.fullAddress += item.addressDetail
|
||
return item
|
||
})
|
||
}
|
||
});
|
||
},
|
||
// 页面数据初始化函数
|
||
init(options) {
|
||
this.getSpotGoods()
|
||
this.getEnquirySheetList()
|
||
this.checkExpiringNotaryPayList()
|
||
// this.getBuyerArticle()
|
||
// this.getArticle()
|
||
// this.geSellerArticle()
|
||
this.getCategoryTreeData()
|
||
this.getArticleList()
|
||
this.getLatestCompanyList()
|
||
this.getAd3()
|
||
this.getAd4()
|
||
this.getAd5()
|
||
this.getAd6()
|
||
this.getAd7()
|
||
this.getAd8()
|
||
},
|
||
navTo(path) {
|
||
vk.navigateTo(path);
|
||
},
|
||
async checkExpiringNotaryPayList() {
|
||
if (!vk.getVuex('$user.userInfo._id')) return
|
||
try {
|
||
const res = await vk.callFunction({
|
||
url: 'client/order/kh/getExpiringNotaryPayList',
|
||
loading: false,
|
||
})
|
||
const count = res.data && res.data.count ? res.data.count : 0
|
||
if (!count) return
|
||
this.$confirm(`您有${count}笔付款申请将在24小时内自动划付，请及时处理。`, '付款申请即将到期', {
|
||
confirmButtonText: '立即处理',
|
||
cancelButtonText: '稍后处理',
|
||
showCancelButton: true,
|
||
type: 'warning',
|
||
}).then(() => {
|
||
vk.navigateTo({url: '/pages/order/order?menuIndex=1'})
|
||
}).catch(() => {})
|
||
} catch (err) {
|
||
console.error('checkExpiringNotaryPayList error:', err)
|
||
}
|
||
},
|
||
getArticleList() {
|
||
const otherArticleIdList = []
|
||
this.articleList.forEach((item, index) => {
|
||
otherArticleIdList.push(item.id)
|
||
})
|
||
otherArticleIdList.push('6573d7bde0ec19b5047ff941')
|
||
otherArticleIdList.push('6573d7c3e0ec19b5047ffa8c')
|
||
this.sellerArticleList = []
|
||
this.buyerArticleList = []
|
||
this.articleList.forEach((item, index) => {
|
||
this.articleList[index].list = []
|
||
})
|
||
vk.callFunction({
|
||
url: 'client/otherArticle/list/pub/getList',
|
||
data: {
|
||
pageIndex: 1,
|
||
pageSize: 200,
|
||
parentId: otherArticleIdList
|
||
},
|
||
success: (data) => {
|
||
data.rows.forEach(item => {
|
||
console.log(item.parentId)
|
||
if (item.parentId === '6573d7bde0ec19b5047ff941') this.sellerArticleList.push(item)
|
||
else if (item.parentId === '6573d7c3e0ec19b5047ffa8c') this.buyerArticleList.push(item)
|
||
this.articleList.forEach((article, articleIndex) => {
|
||
if (article.id === item.parentId) {
|
||
this.articleList[articleIndex].list.push(item)
|
||
}
|
||
})
|
||
})
|
||
}
|
||
});
|
||
},
|
||
// getArticle() {
|
||
// this.articleList.forEach((item, index) => {
|
||
// vk.callFunction({
|
||
// url: 'client/otherArticle/list/pub/getList',
|
||
// data: {
|
||
// pageIndex: 1,
|
||
// pageSize: 5,
|
||
// parentId: item.id,
|
||
// },
|
||
// success: (data) => {
|
||
// this.articleList[index].list = data.rows
|
||
// }
|
||
// });
|
||
// })
|
||
// },
|
||
getCategoryTreeData() {
|
||
vk.callFunction({
|
||
url: 'client/spot/category/pub/getTree',
|
||
title: '请求中...',
|
||
data: {},
|
||
success: (data) => {
|
||
this.allChildCate = []
|
||
data.rows.forEach(item => {
|
||
item.children.forEach(child => {
|
||
this.allChildCate.push(child)
|
||
})
|
||
})
|
||
this.getCompanyList()
|
||
}
|
||
});
|
||
},
|
||
async getCompanyList() {
|
||
const {rows} = await vk.callFunction({
|
||
url: 'client/user/pub/getCompany',
|
||
data: {
|
||
pageIndex: 1,
|
||
pageSize: 10,
|
||
isCoop: 1,
|
||
}
|
||
})
|
||
this.companyList = rows.map(item => {
|
||
item.mainSpotCategory = []
|
||
if (item.company && item.company.mainSpotCategoryIds) {
|
||
this.allChildCate.forEach(child => {
|
||
if (item.company.mainSpotCategoryIds.includes(child._id)) {
|
||
item.mainSpotCategory.push(child.name)
|
||
}
|
||
})
|
||
}
|
||
return item
|
||
})
|
||
|
||
},
|
||
async getLatestCompanyList() {
|
||
const {rows} = await vk.callFunction({
|
||
url: 'client/user/pub/getCompany',
|
||
data: {
|
||
pageIndex: 1,
|
||
pageSize: 8,
|
||
authStatus: 1
|
||
}
|
||
})
|
||
this.latestCompanyList = rows
|
||
},
|
||
openClose() {
|
||
this.$confirm(`该功能暂未开放`, '', {
|
||
cancelButtonText: '关闭',
|
||
showConfirmButton: false
|
||
})
|
||
},
|
||
async getAd3() {
|
||
const res = await vk.callFunction({
|
||
url: 'client/ad/pub/getList',
|
||
data: {
|
||
adKey: 3
|
||
}
|
||
})
|
||
if (res.data) this.ad3 = res.data
|
||
},
|
||
async getAd4() {
|
||
const res = await vk.callFunction({
|
||
url: 'client/ad/pub/getList',
|
||
data: {
|
||
adKey: 4
|
||
}
|
||
})
|
||
if (res.data) this.ad4 = res.data
|
||
},
|
||
async getAd5() {
|
||
const res = await vk.callFunction({
|
||
url: 'client/ad/pub/getList',
|
||
data: {
|
||
adKey: 5
|
||
}
|
||
})
|
||
if (res.data) this.ad5 = res.data
|
||
},
|
||
async getAd6() {
|
||
const res = await vk.callFunction({
|
||
url: 'client/ad/pub/getList',
|
||
data: {
|
||
adKey: 6
|
||
}
|
||
})
|
||
if (res.data) this.ad6 = res.data
|
||
},
|
||
async getAd7() {
|
||
const res = await vk.callFunction({
|
||
url: 'client/ad/pub/getList',
|
||
data: {
|
||
adKey: 7
|
||
}
|
||
})
|
||
if (res.data) this.ad7 = res.data
|
||
},
|
||
async getAd8() {
|
||
const res = await vk.callFunction({
|
||
url: 'client/ad/pub/getList',
|
||
data: {
|
||
adKey: 8
|
||
}
|
||
})
|
||
if (res.data) this.ad8 = res.data
|
||
},
|
||
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.w1200 {
|
||
width: 1200px;
|
||
margin: 20px auto;
|
||
}
|
||
|
||
.register {
|
||
background-color: #3d5fda;
|
||
width: 1200px;
|
||
height: 88px;
|
||
margin: 20px auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.text {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 30px;
|
||
color: #ffffff;
|
||
padding-left: 50px;
|
||
|
||
.divider {
|
||
margin: 0 30px;
|
||
transform: translateX(-10%);
|
||
}
|
||
|
||
.ad-text2 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: 18px;
|
||
|
||
// transform: rotate(0.1turn);
|
||
.yellow {
|
||
color: #fcb800;
|
||
font-size: 25px;
|
||
}
|
||
|
||
.white {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
padding-right: 50px;
|
||
display: flex;
|
||
}
|
||
}
|
||
|
||
.banner-outer {
|
||
}
|
||
|
||
.carousel-img {
|
||
width: 760px;
|
||
height: 365px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.el-divider__text {
|
||
background-color: initial;
|
||
}
|
||
|
||
.el-carousel__item {
|
||
text-align: center;
|
||
}
|
||
|
||
.divider-text {
|
||
color: #393735;
|
||
font-size: 28px;
|
||
padding: 0 20px;
|
||
background-color: #f4f4f4;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.spot-divider-text {
|
||
color: #393735;
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
padding: 0 20px;
|
||
background-color: white;
|
||
}
|
||
|
||
.enquiry-outer {
|
||
width: 1200px;
|
||
margin: 0 auto;
|
||
|
||
.inli-mask {
|
||
padding: 10px;
|
||
height: 400rpx;
|
||
flex: 0 0 232px
|
||
}
|
||
}
|
||
|
||
.show-more {
|
||
clear: both;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #ffffff;
|
||
background-color: #BD3124;
|
||
text-align: center;
|
||
width: 150px;
|
||
margin: 0 auto;
|
||
height: 40px;
|
||
cursor: pointer;
|
||
|
||
.el-icon-view {
|
||
font-size: 18px;
|
||
padding-right: 5px;
|
||
}
|
||
}
|
||
|
||
.spot-outer {
|
||
width: 1200px;
|
||
margin: 0 auto;
|
||
background-color: white;
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.hzsj-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
padding: 20px 0;
|
||
|
||
.item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 265px;
|
||
height: 120px;
|
||
margin-right: 10px;
|
||
margin-bottom: 10px;
|
||
cursor: pointer;
|
||
|
||
.top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-bottom: 15px;
|
||
border-bottom: 1px solid #f3f3f3;
|
||
|
||
.logo {
|
||
//padding: 8px;
|
||
background-color: #fff;
|
||
width: 60px;
|
||
height: 60px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #ffffff;
|
||
border-radius: 8px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.company {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
|
||
.compnay-name {
|
||
color: #333333;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.company-desc {
|
||
color: #808080;
|
||
font-size: 12px;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
word-break: break-all;
|
||
white-space: nowrap;
|
||
max-width: 120px;
|
||
text-align: right;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-top: 10px;
|
||
|
||
.num {
|
||
text {
|
||
color: #BD3124;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.item:hover {
|
||
border: 1px solid #808080;
|
||
}
|
||
}
|
||
|
||
.goods-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.goods {
|
||
width: 228px;
|
||
//height: 280px;
|
||
background-color: #FFFFFF;
|
||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05);
|
||
text-align: center;
|
||
//margin-right: 25px;
|
||
margin-bottom: 25px;
|
||
padding: 10px 20px;
|
||
position: relative;
|
||
|
||
.top {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
background-color: rgba(169, 41, 36, 1);
|
||
padding: 2px 5px;
|
||
border-radius: 0 0 0 5px;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
&-title {
|
||
font-size: 15px;
|
||
color: #101010;
|
||
height: 62px;
|
||
padding-top: 20px;
|
||
font-weight: bold;
|
||
text-overflow: ellipsis;
|
||
-o-text-overflow: ellipsis;
|
||
-webkit-line-clamp: 2;
|
||
}
|
||
|
||
&-stock {
|
||
font-size: 12px;
|
||
color: #BD3124;
|
||
}
|
||
|
||
&-address {
|
||
font-size: 12px;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
&-image {
|
||
width: 100%;
|
||
height: 70px;
|
||
margin: 0 auto;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
&-company {
|
||
color: #4F4F4F;
|
||
font-size: 14px;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
&-buy {
|
||
width: 108px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
color: rgba(169, 41, 36, 1);
|
||
font-size: 13px;
|
||
text-align: center;
|
||
font-family: Roboto;
|
||
border: 1px solid rgba(169, 41, 36, 1);
|
||
margin: 0 auto;
|
||
cursor: pointer;
|
||
}
|
||
|
||
|
||
.goods-address {
|
||
color: gray;
|
||
height: 35px;
|
||
}
|
||
|
||
}
|
||
|
||
.detail-num .company {
|
||
font-size: 15px !important;
|
||
line-height: 2em;
|
||
width: 100%;
|
||
}
|
||
|
||
.ad-bottom {
|
||
width: 1200px;
|
||
margin: 40px auto;
|
||
|
||
.item {
|
||
margin: 3px 0;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.wrap {
|
||
flex-wrap: wrap;
|
||
}
|
||
}
|
||
|
||
.register-count {
|
||
width: 1200px;
|
||
margin: auto;
|
||
}
|
||
|
||
.card-title {
|
||
color: #BD3124;
|
||
}
|
||
|
||
.clearfix {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.news-list {
|
||
//width: 330px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: self-start;
|
||
line-height: 1.8em;
|
||
}
|
||
|
||
.news-card {
|
||
.news-img {
|
||
image {
|
||
width: 200px;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
display: flex;
|
||
|
||
.tabs {
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.news-list {
|
||
width: 330px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: self-start;
|
||
line-height: 1.8em;
|
||
// .ellipsis {
|
||
// width: 320px;
|
||
// display: flex;
|
||
// flex-direction: column;
|
||
// align-items: self-start;
|
||
// overflow: hidden;
|
||
// white-space: nowrap;
|
||
// text-overflow: ellipsis;
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
|
||
.jrfw-img {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex: 1;
|
||
|
||
.jrfw-row {
|
||
width: 100%;
|
||
|
||
}
|
||
|
||
height: 184px;
|
||
|
||
image {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.jrfw-img-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex: 1;
|
||
|
||
.info {
|
||
.title {
|
||
font-weight: 400;
|
||
font-size: 17px;
|
||
}
|
||
|
||
.desc {
|
||
color: #666666;
|
||
|
||
text {
|
||
font-size: 20px;
|
||
color: #BD3124;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pic {
|
||
width: 156px;
|
||
|
||
image {
|
||
width: 156px;
|
||
height: 136px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.transaction-card {
|
||
.item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
height: 150px;
|
||
|
||
.p1 {
|
||
font-size: 20px;
|
||
font-weight: 500;
|
||
|
||
i {
|
||
font-size: 20px;
|
||
padding: 0 4px;
|
||
}
|
||
}
|
||
|
||
.p2 {
|
||
.line {
|
||
width: 40px;
|
||
height: 3px;
|
||
border-radius: 100px;
|
||
background-color: #BD3124;
|
||
}
|
||
}
|
||
|
||
.p3 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
text-align: center;
|
||
font-size: 15px;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
|
||
.transaction-card:hover {
|
||
background-color: #BD3124;
|
||
|
||
.p1 {
|
||
color: #ffffff;
|
||
}
|
||
|
||
.p2 {
|
||
.line {
|
||
width: 40px;
|
||
height: 3px;
|
||
border-radius: 100px;
|
||
background-color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.p3 {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.server-card2 {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.item {
|
||
width: 400px;
|
||
height: 420px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
|
||
i {
|
||
color: #ffffff;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.p4 {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.text {
|
||
display: none;
|
||
}
|
||
|
||
}
|
||
|
||
.b1 {
|
||
background: url('/static/images/index/god1hover.jpg');
|
||
background-position: center;
|
||
background-size: 150%;
|
||
}
|
||
|
||
.b1:hover {
|
||
width: 380px;
|
||
/* 添加过渡属性效果 */
|
||
transition: width .1s linear;
|
||
|
||
.text {
|
||
display: block;
|
||
color: #ffffff;
|
||
font-size: 24px;
|
||
padding-top: 10px;
|
||
}
|
||
}
|
||
|
||
.b2 {
|
||
background: url('/static/images/god4hover.jpg');
|
||
background-position: center;
|
||
background-size: 150%;
|
||
}
|
||
|
||
.b2:hover {
|
||
width: 380px;
|
||
/* 添加过渡属性效果 */
|
||
transition: width .1s linear;
|
||
|
||
.text {
|
||
display: block;
|
||
color: #ffffff;
|
||
font-size: 24px;
|
||
padding-top: 10px;
|
||
}
|
||
}
|
||
|
||
.b3 {
|
||
background: url('/static/images/index/feture-1.jpg');
|
||
background-position: center;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.b3:hover {
|
||
width: 380px;
|
||
/* 添加过渡属性效果 */
|
||
transition: width .1s linear;
|
||
|
||
.text {
|
||
display: block;
|
||
color: #ffffff;
|
||
font-size: 24px;
|
||
padding-top: 10px;
|
||
}
|
||
}
|
||
|
||
.b4 {
|
||
background: url('/static/images/god3hover.jpg');
|
||
background-position: center;
|
||
background-size: 150%;
|
||
}
|
||
|
||
f
|
||
.b4:hover {
|
||
width: 380px;
|
||
/* 添加过渡属性效果 */
|
||
transition: width .1s linear;
|
||
|
||
.text {
|
||
display: block;
|
||
color: #ffffff;
|
||
font-size: 24px;
|
||
padding-top: 10px;
|
||
}
|
||
}
|
||
|
||
.b5 {
|
||
background: url('/static/images/index/god5hover.jpg');
|
||
background-position: center;
|
||
background-size: 150%;
|
||
}
|
||
|
||
.b5:hover {
|
||
width: 380px;
|
||
/* 添加过渡属性效果 */
|
||
transition: width .1s linear;
|
||
|
||
.text {
|
||
display: block;
|
||
color: #ffffff;
|
||
font-size: 24px;
|
||
padding-top: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.hzsj-bg {
|
||
background: url('https://mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.cdn.bspapp.com/2023/12/10/97087803-46388785-1.jpg');
|
||
background-position: center;
|
||
background-size: 150%;
|
||
}
|
||
|
||
.logo {
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
</style>
|