技术文档-四个跳转
This commit is contained in:
gaoyuanwei
parent
466e9b510d
commit
4d94b59a55
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
|
|
@ -14,7 +14,15 @@
|
|||
{{ item.name }}
|
||||
</div>
|
||||
<div class="name-box">
|
||||
<div class="item-v" v-for="(v, j) in item.list" :key="j">
|
||||
<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>
|
||||
|
|
@ -34,7 +42,9 @@
|
|||
:class="item.className"
|
||||
:style="{ 'background-image': `url(${item.bgImg || ''})` }"
|
||||
></div>
|
||||
<div v-if="item.btnText" class="btn">{{ item.btnText }} >></div>
|
||||
<div v-if="item.btnText" class="btn" @click="toWhere(item.name)">
|
||||
{{ item.btnText }} >>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 联系我们 -->
|
||||
<div class="img-bg callus-box">
|
||||
|
|
@ -53,20 +63,76 @@
|
|||
</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-checkbox-group
|
||||
v-model:value="value1"
|
||||
name="checkboxgroup"
|
||||
:options="componentType"
|
||||
/> -->
|
||||
<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 } from 'vue'
|
||||
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: '应用资源',
|
||||
|
|
@ -79,18 +145,24 @@
|
|||
'小程序',
|
||||
'公众号',
|
||||
],
|
||||
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',
|
||||
},
|
||||
])
|
||||
|
||||
|
|
@ -120,8 +192,203 @@
|
|||
className: 'down-img',
|
||||
},
|
||||
])
|
||||
</script>
|
||||
// 能力上架弹窗
|
||||
function handlecancel() {
|
||||
abilityToTypeFunctionData.value = '组件服务'
|
||||
componentTypeValue.value = ''
|
||||
}
|
||||
let abilityToTypeFunctionData = ref('组件服务')
|
||||
function abilityToTypeFunction(item) {
|
||||
abilityToTypeFunctionData.value = item
|
||||
}
|
||||
let abilityToType = ref(['组件服务', '应用资源'])
|
||||
let componentType = ref([
|
||||
'智能算法',
|
||||
'图层服务',
|
||||
'开发组件',
|
||||
// '办公组件',
|
||||
'业务组件',
|
||||
// '其他',
|
||||
])
|
||||
const visible = ref(false)
|
||||
let componentTypeValueOld = ref('')
|
||||
function componentTypeValueFunction(item) {
|
||||
if (componentTypeValueOld.value != item) {
|
||||
componentTypeValue.value = item
|
||||
componentTypeValueOld.value = item
|
||||
} else {
|
||||
componentTypeValue.value = ''
|
||||
}
|
||||
}
|
||||
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 {
|
||||
snum.value = {
|
||||
abilityToType: abilityToTypeFunctionData.value,
|
||||
}
|
||||
}
|
||||
const applypage = router.resolve({
|
||||
path: '/nenglishangjia', // 跳转的页面路由
|
||||
query: snum.value,
|
||||
})
|
||||
window.open(applypage.href, '_blank')
|
||||
visible.value = false
|
||||
abilityToTypeFunctionData.value = '组件服务'
|
||||
componentTypeValue.value = ''
|
||||
console.log(e)
|
||||
}
|
||||
|
||||
// 跳转
|
||||
const toWhere = (data) => {
|
||||
console.log(data, 'wwwwwww')
|
||||
if (data === '能力上架') {
|
||||
visible.value = true
|
||||
} else if (data === '能力申请') {
|
||||
const newpage = router.resolve({
|
||||
path: '/addApplication', // 跳转的页面路由
|
||||
})
|
||||
window.open(newpage.href, '_blank')
|
||||
} else if (data === '需求发布') {
|
||||
const newpage = router.resolve({
|
||||
path: '/DetailsPageconetent',
|
||||
query: {
|
||||
select: '组件服务',
|
||||
},
|
||||
})
|
||||
window.location.href = newpage.href
|
||||
} else if (data === '资源下架') {
|
||||
window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
|
||||
const newpage = router.resolve({
|
||||
path: '/personalCenter',
|
||||
})
|
||||
window.location.href = newpage.href
|
||||
}
|
||||
}
|
||||
watch(abilityToTypeFunctionData, () => {
|
||||
componentTypeValue.value = ''
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
.shangjia-class {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -2.6rem;
|
||||
margin-top: -1.44rem;
|
||||
font-size: 0.14rem;
|
||||
font-weight: 500;
|
||||
|
||||
.ant-radio-inner {
|
||||
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;
|
||||
}
|
||||
.ant-modal-content {
|
||||
border-radius: 0.1rem;
|
||||
.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;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ability-to-type-down {
|
||||
background: #0087ff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
border: 0;
|
||||
text-align: center;
|
||||
padding-bottom: 0.2rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.menu-box {
|
||||
width: 1920px;
|
||||
|
|
@ -252,7 +519,7 @@
|
|||
.list-item {
|
||||
padding: 10px 20px;
|
||||
width: 310px;
|
||||
height: 330px;
|
||||
height: 356px;
|
||||
background: rgba(23, 85, 177, 0.43);
|
||||
border: 1px solid #74a9f8;
|
||||
border-radius: 10px;
|
||||
|
|
@ -274,16 +541,21 @@
|
|||
}
|
||||
|
||||
.item-v {
|
||||
min-width: 100px;
|
||||
width: 124px;
|
||||
height: 74px;
|
||||
line-height: 74px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
// border: 1px solid rgba(255, 255, 255, 0.4);
|
||||
// border-radius: 6px;
|
||||
// background: rgba(255, 255, 255, 0.2);
|
||||
margin: 0 16px 20px 16px;
|
||||
margin: 0 0 20px;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.item-v:nth-child(2n) {
|
||||
margin-left: 16px;
|
||||
}
|
||||
// .item-v:last-child {
|
||||
// width: 200px;
|
||||
// }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -207,6 +207,7 @@
|
|||
min-height: 600px;
|
||||
}
|
||||
.manual {
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
width: 74px;
|
||||
height: 136px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue