|
@@ -1,29 +1,56 @@
|
|
|
<template>
|
|
|
<div :class="['linkSectorBox', { buildingBorder: this.$store.state.template.previewStatus == false }]">
|
|
|
- <div class="linkSectorItem bg1">
|
|
|
- <div class="linkSectorItemTitle">人员查询</div>
|
|
|
- <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
|
|
|
- <div class="linkSectorItemBtn">点击查询</div>
|
|
|
+ <!--
|
|
|
+ 注意 ,该组件可以在首页与频道页中通用
|
|
|
+ -->
|
|
|
+ <div v-if="this.$store.state.template.editWebsiteClass==1" class="linkSectorStyle1Box">
|
|
|
+ <div class="linkSectorItem bg1">
|
|
|
+ <div class="linkSectorItemImg"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250709/1752026862529548.png" /></div>
|
|
|
+ <div class="linkSectorItemTitle">人员查询</div>
|
|
|
+ </div>
|
|
|
+ <div class="linkSectorItem bg1">
|
|
|
+ <div class="linkSectorItemImg"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250709/1752026870493018.png" /></div>
|
|
|
+ <div class="linkSectorItemTitle">车辆查询</div>
|
|
|
+ </div>
|
|
|
+ <div class="linkSectorItem bg1">
|
|
|
+ <div class="linkSectorItemImg"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250709/1752026884699420.png" /></div>
|
|
|
+ <div class="linkSectorItemTitle">调研选题</div>
|
|
|
+ </div>
|
|
|
+ <div class="linkSectorItem bg1">
|
|
|
+ <div class="linkSectorItemImg"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250709/1752026896833808.png" /></div>
|
|
|
+ <div class="linkSectorItemTitle">地市中心</div>
|
|
|
+ </div>
|
|
|
+ <div class="linkSectorItem bg1">
|
|
|
+ <div class="linkSectorItemImg"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250709/175202690385632.png" /></div>
|
|
|
+ <div class="linkSectorItemTitle">介绍信查询</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="linkSectorItem bg2">
|
|
|
- <div class="linkSectorItemTitle">车辆查询</div>
|
|
|
- <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
|
|
|
- <div class="linkSectorItemBtn">点击查询</div>
|
|
|
- </div>
|
|
|
- <div class="linkSectorItem bg3">
|
|
|
- <div class="linkSectorItemTitle">调研选题</div>
|
|
|
- <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
|
|
|
- <div class="linkSectorItemBtn">点击查询</div>
|
|
|
- </div>
|
|
|
- <div class="linkSectorItem bg4">
|
|
|
- <div class="linkSectorItemTitle">地市中心</div>
|
|
|
- <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
|
|
|
- <div class="linkSectorItemBtn">点击查询</div>
|
|
|
- </div>
|
|
|
- <div class="linkSectorItem bg5">
|
|
|
- <div class="linkSectorItemTitle">介绍信查询</div>
|
|
|
- <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
|
|
|
- <div class="linkSectorItemBtn">点击查询</div>
|
|
|
+ <div v-if="this.$store.state.template.editWebsiteClass==2" class="linkSectorStyle2Box">
|
|
|
+ <div class="linkSectorItem bg1">
|
|
|
+ <div class="linkSectorItemTitle">人员查询</div>
|
|
|
+ <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
|
|
|
+ <div class="linkSectorItemBtn">点击查询</div>
|
|
|
+ </div>
|
|
|
+ <div class="linkSectorItem bg2">
|
|
|
+ <div class="linkSectorItemTitle">车辆查询</div>
|
|
|
+ <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
|
|
|
+ <div class="linkSectorItemBtn">点击查询</div>
|
|
|
+ </div>
|
|
|
+ <div class="linkSectorItem bg3">
|
|
|
+ <div class="linkSectorItemTitle">调研选题</div>
|
|
|
+ <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
|
|
|
+ <div class="linkSectorItemBtn">点击查询</div>
|
|
|
+ </div>
|
|
|
+ <div class="linkSectorItem bg4">
|
|
|
+ <div class="linkSectorItemTitle">地市中心</div>
|
|
|
+ <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
|
|
|
+ <div class="linkSectorItemBtn">点击查询</div>
|
|
|
+ </div>
|
|
|
+ <div class="linkSectorItem bg5">
|
|
|
+ <div class="linkSectorItemTitle">介绍信查询</div>
|
|
|
+ <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
|
|
|
+ <div class="linkSectorItemBtn">点击查询</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -61,6 +88,51 @@ export default {
|
|
|
border: 2px dashed #999;
|
|
|
}
|
|
|
.linkSectorBox {
|
|
|
+ width: 1200px;
|
|
|
+ height: 230px;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ box-sizing: content-box;
|
|
|
+}
|
|
|
+//样式1 start ---------------------------------------->
|
|
|
+.linkSectorStyle1Box {
|
|
|
+ width: 1200px;
|
|
|
+ height: 230px;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .linkSectorItem {
|
|
|
+ width: 210px;
|
|
|
+ height: 230px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding:30px;
|
|
|
+ background: #F9FAFB;
|
|
|
+ cursor: pointer;
|
|
|
+ .linkSectorItemImg {
|
|
|
+ text-align: center;
|
|
|
+ border-bottom:1px solid #D3D3D3;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ height: 85px;
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ margin: 20px auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .linkSectorItemTitle {
|
|
|
+ font-size: 16px;
|
|
|
+ color:#333333;
|
|
|
+ text-align: center;
|
|
|
+ padding-top:30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+//样式1 end ---------------------------------------->
|
|
|
+
|
|
|
+//样式2 start ---------------------------------------->
|
|
|
+.linkSectorStyle2Box {
|
|
|
width: 1200px;
|
|
|
height: 230px;
|
|
|
margin: 0 auto;
|
|
@@ -71,7 +143,8 @@ export default {
|
|
|
width: 210px;
|
|
|
height: 230px;
|
|
|
box-sizing: border-box;
|
|
|
- padding:70px 30px ;
|
|
|
+ padding:70px 30px;
|
|
|
+ cursor: pointer;
|
|
|
.linkSectorItemTitle {
|
|
|
font-size:16px;
|
|
|
color:#333333;
|
|
@@ -101,5 +174,5 @@ export default {
|
|
|
.bg4 {background: url(http://img.bjzxtw.org.cn/pre/image/png/20250626/1750922744808118.png) no-repeat center center;}
|
|
|
.bg5 {background: url(http://img.bjzxtw.org.cn/pre/image/png/20250626/1750922748574101.png) no-repeat center center;}
|
|
|
}
|
|
|
-
|
|
|
+//样式2 end ---------------------------------------->
|
|
|
</style>
|