Skip to content

N
NewTruckTerminalSyetem
Commit fa964e51 authored by xxx's avatar xxx
Browse files
Options

1

parent 1636ef18
Show whitespace changes
Inline Side-by-side
Showing with 802 additions and 396 deletions
src/views/Login.vue
View file @ fa964e51
......@@ -13,7 +13,7 @@
<el-input
v-model="loginForm.username"
id="userInp"
placeholder="输入你的用户名"
placeholder="输入用户名"
@focus="showkey('username')"
></el-input>
</el-form-item>
......@@ -25,7 +25,7 @@
type="password"
v-model="loginForm.password"
id="passWordInp"
placeholder="输入你的密码"
placeholder="输入密码"
@focus="showkey('password')"
></el-input>
</el-form-item>
......@@ -166,24 +166,127 @@ export default {
</script>
<style>
* {
margin: 0;
padding: 0;
}
.keyboardStyle{
@media screen and (max-width:901px) {
.backGround {
padding-top: 2vh;
box-sizing: border-box;
height: 100vh;
width: 100vw;
background-image: url("../assets/imgs/bg.png");
}
.projectName{
text-align: center;
font-size: 40px;
font-weight: 600;
background-image:-webkit-linear-gradient(bottom,rgb(36,162,254),rgb(255,255,255));
background-clip:text;
-webkit-text-fill-color:transparent;
letter-spacing: 3px;
}
.loginBody{
position: relative;
padding-top: 9vh;
box-sizing: border-box;
margin: 0 auto;
width: 70%;
height: 90%;
background-image: url("../assets/imgs/kuang.png");
background-size: 100% 110%;
margin-top: -5vh;
}
.loginTitle{
margin-left: 4vw;
text-align: center;
font-size: 19px;
color:rgb(47,213,255);
letter-spacing: 6px;
}
.loginText{
margin-top: 20px;
margin-left: 50px;
text-align: center;
font-size: 30px;
color:rgb(151,227,244);
letter-spacing: 6px;
margin-bottom: 10px;
}
.loginInoputs{
margin-top: 8vh;
position: absolute;
top:0;
left: 0;
z-index: 100;
right: 6vw;
}
.userInpBody{
padding: 2px;
border: 1px solid rgb(18,70,113);
margin-bottom: 20px;
}
.el-form-item__content{
display: flex;
width: 25vw;
}
.userIcon{
padding: 11px;
box-sizing: border-box;
width: 50px;
height: 50px;
background-color: rgb(18,70,113);
}
#userInp{
height: 100%;
width: 100%;
background: none;
outline: none;
border: none;
font-size: 20px;
color: rgb(47,213,255);
}
/* .el-input input::-webkit-input-placeholder {
color:rgb(47,213,255);
} */
.passWordInpBody{
display: flex;
padding: 2px;
border: 1px solid rgb(18,70,113);
margin-bottom: 50px;
}
.passWordIcon{
padding: 11px;
box-sizing: border-box;
width: 50px;
height: 50px;
background-color: rgb(18,70,113);
}
#passWordInp{
height: 100%;
width: 80%;
background: none;
outline: none;
border: none;
font-size: 20px;
color: rgb(47,213,255);
letter-spacing: 2px;
}
.loginBtn{
width: 100%;
height: 10vh;
font-size: 17px;
background-color:rgb(24,180,255);
border: 0px;
color: white;
letter-spacing: 10px;
cursor: pointer;
}
}
.backGround {
@media screen and (min-width:901px) {
.backGround {
padding-top: 50px;
box-sizing: border-box;
height: 100vh;
width: 100vw;
background-image: url("../assets/imgs/bg.png");
}
.projectName{
}
.projectName{
text-align: center;
font-size: 70px;
font-weight: 600;
......@@ -191,25 +294,25 @@ export default {
background-clip:text;
-webkit-text-fill-color:transparent;
letter-spacing: 3px;
}
.loginBody{
}
.loginBody{
position: relative;
padding-top: 60px;
padding-top: 9vh;
box-sizing: border-box;
margin: 0 auto;
width: 75%;
height: 90%;
background-image: url("../assets/imgs/kuang.png");
background-size: 100% 100%;
}
.loginTitle{
}
.loginTitle{
margin-left: 50px;
text-align: center;
font-size: 25px;
color:rgb(47,213,255);
letter-spacing: 6px;
}
.loginText{
}
.loginText{
margin-top: 20px;
margin-left: 50px;
text-align: center;
......@@ -217,30 +320,28 @@ export default {
color:rgb(151,227,244);
letter-spacing: 6px;
margin-bottom: 10px;
}
.loginInoputs{
margin-top: 80px;
}
.loginInoputs{
margin-top: 15vh;
position: absolute;
right: 100px;
width: 340px;
height: 300px;
}
.userInpBody{
right: 13vh;
}
.userInpBody{
padding: 2px;
border: 1px solid rgb(18,70,113);
margin-bottom: 20px;
}
.el-form-item__content{
}
.el-form-item__content{
display: flex;
}
.userIcon{
}
.userIcon{
padding: 11px;
box-sizing: border-box;
width: 50px;
height: 50px;
background-color: rgb(18,70,113);
}
#userInp{
}
#userInp{
height: 100%;
width: 100%;
background: none;
......@@ -249,24 +350,24 @@ export default {
font-size: 20px;
color: rgb(47,213,255);
letter-spacing: 2px;
}
/* .el-input input::-webkit-input-placeholder {
}
/* .el-input input::-webkit-input-placeholder {
color:rgb(47,213,255);
} */
.passWordInpBody{
} */
.passWordInpBody{
display: flex;
padding: 2px;
border: 1px solid rgb(18,70,113);
margin-bottom: 50px;
}
.passWordIcon{
}
.passWordIcon{
padding: 11px;
box-sizing: border-box;
width: 50px;
height: 50px;
background-color: rgb(18,70,113);
}
#passWordInp{
}
#passWordInp{
height: 100%;
width: 80%;
background: none;
......@@ -275,8 +376,8 @@ export default {
font-size: 20px;
color: rgb(47,213,255);
letter-spacing: 2px;
}
.loginBtn{
}
.loginBtn{
width: 100%;
height: 60px;
font-size: 26px;
......@@ -285,5 +386,18 @@ export default {
color: white;
letter-spacing: 10px;
cursor: pointer;
}
}
* {
margin: 0;
padding: 0;
}
.keyboardStyle{
position: absolute;
top:0;
left: 0;
z-index: 100;
}
</style>
\ No newline at end of file
src/views/MLargeScreen/index.vue
View file @ fa964e51
......@@ -532,19 +532,20 @@ export default {
</script>
<style scope>
.mapcontainer {
@media screen and (max-width:901px){
.mapcontainer {
height: 100vh;
width: 100vw;
top: 0px;
position: absolute;
overflow: hidden;
}
.mianViews{
}
.mianViews{
width: 100vw;
height: 100vh;
overflow: hidden;
}
.topViews{
}
.topViews{
position: absolute;
top: 0px;
z-index: 1;
......@@ -556,16 +557,16 @@ export default {
align-items: center;
padding: 0px 20px;
box-sizing: border-box;
}
.topTitle{
}
.topTitle{
background-image:-webkit-linear-gradient(bottom, #59C8FF, #FAFEFF);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
font-size: 27px;
letter-spacing: 4px;
font-weight: bold;
}
.topcontent{
}
.topcontent{
display: flex;
align-items: center;
font-size: 24px;
......@@ -573,8 +574,8 @@ export default {
background-image:-webkit-linear-gradient(bottom, #59C8FF, #FAFEFF);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.centerViews{
}
.centerViews{
position: absolute;
top: 0px;
left: 0px;
......@@ -583,18 +584,18 @@ export default {
font-weight: 600;
text-align: center;
letter-spacing: 2px;
}
.centerViewsTitle1{
}
.centerViewsTitle1{
margin-top: 10.5vh;
background-image:-webkit-linear-gradient(bottom, #59C8FF, #FAFEFF);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.centerViewsTitle2{
}
.centerViewsTitle2{
margin-top: 10.5vh;
color:gainsboro;
}
.IntelligentDis1{
}
.IntelligentDis1{
height: 15vh;
width: 16vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/zhinengpaidan1.png');
......@@ -603,8 +604,8 @@ export default {
top: 6.5vh;
left: 0.8vw;
cursor: pointer;
}
.IntelligentDis2{
}
.IntelligentDis2{
height: 15vh;
width: 16vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/zhinengpaidan2.png');
......@@ -613,8 +614,8 @@ export default {
top: 6.5vh;
left: 0.8vw;
cursor: pointer;
}
.voiceAp1{
}
.voiceAp1{
height: 15vh;
width: 16vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/yuyinshenping1.png');
......@@ -623,8 +624,8 @@ export default {
top: 22vh;
left: 0.8vw;
cursor: pointer;
}
.voiceAp2{
}
.voiceAp2{
height: 15vh;
width: 16vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/yuyinshenping2.png');
......@@ -633,8 +634,8 @@ export default {
top: 22vh;
left: 0.8vw;
cursor: pointer;
}
.failureDe1{
}
.failureDe1{
height: 15vh;
width: 16vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/guzhangshenbao1.png');
......@@ -643,8 +644,8 @@ export default {
top: 37.5vh;
left: 0.8vw;
cursor: pointer;
}
.failureDe2{
}
.failureDe2{
height: 15vh;
width: 16vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/guzhangshenbao2.png');
......@@ -653,8 +654,8 @@ export default {
top: 37.5vh;
left: 0.8vw;
cursor: pointer;
}
.performanceSt1{
}
.performanceSt1{
height: 15vh;
width: 16vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/jixiao1.png');
......@@ -663,8 +664,8 @@ export default {
top: 53vh;
left: 0.8vw;
cursor: pointer;
}
.performanceSt2{
}
.performanceSt2{
height: 15vh;
width: 16vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/jixiao2.png');
......@@ -673,8 +674,8 @@ export default {
top: 53vh;
left: 0.8vw;
cursor: pointer;
}
.carIn1{
}
.carIn1{
height: 15vh;
width: 16vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/cheliangxinxi1.png');
......@@ -683,8 +684,8 @@ export default {
top: 68.5vh;
left: 0.8vw;
cursor: pointer;
}
.carIn2{
}
.carIn2{
height: 15vh;
width: 16vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/cheliangxinxi2.png');
......@@ -693,8 +694,8 @@ export default {
top: 68.5vh;
left: 0.8vw;
cursor: pointer;
}
.personalCe1{
}
.personalCe1{
height: 15vh;
width: 16vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/gerenzhongxin1.png');
......@@ -703,8 +704,8 @@ export default {
top: 84vh;
left: 0.8vw;
cursor: pointer;
}
.personalCe2{
}
.personalCe2{
height: 15vh;
width: 16vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/gerenzhongxin2.png');
......@@ -713,8 +714,8 @@ export default {
top: 84vh;
left: 0.8vw;
cursor: pointer;
}
.roadblockStyle{
}
.roadblockStyle{
position: absolute;
z-index: 1;
right: 170px;
......@@ -730,8 +731,8 @@ export default {
border: 1px solid lightskyblue;
opacity: 0.9;
cursor: pointer;
}
.dispatchCenterStyle{
}
.dispatchCenterStyle{
z-index: 1;
position: absolute;
right: 20px;
......@@ -747,8 +748,8 @@ export default {
border: 1px solid lightskyblue;
opacity: 0.9;
cursor: pointer;
}
.smallWindowStyle{
}
.smallWindowStyle{
color: red;
font-size: 50px;
position: absolute;
......@@ -756,8 +757,8 @@ export default {
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.waitingtrucksView{
}
.waitingtrucksView{
position: absolute;
right: 0px;
top: 8vh;
......@@ -768,8 +769,8 @@ export default {
z-index: 1;
padding: 10px 10px 0px;
box-sizing: border-box;
}
.waitingtrucksView_title{
}
.waitingtrucksView_title{
font-size: 26px;
font-weight: 600;
text-align: center;
......@@ -777,19 +778,19 @@ export default {
background-image:-webkit-linear-gradient(bottom, #59C8FF, #FAFEFF);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.waitingtrucksView_content{
}
.waitingtrucksView_content{
margin-top: 10px;
height: 70vh;
width: 100%;
overflow-y:auto;
}
.waitingtrucksView_content::-webkit-scrollbar {
}
.waitingtrucksView_content::-webkit-scrollbar {
/*滚动条整体样式*/
width : 8px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.waitingtrucksView_content::-webkit-scrollbar-thumb {
}
.waitingtrucksView_content::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius : 10px;
background-color: #274088;
......@@ -803,19 +804,310 @@ export default {
transparent 75%,
transparent
);
}
.waitingtrucksView_content::-webkit-scrollbar-track {
}
.waitingtrucksView_content::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
background : #ededed;
border-radius: 10px;
}
.waitingtrucksView_content>div{
color: rgb(254,210,5);
font-size: 19px;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: space-between;
}
}
.waitingtrucksView_content>div{
@media screen and (min-width:901px){
.mapcontainer {
height: 100vh;
width: 100vw;
top: 0px;
position: absolute;
overflow: hidden;
}
.mianViews{
width: 100vw;
height: 100vh;
overflow: hidden;
}
.topViews{
position: absolute;
top: 0px;
z-index: 1;
width: 100vw;
height: 6vh;
background-color: rgb(29,49,81);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px 20px;
box-sizing: border-box;
}
.topTitle{
background-image:-webkit-linear-gradient(bottom, #59C8FF, #FAFEFF);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
font-size: 27px;
letter-spacing: 4px;
font-weight: bold;
}
.topcontent{
display: flex;
align-items: center;
font-size: 24px;
font-weight: 600;
background-image:-webkit-linear-gradient(bottom, #59C8FF, #FAFEFF);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.centerViews{
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
font-size: 19px;
font-weight: 600;
text-align: center;
letter-spacing: 2px;
}
.centerViewsTitle1{
margin-top: 10.5vh;
background-image:-webkit-linear-gradient(bottom, #59C8FF, #FAFEFF);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.centerViewsTitle2{
margin-top: 10.5vh;
color:gainsboro;
}
.IntelligentDis1{
height: 15vh;
width: 16vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/zhinengpaidan1.png');
background-size:100% 100%;
position: absolute;
top: 6.5vh;
left: 0.8vw;
cursor: pointer;
}
.IntelligentDis2{
height: 15vh;
width: 16vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/zhinengpaidan2.png');
background-size:100% 100%;
position: absolute;
top: 6.5vh;
left: 0.8vw;
cursor: pointer;
}
.voiceAp1{
height: 15vh;
width: 16vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/yuyinshenping1.png');
background-size:100% 100%;
position: absolute;
top: 22vh;
left: 0.8vw;
cursor: pointer;
}
.voiceAp2{
height: 15vh;
width: 16vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/yuyinshenping2.png');
background-size:100% 100%;
position: absolute;
top: 22vh;
left: 0.8vw;
cursor: pointer;
}
.failureDe1{
height: 15vh;
width: 16vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/guzhangshenbao1.png');
background-size:100% 100%;
position: absolute;
top: 37.5vh;
left: 0.8vw;
cursor: pointer;
}
.failureDe2{
height: 15vh;
width: 16vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/guzhangshenbao2.png');
background-size:100% 100%;
position: absolute;
top: 37.5vh;
left: 0.8vw;
cursor: pointer;
}
.performanceSt1{
height: 15vh;
width: 16vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/jixiao1.png');
background-size:100% 100%;
position: absolute;
top: 53vh;
left: 0.8vw;
cursor: pointer;
}
.performanceSt2{
height: 15vh;
width: 16vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/jixiao2.png');
background-size:100% 100%;
position: absolute;
top: 53vh;
left: 0.8vw;
cursor: pointer;
}
.carIn1{
height: 15vh;
width: 16vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/cheliangxinxi1.png');
background-size:100% 100%;
position: absolute;
top: 68.5vh;
left: 0.8vw;
cursor: pointer;
}
.carIn2{
height: 15vh;
width: 16vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/cheliangxinxi2.png');
background-size:100% 100%;
position: absolute;
top: 68.5vh;
left: 0.8vw;
cursor: pointer;
}
.personalCe1{
height: 15vh;
width: 16vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/gerenzhongxin1.png');
background-size:100% 100%;
position: absolute;
top: 84vh;
left: 0.8vw;
cursor: pointer;
}
.personalCe2{
height: 15vh;
width: 16vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/gerenzhongxin2.png');
background-size:100% 100%;
position: absolute;
top: 84vh;
left: 0.8vw;
cursor: pointer;
}
.roadblockStyle{
position: absolute;
z-index: 1;
right: 170px;
bottom: 2vh;
height: 5vh;
line-height: 5vh;
width: 130px;
font-size: 18px;
text-align: center;
color: rgb(254,210,5);
background-color: rgb(26,39,83);
border-radius: 5px;
border: 1px solid lightskyblue;
opacity: 0.9;
cursor: pointer;
}
.dispatchCenterStyle{
z-index: 1;
position: absolute;
right: 20px;
bottom: 2vh;
height: 5vh;
line-height: 5vh;
width: 130px;
font-size: 18px;
text-align: center;
color: rgb(14,229,226);
background-color: rgb(26,39,83);
border-radius: 5px;
border: 1px solid lightskyblue;
opacity: 0.9;
cursor: pointer;
}
.smallWindowStyle{
color: red;
font-size: 50px;
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.waitingtrucksView{
position: absolute;
right: 0px;
top: 8vh;
width: 25vw;
height: 80vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/juxingkaobei6_1.png');
background-size:100% 100%;
z-index: 1;
padding: 10px 10px 0px;
box-sizing: border-box;
}
.waitingtrucksView_title{
font-size: 26px;
font-weight: 600;
text-align: center;
width: 100%;
background-image:-webkit-linear-gradient(bottom, #59C8FF, #FAFEFF);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.waitingtrucksView_content{
margin-top: 10px;
height: 70vh;
width: 100%;
overflow-y:auto;
}
.waitingtrucksView_content::-webkit-scrollbar {
/*滚动条整体样式*/
width : 8px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.waitingtrucksView_content::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius : 10px;
background-color: #274088;
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
);
}
.waitingtrucksView_content::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
background : #ededed;
border-radius: 10px;
}
.waitingtrucksView_content>div{
color: rgb(254,210,5);
font-size: 19px;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: space-between;
}
}
</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 to comment