上架完善 资源图谱转rem

This commit is contained in:
a0049873 2022-07-19 20:06:01 +08:00
parent 227eb72670
commit a833330be1
2 changed files with 116 additions and 68 deletions

View File

@ -385,7 +385,7 @@
} }
console.log('展示详情================>', item, flag.value, nowShow.value) console.log('展示详情================>', item, flag.value, nowShow.value)
} }
// 971px 560px // 9.71rem 5.60rem
const bubbleList = ref([]) const bubbleList = ref([])
// //
const coordinate = ref([]) const coordinate = ref([])
@ -481,7 +481,7 @@
}, index * 100) }, index * 100)
val.style.width = coordinate.value[index][2] + 'px' val.style.width = coordinate.value[index][2] + 'px'
val.style.height = coordinate.value[index][2] + 'px' val.style.height = coordinate.value[index][2] + 'px'
val.style.fontSize = '14px' val.style.fontSize = '0.14rem'
if (index % 2 == 0) { if (index % 2 == 0) {
val.classList.add('blue') val.classList.add('blue')
} else { } else {
@ -530,70 +530,70 @@
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.atlas-resources { .atlas-resources {
height: 970px; height: 9.7rem;
width: 100%; width: 100%;
padding: 80px 0 50px; padding: 0.8rem 0 0.5rem;
.title { .title {
font-size: 32px; font-size: 0.32rem;
text-align: center; text-align: center;
margin-bottom: 15px; margin-bottom: 0.15rem;
} }
.line { .line {
width: 35px; width: 0.35rem;
height: 4px; height: 0.04rem;
background: #1890ff; background: #1890ff;
margin-bottom: 20px; margin-bottom: 0.2rem;
margin-left: 930px; margin-left: 9.3rem;
} }
.main { .main {
width: 100%; width: 100%;
height: 800px; height: 8rem;
margin-top: 10px; margin-top: 0.1rem;
padding: 60px 302px; padding: 0.6rem 3.02rem;
background: url('~@/assets/abilityStatistics/tp-bg.png') no-repeat; background: url('~@/assets/abilityStatistics/tp-bg.png') no-repeat;
display: flex; display: flex;
.left { .left {
div { div {
width: 178px; width: 1.78rem;
height: 84px; height: 0.84rem;
font-size: 16px; font-size: 0.16rem;
line-height: 84px; line-height: 0.84rem;
text-align: center; text-align: center;
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08);
margin-bottom: 1px; margin-bottom: 0.01rem;
border-right: 2px solid rgba(233, 233, 233, 0.3); border-right: 0.02rem solid rgba(233, 233, 233, 0.3);
cursor: pointer; cursor: pointer;
} }
.select { .select {
background: rgba(255, 255, 255, 0.18) !important; background: rgba(255, 255, 255, 0.18) !important;
border-right: 2px solid #fff; border-right: 0.02rem solid #fff;
} }
} }
.right { .right {
width: 100%; width: 100%;
margin-left: 30px; margin-left: 0.3rem;
background: #fff; background: #fff;
.itemList { .itemList {
width: 100%; width: 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
font-size: 16px; font-size: 0.16rem;
padding: 20px; padding: 0.2rem;
.item { .item {
width: 48%; width: 48%;
height: 40px; height: 0.4rem;
margin-top: 7px; margin-top: 0.07rem;
padding: 10px; padding: 0.1rem;
.top { .top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 8px 10px; padding: 0.08rem 0.1rem;
.name { .name {
width: 300px; width: 3rem;
text-align: right; text-align: right;
margin-right: 10px; margin-right: 0.1rem;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
@ -602,36 +602,36 @@
word-break: break-all; word-break: break-all;
} }
.num { .num {
width: 100px; width: 1rem;
margin-left: 10px; margin-left: 0.1rem;
} }
.percentage { .percentage {
width: 100px; width: 1rem;
margin-left: 10px; margin-left: 0.1rem;
} }
.img { .img {
width: 20px; width: 0.2rem;
} }
} }
.showBottom { .showBottom {
background: rgba(0, 88, 225, 0.1); background: rgba(0, 88, 225, 0.1);
border-radius: 2px; border-radius: 0.02rem;
} }
.bottom { .bottom {
width: 527px; width: 5.27rem;
height: 165px; height: 1.65rem;
margin-top: 5px; margin-top: 0.05rem;
background: #fff; background: #fff;
border: 1px solid #0058e1; border: 0.01rem solid #0058e1;
position: absolute; position: absolute;
z-index: 1000; z-index: 1000;
.up { .up {
margin: 10px; margin: 0.1rem;
font-size: 16px; font-size: 0.16rem;
span { span {
margin-right: 9px; margin-right: 0.09rem;
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 0.16rem;
} }
span:nth-of-type(2), span:nth-of-type(2),
span:nth-of-type(3) { span:nth-of-type(3) {
@ -639,7 +639,7 @@
background: url('~@/assets/abilityStatistics/bq-bg.png') background: url('~@/assets/abilityStatistics/bq-bg.png')
no-repeat; no-repeat;
background-size: 100%; background-size: 100%;
padding: 0 15px; padding: 0 0.15rem;
color: #0058e1; color: #0058e1;
} }
} }
@ -648,11 +648,11 @@
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 10px; padding: 0 0.1rem;
.type { .type {
width: 20%; width: 20%;
margin-bottom: 15px; margin-bottom: 0.15rem;
font-size: 14px; font-size: 0.14rem;
:deep(.ant-radio-inner::after) { :deep(.ant-radio-inner::after) {
background-color: #1890ff; background-color: #1890ff;
} }
@ -680,7 +680,7 @@
} }
} }
.item:nth-child(2n) { .item:nth-child(2n) {
margin-left: 40px; margin-left: 0.4rem;
} }
} }
.bubble { .bubble {
@ -690,12 +690,12 @@
display: flex; display: flex;
position: relative; position: relative;
div { div {
width: 160px; width: 1.6rem;
height: 160px; height: 1.6rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 15px; padding: 0.15rem;
text-align: center; text-align: center;
// background: radial-gradient( // background: radial-gradient(
// closest-side at 50% 50%, // closest-side at 50% 50%,
@ -706,13 +706,13 @@
// rgb(106, 178, 206) 100% // rgb(106, 178, 206) 100%
// ); // );
color: #fff; color: #fff;
font-size: 18px; font-size: 0.18rem;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.2);
position: absolute; position: absolute;
opacity: 0; opacity: 0;
top: 259px; top: 2.59rem;
left: 471.5px; left: 471.05rem;
transition: all 1s; transition: all 1s;
span { span {
overflow: hidden; overflow: hidden;
@ -729,7 +729,7 @@
p { p {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
right: 10px; right: 0.1rem;
bottom: 0; bottom: 0;
} }
.box { .box {
@ -739,12 +739,12 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.departmentList { .departmentList {
width: 150px; width: 1.5rem;
max-height: 400px; max-height: 4rem;
background: rgba(130, 191, 255, 0.79); background: rgba(130, 191, 255, 0.79);
border-radius: 5px; border-radius: 0.05rem;
position: absolute; position: absolute;
padding: 10px; padding: 0.1rem;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
@ -762,7 +762,7 @@
word-break: break-all; word-break: break-all;
} }
span:hover { span:hover {
border: 1px solid #147ad8; border: 0.01rem solid #147ad8;
} }
} }
} }
@ -791,7 +791,7 @@
#dbeaff 95%, #dbeaff 95%,
#cce0ff 100% #cce0ff 100%
); );
border: 1px solid #bed7ff; border: 0.01rem solid #bed7ff;
color: #000; color: #000;
} }
} }

View File

@ -2,7 +2,7 @@
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-06-13 10:22:27 * @Date: 2022-06-13 10:22:27
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-07-19 19:29:48 * @LastEditTime: 2022-07-19 20:04:47
* @Description: 算法上架 * @Description: 算法上架
--> -->
<template> <template>
@ -103,7 +103,9 @@
<a-popconfirm <a-popconfirm
v-if=" v-if="
showView == '算法优势' && showView == '算法优势' &&
sfys[0].list.filter((val) => val.note1 !== '').length > 0 sfys[0].list.filter((val) => val.note1 !== '').length > 0 &&
sfys[0].list.filter((val) => val.note1 !== '').length !==
sfys[0].list.length
" "
title="如果信息未填写完整将会被丢弃,是否返回上一步?" title="如果信息未填写完整将会被丢弃,是否返回上一步?"
ok-text="是" ok-text="是"
@ -113,10 +115,22 @@
> >
<button>上一步</button> <button>上一步</button>
</a-popconfirm> </a-popconfirm>
<button
v-else-if="
showView == '算法优势' &&
sfys[0].list.filter((val) => val.note1 !== '').length ==
sfys[0].list.length
"
@click="changeSfys('上一步')"
>
上一步
</button>
<a-popconfirm <a-popconfirm
v-else-if=" v-else-if="
showView == '应用场景' && showView == '应用场景' &&
yycj[0].list.filter((val) => val.note1 !== '').length > 0 yycj[0].list.filter((val) => val.note1 !== '').length > 0 &&
yycj[0].list.filter((val) => val.note1 !== '').length !==
yycj[0].list.length
" "
title="如果信息未填写完整将会被丢弃,是否返回上一步?" title="如果信息未填写完整将会被丢弃,是否返回上一步?"
ok-text="是" ok-text="是"
@ -126,6 +140,16 @@
> >
<button>上一步</button> <button>上一步</button>
</a-popconfirm> </a-popconfirm>
<button
v-else-if="
showView == '应用场景' &&
yycj[0].list.filter((val) => val.note1 !== '').length ==
yycj[0].list.length
"
@click="changeYycj('上一步')"
>
上一步
</button>
<button v-else-if="showView !== '基本信息'" @click="back()"> <button v-else-if="showView !== '基本信息'" @click="back()">
上一步 上一步
</button> </button>
@ -135,7 +159,9 @@
<a-popconfirm <a-popconfirm
v-if=" v-if="
showView == '算法优势' && showView == '算法优势' &&
sfys[0].list.filter((val) => val.note1 !== '').length > 0 sfys[0].list.filter((val) => val.note1 !== '').length > 0 &&
sfys[0].list.filter((val) => val.note1 !== '').length !==
sfys[0].list.length
" "
title="如果信息未填写完整将会被丢弃,是否进行下一步?" title="如果信息未填写完整将会被丢弃,是否进行下一步?"
ok-text="是" ok-text="是"
@ -145,10 +171,22 @@
> >
<button>下一步</button> <button>下一步</button>
</a-popconfirm> </a-popconfirm>
<button
v-else-if="
showView == '算法优势' &&
sfys[0].list.filter((val) => val.note1 !== '').length ==
sfys[0].list.length
"
@click="changeSfys('下一步')"
>
下一步
</button>
<a-popconfirm <a-popconfirm
v-else-if=" v-else-if="
showView == '应用场景' && showView == '应用场景' &&
yycj[0].list.filter((val) => val.note1 !== '').length > 0 yycj[0].list.filter((val) => val.note1 !== '').length > 0 &&
yycj[0].list.filter((val) => val.note1 !== '').length !==
yycj[0].list.length
" "
title="如果信息未填写完整将会被丢弃,是否进行下一步?" title="如果信息未填写完整将会被丢弃,是否进行下一步?"
ok-text="是" ok-text="是"
@ -158,6 +196,16 @@
> >
<button>下一步</button> <button>下一步</button>
</a-popconfirm> </a-popconfirm>
<button
v-else-if="
showView == '应用场景' &&
yycj[0].list.filter((val) => val.note1 !== '').length ==
yycj[0].list.length
"
@click="changeYycj('下一步')"
>
下一步
</button>
<button v-else-if="showView !== '部署与使用'" @click="next()"> <button v-else-if="showView !== '部署与使用'" @click="next()">
下一步 下一步
</button> </button>
@ -169,7 +217,7 @@
).length > 0 || ).length > 0 ||
bs[1].list.filter((val) => val.note1 !== '').length > 0) bs[1].list.filter((val) => val.note1 !== '').length > 0)
" "
title="如果信息未填写完整将会被丢弃,是否进行下一步?" title="如果计费标准信息或常见问题未填写完整将会被丢弃,是否进行提交?"
ok-text="是" ok-text="是"
cancel-text="否" cancel-text="否"
@confirm="changeBs('提交')" @confirm="changeBs('提交')"