vue scss手机端默认样式

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