Skip to content

A
apaas-ui
Commit fb362363 authored by 张俊's avatar 张俊
Browse files
Options

搭建整体样式

parent 274386dd
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 357 additions and 22 deletions
index.html
View file @ fb362363
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>宁乡智慧商圈app</title> <title>BD-aPaaS平台</title>
<link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico" /> <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico" />
</head> </head>
......
src/App.vue
View file @ fb362363
<template> <template>
<div id="app"> <div id="app">
<bd-menu class="outmenu"></bd-menu>
<router-view /> <router-view />
</div> </div>
</template> </template>
<script> <script>
import bdMenu from './components/menu'
export default { export default {
data: () => ({}), data: () => ({}),
components:{
bdMenu
},
methods: { methods: {
windowResize() {
const remSize = 20; // 1rem === 20px
const rect = document.body.getBoundingClientRect();
const fontSize = (Math.min(rect.width, rect.height) / 720) * remSize;
document.documentElement.style.fontSize = fontSize + "px";
},
initRem() {
this.windowResize();
window.addEventListener("resize", this.windowResize, false);
}
}, },
created() { created() {
this.initRem();
} }
}; };
</script> </script>
<style scoped>
.outmenu{
position: fixed;
top: 0;
left: 0;
}
#app{
background-color: #f6f7fb;
}
</style>
src/assets/css/index.css
View file @ fb362363
/* reset */ /* reset */
html { html {
height: 100%;
} }
body { body {
height: 100%;
margin: 0; margin: 0;
font-family: PingFangSC-Regular, sans-serif; font-family: PingFangSC-Regular, sans-serif;
font-size: 1rem; font-size: 1rem;
...@@ -24,12 +23,16 @@ h5 { ...@@ -24,12 +23,16 @@ h5 {
margin: 0; margin: 0;
font-weight: normal; font-weight: normal;
} }
div{
box-sizing: border-box;
}
/* reset end */ /* reset end */
/* common */ /* common */
#app { #app {
height: 100%; /* height: 100%; */
overflow: hidden; /* overflow: hidden; */
} }
.text_clip { .text_clip {
overflow: hidden; overflow: hidden;
......
src/assets/imgs/btn_blue.svg deleted 100644 → 0
View file @ 274386dd
This diff is collapsed.
src/assets/imgs/img_card.svg deleted 100644 → 0
View file @ 274386dd
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672 301"><defs><style>.cls-1{fill:#fff;}.cls-1,.cls-2{fill-rule:evenodd;}.cls-2{fill:#f4f7fc;}</style></defs><title>ic_画板 3</title><path class="cls-1" d="M658,59H252.75c-8.84,0-21.28-5.28-27.79-11.79L189.54,11.79C183,5.28,170.59,0,161.75,0H14A14,14,0,0,0,0,14V287a14,14,0,0,0,14,14H658a14,14,0,0,0,14-14V73A14,14,0,0,0,658,59Z"/><path class="cls-2" d="M658,59H252.75c-8.84,0-21.28-5.28-27.79-11.79L189.54,11.79C183,5.28,170.59,0,161.75,0H14A14,14,0,0,0,0,14V231H672V73A14,14,0,0,0,658,59Z"/></svg>
\ No newline at end of file
src/assets/imgs/img_comment_bg.svg deleted 100644 → 0
View file @ 274386dd
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672 839"><defs><style>.cls-1{fill:none;}.cls-2{fill:#fff;fill-rule:evenodd;}</style></defs><title>ic_画板 4</title><path class="cls-1" d="M658,59H252.75c-8.84,0-21.28-5.28-27.79-11.79L189.54,11.79C183,5.28,170.59,0,161.75,0H14A14,14,0,0,0,0,14V825a14,14,0,0,0,14,14H658a14,14,0,0,0,14-14V73A14,14,0,0,0,658,59Z"/><path class="cls-2" d="M658,59H252.75c-8.84,0-21.28-5.28-27.79-11.79L189.54,11.79C183,5.28,170.59,0,161.75,0H14A14,14,0,0,0,0,14V825a14,14,0,0,0,14,14H658a14,14,0,0,0,14-14V73A14,14,0,0,0,658,59Z"/></svg>
\ No newline at end of file
src/components/menu.vue 0 → 100644
View file @ fb362363
<template>
<div class="menu">
<img src="../assets/imgs/home_img_logo.png" alt="" class="logo">
<span class="user">用户</span>
<img src="../assets/imgs/home_ic_user.png" alt="" class="user_pic">
<div class="number">99+</div>
<img src="../assets/imgs/home_ic_shop.png" alt="" class="car">
<div style="float:right">
<div v-for="(item,index) in menu_arr" :key="index+200" class="menu_box" @click="now_menu = index" :style="now_menu==index?{color:'#fff'}:{}">{{item}}
<div class="bottom_show" v-if="now_menu==index"></div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
menu_arr:['工作台','技术支持','服务超市'],
now_menu:0,
}
}
}
</script>
<style scoped>
.menu{
width: 100%;
height: 84px;
background-color: #0f2683;
color: #8390ee;
line-height: 84px;
}
.logo{
float: left;
margin: 30px 0 0 40px;
}
.user{
float: right;
margin-right: 113px;
font-size: 16px;
}
.user_pic{
float: right;
margin-right: 15px;
margin-top: 30px;
}
.number{
float: right;
margin-right: 43px;
margin-top: 30px;
width: 40px;
height: 22px;
background-color: #e56600;
border-radius: 11px;
color: #fcefd6;
line-height: 22px;
text-align: center;
}
.car{
float: right;
margin-right: 15px;
margin-top: 30px;
}
.menu_box{
float: right;
width: 185px;
text-align: center;
cursor: pointer;
position: relative;
}
.menu_box:nth-of-type(1){
margin-right: 52px;
}
.bottom_show{
width: 24px;
height: 5px;
background-color: #e56600;
border-radius: 3px;
position: absolute;
bottom: 0px;
left: calc(50% - 12px);
}
</style>
\ No newline at end of file
src/pages/index.vue
View file @ fb362363
<template> <template>
<div class="index_container"> <div class="index_container">
<router-view /> <div class="decor"></div>
<router-view class="contain" />
</div> </div>
</template> </template>
...@@ -12,8 +13,19 @@ export default { ...@@ -12,8 +13,19 @@ export default {
<style scoped> <style scoped>
.index_container { .index_container {
height: 100%; margin-top: 84px;
min-height: 200px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
} }
.decor{
width: 100%;
height: 174px;
background-color: #0f2683;
}
.contain{
width: 1200px;
margin: 0 auto;
margin-top: -157px;
}
</style> </style>
src/pages/workPlace.vue 0 → 100644
View file @ fb362363
<template>
<div>
<div class="person_info">
<div class="preson">
<div class="person_text">
<img src="../assets/imgs/img_head.png" alt="">
<span>你好，{{person}}！最近登录{{login_time}}</span>
</div>
<div class="person_menu">管理功能&nbsp;&nbsp;&nbsp; <img src="../assets/imgs/home_ic_more_w.png" alt=""></div>
</div>
<div class="menu">
<div :class="now_user==0?'menu_box0':now_user==1?'menu_box1':'menu_box2'" v-for="(item,index) in menu_arr[now_user]" :key="index+100" >
<img :src="item.pic" alt="">
<div class="menu_text">
<p>{{item.text}}</p>
<p :style="index == menu_arr[now_user].length - 1||now_user==1&&index==0?{color:item.color,marginRight:'-20px'}:{color:item.color}"><span style="font-size:36px">{{item.num}}</span><span v-if="index == menu_arr[now_user].length - 1||now_user==1&&index==0">万</span></p>
</div>
</div>
</div>
</div>
<div class="case_box">
<div class="data_asy">
<p style="margin-top:20px;margin-bottom:10px;">数据分析中心 <img style="vertical-align:-9px;" src="../assets/imgs/home_btn_enter.png" alt=""></p>
<div class="data_charts">
<div class="data_charts_left">
<p><span></span> 服务健康状态</p>
<div :id="health"></div>
</div>
<div class="data_charts_right">
<p><span></span> 服务运营分析</p>
<div :id="yy_asy"></div>
</div>
</div>
</div>
<div class="online_tool"></div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
person:'康先生',
login_time:'2020-03-12 10:21:22',
now_user:0,
health:'',
yy_asy:"",
menu_arr:[
[
{
text:'服务总数',
pic:require('../assets/imgs/ic_fuwuzs_navy.png'),
bg:'#e6ebfe',
color:'#515fe7',
num:'12,332',
},
{
text:'应用总数',
pic:require('../assets/imgs/ic_yingyongzs.png'),
bg:'#e5f4fe',
color:'#38aef9',
num:'223',
},
{
text:'收益总额',
pic:require('../assets/imgs/ic_shouyize.png'),
bg:'#fcefd6',
color:'#ea7d19',
num:'￥2,312',
},
],
[
{
text:'收益总额',
pic:require('../assets/imgs/ic_shouyize.png'),
bg:'#fcefd6',
color:'#ea7d19',
num:'￥2,312',
},
{
text:'服务总数',
pic:require('../assets/imgs/ic_fuwuzs_navy.png'),
bg:'#e6ebfe',
color:'#515fe7',
num:'12,332',
},
{
text:'应用总数',
pic:require('../assets/imgs/ic_yingyongzs.png'),
bg:'#e5f4fe',
color:'#38aef9',
num:'223',
},
{
text:'收益总额',
pic:require('../assets/imgs/ic_shouyize.png'),
bg:'#fcefd6',
color:'#ea7d19',
num:'￥2,312',
},
],
],
}
}
}
</script>
<style scoped>
.person_info{
width: 1200px;
height: 206px;
background-color: #ffffff;
box-shadow: 0px 3px 6px 0px
#f4f7fc;
border-radius: 12px;
padding: 20px;
}
.preson{
width: 100%;
height: 52px;
line-height: 52px;
border-bottom: 2px solid #f4f7fc;
}
.person_text{
float: left;
padding: 0 10px;
}
.person_text img{
border-radius: 18px;
margin-right: 10px;
vertical-align: -10px;
}
.person_menu{
float: right;
width: 100px;
height: 32px;
line-height: 32px;
text-align: center;
background-color: #e56600;
border-radius: 8px;
color: #fff;
cursor: pointer;
margin-top: 10px;
}
.menu{
width: 100%;
height: 102px;
margin-top: 20px;
}
.menu_box0,.menu_box1{
float: left;
width: calc((100% - 60px)/3);
margin-right: 30px;
width: 366px;
height: 92px;
background-color: #e6ebfe;
border-radius: 12px 12px 12px 46px;
}
.menu_box0:nth-last-of-type(1),.menu_box1:nth-last-of-type(1){
margin-right: 0px;
}
.menu_box1{
width: calc((100% - 60px)/4);
margin-right: 20px;
}
.menu img{
float: left;
margin: 28px 0 0 28px;
}
.menu .menu_text{
float: right;
margin-top: 15px;
margin-right: 29px;
}
.menu_text p{
text-align: right;
}
.case_box{
width: 100%;
overflow: hidden;
}
.data_asy{
width: 720px;
float: left;
margin-right: 20px;
}
.data_charts{
width: 720px;
height: 270px;
background-color: #ffffff;
box-shadow: 0px 3px 6px 0px
#f4f7fc;
border-radius: 12px;
padding: 20px;
}
.data_charts_left{
height: 100%;
width: 220px;
float: left;
}
.data_charts_right{
height: 100%;
width: 420px;
float: right;
}
.data_charts_left p,.data_charts_right p{
font-size: 16px;
color: #707693;
}
.data_charts_left p span,.data_charts_right p span{
width: 8px;
height: 8px;
background-color: #515fe7;
border-radius: 4px;
display: inline-block;
margin-right: 5px;
}
</style>
\ No newline at end of file
src/router/index.js
View file @ fb362363
...@@ -2,6 +2,7 @@ import Vue from "vue"; ...@@ -2,6 +2,7 @@ import Vue from "vue";
import Router from "vue-router"; import Router from "vue-router";
import Index from "@/pages/index"; import Index from "@/pages/index";
import workPlace from "@/pages/workPlace"
Vue.use(Router); Vue.use(Router);
export default new Router({ export default new Router({
...@@ -14,6 +15,12 @@ export default new Router({ ...@@ -14,6 +15,12 @@ export default new Router({
path: "/index", path: "/index",
name: "index", name: "index",
component: Index, component: Index,
redirect: "/workplace",
children:[{
path: "/workplace",
name: "workPlace",
component: workPlace,
}]
} }
] ]
}); });
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