Skip to content

F
founder_vue
Commit 1fff0c4a by maxiaohan
Options

布局及素材加载

parent d9b064ed
Showing with 432 additions and 9 deletions
src/views/Home.vue
<template>
<div class="home"></div>
<el-container class="home-page" direction="vertical">
<!-- 头 背景 -->
<div class="header">
<div class="header-title">
<img class="header-icon" :src="iconurl" />
<div class="header-font">全国警犬态势分析</div>
</div>
</div>
<!-- 内容区 -->
<div class="main">
<!-- 统计区 -->
<div class="left">
<div class="all-count">
<!-- 头像边儿-->
<div class="border">
<!-- 头像-->
<div class="profile">
<img class="img" :src="profileurl" />
</div>
</div>
<!-- 总数统计-->
<div class="count">
<div class="title">
全国警犬数
</div>
<img :src="titleiconurl" class="img" />
<div class="font">{{ allCount }}</div>
</div>
</div>
<!-- 全国种犬数-->
<div class="father-count">
<!-- 标题-->
<div class="all-title">
<img class="img" :src="alltitleurl" />
<div class="font">全国种犬数</div>
</div>
<!-- 种犬数据区-->
<div class="count-data"></div>
</div>
<!-- 全国工作犬数-->
<div class="work-count">
<!-- 标题-->
<div class="all-title">
<img class="img" :src="alltitleurl" />
<div class="font">全国工作犬数</div>
</div>
<!-- 工作犬数据区-->
<div class="count-data"></div>
</div>
</div>
<!-- 地图区 -->
<div class="center">
<!-- 圆环-->
<div class="ring-bg"></div>
<!-- 地图-->
<div class="map"></div>
<!-- 地图阴影-->
<div class="map-bg"></div>
<!-- 数据区-->
<div class="datas"></div>
</div>
<!-- 出勤区 -->
<div class="right">
<div class="search-div">
<div class="xzqh">行政区划</div>
<!-- 时间选择框-->
<div class="dates"></div>
<!-- 搜索按钮-->
<div class="search-btn" @click="search">
<img :src="searchbtnurl" class="img" />
</div>
</div>
<div class="outs">
<!-- 出勤总数-->
<div class="all-out">
<div class="title">警犬出勤总数：</div>
<div class="num">{{ outnums }}</div>
</div>
<!-- 标题-->
<div class="all-title">
<img class="img" :src="alltitleurl" />
<div class="font">警犬出勤类型</div>
</div>
<div class="out"></div>
<!-- 标题-->
<div class="all-title">
<img class="img" :src="alltitleurl" />
<div class="font">全国警犬出勤数top10</div>
</div>
<div class="top10"></div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="footer"></div>
</el-container>
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "Home",
data() {
return{}
},
created() {
},
computed: {
...mapGetters(["defaultGoodsImage", "userAuth"])
return {
iconurl: require("../assets/img/header_icon.png"),
profileurl: require("../assets/img/head.jpg"),
alltitleurl: require("../assets/img/all_count.png"),
titleiconurl: require("../assets/img/title_icon.png"),
searchbtnurl: require("../assets/img/search.png"),
allCount: "1,209,475",
outnums: "4,209,475"
};
},
created() {},
computed: {},
methods: {
search() {
console.info("搜索方法");
}
}
};
</script>
<style lang="scss">
.home-page {
// 整个div固定在屏幕的最上方和最左方
position: fixed;
top: 0;
left: 0;
// 整个div跟屏幕大小一样，从而达到全屏效果。而min-width是为了实现让屏幕宽度在1000px以内时，div的大小保持不变，也就是图片不缩放。
width: 1920px;
height: 1080px;
// min-width: 1000px;
zoom: 1;
z-index: -1000;
background: url("../assets/img/bg.png") no-repeat; // 图片平铺，不重复
background-color: #001b4a;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0; // 图片的位置，居中，靠左对齐
.header {
width: 1920px;
height: 153px;
background: url("../assets/img/header.png") no-repeat;
background-size: 1920px 153px;
background-position: center 0;
.header-title {
width: 468px;
height: 92px;
margin: 0 auto;
.header-icon {
width: 84px;
height: 92px;
margin-bottom: 15px;
display: inline-block;
}
.header-font {
width: 352px;
height: 92px;
font-size: 40px;
font-family: Source Han Sans CN;
font-weight: bold;
line-height: 92px;
color: #f4f4f4;
text-shadow: 0px 0px 12px #42a7ff;
letter-spacing: 4px;
opacity: 1;
display: inline-block;
}
}
}
.main {
width: auto;
height: 847px;
display: flex;
flex-direction: row;
padding: 0 80px 0 80px;
.left {
//border: #e6a23c 1px solid;
height: 847px;
width: 393px;
display: flex;
flex-direction: column;
.all-count {
div {
display: inline-block;
}
width: 393px;
height: 154px;
margin-bottom: 10px;
.border {
background: url("../assets/img/circle_border.png") no-repeat left top;
background-size: 153px 153px;
width: 153px;
height: 153px;
padding: 20px;
box-sizing: border-box;
.profile {
overflow: hidden;
width: 112px;
height: 112px;
background: #001b4a;
border-radius: 50%;
opacity: 1;
.img {
width: 112px;
height: 112px;
}
}
}
.count {
width: 226px;
height: 123px;
position: relative;
top: -35px;
right: -29px;
.title {
width: 120px;
height: 24px;
font-size: 24px;
font-family: Source Han Sans CN;
font-weight: 400;
line-height: 24px;
color: #f4f4f4;
opacity: 1;
}
.img {
position: relative;
right: -14px;
width: 100px;
height: 12px;
}
.font {
width: 209px;
height: 59px;
font-size: 48px;
font-family: DIN;
font-weight: bold;
line-height: 59px;
color: #f8b518;
opacity: 1;
}
}
}
.father-count {
width: 340px;
height: 224px;
.count-data {
height: 100px;
width: 340px;
background: #001b4a;
}
}
.work-count {
width: 340px;
height: 55%;
.count-data {
height: 360px;
width: 340px;
background: #001b4a;
}
}
}
.center {
height: 847px;
width: 994px;
div {
display: inline-block;
}
.ring-bg {
z-index: -800;
position: absolute;
left: 530px;
top: 131.33px;
width: 859.33px;
height: 859.33px;
background: url("../assets/img/ring_bg.png") no-repeat right top;
background-size: 859.33px 859.33px;
}
.map {
z-index: -600;
position: absolute;
left: 459.5px;
top: 164.51px;
width: 899px;
height: 739.48px;
background: url("../assets/img/map.png") no-repeat left top;
background-size: 899px 739.48px;
}
.map-bg {
z-index: -700;
position: absolute;
left: 411px;
top: 141px;
width: 994px;
height: 834px;
background: url("../assets/img/map_bg.png") no-repeat left top;
background-size: 994px 834px;
}
}
.right {
height: 847px;
width: 440px;
.search-div {
height: 43px;
width: 440px;
display: flex;
flex-direction: row;
.xzqh {
margin-right: 16px;
width: 184px;
height: 40px;
background: #000829;
border: 1px solid #1e62ff;
opacity: 1;
border-radius: 2px;
font-size: 15px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 40px;
color: #1e62ff;
}
.dates {
margin-right: 16px;
width: 184px;
height: 40px;
background: #000829;
border: 1px solid #1e62ff;
opacity: 1;
border-radius: 2px;
}
.search-btn {
width: 40px;
height: 40px;
background: #1d61fb;
border: 1px solid #1e62ff;
opacity: 1;
border-radius: 2px;
.img {
width: 16px;
height: 16px;
margin: 12px;
}
}
}
.outs {
margin-left: 115px;
.all-out {
width: 320px;
height: 27px;
margin: 45px 0 10px 0;
div {
display: inline-block;
}
.title {
width: 140px;
height: 20px;
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: 500;
line-height: 34px;
color: #f4f4f4;
opacity: 1;
}
.num {
width: 105px;
height: 29px;
font-size: 24px;
font-family: DIN;
font-weight: bold;
line-height: 29px;
color: #f8b518;
opacity: 1;
}
}
.out {
width: 320px;
height: 136px;
background: #001b4a;
}
.top10 {
height: 432px;
width: 320px;
background: #001b4a;
}
}
}
}
.footer {
width: 1920px;
height: 60px;
z-index: -900;
background: url("../assets/img/footer.png") no-repeat left bottom;
background-size: 1920px 60px;
}
.all-title {
margin: 30px 0 25px 0;
width: 340px;
height: 32px;
background: linear-gradient(90deg, #1e62ff 0%, rgba(15, 49, 128, 0) 100%);
opacity: 1;
.img {
width: 18px;
height: 14px;
margin: 0 12px 9px 12px;
}
.font {
display: inline-block;
width: 260px;
height: 32px;
font-size: 24px;
font-family: YouSheBiaoTiHei;
font-weight: 400;
line-height: 32px;
color: #f5f5f5;
opacity: 1;
}
}
}
</style>
src/views/Home1.vue 0 → 100644
<template>
<div class="home"></div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "Home",
data() {
return{}
},
created() {
},
computed: {
...mapGetters(["defaultGoodsImage", "userAuth"])
},
methods: {
}
};
</script>
<style lang="scss">
</style>
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