Skip to content

T
techbook
Commit e9caa51d authored by zhangyanni's avatar zhangyanni
Browse files
Options

样式兼容

parent 26682edd
Hide whitespace changes
Inline Side-by-side
Showing with 86 additions and 21 deletions
package.json
View file @ e9caa51d
......@@ -6,9 +6,7 @@
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit",
"dev": "vue-cli-service build --mode dev",
"prod": "vue-cli-service build --mode prod"
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"axios": "^0.19.0",
......@@ -26,6 +24,7 @@
"vuex": "^3.0.1"
},
"devDependencies": {
"@babel/polyfill": "^7.4.4",
"@vue/cli-plugin-babel": "^3.10.0",
"@vue/cli-plugin-eslint": "^3.10.0",
"@vue/cli-plugin-unit-jest": "^3.10.0",
......
public/css/common.scss
View file @ e9caa51d
......@@ -147,7 +147,11 @@ h4{
text-align: left;
width: 100%;
margin-top: 40px;
display: flex;
display: -webkit-flex;/*新版本语法：chrome 21+*/
display: -webkit-box;/*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
display: -moz-box;/*老版本语法：Firefox(buggy)*/
display: -ms-flexbox;/*混合版本语法：IE 10*/
display: flex;/*新版本语法:opera 12.1,Firefox 22+*/
justify-content: space-around;
}
.requireContent>ul{
......
src/components/index/PageBottom.vue
View file @ e9caa51d
......@@ -63,7 +63,11 @@
width: 100%;
height: 246px;
background-color: #1E1E2D;
display: flex;
display: -webkit-flex;/*新版本语法：chrome 21+*/
display: -webkit-box;/*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
display: -moz-box;/*老版本语法：Firefox(buggy)*/
display: -ms-flexbox;/*混合版本语法：IE 10*/
display: flex;/*新版本语法:opera 12.1,Firefox 22+*/
flex-wrap: wrap;
justify-content: center;
}
......
src/components/index/PageTop.vue
View file @ e9caa51d
......@@ -184,18 +184,23 @@
.boxWrapper {
height: 60px;
width: 100%;
display: flex;
display: -webkit-flex;/*新版本语法：chrome 21+*/
display: -webkit-box;/*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
display: -moz-box;/*老版本语法：Firefox(buggy)*/
display: -ms-flexbox;/*混合版本语法：IE 10*/
display: flex;/*新版本语法:opera 12.1,Firefox 22+*/
align-items: center;
position: fixed;
z-index: 8999;
z-index: 1000;
top: 0;
left: 0;
padding: 0 40px;
box-shadow:0px 1px 5px 0px rgba(0,0,0,0.1);
}
/****左侧*****/
.header-left {
float: left;
/*float: left;*/
height: 60px;
line-height: 60px;
margin-right: 52px;
......@@ -211,7 +216,11 @@
/****内容*****/
.header-content {
& > ul {
display: flex;
display: -webkit-flex;/*新版本语法：chrome 21+*/
display: -webkit-box;/*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
display: -moz-box;/*老版本语法：Firefox(buggy)*/
display: -ms-flexbox;/*混合版本语法：IE 10*/
display: flex;/*新版本语法:opera 12.1,Firefox 22+*/
margin-top: 7px;
}
& li {
......@@ -235,7 +244,11 @@
/****右侧****/
.header-right {
display: flex;
display: -webkit-flex;/*新版本语法：chrome 21+*/
display: -webkit-box;/*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
display: -moz-box;/*老版本语法：Firefox(buggy)*/
display: -ms-flexbox;/*混合版本语法：IE 10*/
display: flex;/*新版本语法:opera 12.1,Firefox 22+*/
position: absolute;
align-items: center;
right: 40px;
......
src/views/index/pages/index.vue
View file @ e9caa51d
......@@ -407,7 +407,11 @@
}
.bannerCountWrapper {
display: flex;
display: -webkit-flex;/*新版本语法：chrome 21+*/
display: -webkit-box;/*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
display: -moz-box;/*老版本语法：Firefox(buggy)*/
display: -ms-flexbox;/*混合版本语法：IE 10*/
display: flex;/*新版本语法:opera 12.1,Firefox 22+*/
flex-wrap: wrap;
width: 100%;
/*height: 530px;*/
......@@ -430,7 +434,11 @@
}
.countUl {
padding-top: 56px;
display: flex;
display: -webkit-flex;/*新版本语法：chrome 21+*/
display: -webkit-box;/*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
display: -moz-box;/*老版本语法：Firefox(buggy)*/
display: -ms-flexbox;/*混合版本语法：IE 10*/
display: flex;/*新版本语法:opera 12.1,Firefox 22+*/
width: 820px;
justify-content: space-around;
& > li {
......@@ -466,7 +474,11 @@
background-color: #fff;
padding-left: 140px;
& > div {
display: flex;
display: -webkit-flex;/*新版本语法：chrome 21+*/
display: -webkit-box;/*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
display: -moz-box;/*老版本语法：Firefox(buggy)*/
display: -ms-flexbox;/*混合版本语法：IE 10*/
display: flex;/*新版本语法:opera 12.1,Firefox 22+*/
justify-content: flex-start;
height:50px;
& > span:first-child {
......@@ -490,7 +502,11 @@
padding: 50px 110px 40px 110px;
background-color: #ECECF2;
& > .buttonWrapper {
display: flex;
display: -webkit-flex;/*新版本语法：chrome 21+*/
display: -webkit-box;/*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
display: -moz-box;/*老版本语法：Firefox(buggy)*/
display: -ms-flexbox;/*混合版本语法：IE 10*/
display: flex;/*新版本语法:opera 12.1,Firefox 22+*/
justify-content: center;
}
& h4 {
......@@ -500,7 +516,11 @@
background-color: #5D78FF;
}
requireContent .contentInfo p{
display: flex;
display: -webkit-flex;/*新版本语法：chrome 21+*/
display: -webkit-box;/*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
display: -moz-box;/*老版本语法：Firefox(buggy)*/
display: -ms-flexbox;/*混合版本语法：IE 10*/
display: flex;/*新版本语法:opera 12.1,Firefox 22+*/
}
.requireContent .contentInfo p > span:first-child {
width: 40%;
......@@ -528,7 +548,11 @@
background-color: #fff;
}
& > .buttonWrapper {
display: flex;
display: -webkit-flex;/*新版本语法：chrome 21+*/
display: -webkit-box;/*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
display: -moz-box;/*老版本语法：Firefox(buggy)*/
display: -ms-flexbox;/*混合版本语法：IE 10*/
display: flex;/*新版本语法:opera 12.1,Firefox 22+*/
justify-content: center;
color: #fff;
& .lookmoreBtn {
......@@ -553,7 +577,11 @@
padding: 50px 110px 50px 110px;
background: #fff;
& > .buttonWrapper {
display: flex;
display: -webkit-flex;/*新版本语法：chrome 21+*/
display: -webkit-box;/*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
display: -moz-box;/*老版本语法：Firefox(buggy)*/
display: -ms-flexbox;/*混合版本语法：IE 10*/
display: flex;/*新版本语法:opera 12.1,Firefox 22+*/
justify-content: center;
}
& h4 {
......@@ -567,7 +595,11 @@
border-color: #5D78FF;
}
& > .cooperationUl {
display: flex;
display: -webkit-flex;/*新版本语法：chrome 21+*/
display: -webkit-box;/*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
display: -moz-box;/*老版本语法：Firefox(buggy)*/
display: -ms-flexbox;/*混合版本语法：IE 10*/
display: flex;/*新版本语法:opera 12.1,Firefox 22+*/
justify-content: space-around;
& li {
cursor: pointer;
......
src/views/loginregister/pages/login.vue
View file @ e9caa51d
......@@ -69,7 +69,11 @@
.loginWrapper {
width: 100%;
height: 100%;
display: flex;
display: -webkit-flex;/*新版本语法：chrome 21+*/
display: -webkit-box;/*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
display: -moz-box;/*老版本语法：Firefox(buggy)*/
display: -ms-flexbox;/*混合版本语法：IE 10*/
display: flex;/*新版本语法:opera 12.1,Firefox 22+*/
background: #fff;
& > .loginLeft {
width: 38%;
......@@ -94,7 +98,12 @@
& > .loginRight {
width: 62%;
position: relative;
display: flex;
display: -webkit-flex;/*新版本语法：chrome 21+*/
display: -webkit-flex;/*新版本语法：chrome 21+*/
display: -webkit-box;/*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
display: -moz-box;/*老版本语法：Firefox(buggy)*/
display: -ms-flexbox;/*混合版本语法：IE 10*/
display: flex;/*新版本语法:opera 12.1,Firefox 22+*/
flex-wrap: wrap;
justify-content: center;
.loginform {
......@@ -118,7 +127,11 @@
bottom: 18px;
left: 0;
text-align: center;
display: flex;
display: -webkit-flex;/*新版本语法：chrome 21+*/
display: -webkit-box;/*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
display: -moz-box;/*老版本语法：Firefox(buggy)*/
display: -ms-flexbox;/*混合版本语法：IE 10*/
display: flex;/*新版本语法:opera 12.1,Firefox 22+*/
justify-content: center;
}
......
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