Commit d3988e2f authored by zhanglw's avatar zhanglw

前台页面移动端浏览器显示适配

parent 6f2f8131
ENV = 'development'
# 接口地址
VUE_APP_BASE_API = 'http://192.168.3.23:7001'
VUE_APP_WS_API = 'ws://192.168.3.23:7001'
#VUE_APP_BASE_API = 'http://192.168.3.23:7001'
#VUE_APP_WS_API = 'ws://192.168.3.23:7001'
#VUE_APP_BASE_API = 'http://60.217.78.224:7001'
#VUE_APP_WS_API = 'ws://60.217.78.224:7001'
VUE_APP_BASE_API = 'http://60.217.78.224:7001'
VUE_APP_WS_API = 'ws://60.217.78.224:7001'
# 是否启用 babel-plugin-dynamic-import-node插件
VUE_CLI_BABEL_TRANSPILE_MODULES = true
......@@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= webpackConfig.name %></title>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=686ljhxEzzmQTsn2nYUnngIYKZfLTVsm"></script>
......
......@@ -9,32 +9,6 @@
font-family: Source Han Sans CN;
src: url("./font/SourceHanSansCN-Regular.otf");
}
::-webkit-scrollbar {
/*滚动条整体样式*/
width : 4px; /*高宽分别对应横竖滚动条的尺寸*/
height: 0;
}
::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius : 4px;
background-color: #1961C5;
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
}
::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
background : #ededed;
border-radius: 10px;
}
body {
height: 100%;
......@@ -56,9 +30,71 @@ html {
img {
-webkit-user-drag: none;
}
#app {
@media screen and (max-width: 1530px) {
::-webkit-scrollbar {
width : 0;
height: 0;
}
#app {
height: 100%;
width: 1920px;
overflow-x: hidden;
}
.head-box {
width: 1920px;
position: absolute;
}
.head-box-login {
width: 1920px;
position: absolute;
}
.fixed-View {
position: absolute;
left: 1380px
}
}
@media screen and (min-width: 1530px) {
::-webkit-scrollbar {
/*滚动条整体样式*/
width : 4px; /*高宽分别对应横竖滚动条的尺寸*/
height: 0;
}
::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius : 4px;
background-color: #1961C5;
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
}
::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
background : #ededed;
border-radius: 10px;
}
#app {
height: 100%;
}
.head-box {
width: 100%;
position: fixed;
}
.head-box-login {
width: 100%;
position: fixed;
}
.fixed-View {
position: fixed;
right: 8vw;
}
}
*,
......
......@@ -165,12 +165,10 @@ export default {
cursor: grabbing;
}
.fixed-View {
position: fixed;
margin-left: 0;
padding: 20px;
width: 348px;
height: 442px;
right: 8vw;
bottom: 230px;
background: #FFFFFF;
border: 1px solid rgba(0,0,0,0.12);
......
......@@ -207,9 +207,7 @@ export default {
}
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
......
......@@ -172,9 +172,7 @@ export default {
text-overflow: ellipsis;
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
......
......@@ -181,9 +181,7 @@ export default {
text-overflow: ellipsis;
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
......
......@@ -128,9 +128,7 @@ export default {
text-overflow: ellipsis;
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
......
......@@ -256,9 +256,7 @@ export default {
}
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
......
......@@ -265,9 +265,7 @@ export default {
border-radius: 10px;
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
......
......@@ -218,9 +218,7 @@ export default {
}
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
......
......@@ -416,9 +416,7 @@ export default {
border-radius: 10px;
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
......
......@@ -174,9 +174,7 @@ export default {
}
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
......
......@@ -216,9 +216,7 @@ export default {
border-radius: 10px;
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
......
......@@ -169,9 +169,7 @@ export default {
}
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
......
......@@ -217,9 +217,7 @@ export default {
border-radius: 10px;
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
......
<template>
<div class="page-body">
<div class="head-box">
<div class="head-box-home">
<div class="head-box-top">
<div class="top-call" />
<div class="top-call"><img src="@/assets/home_images/cisnet_logo.png"></div>
......@@ -513,8 +513,8 @@ export default {
}
}
}
.head-box {
width: 100vw;
.head-box-home {
width: 100%;
height: 750px;
background: #1961C5;
.head-box-top {
......
<template>
<div>
<custom-table :col="col" :data="data" :span-method="arraySpanMethod" />
</div>
</template>
<script>
import CustomTable from '@/components/CustomTable'
/*
*/
export default {
components: {
CustomTable
},
data() {
return {
col: [
{
prop: 'date',
label: '日期'
},
{
label: '配送信息',
children: [
{
prop: 'name',
label: '姓名'
},
{
label: '地址',
children: [
{
prop: 'province',
label: '省份'
},
{
prop: 'city',
label: '市区'
},
{
prop: 'address',
label: '地址'
}
]
}
]
}
],
data: [
{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
span: [
[1, 2], [1, 0], [2, 1], [1, 1], [1, 1]
]
},
{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
span: [
[1, 1], [1, 1], [0, 1], [1, 1], [1, 1]
]
}
]
}
},
methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
return row.span[columnIndex]
}
}
}
</script>
<style>
</style>
......@@ -187,9 +187,7 @@ export default {
}
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
......
......@@ -242,9 +242,7 @@ export default {
}
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
......
......@@ -387,9 +387,7 @@ export default {
text-underline-offset: 5px; //下划线和文字间距
}
.head-box-login {
width: 100vw;
background: #1961C5;
position: fixed;
z-index: 999;
.head-box-top {
display: flex;
......@@ -408,7 +406,7 @@ export default {
}
}
.content-box-login {
width: 100vw;
width: 100%;
height: 100vh;
display: table;
background: #1961C5;
......
......@@ -261,9 +261,7 @@ export default {
text-overflow: ellipsis;
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
......
......@@ -307,9 +307,7 @@ export default {
}
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
......
......@@ -342,9 +342,7 @@ export default {
text-overflow: ellipsis;
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
......
......@@ -219,9 +219,7 @@ export default {
}
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
......
......@@ -281,9 +281,7 @@ export default {
border-radius: 10px;
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
......
......@@ -183,9 +183,7 @@ export default {
}
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
......
......@@ -213,9 +213,7 @@ export default {
border-radius: 10px;
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
......
......@@ -504,9 +504,7 @@ export default {
border-radius: 10px;
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
......
......@@ -173,9 +173,7 @@ export default {
}
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
......
......@@ -491,9 +491,7 @@ export default {
}
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
......
......@@ -328,9 +328,7 @@ export default {
}
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
......
......@@ -158,25 +158,5 @@ export default {
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.logo{
position: fixed;
background-color: #333;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.6;
}
.zck{
position: fixed;
height: 545px;
width: 947px;
top: 10px;
left: 197px;
background-color: white;
}
.sm{
background-color: lightgrey;
height: 31px;
}
</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