Skip to content

huarun-binjiang-ipad / ipad

Go to a project
Commit dc2cecee by liuwange1
Options

基本UI画完

parent 335ad76e
Showing with 979 additions and 2 deletions
src/App.vue
......@@ -61,34 +61,42 @@ export default {
{
url: require("./assets/image/icon4.png"),
label: "智慧安防",
routerName: "anfang",
},
{
url: require("./assets/image/icon5.png"),
label: "智慧能源",
routerName: "nengyuan",
},
{
url: require("./assets/image/icon6.png"),
label: "智慧运营",
routerName: "yunying",
},
{
url: require("./assets/image/icon7.png"),
label: "智慧照明",
routerName: "zhaoming",
},
{
url: require("./assets/image/icon8.png"),
label: "智慧电梯",
routerName: "dianti",
},
{
url: require("./assets/image/icon9.png"),
label: "智慧通行",
routerName: "tongxing",
},
{
url: require("./assets/image/icon10.png"),
label: "智慧环境",
routerName: "huanjing",
},
{
url: require("./assets/image/icon11.png"),
label: "智慧停车",
routerName: "tingche",
},
],
activeIndex: 0,
......
src/assets/css/style.css
......@@ -22,7 +22,7 @@
.style-line {
width: 100%;
height: 2px;
height: 1px;
background: #ADBAD0;
opacity: 0.4;
}
......@@ -44,3 +44,44 @@
background-image: url('../image/title2-bg-active.png');
color: rgba(224, 99, 55, 1);
}
.btn2 {
width: 111px;
height: 40px;
background: rgba(255, 255, 255, 0.2);
background-image: url('../image/title3-bg.png');
background-size: 100% 100%;
text-align: center;
line-height: 40px;
font-size: 14px;
font-weight: 400;
color: #838A99;
}
.btn2.active {
background-image: url('../image/title3-bg-active.png');
color: rgba(224, 99, 55, 1);
}
.btn3 {
width: 111px;
height: 40px;
background: rgba(255, 255, 255, 0.2);
background-image: url('../image/title4-bg.png');
background-size: 100% 100%;
text-align: center;
line-height: 40px;
font-size: 14px;
font-weight: 400;
color: #838A99;
}
.btn3.active {
background-image: url('../image/title4-bg-active.png');
color: rgba(224, 99, 55, 1);
}
.btn3.active2 {
background-image: url('../image/title4-bg-active2.png');
color: rgba(224, 99, 55, 1);
}
\ No newline at end of file
src/router/index.js
......@@ -20,6 +20,46 @@ const routes = [
name: 'xiaofang',
component: () => import('../views/xiaofang.vue')
},
{
path: '/anfang',
name: 'anfang',
component: () => import('../views/anfang.vue')
},
{
path: '/nengyuan',
name: 'nengyuan',
component: () => import('../views/nengyuan.vue')
},
{
path: '/yunying',
name: 'yunying',
component: () => import('../views/yunying.vue')
},
{
path: '/zhaoming',
name: 'zhaoming',
component: () => import('../views/zhaoming.vue')
},
{
path: '/dianti',
name: 'dianti',
component: () => import('../views/dianti.vue')
},
{
path: '/tongxing',
name: 'tongxing',
component: () => import('../views/tongxing.vue')
},
{
path: '/huanjing',
name: 'huanjing',
component: () => import('../views/huanjing.vue')
},
{
path: '/tingche',
name: 'tingche',
component: () => import('../views/tingche.vue')
},
]
const router = new VueRouter({
......
src/views/anfang.vue 0 → 100644
<template>
<div class="anfang">
<div class="top">
<div class="top-item left">
<div class="title-box">
<div class="title">模型楼栋楼层控制</div>
<div class="style-line"></div>
</div>
<div class="select-box">
<div class="select-item select-left">
<div class="select-title">楼栋</div>
<div class="select-options">
<div class="btn1" v-for="item in 10" :key="item">{{ item }}</div>
</div>
</div>
<img class="dir" src="../assets/image/dirright.png" alt="" />
<div class="select-item select-right">
<div class="select-title">楼层</div>
<div class="select-options">
<div class="btn2" v-for="item in 10" :key="item">{{ item }}</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="title-box">
<div class="title">巡检路线</div>
<div class="style-line"></div>
</div>
<div class="option-box">
<div class="btn3 active">路线1</div>
<div class="btn3">路线2</div>
<div class="btn3">路线3</div>
</div>
</div>
</div>
<div class="bottom">
<div class="title-box">
<div class="title">设备类型</div>
<div class="style-line"></div>
</div>
<div class="option-box">
<div class="btn3 active2">监控摄像头</div>
<div class="btn3">球型摄像头</div>
<div class="btn3">AI智能摄像头</div>
</div>
</div>
<div class="bottom">
<div class="title-box">
<div class="title">设备型号</div>
<div class="style-line"></div>
</div>
<div class="option-box">
<div class="btn3 active2">SXT-121</div>
<div class="btn3">SXT-122</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "anfang",
data() {
return {};
},
};
</script>
<style lang="less" scoped>
.anfang {
.top {
display: flex;
> div {
width: 50%;
}
.left {
padding-right: 30px;
box-sizing: border-box;
}
.top-item {
.select-box {
display: flex;
.dir {
position: relative;
top: 45px;
height: 19px;
flex-shrink: 0;
margin-left: 23px;
margin-right: 8px;
}
.select-item {
flex-shrink: 0;
.select-title {
font-size: 12px;
font-weight: 500;
color: #adbad0;
margin-bottom: 8px;
}
.select-options {
width: 130px;
height: 220px;
overflow-y: scroll;
.btn1,
.btn2 {
margin-bottom: 5px;
}
}
}
}
}
.right {
}
}
.option-box {
display: flex;
> div {
margin-right: 12px;
}
}
.bottom {
margin-top: 20px;
}
}
</style>
\ No newline at end of file
src/views/dianti.vue 0 → 100644
<template>
<div class="dianti">
<section>
<div class="title-box">
<div class="title">模型楼栋楼层控制</div>
<div class="style-line"></div>
</div>
<div class="submit-box">
<div
class="btn1"
:class="{ active: index == activeIndex }"
@click="activeIndex = index"
v-for="(item, index) in btnList"
:key="index"
>
{{ item }}
</div>
</div>
</section>
<section>
<div class="title-box">
<div class="title">设备类型</div>
<div class="style-line"></div>
</div>
<div class="submit-box">
<div class="btn3 active2">全部电梯</div>
<div class="btn3">扶梯</div>
<div class="btn3">客梯</div>
<div class="btn3">货梯</div>
</div>
</section>
<section>
<div class="title-box">
<div class="title">设备型号</div>
<div class="style-line"></div>
</div>
<div class="submit-box">
<div class="btn3 active2">MJ2332</div>
<div class="btn3">MJ2334</div>
</div>
</section>
</div>
</template>
<script>
export default {
name: "dianti",
data() {
return {
activeIndex: 0,
btnList: ["全部楼栋", "S1", "S2", "S3", "S4", "N1", "N2", "N3", "N4"],
};
},
};
</script>
<style lang="less" scoped>
.dianti {
section {
margin-bottom: 33px;
}
.submit-box {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
> div {
margin-right: 20px;
margin-bottom: 18px;
}
}
}
</style>
\ No newline at end of file
src/views/huanjing.vue 0 → 100644
<template>
<div class="xiaofang">
<div class="top">
<div class="top-item left">
<div class="title-box">
<div class="title">模型楼栋楼层控制</div>
<div class="style-line"></div>
</div>
<div class="select-box">
<div class="select-item select-left">
<div class="select-title">楼栋</div>
<div class="select-options">
<div class="btn1" v-for="item in 10" :key="item">{{ item }}</div>
</div>
</div>
<img class="dir" src="../assets/image/dirright.png" alt="" />
<div class="select-item select-right">
<div class="select-title">楼层</div>
<div class="select-options">
<div class="btn2" v-for="item in 10" :key="item">{{ item }}</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="title-box">
<div class="title">设备分类</div>
<div class="style-line"></div>
</div>
<div class="option-box">
<div class="btn3 active">传感器</div>
<div class="btn3">空调</div>
</div>
</div>
</div>
<div class="bottom">
<div class="title-box">
<div class="title">设备型号</div>
<div class="style-line"></div>
</div>
<div class="option-box">
<div class="btn3 active2">MJ2332</div>
<div class="btn3">MJ2334</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "xiaofang",
data() {
return {};
},
};
</script>
<style lang="less" scoped>
.xiaofang {
.top {
display: flex;
> div {
width: 50%;
}
.left {
padding-right: 30px;
box-sizing: border-box;
}
.top-item {
.select-box {
display: flex;
.dir {
position: relative;
top: 45px;
height: 19px;
flex-shrink: 0;
margin-left: 23px;
margin-right: 8px;
}
.select-item {
flex-shrink: 0;
.select-title {
font-size: 12px;
font-weight: 500;
color: #adbad0;
margin-bottom: 8px;
}
.select-options {
width: 130px;
height: 220px;
overflow-y: scroll;
.btn1,
.btn2 {
margin-bottom: 5px;
}
}
}
}
}
.right {
}
}
.option-box {
display: flex;
> div {
margin-right: 12px;
}
}
.bottom {
margin-top: 30px;
}
}
</style>
\ No newline at end of file
src/views/nengyuan.vue 0 → 100644
<template>
<div class="nengyuan">
<div class="top">
<div class="top-item left">
<div class="title-box">
<div class="title">模型楼栋楼层控制</div>
<div class="style-line"></div>
</div>
<div class="select-box">
<div class="select-item select-left">
<div class="select-title">楼栋</div>
<div class="select-options">
<div class="btn1" v-for="item in 10" :key="item">{{ item }}</div>
</div>
</div>
<img class="dir" src="../assets/image/dirright.png" alt="" />
<div class="select-item select-right">
<div class="select-title">楼层</div>
<div class="select-options">
<div class="btn2" v-for="item in 10" :key="item">{{ item }}</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="title-box">
<div class="title">展示维度切换</div>
<div class="style-line"></div>
</div>
<div class="option-box">
<div class="btn3 active">烟感</div>
<div class="btn3">温感</div>
<div class="btn3">消防栓</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "nengyuan",
data() {
return {};
},
};
</script>
<style lang="less" scoped>
.nengyuan {
.top {
display: flex;
> div {
width: 50%;
}
.left {
padding-right: 30px;
box-sizing: border-box;
}
.top-item {
.select-box {
display: flex;
.dir {
position: relative;
top: 45px;
height: 19px;
flex-shrink: 0;
margin-left: 23px;
margin-right: 8px;
}
.select-item {
flex-shrink: 0;
.select-title {
font-size: 12px;
font-weight: 500;
color: #adbad0;
margin-bottom: 8px;
}
.select-options {
width: 130px;
height: 220px;
overflow-y: scroll;
.btn1,
.btn2 {
margin-bottom: 5px;
}
}
}
}
}
.right {
}
}
.option-box {
display: flex;
> div {
margin-right: 12px;
}
}
.bottom {
margin-top: 30px;
}
}
</style>
\ No newline at end of file
src/views/tingche.vue 0 → 100644
<template>
<div class="xiaofang">
<div class="top">
<div class="top-item left">
<div class="title-box">
<div class="title">模型楼栋楼层控制</div>
<div class="style-line"></div>
</div>
<div class="select-box">
<div class="select-item select-left">
<div class="select-title">楼栋</div>
<div class="select-options">
<div class="btn1" v-for="item in 10" :key="item">{{ item }}</div>
</div>
</div>
<img class="dir" src="../assets/image/dirright.png" alt="" />
<div class="select-item select-right">
<div class="select-title">楼层</div>
<div class="select-options">
<div class="btn2" v-for="item in 10" :key="item">{{ item }}</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="title-box">
<div class="title">设备分类</div>
<div class="style-line"></div>
</div>
<div class="option-box">
<div class="btn3 active">闸机</div>
<div class="btn3">监控</div>
</div>
</div>
</div>
<div class="bottom">
<div class="title-box">
<div class="title">设备型号</div>
<div class="style-line"></div>
</div>
<div class="option-box">
<div class="btn3 active2">MJ2332</div>
<div class="btn3">MJ2334</div>
</div>
</div>
<div class="bottom">
<div class="title-box">
<div class="title">车辆查询</div>
<div class="style-line"></div>
</div>
<div class="option-box">
<input type="text" class="input-word" placeholder="请输入文案" />
<div class="btn1 active">查询</div>
<div class="btn1">取消</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "xiaofang",
data() {
return {};
},
};
</script>
<style lang="less" scoped>
.xiaofang {
.top {
display: flex;
> div {
width: 50%;
}
.left {
padding-right: 30px;
box-sizing: border-box;
}
.top-item {
.select-box {
display: flex;
.dir {
position: relative;
top: 45px;
height: 19px;
flex-shrink: 0;
margin-left: 23px;
margin-right: 8px;
}
.select-item {
flex-shrink: 0;
.select-title {
font-size: 12px;
font-weight: 500;
color: #adbad0;
margin-bottom: 8px;
}
.select-options {
width: 130px;
height: 220px;
overflow-y: scroll;
.btn1,
.btn2 {
margin-bottom: 5px;
}
}
}
}
}
.right {
}
}
.option-box {
display: flex;
.input-word {
width: 475px;
height: 40px;
background: rgba(255, 255, 255, 0.6);
border: 1px solid #adbad0;
opacity: 0.6;
box-sizing: border-box;
padding-left: 12px;
}
> div {
margin-left: 12px;
}
}
.bottom {
margin-top: 20px;
}
}
</style>
\ No newline at end of file
src/views/tongxing.vue 0 → 100644
<template>
<div class="tongxing">
<section>
<div class="title-box">
<div class="title">模型楼栋楼层控制</div>
<div class="style-line"></div>
</div>
<div class="submit-box">
<div
class="btn1"
:class="{ active: index == activeIndex }"
@click="activeIndex = index"
v-for="(item, index) in btnList"
:key="index"
>
{{ item }}
</div>
</div>
</section>
<section>
<div class="title-box">
<div class="title">设备类型</div>
<div class="style-line"></div>
</div>
<div class="submit-box">
<div class="btn3 active2">门禁</div>
<div class="btn3">闸机</div>
</div>
</section>
<section>
<div class="title-box">
<div class="title">设备型号</div>
<div class="style-line"></div>
</div>
<div class="submit-box">
<div class="btn3 active2">MJ2332</div>
<div class="btn3">MJ2334</div>
</div>
</section>
</div>
</template>
<script>
export default {
name: "tongxing",
data() {
return {
activeIndex: 0,
btnList: ["全部楼栋", "S1", "S2", "S3", "S4", "N1", "N2", "N3", "N4"],
};
},
};
</script>
<style lang="less" scoped>
.tongxing {
section {
margin-bottom: 33px;
}
.submit-box {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
> div {
margin-right: 20px;
margin-bottom: 18px;
}
}
}
</style>
\ No newline at end of file
src/views/xiaofang.vue
......@@ -13,6 +13,13 @@
<div class="btn1" v-for="item in 10" :key="item">{{ item }}</div>
</div>
</div>
<img class="dir" src="../assets/image/dirright.png" alt="" />
<div class="select-item select-right">
<div class="select-title">楼层</div>
<div class="select-options">
<div class="btn2" v-for="item in 10" :key="item">{{ item }}</div>
</div>
</div>
</div>
</div>
<div class="right">
......@@ -20,6 +27,21 @@
<div class="title">设备分类</div>
<div class="style-line"></div>
</div>
<div class="option-box">
<div class="btn3 active">烟感</div>
<div class="btn3">温感</div>
<div class="btn3">消防栓</div>
</div>
</div>
</div>
<div class="bottom">
<div class="title-box">
<div class="title">设备型号</div>
<div class="style-line"></div>
</div>
<div class="option-box">
<div class="btn3 active2">MJ2332</div>
<div class="btn3">MJ2334</div>
</div>
</div>
</div>
......@@ -49,7 +71,17 @@ export default {
.top-item {
.select-box {
display: flex;
.dir {
position: relative;
top: 45px;
height: 19px;
flex-shrink: 0;
margin-left: 23px;
margin-right: 8px;
}
.select-item {
flex-shrink: 0;
.select-title {
font-size: 12px;
font-weight: 500;
......@@ -59,13 +91,27 @@ export default {
.select-options {
width: 130px;
height: 220px;
.btn1 {
overflow-y: scroll;
.btn1,
.btn2 {
margin-bottom: 5px;
}
}
}
}
}
.right {
}
}
.option-box {
display: flex;
> div {
margin-right: 12px;
}
}
.bottom {
margin-top: 30px;
}
}
</style>
\ No newline at end of file
src/views/yunying.vue 0 → 100644
<template>
<div class="homepage">
<section>
<div class="title-box">
<div class="title">页面切换</div>
<div class="style-line"></div>
</div>
<div class="submit-box">
<div
class="btn1"
:class="{ active: index == activeIndex }"
@click="activeIndex = index"
v-for="(item, index) in btnList"
:key="index"
>
{{ item }}
</div>
</div>
</section>
<section>
<div class="title-box">
<div class="title">设备类型</div>
<div class="style-line"></div>
</div>
<div class="submit-box">
<div class="btn3 active2">监控</div>
<div class="btn3">烟感</div>
<div class="btn3">温感</div>
</div>
</section>
<section>
<div class="title-box">
<div class="title">设备类型</div>
<div class="style-line"></div>
</div>
<div class="submit-box">
<div class="btn3 active2">JK-021</div>
<div class="btn3">JK-022</div>
<div class="btn3">JK-023</div>
</div>
</section>
</div>
</template>
<script>
export default {
name: "homepage",
data() {
return {
activeIndex: 0,
btnList: ["设备房", "工程管理"],
};
},
};
</script>
<style lang="less" scoped>
.homepage {
section {
margin-bottom: 33px;
}
.submit-box {
margin-top: 20px;
display: flex;
> div {
margin-right: 20px;
}
}
}
</style>
\ No newline at end of file
src/views/zhaoming.vue 0 → 100644
<template>
<div class="zhaoming">
<div class="top">
<div class="top-item left">
<div class="title-box">
<div class="title">模型楼栋楼层控制</div>
<div class="style-line"></div>
</div>
<div class="select-box">
<div class="select-item select-left">
<div class="select-title">楼栋</div>
<div class="select-options">
<div class="btn1" v-for="item in 10" :key="item">{{ item }}</div>
</div>
</div>
<img class="dir" src="../assets/image/dirright.png" alt="" />
<div class="select-item select-right">
<div class="select-title">楼层</div>
<div class="select-options">
<div class="btn2" v-for="item in 10" :key="item">{{ item }}</div>
</div>
</div>
</div>
</div>
<div class="right">
<section>
<div class="title-box">
<div class="title">光照效果</div>
<div class="style-line"></div>
</div>
<div class="option-box">
<div class="btn3 active">泛光效果</div>
</div>
</section>
<section>
<div class="title-box">
<div class="title">设备分类</div>
<div class="style-line"></div>
</div>
<div class="option-box">
<div class="btn3 active2">闸机</div>
<div class="btn3">监控</div>
</div>
</section>
</div>
</div>
<div class="bottom">
<div class="title-box">
<div class="title">设备型号</div>
<div class="style-line"></div>
</div>
<div class="option-box">
<div class="btn3 active2">MJ2332</div>
<div class="btn3">MJ2334</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "zhaoming",
data() {
return {};
},
};
</script>
<style lang="less" scoped>
.zhaoming {
.top {
display: flex;
> div {
width: 50%;
}
.left {
padding-right: 30px;
box-sizing: border-box;
}
.top-item {
.select-box {
display: flex;
.dir {
position: relative;
top: 45px;
height: 19px;
flex-shrink: 0;
margin-left: 23px;
margin-right: 8px;
}
.select-item {
flex-shrink: 0;
.select-title {
font-size: 12px;
font-weight: 500;
color: #adbad0;
margin-bottom: 8px;
}
.select-options {
width: 130px;
height: 220px;
overflow-y: scroll;
.btn1,
.btn2 {
margin-bottom: 5px;
}
}
}
}
}
.right {
section {
margin-bottom: 27px;
}
}
}
.option-box {
display: flex;
> div {
margin-right: 12px;
}
}
.bottom {
margin-top: 30px;
}
}
</style>
\ No newline at end of file
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 sign in to comment