Commit d428df9e authored by sxl's avatar sxl 💬

fix:【bug】:swiper联动

parent 7aa1b5c7
...@@ -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停止自动滚动
this.swiper2.autoplay.stop(); if (this.swiper2) {
this.swiper2.autoplay.stop();
}
if (timer) { if (timer) {
clearTimeout(timer); clearTimeout(timer);
} }
timer = setTimeout(() => { timer = setTimeout(() => {
this.swiper2.autoplay.start(); if (this.swiper2) {
this.swiper2.autoplay.start();
}
}, 3000); }, 3000);
}, },
sortLifeServiceList(idx, arr) { sortLifeServiceList(idx, arr) {
......
...@@ -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,160 +16,127 @@ ...@@ -21,160 +16,127 @@
<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]}`" </div>
alt="" <div class="center">
class="left-img" <p class="tit" :title="item.websiteMiningTitle">
/> {{ item.websiteMiningTitle || "-" }}
</div> </p>
<div class="center"> <p>合作模式:{{ item.cooperationMethod || "-" }}</p>
<p class="tit" :title="item.websiteMiningTitle"> <p>
{{ item.websiteMiningTitle || "-" }} 主要矿种:{{
</p> (item.miningTypes && item.miningTypes.join(",")) || "-"
<p>合作模式:{{ item.cooperationMethod || "-" }}</p> }}
<p> </p>
主要矿种:{{ <p :title="item.averageQuality">
(item.miningTypes && item.miningTypes.join(",")) || "-" 品位指标:
}} {{ item.averageQuality || "-" }}
</p> </p>
<p :title="item.averageQuality"> <p>资源储量:{{ item.reservesScale || "-" }}</p>
品位指标: <img class="mining-tag"
{{ item.averageQuality || "-" }} :src="baseApi + getValueByIdAndField(KqTagList, Number(item.miningLable[0]), 'picUrl')" alt=""
</p> v-if="item.miningLable && item.miningLable.length > 0">
<p>资源储量:{{ item.reservesScale || "-" }}</p> </div>
<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 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 class="left-img" v-if="item.websiteMiningImage" :src="`${baseApi}${item.websiteMiningImage[0]}`"
<img alt="" />
class="left-img" </div>
v-if="item.websiteMiningImage" <div class="center">
:src="`${baseApi}${item.websiteMiningImage[0]}`" <p class="tit" :title="item.websiteMiningTitle">
alt="" {{ item.websiteMiningTitle || "-" }}
/> </p>
</div> <p>合作模式:{{ item.cooperationMethod || "-" }}</p>
<div class="center"> <p>
<p class="tit" :title="item.websiteMiningTitle"> 主要矿种:{{
{{ item.websiteMiningTitle || "-" }} (item.miningTypes && item.miningTypes.join(",")) || "-"
</p> }}
<p>合作模式:{{ item.cooperationMethod || "-" }}</p> </p>
<p> <p :title="item.averageQuality">
主要矿种:{{ 品位指标:{{ item.averageQuality || "-" }}
(item.miningTypes && item.miningTypes.join(",")) || "-"
}} </p>
</p> <p>资源储量:{{ item.reservesScale || "-" }}</p>
<p :title="item.averageQuality"> <img class="mining-tag"
品位指标:{{ item.averageQuality || "-" }} :src="baseApi + getValueByIdAndField(KqTagList, Number(item.miningLable[0]), 'picUrl')" alt=""
v-if="item.miningLable && item.miningLable.length > 0">
</p> </div>
<p>资源储量:{{ item.reservesScale || "-" }}</p> <!-- <p>整体转让</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="item-right">
</div>
<!-- <p>整体转让</p> -->
<!-- <div class="item-right">
<p>面议</p> <p>面议</p>
<div @click="clickVolume(item.id)">查看详情</div> <div @click="clickVolume(item.id)">查看详情</div>
<div @click="openDia(item.websiteMiningTitle)">联系我们</div> <div @click="openDia(item.websiteMiningTitle)">联系我们</div>
</div> --> </div> -->
</div>
</div> </div>
</div> </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">
<h3 class="part-title"><span>优秀投资商</span><span>推荐</span></h3> <h3 class="part-title"><span>优秀投资商</span><span>推荐</span></h3>
</div> </div>
<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" <ul>
style="height: 435px; margin-bottom: 10px" <!-- <li v-for="item in unitList" :key="item.chkqCompanyId"><img :src="`${baseApi}${item.chkqCompanyLogo}`" alt="" @click="goto(item.chkqCompanyId)"></li> -->
v-for="(item, index) in unitList" <li v-for="(subItem, index) in item" :key="index" @click="gotzsdetail(subItem.id)">
:key="index" <div class="top">
> <div class="left">
<ul> <img :src="subItem.commodityLogo ? baseApi + subItem.commodityLogo : ''" />
<!-- <li v-for="item in unitList" :key="item.chkqCompanyId"><img :src="`${baseApi}${item.chkqCompanyLogo}`" alt="" @click="goto(item.chkqCompanyId)"></li> --> </div>
<li v-for="(subItem, index) in item" :key="index" @click="gotzsdetail(subItem.id)"> <div class="right">
<div class="top"> <p>{{ subItem.commodityName }}</p>
<div class="left"> <p>
<img :src="subItem.commodityLogo ? baseApi+subItem.commodityLogo : ''" /> <span>{{ subItem.commoditySign }}</span>
</div> </p>
<div class="right"> <p>
<p>{{ subItem.commodityName }}</p> <span>{{ subItem.registeredAddress }}</span>
<p> </p>
<span>{{ subItem.commoditySign }}</span> </div>
</p> </div>
<p> <div class="bottom">
<span>{{ subItem.registeredAddress }}</span> <p class="ellipsis">{{ subItem.commodityBusiness }}</p>
</p> </div>
</div> </li>
</div> </ul>
<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> </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>
</section>
</div>
</section>
<section class="infomation"> <section class="infomation">
<div class="inner"> <div class="inner">
...@@ -210,114 +172,56 @@ ...@@ -210,114 +172,56 @@
</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>
<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,53 +231,36 @@ ...@@ -327,53 +231,36 @@
{{ 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,
scope.row.operationSystem scope.row.operationSystem
) || "-" }} ) || "-" }}
<!-- {{ scope.row.cooperationMethod }} --> <!-- {{ scope.row.cooperationMethod }} -->
</template> </template>
</el-table-column> </el-table-column>
<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">
<h3 class="part-title"> <h3 class="part-title">
<span>合作矿业权</span><span>分布图</span> <span>合作矿业权</span><span>分布图</span>
...@@ -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,31 +286,27 @@ ...@@ -403,31 +286,27 @@
</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>
</ul> </ul>
</div> </div>
</section> </section>
</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: "",
...@@ -498,7 +377,7 @@ export default { ...@@ -498,7 +377,7 @@ export default {
pageNum: 1, pageNum: 1,
pageSize: 6, pageSize: 6,
}, },
searchMap4label: [ searchMap4label: [
{ {
name: "矿权类型", name: "矿权类型",
...@@ -577,7 +456,7 @@ export default { ...@@ -577,7 +456,7 @@ export default {
}, { }, {
value: '融资需求', value: '融资需求',
label: '融资需求' label: '融资需求'
}, ] },]
}; };
}, },
watch: { watch: {
...@@ -634,8 +513,8 @@ export default { ...@@ -634,8 +513,8 @@ export default {
path: `/Transaction/tzsdet?id=${id}`, path: `/Transaction/tzsdet?id=${id}`,
}); });
}, },
/** 搜索按钮操作 */ /** 搜索按钮操作 */
handleQuery() { handleQuery() {
this.searchForm.pageNum = 1; this.searchForm.pageNum = 1;
this.getMineList(); this.getMineList();
}, },
...@@ -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({
...@@ -670,7 +549,7 @@ export default { ...@@ -670,7 +549,7 @@ export default {
this.omDemandName = scope.websiteMiningTitle; this.omDemandName = scope.websiteMiningTitle;
this.dialogVisible = true; this.dialogVisible = true;
this.num = 1; this.num = 1;
// console.log(scope.websiteMiningTitle); // console.log(scope.websiteMiningTitle);
}, },
handleCloseDialog(newState) { handleCloseDialog(newState) {
...@@ -679,8 +558,8 @@ export default { ...@@ -679,8 +558,8 @@ export default {
goto(link) { goto(link) {
this.$router.push({ path: `${link}` }); this.$router.push({ path: `${link}` });
}, },
clickVolume(id, index) { clickVolume(id, index) {
const url = `/Transaction/minDet?id=${id}`; const url = `/Transaction/minDet?id=${id}`;
window.open(url, '_blank'); // '_blank' 表示在新标签页中打开 window.open(url, '_blank'); // '_blank' 表示在新标签页中打开
}, },
async getKqTag() { async getKqTag() {
...@@ -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 {
background: url(~/static/images/technicalDocking/swiper3next.png) no-repeat
center;
top: 160px;
right: 0px;
width: 27px;
} .swiper-button-next {
.swiper-button-prev { background: url(~/static/images/technicalDocking/swiper3next.png) no-repeat center;
top: 160px; top: 160px;
left: 0px; right: 0px;
width: 27px; width: 27px;
background: url(~/static/images/technicalDocking/swiper3prev.png) no-repeat
center;
// top: 390px;
// left: 80px;
}
} }
.swiper-button-next:after, .swiper-button-prev {
.swiper-button-prev:after { top: 160px;
font-family: swiper-icons; left: 0px;
font-size: 0px; width: 27px;
text-transform: none !important; background: url(~/static/images/technicalDocking/swiper3prev.png) no-repeat center;
letter-spacing: 0; // top: 390px;
font-variant: initial; // left: 80px;
line-height: 1;
} }
}
.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 { .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;
...@@ -1241,233 +1181,256 @@ body { ...@@ -1241,233 +1181,256 @@ body {
} }
.unit { .unit {
width: 1250px; width: 1250px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
position: relative;
background-color: #fff;
// overflow: hidden;
// height: 560px;
// padding-bottom: 70px;
@extend .commonMarker;
.detail {
position: relative; position: relative;
background-color: #fff; height: 300px;
// overflow: hidden; 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 { .item {
// display: none; img {
.title { width: 106px;
display: flex; height: 30px;
margin-bottom: 12px; margin-right: 4px;
.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; .bgImg {
overflow-y: auto; position: absolute;
top: -30px;
width: 220px;
height: 100px;
} }
width: 400px; width: 250px;
height: 190px; min-width: 60px;
background-color: #5b9af5; height: 40px;
background-image: url(https://photo.tuchong.com/486878/f/195494283.jpg); //url(https://p0.itc.cn/images01/20200918/185e839c05f741958de820b6d77ed774.jpeg); 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-size: cover;
color: #fff; background-repeat: no-repeat;
position: absolute; background-position: 0%;
top: 50%; font-size: 9px;
left: 46%;
transform: translate(-50%, -50%);
padding: 10px 20px;
z-index: 1;
:deep(.body) {
p {
font-size: 12px;
}
}
} }
}
.nav { .popover {
// display: none;
.title {
display: flex; display: flex;
justify-content: space-around; margin-bottom: 12px;
box-shadow: 0px 0px 1px#d3bbbb;
border: 1px solid #eee; .closeBtn {
padding: 35px 15px; position: absolute;
li { right: 16px;
display: flex; top: 14px;
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; cursor: pointer;
} }
}
header { img {
text-align: center; width: 40px;
margin: 20px 0px 40px 0px; height: 40px;
h1 { margin-right: 20px;
font-size: 28px; }
color: #479aff;
.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 { p {
font-size: 12px; font-size: 12px;
color: #b4b4b4;
letter-spacing: 1px;
} }
} }
} }
.tec-com { .nav {
width: 100%; display: flex;
height: 370px; justify-content: space-around;
ul { box-shadow: 0px 0px 1px#d3bbbb;
width: 100%; border: 1px solid #eee;
padding: 35px 15px;
li {
display: flex; display: flex;
justify-content: space-between; justify-content: space-around;
flex-wrap: wrap; align-items: center;
padding: 10px 10px; width: 100px;
box-sizing: border-box; flex-direction: column;
li { padding: 7px;
// width: 345px; background-color: #479aff;
// height: 143px; text-align: center;
// background: #FFFFFF; color: #fff;
// box-shadow: 0px 3px 5px 0px rgba(43,101,165,0.12); background: rgb(69, 190, 255);
// border-radius: 8px; background: linear-gradient(90deg,
// border: 1px solid rgba(0,0,0,0.12); rgb(69, 190, 255) 0%,
// margin:20px 20px; rgb(1, 139, 244) 100%);
// display: flex; cursor: pointer;
// flex-direction: column; }
// align-items: flex-start; }
// cursor: pointer;
position: relative; header {
width: 398px; text-align: center;
margin-bottom: 20px; margin: 20px 0px 40px 0px;
height: 143px;
box-shadow: 0px 8px 16px 2px rgba(40,40,40,0.25); h1 {
font-size: 28px;
img { color: #479aff;
width: 80px; }
height: 80px;
margin-right: 20px; p {
margin-left: 10px; 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; p {
padding-top: 10px; margin-bottom: 12px;
// padding-left: 10px; }
.right{
margin-right: 30px; p:nth-child(1) {
width: 260px; width: 100%;
} font-size: 18px;
p { font-weight: bold;
margin-bottom: 12px; white-space: nowrap;
} overflow: hidden;
p:nth-child(1) { text-overflow: ellipsis;
width: 100%; }
font-size: 18px;
font-weight: bold; p:nth-child(2) {
white-space: nowrap; 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; overflow: hidden;
text-overflow: ellipsis; 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); 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 { .ellipsis {
width: 360px; width: 360px;
white-space: nowrap; white-space: nowrap;
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