unicom
/
jtjsc-front
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

提交代码

master
sunyu 4 months ago
parent
cb644fc9ba
commit
784ba2fc3d
1 changed files with 241 additions and 291 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 146
      src/views/stlj.vue

146
src/views/stlj.vue
View File

@ -5,9 +5,11 @@
width: '5760px', width: '5760px',
height: '3240px', height: '3240px',
backgroundSize: 'cover'}"> backgroundSize: 'cover'}">
<!-- 左侧 -->
<div style="float:left;width:30%;height: 90%" >
<!-- 左侧1--> <!-- 左侧1-->
<div style="float:left"> <div style="float:left">
<div class="left-img" style="float:left;margin-top:160px;margin-left:120px;"> <div class="left-img" style="float:left;margin-top:160px;margin-left:100px;">
<div style="margin-left: 40px;margin-top:180px"> <div style="margin-left: 40px;margin-top:180px">
<img src="../views/stlj/left_1.png" alt="重大项目建设"> <img src="../views/stlj/left_1.png" alt="重大项目建设">
</div> </div>
@ -47,7 +49,7 @@
</div> </div>
<!-- 左侧2--> <!-- 左侧2-->
<div class="left-img" style="float:left;margin-top:990px;margin-left:120px;"> <div class="left-img" style="float:left;margin-left:120px;">
<div style="margin-left: 40px;margin-top:180px"> <div style="margin-left: 40px;margin-top:180px">
<img src="../views/stlj/left_2.png" alt="乡村畅通"> <img src="../views/stlj/left_2.png" alt="乡村畅通">
</div> </div>
@ -87,7 +89,7 @@
</div> </div>
<!-- 左侧3--> <!-- 左侧3-->
<div class="left3-img" style="float:left;margin-top:160px;margin-left:120px;"> <div class="left3-img" style="float:left;margin-left:120px;">
<div style="margin-left: 40px;margin-top:180px"> <div style="margin-left: 40px;margin-top:180px">
<img src="../views/stlj/left_3.png" alt="交通物流"> <img src="../views/stlj/left_3.png" alt="交通物流">
</div> </div>
@ -129,37 +131,38 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- 中间 -->
<div style="float:left;width:40%;height: 90%">
<!-- 中间1 --> <!-- 中间1 -->
<div class="middle1_img"> <div class="middle1_img">
<div style="margin-left: 140px;margin-top:500px"> <div style="float:left;margin-top:500px;width:100%;">
<img src="../views/stlj/middle/middle_1.png" alt="运输服务保障"> <img style="width:100%;height:100%;" src="../views/stlj/middle/middle_1.png" alt="运输服务保障">
</div> </div>
<div style="float:left"> <div style="float:left;width:100%">
<div style="float:left;margin-left: 830px;margin-top:10px;width:1000px" <div style="float:left;margin-top:10px;width:50%;height:50%;margin-left:25%;"
:style="{ backgroundImage: `url(${require('@/views/stlj/middle/middle_1_1.png')})`, :style="{ backgroundImage: `url(${require('@/views/stlj/middle/middle_1_1.png')})`,
backgroundSize: 'cover', backgroundSize: 'cover',
width: '1192px',
height: '1093px',
backgroundSize: 'cover'}" > backgroundSize: 'cover'}" >
<div style="float:left;margin-left: -707px;margin-top:515px;width:600px" <div style="float:left;margin-top:515px;width:600px;margin-left:-50%;"
:style="{ backgroundImage: `url(${require('@/views/stlj/middle/middle_1_2.png')})`, :style="{ backgroundImage: `url(${require('@/views/stlj/middle/middle_1_2.png')})`,
backgroundSize: 'cover', backgroundSize: 'cover',
width: '827px', width: '827px',
height: '312px', height: '312px',
backgroundSize: 'cover'}" > backgroundSize: 'cover'}" >
<div style="float:left; font-size:42px;color:#FFFFFF;margin-left: -242px;margin-top:60px;width:827px">客运站转型</div> <div style="float:left; font-size:42px;color:#FFFFFF;margin-top:60px;width:827px">客运站转型</div>
<div style="float:left;font-size:32px;color:#FFFFFF;width:740px;margin-top:40px" class="middle1-text-ellipsis"> <div style="float:left;font-size:32px;color:#FFFFFF;width:740px;margin-top:40px" class="middle1-text-ellipsis">
聚焦人民群众美好出行需求，不断提升运输服务保障能力。新增26个二级以上客运站转型升级，打造50条“吉意通”客运品牌线路，公交化改造线路110条，培育1-2个国家公交都市创建城市，鼓励社区、通学、夜间等定制公交发展，推广智慧出行应用，打造2-3家“出租汽车文明服务示范企业”，持续深化高速公路“阳光救援”行动，集中开展路面病害专项整治，稳步提升路况水平。 聚焦人民群众美好出行需求，不断提升运输服务保障能力。新增26个二级以上客运站转型升级，打造50条“吉意通”客运品牌线路，公交化改造线路110条，培育1-2个国家公交都市创建城市，鼓励社区、通学、夜间等定制公交发展，推广智慧出行应用，打造2-3家“出租汽车文明服务示范企业”，持续深化高速公路“阳光救援”行动，集中开展路面病害专项整治，稳步提升路况水平。
</div> </div>
</div> </div>
<div style="margin-left: 970px;margin-top:40px" <div style="margin-left: 900px;margin-top:40px"
:style="{ backgroundImage: `url(${require('@/views/stlj/middle/middle_1_2.png')})`, :style="{ backgroundImage: `url(${require('@/views/stlj/middle/middle_1_2.png')})`,
backgroundSize: 'cover', backgroundSize: 'cover',
width: '827px', width: '827px',
height: '312px', height: '312px',
backgroundSize: 'cover'}" > backgroundSize: 'cover'}" >
<div style="float:left; font-size:42px;color:#FFFFFF;margin-left: -182px;margin-top:60px;width:827px">提升客运服务品质</div> <div style="float:left; font-size:42px;color:#FFFFFF;margin-top:60px;width:827px">提升客运服务品质</div>
<div style="float:left;font-size:32px;color:#FFFFFF;width:740px;margin-top:40px" class="middle12-text-ellipsis"> <div style="float:left;font-size:32px;color:#FFFFFF;width:740px;margin-top:40px" class="middle12-text-ellipsis">
聚焦人民群众美好出行需求，不断提升运输服务保障能力。新增26个二级以上客运站转型升级，打造50条“吉意通”客运品牌线路，公交化改造线路110条，培育1-2个国家公交都市创建城市，鼓励社区、通学、夜间等定制公交发展，推广智慧出行应用，打造2-3家“出租汽车文明服务示范企业”，持续深化高速公路“阳光救援”行动，集中开展路面病害专项整治，稳步提升路况水平。 </div> 聚焦人民群众美好出行需求，不断提升运输服务保障能力。新增26个二级以上客运站转型升级，打造50条“吉意通”客运品牌线路，公交化改造线路110条，培育1-2个国家公交都市创建城市，鼓励社区、通学、夜间等定制公交发展，推广智慧出行应用，打造2-3家“出租汽车文明服务示范企业”，持续深化高速公路“阳光救援”行动，集中开展路面病害专项整治，稳步提升路况水平。 </div>
</div> </div>
@ -182,16 +185,16 @@
<!-- 中间2 --> <!-- 中间2 -->
<div class="middle2_img"> <div class="middle2_img">
<div style="margin-left: 140px;margin-top:380px"> <div style="margin-top:380px">
<img src="../views/stlj/middle/middle_2.png" alt="行业治理"> <img src="../views/stlj/middle/middle_2.png" alt="行业治理">
</div> </div>
<div style="float:left;margin-left: 160px;margin-top:100px" <div style="float:left;margin-top:100px"
:style="{ backgroundImage: `url(${require('@/views/stlj/middle/middle_2_1.png')})`, :style="{ backgroundImage: `url(${require('@/views/stlj/middle/middle_2_1.png')})`,
backgroundSize: 'cover', backgroundSize: 'cover',
width: '1937px', width: '1700px',
height: '851px', height: '851px',
backgroundSize: 'cover'}" > backgroundSize: 'cover'}" >
<!-- 提升营商环境 --> <!-- 提升营商环境 -->
<img src="../views/stlj/middle/middle_2_2.png" style="margin-left: -3300px;margin-top: 531px;"> <img src="../views/stlj/middle/middle_2_2.png" style="margin-left: -3300px;margin-top: 531px;">
<div style="float:left;padding-left: 10px;padding-top: 640px;"> <div style="float:left;padding-left: 10px;padding-top: 640px;">
<div style="font-size:34px;font-weight: normal;font-family: Source Han Sans;color:#FFFFFF;margin-left: -530px">提升政务服务质效</div> <div style="font-size:34px;font-weight: normal;font-family: Source Han Sans;color:#FFFFFF;margin-left: -530px">提升政务服务质效</div>
@ -206,15 +209,17 @@
</div> </div>
</div> </div>
<div style="margin-left: 2039px;margin-top:40px" <div style="margin-left: 1800px;margin-top:40px;pointer-events: auto;"
:style="{ backgroundImage: `url(${require('@/views/stlj/middle/middle_2_1_1.png')})`, :style="{ backgroundImage: `url(${require('@/views/stlj/middle/middle_2_1_1.png')})`,
backgroundSize: 'cover', backgroundSize: 'cover',
width: '499px', width: '499px',
height: '227.75px', height: '227.75px',
backgroundSize: 'cover'}" > backgroundSize: 'cover'}" >
<div style="float:left;font-size:42px;font-weight: bold;color:#FFFFFF;margin-left:100px;margin-top: 82px;">法治部门建设</div> <div @click="handleClick" style="float:left;font-size:42px;font-weight: bold;color:#FFFFFF;margin-left:100px;margin-top: 82px;pointer-events: auto;" >
法治部门建设
</div>
</div> </div>
<div style="margin-left: 2039px;" <div style="margin-left: 1800px;"
:style="{ backgroundImage: `url(${require('@/views/stlj/middle/middle_2_1_1.png')})`, :style="{ backgroundImage: `url(${require('@/views/stlj/middle/middle_2_1_1.png')})`,
backgroundSize: 'cover', backgroundSize: 'cover',
width: '499px', width: '499px',
@ -222,7 +227,7 @@
backgroundSize: 'cover'}" > backgroundSize: 'cover'}" >
<div style="float:left;font-size:42px;font-weight: bold;color:#FFFFFF;margin-left:100px;margin-top: 82px;">提升营商环境</div> <div style="float:left;font-size:42px;font-weight: bold;color:#FFFFFF;margin-left:100px;margin-top: 82px;">提升营商环境</div>
</div> </div>
<div style="margin-left: 2039px;" <div style="margin-left: 1800px;"
:style="{ backgroundImage: `url(${require('@/views/stlj/middle/middle_2_1_1.png')})`, :style="{ backgroundImage: `url(${require('@/views/stlj/middle/middle_2_1_1.png')})`,
backgroundSize: 'cover', backgroundSize: 'cover',
width: '499px', width: '499px',
@ -230,7 +235,7 @@
backgroundSize: 'cover'}" > backgroundSize: 'cover'}" >
<div style="float:left;font-size:42px;font-weight: bold;color:#FFFFFF;margin-left:100px;margin-top: 82px;">重点领域改革</div> <div style="float:left;font-size:42px;font-weight: bold;color:#FFFFFF;margin-left:100px;margin-top: 82px;">重点领域改革</div>
</div> </div>
<div style="margin-left: 2039px;" <div style="margin-left: 1800px;"
:style="{ backgroundImage: `url(${require('@/views/stlj/middle/middle_2_1_1.png')})`, :style="{ backgroundImage: `url(${require('@/views/stlj/middle/middle_2_1_1.png')})`,
backgroundSize: 'cover', backgroundSize: 'cover',
width: '499px', width: '499px',
@ -242,21 +247,24 @@
</div> </div>
</div>
<!-- 右侧 -->
<div style="float:left;width:30%;height: 90%">
<!-- 右侧1--> <!-- 右侧1-->
<div class="right1_img" style="margin-top:160px;margin-left:60px;"> <div class="right1_img" style="margin-top:160px;margin-left:60px;">
<div style="margin-left: -160px;margin-top:180px"> <div style="margin-top:340px">
<img src="../views/stlj/right/right_1.png" alt="绿色低碳"> <img style="float:left;" src="../views/stlj/right/right_1.png" alt="绿色低碳">
</div> </div>
<!-- <div style="float:left;margin-left: 80px;margin-top:100px"--> <!-- <div style="float:left;margin-left: 80px;margin-top:100px"-->
<!-- :style="{ backgroundImage: `url(${require('@/views/stlj/right/right_1_1.png')})`,--> <!-- :style="{ backgroundImage: `url(${require('@/views/stlj/right/right_1_1.png')})`,-->
<!-- backgroundSize: 'cover',--> <!-- backgroundSize: 'cover',-->
<!-- width: '1332px',--> <!-- width: '1332px',-->
<!-- height: '597px',--> <!-- height: '597px',-->
<!-- backgroundSize: 'cover'}" >--> <!-- backgroundSize: 'cover'}" >-->
<div style="width:1832px"> <div style="float:left;">
<div style="float:left;width:441px"> <div style="float:left;width:441px">
<div style="float:left;margin-left: 8.23px;margin-top:100px" <div style="float:left;margin-left: 8.23px;margin-top:100px"
:style="{ backgroundImage: `url(${require('@/views/stlj/right/right_1_2.png')})`, :style="{ backgroundImage: `url(${require('@/views/stlj/right/right_1_2.png')})`,
@ -337,10 +345,11 @@
</div> </div>
</div> </div>
<!-- 右侧3--> <!-- 右侧3-->
<div class="right3_img" style="float:left;margin-top:200px;margin-left:10px;" > <div class="right3_img" style="float:left;margin-left:10px;" >
<div style="margin-left: 40px;margin-top:180px"> <div style="margin-left: 40px;margin-top:180px">
<img src="../views/stlj/right/right_3.png" alt="从严治党"> <img src="../views/stlj/right/right_3.png" alt="从严治党">
</div> </div>
<div>
<div style="float:left;margin-left: 150px;margin-top:100px" <div style="float:left;margin-left: 150px;margin-top:100px"
:style="{ backgroundImage: `url(${require('@/views/stlj/right/right_3_1.png')})`, :style="{ backgroundImage: `url(${require('@/views/stlj/right/right_3_1.png')})`,
backgroundSize: 'cover', backgroundSize: 'cover',
@ -387,6 +396,10 @@
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
</template> </template>
@ -412,6 +425,9 @@ export default {
}, },
methods: { methods: {
handleClick(){
console.log("div被点击了");
},
handleCollapse() { handleCollapse() {
this.isMenuCollapse = !this.isMenuCollapse this.isMenuCollapse = !this.isMenuCollapse
}, },
@ -435,65 +451,6 @@ export default {
<style> <style>
.right1_img{
position: absolute;
width: 25%;
height: calc(100vh - 10px);
top: 120px;
left: 0;
padding-left: 4200px;
}
.right2_img{
position: absolute;
width: 25%;
height: calc(100vh - 10px);
top: 120px;
left: 0;
padding-left: 4200px;
padding-top: 1000px;
}
.right3_img{
position: absolute;
width: 25%;
height: calc(100vh - 10px);
top: 120px;
left: 0;
padding-left: 4200px;
padding-top: 1800px;
}
.middle1_img{
position: absolute;
width: 25%;
height: calc(100vh - 10px);
top: 120px;
left: 0;
padding-left: 1500px;
}
.middle2_img{
position: absolute;
width: 25%;
height: calc(100vh - 10px);
top: 120px;
left: 0;
padding-left: 1500px;
padding-top: 1400px;
}
.left-img{
position: absolute;
width: 25%;
height: calc(100vh - 10px);
top: 120px;
left: 0;
padding-left: 10px;
}
.left3-img{
position: absolute;
width: 25%;
height: calc(100vh - 10px);
top: 1800px;
left: 0;
padding-left: 10px;
}
.left-font{ .left-font{
font-size: 50px; font-size: 50px;
font-weight: 500; font-weight: 500;
@ -505,13 +462,6 @@ export default {
/* 字 */ /* 字 */
color: #84ACE8; color: #84ACE8;
} }
.bgbox{
position: relative;
width: 5760px;
height: 3240px;
opacity: 1;
background: radial-gradient(37% 37% at 50% 50%, #223241 0%, #0A1117 100%);
}
.text-ellipsis { .text-ellipsis {
width: 350px; /* 根据实际需求设置宽度 */ width: 350px; /* 根据实际需求设置宽度 */
height: auto; height: auto;

Write Preview
Loading…
Cancel
Save