Skip to content

C
chifengweb2.0
Commit 45c8d980 authored by lei's avatar lei
Browse files
Options

add:bendi xiugai

parent 173265e5
Hide whitespace changes
Inline Side-by-side
Showing with 1349 additions and 3170 deletions
_id1.vue 0 → 100644
View file @ 45c8d980
<template>
<div class="tech">
<!-- 头部和对话框部分保持不变 -->
<BackToTopButton />
<Header :activeIndex="4" />
<CommonDialog
:show="dialogVisible"
@close-dialog="handleCloseDialog"
:omDemandName="omDemandName"
/>
<!-- 留言对话框 -->
<el-dialog
:title="conDia.lifeCycleName"
:visible.sync="showConfirmButton"
width="30%"
center
>
<!-- 对话框内容保持不变 -->
</el-dialog>
<!-- 主内容区域 -->
<article>
<!-- 生命周期服务模块 -->
<section class="lifeService">
<div class="part-tit">
<h3 class="part-title">
<span>一站式矿业开发</span><span>全产业链服务</span>
</h3>
</div>
<!-- 轮播容器 -->
<article class="content_three">
<div class="bd container_new">
<div class="zzbl">
<!-- 主内容轮播 -->
<div class="swiper main-swiper">
<div class="swiper-wrapper">
<div
class="swiper-slide"
v-for="parentItem in lifeServiceList"
:key="parentItem.lifeCycleId"
>
<div class="slide-content">
<div
v-for="childItem in parentItem.children"
:key="childItem.lifeCycleId"
class="service-item"
@click="showTip(childItem)"
>
<img
src="~/static/images/technicalDocking/circle.png"
/>
<span>{{ childItem.lifeCycleName }}</span>
</div>
<div
class="placeholder"
v-if="parentItem.children.length % 2"
></div>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- 缩略图轮播 -->
<div class="swiper thumb-swiper">
<div class="swiper-wrapper">
<div
class="swiper-slide"
v-for="(item, index) in lifeServiceList"
:key="item.lifeCycleId"
>
<span>
<img
:src="`${baseApi}${
currentLifeServiceItemIndex === index
? item.revealIcon
: item.hiddenIcon
}`"
/>
{{ item.lifeCycleName }}
</span>
</div>
</div>
</div>
</div>
</div>
</article>
</section>
<!-- 技术服务方模块 -->
<section class="unit">
<div class="part-tit">
<h3 class="part-title"><span>技术</span><span>服务方</span></h3>
</div>
<div class="tec-com">
<div class="swiper unit-swiper">
<div class="swiper-wrapper">
<div
class="swiper-slide"
v-for="(item, index) in unitList"
:key="index"
>
<ul>
<li
v-for="(subItem, idx) in item"
:key="idx"
@click="goto(subItem.id)"
>
<!-- 单位详情内容保持不变 -->
</li>
</ul>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</section>
</article>
<Footer />
</div>
</template>
<script>
// 导入部分保持不变
import sendRequest from "~/utils/request.js";
import Header from "~/components/header/Header.vue";
import Footer from "~/components/Footer.vue";
import CommonDialog from "~/components/dialog/CommonDialog.vue";
import BackToTopButton from "~/components/BackToTopButton.vue";
export default {
components: {
Footer,
BackToTopButton,
Header,
CommonDialog,
},
data() {
// 数据部分保持不变
return {
currentLifeServiceItemIndex: 0,
items: [
{ id: 1, text: "Item 1" },
{ id: 2, text: "Item 2" },
{ id: 3, text: "Item 3" },
// 添加更多项
],
items2: [
{ id: 1, text: "Item2 1" },
{ id: 2, text: "Item2 2" },
{ id: 3, text: "Item2 3" },
// 添加更多项
],
baseApi: process.env.VUE_APP_File_VIEW, //"/prod-api",
lifeServiceList: [],
lifeServiceItemList: [],
currentIndex4lifeItem: 0,
expertList: [],
expertTypeList: [],
currentIndex4expert: 0,
unitList: [],
unitTypeList: [],
unitDetail: {
chkqCompanyImage: "",
chkqCompanyLogo: "",
chkqCompanyName: "",
chkqCompanyDescription: "",
chkqCompanyAddress: "",
chkqCompanyEnterpriseFunction: "",
},
unitDetailShow: false,
expertTypeIcons: ["banpo", "kancha", "kuangchu", "map-ruler", "shaixuan"],
dialogVisible: false,
formDia: { omSource: 1, omStatus: "N", omDemandName: null },
showConfirmButton: false,
conDia: {},
formDia: { omSource: 1, omStatus: "N" },
rules: {
omContactName: [
{ required: true, message: "请输入姓名", trigger: "blur" },
{ min: 1, max: 5, message: "长度在 1 到 5 个字符", trigger: "blur" },
],
omContactTel: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{
pattern: /^[0-9]{11}$/,
message: "请输入有效的手机号",
trigger: "blur",
},
],
// omCompanyName: [
// { required: true, message: "请输入公司名称", trigger: "blur" },
// ],
omInquiryContent: [
{ required: true, message: "请输入需求内容", trigger: "blur" },
],
},
};
},
beforeDestroy() {
// 销毁所有Swiper实例
[this.mainSwiper, this.thumbSwiper, this.unitSwiper].forEach((swiper) => {
if (swiper) {
swiper.destroy(true);
swiper = null;
}
});
},
mounted() {
this.initSwipers();
this.fetchData();
},
methods: {
async fetchData() {
await Promise.all([
this.getUnitTypeList(),
this.getExpertList(),
this.getLifeCycleList(),
]);
this.$nextTick(() => {
this.$wow.init({ animateClass: "animate__animated" });
});
},
initSwipers() {
// 主内容轮播
this.mainSwiper = new Swiper(".main-swiper", {
direction: "vertical",
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
observer: true,
observeParents: true,
on: { slideChange: () => this.handleSlideChange() },
});
// 缩略图轮播
this.thumbSwiper = new Swiper(".thumb-swiper", {
direction: "vertical",
slidesPerView: 5,
spaceBetween: 10,
watchSlidesProgress: true,
observer: true,
});
// 技术服务方轮播
this.unitSwiper = new Swiper(".unit-swiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
observer: true,
});
},
handleSlideChange() {
this.currentLifeServiceItemIndex = this.mainSwiper.activeIndex;
},
// 其他方法保持不变...
showTip(item) {
console.log(item, "item");
this.showConfirmButton = true;
this.conDia = item;
this.omDemandName = item.lifeCycleName;
this.formDia.omDemandName = item.lifeCycleName;
},
goto(id) {
this.$router.push({ path: `/TechnicalDocking/TecCom?id=${id}` });
},
openDia(val) {
this.formDia = { omSource: 1, omStatus: "N" };
this.dialogVisible = true;
this.formDia.omDemandName = val;
},
handleCloseDialog(newState) {
this.dialogVisible = newState;
},
showUnitDetail(item) {
this.unitDetailShow = true;
this.unitDetail = item;
},
changeUnitType(index) {
this.unitDetailShow = false;
let tempArr = this.unitTypeList[index]["list"] || [];
this.unitList = [];
// for (var i = 0; i < 1; i++) {
// tempArr.push(...tempArr);
// }
// tempArr = tempArr.splice(0, 9);
for (let i = 0; i < tempArr.length; i += 3) {
this.unitList.push(tempArr.slice(i, i + 3));
}
},
changeExpertType(index) {
this.currentIndex4expert = index;
const experts = this.expertTypeList[index]["list"];
this.expertList = [];
for (let i = 0; i < experts.length; i += 4) {
this.expertList.push(experts.slice(i, i + 4));
}
},
changeLifeCycleItem(index) {
this.currentIndex4lifeItem = index;
this.lifeServiceItemList = this.lifeServiceList[index]["children"];
},
async getUnitTypeList1() {
const res = await sendRequest(
"/business/companyInformation/technical/service/UnitCategory",
"get",
{ chkqCompanyUnitCategory: "1" }
);
if (res.code === 200 && res.data.length) {
// this.unitTypeList = res.data;
// // // 设置第一个单位的列表
// this.unitList = res.data[0]["list"];
this.unitList = res.data;
// for (var i = 0; i < 6; i++) {
// unitList.push({
// url: '',
// title: '山东鑫海矿业',
// type: '探矿权'
// });
// }
// for (let i = 0; i < unitList.length; i += 3) {
// this.unitList.push(unitList.slice(i, i + 3));
// }
// if (unitList.length > 0) {
// this.showUnitDetail(unitList[0]);
// }
}
},
async getUnitTypeList() {
const res = await sendRequest("/business/technicalService/list", "get", {
chkqCompanyType: "6",
chkqCompanyUnitCategory: "1",
});
if (res.code === 200 && res.data.length) {
// this.unitList = res.data;
// 设置第一个专家类目的列表
const unitsTemp = res.data;
// for (var i = 0; i < 5; i++) {
// experts.push(...experts);
// }
// 轮播图数据格式切割
for (let i = 0; i < unitsTemp.length; i += 6) {
this.unitList.push(unitsTemp.slice(i, i + 6));
}
console.log(this.unitList);
}
},
async getExpertList() {
const res = await sendRequest("/business/expExpert/type/list", "get", {});
if (res.code === 200 && res.data.length) {
this.expertTypeList = res.data.map((item, index) => {
item.icon = this.expertTypeIcons[index];
return item;
});
// 设置第一个专家类目的列表
this.expertList = [];
const experts = res.data[0]["list"];
// for (var i = 0; i < 5; i++) {
// experts.push(...experts);
// }
// 轮播图数据格式切割
for (let i = 0; i < experts.length; i += 4) {
this.expertList.push(experts.slice(i, i + 4));
}
}
},
async getLifeCycleList() {
const res = await sendRequest("/business/lifeCycle/tree", "get", {});
if (res.code === 200 && res.data.length) {
this.lifeServiceList = res.data;
this.lifeServiceItemList = res.data[0]["children"]; // 默认显示第一个菜单
}
},
async formSub(formName) {
let that = this;
if (this.verificationCode !== this.inVerificationCode) {
this.$message({
message: "请输入正确验证码",
type: "error",
});
return;
}
try {
let that = this;
that.formDia.omSubmitTime = this.getCurrentFormattedTime();
const valid = await new Promise((resolve) => {
this.$refs[formName].validate(resolve);
});
if (valid) {
const msgAdd = await sendRequest(
"/business/onlineMessage",
"post",
"",
that.formDia
);
if (msgAdd.code === 200) {
that.$message({
message: "我们已经收到您的消息",
type: "success",
});
that.formDia = { omSource: 1, omStatus: "N" };
that.showConfirmButton = false;
} else {
that.$message({
message: "请求失败，请重试",
type: "error",
});
}
} else {
that.$message({
message: "请检查信息",
type: "warning",
});
}
} catch (error) {
console.error("Error during request:", error);
that.$message({
message: "请求失败，请重试",
type: "error",
});
}
},
getCurrentFormattedTime(e) {
const inputDate = new Date(e);
if (isNaN(inputDate.getTime())) {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, "0");
const day = String(now.getDate()).padStart(2, "0");
const hours = String(now.getHours()).padStart(2, "0");
const minutes = String(now.getMinutes()).padStart(2, "0");
const seconds = String(now.getSeconds()).padStart(2, "0");
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
} else {
const year = inputDate.getFullYear();
const month = String(inputDate.getMonth() + 1).padStart(2, "0");
const day = String(inputDate.getDate()).padStart(2, "0");
const hours = String(inputDate.getHours()).padStart(2, "0");
const minutes = String(inputDate.getMinutes()).padStart(2, "0");
const seconds = String(inputDate.getSeconds()).padStart(2, "0");
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
},
},
};
</script>
<style lang="scss" scoped>
/* 通用轮播样式 */
.swiper {
&-button-next,
&-button-prev {
background-size: contain;
&::after {
display: none;
}
}
}
/* 主内容区域 */
.content_three {
height: 635px;
margin-top: 41px;
overflow: hidden;
background: linear-gradient(180deg, #eaf2f8 0%, #f7f7f7 100%);
.bd {
height: 584px;
margin-bottom: 10px;
}
}
/* 轮播容器 */
.zzbl {
margin-top: 30px;
height: 470px;
background: #fff;
border: 1px solid #f1f1f1;
border-radius: 10px;
width: 1180px;
position: relative;
}
/* 主轮播样式 */
.main-swiper {
position: absolute;
left: 40px;
top: 30px;
width: 750px;
height: 435px;
.slide-content {
overflow-y: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
max-height: 430px;
padding: 10px;
scrollbar-width: thin;
img {
width: 8px;
height: 8px;
border: 1px solid #0777d1;
border-radius: 50%;
}
}
.swiper-button-next {
background: url(~/static/images/technicalDocking/zzbl_next.png) no-repeat
center;
width: 85px;
height: 44px;
top: 390px;
left: 3px;
}
.swiper-button-prev {
background: url(~/static/images/technicalDocking/zzbl_prev.png) no-repeat
center;
width: 94px;
height: 44px;
top: 390px;
left: 80px;
}
}
/* 缩略图轮播 */
.thumb-swiper {
position: absolute;
left: 30px;
top: 30px;
width: 368px;
height: 340px;
z-index: 1;
.swiper-slide {
height: 60px !important;
line-height: 60px;
background: url(~/static/images/technicalDocking/zzbl_hd_li.png) no-repeat
left center;
span {
font-size: 18px;
color: #5c5c5c;
padding-left: 30px;
cursor: pointer;
@include text-ellipsis;
}
img {
width: 19px;
height: 18px;
margin-right: 10px;
}
&-thumb-active {
background-image: url(~/static/images/technicalDocking/zzbl_hd_li_on.png);
span {
color: #fff;
font-weight: bold;
}
}
}
}
/* 技术服务方轮播 */
.mySwiper3 {
.swiper-button-next {
background: url(~/static/images/technicalDocking/swiper3next.png) no-repeat
center;
top: 160px;
right: 0;
width: 27px;
}
.swiper-button-prev {
background: url(~/static/images/technicalDocking/swiper3prev.png) no-repeat
center;
top: 160px;
left: 0;
width: 27px;
}
}
/* 列表项通用样式 */
.service-item {
flex: 0 0 45%;
display: flex;
align-items: center;
margin: 10px 0;
cursor: pointer;
span {
margin-left: 10px;
font-size: 18px;
color: #5c5c5c;
@include text-ellipsis;
&:hover {
color: rgb(67, 110, 228);
}
}
}
.placeholder {
flex: 0 0 45%;
visibility: hidden;
}
/* 响应式调整 */
@media (max-width: 1200px) {
.zzbl {
width: 95%;
margin-left: auto;
margin-right: auto;
}
.main-swiper {
width: 60%;
left: 35%;
}
.thumb-swiper {
width: 30%;
}
}
</style>
api/technical.js 0 → 100644
View file @ 45c8d980
import sendRequest from '~/utils/request.js';
export const fetchLifeCycle = () =>
sendRequest('/business/lifeCycle/tree', 'get', {});
export const fetchUnitList = () =>
sendRequest('/business/technicalService/list', 'get', {
chkqCompanyType: "6",
chkqCompanyUnitCategory: "1"
});
export const fetchExpertList = () =>
sendRequest('/business/expExpert/type/list', 'get', {});
\ No newline at end of file
nuxt.config.js
View file @ 45c8d980
......@@ -20,7 +20,6 @@ export default {
],
script: [
{ src: 'js/swiper-bundle.min.js', body: true },
{
type: 'text/javascript',
src: '/js/sj.js',
......@@ -46,16 +45,19 @@ export default {
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
// 引入 Swiper 样式
'swiper/swiper-bundle.css',
"static/css/reset.css",
"static/css/common.css",
'element-ui/lib/theme-chalk/index.css',
'animate.css/animate.css' //这里使用的wowjs库里面的css，如果需要animate官方的动画，可自行下载、配置
'animate.css/animate.css'
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
{ src: '~/plugins/element-ui.js', ssr: false },
{ src: '~/plugins/amap.js', mode: 'client' },
{ src: '~/plugins/wow.js', ssr: false }
{ src: '~/plugins/wow.js', ssr: false },
{ src: '~/plugins/swiper.js', ssr: false }
],
// Auto import components: https://go.nuxtjs.dev/config-components
......@@ -73,14 +75,26 @@ export default {
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
extend(config, ctx) {
extend(config, { isDev, isClient }) {
// 跳过图片文件打包
config.module.rules.forEach(rule => {
if (rule.test.toString().includes('png|jpe?g|gif|webp')) {
rule.use = [{
loader: 'file-loader',
options: {
name: isDev ? '[path][name].[ext]' : 'img/[name].[hash:7].[ext]',
emitFile: false // 关键配置：禁止生成打包文件
}
}]
}
})
},
vendor: ['axios', 'element-ui'] // 为防止重复打包
},
env: {
VUE_APP_File_VIEW: "https://cfkyw-package.oss-cn-beijing.aliyuncs.com",
// API_URL: "http://192.168.2.16:12051/chkq" || '/prod-api',
API_URL: "https://www.cfkyw.com.cn/prod-api" || '/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: '赤峰矿业（集团）有限责任公司',
......
package.json
View file @ 45c8d980
......@@ -3,7 +3,7 @@
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"dev": "node --max-old-space-size=8096 ./node_modules/nuxt/bin/nuxt.js",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
......@@ -16,10 +16,9 @@
"loadjs": "^4.3.0-rc1",
"nuxt": "^2.15.8",
"qs": "^6.9.1",
"swiper": "^5.4.5",
"swiper": "^8.4.7",
"vue": "^2.7.10",
"vue-amap": "^0.5.10",
"vue-awesome-swiper": "^4.1.1",
"vue-lazyload": "^1.3.3",
"vuex": "3.6.0",
"wowjs": "^1.1.3"
......@@ -29,6 +28,8 @@
"sass": "^1.49.7",
"sass-loader": "^10",
"vue-server-renderer": "^2.7.10",
"vue-template-compiler": "^2.7.10"
"vue-template-compiler": "^2.7.10",
"increase-memory-limit": "^1.0.7",
"cross-env": "^7.0.2"
}
}
pages/Supply/index.vue
View file @ 45c8d980
<template>
<div class="content supply">
<BackToTopButton />
<Header :activeIndex="5"/>
<sdDialog :sdShow="sdShow" @sd-dialog="sdClose"></sdDialog>
<Header :activeIndex="5" />
<sdDialog :sdShow="sdShow" @sd-dialog="sdClose"></sdDialog>
<div class="supply-content">
<div class="mt30"></div>
<div class="grid_c1">
<div class="inner">
<div class="supply-menu por" >
<div class="supply-menu por">
<div class="supply-menu-tit">全部商品分类</div>
<ul class="supply-menu-list">
<li
......@@ -16,34 +15,40 @@
:key="index"
@mouseover="listShow(index)"
@mouseleave="listHide"
@click="go2detail(item,'industryLe1')"
@click="go2detail(item, 'industryLe1')"
>
<div class="icon">
<img :src="`${baseApi}${item.icon}`" alt="" />
<img :src="`${baseApi}${item.icon}`" alt="" />
</div>
<div class="supply-menu-item">
<span>{{ item.categoryName }}</span>
</div>
<div class="supply-list" v-show="listState&&showIndex===index">
<div
class="supply-list"
v-show="listState && showIndex === index"
>
<div>
<span v-for="(item1, index1) in currProductType.children" :key="index1">
<span @click="go2detail(item1,'industryLe2')">{{ item1.categoryName }}({{ item1.count||0 }}) </span>
<span
v-for="(item1, index1) in currProductType.children"
:key="index1"
>
<span @click="go2detail(item1, 'industryLe2')"
>{{ item1.categoryName }}({{ item1.count || 0 }})
</span>
</span>
</div>
</div>
</li>
</ul>
</div>
<div class="focus-main">
<el-carousel :interval="5000" arrow="hover" height="422px">
<el-carousel-item v-for="item in adData" :key="item.id">
<div class="carousel-cont" tyle="background-size: cover;background-repeat: no-repeat;background-position: center;" :style="{backgroundImage:`url(${baseApi}${item.avatar})`}">
<div
class="carousel-cont"
tyle="background-size: cover;background-repeat: no-repeat;background-position: center;"
:style="{ backgroundImage: `url(${baseApi}${item.avatar})` }"
>
<h3>
<span>{{ item.imageName }}</span>
</h3>
......@@ -53,7 +58,7 @@
</div>
</div>
</div>
<div class="mt40"></div>
<div class="supply-demand-center">
<div class="inner con">
......@@ -63,10 +68,17 @@
<div class="center-tit">
<span class="big-tit">供</span><span>应信息</span>
</div>
<div class="center-more" @click="goToCenter(1)" title="查看更多"></div>
<div
class="center-more"
@click="goToCenter(1)"
title="查看更多"
></div>
</div>
<ul>
<li v-for="i in sdCenterData.supplyList" @click="goToCenterDet(i.id)">
<li
v-for="i in sdCenterData.supplyList"
@click="goToCenterDet(i.id)"
>
<p>{{ i.title }}</p>
<span>{{ formatDate(i.createTime, "m-d") }}</span>
</li>
......@@ -77,17 +89,24 @@
<div class="center-tit center-tit-sb">
<span class="big-tit">需</span><span>求信息</span>
</div>
<div class="center-more" @click="goToCenter(2)" title="查看更多"></div>
<div
class="center-more"
@click="goToCenter(2)"
title="查看更多"
></div>
</div>
<ul>
<li v-for="i in sdCenterData.demandList" @click="goToCenterDet(i.id)">
<li
v-for="i in sdCenterData.demandList"
@click="goToCenterDet(i.id)"
>
<p>{{ i.title }}</p>
<span>{{ formatDate(i.createTime, "m-d") }}</span>
</li>
</ul>
</div>
</div>
<div class="supply-msg-dia" @click="openSd">
<div class="supply-msg-dia" @click="openSd">
<i class="el-icon-headset"></i>
<span>我要发布</span>
</div>
......@@ -121,33 +140,38 @@
</div>
</div>
</div>
</div>
<div class="mt30"></div>
<div class="grid_c3">
<div class="inner">
<div class="mt30"></div>
<div class="part-tit">
<h3 class="part-title">
<span>最新</span><span>商品</span>
</h3>
<h3 class="part-title"><span>最新</span><span>商品</span></h3>
</div>
<p class="more" @click="go2detail()"><span></span><span>查看更多>></span></p>
<ul class="goods-list" >
<li v-for="(item, index) in productList" :key="index" class="por" @click="goto(item.id)">
<p class="more" @click="go2detail()">
<span></span><span>查看更多>></span>
</p>
<ul class="goods-list">
<li
v-for="(item, index) in productList"
:key="index"
class="por"
@click="goto(item.id)"
>
<div>
<img :src="`${baseApi}${item.appearanceImg&&item.appearanceImg[0]}`" alt="" />
<img
:src="`${baseApi}${
item.appearanceImg && item.appearanceImg[0]
}`"
alt=""
/>
</div>
<p class="goods-name">{{item.productName}}</p>
<p class="goods-name">{{ item.productName }}</p>
<p class="goods-disc">
<span>产地：{{ item.origin || '-' }}</span>
<span>产地：{{ item.origin || "-" }}</span>
<span>价格：{{ item.unitPrice || "-" }}</span>
</p>
</li>
</ul>
</div>
</div>
......@@ -155,36 +179,71 @@
<div class="grid_c4">
<template v-for="(item, index) in productTypeList">
<div class="inner grid_c4-inner">
<div class="grid_c4-left" style="background-repeat: no-repeat;background-position: bottom;background-size: cover;" :style="{backgroundImage: 'url(' + baseApi + item.backgroundImage + ')'}">
<div
class="grid_c4-left"
style="
background-repeat: no-repeat;
background-position: bottom;
background-size: cover;
"
:style="{
backgroundImage: 'url(' + baseApi + item.backgroundImage + ')',
}"
>
<div class="grid_c4-title">{{ item.categoryName }}</div>
<ul class="grid_c4-ul">
<li
v-for="subItem in item.children"
:key="subItem.id"
:class="{ 'li-active': activeTabIds[index] === String(subItem.id) }"
@click="handleClickSubItem(subItem.id, index)">
<li
v-for="subItem in item.children"
:key="subItem.id"
:class="{
'li-active': activeTabIds[index] === String(subItem.id),
}"
@click="handleClickSubItem(subItem.id, index)"
>
{{ subItem.categoryName }}
</li>
</ul>
<div class="mt40"></div>
<div class="grid_c4-disc">{{ item.mmqContent || '' }}</div>
<div class="grid_c4-disc">{{ item.mmqContent || "" }}</div>
</div>
<div class="grid_c4-right">
<el-tabs v-model="activeTabIds[index]" @tab-click="handleTabClick">
<el-tab-pane
v-for="subtab in item.children"
:label="subtab.categoryName"
:name="String(subtab.id)">
<el-tabs
v-model="activeTabIds[index]"
@tab-click="handleTabClick"
>
<el-tab-pane
v-for="subtab in item.children"
:label="subtab.categoryName"
:name="String(subtab.id)"
>
<!-- 根据商品列表动态展示 -->
<ul class="goods-list" v-if="goodsList[index] && goodsList[index][subtab.id] && goodsList[index][subtab.id].length > 0">
<li v-for="(good, idx) in goodsList[index][subtab.id]" :key="idx" class="por" @click="goto(good.id)">
<ul
class="goods-list"
v-if="
goodsList[index] &&
goodsList[index][subtab.id] &&
goodsList[index][subtab.id].length > 0
"
>
<li
v-for="(good, idx) in goodsList[index][subtab.id]"
:key="idx"
class="por"
@click="goto(good.id)"
>
<div>
<img :src="`${baseApi}${good.appearanceImg && good.appearanceImg[0]}`" alt="" />
<img
:src="`${baseApi}${
good.appearanceImg && good.appearanceImg[0]
}`"
alt=""
/>
</div>
<p class="goods-name">{{ good.productName }}</p>
</li>
<li v-if="(goodsList[index][subtab.id].length) % 3 !== 0"></li>
<li
v-if="goodsList[index][subtab.id].length % 3 !== 0"
></li>
</ul>
<div v-else>暂无商品</div>
</el-tab-pane>
......@@ -206,7 +265,7 @@
<script>
import axios from "axios";
import sendRequest from "~/utils/request.js";
import { generateVerificationCode,formatDate } from "~/utils/tyler";
import { generateVerificationCode, formatDate } from "~/utils/tyler";
import Footer from "~/components/Footer.vue";
import BackToTopButton from "~/components/BackToTopButton.vue";
......@@ -216,7 +275,7 @@ import sdDialog from "~/components/dialog/sdDialog.vue";
//12.04
import HorizontalMenu from "~/components/header/HorizontalMenu.vue";
import Header from "~/components/header/Header.vue";
import Header from "~/components/header/Header.vue";
export default {
name: "supply",
components: {
......@@ -226,7 +285,7 @@ export default {
CommonDialog,
HorizontalMenu,
Header,
sdDialog
sdDialog,
},
data() {
return {
......@@ -238,29 +297,28 @@ export default {
pageDescription: "赤峰矿业网矿权交易", // 静态页面描述
baseApi: process.env.VUE_APP_File_VIEW,
searchCon: null,
sdShow:false,
showIndex:-1,
sdShow: false,
showIndex: -1,
friendlyLinkList: [],
ruzhuForm: {
omContactName: "",
omCompanyName: "",
omContactTel: "",
inVerificationCoderuzhu:"",
inVerificationCoderuzhu: "",
},
tuijianForm: {
omInquiryContent: "",
omContactName: "",
omCompanyName: "",
omContactTel: "",
inVerificationCodetuijian:"",
inVerificationCodetuijian: "",
},
verificationCodezhu:undefined,
verificationCodetuijian:undefined,
verificationCodezhu: undefined,
verificationCodetuijian: undefined,
listState: false,
rules:{
rules: {
omContactTel: [
{ required: true, message: "请输入手机号", trigger: "blur" },
],
omCompanyName: [
{ required: true, message: "请输入公司名称", trigger: "blur" },
......@@ -270,10 +328,10 @@ export default {
{ min: 1, max: 5, message: "长度在 1 到 5 个字符", trigger: "blur" },
],
},
sdCenterData:{},
sdCenterData: {},
activeTabIds: {}, // 存储每个 tabs 的选中 id
goodsList: {} ,// 存储每个 tab 对应的商品列表
adData:[],
goodsList: {}, // 存储每个 tab 对应的商品列表
adData: [],
};
},
head() {
......@@ -297,8 +355,12 @@ export default {
},
methods: {
formatDate,
sdClose(){this.sdShow=false;},
openSd(){this.sdShow=true;},
sdClose() {
this.sdShow = false;
},
openSd() {
this.sdShow = true;
},
async handleClickSubItem(subItemId, index) {
this.$set(this.activeTabIds, index, String(subItemId));
await this.fetchGoods(subItemId, index);
......@@ -306,8 +368,10 @@ export default {
handleTabClick(tab, event) {
// 传递 tab 的 name 和索引 index
const subTabId = tab.name;
const index = this.productTypeList.findIndex(item => item.children.some(subItem => subItem.id === parseInt(subTabId)));
const index = this.productTypeList.findIndex((item) =>
item.children.some((subItem) => subItem.id === parseInt(subTabId))
);
if (index !== -1) {
this.handleClickTabPane(subTabId, index);
}
......@@ -315,7 +379,7 @@ export default {
async handleClickTabPane(subTabId, index) {
this.$set(this.activeTabIds, index, String(subTabId));
await this.fetchGoods(subTabId, index);
},
},
async fetchGoods(id, index) {
// 判断商品列表是否已存在，避免重复请求
if (!this.goodsList[index]) {
......@@ -326,51 +390,49 @@ export default {
this.$set(this.goodsList[index], id, goods || []); // 存储商品列表
}
},
isPhoneNumber(phoneNumber) {
const regex = /^1[3-9]\d{9}$/;
return regex.test(phoneNumber);
isPhoneNumber(phoneNumber) {
const regex = /^1[3-9]\d{9}$/;
return regex.test(phoneNumber);
},
changeCodezhuce(){
changeCodezhuce() {
this.verificationCodezhu = generateVerificationCode();
this.ruzhuForm.inVerificationCoderuzhu = undefined;
},
changeCodetj(){
changeCodetj() {
this.verificationCodetuijian = generateVerificationCode();
this.ruzhuForm.inVerificationCodetuijian = undefined;
},
brandClick(id){
brandClick(id) {
this.$router.push({
path: `/Supply/brandDet?id=${id}`
path: `/Supply/brandDet?id=${id}`,
});
},
goto(id) {
this.$router.push({ path: `/Supply/det?id=${id}` });
},
go2detail(item,lv){
if(lv === 'industryLe1'){
go2detail(item, lv) {
if (lv === "industryLe1") {
this.$router.push({
path: `/Supply/detail?industryLe1=${JSON.stringify(item.id)}`,
});
}
else if(lv === 'industryLe2'){
} else if (lv === "industryLe2") {
this.$router.push({
path: `/Supply/detail?industryLe1=${JSON.stringify(item.pid)}&industryLe2=${JSON.stringify(item.id)}`,
path: `/Supply/detail?industryLe1=${JSON.stringify(
item.pid
)}&industryLe2=${JSON.stringify(item.id)}`,
});
}
else {
} else {
this.$router.push({
path: `/Supply/detail`,
});
}
},
goToCenter(val){
goToCenter(val) {
this.$router.push({
path: `/Supply/supplyDemand?type=${val}`,
});
},
goToCenterDet(id){
goToCenterDet(id) {
this.$router.push({
path: `/Supply/supplyDemandDet?id=${id}`,
});
......@@ -386,13 +448,13 @@ export default {
});
return;
}
if(!this.isPhoneNumber(this.ruzhuForm.omContactTel)){
if (!this.isPhoneNumber(this.ruzhuForm.omContactTel)) {
this.$notify.error({
message: "请输入有效的手机号",
});
return;
}
const res = await sendRequest("/business/onlineMessage", "post", null, {
omSource: "1",
omDemandName: "商家入驻",
......@@ -408,19 +470,19 @@ export default {
omCompanyName: "",
omContactTel: "",
};
this.changeCodezhuce()
this.changeCodezhuce();
} else {
this.changeCodezhuce()
this.changeCodezhuce();
this.$notify.error({
message: "操作失败",
});
}
},
async getHangyeList(id) {
const result = await sendRequest(
"business/commodityCategory/list?pid="+id,
"get",
"business/commodityCategory/list?pid=" + id,
"get"
);
this.productList = (result.rows && result.rows.splice(0, 8)) || [];
},
......@@ -437,16 +499,16 @@ export default {
// // console.log(this.brandList);
// },
async getGoodsList(id) {
console.log(id)
console.log(id);
const result = await sendRequest(
"business/equipmentProducts/listAll",
"get",
{
visibility:"Y",
industry:id,
visibility: "Y",
industry: id,
}
);
return result.data
return result.data;
},
async submitTuijian() {
if (
......@@ -460,7 +522,7 @@ export default {
});
return;
}
if(!this.isPhoneNumber(this.ruzhuForm.omContactTel)){
if (!this.isPhoneNumber(this.ruzhuForm.omContactTel)) {
this.$notify.error({
message: "请输入有效的手机号",
});
......@@ -487,7 +549,7 @@ export default {
const result = await sendRequest(
"/business/equipmentProducts/listAll",
"get",
{isVisible:'Y'}
{ isVisible: "Y" }
);
this.productList = (result.data && result.data.splice(0, 4)) || [];
},
......@@ -499,7 +561,7 @@ export default {
);
this.productTypeList = result.data || [];
this.productTypeList.forEach((item, index) => {
const firstId = String(item.children[0]?.id || '');
const firstId = String(item.children[0]?.id || "");
this.$set(this.activeTabIds, index, firstId);
this.fetchGoods(firstId, index); // 初始化时加载第一个子项的商品
});
......@@ -508,16 +570,15 @@ export default {
// console.log(111);
},
listShow(index) {
// console.log(index);
this.currProductType = this.productTypeList[index];
console.log(index,this.currProductType,'this.currProductType')
console.log(index, this.currProductType, "this.currProductType");
this.listState = true;
this.showIndex = index;
},
listHide() {
this.listState = false;
this.currProductType=[]
this.currProductType = [];
this.showIndex = -1;
},
// formatDate(timestamp) {
......@@ -546,31 +607,28 @@ export default {
newsTabsChange(e) {
this.newsTit = e;
},
async centerList(){
try{
async centerList() {
try {
const centerData = await sendRequest(
"/business/demandInfo/list",
"get",
{limit:7}
)
this.sdCenterData = centerData.data
}catch(error){}
"get",
{ limit: 7 }
);
this.sdCenterData = centerData.data;
} catch (error) {}
},
async adList(){
try{
async adList() {
try {
const res = await sendRequest(
"/business/demandPicture/listAll",
"get",
{
isDisplay:'Y'
}
)
this.adData = res.rows
}catch(error){}
}
"get",
{
isDisplay: "Y",
}
);
this.adData = res.rows;
} catch (error) {}
},
},
beforeDestroy() {
window.removeEventListener("resize", this.handleResize);
......@@ -647,7 +705,7 @@ export default {
}
}
&:hover {
background-color: #CDE4F7;
background-color: #cde4f7;
}
&:first-child {
margin-top: 8px;
......@@ -655,24 +713,24 @@ export default {
&:last-child {
margin-bottom: 8px;
}
.supply-list{
.supply-list {
position: absolute;
top: 0;
right: -400px;
z-index: 99999;
width: 406px;
padding-left: 10px;
>div{
> div {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: start;
padding:37px;
padding: 37px;
// box-shadow: 0px 2px 6px 1px rgba(80,94,101,0.35);
border-radius: 4px;
gap: 10px;
background-color: #fff;
&::before{
&::before {
content: "";
width: 10px;
height: 10px;
......@@ -684,8 +742,7 @@ export default {
// box-shadow: 0px 2px 6px 1px rgba(80,94,101,0.35);
transform: rotate(45deg);
}
span{
span {
cursor: pointer;
&:hover {
color: #0f78e6;
......@@ -694,9 +751,8 @@ export default {
}
}
}
}
.supply-all-list {
position: absolute;
top: 0;
......@@ -734,7 +790,7 @@ export default {
white-space: nowrap;
text-overflow: ellipsis;
&:hover {
color: rgb(15,120,230);
color: rgb(15, 120, 230);
}
}
ul {
......@@ -872,9 +928,9 @@ export default {
li {
width: 232px;
height: 312px;
background: #FFFFFF;
box-shadow: 0px 2px 8px 1px rgba(40,40,40,0.13);
padding:16px 20px;
background: #ffffff;
box-shadow: 0px 2px 8px 1px rgba(40, 40, 40, 0.13);
padding: 16px 20px;
cursor: pointer;
div {
width: 100%;
......@@ -888,22 +944,20 @@ export default {
object-fit: contain;
}
p {
text-align: center;
line-height: 42px;
color: #fff;
background-color:rgba(63,147,235,.8);
background-color: rgba(63, 147, 235, 0.8);
font-size: 20px;
}
}
.goods-name{
.goods-name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 20px;
color: #000000;
line-height: 45px;
}
.goods-disc {
display: flex;
......@@ -911,14 +965,14 @@ export default {
align-items: center;
font-size: 18px;
color: #666;
span {
font-size: 16px;
color: #8E8E8E;
color: #8e8e8e;
line-height: 36px;
}
span:last-child {
color: #D90A0A;
color: #d90a0a;
}
}
}
......@@ -930,15 +984,15 @@ export default {
background-color: #fff;
display: flex;
justify-content: space-around;
.grid_c4-left{
.grid_c4-left {
width: 314px;
// height: 748px;
position: relative;
padding:30px 42px;
padding: 30px 42px;
overflow: hidden;
box-sizing: border-box;
color: #FFFFFF;
&::before{
color: #ffffff;
&::before {
content: "";
position: absolute;
left: 0;
......@@ -946,39 +1000,40 @@ export default {
top: 0;
bottom: 0;
z-index: -1;
background-color: rgb(15, 119, 230,.85);
background-color: rgb(15, 119, 230, 0.85);
}
.grid_c4-title{
.grid_c4-title {
font-size: 28px;
margin-bottom: 24px;
}
.grid_c4-ul{
.grid_c4-ul {
display: flex;
flex-wrap: wrap;
max-height: 400px;
overflow: hidden;
overflow-y: scroll;
gap: 10px;
&::-webkit-scrollbar{display: none;}
li{
&::-webkit-scrollbar {
display: none;
}
li {
font-size: 16px;
padding: 6px 16px;
border-radius: 16px;
border:1px solid #fff;
border: 1px solid #fff;
cursor: pointer;
&.li-active{
&.li-active {
background-color: #fff;
color: #147AE7;
color: #147ae7;
}
}
}
.grid_c4-disc{
.grid_c4-disc {
font-size: 22px;
line-height: 36px;
}
}
.grid_c4-right{
.grid_c4-right {
width: calc(100% - 314px);
padding: 10px 30px;
box-sizing: border-box;
......@@ -991,10 +1046,12 @@ export default {
max-height: 710px;
overflow: hidden;
overflow-y: scroll;
&::-webkit-scrollbar{display: none;}
&::-webkit-scrollbar {
display: none;
}
li {
width: 268px;
background: #FFFFFF;
background: #ffffff;
transition: all 0.5s ease-in-out;
cursor: pointer;
margin-top: 30px;
......@@ -1010,15 +1067,14 @@ export default {
object-fit: contain;
}
p {
text-align: center;
line-height: 42px;
color: #fff;
background-color:rgba(63,147,235,.8);
background-color: rgba(63, 147, 235, 0.8);
font-size: 20px;
}
}
.goods-name{
.goods-name {
// overflow: hidden;
// white-space: nowrap;
// text-overflow: ellipsis;
......@@ -1026,7 +1082,6 @@ export default {
color: #000000;
line-height: 45px;
text-align: center;
}
.goods-disc {
display: flex;
......@@ -1034,20 +1089,20 @@ export default {
align-items: center;
font-size: 18px;
color: #666;
span {
font-size: 16px;
color: #8E8E8E;
color: #8e8e8e;
line-height: 36px;
}
span:last-child {
color: #D90A0A;
color: #d90a0a;
}
}
&:hover{
box-shadow: 0px 2px 8px 1px rgba(40,40,40,0.13);
&:hover {
box-shadow: 0px 2px 8px 1px rgba(40, 40, 40, 0.13);
}
&:last-child{
&:last-child {
visibility: hidden;
}
}
......@@ -1055,7 +1110,7 @@ export default {
}
}
}
::v-deep .el-tabs__content{
::v-deep .el-tabs__content {
overflow: visible;
}
::v-deep .el-carousel__indicators--horizontal {
......@@ -1075,7 +1130,7 @@ export default {
font-size: 20px;
line-height: 30px;
}
.verification-code{
.verification-code {
width: 100px;
height: 40px;
line-height: 40px;
......@@ -1085,52 +1140,52 @@ export default {
font-stretch: initial;
display: inline-block;
text-align: center;
letter-spacing: .5em;
letter-spacing: 0.5em;
font-size: 16px;
font-weight: bold;
border-radius: 6px;
margin-top: 40px;
}
.supply-demand-center{
.supply-demand-center {
position: relative;
.con{
.con {
background-color: #fff;
padding:40px 36px;
padding: 40px 36px;
position: relative;
.con-a{
.con-a {
display: flex;
.center-part{
.center-part {
width: 50%;
border: 1px solid var(--colorcb);
border-left: 6px solid var(--mainColor);
padding:40px 36px 10px;
padding: 40px 36px 10px;
box-sizing: border-box;
.center-top{
width:80%;
.center-top {
width: 80%;
border-bottom: 1px solid var(--colorcb);
position: relative;
font-family: 'pingguocu';
.center-tit{
font-family: "pingguocu";
.center-tit {
position: relative;
font-size: 20px;
margin-bottom: 8px;
color: var(--mainColor);
.big-tit{
.big-tit {
font-size: 28px;
}
&::before{
&::before {
content: "";
position: absolute;
left: 0px;
bottom:-8px;
bottom: -8px;
width: 150px;
height: 3px;
background: var(--mainColor);
}
&::after{
content:"";
&::after {
content: "";
position: absolute;
right: -112px;
top: -24px;
......@@ -1138,11 +1193,10 @@ export default {
height: 83px;
background: url("~/static/images/SD/icon1.png");
}
}
.center-tit-sb {
&::after{
content:"";
&::after {
content: "";
position: absolute;
right: -112px;
top: -24px;
......@@ -1150,25 +1204,24 @@ export default {
height: 83px;
background: url("~/static/images/SD/icon2.png");
}
}
.center-more{
.center-more {
position: absolute;
right: 24px;
top:6px;
top: 6px;
width: 30px;
height: 30px;
background: url("~/static/images/SD/icon4.png") no-repeat center;
background-size: 100%;
cursor: pointer;
&:hover{
&:hover {
animation: rotateAndScale 1s ease-in-out;
}
}
}
ul {
margin-top: 40px;
li{
li {
position: relative;
font-size: 16px;
color: #000000;
......@@ -1177,8 +1230,8 @@ export default {
cursor: pointer;
margin-bottom: 20px;
transition: all 0.3s ease 0s;
&::before{
content:"";
&::before {
content: "";
position: absolute;
left: 0px;
top: 10px;
......@@ -1187,99 +1240,94 @@ export default {
background: #015293;
border-radius: 50%;
}
&:hover{
p{
&:hover {
p {
color: var(--mainColor);
}
}
p{
p {
text-indent: 1em;
width: 80%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
span{
color: #8E8E8E;
span {
color: #8e8e8e;
}
}
}
}
}
.supply-msg-dia{
.supply-msg-dia {
position: absolute;
right: 0;
top:-25px;
top: -25px;
width: 52px;
height: 82px;
background: linear-gradient(90deg, #F5DA7A 0%, #ECC856 100%);
background: linear-gradient(90deg, #f5da7a 0%, #ecc856 100%);
border-radius: 6px;
font-size: 14px;
color: #635D4E;
color: #635d4e;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding:10px 12px;
padding: 10px 12px;
box-sizing: border-box;
text-align: justify;
cursor: pointer;
transition: all 0.5s ease-in-out;
i{
i {
font-size: 28px;
}
&:hover{
&:hover {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}
}
.con-b{
.con-b {
display: flex;
background-color: #FAFAFA;
background-color: #fafafa;
margin-top: 26px;
padding: 30px 46px;
display: flex;
justify-content: space-between;
.center-part1{
.center-part1 {
width: 45%;
.con-b-tit{
.con-b-tit {
font-size: 28px;
color: #000000;
line-height: 32px;
margin-bottom: 28px;
}
ul{
li{
ul {
li {
width: 50%;
float: left;
position: relative;
span{
span {
font-size: 16px;
color: #8E8E8E;
color: #8e8e8e;
}
p{
p {
margin-top: 20px;
font-size: 32px;
color: #015293;
}
&:nth-child(2)::after{
&:nth-child(2)::after {
content: "";
position: absolute;
left: -20%;
top: 10px;
width: 1px;
height: 50px;
background: #CBCBCB;
background: #cbcbcb;
}
}
}
}
}
}
}
</style>
\ No newline at end of file
</style>
pages/TechnicalDocking/index copy 2.vue deleted 100644 → 0
View file @ 173265e5
<template>
<div class="tech">
<BackToTopButton />
<Header :activeIndex="4"/>
<CommonDialog
:show="dialogVisible"
@close-dialog="handleCloseDialog"
:omDemandName="omDemandName"
/>
<div class="wrapper">
<article>
<!-- 生命周期服务 -->
<section class="lifeService">
<div class="mt30"></div>
<div class="part-tit">
<h3 class="part-title">
<span>一站式矿业开发</span><span>全产业链服务</span>
</h3>
</div>
<div class="mt30"></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="swiper-wrapper" id="certificationList" aria-live="polite"
style="transition-duration: 0ms; transition-delay: 0ms; transform: translate3d(0px, 0px, 0px);">
<div class="swiper-slide swiper-slide-next swiper-slide-active" role="group" aria-label="1 / 23"
style="height: 435px; margin-bottom: 10px;">
<div>
<ul>
<li><a href="javascript:void(0);"
onclick="certification(&#39;11150400011563159U&#39;,&#39;出版物经营许可证&#39;)"
title="出版物经营许可证">出版物经营许可证</a></li>
<li><a href="javascript:void(0);"
onclick="certification(&#39;11150400011563159U&#39;,&#39;印刷经营许可证&#39;)"
title="印刷经营许可证">印刷经营许可证</a></li>
</ul>
</div>
</div>
<div class="swiper-slide" role="group" aria-label="3 / 23"
style="height: 435px; margin-bottom: 10px;">
<div>
<ul>
<li><a href="javascript:void(0);"
onclick="certification(&#39;111504000115634237&#39;,&#39;中华人民共和国特种作业操作证&#39;)"
title="中华人民共和国特种作业操作证">中华人民共和国特种作业操作证</a></li>
<li><a href="javascript:void(0);"
onclick="certification(&#39;111504000115634237&#39;,&#39;煤矿企业主要负责人安全生产知识和管理能力考核合格证明&#39;)"
title="煤矿企业主要负责人安全生产知识和管理能力考核合格证明">煤矿企业主要负责人安全生产知识和管理能力考核合格证明</a></li>
</ul>
</div>
</div>
</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 swiper mySwiper swiper-initialized swiper-vertical swiper-free-mode swiper-watch-progress swiper-thumbs">
<div class="swiper-wrapper" id="certificationOrg" aria-live="polite" style="transition-duration: 0ms; transition-delay: 0ms; transform: translate3d(0px, 0px, 0px);">
<div class="swiper-slide swiper-slide-active swiper-slide-thumb-active" role="group"
aria-label="1 / 23" style="height: 60px; margin-bottom: 10px;"><span>全部证照</span></div>
<div class="swiper-slide swiper-slide-next" role="group" aria-label="2 / 23"
style="height: 60px; margin-bottom: 10px;"><span>赤峰市新闻出版广电局</span></div>
<div class="swiper-slide" role="group" aria-label="3 / 23"
style="height: 60px; margin-bottom: 10px;"><span>赤峰市发改委</span></div>
<div class="swiper-slide" role="group" aria-label="4 / 23"
style="height: 60px; margin-bottom: 10px;"><span>赤峰市教育局</span></div>
<div class="swiper-slide" role="group" aria-label="5 / 23"
style="height: 60px; margin-bottom: 10px;"><span>赤峰市科学技术局</span></div>
<div class="swiper-slide" role="group" aria-label="6 / 23"
style="height: 60px; margin-bottom: 10px;"><span>赤峰市公安局</span></div>
<div class="swiper-slide" role="group" aria-label="7 / 23"
style="height: 60px; margin-bottom: 10px;"><span>赤峰市民政局</span></div>
<div class="swiper-slide" role="group" aria-label="8 / 23"
style="height: 60px; margin-bottom: 10px;"><span>赤峰市司法局</span></div>
<div class="swiper-slide" role="group" aria-label="9 / 23"
style="height: 60px; margin-bottom: 10px;"><span>赤峰市人社局</span></div>
<div class="swiper-slide" role="group" aria-label="10 / 23"
style="height: 60px; margin-bottom: 10px;"><span>赤峰市自然资源局</span></div>
<div class="swiper-slide" role="group" aria-label="11 / 23"
style="height: 60px; margin-bottom: 10px;"><span>赤峰市生态环境局</span></div>
</div>
</div>
</div>
</div>
</article>
</section>
<!-- 支撑单位 -->
<section class="unit">
<div class="mt30"></div>
<div class="part-tit">
<h3 class="part-title">
<span>技术</span><span>服务方</span>
</h3>
</div>
<div class="mt30"></div>
<div class="tec-com">
<ul>
<li v-for="item in unitList" :key="item.chkqCompanyId"><img :src="`${baseApi}${item.chkqCompanyLogo}`" alt="" @click="goto(item.chkqCompanyId)"></li>
</ul>
</div>
</section>
</article>
</div>
<Footer></Footer>
</div>
</template>
<script>
// import Footer from '../../../components/Footer.vue'
import sendRequest from "~/utils/request.js";
import HorizontalMenu from "~/components/header/HorizontalMenu.vue";
import Header from "~/components/header/Header.vue";
import Footer from "~/components/Footer.vue";
import CommonDialog from "~/components/dialog/CommonDialog.vue";
import BackToTopButton from "~/components/BackToTopButton.vue";
export default {
components: {
Footer,
BackToTopButton,
HorizontalMenu,
Header,
CommonDialog,
},
data() {
return {
items: [
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' },
{ id: 3, text: 'Item 3' },
// 添加更多项
],
baseApi: process.env.VUE_APP_File_VIEW, //"/prod-api",
lifeServiceList: [],
lifeServiceItemList: [],
currentIndex4lifeItem: 0,
expertList: [],
expertTypeList: [],
currentIndex4expert: 0,
unitList: [],
unitTypeList: [],
unitDetail: {
chkqCompanyImage: "",
chkqCompanyLogo: "",
chkqCompanyName: "",
chkqCompanyDescription: "",
chkqCompanyAddress: "",
chkqCompanyEnterpriseFunction: "",
},
unitDetailShow: false,
expertTypeIcons: ["banpo", "kancha", "kuangchu", "map-ruler", "shaixuan"],
dialogVisible: false,
formDia: { omSource: 1, omStatus: "N",omDemandName:null },
};
},
mounted() {
this.$nextTick(() => {
this.$wow.init({ animateClass: "animate__animated" });
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); // 滑动到点击的那一项，带有动画效果
}
},
},
});
var swiper2 = new Swiper(".mySwiper2", {
spaceBetween: 10,
direction: "vertical",
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
thumbs: {
swiper: swiper,
},
});
});
this.getUnitTypeList();
this.getExpertList();
this.getLifeCycleList();
},
methods: {
goto(id) {
this.$router.push({ path: `/TechnicalDocking/TecCom?id=${id}` });
},
openDia(val) {
this.formDia = { omSource: 1, omStatus: "N" };
this.dialogVisible = true;
this.formDia.omDemandName = val;
},
handleCloseDialog(newState) {
this.dialogVisible = newState;
},
showUnitDetail(item) {
this.unitDetailShow = true;
this.unitDetail = item;
},
changeUnitType(index) {
this.unitDetailShow = false;
let tempArr = this.unitTypeList[index]["list"] || [];
this.unitList = [];
// for (var i = 0; i < 1; i++) {
// tempArr.push(...tempArr);
// }
// tempArr = tempArr.splice(0, 9);
for (let i = 0; i < tempArr.length; i += 3) {
this.unitList.push(tempArr.slice(i, i + 3));
}
},
changeExpertType(index) {
this.currentIndex4expert = index;
const experts = this.expertTypeList[index]["list"];
this.expertList = [];
for (let i = 0; i < experts.length; i += 4) {
this.expertList.push(experts.slice(i, i + 4));
}
},
changeLifeCycleItem(index) {
this.currentIndex4lifeItem = index;
this.lifeServiceItemList = this.lifeServiceList[index]["children"];
},
async getUnitTypeList1() {
const res = await sendRequest(
"/business/companyInformation/technical/service/UnitCategory",
"get",
{chkqCompanyUnitCategory:"1"}
);
if (res.code === 200 && res.data.length) {
this.unitTypeList = res.data;
// // 设置第一个单位的列表
this.unitList = res.data[0]["list"];
// for (var i = 0; i < 2; i++) {
// unitList.push(...unitList);
// }
// for (let i = 0; i < unitList.length; i += 3) {
// this.unitList.push(unitList.slice(i, i + 3));
// }
// if (unitList.length > 0) {
// this.showUnitDetail(unitList[0]);
// }
}
},
async getUnitTypeList() {
const res = await sendRequest(
"/business/companyInformation/list",
"get",
{chkqCompanyType:"6",chkqCompanyUnitCategory:"1",}
);
if (res.code === 200 && res.rows.length) {
this.unitList = res.rows;
console.log(this.unitList);
}
},
async getExpertList() {
const res = await sendRequest("/business/expExpert/type/list", "get", {});
if (res.code === 200 && res.data.length) {
this.expertTypeList = res.data.map((item, index) => {
item.icon = this.expertTypeIcons[index];
return item;
});
// 设置第一个专家类目的列表
this.expertList = [];
const experts = res.data[0]["list"];
// for (var i = 0; i < 5; i++) {
// experts.push(...experts);
// }
// 轮播图数据格式切割
for (let i = 0; i < experts.length; i += 4) {
this.expertList.push(experts.slice(i, i + 4));
}
}
},
async getLifeCycleList() {
const res = await sendRequest("/business/lifeCycle/tree", "get", {});
if (res.code === 200 && res.data.length) {
this.lifeServiceList = res.data;
this.lifeServiceItemList = res.data[0]["children"]; // 默认显示第一个菜单
}
},
},
};
</script>
<style lang="scss" scoped>
.content_three {
height: 635px;
margin-top: 41px;
// background: url(../images/content_three_bd_bj.png) no-repeat center bottom;
}
.content_three .bd {
height: 584px;
}
.content_three .zzbl {
margin-top: 28px;
height: 506px;
background-color: #ffffff;
box-sizing: border-box;
border: 1px solid #f1f1f1;
border-radius: 10px;
width: 1180px;
position: relative;
.mySwiper2 {
position: absolute;
left: 30px;
top: 30px;
width: 1123px;
padding-left: 395px;
height: 435px;
.swiper-button-next {
width: 80px;
height: 40px;
display: block;
position: absolute;
background: url(~/static/images/technicalDocking/zzbl_next.png) no-repeat center;
top: 380px;
left: 3px;
}
.swiper-button-prev {
width: 80px;
height: 40px;
display: block;
position: absolute;
background: url(~/static/images/technicalDocking/zzbl_prev.png) no-repeat center;
top: 380px;
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;
width: 348px;
height: 340px;
z-index: 1;
position: absolute;
.swiper-slide {
float: left;
width: 348px;
height: 60px !important;
background: url(~/static/images/technicalDocking/zzbl_hd_li.png) no-repeat left center;
span {
font-size: 18px;
color: #333333;
display: block;
padding-left: 30px;
padding-right: 5px;
line-height: 60px;
box-sizing: border-box;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.swiper-slide-thumb-active {
background: url(~/static/images/technicalDocking/zzbl_hd_li_on.png) no-repeat left center;
span {
color: #ffffff;
font-weight: bold;
}
}
}
}
</style>
<style lang="scss" scoped>
$color: #479aff;
.commonMarker {
// 公用图标样式类代码块
.stackBlock {
position: absolute;
width: 30px;
height: 30px;
top: 20px;
left: 10px;
p:first-child {
width: 15px;
height: 15px;
background-color: #036ee0;
position: absolute;
right: 5px;
top: 5px;
z-index: 1;
}
p:last-child {
width: 10px;
height: 10px;
background-color: #81b7ef;
right: 0;
position: absolute;
}
}
}
::v-deep .banner .el-carousel__container {
height: 460px;
}
.el-row {
margin-top: 50px;
}
.wrapper {
width: 1250px;
margin: 0 auto;
background-color: #eeeeee;
.banner {
.note {
position: absolute;
top: 130px;
left: 120px;
font-size: 18px;
color: #fff;
line-height: 2;
}
}
.productLink {
position: relative;
background-color: #ebecf0;
text-align: center;
padding: 50px 0;
margin-top: 20px;
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
h1 {
font-size: 30px;
color: #000;
position: relative;
text-align: center;
font-weight: bold;
letter-spacing: 10px;
}
p {
font-size: 16px;
text-align: center;
color: #8e8e8e;
line-height: 1.5em;
font-weight: normal;
}
}
img {
width: 90%;
}
}
.expert {
display: flex;
justify-content: space-start;
background-color: #f7f7f7;
background-image: url(~/static/images/NEWER/expert/bg.png);
padding-top: 30px;
margin-top: -2px;
height: 510px;
.introduce {
h1 {
font-size: 32px;
color: $color;
border-bottom: 1px solid #eee;
margin-bottom: 6px;
padding: 24px 0;
}
p {
font-size: 12px;
color: #c3c3c3;
}
}
.nav {
margin-right: 90px;
display: flex;
justify-content: center;
flex-direction: column;
background-color: #e9e9e9;
width: 70px;
margin-left: 80px;
height: 440px;
margin-top: 30px;
li {
width: 100px;
height: 90px;
display: flex;
justify-content: center;
align-items: center;
font-size: 10px;
color: #958c8c;
flex-direction: column;
position: relative;
background-color: #dedede;
cursor: pointer;
transition: all 0.2s;
&.active {
background-color: $color;
color: #fff;
}
}
img {
width: 40px;
height: 40px;
}
}
.detail {
position: relative;
width: 880px;
margin-top: 20px;
.prevBtn,
.nextBtn {
position: absolute;
width: 55px;
height: 60px;
top: 130px;
cursor: pointer;
z-index: 9;
}
.prevBtn {
left: 0;
}
.nextBtn {
right: 0;
}
ul {
display: flex;
flex-wrap: wrap;
width: 660px;
margin: 30px auto;
height: 260px;
}
li {
position: relative;
width: 240px;
height: 100px;
border: 4px solid #eee;
background-color: #fff;
display: flex;
margin-right: 60px;
margin-left: 22px;
cursor: pointer;
img {
width: 80px;
margin-right: 15px;
}
h2 {
font-size: 12px;
color: rgb(27, 29, 27);
}
span {
font-size: 12px;
color: #c8c7c7;
}
& > p {
width: 180px;
padding-top: 10px;
div {
display: block;
height: 60px;
overflow: hidden;
}
}
&:hover {
.extend {
display: block;
span {
color: #fff !important;
}
}
}
.extend {
display: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: $color;
overflow-y: auto;
color: #fff;
padding: 10px 20px;
h2 {
color: #fff;
}
& > p {
color: #fff !important;
font-size: 10px;
}
}
:deep(.extend) {
span,
em,
strong {
color: #fff !important;
}
}
}
}
}
.lifeService {
position: relative;
overflow: hidden;
background-color: #fff;
background-image: url(~/static/images/NEWER/bg_service2.png);
background-size: cover;
height: 660px;
background-repeat: no-repeat;
margin-bottom: -3px;
@extend .commonMarker;
header {
text-align: center;
margin: 20px 0px 20px 0px;
h1 {
font-size: 28px;
color: #479aff;
}
> p {
font-size: 12px;
color: #b4b4b4;
letter-spacing: 1px;
}
}
article {
section {
display: flex;
justify-content: center;
}
.menu {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 700px;
li {
width: 110px;
height: 100px;
box-shadow: 1px 1px 3px #bdb7b7;
margin: 10px 15px;
display: flex;
justify-content: center;
align-items: center;
font-size: 10px;
color: #958c8c;
flex-direction: column;
position: relative;
cursor: pointer;
transition: all 0.5s linear;
p {
margin-top: 6px;
word-break: break-all;
font-size: 14px;
text-align: center;
font-weight: bold;
color: #a8a8a8;
}
&.active {
background-color: $color;
color: #fff;
p {
color: #fff;
}
}
// &.active:after {
// content: "|";
// height: 50px;
// background: $color;
// color: $color;
// position: absolute;
// bottom: -50px;
// }
}
img {
width: 55px;
height: 55px;
}
}
$colors: (1, 2, 3);
.submenu {
margin-top: 20px;
/* padding-top: 24px; */
/* border-top: 3px solid #479aff; */
display: flex;
justify-content: center;
overflow-x: auto;
li {
position: relative;
width: 50px;
padding: 7px 7px;
height: 270px;
background: $color;
color: #fff;
text-align: center;
margin: 0px 18px;
box-sizing: border-box;
font-size: 24px;
background-image: url(~/static/images/NEWER/i_1.png);
word-break: break-all;
cursor: pointer;
// &::before {
// content: "|";
// position: absolute;
// top: -31px;
// left: 20px;
// color: $color;
// font-size: 24px;
// }
}
@for $i from 1 through 6 {
li:nth-child(n + #{$i}) {
background-image: url("~/static/images/NEWER/i_#{$i}.png");
}
}
}
.submenu-row {
margin-top: 20px;
display: flex;
justify-content: center;
overflow-y: auto;
flex-wrap: wrap;
// height: 240px;
max-height: 240px;
li {
padding: 0;
position: relative;
width: 500px;
height: 40px;
line-height: 40px;
background: rgba(71,154,255,.7);
color: #fff;
text-align: center;
margin: 0px 18px;
box-sizing: border-box;
font-size: 24px;
background-image: url(~/static/images/NEWER/i-icon.png);
word-break: break-all;
cursor: pointer;
margin-top: 12px;
}
}
}
}
.unit {
position: relative;
background-color: #fff;
overflow: hidden;
// height: 560px;
// padding-bottom: 70px;
@extend .commonMarker;
.detail {
position: relative;
height: 300px;
overflow: hidden;
.item {
img {
width: 106px;
height: 30px;
margin-right: 4px;
}
.bgImg {
position: absolute;
top: -30px;
width: 220px;
height: 100px;
}
width: 250px;
min-width: 60px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
// border: 1px dashed #d7c8c8;
color: gray;
/* background-image: url(/_nuxt/static/images/NEWER/liner.png); */
background-size: cover;
background-repeat: no-repeat;
background-position: 0%;
font-size: 9px;
}
}
.popover {
// display: none;
.title {
display: flex;
margin-bottom: 12px;
.closeBtn {
position: absolute;
right: 16px;
top: 14px;
cursor: pointer;
}
img {
width: 40px;
height: 40px;
margin-right: 20px;
}
.label {
font-size: 18px;
}
.text {
font-size: 12px;
}
}
.body {
height: 140px;
overflow-y: auto;
}
width: 400px;
height: 190px;
background-color: #5b9af5;
background-image: url(https://photo.tuchong.com/486878/f/195494283.jpg); //url(https://p0.itc.cn/images01/20200918/185e839c05f741958de820b6d77ed774.jpeg);
background-size: cover;
color: #fff;
position: absolute;
top: 50%;
left: 46%;
transform: translate(-50%, -50%);
padding: 10px 20px;
z-index: 1;
:deep(.body) {
p {
font-size: 12px;
}
}
}
.nav {
display: flex;
justify-content: space-around;
box-shadow: 0px 0px 1px#d3bbbb;
border: 1px solid #eee;
padding: 35px 15px;
li {
display: flex;
justify-content: space-around;
align-items: center;
width: 100px;
flex-direction: column;
padding: 7px;
background-color: #479aff;
text-align: center;
color: #fff;
background: rgb(69, 190, 255);
background: linear-gradient(
90deg,
rgb(69, 190, 255) 0%,
rgb(1, 139, 244) 100%
);
cursor: pointer;
}
}
header {
text-align: center;
margin: 20px 0px 40px 0px;
h1 {
font-size: 28px;
color: #479aff;
}
p {
font-size: 12px;
color: #b4b4b4;
letter-spacing: 1px;
}
}
}
.tec-com{
width: 100%;
ul{
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
li{
width: 283px;
height: 73px;
background: #FFFFFF;
box-shadow: 0px 3px 5px 0px rgba(43,101,165,0.12);
border-radius: 8px;
border: 1px solid rgba(0,0,0,0.12);
margin:20px 20px;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
img{
width: 100%;
height: 53px;
margin:0 auto ;
}
}
}
}
}
</style>
pages/TechnicalDocking/index copy.vue deleted 100644 → 0
View file @ 173265e5
<template>
<div class="tech">
<BackToTopButton />
<Header :activeIndex="4"/>
<CommonDialog
:show="dialogVisible"
@close-dialog="handleCloseDialog"
:omDemandName="omDemandName"
/>
<div class="wrapper">
<article>
<!-- 生命周期服务 -->
<section class="lifeService">
<div class="mt30"></div>
<div class="part-tit">
<h3 class="part-title">
<span>一站式矿业开发</span><span>全产业链服务</span>
</h3>
</div>
<div class="mt30"></div>
<article>
<section>
<div class="bd container_new">
<div class="zzbl" style="display: block;">
<!-- 轮播详情模块 -->
<div class="swiper mySwiper2 swiper-initialized swiper-vertical">
<div class="swiper-wrapper" id="certificationList" aria-live="polite"
style="transition-duration: 0ms; transition-delay: 0ms; transform: translate3d(0px, 0px, 0px);">
<div class="swiper-slide swiper-slide-next swiper-slide-active" role="group" aria-label="1 / 23"
style="height: 435px; margin-bottom: 10px;">
<div>
<ul>
<li><a href="javascript:void(0);"
onclick="certification(&#39;11150400011563159U&#39;,&#39;出版物经营许可证&#39;)"
title="出版物经营许可证">出版物经营许可证</a></li>
<li><a href="javascript:void(0);"
onclick="certification(&#39;11150400011563159U&#39;,&#39;印刷经营许可证&#39;)"
title="印刷经营许可证">印刷经营许可证</a></li>
</ul>
</div>
</div>
<div class="swiper-slide" role="group" aria-label="3 / 23"
style="height: 435px; margin-bottom: 10px;">
<div>
<ul>
<li><a href="javascript:void(0);"
onclick="certification(&#39;111504000115634237&#39;,&#39;中华人民共和国特种作业操作证&#39;)"
title="中华人民共和国特种作业操作证">中华人民共和国特种作业操作证</a></li>
<li><a href="javascript:void(0);"
onclick="certification(&#39;111504000115634237&#39;,&#39;煤矿企业主要负责人安全生产知识和管理能力考核合格证明&#39;)"
title="煤矿企业主要负责人安全生产知识和管理能力考核合格证明">煤矿企业主要负责人安全生产知识和管理能力考核合格证明</a></li>
</ul>
</div>
</div>
</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 swiper-initialized swiper-vertical swiper-free-mode swiper-watch-progress swiper-thumbs">
<div class="swiper-wrapper" id="certificationOrg" aria-live="polite" style="transition-duration: 0ms; transition-delay: 0ms; transform: translate3d(0px, 0px, 0px);">
<div class="swiper-slide swiper-slide-active swiper-slide-thumb-active" role="group"
aria-label="1 / 23" style="height: 60px; margin-bottom: 10px;"><span>全部证照</span></div>
<div class="swiper-slide swiper-slide-next" role="group" aria-label="2 / 23"
style="height: 60px; margin-bottom: 10px;"><span>赤峰市新闻出版广电局</span></div>
<div class="swiper-slide" role="group" aria-label="3 / 23"
style="height: 60px; margin-bottom: 10px;"><span>赤峰市发改委</span></div>
<div class="swiper-slide" role="group" aria-label="4 / 23"
style="height: 60px; margin-bottom: 10px;"><span>赤峰市教育局</span></div>
<div class="swiper-slide" role="group" aria-label="5 / 23"
style="height: 60px; margin-bottom: 10px;"><span>赤峰市科学技术局</span></div>
<div class="swiper-slide" role="group" aria-label="6 / 23"
style="height: 60px; margin-bottom: 10px;"><span>赤峰市公安局</span></div>
<div class="swiper-slide" role="group" aria-label="7 / 23"
style="height: 60px; margin-bottom: 10px;"><span>赤峰市民政局</span></div>
<div class="swiper-slide" role="group" aria-label="8 / 23"
style="height: 60px; margin-bottom: 10px;"><span>赤峰市司法局</span></div>
<div class="swiper-slide" role="group" aria-label="9 / 23"
style="height: 60px; margin-bottom: 10px;"><span>赤峰市人社局</span></div>
<div class="swiper-slide" role="group" aria-label="10 / 23"
style="height: 60px; margin-bottom: 10px;"><span>赤峰市自然资源局</span></div>
<div class="swiper-slide" role="group" aria-label="11 / 23"
style="height: 60px; margin-bottom: 10px;"><span>赤峰市生态环境局</span></div>
</div>
</div>
</div>
</div>
</section>
</article>
</section>
<!-- 支撑单位 -->
<section class="unit">
<div class="mt30"></div>
<div class="part-tit">
<h3 class="part-title">
<span>技术</span><span>服务方</span>
</h3>
</div>
<div class="mt30"></div>
<div class="tec-com">
<ul>
<li v-for="item in unitList" :key="item.chkqCompanyId"><img :src="`${baseApi}${item.chkqCompanyLogo}`" alt="" @click="goto(item.chkqCompanyId)"></li>
</ul>
</div>
</section>
</article>
</div>
<Footer></Footer>
</div>
</template>
<script>
// import Footer from '../../../components/Footer.vue'
import sendRequest from "~/utils/request.js";
import HorizontalMenu from "~/components/header/HorizontalMenu.vue";
import Header from "~/components/header/Header.vue";
import Footer from "~/components/Footer.vue";
import CommonDialog from "~/components/dialog/CommonDialog.vue";
import BackToTopButton from "~/components/BackToTopButton.vue";
export default {
components: {
Footer,
BackToTopButton,
HorizontalMenu,
Header,
CommonDialog,
},
data() {
return {
items: [
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' },
{ id: 3, text: 'Item 3' },
// 添加更多项
],
baseApi: process.env.VUE_APP_File_VIEW, //"/prod-api",
lifeServiceList: [],
lifeServiceItemList: [],
currentIndex4lifeItem: 0,
expertList: [],
expertTypeList: [],
currentIndex4expert: 0,
unitList: [],
unitTypeList: [],
unitDetail: {
chkqCompanyImage: "",
chkqCompanyLogo: "",
chkqCompanyName: "",
chkqCompanyDescription: "",
chkqCompanyAddress: "",
chkqCompanyEnterpriseFunction: "",
},
unitDetailShow: false,
expertTypeIcons: ["banpo", "kancha", "kuangchu", "map-ruler", "shaixuan"],
dialogVisible: false,
formDia: { omSource: 1, omStatus: "N",omDemandName:null },
};
},
methods: {
goto(id) {
this.$router.push({ path: `/TechnicalDocking/TecCom?id=${id}` });
},
openDia(val) {
this.formDia = { omSource: 1, omStatus: "N" };
this.dialogVisible = true;
this.formDia.omDemandName = val;
},
handleCloseDialog(newState) {
this.dialogVisible = newState;
},
showUnitDetail(item) {
this.unitDetailShow = true;
this.unitDetail = item;
},
changeUnitType(index) {
this.unitDetailShow = false;
let tempArr = this.unitTypeList[index]["list"] || [];
this.unitList = [];
// for (var i = 0; i < 1; i++) {
// tempArr.push(...tempArr);
// }
// tempArr = tempArr.splice(0, 9);
for (let i = 0; i < tempArr.length; i += 3) {
this.unitList.push(tempArr.slice(i, i + 3));
}
},
changeExpertType(index) {
this.currentIndex4expert = index;
const experts = this.expertTypeList[index]["list"];
this.expertList = [];
for (let i = 0; i < experts.length; i += 4) {
this.expertList.push(experts.slice(i, i + 4));
}
},
changeLifeCycleItem(index) {
this.currentIndex4lifeItem = index;
this.lifeServiceItemList = this.lifeServiceList[index]["children"];
},
async getUnitTypeList1() {
const res = await sendRequest(
"/business/companyInformation/technical/service/UnitCategory",
"get",
{chkqCompanyUnitCategory:"1"}
);
if (res.code === 200 && res.data.length) {
this.unitTypeList = res.data;
// // 设置第一个单位的列表
this.unitList = res.data[0]["list"];
// for (var i = 0; i < 2; i++) {
// unitList.push(...unitList);
// }
// for (let i = 0; i < unitList.length; i += 3) {
// this.unitList.push(unitList.slice(i, i + 3));
// }
// if (unitList.length > 0) {
// this.showUnitDetail(unitList[0]);
// }
}
},
async getUnitTypeList() {
const res = await sendRequest(
"/business/companyInformation/list",
"get",
{chkqCompanyType:"6",chkqCompanyUnitCategory:"1",}
);
if (res.code === 200 && res.rows.length) {
this.unitList = res.rows;
console.log(this.unitList);
}
},
async getExpertList() {
const res = await sendRequest("/business/expExpert/type/list", "get", {});
if (res.code === 200 && res.data.length) {
this.expertTypeList = res.data.map((item, index) => {
item.icon = this.expertTypeIcons[index];
return item;
});
// 设置第一个专家类目的列表
this.expertList = [];
const experts = res.data[0]["list"];
// for (var i = 0; i < 5; i++) {
// experts.push(...experts);
// }
// 轮播图数据格式切割
for (let i = 0; i < experts.length; i += 4) {
this.expertList.push(experts.slice(i, i + 4));
}
}
},
async getLifeCycleList() {
const res = await sendRequest("/business/lifeCycle/tree", "get", {});
if (res.code === 200 && res.data.length) {
this.lifeServiceList = res.data;
this.lifeServiceItemList = res.data[0]["children"]; // 默认显示第一个菜单
}
},
},
mounted() {
this.$nextTick(() => {
this.$wow.init({ animateClass: "animate__animated" });
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); // 滑动到点击的那一项，带有动画效果
}
},
},
});
var swiper2 = new Swiper(".mySwiper2", {
spaceBetween: 10,
direction: "vertical",
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
thumbs: {
swiper: swiper,
},
});
});
this.getUnitTypeList();
this.getExpertList();
this.getLifeCycleList();
},
};
</script>
<style>
/* Swiper 样式 */
.swiper-container {
width: 100%;
height: 300px; /* 根据需要调整高度 */
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
background: #009688;
color: white;
}
</style>
<style lang="scss" scoped>
$color: #479aff;
.commonMarker {
// 公用图标样式类代码块
.stackBlock {
position: absolute;
width: 30px;
height: 30px;
top: 20px;
left: 10px;
p:first-child {
width: 15px;
height: 15px;
background-color: #036ee0;
position: absolute;
right: 5px;
top: 5px;
z-index: 1;
}
p:last-child {
width: 10px;
height: 10px;
background-color: #81b7ef;
right: 0;
position: absolute;
}
}
}
::v-deep .banner .el-carousel__container {
height: 460px;
}
.el-row {
margin-top: 50px;
}
.wrapper {
width: 1250px;
margin: 0 auto;
background-color: #eeeeee;
.banner {
.note {
position: absolute;
top: 130px;
left: 120px;
font-size: 18px;
color: #fff;
line-height: 2;
}
}
.productLink {
position: relative;
background-color: #ebecf0;
text-align: center;
padding: 50px 0;
margin-top: 20px;
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
h1 {
font-size: 30px;
color: #000;
position: relative;
text-align: center;
font-weight: bold;
letter-spacing: 10px;
}
p {
font-size: 16px;
text-align: center;
color: #8e8e8e;
line-height: 1.5em;
font-weight: normal;
}
}
img {
width: 90%;
}
}
.expert {
display: flex;
justify-content: space-start;
background-color: #f7f7f7;
background-image: url(~/static/images/NEWER/expert/bg.png);
padding-top: 30px;
margin-top: -2px;
height: 510px;
.introduce {
h1 {
font-size: 32px;
color: $color;
border-bottom: 1px solid #eee;
margin-bottom: 6px;
padding: 24px 0;
}
p {
font-size: 12px;
color: #c3c3c3;
}
}
.nav {
margin-right: 90px;
display: flex;
justify-content: center;
flex-direction: column;
background-color: #e9e9e9;
width: 70px;
margin-left: 80px;
height: 440px;
margin-top: 30px;
li {
width: 100px;
height: 90px;
display: flex;
justify-content: center;
align-items: center;
font-size: 10px;
color: #958c8c;
flex-direction: column;
position: relative;
background-color: #dedede;
cursor: pointer;
transition: all 0.2s;
&.active {
background-color: $color;
color: #fff;
}
}
img {
width: 40px;
height: 40px;
}
}
.detail {
position: relative;
width: 880px;
margin-top: 20px;
.prevBtn,
.nextBtn {
position: absolute;
width: 55px;
height: 60px;
top: 130px;
cursor: pointer;
z-index: 9;
}
.prevBtn {
left: 0;
}
.nextBtn {
right: 0;
}
ul {
display: flex;
flex-wrap: wrap;
width: 660px;
margin: 30px auto;
height: 260px;
}
li {
position: relative;
width: 240px;
height: 100px;
border: 4px solid #eee;
background-color: #fff;
display: flex;
margin-right: 60px;
margin-left: 22px;
cursor: pointer;
img {
width: 80px;
margin-right: 15px;
}
h2 {
font-size: 12px;
color: rgb(27, 29, 27);
}
span {
font-size: 12px;
color: #c8c7c7;
}
& > p {
width: 180px;
padding-top: 10px;
div {
display: block;
height: 60px;
overflow: hidden;
}
}
&:hover {
.extend {
display: block;
span {
color: #fff !important;
}
}
}
.extend {
display: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: $color;
overflow-y: auto;
color: #fff;
padding: 10px 20px;
h2 {
color: #fff;
}
& > p {
color: #fff !important;
font-size: 10px;
}
}
:deep(.extend) {
span,
em,
strong {
color: #fff !important;
}
}
}
}
}
.lifeService {
position: relative;
overflow: hidden;
background-color: #fff;
background-image: url(~/static/images/NEWER/bg_service2.png);
background-size: cover;
height: 660px;
background-repeat: no-repeat;
margin-bottom: -3px;
@extend .commonMarker;
header {
text-align: center;
margin: 20px 0px 20px 0px;
h1 {
font-size: 28px;
color: #479aff;
}
> p {
font-size: 12px;
color: #b4b4b4;
letter-spacing: 1px;
}
}
article {
section {
display: flex;
justify-content: center;
}
.menu {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 700px;
li {
width: 110px;
height: 100px;
box-shadow: 1px 1px 3px #bdb7b7;
margin: 10px 15px;
display: flex;
justify-content: center;
align-items: center;
font-size: 10px;
color: #958c8c;
flex-direction: column;
position: relative;
cursor: pointer;
transition: all 0.5s linear;
p {
margin-top: 6px;
word-break: break-all;
font-size: 14px;
text-align: center;
font-weight: bold;
color: #a8a8a8;
}
&.active {
background-color: $color;
color: #fff;
p {
color: #fff;
}
}
// &.active:after {
// content: "|";
// height: 50px;
// background: $color;
// color: $color;
// position: absolute;
// bottom: -50px;
// }
}
img {
width: 55px;
height: 55px;
}
}
$colors: (1, 2, 3);
.submenu {
margin-top: 20px;
/* padding-top: 24px; */
/* border-top: 3px solid #479aff; */
display: flex;
justify-content: center;
overflow-x: auto;
li {
position: relative;
width: 50px;
padding: 7px 7px;
height: 270px;
background: $color;
color: #fff;
text-align: center;
margin: 0px 18px;
box-sizing: border-box;
font-size: 24px;
background-image: url(~/static/images/NEWER/i_1.png);
word-break: break-all;
cursor: pointer;
// &::before {
// content: "|";
// position: absolute;
// top: -31px;
// left: 20px;
// color: $color;
// font-size: 24px;
// }
}
@for $i from 1 through 6 {
li:nth-child(n + #{$i}) {
background-image: url("~/static/images/NEWER/i_#{$i}.png");
}
}
}
.submenu-row {
margin-top: 20px;
display: flex;
justify-content: center;
overflow-y: auto;
flex-wrap: wrap;
// height: 240px;
max-height: 240px;
li {
padding: 0;
position: relative;
width: 500px;
height: 40px;
line-height: 40px;
background: rgba(71,154,255,.7);
color: #fff;
text-align: center;
margin: 0px 18px;
box-sizing: border-box;
font-size: 24px;
background-image: url(~/static/images/NEWER/i-icon.png);
word-break: break-all;
cursor: pointer;
margin-top: 12px;
}
}
}
}
.unit {
position: relative;
background-color: #fff;
overflow: hidden;
// height: 560px;
// padding-bottom: 70px;
@extend .commonMarker;
.detail {
position: relative;
height: 300px;
overflow: hidden;
.item {
img {
width: 106px;
height: 30px;
margin-right: 4px;
}
.bgImg {
position: absolute;
top: -30px;
width: 220px;
height: 100px;
}
width: 250px;
min-width: 60px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
// border: 1px dashed #d7c8c8;
color: gray;
/* background-image: url(/_nuxt/static/images/NEWER/liner.png); */
background-size: cover;
background-repeat: no-repeat;
background-position: 0%;
font-size: 9px;
}
}
.popover {
// display: none;
.title {
display: flex;
margin-bottom: 12px;
.closeBtn {
position: absolute;
right: 16px;
top: 14px;
cursor: pointer;
}
img {
width: 40px;
height: 40px;
margin-right: 20px;
}
.label {
font-size: 18px;
}
.text {
font-size: 12px;
}
}
.body {
height: 140px;
overflow-y: auto;
}
width: 400px;
height: 190px;
background-color: #5b9af5;
background-image: url(https://photo.tuchong.com/486878/f/195494283.jpg); //url(https://p0.itc.cn/images01/20200918/185e839c05f741958de820b6d77ed774.jpeg);
background-size: cover;
color: #fff;
position: absolute;
top: 50%;
left: 46%;
transform: translate(-50%, -50%);
padding: 10px 20px;
z-index: 1;
:deep(.body) {
p {
font-size: 12px;
}
}
}
.nav {
display: flex;
justify-content: space-around;
box-shadow: 0px 0px 1px#d3bbbb;
border: 1px solid #eee;
padding: 35px 15px;
li {
display: flex;
justify-content: space-around;
align-items: center;
width: 100px;
flex-direction: column;
padding: 7px;
background-color: #479aff;
text-align: center;
color: #fff;
background: rgb(69, 190, 255);
background: linear-gradient(
90deg,
rgb(69, 190, 255) 0%,
rgb(1, 139, 244) 100%
);
cursor: pointer;
}
}
header {
text-align: center;
margin: 20px 0px 40px 0px;
h1 {
font-size: 28px;
color: #479aff;
}
p {
font-size: 12px;
color: #b4b4b4;
letter-spacing: 1px;
}
}
}
.tec-com{
width: 100%;
ul{
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
li{
width: 283px;
height: 73px;
background: #FFFFFF;
box-shadow: 0px 3px 5px 0px rgba(43,101,165,0.12);
border-radius: 8px;
border: 1px solid rgba(0,0,0,0.12);
margin:20px 20px;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
img{
width: 100%;
height: 53px;
margin:0 auto ;
}
}
}
}
}
</style>
pages/TechnicalDocking/index.vue
View file @ 45c8d980
......@@ -63,61 +63,107 @@
</div>
<article class="content_three">
<div class="bd container_new">
<div
class="zzbl"
@mouseenter="clearAutoPlay"
@mouseleave="startAutoPlay"
>
<!-- 左侧导航菜单 -->
<div class="nav-menu">
<div class="zzbl" style="display: block">
<!-- 轮播详情模块 -->
<div class="swiper mySwiper2 swiper-initialized swiper-vertical">
<div
v-for="(item, index) in lifeServiceList"
:key="item.lifeCycleId"
:class="[
'menu-item',
{ active: currentLifeServiceItemIndex === index },
]"
@click="handleMenuClick(index)"
class="swiper-wrapper"
id="certificationList"
aria-live="polite"
style="
transition-duration: 0ms;
transition-delay: 0ms;
transform: translate3d(0px, 0px, 0px);
"
>
<img
v-if="currentLifeServiceItemIndex === index"
:src="`${baseApi}${item.revealIcon}`"
/>
<img v-else :src="`${baseApi}${item.hiddenIcon}`" />
<span>{{ item.lifeCycleName }}</span>
<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>
</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="content-area">
<!-- 添加v-if确保数据加载完成 -->
<template
v-if="lifeServiceList[currentLifeServiceItemIndex]?.children"
<div class="swiper mySwiper">
<div
class="swiper-wrapper"
id="certificationOrg"
style="
transition-duration: 0ms;
transition-delay: 0ms;
transform: translate3d(0px, 0px, 0px);
"
>
<div
v-for="(subItem, subIndex) in lifeServiceList[
currentLifeServiceItemIndex
].children"
:key="subItem.lifeCycleId"
class="content-item"
class="swiper-slide"
v-for="(item, index) in lifeServiceList"
:key="item.lifeCycleId"
>
<img src="~/static/images/technicalDocking/circle.png" />
<span @click="showTip(subItem)">{{
subItem.lifeCycleName
}}</span>
<!-- @click="currentLifeServiceItemIndex=index" -->
<span>
<!-- <img :src="`${baseApi}${item.revealIcon}`" alt="" /> -->
<img
:src="`${baseApi}${
currentLifeServiceItemIndex === index
? item.revealIcon
: item.hiddenIcon
}`"
alt=""
/>
{{ item.lifeCycleName }}</span
>
</div>
<!-- 添加占位元素保持双数布局 -->
<div
v-if="
lifeServiceList[currentLifeServiceItemIndex].children
.length %
2 ===
1
"
class="content-item placeholder"
></div>
</template>
</div>
</div>
</div>
</div>
......@@ -229,7 +275,7 @@ import Header from "~/components/header/Header.vue";
import Footer from "~/components/Footer.vue";
import CommonDialog from "~/components/dialog/CommonDialog.vue";
import BackToTopButton from "~/components/BackToTopButton.vue";
import Swiper from "swiper";
export default {
components: {
Footer,
......@@ -241,7 +287,7 @@ export default {
data() {
return {
timer: null, // 新增定时器实例
omDemandName: null,
currentLifeServiceItemIndex: 0,
items: [
{ id: 1, text: "Item 1" },
......@@ -302,31 +348,76 @@ export default {
};
},
mounted() {
this.startAutoPlay();
var _this = 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); // 滑动到点击的那一项，带有动画效果
_that.currentLifeServiceItemIndex = clickedIndex;
}
},
slideChange: function () {
// alert('改变了，activeIndex为'+this.activeIndex);
_that.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) {
_that.currentLifeServiceItemIndex = clickedIndex;
}
},
slideChange: function () {
// alert('改变了，activeIndex为'+this.activeIndex);
_that.currentLifeServiceItemIndex = this.activeIndex;
},
},
});
var swiper3 = new Swiper(".mySwiper3", {
spaceBetween: 10,
slidesPerView: 1,
direction: "horizontal",
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
}, 1200);
});
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");
this.showConfirmButton = true;
......@@ -532,21 +623,22 @@ 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: url(../images/content_three_bd_bj.png) no-repeat center bottom;
}
.content_three .bd {
padding: 40px 0px;
height: 584px;
margin-bottom: 10px;
}
.zzbl {
display: flex;
gap: 30px;
.content_three .zzbl {
margin-top: 30px;
height: 470px;
// background-color: #ffffff;
// background-color: linear-gradient(180deg, #EAF2F8 0%, #F7F7F7 100%);
background-color: #fff;
......@@ -558,93 +650,99 @@ export default {
position: relative;
margin-left: auto;
margin-right: auto;
padding: 20px;
.nav-menu {
width: 368px;
.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;
.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;
}
}
&.active {
background: url(~/static/images/technicalDocking/zzbl_hd_li_on.png)
no-repeat;
span {
color: #fff;
}
}
.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;
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;
span {
box-sizing: border-box;
font-size: 18px;
color: #5c5c5c;
cursor: pointer;
display: block;
font-family: Microsoft YaHei;
font-size: 18px;
overflow: hidden;
padding-left: 30px;
padding-right: 5px;
font-family: Microsoft YaHei;
box-sizing: border-box;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
img {
width: 19px;
height: 18px;
margin-right: 10px;
}
}
}
.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;
}
.swiper-slide-thumb-active {
background: url(~/static/images/technicalDocking/zzbl_hd_li_on.png)
no-repeat left center;
span {
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; // 隐藏占位元素
color: #ffffff;
font-weight: bold;
}
}
}
}
// 砖家列表轮播样式
.mySwiper3 {
.swiper-slide {
......@@ -729,7 +827,7 @@ $color: #479aff;
background-color: #fff;
// background-image: url(~/static/images/NEWER/bg_service2.png);
background-size: cover;
height: 780px;
height: 660px;
background-repeat: no-repeat;
margin-bottom: -3px;
@extend .commonMarker;
......
pages/TechnicalDocking/index2.vue deleted 100644 → 0
View file @ 173265e5
<template>
<div class="seller">
<BackToTopButton />
<CustomHeader :activeItem="5" />
<div class="m2zrCon m2pubCon background-attachment">
<div class="container">
<div class="banner-inner">
<img src="~/static/images/technicalDocking/banner.png" alt="" />
</div>
</div>
</div>
<section class="page1">
<div class="inner">
<TopList
class="toplist"
:topArr="mineralDictList"
@li-click="handleManageClick"
:num="Number(page1Num)"
>
<MineralManage :dataList="MineralManageData" :num="6"></MineralManage>
</TopList>
</div>
</section>
<section class="page2">
<div class="inner">
<h4 class="por">专家库</h4>
<TopList
class="toplist"
:topArr="page2TopArr"
@li-click="handleLiClick"
:num="Number(page2Num)"
>
<Expert :dataList="expData" :num="4"></Expert>
</TopList>
</div>
</section>
<section class="page3">
<div class="inner">
<h4 class="por">技术支持单位</h4>
<company-carousel :arr="comNameList"></company-carousel>
</div>
</section>
<div class="clear"></div>
<Footer></Footer>
</div>
</template>
<script>
import sendRequest from "~/utils/request.js";
import { getDictLabelFromVal, filterByFields } from "~/utils/tyler";
import CustomHeader from "~/components/CustomHeader.vue";
import Footer from "~/components/Footer.vue";
import BackToTopButton from "~/components/BackToTopButton.vue";
import TopList from "~/components/tech/TopList.vue";
import MineralManage from "~/components/tech/MineralManage.vue";
import Expert from "~/components/tech/Expert.vue";
export default {
components: {
CustomHeader,
sendRequest,
Footer,
BackToTopButton,
TopList,
MineralManage,
Expert,
},
data() {
return {
baseApi: process.env.VUE_APP_File_VIEW,
pageTitle: "赤峰矿权-技术服务支持",
pageDescription: "赤峰矿权",
pageKeywords: "赤峰矿权,赤峰矿业,矿权信息，技术服务支持",
carouselNum: 0,
activeIndex: 0,
active: {
color: "#fff",
background: "#1961C5",
},
mineralDictList: [],
page2TopArr: [],
page2Num: null,
page1Num: null,
mmqManagementData: [],
MineralManageData: [
{
id: 1,
name: "矿业权新立",
infor:
"1、非油气探（采）矿权新立申请登记书（附电子报盘、原件,申请书含坐标页）。\r\n2、申请人的企业营业执照副本或事业单位法人证书（扫描原件，提交复印件）。\r\n3、勘查工作计划、勘查合同或委托勘查的证明文件（原件）。矿权人自行勘查的无需提供勘查合同或委托勘查的证明文件。\r\n4、勘查实施方案（原件）。\r\n5、探（采）矿权申请人银行资金证明（原件）。\r\n6、旗自然资源主管部门意见（原件）。\r\n7、矿业权出让收益或有偿处置证明材料，包括（复印件）:提供缴款通知书、分期缴款批复或包含矿业权出让收益缴纳时间、方式的矿业权成交确认书、矿业权出让合同以及矿业权出让收益缴纳票据和相关凭证等材料。",
icon1: "~/static/images/icon/icon-01-1.png",
icon2: "~/static/images/icon/icon-01-2.png",
},
],
expertNowData: [],
expData: [],
comNameList: [],
};
},
head() {
return {
title: this.pageTitle,
meta: [
{ name: "keywords", content: this.pageKeywords },
{ name: "description", content: this.pageDescription },
],
};
},
created() {},
mounted() {
this.$nextTick(() => {
this.getMineralData();
this.mmqManagementList();
this.expertTypeList();
this.expertNowList();
this.getComData();
});
},
methods: {
getDictLabelFromVal,
filterByFields,
handleManageClick(val) {
let that = this;
this.page1Num = val;
this.MineralManageData = this.filterByFields(that.mmqManagementData, [
{ type: val },
]);
},
handleLiClick(val) {
console.log(val);
let that = this;
this.page2Num = val;
this.expData = this.filterByFields(that.expertNowData, [{ type: val }]);
},
async getMineralData() {
//矿业权管理类型
const dict = await sendRequest("/system/dict/data/list", "get", {
dictType: "mineral_manage_category",
});
this.page1Num = dict.rows[0].dictValue;
this.mineralDictList = dict.rows.map((item) => {
return {
name: item.dictLabel,
id: item.dictValue,
};
});
},
async mmqManagementList() {
//矿业权列表
let that = this;
const mmqManagement = await sendRequest(
"/business/mmqManagement/list",
"get",
{}
);
this.mmqManagementData = mmqManagement.rows.map((item) => {
return {
id: item.id,
name: item.mmqTitle,
icon1: item.mmqIcon1,
infor: item.mmqContent,
type: item.mmqType,
};
});
this.MineralManageData = this.filterByFields(that.mmqManagementData, [
{ type: that.page1Num },
]);
},
async expertTypeList() {
const expertType = await sendRequest("/system/dict/data/list", "get", {
dictType: "cfkq_expert_category",
});
this.page2Num = expertType.rows[0].dictValue;
this.page2TopArr = expertType.rows.map((item) => {
return {
name: item.dictLabel,
id: item.dictValue,
};
});
},
async expertNowList() {
let that = this;
const expertNow = await sendRequest(
"/business/expExpert/list",
"get",
{}
);
this.expertNowData = expertNow.rows.map((item) => {
return {
id: item.id,
name: item.expName,
icon1: item.expImage,
infor: item.expNationality,
type: item.expType,
};
});
this.expData = this.filterByFields(that.expertNowData, [
{ type: that.page2Num },
]);
},
async getComData() {
try {
let that = this;
const comData = await sendRequest(
"/business/companyInformation/list",
"get",
{
chkqCompanyType: 6,
}
);
this.comNameList = comData.rows.map((item) => {
return {
id: item.chkqCompanyId,
name: item.chkqCompanyName,
logo: item.chkqCompanyLogo,
pic: item.chkqCompanyImage,
dis: item.chkqCompanyDescription,
};
});
} catch (error) {
console.error("Error fetching data:", error);
}
},
},
beforeDestroy() {
window.removeEventListener("resize", this.handleResize);
},
};
</script>
<style scoped>
.container {
margin: 0 auto;
}
.page1 {
background: url(~/static/images/technicalDocking/page1.png) no-repeat center;
background-size: cover;
overflow: hidden;
}
.page2 {
background: url(~/static/images/technicalDocking/page2.png) no-repeat center;
background-size: cover;
overflow: hidden;
}
.page3 {
width: 100%;
background: url("~/static/images/transaction/bg3.png") center no-repeat;
background-size: cover;
overflow: hidden;
}
.page2 .inner > h4,
.page3 .inner > h4 {
margin-top: 0.8rem;
font-size: 0.4rem;
font-weight: 500;
color: #fff;
line-height: 0.8rem;
margin-bottom: 0.3rem;
margin-left: 0.3rem;
}
.page2 .inner > h4 {
color: #1961c5;
}
.page2 .inner > h4.por::before,
.page3 .inner > h4.por::before {
content: "";
width: 0.89rem;
height: 3px;
background: #1961c5;
border-radius: 1px;
position: absolute;
bottom: 2px;
left: 0;
}
@media (min-width: 769px) {
}
@media (min-width: 993px) {
.toplist {
margin-top: 80px;
}
.page2 .inner > h4,
.page3 .inner > h4 {
margin-top: 80px;
font-size: 40px;
font-weight: 500;
line-height: 80px;
margin-bottom: 30px;
margin-left: 0;
}
.page2 .inner > h4.por::before,
.page3 .inner > h4.por::before {
content: "";
width: 90px;
height: 6px;
border-radius: 1px;
position: absolute;
bottom: 2px;
left: 0;
}
}
@media (min-width: 1200px) {
}
@media (min-width: 1799px) {
}
</style>
pages/TechnicalDocking/index详情.vue deleted 100644 → 0
View file @ 173265e5
<template>
<div class="tech">
<BackToTopButton />
<Header :activeIndex="4" />
<CommonDialog
:show="dialogVisible"
@close-dialog="handleCloseDialog"
:omDemandName="omDemandName"
/>
<div class="wrapper">
<div data-v-26e60036="" class="min-breadcrumb">
<div data-v-26e60036="" aria-label="Breadcrumb" role="navigation" class="el-breadcrumb">
<span data-v-26e60036="" class="el-breadcrumb__item"><span role="link" class="el-breadcrumb__inner is-link">首页</span>
<i class="el-breadcrumb__separator el-icon-arrow-right"></i></span>
<span data-v-26e60036="" class="el-breadcrumb__item"><span role="link" class="el-breadcrumb__inner">技术服务</span>
<i class="el-breadcrumb__separator el-icon-arrow-right"></i></span>
<span data-v-26e60036="" class="el-breadcrumb__item" aria-current="page">
<span role="link" class="el-breadcrumb__inner">{{detailInfo.commodityName}}</span>
<i class="el-breadcrumb__separator el-icon-arrow-right"></i></span></div></div>
<article>
<!-- 公司简介 -->
<section class="jianjie">
<!-- <div class="breadrumb">
<span>首页</span><span style="color: #c2cada" class="mrl-10">&gt;</span
><span>技术服务</span><span style="color: #c2cada" class="mrl-10">&gt;</span
><span>中心创达</span>
</div> -->
<div class="contentWrapper">
<div class="left">
<div class="item">
<div class="header">
<h2>{{ detailInfo.commodityTel }}</h2>
</div>
<div class="body">
<!-- <p>联系人：{{ detailInfo.commodityName }}</p> -->
<p>电话：{{ detailInfo.commodityTel }}</p>
<!-- <p>邮件：contack@sisuoer-cn.co</p> -->
</div>
</div>
<div class="item">
<div class="header">
<h2>荣誉资质</h2>
</div>
<div class="body">
<p>{{ detailInfo.honorQualification }}</p>
</div>
</div>
</div>
<div class="right">
<div class="header">
<!-- 暂未上传y -->{{ detailInfo.commodityName }}
<img src="" alt="" />
</div>
<div class="body">
<p>
<!-- Sisuper赛澎2019年成立于苏州工业园区，为芬兰百年企业下的独立子品牌，传承行业始祖核心技术，依托总部和本土研发团队，在中国打造全新品牌和平台。专注于为矿山及石料的破碎筛分设备后市场提供零部件，包括备件和磨耗件。在服务的主机品牌上，不局限于美卓山特高端品牌，也服务于中高端市场的本地品牌。产品涵盖矿山和石料市场的备件和磨耗件，100%适配原装机，库存充备、响应快速、适应客户工况需求，技术上，赛澎在传承美卓核心技术的基础上转化为自有技术，具备核心技术研发团队和研发能力，自丰知识产权的备件和磨耗件产品，通过再次研发使产品性价比大大提升，性能优良。服务于市场主流品牌及机型，从而规范产品质量标准，重建后市场秩序，为客户提供稳定可靠的保障，从而引领矿山砂石后市场良性健康地发展。供应链体系完善，自有供应链体系带有赛澎自身知识产权，从研发、设计到生产全流程管控，确保量稳定可靠，赛港为客户提高全方位服务，包括售前售后服务，如报价、销售拜访、安装指导、定期回访，对产品使用维护提供基础指导。 -->
{{ detailInfo.commodityRamark }}
</p>
<img
src="~/static/images/technicalDocking/detail/logo.png"
alt=""
/>
<!-- <img :src="`${baseApi}${item.commodityLogo || 'xxx'}`" alt="" /> -->
</div>
</div>
</div>
</section>
<!-- 详细信息 -->
<section class="detailInfo">
<div class="header">
<h2>企业详细信息</h2>
</div>
<div class="body">
<table>
<tr>
<th>营业执照号</th>
<td>{{ detailInfo.commodityLicens }}</td>
<th>经济类型</th>
<td>{{ detailInfo.economicType }}</td>
<th>技术团队力量</th>
<td>{{detailInfo.technicalTeam}}</td>
<!-- -->
</tr>
<tr>
<th>企业注册地址</th>
<td colspan="5">{{ detailInfo.commodityName }}</td>
</tr>
<tr>
<th>主营业务</th>
<td colspan="5">{{ detailInfo.commodityBusiness }}</td>
</tr>
</table>
</div>
</section>
<section class="detailInfo" style="margin-top: 50px;">
<div class="header">
<h2>技术服务详情</h2>
</div>
<div class="body">
<table>
<tr>
<th class="importantText">服务类型</th>
<td>{{detailInfo.serviceType}}</td>
<th>应用场景</th>
<td>{{detailInfo.applicationScenarios}}</td>
<th>服务内容详情</th></th>
<td>{{detailInfo.serviceRamark}}</td>
</tr>
<tr>
<th>核心技术</th>
<td>{{detailInfo.coreJishu}}</td>
<th>典型案例</th>
<td colspan="3">{{detailInfo.classicCase}}</td>
</tr>
<!-- <tr>
<th>认缴</th>
<td>内容2</td>
<th>营业执照号</th>
<td colspan="3">内容2</td>
</tr> -->
</table>
</div>
</section>
<section class="unit" style="margin-top: 30px">
<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-slide"
style="height: 435px; margin-bottom: 10px"
v-for="(item, index) in detailInfo.caseAvatarList"
:key="index"
>
<img class="itemImg" :src="`${baseApi}${item}`" alt="" srcset="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</section>
</article>
</div>
<Footer></Footer>
</div>
</template>
<script>
// import Footer from '../../../components/Footer.vue'
import sendRequest from "~/utils/request.js";
import HorizontalMenu from "~/components/header/HorizontalMenu.vue";
import Header from "~/components/header/Header.vue";
import Footer from "~/components/Footer.vue";
import CommonDialog from "~/components/dialog/CommonDialog.vue";
import BackToTopButton from "~/components/BackToTopButton.vue";
export default {
components: {
Footer,
BackToTopButton,
HorizontalMenu,
Header,
CommonDialog,
},
data() {
return {
compId: '',
detailInfo: {},
baseApi: process.env.VUE_APP_File_VIEW, //"/prod-api",
lifeServiceList: [],
lifeServiceItemList: [],
currentIndex4lifeItem: 0,
expertList: [],
expertTypeList: [],
currentIndex4expert: 0,
expertTypeIcons: ["banpo", "kancha", "kuangchu", "map-ruler", "shaixuan"],
dialogVisible: false,
formDia: { omSource: 1, omStatus: "N", omDemandName: null },
};
},
created() {
this.compId = this.$route.query.id;
},
mounted() {
var VUE = this;
this.$nextTick(() => {
this.$wow.init({ animateClass: "animate__animated" });
setTimeout(() => {
var swiper3 = new Swiper(".mySwiper3", {
spaceBetween: 10,
direction: "horizontal",
// navigation: {
// nextEl: ".swiper-button-next",
// prevEl: ".swiper-button-prev",
// },
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
},
});
}, 300);
this.getLifeCycleList();
});
},
methods: {
goto(id) {
this.$router.push({ path: `/TechnicalDocking/TecCom?id=${id}` });
},
openDia(val) {
this.formDia = { omSource: 1, omStatus: "N" };
this.dialogVisible = true;
this.formDia.omDemandName = val;
},
handleCloseDialog(newState) {
this.dialogVisible = newState;
},
showUnitDetail(item) {
this.unitDetailShow = true;
this.unitDetail = item;
},
changeUnitType(index) {
this.unitDetailShow = false;
let tempArr = this.unitTypeList[index]["list"] || [];
this.unitList = [];
// for (var i = 0; i < 1; i++) {
// tempArr.push(...tempArr);
// }
// tempArr = tempArr.splice(0, 9);
for (let i = 0; i < tempArr.length; i += 3) {
this.unitList.push(tempArr.slice(i, i + 3));
}
},
changeExpertType(index) {
this.currentIndex4expert = index;
const experts = this.expertTypeList[index]["list"];
this.expertList = [];
for (let i = 0; i < experts.length; i += 4) {
this.expertList.push(experts.slice(i, i + 4));
}
},
async getLifeCycleList() {
const res = await sendRequest("/business/technicalService/"+this.compId, "get");
if (res.code === 200 && res.data) {
this.detailInfo = res.data;
this.detailInfo.caseAvatarList = res.data.caseAvatarList || []; // 默认显示第一个菜单
}
},
},
};
</script>
<style lang="scss" scoped>
// 砖家列表轮播样式
.mySwiper3 {
.itemImg {
width: 100%;
height: 400px;
-o-object-fit: contain;
object-fit: fill;
}
}
.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-pagination {
position: absolute;
bottom: 45px;
}
$color: #479aff;
.commonMarker {
// 公用图标样式类代码块
.stackBlock {
position: absolute;
width: 30px;
height: 30px;
top: 20px;
left: 10px;
p:first-child {
width: 15px;
height: 15px;
background-color: #036ee0;
position: absolute;
right: 5px;
top: 5px;
z-index: 1;
}
p:last-child {
width: 10px;
height: 10px;
background-color: #81b7ef;
right: 0;
position: absolute;
}
}
}
::v-deep .banner .el-carousel__container {
height: 460px;
}
.mrl-10 {
margin-left: 10px;
margin-right: 10px;
}
.el-row {
margin-top: 50px;
}
// 页面总样式
.tech {
background-color: #fafafa;
}
.wrapper {
width: 1250px;
margin: 40px auto 0;
// background-color: #eeeeee;
.jianjie {
background-color: #fff;
// .breadrumb {
// width: 300px;
// height: 30px;
// font-size: 18px;
// margin-bottom: 12px;
// margin-top: 20px;
// span:nth-child(2) {
// color: #606266;
// }
// span:nth-child(3) {
// color: #606266;
// }
// }
.contentWrapper {
display: flex;
justify-content: space-between;
background-color: #fafafa;
margin-top: 18px;
.left {
width: 240px;
height: 400px;
.item {
background-color: #fff;
}
.header {
padding-left: 20px;
color: #000;
font-size: 16px;
font-weight: 400;
background-image: url(~/static/images/technicalDocking/detail/headerLogoL.png);
background-position-x: right;
background-position-y: 20px;
background-repeat: no-repeat;
h2 {
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #ececec;
}
}
.body {
color: #5c5c5c;
font-size: 14px;
padding-top: 30px;
margin-bottom: 20px;
padding-bottom: 5px;
p {
margin-bottom: 25px;
background-image: url(~/static/images/technicalDocking/detail/icon.png);
background-position-x: 26px;
background-position-y: 4px;
background-repeat: no-repeat;
text-indent: 36px;
}
}
}
.right {
width: 994px;
height: 386px;
background-color: #fff;
.header {
color: #000;
font-size: 16px;
background-image: url(~/static/images/technicalDocking/detail/headerLogoL.png);
background-position-x: right;
background-position-y: 20px;
background-repeat: no-repeat;
padding: 14px 0 18px 18px;
font-weight: bold;
// h2{
// margin: 14px 0px 18px 18px;
// }
}
.body {
// padding: 14px;
padding-top: 40px;
// padding-left: 30px;
display: flex;
align-items: flex-start;
font-weight: 300;
font-size: 14px;
color: #696969;
line-height: 30px;
width: 998px;
height: 296px;
background: url(~/static/images/technicalDocking/detail/statistics-bg.png)
no-repeat;
background-position: -5px 4px;
background-size: cover;
p {
width: 710px;
margin-left: 30px;
}
img {
width: 158px;
height: 60px;
margin-left: 50px;
margin-top: 110px;
}
}
}
}
}
.detailInfo {
overflow: hidden;
background-color: #fff;
.body {
padding-right: 10px;
padding-left: 10px;
}
.header {
color: #000;
font-size: 16px;
font-weight: 400;
background-image: url(~/static/images/technicalDocking/detail/headerLogoR.png);
background-position-x: right;
background-repeat: no-repeat;
h2 {
padding-top: 16px;
padding-bottom: 16px;
padding-left: 10px;
}
}
table {
border-collapse: collapse;
border-radius: 10px;
overflow: hidden;
width: 100%;
margin: 20px 0;
}
th,
td {
font-size: 16px;
text-align: left !important;
padding: 20px 30px !important;
width: 200px;
}
th {
background-color: #f0f0f0; /* 白色背景 */
color: #aaa9a9; /* 字体颜色 */
padding: 20px;
border: 1px solid #eedede;
}
th.importantText {
background-color: #e4e4e4;
}
td {
background-color: #fff; /* 深色背景 */
padding: 10px;
text-align: center;
color: #3b3b3b;
border: 1px solid #eedede;
}
}
.popover {
// display: none;
.title {
display: flex;
margin-bottom: 12px;
.closeBtn {
position: absolute;
right: 16px;
top: 14px;
cursor: pointer;
}
img {
width: 40px;
height: 40px;
margin-right: 20px;
}
.label {
font-size: 18px;
}
.text {
font-size: 12px;
}
}
.body {
height: 140px;
overflow-y: auto;
}
width: 400px;
height: 190px;
background-color: #5b9af5;
background-image: url(https://photo.tuchong.com/486878/f/195494283.jpg); //url(https://p0.itc.cn/images01/20200918/185e839c05f741958de820b6d77ed774.jpeg);
background-size: cover;
color: #fff;
position: absolute;
top: 50%;
left: 46%;
transform: translate(-50%, -50%);
padding: 10px 20px;
z-index: 1;
:deep(.body) {
p {
font-size: 12px;
}
}
}
.ellipsis {
width: 390px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
</style>
pages/Transaction/detail/_id.vue
View file @ 45c8d980
......@@ -246,6 +246,8 @@ export default {
return result ? result[field] : null;
},
changePage(pageNum) {
console.log(pageNum, this.searchForm.pageNum, "changePage");
this.searchForm.pageNum = pageNum;
this.getSuggestList();
},
clickVolume(id, index) {
......@@ -290,7 +292,10 @@ export default {
this.searchForm
);
this.suggestList = result.data.rows;
this.suggestList = result.data.rows.map((item) => ({
...item,
websiteMiningImage: item.websiteMiningImage || [], // 确保是数组
}));
this.total = result.data.total;
return Promise.resolve();
},
......
pages/Transaction/minDet/_id.vue
View file @ 45c8d980
......@@ -95,7 +95,8 @@
<div class="small-img">
<div
class="swiper mySwiper3 swiper-initialized swiper-horizontal"
class="swiper mySwiper3 swiper-container swiper-initialized swiper-horizontal"
v-swiper:mySwiper="swiperOption"
>
<div
class="swiper-wrapper"
......@@ -5246,6 +5247,17 @@ export default {
positionY: 0,
isOutside: true,
companyInfor: null,
swiperOption: {
// loop: true, //循环
slidesPerView: 1, //slide容器能够同时显示的slides数量
slidesPerGroup: 1, //多少个slide为一组
spaceBetween: 10, //sliders之间的距离
direction: "horizontal",
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
},
};
},
head() {
......@@ -5273,6 +5285,21 @@ export default {
mounted() {
let that = this;
nextTick(() => {
// 将Swiper初始化代码移到这里
// this.$nextTick(() => {
// new Swiper(".mySwiper3", {
// modules: [Navigation, Pagination],
// spaceBetween: 10,
// direction: "horizontal",
// navigation: {
// nextEl: ".swiper-button-next",
// prevEl: ".swiper-button-prev",
// },
// pagination: {
// el: ".swiper-pagination",
// },
// });
// });
this.getDictData();
this.getMinData();
that.pageView(that.$route.query.id);
......@@ -5280,20 +5307,20 @@ export default {
this.getMoreDetail();
this.target = this.$refs.target;
this.target.addEventListener("mousemove", this.handleMouseMove);
setTimeout(() => {
var swiper3 = new Swiper(".mySwiper3", {
spaceBetween: 10,
direction: "horizontal",
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
},
});
}, 3000);
// setTimeout(() => {
// var swiper3 = new Swiper(".mySwiper3", {
// spaceBetween: 10,
// direction: "horizontal",
// navigation: {
// nextEl: ".swiper-button-next",
// prevEl: ".swiper-button-prev",
// },
// // 如果需要分页器
// pagination: {
// el: ".swiper-pagination",
// },
// });
// }, 3000);
});
},
methods: {
......
pages/test/index.vue
View file @ 45c8d980
<template>
<div class="">
<div class="swiper w-100% flex flex-row justify-between mt-30px">
<div class="swiper-button-prev" slot="swiper-button-prev"></div>
<swiper class="w-100%" ref="mySwiper" :options="swiperOptions" @mouseenter.native="mouseEnter" @mouseleave.native="mouseLeave">
<swiper-slide class="" v-for="item in 5" :key="item">
//设置宽高
<div class="w-100% h-110px" alt="">{{item}}</div>
</swiper-slide>
</swiper>
<div class="swiper-button-next" slot="swiper-button-next"></div>
<div class="swiper-button-prev" slot="swiper-button-prev"></div>
<swiper
class="w-100%"
ref="mySwiper"
:options="swiperOptions"
@mouseenter.native="mouseEnter"
@mouseleave.native="mouseLeave"
>
<swiper-slide class="" v-for="item in 5" :key="item">
//设置宽高
<div class="w-100% h-110px" alt="">{{ item }}</div>
</swiper-slide>
</swiper>
<div class="swiper-button-next" slot="swiper-button-next"></div>
</div>
</div>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
components: {
Swiper,
SwiperSlide
},
mounted() {
},
data() {
return {
swiperOptions: {
loop: true,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
slidesPerView: 1, // 一次展示几张图片
spaceBetween: 30, // 图片间隔
slideToClickedSlide: true, // 是否显示左右跳转按钮
// 这部分用来展示按钮: 查看上一张下一张区域
// 此处定义的类名需与页面展示左右按钮定义的slot一致
// 这里类名和slot都保持统一了
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 此处为分页展示 本次案例没有用到可能页面上没展示出来 类名调整下即可
// 其他配置请转移至官网查看配置
pagination: {
el: '.swiper-pagination',
clickable: true,
type: 'fraction',
},
},
};
},
methods: {
mouseEnter() {
this.$refs.mySwiper.$swiper.autoplay.stop();
components: {
Swiper,
SwiperSlide,
},
mounted() {},
data() {
return {
swiperOptions: {
loop: true,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
mouseLeave() {
this.$refs.mySwiper.$swiper.autoplay.start();
slidesPerView: 1, // 一次展示几张图片
spaceBetween: 30, // 图片间隔
slideToClickedSlide: true, // 是否显示左右跳转按钮
// 这部分用来展示按钮: 查看上一张下一张区域
// 此处定义的类名需与页面展示左右按钮定义的slot一致
// 这里类名和slot都保持统一了
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
}
// 此处为分页展示 本次案例没有用到可能页面上没展示出来 类名调整下即可
// 其他配置请转移至官网查看配置
pagination: {
el: ".swiper-pagination",
clickable: true,
type: "fraction",
},
},
};
},
methods: {
mouseEnter() {
this.$refs.mySwiper.$swiper.autoplay.stop();
},
mouseLeave() {
this.$refs.mySwiper.$swiper.autoplay.start();
},
},
};
</script>
<style>
.el-carousel__item {
text-align: center;
text-align: center;
}
.swiper{
position: relative;
.swiper {
position: relative;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
left: -40px;
color: rgb(39, 95, 171);
font-size: 18px;
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
left: -40px;
color: rgb(39, 95, 171);
font-size: 18px;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{
right: -40px;
color: rgb(39, 95, 171);
font-size: 18px;
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
right: -40px;
color: rgb(39, 95, 171);
font-size: 18px;
}
.slide{
height: 100px;
width: 100%;
background-color: bisque;
text-align: center;
line-height: 100px;
.slide {
height: 100px;
width: 100%;
background-color: bisque;
text-align: center;
line-height: 100px;
}
</style>
\ No newline at end of file
</style>
plugins/swiper.js 0 → 100644
View file @ 45c8d980
import Vue from 'vue';
import Swiper from 'swiper';
import 'swiper/swiper-bundle.css';
export default {
install(Vue) {
Vue.prototype.$swiper = Swiper;
}
}
\ No newline at end of file
utils/formRules.js 0 → 100644
View file @ 45c8d980
export const technicalDialog = {
omContactName: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
],
omContactTel: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ pattern: /^[0-9]{11}$/, message: '请输入有效的手机号', trigger: 'blur' }
],
omInquiryContent: [
{ required: true, message: '请输入需求内容', trigger: 'blur' }
]
};
\ No newline at end of file
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