896 lines
25 KiB
Plaintext
896 lines
25 KiB
Plaintext
<!-- BCP系统 -->
|
||
<script setup lang="ts">
|
||
import HomeHead from "@/views/home/components/HomeHead.vue";
|
||
// import HomeHeadSearch from '@/views/home/components/HomeHeadSearch.vue'
|
||
import Action from "./ation.vue";
|
||
import sTree from "./sTree.vue";
|
||
import { useDate } from "@/views/home/hooks/useDate";
|
||
import { useMessage, NModal, NPopover } from "naive-ui";
|
||
import { getBPCActList, BPCDownload, getCateTreeList } from "@/api/daikin/base";
|
||
import { useUserStore } from "@/stores/modules/user";
|
||
import Amtion from "@/components/amtion.vue";
|
||
const store = useUserStore();
|
||
const userCode = ["admin", "bcp_dandnag", "tech_service"].includes(
|
||
store.user.roleCode
|
||
);
|
||
|
||
// import { da } from 'element-plus/es/locale/index.js'
|
||
const { day, week } = useDate();
|
||
const { push } = useRouter();
|
||
const message = useMessage();
|
||
|
||
const dataA = ref([]);
|
||
const dataB = ref([]);
|
||
const dataD = ref([]);
|
||
const dataC = ref([]);
|
||
const dataE = ref([]);
|
||
onMounted(async () => {
|
||
getData();
|
||
});
|
||
|
||
const scrollNewHandler = function (ev) {
|
||
let target = ev.target;
|
||
document.getElementById("summaryContent").scrollTop = target.scrollTop;
|
||
console.log(ev);
|
||
};
|
||
const scrollSummaryHandler = function (ev) {
|
||
let target = ev.target;
|
||
document.getElementById("newContent").scrollTop = target.scrollTop;
|
||
console.log(ev);
|
||
};
|
||
|
||
function getFileName(url) {
|
||
let lastSplashIndex = url.lastIndexOf("/");
|
||
let lastDotIndex = url.lastIndexOf(".");
|
||
return url.slice(lastSplashIndex + 1, lastDotIndex);
|
||
}
|
||
|
||
function computedTreeNode(item: any) {
|
||
console.log(item, "一级数据1111111");
|
||
let oldFileList = JSON.parse(JSON.stringify(item.fileList));
|
||
item.childList = item.childList || [];
|
||
item.childList = item.childList.map(computedTreeNode);
|
||
item.fileList = [];
|
||
oldFileList.map((item2: any) => {
|
||
if (item2.isSelect == item.id) {
|
||
item.fileList.push({
|
||
...item2,
|
||
isShow: false,
|
||
fileName: getFileName(item2.filePath),
|
||
});
|
||
}
|
||
});
|
||
return item;
|
||
}
|
||
|
||
async function getData() {
|
||
// const {data} = await getBPCActList({moduleId: 1})
|
||
const { rows: dataArr } = await getBPCActList({ moduleId: 1 });
|
||
const { rows: dataBrr } = await getBPCActList({ moduleId: 4 });
|
||
// const { rows: dataCrr } = await getBPCActList({ moduleId: 3 });
|
||
const { data: dataDrr } = await getCateTreeList({ moduleId: 4 });
|
||
const {rows: dataErr} = await getBPCActList({moduleId: 5})
|
||
|
||
dataA.value = dataArr.map((item) => {
|
||
|
||
return {
|
||
...item,
|
||
fileName: getFileName(item.filePath),
|
||
breifName: getFileName(item.briefingPath),
|
||
};
|
||
|
||
|
||
});
|
||
dataB.value = dataBrr;
|
||
// dataC.value = dataCrr;
|
||
|
||
dataDrr.forEach(item => {
|
||
return addIsShow(item);
|
||
});
|
||
|
||
dataD.value = dataDrr
|
||
console.log(dataDrr);
|
||
// dataD.value = dataDrr.map(item => {
|
||
// return {
|
||
// ...item,
|
||
// childList: item.childList || []
|
||
// }
|
||
// });
|
||
dataE.value = dataErr
|
||
dataE.value = [
|
||
{ title: "社区在库", content: "高风险地区社数疫情的确" },
|
||
{ title: "在送数量", content: "高风险地区社数疫情的确" },
|
||
{ title: "风险指数", content: "高风险地区社数疫情的确" },
|
||
{ title: "风险指数", content: "高风险地区社数疫情的确" },
|
||
{ title: "风险指数", content: "高风险地区社数疫情的确" },
|
||
{ title: "风险指数", content: "高风险地区社数疫情的确" },
|
||
{ title: "社区在库", content: "高风险地区社数疫情的确" },
|
||
{ title: "社区在库", content: "高风险地区社数疫情的确" },
|
||
];
|
||
}
|
||
|
||
function addIsShow(obj) {
|
||
if (obj) {
|
||
obj.isShow = true; // 在当前对象上添加 isShow 属性
|
||
if (obj.childList && obj.childList.length > 0) {
|
||
// 如果有子对象，则递归调用 addIsShow 函数
|
||
obj.childList.forEach(child => {
|
||
addIsShow(child);
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
const src = ref("");
|
||
const srcType = ref();
|
||
const showModalRef2 = ref(false);
|
||
const clickFileHandler = async (row) => {
|
||
console.log(row,"xiaolu9999")
|
||
download(row);
|
||
};
|
||
const clickMoreHandler = async (row) => {
|
||
push({ name: "bpcTreeDetail", query: { id: row.id } });
|
||
console.log(row, "111111");
|
||
|
||
};
|
||
const changeIsShowFn = async (index: number) => {
|
||
dataD.value[index].isShow = !dataD.value[index].isShow;
|
||
console.log(dataD.value, "xiaolu11")
|
||
};
|
||
const jumpListHandler = (title, type) => {
|
||
push({ name: "bpclist", query: { title, type } });
|
||
};
|
||
const jumpContentHandler = (title, type) => {
|
||
push({ name: "contentList", query: { title, type } });
|
||
};
|
||
const download = async (row) => {
|
||
// console.log(row)
|
||
if (!row) return;
|
||
if (row.isSelect === 2) {
|
||
message.error("没有访问权限");
|
||
return;
|
||
}
|
||
let { briefingPath } = row;
|
||
console.log(row, "xiaolu");
|
||
|
||
if (!briefingPath) {
|
||
message.info("没有可预览文件！");
|
||
return;
|
||
}
|
||
srcType.value = getLastSubstring(briefingPath);
|
||
if (
|
||
["doc", "docx", "ppt", "pptx", "xls", "xlsx", "pdf"].includes(srcType.value)
|
||
) {
|
||
// src.value = filePath
|
||
// pdfShow.value = true
|
||
briefingPath = briefingPath;
|
||
const screenWidth = window.screen.width;
|
||
const screenHeight = window.screen.height;
|
||
window.open(
|
||
briefingPath,
|
||
"",
|
||
"width=" +
|
||
screenWidth +
|
||
",height=" +
|
||
screenHeight +
|
||
",top=" +
|
||
0 +
|
||
",left=" +
|
||
0
|
||
);
|
||
} else {
|
||
message.error(
|
||
"文件格式不是 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx','pdf'！"
|
||
);
|
||
}
|
||
};
|
||
|
||
const toggleHandler = function (ev) {
|
||
ev.target.parentNode.parentNode.classList.toggle("expand");
|
||
};
|
||
|
||
function unescapeHTML(html: string) {
|
||
if (!html) return "";
|
||
const doc = new DOMParser().parseFromString(html, "text/html");
|
||
return doc.documentElement.textContent;
|
||
}
|
||
|
||
const showDetail = function (row, id) {
|
||
// console.log(row, id);
|
||
sessionStorage.setItem("title", row.title);
|
||
console.log(row.content);
|
||
sessionStorage.setItem("content", row.content);
|
||
push({ name: "bcpDetail" });
|
||
};
|
||
|
||
function getLastSubstring(str: string): string {
|
||
const lastIndex = str.lastIndexOf(".");
|
||
if (lastIndex !== -1) {
|
||
return str.substring(lastIndex + 1);
|
||
} else {
|
||
return "";
|
||
}
|
||
}
|
||
|
||
// async function download(row, moduleId) {
|
||
// const { code, data } = await BPCDownload({ id: row.id })
|
||
// if (code != 200) return;
|
||
|
||
// try {
|
||
// const response = await BPCDownload({ id: row.id })
|
||
// var blob = new Blob([response.data]);
|
||
|
||
// const downloadUrl = URL.createObjectURL(blob);
|
||
|
||
// const link = document.createElement('a');
|
||
// link.href = downloadUrl;
|
||
// link.download = row.fileName; // 替换为你要保存的文件名
|
||
// link.click();
|
||
// URL.revokeObjectURL(downloadUrl);
|
||
// } catch (error) {
|
||
// message.error(error)
|
||
// // message.error('下载文件出错：', error);
|
||
// }
|
||
// }
|
||
|
||
const isChart=(content)=>{
|
||
return unescapeHTML(content).replace(/[^\u0000-\u00ff]/g,"aa").length >= 27
|
||
}
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<HomeHead class="top">
|
||
<template #content>
|
||
<!-- <HomeHeadSearch /> -->
|
||
</template>
|
||
</HomeHead>
|
||
<div class="h-full relative flex flex-col">
|
||
<el-button type="primary" v-if="userCode" class="button !top-40px"
|
||
@click="push({ name: 'modifyBPC' })">内容管理</el-button>
|
||
<div class="font-600 flex text-36px mt39px bcp-title">
|
||
BCP：SCM系统(智能供应链)数据联动+BI化呈现
|
||
</div>
|
||
<div class="b-wrapper flex-1 flex flex-col items-center">
|
||
<!-- <div class="scroll w1372px h66px">
|
||
滚动条:BCP实时情报.:BCP实时情报.:BCP实时情报.:BCP实时情报.:BCP实时情报.
|
||
</div> -->
|
||
<!-- <el-button type="primary" class="button" @click="push({ name: 'modifyBPC' })">情报管理</el-button> -->
|
||
<div class="b-content w-full flex-1 relative">
|
||
<div class="new absolute">
|
||
<div class="text-22px font-500 font-bold new-title text-center" @click="jumpContentHandler('BCP News', 1)">
|
||
BCP News
|
||
</div>
|
||
<div class="absolute right-40px top-35px" @click="jumpContentHandler('BCP News', 1)">
|
||
更多<el-icon>
|
||
<DArrowRight class="" />
|
||
</el-icon>
|
||
</div>
|
||
|
||
<div class="new-content overflow-hidden" id="newContent" v-if="dataA.length > 0">
|
||
<!-- <div v-for="it in dataA" class="new-item h20px mb-10px overflow-hidden" :key="it">
|
||
<div class="news1 w340px h38px text-16px lh-22px" @click="showDetail(it, 1)">
|
||
<span v-if="it.status === 'New'" class="tit bg-#2CBA06" style="color: white">{{ it.status }}:</span>
|
||
<span class="cur_p" style="color: white">{{ it.title }}: </span>
|
||
<span class="cur_file" @click.stop="download(it, 1)">{{
|
||
it.fileName
|
||
}}</span>
|
||
</div>
|
||
</div> -->
|
||
<!--, -->
|
||
<el-table :data="dataA" style="width: 100%; margin-bottom: 20px;" row-key="markId"
|
||
:header-cell-style="{ 'color': '#fff', 'height': '40px', 'font-size': '18px' ,'background': 'linear-gradient(to top, #006BE5, #002C99)'
|
||
}" :cell-style="{ 'overflow-y': 'auto','height': '80px', 'border':'1px solid rgba(0,0,0,0.2)','color':'#fff'}" height="850">
|
||
<el-table-column prop="createTime" label="时间" width="70px">
|
||
<template #default="scope">
|
||
{{(scope.row.createTime).substring(5, 10)}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="content" label="情报内容" >
|
||
<template #default="scope">
|
||
<div class="h-45px p0 m0" :class="isChart(scope.row.content) ?'two-line-header ':''" :title="unescapeHTML(scope.row.content)">{{unescapeHTML(scope.row.content)}}ss</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="riskEstimation" label="风险评估" >
|
||
<template #default="scope">
|
||
<div class=" h-45px p0 m0" :class="isChart(scope.row.riskEstimation) ?'two-line-header ':''" :title="scope.row.riskEstimation">{{scope.row.riskEstimation}}</div>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
</el-table>
|
||
|
||
</div>
|
||
<div v-else class="empty-content"></div>
|
||
|
||
</div>
|
||
<img src="./images/yojjt@2x.png" class="w-18px h18px absolute left-49.5% top-20% ml--8px" >
|
||
<div class="summary absolute">
|
||
<!-- <div class="arrow"></div> -->
|
||
<div class="text-22px font-500 font-bold summary-title text-center" @click="jumpContentHandler('BCP简报', 2)">
|
||
BCP简报
|
||
</div>
|
||
<div class="absolute right-40px top-35px" @click="jumpContentHandler('BCP简报', 2)">
|
||
更多<el-icon>
|
||
<DArrowRight class="" />
|
||
</el-icon>
|
||
</div>
|
||
<div class="summary-content overflow-hidden" id="summaryContent" v-if="dataA.length > 0">
|
||
<div v-for="(it,index) in dataA" class="py22px h20px overflow-hidden item-row" :key="it" :style="index==0?' border-radius:25px 25px 0px 0px ;':index==3?' border-radius: 0 0 25px 25px;':''">
|
||
<div v-if="index<4" class="inline-flex cur_p file-icon text-16px " @click="download(it, 1)" style="line-height: 13px">
|
||
{{ it.breifName }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else class="empty-content"></div>
|
||
</div>
|
||
|
||
<div class="operate w344px h180px absolute">
|
||
<div class="ring-operate"></div>
|
||
<div class="text-23px operate-title text-#00E4FF font-500" @click="jumpListHandler('运营守则', 4)">
|
||
运营守则
|
||
</div>
|
||
<div class="operate-content overflow-y-auto " v-if="dataB.length > 0">
|
||
<div v-if="dataB" v-for="it in dataB" class="py12px h34px overflow-hidden" :key="it">
|
||
<n-popover trigger="hover" placement="top-start">
|
||
<template #trigger>
|
||
<div class="inline-flex cur_p file-icon text-16px" @click="download(it, 4)" style="line-height: 25px;">
|
||
{{ it.title }}
|
||
</div>
|
||
</template>
|
||
<div class="text-20px truncate leading-40px">
|
||
{{ it.title }}
|
||
</div>
|
||
</n-popover>
|
||
</div>
|
||
</div>
|
||
<div v-else class="empty-content"></div>
|
||
</div>
|
||
|
||
<div class="gen w293px h92px absolute">
|
||
<div class="ring-gen"></div>
|
||
<div class="text-23px text-#00E4FF font-500 gen-title">供方SCM</div>
|
||
<div class="gen-content overflow-y-auto" v-if="true">
|
||
<!-- <div v-if="dataC" v-for="it in dataC" class="py8px h28px overflow-hidden" :key="it">
|
||
<n-popover trigger="hover" placement="top-start">
|
||
<template #trigger>
|
||
<div class="inline-flex cur_p file-icon" @click="download(it, 4)">
|
||
{{ it.title }}
|
||
</div>
|
||
</template>
|
||
<div class="text-20px truncate leading-40px">
|
||
{{ it.title }}
|
||
</div>
|
||
</n-popover>
|
||
</div> -->
|
||
<img src="./images/ss.png" class="w-388px"/>
|
||
</div>
|
||
<div v-else class="empty-content">
|
||
<div class="content"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="supplier absolute">
|
||
<div class="ring-supplier"></div>
|
||
<div class="text-23px text-#00E4FF font-500 supplier-title" @click="push({ name: 'bpcTreeDetail' })"
|
||
style="cursor: pointer">
|
||
BCP情报
|
||
</div>
|
||
<div class="supplier-content overflow-y-auto text-16px " v-if="dataD.length > 0">
|
||
<s-tree :data="dataD" @changeIsShow="changeIsShowFn" @clickFile="clickFileHandler"
|
||
@clickMore="clickMoreHandler"></s-tree>
|
||
<!-- <div v-if="dataD" v-for="it in dataD" class="supplier-item expand">
|
||
<div class="suppier-sub-title">
|
||
{{it.name}}
|
||
<span class="icon-arrow" @click="toggleHandler($event)"></span>
|
||
</div>
|
||
<div v-for="(item, index) in it.childList" :key="index" class="supplier-item-container">
|
||
<div class="sub-title">
|
||
<span>{{index + 1}})</span>
|
||
{{item.name}}
|
||
</div>
|
||
<div class="file-icon">{{item.name}}</div>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
<div v-else class="empty-content"></div>
|
||
</div>
|
||
|
||
<div class="dunpai w113px h69px absolute"></div>
|
||
<div class="cxpai absolute"></div>
|
||
|
||
<div class="earth w400px h400px absolute">
|
||
<Action :dataE="dataE" @downloadHandle="download"></Action>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<n-modal :mask-closable="true" v-model:show="showModalRef2">
|
||
<div class="w90% h90%">
|
||
<Amtion :data="src" :datas="srcType" />
|
||
</div>
|
||
</n-modal>
|
||
</template>
|
||
|
||
<style scoped lang="less">
|
||
.item-row{
|
||
background:linear-gradient(to right, #006BE5, #002C99) ;
|
||
border-bottom:2px solid rgba(0,0,0,0.5);
|
||
height: 38px;
|
||
padding-left: 10px;
|
||
|
||
}
|
||
.two-line-header {
|
||
position: relative;
|
||
}
|
||
.two-line-header::before{
|
||
float: right;
|
||
margin-top: 23px;
|
||
width: 10px;
|
||
height:5px;
|
||
content: '...';
|
||
color: rgb(255, 255, 255);
|
||
}
|
||
.new-content /deep/ .el-table,
|
||
.new-content /deep/ .el-table__expanded-cell {
|
||
background-color: transparent;
|
||
color: #606266;
|
||
}
|
||
/* 表格内背景颜色 */
|
||
.new-content /deep/ .el-table th,
|
||
.new-content /deep/ .el-table tr,
|
||
.new-content /deep/ .el-table td {
|
||
background-color: transparent !important;
|
||
//表格字体颜色
|
||
color: #606266;
|
||
}
|
||
.new-content /deep/ .el-table .el-table__cell{
|
||
padding: 5px 0 !important;
|
||
|
||
}
|
||
.new-content /deep/ .el-table .cell{
|
||
padding: 0 5px !important;
|
||
|
||
}
|
||
.new-item {
|
||
display: flex;
|
||
|
||
.news1 {
|
||
flex: 0 0 100%;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
color: #00e4ff;
|
||
}
|
||
|
||
.cur_file {
|
||
flex: 0 0 50%;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
line-height: 20px;
|
||
color: #00e4ff;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.ring-operate {
|
||
position: absolute;
|
||
right: -120px;
|
||
top: -10px;
|
||
width: 117px;
|
||
height: 109px;
|
||
background: url("./images/tbjj.png"), url("./images/bcppp.png");
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
}
|
||
|
||
.ring-gen {
|
||
position: absolute;
|
||
right: -140px;
|
||
top: -50px;
|
||
width: 117px;
|
||
height: 109px;
|
||
background: url("./images/tbjj.png"), url("./images/gfs.png");
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
}
|
||
|
||
.ring-supplier {
|
||
position: absolute;
|
||
left: -120px;
|
||
top: -50px;
|
||
width: 117px;
|
||
height: 109px;
|
||
background: url("./images/tbjj.png"), url("./images/bcppT.png");
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
}
|
||
|
||
.max-w120px {
|
||
max-width: 148px;
|
||
display: block;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.empty-content {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 40px;
|
||
bottom: 0;
|
||
right: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-image: url("./images/tishi2.png");
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
}
|
||
|
||
.operate,
|
||
.gen,
|
||
.supplier {
|
||
.empty-content {
|
||
top: 40px;
|
||
}
|
||
}
|
||
|
||
.cxpai {
|
||
width: 231px;
|
||
height: 37px;
|
||
right: 0;
|
||
left: 0;
|
||
margin: auto;
|
||
top: 520px;
|
||
z-index: 99;
|
||
background: url("./images/tishi3.png");
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.gen .empty-content {
|
||
top: 25px;
|
||
left: -10px;
|
||
|
||
.content {
|
||
position: absolute;
|
||
top: 140px;
|
||
}
|
||
}
|
||
|
||
.cur_p {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.tit {
|
||
padding: 3px;
|
||
font-size: 12px;
|
||
border-radius: 3px;
|
||
line-height: 1;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.button {
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 20px;
|
||
z-index: 500;
|
||
}
|
||
|
||
.bcp-title {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
::-webkit-scrollbar {
|
||
width: 1px;
|
||
}
|
||
|
||
.top {
|
||
position: absolute;
|
||
right: 30px;
|
||
top: -92px;
|
||
}
|
||
|
||
.b-wrapper {
|
||
border-radius: 18px;
|
||
border: 1px solid #e7ebf5;
|
||
box-shadow: inset 1px 2px 12px rgba(14, 86, 221, 0.32);
|
||
background-image: url("./images/bcpbj.png");
|
||
background-size: 100% 100%;
|
||
overflow: hidden;
|
||
|
||
.scroll {
|
||
font-size: 26px;
|
||
text-align: center;
|
||
line-height: 66px;
|
||
background-image: url("./images/tout.png");
|
||
background-size: cover;
|
||
}
|
||
|
||
.specific {
|
||
top: 35px;
|
||
left: 965px;
|
||
background-image: url("./images/kneur.png");
|
||
background-size: cover;
|
||
}
|
||
|
||
.file-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 21px;
|
||
background-image: url("./images/biq2.png");
|
||
background-size: 24px 20px;
|
||
background-repeat: no-repeat;
|
||
background-size: left center;
|
||
padding-left: 28px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: block;
|
||
line-height: 20px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.file-icon:hover {
|
||
color: #00e4ff;
|
||
}
|
||
|
||
.font-bold {
|
||
font-weight: bold;
|
||
height: 41px;
|
||
background-image: url('./images/bitbj@2x.png');
|
||
background-size: 230px 35px;
|
||
background-position: center top;
|
||
background-repeat: no-repeat;
|
||
}
|
||
// bcp简报
|
||
.summary {
|
||
top: 15px;
|
||
left: 50%;
|
||
// width: 427px;
|
||
// height: 265px;
|
||
width: 543px;
|
||
height: 327px;
|
||
padding-left: 48px;
|
||
padding-top: 64px;
|
||
padding-right: 48px;
|
||
background-image: url("./images/jianbk2.png");
|
||
background-size: cover;
|
||
background-repeat: no-repeat;
|
||
|
||
.arrow {
|
||
width: 20px;
|
||
height: 28px;
|
||
background: url("./images/lans.png");
|
||
position: absolute;
|
||
left: -2px;
|
||
top: 64px;
|
||
}
|
||
|
||
.summary-title {
|
||
left: 0;
|
||
position: absolute;
|
||
top: 20px;
|
||
line-height: 38px;
|
||
right: 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.summary-content {
|
||
box-sizing: border-box;
|
||
height: 180px;
|
||
|
||
// height: 150px;
|
||
}
|
||
}
|
||
|
||
// bcp-news
|
||
.new {
|
||
top: 15px;
|
||
right: 51%;
|
||
width: 543px;
|
||
height: 327px;
|
||
padding-left: 48px;
|
||
padding-top: 64px;
|
||
padding-right: 48px;
|
||
background-image: url("./images/jianbk.png");
|
||
background-size: cover;
|
||
background-repeat: no-repeat;
|
||
|
||
.new-title {
|
||
left: 0;
|
||
position: absolute;
|
||
top: 20px;
|
||
line-height:40px;
|
||
right: 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.new-content {
|
||
// box-sizing: border-box;
|
||
height: 180px;
|
||
}
|
||
}
|
||
|
||
// .operate {
|
||
// top: 290px;
|
||
// left: 180px;
|
||
// width: 353px;
|
||
// height: 136px;
|
||
// padding-left: 16px;
|
||
// padding-top: 40px;
|
||
// padding-right: 30px;
|
||
// background-image: url("./images/k2.png"), url("./images/k1.png");
|
||
// background-size: 353px 92.5px, 353px 45.5px;
|
||
// background-position: left top, left bottom;
|
||
// background-repeat: no-repeat;
|
||
|
||
// .operate-title {
|
||
// left: 45px;
|
||
// position: absolute;
|
||
// top: 2px;
|
||
// }
|
||
|
||
// .operate-content {
|
||
// box-sizing: border-box;
|
||
// height: 90px;
|
||
// }
|
||
// }
|
||
// 运营守则
|
||
.operate {
|
||
top: 330px;
|
||
left: 90px;
|
||
width: 298px;
|
||
height: 166px;
|
||
padding-left: 16px;
|
||
padding-top: 40px;
|
||
padding-right: 30px;
|
||
background-image: url("./images/k2.png"), url("./images/k1.png");
|
||
background-size: 298px 92.5px, 298px 75.5px;
|
||
background-position: left top, left bottom;
|
||
background-repeat: no-repeat;
|
||
|
||
.operate-title {
|
||
left: 45px;
|
||
position: absolute;
|
||
top: 2px;
|
||
}
|
||
|
||
.operate-content {
|
||
box-sizing: border-box;
|
||
height: 100px;
|
||
width: 230px;
|
||
text-align: right;
|
||
}
|
||
}
|
||
// bcp
|
||
.supplier {
|
||
top: 390px;
|
||
// left: 1100px;
|
||
left: 1050px;
|
||
width: 350px;
|
||
height: 405px;
|
||
padding-left: 40px;
|
||
padding-top: 50px;
|
||
padding-right: 16px;
|
||
background-image: url("./images/k3.png"), url("./images/k4.png");
|
||
background-size: 350px 92px, 350px 315px;
|
||
background-position: left top, left bottom;
|
||
background-repeat: no-repeat;
|
||
|
||
.supplier-title {
|
||
right: 45px;
|
||
position: absolute;
|
||
top: 2px;
|
||
}
|
||
|
||
.supplier-content {
|
||
box-sizing: border-box;
|
||
height: 363px;
|
||
}
|
||
|
||
.supplier-item {
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.suppier-sub-title {
|
||
display: flex;
|
||
line-height: 42px;
|
||
font-size: 1.1em;
|
||
align-items: center;
|
||
|
||
&::before {
|
||
content: "";
|
||
display: block;
|
||
width: 6px;
|
||
height: 6px;
|
||
background: white;
|
||
border-radius: 50%;
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.icon-arrow {
|
||
display: block;
|
||
background-image: url("./images/san22.png");
|
||
width: 12px;
|
||
height: 9px;
|
||
padding: 4px;
|
||
margin-left: auto;
|
||
box-sizing: content-box;
|
||
background-origin: content-box;
|
||
background-repeat: no-repeat;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.supplier-item.expand {
|
||
.icon-arrow {
|
||
background-image: url("./images/san11.png");
|
||
}
|
||
|
||
.supplier-item-container {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.supplier-item-container {
|
||
padding-left: 24px;
|
||
line-height: 24px;
|
||
display: none;
|
||
|
||
.sub-title {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
span {
|
||
display: block;
|
||
width: 24px;
|
||
margin-right: 4px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
>div:not(:last-child) {
|
||
margin-bottom: 2px;
|
||
}
|
||
}
|
||
}
|
||
// 供方scm
|
||
.gen {
|
||
top: 510px;
|
||
left: 60px;
|
||
background-image: url("./images/k2.png"), url("./images/k1.png");
|
||
background-size: 400px 92px, 370px 0px;
|
||
|
||
background-position: left top, left bottom;
|
||
background-repeat: no-repeat;
|
||
width: 400px;
|
||
// height: 300px;
|
||
padding-top: 40px;
|
||
|
||
.gen-title {
|
||
left: 75px;
|
||
position: absolute;
|
||
top: 7px;
|
||
}
|
||
|
||
.gen-content {
|
||
box-sizing: border-box;
|
||
// height: 150px;
|
||
}
|
||
}
|
||
|
||
.dunpai {
|
||
top: 310px;
|
||
left: 689px;
|
||
background-image: url("./images/dunpai.png");
|
||
background-size: cover;
|
||
}
|
||
|
||
.earth {
|
||
top: 360px;
|
||
left: 551px;
|
||
}
|
||
}
|
||
</style>
|