Commit 173265e5 authored by lei's avatar lei

2025.06.18修改

parent ae9bc87c
......@@ -2,15 +2,26 @@
<template>
<header class="header">
<div
class="banner"
@mouseover="stopCarousel"
@mouseout="startCarousel"
>
<div class="banner" @mouseover="stopCarousel" @mouseout="startCarousel">
<div class="banner-bg">
<el-carousel height="520px" :interval="carouselInterval" arrow="never" :loop="true" indicator-position="inside">
<el-carousel
height="520px"
:interval="carouselInterval"
arrow="never"
:loop="true"
indicator-position="inside"
>
<el-carousel-item v-for="item in bannerList" :key="item.id">
<div style="width: 100%;height: 100%;background-size: cover;background-repeat: no-repeat;background-position: center;" :style="{backgroundImage:`url(${baseApi}${item.url})`}"></div>
<div
style="
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
"
:style="{ backgroundImage: `url(${baseApi}${item.url})` }"
></div>
</el-carousel-item>
</el-carousel>
</div>
......@@ -22,7 +33,7 @@
<div v-if="logo" class="logo">
<img :src="logo" alt="Logo" class="logo-image" />
</div>
<div class="search-bar" v-show="show">
<div class="search-input">
<el-input
......@@ -46,7 +57,7 @@
>
</div> -->
</div>
<HorizontalMenu :activeIndex="activeIndex" class="header-menu"/>
<HorizontalMenu :activeIndex="activeIndex" class="header-menu" />
</div>
</header>
</template>
......@@ -70,7 +81,7 @@ export default {
},
bannerImage: {
type: String,
default:require("~/static/images/banner.png"),
default: require("~/static/images/banner.png"),
},
logo: {
type: String,
......@@ -87,7 +98,7 @@ export default {
isHover: false,
searchKeyword: "",
keywords: this.initialKeywords.slice(), // Add your keywords here
searchCon: '',
searchCon: "",
total: 0,
carouselInterval: 5000,
query: {
......@@ -95,42 +106,40 @@ export default {
pageSize: 10,
searchCon: null,
},
bannerList:[],
bannerList: [],
};
},
created(){
created() {
this.bannerData();
this.pvAdd();
this.uvAdd();
},
methods: {
stopCarousel() {
this.carouselInterval = 0;
this.carouselInterval = 0;
},
startCarousel() {
this.carouselInterval = 5000;
this.carouselInterval = 5000;
},
handleSearch() {
if(this.query.searchCon){
if (this.query.searchCon) {
this.$router.push({
path: `/Search?search=${this.query.searchCon}`,
});
}else{
} else {
this.$message({
message: "请输入要查询的内容",
type: "error",
});
return
return;
}
},
keywordClick(keyword){
this.$router.push({
path: `/Search?search=${keyword}`,
});
keywordClick(keyword) {
this.$router.push({
path: `/Search?search=${keyword}`,
});
},
async bannerData(){
async bannerData() {
try {
let that = this;
const response = await sendRequest(
......@@ -142,24 +151,18 @@ export default {
console.error("Error fetching data:", error);
}
},
async pvAdd(){
async pvAdd() {
try {
let that = this;
const response = await sendRequest(
`/business/screening/pv`,
"get"
);
const response = await sendRequest(`/business/screening/pv`, "get");
} catch (error) {
console.error("Error fetching data:", error);
}
},
async uvAdd(){
async uvAdd() {
try {
let that = this;
const response = await sendRequest(
`/business/screening/uv`,
"get"
);
const response = await sendRequest(`/business/screening/uv`, "get");
} catch (error) {
console.error("Error fetching data:", error);
}
......@@ -182,17 +185,17 @@ export default {
height: 520px;
// background: url(~/static/images/banner.png) no-repeat center;
// background-size: cover;
.ysjszx{
.ysjszx {
position: absolute;
right: 0;
bottom: -4px;
}
.banner-bg{
.banner-bg {
position: absolute;
width: 100%;
height: 100%;
left:0;
top:0;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 0;
......@@ -206,7 +209,7 @@ export default {
}
.logo {
width: 245px;
width: 350px;
height: 73px;
position: absolute;
top: 30px;
......@@ -230,7 +233,7 @@ export default {
overflow: hidden;
span {
cursor: pointer;
color:#fff;
color: #fff;
&:first-child {
cursor: context-menu;
}
......@@ -262,39 +265,37 @@ export default {
font-size: 24px;
}
::v-deep .el-input__inner {
background-color: rgb(1 82 147 / 30%);
background-image: none;
border: 1px solid rgb(1 82 147 / 30%);
height: 50px;
line-height: 50px;
color:#fff;
&::-webkit-input-placeholder {
color: #fff;
}
color: #fff;
&::-webkit-input-placeholder {
color: #fff;
}
}
}
.header-menu{
.header-menu {
position: absolute;
bottom:0;
left:0;
bottom: 0;
left: 0;
right: 0;
}
::v-deep .el-carousel__indicators--horizontal{
::v-deep .el-carousel__indicators--horizontal {
bottom: 86px;
z-index: 77;
}
::v-deep .el-carousel__button{
::v-deep .el-carousel__button {
width: 8px;
height: 8px;
border-radius: 50%;
}
::v-deep .el-carousel__indicator--horizontal{
::v-deep .el-carousel__indicator--horizontal {
padding: 12px 6px;
}
.inner{
.inner {
height: 50%;
}
</style>
......@@ -16,11 +16,11 @@ export default {
link: [
// { rel: 'stylesheet', href: 'https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css' },
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css' },
{ rel: 'stylesheet', href: '/css/swiper-bundle.min.css' },
],
script: [
{ src: 'https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js', body: true },
{ src: 'js/swiper-bundle.min.js', body: true },
{
type: 'text/javascript',
src: '/js/sj.js',
......@@ -31,7 +31,7 @@ export default {
src: '/js/echarts.min.js',
body: true,
},
{ src: '/js/font.js', body: true },
// { src: '/js/qrcode.js', body: true },
// { src: '~plugins/amap.js', ssr: false }
......@@ -79,14 +79,15 @@ export default {
},
env: {
VUE_APP_File_VIEW: "https://cfkyw-package.oss-cn-beijing.aliyuncs.com",
API_URL: process.env.API_URL || '/prod-api',
// API_URL: "http://192.168.2.16:12051/chkq" || '/prod-api',
API_URL: "https://www.cfkyw.com.cn/prod-api" || '/prod-api',
GLOBAL_VARIABLE: {
company:{
name:'赤峰矿业(集团)有限责任公司',
phone:'(0476)567 8669',
email:'50215148258@qq.com',
address:'松山区长胜路与玉龙大街交叉口南100米',
contacts:'吕先生'
company: {
name: '赤峰矿业(集团)有限责任公司',
phone: '(0476)567 8669',
email: '50215148258@qq.com',
address: '松山区长胜路与玉龙大街交叉口南100米',
contacts: '吕先生'
}
}
},
......
<template>
<div class="news cfkqbg">
<BackToTopButton />
<Header :activeIndex="99"/>
<Header :activeIndex="99" />
<div class="m2zrCon m2pubCon background-attachment">
<div class="container">
<div class="inner">
......@@ -28,9 +28,11 @@
<div class="news-detail-file" v-if="content.file">
相关文件:
<p v-for="(file, index) in content.file" :key="index">
<a :href="`/prod-api${file}`" target="_blank">{{
content.fileName[index]
}}</a>
<a
:href="`https://cfkyw-package.oss-cn-beijing.aliyuncs.com/${file}`"
target="_blank"
>{{ content.fileName[index] }}</a
>
</p>
<el-divider></el-divider>
......@@ -96,6 +98,13 @@ export default {
"get"
);
this.content = response.data;
// 进行字符串替换操作
if (response.data.chkqCaContent) {
this.content.chkqCaContent = response.data.chkqCaContent.replace(
/\/prod-api/g,
"https://cfkyw-package.oss-cn-beijing.aliyuncs.com/"
);
}
this.pageTitle = response.data.chkqCaTitle;
} catch (error) {
console.error("Error fetching data:", error);
......@@ -152,4 +161,4 @@ export default {
width: 1250px;
}
}
</style>
\ No newline at end of file
</style>
<template>
<div class="news cfkqbg">
<BackToTopButton />
<Header :activeIndex="99"/>
<Header :activeIndex="99" />
<div class="m2zrCon m2pubCon background-attachment">
<div class="container">
<div class="inner">
<div class="news-breadcrumb">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }"
>首页</el-breadcrumb-item
>
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>有色金属产业链</el-breadcrumb-item>
<el-breadcrumb-item>{{ pageTitle }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</div>
<div class="inner news-con">
<div class="inner news-con">
<div class="news-detail-title">{{ content.ippTitle }}</div>
<el-divider></el-divider>
<div v-html="content.ippContent" class="detail-content"></div>
......@@ -24,9 +21,11 @@
<div class="news-detail-file" v-if="content.file">
相关文件:
<p v-for="(file, index) in content.file" :key="index">
<a :href="`/prod-api${file}`" target="_blank">{{
content.fileName[index]
}}</a>
<a
:href="`https://cfkyw-package.oss-cn-beijing.aliyuncs.com/${file}`"
target="_blank"
>{{ content.fileName[index] }}</a
>
</p>
<el-divider></el-divider>
......@@ -92,6 +91,13 @@ export default {
"get"
);
this.content = response.data;
// 进行字符串替换操作
if (response.data.chkqCaContent) {
this.content.chkqCaContent = response.data.chkqCaContent.replace(
/\/prod-api/g,
"https://cfkyw-package.oss-cn-beijing.aliyuncs.com/"
);
}
this.pageTitle = response.data.ippTitle;
} catch (error) {
console.error("Error fetching data:", error);
......@@ -128,49 +134,46 @@ export default {
}
.news-detail-title {
margin-bottom: 20px;
}
.detailbro-info{
.detailbro-info {
display: flex;
justify-content: space-between;
align-items: center;
.news-detail-share {
font-size: 16px;
margin-bottom: 0px;
span{
span {
display: inline-block;
margin-right: 10px;
}
a{
a {
display: inline-block;
padding: 0;
margin: 0 4px;
height: 26px;
width: 26px;
}
#wx{
#wx {
background: url(~/static/images/cf_bshare_icon01.png) no-repeat center;
}
#wb{
#wb {
background: url(~/static/images/cf_bshare_icon02.png) no-repeat center;
}
#kj{
#kj {
background: url(~/static/images/cf_bshare_icon03.png) no-repeat center;
}
}
.detail-content p {
font-size: 16px;
width: 100%;
}
}
.el-divider--horizontal{
.el-divider--horizontal {
margin-top: 10px;
}
.news-con{
box-shadow: 3px 3px 6px 2px rgba(0, 0, 0, .2);
padding:60px;
.news-con {
box-shadow: 3px 3px 6px 2px rgba(0, 0, 0, 0.2);
padding: 60px;
}
@media (min-width: 1200px) {
.inner {
......@@ -182,8 +185,7 @@ export default {
width: 1250px;
}
}
.cfkqbg{
.cfkqbg {
background: none;
}
</style>
\ No newline at end of file
</style>
<template>
<div class="news cfkqbg">
<BackToTopButton />
<Header :activeIndex="99"/>
<Header :activeIndex="99" />
<div class="m2zrCon m2pubCon background-attachment">
<div class="container">
<div class="inner">
<div class="news-breadcrumb">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }"
>首页</el-breadcrumb-item
>
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>矿业研发招商政策</el-breadcrumb-item>
<el-breadcrumb-item>{{ pageTitle }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</div>
<div class="inner news-con">
<div class="inner news-con">
<div class="news-detail-title">{{ content.ippTitle }}</div>
<!-- <div class="news-detail-share">
<span>来源:{{ content.newsOrigin }}</span>
......@@ -29,9 +26,11 @@
<div class="news-detail-file" v-if="content.file">
相关文件:
<p v-for="(file, index) in content.file" :key="index">
<a :href="`/prod-api${file}`" target="_blank">{{
content.fileName[index]
}}</a>
<a
:href="`https://cfkyw-package.oss-cn-beijing.aliyuncs.com/${file}`"
target="_blank"
>{{ content.fileName[index] }}</a
>
</p>
<el-divider></el-divider>
......@@ -97,6 +96,13 @@ export default {
"get"
);
this.content = response.data;
// 进行字符串替换操作
if (response.data.ippContent) {
this.content.ippContent = response.data.ippContent.replace(
/\/prod-api/g,
"https://cfkyw-package.oss-cn-beijing.aliyuncs.com/"
);
}
this.pageTitle = response.data.ippTitle;
} catch (error) {
console.error("Error fetching data:", error);
......@@ -133,49 +139,46 @@ export default {
}
.news-detail-title {
margin-bottom: 20px;
}
.detailbro-info{
.detailbro-info {
display: flex;
justify-content: space-between;
align-items: center;
.news-detail-share {
font-size: 16px;
margin-bottom: 0px;
span{
span {
display: inline-block;
margin-right: 10px;
}
a{
a {
display: inline-block;
padding: 0;
margin: 0 4px;
height: 26px;
width: 26px;
}
#wx{
#wx {
background: url(~/static/images/cf_bshare_icon01.png) no-repeat center;
}
#wb{
#wb {
background: url(~/static/images/cf_bshare_icon02.png) no-repeat center;
}
#kj{
#kj {
background: url(~/static/images/cf_bshare_icon03.png) no-repeat center;
}
}
.detail-content p {
font-size: 16px;
width: 100%;
}
}
.el-divider--horizontal{
.el-divider--horizontal {
margin-top: 10px;
}
.news-con{
box-shadow: 3px 3px 6px 2px rgba(0, 0, 0, .2);
padding:60px;
.news-con {
box-shadow: 3px 3px 6px 2px rgba(0, 0, 0, 0.2);
padding: 60px;
}
@media (min-width: 1200px) {
.inner {
......@@ -187,8 +190,7 @@ export default {
width: 1250px;
}
}
.cfkqbg{
.cfkqbg {
background: none;
}
</style>
\ No newline at end of file
</style>
<template>
<div class="news cfkqbg">
<BackToTopButton />
<Header :activeIndex="6"/>
<Header :activeIndex="6" />
<!-- <QRCodeComponent text="https://www.example.com" /> -->
<div class="m2zrCon m2pubCon background-attachment">
<div class="container">
<div class="inner">
<div class="news-breadcrumb">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }"
>首页</el-breadcrumb-item
>
<el-breadcrumb-item>新闻资讯</el-breadcrumb-item>
<el-breadcrumb-item>{{ pageTitle }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="news-breadcrumb">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>新闻资讯</el-breadcrumb-item>
<el-breadcrumb-item>{{ pageTitle }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</div>
<div class="inner news-con">
<div class="news-detail-title">{{ content.newsTitle }}</div>
<div class="detailbro-info ">
<div class="detailbro-info">
<div class="news-detail-share">
<span>发布时间:{{ content.releaseTime }}</span>
<span>来源:{{ content.newsOrigin }}</span>
......@@ -27,11 +24,24 @@
</div>
<div class="news-detail-share">
<span>分享到:</span>
<a title="分享到QQ好友" id="wx" class="cup bshare-qqim" @click="shareQQ();"></a>
<a title="分享到新浪微博" id="wb" class="cup bshare-sinaminiblog" @click="shareWb();"></a>
<a title="分享到QQ空间" id="kj" class="cup bshare-qzone" @click="shareQQzone();"></a>
<a
title="分享到QQ好友"
id="wx"
class="cup bshare-qqim"
@click="shareQQ()"
></a>
<a
title="分享到新浪微博"
id="wb"
class="cup bshare-sinaminiblog"
@click="shareWb()"
></a>
<a
title="分享到QQ空间"
id="kj"
class="cup bshare-qzone"
@click="shareQQzone()"
></a>
</div>
<!-- <span>分享:<span @click="shareQQ">qq</span></span> -->
</div>
......@@ -41,9 +51,11 @@
<div class="news-detail-file" v-if="content.file">
相关文件:
<p v-for="(file, index) in content.file" :key="index">
<a :href="`/prod-api${file}`" target="_blank">{{
content.fileName[index]
}}</a>
<a
:href="`https://cfkyw-package.oss-cn-beijing.aliyuncs.com/${file}`"
target="_blank"
>{{ content.fileName[index] }}</a
>
</p>
<el-divider></el-divider>
......@@ -57,7 +69,7 @@
<script>
import axios from "axios";
import { shareQQzone,qq } from "~/utils/tyler";
import { shareQQzone, qq } from "~/utils/tyler";
import CustomHeader from "~/components/CustomHeader.vue";
// import QRCodeComponent from "~/components/QRCodeComponent.vue";
import sendRequest from "~/utils/request.js";
......@@ -103,15 +115,20 @@ export default {
this.pageView(this.$route.query.id);
},
methods: {
shareQQzone(){
shareQQzone({title:this.pageTitle})
shareQQzone() {
shareQQzone({ title: this.pageTitle });
},
shareQQ(){
qq({title:this.pageTitle})
shareQQ() {
qq({ title: this.pageTitle });
},
shareWb(){
shareWb() {
let currUrl = window.location.href;
window.open('http://service.weibo.com/share/share.php?url=' + currUrl + '&title=' + this.pageTitle);
window.open(
"http://service.weibo.com/share/share.php?url=" +
currUrl +
"&title=" +
this.pageTitle
);
},
async fetchData() {
try {
......@@ -121,6 +138,10 @@ export default {
"get"
);
this.content = response.data;
this.content.newsContent = response.data.newsContent.replace(
/\/prod-api/g,
"https://cfkyw-package.oss-cn-beijing.aliyuncs.com"
);
this.pageTitle = response.data.newsTitle;
} catch (error) {
console.error("Error fetching data:", error);
......@@ -157,49 +178,46 @@ export default {
}
.news-detail-title {
margin-bottom: 20px;
}
.detailbro-info{
.detailbro-info {
display: flex;
justify-content: space-between;
align-items: center;
.news-detail-share {
font-size: 16px;
margin-bottom: 0px;
span{
span {
display: inline-block;
margin-right: 10px;
}
a{
a {
display: inline-block;
padding: 0;
margin: 0 4px;
height: 26px;
width: 26px;
}
#wx{
#wx {
background: url(~/static/images/cf_bshare_icon01.png) no-repeat center;
}
#wb{
#wb {
background: url(~/static/images/cf_bshare_icon02.png) no-repeat center;
}
#kj{
#kj {
background: url(~/static/images/cf_bshare_icon03.png) no-repeat center;
}
}
.detail-content p {
font-size: 16px;
width: 100%;
}
}
.el-divider--horizontal{
.el-divider--horizontal {
margin-top: 10px;
}
.news-con{
box-shadow: 3px 3px 6px 2px rgba(0, 0, 0, .2);
padding:60px;
.news-con {
box-shadow: 3px 3px 6px 2px rgba(0, 0, 0, 0.2);
padding: 60px;
}
@media (min-width: 1200px) {
.inner {
......@@ -211,8 +229,7 @@ export default {
width: 1250px;
}
}
.cfkqbg{
.cfkqbg {
background: none;
}
</style>
\ No newline at end of file
</style>
<template>
<div class="goods-list">
<BackToTopButton />
<Header :activeIndex="5"/>
<Header :activeIndex="5" />
<CommonDialog
:show="dialogVisible"
@close-dialog="handleCloseDialog"
:omDemandName="omDemandName"
/>
<div class="wrapper">
<h1 style="font-size: 16px;"><span style="cursor: pointer;" @click="herfSup">供求信息</span> > 产品列表>{{ categoryName }}</h1>
<h1 style="font-size: 16px">
<span style="cursor: pointer" @click="herfSup">供求信息</span> >
产品列表>{{ categoryName }}
</h1>
<article>
<section class="infomation">
<div class="table">
<div class="search">
<!-- <div class="input-search">
<el-input placeholder="请输入产品名称" v-model="searchForm.name" class="input-with-select" @keyup.enter.native="handleSearch(searchForm.productName)" prefix-icon="el-icon-search">
......@@ -50,7 +51,11 @@
/>
</el-select>
</el-form-item>
<el-form-item label="二级类目" prop="industryLe2" v-if="searchForm.industryLe1">
<el-form-item
label="二级类目"
prop="industryLe2"
v-if="searchForm.industryLe1"
>
<el-select
v-model="searchForm.industryLe2"
placeholder="二级类目"
......@@ -65,7 +70,6 @@
</el-select>
</el-form-item>
<el-form-item>
<el-button
type="primary"
......@@ -74,24 +78,30 @@
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
<el-button
icon="el-icon-refresh"
size="mini"
@click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
</div>
<div class="list" v-if="productList">
<ul>
<li v-for="(item, index) in productList" :key="index">
<div @click="goto(item.id)">
<img :src="`${baseApi}${item.appearanceImg&&item.appearanceImg[0]}`" alt="" />
<img
:src="`${baseApi}${
item.appearanceImg && item.appearanceImg[0]
}`"
alt=""
/>
</div>
<h2 @click="goto(item.id)">{{item.productName}}</h2>
<h2 @click="goto(item.id)">{{ item.productName }}</h2>
<h4 @click="openDia(item.productName)">联系平台</h4>
</li>
</ul>
</div>
<div class="list" v-if="!productList">暂无数据</div>
</div>
......@@ -123,9 +133,9 @@ export default {
},
data() {
return {
goodsName:'',
categoryName:'',
showCategoryName:false,
goodsName: "",
categoryName: "",
showCategoryName: false,
baseApi: process.env.VUE_APP_File_VIEW,
dialogVisible: false,
omDemandName: "cs",
......@@ -135,9 +145,8 @@ export default {
commonCode4hangye: [],
productList: [],
searchForm: {},
allLevel:[],
productTypeList:[],
allLevel: [],
productTypeList: [],
};
},
watch: {
......@@ -147,7 +156,7 @@ export default {
},
deep: true,
},
'searchForm.industryLe1'(newVal) {
"searchForm.industryLe1"(newVal) {
// 当一级类目变化时,清空二级类目
// this.searchForm.industryLe2 = null;
},
......@@ -164,12 +173,11 @@ export default {
: [];
},
},
created(){
created() {
this.resetForm();
},
async mounted() {
await this.getProductTypeList(); // 确保类型数据加载完成
await this.getProductTypeList(); // 确保类型数据加载完成
if (this.$route.query.industryLe2) {
// 如果 industryLe2 存在,优先使用 industryLe2
......@@ -183,8 +191,8 @@ export default {
);
if (found) {
// 找到对应的父级类目 industryLe1 并赋值
this.$set(this.searchForm, 'industryLe1', firstLevel.id);
this.$set(this.searchForm, 'industryLe2', industryLe2);
this.$set(this.searchForm, "industryLe1", firstLevel.id);
this.$set(this.searchForm, "industryLe2", industryLe2);
console.log("industryLe1:", this.searchForm.industryLe1);
console.log("industryLe2:", this.searchForm.industryLe2);
......@@ -194,38 +202,45 @@ export default {
}
} else if (this.$route.query.industryLe1) {
// 如果 industryLe2 不存在,使用 industryLe1
this.$set(this.searchForm, 'industryLe1', Number(this.$route.query.industryLe1));
this.$set(
this.searchForm,
"industryLe1",
Number(this.$route.query.industryLe1)
);
}
this.getCommoncode();
this.getProductList();
},
methods: {
resetQuery(){
resetQuery() {
this.resetForm();
},
resetForm(){
resetForm() {
this.searchForm = {
industryLe1: null,
industryLe2: null,
pageNum: 1,
pageSize: 10,
productName: null,
}
};
},
goto(id) {
this.$router.push({ path: `/Supply/det?id=${id}` });
},
le1Change(){this.searchForm.industryLe2 = null;},
handleQuery(){},
async handleSearch(){
await sendRequest(
"/business/equipmentProducts/listAll?name=" + this.searchForm.productName,
le1Change() {
this.searchForm.industryLe2 = null;
},
handleQuery() {},
async handleSearch() {
await sendRequest(
"/business/equipmentProducts/listAll?name=" +
this.searchForm.productName,
"get"
);
this.getProductList(this.searchForm.productName);
},
herfSup(){
herfSup() {
this.$router.push({
path: `/Supply`,
});
......@@ -237,31 +252,27 @@ export default {
async getProductTypeList() {
const result = await sendRequest(
"/business/commodityCategory/tree",
"get",
"get"
);
this.productTypeList = result.data || [];
},
async getHangyeList() {
const result = await sendRequest(
"/business/commodityCategory/list",
"get"
);
if (result.rows && result.rows.length) {
this.allLevel = result.rows;
}
}
},
async getProductList() {
let form={
productName:this.searchForm.productName,
}
if(this.searchForm.industryLe2){
form.industry = this.searchForm.industryLe2
}else{
form.industry = this.searchForm.industryLe1
let form = {
productName: this.searchForm.productName,
};
if (this.searchForm.industryLe2) {
form.industry = this.searchForm.industryLe2;
} else {
form.industry = this.searchForm.industryLe1;
}
const result = await sendRequest(
"/business/equipmentProducts/listAll",
......@@ -296,7 +307,7 @@ export default {
dictLabel: "全部",
dictValue: "",
});
this.mapSearchCommonCode();
},
},
......@@ -306,8 +317,8 @@ export default {
<style lang="scss" scoped>
$color: #479aff;
$border-color: #f1f1f1;
.goods-list{
background-color:#F3F3F3;
.goods-list {
background-color: #f3f3f3;
}
.vertical-center {
display: flex;
......@@ -349,9 +360,14 @@ $border-color: #f1f1f1;
color: #333333;
line-height: 35px;
cursor: pointer;
width: 216px;
display: block;
padding: 0px 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
h3 {
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: 400;
......@@ -390,9 +406,9 @@ $border-color: #f1f1f1;
.search {
width: 100%;
margin-bottom: 20px;
border-bottom: 3px solid #F3F3F3;
border-bottom: 3px solid #f3f3f3;
padding: 30px;
.input-search{
.input-search {
width: 30%;
}
......@@ -432,11 +448,10 @@ $border-color: #f1f1f1;
border-radius: 5px;
&.active {
font-weight: bold;
background: #EEEEEE;
background: #eeeeee;
}
&:hover{
background: rgba(238, 238, 238,.5);
&:hover {
background: rgba(238, 238, 238, 0.5);
}
}
}
......
......@@ -11,7 +11,8 @@
:title="conDia.lifeCycleName"
:visible.sync="showConfirmButton"
width="30%"
center>
center
>
<span>
{{ conDia.intro }}
</span>
......@@ -25,10 +26,16 @@
label-position="right"
>
<el-form-item label="姓名:" prop="omContactName">
<el-input v-model="formDia.omContactName" placeholder="请输入联系人姓名"></el-input>
<el-input
v-model="formDia.omContactName"
placeholder="请输入联系人姓名"
></el-input>
</el-form-item>
<el-form-item label="联系方式:" prop="omContactTel">
<el-input v-model="formDia.omContactTel" placeholder="请输入联系方式"></el-input>
<el-input
v-model="formDia.omContactTel"
placeholder="请输入联系方式"
></el-input>
</el-form-item>
<el-form-item label="留言内容:" prop="omInquiryContent">
<el-input
......@@ -37,8 +44,10 @@
placeholder="请输入留言内容"
></el-input>
</el-form-item>
<el-form-item style="display: flex;justify-content: center;">
<el-button type="primary" @click="formSub('formDia')">我要留言</el-button>
<el-form-item style="display: flex; justify-content: center">
<el-button type="primary" @click="formSub('formDia')"
>我要留言</el-button
>
</el-form-item>
</el-form>
</div>
......@@ -54,103 +63,61 @@
</div>
<article class="content_three">
<div class="bd container_new">
<div class="zzbl" style="display: block">
<!-- 轮播详情模块 -->
<div class="swiper mySwiper2 swiper-initialized swiper-vertical">
<div
class="zzbl"
@mouseenter="clearAutoPlay"
@mouseleave="startAutoPlay"
>
<!-- 左侧导航菜单 -->
<div class="nav-menu">
<div
class="swiper-wrapper"
id="certificationList"
aria-live="polite"
style="
transition-duration: 0ms;
transition-delay: 0ms;
transform: translate3d(0px, 0px, 0px);
"
v-for="(item, index) in lifeServiceList"
:key="item.lifeCycleId"
:class="[
'menu-item',
{ active: currentLifeServiceItemIndex === index },
]"
@click="handleMenuClick(index)"
>
<div
class="swiper-slide"
style="height: 435px; margin-bottom: 10px"
v-for="item1 in lifeServiceList"
:key="item1.lifeCycleId"
>
<div
style="
overflow-y: scroll;
display: flex;
max-height: 430px;
justify-content: space-evenly;
flex-wrap: wrap;
width: 100%;
"
>
<div
v-for="(item1, index) in item1.children"
:key="item1.lifeCycleId"
class="items-class"
>
<img
src="~/static/images/technicalDocking/circle.png"
alt=""
/>
<span @click="showTip(item1)">{{ item1.lifeCycleName }}</span>
</div>
<div class="items-class" v-if="item1.children.length % 2 == 1"></div>
</div>
</div>
<img
v-if="currentLifeServiceItemIndex === index"
:src="`${baseApi}${item.revealIcon}`"
/>
<img v-else :src="`${baseApi}${item.hiddenIcon}`" />
<span>{{ item.lifeCycleName }}</span>
</div>
<div
class="swiper-button-next"
tabindex="0"
role="button"
aria-label="Next slide"
aria-controls="certificationList"
aria-disabled="false"
></div>
<div
class="swiper-button-prev swiper-button-disabled"
tabindex="-1"
role="button"
aria-label="Previous slide"
aria-controls="certificationList"
aria-disabled="true"
></div>
<span
class="swiper-notification"
aria-live="assertive"
aria-atomic="true"
></span>
</div>
<div class="swiper mySwiper">
<div
class="swiper-wrapper"
id="certificationOrg"
style="
transition-duration: 0ms;
transition-delay: 0ms;
transform: translate3d(0px, 0px, 0px);
"
<!-- 右侧内容区域 -->
<div class="content-area">
<!-- 添加v-if确保数据加载完成 -->
<template
v-if="lifeServiceList[currentLifeServiceItemIndex]?.children"
>
<div
class="swiper-slide"
v-for="(item, index) in lifeServiceList"
:key="item.lifeCycleId"
v-for="(subItem, subIndex) in lifeServiceList[
currentLifeServiceItemIndex
].children"
:key="subItem.lifeCycleId"
class="content-item"
>
<!-- @click="currentLifeServiceItemIndex=index" -->
<span
>
<!-- <img :src="`${baseApi}${item.revealIcon}`" alt="" /> -->
<img :src="`${baseApi}${currentLifeServiceItemIndex===index ? item.revealIcon : item.hiddenIcon}`" alt="" />
{{
item.lifeCycleName
}}</span
>
<img src="~/static/images/technicalDocking/circle.png" />
<span @click="showTip(subItem)">{{
subItem.lifeCycleName
}}</span>
</div>
</div>
<!-- 添加占位元素保持双数布局 -->
<div
v-if="
lifeServiceList[currentLifeServiceItemIndex].children
.length %
2 ===
1
"
class="content-item placeholder"
></div>
</template>
</div>
</div>
</div>
......@@ -170,70 +137,82 @@
<div class="mt30"></div>
<div class="tec-com">
<div class="swiper mySwiper3 swiper-initialized swiper-horizontal">
<div
class="swiper-wrapper"
id="certificationList"
aria-live="polite"
style="
transition-duration: 0ms;
transition-delay: 0ms;
transform: translate3d(0px, 0px, 0px);
"
>
<div
class="swiper-wrapper"
id="certificationList"
aria-live="polite"
style="
transition-duration: 0ms;
transition-delay: 0ms;
transform: translate3d(0px, 0px, 0px);
"
class="swiper-slide"
style="height: 435px; margin-bottom: 10px"
v-for="(item, index) in unitList"
:key="index"
>
<div
class="swiper-slide"
style="height: 435px; margin-bottom: 10px"
v-for="(item, index) in unitList"
:key="index"
>
<ul>
<!-- <li v-for="item in unitList" :key="item.chkqCompanyId"><img :src="`${baseApi}${item.chkqCompanyLogo}`" alt="" @click="goto(item.chkqCompanyId)"></li> -->
<li v-for="(subItem, index) in item" :key="index" @click="goto(subItem.id)">
<div class="top">
<div class="left">
<!-- <img :src="`${baseApi}${subItem.caseAvatarList.length ? subItem.caseAvatarList[0] : ''}`" /> -->
<img :src="subItem.caseAvatarList&&subItem.caseAvatarList.length ? baseApi+subItem.caseAvatarList[0] : ''" />
</div>
<div class="right">
<p>{{ subItem.commodityName }}</p>
<p>
<span>{{ subItem.commoditySign }}</span>
</p>
<p>
<span>{{ subItem.registeredAddress }}</span>
</p>
</div>
<!-- <li v-for="item in unitList" :key="item.chkqCompanyId"><img :src="`${baseApi}${item.chkqCompanyLogo}`" alt="" @click="goto(item.chkqCompanyId)"></li> -->
<li
v-for="(subItem, index) in item"
:key="index"
@click="goto(subItem.id)"
>
<div class="top">
<div class="left">
<!-- <img :src="`${baseApi}${subItem.caseAvatarList.length ? subItem.caseAvatarList[0] : ''}`" /> -->
<img
:src="
subItem.caseAvatarList &&
subItem.caseAvatarList.length
? baseApi + subItem.caseAvatarList[0]
: ''
"
/>
</div>
<div class="bottom">
<p class="ellipsis">主营业务:{{ subItem.commodityBusiness }}</p>
<div class="right">
<p>{{ subItem.commodityName }}</p>
<p>
<span>{{ subItem.commoditySign }}</span>
</p>
<p>
<span>{{ subItem.registeredAddress }}</span>
</p>
</div>
</li>
</ul>
</div>
</div>
<div class="bottom">
<p class="ellipsis">
主营业务:{{ subItem.commodityBusiness }}
</p>
</div>
</li>
</ul>
</div>
<div
class="swiper-button-next"
tabindex="0"
role="button"
aria-label="Next slide"
aria-controls="certificationList"
aria-disabled="false"
></div>
<div
class="swiper-button-prev swiper-button-disabled"
tabindex="-1"
role="button"
aria-label="Previous slide"
aria-controls="certificationList"
aria-disabled="true"
></div>
<span
class="swiper-notification"
aria-live="assertive"
aria-atomic="true"
></span>
</div>
<div
class="swiper-button-next"
tabindex="0"
role="button"
aria-label="Next slide"
aria-controls="certificationList"
aria-disabled="false"
></div>
<div
class="swiper-button-prev swiper-button-disabled"
tabindex="-1"
role="button"
aria-label="Previous slide"
aria-controls="certificationList"
aria-disabled="true"
></div>
<span
class="swiper-notification"
aria-live="assertive"
aria-atomic="true"
></span>
</div>
</div>
</section>
</article>
......@@ -262,6 +241,7 @@ export default {
data() {
return {
timer: null, // 新增定时器实例
currentLifeServiceItemIndex: 0,
items: [
{ id: 1, text: "Item 1" },
......@@ -296,9 +276,9 @@ export default {
expertTypeIcons: ["banpo", "kancha", "kuangchu", "map-ruler", "shaixuan"],
dialogVisible: false,
formDia: { omSource: 1, omStatus: "N", omDemandName: null },
showConfirmButton:false,
conDia:{},
formDia:{ omSource: 1, omStatus: "N" },
showConfirmButton: false,
conDia: {},
formDia: { omSource: 1, omStatus: "N" },
rules: {
omContactName: [
{ required: true, message: "请输入姓名", trigger: "blur" },
......@@ -318,84 +298,41 @@ export default {
omInquiryContent: [
{ required: true, message: "请输入需求内容", trigger: "blur" },
],
},
};
},
mounted() {
var VUE = this
this.$nextTick(() => {
this.$wow.init({ animateClass: "animate__animated" });
setTimeout(() => {
var swiper = new Swiper(".mySwiper", {
spaceBetween: 10,
slidesPerView: 5,
freeMode: true,
watchSlidesProgress: true,
direction: "vertical",
on: {
tap: function (swiperEle, event) {
// alert('你碰了Swiper');
const clickedIndex = swiperEle.clickedIndex; // 获取被点击的索引
if (clickedIndex !== undefined) {
swiper.slideTo(clickedIndex, 300, true); // 滑动到点击的那一项,带有动画效果
VUE.currentLifeServiceItemIndex = clickedIndex
}
},
slideChange: function(){
// alert('改变了,activeIndex为'+this.activeIndex);
VUE.currentLifeServiceItemIndex = this.activeIndex
},
},
});
var swiper2 = new Swiper(".mySwiper2", {
spaceBetween: 10,
direction: "vertical",
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
thumbs: {
swiper: swiper,
},
on: {
tap: function (swiperEle, event) {
// alert('你碰了Swiper');
const clickedIndex = swiperEle.clickedIndex; // 获取被点击的索引
if (clickedIndex !== undefined) {
VUE.currentLifeServiceItemIndex = clickedIndex
}
},
slideChange: function(){
// alert('改变了,activeIndex为'+this.activeIndex);
VUE.currentLifeServiceItemIndex = this.activeIndex
},
},
});
var swiper3 = new Swiper(".mySwiper3", {
spaceBetween: 10,
direction: "horizontal",
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
}, 1200);
});
this.startAutoPlay();
this.getUnitTypeList();
this.getExpertList();
this.getLifeCycleList();
},
beforeDestroy() {
this.clearAutoPlay(); // 组件销毁时清除定时器
},
methods: {
startAutoPlay() {
this.timer = setInterval(() => {
this.currentLifeServiceItemIndex =
(this.currentLifeServiceItemIndex + 1) % this.lifeServiceList.length;
}, 3000);
},
clearAutoPlay() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
},
handleMenuClick(index) {
this.currentLifeServiceItemIndex = index;
this.clearAutoPlay(); // 点击时暂停自动播放
},
showTip(item) {
console.log(item,'item')
console.log(item, "item");
this.showConfirmButton = true;
this.conDia = item;
this.omDemandName = item.lifeCycleName
this.formDia.omDemandName = item.lifeCycleName
this.omDemandName = item.lifeCycleName;
this.formDia.omDemandName = item.lifeCycleName;
},
goto(id) {
this.$router.push({ path: `/TechnicalDocking/TecCom?id=${id}` });
......@@ -404,7 +341,6 @@ export default {
this.formDia = { omSource: 1, omStatus: "N" };
this.dialogVisible = true;
this.formDia.omDemandName = val;
},
handleCloseDialog(newState) {
this.dialogVisible = newState;
......@@ -487,9 +423,6 @@ export default {
this.unitList.push(unitsTemp.slice(i, i + 6));
}
console.log(this.unitList);
}
},
async getExpertList() {
......@@ -522,17 +455,17 @@ export default {
},
async formSub(formName) {
let that = this;
if(this.verificationCode !== this.inVerificationCode) {
if (this.verificationCode !== this.inVerificationCode) {
this.$message({
message: "请输入正确验证码",
type: "error",
});
return
return;
}
try {
let that = this;
that.formDia.omSubmitTime = this.getCurrentFormattedTime();
const valid = await new Promise(resolve => {
const valid = await new Promise((resolve) => {
this.$refs[formName].validate(resolve);
});
......@@ -551,7 +484,7 @@ export default {
});
that.formDia = { omSource: 1, omStatus: "N" };
that.showConfirmButton = false
that.showConfirmButton = false;
} else {
that.$message({
message: "请求失败,请重试",
......@@ -599,22 +532,21 @@ export default {
<style lang="scss" scoped>
.content_three {
height: 635px;
margin-top: 41px;
overflow: hidden;
// background-color: rgb(242, 246, 248);
background: linear-gradient(180deg, #EAF2F8 0%, #F7F7F7 100%);
background: linear-gradient(180deg, #eaf2f8 0%, #f7f7f7 100%);
// background: url(../images/content_three_bd_bj.png) no-repeat center bottom;
}
.content_three .bd {
height: 584px;
padding: 40px 0px;
margin-bottom: 10px;
}
.content_three .zzbl {
.zzbl {
display: flex;
gap: 30px;
margin-top: 30px;
height: 470px;
// background-color: #ffffff;
// background-color: linear-gradient(180deg, #EAF2F8 0%, #F7F7F7 100%);
background-color: #fff;
......@@ -626,140 +558,130 @@ export default {
position: relative;
margin-left: auto;
margin-right: auto;
.mySwiper2 {
position: absolute;
left: 40px;
top: 30px;
width: 750px;
padding-left: 370px;
height: 435px;
img {
width: 8px;
height: 8px;
background: #ffffff;
border-radius: 50%;
border: 1px solid #0777d1;
}
span {
}
.swiper-button-next {
width: 85px;
height: 44px;
display: block;
position: absolute;
background: url(~/static/images/technicalDocking/zzbl_next.png) no-repeat
center;
top: 390px;
left: 3px;
}
.swiper-button-prev {
width: 94px;
height: 44px;
display: block;
position: absolute;
background: url(~/static/images/technicalDocking/zzbl_prev.png) no-repeat
center;
top: 390px;
left: 80px;
}
}
.swiper-button-next:after,
.swiper-button-prev:after {
font-family: swiper-icons;
font-size: 0px;
text-transform: none !important;
letter-spacing: 0;
font-variant: initial;
line-height: 1;
}
.mySwiper {
left: 30px;
top: 30px;
padding: 20px;
.nav-menu {
width: 368px;
height: 340px;
z-index: 1;
position: absolute;
.swiper-slide {
float: left;
width: 368px;
height: 60px !important;
line-height: 60px;
background: url(~/static/images/technicalDocking/zzbl_hd_li.png) no-repeat
left center;
.menu-item {
height: 60px;
background: url(~/static/images/technicalDocking/zzbl_hd_li.png) no-repeat;
padding-left: 30px;
display: flex;
align-items: center;
cursor: pointer;
&.active {
background: url(~/static/images/technicalDocking/zzbl_hd_li_on.png)
no-repeat;
span {
color: #fff;
}
}
span {
font-size: 18px;
color: #5C5C5C;
display: block;
padding-left: 30px;
padding-right: 5px;
font-family: Microsoft YaHei;
box-sizing: border-box;
color: #5c5c5c;
cursor: pointer;
display: block;
font-family: Microsoft YaHei;
font-size: 18px;
overflow: hidden;
padding-left: 30px;
padding-right: 5px;
text-overflow: ellipsis;
white-space: nowrap;
}
img {
width: 19px;
height: 18px;
margin-right: 10px;
}
}
.swiper-slide-thumb-active {
background: url(~/static/images/technicalDocking/zzbl_hd_li_on.png)
no-repeat left center;
}
.content-area {
flex: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-height: 430px; // 添加固定高度
overflow-y: auto; // 添加滚动条
.content-item {
display: flex;
align-items: center;
padding: 10px;
// 添加具体尺寸
height: 38px;
padding: 0 10px;
img {
background: #fff;
border: 1px solid #0777d1;
border-radius: 50%;
height: 8px;
width: 8px;
}
span {
color: #ffffff;
font-weight: bold;
box-sizing: border-box;
color: #5c5c5c;
cursor: pointer;
display: block;
float: left;
font-family: "pingguocu";
font-size: 18px;
font-weight: 300;
margin-left: 10px;
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
color: #436ee4;
}
}
&.placeholder {
visibility: hidden; // 隐藏占位元素
}
}
}
}
// 砖家列表轮播样式
.mySwiper3 {
.swiper-slide{
li{
&:hover{
.mySwiper3 {
.swiper-slide {
li {
&:hover {
cursor: pointer;
}
}
}
.swiper-button-next {
background: url(~/static/images/technicalDocking/swiper3next.png) no-repeat
center;
top: 160px;
right: 0px;
width: 27px;
}
.swiper-button-prev {
top: 160px;
left: 0px;
.swiper-button-next {
background: url(~/static/images/technicalDocking/swiper3next.png) no-repeat
center;
top: 160px;
right: 0px;
width: 27px;
background: url(~/static/images/technicalDocking/swiper3prev.png) no-repeat
center;
// top: 390px;
// left: 80px;
}
}
.swiper-button-next:after,
.swiper-button-prev:after {
font-family: swiper-icons;
font-size: 0px;
text-transform: none !important;
letter-spacing: 0;
font-variant: initial;
line-height: 1;
.swiper-button-prev {
top: 160px;
left: 0px;
width: 27px;
background: url(~/static/images/technicalDocking/swiper3prev.png) no-repeat
center;
// top: 390px;
// left: 80px;
}
}
.swiper-button-next:after,
.swiper-button-prev:after {
font-family: swiper-icons;
font-size: 0px;
text-transform: none !important;
letter-spacing: 0;
font-variant: initial;
line-height: 1;
}
</style>
<style lang="scss" scoped>
......@@ -807,7 +729,7 @@ $color: #479aff;
background-color: #fff;
// background-image: url(~/static/images/NEWER/bg_service2.png);
background-size: cover;
height: 660px;
height: 780px;
background-repeat: no-repeat;
margin-bottom: -3px;
@extend .commonMarker;
......@@ -829,7 +751,6 @@ $color: #479aff;
}
}
article {
section {
display: flex;
justify-content: center;
......@@ -1303,8 +1224,8 @@ $color: #479aff;
width: 398px;
margin-bottom: 20px;
height: 143px;
box-shadow: 0px 8px 16px 2px rgba(40,40,40,0.25);
box-shadow: 0px 8px 16px 2px rgba(40, 40, 40, 0.25);
img {
width: 80px;
height: 80px;
......@@ -1315,7 +1236,7 @@ $color: #479aff;
display: flex;
padding-top: 10px;
// padding-left: 10px;
.right{
.right {
margin-right: 30px;
width: 260px;
}
......@@ -1323,7 +1244,6 @@ $color: #479aff;
margin-bottom: 7px;
}
p:nth-child(1) {
font-size: 18px;
font-weight: bold;
white-space: nowrap;
......@@ -1339,9 +1259,10 @@ $color: #479aff;
}
p:nth-child(3) {
color: rgb(107, 107, 107);
span{
span {
display: block;
background: url(~/static/images/technicalDocking/location.png) no-repeat;
background: url(~/static/images/technicalDocking/location.png)
no-repeat;
background-position: 0px 2px;
text-indent: 20px;
color: rgb(126, 126, 126);
......@@ -1378,11 +1299,11 @@ $color: #479aff;
}
}
::v-deep .el-dialog__header{
::v-deep .el-dialog__header {
border-bottom: 1px solid #efefef !important;
}
.items-class{
flex: 0 0 35%;
.items-class {
flex: 0 0 35%;
box-sizing: border-box;
padding: 0px;
display: flex;
......@@ -1391,23 +1312,22 @@ $color: #479aff;
margin-bottom: 28px;
max-width: 250px;
height: 38px;
span{
span {
float: left;
font-size: 18px;
color: #5c5c5c;
font-weight: 300;
margin-left: 10px;
display: block;
font-family: 'pingguocu';
font-family: "pingguocu";
box-sizing: border-box;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 300px;
&:hover{
&:hover {
color: rgb(67, 110, 228);
}
}
}
......
<template>
<div>
<BackToTopButton />
<Header :activeIndex="2"/>
<Header :activeIndex="2" />
<CommonDialog
:show="dialogVisible"
@close-dialog="handleCloseDialog"
......@@ -11,9 +11,7 @@
<article>
<div class="part part6">
<div class="part-tit">
<h3 class="part-title">
<span>重点矿业权</span><span>推荐</span>
</h3>
<h3 class="part-title"><span>重点矿业权</span><span>推荐</span></h3>
</div>
<div class="mt20"></div>
<div class="top-zd">
......@@ -40,7 +38,7 @@
/>
</el-select>
</div>
<div class="tableWrapper" v-show="currentIndex4overview===0">
<div class="tableWrapper" v-show="currentIndex4overview === 0">
<div
class="item"
v-for="(item, index1) in suggestList1"
......@@ -82,7 +80,19 @@
}}
</p>
<p>资源储量:{{ item.reservesScale || "-" }}</p>
<img class="mining-tag" :src="baseApi+getValueByIdAndField(KqTagList,Number(item.miningLable[0]),'picUrl')" alt="" v-if="item.miningLable&&item.miningLable.length>0">
<img
class="mining-tag"
:src="
baseApi +
getValueByIdAndField(
KqTagList,
Number(item.miningLable[0]),
'picUrl'
)
"
alt=""
v-if="item.miningLable && item.miningLable.length > 0"
/>
</div>
<!-- <p>整体转让</p> -->
<!-- <div class="item-right">
......@@ -91,9 +101,8 @@
<div @click="openDia(item.websiteMiningTitle)">联系我们</div>
</div> -->
</div>
</div>
<div class="tableWrapper" v-show="currentIndex4overview===1">
<div class="tableWrapper" v-show="currentIndex4overview === 1">
<div
class="item"
v-for="(item, index1) in suggestList2"
......@@ -134,7 +143,19 @@
}}
</p>
<p>资源储量:{{ item.reservesScale || "-" }}</p>
<img class="mining-tag" :src="baseApi+getValueByIdAndField(KqTagList,Number(item.miningLable[0]),'picUrl')" alt="" v-if="item.miningLable&&item.miningLable.length>0">
<img
class="mining-tag"
:src="
baseApi +
getValueByIdAndField(
KqTagList,
Number(item.miningLable[0]),
'picUrl'
)
"
alt=""
v-if="item.miningLable && item.miningLable.length > 0"
/>
</div>
<!-- <p>整体转让</p> -->
<!-- <div class="item-right">
......@@ -144,7 +165,6 @@
</div> -->
</div>
</div>
</div>
</article>
</div>
......@@ -166,7 +186,7 @@
<script>
// import Footer from '../../../components/Footer.vue'
import sendRequest from "~/utils/request.js";
import { getDictLabelFromVal,filterByFields } from "~/utils/tyler";
import { getDictLabelFromVal, filterByFields } from "~/utils/tyler";
import Footer from "~/components/Footer.vue";
import BackToTopButton from "~/components/BackToTopButton.vue";
import HorizontalMenu from "~/components/header/HorizontalMenu.vue";
......@@ -183,13 +203,13 @@ export default {
},
data() {
return {
page:{
pageNum:1,
pageSize:9
page: {
pageNum: 1,
pageSize: 9,
},
total:0,
minType:'',
minTypeList:[],
total: 0,
minType: "",
minTypeList: [],
dialogVisible: false,
omDemandName: "cs",
suggestList: [],
......@@ -208,10 +228,9 @@ export default {
mineListTotal: 0,
searchForm: {
isRecommendation: "Y",
minType:'全部',
minType: "全部",
},
KqTagList:[],
KqTagList: [],
};
},
watch: {},
......@@ -232,24 +251,25 @@ export default {
methods: {
getDictLabelFromVal,
getValueByIdAndField(arr, id, field) {
const result = arr.find(item => item.id === id);
const result = arr.find((item) => item.id === id);
return result ? result[field] : null;
},
changePage(pageNum) {
console.log(pageNum )
console.log(pageNum);
this.page.pageNum = pageNum;
if(this.currentIndex4overview ===0){
this.suggestList1 = filterByFields(this.suggestList,[{chkqType:"采矿权"}]).slice((pageNum-1)*9, pageNum*9);
}else if(this.currentIndex4overview ===1){
this.suggestList2 = filterByFields(this.suggestList,[{chkqType:"探矿权"}]).slice((pageNum-1)*9, pageNum*9);
if (this.currentIndex4overview === 0) {
this.suggestList1 = filterByFields(this.suggestList, [
{ chkqType: "采矿权" },
]).slice((pageNum - 1) * 9, pageNum * 9);
} else if (this.currentIndex4overview === 1) {
this.suggestList2 = filterByFields(this.suggestList, [
{ chkqType: "探矿权" },
]).slice((pageNum - 1) * 9, pageNum * 9);
}
},
clickVolume(id, index) {
const url = `/Transaction/minDet?id=${id}`;
window.open(url, '_blank'); // '_blank' 表示在新标签页中打开
clickVolume(id, index) {
const url = `/Transaction/minDet?id=${id}`;
window.open(url, "_blank"); // '_blank' 表示在新标签页中打开
},
openDia(val) {
this.dialogVisible = true;
......@@ -259,18 +279,22 @@ export default {
return arr.slice(0, num);
},
changeSuggest(index, item) {
this.searchForm.minType = '全部'
this.searchForm.minType = "全部";
let that = this;
console.log(index, item);
this.page.pageNum = 1;
this.currentIndex4overview = index;
this.suggestType = item.dictValue;
if(index===0){
that.total = filterByFields(that.suggestList,[{chkqType:"采矿权"}]).length;
}else if(index === 1){
that.total = filterByFields(that.suggestList,[{chkqType:"探矿权"}]).length;
if (index === 0) {
that.total = filterByFields(that.suggestList, [
{ chkqType: "采矿权" },
]).length;
} else if (index === 1) {
that.total = filterByFields(that.suggestList, [
{ chkqType: "探矿权" },
]).length;
}
this.changePage(this.page.pageNum)
this.changePage(this.page.pageNum);
},
handleCloseDialog(newState) {
this.dialogVisible = newState;
......@@ -284,47 +308,54 @@ export default {
this.suggestList2 = [];
// 根据所选矿种类型过滤数据
if (val === '全部') {
if (val === "全部") {
// 显示所有数据
this.suggestList1 = filterByFields(this.suggestList, [{ chkqType: "采矿权" }]);
this.suggestList2 = filterByFields(this.suggestList, [{ chkqType: "探矿权" }]);
this.suggestList1 = filterByFields(this.suggestList, [
{ chkqType: "采矿权" },
]);
this.suggestList2 = filterByFields(this.suggestList, [
{ chkqType: "探矿权" },
]);
} else {
// 根据所选矿种类型过滤
this.suggestList1 = filterByFields(this.suggestList, [{ chkqType: "采矿权", miningTypes: val }]);
this.suggestList2 = filterByFields(this.suggestList, [{ chkqType: "探矿权", miningTypes: val }]);
this.suggestList1 = filterByFields(this.suggestList, [
{ chkqType: "采矿权", miningTypes: val },
]);
this.suggestList2 = filterByFields(this.suggestList, [
{ chkqType: "探矿权", miningTypes: val },
]);
}
// 更新总条目数,确保分页组件正确显示
if (this.currentIndex4overview === 0) {
this.total = this.suggestList1.length;
// 分页处理:提取当前页的数据
this.suggestList1 = this.suggestList1.slice((this.page.pageNum - 1) * this.page.pageSize, this.page.pageNum * this.page.pageSize);
this.suggestList1 = this.suggestList1.slice(
(this.page.pageNum - 1) * this.page.pageSize,
this.page.pageNum * this.page.pageSize
);
} else if (this.currentIndex4overview === 1) {
this.total = this.suggestList2.length;
// 分页处理:提取当前页的数据
this.suggestList2 = this.suggestList2.slice((this.page.pageNum - 1) * this.page.pageSize, this.page.pageNum * this.page.pageSize);
this.suggestList2 = this.suggestList2.slice(
(this.page.pageNum - 1) * this.page.pageSize,
this.page.pageNum * this.page.pageSize
);
}
console.log(`当前页码: ${this.page.pageNum}, 总条目数: ${this.total}`);
},
async getKqTag() {
const result = await sendRequest(
"business/miningTag/listAll",
"get",
{
pageNum:1,
pageSize:999,
}
);
const result = await sendRequest("business/miningTag/listAll", "get", {
pageNum: 1,
pageSize: 999,
});
this.KqTagList = result.rows;
},
async mineralType() {
const result = await sendRequest(
"business/mineralType/list" ,
"get",
);
const result = await sendRequest("business/mineralType/list", "get");
this.minTypeList = result.rows;
this.minTypeList.unshift({name:'全部'})
this.minTypeList.unshift({ name: "全部" });
},
async getSuggestList() {
let that = this;
......@@ -337,16 +368,22 @@ export default {
this.suggestList = result.data.rows;
// 分别初始化 suggestList1 和 suggestList2
this.suggestList1 = filterByFields(this.suggestList, [{ chkqType: "采矿权" }]).slice(
this.suggestList1 = filterByFields(this.suggestList, [
{ chkqType: "采矿权" },
]).slice(
(that.page.pageNum - 1) * that.page.pageSize,
that.page.pageNum * that.page.pageSize
);
this.suggestList2 = filterByFields(this.suggestList, [{ chkqType: "探矿权" }]).slice(
this.suggestList2 = filterByFields(this.suggestList, [
{ chkqType: "探矿权" },
]).slice(
(that.page.pageNum - 1) * that.page.pageSize,
that.page.pageNum * that.page.pageSize
);
this.total = filterByFields(this.suggestList, [{ chkqType: "采矿权" }]).length;
this.total = filterByFields(this.suggestList, [
{ chkqType: "采矿权" },
]).length;
return Promise.resolve();
},
......@@ -369,18 +406,18 @@ $border-color: #f1f1f1;
.part6 {
padding-top: 30px;
position: relative;
.tableWrapper {
width: 99%;
margin: 0 auto;
overflow: hidden;
box-sizing: border-box;
margin-bottom: 20px;
.block{
.block {
width: 100%;
}
}
.suggestype {
overflow: hidden;
margin-bottom: 20px;
......@@ -571,10 +608,9 @@ body {
border-bottom: 1px solid #f3f3f3;
box-sizing: border-box;
}
}
.top-zd{
.top-zd {
display: flex;
justify-content: space-between;
}
......
<template>
<div>
<BackToTopButton />
<Header :activeIndex="2"/>
<Header :activeIndex="2" />
<CommonDialog
:show="dialogVisible"
@close-dialog="handleCloseDialog"
......@@ -11,9 +11,7 @@
<article>
<div class="part part6">
<div class="part-tit">
<h3 class="part-title">
<span>重点矿业权</span><span>推荐</span>
</h3>
<h3 class="part-title"><span>重点矿业权</span><span>推荐</span></h3>
</div>
<div class="mt20"></div>
<div class="top-zd">
......@@ -40,10 +38,10 @@
/>
</el-select>
</div>
<div class="tableWrapper" v-show="currentIndex4overview===0">
<div class="tableWrapper">
<div
class="item"
v-for="(item, index1) in suggestList1"
v-for="(item, index1) in suggestList"
:key="index1"
@click="clickVolume(item.id)"
>
......@@ -82,7 +80,19 @@
}}
</p>
<p>资源储量:{{ item.reservesScale || "-" }}</p>
<img class="mining-tag" :src="baseApi+getValueByIdAndField(KqTagList,Number(item.miningLable[0]),'picUrl')" alt="" v-if="item.miningLable&&item.miningLable.length>0">
<img
class="mining-tag"
:src="
baseApi +
getValueByIdAndField(
KqTagList,
Number(item.miningLable[0]),
'picUrl'
)
"
alt=""
v-if="item.miningLable && item.miningLable.length > 0"
/>
</div>
<!-- <p>整体转让</p> -->
<!-- <div class="item-right">
......@@ -91,10 +101,8 @@
<div @click="openDia(item.websiteMiningTitle)">联系我们</div>
</div> -->
</div>
<div v-if="suggestList1.length&&suggestList1.length% 2 != 0" class="item" style="visibility: hidden;">
</div>
</div>
<div class="tableWrapper" v-show="currentIndex4overview===1">
<!-- <div class="tableWrapper" v-show="currentIndex4overview === 1">
<div
class="item"
v-for="(item, index1) in suggestList2"
......@@ -135,28 +143,34 @@
}}
</p>
<p>资源储量:{{ item.reservesScale || "-" }}</p>
<img class="mining-tag" :src="baseApi+getValueByIdAndField(KqTagList,Number(item.miningLable[0]),'picUrl')" alt="" v-if="item.miningLable&&item.miningLable.length>0">
<img
class="mining-tag"
:src="
baseApi +
getValueByIdAndField(
KqTagList,
Number(item.miningLable[0]),
'picUrl'
)
"
alt=""
v-if="item.miningLable && item.miningLable.length > 0"
/>
</div>
<!-- <p>整体转让</p> -->
<!-- <div class="item-right">
<p>面议</p>
<div @click="clickVolume(item.id)">查看详情</div>
<div @click="openDia(item.websiteMiningTitle)">联系我们</div>
</div> -->
</div>
</div>
</div> -->
</div>
</article>
</div>
<!-- 加载状态提示 -->
<div class="loading-more" v-if="loading">
<i class="el-icon-loading"></i>
<span>加载更多...</span>
</div>
<div class="no-more" v-if="!loading && !hasMore">
<span>没有更多内容了</span>
<div class="inner">
<el-pagination
layout="prev, pager, next"
:current-page="searchForm.pageNum"
@current-change="changePage"
:page-size="searchForm.pageSize"
:total="total"
>
</el-pagination>
</div>
<Footer></Footer>
......@@ -166,7 +180,7 @@
<script>
// import Footer from '../../../components/Footer.vue'
import sendRequest from "~/utils/request.js";
import { getDictLabelFromVal,filterByFields } from "~/utils/tyler";
import { getDictLabelFromVal, filterByFields } from "~/utils/tyler";
import Footer from "~/components/Footer.vue";
import BackToTopButton from "~/components/BackToTopButton.vue";
import HorizontalMenu from "~/components/header/HorizontalMenu.vue";
......@@ -183,18 +197,14 @@ export default {
},
data() {
return {
page:{
pageNum:1,
pageSize:9
},
total:0,
minType:'全部',
minTypeList:[],
page: {},
total: 0,
minType: "",
minTypeList: [],
dialogVisible: false,
omDemandName: "cs",
suggestList: [],
suggestList1: [],
suggestList2: [],
suggestListShow: [],
suggestType: 2,
baseApi: process.env.VUE_APP_File_VIEW, //"/prod-api",
currentIndex4overview: 0,
......@@ -208,12 +218,11 @@ export default {
mineListTotal: 0,
searchForm: {
isRecommendation: "Y",
minType:'全部',
minType: "全部",
pageNum: 1,
pageSize: 9,
},
KqTagList:[],
loading: false, // 是否正在加载
hasMore: true, // 是否还有更多内容
KqTagList: [],
};
},
watch: {},
......@@ -222,7 +231,6 @@ export default {
this.$wow.init({ animateClass: "animate__animated" });
});
console.log("路由信息", this.$route.query);
this.suggestType = this.$route.query.id;
this.currentIndex4overview = this.$route.query.index * 1;
......@@ -230,35 +238,19 @@ export default {
this.getKqTag();
this.getCommoncode();
this.mineralType();
// 添加滚动事件监听
window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
// 移除滚动事件监听
window.removeEventListener('scroll', this.handleScroll);
},
methods: {
getDictLabelFromVal,
getValueByIdAndField(arr, id, field) {
const result = arr.find(item => item.id === id);
const result = arr.find((item) => item.id === id);
return result ? result[field] : null;
},
changePage(pageNum) {
console.log(pageNum )
this.page.pageNum = pageNum;
if(this.currentIndex4overview ===0){
this.suggestList1 = filterByFields(this.suggestList,[{chkqType:"采矿权"}]).slice((pageNum-1)*9, pageNum*9);
}else if(this.currentIndex4overview ===1){
this.suggestList2 = filterByFields(this.suggestList,[{chkqType:"探矿权"}]).slice((pageNum-1)*9, pageNum*9);
}
this.getSuggestList();
},
clickVolume(id, index) {
const url = `/Transaction/minDet?id=${id}`;
window.open(url, '_blank'); // '_blank' 表示在新标签页中打开
clickVolume(id, index) {
const url = `/Transaction/minDet?id=${id}`;
window.open(url, "_blank"); // '_blank' 表示在新标签页中打开
},
openDia(val) {
this.dialogVisible = true;
......@@ -268,81 +260,30 @@ export default {
return arr.slice(0, num);
},
changeSuggest(index, item) {
this.searchForm.minType = '全部'
let that = this;
console.log(index, item);
this.page.pageNum = 1;
this.searchForm.dictLabel = item.dictLabel;
this.currentIndex4overview = index;
this.suggestType = item.dictValue;
// 重置加载状态
this.loading = false;
this.hasMore = true;
if(index === 0){
that.total = filterByFields(that.suggestList, [{chkqType:"采矿权"}]).length;
} else if(index === 1){
that.total = filterByFields(that.suggestList, [{chkqType:"探矿权"}]).length;
}
this.changePage(this.page.pageNum);
this.getSuggestList();
},
handleCloseDialog(newState) {
this.dialogVisible = newState;
},
handleChange(val) {
// 重置当前页码到第一页
this.page.pageNum = 1;
// 初始化 suggestList1 和 suggestList2
this.suggestList1 = [];
this.suggestList2 = [];
// 根据所选矿种类型过滤数据
if (val === '全部') {
// 显示所有数据
this.suggestList1 = filterByFields(this.suggestList, [{ chkqType: "采矿权" }]);
this.suggestList2 = filterByFields(this.suggestList, [{ chkqType: "探矿权" }]);
} else {
// 根据所选矿种类型过滤
this.suggestList1 = filterByFields(this.suggestList, [{ chkqType: "采矿权", miningTypes: val }]);
this.suggestList2 = filterByFields(this.suggestList, [{ chkqType: "探矿权", miningTypes: val }]);
}
// 更新总条目数,确保分页组件正确显示
if (this.currentIndex4overview === 0) {
this.total = this.suggestList1.length;
// 分页处理:提取当前页的数据
this.suggestList1 = this.suggestList1.slice((this.page.pageNum - 1) * this.page.pageSize, this.page.pageNum * this.page.pageSize);
} else if (this.currentIndex4overview === 1) {
this.total = this.suggestList2.length;
// 分页处理:提取当前页的数据
this.suggestList2 = this.suggestList2.slice((this.page.pageNum - 1) * this.page.pageSize, this.page.pageNum * this.page.pageSize);
}
console.log(`当前页码: ${this.page.pageNum}, 总条目数: ${this.total}`);
this.searchForm.minType = val;
this.getSuggestList();
},
async getKqTag() {
const result = await sendRequest(
"business/miningTag/listAll",
"get",
{
pageNum:1,
pageSize:999,
}
);
const result = await sendRequest("business/miningTag/listAll", "get", {
pageNum: 1,
pageSize: 999,
});
this.KqTagList = result.rows;
},
async mineralType() {
const result = await sendRequest(
"business/mineralType/list" ,
"get",
);
const result = await sendRequest("business/mineralType/list", "get");
this.minTypeList = result.rows;
this.minTypeList.unshift({name:'全部'})
this.minTypeList.unshift({ name: "全部" });
},
async getSuggestList() {
let that = this;
const result = await sendRequest(
"business/templateData/recommendMiningRights",
"get",
......@@ -350,19 +291,7 @@ export default {
);
this.suggestList = result.data.rows;
// 分别初始化 suggestList1 和 suggestList2
this.suggestList1 = filterByFields(this.suggestList, [{ chkqType: "采矿权" }]).slice(
(that.page.pageNum - 1) * that.page.pageSize,
that.page.pageNum * that.page.pageSize
);
this.suggestList2 = filterByFields(this.suggestList, [{ chkqType: "探矿权" }]).slice(
(that.page.pageNum - 1) * that.page.pageSize,
that.page.pageNum * that.page.pageSize
);
this.total = filterByFields(this.suggestList, [{ chkqType: "采矿权" }]).length;
this.total = result.data.total;
return Promise.resolve();
},
async getCommoncode() {
......@@ -372,43 +301,7 @@ export default {
"get"
);
this.commonCode4mineRightType = mineRight.data;
},
handleScroll() {
// 获取滚动条滚动的距离
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
// 获取文档总高度
const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
// 获取窗口的高度
const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
// 判断是否滚动到底部
if (scrollTop + clientHeight >= scrollHeight - 10) {
this.loadMoreData();
}
},
async loadMoreData() {
if (this.loading || !this.hasMore) {
return;
}
this.loading = true;
this.page.pageNum++;
let newList = [];
if(this.currentIndex4overview ===0){
newList = filterByFields(this.suggestList,[{chkqType:"采矿权"}]).slice((this.page.pageNum-1)*9, this.page.pageNum*9);
this.suggestList1 = [...this.suggestList1, ...newList];
}else if(this.currentIndex4overview ===1){
newList = filterByFields(this.suggestList,[{chkqType:"探矿权"}]).slice((this.page.pageNum-1)*9, this.page.pageNum*9);
this.suggestList2 = [...this.suggestList2, ...newList];
}
// 检查是否还有更多数据
if (newList.length < 9) {
this.hasMore = false;
}
this.loading = false;
console.log(this.commonCode4mineRightType, "1111");
},
},
};
......@@ -421,18 +314,18 @@ $border-color: #f1f1f1;
.part6 {
padding-top: 30px;
position: relative;
.tableWrapper {
width: 99%;
margin: 0 auto;
overflow: hidden;
box-sizing: border-box;
margin-bottom: 20px;
.block{
.block {
width: 100%;
}
}
.suggestype {
overflow: hidden;
margin-bottom: 20px;
......@@ -623,29 +516,10 @@ body {
border-bottom: 1px solid #f3f3f3;
box-sizing: border-box;
}
}
.top-zd{
.top-zd {
display: flex;
justify-content: space-between;
}
/* 加载更多样式 */
.loading-more {
display: flex;
justify-content: center;
align-items: center;
padding: 10px 0;
color: #999;
font-size: 14px;
}
.no-more {
display: flex;
justify-content: center;
padding: 10px 0;
color: #999;
font-size: 14px;
}
</style>
\ No newline at end of file
</style>
This source diff could not be displayed because it is too large. You can view the blob instead.
<template>
<div class="home">
<dragDialog v-if="isModalVisible" @close-dialog="closeModal"/>
<dragDialog v-if="isModalVisible" @close-dialog="closeModal" />
<div class="leave-msg" v-if="!isModalVisible" @click="openModal">
<div style="font-size: 32px;"><i class="el-icon-service"></i></div>
<div style="font-size: 32px"><i class="el-icon-service"></i></div>
<div>留言</div>
</div>
<!-- <BackToTopButton /> -->
<Header :activeIndex="0"/>
<Header :activeIndex="0" />
<CommonDialog
:show="dialogVisible"
@close-dialog="handleCloseDialog"
:omDemandName="omDemandName"
/>
<SideBarBox :show="true" :boxArr="sideBarItems"></SideBarBox>
<div class="inner por marquee-out" v-if="marqueeData">
<img src="@/static/images/tout.png" alt="">
<el-carousel height="40px" direction="vertical" arrow="never" indicator-position="none" :interval="5000">
<img src="@/static/images/tout.png" alt="" />
<el-carousel
height="40px"
direction="vertical"
arrow="never"
indicator-position="none"
:interval="5000"
>
<el-carousel-item v-for="item in marqueeData" :key="item.id">
<p class="pmd-con" :title="item.pmdTitle">{{ item.pmdTitle }}</p>
</el-carousel-item>
</el-carousel>
</div>
<div class="inner">
<div class="part part3" id="part3">
<div class="part-tit">
<h3 class="part-title">
<span>矿产资源</span><span>信息概览</span>
</h3>
<h3 class="part-title"><span>矿产资源</span><span>信息概览</span></h3>
<!-- <h6>中国有色金属之乡</h6> -->
</div>
<div class="part3-top">
<div class="part3-top-left" v-if="topTabIndex !== null">
<div v-for="(item, index) in topTabData" v-show="topTabIndex === item.sort">
<div
v-for="(item, index) in topTabData"
v-show="topTabIndex === item.sort"
>
<el-carousel
indicator-position="outside"
:autoplay="true"
height="376px"
:arrow="item.imagePathList&&item.imagePathList.length>1?'always':'never'"
:arrow="
item.imagePathList && item.imagePathList.length > 1
? 'always'
: 'never'
"
>
<el-carousel-item v-for="(img,j) in item.imagePathList" :key="j">
<el-carousel-item
v-for="(img, j) in item.imagePathList"
:key="j"
>
<div>
<img :src="`${baseApi}${img}`" alt="" style="width: 100%;height: 376px;object-fit:cover"/>
<img
:src="`${baseApi}${img}`"
alt=""
style="width: 100%; height: 376px; object-fit: cover"
/>
</div>
</el-carousel-item>
</el-carousel>
</div>
</div>
......@@ -58,16 +72,24 @@
v-for="(item, index) in topTabData"
:key="item.id"
@mouseover="changeTab(item.sort)"
:class="{ 'active-tab': Number(item.sort) == Number(topTabIndex) }"
:class="{
'active-tab': Number(item.sort) == Number(topTabIndex),
}"
>
<p>{{ item.title }}</p>
</li>
</ul>
<div class="part3-top-content" v-for="(item, index) in topTabData" v-show="item.sort == topTabIndex" :key="item.id">
<div
class="part3-top-content"
v-for="(item, index) in topTabData"
v-show="item.sort == topTabIndex"
:key="item.id"
>
<div>
<div class="disc">
<p v-for="des in splitStringByBackslashN(item.descriptions)">{{ des }}</p>
<p v-for="des in splitStringByBackslashN(item.descriptions)">
{{ des }}
</p>
</div>
</div>
</div>
......@@ -78,9 +100,7 @@
<div class="inner">
<div class="part part4" id="part4">
<div class="part-tit">
<h3 class="part-title">
<span>一平台</span><span>四中心</span>
</h3>
<h3 class="part-title"><span>一平台</span><span>四中心</span></h3>
<!-- <h6>中国有色金属之乡</h6> -->
</div>
<ul class="pt">
......@@ -89,12 +109,12 @@
:key="index"
@click="gotoPt(item.link)"
>
<div class="tit">
<img :src="`${item.url}`" alt="" />
<span>{{ item.tit }}</span>
</div>
<div class="eng">{{ item.eng }}</div>
<p class="subtit">{{ item.subtit }}</p>
<div class="tit">
<img :src="`${item.url}`" alt="" />
<span>{{ item.tit }}</span>
</div>
<div class="eng">{{ item.eng }}</div>
<p class="subtit">{{ item.subtit }}</p>
<!-- <span class="subtit">{{ item.subtit }}</span> -->
</li>
</ul>
......@@ -103,9 +123,7 @@
<div class="partot" id="partot">
<div class="inner">
<div class="part-tit">
<h3 class="part-title">
<span>赤峰矿业</span><span>集团</span>
</h3>
<h3 class="part-title"><span>赤峰矿业</span><span>集团</span></h3>
</div>
</div>
<div class="inner">
......@@ -115,15 +133,23 @@
class="section-right jingjizonglan"
v-if="currentIndex4overview === 0"
>
<el-carousel trigger="click" height="530px" arrow="hover" :interval="15000" :key="new Date().getTime()">
<el-carousel
trigger="click"
height="530px"
arrow="hover"
:interval="15000"
:key="new Date().getTime()"
>
<el-carousel-item>
<div class="jituan_part1_item1">
<div class="left">
<p>
矿业经济是赤峰市名符其实的支柱产业和重要的经济命脉,为进一步加强矿产资源勘查与开发。推动矿业经济做大做强,赤峰市委市政府加快培育全市矿业资源龙头企业,打造资本运营及投融资平台,2015年7月矿业公司应运而生,2017年赤峰矿业(集团) 有限责任公司正式成立,全面承担履行储备矿权、投资开发、矿业服务职责使命。
矿业经济是赤峰市名符其实的支柱产业和重要的经济命脉,为进一步加强矿产资源勘查与开发。推动矿业经济做大做强,赤峰市委市政府加快培育全市矿业资源龙头企业,打造资本运营及投融资平台,2015年7月矿业公司应运而生,2017年赤峰矿业(集团)
有限责任公司正式成立,全面承担履行储备矿权、投资开发、矿业服务职责使命。
</p>
<p>
赤峰矿业集团作为赤峰市政府发展、服务矿业经济的重要平台,注册资金1亿元,下设三个子公司(仁泰非金属、亿泰有色金属、贵金属) ,目前经营管理矿权49宗(其中非金属19宗、有色金属24宗、贵金属6宗)。
<p>
赤峰矿业集团作为赤峰市政府发展、服务矿业经济的重要平台,注册资金1亿元,下设三个子公司(仁泰非金属、亿泰有色金属、贵金属)
,目前经营管理矿权49宗(其中非金属19宗、有色金属24宗、贵金属6宗)。
</p>
<img
src="@/static/images/home/jituan_part1_item1-1.png"
......@@ -142,31 +168,50 @@
<div class="jituan_part1_item2">
<div class="top">
<div class="itemInfo">
<div class="headerTitle"><img src="@/static/images/home/jituan_part1_item2-1-1.png" alt=""><span>探矿勘查一批</span></div>
<div class="headerTitle">
<img
src="@/static/images/home/jituan_part1_item2-1-1.png"
alt=""
/><span>探矿勘查一批</span>
</div>
<p>
围绕战略矿种、优势矿种、新能源矿种,引进大型矿业企业进行风险探矿、合作开发,力争到2025年,重要矿产资源储量稳步增长,完成探矿50万延长米,新增有色金属矿石储量2亿吨以上。
</p>
</div>
<div class="itemInfo">
<div class="headerTitle"><img src="@/static/images/home/jituan_part1_item2-1-2.png" alt=""><span>合作开发一批</span></div>
<div class="headerTitle">
<img
src="@/static/images/home/jituan_part1_item2-1-2.png"
alt=""
/><span>合作开发一批</span>
</div>
<p>
对赤峰矿业集团经营管理的资源条件好、权属清晰的49宗矿业权,与有实力的国企民企合作开发。对由于企业资金短缺不能办理采矿权延续手续、探转采等相关手续的矿山企业,引进资金实力雄厚的大型企业合作开发,通过矿业权重组等方式联手开发。
</p>
</div>
<div class="itemInfo">
<div class="headerTitle"><img src="@/static/images/home/jituan_part1_item2-1-3.png" alt=""><span>矿权整合一批</span></div>
<div class="headerTitle">
<img
src="@/static/images/home/jituan_part1_item2-1-3.png"
alt=""
/><span>矿权整合一批</span>
</div>
<p>
鼓励企业采取购买兼并、投资入股等方式,对小矿,小矿密集区,大矿小开的矿区进行整合。“十四五”期间,重点推进17个整合区,整含区面积约665平方公里。矿山总数由760个压减到680个以内,大中型矿山占比达到25%。
</p>
</div>
<div class="itemInfo">
<div class="headerTitle"><img src="@/static/images/home/jituan_part1_item2-1-4.png" alt=""><span>招商引资一批</span></div>
<div class="headerTitle">
<img
src="@/static/images/home/jituan_part1_item2-1-4.png"
alt=""
/><span>招商引资一批</span>
</div>
<p>
引进大型矿业集团,通过并购重组等多种方式,盘活471个停产采矿权、453个探矿权,深度参与 资源开发利用,着眼矿业上下游产业短板,开展产业补链延链招商,构建健全完善的产业链条。
引进大型矿业集团,通过并购重组等多种方式,盘活471个停产采矿权、453个探矿权,深度参与
资源开发利用,着眼矿业上下游产业短板,开展产业补链延链招商,构建健全完善的产业链条。
</p>
</div>
</div>
<div class="bottom">
<img
......@@ -211,17 +256,20 @@
<ul>
<li
class="por"
v-for="item in IndustryChainList" :key="item.id"
v-for="item in IndustryChainList"
:key="item.id"
@click="gotoIndustryChain(item.id)"
>
<div class="productItem">
<div class="left">
<img :src="baseApi+item.ippPic" alt="">
<img :src="baseApi + item.ippPic" alt="" />
</div>
<div class="right">
<div class="top">
<P>{{item.ippTitle}}</P>
<p v-if="item.releaseTime">{{formatDate(item.releaseTime)}}</p>
<div class="top">
<P>{{ item.ippTitle }}</P>
<p v-if="item.releaseTime">
{{ formatDate(item.releaseTime) }}
</p>
</div>
<p class="bottom" v-html="item.ippContent"></p>
</div>
......@@ -236,17 +284,22 @@
<ul>
<li
class="por"
v-for="(item, index) in zhengceList" :key="index"
v-for="(item, index) in zhengceList"
:key="index"
@click="gotoInvestmentPolicy(item.id)"
>
<div class="productItem">
<div class="left">
<img :src="`${baseApi}${item.ippPic}`" alt="" srcset="" />
<img
:src="`${baseApi}${item.ippPic}`"
alt=""
srcset=""
/>
</div>
<div class="right">
<div class="top">
<P>{{item.ippTitle}}</P>
<p>{{formatDate(item.createTime)}}</p>
<P>{{ item.ippTitle }}</P>
<p>{{ formatDate(item.createTime) }}</p>
</div>
<p class="bottom" v-html="item.ippContent"></p>
</div>
......@@ -256,10 +309,18 @@
<div class="mt20"></div>
</div>
</div>
<div class="section-right" v-show="currentIndex4overview === 3">
<div class="section-right" v-show="currentIndex4overview === 3">
<div class="part2-video">
<video v-if="videoData&&videoData.length>0" :poster="`${baseApi}${videoData[0].image}`" controls name="media">
<source :src="`${baseApi}${videoData[0].videoPath}`" type="video/mp4">
<video
v-if="videoData && videoData.length > 0"
:poster="`${baseApi}${videoData[0].image}`"
controls
name="media"
>
<source
:src="`${baseApi}${videoData[0].videoPath}`"
type="video/mp4"
/>
</video>
</div>
</div>
......@@ -280,32 +341,23 @@
</section>
</div>
</div>
<div class="mt40" ></div>
<div class="mt40"></div>
<div class="inner">
<div class="part part5" id="part5">
<div class="part-tit">
<h3 class="part-title">
<span>推介</span><span>专题</span>
</h3>
<h3 class="part-title"><span>推介</span><span>专题</span></h3>
</div>
<div class="mt30"></div>
<CarouselIndex :arr="listComprehensiveAssemblyData"/>
<CarouselIndex :arr="listComprehensiveAssemblyData" />
</div>
</div>
<div class="mt40" ></div>
<div class="mt40"></div>
<div class="inner">
<div class="part part6" id="part6">
<div class="part-tit">
<h3 class="part-title">
<span>矿权</span><span>交易</span>
</h3>
<h3 class="part-title"><span>矿权</span><span>交易</span></h3>
</div>
<div class="tc-tabs">
<ul class="suggestype">
......@@ -320,8 +372,13 @@
</ul>
<a class="lookMore" @click="go2detail">查看更多>></a>
</div>
<div class="tableWrapper" v-show="currentIndexKQoverview===0">
<div class="item" v-for="(item, index1) in suggestList1" :key="index1" @click="clickVolume(item.id)">
<div class="tableWrapper" v-show="currentIndexKQoverview === 0">
<div
class="item"
v-for="(item, index1) in suggestList1"
:key="index1"
@click="clickVolume(item.id)"
>
<div class="img-box">
<img
v-if="item.websiteMiningImage"
......@@ -345,13 +402,29 @@
{{ item.averageQuality || "-" }}
</p>
<p>资源储量:{{ item.reservesScale || "-" }}</p>
<img class="mining-tag" :src="baseApi+getValueByIdAndField(KqTagList,Number(item.miningLable[0]),'picUrl')" alt="" v-if="item.miningLable&&item.miningLable.length>0">
<img
class="mining-tag"
:src="
baseApi +
getValueByIdAndField(
KqTagList,
Number(item.miningLable[0]),
'picUrl'
)
"
alt=""
v-if="item.miningLable && item.miningLable.length > 0"
/>
</div>
</div>
</div>
<div class="tableWrapper" v-show="currentIndexKQoverview===1" >
<div class="item" v-for="(item, index1) in suggestList2" :key="index1" @click="clickVolume(item.id)">
<div class="tableWrapper" v-show="currentIndexKQoverview === 1">
<div
class="item"
v-for="(item, index1) in suggestList2"
:key="index1"
@click="clickVolume(item.id)"
>
<div class="img-box">
<img
class="left-img"
......@@ -372,33 +445,38 @@
</p>
<p :title="item.averageQuality">
品位指标:{{ item.averageQuality || "-" }}
</p>
<p>资源储量:{{ item.reservesScale || "-" }}</p>
<img class="mining-tag" :src="baseApi+getValueByIdAndField(KqTagList,Number(item.miningLable[0]),'picUrl')" alt="" v-if="item.miningLable&&item.miningLable.length>0">
<img
class="mining-tag"
:src="
baseApi +
getValueByIdAndField(
KqTagList,
Number(item.miningLable[0]),
'picUrl'
)
"
alt=""
v-if="item.miningLable && item.miningLable.length > 0"
/>
</div>
</div>
</div>
</div>
<div class="mt40" ></div>
<div class="mt40"></div>
<div class="part part7" id="part7">
<div class="part-tit">
<h3 class="part-title">
<span>金融</span><span>服务</span>
</h3>
<h3 class="part-title"><span>金融</span><span>服务</span></h3>
</div>
<div class="jr" @click="goto('/Business')"></div>
</div>
<div class="mt40" ></div>
<div class="mt40"></div>
<div class="part part8" id="part8">
<div class="part-tit">
<h3 class="part-title">
<span>技术</span><span>服务</span>
</h3>
<h3 class="part-title"><span>技术</span><span>服务</span></h3>
</div>
<div class="mt20" ></div>
<div class="mt20"></div>
<div class="jsfw" @click="goto('/technicalDocking')"></div>
</div>
</div>
......@@ -407,16 +485,14 @@
<ul>
<li v-for="item in friendlyLinkList" :key="item.id">
<a :href="item.chkqLinkUrl" target="_blank">
<img :src="baseApi+item.image" :alt="item.chkqLinkname">
<img :src="baseApi + item.image" :alt="item.chkqLinkname" />
</a>
</li>
</ul>
</div>
</div>
<Footer></Footer>
</div>
</template>
......@@ -427,7 +503,7 @@ import {
generateCarouselItems,
extractContent,
formatDate,
filterByFields
filterByFields,
} from "~/utils/tyler";
import Footer from "~/components/Footer.vue";
......@@ -439,8 +515,8 @@ import CommonDialog from "~/components/dialog/CommonDialog.vue";
import HorizontalMenu from "~/components/header/HorizontalMenu.vue";
import Header from "~/components/header/Header.vue";
import CarouselIndex from "~/components/CarouselIndex.vue";
import SideBarBox from '@/components/SideBarBox.vue';
import dragDialog from '@/components/dialog/dragDialog.vue';
import SideBarBox from "@/components/SideBarBox.vue";
import dragDialog from "@/components/dialog/dragDialog.vue";
export default {
head: {
script: [
......@@ -468,19 +544,62 @@ export default {
zhengceList: [],
videoSrc: null,
// currentIndex4overview: 3,
currentIndexKQoverview:0,
sideBarItems: [ // 定义侧边栏数组
currentIndexKQoverview: 0,
sideBarItems: [
// 定义侧边栏数组
// { id: 1, name: '资源概览',urlDef:require("~/static/images/sideLink/part1.png"),urlAct:require("~/static/images/sideLink/part1-act.png"), anchor: 'part1' },
{ id: 3, name: '矿产资/源概览',urlDef:require("~/static/images/sideLink/part4.png"),urlAct:require("~/static/images/sideLink/part4-act.png"), anchor: 'part3' },
{ id: 4, name: '一平台/四中心',urlDef:require("~/static/images/sideLink/part2.png"),urlAct:require("~/static/images/sideLink/part2-act.png"), anchor: 'part4' },
{ id: 5, name: '赤峰矿/业集团',urlDef:require("~/static/images/sideLink/part5.png"),urlAct:require("~/static/images/sideLink/part5-act.png"), anchor: 'partot' },
{
id: 3,
name: "矿产资/源概览",
urlDef: require("~/static/images/sideLink/part4.png"),
urlAct: require("~/static/images/sideLink/part4-act.png"),
anchor: "part3",
},
{
id: 4,
name: "一平台/四中心",
urlDef: require("~/static/images/sideLink/part2.png"),
urlAct: require("~/static/images/sideLink/part2-act.png"),
anchor: "part4",
},
{
id: 5,
name: "赤峰矿/业集团",
urlDef: require("~/static/images/sideLink/part5.png"),
urlAct: require("~/static/images/sideLink/part5-act.png"),
anchor: "partot",
},
// { id: 2, name: '宣传片',urlDef:require("~/static/images/sideLink/part3.png"),urlAct:require("~/static/images/sideLink/part3-act.png"), anchor: 'part2' },
{ id: 6, name: '推介专题',urlDef:require("~/static/images/sideLink/part6.png"),urlAct:require("~/static/images/sideLink/part6-act.png"), anchor: 'part5' },
{ id: 7, name: '矿权交易',urlDef:require("~/static/images/sideLink/part7.png"),urlAct:require("~/static/images/sideLink/part7-act.png"), anchor: 'part6' },
{ id: 8, name: '金融服务',urlDef:require("~/static/images/sideLink/part8.png"),urlAct:require("~/static/images/sideLink/part8-act.png"), anchor: 'part7' },
{ id: 9, name: '技术服务',urlDef:require("~/static/images/sideLink/part9.png"),urlAct:require("~/static/images/sideLink/part9-act.png"), anchor: 'part8' },
{
id: 6,
name: "推介专题",
urlDef: require("~/static/images/sideLink/part6.png"),
urlAct: require("~/static/images/sideLink/part6-act.png"),
anchor: "part5",
},
{
id: 7,
name: "矿权交易",
urlDef: require("~/static/images/sideLink/part7.png"),
urlAct: require("~/static/images/sideLink/part7-act.png"),
anchor: "part6",
},
{
id: 8,
name: "金融服务",
urlDef: require("~/static/images/sideLink/part8.png"),
urlAct: require("~/static/images/sideLink/part8-act.png"),
anchor: "part7",
},
{
id: 9,
name: "技术服务",
urlDef: require("~/static/images/sideLink/part9.png"),
urlAct: require("~/static/images/sideLink/part9-act.png"),
anchor: "part8",
},
],
overviewTypes: [
{
......@@ -554,30 +673,34 @@ export default {
{
tit: "矿业权交易中心",
link: "/Transaction",
eng:"Mining Rights Trading center",
eng: "Mining Rights Trading center",
url: require("~/static/images/newHome/oficon1.png"),
subtit: "充分发挥两个发现(发现投资方、发现优质矿权),为投资方提供优质矿权,深入了解矿权详情,为矿权人寻找优质投资方,拓宽社会投资渠道,助力矿山加速生产",
subtit:
"充分发挥两个发现(发现投资方、发现优质矿权),为投资方提供优质矿权,深入了解矿权详情,为矿权人寻找优质投资方,拓宽社会投资渠道,助力矿山加速生产",
},
{
tit: "金融投融资服务中心",
eng:"Financial Investment Center",
eng: "Financial Investment Center",
link: "/Business",
url: require("~/static/images/newHome/oficon2.png"),
subtit: "助力投资方、矿权人及社会人士资金回笼,提供多项金融支持、担保服务,助推实体经济发展",
subtit:
"助力投资方、矿权人及社会人士资金回笼,提供多项金融支持、担保服务,助推实体经济发展",
},
{
tit: "专业技术服务中心",
eng:"Professional Technical Center",
eng: "Professional Technical Center",
link: "/technicalDocking",
url: require("~/static/images/newHome/oficon3.png"),
subtit: "提供矿业全生命周期服务,从探矿到闭坑,全产业链一站式解决方案。内增外拓,助力矿山专业化、健康化发展",
subtit:
"提供矿业全生命周期服务,从探矿到闭坑,全产业链一站式解决方案。内增外拓,助力矿山专业化、健康化发展",
},
{
tit: "矿业信息发布中心",
eng:"Mining lrormation Release Center",
link: '/Supply',
eng: "Mining lrormation Release Center",
link: "/Supply",
url: require("~/static/images/newHome/oficon4.png"),
subtit: "进一步推动矿山行业发展,消除信息差,实现信息对等。涵盖矿山行业衍生产业链信息,供求服务信息实现公开透明,信息聚集的专业化平台",
subtit:
"进一步推动矿山行业发展,消除信息差,实现信息对等。涵盖矿山行业衍生产业链信息,供求服务信息实现公开透明,信息聚集的专业化平台",
},
],
miningData: [
......@@ -629,9 +752,7 @@ export default {
],
topTabMiningIndex: 0,
activeMap: "",
topTabData: [
{id:1,descriptions:'',title:'',sort:1}
],
topTabData: [{ id: 1, descriptions: "", title: "", sort: 1 }],
topTabIndex: 1,
topCon1: "",
topTabData1: [
......@@ -679,12 +800,12 @@ export default {
listComprehensiveAssemblyData: [],
recommendedTopicData: [],
suggestList: [],
suggestList1:[],
suggestList2:[],
suggestList1: [],
suggestList2: [],
suggestType: 2,
currentIndex4overview: 0,
commonCode4mineRightType:[],
commonCode4mineRightType4TJ:[],
commonCode4mineRightType: [],
commonCode4mineRightType4TJ: [],
searchMap4label: [
{
name: "矿权类型",
......@@ -717,13 +838,12 @@ export default {
dictData: [],
searchKey: "explorationProgress",
},
],
// 有色金属
IndustryChainList:[],
marqueeData:undefined,
KqTagList:[],
videoData:[],
IndustryChainList: [],
marqueeData: undefined,
KqTagList: [],
videoData: [],
};
},
head() {
......@@ -751,7 +871,7 @@ export default {
this.getZhengceList();
this.getKqTag();
this.getVideo()
this.getVideo();
this.marqueeFun();
});
},
......@@ -765,7 +885,7 @@ export default {
this.isModalVisible = false;
},
getValueByIdAndField(arr, id, field) {
const result = arr.find(item => item.id === id);
const result = arr.find((item) => item.id === id);
return result ? result[field] : null;
},
splitStringByBackslashN(inputString) {
......@@ -792,7 +912,7 @@ export default {
"/business/mineralResourcesConfig/list",
"get",
{
isDisplay:"Y"
isDisplay: "Y",
}
);
this.topTabData = [...result.rows];
......@@ -800,10 +920,7 @@ export default {
this.topTabIndex = result.rows[0].sort;
},
async getVideo() {
const result = await sendRequest(
"/business/video/list",
"get"
);
const result = await sendRequest("/business/video/list", "get");
this.videoData = result.rows;
},
async getZhengceList() {
......@@ -811,7 +928,19 @@ export default {
"/business/investmentPromotionPolicy/list?pageNum=1&pageSize=10000",
"get"
);
this.zhengceList = result.rows;
this.zhengceList = result.rows.map((item) => {
if (item.ippPic) {
item.ippPic = item.ippPic.replace(
/\/prod-api/g,
"https://cfkyw-package.oss-cn-beijing.aliyuncs.com"
);
item.ippContent = item.ippContent.replace(
/\/prod-api/g,
"https://cfkyw-package.oss-cn-beijing.aliyuncs.com"
);
}
return item;
});
},
async getSuggestList() {
const result = await sendRequest(
......@@ -823,25 +952,39 @@ export default {
}
);
this.suggestList = result.data.rows;
this.suggestList1 = this.sliceArray(filterByFields(this.suggestList,[{chkqType:"采矿权"}]),6);
this.suggestList2 = this.sliceArray(filterByFields(this.suggestList,[{chkqType:"探矿权"}]),6);
this.suggestList1 = this.sliceArray(
filterByFields(this.suggestList, [{ chkqType: "采矿权" }]),
6
);
this.suggestList2 = this.sliceArray(
filterByFields(this.suggestList, [{ chkqType: "探矿权" }]),
6
);
},
async getIndustryChain() {
const result = await sendRequest(
"/business/nonFerrousMetalIndustryChain/list?pageNum=1&pageSize=10000",
"get"
);
this.IndustryChainList = result.rows;
this.IndustryChainList = result.rows.map((item) => {
if (item.ippPic) {
item.ippPic = item.ippPic.replace(
/\/prod-api/g,
"https://cfkyw-package.oss-cn-beijing.aliyuncs.com"
);
item.ippContent = item.ippContent.replace(
/\/prod-api/g,
"https://cfkyw-package.oss-cn-beijing.aliyuncs.com"
);
}
return item;
});
},
async getKqTag() {
const result = await sendRequest(
"business/miningTag/listAll",
"get",
{
pageNum:1,
pageSize:999,
}
);
const result = await sendRequest("business/miningTag/listAll", "get", {
pageNum: 1,
pageSize: 999,
});
this.KqTagList = result.rows;
},
sliceArray(arr, num) {
......@@ -860,9 +1003,9 @@ export default {
goToCon(id) {
this.$router.push({ path: `/recommend/subject?id=${id}` });
},
clickVolume(id, index) {
const url = `/Transaction/minDet?id=${id}`;
window.open(url, '_blank'); // '_blank' 表示在新标签页中打开
clickVolume(id, index) {
const url = `/Transaction/minDet?id=${id}`;
window.open(url, "_blank"); // '_blank' 表示在新标签页中打开
},
formatDate(timestamp) {
const date = new Date(Date.parse(timestamp.split(" ")[0]));
......@@ -897,27 +1040,26 @@ export default {
},
gotoPt(link) {
// console.log(link)
if(link){
if (link) {
this.$router.push({
path: link,
});
}else{
this.$message({
} else {
this.$message({
message: "开发中,敬请期待",
type: "error",
});
}
},
gotoIndustryChain(id){
gotoIndustryChain(id) {
this.$router.push({
path: `/IndustryChain?id=${id}`,
});
path: `/IndustryChain?id=${id}`,
});
},
gotoInvestmentPolicy(id){
gotoInvestmentPolicy(id) {
this.$router.push({
path: `/InvestmentPolicy?id=${id}`,
});
path: `/InvestmentPolicy?id=${id}`,
});
},
changeTabMining(id) {
this.topTabMiningIndex = id;
......@@ -1078,15 +1220,11 @@ export default {
return item;
});
},
async marqueeFun(){
const marquee = await sendRequest(
"/system/paomadeng/listAll",
"get",
{
pmdType:'1',
isDisplay:'Y'
}
);
async marqueeFun() {
const marquee = await sendRequest("/system/paomadeng/listAll", "get", {
pmdType: "1",
isDisplay: "Y",
});
this.marqueeData = marquee.rows;
},
},
......@@ -1122,9 +1260,9 @@ export default {
justify-content: center;
& > li {
background: #fff;
border: 1px solid rgba(43, 101, 165, .12);
border: 1px solid rgba(43, 101, 165, 0.12);
border-radius: 5px;
box-shadow: 0 0 5px 0 hsla(0, 0%, 52%, .2);
box-shadow: 0 0 5px 0 hsla(0, 0%, 52%, 0.2);
color: #3369f3;
cursor: pointer;
font-size: 16px;
......@@ -1132,7 +1270,7 @@ export default {
margin: 28px 30px;
position: relative;
text-transform: uppercase;
transition: all .5s ease;
transition: all 0.5s ease;
width: 161px;
display: flex;
align-items: center;
......@@ -1143,12 +1281,10 @@ export default {
font-weight: 400;
color: #3c3c3c;
line-height: 23px;
}
&.on {
background: #2677d0;
border: 1px solid rgba(43, 101, 165, .12);
border: 1px solid rgba(43, 101, 165, 0.12);
color: #fff;
&::before {
content: "";
......@@ -1239,7 +1375,7 @@ export default {
color: #3f69f8;
font-size: 20px;
}
&::after{
&::after {
content: "";
position: absolute;
left: 0px;
......@@ -1249,18 +1385,18 @@ export default {
background: url("~/static/images/zcjd_img4.png") no-repeat;
background-size: 100%;
}
&::before{
&::before {
content: "";
position: absolute;
right: 0px;
top: 5px;
width: 142px;
height: 27px;
background: url("~/static/images/container-title-right.png") no-repeat center;
background: url("~/static/images/container-title-right.png")
no-repeat center;
background-size: 100%;
}
}
}
h1 {
color: #136fd0;
......@@ -1530,7 +1666,7 @@ export default {
position: relative;
min-width: 444px;
height: 520px;
margin: 34px 60px 0 0px;
margin: 34px 60px 0 0px;
img.line1 {
display: block;
width: 80px;
......@@ -1566,13 +1702,12 @@ export default {
margin-top: 54px;
margin-left: 30px;
> p {
font-weight: bold;
color: #3f69f8;
line-height: 31px;
font-size: 17px;
position: relative;
// &::before{
// content: "";
// position: absolute;
......@@ -1585,7 +1720,6 @@ export default {
// }
}
ul {
width: 195px;
display: flex;
justify-content: space-between;
......@@ -1600,13 +1734,13 @@ export default {
text-align: center;
word-spacing: 3px;
color: #666666;
background: #E8F1FA;
background: #e8f1fa;
margin-bottom: 12px;
box-shadow: 0px 2px 6px 0px rgba(43,101,165,0.2);
box-shadow: 0px 2px 6px 0px rgba(43, 101, 165, 0.2);
border-radius: 5px;
cursor: pointer;
&.map-active {
color:#fff;
color: #fff;
background: #0f78e6;
}
}
......@@ -1642,7 +1776,7 @@ export default {
.data-item {
display: grid;
grid-template-columns: 6fr 3fr 2fr;
.ziyuan{
.ziyuan {
display: flex;
justify-content: center;
align-items: center;
......@@ -1659,7 +1793,7 @@ export default {
display: flex;
justify-content: start;
// width: 55%;
letter-spacing: .2em;
letter-spacing: 0.2em;
.data-item-con {
font-size: 16px;
margin-right: 35px;
......@@ -1697,14 +1831,14 @@ export default {
}
}
.part2-video {
// width: 80%;
margin: 0 30px;
overflow: hidden;
video {
width: 100%;
height: 100%;
}
// width: 80%;
margin: 0 30px;
overflow: hidden;
video {
width: 100%;
height: 100%;
}
}
.part3 {
// padding: 20px;
margin-top: 0;
......@@ -1761,61 +1895,58 @@ export default {
}
}
.part3-top-content {
width: 100%;
height: 100%;
padding:10px 0;
box-sizing: border-box;
background-color: #fafafa;
overflow: hidden;
position: relative;
&::before{
content: "";
position: absolute;
left:20px;
top:34px;
width: 1px;
height: 272px;
background: #dae3ee;
z-index: 2;
}
&::after{
content: "";
position: absolute;
left:20px;
bottom:27px;
width: 272px;
height: 1px;
background: #dae3ee;
z-index: 2;
}
width: 100%;
height: 100%;
padding: 10px 0;
box-sizing: border-box;
background-color: #fafafa;
overflow: hidden;
position: relative;
&::before {
content: "";
position: absolute;
left: 20px;
top: 34px;
width: 1px;
height: 272px;
background: #dae3ee;
z-index: 2;
}
&::after {
content: "";
position: absolute;
left: 20px;
bottom: 27px;
width: 272px;
height: 1px;
background: #dae3ee;
z-index: 2;
}
}
.part3-top-content > div {
width: 100%;
height: 100%;
overflow: hidden;
padding:20px 30px 40px 45px;
overflow: hidden;
padding: 20px 30px 40px 45px;
box-sizing: border-box;
position: relative;
::after{
::after {
content: "";
position: absolute;
width: 25px;
height: 25px;
left:7px;
top:0px;
left: 7px;
top: 0px;
background: url("~/static/images/icon1.png");
}
}
.part3-top-content > div .disc{
.part3-top-content > div .disc {
width: 100%;
height: 100%;
overflow: hidden;
overflow: hidden;
overflow-y: scroll;
}
.part3-top-content > div p {
font-size: 16px;
......@@ -1824,7 +1955,7 @@ export default {
line-height: 30px;
width: 100%;
}
::-webkit-scrollbar{
::-webkit-scrollbar {
display: none;
}
}
......@@ -1905,7 +2036,6 @@ export default {
// background: url("~/static/images/newHome/p4bg.png") no-repeat center;
background-size: 100%;
.inner {
}
}
.eco-chart {
......@@ -1933,7 +2063,7 @@ export default {
padding-right: 20px;
box-sizing: border-box;
// margin: 0 8px;
.tit{
.tit {
margin-top: 20px;
display: flex;
align-items: center;
......@@ -1947,20 +2077,18 @@ export default {
font-size: 26px;
color: #fff;
font-weight: bold;
letter-spacing: .1em;
letter-spacing: 0.1em;
}
}
.eng{
.eng {
font-size: 16px;
color:#fff;
color: #fff;
font-weight: normal;
}
p.subtit {
margin-top: 40px;
width:70% ;
width: 70%;
font-size: 14px;
color: #fff;
text-align: justify;
......@@ -1982,8 +2110,8 @@ export default {
background: url("~/static/images/newHome/of4.png") no-repeat center;
background-size: 100%;
}
&:hover{
background-size:110%;
&:hover {
background-size: 110%;
}
}
}
......@@ -2113,7 +2241,7 @@ export default {
.friendship-link ul > li {
width: 30%;
height: 98px;
border:1px solid #f3f3f3;
border: 1px solid #f3f3f3;
margin-top: 20px;
padding: 10px 20px;
box-sizing: border-box;
......@@ -2123,11 +2251,11 @@ export default {
border-radius: 6px;
background-color: #fff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
img{
width: 100%;
height: 78px;
object-fit: fill;
}
img {
width: 100%;
height: 78px;
object-fit: fill;
}
}
.friendship-link ul > li > a {
width: 100%;
......@@ -2140,11 +2268,8 @@ export default {
align-items: center;
justify-content: center;
}
</style>
<style lang="scss" scoped>
<style lang="scss" scoped>
@keyframes marquee {
0% {
left: 100%;
......@@ -2165,31 +2290,30 @@ export default {
white-space: nowrap;
animation: marquee 20s linear infinite;
font-size: 20px;
color:#11549d;
color: #11549d;
}
}
.marquee:hover .noticeInfo{
.marquee:hover .noticeInfo {
animation-play-state: paused;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.leave-msg{
.leave-msg {
position: fixed;
width: 88px;
height: 72px;
background-color: #fff;
bottom:calc(50% - 340px);
bottom: calc(50% - 340px);
right: 20px;
z-index: 20;
cursor: pointer;
......@@ -2207,14 +2331,16 @@ export default {
box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.12);
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.05);
i{color:#0f78e6;font-weight: bold;}
&:hover{
i {
color: #0f78e6;
font-weight: bold;
}
&:hover {
background-color: #0f78e6;
color: #fff;
i{color:#fff;}
i {
color: #fff;
}
}
}
</style>
\ No newline at end of file
</style>
/**
* Swiper 11.2.8
* Most modern mobile touch slider and framework with hardware accelerated transitions
* https://swiperjs.com
*
* Copyright 2014-2025 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: May 23, 2025
*/
@font-face {
font-family: swiper-icons;
src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
font-weight: 400;
font-style: normal;
}
:root {
--swiper-theme-color: #007aff;
}
:host {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
.swiper {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
display: block;
}
.swiper-vertical > .swiper-wrapper {
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
transition-timing-function: var(
--swiper-wrapper-transition-timing-function,
initial
);
box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
touch-action: pan-y;
}
.swiper-vertical {
touch-action: pan-x;
}
.swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform;
display: block;
}
.swiper-slide-invisible-blank {
visibility: hidden;
}
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
height: auto;
}
.swiper-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.swiper-3d.swiper-css-mode .swiper-wrapper {
perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
transform-style: preserve-3d;
}
.swiper-3d {
perspective: 1200px;
}
.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide {
transform-style: preserve-3d;
}
.swiper-css-mode > .swiper-wrapper {
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: start start;
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
scroll-snap-type: x mandatory;
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
scroll-snap-type: y mandatory;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
scroll-snap-type: none;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: none;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
content: "";
flex-shrink: 0;
order: 9999;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
scroll-snap-align: center center;
scroll-snap-stop: always;
}
.swiper-css-mode.swiper-centered.swiper-horizontal
> .swiper-wrapper
> .swiper-slide:first-child {
margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
height: 100%;
min-height: 1px;
width: var(--swiper-centered-offset-after);
}
.swiper-css-mode.swiper-centered.swiper-vertical
> .swiper-wrapper
> .swiper-slide:first-child {
margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
width: 100%;
min-width: 1px;
height: var(--swiper-centered-offset-after);
}
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
background: rgba(0, 0, 0, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
background-image: linear-gradient(
to left,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
}
.swiper-3d .swiper-slide-shadow-right {
background-image: linear-gradient(
to right,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
}
.swiper-3d .swiper-slide-shadow-top {
background-image: linear-gradient(
to top,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
}
.swiper-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0)
);
}
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
transform-origin: 50%;
box-sizing: border-box;
border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
border-radius: 50%;
border-top-color: transparent;
}
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
animation: swiper-preloader-spin 1s infinite linear;
}
.swiper-lazy-preloader-white {
--swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
--swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.swiper-virtual .swiper-slide {
-webkit-backface-visibility: hidden;
transform: translateZ(0);
}
.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
content: "";
position: absolute;
left: 0;
top: 0;
pointer-events: none;
}
.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
height: 1px;
width: var(--swiper-virtual-size);
}
.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
width: 1px;
height: var(--swiper-virtual-size);
}
:root {
--swiper-navigation-size: 44px;
}
.swiper-button-next,
.swiper-button-prev {
position: absolute;
top: var(--swiper-navigation-top-offset, 50%);
width: calc(var(--swiper-navigation-size) / 44 * 27);
height: var(--swiper-navigation-size);
margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
.swiper-button-next.swiper-button-hidden,
.swiper-button-prev.swiper-button-hidden {
opacity: 0;
cursor: auto;
pointer-events: none;
}
.swiper-navigation-disabled .swiper-button-next,
.swiper-navigation-disabled .swiper-button-prev {
display: none !important;
}
.swiper-button-next svg,
.swiper-button-prev svg {
width: 100%;
height: 100%;
object-fit: contain;
transform-origin: center;
}
.swiper-rtl .swiper-button-next svg,
.swiper-rtl .swiper-button-prev svg {
transform: rotate(180deg);
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
left: var(--swiper-navigation-sides-offset, 10px);
right: auto;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
right: var(--swiper-navigation-sides-offset, 10px);
left: auto;
}
.swiper-button-lock {
display: none;
}
.swiper-button-next:after,
.swiper-button-prev:after {
font-family: swiper-icons;
font-size: var(--swiper-navigation-size);
text-transform: none !important;
letter-spacing: 0;
font-variant: initial;
line-height: 1;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
content: "prev";
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
right: var(--swiper-navigation-sides-offset, 10px);
left: auto;
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
content: "next";
}
.swiper-pagination {
position: absolute;
text-align: center;
transition: 0.3s opacity;
transform: translate3d(0, 0, 0);
z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0;
}
.swiper-pagination-disabled > .swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
display: none !important;
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
bottom: var(--swiper-pagination-bottom, 8px);
top: var(--swiper-pagination-top, auto);
left: 0;
width: 100%;
}
.swiper-pagination-bullets-dynamic {
overflow: hidden;
font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transform: scale(0.33);
position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
transform: scale(0.33);
}
.swiper-pagination-bullet {
width: var(
--swiper-pagination-bullet-width,
var(--swiper-pagination-bullet-size, 8px)
);
height: var(
--swiper-pagination-bullet-height,
var(--swiper-pagination-bullet-size, 8px)
);
display: inline-block;
border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
background: var(--swiper-pagination-bullet-inactive-color, #000);
opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer;
}
.swiper-pagination-bullet:only-child {
display: none !important;
}
.swiper-pagination-bullet-active {
opacity: var(--swiper-pagination-bullet-opacity, 1);
background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical > .swiper-pagination-bullets {
right: var(--swiper-pagination-right, 8px);
left: var(--swiper-pagination-left, auto);
top: 50%;
transform: translate3d(0px, -50%, 0);
}
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
display: block;
}
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-vertical
> .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
top: 50%;
transform: translateY(-50%);
width: 8px;
}
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic
.swiper-pagination-bullet,
.swiper-vertical
> .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
.swiper-pagination-bullet {
display: inline-block;
transition: 0.2s transform, 0.2s top;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets
.swiper-pagination-bullet {
margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
.swiper-horizontal
> .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.swiper-horizontal
> .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
.swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic
.swiper-pagination-bullet {
transition: 0.2s transform, 0.2s left;
}
.swiper-horizontal.swiper-rtl
> .swiper-pagination-bullets-dynamic
.swiper-pagination-bullet {
transition: 0.2s transform, 0.2s right;
}
.swiper-pagination-fraction {
color: var(--swiper-pagination-fraction-color, inherit);
}
.swiper-pagination-progressbar {
background: var(
--swiper-pagination-progressbar-bg-color,
rgba(0, 0, 0, 0.25)
);
position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: var(--swiper-pagination-color, var(--swiper-theme-color));
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: scale(0);
transform-origin: left top;
}
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
transform-origin: right top;
}
.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical
> .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 100%;
height: var(--swiper-pagination-progressbar-size, 4px);
left: 0;
top: 0;
}
.swiper-horizontal
> .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-vertical > .swiper-pagination-progressbar {
width: var(--swiper-pagination-progressbar-size, 4px);
height: 100%;
left: 0;
top: 0;
}
.swiper-pagination-lock {
display: none;
}
.swiper-scrollbar {
border-radius: var(--swiper-scrollbar-border-radius, 10px);
position: relative;
touch-action: none;
background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
}
.swiper-scrollbar-disabled > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
display: none !important;
}
.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
position: absolute;
left: var(--swiper-scrollbar-sides-offset, 1%);
bottom: var(--swiper-scrollbar-bottom, 4px);
top: var(--swiper-scrollbar-top, auto);
z-index: 50;
height: var(--swiper-scrollbar-size, 4px);
width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}
.swiper-scrollbar.swiper-scrollbar-vertical,
.swiper-vertical > .swiper-scrollbar {
position: absolute;
left: var(--swiper-scrollbar-left, auto);
right: var(--swiper-scrollbar-right, 4px);
top: var(--swiper-scrollbar-sides-offset, 1%);
z-index: 50;
width: var(--swiper-scrollbar-size, 4px);
height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
border-radius: var(--swiper-scrollbar-border-radius, 10px);
left: 0;
top: 0;
}
.swiper-scrollbar-cursor-drag {
cursor: move;
}
.swiper-scrollbar-lock {
display: none;
}
.swiper-zoom-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.swiper-zoom-container > canvas,
.swiper-zoom-container > img,
.swiper-zoom-container > svg {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.swiper-slide-zoomed {
cursor: move;
touch-action: none;
}
.swiper .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000;
}
.swiper-free-mode > .swiper-wrapper {
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-grid > .swiper-wrapper {
flex-wrap: wrap;
}
.swiper-grid-column > .swiper-wrapper {
flex-wrap: wrap;
flex-direction: column;
}
.swiper-fade.swiper-free-mode .swiper-slide {
transition-timing-function: ease-out;
}
.swiper-fade .swiper-slide {
pointer-events: none;
transition-property: opacity;
}
.swiper-fade .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-fade .swiper-slide-active {
pointer-events: auto;
}
.swiper-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper.swiper-cube {
overflow: visible;
}
.swiper-cube .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
visibility: hidden;
transform-origin: 0 0;
width: 100%;
height: 100%;
}
.swiper-cube .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-cube.swiper-rtl .swiper-slide {
transform-origin: 100% 0;
}
.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-prev {
pointer-events: auto;
visibility: visible;
}
.swiper-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 100%;
opacity: 0.6;
z-index: 0;
}
.swiper-cube .swiper-cube-shadow:before {
content: "";
background: #000;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
filter: blur(50px);
}
.swiper-cube .swiper-slide-next + .swiper-slide {
pointer-events: auto;
visibility: visible;
}
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.swiper.swiper-flip {
overflow: visible;
}
.swiper-flip .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
}
.swiper-flip .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.swiper-creative .swiper-slide {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
transition-property: transform, opacity, height;
}
.swiper.swiper-cards {
overflow: visible;
}
.swiper-cards .swiper-slide {
transform-origin: center bottom;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
}
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment