Skip to content

C
chifengweb2.0
Commit d428df9e authored by sxl's avatar sxl 💬
Browse files
Options

fix:【bug】:swiper联动

parent 7aa1b5c7
Show whitespace changes
Inline Side-by-side
Showing with 498 additions and 530 deletions
pages/TechnicalDocking/index.vue
View file @ d428df9e
...@@ -4,9 +4,7 @@ ...@@ -4,9 +4,7 @@
<Header :activeIndex="4" /> <Header :activeIndex="4" />
<CommonDialog :show="dialogVisible" @close-dialog="handleCloseDialog" :omDemandName="omDemandName" /> <CommonDialog :show="dialogVisible" @close-dialog="handleCloseDialog" :omDemandName="omDemandName" />
<el-dialog :title="conDia.lifeCycleName" :visible.sync="showConfirmButton" width="30%" center> <el-dialog :title="conDia.lifeCycleName" :visible.sync="showConfirmButton" width="30%" center>
<span> <p style=" white-space: pre-wrap;margin-left: 80px;" v-html="conDia.intro"></p>
{{ conDia.intro }}
</span>
<div class="mt20"></div> <div class="mt20"></div>
<div> <div>
<el-form label-width="90px" :model="formDia" :rules="rules" ref="formDia" label-position="right"> <el-form label-width="90px" :model="formDia" :rules="rules" ref="formDia" label-position="right">
...@@ -45,8 +43,8 @@ ...@@ -45,8 +43,8 @@
transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px);
"> ">
<div class="swiper-slide" style="height: 435px; margin-bottom: 10px" v-for="item in lifeServiceList2" <div class="swiper-slide" style="height: 435px; margin-bottom: 10px" v-for="item in lifeServiceList2"
:key="item.lifeCycleId" @mouseenter="swiper2.autoplay.stop()" :key="item.lifeCycleId" @mouseenter="swiper2 && swiper2.autoplay.stop()"
@mouseleave="swiper2.autoplay.start()"> @mouseleave="swiper2 && swiper2.autoplay.start()">
<div style=" <div style="
overflow-y: scroll; overflow-y: scroll;
display: flex; display: flex;
...@@ -278,6 +276,9 @@ export default { ...@@ -278,6 +276,9 @@ export default {
showTip(item) { showTip(item) {
this.showConfirmButton = true; this.showConfirmButton = true;
this.conDia = item; this.conDia = item;
this.conDia.intro = this.conDia.intro.split('。').join('<br/>')
console.log(item, 'item');
this.omDemandName = item.lifeCycleName; this.omDemandName = item.lifeCycleName;
this.formDia.omDemandName = item.lifeCycleName; this.formDia.omDemandName = item.lifeCycleName;
}, },
...@@ -300,13 +301,17 @@ export default { ...@@ -300,13 +301,17 @@ export default {
this.lifeServiceList2 = this.sortLifeServiceList(index, JSON.parse(JSON.stringify(this.lifeServiceList))); this.lifeServiceList2 = this.sortLifeServiceList(index, JSON.parse(JSON.stringify(this.lifeServiceList)));
// swiper2停止自动滚动 // swiper2停止自动滚动
if (this.swiper2) {
this.swiper2.autoplay.stop(); this.swiper2.autoplay.stop();
}
if (timer) { if (timer) {
clearTimeout(timer); clearTimeout(timer);
} }
timer = setTimeout(() => { timer = setTimeout(() => {
if (this.swiper2) {
this.swiper2.autoplay.start(); this.swiper2.autoplay.start();
}
}, 3000); }, 3000);
}, },
sortLifeServiceList(idx, arr) { sortLifeServiceList(idx, arr) {
......
pages/Transaction/index.vue
View file @ d428df9e
...@@ -2,12 +2,7 @@ ...@@ -2,12 +2,7 @@
<div> <div>
<BackToTopButton /> <BackToTopButton />
<Header :activeIndex="2"></Header> <Header :activeIndex="2"></Header>
<CommonDialog <CommonDialog :show="dialogVisible" @close-dialog="handleCloseDialog" :omDemandName="omDemandName" :num="num" />
:show="dialogVisible"
@close-dialog="handleCloseDialog"
:omDemandName="omDemandName"
:num="num"
/>
<div class="wrapper"> <div class="wrapper">
<div class="mt40"></div> <div class="mt40"></div>
...@@ -21,26 +16,18 @@ ...@@ -21,26 +16,18 @@
<div class="mt20"></div> <div class="mt20"></div>
<div class="tc-tabs"> <div class="tc-tabs">
<ul class="suggestype"> <ul class="suggestype">
<li <li :class="{ active: currentIndexKQoverview === index }"
:class="{ active: currentIndexKQoverview === index }" v-for="(item, index) in commonCode4mineRightType4TJ" :key="index" @click="changeSuggest(index, item)">
v-for="(item, index) in commonCode4mineRightType4TJ"
:key="index"
@click="changeSuggest(index, item)"
>
{{ item.dictLabel }} {{ item.dictLabel }}
</li> </li>
</ul> </ul>
<a class="lookMore" @click="go2detail">查看更多>></a> <a class="lookMore" @click="go2detail">查看更多>></a>
</div> </div>
<div class="tableWrapper" v-show="currentIndexKQoverview===0"> <div class="tableWrapper" v-show="currentIndexKQoverview === 0">
<div class="item" v-for="(item, index1) in suggestList1" :key="index1" @click="clickVolume(item.id)"> <div class="item" v-for="(item, index1) in suggestList1" :key="index1" @click="clickVolume(item.id)">
<div class="img-box"> <div class="img-box">
<img <img v-if="item.websiteMiningImage" :src="`${baseApi}${item.websiteMiningImage[0]}`" alt=""
v-if="item.websiteMiningImage" class="left-img" />
:src="`${baseApi}${item.websiteMiningImage[0]}`"
alt=""
class="left-img"
/>
</div> </div>
<div class="center"> <div class="center">
<p class="tit" :title="item.websiteMiningTitle"> <p class="tit" :title="item.websiteMiningTitle">
...@@ -57,20 +44,18 @@ ...@@ -57,20 +44,18 @@
{{ item.averageQuality || "-" }} {{ item.averageQuality || "-" }}
</p> </p>
<p>资源储量：{{ item.reservesScale || "-" }}</p> <p>资源储量：{{ item.reservesScale || "-" }}</p>
<img class="mining-tag" :src="baseApi+getValueByIdAndField(KqTagList,Number(item.miningLable[0]),'picUrl')" alt="" v-if="item.miningLable&&item.miningLable.length>0"> <img class="mining-tag"
:src="baseApi + getValueByIdAndField(KqTagList, Number(item.miningLable[0]), 'picUrl')" alt=""
v-if="item.miningLable && item.miningLable.length > 0">
</div> </div>
</div> </div>
</div> </div>
<div class="tableWrapper" v-show="currentIndexKQoverview===1"> <div class="tableWrapper" v-show="currentIndexKQoverview === 1">
<div class="item" v-for="(item, index1) in suggestList2" :key="index1" @click="clickVolume(item.id)"> <div class="item" v-for="(item, index1) in suggestList2" :key="index1" @click="clickVolume(item.id)">
<div class="img-box"> <div class="img-box">
<img <img class="left-img" v-if="item.websiteMiningImage" :src="`${baseApi}${item.websiteMiningImage[0]}`"
class="left-img" alt="" />
v-if="item.websiteMiningImage"
:src="`${baseApi}${item.websiteMiningImage[0]}`"
alt=""
/>
</div> </div>
<div class="center"> <div class="center">
<p class="tit" :title="item.websiteMiningTitle"> <p class="tit" :title="item.websiteMiningTitle">
...@@ -87,7 +72,9 @@ ...@@ -87,7 +72,9 @@
</p> </p>
<p>资源储量：{{ item.reservesScale || "-" }}</p> <p>资源储量：{{ item.reservesScale || "-" }}</p>
<img class="mining-tag" :src="baseApi+getValueByIdAndField(KqTagList,Number(item.miningLable[0]),'picUrl')" alt="" v-if="item.miningLable&&item.miningLable.length>0"> <img class="mining-tag"
:src="baseApi + getValueByIdAndField(KqTagList, Number(item.miningLable[0]), 'picUrl')" alt=""
v-if="item.miningLable && item.miningLable.length > 0">
</div> </div>
<!-- <p>整体转让</p> --> <!-- <p>整体转让</p> -->
<!-- <div class="item-right"> <!-- <div class="item-right">
...@@ -100,8 +87,8 @@ ...@@ -100,8 +87,8 @@
</div> </div>
</div> </div>
<!-- 支撑单位 --> <!-- 支撑单位 -->
<section class="unit" style="margin-top: 30px"> <section class="unit" style="margin-top: 30px">
<div class="mt30"></div> <div class="mt30"></div>
<div class="part-tit"> <div class="part-tit">
...@@ -110,28 +97,19 @@ ...@@ -110,28 +97,19 @@
<div class="mt30"></div> <div class="mt30"></div>
<div class="tec-com"> <div class="tec-com">
<div class="swiper mySwiper3 swiper-initialized swiper-horizontal"> <div class="swiper mySwiper3 swiper-initialized swiper-horizontal">
<div <div class="swiper-wrapper" id="certificationList" aria-live="polite" style="
class="swiper-wrapper"
id="certificationList"
aria-live="polite"
style="
transition-duration: 0ms; transition-duration: 0ms;
transition-delay: 0ms; transition-delay: 0ms;
transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px);
" ">
> <div class="swiper-slide" style="height: 435px; margin-bottom: 10px" v-for="(item, index) in unitList"
<div :key="index">
class="swiper-slide"
style="height: 435px; margin-bottom: 10px"
v-for="(item, index) in unitList"
:key="index"
>
<ul> <ul>
<!-- <li v-for="item in unitList" :key="item.chkqCompanyId"><img :src="`${baseApi}${item.chkqCompanyLogo}`" alt="" @click="goto(item.chkqCompanyId)"></li> --> <!-- <li v-for="item in unitList" :key="item.chkqCompanyId"><img :src="`${baseApi}${item.chkqCompanyLogo}`" alt="" @click="goto(item.chkqCompanyId)"></li> -->
<li v-for="(subItem, index) in item" :key="index" @click="gotzsdetail(subItem.id)"> <li v-for="(subItem, index) in item" :key="index" @click="gotzsdetail(subItem.id)">
<div class="top"> <div class="top">
<div class="left"> <div class="left">
<img :src="subItem.commodityLogo ? baseApi+subItem.commodityLogo : ''" /> <img :src="subItem.commodityLogo ? baseApi + subItem.commodityLogo : ''" />
</div> </div>
<div class="right"> <div class="right">
<p>{{ subItem.commodityName }}</p> <p>{{ subItem.commodityName }}</p>
...@@ -150,27 +128,11 @@ ...@@ -150,27 +128,11 @@
</ul> </ul>
</div> </div>
</div> </div>
<div <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"
class="swiper-button-next" aria-controls="certificationList" aria-disabled="false"></div>
tabindex="0" <div class="swiper-button-prev swiper-button-disabled" tabindex="-1" role="button"
role="button" aria-label="Previous slide" aria-controls="certificationList" aria-disabled="true"></div>
aria-label="Next slide" <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
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>
</div> </div>
...@@ -210,64 +172,30 @@ ...@@ -210,64 +172,30 @@
</div> </div>
</li> </li>
</ul> --> </ul> -->
<el-form <el-form :model="searchForm" ref="queryForm" size="small" :inline="true" label-width="70px">
:model="searchForm"
ref="queryForm"
size="small"
:inline="true"
label-width="70px"
>
<el-form-item label="矿权类型" prop="chkqType"> <el-form-item label="矿权类型" prop="chkqType">
<el-select <el-select v-model="searchForm.chkqType" placeholder="请选择矿权类型">
v-model="searchForm.chkqType" <el-option v-for="dict in commonCode4mineRightType" :key="dict.dictValue" :label="dict.dictLabel"
placeholder="请选择矿权类型" :value="dict.dictValue" />
>
<el-option
v-for="dict in commonCode4mineRightType"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="矿种类型" prop="miningTypes"> <el-form-item label="矿种类型" prop="miningTypes">
<el-select <el-select v-model="searchForm.miningTypes" placeholder="请选择矿种类型">
v-model="searchForm.miningTypes" <el-option v-for="dict in commonCode4mineType" :key="dict.dictValue" :label="dict.dictLabel"
placeholder="请选择矿种类型" :value="dict.dictValue" />
>
<el-option
v-for="dict in commonCode4mineType"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="区域分类" prop="miningZoneArea"> <el-form-item label="区域分类" prop="miningZoneArea">
<el-select <el-select v-model="searchForm.miningZoneArea" placeholder="请选择区域">
v-model="searchForm.miningZoneArea" <el-option v-for="dict in commonCode4region" :key="dict.dictValue" :label="dict.dictLabel"
placeholder="请选择区域" :value="dict.dictValue" />
>
<el-option
v-for="dict in commonCode4region"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="合作模式" prop="operationSystem"> <el-form-item label="合作模式" prop="operationSystem">
<el-select <el-select v-model="searchForm.operationSystem" placeholder="请选择合作模式">
v-model="searchForm.operationSystem" <el-option v-for="dict in commonCode4coopMode" :key="dict.dictValue" :label="dict.dictLabel"
placeholder="请选择合作模式" :value="dict.dictValue" />
>
<el-option
v-for="dict in commonCode4coopMode"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
...@@ -275,49 +203,25 @@ ...@@ -275,49 +203,25 @@
<el-form-item> <el-form-item>
<el-button icon="el-icon-refresh" size="mini" @click="clear" <el-button icon="el-icon-refresh" size="mini" @click="clear">重置</el-button>
>重置</el-button
>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<client-only> <client-only>
<el-table <el-table :data="mineList" stripe style="width: 100%">
:data="mineList" <el-table-column prop="id" label="序号" width="180" align="center">
stripe
style="width: 100%"
>
<el-table-column
prop="id"
label="序号"
width="180"
align="center"
>
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.$index + 1 }} {{ scope.$index + 1 }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column prop="websiteMiningTitle" label="矿权名称" align="center">
prop="websiteMiningTitle"
label="矿权名称"
align="center"
>
</el-table-column> </el-table-column>
<el-table-column <el-table-column prop="miningTypes" label="矿种类型" width="180" align="center">
prop="miningTypes"
label="矿种类型"
width="180"
align="center"
>
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.miningTypes && scope.row.miningTypes.join(",") }} {{ scope.row.miningTypes && scope.row.miningTypes.join(",") }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column prop="miningZoneArea" label="区域分类" align="center">
prop="miningZoneArea"
label="区域分类"
align="center"
>
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.miningZoneArea }} {{ scope.row.miningZoneArea }}
</template> </template>
...@@ -327,11 +231,7 @@ ...@@ -327,11 +231,7 @@
{{ scope.row.chkqType }} {{ scope.row.chkqType }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column prop="operationSystem" label="合作模式" align="center">
prop="operationSystem"
label="合作模式"
align="center"
>
<template slot-scope="scope"> <template slot-scope="scope">
{{ getDictLabelFromVal( {{ getDictLabelFromVal(
operatingList, operatingList,
...@@ -344,34 +244,21 @@ ...@@ -344,34 +244,21 @@
<el-table-column label="操作"> <el-table-column label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button size="mini" type="primary" @click="openDia1(scope.$index, scope.row)">联系平台</el-button>
size="mini"
type="primary"
@click="openDia1(scope.$index, scope.row)"
>联系平台</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="paginationWrapper"> <div class="paginationWrapper">
<el-pagination <el-pagination layout="prev, pager, next" :current-page="searchForm.pageNum"
layout="prev, pager, next" @current-change="changePage" :total="mineListTotal" :page-size="6">
:current-page="searchForm.pageNum"
@current-change="changePage"
:total="mineListTotal"
:page-size="6"
>
</el-pagination> </el-pagination>
</div> </div>
</client-only> </client-only>
</div> </div>
</div> </div>
</section> </section>
<header <header class="headerTitle wow1 animate__zoomIn" data-wow-duration="1.2s" data-wow-delay="1.2s">
class="headerTitle wow1 animate__zoomIn"
data-wow-duration="1.2s"
data-wow-delay="1.2s"
>
<div class="inner"> <div class="inner">
<div class="part-tit"> <div class="part-tit">
...@@ -388,11 +275,7 @@ ...@@ -388,11 +275,7 @@
</div> </div>
<section class="serviceProcess clear"> <section class="serviceProcess clear">
<header <header class="headerTitle wow1 animate__zoomIn" data-wow-duration="1.2s" data-wow-delay="1.2s">
class="headerTitle wow1 animate__zoomIn"
data-wow-duration="1.2s"
data-wow-delay="1.2s"
>
<div class="inner"> <div class="inner">
<div class="part-tit"> <div class="part-tit">
<h3 class="part-title"> <h3 class="part-title">
...@@ -403,15 +286,15 @@ ...@@ -403,15 +286,15 @@
</header> </header>
<div class="inner"> <div class="inner">
<ul class="content"> <ul class="content">
<li @click="openDia('我要买矿',2)"> <li @click="openDia('我要买矿', 2)">
<img src="@/static/images/OreTrade/fabu1.png" alt="" /> <img src="@/static/images/OreTrade/fabu1.png" alt="" />
<p>我要买矿</p> <p>我要买矿</p>
</li> </li>
<li @click="openDia('我要投资矿业权',1)"> <li @click="openDia('我要投资矿业权', 1)">
<img src="@/static/images/OreTrade/touzi1.png" alt="" /> <img src="@/static/images/OreTrade/touzi1.png" alt="" />
<p>我要投资矿业权</p> <p>我要投资矿业权</p>
</li> </li>
<li @click="openDia('我要卖矿',3)"> <li @click="openDia('我要卖矿', 3)">
<img src="@/static/images/OreTrade/weituo1.png" alt="" /> <img src="@/static/images/OreTrade/weituo1.png" alt="" />
<p>我要卖矿</p> <p>我要卖矿</p>
</li> </li>
...@@ -421,13 +304,9 @@ ...@@ -421,13 +304,9 @@
</div> </div>
<div class="contentus" > <div class="contentus">
<section class="contactMe inner"> <section class="contactMe inner">
<header <header class="headerTitle wow1 animate__zoomIn" data-wow-duration="1.2s" data-wow-delay="1.2s">
class="headerTitle wow1 animate__zoomIn"
data-wow-duration="1.2s"
data-wow-delay="1.2s"
>
<h1>赤峰矿业（集团）有限责任公司</h1> <h1>赤峰矿业（集团）有限责任公司</h1>
<!-- <p> <!-- <p>
基于云计算、SaaS、大数据分析、AI、区块链等技术致力于矿业互联网生态圈建设 基于云计算、SaaS、大数据分析、AI、区块链等技术致力于矿业互联网生态圈建设
...@@ -456,7 +335,7 @@ ...@@ -456,7 +335,7 @@
<script> <script>
// import Footer from '../../../components/Footer.vue' // import Footer from '../../../components/Footer.vue'
import sendRequest from "~/utils/request.js"; import sendRequest from "~/utils/request.js";
import { getDictLabelFromVal,filterByFields } from "~/utils/tyler"; import { getDictLabelFromVal, filterByFields } from "~/utils/tyler";
import Footer from "~/components/Footer.vue"; import Footer from "~/components/Footer.vue";
import BackToTopButton from "~/components/BackToTopButton.vue"; import BackToTopButton from "~/components/BackToTopButton.vue";
import HorizontalMenu from "~/components/header/HorizontalMenu.vue"; import HorizontalMenu from "~/components/header/HorizontalMenu.vue";
...@@ -477,16 +356,16 @@ export default { ...@@ -477,16 +356,16 @@ export default {
return { return {
unitList: [], unitList: [],
dialogVisible: false, dialogVisible: false,
num:null, num: null,
omDemandName: "cs", omDemandName: "cs",
suggestList: [], suggestList: [],
suggestList1: [], suggestList1: [],
suggestList2: [], suggestList2: [],
KqTagList:[], KqTagList: [],
suggestType: 2, suggestType: 2,
baseApi: process.env.VUE_APP_File_VIEW, //"/prod-api", baseApi: process.env.VUE_APP_File_VIEW, //"/prod-api",
currentIndex4overview: 0, currentIndex4overview: 0,
currentIndexKQoverview:0, currentIndexKQoverview: 0,
searchForm: { searchForm: {
miningTypes: "", miningTypes: "",
chkqType: "", chkqType: "",
...@@ -577,7 +456,7 @@ export default { ...@@ -577,7 +456,7 @@ export default {
}, { }, {
value: '融资需求', value: '融资需求',
label: '融资需求' label: '融资需求'
}, ] },]
}; };
}, },
watch: { watch: {
...@@ -649,10 +528,10 @@ export default { ...@@ -649,10 +528,10 @@ export default {
const result = arr.find(item => item.id === id); const result = arr.find(item => item.id === id);
return result ? result[field] : null; return result ? result[field] : null;
}, },
openDia(val,num) { openDia(val, num) {
this.dialogVisible = true; this.dialogVisible = true;
this.omDemandName = val; this.omDemandName = val;
this.num = num||1; this.num = num || 1;
}, },
go2detail() { go2detail() {
this.$router.push({ this.$router.push({
...@@ -688,8 +567,8 @@ export default { ...@@ -688,8 +567,8 @@ export default {
"business/miningTag/listAll", "business/miningTag/listAll",
"get", "get",
{ {
pageNum:1, pageNum: 1,
pageSize:999, pageSize: 999,
} }
); );
this.KqTagList = result.rows; this.KqTagList = result.rows;
...@@ -704,8 +583,9 @@ export default { ...@@ -704,8 +583,9 @@ export default {
} }
); );
this.suggestList = result.data.rows; this.suggestList = result.data.rows;
this.suggestList1 = this.sliceArray(filterByFields(this.suggestList,[{chkqType:"采矿权"}]),6); this.suggestList1 = this.sliceArray(filterByFields(this.suggestList, [{ chkqType: "采矿权" }]), 6);
this.suggestList2 = this.sliceArray(filterByFields(this.suggestList,[{chkqType:"探矿权"}]),6); console.log(this.suggestList1, 'this.suggestList1');
this.suggestList2 = this.sliceArray(filterByFields(this.suggestList, [{ chkqType: "探矿权" }]), 6);
}, },
clear() { clear() {
this.searchForm = this.$options.data().searchForm; this.searchForm = this.$options.data().searchForm;
...@@ -827,52 +707,53 @@ $color: #479aff; ...@@ -827,52 +707,53 @@ $color: #479aff;
$border-color: #f1f1f1; $border-color: #f1f1f1;
.mySwiper3 { .mySwiper3 {
.swiper-slide{ .swiper-slide {
li{ li {
&:hover{ &:hover {
cursor: pointer; cursor: pointer;
} }
} }
} }
.swiper-button-next { .swiper-button-next {
background: url(~/static/images/technicalDocking/swiper3next.png) no-repeat background: url(~/static/images/technicalDocking/swiper3next.png) no-repeat center;
center;
top: 160px; top: 160px;
right: 0px; right: 0px;
width: 27px; width: 27px;
} }
.swiper-button-prev { .swiper-button-prev {
top: 160px; top: 160px;
left: 0px; left: 0px;
width: 27px; width: 27px;
background: url(~/static/images/technicalDocking/swiper3prev.png) no-repeat background: url(~/static/images/technicalDocking/swiper3prev.png) no-repeat center;
center;
// top: 390px; // top: 390px;
// left: 80px; // left: 80px;
} }
} }
.swiper-button-next:after, .swiper-button-next:after,
.swiper-button-prev:after { .swiper-button-prev:after {
font-family: swiper-icons; font-family: swiper-icons;
font-size: 0px; font-size: 0px;
text-transform: none !important; text-transform: none !important;
letter-spacing: 0; letter-spacing: 0;
font-variant: initial; font-variant: initial;
line-height: 1; line-height: 1;
} }
.part6 { .part6 {
padding-top: 30px; padding-top: 30px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
.kq { .kq {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
flex-wrap: wrap; flex-wrap: wrap;
margin: 40px 0; margin: 40px 0;
li { li {
width: 48%; width: 48%;
display: flex; display: flex;
...@@ -881,9 +762,11 @@ $border-color: #f1f1f1; ...@@ -881,9 +762,11 @@ $border-color: #f1f1f1;
align-items: center; align-items: center;
transition: all 0.5s ease; transition: all 0.5s ease;
cursor: pointer; cursor: pointer;
.item-left { .item-left {
width: 166px; width: 166px;
height: 160px; height: 160px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -891,6 +774,7 @@ $border-color: #f1f1f1; ...@@ -891,6 +774,7 @@ $border-color: #f1f1f1;
display: block; display: block;
} }
} }
.item-mid { .item-mid {
text-align: left; text-align: left;
display: flex; display: flex;
...@@ -899,6 +783,7 @@ $border-color: #f1f1f1; ...@@ -899,6 +783,7 @@ $border-color: #f1f1f1;
line-height: 26px; line-height: 26px;
margin: 0 20px; margin: 0 20px;
width: calc(75% - 166px); width: calc(75% - 166px);
p:first-child { p:first-child {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
...@@ -906,15 +791,19 @@ $border-color: #f1f1f1; ...@@ -906,15 +791,19 @@ $border-color: #f1f1f1;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
// align-items: center; // align-items: center;
} }
.item-right { .item-right {
text-align: center; text-align: center;
p { p {
font-size: 18px; font-size: 18px;
color: #eb5757; color: #eb5757;
line-height: 36px; line-height: 36px;
} }
div { div {
font-size: 14px; font-size: 14px;
background-color: #218496; background-color: #218496;
...@@ -926,6 +815,7 @@ $border-color: #f1f1f1; ...@@ -926,6 +815,7 @@ $border-color: #f1f1f1;
cursor: pointer; cursor: pointer;
} }
} }
&:hover { &:hover {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
} }
...@@ -947,6 +837,7 @@ body { ...@@ -947,6 +837,7 @@ body {
// margin: 0 auto; // margin: 0 auto;
background-color: #fff; background-color: #fff;
} }
body { body {
background: #eeeeee; background: #eeeeee;
} }
...@@ -954,6 +845,7 @@ body { ...@@ -954,6 +845,7 @@ body {
.headerTitle { .headerTitle {
text-align: center; text-align: center;
margin: 20px 0px; margin: 20px 0px;
h1 { h1 {
font-size: 25px; font-size: 25px;
text-indent: 0px; text-indent: 0px;
...@@ -961,7 +853,8 @@ body { ...@@ -961,7 +853,8 @@ body {
font-weight: 500; font-weight: 500;
letter-spacing: 7px; letter-spacing: 7px;
} }
> p {
>p {
font-size: 14px; font-size: 14px;
color: #b1b1b1; color: #b1b1b1;
margin-top: 6px; margin-top: 6px;
...@@ -973,8 +866,10 @@ body { ...@@ -973,8 +866,10 @@ body {
background-color: #fff; background-color: #fff;
margin-top: 40px; margin-top: 40px;
padding-bottom: 20px; padding-bottom: 20px;
.navWrapper { .navWrapper {
position: relative; position: relative;
a { a {
position: absolute; position: absolute;
right: 12px; right: 12px;
...@@ -991,6 +886,7 @@ body { ...@@ -991,6 +886,7 @@ body {
border-bottom: 1px solid #f3f3f3; border-bottom: 1px solid #f3f3f3;
box-sizing: border-box; box-sizing: border-box;
} }
.item { .item {
width: 416.3px; width: 416.3px;
height: 170px; height: 170px;
...@@ -1002,18 +898,22 @@ body { ...@@ -1002,18 +898,22 @@ body {
padding-top: 20px; padding-top: 20px;
float: left; float: left;
box-sizing: border-box; box-sizing: border-box;
img { img {
width: 120px; width: 120px;
height: 120px; height: 120px;
object-fit: cover; object-fit: cover;
} }
.center { .center {
width: 180px; width: 180px;
margin-left: 8px; margin-left: 8px;
p { p {
color: #9a9a9a; color: #9a9a9a;
font-size: 12px; font-size: 12px;
margin-bottom: 10px; margin-bottom: 10px;
&:first-child { &:first-child {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
...@@ -1021,20 +921,25 @@ body { ...@@ -1021,20 +921,25 @@ body {
} }
} }
} }
.right { .right {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
p { p {
margin-top: 24px; margin-top: 24px;
span { span {
font-size: 24px; font-size: 24px;
vertical-align: -1px; vertical-align: -1px;
} }
&:first-child { &:first-child {
font-size: 18px !important; font-size: 18px !important;
color: #eb5757; color: #eb5757;
} }
&:last-child { &:last-child {
width: 80px; width: 80px;
height: 34px; height: 34px;
...@@ -1044,6 +949,7 @@ body { ...@@ -1044,6 +949,7 @@ body {
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
:hover { :hover {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
...@@ -1058,37 +964,46 @@ body { ...@@ -1058,37 +964,46 @@ body {
overflow: hidden; overflow: hidden;
margin-top: 20px; margin-top: 20px;
background-color: #f5fbff; background-color: #f5fbff;
.paginationWrapper { .paginationWrapper {
margin: 10px 0 30px; margin: 10px 0 30px;
} }
.search { .search {
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
li { li {
display: flex; display: flex;
label.active { label.active {
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
} }
input[type="radio"] { input[type="radio"] {
// visibility: hidden; // visibility: hidden;
display: none; display: none;
} }
> div:first-child {
>div:first-child {
padding: 10px 8px; padding: 10px 8px;
background-color: #cacaca; background-color: #cacaca;
text-align: left; text-align: left;
width: 70px; width: 70px;
// min-width: 100px; // min-width: 100px;
} }
> div:last-child {
>div:last-child {
@extend .vertical-center; @extend .vertical-center;
flex-wrap: wrap; flex-wrap: wrap;
} }
label { label {
margin: 0 10px; margin: 0 10px;
cursor: pointer; cursor: pointer;
color: #0f78e6; color: #0f78e6;
&.active { &.active {
color: red; color: red;
font-weight: bold; font-weight: bold;
...@@ -1101,10 +1016,12 @@ body { ...@@ -1101,10 +1016,12 @@ body {
.serviceProcess { .serviceProcess {
background-color: #fff; background-color: #fff;
padding-top: 30px; padding-top: 30px;
.content { .content {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
margin-bottom: 30px; margin-bottom: 30px;
li { li {
width: 300px; width: 300px;
height: 300px; height: 300px;
...@@ -1117,14 +1034,16 @@ body { ...@@ -1117,14 +1034,16 @@ body {
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
transition: all 0.8s ease 0s; transition: all 0.8s ease 0s;
img { img {
width:100px; width: 100px;
height:100px; height: 100px;
&:first-child { &:first-child {
height: 60px; height: 60px;
} }
} }
p { p {
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
...@@ -1132,58 +1051,69 @@ body { ...@@ -1132,58 +1051,69 @@ body {
letter-spacing: .3em; letter-spacing: .3em;
margin-top: 30px; margin-top: 30px;
} }
&:nth-child(1) { &:nth-child(1) {
background: url(~/static/images/OreTrade/bg_fabu.png) no-repeat center; background: url(~/static/images/OreTrade/bg_fabu.png) no-repeat center;
background-size: 100%; background-size: 100%;
} }
&:nth-child(2) { &:nth-child(2) {
background: url(~/static/images/OreTrade/bg_touzi.png) no-repeat center; background: url(~/static/images/OreTrade/bg_touzi.png) no-repeat center;
background-size: 100%; background-size: 100%;
} }
&:nth-child(3) { &:nth-child(3) {
background: url(~/static/images/OreTrade/bg_weituo.png) no-repeat center; background: url(~/static/images/OreTrade/bg_weituo.png) no-repeat center;
background-size: 100%; background-size: 100%;
} }
&:hover{
&:hover {
background-size: 110%; background-size: 110%;
} }
} }
} }
} }
.contentus{
.contentus {
width: 100%; width: 100%;
// background-color: #346cf2; // background-color: #346cf2;
height: 270px; height: 270px;
background: url('~/static/images/Oresource/bg_contact_us.png') no-repeat ; background: url('~/static/images/Oresource/bg_contact_us.png') no-repeat;
background-size: 100%; background-size: 100%;
} }
.contactMe { .contactMe {
position: relative; position: relative;
.headerTitle { .headerTitle {
text-align: center; text-align: center;
margin: 20px 0px 40px 0px; margin: 20px 0px 40px 0px;
top: 40px; top: 40px;
left: 10%; left: 10%;
position: absolute; position: absolute;
h1, h1,
p { p {
text-align: left; text-align: left;
color: #fff; color: #fff;
} }
} }
.content { .content {
position: absolute; position: absolute;
left: 120px; left: 120px;
bottom: 49px; bottom: 49px;
h3 { h3 {
width: 64px; width: 64px;
border-bottom: 2px solid yellowgreen; border-bottom: 2px solid yellowgreen;
font-size: 16px; font-size: 16px;
color: #fff; color: #fff;
} }
td { td {
color: #fff; color: #fff;
padding: 5px; padding: 5px;
...@@ -1191,22 +1121,29 @@ body { ...@@ -1191,22 +1121,29 @@ body {
} }
} }
::v-deep th.el-table__cell > .cell { ::v-deep th.el-table__cell>.cell {
color: #0f4174; color: #0f4174;
font-weight: bold; font-weight: bold;
} }
::v-deep .el-pagination button:disabled,::v-deep .el-pager li,::v-deep .el-pagination .btn-next,::v-deep .el-pagination .btn-prev{
background-color:rgba(0, 0, 0, 0) ::v-deep .el-pagination button:disabled,
::v-deep .el-pager li,
::v-deep .el-pagination .btn-next,
::v-deep .el-pagination .btn-prev {
background-color: rgba(0, 0, 0, 0)
} }
::v-deep .el-form-item__label{
::v-deep .el-form-item__label {
font-weight: bold; font-weight: bold;
} }
.section2 { .section2 {
width: 100%; width: 100%;
background: url(~/static/images/ChiFeng/GIS-bg.jpg) no-repeat center; background: url(~/static/images/ChiFeng/GIS-bg.jpg) no-repeat center;
background-size: cover; background-size: cover;
// padding: 80px 0; // padding: 80px 0;
height: 720px; height: 720px;
header { header {
padding: 20px; padding: 20px;
margin: 0; margin: 0;
...@@ -1214,6 +1151,7 @@ body { ...@@ -1214,6 +1151,7 @@ body {
} }
.commonMarker { .commonMarker {
// 公用图标样式类代码块 // 公用图标样式类代码块
.stackBlock { .stackBlock {
position: absolute; position: absolute;
...@@ -1221,6 +1159,7 @@ body { ...@@ -1221,6 +1159,7 @@ body {
height: 30px; height: 30px;
top: 20px; top: 20px;
left: 10px; left: 10px;
p:first-child { p:first-child {
width: 15px; width: 15px;
height: 15px; height: 15px;
...@@ -1230,6 +1169,7 @@ body { ...@@ -1230,6 +1169,7 @@ body {
top: 5px; top: 5px;
z-index: 1; z-index: 1;
} }
p:last-child { p:last-child {
width: 10px; width: 10px;
height: 10px; height: 10px;
...@@ -1250,22 +1190,26 @@ body { ...@@ -1250,22 +1190,26 @@ body {
// height: 560px; // height: 560px;
// padding-bottom: 70px; // padding-bottom: 70px;
@extend .commonMarker; @extend .commonMarker;
.detail { .detail {
position: relative; position: relative;
height: 300px; height: 300px;
overflow: hidden; overflow: hidden;
.item { .item {
img { img {
width: 106px; width: 106px;
height: 30px; height: 30px;
margin-right: 4px; margin-right: 4px;
} }
.bgImg { .bgImg {
position: absolute; position: absolute;
top: -30px; top: -30px;
width: 220px; width: 220px;
height: 100px; height: 100px;
} }
width: 250px; width: 250px;
min-width: 60px; min-width: 60px;
height: 40px; height: 40px;
...@@ -1284,28 +1228,34 @@ body { ...@@ -1284,28 +1228,34 @@ body {
} }
.popover { .popover {
// display: none; // display: none;
.title { .title {
display: flex; display: flex;
margin-bottom: 12px; margin-bottom: 12px;
.closeBtn { .closeBtn {
position: absolute; position: absolute;
right: 16px; right: 16px;
top: 14px; top: 14px;
cursor: pointer; cursor: pointer;
} }
img { img {
width: 40px; width: 40px;
height: 40px; height: 40px;
margin-right: 20px; margin-right: 20px;
} }
.label { .label {
font-size: 18px; font-size: 18px;
} }
.text { .text {
font-size: 12px; font-size: 12px;
} }
} }
.body { .body {
height: 140px; height: 140px;
overflow-y: auto; overflow-y: auto;
...@@ -1323,6 +1273,7 @@ body { ...@@ -1323,6 +1273,7 @@ body {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
padding: 10px 20px; padding: 10px 20px;
z-index: 1; z-index: 1;
:deep(.body) { :deep(.body) {
p { p {
font-size: 12px; font-size: 12px;
...@@ -1336,6 +1287,7 @@ body { ...@@ -1336,6 +1287,7 @@ body {
box-shadow: 0px 0px 1px#d3bbbb; box-shadow: 0px 0px 1px#d3bbbb;
border: 1px solid #eee; border: 1px solid #eee;
padding: 35px 15px; padding: 35px 15px;
li { li {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
...@@ -1347,32 +1299,34 @@ body { ...@@ -1347,32 +1299,34 @@ body {
text-align: center; text-align: center;
color: #fff; color: #fff;
background: rgb(69, 190, 255); background: rgb(69, 190, 255);
background: linear-gradient( background: linear-gradient(90deg,
90deg,
rgb(69, 190, 255) 0%, rgb(69, 190, 255) 0%,
rgb(1, 139, 244) 100% rgb(1, 139, 244) 100%);
);
cursor: pointer; cursor: pointer;
} }
} }
header { header {
text-align: center; text-align: center;
margin: 20px 0px 40px 0px; margin: 20px 0px 40px 0px;
h1 { h1 {
font-size: 28px; font-size: 28px;
color: #479aff; color: #479aff;
} }
p { p {
font-size: 12px; font-size: 12px;
color: #b4b4b4; color: #b4b4b4;
letter-spacing: 1px; letter-spacing: 1px;
} }
} }
} }
.tec-com { .tec-com {
width: 100%; width: 100%;
height: 370px; height: 370px;
ul { ul {
width: 100%; width: 100%;
display: flex; display: flex;
...@@ -1380,6 +1334,7 @@ body { ...@@ -1380,6 +1334,7 @@ body {
flex-wrap: wrap; flex-wrap: wrap;
padding: 10px 10px; padding: 10px 10px;
box-sizing: border-box; box-sizing: border-box;
li { li {
// width: 345px; // width: 345px;
// height: 143px; // height: 143px;
...@@ -1396,7 +1351,7 @@ body { ...@@ -1396,7 +1351,7 @@ body {
width: 398px; width: 398px;
margin-bottom: 20px; margin-bottom: 20px;
height: 143px; height: 143px;
box-shadow: 0px 8px 16px 2px rgba(40,40,40,0.25); box-shadow: 0px 8px 16px 2px rgba(40, 40, 40, 0.25);
img { img {
width: 80px; width: 80px;
...@@ -1404,17 +1359,21 @@ body { ...@@ -1404,17 +1359,21 @@ body {
margin-right: 20px; margin-right: 20px;
margin-left: 10px; margin-left: 10px;
} }
.top { .top {
display: flex; display: flex;
padding-top: 10px; padding-top: 10px;
// padding-left: 10px; // padding-left: 10px;
.right{ .right {
margin-right: 30px; margin-right: 30px;
width: 260px; width: 260px;
} }
p { p {
margin-bottom: 12px; margin-bottom: 12px;
} }
p:nth-child(1) { p:nth-child(1) {
width: 100%; width: 100%;
font-size: 18px; font-size: 18px;
...@@ -1423,6 +1382,7 @@ body { ...@@ -1423,6 +1382,7 @@ body {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
p:nth-child(2) { p:nth-child(2) {
font-size: 14px; font-size: 14px;
background-color: rgb(193, 131, 76); background-color: rgb(193, 131, 76);
...@@ -1430,9 +1390,11 @@ body { ...@@ -1430,9 +1390,11 @@ body {
width: 20px; width: 20px;
text-align: center; text-align: center;
} }
p:nth-child(3) { p:nth-child(3) {
color: rgb(107, 107, 107); color: rgb(107, 107, 107);
span{
span {
display: block; display: block;
background: url(~/static/images/technicalDocking/location.png) no-repeat; background: url(~/static/images/technicalDocking/location.png) no-repeat;
background-position: 0px 2px; background-position: 0px 2px;
...@@ -1446,6 +1408,7 @@ body { ...@@ -1446,6 +1408,7 @@ body {
} }
} }
} }
.bottom { .bottom {
color: rgb(36, 90, 119); color: rgb(36, 90, 119);
background-color: rgb(235, 249, 253); background-color: rgb(235, 249, 253);
...@@ -1455,6 +1418,7 @@ body { ...@@ -1455,6 +1418,7 @@ body {
padding-top: 6px; padding-top: 6px;
padding-bottom: 6px; padding-bottom: 6px;
text-indent: 12px; text-indent: 12px;
p { p {
background-color: rgb(235, 249, 253); background-color: rgb(235, 249, 253);
} }
...@@ -1468,6 +1432,5 @@ body { ...@@ -1468,6 +1432,5 @@ body {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }
</style> </style>
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