817bug
This commit is contained in:
gaoyuanwei
parent
eafd6aea19
commit
a4e51ff48c
|
|
@ -1,46 +1,54 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="menu-box">
|
<div class="menu-box">
|
||||||
<div class="content-box">
|
<div class="content-box">
|
||||||
<!-- 提供服务 -->
|
<!-- 提供服务 -->
|
||||||
<div class="img-bg service-box">
|
<div class="img-bg service-box">
|
||||||
<div class="title" style="margin-bottom: 20px">
|
<div class="title" style="margin-bottom: 20px">
|
||||||
<div class="text text-white">提供服务</div>
|
<div class="text text-white">提供服务</div>
|
||||||
<div class="line line-white"></div>
|
<div class="line line-white"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="list-box">
|
<div class="list-box">
|
||||||
<div class="list-item" v-for="(item, i) in seviceList" :key="i">
|
<div class="list-item" v-for="(item, i) in seviceList" :key="i">
|
||||||
<div class="item-name">
|
<div class="item-name">
|
||||||
<img :src="item.img" />
|
<img :src="item.img" />
|
||||||
{{ item.name }}
|
{{ 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>
|
</div>
|
||||||
<!-- 总体流程 -->
|
<div class="name-box">
|
||||||
<TheOverallProcess></TheOverallProcess>
|
<div
|
||||||
<!-- imgList -->
|
class="item-v"
|
||||||
<div class="img-box" v-for="(item, i) in imgList" :key="i">
|
v-for="(v, j) in item.list"
|
||||||
<div class="title">
|
:key="j"
|
||||||
<div class="text">{{ item.name }}</div>
|
:style="{
|
||||||
<div class="line"></div>
|
'background-image': `url(${item.imgBG || ''})`,
|
||||||
</div>
|
width: `${item.width || ''}`,
|
||||||
<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)">
|
{{ v }}
|
||||||
{{ item.btnText }} >>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- 联系我们 -->
|
</div>
|
||||||
<div class="img-bg callus-box">
|
</div>
|
||||||
<!-- <div class="title" style="margin-bottom: 20px">
|
</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="text text-white">联系我们</div>
|
||||||
<div class="line line-white"></div>
|
<div class="line line-white"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -54,205 +62,222 @@
|
||||||
<span>0530-0000000</span>
|
<span>0530-0000000</span>
|
||||||
</p>
|
</p>
|
||||||
</div> -->
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
<!-- 能力上架弹窗 -->
|
<!-- 能力上架弹窗 -->
|
||||||
<a-modal v-model:visible="visible" @ok="handleOk" class="shangjia-class" @cancel="handlecancel">
|
<a-modal
|
||||||
<div class="ant-modal-title" id="vcDialogTitle1">
|
v-model:visible="visible"
|
||||||
<div class="showBg"></div>
|
@ok="handleOk"
|
||||||
能力上架申请
|
class="shangjia-class"
|
||||||
</div>
|
@cancel="handlecancel"
|
||||||
<div class="ability-to-type">
|
>
|
||||||
<div class="title">能力类型选择</div>
|
<div class="ant-modal-title" id="vcDialogTitle1">
|
||||||
<div class="ability-to-type-content">
|
<div class="showBg"></div>
|
||||||
<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>
|
||||||
|
<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>
|
||||||
|
</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'),
|
||||||
list: ['智能算法', '图层服务', '开发组件', '业务组件'],
|
list: ['智能算法', '图层服务', '开发组件', '业务组件'],
|
||||||
imgBG: require('../../../assets/menu/imgBG.png'),
|
imgBG: require('../../../assets/menu/imgBG.png'),
|
||||||
width: '124px',
|
width: '124px',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '应用资源',
|
name: '应用资源',
|
||||||
img: require('@/assets/menu/service-application.png'),
|
img: require('@/assets/menu/service-application.png'),
|
||||||
list: [
|
list: [
|
||||||
'办公系统',
|
'办公系统',
|
||||||
'业务系统',
|
'业务系统',
|
||||||
'门户网站',
|
'门户网站',
|
||||||
'大屏看板',
|
'大屏看板',
|
||||||
'小程序',
|
'小程序',
|
||||||
'公众号',
|
'公众号',
|
||||||
],
|
],
|
||||||
imgBG: require('../../../assets/menu/imgBG.png'),
|
imgBG: require('../../../assets/menu/imgBG.png'),
|
||||||
width: '124px',
|
width: '124px',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '基础设施',
|
name: '基础设施',
|
||||||
img: require('@/assets/menu/service-infrastructure.png'),
|
img: require('@/assets/menu/service-infrastructure.png'),
|
||||||
list: ['视频资源', '云资源', '感知资源'],
|
list: ['视频资源', '云资源', '感知资源'],
|
||||||
imgBG: require('../../../assets/menu/imgBG.png'),
|
imgBG: require('../../../assets/menu/imgBG.png'),
|
||||||
width: '124px',
|
width: '124px',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '数据资源',
|
name: '数据资源',
|
||||||
img: require('@/assets/menu/service-data.png'),
|
img: require('@/assets/menu/service-data.png'),
|
||||||
list: ['政务信息资源'],
|
list: ['政务信息资源'],
|
||||||
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'),
|
||||||
btnText: '立即上架',
|
btnText: '立即上架',
|
||||||
className: 'shelves-img',
|
className: 'shelves-img',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '能力申请',
|
name: '能力申请',
|
||||||
bgImg: require('../../../assets/menu/apply.png'),
|
bgImg: require('../../../assets/menu/apply.png'),
|
||||||
btnText: '立即申请',
|
btnText: '立即申请',
|
||||||
className: 'apply-img',
|
className: 'apply-img',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '需求发布',
|
name: '需求发布',
|
||||||
bgImg: require('../../../assets/menu/demand.png'),
|
bgImg: require('../../../assets/menu/demand.png'),
|
||||||
btnText: '立即发布',
|
btnText: '立即发布',
|
||||||
className: 'demand-img',
|
className: 'demand-img',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '资源下架',
|
name: '资源下架',
|
||||||
bgImg: require('../../../assets/menu/down.png'),
|
bgImg: require('../../../assets/menu/down.png'),
|
||||||
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 == '') {
|
||||||
message.error('请选择组件类型！')
|
message.error('请选择组件类型！')
|
||||||
return
|
return
|
||||||
} else if (
|
} else if (
|
||||||
componentTypeValue.value === '智能算法' ||
|
componentTypeValue.value === '智能算法' ||
|
||||||
componentTypeValue.value === '开发组件' ||
|
componentTypeValue.value === '开发组件' ||
|
||||||
componentTypeValue.value === '业务组件' ||
|
componentTypeValue.value === '业务组件' ||
|
||||||
componentTypeValue.value === '图层服务'
|
componentTypeValue.value === '图层服务'
|
||||||
) {
|
) {
|
||||||
snum.value = {
|
|
||||||
abilityToType: abilityToTypeFunctionData.value,
|
|
||||||
componentTypeValue: componentTypeValue.value,
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
message.error('功能开发中！')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
snum.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({
|
const applypage = router.resolve({
|
||||||
path: '/nenglishangjia', // 跳转的页面路由
|
path: '/nenglishangjia', // 跳转的页面路由
|
||||||
query: snum.value,
|
query: snum.value,
|
||||||
})
|
})
|
||||||
window.open(applypage.href, '_blank')
|
window.open(applypage.href, '_blank')
|
||||||
visible.value = false
|
visible.value = false
|
||||||
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({
|
const newpage = router.resolve({
|
||||||
path: '/addApplication', // 跳转的页面路由
|
path: '/DetailsPageconetent',
|
||||||
})
|
query: {
|
||||||
window.open(newpage.href, '_blank')
|
select: '组件服务',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
window.location.href = newpage.href
|
||||||
} else if (data === '需求发布') {
|
} else if (data === '需求发布') {
|
||||||
const newpage = router.resolve({
|
const newpage = router.resolve({
|
||||||
path: '/DetailsPageconetent',
|
path: '/addApplication', // 跳转的页面路由
|
||||||
query: {
|
})
|
||||||
select: '组件服务',
|
window.open(newpage.href, '_blank')
|
||||||
},
|
|
||||||
})
|
|
||||||
window.location.href = newpage.href
|
|
||||||
} 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({
|
||||||
path: '/personalCenter',
|
path: '/personalCenter',
|
||||||
})
|
})
|
||||||
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%;
|
||||||
|
|
@ -262,138 +287,138 @@ watch(abilityToTypeFunctionData, () => {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
||||||
.ant-radio-inner {
|
.ant-radio-inner {
|
||||||
height: 0.16rem;
|
height: 0.16rem;
|
||||||
width: 0.16rem;
|
width: 0.16rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-radio-inner::after {
|
.ant-radio-inner::after {
|
||||||
background-color: unset;
|
background-color: unset;
|
||||||
background: url('~@/assets/personalCenter/xuanzhong.png') no-repeat;
|
background: url('~@/assets/personalCenter/xuanzhong.png') no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-modal-content {
|
.ant-modal-content {
|
||||||
border-radius: 0.1rem;
|
border-radius: 0.1rem;
|
||||||
|
|
||||||
.ability-to-type,
|
.ability-to-type,
|
||||||
.component-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;
|
display: flex;
|
||||||
margin-top: 0.2rem;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
.title {
|
.ability-to-type-down {
|
||||||
white-space: nowrap;
|
background: #0087ff;
|
||||||
margin-right: 0.2rem;
|
color: #fff;
|
||||||
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 {
|
.ant-modal-title {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-modal-footer {
|
.ant-modal-footer {
|
||||||
border: 0;
|
border: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-bottom: 0.2rem;
|
padding-bottom: 0.2rem;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
margin-right: 0.2rem;
|
margin-right: 0.2rem;
|
||||||
border-radius: 0.08rem;
|
border-radius: 0.08rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.showBg {
|
.showBg {
|
||||||
height: 0.24rem;
|
height: 0.24rem;
|
||||||
width: 0.24rem;
|
width: 0.24rem;
|
||||||
background: url('~@/assets/home/shenqing.png') no-repeat;
|
background: url('~@/assets/home/shenqing.png') no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
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 {
|
||||||
padding: 20px 0;
|
padding: 20px 0;
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.line {
|
.line {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 3px;
|
height: 3px;
|
||||||
background: #0058e1;
|
background: #0058e1;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.line-white {
|
.line-white {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-white {
|
.text-white {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
|
|
@ -406,135 +431,135 @@ watch(abilityToTypeFunctionData, () => {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&: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%;
|
||||||
background-image: url('../../../assets/menu/service.png');
|
background-image: url('../../../assets/menu/service.png');
|
||||||
|
|
||||||
.list-box {
|
.list-box {
|
||||||
width: 1560px;
|
width: 1560px;
|
||||||
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%;
|
||||||
background-image: url('../../../assets/menu/callus.png');
|
background-image: url('../../../assets/menu/callus.png');
|
||||||
|
|
||||||
.list-box {
|
.list-box {
|
||||||
width: 1560px;
|
width: 1560px;
|
||||||
// height: 350px;
|
// height: 350px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
p:nth-child(1) {
|
p:nth-child(1) {
|
||||||
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;
|
||||||
|
|
||||||
.list-item {
|
.list-item {
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
width: 310px;
|
width: 310px;
|
||||||
height: 356px;
|
height: 356px;
|
||||||
background: rgba(23, 85, 177, 0.43);
|
background: rgba(23, 85, 177, 0.43);
|
||||||
border: 1px solid #74a9f8;
|
border: 1px solid #74a9f8;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
.item-name {
|
.item-name {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 20px 0 10px 0;
|
padding: 20px 0 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.name-box {
|
.name-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-v {
|
.item-v {
|
||||||
width: 124px;
|
width: 124px;
|
||||||
height: 74px;
|
height: 74px;
|
||||||
line-height: 74px;
|
line-height: 74px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 0 0 20px;
|
margin: 0 0 20px;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-v:nth-child(2n) {
|
.item-v:nth-child(2n) {
|
||||||
margin-left: 16px;
|
margin-left: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// .item-v:last-child {
|
// .item-v:last-child {
|
||||||
// width: 200px;
|
// width: 200px;
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue