我的应用增加数字经济页面
qinzhenpen
12 months ago
|
After Width: | Height: | Size: 397 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 53 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 117 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 8.9 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 9.6 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 8.9 KiB |
|
After Width: | Height: | Size: 117 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 9.5 KiB |
|
After Width: | Height: | Size: 9.6 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 115 KiB |
|
After Width: | Height: | Size: 786 B |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 176 KiB |
@ -0,0 +1,39 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
|
||||
<filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="配置面板" width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)">
|
||||
<g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)">
|
||||
<g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
|
||||
<mask id="mask-3" fill="white">
|
||||
<use xlink:href="#path-2"></use>
|
||||
</mask>
|
||||
<g id="Rectangle-18">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
|
||||
<use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
|
||||
</g>
|
||||
<rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
|
||||
<rect id="Rectangle-18" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
@ -0,0 +1,39 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
|
||||
<filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="配置面板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="setting-copy-2" transform="translate(-1254.000000, -136.000000)">
|
||||
<g id="Group-8" transform="translate(1167.000000, 0.000000)">
|
||||
<g id="Group-5" filter="url(#filter-1)" transform="translate(89.000000, 137.000000)">
|
||||
<mask id="mask-3" fill="white">
|
||||
<use xlink:href="#path-2"></use>
|
||||
</mask>
|
||||
<g id="Rectangle-18">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
|
||||
<use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
|
||||
</g>
|
||||
<rect id="Rectangle-18" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
|
||||
<rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 831 KiB |
|
After Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 137 KiB |
|
After Width: | Height: | Size: 79 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 83 KiB |
|
After Width: | Height: | Size: 50 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 8.9 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 302 KiB |
|
After Width: | Height: | Size: 60 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 709 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 8.9 KiB |
|
After Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 112 KiB |
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 531 KiB |
|
After Width: | Height: | Size: 8.6 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 620 B |
@ -0,0 +1,692 @@
|
||||
<template>
|
||||
<div class="MyAppsEconomics">
|
||||
<div class="home-content">
|
||||
<div class="module">
|
||||
<div class="module-name"><span>数字化治理</span></div>
|
||||
<div class="module-content">
|
||||
<div
|
||||
class="module-item"
|
||||
v-for="item in GovernanceList"
|
||||
:key="item.id"
|
||||
@click="goUrl(item.redirectUrl, item.authorityInfo, '4')"
|
||||
:class="{ 'is-dispaly': item.authorityInfo !== 1 }"
|
||||
>
|
||||
<img :src="require(`../../images/Economics/${item.img}`)" alt="" />
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="module module2">
|
||||
<div class="left">
|
||||
<div class="module-name"><span>产业数字化</span></div>
|
||||
<div class="left-content">
|
||||
<div class="item">
|
||||
<div class="title">
|
||||
<span>数字金融</span>
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
class="Finance-item"
|
||||
v-for="item in FinanceList"
|
||||
:key="item"
|
||||
@click="goUrl(item.redirectUrl, item.authorityInfo, '2')"
|
||||
:class="{ 'is-dispaly': item.authorityInfo !== 1 }"
|
||||
>
|
||||
<img :src="require(`../../images/Economics/${item.img}`)" alt="" />
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="title">
|
||||
<span>数字贸易</span>
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
class="Finance-item"
|
||||
v-for="item in TradeList"
|
||||
:key="item"
|
||||
@click="goUrl(item.redirectUrl, item.authorityInfo, '2')"
|
||||
:class="{ 'is-dispaly': item.authorityInfo !== 1 }"
|
||||
>
|
||||
<img :src="require(`../../images/Economics/${item.img}`)" alt="" />
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item3">
|
||||
<img src="../../images/Economics/三层.png" alt="" />
|
||||
<div class="Industry">
|
||||
<div
|
||||
v-for="item in digitalizationIndustry"
|
||||
:key="item"
|
||||
@click="goUrl(item.redirectUrl, item.authorityInfo, '2')"
|
||||
:class="{ 'is-dispaly': item.authorityInfo !== 1 }"
|
||||
>
|
||||
{{ item.nameInfo }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<img src="../../images/Economics/logo1.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="module module2 module3">
|
||||
<div class="left">
|
||||
<div class="module-name"><span>数字产业化</span></div>
|
||||
<div class="left-content">
|
||||
<div
|
||||
class="Industrialization-item"
|
||||
v-for="item in industrializationList"
|
||||
:key="item"
|
||||
@click="goUrl(item.redirectUrl, item.authorityInfo, '1')"
|
||||
:class="{ 'is-dispaly': item.authorityInfo !== 1 }"
|
||||
>
|
||||
<img :src="require(`../../images/Economics/${item.img}`)" alt="" />
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<img src="../../images/Economics/logo2.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="module module2 module3 module4">
|
||||
<div class="left">
|
||||
<div class="module-name"><span>数据价值化</span></div>
|
||||
<div class="left-content">
|
||||
<div
|
||||
class="Value-item"
|
||||
v-for="item in ValueList"
|
||||
:key="item"
|
||||
@click="goUrl(item.redirectUrl, item.authorityInfo, '3')"
|
||||
:class="{ 'is-dispaly': item.authorityInfo !== 1 }"
|
||||
>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<img src="../../images/Economics/logo3.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "",
|
||||
data() {
|
||||
return {
|
||||
GovernanceList: [
|
||||
{
|
||||
name: "碳金融",
|
||||
img: "1-2.png",
|
||||
redirectUrl: "",
|
||||
authorityInfo: "",
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
name: "宏观调度",
|
||||
img: "1-1.png",
|
||||
redirectUrl: "",
|
||||
authorityInfo: "",
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
name: "数字安全",
|
||||
img: "1-3.png",
|
||||
redirectUrl: "",
|
||||
authorityInfo: "",
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
name: "金融治理",
|
||||
img: "1-4.png",
|
||||
redirectUrl: "",
|
||||
authorityInfo: "",
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
name: "数字政务",
|
||||
img: "1-5.png",
|
||||
redirectUrl: "",
|
||||
authorityInfo: "",
|
||||
id: 3
|
||||
}
|
||||
],
|
||||
FinanceList: [
|
||||
{
|
||||
name: "数字营销",
|
||||
img: "2-1.png",
|
||||
redirectUrl: "",
|
||||
authorityInfo: "",
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
name: "数字征信",
|
||||
img: "2-2.png",
|
||||
redirectUrl: "",
|
||||
authorityInfo: "",
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
name: "数字支付",
|
||||
img: "2-3.png",
|
||||
redirectUrl: "",
|
||||
authorityInfo: "",
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
name: "数字银行",
|
||||
img: "2-4.png",
|
||||
redirectUrl: "",
|
||||
authorityInfo: "",
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
name: "数字证券",
|
||||
img: "2-5.png",
|
||||
redirectUrl: "",
|
||||
authorityInfo: "",
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
name: "数字证券",
|
||||
img: "2-6.png",
|
||||
redirectUrl: "",
|
||||
authorityInfo: "",
|
||||
id: 3
|
||||
}
|
||||
],
|
||||
TradeList: [
|
||||
{
|
||||
name: "数字技术贸易",
|
||||
img: "2-7.png",
|
||||
redirectUrl: "",
|
||||
authorityInfo: "",
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
name: "数字产品贸易",
|
||||
img: "2-9.png",
|
||||
redirectUrl: "",
|
||||
authorityInfo: "",
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
name: "数字服务贸易",
|
||||
img: "2-8.png",
|
||||
redirectUrl: "",
|
||||
authorityInfo: "",
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
name: "数据贸易",
|
||||
img: "2-10.png",
|
||||
redirectUrl: "",
|
||||
authorityInfo: "",
|
||||
id: 2
|
||||
}
|
||||
],
|
||||
industrializationList: [
|
||||
{
|
||||
name: "5G",
|
||||
img: "3-1.png",
|
||||
redirectUrl: "",
|
||||
authorityInfo: "",
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
name: "云计算",
|
||||
img: "3-3.png",
|
||||
redirectUrl: "",
|
||||
authorityInfo: "",
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
name: "大数据",
|
||||
img: "3-4.png",
|
||||
redirectUrl: "",
|
||||
authorityInfo: "",
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
name: "人工智能",
|
||||
img: "3-2.png",
|
||||
redirectUrl: "",
|
||||
authorityInfo: "",
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
name: "区块链",
|
||||
img: "3-5.png",
|
||||
redirectUrl: "",
|
||||
authorityInfo: "",
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
name: "物联网",
|
||||
img: "3-6.png",
|
||||
redirectUrl: "",
|
||||
authorityInfo: "",
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
name: "虚拟现实",
|
||||
img: "3-7.png",
|
||||
redirectUrl: "",
|
||||
authorityInfo: "",
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
name: "工业互联网",
|
||||
img: "3-8.png",
|
||||
redirectUrl: "",
|
||||
authorityInfo: "",
|
||||
id: 3
|
||||
}
|
||||
],
|
||||
digitalizationIndustry: [],
|
||||
ValueList: [
|
||||
{
|
||||
name: "数据采集",
|
||||
img: "4-1.png",
|
||||
redirectUrl: "",
|
||||
authorityInfo: "",
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
name: "数据确权",
|
||||
img: "4-2.png",
|
||||
redirectUrl: "",
|
||||
authorityInfo: "",
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
name: "数据定价",
|
||||
img: "4-3.png",
|
||||
redirectUrl: "",
|
||||
authorityInfo: "",
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
name: "数据交易",
|
||||
img: "4-4.png",
|
||||
redirectUrl: "",
|
||||
authorityInfo: "",
|
||||
id: 2
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getinfo()
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
goUrl(url,authority,module2){
|
||||
if(authority == 1){
|
||||
window.open(`${url}&module=${module2}`)
|
||||
}else{
|
||||
return
|
||||
}
|
||||
},
|
||||
getinfo(){
|
||||
this.$get("/api/resourcesApplication/logicPicture.json",{token:this.$getToken()}).then((res) => {
|
||||
this.GovernanceList.forEach((item,index)=>{
|
||||
item.redirectUrl=res.data[0].moduleInfoDTOList[index].redirectUrl
|
||||
item.authorityInfo=res.data[0].moduleInfoDTOList[index].authorityInfo
|
||||
})
|
||||
// console.log( res.data[1].moduleInfoDTOList,"res.data[1].moduleInfoDTOList");
|
||||
this.FinanceList.forEach((item,index)=>{
|
||||
item.name=res.data[1].moduleInfoDTOList[index].nameInfo
|
||||
item.redirectUrl=res.data[1].moduleInfoDTOList[index].redirectUrl
|
||||
item.authorityInfo=res.data[1].moduleInfoDTOList[index].authorityInfo
|
||||
// digitalizationIndustry.value[index].nameInfo=res.data[1].moduleInfoDTOList.nameInfo
|
||||
})
|
||||
res.data[1].moduleInfoDTOList.forEach((item,index)=>{
|
||||
if(item.order>10 && item.order<14){
|
||||
this.digitalizationIndustry.push({
|
||||
nameInfo:item.nameInfo,
|
||||
redirectUrl:item.redirectUrl,
|
||||
authorityInfo:item.authorityInfo
|
||||
})
|
||||
}
|
||||
if(item.order>6 && item.order<11){
|
||||
this.TradeList[index-6].name=item.nameInfo
|
||||
this.TradeList[index-6].redirectUrl=item.redirectUrl
|
||||
this.TradeList[index-6].authorityInfo=item.authorityInfo
|
||||
}
|
||||
})
|
||||
|
||||
this.industrializationList.forEach((item,index)=>{
|
||||
item.name=res.data[2].moduleInfoDTOList[index].nameInfo
|
||||
item.redirectUrl=res.data[2].moduleInfoDTOList[index].redirectUrl
|
||||
item.authorityInfo=res.data[2].moduleInfoDTOList[index].authorityInfo
|
||||
})
|
||||
this.ValueList.forEach((item,index)=>{
|
||||
item.name=res.data[3].moduleInfoDTOList[index].nameInfo
|
||||
item.redirectUrl=res.data[3].moduleInfoDTOList[index].redirectUrl
|
||||
item.authorityInfo=res.data[3].moduleInfoDTOList[index].authorityInfo
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.MyAppsEconomics {
|
||||
// width: 100%;
|
||||
height: calc(100% - 95px);
|
||||
background: linear-gradient(0deg, #ffffff 0%, #f4f6fe 100%);
|
||||
box-shadow: 0px 3px 15px 1px rgba(7, 9, 128, 0.22);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
.home-content {
|
||||
.module {
|
||||
margin-top: 16px;
|
||||
height: 152px;
|
||||
background: url("../../images/Economics/1层.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
padding: 0px 20px;
|
||||
// 阴影
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.06);
|
||||
// background: transparent;
|
||||
.module-name {
|
||||
height: 27px;
|
||||
background: #9755ae;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
|
||||
line-height: 27px;
|
||||
font-size: 20px;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FEFEFF;
|
||||
}
|
||||
.module-content{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 106px;
|
||||
|
||||
.module-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 8px;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #9755ae;
|
||||
}
|
||||
img {
|
||||
width: 165px;
|
||||
height: 90px;
|
||||
}
|
||||
div {
|
||||
font-size: 19px;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #001781;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.module2{
|
||||
display: flex;
|
||||
padding: 9px 14px 5px 14px;
|
||||
background: url("../../images/Economics/2层(1).png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
.left{
|
||||
position: relative;
|
||||
padding: 10px 13px;
|
||||
width: calc(100% - 341px);
|
||||
background:url('../../images/Economics/圆角矩形1.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
&::before{
|
||||
content: "";
|
||||
width: 50px;
|
||||
height: 113px;
|
||||
background:url('../../images/Economics/引线蓝.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 9.9%;
|
||||
right: -3.7%;
|
||||
}
|
||||
.module-name{
|
||||
background-color: #5B5BEA;
|
||||
}
|
||||
.left-content{
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 3px;
|
||||
.item{
|
||||
width: 519px;
|
||||
height: 93px;
|
||||
background: #DEDFFF;
|
||||
border: 1px solid #7B7CEF;
|
||||
border-radius: 6px;
|
||||
.title{
|
||||
height: 22px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
span{
|
||||
display: inline-block;
|
||||
width: 202px;
|
||||
height: 22px;
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
background: url("../../images/Economics/多边形.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-size: 16px;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FBFCFF;
|
||||
};
|
||||
|
||||
}
|
||||
.item-content{
|
||||
height: 68px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap:30px;
|
||||
.Finance-item{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
// 鼠標小手
|
||||
cursor: pointer;
|
||||
img{
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
div{
|
||||
font-size: 13px;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #001781;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item3{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width:231px;
|
||||
height: 93px;
|
||||
// background-color: pink;
|
||||
img{
|
||||
width: 150px;
|
||||
}
|
||||
.Industry{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
div{
|
||||
width: 71px;
|
||||
height: 19px;
|
||||
line-height: 19px;
|
||||
background: #383AED;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
// 鼠標小手
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right{
|
||||
width: 341px;
|
||||
height: 100%;
|
||||
padding-left: 50px;
|
||||
// background-color: pink;
|
||||
img{
|
||||
padding: 30px 27px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.module3{
|
||||
background: url("../../images/Economics/三层(1).png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
.left{
|
||||
background:url('../../images/Economics/虚线红.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
&::before{
|
||||
content: "";
|
||||
width: 50px;
|
||||
height: 113px;
|
||||
background:url('../../images/Economics/引线红.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 9.9%;
|
||||
right: -3.7%;
|
||||
}
|
||||
.module-name{
|
||||
background: #EB6080;
|
||||
}
|
||||
.left-content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 5px;
|
||||
gap: 38px;
|
||||
.Industrialization-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
img{
|
||||
width: 113px;
|
||||
height: 71px;
|
||||
}
|
||||
span{
|
||||
font-size: 15px;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 600;
|
||||
color: #001781;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.right{
|
||||
width: 341px;
|
||||
height: 100%;
|
||||
padding-left: 50px;
|
||||
// background-color: pink;
|
||||
img{
|
||||
padding: 30px 27px;
|
||||
width: 258px;
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.module4{
|
||||
background: url("../../images/Economics/四层(1).png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
.left{
|
||||
background:url('../../images/Economics/虚线绿.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
&::before{
|
||||
content: "";
|
||||
width: 50px;
|
||||
height: 113px;
|
||||
background:url('../../images/Economics/引线绿.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 9.9%;
|
||||
right: -3.7%;
|
||||
}
|
||||
.module-name{
|
||||
background: #25C39D;
|
||||
}
|
||||
.left-content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 5px;
|
||||
gap: 38px;
|
||||
.Value-item{
|
||||
width: 262px;
|
||||
height: 69px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background:url('../../images/Economics/4-1.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
span{
|
||||
margin-left: 50px;
|
||||
font-size: 22px;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #001781;
|
||||
}
|
||||
}
|
||||
.Value-item:nth-child(2){
|
||||
background:url('../../images/Economics/4-2.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.Value-item:nth-child(3){
|
||||
background:url('../../images/Economics/4-3.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.Value-item:nth-child(4){
|
||||
background:url('../../images/Economics/4-4.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right{
|
||||
width: 341px;
|
||||
height: 100%;
|
||||
padding-left: 50px;
|
||||
// background-color: pink;
|
||||
img{
|
||||
padding: 30px 27px;
|
||||
width: 258px;
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.is-dispaly{
|
||||
// 禁用
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||