vue scss手机端默认样式
时间:2023-01-18 05:00:00
src\assets\common.scss
@charset "utf-8"; $themeColor: cornflowerblue; $blueColor: #0088cc; /* 禁用iPhone中Safari自动调整字号 */ html {
-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; /* 解决IOS默认情况下滑动很卡 */ -webkit-overflow-scrolling: touch; } /* 禁止缩放表单 */ input[type='submit'], input[type='reset'], input[type='button'], input {
resize: none; border: none; } /* 取消高亮链接 */ body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* 设置HTML5元素为块 */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block; } /* 图片自适应 */ img {
width: 100%; height: 100%; display: block; } /* 初始化 */ body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
margin: 0; padding: 0; } body {
font: 14px/1.5 'Microsoft YaHei', '宋体', Tahoma, Arial, sans-serif;
color: #555;
background-color: #f7f7f7;
}
em, i {
font-style: normal;
}
ul, li {
list-style-type: none;
}
strong {
font-weight: normal;
}
.clearfix:after {
content: '';
display: inline-block;
visibility: hidden;
height: 0;
clear: both;
}
.clearfix {
zoom: 1;
}
a {
text-decoration: none;
color: #969696;
font-family: 'Microsoft YaHei', Tahoma, Arial, sans-serif;
}
a:hover {
text-decoration: none;
}
ul, ol {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-family: 'Microsoft YaHei';
}
img {
border: none;
}
input {
font-family: 'Microsoft YaHei';
}
/* 超过一行内容多的变成... */
.dian1 {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
/* 超过两行行内容多的变成... */
.dian2 {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* 超过三行内容多的变成... */
.dian3 {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
/* 移动端点击a链接出现蓝色背景问题解决 */
a:link, a:active, a:visited, a:hover {
background: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
/* 清除浮动 */
.cb {
clear: both;
}
.w50 {
width: 50%;
}
.w25 {
width: 25%;
}
.w20 {
width: 20%;
}
.w33 {
width: 33.333333%;
}
.fl {
float: left;
}
.fr {
float: right;
}
.flex {
display: flex;
flex-flow: row wrap;
}
.flex-left, .flex-right {
line-height: 25px;
}
.flex-right {
text-align: right;
flex: 1;
}
.flex-1 {
flex: 1;
}
.font10 {
font-size: 10px;
}
.font12 {
font-size: 12px;
}
.font14 {
font-size: 14px;
}
.font18 {
font-size: 18px;
}
.font20 {
font-size: 20px;
}
.db {
display: block !important;
}
.dib {
display: inline-block !important;
vertical-align: top;
}
.center {
text-align: center;
}
.dn {
display: none;
}
.red {
color: #f56c6c;
}
.yellow {
color: #e6a23c;
}
.blue {
color: $blueColor;
}
// 常规文字 .gray {
color: #606266;
}
// 次要文字 .gray1 {
color: #909399;
}
// 占位文字 .gray2 {
color: #c0c4cc;
}
//主题字体颜色 .themeColor {
// color: $themeColor;
color: $blueColor;
}
//主题背景颜色 .themeBackground {
// background: $themeColor;
background: $blueColor;
}
.bold {
font-weight: bold;
}
/*小按钮*/
.btn {
line-height: 1;
padding: 5px 10px;
background: $blueColor !important;
border: 1px solid $blueColor !important;
color: #fff;
border-radius: 15px;
text-align: center;
}
/*大按钮*/
.sub-btn {
line-height: 25px;
width: calc(100% - 40px) !important;
position: fixed !important;
bottom: 15px;
left: 20px;
}
.relative {
position: relative !important;
z-index: 0;
}
.absolute {
position: absolute !important;
z-index: 0;
}
.fixed {
position: fixed !important;
top: 0;
z-index: 1;
width: 100%;
}
/*线*/
.border-top {
border-top: 1px solid #ebedf0;
}
.border-bottom {
border-bottom: 1px solid #ebedf0;
}
.border-left {
border-left: 1px solid #ebedf0;
}
.border-right {
border-right: 1px solid #ebedf0;
}
/*下阴影*/
.bottom-box-shadow {
box-shadow: 0 3px 5px rgba(211, 202, 202, 0.2);
}
src\App.vue