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

View File

@ -14,10 +14,15 @@
{{ item.name }} {{ item.name }}
</div> </div>
<div class="name-box"> <div class="name-box">
<div class="item-v" v-for="(v, j) in item.list" :key="j" :style="{ <div
class="item-v"
v-for="(v, j) in item.list"
:key="j"
:style="{
'background-image': `url(${item.imgBG || ''})`, 'background-image': `url(${item.imgBG || ''})`,
width: `${item.width || ''}`, width: `${item.width || ''}`,
}"> }"
>
{{ v }} {{ v }}
</div> </div>
</div> </div>
@ -32,8 +37,11 @@
<div class="text">{{ item.name }}</div> <div class="text">{{ item.name }}</div>
<div class="line"></div> <div class="line"></div>
</div> </div>
<div class="img-bg" :class="item.className" :style="{ 'background-image': `url(${item.bgImg || ''})` }"> <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)"> <div v-if="item.btnText" class="btn" @click="toWhere(item.name)">
{{ item.btnText }} >> {{ item.btnText }} >>
</div> </div>
@ -56,7 +64,12 @@
</div> --> </div> -->
</div> </div>
<!-- 能力上架弹窗 --> <!-- 能力上架弹窗 -->
<a-modal v-model:visible="visible" @ok="handleOk" class="shangjia-class" @cancel="handlecancel"> <a-modal
v-model:visible="visible"
@ok="handleOk"
class="shangjia-class"
@cancel="handlecancel"
>
<div class="ant-modal-title" id="vcDialogTitle1"> <div class="ant-modal-title" id="vcDialogTitle1">
<div class="showBg"></div> <div class="showBg"></div>
能力上架申请 能力上架申请
@ -64,19 +77,31 @@
<div class="ability-to-type"> <div class="ability-to-type">
<div class="title">能力类型选择</div> <div class="title">能力类型选择</div>
<div class="ability-to-type-content"> <div class="ability-to-type-content">
<div v-for="item in abilityToType" :key="item" @click="abilityToTypeFunction(item)" :class=" <div
v-for="item in abilityToType"
:key="item"
@click="abilityToTypeFunction(item)"
:class="
abilityToTypeFunctionData == item ? 'ability-to-type-down' : '' abilityToTypeFunctionData == item ? 'ability-to-type-down' : ''
"> "
>
{{ item }} {{ item }}
</div> </div>
</div> </div>
</div> </div>
<div class="component-type" v-if="abilityToTypeFunctionData == '组件服务'"> <div
class="component-type"
v-if="abilityToTypeFunctionData == '组件服务'"
>
<div class="title">组件类型选择</div> <div class="title">组件类型选择</div>
<div class="component-type-content"> <div class="component-type-content">
<a-radio-group v-model:value="componentTypeValue"> <a-radio-group v-model:value="componentTypeValue">
<a-radio @click="componentTypeValueFunction(item)" v-for="item in componentType" :key="item" <a-radio
:value="item"> @click="componentTypeValueFunction(item)"
v-for="item in componentType"
:key="item"
:value="item"
>
{{ item }} {{ item }}
</a-radio> </a-radio>
</a-radio-group> </a-radio-group>
@ -87,14 +112,14 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import HomeHeader from '@/views/home/components/header' import HomeHeader from '@/views/home/components/header'
import HomeFooter from '@/views/newHome/components/Footer' import HomeFooter from '@/views/newHome/components/Footer'
import { ref, onMounted, watch } from 'vue' import { ref, onMounted, watch } from 'vue'
import TheOverallProcess from './TheOverallProcess.vue' import TheOverallProcess from './TheOverallProcess.vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
const router = useRouter() const router = useRouter()
const seviceList = ref([ const seviceList = ref([
{ {
name: '组件服务', name: '组件服务',
img: require('@/assets/menu/service-component.png'), img: require('@/assets/menu/service-component.png'),
@ -130,8 +155,8 @@ const seviceList = ref([
imgBG: require('../../../assets/menu/imgBG-long.png'), imgBG: require('../../../assets/menu/imgBG-long.png'),
width: '200px', width: '200px',
}, },
]) ])
const imgList = ref([ const imgList = ref([
{ {
name: '能力上架', name: '能力上架',
bgImg: require('../../../assets/menu/shelves.png'), bgImg: require('../../../assets/menu/shelves.png'),
@ -156,37 +181,37 @@ const imgList = ref([
btnText: '立即下架', btnText: '立即下架',
className: 'down-img', className: 'down-img',
}, },
]) ])
// //
function handlecancel() { function handlecancel() {
abilityToTypeFunctionData.value = '组件服务' abilityToTypeFunctionData.value = '组件服务'
componentTypeValue.value = '' componentTypeValue.value = ''
} }
let abilityToTypeFunctionData = ref('组件服务') let abilityToTypeFunctionData = ref('组件服务')
function abilityToTypeFunction(item) { function abilityToTypeFunction(item) {
abilityToTypeFunctionData.value = item abilityToTypeFunctionData.value = item
} }
let abilityToType = ref(['组件服务', '应用资源']) let abilityToType = ref(['组件服务', '应用资源'])
let componentType = ref([ let componentType = ref([
'智能算法', '智能算法',
'图层服务', '图层服务',
'开发组件', '开发组件',
// '', // '',
'业务组件', '业务组件',
// '', // '',
]) ])
const visible = ref(false) const visible = ref(false)
let componentTypeValueOld = ref('') let componentTypeValueOld = ref('')
function componentTypeValueFunction(item) { function componentTypeValueFunction(item) {
if (componentTypeValueOld.value != item) { if (componentTypeValueOld.value != item) {
componentTypeValue.value = item componentTypeValue.value = item
componentTypeValueOld.value = item componentTypeValueOld.value = item
} else { } else {
componentTypeValue.value = '' componentTypeValue.value = ''
} }
} }
let componentTypeValue = ref('') let componentTypeValue = ref('')
const handleOk = (e) => { const handleOk = (e) => {
let snum = ref({}) let snum = ref({})
if (abilityToTypeFunctionData.value == '组件服务') { if (abilityToTypeFunctionData.value == '组件服务') {
if (!componentTypeValue.value || componentTypeValue.value == '') { if (!componentTypeValue.value || componentTypeValue.value == '') {
@ -220,18 +245,13 @@ const handleOk = (e) => {
abilityToTypeFunctionData.value = '组件服务' abilityToTypeFunctionData.value = '组件服务'
componentTypeValue.value = '' componentTypeValue.value = ''
console.log(e) console.log(e)
} }
// //
const toWhere = (data) => { const toWhere = (data) => {
console.log(data, 'wwwwwww') console.log(data, 'wwwwwww')
if (data === '能力上架') { if (data === '能力上架') {
visible.value = true visible.value = true
} else if (data === '能力申请') { } else if (data === '能力申请') {
const newpage = router.resolve({
path: '/addApplication', //
})
window.open(newpage.href, '_blank')
} else if (data === '需求发布') {
const newpage = router.resolve({ const newpage = router.resolve({
path: '/DetailsPageconetent', path: '/DetailsPageconetent',
query: { query: {
@ -239,6 +259,11 @@ const toWhere = (data) => {
}, },
}) })
window.location.href = newpage.href window.location.href = newpage.href
} else if (data === '需求发布') {
const newpage = router.resolve({
path: '/addApplication', //
})
window.open(newpage.href, '_blank')
} else if (data === '资源下架') { } else if (data === '资源下架') {
window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle')) window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
const newpage = router.resolve({ const newpage = router.resolve({
@ -246,13 +271,13 @@ const toWhere = (data) => {
}) })
window.location.href = newpage.href window.location.href = newpage.href
} }
} }
watch(abilityToTypeFunctionData, () => { watch(abilityToTypeFunctionData, () => {
componentTypeValue.value = '' componentTypeValue.value = ''
}) })
</script> </script>
<style lang="less"> <style lang="less">
.shangjia-class { .shangjia-class {
position: fixed; position: fixed;
left: 50%; left: 50%;
top: 50%; top: 50%;
@ -359,15 +384,15 @@ watch(abilityToTypeFunctionData, () => {
background-position: center; background-position: center;
margin-right: 0.1rem; margin-right: 0.1rem;
} }
} }
</style> </style>
<style lang="less" scoped> <style lang="less" scoped>
.menu-box { .menu-box {
width: 1920px; width: 1920px;
// padding-bottom: 40px; // padding-bottom: 40px;
} }
.title { .title {
margin-bottom: 20px; margin-bottom: 20px;
.text { .text {
@ -391,9 +416,9 @@ watch(abilityToTypeFunctionData, () => {
.text-white { .text-white {
color: #fff; color: #fff;
} }
} }
.btn { .btn {
width: 150px; width: 150px;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
@ -408,13 +433,13 @@ watch(abilityToTypeFunctionData, () => {
&:hover { &:hover {
background: #e5eefc; background: #e5eefc;
} }
} }
.img-box { .img-box {
margin-bottom: 50px; margin-bottom: 50px;
} }
.service-box { .service-box {
width: 1920px; width: 1920px;
height: 613px; height: 613px;
background-size: 100% 100%; background-size: 100% 100%;
@ -425,9 +450,9 @@ watch(abilityToTypeFunctionData, () => {
height: 350px; height: 350px;
margin: 0 auto; margin: 0 auto;
} }
} }
.callus-box { .callus-box {
width: 1920px; width: 1920px;
height: 214px; height: 214px;
background-size: 100% 100%; background-size: 100% 100%;
@ -452,43 +477,43 @@ watch(abilityToTypeFunctionData, () => {
margin-right: 100px; margin-right: 100px;
} }
} }
} }
.img-bg { .img-bg {
width: 1920px; width: 1920px;
background-size: 100% 100%; background-size: 100% 100%;
} }
.process-img { .process-img {
height: 855px; height: 855px;
background-image: url('../../../assets/menu/process.png'); background-image: url('../../../assets/menu/process.png');
} }
.shelves-img { .shelves-img {
height: 497px; height: 497px;
width: 1107px; width: 1107px;
margin: 0 auto; margin: 0 auto;
background-image: url('../../../assets/menu/shelves.png'); background-image: url('../../../assets/menu/shelves.png');
} }
.apply-img { .apply-img {
height: 752px; height: 752px;
background-image: url('../../../assets/menu/apply.png'); background-image: url('../../../assets/menu/apply.png');
} }
.demand-img { .demand-img {
height: 525px; height: 525px;
width: 1300px; width: 1300px;
margin: 0 auto; margin: 0 auto;
background-image: url('../../../assets/menu/demand.png'); background-image: url('../../../assets/menu/demand.png');
} }
.down-img { .down-img {
height: 544px; height: 544px;
background-image: url('../../../assets/menu/down.png'); background-image: url('../../../assets/menu/down.png');
} }
.list-box { .list-box {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -536,5 +561,5 @@ watch(abilityToTypeFunctionData, () => {
// width: 200px; // width: 200px;
// } // }
} }
} }
</style> </style>