Skip to content

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

fix:【bug】:swiper联动

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