Skip to content

M
mancheng_code
Commit 3799bbd5 by heshihao
Options

feat: 首页添加项目弹窗

parent 7f05541f
Showing with 256 additions and 3 deletions
src/views/index/index_copy.vue
...@@ -869,18 +869,18 @@ ...@@ -869,18 +869,18 @@
</div> </div>
<div class="image-container"> <div class="image-container">
<div class="img-container"> <div class="img-container" @click="showAlertModal(1)">
<img src="@/assets/images/index/rotate-green.png" alt="" class="rotate-img" /> <img src="@/assets/images/index/rotate-green.png" alt="" class="rotate-img" />
<img src="@/assets/images/index/main-paper.png" alt="" class="title-img" /> <img src="@/assets/images/index/main-paper.png" alt="" class="title-img" />
<div class="text-container">主导产业(10个)</div> <div class="text-container">主导产业(10个)</div>
</div> </div>
<div class="img-container"> <div class="img-container" @click="showAlertModal(2)">
<img src="@/assets/images/index/rotate-blue.png" alt="" class="rotate-img" /> <img src="@/assets/images/index/rotate-blue.png" alt="" class="rotate-img" />
<img src="@/assets/images/index/main-jiaotong.png" alt="" class="title-img" /> <img src="@/assets/images/index/main-jiaotong.png" alt="" class="title-img" />
<div class="text-container2">战略性新兴产业(5个)</div> <div class="text-container2">战略性新兴产业(5个)</div>
</div> </div>
<div class="img-container"> <div class="img-container" @click="showAlertModal(1)">
<img src="@/assets/images/index/rotate-green.png" alt="" class="rotate-img" /> <img src="@/assets/images/index/rotate-green.png" alt="" class="rotate-img" />
<img src="@/assets/images/index/main-dianli.png" alt="" class="title-img" /> <img src="@/assets/images/index/main-dianli.png" alt="" class="title-img" />
<div class="text-container">主导产业(10个)</div> <div class="text-container">主导产业(10个)</div>
...@@ -944,6 +944,47 @@ ...@@ -944,6 +944,47 @@
<div class="alert-bar" ref="chart_alert_bar"></div> <div class="alert-bar" ref="chart_alert_bar"></div>
</div> </div>
</div> </div>
<div class="box-alert box-alert-modal" v-if="isAlertModal">
<div class="table-container">
<img
@click.stop="isAlertModal = false"
class="close-img"
src="~@/assets/images/cockpit/icon-alert-close.png"
alt=""
/>
<div class="table-title">{{ tableTitle }}</div>
<div class="table-box">
<div class="table-header">
<div class="table-box-index">序号</div>
<div class="table-box-name">项目名称</div>
<div class="table-box-phase">所处阶段</div>
<div class="table-box-situation">项目情况</div>
</div>
<div
v-for="(item, index) in projectData"
:key="index"
class="table-body"
:style="{ background: index % 2 == 0 ? 'rgba(19, 43, 75,0.8)' : 'rgba(27, 55, 96,0.8)' }"
>
<div class="table-box-index">{{ index + 1 }}</div>
<div class="table-box-name">{{ item.name }}</div>
<div class="table-box-phase">{{ item.phase }}</div>
<div class="table-box-situation">{{ item.situation }}</div>
</div>
</div>
<div class="pagination-box h-pagination">
<div class="prev-btn">
<img src="~@/assets/images/cockpit/icon-left.png" />
</div>
<div class="page-btn active">
1
</div>
<div class="next-btn">
<img src="~@/assets/images/cockpit/icon-right.png" />
</div>
</div>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
...@@ -1029,6 +1070,61 @@ export default { ...@@ -1029,6 +1070,61 @@ export default {
router: "resources", router: "resources",
}, },
], ],
isAlertModal: false,
tableTitle: "",
projectData: [
{
name: "华北XXXXXX纸张加工中心项目",
phase: "洽谈阶段",
situation: "项目占地约500亩，总投资额达10亿元人民币。该项目是基于国家对环保造纸产业的大力支持和市...",
},
{
name: "华北XXXXXX纸张加工中心项目",
phase: "洽谈阶段",
situation: "项目占地约500亩，总投资额达10亿元人民币。该项目是基于国家对环保造纸产业的大力支持和市...",
},
{
name: "华北XXXXXX纸张加工中心项目",
phase: "洽谈阶段",
situation: "项目占地约500亩，总投资额达10亿元人民币。该项目是基于国家对环保造纸产业的大力支持和市...",
},
{
name: "华北XXXXXX纸张加工中心项目",
phase: "洽谈阶段",
situation: "项目占地约500亩，总投资额达10亿元人民币。该项目是基于国家对环保造纸产业的大力支持和市...",
},
{
name: "华北XXXXXX纸张加工中心项目",
phase: "洽谈阶段",
situation: "项目占地约500亩，总投资额达10亿元人民币。该项目是基于国家对环保造纸产业的大力支持和市...",
},
{
name: "华北XXXXXX纸张加工中心项目",
phase: "洽谈阶段",
situation: "项目占地约500亩，总投资额达10亿元人民币。该项目是基于国家对环保造纸产业的大力支持和市...",
},
{
name: "华北XXXXXX纸张加工中心项目",
phase: "洽谈阶段",
situation: "项目占地约500亩，总投资额达10亿元人民币。该项目是基于国家对环保造纸产业的大力支持和市...",
},
{
name: "华北XXXXXX纸张加工中心项目",
phase: "洽谈阶段",
situation: "项目占地约500亩，总投资额达10亿元人民币。该项目是基于国家对环保造纸产业的大力支持和市...",
},
{
name: "华北XXXXXX纸张加工中心项目",
phase: "洽谈阶段",
situation: "项目占地约500亩，总投资额达10亿元人民币。该项目是基于国家对环保造纸产业的大力支持和市...",
},
{
name: "华北XXXXXX纸张加工中心项目",
phase: "洽谈阶段",
situation: "项目占地约500亩，总投资额达10亿元人民币。该项目是基于国家对环保造纸产业的大力支持和市...",
},
],
}; };
}, },
components: { components: {
...@@ -2783,6 +2879,14 @@ export default { ...@@ -2783,6 +2879,14 @@ export default {
this.$router.push({ name }); this.$router.push({ name });
} }
}, },
showAlertModal(type) {
this.isAlertModal = true;
if (type == 1) {
this.tableTitle = "主导产业项目";
} else {
this.tableTitle = "造纸及纸制品产业项目";
}
},
}, },
}; };
</script> </script>
...@@ -4172,12 +4276,161 @@ span.san-right { ...@@ -4172,12 +4276,161 @@ span.san-right {
position: absolute; position: absolute;
right: 50px; right: 50px;
top: 35px; top: 35px;
cursor: pointer;
} }
.alert-bar { .alert-bar {
margin: 0 auto; margin: 0 auto;
width: 1218px; width: 1218px;
height: 270px; height: 270px;
} }
.table-container {
width: 1419px;
height: 782px;
background: url("~@/assets/images/cockpit/bg-xmtc.png") no-repeat;
background-size: 100% 100%;
position: relative;
left: 250px;
top: 90px;
.table-title {
position: absolute;
left: 608px;
top: 60px;
font-size: 20px;
font-family: JiangChengXieHei-900W;
font-weight: normal;
color: #ffffff;
text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
background: linear-gradient(
0deg,
rgba(14, 197, 236, 1) 0%,
rgba(64, 181, 248, 1) 0%,
rgba(239, 252, 254, 1) 58.7646484375%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.table-box {
width: 1255px;
height: 530px;
position: absolute;
left: 80px;
border-radius: 8px;
top: 120px;
border: 1px solid #ffffff;
opacity: 0.8;
.table-header {
height: 53px;
width: 100%;
background: url("~@/assets/images/cockpit/bg-excel-top.png") no-repeat;
font-family: JiangChengXieHei-900W;
font-weight: normal;
color: #eefafd;
font-size: 16px;
display: flex;
align-items: center;
justify-content: space-between;
.table-box-index {
text-align: center;
width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.table-box-name {
text-align: center;
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.table-box-phase {
text-align: center;
width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.table-box-situation {
text-align: center;
width: 700px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.table-body {
height: 47px;
width: 100%;
font-family: JiangChengXieHei-900W;
font-weight: normal;
color: #eefafd;
font-size: 16px;
display: flex;
align-items: center;
justify-content: space-between;
.table-box-index {
text-align: center;
width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.table-box-name {
text-align: center;
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.table-box-phase {
text-align: center;
width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.table-box-situation {
text-align: center;
width: 700px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.pagination-box {
width: 280px;
height: 30px;
position: absolute;
top: 690px;
left: 50%;
margin-left: -140px;
display: flex;
font-family: JiangChengXieHei-900W;
font-weight: normal;
font-size: 16px;
text-shadow: 0px 2px 8px rgba(55, 35, 5, 0.42);
color: #e5f0fa;
div {
width: 30px;
height: 30px;
background: rgba(30, 87, 146, 0.7);
border-radius: 6px;
text-align: center;
line-height: 30px;
margin-right: 8px;
}
.page-btn.active {
background: #a67f18;
color: #ffffff;
}
}
}
}
.box-alert.box-alert-modal {
background: rgba(0, 0, 0, 0.5);
} }
/*分辨率低于1180，采用下面的样式*/ /*分辨率低于1180，采用下面的样式*/
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment