wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

817bug

This commit is contained in:
gaoyuanwei 2022-08-04 18:58:24 +08:00
parent eafd6aea19
commit a4e51ff48c
1 changed files with 378 additions and 353 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

731
front/src/views/instructionManual/components/menuBook.vue
View File

@ -1,46 +1,54 @@
<template>
<div class="menu-box">
<div class="content-box">
<!-- 提供服务 -->
<div class="img-bg service-box">
<div class="title" style="margin-bottom: 20px">
<div class="text text-white">提供服务</div>
<div class="line line-white"></div>
</div>
<div class="list-box">
<div class="list-item" v-for="(item, i) in seviceList" :key="i">
<div class="item-name">
<img :src="item.img" />
{{ item.name }}
</div>
<div class="name-box">
<div class="item-v" v-for="(v, j) in item.list" :key="j" :style="{
'background-image': `url(${item.imgBG || ''})`,
width: `${item.width || ''}`,
}">
{{ v }}
</div>
</div>
</div>
</div>
<div class="menu-box">
<div class="content-box">
<!-- 提供服务 -->
<div class="img-bg service-box">
<div class="title" style="margin-bottom: 20px">
<div class="text text-white">提供服务</div>
<div class="line line-white"></div>
</div>
<div class="list-box">
<div class="list-item" v-for="(item, i) in seviceList" :key="i">
<div class="item-name">
<img :src="item.img" />
{{ item.name }}
</div>
<!-- 总体流程 -->
<TheOverallProcess></TheOverallProcess>
<!-- imgList -->
<div class="img-box" v-for="(item, i) in imgList" :key="i">
<div class="title">
<div class="text">{{ item.name }}</div>
<div class="line"></div>
</div>
<div class="img-bg" :class="item.className" :style="{ 'background-image': `url(${item.bgImg || ''})` }">
</div>
<div v-if="item.btnText" class="btn" @click="toWhere(item.name)">
{{ item.btnText }} >>
</div>
<div class="name-box">
<div
class="item-v"
v-for="(v, j) in item.list"
:key="j"
:style="{
'background-image': `url(${item.imgBG || ''})`,
width: `${item.width || ''}`,
}"
>
{{ v }}
</div>
</div>
<!-- 联系我们 -->
<div class="img-bg callus-box">
<!-- <div class="title" style="margin-bottom: 20px">
</div>
</div>
</div>
<!-- 总体流程 -->
<TheOverallProcess></TheOverallProcess>
<!-- imgList -->
<div class="img-box" v-for="(item, i) in imgList" :key="i">
<div class="title">
<div class="text">{{ item.name }}</div>
<div class="line"></div>
</div>
<div
class="img-bg"
:class="item.className"
:style="{ 'background-image': `url(${item.bgImg || ''})` }"
></div>
<div v-if="item.btnText" class="btn" @click="toWhere(item.name)">
{{ item.btnText }} >>
</div>
</div>
<!-- 联系我们 -->
<div class="img-bg callus-box">
<!-- <div class="title" style="margin-bottom: 20px">
<div class="text text-white">联系我们</div>
<div class="line line-white"></div>
</div>
@ -54,205 +62,222 @@
<span>0530-0000000</span>
</p>
</div> -->
</div>
<!-- 能力上架弹窗 -->
<a-modal v-model:visible="visible" @ok="handleOk" class="shangjia-class" @cancel="handlecancel">
<div class="ant-modal-title" id="vcDialogTitle1">
<div class="showBg"></div>
能力上架申请
</div>
<div class="ability-to-type">
<div class="title">能力类型选择</div>
<div class="ability-to-type-content">
<div v-for="item in abilityToType" :key="item" @click="abilityToTypeFunction(item)" :class="
abilityToTypeFunctionData == item ? 'ability-to-type-down' : ''
">
{{ item }}
</div>
</div>
</div>
<div class="component-type" v-if="abilityToTypeFunctionData == '组件服务'">
<div class="title">组件类型选择</div>
<div class="component-type-content">
<a-radio-group v-model:value="componentTypeValue">
<a-radio @click="componentTypeValueFunction(item)" v-for="item in componentType" :key="item"
:value="item">
{{ item }}
</a-radio>
</a-radio-group>
</div>
</div>
</a-modal>
</div>
<!-- 能力上架弹窗 -->
<a-modal
v-model:visible="visible"
@ok="handleOk"
class="shangjia-class"
@cancel="handlecancel"
>
<div class="ant-modal-title" id="vcDialogTitle1">
<div class="showBg"></div>
能力上架申请
</div>
<div class="ability-to-type">
<div class="title">能力类型选择</div>
<div class="ability-to-type-content">
<div
v-for="item in abilityToType"
:key="item"
@click="abilityToTypeFunction(item)"
:class="
abilityToTypeFunctionData == item ? 'ability-to-type-down' : ''
"
>
{{ item }}
</div>
</div>
</div>
<div
class="component-type"
v-if="abilityToTypeFunctionData == '组件服务'"
>
<div class="title">组件类型选择</div>
<div class="component-type-content">
<a-radio-group v-model:value="componentTypeValue">
<a-radio
@click="componentTypeValueFunction(item)"
v-for="item in componentType"
:key="item"
:value="item"
>
{{ item }}
</a-radio>
</a-radio-group>
</div>
</div>
</a-modal>
</div>
</div>
</template>
<script setup>
import HomeHeader from '@/views/home/components/header'
import HomeFooter from '@/views/newHome/components/Footer'
import { ref, onMounted, watch } from 'vue'
import TheOverallProcess from './TheOverallProcess.vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
const router = useRouter()
const seviceList = ref([
import HomeHeader from '@/views/home/components/header'
import HomeFooter from '@/views/newHome/components/Footer'
import { ref, onMounted, watch } from 'vue'
import TheOverallProcess from './TheOverallProcess.vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
const router = useRouter()
const seviceList = ref([
{
name: '组件服务',
img: require('@/assets/menu/service-component.png'),
list: ['智能算法', '图层服务', '开发组件', '业务组件'],
imgBG: require('../../../assets/menu/imgBG.png'),
width: '124px',
name: '组件服务',
img: require('@/assets/menu/service-component.png'),
list: ['智能算法', '图层服务', '开发组件', '业务组件'],
imgBG: require('../../../assets/menu/imgBG.png'),
width: '124px',
},
{
name: '应用资源',
img: require('@/assets/menu/service-application.png'),
list: [
'办公系统',
'业务系统',
'门户网站',
'大屏看板',
'小程序',
'公众号',
],
imgBG: require('../../../assets/menu/imgBG.png'),
width: '124px',
name: '应用资源',
img: require('@/assets/menu/service-application.png'),
list: [
'办公系统',
'业务系统',
'门户网站',
'大屏看板',
'小程序',
'公众号',
],
imgBG: require('../../../assets/menu/imgBG.png'),
width: '124px',
},
{
name: '基础设施',
img: require('@/assets/menu/service-infrastructure.png'),
list: ['视频资源', '云资源', '感知资源'],
imgBG: require('../../../assets/menu/imgBG.png'),
width: '124px',
name: '基础设施',
img: require('@/assets/menu/service-infrastructure.png'),
list: ['视频资源', '云资源', '感知资源'],
imgBG: require('../../../assets/menu/imgBG.png'),
width: '124px',
},
{
name: '数据资源',
img: require('@/assets/menu/service-data.png'),
list: ['政务信息资源'],
imgBG: require('../../../assets/menu/imgBG-long.png'),
width: '200px',
name: '数据资源',
img: require('@/assets/menu/service-data.png'),
list: ['政务信息资源'],
imgBG: require('../../../assets/menu/imgBG-long.png'),
width: '200px',
},
])
const imgList = ref([
])
const imgList = ref([
{
name: '能力上架',
bgImg: require('../../../assets/menu/shelves.png'),
btnText: '立即上架',
className: 'shelves-img',
name: '能力上架',
bgImg: require('../../../assets/menu/shelves.png'),
btnText: '立即上架',
className: 'shelves-img',
},
{
name: '能力申请',
bgImg: require('../../../assets/menu/apply.png'),
btnText: '立即申请',
className: 'apply-img',
name: '能力申请',
bgImg: require('../../../assets/menu/apply.png'),
btnText: '立即申请',
className: 'apply-img',
},
{
name: '需求发布',
bgImg: require('../../../assets/menu/demand.png'),
btnText: '立即发布',
className: 'demand-img',
name: '需求发布',
bgImg: require('../../../assets/menu/demand.png'),
btnText: '立即发布',
className: 'demand-img',
},
{
name: '资源下架',
bgImg: require('../../../assets/menu/down.png'),
btnText: '立即下架',
className: 'down-img',
name: '资源下架',
bgImg: require('../../../assets/menu/down.png'),
btnText: '立即下架',
className: 'down-img',
},
])
// 能力上架弹窗
function handlecancel() {
])
// 能力上架弹窗
function handlecancel() {
abilityToTypeFunctionData.value = '组件服务'
componentTypeValue.value = ''
}
let abilityToTypeFunctionData = ref('组件服务')
function abilityToTypeFunction(item) {
}
let abilityToTypeFunctionData = ref('组件服务')
function abilityToTypeFunction(item) {
abilityToTypeFunctionData.value = item
}
let abilityToType = ref(['组件服务', '应用资源'])
let componentType = ref([
}
let abilityToType = ref(['组件服务', '应用资源'])
let componentType = ref([
'智能算法',
'图层服务',
'开发组件',
// '办公组件',
'业务组件',
// '其他',
])
const visible = ref(false)
let componentTypeValueOld = ref('')
function componentTypeValueFunction(item) {
])
const visible = ref(false)
let componentTypeValueOld = ref('')
function componentTypeValueFunction(item) {
if (componentTypeValueOld.value != item) {
componentTypeValue.value = item
componentTypeValueOld.value = item
componentTypeValue.value = item
componentTypeValueOld.value = item
} else {
componentTypeValue.value = ''
componentTypeValue.value = ''
}
}
let componentTypeValue = ref('')
const handleOk = (e) => {
}
let componentTypeValue = ref('')
const handleOk = (e) => {
let snum = ref({})
if (abilityToTypeFunctionData.value == '组件服务') {
if (!componentTypeValue.value || componentTypeValue.value == '') {
message.error('请选择组件类型！')
return
} else if (
componentTypeValue.value === '智能算法' ||
componentTypeValue.value === '开发组件' ||
componentTypeValue.value === '业务组件' ||
componentTypeValue.value === '图层服务'
) {
snum.value = {
abilityToType: abilityToTypeFunctionData.value,
componentTypeValue: componentTypeValue.value,
}
} else {
message.error('功能开发中！')
return
}
} else {
if (!componentTypeValue.value || componentTypeValue.value == '') {
message.error('请选择组件类型！')
return
} else if (
componentTypeValue.value === '智能算法' ||
componentTypeValue.value === '开发组件' ||
componentTypeValue.value === '业务组件' ||
componentTypeValue.value === '图层服务'
) {
snum.value = {
abilityToType: abilityToTypeFunctionData.value,
abilityToType: abilityToTypeFunctionData.value,
componentTypeValue: componentTypeValue.value,
}
} else {
message.error('功能开发中！')
return
}
} else {
snum.value = {
abilityToType: abilityToTypeFunctionData.value,
}
}
const applypage = router.resolve({
path: '/nenglishangjia', // 跳转的页面路由
query: snum.value,
path: '/nenglishangjia', // 跳转的页面路由
query: snum.value,
})
window.open(applypage.href, '_blank')
visible.value = false
abilityToTypeFunctionData.value = '组件服务'
componentTypeValue.value = ''
console.log(e)
}
// 跳转
const toWhere = (data) => {
}
// 跳转
const toWhere = (data) => {
console.log(data, 'wwwwwww')
if (data === '能力上架') {
visible.value = true
visible.value = true
} else if (data === '能力申请') {
const newpage = router.resolve({
path: '/addApplication', // 跳转的页面路由
})
window.open(newpage.href, '_blank')
const newpage = router.resolve({
path: '/DetailsPageconetent',
query: {
select: '组件服务',
},
})
window.location.href = newpage.href
} else if (data === '需求发布') {
const newpage = router.resolve({
path: '/DetailsPageconetent',
query: {
select: '组件服务',
},
})
window.location.href = newpage.href
const newpage = router.resolve({
path: '/addApplication', // 跳转的页面路由
})
window.open(newpage.href, '_blank')
} else if (data === '资源下架') {
window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
const newpage = router.resolve({
path: '/personalCenter',
})
window.location.href = newpage.href
window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
const newpage = router.resolve({
path: '/personalCenter',
})
window.location.href = newpage.href
}
}
watch(abilityToTypeFunctionData, () => {
}
watch(abilityToTypeFunctionData, () => {
componentTypeValue.value = ''
})
})
</script>
<style lang="less">
.shangjia-class {
.shangjia-class {
position: fixed;
left: 50%;
top: 50%;
@ -262,138 +287,138 @@ watch(abilityToTypeFunctionData, () => {
font-weight: 500;
.ant-radio-inner {
height: 0.16rem;
width: 0.16rem;
height: 0.16rem;
width: 0.16rem;
}
.ant-radio-inner::after {
background-color: unset;
background: url('~@/assets/personalCenter/xuanzhong.png') no-repeat;
background-size: cover;
background-position: center;
background-color: unset;
background: url('~@/assets/personalCenter/xuanzhong.png') no-repeat;
background-size: cover;
background-position: center;
}
.ant-modal-content {
border-radius: 0.1rem;
border-radius: 0.1rem;
.ability-to-type,
.component-type {
.ability-to-type,
.component-type {
display: flex;
margin-top: 0.2rem;
.title {
white-space: nowrap;
margin-right: 0.2rem;
display: flex;
align-items: center;
height: 0.26rem;
}
.component-type-content {
width: 100%;
height: unset;
border: unset;
background: unset;
.ant-radio-group {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 0.15rem;
}
}
}
.ability-to-type {
.ability-to-type-content {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
height: unset;
border: unset;
background: unset;
div {
margin-right: 0.15rem;
cursor: pointer;
font-size: 0.14rem;
width: 0.9rem;
height: 0.26rem;
border-radius: 0.13rem;
color: #333333;
background: #f5f5f5;
border: 0.01rem #cccccc solid;
display: flex;
margin-top: 0.2rem;
justify-content: center;
align-items: center;
font-weight: 500;
}
.title {
white-space: nowrap;
margin-right: 0.2rem;
display: flex;
align-items: center;
height: 0.26rem;
}
.component-type-content {
width: 100%;
height: unset;
border: unset;
background: unset;
.ant-radio-group {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 0.15rem;
}
}
}
.ability-to-type {
.ability-to-type-content {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
height: unset;
border: unset;
background: unset;
div {
margin-right: 0.15rem;
cursor: pointer;
font-size: 0.14rem;
width: 0.9rem;
height: 0.26rem;
border-radius: 0.13rem;
color: #333333;
background: #f5f5f5;
border: 0.01rem #cccccc solid;
display: flex;
justify-content: center;
align-items: center;
font-weight: 500;
}
.ability-to-type-down {
background: #0087ff;
color: #fff;
}
}
.ability-to-type-down {
background: #0087ff;
color: #fff;
}
}
}
}
.ant-modal-title {
display: flex;
align-items: center;
display: flex;
align-items: center;
}
.ant-modal-footer {
border: 0;
text-align: center;
padding-bottom: 0.2rem;
border: 0;
text-align: center;
padding-bottom: 0.2rem;
button {
margin-right: 0.2rem;
border-radius: 0.08rem;
}
button {
margin-right: 0.2rem;
border-radius: 0.08rem;
}
}
.showBg {
height: 0.24rem;
width: 0.24rem;
background: url('~@/assets/home/shenqing.png') no-repeat;
background-size: cover;
background-position: center;
margin-right: 0.1rem;
height: 0.24rem;
width: 0.24rem;
background: url('~@/assets/home/shenqing.png') no-repeat;
background-size: cover;
background-position: center;
margin-right: 0.1rem;
}
}
}
</style>
<style lang="less" scoped>
.menu-box {
.menu-box {
width: 1920px;
// padding-bottom: 40px;
}
}
.title {
.title {
margin-bottom: 20px;
.text {
padding: 20px 0;
font-size: 26px;
margin: 0 auto;
text-align: center;
padding: 20px 0;
font-size: 26px;
margin: 0 auto;
text-align: center;
}
.line {
width: 50px;
height: 3px;
background: #0058e1;
margin: 0 auto;
width: 50px;
height: 3px;
background: #0058e1;
margin: 0 auto;
}
.line-white {
background: #fff;
background: #fff;
}
.text-white {
color: #fff;
color: #fff;
}
}
}
.btn {
.btn {
width: 150px;
height: 50px;
line-height: 50px;
@ -406,135 +431,135 @@ watch(abilityToTypeFunctionData, () => {
cursor: pointer;
&:hover {
background: #e5eefc;
background: #e5eefc;
}
}
}
.img-box {
.img-box {
margin-bottom: 50px;
}
}
.service-box {
.service-box {
width: 1920px;
height: 613px;
background-size: 100% 100%;
background-image: url('../../../assets/menu/service.png');
.list-box {
width: 1560px;
height: 350px;
margin: 0 auto;
width: 1560px;
height: 350px;
margin: 0 auto;
}
}
}
.callus-box {
.callus-box {
width: 1920px;
height: 214px;
background-size: 100% 100%;
background-image: url('../../../assets/menu/callus.png');
.list-box {
width: 1560px;
// height: 350px;
margin: 0 auto;
width: 1560px;
// height: 350px;
margin: 0 auto;
p {
font-size: 24px;
color: #ffffff;
font-weight: bold;
p {
font-size: 24px;
color: #ffffff;
font-weight: bold;
span {
font-size: 30px;
}
span {
font-size: 30px;
}
}
p:nth-child(1) {
margin-right: 100px;
}
p:nth-child(1) {
margin-right: 100px;
}
}
}
}
.img-bg {
.img-bg {
width: 1920px;
background-size: 100% 100%;
}
}
.process-img {
.process-img {
height: 855px;
background-image: url('../../../assets/menu/process.png');
}
}
.shelves-img {
.shelves-img {
height: 497px;
width: 1107px;
margin: 0 auto;
background-image: url('../../../assets/menu/shelves.png');
}
}
.apply-img {
.apply-img {
height: 752px;
background-image: url('../../../assets/menu/apply.png');
}
}
.demand-img {
.demand-img {
height: 525px;
width: 1300px;
margin: 0 auto;
background-image: url('../../../assets/menu/demand.png');
}
}
.down-img {
.down-img {
height: 544px;
background-image: url('../../../assets/menu/down.png');
}
}
.list-box {
.list-box {
display: flex;
align-items: center;
justify-content: center;
.list-item {
padding: 10px 20px;
width: 310px;
height: 356px;
background: rgba(23, 85, 177, 0.43);
border: 1px solid #74a9f8;
border-radius: 10px;
margin: 0 10px;
cursor: pointer;
padding: 10px 20px;
width: 310px;
height: 356px;
background: rgba(23, 85, 177, 0.43);
border: 1px solid #74a9f8;
border-radius: 10px;
margin: 0 10px;
cursor: pointer;
.item-name {
color: #fff;
font-size: 20px;
text-align: center;
padding: 20px 0 10px 0;
}
.item-name {
color: #fff;
font-size: 20px;
text-align: center;
padding: 20px 0 10px 0;
}
.name-box {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
}
.name-box {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
}
.item-v {
width: 124px;
height: 74px;
line-height: 74px;
color: #fff;
font-size: 20px;
text-align: center;
margin: 0 0 20px;
background-size: 100% 100%;
}
.item-v {
width: 124px;
height: 74px;
line-height: 74px;
color: #fff;
font-size: 20px;
text-align: center;
margin: 0 0 20px;
background-size: 100% 100%;
}
.item-v:nth-child(2n) {
margin-left: 16px;
}
.item-v:nth-child(2n) {
margin-left: 16px;
}
// .item-v:last-child {
// width: 200px;
// }
// .item-v:last-child {
// width: 200px;
// }
}
}
</style>
}
</style>