Skip to content

C
civil-front
Commit 5ec49455 by 苏咏卓
Options

Merge branch 'master' of http://139.159.239.83:9093/civil/civil-front

parents 75e55cdf 89a89f17
Showing with 52 additions and 37 deletions
src/views/home.vue
<template> <template>
<div class="homePage"> <div class="homePage">
<img <img
src="./../assets/images/底层背景元素小.jpg" src="./../assets/images/img/底层背景图.png"
alt="" alt=""
class="background-image" class="background-image"
/> />
<div class="flex-container"> <div class="flex-container">
<img src="./../assets/images/标题左边素材.png" alt="" class="about" /> <img src="./../assets/images/img/标题.png" alt="" class="flex-container-tetli">
<!-- <img src="./../assets/images/标题左边素材.png" alt="" class="about" />
<div class="title-text"> <div class="title-text">
民政数据分析系统 民政数据分析系统
<img src="./../assets/images/标题下划线.png" alt="" class="underline" /> <img src="./../assets/images/标题下划线.png" alt="" class="underline" />
</div> </div>
<img src="./../assets/images/标题右边素材.png" alt="" class="about" /> <img src="./../assets/images/标题右边素材.png" alt="" class="about" /> -->
</div> </div>
<div class="arrow"> <!-- <div class="arrow">
<img src="./../assets/images/方向箭头.png" alt="" /> <img src="./../assets/images/方向箭头.png" alt="" />
</div> </div> -->
<img class="qrCode" src="./../assets/images/App.png" alt="" /> <img class="qrCode" src="./../assets/images/img/二维码.png" alt="" />
<div class="downloadInfo">请使用浏览器扫码下载</div> <div class="downloadInfo">安卓板app下载
<br>
请使用浏览器扫码下载</div>
<!-- <el-popover placement="bottom" width="140" trigger="hover"> <!-- <el-popover placement="bottom" width="140" trigger="hover">
<img class="qrCode" src="./../assets/images/App.png" alt="" /> <img class="qrCode" src="./../assets/images/App.png" alt="" />
<div class="downloadInfo">请使用浏览器下载</div> <div class="downloadInfo">请使用浏览器下载</div>
...@@ -31,8 +34,8 @@ ...@@ -31,8 +34,8 @@
<div> <div>
<img :src="item.icon" class="dataList-img" /> <img :src="item.icon" class="dataList-img" />
</div> </div>
<h2>{{ item.name }}</h2>
</div> </div>
<h2>{{ item.name }}</h2>
</router-link> </router-link>
</div> </div>
</div> </div>
...@@ -49,51 +52,51 @@ export default { ...@@ -49,51 +52,51 @@ export default {
name: "人口专题", name: "人口专题",
path: "/entrance", path: "/entrance",
TapId: "0", TapId: "0",
icon: require("@/assets/images/人员专题.png"), icon: require("@/assets/images/img/人口专题.png"),
}, },
{ {
name: "机构专题", name: "机构专题",
path: "/entrance", path: "/entrance",
TapId: "1", TapId: "1",
icon: require("@/assets/images/机构专题.png"), icon: require("@/assets/images/img/机构专题.png"),
}, },
{ {
name: "婚姻", name: "婚姻",
path: "/entrance", path: "/entrance",
TapId: "2", TapId: "2",
icon: require("@/assets/images/婚姻.png"), icon: require("@/assets/images/img/婚姻.png"),
}, },
{ {
name: "社会救助", name: "社会救助",
path: "/entrance", path: "/entrance",
TapId: "3", TapId: "3",
icon: require("@/assets/images/社会救助.png"), icon: require("@/assets/images/img/社会救助.png"),
}, },
{ {
name: "两项补贴", name: "两项补贴",
path: "/entrance", path: "/entrance",
TapId: "7", TapId: "7",
icon: require("@/assets/images/两项补贴.png"), icon: require("@/assets/images/img/两项补贴.png"),
}, },
{ {
name: "儿童福利", name: "儿童福利",
path: "/entrance", path: "/entrance",
TapId: "4", TapId: "4",
icon: require("@/assets/images/儿童福利.png"), icon: require("@/assets/images/img/儿童福利.png"),
}, },
{ {
name: "社会组织", name: "社会组织",
path: "/entrance", path: "/entrance",
TapId: "6", TapId: "6",
icon: require("@/assets/images/社会组织.png"), icon: require("@/assets/images/img/社会组织.png"),
}, },
{ {
name: "殡葬", name: "殡葬",
path: "/entrance", path: "/entrance",
TapId: "5", TapId: "5",
icon: require("@/assets/images/殡葬.png"), icon: require("@/assets/images/img/殡葬.png"),
}, },
{ name: "更多...", path: "", TapId: "", icon: "" },
], ],
}; };
}, },
...@@ -104,7 +107,7 @@ export default { ...@@ -104,7 +107,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.footerTxt { .footerTxt {
margin-top: 50px; margin-top: 100px;
color: #fff; color: #fff;
width: 100%; width: 100%;
text-align: center; text-align: center;
...@@ -112,27 +115,36 @@ export default { ...@@ -112,27 +115,36 @@ export default {
} }
.dataList-img { .dataList-img {
width: 50px; width: 50px;
margin: 20px 22px;
} }
h2 { h2 {
margin-top: 14px;
margin-left: 10px;
color: #00f9fd; color: #00f9fd;
text-align: center;
}
.content:hover{
box-shadow:0px 0px 20px #00f9fd;
} }
.content { .content {
margin: 16px 30px; width: 100px;
height: 100px;
margin: auto;
border-radius: 10px;
border: 2px solid #00f9fd;
// margin: 16px 30px;
display: flex; display: flex;
} }
.Jump-box { .Jump-box {
display: flex; display: flex;
width: 780px; width: 640px;
flex-wrap: wrap; flex-wrap: wrap;
margin: auto; margin: auto;
} }
.Jump { .Jump {
width: 218px; width: 120px;
height: 80px; height: 130px;
margin: 20px; margin: 20px;
background-image: url("./../assets/images/专题入口背景.png"); // background-image: url("./../assets/images/专题入口背景.png");
} }
.arrow { .arrow {
width: 30px; width: 30px;
...@@ -145,11 +157,13 @@ h2 { ...@@ -145,11 +157,13 @@ h2 {
width: 100%; width: 100%;
height: 86vh; height: 86vh;
} }
.flex-container-tetli{
width: 100%;
}
.flex-container { .flex-container {
display: flex; display: flex;
width: 1300px; width: 100%;
height: 110px; height: 165px;
margin: auto; margin: auto;
} }
.title-text { .title-text {
...@@ -159,11 +173,11 @@ h2 { ...@@ -159,11 +173,11 @@ h2 {
color: #00f9fd; color: #00f9fd;
font-size: 45px; font-size: 45px;
} }
.about { // .about {
margin-top: 20px; // margin-top: 20px;
width: 450px; // width: 450px;
height: 60px; // height: 60px;
} // }
.background-image { .background-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -173,8 +187,8 @@ h2 { ...@@ -173,8 +187,8 @@ h2 {
.qrCode { .qrCode {
position: fixed; position: fixed;
top: 20px; bottom: 60px;
right: 20px; right: 40px;
width: 120px; width: 120px;
height: 120px; height: 120px;
} }
...@@ -191,9 +205,10 @@ h2 { ...@@ -191,9 +205,10 @@ h2 {
.downloadInfo { .downloadInfo {
position: fixed; position: fixed;
top: 150px; bottom: 10px;
right: 10px; right: 30px;
font-size: 14px; font-size: 14px;
line-height: 20px;
color: #fff; color: #fff;
text-align: center; text-align: center;
} }
......
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