Skip to content

huarun-binjiang-ipad / ipad

Go to a project
Commit 335ad76e by liuwange1
Options

first

parent 4463dd1c
Showing with 493 additions and 54 deletions
package-lock.json
...@@ -8774,6 +8774,15 @@ ...@@ -8774,6 +8774,15 @@
} }
} }
}, },
"postcss-pxtorem": {
"version": "5.1.1",
"resolved": "https://registry.nlark.com/postcss-pxtorem/download/postcss-pxtorem-5.1.1.tgz",
"integrity": "sha1-GYpowQ+a0tQjcO9mKZ17MWj4z/o=",
"dev": true,
"requires": {
"postcss": "^7.0.27"
}
},
"postcss-reduce-initial": { "postcss-reduce-initial": {
"version": "4.0.3", "version": "4.0.3",
"resolved": "https://registry.nlark.com/postcss-reduce-initial/download/postcss-reduce-initial-4.0.3.tgz", "resolved": "https://registry.nlark.com/postcss-reduce-initial/download/postcss-reduce-initial-4.0.3.tgz",
......
package.json
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
"eslint-plugin-vue": "^6.2.2", "eslint-plugin-vue": "^6.2.2",
"less": "^3.0.4", "less": "^3.0.4",
"less-loader": "^5.0.0", "less-loader": "^5.0.0",
"postcss-pxtorem": "^5.1.1",
"vue-template-compiler": "^2.6.11" "vue-template-compiler": "^2.6.11"
} }
} }
postcss.config.js 0 → 100644
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 16, //结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
propList: ['*']
}
}
}
\ No newline at end of file
src/App.vue
<template> <template>
<div id="app"> <div class="home">
<div id="nav"> <header>
<router-link to="/">Home</router-link> | <img src="./assets/image/logo.png" alt="" />
<router-link to="/about">About</router-link> <p>上海滨江中心IOC大屏控制台</p>
</div> </header>
<router-view/> <main>
<div class="left-nav">
<div class="nav-box">
<div
class="item"
v-for="(item, index) in navList"
:key="index"
:class="{ active: index == activeIndex }"
:style="{ left: getLeftDistance(index) + 'px' }"
@click="navClickHandle(index)"
>
<div class="border top"></div>
<div class="border bottom"></div>
<div class="out-img-box">
<div
class="img-box"
:style="{ backgroundImage: 'url(' + item.url + ')' }"
></div>
</div>
<p>{{ item.label }}</p>
</div>
</div>
</div>
<div class="right">
<router-view />
</div>
</main>
</div> </div>
</template> </template>
<script>
// @ is an alias to /src
export default {
name: "Home",
components: {},
data() {
return {
navList: [
{
url: require("./assets/image/icon1.png"),
label: "欢迎页",
routerName: "welcome",
},
{
url: require("./assets/image/icon2.png"),
label: "首页",
routerName: "homepage",
},
{
url: require("./assets/image/icon3.png"),
label: "智慧消防",
routerName: "xiaofang",
},
{
url: require("./assets/image/icon4.png"),
label: "智慧安防",
},
{
url: require("./assets/image/icon5.png"),
label: "智慧能源",
},
{
url: require("./assets/image/icon6.png"),
label: "智慧运营",
},
{
url: require("./assets/image/icon7.png"),
label: "智慧照明",
},
{
url: require("./assets/image/icon8.png"),
label: "智慧电梯",
},
{
url: require("./assets/image/icon9.png"),
label: "智慧通行",
},
{
url: require("./assets/image/icon10.png"),
label: "智慧环境",
},
{
url: require("./assets/image/icon11.png"),
label: "智慧停车",
},
],
activeIndex: 0,
};
},
methods: {
getLeftDistance(index) {
if (index <= 2) {
return index * 10;
} else if (index > 6) {
return (10 - index) * 10;
} else {
return 30;
}
},
navClickHandle(index) {
this.activeIndex = index;
let routerName = this.navList[index].routerName;
if (routerName && routerName != this.$route.name) {
this.$router.push({ name: routerName });
}
},
},
};
</script>
<style lang="less"> <style lang="less">
#app { * {
font-family: Avenir, Helvetica, Arial, sans-serif; padding: 0;
-webkit-font-smoothing: antialiased; margin: 0;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
} }
</style>
<style lang="less" scoped>
.home {
width: 100vw;
height: 100vh;
background: url(./assets/image/bg.png);
header {
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 25px;
box-sizing: border-box;
width: 100vw;
height: 70px;
background: rgba(255, 255, 255, 0.2);
img {
height: 100%;
}
p {
font-size: 22px;
font-weight: 400;
color: #737780;
line-height: 70px;
}
}
#nav { main {
padding: 30px; display: flex;
align-items: center;
a { width: 1000px;
font-weight: bold; height: 622px;
color: #2c3e50; .left-nav {
display: flex;
&.router-link-exact-active { align-items: center;
color: #42b983; flex-shrink: 0;
width: 214px;
height: 525px;
border-bottom: 2px solid #c9d3e5;
border-image: linear-gradient(
to right,
rgba(201, 211, 229, 1),
rgba(201, 211, 229, 0)
)
1 10;
background: linear-gradient(
to right,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0) 100%
);
.nav-box {
.item {
position: relative;
display: flex;
align-items: center;
height: 40px;
width: 170px;
padding-left: 33px;
box-sizing: border-box;
margin: 6px 0;
.border {
position: absolute;
left: 0;
width: 0%;
height: 3px;
transition: 0.3s;
background-image: url(./assets/image/border.png);
background-size: 80% 100%;
background-repeat: no-repeat;
}
.top {
top: 0;
background-position-x: 60%;
}
.bottom {
background-position-x: -20%;
bottom: 0;
}
.out-img-box {
height: 16px;
width: 16px;
overflow: hidden;
display: inline-block;
}
.img-box {
height: 16px;
width: 16px;
background-size: 100%;
background-repeat: no-repeat;
}
p {
font-size: 15px;
font-weight: 600;
color: #737780;
margin-left: 11px;
}
&.active {
.top,
.bottom {
width: 100%;
}
background: linear-gradient(
to right,
rgba(224, 99, 55, 0) 0%,
rgba(224, 99, 55, 0.2) 50%,
rgba(224, 99, 55, 0) 100%
);
.img-box {
position: relative;
left: -16px;
filter: drop-shadow(16px 0 0 rgba(224, 99, 55, 1));
}
p {
color: rgba(224, 99, 55, 1);
font-size: 18px;
}
}
}
}
}
.right {
width: 875px;
height: 622px;
background: url("./assets/image/rightbg.png") no-repeat;
background-size: 100% 100%;
flex-shrink: 0;
position: relative;
left: -85px;
padding-top: 40px;
padding-left: 100px;
padding-right: 30px;
box-sizing: border-box;
} }
} }
} }
......
src/assets/css/style.css 0 → 100644
.title {
width: 145px;
height: 40px;
background-image: url('../image/btnbg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
font-size: 12px;
font-weight: 600;
color: #737780;
text-align: center;
line-height: 40px;
padding-right: 20px;
box-sizing: border-box;
flex-shrink: 0;
}
.title-box {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.style-line {
width: 100%;
height: 2px;
background: #ADBAD0;
opacity: 0.4;
}
.btn1 {
width: 111px;
height: 40px;
background: rgba(255, 255, 255, 0.2);
background-image: url('../image/title2-bg.png');
background-size: 100% 100%;
text-align: center;
line-height: 40px;
font-size: 14px;
font-weight: 400;
color: #838A99;
}
.btn1.active {
background-image: url('../image/title2-bg-active.png');
color: rgba(224, 99, 55, 1);
}
\ No newline at end of file
src/main.js
...@@ -2,6 +2,8 @@ import Vue from 'vue' ...@@ -2,6 +2,8 @@ import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import store from './store' import store from './store'
import './utils/rem'
import './assets/css/style.css'
Vue.config.productionTip = false Vue.config.productionTip = false
......
src/router/index.js
import Vue from 'vue' import Vue from 'vue'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import Home from '../views/Home.vue' import welcome from '../views/welcome.vue'
Vue.use(VueRouter) Vue.use(VueRouter)
const routes = [ const routes = [
{ {
path: '/', path: '/',
name: 'Home', name: 'welcome',
component: Home component: welcome
}, },
{ {
path: '/about', path: '/homepage',
name: 'About', name: 'homepage',
// route level code-splitting component: () => import('../views/homepage.vue')
// this generates a separate chunk (about.[hash].js) for this route },
// which is lazy-loaded when the route is visited. {
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') path: '/xiaofang',
} name: 'xiaofang',
component: () => import('../views/xiaofang.vue')
},
] ]
const router = new VueRouter({ const router = new VueRouter({
......
src/utils/rem.js 0 → 100644
(function() {
function resize() {
let baseFontSize = 16;
let designWidth = 1024;
let windowWidth = window.innerWidth;
let currentFontSize = baseFontSize * windowWidth / designWidth;
document.querySelector('html').style.fontSize = currentFontSize + 'px';
}
window.onresize = function() {
resize();
}
resize();
})()
\ No newline at end of file
src/views/About.vue deleted 100644 → 0
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
src/views/Home.vue deleted 100644 → 0
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
components: {
HelloWorld
}
}
</script>
src/views/homepage.vue 0 → 100644
<template>
<div class="homepage">
<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>
</div>
</template>
<script>
export default {
name: "homepage",
data() {
return {
activeIndex: 0,
btnList: ["写字楼", "商业配套", "数据概览"],
};
},
};
</script>
<style lang="less" scoped>
.homepage {
.submit-box {
margin-top: 20px;
display: flex;
.btn1 {
margin-right: 20px;
}
}
}
</style>
\ No newline at end of file
src/views/welcome.vue 0 → 100644
<template>
<div class="welcome">
<div class="title-box">
<div class="title">欢迎语编辑</div>
<div class="style-line"></div>
</div>
<input type="text" class="input-word" placeholder="请输入文案" />
<div class="submit-box">
<div class="btn1">保存</div>
<div class="btn1 active">编辑</div>
</div>
</div>
</template>
<style lang="less" scoped>
.welcome {
.input-word {
width: 746px;
height: 40px;
background: rgba(255, 255, 255, 0.6);
border: 1px solid #adbad0;
opacity: 0.6;
box-sizing: border-box;
padding-left: 12px;
}
.submit-box {
margin-top: 20px;
display: flex;
.btn1 {
margin-right: 20px;
}
}
}
</style>
\ No newline at end of file
src/views/xiaofang.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>
</div>
</div>
<div class="right">
<div class="title-box">
<div class="title">设备分类</div>
<div class="style-line"></div>
</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 {
.select-item {
.select-title {
font-size: 12px;
font-weight: 500;
color: #adbad0;
margin-bottom: 8px;
}
.select-options {
width: 130px;
height: 220px;
.btn1 {
margin-bottom: 5px;
}
}
}
}
}
}
}
</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